kenji/illogical-impulse
1
0
Fork 0
forked from Shinonome/dots-hyprland
Code Pull Requests Activity
Files
8db26e970702f6849dce223a04eb09ac5d0a006d
illogical-impulse/early/.config/eww/css/_osettings.scss
T
end-4 8db26e9707 stuff
2024-02-22 15:35:06 +07:00

612 lines
20 KiB
SCSS
Executable File
Raw Blame History

$bgdetail: $onSecondary;
$bgdetail2: $onTertiary;
.osettings-window {
min-width: 501px;
padding-top: 20px;
background-color: shade($colorbarbg, 4%);
color: $onBackground;
font-family: Rubik;
margin: 7px;
margin-left: 0px;
border-top-right-radius: 53px;
// background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
// url('images/pictures/banner_left');
background-color: shade($onSecondary, 50%);
background-image:
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 24%, $bgdetail 24%, $bgdetail 24%, $bgdetail 27%, $bgdetail 27%, rgba(0, 0, 0, 0) 27%, rgba(0, 0, 0, 0) 27%),
radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 24%, $bgdetail 26%, $bgdetail 26%, $bgdetail 27%, $bgdetail 27%, rgba(0, 0, 0, 0) 27%, rgba(0, 0, 0, 0) 27%),
radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 24%, $bgdetail 25%, $bgdetail 25%, $bgdetail 27%, $bgdetail 27%, rgba(0, 0, 0, 0) 27%, rgba(0, 0, 0, 0) 27%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 38%, $bgdetail 38%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 38%, $bgdetail 38%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 38%, $bgdetail 38%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 38%, $bgdetail 38%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
;
background-size:
15px 30px, 15px 30px, 15px 30px, 15px 30px,
15px 30px, 15px 30px, 15px 30px, 15px 30px,
15px 30px, 15px 30px, 15px 30px,
15px 30px, 15px 30px, 15px 30px, 15px 30px,
15px 30px, 15px 30px, 15px 30px, 15px 30px,
15px 30px, 15px 30px, 15px 30px, 15px 30px,
60px 60px, 120px 120px, 90px 90px,
20px 40px, 20px 40px, 40px 80px, 40px 80px,
40px 80px, 40px 80px,
100% 100%,
;
background-position:
0px 100px, 15px 100px, 30px 100px, 45px 100px,
60px 100px, 75px 100px, 90px 100px, 105px 100px,
120px 100px, 135px 100px, 150px 100px,
550px 40px, 535px 40px, 520px 40px, 505px 40px,
490px 40px, 475px 40px, 460px 40px, 445px 40px,
430px 40px, 415px 40px, 400px 40px, 385px 40px,
300px 60px, 165px 135px, 180px 5px,
360px 190px, 380px 190px, 340px 170px, 380px 170px,
40px -10px, 80px -10px,
top,
;
background-repeat: no-repeat;
box-shadow: 2px -4px 4px rgba(0, 0, 0, 0.5);
}
.onotify-window {
min-width: 529px;
background-color: shade($colorbarbg, 5%);
color: $onBackground;
font-family: Rubik;
margin: 7px;
margin-right: 0px;
border-top-left-radius: 53px;
// background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
// url('images/pictures/banner_right');
background-color: shade($onSecondary, 50%);
background-image:
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, $bgdetail 35%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 24%, $bgdetail 24%, $bgdetail 24%, $bgdetail 27%, $bgdetail 27%, rgba(0, 0, 0, 0) 27%, rgba(0, 0, 0, 0) 27%),
radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 24%, $bgdetail 26%, $bgdetail 26%, $bgdetail 27%, $bgdetail 27%, rgba(0, 0, 0, 0) 27%, rgba(0, 0, 0, 0) 27%),
radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 24%, $bgdetail 25%, $bgdetail 25%, $bgdetail 27%, $bgdetail 27%, rgba(0, 0, 0, 0) 27%, rgba(0, 0, 0, 0) 27%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, $bgdetail 59%, $bgdetail 61%, rgba(0, 0, 0, 0) 61%),
linear-gradient(-135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 38%, $bgdetail 38%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 38%, $bgdetail 38%, $bgdetail 44%, rgba(0, 0, 0, 0) 44%),
linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
;
background-size:
15px 30px, 15px 30px, 15px 30px, 15px 30px,
15px 30px, 15px 30px, 15px 30px, 15px 30px,
15px 30px, 15px 30px, 15px 30px,
15px 30px, 15px 30px, 15px 30px, 15px 30px,
15px 30px, 15px 30px, 15px 30px, 15px 30px,
15px 30px, 15px 30px, 15px 30px, 15px 30px,
60px 60px, 120px 120px, 90px 90px,
160px 80px,
40px 80px, 40px 80px,
100% 100%,
;
background-position:
100px 16px, 115px 16px, 130px 16px, 145px 16px,
160px 16px, 175px 16px, 190px 16px, 205px 16px,
220px 16px, 235px 16px, 250px 16px,
550px 90px, 535px 90px, 520px 90px, 505px 90px,
490px 90px, 475px 90px, 460px 90px, 445px 90px,
430px 90px, 415px 90px, 400px 90px, 385px 90px,
300px 60px, 165px 135px, 220px 95px,
-25px 90px,
400px -10px, 440px -10px,
top,
;
background-repeat: no-repeat;
box-shadow: -2px -4px 4px rgba(0, 0, 0, 0.5);
}
.osettings-separator {
background-color: shade($colorbarbg, 5%);
min-height: 6px;
margin-top: 27px;
}
.osettings-content {
// padding-top: 13px;
margin-top: 27px;
padding-bottom: 8px;
padding-top: 8px;
font-family: Rubik;
color: $onBackground;
background-color: shade($colorbarbg, 5%);
border-top-right-radius: 53px;
}
.onotify-content {
// padding-top: 13px;
margin-top: 27px;
padding-top: 8px;
padding-bottom: 16px;
font-family: Rubik;
color: $onPrimaryContainer;
background-color: shade($colorbarbg, 5%);
border-top-left-radius: 53px;
}
.osettings-heading {
padding-left: 28px;
padding-right: 28px;
color: $primary;
font-family: Rubik;
}
.osettings-title {
color: $onPrimaryContainer;
font-family: Rubik;
font-size: 30pt;
text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);
}
.osettings-subtitle {
color: $onSecondaryContainer;
font-family: Rubik;
font-size: 14pt;
text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);
}
.osettings-section-icon {
margin-top: 33px;
margin-bottom: 9px;
color: $onSecondaryContainer;
font-family: 'Material Symbols Rounded';
font-size: 20pt;
min-width: 50px;
min-height: 50px;
background-color: $secondaryContainer;
border-radius: 16px;
}
.osettings-section {
margin-top: 33px;
margin-bottom: 9px;
color: $onSecondaryContainer;
font-family: Rubik;
font-size: 20pt;
}
.osettings-text {
margin-top: 10px;
margin-bottom: 10px;
color: $onBackground;
font-family: Rubik;
font-size: 14pt;
}
.osettings-text-icon {
margin-top: 10px;
margin-bottom: 10px;
color: $onBackground;
font-family: 'Material Symbols Rounded';
font-size: 14pt;
min-width: 50px;
}
.osettings-search {
margin-left: 28px;
margin-right: 28px;
margin-top: 35px;
background-color: tint($colorbarbg, 4%);
border: 2px solid $tertiary;
color: $tertiary;
border-radius: 10px;
font-size: 11pt;
min-height: 45px;
caret-color: $tertiary;
selection {
background-color: rgba(154, 152, 152, 0.5);
}
box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);
}
.osettings-search-text {
color: $tertiary;
padding: 10px;
font-size: 13pt;
min-width: 420px;
}
.osettings-search-icon {
color: $tertiary;
padding: 6px;
padding-left: 0px;
font-size: 20pt;
}
.osettings-scroll-bg {
padding-left: 28px;
padding-right: 28px;
}
.osettings-scroll-bg-colored {
padding-left: 28px;
padding-right: 28px;
background-color: shade($colorbarbg, 5%);
}
.osettings-btn {
margin-top: 10px;
margin-bottom: 10px;
border-radius: 9999px;
min-height: 50px;
font-weight: normal;
font-size: 13pt;
}
.osettings-btn {
font-weight: bold;
}
.osettings-btn-destructive {
color: $onTertiary;
background-color: $tertiary;
background-image: linear-gradient(45deg, shade($color4, 5%) 58%, tint($color4, 10%) 58%);
background-size: 300% 300%;
background-position: 50% 50%;
}
.osettings-btn-neutral {
color: $onPrimary;
background-color: $primary;
background-image: linear-gradient(45deg, shade($color1, 5%) 58%, tint($color1, 10%) 58%);
background-size: 300% 300%;
background-position: 50% 50%;
}
.osettings-btn-informative {
color: $onSecondary;
background-color: $secondary;
background-image: linear-gradient(45deg, shade($color5, 5%) 58%, tint($color5, 10%) 58%);
background-size: 300% 300%;
background-position: 50% 50%;
}
.osettings-btn-neutral:hover,
.osettings-btn-neutral:focus {
background-color: tint($primary, 10%);
// background-image: linear-gradient(135deg, $color3 75%, $color3 75%);
background-position: 70% 0%;
}
.osettings-btn-destructive:hover,
.osettings-btn-destructive:focus {
background-color: tint($tertiary, 10%);
// background-image: linear-gradient(135deg, tint($color4, 10%) 75%, tint($color4, 10%) 75%);
background-position: 70% 0%;
}
.osettings-btn-informative:hover,
.osettings-btn-informative:focus {
background-color: tint($secondary, 10%);
// background-image: linear-gradient(135deg, tint($color5, 10%) 75%, tint($color5, 10%) 75%);
background-position: 70% 0%;
}
.osettings-btn-neutral:active {
background-color: tint($primary, 10%);
// background-image: linear-gradient(135deg, $color3 75%, $color3 75%);
background-position: 100% 50%;
}
.osettings-btn-destructive:active {
background-color: tint($tertiary, 10%);
// background-image: linear-gradient(135deg, tint($color4, 10%) 75%, tint($color4, 10%) 75%);
background-position: 100% 50%;
}
.osettings-btn-informative:active {
background-color: tint($secondary, 10%);
// background-image: linear-gradient(135deg, tint($color5, 10%) 75%, tint($color5, 10%) 75%);
background-position: 100% 50%;
}
.rounder {
border-radius: 9999px;
}
.osettings-slider {
margin-top: 10px;
margin-bottom: 10px;
min-height: 6px;
border-radius: 9999px;
background-image: linear-gradient(45deg, $primary 50%, tint($colorbarbg, 15%) 50%);
padding: 0px;
trough {
border-radius: 9999px;
background-color: tint($colorbarbg, 15%);
min-height: 6px;
margin-left: 32px;
margin-right: 32px;
// min-width: 70px;
}
highlight {
border-radius: 9999px;
background-color: $primary;
background-image: linear-gradient(45deg, $primary 0%, $primary 100%);
}
slider {
border-radius: 9999px;
min-height: 20px;
min-width: 65px;
background-color: $primary;
margin: -8px;
}
slider:hover {
background-color: $primary;
}
}
.osettings-checkbox {
border-radius: 9999px;
// min-height: 20px;
// min-height: 6px;
min-width: 60px;
background-color: transparent;
color: transparent;
border: 3px solid $primary;
margin-top: 10px;
margin-bottom: 10px;
}
.osettings-checkbox-1 {
border-radius: 9999px;
// min-height: 20px;
// min-height: 6px;
min-width: 60px;
background-color: $primary;
color: transparent;
border: 3px solid $primary;
margin-top: 10px;
margin-bottom: 10px;
}
.osettings-checkbox-0 {
border-radius: 9999px;
// min-height: 20px;
// min-height: 6px;
min-width: 60px;
background-color: transparent;
color: transparent;
border: 3px solid $primary;
margin-top: 10px;
margin-bottom: 10px;
}
.osettings-checkbox:checked {
border-radius: 9999px;
background-color: $primary;
color: $primary;
}
.osettings-waifu {
margin-top: 30px;
min-width: 350px;
min-height: 350px;
border-radius: 20px;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
.onotify-app-icon {
margin: 9px 5px;
color: $onSecondaryContainer;
font-family: 'Material Symbols Rounded';
font-size: 20pt;
min-width: 40px;
min-height: 40px;
background-color: $secondaryContainer;
border-radius: 14px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
}
.onotify-app-name {
margin-top: 5px;
margin-bottom: 5px;
color: $onSecondaryContainer;
font-family: Rubik;
font-size: 15pt;
}
.onotify-app-text {
color: $onSecondaryContainer;
font-family: Rubik;
font-size: 13pt;
}
.onotify-app-ser {
color: $onSecondaryContainer;
font-family: Rubik;
font-size: 13pt;
}
.onotify-app-vol-circle {
background-color: #5c5b5b;
color: $primary;
}
.onotify-app-volbox {
margin: 9px 5px;
padding: 5px;
color: $onSecondaryContainer;
font-family: 'Material Symbols Rounded';
font-size: 20pt;
min-width: 40px;
min-height: 40px;
background-color: $secondaryContainer;
border-radius: 14px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
}
.osettings-tag {
color: $onTertiary;
background-color: $tertiary;
font-size: 13pt;
font-family: 'Rubik';
font-weight: 500;
padding: 3px 8px;
border-radius: 9999px;
min-width: 50px;
margin-top: 25px;
}
.osettings-tag:hover {
background-color: tint($tertiary, 20%);
}
.osettings-tag:active {
background-color: tint($tertiary, 40%);
}
.osettings-tag-nerd {
color: $onTertiary;
background-color: $tertiary;
font-size: 13pt;
font-family: 'JetBrainsMono Nerd Font';
font-weight: 500;
padding: 3px 8px;
border-radius: 9999px;
min-width: 50px;
margin-top: 25px;
}
.osettings-tag-nerd:hover {
background-color: tint($tertiary, 20%);
}
.osettings-tag-nerd:active {
background-color: tint($tertiary, 40%);
}
.osettings-tag-material {
color: $onTertiary;
background-color: $tertiary;
font-size: 13pt;
font-family: 'Material Symbols Rounded';
font-weight: 500;
padding: 3px 8px;
border-radius: 9999px;
// min-width: 25px;
margin-top: 25px;
}
.osettings-tag-material:hover {
background-color: tint($tertiary, 20%);
}
.osettings-tag-material:active {
background-color: tint($tertiary, 40%);
}
.notif-indicator {
font-family: 'Rubik';
font-size: 10pt;
}
.notif-badge {
border-radius: 99px;
min-width: 20px;
min-height: 20px;
background-color: $color1;
color: #000000;
margin-bottom: 8px;
margin-right: 5px;
}
View Git Blame Copy Permalink