Added bluetooth menu.

2024-06-16 18:43:33 -07:00
parent 26d2fcde0e
commit 904c5b8cd0
18 changed files with 1376 additions and 182 deletions
--- a/scss/menus/menu.scss
+++ b/scss/menus/menu.scss
@@ -0,0 +1,209 @@
+.menu-slider {
+    // @include unset($rec: true);
+
+    trough {
+        background: $base;
+
+        highlight,
+        progress {
+            background: $peach;
+            border-radius: 0.7rem;
+        }
+    }
+
+    slider {
+        box-shadow: none;
+        background-color: transparent;
+        min-height: 1.6rem;
+        min-width: 1.6rem;
+        border: 0rem solid transparent;
+        border-radius: 0.7rem;
+    }
+
+    &:hover {
+        trough {
+            background: $surface0;
+        }
+
+        slider {
+            background: $overlay0;
+            box-shadow: none;
+        }
+    }
+
+    &:disabled {
+
+        highlight,
+        progress {
+        }
+    }
+
+    trough:focus {
+
+        slider {
+        }
+    }
+}
+
+.menu-switch {
+    background-color: $surface0;
+
+    &:checked {
+        background: $sky;
+    }
+
+    trough {
+        highlight,
+        progress {
+            background-color: $peach;
+            border-radius: 0.7rem;
+        }
+    }
+
+    slider {
+        box-shadow: none;
+        background-color: $overlay0;
+        min-height: 1.2rem;
+        min-width: 1.2rem;
+        border: 0rem solid transparent;
+        border-radius: 0.7rem;
+        margin: 0.1rem 0.2rem;
+    }
+
+    &:hover {
+        trough {
+            background: $surface0;
+        }
+
+        slider {
+            background: $overlay0;
+            box-shadow: none;
+        }
+    }
+
+    &:active {
+        background-color: $sky;
+        highlight,
+        progress {
+        }
+    }
+
+    &:disabled {
+
+        highlight,
+        progress {
+        }
+    }
+
+    trough:focus {
+
+        slider {
+        }
+    }
+}
+
+.menu-separator {
+    min-height: .1rem;
+    margin: .6rem 0rem;
+    background: $surface1;
+}
+
+.menu-items {
+    background: $mantle;
+    border: .25rem solid $surface0;
+    border-radius: .7rem;
+    min-width: 375px;
+    color: $text;
+}
+
+.menu-items-container {
+    margin: 1rem 1.5rem;
+}
+
+.menu-dropdown-label {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: $text;
+}
+
+.menu-active {
+    font-size: 1.15rem;
+    font-weight: bold;
+    margin: 0rem .5rem;
+    margin-bottom: 0.5rem;
+    margin-top: 0.5rem;
+}
+
+.menu-active-icon {
+    color: $overlay1;
+    font-size: 1.7rem;
+    font-weight: bold;
+    margin-right: 0.7rem;
+}
+
+.menu-active-percentage {
+    font-size: 1.1rem;
+    margin-left: 0.5rem;
+    font-weight: bold;
+}
+
+.menu-active-slider {
+    margin-left: 1rem;
+    margin-right: 1.5rem;
+}
+
+.menu-active-slider * {
+    min-height: 1.3rem;
+    border-radius: .7rem;
+}
+.menu-slider-container {
+    margin-bottom: .7rem;
+}
+
+.menu-label {
+    color: $text;
+    font-size: 1.3rem;
+    font-weight: bold;
+}
+
+.menu-label-dim {
+    color: $overlay0;
+    margin-right: 1rem;
+    font-size: 1rem;
+    font-weight: bold;
+}
+
+.dim {
+    color: $overlay0;
+}
+.menu-icon-button {
+    &:hover {
+        color: $surface2;
+    }
+}
+
+.menu-label-container {
+    margin-bottom: 1.3rem;
+}
+
+.menu-button {
+    margin-bottom: .4rem;
+}
+
+.menu-button-name {
+    font-size: 1.1rem;
+    font-weight: bold;
+    margin-left: 1rem;
+    margin-right: 1.2rem;
+}
+
+.menu-button-icon {
+    font-size: 1.3rem;
+    font-weight: bold;
+    color: $overlay0;
+    margin-right: .5rem;
+}
+
+.menu-item-box {
+    margin-bottom: 0.5rem;
+}