From 8021e580a24fa4703238af27da3bbdee7ff4b144 Mon Sep 17 00:00:00 2001
From: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com>
Date: Wed, 26 Mar 2025 16:54:08 +1100
Subject: sidebar: connectivity pane

Bluetooth module
---
 scss/sidebar.scss | 63 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)

(limited to 'scss')

diff --git a/scss/sidebar.scss b/scss/sidebar.scss
index 8f4d6d7..8611ed9 100644
--- a/scss/sidebar.scss
+++ b/scss/sidebar.scss
@@ -283,4 +283,67 @@
             }
         }
     }
+
+
+    .bluetooth {
+        .list {
+            @include lib.spacing(10, true);
+        }
+
+        .device {
+            @include lib.rounded(20);
+
+            background-color: color.change(scheme.$surface1, $alpha: 0.4);
+            padding: lib.s(10) lib.s(15);
+
+            @include lib.spacing(5);
+
+            &.connected {
+                background-color: color.change(color.mix(scheme.$surface1, scheme.$primary, 50%), $alpha: 0.4);
+
+                & > button {
+                    background-color: color.change(color.mix(scheme.$surface1, scheme.$primary, 50%), $alpha: 0.5);
+
+                    &:hover,
+                    &:focus {
+                        background-color: color.change(color.mix(scheme.$surface1, scheme.$primary, 30%), $alpha: 0.5);
+                    }
+
+                    &:active {
+                        background-color: color.change(color.mix(scheme.$surface1, scheme.$primary, 20%), $alpha: 0.5);
+                    }
+                }
+            }
+
+            .icon {
+                font-size: lib.s(28);
+                margin-right: lib.s(12);
+            }
+
+            .sublabel {
+                font-size: lib.s(14);
+                color: scheme.$subtext0;
+            }
+
+            & > button {
+                @include lib.rounded(1000);
+                @include lib.element-decel;
+                @include font.icon;
+
+                font-size: lib.s(18);
+                min-width: lib.s(30);
+                min-height: lib.s(30);
+                background-color: color.change(scheme.$surface1, $alpha: 0.5);
+
+                &:hover,
+                &:focus {
+                    background-color: color.change(scheme.$surface2, $alpha: 0.5);
+                }
+
+                &:active {
+                    background-color: color.change(scheme.$overlay0, $alpha: 0.5);
+                }
+            }
+        }
+    }
 }
-- 
cgit v1.2.3-freya