nat/ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve notifications

Browse Source
This commit is contained in:
gnat
2024-09-25 11:09:57 -07:00
parent af9d9e3451
commit 9e70891175
3 changed files with 68 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
style/components/notification-popups.scss
View File

@ -16,12 +16,23 @@
margin-bottom: 25px;
min-width: 24rem;
padding: 0px;
border: 2px solid $fg;
border-right: 25px solid $hl-alt-2;
border: 1px solid $fg;
border-right: none;
background: $bg;
}
&.critical {
border-right: 25px solid $hl;
.urgency-indicator {
min-width: 15px;
margin-bottom: 25px;
&.normal, &.low {
background: $hl-alt-2;
border: 1px solid $hl-alt-2;
}
&.urgent {
background: $hl;
border: 1px solid $hl
}
}
@ -30,8 +41,6 @@
}
.timeout-bar {
margin: 5px 0px 0;
margin-top: 5px;
background: $bg-alt-1;
> trough > progress {
@ -53,8 +62,7 @@
.icon {
min-width: 68px;
min-height: 68px;
margin-right: 1em;
margin-left: 1em;
margin: 5px;
}
.icon image {
@ -68,8 +76,9 @@
min-height: 68px;
}
.title {
.title {
font-size: 28px;
padding-right: 5px;
}
.actions .action-button {

23
style/style.css
View File

@ -243,16 +243,21 @@
margin-bottom: 25px;
min-width: 24rem;
padding: 0px;
border: 2px solid #f2f4f8;
border-right: 25px solid #42be65;
border: 1px solid #f2f4f8;
border-right: none;
background: #161616; }
.notifications .revealer .notification.critical {
border-right: 25px solid #FF7EB6; }
.notifications .revealer .urgency-indicator {
min-width: 15px;
margin-bottom: 25px; }
.notifications .revealer .urgency-indicator.normal, .notifications .revealer .urgency-indicator.low {
background: #42be65;
border: 1px solid #42be65; }
.notifications .revealer .urgency-indicator.urgent {
background: #FF7EB6;
border: 1px solid #FF7EB6; }
.notifications .revealer .body {
margin-right: 1em; }
.notifications .revealer .timeout-bar {
margin: 5px 0px 0;
margin-top: 5px;
background: #262626; }
.notifications .revealer .timeout-bar > trough > progress {
background-image: none;
@ -266,8 +271,7 @@
.notifications .revealer .icon {
min-width: 68px;
min-height: 68px;
margin-right: 1em;
margin-left: 1em; }
margin: 5px; }
.notifications .revealer .icon image {
font-size: 58px;
margin: 5px;
@ -276,7 +280,8 @@
min-width: 68px;
min-height: 68px; }
.notifications .revealer .title {
font-size: 28px; }
font-size: 28px;
padding-right: 5px; }
.notifications .revealer .actions .action-button {
margin: 0 .4em;
margin-top: .8em;