summaryrefslogtreecommitdiff
path: root/scss
diff options
context:
space:
mode:
Diffstat (limited to 'scss')
-rw-r--r--scss/_lib.scss2
-rw-r--r--scss/bar.scss2
-rw-r--r--scss/notifications.scss101
-rw-r--r--scss/notifpopups.scss84
-rw-r--r--scss/widgets.scss78
5 files changed, 187 insertions, 80 deletions
diff --git a/scss/_lib.scss b/scss/_lib.scss
index e12140f..d2ad3d0 100644
--- a/scss/_lib.scss
+++ b/scss/_lib.scss
@@ -15,7 +15,7 @@ $scale: 0.068rem;
border: s($width) $style color.change($colour, $alpha: $alpha);
}
-@mixin shadow($colour: scheme.$mantle, $alpha: 0.4, $x: 2, $y: 3, $blur: 8, $spread: 0) {
+@mixin shadow($colour: black, $alpha: 0.4, $x: 2, $y: 3, $blur: 8, $spread: 0) {
box-shadow: s($x) s($y) s($blur) s($spread) color.change($colour, $alpha: $alpha);
}
diff --git a/scss/bar.scss b/scss/bar.scss
index ab75b00..1d73319 100644
--- a/scss/bar.scss
+++ b/scss/bar.scss
@@ -92,7 +92,7 @@
color: scheme.$blue;
}
- .notifications {
+ .unread {
color: scheme.$mauve;
}
diff --git a/scss/notifications.scss b/scss/notifications.scss
new file mode 100644
index 0000000..51f1a0b
--- /dev/null
+++ b/scss/notifications.scss
@@ -0,0 +1,101 @@
+@use "sass:color";
+@use "scheme";
+@use "lib";
+@use "font";
+
+@mixin popup($accent) {
+ .separator {
+ background-color: $accent;
+ }
+
+ .image {
+ @include lib.border($accent, 0.05);
+ }
+}
+
+.notifications {
+ @include lib.rounded(8);
+ @include lib.border(scheme.$mauve, 0.4, 2);
+ @include lib.shadow;
+
+ min-width: lib.s(400);
+ min-height: lib.s(600);
+ background-color: scheme.$base;
+ color: scheme.$mauve;
+ padding: lib.s(10) lib.s(12);
+
+ .header {
+ @include font.mono;
+ @include lib.spacing(8);
+
+ padding: 0 lib.s(5);
+ margin-bottom: lib.s(8);
+
+ button {
+ @include lib.rounded(5);
+ @include lib.element-decel;
+
+ padding: lib.s(3) lib.s(8);
+
+ &:hover,
+ &:focus {
+ background-color: scheme.$surface0;
+ }
+
+ &:active {
+ background-color: scheme.$surface1;
+ }
+
+ &.enabled {
+ background-color: scheme.$mauve;
+ color: scheme.$base;
+
+ &:hover,
+ &:focus {
+ background-color: color.mix(scheme.$mauve, scheme.$base, 80%);
+ }
+
+ &:active {
+ background-color: color.mix(scheme.$mauve, scheme.$base, 70%);
+ }
+ }
+ }
+ }
+
+ .notification {
+ .wrapper {
+ padding-bottom: lib.s(10);
+ }
+
+ .inner {
+ background-color: color.mix(scheme.$surface0, scheme.$base, 70%);
+
+ &.low {
+ @include popup(scheme.$overlay0);
+ }
+
+ &.normal {
+ @include lib.border(scheme.$lavender, 0.3);
+ @include popup(scheme.$lavender);
+ }
+
+ &.critical {
+ @include lib.border(scheme.$red, 0.5);
+ @include popup(scheme.$red);
+ }
+ }
+
+ .actions > * {
+ background-color: scheme.$surface1;
+
+ &:hover,
+ &:focus {
+ background-color: scheme.$surface2;
+ }
+
+ &:active {
+ background-color: scheme.$overlay0;
+ }
+ }
+ }
+}
diff --git a/scss/notifpopups.scss b/scss/notifpopups.scss
index 25e52e1..cec24a4 100644
--- a/scss/notifpopups.scss
+++ b/scss/notifpopups.scss
@@ -21,86 +21,22 @@
min-width: lib.s(410);
padding-left: lib.s(10); // So notifications can overshoot for init animation
- .wrapper {
- padding-top: lib.s(10);
- }
-
.notification {
- @include lib.rounded(8, $tr: 0, $br: 0);
- @include lib.shadow;
- @include font.main;
- @include popup(scheme.$lavender);
-
- background-color: scheme.$base;
- color: scheme.$text;
- padding: lib.s(10) lib.s(12);
-
- @include lib.spacing($vertical: true);
-
- &.low {
- @include popup(scheme.$overlay0);
- }
-
- &.critical {
- @include popup(scheme.$red);
+ .wrapper {
+ padding-top: lib.s(10);
}
- }
-
- .header,
- .content {
- padding: 0 lib.s(5);
- }
-
- .header {
- @include font.mono;
- @include lib.spacing(5);
- }
-
- .content {
- @include lib.spacing(10);
- }
-
- .app-icon {
- font-size: lib.s(18);
- }
-
- .image {
- @include lib.rounded(10);
-
- background-size: cover;
- background-position: center;
- min-width: lib.s(64);
- min-height: lib.s(64);
- margin-top: lib.s(3);
- }
-
- .summary {
- @include font.title;
-
- font-size: lib.s(16);
- }
-
- .body {
- font-size: lib.s(14);
- }
-
- .actions {
- @include lib.spacing;
-
- & > * {
- @include lib.rounded(5);
- @include lib.element-decel;
- padding: lib.s(5) lib.s(10);
- background-color: scheme.$surface0;
+ .inner {
+ @include lib.rounded(8, $tr: 0, $br: 0);
+ @include lib.shadow;
+ @include popup(scheme.$lavender);
- &:hover,
- &:focus {
- background-color: scheme.$surface1;
+ &.low {
+ @include popup(scheme.$overlay0);
}
- &:active {
- background-color: scheme.$surface2;
+ &.critical {
+ @include popup(scheme.$red);
}
}
}
diff --git a/scss/widgets.scss b/scss/widgets.scss
index 39ab490..e54a117 100644
--- a/scss/widgets.scss
+++ b/scss/widgets.scss
@@ -17,6 +17,78 @@ label.icon {
@include font.icon;
}
+.notification {
+ .inner {
+ @include lib.rounded(8);
+ @include font.main;
+
+ background-color: scheme.$base;
+ color: scheme.$text;
+ padding: lib.s(10) lib.s(12);
+
+ @include lib.spacing($vertical: true);
+ }
+
+ .header,
+ .content {
+ padding: 0 lib.s(5);
+ }
+
+ .header {
+ @include font.mono;
+ @include lib.spacing(8);
+ }
+
+ .content {
+ @include lib.spacing(10);
+ }
+
+ .app-icon {
+ font-size: lib.s(18);
+ }
+
+ .image {
+ @include lib.rounded(10);
+
+ background-size: cover;
+ background-position: center;
+ min-width: lib.s(64);
+ min-height: lib.s(64);
+ margin-top: lib.s(3);
+ }
+
+ .summary {
+ @include font.title;
+
+ font-size: lib.s(16);
+ }
+
+ .body {
+ font-size: lib.s(14);
+ }
+
+ .actions {
+ @include lib.spacing;
+
+ & > * {
+ @include lib.rounded(5);
+ @include lib.element-decel;
+
+ padding: lib.s(5) lib.s(10);
+ background-color: scheme.$surface0;
+
+ &:hover,
+ &:focus {
+ background-color: scheme.$surface1;
+ }
+
+ &:active {
+ background-color: scheme.$surface2;
+ }
+ }
+ }
+}
+
separator,
.separator {
@include lib.rounded(2);
@@ -112,9 +184,6 @@ tooltip {
scrollbar {
trough {
- @include lib.rounded(1000);
-
- min-width: lib.s(12);
background-color: transparent;
}
@@ -122,12 +191,13 @@ scrollbar {
@include lib.rounded(1000);
@include lib.element-decel;
- min-width: lib.s(6);
+ min-width: lib.s(3);
min-height: lib.s(30);
background-color: color.change(scheme.$overlay0, $alpha: 0.3);
&:hover,
&:focus {
+ min-width: lib.s(6);
background-color: color.change(scheme.$overlay0, $alpha: 0.4);
}
generated by cgit v1.2.3-freya (git 2.51.1) at 2026-01-20 18:06:31 +0000