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

style(src/styles/notification): switch notification background colors to glass tokens

Browse Source
This commit is contained in:
sankalp committed 2026-07-14 21:43:04 +05:45
1 parent 21e8a3e7da
commit ef7b200c74
7 files changed
+40 -39
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/styles/notification/center_base.css
+4 -4
View File
@@ -1,7 +1,7 @@
#noti-center-box {
background-color: transparent;
/* border: 1px solid @outline-a30; */
/* border: 1px solid @glass-border; */
border-radius: apply(radius-xl);
margin-right: 10px;
/* padding: 20px; */
@@ -10,10 +10,10 @@
#noti-clear-button {
/* min-width: 10px; */
background-color: @bg-a50;
background-color: @glass-popup;
min-height: 25px;
min-width: 70px;
border: 1px solid @bg-a90;
border: 1px solid @glass-border;
border-radius: apply(radius-md);
margin-top: 10px;
}
@@ -23,5 +23,5 @@
}
#noti-clear-button:hover {
background-color: @fg-a10;
background-color: @glass-hover;
}
src/styles/notification/center_expanded.css
+13 -13
View File
@@ -1,7 +1,7 @@
/* Expanded notification group header */
#notification-group-header {
background-color: @bg-a50;
border: 1px solid @bg-a90;
background-color: @glass-popup;
border: 1px solid @glass-border;
border-radius: apply(radius-md) apply(radius-md) 0 0;
padding: 8px 12px;
margin: 2px 0 0 0;
@@ -15,8 +15,8 @@
#notification-show-less {
background-color: transparent;
color: @fg-a70;
border: 1px solid @fg-a20;
color: @glass-text-secondary;
border: 1px solid @glass-border;
border-radius: apply(radius-xs);
padding: 2px 8px;
font-size: apply(font-xs);
@@ -24,14 +24,14 @@
}
#notification-show-less:hover {
background-color: alpha(@fg-a40, 0.7);
color: @fg-a90;
background-color: @glass-active;
color: @glass-text;
}
#notification-close-all {
background-color: transparent;
color: @fg-a70;
border: 1px solid @fg-a20;
color: @glass-text-secondary;
border: 1px solid @glass-border;
border-radius: apply(radius-xs);
padding: 2px 8px;
font-size: apply(font-sm);
@@ -39,15 +39,15 @@
}
#notification-close-all:hover {
background-color: @error-a20;
color: @fg-a90;
border-color: @error-a40;
background-color: @glass-error;
color: @foreground;
border-color: @glass-error;
}
/* Expanded notification list */
#notification-group-expanded {
border: 1px solid @bg-a90;
border: 1px solid @glass-border;
border-top: none;
border-radius: 0 0 apply(radius-md) apply(radius-md);
/* background-color: @shadow-a02; */
/* background-color: @glass-overlay-light; */
}
src/styles/notification/center_overrides.css
+4 -4
View File
@@ -6,7 +6,7 @@
font-weight: bold;
}
#notification-show-less {
background-color: @bg-a50;
background-color: @glass-popup;
font-size: apply(font-sm);
margin: 10px;
border-radius: apply(radius-md);
@@ -30,10 +30,10 @@
font-size: apply(font-md);
}
#notification-centre-notifs {
background-color: @bg-a50;
background-color: @glass-popup;
min-height: 40px;
padding: 10px;
border: 1px solid @bg-a90;
border: 1px solid @glass-border;
border-radius: apply(radius-md);
}
@@ -51,7 +51,7 @@
border-radius: apply(radius-full);
}
#notification-close:hover {
background-color: alpha(@bg-a80, 0.8);
background-color: @glass-active;
min-width: 23px;
min-height: 23px;
border-radius: apply(radius-full);
src/styles/notification/center_stack.css
+9 -9
View File
@@ -11,8 +11,8 @@
/* Bottom shadow layer (deepest) - offset to show stacking from below */
#stack-shadow-bottom {
background-color: @bg-a50;
border-top: 1px solid @bg-a90;
background-color: @glass-surface-1;
border-top: 1px solid @glass-divider;
border-radius: apply(radius-md);
opacity: 1;
min-height: 16px;
@@ -23,9 +23,9 @@
/* Middle shadow layer */
#stack-shadow-middle {
background-color: @bg-a50;
background-color: @glass-surface-2;
border-top: 1px solid @bg-a90;
border-top: 1px solid @glass-divider;
border-radius: apply(radius-md);
opacity: 1;
min-height: 20px;
@@ -36,9 +36,9 @@
/* Main notification content (top layer) */
#stack-main-notification {
background-color: @bg-a50;
background-color: @glass-popup;
border: 1.2px solid @bg-a90;
border: 1.2px solid @glass-border;
border-radius: apply(radius-md);
padding: 12px;
transition: all apply(transition-medium) ease;
@@ -46,7 +46,7 @@
/* Hover effects for stacked notifications */
#notification-stack-container:hover #stack-main-notification {
background-color: @fg-a10;
background-color: @glass-active;
}
#notification-stack-container:hover #stack-shadow-middle {
@@ -59,8 +59,8 @@
/* Notification count badge */
#notification-count-label {
background-color: @fg-a20;
color: @fg-a80;
background-color: @glass-selected;
color: @glass-text-secondary;
border-radius: 10px;
padding: 2px 6px;
font-size: apply(font-2xs);
src/styles/notification/notification_base.css
+2 -1
View File
@@ -1,8 +1,9 @@
#notification {
padding: 10px;
background-color: @bg-a50;
background-color: @glass-popup;
border-radius: apply(radius-sm);
margin-top: 10px;
margin-right: 10px;
border: 1px solid @glass-border-soft;
/* margin: 5px; */
}
src/styles/notification/notification_buttons.css
+4 -4
View File
@@ -1,20 +1,20 @@
#notification-close-button {
background-color: alpha(@fg-a40, 0.3);
background-color: @glass-hover;
border-radius: apply(radius-sm);
}
#notification-close-button:hover {
background-color: @primary-a90;
background-color: @glass-active;
}
#notification-action-buttons button {
background-color: alpha(@fg-a40, 0.3);
background-color: @glass-hover;
padding: 4px;
border-radius: apply(radius-sm);
transition: background-color apply(transition-fast);
}
#notification-action-buttons button:hover {
background-color: @primary-a90;
background-color: @glass-active;
}
#notification-action-buttons button:active {
src/styles/notification/notification_close.css
+4 -4
View File
@@ -1,5 +1,5 @@
#notif-close-button {
background-color: var(--surface);
background-color: @glass-surface-1;
border-radius: apply(radius-lg);
padding: 4px;
transition: background-color apply(transition-fast);
@@ -7,15 +7,15 @@
#notif-close-button:hover,
#notif-close-button:focus {
background-color: var(--surface-bright);
background-color: @glass-active;
}
#notif-close-button:active {
background-color: var(--red-dim);
background-color: @glass-error;
}
#notif-close-label {
color: var(--red-dim);
color: @glass-error;
font-size: 20px;
}