diff --git a/src/shared/styles/about.css b/src/shared/styles/about.css deleted file mode 100644 index 3d4e8a0..0000000 --- a/src/shared/styles/about.css +++ /dev/null @@ -1,78 +0,0 @@ -#about-menu { - background-color: alpha(#000, 0.34); - - box-shadow: - inset 0 -0.5px 0 0.5px alpha(#555, 0.7), - inset 0 0.5px 0 0.5px alpha(#777, 0.7); - border: 1px solid @border-subtle; - border-top: none; - border-radius: 1.25rem; - padding: 2rem; -} - -#about-options { - background-color: alpha(#333, 0.9); - border-radius: apply(radius-md); - padding: 2rem; -} - -#about-logo-box { - margin-top: 2rem; - margin-bottom: 2rem; -} - -#about-button-box { - padding: 1rem; -} -#vendor-label { - color: #999999; - margin-top: -1rem; -} - -#info-label { - color: #888888; -} -#about-info-title-box { - padding-left: 4rem; -} - -#about-name-label { - font-size: 24px; - margin: 0px; - font-weight: 600; -} - -#about-date-label { - font-size: 11px; - margin: 0px; - color: #ddd; - font-weight: 400; - margin-bottom: 2rem; -} - -#about-chip-title-label, -#about-so-title-label, -#about-mem-title-label { - font-size: 12px; - margin: 0px; - margin-right: 10px; - font-weight: 500; -} - -#more-info-button { - background-color: #888888; - border-radius: apply(radius-xs); - padding: 0px 10px; - margin: 1px 2px; - transition: all 200ms ease-in-out; -} -#more-info-button:hover { - background-color: rgb(72, 130, 255); -} - -#more-info-button label { - font-size: 12px; - margin: 0px; - font-weight: 400; - color: @text-main; -} diff --git a/src/shared/styles/battery-widget.css b/src/shared/styles/battery-widget.css deleted file mode 100644 index c042cd2..0000000 --- a/src/shared/styles/battery-widget.css +++ /dev/null @@ -1,157 +0,0 @@ -#battery-window { - margin: 6px; - /* background-color: alpha(@text-main, 0.09); */ - border: 1px solid @border-subtle; - box-shadow: inset 0 0 200px 0 @border-subtle; - border-radius: apply(radius-sm); -} - -#battery-widget { - background: rgba(0, 0, 0, 0); - padding-left: 5px; - padding-right: 5px; -} -.battery-main-title { - font-size: 16px; - font-weight: bold; - - color: rgba(255, 255, 255, 0.95); - margin: 6px 10px; -} - -.battery-power-source { - font-size: 0.9em; - font-weight: 500; - color: rgba(255, 255, 255, 0.8); - margin: 0px 12px; -} - -.battery-section-title { - font-size: 0.9em; - font-weight: 500; - color: rgba(255, 255, 255, 0.9); - margin: 8px 12px 4px 12px; -} - -.battery-energy-item { - margin: 4px 12px; - padding: 4px 0; -} - -.battery-status-section { - /* background: rgba(255, 255, 255, 0.06); */ - /* border-radius: apply(radius-md); */ - padding: 2px; - /* margin: 8px 0; */ - /* border: 1px solid rgba(255, 255, 255, 0.08); */ -} - -.battery-percentage { - font-size: 16px; - margin-right: 8px; - font-weight: 500; - color: rgba(255, 255, 255, 0.95); -} - -#energy-mode-button-clickable { - background: transparent; - border: none; - border-radius: apply(radius-sm); - padding: 6px 12px; - margin: 1px 0; -} - -#energy-mode-button-clickable:hover { - background: rgba(255, 255, 255, 0.1); -} - -#energy-mode-icon { - border-radius: apply(radius-full); - padding: 4px; - margin-top: -2px; - margin-bottom: -2px; - margin-right: 6px; - margin-left: -6px; - background-color: rgba(255, 255, 255, 0.1); - color: rgba(255, 255, 255, 0.7); -} - -#energy-mode-icon.connected { - background-color: @accent; - color: @text-main; -} -.battery-power-source { - font-size: 12px; - margin-bottom: -4px; - color: alpha(@text-main, 0.5); -} -.battery-section-title { - font-size: 14px; - color: alpha(@text-main, 0.7); - margin: 2px 0 0 8px; -} -.battery-power-mode { - font-size: 13px; -} - -.battery-settings-button:hover { - margin-top: -5px; - background: alpha(@text-main, 0.1); - min-height: 30px; - border-radius: apply(radius-sm); -} -.battery-settings-button { - margin-top: -5px; - min-height: 30px; - border-radius: apply(radius-sm); -} -.battery-settings-button label { - font-weight: 500; - color: alpha(@text-main, 1); -} -#energy-mode-button:first-child { - margin-top: 0; -} -#energy-mode-button { - margin-top: -8px; - margin-bottom: 4px; - color: rgba(255, 255, 255, 0.85); -} -.gamemode-button { - font-size: 12px; - margin-left: -6px; - color: rgba(255, 255, 255, 0.85); -} - -#game-mode-button { - margin: 2px 0; -} -#game-mode-icon { - margin-left: -6px; -} - -#game-mode-button-clickable { - background: transparent; - border: none; - border-radius: apply(radius-sm); - padding: 6px 12px; - margin: 1px 0; - /* min-height: 36px; */ -} - -#game-mode-button-clickable:hover { - background: rgba(255, 255, 255, 0.1); -} - -#game-mode-icon { - border-radius: apply(radius-full); - padding: 4px; - margin-right: 8px; - background-color: rgba(255, 255, 255, 0.1); - color: rgba(255, 255, 255, 0.7); -} - -#game-mode-icon.connected { - background-color: @accent; - color: @text-main; -} diff --git a/src/shared/styles/constant.css b/src/shared/styles/constant.css deleted file mode 100644 index 8fe1a5a..0000000 --- a/src/shared/styles/constant.css +++ /dev/null @@ -1,31 +0,0 @@ -@define-color bg alpha(#fff, 0.07); -@define-color hover alpha(#fff, 0.1); -@define-color border var(--outline); -@define-color active alpha(#fff, 0.9); -@define-color urgent alpha(var(--on-error), 0.7); - -/* New common colors */ -@define-color accent #007aff; -@define-color accent-hover #0056cc; -@define-color bg-lighter alpha(#fff, 0.12); -@define-color bg-darker alpha(#000, 0.08); -@define-color text-main #ffffff; -@define-color text-secondary alpha(#fff, 0.6); -@define-color text-dim #999; -@define-color shadow-color alpha(#000, 0.3); - -/* Border and Shadow specific */ -@define-color border-subtle alpha(#111, 0.3); -@define-color border-strong alpha(#111, 0.4); -@define-color inner-shadow alpha(#000, 0.3); - -/* Constants */ -/* :vars replaced by defines */ - @define radius-xs 4px; - @define radius-sm 8px; - @define radius-md 12px; - @define radius-lg 16px; - @define radius-xl 20px; - @define radius-full 999px; - @define transition-fast 0.15s; - @define transition-slow 0.3s; diff --git a/src/shared/styles/controlcenter.css b/src/shared/styles/controlcenter.css deleted file mode 100644 index 72fefa2..0000000 --- a/src/shared/styles/controlcenter.css +++ /dev/null @@ -1,1019 +0,0 @@ -.title { - font-size: 16px; - font-family: "SF Pro Rounded"; - font-weight: bold; -} - -#control-center-menu { - background-color: transparent; - border-radius: apply(radius-md); - box-shadow: none; - margin: 0; -} - -#separator { - min-height: 0.09rem; - margin: 3px 0; - background-color: alpha(@text-main, 0.2); - border-radius: apply(radius-sm); -} - -/* #bluetooth-control-window { */ -/* #wifi-control-window, */ -#battery-control-window { - margin: 6px; - /* background-color: alpha(@text-main, 0.09); */ - border: 1px solid @border-subtle; - box-shadow: inset 0 0 200px 0 @border-subtle; - border-radius: apply(radius-md); -} - -#bluetooth-title, -#wifi-title { - font-size: 16px; - font-weight: bold; -} - -#control-center-widgets { - background-color: alpha(#010101, 0.01); - box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4); - /* border: 1px solid @border-strong; */ - border-radius: apply(radius-md); - padding: 0.5rem; -} - -#focus-widget {} - -#wb-widget, -#brightness-menu { - background-color: @bg-darker; - box-shadow: inset 0 0 0 0.5px alpha(@text-dim, 0.4); - border: 1px solid @border-strong; - border-radius: apply(radius-md); -} - -/* Widgets */ -#wifi-widget, -#bluetooth-widget, -#nightlight-widget { - min-width: 140px; - padding: 5px 0 0px 0; -} - -.icon { - background-color: #2369ff; - font-size: 15px; - padding: 20px 20px; -} - -#bluetooth-widget-label, -#wifi-widget-label, -#nightlight-widget-label { - font-size: 12px; - margin-left: 5px; - font-weight: 500; - color: @text-dim; -} - -/* WiFi Password Dialog */ -#wifi-password-dialog { - background-color: transparent; -} - -#wifi-dialog-background { - background-color: alpha(@text-main, 0.05); - border-radius: apply(radius-md); - border: 1px solid rgba(255, 255, 255, 0.1); - padding: 20px; - min-width: 450px; -} - -#wifi-dialog-title-container { - /* margin-bottom: 12px; */ -} - -#wifi-dialog-icon { - color: @accent; - margin-right: 4px; -} - -#wifi-dialog-title { - color: @text-main; - font-size: 14px; - font-weight: 500; -} - -#wifi-dialog-error { - color: #ff4444; - font-size: 12px; - font-weight: 500; - /* margin-bottom: 8px; */ -} - -#wifi-dialog-password-container { - margin: 5px 0; -} - -#wifi-dialog-password-label { - color: @text-main; - font-size: 13px; - font-weight: 500; - margin-bottom: 4px; -} - -#wifi-dialog-password-entry { - background-color: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: apply(radius-xs); - padding: 8px 12px; - color: @text-main; - font-size: 13px; -} - -#wifi-dialog-password-entry:focus { - border-color: @accent; - box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3); - background-color: rgba(255, 255, 255, 0.15); -} - -#wifi-dialog-show-password-box { - margin-top: 4px; -} - -#wifi-dialog-show-password-button { - background-color: transparent; - border: none; - padding: 4px; - border-radius: apply(radius-xs); - min-width: 24px; - min-height: 24px; -} - -#wifi-dialog-show-password-button:hover { - background-color: @hover; -} - -#wifi-dialog-show-password-button image { - color: @text-main; -} - -#wifi-dialog-show-password-label { - color: @text-main; - font-size: 12px; -} - -#wifi-dialog-button-box { - margin-top: -15px; -} - -#wifi-dialog-cancel-button, -#wifi-dialog-join-button { - border-radius: apply(radius-xs); - font-size: 13px; - font-weight: 500; - min-width: 80px; - min-height: 30px; -} - -#wifi-dialog-cancel-button { - background-color: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - color: @text-main; -} - -#wifi-dialog-cancel-button:hover { - background-color: rgba(255, 255, 255, 0.15); -} - -#wifi-dialog-join-button { - background-color: @accent; - border: 1px solid @accent; - color: @text-main; -} - -#wifi-dialog-join-button:hover { - background-color: @accent-hover; - border-color: @accent-hover; -} - -#wifi-dialog-join-button.disabled { - opacity: 0.5; - background-color: #555555; - border-color: #555555; - color: #aaaaaa; -} - -#wifi-dialog-join-button.disabled:hover { - background-color: #555555; - border-color: #555555; - color: #aaaaaa; -} - -#bluetooth-widget-title { - font-size: 12px; - font-weight: 500; - color: @text-main; -} - -/* #bluetooth-widget-top { */ -/* padding-bottom: 10px; */ -/* border-bottom: 1px solid alpha(#aaa, 0.3); */ -/* } */ - -#device-icon { - border-radius: apply(radius-full); - padding: 5px; - margin-bottom: 2.5px; - margin-top: 2.5px; - margin-right: 10px; - background-color: #555; -} - -#devices-title { - color: @text-secondary; -} - -#device-icon.paired { - background-color: #888; -} - -#device-icon.connected { - background-color: #2369ff; -} - -#toggle-button { - min-width: 40px; - min-height: 20px; - background-color: #bababa; - border-radius: apply(radius-md); - padding: 2px; - transition: background-color 0.3s ease; -} - -#toggle-button slider { - background-color: @text-main; - border-radius: apply(radius-full); - min-width: 16px; - min-height: 8px; - transition: background-color 0.1s cubic-bezier(0.5, 0.25, 0, 1.25); -} - -#toggle-button:checked { - background-color: #4487f6; -} - -/* #toggle-button:checked slider { */ -/* background-color: @text-main; */ -/* } */ -/**/ -/* #toggle-button:checked image { */ -/* opacity: 0; */ -/* } */ - -.menu { - background-color: @bg-darker; - box-shadow: inset 0 0 0 0.5px alpha(@text-dim, 0.4); - border: 1px solid @border-strong; - border-radius: apply(radius-md); - margin: 5px; - /* background-color: alpha(@text-dim, 0.1); */ - /* border: 0.5px solid alpha(#000, 0.4); */ - /* border-radius: apply(radius-sm); */ - padding: 1rem; -} - -.title { - padding: 0; - font-weight: 500; - font-size: 12px; -} - -#bluetooth-widget-name, -#wifi-widget-name, -#nightlight-widget-name { - margin-top: 6px; - font-size: 14px; - font-weight: bold; -} - -.ct { - margin-left: 5px; -} - -#vol-slider-box { - /* margin-bottom: 2px; */ - margin-top: -10px; - /* border: 1px solid alpha(@text-main, 1); */ -} - -#volume-widget-slider { - /* margin-bottom: 2px; */ -} - -#volume-widget-icon { - font-size: 22px; - margin-top: -35px; - margin-right: -36px; - color: #000; -} - -#brightness-widget-icon { - font-size: 15px; - margin-top: -27px; - margin-right: -29px; - color: #000; -} - -#control-center-menu slider { - background: linear-gradient(135deg, @text-main 0%, #f0f1f2 100%); - border-color: #000; - min-width: 28px; - min-height: 28px; - margin: -2px; - border-radius: apply(radius-full); - /* background-image: none; */ - /* background-color: transparent; */ - /* min-width: 4px; */ - /* min-height: 40px; */ - /* margin: -9px; */ -} - -#control-center-menu slider:hover { - border-color: @text-dim; - min-width: 30px; - min-height: 30px; - margin: -3px; - border-radius: apply(radius-full); - /* background-image: none; */ - /* background-color: transparent; */ - /* min-width: 4px; */ - /* min-height: 40px; */ - /* margin: -9px; */ -} - -#control-center-menu scale { - background-color: transparent; - margin-top: 10px; - border-radius: apply(radius-xl); -} - -#control-center-menu trough { - min-width: 25px; - border-radius: apply(radius-full); - background-color: alpha(#666, 0.5); - border: 1px solid alpha(#444, 0.3); -} - -#control-center-menu highlight { - background: alpha(@text-main, 0.8); - border-radius: apply(radius-full); -} - -#control-center-menu mark indicator { - background: none; - background-image: none; - color: alpha(@text-main, 0.2); -} - -#control-center-menu mark label { - background: none; - background-image: none; - color: alpha(@text-main, 0.2); -} - -/* Per-app volume control styles */ -#per-app-volume-control { - min-height: 140px; - min-width: 328px; - /* background-color: @shadow-color; */ - /* background-color: alpha(@text-dim, 0.1); */ - /* box-shadow: inset 0 0 200px 0 @border-subtle; */ - /* border: 0.5px solid alpha(#000, 0.4); */ - border-radius: apply(radius-sm); - padding: 1rem; - - /* padding: 1rem; */ -} - -#apps-scrolled-container { - min-height: 120px; - min-width: 120px; -} - -#back-button { - padding: 8px 12px; - background-color: @hover; - border-radius: apply(radius-sm); - border: none; - color: @text-main; - font-size: 13px; - font-weight: 500; - transition: background-color 0.2s ease; -} - -#back-button:hover { - background-color: alpha(@text-main, 0.18); -} - -/* Apple-style app volume items */ -.apple-app-volume-item { - margin: 3px 0; - padding: 16px; - background-color: alpha(@text-main, 0.08); - border-radius: apply(radius-md); - border: 1px solid alpha(@text-main, 0.12); - transition: background-color apply(transition-fast); -} - -.apple-app-volume-item:hover { - background-color: alpha(@text-main, 0.12); -} - -.apple-app-name { - font-size: 14px; - font-weight: 600; - color: @text-main; - margin-bottom: 4px; - letter-spacing: -0.01em; -} - -/* Apple-style volume slider */ -#apple-volume-slider { - background-color: transparent; - margin-top: 4px; - margin-bottom: 4px; - min-height: 32px; -} - -#apple-volume-slider trough { - min-width: 28px; - min-height: 6px; - border-radius: 3px; - background-color: alpha(@text-main, 0.25); - border: none; - box-shadow: inset 0 1px 2px alpha(#000, 0.2); -} - -#apple-volume-slider highlight { - background: linear-gradient(90deg, @accent 0%, #0051d0 100%); - border-radius: 3px; - border: none; - box-shadow: 0 1px 3px alpha(@accent, 0.3); -} - -#apple-volume-slider slider { - background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); - /* border: 2px solid alpha(@accent, 0.8); */ - border-radius: apply(radius-full); - min-width: 20px; - min-height: 20px; - margin: -10px; - box-shadow: - 0 2px 8px alpha(#000, 0.15), - 0 1px 3px alpha(#000, 0.2); - transition: all 0.15s ease; -} - -#apple-volume-slider slider:hover { - background: linear-gradient(135deg, @text-main 0%, #f0f1f2 100%); - border-color: @accent; - box-shadow: - 0 4px 12px alpha(#000, 0.2), - 0 2px 6px alpha(@accent, 0.3); - min-width: 22px; - min-height: 22px; - margin: -9px; -} - -#apple-volume-slider slider:active { - background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); - min-width: 21px; - min-height: 21px; - margin: -9px; - box-shadow: - 0 2px 6px alpha(#000, 0.25), - 0 1px 3px alpha(@accent, 0.4); -} - -/* Legacy app volume styles (fallback) */ -.app-volume-item { - margin: 8px 0; - padding: 8px; - background-color: alpha(@text-main, 0.05); - border-radius: apply(radius-xs); - border: 1px solid alpha(@text-main, 0.1); -} - -.app-name { - font-size: 13px; - font-weight: 500; - color: @text-main; - margin-bottom: 5px; -} - -#app-volume-slider { - background-color: transparent; - margin-top: 5px; -} - -#app-volume-slider trough { - min-width: 20px; - border-radius: apply(radius-full); - background-color: alpha(#666, 0.5); - border: 1px solid alpha(#444, 0.3); -} - -#app-volume-slider highlight { - background: alpha(#0078d4, 0.8); - border-radius: apply(radius-full); -} - -#app-volume-slider slider { - background-color: @text-main; - padding: 2px; - min-width: 4px; - min-height: 18px; - border-radius: apply(radius-xl); -} - -/* Circle button for per-app volume */ -#per-app-volume-button { - background-color: alpha(@text-main, 0.15); - border: 1px solid alpha(@text-dim, 0.6); - /* min-width: 33px; */ - /* min-height: 30px; */ - border-radius: apply(radius-full); -} - -#per-app-volume-button:hover { - background-color: alpha(@text-main, 0.25); - /* border-color: @accent; */ - box-shadow: 0 4px 12px alpha(#000, 0.2); -} - -#per-app-volume-button:active { - background-color: alpha(@text-main, 0.2); - box-shadow: 0 1px 3px alpha(#000, 0.3); -} - -#per-app-volume-icon { - background-color: alpha(@text-main, 0.15); - - border: 2px solid alpha(@text-dim, 0.6); - - border-radius: apply(radius-full); - - min-width: 30px; -} - -/* Apple-style seek bar for expanded player */ -#apple-seek-bar { - background-color: transparent; - margin-top: 8px; - margin-bottom: 4px; - min-height: 10px; -} - -#apple-seek-bar trough { - min-width: 28px; - min-height: 3px; - border-radius: 1.5px; - background-color: alpha(@text-main, 0.3); - border: none; - box-shadow: inset 0 1px 1px alpha(#000, 0.1); -} - -#apple-seek-bar highlight { - background: @accent; - border-radius: 1.5px; - border: none; - box-shadow: 0 0 2px alpha(@accent, 0.4); -} - -#apple-seek-bar slider { - background: #ffffff; - border: 1px solid alpha(@accent, 0.8); - border-radius: apply(radius-full); - min-width: 12px; - min-height: 12px; - margin: -4.5px; - box-shadow: - 0 1px 3px alpha(#000, 0.2), - 0 0 0 1px alpha(@text-main, 0.8); - transition: all 0.1s ease; -} - -#apple-seek-bar slider:hover { - background: @text-main; - border-color: @accent; - min-width: 14px; - min-height: 14px; - margin: -5.5px; - box-shadow: - 0 2px 6px alpha(#000, 0.25), - 0 0 0 2px alpha(@accent, 0.3); -} - -#apple-seek-bar slider:active { - background: #f8f9fa; - min-width: 13px; - min-height: 13px; - margin: -5px; - box-shadow: - 0 1px 3px alpha(#000, 0.3), - 0 0 0 2px alpha(@accent, 0.5); -} - -/* macOS-style expanded player - more compact */ -#macos-outer-player-box { - min-height: 80px; - /* Reduced height */ - min-width: 345px; - /* Match the standard player width */ - /* margin: 10px; */ - padding: 10px; - /* background-color: alpha(#000, 0.4); */ -} - -#macos-main-section { - margin-left: 5px; -} - -#macos-album-cover-image image { - min-width: 70px; - min-height: 70px; - border-radius: 9px; -} - -#macos-album-image { - min-width: 70px; - min-height: 70px; - border-radius: 9px; - background-position: center; - background-size: cover; - box-shadow: 0 2px 8px alpha(#000, 0.3); -} - -#macos-album-image-no { - min-width: 90px; - min-height: 90px; - border-radius: 9px; - margin-left: 12px; - background-position: center; - background-size: cover; - box-shadow: 0 2px 8px alpha(#000, 0.3); -} - -#macos-album-image image { - min-width: 70px; - min-height: 70px; - border-radius: 9px; - box-shadow: 0 2px 8px alpha(#000, 0.3); -} - -/* Track info container that expands to fill available space */ -#macos-track-info { - margin-top: 5px; - margin-left: 15px; - margin-right: 15px; -} - -#macos-player-title { - font-weight: 600; - font-size: 16px; - color: @text-main; - margin-bottom: 2px; -} - -#macos-player-artist { - font-weight: 400; - margin-top: -2px; - font-size: 13px; - color: alpha(@text-dim, 0.8); -} - -#macos-player-album { - font-weight: 400; - margin-top: -4px; - font-size: 13px; - color: alpha(@text-dim, 0.8); - margin-bottom: 8px; -} - -/* macOS seek bar styling */ -#macos-seek-bar { - background-color: transparent; - margin: 8px 0 4px 0; - min-height: 10px; -} - -#macos-seek-bar trough { - min-width: 200px; - - min-height: 2px; - border-radius: 2px; - background-color: alpha(@text-main, 0.25); - border: none; -} - -#macos-seek-bar highlight { - background: @text-main; - border-radius: 2px; - border: none; -} - -#macos-seek-bar slider { - background: #ffffff; - border: none; - border-radius: 20%; - min-width: 1px; - min-height: 8px; - margin: -3px; - box-shadow: 0 1px 3px alpha(#000, 0.3); - transition: all 0.1s ease; -} - -#macos-seek-bar slider:hover { - min-width: 4px; - min-height: 14px; - margin: -5px; - box-shadow: 0 2px 6px alpha(#000, 0.4); -} - -#macos-position-label, -#macos-length-label { - font-size: 11px; - color: alpha(@text-dim, 0.9); - font-weight: 400; -} - -/* macOS control buttons - more compact */ -#macos-button-box { - margin-top: -1px; - /* Reduced top margin */ -} - -#macos-control-button { - background: transparent; - border: none; - border-radius: apply(radius-full); - min-width: 28px; - /* Slightly smaller */ - opacity: 0.7; - min-height: 28px; - padding: 5px; - /* Reduced padding */ - color: @text-main; - transition: all apply(transition-fast) ease; -} - -#macos-control-button:hover { - opacity: 1; -} - -#macos-play-button { - background: transparent; - border: none; - border-radius: apply(radius-full); - min-width: 36px; - /* Slightly smaller */ - opacity: 0.7; - min-height: 36px; - padding: 7px; - /* Reduced padding */ - color: @text-main; - transition: all apply(transition-fast) ease; -} - -#macos-play-button:hover { - opacity: 1; -} - -/* macOS player switcher dots - compact horizontal layout */ -#macos-stack-buttons-box { - margin: 2px 5px; - /* Minimal margins */ -} - -.macos-switcher-dot { - background: alpha(@text-main, 0.3); - /* border: none; */ - border-radius: apply(radius-full); - min-width: 12px; - /* Smaller dots */ - min-height: 12px; - margin: 2px; - /* Reduced margins */ - /* transition: all 0.2s ease; */ -} - -.macos-switcher-dot:hover { - background: alpha(@text-main, 0.5); -} - -.macos-switcher-dot.active { - background: @text-main; - box-shadow: 0 0 0 1px alpha(@text-main, 0.3); - /* Smaller glow */ -} - -/* Per app-volume-item */ - -.compact-app-volume-item { - padding-bottom: 5px; - padding-right: 14px; - border-bottom: 1px solid @hover; -} - -#app-icon { - margin-top: 8px; -} - -.app-name-compact { - font-size: 14px; - font-weight: bold; - margin-top: 8px; -} - -#compact-app-volume-slider scale { - margin-right: 8px; - padding-right: 8px; -} - -#expanded-seek-bar { - background-color: transparent; - margin: 8px 0 4px 0; - min-height: 10px; -} - -#expanded-seek-bar trough { - min-width: 200px; - - min-height: 2px; - border-radius: 2px; - background-color: alpha(@text-main, 0.25); - border: none; -} - -#expanded-seek-bar highlight { - background: #ffffff; - border-radius: 2px; - border: none; -} - -#expanded-seek-bar slider { - background: #ffffff; - border: none; - border-radius: 20%; - min-width: 1px; - min-height: 10px; - margin: -3px; - box-shadow: 0 1px 3px alpha(#000, 0.3); - transition: all 0.1s ease; -} - -#expanded-seek-bar slider:hover { - min-width: 4px; - min-height: 14px; - margin: -5px; - box-shadow: 0 2px 6px alpha(#000, 0.4); -} - -/* macOS-style WiFi interface */ -#wifi-connections, -#bluetooth-connections { - /* background-color: rgba(255, 255, 255, 0.08); */ - background-color: alpha(@text-main, 0.05); - box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4); - border: 1px solid @border-strong; - border-radius: apply(radius-sm); - /* padding: 0.5rem; */ - /* border-radius: apply(radius-md); */ - padding: 10px; -} - -/* WiFi network slots - macOS style */ -#wifi-network-slot button { - border-radius: apply(radius-sm); - padding: 4px 4px; - /* min-width: 280px; */ - margin: 2px 0; -} - -#wifi-network-slot button:hover { - background-color: rgba(255, 255, 255, 0.1); -} - -/* WiFi-specific device icon styles */ -#wifi-connections #device-icon { - background-color: rgba(255, 255, 255, 0.1); -} - -#wifi-connections #device-icon.connected { - background-color: @accent; - color: @text-main; -} - -#wifi-network-name { - color: @text-main; - font-size: 14px; - font-weight: 500; -} - -#wifi-lock-icon { - color: rgba(255, 255, 255, 0.6); - margin-left: 8px; -} - -/* Other Networks and Settings buttons */ -#wifi-other-button { - background: transparent; - border: none; - padding: 8px 6px; - margin-bottom: -12px; - margin-top: -6px; - border-radius: apply(radius-sm); - /* transition: background-color 0.2s ease; */ -} - -#wifi-other-button:hover { - background-color: rgba(255, 255, 255, 0.1); -} - -#wifi-other-button:last-child { - margin-bottom: 3px; -} - -#device-button { - /* background-color: #000; */ - border-radius: apply(radius-sm); -} - -.device-slot:hover { - background-color: rgba(255, 255, 255, 0.05); -} - -.button-hovered { - background-color: rgba(255, 255, 255, 0.1); -} - -#wifi-other-device label, -#wifi-other-button label { - font-size: 12px; - font-weight: bold; -} - -#app-volume-header { - font-size: 16px; - padding-left: 5px; - margin-top: -2px; - font-weight: bold; - color: @text-main; -} - -.wifi-icon-box { - background-color: #aaaaaa; - border-radius: apply(radius-full); - padding: 2px; - /* margin-right: 8px; */ -} - -.wifi-icon-box-connected { - background-color: @accent; - border-radius: apply(radius-full); - padding: 2px; - /* margin-right: 8px; */ -} - -/* #flight-icon { */ -/* margin-left: -10px; */ -/* } */ - -.title-widget { - /* margin-top: -14px; */ - /* margin-left: 5px; */ - font-size: 13px; - font-family: "SF Pro Rounded"; - font-weight: bold; -} - -.status-label { - font-size: 11px; - font-weight: 500; - color: #aaa; - /* margin-top: -28px; */ - /* margin-left: 5px; */ - font-family: "SF Pro Rounded"; - /* font-weight: bold; */ - /* margin-bottom: 2px; */ -} - -#app-control-box { - min-width: 100px; -} - -#caffeine-widget, -#flight-widget { - padding: 0px 0 5px 0; - min-width: 50px; -} diff --git a/src/shared/styles/dock.css b/src/shared/styles/dock.css deleted file mode 100644 index 304a33a..0000000 --- a/src/shared/styles/dock.css +++ /dev/null @@ -1,99 +0,0 @@ -#dock { - background-color: @bg; - padding: 4px 4px; - margin: 4px 4px; - border: none; - border-radius: apply(radius-lg); - transition: all apply(transition-fast) cubic-bezier(0.165, 0.84, 0.44, 1); -} - -#dock.shown { - transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); -} - -#dock_item_main_container { - transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); -} - -#dock_item.shown:hover #dock_item_main_container { - margin-top: -12px; -} - -#dock_item.shown.semi_hovered #dock_item_main_container { - margin-top: -7px; -} - -/**/ -/* #dock_item.shown.semi_hovered #dock_item_indicator { */ -/* margin-top: 11px; */ -/* } */ - -/* #dock_item.shown.activated:hover #dock_item_main_container { */ -/* margin-top: -12px; */ -/* } */ -/**/ -/* #dock_item.shown.activated:hover #dock_item_indicator { */ -/* margin-top: 16px; */ -/* } */ -/**/ -/* #dock_item.shown.activated #dock_item_main_container { */ -/* margin-top: -4px; */ -/* } */ - -#dock_item.shown.activated #dock_item_icon { - opacity: 1; - /* background-color: #01458e; */ -} - -/* #dock_item.shown.activated #dock_item_indicator { */ -/* min-width: 4px; */ -/* margin-top: 8px; */ -/* background-color: #aac7ff; */ -/* } */ - -#dock_item_icon { - border-radius: 13px; - opacity: 0.7; - transition: all apply(transition-fast) cubic-bezier(0.25, 0.1, 0.25, 1); -} - -/* #dock_item_indicator { */ -/* transition: all 0.15s ease-out; */ -/* min-height: 4px; */ -/* border-radius: apply(radius-xs); */ -/* } */ - -#dock_item { - transition: margin 0.25s cubic-bezier(0.25, 0.1, 0.25, 1); -} - -#dock_item.shown { - padding-left: 4px; - opacity: 1; -} - -#dock_item.shown:first-child { - padding-left: 0px; -} - -.dock_separator { - transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1); - min-width: 1.5px; - min-height: 50px; - margin: 0px 4px; - border-radius: 2px; - background-color: @accent; -} - -.dock_separator.hidden { - min-width: 0px; - background-color: transparent; - margin: 0px; -} - -/* #dock_item.shown:not(.activated) { */ -/* min-width: 0px; */ -/* min-height: 0px; */ -/* margin-top: 0px; */ -/* background-color: transparent; */ -/* } */ \ No newline at end of file diff --git a/src/shared/styles/dropdown.css b/src/shared/styles/dropdown.css deleted file mode 100644 index f788bbf..0000000 --- a/src/shared/styles/dropdown.css +++ /dev/null @@ -1,61 +0,0 @@ -#dropdown-menu { - background-color: transparent; - - border-radius: 0.75rem; - margin: 0; -} - -#dropdown-options { - background-color: @shadow-color; - box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4); - border: 1px solid @border-strong; - border-radius: 0.75rem; - padding: 0.5rem; -} - -#dropdown-option { - background-color: transparent; - border-radius: apply(radius-xs); - padding: 0px 10px; - margin: 1px 2px; - transition: all 0ms ease-in-out; -} - -#dropdown-option:hover { - transition: all 20ms ease-in-out; - color: #222; - background-color: alpha(#2369ff, 1); -} - -#dropdown-option-label { - font-size: 13px; - margin: 0px; - color: @text-main; - font-weight: 400; -} - -#dropdown-option-label:first-child { - padding-right: 5rem; -} - -#dropdown-option:hover #dropdown-option-keybind { - color: @text-main; -} - -#dropdown-option-keybind { - font-weight: 500; - color: #aaa; -} - -/* Divider */ - -#dropdown-divider-box { - background-color: transparent; - border-radius: apply(radius-xs); - padding: 0px 10px; - margin: 2px; -} -#dropdown-divider { - border-bottom: 1px solid alpha(#aaa, 0.3); - margin: 2px 0; -} diff --git a/src/shared/styles/launcher.css b/src/shared/styles/launcher.css deleted file mode 100644 index ba899ca..0000000 --- a/src/shared/styles/launcher.css +++ /dev/null @@ -1,230 +0,0 @@ -#launcher { - background-color: @shadow-color; - padding: 0; - border-radius: apply(radius-md); - min-width: 640px; - border: 1px solid rgba(255, 255, 255, 0.1); -} - -/* #launcher-search { */ -/* color: #000; */ -/* } */ -#header_box { - padding: 0px 20px 0 20px; - color: #000; -} - -#close-button, -#config-button { - background-color: transparent; - border-radius: apply(radius-xs); - padding: 6px; - transition: all 0.15s ease; -} - -#close-button:hover, -#close-button:focus, -#config-button:hover, -#config-button:focus { - background-color: rgba(255, 255, 255, 0.1); - border-radius: apply(radius-xs); -} - -#close-button.focused, -#config-button.focused { - background-color: rgba(0, 122, 255, 0.2); - border-radius: apply(radius-xs); - box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.4); -} - -#close-button.focused #close-label { - color: @accent; -} - -#config-button.focused #config-label { - color: @accent; -} - -#close-button:active { - background-color: rgba(255, 255, 255, 0.2); - border-radius: apply(radius-xs); -} - -#close-label { - color: rgba(255, 255, 255, 0.7); - font-size: 18px; -} - -#close-button:active #close-label { - color: rgba(255, 255, 255, 0.9); -} - -#config-button:active { - background-color: rgba(255, 255, 255, 0.2); - border-radius: apply(radius-xs); -} - -#config-label { - color: rgba(255, 255, 255, 0.7); - font-size: 18px; -} - -#config-button:active #config-label { - color: rgba(255, 255, 255, 0.9); -} - -#launcher-icon-label { - font-size: 20px; - padding: 6px; - color: rgba(255, 255, 255, 0.8); -} - -#launcher-search { - font-weight: 400; - font-size: 36px; - background-color: transparent; - color: rgba(255, 255, 255, 0.95); - border: none; - border-radius: 0; - padding: 12px 0; - margin: 0; -} - -#launcher-search:focus { - background-color: transparent; - box-shadow: none; - border: none; -} - -#launcher-search selection { - color: white; - background-color: rgba(0, 122, 255, 0.8); -} - -#launcher-results-scroll { - margin: 0; - border-radius: 0; - background: transparent; - padding: 0 20px 20px 20px; -} - -#launcher-results-scroll scrollbar { - border-radius: 0; - background-color: transparent; - padding: 0; - margin: 0; - min-width: 0; -} - -#launcher-results-scroll scrollbar slider { - border-radius: 2px; - min-width: 4px; - min-height: 20px; - background-color: rgba(255, 255, 255, 0.3); - margin: 0; -} - -#launcher-results-scroll scrollbar:hover slider { - background-color: rgba(255, 255, 255, 0.5); -} - -#launcher-results { - background: transparent; - margin-top: 8px; -} - -#launcher-result-item { - border-radius: apply(radius-sm); - padding: 12px 16px; - margin: 2px 0; - min-height: 64px; - transition: all apply(transition-fast); - background: transparent; -} - -@keyframes loadSlot { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -#launcher-result-item:focus, -#launcher-result-item:selected, -#launcher-result-item:hover, -#launcher-result-item.selected { - border-radius: apply(radius-sm); - background-color: alpha(@accent, 0.8); - padding: 12px 16px; - margin: 2px 0; -} - -#launcher-result-item.selected #result-item-title { - color: white; - font-weight: 600; -} - -#launcher-result-item.selected #result-item-subtitle { - color: rgba(255, 255, 255, 0.8); -} - -#launcher-result-item.selected #result-item-plugin { - color: rgba(255, 255, 255, 0.6); -} - -#result-item-main { - min-height: 56px; -} - -#launcher-result-item { - min-height: 56px; -} - -#result-item-icon { - min-width: 56px; - min-height: 56px; - margin-right: 16px; - border-radius: apply(radius-md); -} - -#result-item-title { - font-size: 18px; - font-weight: 500; - color: rgba(255, 255, 255, 0.95); - margin-top: 4px; - margin-bottom: 2px; -} - -#result-item-subtitle { - font-size: 14px; - color: rgba(255, 255, 255, 0.6); - margin-bottom: 4px; -} - -#result-item-plugin { - font-size: 12px; - color: rgba(255, 255, 255, 0.4); - font-style: normal; - margin-bottom: 4px; - opacity: 1; - font-weight: 400; -} - -#network-password-entry { - border: 1px solid rgba(255, 255, 255, 0.2); - background: rgba(255, 255, 255, 0.05); - color: rgba(255, 255, 255, 0.9); - padding: 12px; - border-radius: apply(radius-sm); - margin-bottom: 8px; - font-size: 14px; -} - -#network-password-entry:focus { - border: 1px solid alpha(@accent, 0.6); - background: rgba(255, 255, 255, 0.1); - box-shadow: 0 0 0 3px alpha(@accent, 0.2); -} diff --git a/src/shared/styles/lock.css b/src/shared/styles/lock.css deleted file mode 100644 index d3c8c71..0000000 --- a/src/shared/styles/lock.css +++ /dev/null @@ -1,66 +0,0 @@ -#lockscreen-bg { - background-size: cover; -} -#indicator-box { - margin-right: 10px; - margin-top: 4px; -} -#container-box { - min-height: 50px; - min-width: 250px; - transition: all 0.7s ease-in-out; -} -#password-entry { - background-color: alpha(@text-main, 0.4); - border-radius: apply(radius-xl); - color: white; - min-width: 220px; - min-height: 40px; - padding-right: 5px; - padding-left: 5px; - font-size: 14px; - font-weight: 500; - transition: all 0.7s ease-in-out; -} -#profile-box { - margin-bottom: 10px; -} -#username { - font-size: 21px; - font-weight: bold; - margin-top: 5px; - transition: all 0.7s ease-in-out; -} -#lock-date label { - background-color: transparent; - color: alpha(@text-main, 0.6); - border: none; - font-size: 30px; - margin-top: 80px; - font-weight: bold; -} -#lock-clock label { - background-color: transparent; - color: alpha(@text-main, 0.6); - border: none; - font-size: 120px; - margin-top: -20px; - font-weight: bold; -} - -#face-icon image { - margin-bottom: 10px; - border-radius: apply(radius-full); -} -#face-icon { - padding-bottom: 10px; -} - -#unlock-box { - margin-bottom: 40px; -} -#unlock-text { - font-size: 15px; - color: alpha(@text-main, 0.6); - font-weight: bold; -} diff --git a/src/shared/styles/main.css b/src/shared/styles/main.css deleted file mode 100644 index e4abf1b..0000000 --- a/src/shared/styles/main.css +++ /dev/null @@ -1,27 +0,0 @@ -@import url("./colors.css"); -@import url("./constant.css"); -@import url("./panel.css"); -@import url("./dock.css"); -@import url("./switcher.css"); -@import url("./osd.css"); -@import url("./controlcenter.css"); -@import url("./notification.css"); -@import url("./dropdown.css"); -@import url("./about.css"); -@import url("./notification-center.css"); -@import url("./player.css"); -@import url("./widgets.css"); -@import url("./tray.css"); -@import url("./battery-widget.css"); -@import url("./lock.css"); -@import url("./todo.css"); -@import url("./launcher.css"); -@import url("./switcher.css"); -@import url("./settings.css"); - -* { - all: unset; - color: var(--foreground); - font-size: unset; - font-family: "SF Pro Rounded"; -} \ No newline at end of file diff --git a/src/shared/styles/notification-center.css b/src/shared/styles/notification-center.css deleted file mode 100644 index 001b705..0000000 --- a/src/shared/styles/notification-center.css +++ /dev/null @@ -1,297 +0,0 @@ -#noti-center-box { - background-color: transparent; - - /* border: 1px solid @border-subtle; */ - border-radius: apply(radius-xl); - margin-right: 10px; - /* padding: 20px; */ - /* margin: 6px; */ -} - -#noti-clear-button { - /* min-width: 10px; */ - background-color: alpha(#1c2328, 0.05); - min-height: 25px; - min-width: 70px; - border: 1px solid #525155; - border-radius: apply(radius-md); - margin-top: 10px; -} - -#notif-clear-button label { - font-size: 15px; -} - -#noti-clear-button:hover { - background-color: alpha(@text-main, 0.09); -} - -/* Expandable notification group styles */ -#notification-group { - margin: 4px 0; -} - -/* Single notification (no stacking) */ -#single-notification-content { - background-color: alpha(#1c2328, 0.05); - border: 1.5px solid #525155; - border-radius: apply(radius-md); - padding: 12px; - transition: all 0.2s ease; -} - -#single-notification-content:hover { - background-color: alpha(@text-dim, 0.9); - border: 1.5px solid #525155; -} - -/* Stacked notification container */ -#notification-stack-container { - background-color: transparent; - margin: 8px 0; -} - -/* Bottom shadow layer (deepest) - offset to show stacking from below */ -#stack-shadow-bottom { - background-color: alpha(#1c2328, 0.05); - border-top: 1px solid #525155; - border-radius: apply(radius-md); - opacity: 1; - min-height: 16px; - margin-left: 20px; - margin-right: -4px; - margin-bottom: -10px; -} - -/* Middle shadow layer */ -#stack-shadow-middle { - background-color: alpha(#1c2328, 0.05); - - border-top: 1px solid #525155; - border-radius: apply(radius-md); - opacity: 1; - min-height: 20px; - margin-left: 10px; - margin-right: -2px; - margin-bottom: -14px; -} - -/* Main notification content (top layer) */ -#stack-main-notification { - background-color: alpha(#1c2328, 0.05); - - border: 1.2px solid #525155; - border-radius: apply(radius-md); - padding: 12px; - transition: all 0.2s ease; -} - -/* Hover effects for stacked notifications */ -#notification-stack-container:hover #stack-main-notification { - background-color: alpha(#525155, 0.1); - border: 1px solid #525155; -} - -#notification-stack-container:hover #stack-shadow-middle { - opacity: 0.7; -} - -#notification-stack-container:hover #stack-shadow-bottom { - opacity: 0.5; -} - -/* Collapsed notification state */ -#notification-content-collapsed { - background-color: alpha(#000, 0.05); - border: 1px solid #525155; - border-radius: apply(radius-md); - padding: 12px; - margin: 2px 0; - transition: all 0.2s ease; -} - -#notification-content-collapsed:hover { - background-color: alpha(#525155, 0.1); - border: 1px solid #525155; -} - -/* Notification count badge */ -#notification-count-label { - background-color: alpha(@text-main, 0.2); - color: rgba(255, 255, 255, 0.8); - border-radius: 10px; - padding: 2px 6px; - font-size: 10px; - font-weight: 500; - min-width: 16px; -} - -/* Expanded notification group header */ -#notification-group-header { - background-color: alpha(#000, 0.05); - border: 1px solid #525155; - border-radius: 12px 12px 0 0; - padding: 8px 12px; - margin: 2px 0 0 0; -} - -#notification-group-title { - color: @text-main; - font-weight: bold; - font-size: 14px; -} - -#notification-show-less { - background-color: transparent; - color: rgba(255, 255, 255, 0.7); - border: 1px solid alpha(@text-main, 0.2); - border-radius: apply(radius-xs); - padding: 2px 8px; - font-size: 11px; - margin-right: 8px; -} - -#notification-show-less:hover { - background-color: alpha(@text-dim, 0.7); - color: rgba(255, 255, 255, 0.9); -} - -#notification-close-all { - background-color: transparent; - color: rgba(255, 255, 255, 0.7); - border: 1px solid alpha(@text-main, 0.2); - border-radius: apply(radius-xs); - padding: 2px 8px; - font-size: 12px; - min-width: 24px; -} - -#notification-close-all:hover { - background-color: alpha(#ff5555, 0.2); - color: rgba(255, 255, 255, 0.9); - border-color: alpha(#ff5555, 0.4); -} - -/* Expanded notification list */ -#notification-group-expanded { - border: 1px solid #525155; - border-top: none; - border-radius: 0 0 12px 12px; - /* background-color: alpha(#000, 0.02); */ -} - -/* Stacked notification group styles */ -.stacked-notification-group { - margin: 4px 0; -} - -.stacked-notification-container { -} - -.stacked-notification-item { - background-color: alpha(#000, 0.05); - border: 1px solid #525155; - border-radius: apply(radius-md); - transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); -} - -#notif-clear-btn { - border-radius: 10px; - font-size: 12px; - padding: 2px; -} - -#notif-clear-btn:hover { - background-color: var(--surface-bright); -} - -#stacked-notification-item:hover { - background-color: alpha(#525155, 0.1); - border: 1px solid #525155; -} - -/* Stack count indicator */ -#stack-count-indicator { - font-size: 10px; - color: rgba(255, 255, 255, 0.7); - margin: 2px 8px; - font-weight: 500; -} - -/* Expanded view styles - notifications use their default styling */ -#expanded-notification-list { - margin-top: 8px; -} - -/* Make expanded notifications clickable with subtle hover effect */ -#expanded-notification-list:hover { - background-color: alpha(#111, 0.9); - border-radius: apply(radius-sm); - transition: background-color 0.2s ease; -} - -#notification-group-title { - font-size: 19px; - margin: 10px; - font-weight: bold; -} -#notification-show-less { - background-color: alpha(#1c2328, 0.05); - font-size: 12px; - margin: 10px; - border-radius: apply(radius-md); -} - -#notification-close-all { - margin: 10px 10px 10px 0; - background-color: alpha(#1c2328, 0.05); - border-radius: apply(radius-md); -} - -#notif-close-button { - background-color: transparent; -} - -#notification-group-expanded { - background-color: transparent; - border: none; -} - -#notification-content { - background-color: transparent; -} -#notification-count-label { - background-color: transparent; - color: white; - font-size: 13px; -} -#notification-centre-notifs { - background-color: alpha(#1c2328, 0.05); - min-height: 40px; - padding: 10px; - border: 1px solid #525155; - border-radius: apply(radius-md); -} - -#notification-centre-notifs:last-child { - margin-bottom: 10px; -} - -#notification-close-header { - margin-right: 10px; -} -#notification-close, -#notification-close-header { - min-width: 23px; - min-height: 23px; - border-radius: apply(radius-full); -} -#notification-close:hover { - background-color: alpha(#666, 0.8); - min-width: 23px; - min-height: 23px; - border-radius: apply(radius-full); -} -#notification-close-summery:hover .notification-close-header button { - background-color: transparent; -} diff --git a/src/shared/styles/notification.css b/src/shared/styles/notification.css deleted file mode 100644 index a9f91ed..0000000 --- a/src/shared/styles/notification.css +++ /dev/null @@ -1,88 +0,0 @@ -#notification { - padding: 10px; - background-color: alpha(@text-main, 0.03); - border-radius: apply(radius-sm); - margin-top: 10px; - margin-right: 10px; - /* margin: 5px; */ -} - -#notification-close-button { - background-color: alpha(@text-dim, 0.3); - border-radius: apply(radius-sm); -} -#notification-close-button:hover { - background-color: alpha(@accent, 0.9); -} - -#notification-action-buttons button { - background-color: alpha(@text-dim, 0.3); - padding: 4px; - border-radius: apply(radius-sm); - transition: background-color apply(transition-fast); -} - -#notification-action-buttons button:hover { - background-color: alpha(@accent, 0.9); -} - -#notification-action-buttons button:active { - background-color: var(--primary); -} - -#notification-action-buttons button:active #button-label { - color: var(--shadow); -} - -#notification-icon { - border-radius: apply(radius-lg); -} - -#notification-image { - border-radius: apply(radius-lg); - color: var(--on-surface); -} - -#notification-summary, -#button-label { -} - -#notification-summary { - font-weight: bold; - font-size: 16px; - /* color: var(--primary); */ -} - -#notification-app-name { - color: var(--outline); - font-weight: bold; -} - -#action-button { - margin-top: 8px; -} - -#notif-close-button { - background-color: var(--surface); - border-radius: apply(radius-lg); - padding: 4px; - transition: background-color apply(transition-fast); -} - -#notif-close-button:hover, -#notif-close-button:focus { - background-color: var(--surface-bright); -} - -#notif-close-button:active { - background-color: var(--red-dim); -} - -#notif-close-label { - color: var(--red-dim); - font-size: 20px; -} - -#notif-close-button:active #notif-close-label { - color: var(--shadow); -} diff --git a/src/shared/styles/osd.css b/src/shared/styles/osd.css deleted file mode 100644 index f23d697..0000000 --- a/src/shared/styles/osd.css +++ /dev/null @@ -1,37 +0,0 @@ -#osd-container { - background-color: alpha(@text-main, 0.09); - padding: 12px 20px; - margin: 70px; - min-width: 180px; - min-height: 200px; - border-radius: apply(radius-lg); -} - -#osd-container scale { - min-width: 180px; -} - -#osd-container trough { - background: var(--surface); - min-height: 15px; - margin-right: 4px; - transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); - border-radius: apply(radius-lg); -} - -#osd-container trough highlight { - border-radius: apply(radius-full); - background: var(--primary); - transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -#osd-container.muted trough highlight, -#osd-container.muted slider, -#osd-container scale.muted trough highlight, -#osd-container scale.muted slider { - background-color: var(--surface-bright); -} - -#osd-image.muted { - color: var(--outline); -} \ No newline at end of file diff --git a/src/shared/styles/panel.css b/src/shared/styles/panel.css deleted file mode 100644 index edb2f19..0000000 --- a/src/shared/styles/panel.css +++ /dev/null @@ -1,73 +0,0 @@ -#panel { - background-color: @bg; - margin: -4px 0; - transition: all 120ms ease-in-out; -} - -#modules-left, -#modules-right { - margin: 0 5px; - padding: 2px 0; -} - -#panel-button:hover, -#panel-button.active, -#battery-button:hover, -#battery-button.active, -#network-button:hover, -#network-button.active, -#bt-button:hover, -#bt-button.active, -#tray-button:hover, -#tray-button.active, -#global-menu:hover, -#global-menu.active, -#workspaces>button:hover { - background-color: @hover; -} - -#panel-button, -#battery-button, -#network-button, -#bt-button, -#tray-button { - margin: 5px 0; - padding: 0 2px; - border-radius: apply(radius-sm); -} - -#menubar label, -#battery-label, -#date-time { - font-weight: 500; -} - -#global-menu { - margin: 5px 2px; - padding: 0 5px; - border-radius: apply(radius-xs); -} - -#date-time { - margin: 0 4px; -} - -#workspaces>button { - margin: 6px 0; - padding: 0 16px; - border-radius: apply(radius-sm); - min-width: 12px; - border: 1px solid @border; -} - -#workspaces>button.active { - background-color: @active; -} - -#workspaces>button.active label { - color: var(--shadow); -} - -#workspaces>button.urgent { - background-color: @urgent; -} diff --git a/src/shared/styles/password-dialog.css b/src/shared/styles/password-dialog.css deleted file mode 100644 index c74ad74..0000000 --- a/src/shared/styles/password-dialog.css +++ /dev/null @@ -1,132 +0,0 @@ -#wifi-password-dialog { - background-color: transparent; -} - -#wifi-dialog-background { - background-color: alpha(@text-main, 0.05); - border-radius: apply(radius-md); - border: 1px solid rgba(255, 255, 255, 0.1); - padding: 20px; - min-width: 450px; -} - -#wifi-dialog-title-container { - /* margin-bottom: 12px; */ -} - -#wifi-dialog-icon { - color: @accent; - margin-right: 4px; -} - -#wifi-dialog-title { - color: @text-main; - font-size: 14px; - font-weight: 500; -} - -#wifi-dialog-error { - color: #ff4444; - font-size: 12px; - font-weight: 500; - /* margin-bottom: 8px; */ -} - -#wifi-dialog-password-container { - margin: 5px 0; -} - -#wifi-dialog-password-label { - color: @text-main; - font-size: 13px; - font-weight: 500; - margin-bottom: 4px; -} - -#wifi-dialog-password-entry { - background-color: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: apply(radius-xs); - padding: 8px 12px; - color: @text-main; - font-size: 13px; -} - -#wifi-dialog-password-entry:focus { - border-color: @accent; - box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3); - background-color: rgba(255, 255, 255, 0.15); -} - -#wifi-dialog-show-password-box { - margin-top: 4px; -} - -#wifi-dialog-show-password-button { - background-color: transparent; - border: none; - padding: 4px; - border-radius: apply(radius-xs); - min-width: 24px; - min-height: 24px; -} - -#wifi-dialog-show-password-button:hover { - background-color: alpha(@text-main, 0.1); -} - -#wifi-dialog-show-password-button image { - color: @text-main; -} - -#wifi-dialog-show-password-label { - color: @text-main; - font-size: 12px; -} - -#wifi-dialog-button-box { - margin-top: -15px; -} - -#wifi-dialog-cancel-button, -#wifi-dialog-join-button { - border-radius: apply(radius-xs); - font-size: 13px; - font-weight: 500; - min-width: 80px; - min-height: 30px; -} - -#wifi-dialog-cancel-button { - background-color: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - color: @text-main; -} - -#wifi-dialog-cancel-button:hover { - background-color: rgba(255, 255, 255, 0.15); -} - -#wifi-dialog-join-button { - background-color: @accent; - border: 1px solid @accent; - color: @text-main; -} - -#wifi-dialog-join-button:hover { - background-color: @accent-hover; - border-color: @accent-hover; -} - -#wifi-dialog-join-button.disabled { - opacity: 0.5; - background-color: #555555; - border-color: #555555; - color: #aaaaaa; -} - -#wifi-dialog-join-button.disabled:hover { - background-color: #555555; - border-color: #555555; - color: #aaaaaa; -} diff --git a/src/shared/styles/player.css b/src/shared/styles/player.css deleted file mode 100644 index 699858f..0000000 --- a/src/shared/styles/player.css +++ /dev/null @@ -1,178 +0,0 @@ -#player-stack-button { - border-radius: apply(radius-xs); - min-width: 7px; - min-height: 7px; - margin: 10px 3px; -} - -#button-box-c { - /* margin-left: -10px; */ - - padding-right: 15px; -} - -#player-stack-button:hover { - background-color: #646464; - box-shadow: inset rgba(255, 255, 255, 0.5) 0 0 10px; -} - -#player-stack-button.active { - border-radius: apply(radius-xs); - background-color: rgb(221.25, 221.25, 223.65); -} - -#outer-player-box { - min-height: 110px; - min-width: 320px; - border-radius: apply(radius-sm); - margin: 0 6px; - background-color: @shadow-color; - box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4); -} - -#outer-player-box-c { - min-height: 55px; - min-width: 245px; - border-radius: apply(radius-sm); - /* margin: 0 6px; */ - /* background-color: @shadow-color; */ - /* box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4); */ -} -#outer-no-player-box-c { - min-height: 55px; - min-width: 345px; - border-radius: apply(radius-sm); - /* margin: 0 6px; */ - /* background-color: @shadow-color; */ - /* box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4); */ -} -#box-c { - background-color: @bg-darker; - box-shadow: inset 0 0 0 0.5px alpha(@text-dim, 0.4); - border: 1px solid @border-strong; - border-radius: apply(radius-md); - margin-top: 0.5rem; - margin-left: 4px; - margin-right: 4px; - margin-bottom: 0.5rem; - - min-height: 50px; - min-width: 330px; - /* border-radius: apply(radius-sm); */ - /* margin: 0 6px 10px; */ - /* border: 0.5px solid alpha(#000, 0.4); */ - /* background-color: alpha(@text-dim, 0.1); */ - /* box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4); */ -} -#player-box:disabled highlight, -#player-box:disabled progress { - background-color: rgba(205, 214, 244, 0.6); - background-image: none; -} - -#player-info-box-c { - margin-left: 10px; -} -#player-info-box { - margin-left: 10px; -} - -#player-title-c { - /* margin-top: 18px; */ - font-weight: bold; - font-size: 14px; -} -#player-title { - margin-top: 18px; - font-weight: 700; - font-size: 16px; -} -#player-title-no { - font-weight: 700; - margin-left: 120px; - font-size: 16px; -} -#player-app-icon { - margin-bottom: 10px; -} - -#player-artist-c { - margin-top: -5px; - color: @text-dim; - font-size: 12px; -} -#player-artist, -#player-album { - font-weight: 500; - font-size: 12px; -} - -#player-controls { - margin-top: 5px; - margin-bottom: 15px; -} - -.player-icon { - font-size: 16px; -} - -.player-button { - padding: 1px; -} - -#player-box #player-controls #button-box .player-button:disabled { - color: #5f5f5f; -} - -#player-button { - opacity: 0.5; -} -#player-button:hover { - opacity: 0.9; -} - -#btn svg { - margin: 0 2px; -} -.album-image-c { - min-width: 50px; - min-height: 50px; - background-position: center; - margin-top: 10px; - margin-bottom: 10px; - background-size: cover; - margin-left: 10px; - border-radius: apply(radius-xs); -} -.album-image { - min-width: 70px; - min-height: 70px; - background-position: center; - background-size: cover; - margin-left: 12px; - border-radius: 9px; -} - -#seek-bar slider { - background-image: none; - background-color: transparent; - padding: 0px; -} - -#seek-bar scale { - background-color: transparent; - margin-top: 10px; - border-radius: apply(radius-sm); -} - -#seek-bar trough { - min-width: 10px; - border-radius: apply(radius-full); - background-color: alpha(#666, 0.5); - border: 1px solid alpha(#444, 0.3); -} - -#seek-bar highlight { - background: alpha(@text-main, 0.8); - border-radius: apply(radius-full); -} diff --git a/src/shared/styles/settings.css b/src/shared/styles/settings.css deleted file mode 100644 index 372f746..0000000 --- a/src/shared/styles/settings.css +++ /dev/null @@ -1,146 +0,0 @@ -#settings-window { - background-color: var(--background); - border-radius: apply(radius-md); - border: 1px solid var(--border); - min-width: 850px; - min-height: 600px; -} - -#settings-main-box { - padding: 0; -} - -#settings-sidebar { - background-color: rgba(0, 0, 0, 0.05); - padding: 20px 10px; - min-width: 200px; - border-right: 1px solid var(--border); -} - -#settings-sidebar-button { - padding: 10px 15px; - border-radius: apply(radius-sm); - margin-bottom: 2px; -} - -#settings-sidebar-button:hover { - background-color: rgba(255, 255, 255, 0.05); -} - -#settings-sidebar-button Label { - font-size: 14px; - font-weight: 500; -} - -#settings-sidebar-button.active { - background-color: var(--accent); -} - -#settings-sidebar-button.active Label { - color: var(--accent-foreground); -} - -#settings-content-wrapper { - padding: 30px; -} - -#settings-page-title { - font-size: 24px; - font-weight: 700; - margin-bottom: 20px; - color: var(--foreground); -} - -#settings-row { - padding: 12px 15px; - border-radius: apply(radius-sm); - background-color: rgba(255, 255, 255, 0.03); - margin-bottom: 2px; -} - -#settings-row-label { - font-size: 15px; - font-weight: 500; -} - -#settings-row-description { - font-size: 12px; - color: var(--foreground-dim); -} - -#settings-switch { - background-color: rgba(255, 255, 255, 0.1); - padding: 6px 12px; - border-radius: apply(radius-xl); - min-width: 50px; - transition: all 0.2s ease; -} - -#settings-switch.active { - background-color: var(--accent); - color: var(--accent-foreground); -} - -#settings-entry { - background-color: rgba(255, 255, 255, 0.05); - padding: 8px 12px; - border-radius: apply(radius-xs); - border: 1px solid var(--border); - min-width: 200px; - color: var(--foreground); -} - -#settings-entry:focus { - border-color: var(--accent); -} - -#settings-combo { - background-color: rgba(255, 255, 255, 0.05); - padding: 4px 8px; - border-radius: apply(radius-xs); - border: 1px solid var(--border); - min-width: 150px; - color: var(--foreground); -} - -#settings-combo:hover { - background-color: rgba(255, 255, 255, 0.1); -} - -#settings-list-tags { - margin-bottom: 5px; -} - -#settings-list-tag { - background-color: rgba(255, 255, 255, 0.08); - border-radius: apply(radius-md); - padding: 4px 10px; - margin-right: 5px; - margin-bottom: 5px; -} - -#settings-list-tag:hover { - background-color: rgba(255, 255, 255, 0.15); -} - -#settings-list-tag Label { - font-size: 13px; -} - -#settings-list-tag-close { - color: var(--foreground-dim); - font-size: 10px; - margin-left: 3px; -} - -#settings-list-tag-close:hover { - color: var(--accent); -} - -#settings-list-entry { - background-color: rgba(255, 255, 255, 0.03); - border: 1px dashed var(--border); - padding: 6px 12px; - border-radius: apply(radius-xs); - font-size: 13px; -} \ No newline at end of file diff --git a/src/shared/styles/switcher.css b/src/shared/styles/switcher.css deleted file mode 100644 index 98ea9e2..0000000 --- a/src/shared/styles/switcher.css +++ /dev/null @@ -1,48 +0,0 @@ -#application-switcher-container { - background-color: var(--shadow); - border-radius: apply(radius-xl); - padding: 24px; -} - -#application-switcher-view { - padding: 0px; - margin-bottom: 12px; -} - -#switcher-button { - padding: 12px; - min-width: 100px; - transition: all 0.2s ease; -} - -#window-button { - background-color: transparent; - border-radius: apply(radius-md); -} - -#window-button.active { - background-color: var(--surface); -} - -.switcher-selection-label { - color: var(--foreground); - font-size: 16px; - font-weight: 600; - margin-top: 8px; -} - -.switcher-workspace-label { - color: var(--foreground); - opacity: 0.6; - font-size: 12px; - margin-top: 4px; -} - -#switcher-icon-box { - border-radius: apply(radius-md); - padding: 4px; -} - -#window-row { - padding: 0px; -} \ No newline at end of file diff --git a/src/shared/styles/todo.css b/src/shared/styles/todo.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/shared/styles/tray.css b/src/shared/styles/tray.css deleted file mode 100644 index dbeb333..0000000 --- a/src/shared/styles/tray.css +++ /dev/null @@ -1,50 +0,0 @@ -tooltip { - border: #474747 solid 1px; - border-radius: 0.75rem; - background-color: alpha(@text-main, 0.05); -} - -@keyframes tooltipShow { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -tooltip > * { - padding: 3px 10px; - border-radius: 0.75rem; -} - -menu { - border: #474747 solid 1px; - border-radius: 0.75rem; - transition: all 100ms ease-in-out; - background-color: alpha(@text-main, 0.05); -} - -menu > menuitem { - padding: 5px 10px; - margin: 1px 2px; - font-size: 13px; - border-bottom: #474747 solid 1px; -} - -menu > menuitem:last-child { - border-bottom: none; -} -menu > menuitem:hover { - transition: all 20ms ease-in-out; - font-size: 13px; - border-radius: apply(radius-xs); - color: #222; - background-color: alpha(#2369ff, 1); -} - -menu > menuitem:hover > label { - color: @text-main; - font-weight: 400; -} diff --git a/src/shared/styles/widgets.css b/src/shared/styles/widgets.css deleted file mode 100644 index 81d9004..0000000 --- a/src/shared/styles/widgets.css +++ /dev/null @@ -1,305 +0,0 @@ -#weather-container { - margin: 5px 5px 20px 5px; - min-width: 170px; - min-height: 170px; - border-radius: apply(radius-lg); - transition: all apply(transition-slow); - background: #202020; -} - -/* Base Weather Layout */ -#weather-widget { - padding: 12px 14px; -} - -#city { - color: rgba(255, 255, 255, 0.85); - font-weight: 600; - font-size: 18px; -} - -#temperature { - font-size: 64px; - font-weight: 600; - color: white; - margin-top: -5px; - margin-bottom: -5px; -} - -#condition-emoji { - margin-top: -2px; -} - -#condition { - font-size: 16px; - font-weight: 600; - color: white; -} - -#feels-like { - font-weight: 500; - font-size: 15px; - color: rgba(255, 255, 255, 0.8); -} - -/* Weather Condition Gradients */ -.weather-clear { - background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); -} - -.weather-mostly-clear { - background: linear-gradient(135deg, #439cfb 0%, #6bc1f9 100%); -} - -.weather-partly-cloudy { - background: linear-gradient(135deg, #6a85b6 0%, #bac8e0 100%); -} - -.weather-overcast { - background: linear-gradient(135deg, #485563 0%, #29323c 100%); -} - -.weather-fog { - background: linear-gradient(135deg, #757f9a 0%, #d7dde8 100%); -} - -.weather-light-rain { - background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%); -} - -.weather-rain { - background: linear-gradient(135deg, #2b5876 0%, #4e4376 100%); -} - -.weather-heavy-rain { - background: linear-gradient(135deg, #141e30 0%, #243b55 100%); -} - -.weather-snow, -.weather-heavy-snow { - background: linear-gradient(135deg, #83a4d4 0%, #b6fbff 100%); -} - -.weather-storm { - background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); -} - -/* # */ - -/* Calendar Widget */ -#calendar-box-widget { - background: linear-gradient(to bottom, #202020, #141414); - margin: 5px 20px 20px 10px; - min-width: 170px; - min-height: 170px; - border-radius: apply(radius-lg); -} - -#calendar-widget { - margin: 5px 10px 0px 10px; -} - -#calendar-month { - font-size: 16px; - font-weight: 600; - color: var(--blue-dim); - margin-bottom: 6px; -} - -#calendar-days-header { - margin-bottom: 4px; -} - -#calendar-day-header { - font-size: 12px; - font-weight: 600; - color: @text-main; - min-width: 18px; - min-height: 10px; -} - -#calendar-day-header-weekend { - font-size: 12px; - font-weight: 600; - color: #8e8d93; - min-width: 18px; - min-height: 10px; -} - -#calendar-day { - font-size: 12px; - margin: 1.4px 0px 1.4px 0px; - font-weight: 500; - color: @text-main; - min-width: 18px; - min-height: 10px; -} - -#calendar-day-weekend { - font-size: 12px; - font-weight: 500; - color: #8e8d93; - min-width: 18px; - min-height: 16px; -} - -#calendar-day-today { - font-size: 12px; - font-weight: 700; - color: #191919; - background-color: var(--blue-dim); - border-radius: apply(radius-full); - min-width: 18px; - min-height: 16px; - padding: 2px; -} - -#calendar-day-empty { - min-width: 18px; - min-height: 16px; -} - -#calendar-grid { - margin-top: 2px; -} - -/* Date Widget CSS */ -#date-widget label { - margin-top: 10px; -} - -#day label, -#month label { - color: var(--foreground); - padding: 5px; - margin-top: 10px; - font-size: 30px; - color: alpha(@text-main, 0.9); - font-weight: 600; -} - -#date label { - color: alpha(@text-main, 0.9); - - margin-top: -10px; - font-size: 90px; - font-weight: 600; -} - -#day label { - color: alpha(var(--blue-dim), 0.9); -} - -#date-container { - background: linear-gradient(to bottom, #202020, #141414); - margin: 5px 10px 20px 5px; - min-width: 170px; - min-height: 170px; - border-radius: apply(radius-lg); -} - -/* System Info Widget CSS */ -#info-box-widget { - background: linear-gradient(to bottom, #202020, #141414); - margin: 5px 5px 5px 5px; - min-width: 170px; - min-height: 170px; - border-radius: apply(radius-lg); -} - -#ram-progress { - margin-left: 12px; - color: var(--foreground); -} - -#progress-label { - font-weight: 600; - font-size: 13px; -} - -#progress { - border: solid 8px var(--blue-dim); - color: alpha(#aaaaaa, 0.7); -} - -/* Color indicators for memory usage */ -#used-color-indicator { - color: var(--blue-dim); - font-size: 10px; - font-weight: 900; -} - -#free-color-indicator { - color: #7c7c7c; - font-size: 10px; - font-weight: 900; -} - -#temp-color-indicator { - color: var(--blue-dim); - font-size: 10px; - font-weight: 900; -} - -/* Info text styling */ -#info-text { - font-size: 13px; - font-weight: 500; - color: #8e8e8e; - min-width: 32px; -} - -#info-value { - font-size: 12px; - font-weight: 600; - color: @text-main; -} - -#info-container { - margin-left: -8px; - margin-top: 5px; -} - -#info { - margin-left: -13px; - margin-top: 5px; - font-size: 14px; - font-weight: 600; -} - -#component-name { - font-size: 10px; -} -/* FlatScale styling */ -.flat-scale { - margin: 4px 0px; -} -.flat-scale slider { - background-color: @text-main; - min-height: 24px; - min-width: 24px; - border-radius: apply(radius-full); -} -.flat-scale trough { - background-color: alpha(#666, 0.5); - min-height: 25px; - border-radius: apply(radius-full); - border: 1px solid alpha(#444, 0.3); -} -.flat-scale highlight { - background-color: alpha(@text-main, 0.8); - min-height: 25px; - border-radius: apply(radius-full); -} - -/* SmoothSwitch styling */ -.smooth-switch { - min-width: 44px; - min-height: 24px; - background-color: alpha(#666, 0.5); - color: @text-main; -} -.smooth-switch.checked { - background-color: alpha(@text-main, 0.8); - color: @background; -}