Make overflowing icons expandable via caret button and fix header btn opacity

public/styles/styles-main.css

@@ -130,7 +130,7 @@ html {
 }
 
 header {
-    position: absolute;
+    position: relative;
     align-items: baseline;
     padding: 8px 12px;
     box-sizing: border-box;
@@ -140,67 +140,95 @@ header {
     right: 0;
 }
 
-header > .row-reverse > * {
+header.overflow-hidden {
+    overflow: hidden;
+}
+
+header:not(.overflow-expanded) {
+    height: 56px;
+}
+
+header > * {
     margin-left: 4px;
     margin-right: 4px;
 }
 
-header > .row-reverse > div {
+header > * {
     display: flex;
     flex-direction: column;
     align-self: flex-start;
     touch-action: manipulation;
 }
 
-header > .row-reverse > div .icon-button {
+header > .icon-button {
     height: 40px;
+}
+
+header * {
     transition: all 300ms;
 }
 
-header > .row-reverse > div > div {
+#theme-wrapper > div {
     display: flex;
     flex-direction: column;
 }
 
-header > .row-reverse > div:not(:hover) .icon-button:not(.selected) {
+/* expand theme buttons */
+#theme-wrapper:not(:hover) .icon-button:not(.selected) {
     height: 0;
     opacity: 0;
 }
 
 #theme-wrapper:hover::before {
     border-radius: 20px;
-    background: currentColor;
-    opacity: 0.1;
+    background: var(--primary-color);
+    opacity: 0.2;
     transition: opacity 300ms;
     content: '';
     position: absolute;
     width: 40px;
+    height: 120px;
     top: 0;
-    bottom: 0;
     margin-top: 8px;
     margin-bottom: 8px;
 }
 
-header > .row-reverse > div:hover .icon-button.selected::before {
-    opacity: 0.1;
+#theme-wrapper:hover .icon-button:not(.selected):hover:before {
+    opacity: 0.3;
+}
+
+#theme-wrapper:hover .icon-button.selected::before {
+    opacity: 0.3;
 }
 
 @media (pointer: coarse) {
-    header > .row-reverse > div:hover .icon-button.selected:hover::before {
-        opacity: 0.2;
+    #theme-wrapper:hover .icon-button.selected:hover::before {
+        opacity: 0.3;
     }
 
-    header > .row-reverse > div .icon-button:not(.selected) {
+    #theme-wrapper .icon-button:not(.selected) {
         height: 0;
         opacity: 0;
         pointer-events: none;
     }
 
-    header > .row-reverse > div > div {
+    #theme-wrapper > div {
         flex-direction: column-reverse;
     }
 }
 
+#expand > .icon {
+    transition: transform 150ms ease-out
+}
+
+html:not([dir="rtl"]) #expand.flipped  > .icon {
+    transform: rotate(-90deg);
+}
+
+html[dir="rtl"] #expand.flipped  > .icon {
+    transform: rotate(90deg);
+}
+
 [hidden] {
     display: none !important;
 }
@@ -334,19 +362,16 @@ x-noscript {
 
 /* Animations */
 
+/* Opacity for elements at keyframe 100% is set on element (default 1) */
 @keyframes fade-in {
     0% {
         opacity: 0;
     }
-    100% {
-        opacity: 1;
-    }
 }
 
 #center {
     position: relative;
     display: flex;
-    margin-top: 56px;
     flex-direction: column-reverse;
     flex-grow: 1;
     justify-content: space-around;
@@ -359,18 +384,10 @@ x-noscript {
 
 /* Peers  */
 
-#x-peers-filler {
-    display: flex;
-    flex-grow: 1;
-}
-
 x-peers {
     position: relative;
     display: flex;
     flex-flow: row wrap;
-    flex-grow: 1;
-    align-items: start !important;
-    justify-content: center;
 
     z-index: 2;
     transition: background-color 0.5s ease;
@@ -382,8 +399,6 @@ x-peers {
     --peers-per-row: 6; /* default if browser does not support :has selector */
     --x-peers-width: min(100vw, calc(var(--peers-per-row) * (var(--peer-width) + 25px) - 16px));
     width: var(--x-peers-width);
-    margin-right: 20px;
-    margin-left: 20px;
 }
 
 /* Empty Peers List */
@@ -597,6 +612,7 @@ x-dialog:not([show]) x-background {
     left: 0;
     right: 0;
     bottom: 0;
+    z-index: -1;
     opacity: 0;
     background-color: var(--accent-color);
     transition: opacity 300ms;
@@ -604,17 +620,17 @@ x-dialog:not([show]) x-background {
 
 .btn:not([disabled]):hover:before,
 .icon-button:hover:before {
-    opacity: 0.1;
+    opacity: 0.3;
 }
 
 .btn[selected],
 .icon-button[selected] {
-    opacity: 0.1;
+    opacity: 0.3;
 }
 
 .btn:focus:before,
 .icon-button:focus:before {
-    opacity: 0.2;
+    opacity: 0.4;
 }
 
 .btn-round {
@@ -810,14 +826,12 @@ x-dialog[show] ~ div x-toast {
 /* Instructions */
 
 x-instructions {
+    display: flex;
     position: relative;
     opacity: 0.5;
     text-align: center;
-    margin-left: 10px;
-    margin-right: 10px;
-    display: flex;
+    margin: 50px 10px 0px;
     flex-direction: column;
-    flex-grow: 1;
     justify-content: center;
 }
 
@@ -834,8 +848,9 @@ x-instructions[drop-bg]:not([drop-peer]):before {
 }
 
 
+x-peers:empty,
 x-peers:empty~x-instructions {
-    opacity: 0 !important;
+    display: none;
 }
 
 @media (hover: none) and (pointer: coarse) {