sankalp/Modus
1
0 Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor(src/shared/styles): replace var(--radius-*) with apply(radius-*) throughout shared styles

Browse Source 
Use apply() to align with the updated CSS variable system and ensure consistent radius theming
This commit is contained in:
sankalp committed 2026-06-16 22:24:02 +05:45
1 parent e6a4c48b2f
commit 0c266e9150
18 files changed
+144 -145
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/shared/styles/about.css
+2 -2
View File
@@ -12,7 +12,7 @@
#about-options {
background-color: alpha(#333, 0.9);
border-radius: var(--radius-md);
border-radius: apply(radius-md);
padding: 2rem;
}
@@ -61,7 +61,7 @@
#more-info-button {
background-color: #888888;
border-radius: var(--radius-xs);
border-radius: apply(radius-xs);
padding: 0px 10px;
margin: 1px 2px;
transition: all 200ms ease-in-out;
src/shared/styles/battery-widget.css
+8 -8
View File
@@ -3,7 +3,7 @@
/* background-color: alpha(@text-main, 0.09); */
border: 1px solid @border-subtle;
box-shadow: inset 0 0 200px 0 @border-subtle;
border-radius: var(--radius-sm);
border-radius: apply(radius-sm);
}
#battery-widget {
@@ -40,7 +40,7 @@
.battery-status-section {
/* background: rgba(255, 255, 255, 0.06); */
/* border-radius: var(--radius-md); */
/* border-radius: apply(radius-md); */
padding: 2px;
/* margin: 8px 0; */
/* border: 1px solid rgba(255, 255, 255, 0.08); */
@@ -56,7 +56,7 @@
#energy-mode-button-clickable {
background: transparent;
border: none;
border-radius: var(--radius-sm);
border-radius: apply(radius-sm);
padding: 6px 12px;
margin: 1px 0;
}
@@ -66,7 +66,7 @@
}
#energy-mode-icon {
border-radius: var(--radius-full);
border-radius: apply(radius-full);
padding: 4px;
margin-top: -2px;
margin-bottom: -2px;
@@ -98,12 +98,12 @@
margin-top: -5px;
background: alpha(@text-main, 0.1);
min-height: 30px;
border-radius: var(--radius-sm);
border-radius: apply(radius-sm);
}
.battery-settings-button {
margin-top: -5px;
min-height: 30px;
border-radius: var(--radius-sm);
border-radius: apply(radius-sm);
}
.battery-settings-button label {
font-weight: 500;
@@ -133,7 +133,7 @@
#game-mode-button-clickable {
background: transparent;
border: none;
border-radius: var(--radius-sm);
border-radius: apply(radius-sm);
padding: 6px 12px;
margin: 1px 0;
/* min-height: 36px; */
@@ -144,7 +144,7 @@
}
#game-mode-icon {
border-radius: var(--radius-full);
border-radius: apply(radius-full);
padding: 4px;
margin-right: 8px;
background-color: rgba(255, 255, 255, 0.1);
src/shared/styles/constant.css
+9 -10
View File
@@ -20,13 +20,12 @@
@define-color inner-shadow alpha(#000, 0.3);
/* Constants */
:vars {
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-full: 999px;
--transition-fast: 0.15s ease;
--transition-slow: 0.3s ease;
}
/* :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;
src/shared/styles/controlcenter.css
+43 -43
View File
@@ -6,7 +6,7 @@
#control-center-menu {
background-color: transparent;
border-radius: var(--radius-md);
border-radius: apply(radius-md);
box-shadow: none;
margin: 0;
}
@@ -15,7 +15,7 @@
min-height: 0.09rem;
margin: 3px 0;
background-color: alpha(@text-main, 0.2);
border-radius: var(--radius-sm);
border-radius: apply(radius-sm);
}
/* #bluetooth-control-window { */
@@ -25,7 +25,7 @@
/* background-color: alpha(@text-main, 0.09); */
border: 1px solid @border-subtle;
box-shadow: inset 0 0 200px 0 @border-subtle;
border-radius: var(--radius-md);
border-radius: apply(radius-md);
}
#bluetooth-title,
@@ -38,7 +38,7 @@
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: var(--radius-md);
border-radius: apply(radius-md);
padding: 0.5rem;
}
@@ -49,7 +49,7 @@
background-color: @bg-darker;
box-shadow: inset 0 0 0 0.5px alpha(@text-dim, 0.4);
border: 1px solid @border-strong;
border-radius: var(--radius-md);
border-radius: apply(radius-md);
}
/* Widgets */
@@ -82,7 +82,7 @@
#wifi-dialog-background {
background-color: alpha(@text-main, 0.05);
border-radius: var(--radius-md);
border-radius: apply(radius-md);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 20px;
min-width: 450px;
@@ -124,7 +124,7 @@
#wifi-dialog-password-entry {
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-xs);
border-radius: apply(radius-xs);
padding: 8px 12px;
color: @text-main;
font-size: 13px;
@@ -144,7 +144,7 @@
background-color: transparent;
border: none;
padding: 4px;
border-radius: var(--radius-xs);
border-radius: apply(radius-xs);
min-width: 24px;
min-height: 24px;
}
@@ -168,7 +168,7 @@
#wifi-dialog-cancel-button,
#wifi-dialog-join-button {
border-radius: var(--radius-xs);
border-radius: apply(radius-xs);
font-size: 13px;
font-weight: 500;
min-width: 80px;
@@ -221,7 +221,7 @@
/* } */
#device-icon {
border-radius: var(--radius-full);
border-radius: apply(radius-full);
padding: 5px;
margin-bottom: 2.5px;
margin-top: 2.5px;
@@ -245,14 +245,14 @@
min-width: 40px;
min-height: 20px;
background-color: #bababa;
border-radius: var(--radius-md);
border-radius: apply(radius-md);
padding: 2px;
transition: background-color 0.3s ease;
}
#toggle-button slider {
background-color: @text-main;
border-radius: var(--radius-full);
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);
@@ -274,11 +274,11 @@
background-color: @bg-darker;
box-shadow: inset 0 0 0 0.5px alpha(@text-dim, 0.4);
border: 1px solid @border-strong;
border-radius: var(--radius-md);
border-radius: apply(radius-md);
margin: 5px;
/* background-color: alpha(@text-dim, 0.1); */
/* border: 0.5px solid alpha(#000, 0.4); */
/* border-radius: var(--radius-sm); */
/* border-radius: apply(radius-sm); */
padding: 1rem;
}
@@ -330,7 +330,7 @@
min-width: 28px;
min-height: 28px;
margin: -2px;
border-radius: var(--radius-full);
border-radius: apply(radius-full);
/* background-image: none; */
/* background-color: transparent; */
/* min-width: 4px; */
@@ -343,7 +343,7 @@
min-width: 30px;
min-height: 30px;
margin: -3px;
border-radius: var(--radius-full);
border-radius: apply(radius-full);
/* background-image: none; */
/* background-color: transparent; */
/* min-width: 4px; */
@@ -354,19 +354,19 @@
#control-center-menu scale {
background-color: transparent;
margin-top: 10px;
border-radius: var(--radius-xl);
border-radius: apply(radius-xl);
}
#control-center-menu trough {
min-width: 25px;
border-radius: var(--radius-full);
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: var(--radius-full);
border-radius: apply(radius-full);
}
#control-center-menu mark indicator {
@@ -389,7 +389,7 @@
/* 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: var(--radius-sm);
border-radius: apply(radius-sm);
padding: 1rem;
/* padding: 1rem; */
@@ -403,7 +403,7 @@
#back-button {
padding: 8px 12px;
background-color: @hover;
border-radius: var(--radius-sm);
border-radius: apply(radius-sm);
border: none;
color: @text-main;
font-size: 13px;
@@ -420,9 +420,9 @@
margin: 3px 0;
padding: 16px;
background-color: alpha(@text-main, 0.08);
border-radius: var(--radius-md);
border-radius: apply(radius-md);
border: 1px solid alpha(@text-main, 0.12);
transition: background-color var(--transition-fast);
transition: background-color apply(transition-fast);
}
.apple-app-volume-item:hover {
@@ -464,7 +464,7 @@
#apple-volume-slider slider {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
/* border: 2px solid alpha(@accent, 0.8); */
border-radius: var(--radius-full);
border-radius: apply(radius-full);
min-width: 20px;
min-height: 20px;
margin: -10px;
@@ -500,7 +500,7 @@
margin: 8px 0;
padding: 8px;
background-color: alpha(@text-main, 0.05);
border-radius: var(--radius-xs);
border-radius: apply(radius-xs);
border: 1px solid alpha(@text-main, 0.1);
}
@@ -518,14 +518,14 @@
#app-volume-slider trough {
min-width: 20px;
border-radius: var(--radius-full);
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: var(--radius-full);
border-radius: apply(radius-full);
}
#app-volume-slider slider {
@@ -533,7 +533,7 @@
padding: 2px;
min-width: 4px;
min-height: 18px;
border-radius: var(--radius-xl);
border-radius: apply(radius-xl);
}
/* Circle button for per-app volume */
@@ -542,7 +542,7 @@
border: 1px solid alpha(@text-dim, 0.6);
/* min-width: 33px; */
/* min-height: 30px; */
border-radius: var(--radius-full);
border-radius: apply(radius-full);
}
#per-app-volume-button:hover {
@@ -561,7 +561,7 @@
border: 2px solid alpha(@text-dim, 0.6);
border-radius: var(--radius-full);
border-radius: apply(radius-full);
min-width: 30px;
}
@@ -593,7 +593,7 @@
#apple-seek-bar slider {
background: #ffffff;
border: 1px solid alpha(@accent, 0.8);
border-radius: var(--radius-full);
border-radius: apply(radius-full);
min-width: 12px;
min-height: 12px;
margin: -4.5px;
@@ -756,7 +756,7 @@
#macos-control-button {
background: transparent;
border: none;
border-radius: var(--radius-full);
border-radius: apply(radius-full);
min-width: 28px;
/* Slightly smaller */
opacity: 0.7;
@@ -764,7 +764,7 @@
padding: 5px;
/* Reduced padding */
color: @text-main;
transition: all var(--transition-fast) ease;
transition: all apply(transition-fast) ease;
}
#macos-control-button:hover {
@@ -774,7 +774,7 @@
#macos-play-button {
background: transparent;
border: none;
border-radius: var(--radius-full);
border-radius: apply(radius-full);
min-width: 36px;
/* Slightly smaller */
opacity: 0.7;
@@ -782,7 +782,7 @@
padding: 7px;
/* Reduced padding */
color: @text-main;
transition: all var(--transition-fast) ease;
transition: all apply(transition-fast) ease;
}
#macos-play-button:hover {
@@ -798,7 +798,7 @@
.macos-switcher-dot {
background: alpha(@text-main, 0.3);
/* border: none; */
border-radius: var(--radius-full);
border-radius: apply(radius-full);
min-width: 12px;
/* Smaller dots */
min-height: 12px;
@@ -886,15 +886,15 @@
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: var(--radius-sm);
border-radius: apply(radius-sm);
/* padding: 0.5rem; */
/* border-radius: var(--radius-md); */
/* border-radius: apply(radius-md); */
padding: 10px;
}
/* WiFi network slots - macOS style */
#wifi-network-slot button {
border-radius: var(--radius-sm);
border-radius: apply(radius-sm);
padding: 4px 4px;
/* min-width: 280px; */
margin: 2px 0;
@@ -932,7 +932,7 @@
padding: 8px 6px;
margin-bottom: -12px;
margin-top: -6px;
border-radius: var(--radius-sm);
border-radius: apply(radius-sm);
/* transition: background-color 0.2s ease; */
}
@@ -946,7 +946,7 @@
#device-button {
/* background-color: #000; */
border-radius: var(--radius-sm);
border-radius: apply(radius-sm);
}
.device-slot:hover {
@@ -973,14 +973,14 @@
.wifi-icon-box {
background-color: #aaaaaa;
border-radius: var(--radius-full);
border-radius: apply(radius-full);
padding: 2px;
/* margin-right: 8px; */
}
.wifi-icon-box-connected {
background-color: @accent;
border-radius: var(--radius-full);
border-radius: apply(radius-full);
padding: 2px;
/* margin-right: 8px; */
}
src/shared/styles/dock.css
+4 -4
View File
@@ -3,8 +3,8 @@
padding: 4px 4px;
margin: 4px 4px;
border: none;
border-radius: var(--radius-lg);
transition: all var(--transition-fast) cubic-bezier(0.165, 0.84, 0.44, 1);
border-radius: apply(radius-lg);
transition: all apply(transition-fast) cubic-bezier(0.165, 0.84, 0.44, 1);
}
#dock.shown {
@@ -54,13 +54,13 @@
#dock_item_icon {
border-radius: 13px;
opacity: 0.7;
transition: all var(--transition-fast) cubic-bezier(0.25, 0.1, 0.25, 1);
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: var(--radius-xs); */
/* border-radius: apply(radius-xs); */
/* } */
#dock_item {
src/shared/styles/dropdown.css
+2 -2
View File
@@ -15,7 +15,7 @@
#dropdown-option {
background-color: transparent;
border-radius: var(--radius-xs);
border-radius: apply(radius-xs);
padding: 0px 10px;
margin: 1px 2px;
transition: all 0ms ease-in-out;
@@ -51,7 +51,7 @@
#dropdown-divider-box {
background-color: transparent;
border-radius: var(--radius-xs);
border-radius: apply(radius-xs);
padding: 0px 10px;
margin: 2px;
}
src/shared/styles/launcher.css
+11 -11
View File
@@ -1,7 +1,7 @@
#launcher {
background-color: @shadow-color;
padding: 0;
border-radius: var(--radius-md);
border-radius: apply(radius-md);
min-width: 640px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
@@ -17,7 +17,7 @@
#close-button,
#config-button {
background-color: transparent;
border-radius: var(--radius-xs);
border-radius: apply(radius-xs);
padding: 6px;
transition: all 0.15s ease;
}
@@ -27,13 +27,13 @@
#config-button:hover,
#config-button:focus {
background-color: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-xs);
border-radius: apply(radius-xs);
}
#close-button.focused,
#config-button.focused {
background-color: rgba(0, 122, 255, 0.2);
border-radius: var(--radius-xs);
border-radius: apply(radius-xs);
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.4);
}
@@ -47,7 +47,7 @@
#close-button:active {
background-color: rgba(255, 255, 255, 0.2);
border-radius: var(--radius-xs);
border-radius: apply(radius-xs);
}
#close-label {
@@ -61,7 +61,7 @@
#config-button:active {
background-color: rgba(255, 255, 255, 0.2);
border-radius: var(--radius-xs);
border-radius: apply(radius-xs);
}
#config-label {
@@ -134,11 +134,11 @@
}
#launcher-result-item {
border-radius: var(--radius-sm);
border-radius: apply(radius-sm);
padding: 12px 16px;
margin: 2px 0;
min-height: 64px;
transition: all var(--transition-fast);
transition: all apply(transition-fast);
background: transparent;
}
@@ -156,7 +156,7 @@
#launcher-result-item:selected,
#launcher-result-item:hover,
#launcher-result-item.selected {
border-radius: var(--radius-sm);
border-radius: apply(radius-sm);
background-color: alpha(@accent, 0.8);
padding: 12px 16px;
margin: 2px 0;
@@ -187,7 +187,7 @@
min-width: 56px;
min-height: 56px;
margin-right: 16px;
border-radius: var(--radius-md);
border-radius: apply(radius-md);
}
#result-item-title {
@@ -218,7 +218,7 @@
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.9);
padding: 12px;
border-radius: var(--radius-sm);
border-radius: apply(radius-sm);
margin-bottom: 8px;
font-size: 14px;
}
src/shared/styles/lock.css
+2 -2
View File
@@ -12,7 +12,7 @@
}
#password-entry {
background-color: alpha(@text-main, 0.4);
border-radius: var(--radius-xl);
border-radius: apply(radius-xl);
color: white;
min-width: 220px;
min-height: 40px;
@@ -50,7 +50,7 @@
#face-icon image {
margin-bottom: 10px;
border-radius: var(--radius-full);
border-radius: apply(radius-full);
}
#face-icon {
padding-bottom: 10px;
src/shared/styles/notification-center.css
+16 -16
View File
@@ -2,7 +2,7 @@
background-color: transparent;
/* border: 1px solid @border-subtle; */
border-radius: var(--radius-xl);
border-radius: apply(radius-xl);
margin-right: 10px;
/* padding: 20px; */
/* margin: 6px; */
@@ -14,7 +14,7 @@
min-height: 25px;
min-width: 70px;
border: 1px solid #525155;
border-radius: var(--radius-md);
border-radius: apply(radius-md);
margin-top: 10px;
}
@@ -35,7 +35,7 @@
#single-notification-content {
background-color: alpha(#1c2328, 0.05);
border: 1.5px solid #525155;
border-radius: var(--radius-md);
border-radius: apply(radius-md);
padding: 12px;
transition: all 0.2s ease;
}
@@ -55,7 +55,7 @@
#stack-shadow-bottom {
background-color: alpha(#1c2328, 0.05);
border-top: 1px solid #525155;
border-radius: var(--radius-md);
border-radius: apply(radius-md);
opacity: 1;
min-height: 16px;
margin-left: 20px;
@@ -68,7 +68,7 @@
background-color: alpha(#1c2328, 0.05);
border-top: 1px solid #525155;
border-radius: var(--radius-md);
border-radius: apply(radius-md);
opacity: 1;
min-height: 20px;
margin-left: 10px;
@@ -81,7 +81,7 @@
background-color: alpha(#1c2328, 0.05);
border: 1.2px solid #525155;
border-radius: var(--radius-md);
border-radius: apply(radius-md);
padding: 12px;
transition: all 0.2s ease;
}
@@ -104,7 +104,7 @@
#notification-content-collapsed {
background-color: alpha(#000, 0.05);
border: 1px solid #525155;
border-radius: var(--radius-md);
border-radius: apply(radius-md);
padding: 12px;
margin: 2px 0;
transition: all 0.2s ease;
@@ -145,7 +145,7 @@
background-color: transparent;
color: rgba(255, 255, 255, 0.7);
border: 1px solid alpha(@text-main, 0.2);
border-radius: var(--radius-xs);
border-radius: apply(radius-xs);
padding: 2px 8px;
font-size: 11px;
margin-right: 8px;
@@ -160,7 +160,7 @@
background-color: transparent;
color: rgba(255, 255, 255, 0.7);
border: 1px solid alpha(@text-main, 0.2);
border-radius: var(--radius-xs);
border-radius: apply(radius-xs);
padding: 2px 8px;
font-size: 12px;
min-width: 24px;
@@ -191,7 +191,7 @@
.stacked-notification-item {
background-color: alpha(#000, 0.05);
border: 1px solid #525155;
border-radius: var(--radius-md);
border-radius: apply(radius-md);
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@@ -226,7 +226,7 @@
/* Make expanded notifications clickable with subtle hover effect */
#expanded-notification-list:hover {
background-color: alpha(#111, 0.9);
border-radius: var(--radius-sm);
border-radius: apply(radius-sm);
transition: background-color 0.2s ease;
}
@@ -239,13 +239,13 @@
background-color: alpha(#1c2328, 0.05);
font-size: 12px;
margin: 10px;
border-radius: var(--radius-md);
border-radius: apply(radius-md);
}
#notification-close-all {
margin: 10px 10px 10px 0;
background-color: alpha(#1c2328, 0.05);
border-radius: var(--radius-md);
border-radius: apply(radius-md);
}
#notif-close-button {
@@ -270,7 +270,7 @@
min-height: 40px;
padding: 10px;
border: 1px solid #525155;
border-radius: var(--radius-md);
border-radius: apply(radius-md);
}
#notification-centre-notifs:last-child {
@@ -284,13 +284,13 @@
#notification-close-header {
min-width: 23px;
min-height: 23px;
border-radius: var(--radius-full);
border-radius: apply(radius-full);
}
#notification-close:hover {
background-color: alpha(#666, 0.8);
min-width: 23px;
min-height: 23px;
border-radius: var(--radius-full);
border-radius: apply(radius-full);
}
#notification-close-summery:hover .notification-close-header button {
background-color: transparent;
src/shared/styles/notification.css
+8 -8
View File
@@ -1,7 +1,7 @@
#notification {
padding: 10px;
background-color: alpha(@text-main, 0.03);
border-radius: var(--radius-sm);
border-radius: apply(radius-sm);
margin-top: 10px;
margin-right: 10px;
/* margin: 5px; */
@@ -9,7 +9,7 @@
#notification-close-button {
background-color: alpha(@text-dim, 0.3);
border-radius: var(--radius-sm);
border-radius: apply(radius-sm);
}
#notification-close-button:hover {
background-color: alpha(@accent, 0.9);
@@ -18,8 +18,8 @@
#notification-action-buttons button {
background-color: alpha(@text-dim, 0.3);
padding: 4px;
border-radius: var(--radius-sm);
transition: background-color var(--transition-fast);
border-radius: apply(radius-sm);
transition: background-color apply(transition-fast);
}
#notification-action-buttons button:hover {
@@ -35,11 +35,11 @@
}
#notification-icon {
border-radius: var(--radius-lg);
border-radius: apply(radius-lg);
}
#notification-image {
border-radius: var(--radius-lg);
border-radius: apply(radius-lg);
color: var(--on-surface);
}
@@ -64,9 +64,9 @@
#notif-close-button {
background-color: var(--surface);
border-radius: var(--radius-lg);
border-radius: apply(radius-lg);
padding: 4px;
transition: background-color var(--transition-fast);
transition: background-color apply(transition-fast);
}
#notif-close-button:hover,
src/shared/styles/osd.css
+3 -3
View File
@@ -4,7 +4,7 @@
margin: 70px;
min-width: 180px;
min-height: 200px;
border-radius: var(--radius-lg);
border-radius: apply(radius-lg);
}
#osd-container scale {
@@ -16,11 +16,11 @@
min-height: 15px;
margin-right: 4px;
transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border-radius: var(--radius-lg);
border-radius: apply(radius-lg);
}
#osd-container trough highlight {
border-radius: var(--radius-full);
border-radius: apply(radius-full);
background: var(--primary);
transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
src/shared/styles/panel.css
+3 -3
View File
@@ -33,7 +33,7 @@
#tray-button {
margin: 5px 0;
padding: 0 2px;
border-radius: var(--radius-sm);
border-radius: apply(radius-sm);
}
#menubar label,
@@ -45,7 +45,7 @@
#global-menu {
margin: 5px 2px;
padding: 0 5px;
border-radius: var(--radius-xs);
border-radius: apply(radius-xs);
}
#date-time {
@@ -55,7 +55,7 @@
#workspaces>button {
margin: 6px 0;
padding: 0 16px;
border-radius: var(--radius-sm);
border-radius: apply(radius-sm);
min-width: 12px;
border: 1px solid @border;
}
src/shared/styles/password-dialog.css
+4 -4
View File
@@ -4,7 +4,7 @@
#wifi-dialog-background {
background-color: alpha(@text-main, 0.05);
border-radius: var(--radius-md);
border-radius: apply(radius-md);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 20px;
min-width: 450px;
@@ -46,7 +46,7 @@
#wifi-dialog-password-entry {
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-xs);
border-radius: apply(radius-xs);
padding: 8px 12px;
color: @text-main;
font-size: 13px;
@@ -66,7 +66,7 @@
background-color: transparent;
border: none;
padding: 4px;
border-radius: var(--radius-xs);
border-radius: apply(radius-xs);
min-width: 24px;
min-height: 24px;
}
@@ -90,7 +90,7 @@
#wifi-dialog-cancel-button,
#wifi-dialog-join-button {
border-radius: var(--radius-xs);
border-radius: apply(radius-xs);
font-size: 13px;
font-weight: 500;
min-width: 80px;
src/shared/styles/player.css
+11 -11
View File
@@ -1,5 +1,5 @@
#player-stack-button {
border-radius: var(--radius-xs);
border-radius: apply(radius-xs);
min-width: 7px;
min-height: 7px;
margin: 10px 3px;
@@ -17,14 +17,14 @@
}
#player-stack-button.active {
border-radius: var(--radius-xs);
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: var(--radius-sm);
border-radius: apply(radius-sm);
margin: 0 6px;
background-color: @shadow-color;
box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
@@ -33,7 +33,7 @@
#outer-player-box-c {
min-height: 55px;
min-width: 245px;
border-radius: var(--radius-sm);
border-radius: apply(radius-sm);
/* margin: 0 6px; */
/* background-color: @shadow-color; */
/* box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4); */
@@ -41,7 +41,7 @@
#outer-no-player-box-c {
min-height: 55px;
min-width: 345px;
border-radius: var(--radius-sm);
border-radius: apply(radius-sm);
/* margin: 0 6px; */
/* background-color: @shadow-color; */
/* box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4); */
@@ -50,7 +50,7 @@
background-color: @bg-darker;
box-shadow: inset 0 0 0 0.5px alpha(@text-dim, 0.4);
border: 1px solid @border-strong;
border-radius: var(--radius-md);
border-radius: apply(radius-md);
margin-top: 0.5rem;
margin-left: 4px;
margin-right: 4px;
@@ -58,7 +58,7 @@
min-height: 50px;
min-width: 330px;
/* border-radius: var(--radius-sm); */
/* border-radius: apply(radius-sm); */
/* margin: 0 6px 10px; */
/* border: 0.5px solid alpha(#000, 0.4); */
/* background-color: alpha(@text-dim, 0.1); */
@@ -142,7 +142,7 @@
margin-bottom: 10px;
background-size: cover;
margin-left: 10px;
border-radius: var(--radius-xs);
border-radius: apply(radius-xs);
}
.album-image {
min-width: 70px;
@@ -162,17 +162,17 @@
#seek-bar scale {
background-color: transparent;
margin-top: 10px;
border-radius: var(--radius-sm);
border-radius: apply(radius-sm);
}
#seek-bar trough {
min-width: 10px;
border-radius: var(--radius-full);
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: var(--radius-full);
border-radius: apply(radius-full);
}
src/shared/styles/settings.css
+8 -8
View File
@@ -1,6 +1,6 @@
#settings-window {
background-color: var(--background);
border-radius: var(--radius-md);
border-radius: apply(radius-md);
border: 1px solid var(--border);
min-width: 850px;
min-height: 600px;
@@ -19,7 +19,7 @@
#settings-sidebar-button {
padding: 10px 15px;
border-radius: var(--radius-sm);
border-radius: apply(radius-sm);
margin-bottom: 2px;
}
@@ -53,7 +53,7 @@
#settings-row {
padding: 12px 15px;
border-radius: var(--radius-sm);
border-radius: apply(radius-sm);
background-color: rgba(255, 255, 255, 0.03);
margin-bottom: 2px;
}
@@ -71,7 +71,7 @@
#settings-switch {
background-color: rgba(255, 255, 255, 0.1);
padding: 6px 12px;
border-radius: var(--radius-xl);
border-radius: apply(radius-xl);
min-width: 50px;
transition: all 0.2s ease;
}
@@ -84,7 +84,7 @@
#settings-entry {
background-color: rgba(255, 255, 255, 0.05);
padding: 8px 12px;
border-radius: var(--radius-xs);
border-radius: apply(radius-xs);
border: 1px solid var(--border);
min-width: 200px;
color: var(--foreground);
@@ -97,7 +97,7 @@
#settings-combo {
background-color: rgba(255, 255, 255, 0.05);
padding: 4px 8px;
border-radius: var(--radius-xs);
border-radius: apply(radius-xs);
border: 1px solid var(--border);
min-width: 150px;
color: var(--foreground);
@@ -113,7 +113,7 @@
#settings-list-tag {
background-color: rgba(255, 255, 255, 0.08);
border-radius: var(--radius-md);
border-radius: apply(radius-md);
padding: 4px 10px;
margin-right: 5px;
margin-bottom: 5px;
@@ -141,6 +141,6 @@
background-color: rgba(255, 255, 255, 0.03);
border: 1px dashed var(--border);
padding: 6px 12px;
border-radius: var(--radius-xs);
border-radius: apply(radius-xs);
font-size: 13px;
}
src/shared/styles/switcher.css
+3 -3
View File
@@ -1,6 +1,6 @@
#application-switcher-container {
background-color: var(--shadow);
border-radius: var(--radius-xl);
border-radius: apply(radius-xl);
padding: 24px;
}
@@ -17,7 +17,7 @@
#window-button {
background-color: transparent;
border-radius: var(--radius-md);
border-radius: apply(radius-md);
}
#window-button.active {
@@ -39,7 +39,7 @@
}
#switcher-icon-box {
border-radius: var(--radius-md);
border-radius: apply(radius-md);
padding: 4px;
}
src/shared/styles/tray.css
+1 -1
View File
@@ -39,7 +39,7 @@ menu > menuitem:last-child {
menu > menuitem:hover {
transition: all 20ms ease-in-out;
font-size: 13px;
border-radius: var(--radius-xs);
border-radius: apply(radius-xs);
color: #222;
background-color: alpha(#2369ff, 1);
}
src/shared/styles/widgets.css
+6 -6
View File
@@ -2,8 +2,8 @@
margin: 5px 5px 20px 5px;
min-width: 170px;
min-height: 170px;
border-radius: var(--radius-lg);
transition: all var(--transition-slow);
border-radius: apply(radius-lg);
transition: all apply(transition-slow);
background: #202020;
}
@@ -92,7 +92,7 @@
margin: 5px 20px 20px 10px;
min-width: 170px;
min-height: 170px;
border-radius: var(--radius-lg);
border-radius: apply(radius-lg);
}
#calendar-widget {
@@ -148,7 +148,7 @@
font-weight: 700;
color: #191919;
background-color: var(--blue-dim);
border-radius: var(--radius-full);
border-radius: apply(radius-full);
min-width: 18px;
min-height: 16px;
padding: 2px;
@@ -195,7 +195,7 @@
margin: 5px 10px 20px 5px;
min-width: 170px;
min-height: 170px;
border-radius: var(--radius-lg);
border-radius: apply(radius-lg);
}
/* System Info Widget CSS */
@@ -204,7 +204,7 @@
margin: 5px 5px 5px 5px;
min-width: 170px;
min-height: 170px;
border-radius: var(--radius-lg);
border-radius: apply(radius-lg);
}
#ram-progress {