matt1432/nixos-configs
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix(ags): fix gesture not working with touch

Browse source
This commit is contained in:
matt1432 2023-09-11 18:23:47 -04:00
parent c75afb84b6
commit 5f59cd56d2
5 changed files with 37 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
config/ags/js/misc/drag.js
View file

@ -69,24 +69,3 @@ export const Draggable = ({
return w; return w;
}; };
/*export const DragTest = Window({
name: 'drag-test',
layer: 'overlay',
anchor: 'top right',
child: Box({
style: 'background: white; min-width: 200px; min-height: 200px;',
children: [
Draggable({
maxOffset: 120,
startMargin: 5,
className: 'test',
style: 'background: black; min-width: 40px; min-height: 20px',
child: Button({
style: 'background: red; min-width: 10px; min-height: 10px',
onClicked: 'echo hi',
}),
}),
],
}),
});*/

5
config/ags/js/notifications/base.js
View file

@ -72,11 +72,8 @@ export default ({ id, summary, body, actions, urgency, time, ...icon }) => Dragg
}, },
/// ///
child: EventBox({ child: Box({
className: `notification ${urgency}`, className: `notification ${urgency}`,
/// TODO: see if this is still necessary
//
//onPrimaryClick: () => Notifications.dismiss(id),
vexpand: false, vexpand: false,
// Notification // Notification
child: Box({ child: Box({

11
config/ags/scss/widgets/notification-center.scss
View file

@ -1,10 +1,10 @@
.notification-center { .notification-center {
min-height: 700px; min-height: 700px;
min-width: 500px; min-width: 524px;
margin-top: 6px; margin-top: 6px;
margin-right: 60px; margin-right: 60px;
background: $bg; background: $bg;
border-radius: 12px; border-radius: 30px;
border-top-right-radius: 0px; border-top-right-radius: 0px;
border: 2px solid $contrastbg; border: 2px solid $contrastbg;
padding: 0px; padding: 0px;
@ -48,9 +48,10 @@
.notification-list-box { .notification-list-box {
background: $bgfull; background: $bgfull;
border-radius: 12px; padding: 0 12px 0 12px;
border-top: 3px solid $bgSecondary; border-radius: 30px;
box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.2); border-top: 2px solid $contrastbg;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
scrollbar { scrollbar {
all: unset; all: unset;
border-radius: 8px; border-radius: 8px;

43
config/ags/scss/widgets/notification.scss
View file

@ -1,10 +1,3 @@
$color_1: #f1f1f1;
$color_2: #eee;
$color_3: rgba(238, 238, 238, 0.8);
$color_4: #141414;
$color_5: rgba(238, 238, 238, 0.3);
$color_6: white;
$font-family_1: "Ubuntu Nerd Font", sans-serif;
$background-color_1: rgba(238, 238, 238, 0.154); $background-color_1: rgba(238, 238, 238, 0.154);
$background-color_2: rgba(230, 112, 144, 0.5); $background-color_2: rgba(230, 112, 144, 0.5);
$background-color_3: rgba(238, 238, 238, 0.06); $background-color_3: rgba(238, 238, 238, 0.06);
@ -23,41 +16,31 @@ $background-color_10: rgba(238, 238, 238, 0.5);
} }
.notification { .notification {
>box { >box {
border-radius: 4.5px;
padding: 9px; padding: 9px;
all: unset; all: unset;
box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.6); box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.4);
margin: 9px; margin: 9px;
border: 1px solid rgba(238, 238, 238, 0.04); border: 2px solid $contrastbg;
border-radius: 15.3px; border-radius: 15px;
background-color: $background-color_6; background-color: $bg;
color: $color_2;
padding: 16.2px; padding: 16.2px;
border-radius: 9px;
* { * {
font-size: 16px; font-size: 16px;
font-family: $font-family_1;
} }
} }
&:hover { &:hover {
.close-button { .close-button {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: $background-color_1; background-color: $background-color_1;
color: $color_1;
background-color: $background-color_2; background-color: $background-color_2;
} }
} }
.title { .title {
margin-right: 9px; margin-right: 9px;
color: $color_2;
font-size: 1.1em; font-size: 1.1em;
} }
.time {
color: $color_3;
}
.description { .description {
font-size: .9em; font-size: .9em;
color: $color_3;
min-width: 350px; min-width: 350px;
} }
.icon { .icon {
@ -72,7 +55,6 @@ $background-color_10: rgba(238, 238, 238, 0.5);
all: unset; all: unset;
transition: 200ms; transition: 200ms;
border-radius: 9px; border-radius: 9px;
color: $color_2;
background-color: $background-color_3; background-color: $background-color_3;
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
border-radius: 7.2px; border-radius: 7.2px;
@ -81,23 +63,19 @@ $background-color_10: rgba(238, 238, 238, 0.5);
margin: 9px 4.5px 0; margin: 9px 4.5px 0;
* { * {
font-size: 16px; font-size: 16px;
font-family: $font-family_1;
} }
&:focus { &:focus {
box-shadow: inset 0 0 0 1px #51a4e7; box-shadow: inset 0 0 0 1px #51a4e7;
background-color: $background-color_1; background-color: $background-color_1;
color: $color_1;
} }
&:hover { &:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: $background-color_1; background-color: $background-color_1;
color: $color_1;
} }
&:active { &:active {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4; background-color: $background-color_4;
color: $color_4;
&:hover { &:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
} }
@ -106,7 +84,6 @@ $background-color_10: rgba(238, 238, 238, 0.5);
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4; background-color: $background-color_4;
color: $color_4;
&:hover { &:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
} }
@ -114,7 +91,6 @@ $background-color_10: rgba(238, 238, 238, 0.5);
&:disabled { &:disabled {
box-shadow: none; box-shadow: none;
background-color: $background-color_5; background-color: $background-color_5;
color: $color_5;
} }
&:first-child { &:first-child {
margin-left: 0; margin-left: 0;
@ -127,7 +103,6 @@ $background-color_10: rgba(238, 238, 238, 0.5);
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4; background-color: $background-color_4;
color: $color_4;
&:hover { &:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
} }
@ -136,7 +111,6 @@ $background-color_10: rgba(238, 238, 238, 0.5);
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4; background-color: $background-color_4;
color: $color_4;
&:hover { &:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
} }
@ -146,7 +120,6 @@ $background-color_10: rgba(238, 238, 238, 0.5);
all: unset; all: unset;
transition: 200ms; transition: 200ms;
border-radius: 9px; border-radius: 9px;
color: $color_2;
background-color: $background-color_5; background-color: $background-color_5;
background-image: none; background-image: none;
box-shadow: none; box-shadow: none;
@ -156,24 +129,20 @@ $background-color_10: rgba(238, 238, 238, 0.5);
min-height: 1.2em; min-height: 1.2em;
* { * {
font-size: 16px; font-size: 16px;
font-family: $font-family_1;
} }
&:focus { &:focus {
box-shadow: inset 0 0 0 1px #51a4e7; box-shadow: inset 0 0 0 1px #51a4e7;
background-color: $background-color_1; background-color: $background-color_1;
color: $color_1;
} }
&:hover { &:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: $background-color_1; background-color: $background-color_1;
color: $color_1;
background-color: $background-color_2; background-color: $background-color_2;
} }
&:active { &:active {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4; background-color: $background-color_4;
color: $color_4;
background-image: linear-gradient(#e67090, #e67090); background-image: linear-gradient(#e67090, #e67090);
&:hover { &:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
@ -183,7 +152,6 @@ $background-color_10: rgba(238, 238, 238, 0.5);
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4; background-color: $background-color_4;
color: $color_4;
&:hover { &:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
} }
@ -191,14 +159,12 @@ $background-color_10: rgba(238, 238, 238, 0.5);
&:disabled { &:disabled {
box-shadow: none; box-shadow: none;
background-color: $background-color_5; background-color: $background-color_5;
color: $color_5;
} }
} }
button.close-button.on { button.close-button.on {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4; background-color: $background-color_4;
color: $color_4;
&:hover { &:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
} }
@ -207,7 +173,6 @@ $background-color_10: rgba(238, 238, 238, 0.5);
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4; background-color: $background-color_4;
color: $color_4;
&:hover { &:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
} }

79
config/ags/style.css
View file

@ -181,11 +181,11 @@ tooltip {
.notification-center { .notification-center {
min-height: 700px; min-height: 700px;
min-width: 500px; min-width: 524px;
margin-top: 6px; margin-top: 6px;
margin-right: 60px; margin-right: 60px;
background: rgba(40, 42, 54, 0.8); background: rgba(40, 42, 54, 0.8);
border-radius: 12px; border-radius: 30px;
border-top-right-radius: 0px; border-top-right-radius: 0px;
border: 2px solid rgba(189, 147, 249, 0.8); border: 2px solid rgba(189, 147, 249, 0.8);
padding: 0px; padding: 0px;
@ -218,9 +218,10 @@ tooltip {
font-size: 1.2em; } font-size: 1.2em; }
.notification-center .notification-list-box { .notification-center .notification-list-box {
background: #282a36; background: #282a36;
border-radius: 12px; padding: 0 12px 0 12px;
border-top: 3px solid rgba(56, 44, 74, 0.8); border-radius: 30px;
box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.2); } border-top: 2px solid rgba(189, 147, 249, 0.8);
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5); }
.notification-center .notification-list-box scrollbar { .notification-center .notification-list-box scrollbar {
all: unset; all: unset;
border-radius: 8px; border-radius: 8px;
@ -261,38 +262,28 @@ tooltip {
box-shadow: inset 0 0 0.5em 0 #e67090; } box-shadow: inset 0 0 0.5em 0 #e67090; }
.notification > box { .notification > box {
border-radius: 4.5px;
padding: 9px; padding: 9px;
all: unset; all: unset;
box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.6); box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.4);
margin: 9px; margin: 9px;
border: 1px solid rgba(238, 238, 238, 0.04); border: 2px solid rgba(189, 147, 249, 0.8);
border-radius: 15.3px; border-radius: 15px;
background-color: #171717; background-color: rgba(40, 42, 54, 0.8);
color: #eee; padding: 16.2px; }
padding: 16.2px;
border-radius: 9px; }
.notification > box * { .notification > box * {
font-size: 16px; font-size: 16px; }
font-family: "Ubuntu Nerd Font", sans-serif; }
.notification:hover .close-button { .notification:hover .close-button {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: rgba(238, 238, 238, 0.154); background-color: rgba(238, 238, 238, 0.154);
color: #f1f1f1;
background-color: rgba(230, 112, 144, 0.5); } background-color: rgba(230, 112, 144, 0.5); }
.notification .title { .notification .title {
margin-right: 9px; margin-right: 9px;
color: #eee;
font-size: 1.1em; } font-size: 1.1em; }
.notification .time {
color: rgba(238, 238, 238, 0.8); }
.notification .description { .notification .description {
font-size: .9em; font-size: .9em;
color: rgba(238, 238, 238, 0.8);
min-width: 350px; } min-width: 350px; }
.notification .icon { .notification .icon {
@ -306,7 +297,6 @@ tooltip {
all: unset; all: unset;
transition: 200ms; transition: 200ms;
border-radius: 9px; border-radius: 9px;
color: #eee;
background-color: rgba(238, 238, 238, 0.06); background-color: rgba(238, 238, 238, 0.06);
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
border-radius: 7.2px; border-radius: 7.2px;
@ -314,34 +304,28 @@ tooltip {
padding: 4.5px 9px; padding: 4.5px 9px;
margin: 9px 4.5px 0; } margin: 9px 4.5px 0; }
.notification .actions button * { .notification .actions button * {
font-size: 16px; font-size: 16px; }
font-family: "Ubuntu Nerd Font", sans-serif; }
.notification .actions button:focus { .notification .actions button:focus {
box-shadow: inset 0 0 0 1px #51a4e7; box-shadow: inset 0 0 0 1px #51a4e7;
background-color: rgba(238, 238, 238, 0.154); background-color: rgba(238, 238, 238, 0.154); }
color: #f1f1f1; }
.notification .actions button:hover { .notification .actions button:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: rgba(238, 238, 238, 0.154); background-color: rgba(238, 238, 238, 0.154); }
color: #f1f1f1; }
.notification .actions button:active { .notification .actions button:active {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: #51a4e7; background-color: #51a4e7; }
color: #141414; }
.notification .actions button:active:hover { .notification .actions button:active:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); } box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); }
.notification .actions button:checked { .notification .actions button:checked {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: #51a4e7; background-color: #51a4e7; }
color: #141414; }
.notification .actions button:checked:hover { .notification .actions button:checked:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); } box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); }
.notification .actions button:disabled { .notification .actions button:disabled {
box-shadow: none; box-shadow: none;
background-color: transparent; background-color: transparent; }
color: rgba(238, 238, 238, 0.3); }
.notification .actions button:first-child { .notification .actions button:first-child {
margin-left: 0; } margin-left: 0; }
.notification .actions button:last-child { .notification .actions button:last-child {
@ -350,16 +334,14 @@ tooltip {
.notification .actions button.on { .notification .actions button.on {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: #51a4e7; background-color: #51a4e7; }
color: #141414; }
.notification .actions button.on:hover { .notification .actions button.on:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); } box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); }
.notification .actions button.active { .notification .actions button.active {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: #51a4e7; background-color: #51a4e7; }
color: #141414; }
.notification .actions button.active:hover { .notification .actions button.active:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); } box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); }
@ -367,7 +349,6 @@ tooltip {
all: unset; all: unset;
transition: 200ms; transition: 200ms;
border-radius: 9px; border-radius: 9px;
color: #eee;
background-color: transparent; background-color: transparent;
background-image: none; background-image: none;
box-shadow: none; box-shadow: none;
@ -376,49 +357,41 @@ tooltip {
min-width: 1.2em; min-width: 1.2em;
min-height: 1.2em; } min-height: 1.2em; }
.notification button.close-button * { .notification button.close-button * {
font-size: 16px; font-size: 16px; }
font-family: "Ubuntu Nerd Font", sans-serif; }
.notification button.close-button:focus { .notification button.close-button:focus {
box-shadow: inset 0 0 0 1px #51a4e7; box-shadow: inset 0 0 0 1px #51a4e7;
background-color: rgba(238, 238, 238, 0.154); background-color: rgba(238, 238, 238, 0.154); }
color: #f1f1f1; }
.notification button.close-button:hover { .notification button.close-button:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: rgba(238, 238, 238, 0.154); background-color: rgba(238, 238, 238, 0.154);
color: #f1f1f1;
background-color: rgba(230, 112, 144, 0.5); } background-color: rgba(230, 112, 144, 0.5); }
.notification button.close-button:active { .notification button.close-button:active {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: #51a4e7; background-color: #51a4e7;
color: #141414;
background-image: linear-gradient(#e67090, #e67090); } background-image: linear-gradient(#e67090, #e67090); }
.notification button.close-button:active:hover { .notification button.close-button:active:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); } box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); }
.notification button.close-button:checked { .notification button.close-button:checked {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: #51a4e7; background-color: #51a4e7; }
color: #141414; }
.notification button.close-button:checked:hover { .notification button.close-button:checked:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); } box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); }
.notification button.close-button:disabled { .notification button.close-button:disabled {
box-shadow: none; box-shadow: none;
background-color: transparent; background-color: transparent; }
color: rgba(238, 238, 238, 0.3); }
.notification button.close-button.on { .notification button.close-button.on {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: #51a4e7; background-color: #51a4e7; }
color: #141414; }
.notification button.close-button.on:hover { .notification button.close-button.on:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); } box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); }
.notification button.close-button.active { .notification button.close-button.active {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03); box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb); background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: #51a4e7; background-color: #51a4e7; }
color: #141414; }
.notification button.close-button.active:hover { .notification button.close-button.active:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); } box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); }