+3
-3
@@ -124,7 +124,7 @@ svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width:
|
||||
|
||||
.transport {
|
||||
flex: 0 0 auto;
|
||||
width: 66px; height: 52px;
|
||||
width: 66px; height: 62px;
|
||||
border-radius: 16px;
|
||||
background: var(--raised);
|
||||
display: grid; place-items: center;
|
||||
@@ -136,6 +136,7 @@ svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width:
|
||||
everything else in here uses. */
|
||||
.transport .icon-play { fill: currentColor; stroke: none; }
|
||||
.transport .icon-pause { stroke-width: 2.4; }
|
||||
.transport[data-role="next"] svg { fill: currentColor; stroke: none; }
|
||||
|
||||
/* Which icon shows is a class on the button, not `hidden` on the svg:
|
||||
`hidden` is an HTMLElement property and SVGElement does not inherit it,
|
||||
@@ -146,7 +147,7 @@ svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width:
|
||||
|
||||
/* --- join / leave the AVR -------------------------------------------- */
|
||||
.toggle {
|
||||
height: 52px; border-radius: 16px;
|
||||
height: 62px; border-radius: 16px;
|
||||
background: var(--raised);
|
||||
display: flex; align-items: center; justify-content: center; gap: 10px;
|
||||
font-size: 15px; font-weight: 550;
|
||||
@@ -191,7 +192,6 @@ svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width:
|
||||
background: none; border: 1px solid var(--edge); color: var(--muted);
|
||||
}
|
||||
.joined .toggle .dot { display: none; }
|
||||
.joined .transport { height: 40px; width: 58px; }
|
||||
.joined .toggle:active { background: var(--raised); color: var(--ink); }
|
||||
|
||||
/* --- misc ------------------------------------------------------------- */
|
||||
|
||||
Reference in New Issue
Block a user