Theaninova/TheaninovOS
1
0
Fork 0
mirror of https://github.com/Theaninova/TheaninovOS.git synced 2026-02-18 06:22:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

update ags

Browse Source
This commit is contained in:
Thea Schöbl
2023-11-15 16:09:26 +01:00
parent a6292fe031
commit 73e2b949a0
4025 changed files with 3168562 additions and 5715 deletions
Download Patch File Download Diff File Expand all files Collapse all files

476
desktops/hyprland/ags/scss/_bar.scss
View File

@@ -11,458 +11,456 @@ $notchOnPrimary: $onPrimary;
// Check dark mode. Set colors accordingly for the fake snotch that's always black
@if $darkmode ==true {
$notchSecondaryContainer: $secondaryContainer;
$notchOnSecondaryContainer: $onSecondaryContainer;
$notchPrimary: $primary;
$notchOnPrimary: $onPrimary;
}
@else {
$notchSecondaryContainer: $onSecondaryContainer;
$notchOnSecondaryContainer: $secondaryContainer;
$notchPrimary: $primaryContainer;
$notchOnPrimary: $onPrimaryContainer;
$notchSecondaryContainer: $secondaryContainer;
$notchOnSecondaryContainer: $onSecondaryContainer;
$notchPrimary: $primary;
$notchOnPrimary: $onPrimary;
} @else {
$notchSecondaryContainer: $onSecondaryContainer;
$notchOnSecondaryContainer: $secondaryContainer;
$notchPrimary: $primaryContainer;
$notchOnPrimary: $onPrimaryContainer;
}
.bar-bg {
background-color: $t_background;
min-height: 2.727rem;
background-color: $t_background;
min-height: 2.727rem;
}
.bar-sidespace {
min-width: 1.5rem;
min-width: 1.5rem;
}
.bar-group-margin {
padding: 0.2rem;
padding: 0.2rem;
}
.bar-group {
// @include elevation-border;
background-color: $t_surface;
// @include elevation-border;
background-color: $t_surface;
}
.bar-group-center {
border-bottom-left-radius: 1.364rem;
border-bottom-right-radius: 1.364rem;
// background-color: $t_surface;
background-color: $black; // Hard code: fake notch
border-bottom-left-radius: 1.364rem;
border-bottom-right-radius: 1.364rem;
// background-color: $t_surface;
background-color: $black; // Hard code: fake notch
}
.corner-bar-group {
border-radius: 1.364rem; // Half of bar height
border-width: 0.068rem;
// background-color: $t_surface;
background-color: $black; // Hard code: fake notch
border-radius: 1.364rem; // Half of bar height
border-width: 0.068rem;
// background-color: $t_surface;
background-color: $black; // Hard code: fake notch
}
.bar-group-pad {
padding: 0rem 1.023rem;
padding: 0rem 1.023rem;
}
.bar-group-pad-less {
padding: 0rem 0.681rem;
padding: 0rem 0.681rem;
}
.bar-group-pad-system {
padding-left: 1.023rem;
padding-right: 0.547rem;
padding-left: 1.023rem;
padding-right: 0.547rem;
}
.bar-group-pad-music {
padding-right: 1.023rem;
// padding-left: 0.273rem;
padding-right: 1.023rem;
// padding-left: 0.273rem;
}
.bar-group-pad-left {
padding-left: 1.364rem;
padding-right: 0.681rem;
padding-left: 1.364rem;
padding-right: 0.681rem;
}
.bar-group-pad-right {
padding-left: 0.681rem;
padding-right: 1.364rem;
padding-left: 0.681rem;
padding-right: 1.364rem;
}
.bar-group-pad-leftonly {
padding-left: 0.681rem;
padding-left: 0.681rem;
}
.bar-group-pad-rightonly {
padding-right: 0.681rem;
padding-right: 0.681rem;
}
.bar-group-standalone {
border-radius: 1.364rem;
-gtk-outline-radius: 1.364rem;
border-radius: 1.364rem;
-gtk-outline-radius: 1.364rem;
}
.bar-group-round {
border-radius: 10rem;
-gtk-outline-radius: 10rem;
border-radius: 10rem;
-gtk-outline-radius: 10rem;
}
.bar-group-middle {
border-radius: 0.477rem;
-gtk-outline-radius: 0.477rem;
border-radius: 0.477rem;
-gtk-outline-radius: 0.477rem;
}
.bar-group-left {
border-radius: 0.477rem;
-gtk-outline-radius: 0.477rem;
border-top-left-radius: 1.364rem;
border-bottom-left-radius: 1.364rem;
border-radius: 0.477rem;
-gtk-outline-radius: 0.477rem;
border-top-left-radius: 1.364rem;
border-bottom-left-radius: 1.364rem;
}
.bar-group-right {
border-radius: 0.477rem;
-gtk-outline-radius: 0.477rem;
border-top-right-radius: 1.364rem;
border-bottom-right-radius: 1.364rem;
border-radius: 0.477rem;
-gtk-outline-radius: 0.477rem;
border-top-right-radius: 1.364rem;
border-bottom-right-radius: 1.364rem;
}
.bar-separator {
@include full-rounding;
min-width: 0.341rem;
min-height: 0.341rem;
background-color: mix($t_surface, $t_onSurface, 90%);
margin: 0rem 0.341rem;
@include full-rounding;
min-width: 0.341rem;
min-height: 0.341rem;
background-color: mix($t_surface, $t_onSurface, 90%);
margin: 0rem 0.341rem;
}
.bar-clock {
@include titlefont;
font-size: 1.2727rem;
color: $onBackground;
@include titlefont;
font-size: 1.2727rem;
color: $onBackground;
}
.bar-date {
@include titlefont;
font-size: 1rem;
color: $onBackground;
@include titlefont;
font-size: 1rem;
color: $onBackground;
}
.bar-ws {
min-height: 1.636rem;
min-width: 1.772rem;
font-size: 1.091rem;
@include mainfont;
border-top: 0.068rem solid;
border-bottom: 0.068rem solid;
border-color: transparent;
color: $white;
min-height: 1.636rem;
min-width: 1.772rem;
font-size: 1.091rem;
@include mainfont;
border-top: 0.068rem solid;
border-bottom: 0.068rem solid;
border-color: transparent;
color: $white;
}
.bar-ws-active-box {
min-height: 1.636rem;
min-width: 1.772rem;
transition: 300ms cubic-bezier(0.05, 0.7, 0.1, 1);
min-height: 1.636rem;
min-width: 1.772rem;
transition: 300ms cubic-bezier(0.05, 0.7, 0.1, 1);
}
.bar-ws-active {
min-height: 1.636rem;
min-width: 1.772rem;
font-size: 1.091rem;
border: 0.4rem solid $black;
@include mainfont;
min-height: 1.636rem;
min-width: 1.772rem;
font-size: 1.091rem;
border: 0.4rem solid $black;
@include mainfont;
background-clip: content-box;
background-color: $notchSecondaryContainer;
color: $notchOnSecondaryContainer;
border-radius: 999px;
background-clip: content-box;
background-color: $notchSecondaryContainer;
color: $notchOnSecondaryContainer;
border-radius: 999px;
}
.bar-ws-active-middledecor {
min-width: 0.682rem;
min-height: 0.682rem;
border-radius: 9999px;
background-color: $black;
margin: 0rem 0.409rem;
min-width: 0.682rem;
min-height: 0.682rem;
border-radius: 9999px;
background-color: $black;
margin: 0rem 0.409rem;
}
.bar-ws-occupied {
background-color: $notchSecondaryContainer;
color: $notchOnSecondaryContainer;
min-width: 1.772rem;
border-top: 0.068rem solid $notchOnSecondaryContainer;
border-bottom: 0.068rem solid $notchOnSecondaryContainer;
background-color: $notchSecondaryContainer;
color: $notchOnSecondaryContainer;
min-width: 1.772rem;
border-top: 0.068rem solid $notchOnSecondaryContainer;
border-bottom: 0.068rem solid $notchOnSecondaryContainer;
}
.bar-ws-occupied-left {
background-color: $notchSecondaryContainer;
color: $notchOnSecondaryContainer;
min-width: 1.704rem;
border-top-left-radius: 999px;
border-bottom-left-radius: 999px;
background-color: $notchSecondaryContainer;
color: $notchOnSecondaryContainer;
min-width: 1.704rem;
border-top-left-radius: 999px;
border-bottom-left-radius: 999px;
border-left: 0.068rem solid $notchOnSecondaryContainer;
border-top: 0.068rem solid $notchOnSecondaryContainer;
border-bottom: 0.068rem solid $notchOnSecondaryContainer;
border-right: 0px solid transparent;
border-left: 0.068rem solid $notchOnSecondaryContainer;
border-top: 0.068rem solid $notchOnSecondaryContainer;
border-bottom: 0.068rem solid $notchOnSecondaryContainer;
border-right: 0px solid transparent;
}
.bar-ws-occupied-right {
background-color: $notchSecondaryContainer;
color: $notchOnSecondaryContainer;
min-width: 1.704rem;
border-top-right-radius: 999px;
border-bottom-right-radius: 999px;
background-color: $notchSecondaryContainer;
color: $notchOnSecondaryContainer;
min-width: 1.704rem;
border-top-right-radius: 999px;
border-bottom-right-radius: 999px;
border-right: 0.068rem solid $notchOnSecondaryContainer;
border-top: 0.068rem solid $notchOnSecondaryContainer;
border-bottom: 0.068rem solid $notchOnSecondaryContainer;
border-left: 0px solid transparent;
border-right: 0.068rem solid $notchOnSecondaryContainer;
border-top: 0.068rem solid $notchOnSecondaryContainer;
border-bottom: 0.068rem solid $notchOnSecondaryContainer;
border-left: 0px solid transparent;
}
.bar-ws-occupied-left-right {
@include full-rounding;
background-color: $notchSecondaryContainer;
color: $notchOnSecondaryContainer;
min-width: 1.636rem;
border: 0.068rem solid $notchOnSecondaryContainer;
@include full-rounding;
background-color: $notchSecondaryContainer;
color: $notchOnSecondaryContainer;
min-width: 1.636rem;
border: 0.068rem solid $notchOnSecondaryContainer;
}
.bar-ws-empty {
color: white;
border-color: transparent;
color: white;
border-color: transparent;
}
.bar-batt {
@include full-rounding;
padding: 0rem 0.341rem;
background-color: $t_secondaryContainer;
color: $t_onSecondaryContainer;
// border: 1px solid $onSecondaryContainer;
@include full-rounding;
padding: 0rem 0.341rem;
background-color: $t_secondaryContainer;
color: $t_onSecondaryContainer;
// border: 1px solid $onSecondaryContainer;
}
.bar-sidemodule {
min-width: 26rem;
min-width: 26rem;
}
.bar-batt-low {
background-color: $error;
color: $errorContainer;
background-color: $error;
color: $errorContainer;
}
.bar-batt-full {
background-color: $successContainer;
color: $onSuccessContainer;
background-color: $successContainer;
color: $onSuccessContainer;
}
.bar-batt-prog-low {
background-color: $error;
color: $errorContainer;
background-color: $error;
color: $errorContainer;
}
.bar-batt-prog-full {
background-color: $successContainer;
color: $onSuccessContainer;
background-color: $successContainer;
color: $onSuccessContainer;
}
.bar-music-playstate {
min-height: 1.770rem;
min-width: 1.770rem;
border-radius: 10rem;
margin-left: 0.273rem;
background-color: $secondaryContainer;
color: $onSecondaryContainer;
min-height: 1.77rem;
min-width: 1.77rem;
border-radius: 10rem;
margin-left: 0.273rem;
background-color: $secondaryContainer;
color: $onSecondaryContainer;
}
.bar-music-circprog {
@include fluent_decel_long;
margin-left: 0.273rem;
min-width: 0.068rem; // 1px
min-height: 1.770rem;
padding: 0rem;
background-color: $secondaryContainer;
color: $onSecondaryContainer;
@include fluent_decel_long;
margin-left: 0.273rem;
min-width: 0.068rem; // 1px
min-height: 1.77rem;
padding: 0rem;
background-color: $secondaryContainer;
color: $onSecondaryContainer;
}
.bar-music-playstate-playing {
min-height: 1.770rem;
min-width: 1.770rem;
border-radius: 10rem;
margin-left: 0.273rem;
background-color: $secondaryContainer;
color: $onSecondaryContainer;
// border: 1px solid $onSecondaryContainer;
min-height: 1.77rem;
min-width: 1.77rem;
border-radius: 10rem;
margin-left: 0.273rem;
background-color: $secondaryContainer;
color: $onSecondaryContainer;
// border: 1px solid $onSecondaryContainer;
}
.bar-music-playstate-txt {
transition: 100ms cubic-bezier(0.05, 0.7, 0.1, 1);
@include icon-material;
font-size: 1.568rem;
margin: -0.1rem 0rem;
margin-left: 0.2rem;
margin-right: 0.17rem;
transition: 100ms cubic-bezier(0.05, 0.7, 0.1, 1);
@include icon-material;
font-size: 1.568rem;
margin: -0.1rem 0rem;
margin-left: 0.2rem;
margin-right: 0.17rem;
}
.bar-music-cover {
background-position: center;
background-repeat: no-repeat;
background-size: 100% auto;
min-width: 11.932rem;
background-position: center;
background-repeat: no-repeat;
background-size: 100% auto;
min-width: 11.932rem;
}
.bar-music-extended-bg {
border-radius: 1.364rem;
min-width: 34.091rem;
border-radius: 1.364rem;
min-width: 34.091rem;
}
.bar-music-extended-ctl-bg {
border-radius: 1.364rem;
background-color: rgba(30, 30, 30, 0.6);
border-radius: 1.364rem;
background-color: rgba(30, 30, 30, 0.6);
}
.bar-music-bottom-bg {
border-radius: 1.364rem;
min-width: 34.091rem;
border-radius: 1.364rem;
min-width: 34.091rem;
}
.bar-music-bottom-ctl-bg {
border-radius: 1.364rem;
background-color: rgba(30, 30, 30, 0.6);
border-radius: 1.364rem;
background-color: rgba(30, 30, 30, 0.6);
}
.bar-music-extended-textbox {
margin: 1.023rem;
margin: 1.023rem;
}
.bar-music-bottom-cover {
border-radius: 10rem;
border-radius: 10rem;
}
.bar-music-hide-false {
@include md3_decel;
transition-duration: 100ms;
opacity: 1;
@include md3_decel;
transition-duration: 100ms;
opacity: 1;
}
.bar-music-hide-true {
@include md3_accel;
transition-duration: 100ms;
opacity: 0;
@include md3_accel;
transition-duration: 100ms;
opacity: 0;
}
.bar-music-btn {
font-size: 1.364rem;
border-radius: 10rem;
min-height: 2.591rem;
min-width: 2.591rem;
font-size: 1.364rem;
border-radius: 10rem;
min-height: 2.591rem;
min-width: 2.591rem;
}
.bar-music-btn:hover {
background-color: $hovercolor;
background-color: $hovercolor;
}
.bar-prog-batt {
min-height: 0.955rem;
min-height: 0.955rem;
min-width: 0.068rem;
padding: 0rem;
border-radius: 10rem;
trough {
min-height: 0.954rem;
min-width: 0.068rem;
padding: 0rem;
border-radius: 10rem;
}
trough {
min-height: 0.954rem;
min-width: 0.068rem;
border-radius: 10rem;
}
progress {
min-height: 0.680rem;
min-width: 0.680rem;
margin: 0rem 0.137rem;
border-radius: 10rem;
background-color: $t_onSecondaryContainer;
}
progress {
min-height: 0.68rem;
min-width: 0.68rem;
margin: 0rem 0.137rem;
border-radius: 10rem;
background-color: $t_onSecondaryContainer;
}
}
.bar-prog-batt-low {
progress {
background-color: $errorContainer;
}
progress {
background-color: $errorContainer;
}
}
.bar-prog-batt-full {
progress {
background-color: $onSuccessContainer;
}
progress {
background-color: $onSuccessContainer;
}
}
.bar-batt-chargestate {
border-radius: 10rem;
background-color: transparent;
border-radius: 10rem;
background-color: transparent;
}
.bar-batt-chargestate-charging {
border-radius: 10rem;
min-width: 0.681rem;
min-height: 0.681rem;
background-color: $t_onSecondaryContainer;
border-radius: 10rem;
min-width: 0.681rem;
min-height: 0.681rem;
background-color: $t_onSecondaryContainer;
}
.bar-batt-chargestate-low {
background-color: $errorContainer;
background-color: $errorContainer;
}
.bar-batt-chargestate-full {
background-color: $onSuccessContainer;
background-color: $onSuccessContainer;
}
.bar-batt-percentage {
font-size: 1rem;
margin-top: -0.068rem;
font-weight: 500;
font-size: 1rem;
margin-top: -0.068rem;
font-weight: 500;
}
.corner {
background-color: $t_background;
@include large-rounding;
background-color: $t_background;
@include large-rounding;
}
.corner-black {
background-color: $black; // Hard code because fake screen corner
@include large-rounding;
background-color: $black; // Hard code because fake screen corner
@include large-rounding;
}
.bar-topdesc {
margin-top: -0.136rem;
margin-bottom: -0.341rem;
color: $subtext;
margin-top: -0.136rem;
margin-bottom: -0.341rem;
color: $subtext;
}
.bar-space-button {
padding: 0.341rem;
padding: 0.341rem;
}
.bar-space-button>box:first-child {
@include full-rounding;
padding: 0rem 0.682rem;
.bar-space-button > box:first-child {
@include full-rounding;
padding: 0rem 0.682rem;
}
.bar-space-button:hover>box:first-child {
background-color: $hovercolor;
.bar-space-button:hover > box:first-child {
background-color: $hovercolor;
}
.bar-space-button:active>box:first-child {
background-color: $activecolor;
.bar-space-button:active > box:first-child {
background-color: $activecolor;
}
.bar-space-button-leftmost {
box {
margin: 0rem 0.682rem;
}
box {
margin: 0rem 0.682rem;
}
}
.bar-space-area-rightmost>box {
padding-right: 2.386rem;
.bar-space-area-rightmost > box {
padding-right: 2.386rem;
}
.bar-systray {
@include full-rounding;
min-height: 1.909rem;
min-width: 1.909rem;
@include full-rounding;
min-height: 1.909rem;
min-width: 1.909rem;
}
.bar-systray-item {
@include full-rounding;
min-width: 1.909rem;
@include full-rounding;
min-width: 1.909rem;
}

60
desktops/hyprland/ags/scss/_cheatsheet.scss
View File

@@ -1,51 +1,51 @@
.cheatsheet-bg {
@include large-rounding;
@include elevation-border;
@include elevation2;
margin-bottom: 0.682rem;
background-color: $t_background;
padding: 1.364rem;
@include large-rounding;
@include elevation-border;
@include elevation2;
margin-bottom: 0.682rem;
background-color: $t_background;
padding: 1.364rem;
}
.cheatsheet-key {
@include techfont;
min-height: 1.364rem;
min-width: 1.364rem;
margin: 0.17rem;
padding: 0.136rem 0.205rem;
border-radius: 0.409rem;
-gtk-outline-radius: 0.409rem;
color: $primary;
border: 0.068rem solid $primary;
box-shadow: 0rem 0.136rem 0rem $primary;
font-weight: 500;
@include techfont;
min-height: 1.364rem;
min-width: 1.364rem;
margin: 0.17rem;
padding: 0.136rem 0.205rem;
border-radius: 0.409rem;
-gtk-outline-radius: 0.409rem;
color: $primary;
border: 0.068rem solid $primary;
box-shadow: 0rem 0.136rem 0rem $primary;
font-weight: 500;
}
.cheatsheet-key-notkey {
min-height: 1.364rem;
padding: 0.136rem 0.205rem;
margin: 0.17rem;
color: $onPrimaryContainer;
min-height: 1.364rem;
padding: 0.136rem 0.205rem;
margin: 0.17rem;
color: $onPrimaryContainer;
}
// .cheatsheet-action {}
.cheatsheet-closebtn {
@include md3_decel;
@include full-rounding;
min-width: 2.386rem;
min-height: 2.386rem;
@include md3_decel;
@include full-rounding;
min-width: 2.386rem;
min-height: 2.386rem;
}
.cheatsheet-closebtn:hover {
background-color: $surfaceVariant;
background-color: $surfaceVariant;
}
.cheatsheet-closebtn:active {
background-color: mix($surfaceVariant, $onSurfaceVariant, 70%);
background-color: mix($surfaceVariant, $onSurfaceVariant, 70%);
}
.cheatsheet-category-title {
@include titlefont;
font-size: 1.705rem;
}
@include titlefont;
font-size: 1.705rem;
}

26
desktops/hyprland/ags/scss/_colors.scss
View File

@@ -7,13 +7,13 @@ $transparentize_surface_amount_more: 0.1;
$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;
@if $darkmode ==true {
// Less transparency
$transparentize_amount: 0.6;
$transparentize_surface_amount_less: 0.2;
$transparentize_surface_amount_less_less: 0.1;
$transparentize_surface_amount: 0.7;
$transparentize_surface_amount_more: 0.1;
$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;
// Less transparency
$transparentize_amount: 0.6;
$transparentize_surface_amount_less: 0.2;
$transparentize_surface_amount_less_less: 0.1;
$transparentize_surface_amount: 0.7;
$transparentize_surface_amount_more: 0.1;
$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;
}
// Extended material
@@ -23,11 +23,11 @@ $successContainer: #d1e8d5;
$onSuccessContainer: #0c1f13;
@if $darkmode ==true {
// Dark variant
$success: #b5ccba;
$onSuccess: #213528;
$successContainer: #374b3e;
$onSuccessContainer: #d1e9d6;
// Dark variant
$success: #b5ccba;
$onSuccess: #213528;
$successContainer: #374b3e;
$onSuccessContainer: #d1e9d6;
}
// Transparent material
@@ -76,4 +76,4 @@ $t_onSuccessContainer: transparentize($onErrorContainer, $transparentize_amount)
$hovercolor: mix($t_surface, $t_onSurface, 50%);
$activecolor: mix($t_surface, $t_onSurface, 30%);
$subtext: mix($onBackground, $background, 70%);
$actiontext: mix($onBackground, $background, 85%);
$actiontext: mix($onBackground, $background, 85%);

54
desktops/hyprland/ags/scss/_common.scss
View File

@@ -1,43 +1,43 @@
*:focus {
// box-shadow: inset 0rem 0rem 2px $t_onSurface;
// box-shadow: inset 0rem 0rem 2px $t_onSurface;
}
.menu {
padding: 0.681rem;
background: $surfaceVariant;
color: $onSurfaceVariant;
border-radius: 1.159rem;
-gtk-outline-radius: 1.159rem;
padding: 0.681rem;
background: $surfaceVariant;
color: $onSurfaceVariant;
border-radius: 1.159rem;
-gtk-outline-radius: 1.159rem;
}
.menubar>menuitem {
border-radius: 0.545rem;
-gtk-outline-radius: 0.545rem;
min-width: 13.636rem;
min-height: 2.727rem;
.menubar > menuitem {
border-radius: 0.545rem;
-gtk-outline-radius: 0.545rem;
min-width: 13.636rem;
min-height: 2.727rem;
}
.menu>menuitem {
padding: 0.4em 1.5rem;
background: transparent;
transition: 0.2s ease background;
border-radius: 0.545rem;
-gtk-outline-radius: 0.545rem;
.menu > menuitem {
padding: 0.4em 1.5rem;
background: transparent;
transition: 0.2s ease background;
border-radius: 0.545rem;
-gtk-outline-radius: 0.545rem;
}
.menu>menuitem:hover {
background-color: mix($surfaceVariant, $onSurfaceVariant, 90%);
.menu > menuitem:hover {
background-color: mix($surfaceVariant, $onSurfaceVariant, 90%);
}
.separator-line {
background-color: $surfaceVariant;
min-width: 0.068rem;
min-height: 0.068rem;
background-color: $surfaceVariant;
min-width: 0.068rem;
min-height: 0.068rem;
}
tooltip {
@include large-rounding;
background-color: $surfaceVariant;
color: $onSurfaceVariant;
border: 1px solid $onSurfaceVariant;
}
@include large-rounding;
background-color: $surfaceVariant;
color: $onSurfaceVariant;
border: 1px solid $onSurfaceVariant;
}

610
desktops/hyprland/ags/scss/_lib.scss
View File

@@ -8,689 +8,691 @@ $rounding_mediumlarge: 1.364rem;
$rounding_large: 1.705rem;
.test {
background-image: linear-gradient(45deg,
#F4D609 0%, #F4D609 10%, #212121 10%, #212121 20%,
#F4D609 20%, #F4D609 30%, #212121 30%, #212121 40%,
#F4D609 40%, #F4D609 50%, #212121 50%, #212121 60%,
#F4D609 60%, #F4D609 70%, #212121 70%, #212121 80%,
#F4D609 80%, #F4D609 90%, #212121 90%, #212121 100%);
background-repeat: repeat;
background-image: linear-gradient(
45deg,
#f4d609 0%,
#f4d609 10%,
#212121 10%,
#212121 20%,
#f4d609 20%,
#f4d609 30%,
#212121 30%,
#212121 40%,
#f4d609 40%,
#f4d609 50%,
#212121 50%,
#212121 60%,
#f4d609 60%,
#f4d609 70%,
#212121 70%,
#212121 80%,
#f4d609 80%,
#f4d609 90%,
#212121 90%,
#212121 100%
);
background-repeat: repeat;
}
.test-size {
min-height: 3rem;
min-width: 3rem;
min-height: 3rem;
min-width: 3rem;
}
// Common rules
@mixin small-rounding {
border-radius: $rounding_small; // 10px
-gtk-outline-radius: $rounding_small; // 10px
border-radius: $rounding_small; // 10px
-gtk-outline-radius: $rounding_small; // 10px
}
@mixin normal-rounding {
border-radius: $rounding_medium; // small-rounding + 5px
-gtk-outline-radius: $rounding_medium; // small-rounding + 5px
border-radius: $rounding_medium; // small-rounding + 5px
-gtk-outline-radius: $rounding_medium; // small-rounding + 5px
}
@mixin large-rounding {
border-radius: $rounding_large; // normal-rounding + 10px
-gtk-outline-radius: $rounding_large; // normal-rounding + 10px
border-radius: $rounding_large; // normal-rounding + 10px
-gtk-outline-radius: $rounding_large; // normal-rounding + 10px
}
@mixin full-rounding {
border-radius: 9999px;
-gtk-outline-radius: 9999px;
border-radius: 9999px;
-gtk-outline-radius: 9999px;
}
@mixin titlefont {
// Geometric sans-serif
font-family:
'Noto Sans',
'Gabarito',
'Lexend',
sans-serif;
// Geometric sans-serif
font-family: "Noto Sans", "Gabarito", "Lexend", sans-serif;
}
.txt-title {
@include titlefont;
font-size: 2.045rem;
@include titlefont;
font-size: 2.045rem;
}
.txt-title-small {
@include titlefont;
font-size: 1.364rem;
@include titlefont;
font-size: 1.364rem;
}
@mixin mainfont {
// Other clean sans-serif
font-family:
'AR One Sans',
'Inter',
'Roboto',
'Noto Sans',
sans-serif;
// font-weight: 500;
// Other clean sans-serif
font-family: "AR One Sans", "Inter", "Roboto", "Noto Sans", sans-serif;
// font-weight: 500;
}
@mixin icon-material {
// Material Design Icons
font-family:
'Material Symbols Rounded',
'Material Symbols Outlined',
'Material Symbols Sharp';
// Material Design Icons
font-family: "Material Symbols Rounded", "Material Symbols Outlined", "Material Symbols Sharp";
}
@mixin icon-nerd {
// Nerd Fonts
font-family:
'SpaceMono Nerd Font',
'JetBrainsMono Nerd Font',
monospace;
// Nerd Fonts
font-family: "SpaceMono Nerd Font", "JetBrainsMono Nerd Font", monospace;
}
@mixin techfont {
// Monospace for sys info n stuff. Doesn't have to be a nerd font, but it's cool.
font-family: 'JetBrains Mono Nerd Font', 'JetBrains Mono NL', 'SpaceMono Nerd Font', monospace;
// Monospace for sys info n stuff. Doesn't have to be a nerd font, but it's cool.
font-family: "JetBrains Mono Nerd Font", "JetBrains Mono NL", "SpaceMono Nerd Font", monospace;
}
.techfont {
@include techfont;
@include techfont;
}
@mixin subtext {
color: $subtext;
color: $subtext;
}
@mixin actiontext {
color: $actiontext;
color: $actiontext;
}
@mixin elevation-safe {
background: $surface;
color: $onSurface;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.69);
margin: 7px;
background: $surface;
color: $onSurface;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.69);
margin: 7px;
}
$elevation2_margin: 7px;
@mixin elevation2 {
box-shadow: 0px 2px 3px transparentize($shadow, 0.55);
margin: $elevation2_margin;
box-shadow: 0px 2px 3px transparentize($shadow, 0.55);
margin: $elevation2_margin;
}
@mixin elevation2-margin {
margin: $elevation2_margin;
margin: $elevation2_margin;
}
@mixin elevation2-padding {
padding: $elevation2_margin;
padding: $elevation2_margin;
}
@mixin elevation3 {
box-shadow: 0px 2px 5px $shadow;
margin: 7px;
box-shadow: 0px 2px 5px $shadow;
margin: 7px;
}
@mixin md3_decel {
transition: 200ms cubic-bezier(0.05, 0.7, 0.1, 1);
transition: 200ms cubic-bezier(0.05, 0.7, 0.1, 1);
}
@mixin md3_decel_fast {
transition: 170ms cubic-bezier(0.05, 0.7, 0.1, 1);
transition: 170ms cubic-bezier(0.05, 0.7, 0.1, 1);
}
@mixin md3_accel {
transition: 150ms cubic-bezier(0.3, 0, 0.8, 0.15);
transition: 150ms cubic-bezier(0.3, 0, 0.8, 0.15);
}
@mixin md3_accel_fast {
transition: 100ms cubic-bezier(0.3, 0, 0.8, 0.15);
transition: 100ms cubic-bezier(0.3, 0, 0.8, 0.15);
}
@mixin fluent_decel {
// Used for small transitions, as this looks clear
transition: 200ms cubic-bezier(0.1, 1, 0, 1);
// Used for small transitions, as this looks clear
transition: 200ms cubic-bezier(0.1, 1, 0, 1);
}
@mixin fluent_decel_long {
// Used for small transitions, as this looks clear
transition: 1000ms cubic-bezier(0.1, 1, 0, 1);
// Used for small transitions, as this looks clear
transition: 1000ms cubic-bezier(0.1, 1, 0, 1);
}
@mixin fluent_accel {
transition: 150ms cubic-bezier(0.42, 0, 1, 1);
transition: 150ms cubic-bezier(0.42, 0, 1, 1);
}
@mixin noanim {
transition: 0ms;
transition: 0ms;
}
@mixin anim-enter {
transition: 200ms cubic-bezier(0.05, 0.7, 0.1, 1);
transition: 200ms cubic-bezier(0.05, 0.7, 0.1, 1);
}
@mixin anim-exit {
transition: 150ms cubic-bezier(0.3, 0, 0.8, 0.15);
transition: 150ms cubic-bezier(0.3, 0, 0.8, 0.15);
}
@keyframes flyin-top {
from {
margin-top: -2.795rem;
}
from {
margin-top: -2.795rem;
}
to {
margin-top: 0rem;
}
to {
margin-top: 0rem;
}
}
@keyframes flyin-bottom {
from {
margin-top: 4.841rem;
margin-bottom: -4.841rem;
}
from {
margin-top: 4.841rem;
margin-bottom: -4.841rem;
}
to {
margin-bottom: 0rem;
margin-top: 0rem;
}
to {
margin-bottom: 0rem;
margin-top: 0rem;
}
}
@function tint($color, $percentage) {
@return mix(rgb(245, 250, 255), $color, $percentage);
@return mix(rgb(245, 250, 255), $color, $percentage);
}
@function shade($color, $percentage) {
@return mix(rgb(0, 0, 0), $color, $percentage);
@return mix(rgb(0, 0, 0), $color, $percentage);
}
.no-anim {
@include noanim;
@include noanim;
}
.txt {
color: $onBackground;
color: $onBackground;
}
.txt-shadow {
text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.69);
margin: 10px;
text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.69);
margin: 10px;
}
.txt-badonkers {
@include mainfont;
font-size: 3rem;
@include mainfont;
font-size: 3rem;
}
.txt-tiddies {
@include mainfont;
font-size: 2.7273rem;
@include mainfont;
font-size: 2.7273rem;
}
.txt-hugeass {
@include mainfont;
font-size: 1.8182rem;
@include mainfont;
font-size: 1.8182rem;
}
.txt-larger {
@include mainfont;
font-size: 1.6363rem;
@include mainfont;
font-size: 1.6363rem;
}
.txt-large {
//16pt
@include mainfont;
font-size: 1.4545rem;
//16pt
@include mainfont;
font-size: 1.4545rem;
}
.txt-norm {
//14pt
@include mainfont;
font-size: 1.2727rem;
//14pt
@include mainfont;
font-size: 1.2727rem;
}
.txt-small {
//12pt
@include mainfont;
font-size: 1.0909rem;
//12pt
@include mainfont;
font-size: 1.0909rem;
}
.txt-smallie {
//11pt
@include mainfont;
font-size: 1rem;
//11pt
@include mainfont;
font-size: 1rem;
}
.txt-smaller {
//10pt
@include mainfont;
font-size: 0.9091rem;
//10pt
@include mainfont;
font-size: 0.9091rem;
}
.txt-smaller-offset {
margin-top: -0.136rem;
margin-top: -0.136rem;
}
.txt-tiny {
@include mainfont;
font-size: 0.7273rem;
@include mainfont;
font-size: 0.7273rem;
}
.txt-subtext {
@include subtext;
@include subtext;
}
.txt-action {
@include actiontext;
@include actiontext;
}
.txt-semibold {
font-weight: 500;
font-weight: 500;
}
.txt-bold {
font-weight: bold;
font-weight: bold;
}
.titlefont {
@include titlefont;
@include titlefont;
}
.mainfont {
@include mainfont;
@include mainfont;
}
.icon-material {
@include icon-material;
@include icon-material;
}
.separator-circle {
@include full-rounding;
background-color: $onSurface;
margin: 0rem 0.682rem;
min-width: 0.545rem;
min-height: 0.545rem;
@include full-rounding;
background-color: $onSurface;
margin: 0rem 0.682rem;
min-width: 0.545rem;
min-height: 0.545rem;
}
$overlay1: mix($onSurface, rgba(0, 0, 0, 0), 25%);
$overlay2: mix($onSurface, rgba(0, 0, 0, 0), 40%);
.spacing-v-15>box {
margin-bottom: 1.023rem;
.spacing-v-15 > box {
margin-bottom: 1.023rem;
}
.spacing-v-15>box:last-child {
margin-bottom: 0rem;
.spacing-v-15 > box:last-child {
margin-bottom: 0rem;
}
.spacing-v-15>scrolledwindow {
margin-bottom: 1.023rem;
.spacing-v-15 > scrolledwindow {
margin-bottom: 1.023rem;
}
.spacing-v-15>scrolledwindow:last-child {
margin-bottom: 0rem;
.spacing-v-15 > scrolledwindow:last-child {
margin-bottom: 0rem;
}
.spacing-v-15>revealer {
margin-bottom: 1.023rem;
.spacing-v-15 > revealer {
margin-bottom: 1.023rem;
}
.spacing-v-15>revealer:last-child {
margin-bottom: 0rem;
.spacing-v-15 > revealer:last-child {
margin-bottom: 0rem;
}
.spacing-v-15>label {
margin-bottom: 1.023rem;
.spacing-v-15 > label {
margin-bottom: 1.023rem;
}
.spacing-v-15>label:last-child {
margin-bottom: 0rem;
.spacing-v-15 > label:last-child {
margin-bottom: 0rem;
}
.spacing-h-15>box {
margin-right: 1.023rem;
.spacing-h-15 > box {
margin-right: 1.023rem;
}
.spacing-h-15>box:last-child {
margin-right: 0rem;
.spacing-h-15 > box:last-child {
margin-right: 0rem;
}
.spacing-h-15>stack {
margin-right: 1.023rem;
.spacing-h-15 > stack {
margin-right: 1.023rem;
}
.spacing-h-15>stack:last-child {
margin-right: 0rem;
.spacing-h-15 > stack:last-child {
margin-right: 0rem;
}
.spacing-h-15>label {
margin-right: 1.023rem;
.spacing-h-15 > label {
margin-right: 1.023rem;
}
.spacing-h-15>label:last-child {
margin-right: 0rem;
.spacing-h-15 > label:last-child {
margin-right: 0rem;
}
.spacing-h-15>button {
margin-right: 1.023rem;
.spacing-h-15 > button {
margin-right: 1.023rem;
}
.spacing-h-15>button:last-child {
margin-right: 0rem;
.spacing-h-15 > button:last-child {
margin-right: 0rem;
}
.spacing-v-5>box {
margin-bottom: 0.341rem;
.spacing-v-5 > box {
margin-bottom: 0.341rem;
}
.spacing-v-5>box:last-child {
margin-bottom: 0rem;
.spacing-v-5 > box:last-child {
margin-bottom: 0rem;
}
.spacing-v-5>label {
margin-bottom: 0.341rem;
.spacing-v-5 > label {
margin-bottom: 0.341rem;
}
.spacing-v-5>label:last-child {
margin-bottom: 0rem;
.spacing-v-5 > label:last-child {
margin-bottom: 0rem;
}
.spacing-v-5>button {
margin-bottom: 0.341rem;
.spacing-v-5 > button {
margin-bottom: 0.341rem;
}
.spacing-v-5>button:last-child {
margin-bottom: 0rem;
.spacing-v-5 > button:last-child {
margin-bottom: 0rem;
}
.spacing-v-5-revealer>revealer>box {
margin-bottom: 0.341rem;
.spacing-v-5-revealer > revealer > box {
margin-bottom: 0.341rem;
}
.spacing-v-5-revealer>revealer:last-child>box {
margin-bottom: 0rem;
.spacing-v-5-revealer > revealer:last-child > box {
margin-bottom: 0rem;
}
.spacing-h-5>box {
margin-right: 0.341rem;
.spacing-h-5 > box {
margin-right: 0.341rem;
}
.spacing-h-5>box:last-child {
margin-right: 0rem;
.spacing-h-5 > box:last-child {
margin-right: 0rem;
}
.spacing-h-5>button {
margin-right: 0.341rem;
.spacing-h-5 > button {
margin-right: 0.341rem;
}
.spacing-h-5>button:last-child {
margin-right: 0rem;
.spacing-h-5 > button:last-child {
margin-right: 0rem;
}
.spacing-h-5>label {
margin-right: 0.341rem;
.spacing-h-5 > label {
margin-right: 0.341rem;
}
.spacing-h-5>label:last-child {
margin-right: 0rem;
.spacing-h-5 > label:last-child {
margin-right: 0rem;
}
.spacing-h-5>widget>box {
margin-right: 0.341rem;
.spacing-h-5 > widget > box {
margin-right: 0.341rem;
}
.spacing-h-5>widget:last-child>box {
margin-right: 0rem;
.spacing-h-5 > widget:last-child > box {
margin-right: 0rem;
}
.spacing-h-5>progressbar {
margin-right: 0.341rem;
.spacing-h-5 > progressbar {
margin-right: 0.341rem;
}
.spacing-h-5>progressbar:last-child {
margin-right: 0rem;
.spacing-h-5 > progressbar:last-child {
margin-right: 0rem;
}
.spacing-h-5>scrolledwindow {
margin-right: 0.341rem;
.spacing-h-5 > scrolledwindow {
margin-right: 0.341rem;
}
.spacing-h-5>scrolledwindow:last-child {
margin-right: 0rem;
.spacing-h-5 > scrolledwindow:last-child {
margin-right: 0rem;
}
.spacing-h-5>scrollbar {
margin-right: 0.341rem;
.spacing-h-5 > scrollbar {
margin-right: 0.341rem;
}
.spacing-h-5>scrollbar:last-child {
margin-right: 0rem;
.spacing-h-5 > scrollbar:last-child {
margin-right: 0rem;
}
.spacing-v-minus5>box {
margin-bottom: -0.341rem;
.spacing-v-minus5 > box {
margin-bottom: -0.341rem;
}
.spacing-v-minus5>box:last-child {
margin-bottom: 0rem;
.spacing-v-minus5 > box:last-child {
margin-bottom: 0rem;
}
.spacing-v-minus5>label {
margin-bottom: -0.341rem;
.spacing-v-minus5 > label {
margin-bottom: -0.341rem;
}
.spacing-v-minus5>label:last-child {
margin-bottom: 0rem;
.spacing-v-minus5 > label:last-child {
margin-bottom: 0rem;
}
.spacing-h-10>box {
margin-right: 0.682rem;
.spacing-h-10 > box {
margin-right: 0.682rem;
}
.spacing-h-10>box:last-child {
margin-right: 0rem;
.spacing-h-10 > box:last-child {
margin-right: 0rem;
}
.spacing-h-10>flowboxchild>button {
margin-right: 0.682rem;
.spacing-h-10 > flowboxchild > button {
margin-right: 0.682rem;
}
.spacing-h-10>flowboxchild:last-child>button {
margin-right: 0rem;
.spacing-h-10 > flowboxchild:last-child > button {
margin-right: 0rem;
}
.spacing-h-10>label {
margin-right: 0.682rem;
.spacing-h-10 > label {
margin-right: 0.682rem;
}
.spacing-h-10>label:last-child {
margin-right: 0rem;
.spacing-h-10 > label:last-child {
margin-right: 0rem;
}
.spacing-h-10>revealer {
margin-right: 0.682rem;
.spacing-h-10 > revealer {
margin-right: 0.682rem;
}
.spacing-h-10>revealer:last-child {
margin-right: 0rem;
.spacing-h-10 > revealer:last-child {
margin-right: 0rem;
}
.spacing-h-10>overlay {
margin-right: 0.682rem;
.spacing-h-10 > overlay {
margin-right: 0.682rem;
}
.spacing-h-10>overlay:last-child {
margin-right: 0rem;
.spacing-h-10 > overlay:last-child {
margin-right: 0rem;
}
.spacing-h-10>button {
margin-right: 0.682rem;
.spacing-h-10 > button {
margin-right: 0.682rem;
}
.spacing-h-10>button:last-child {
margin-right: 0rem;
.spacing-h-10 > button:last-child {
margin-right: 0rem;
}
.spacing-h-10>label {
margin-right: 0.682rem;
.spacing-h-10 > label {
margin-right: 0.682rem;
}
.spacing-h-10>label:last-child {
margin-right: 0rem;
.spacing-h-10 > label:last-child {
margin-right: 0rem;
}
.spacing-h-10>widget {
margin-right: 0.682rem;
.spacing-h-10 > widget {
margin-right: 0.682rem;
}
.spacing-h-10>widget:last-child {
margin-right: 0rem;
.spacing-h-10 > widget:last-child {
margin-right: 0rem;
}
.spacing-h-10>stack {
margin-right: 0.682rem;
.spacing-h-10 > stack {
margin-right: 0.682rem;
}
.spacing-h-10>stack:last-child {
margin-right: 0rem;
.spacing-h-10 > stack:last-child {
margin-right: 0rem;
}
.spacing-v-10>box {
margin-bottom: 0.682rem;
.spacing-v-10 > box {
margin-bottom: 0.682rem;
}
.spacing-v-10>box:last-child {
margin-bottom: 0rem;
.spacing-v-10 > box:last-child {
margin-bottom: 0rem;
}
.spacing-v-10>button {
margin-bottom: 0.682rem;
.spacing-v-10 > button {
margin-bottom: 0.682rem;
}
.spacing-v-10>button:last-child {
margin-bottom: 0rem;
.spacing-v-10 > button:last-child {
margin-bottom: 0rem;
}
.anim-enter {
@include anim-enter;
@include anim-enter;
}
.anim-exit {
@include anim-exit;
@include anim-exit;
}
@mixin elevation-border-softer {
border-top: 1px solid mix($t_t_surface, $t_onSurface, 80%);
border-left: 1px solid mix($t_t_surface, $t_onSurface, 80%);
border-right: 1px solid mix($t_t_surface, $t_onSurface, 85%);
border-bottom: 1px solid mix($t_t_surface, $t_onSurface, 85%);
border-top: 1px solid mix($t_t_surface, $t_onSurface, 80%);
border-left: 1px solid mix($t_t_surface, $t_onSurface, 80%);
border-right: 1px solid mix($t_t_surface, $t_onSurface, 85%);
border-bottom: 1px solid mix($t_t_surface, $t_onSurface, 85%);
}
@mixin elevation-border {
border-top: 1px solid mix($t_t_surface, $onSurface, 90%);
border-left: 1px solid mix($t_t_surface, $onSurface, 90%);
border-right: 1px solid mix($t_t_surface, $onSurface, 95%);
border-bottom: 1px solid mix($t_t_surface, $onSurface, 95%);
border-top: 1px solid mix($t_t_surface, $onSurface, 90%);
border-left: 1px solid mix($t_t_surface, $onSurface, 90%);
border-right: 1px solid mix($t_t_surface, $onSurface, 95%);
border-bottom: 1px solid mix($t_t_surface, $onSurface, 95%);
}
@mixin elevation-border-heavier {
border-top: 1px solid mix($t_t_surface, $onSurface, 80%);
border-left: 1px solid mix($t_t_surface, $onSurface, 80%);
border-right: 1px solid mix($t_t_surface, $onSurface, 85%);
border-bottom: 1px solid mix($t_t_surface, $onSurface, 85%);
border-top: 1px solid mix($t_t_surface, $onSurface, 80%);
border-left: 1px solid mix($t_t_surface, $onSurface, 80%);
border-right: 1px solid mix($t_t_surface, $onSurface, 85%);
border-bottom: 1px solid mix($t_t_surface, $onSurface, 85%);
}
@mixin elevation-border-transparent {
border-top: 1px solid transparent;
border-top: 1px solid transparent;
}
@mixin button-minsize {
min-width: 2.727rem;
min-height: 2.727rem;
min-width: 2.727rem;
min-height: 2.727rem;
}
.button-minsize {
@include button-minsize;
@include button-minsize;
}
@mixin group-padding {
padding: 0.341rem;
padding: 0.341rem;
}
.group-padding {
@include group-padding;
@include group-padding;
}
.margin-right-5 {
margin-right: 0.341rem;
margin-right: 0.341rem;
}
.margin-left-5 {
margin-left: 0.341rem;
margin-left: 0.341rem;
}
.margin-top-5 {
margin-top: 0.341rem;
margin-top: 0.341rem;
}
.margin-bottom-5 {
margin-bottom: 0.341rem;
margin-bottom: 0.341rem;
}
.margin-right-10 {
margin-right: 0.682rem;
margin-right: 0.682rem;
}
.margin-left-10 {
margin-left: 0.682rem;
margin-left: 0.682rem;
}
.margin-top-10 {
margin-top: 0.682rem;
margin-top: 0.682rem;
}
.margin-bottom-10 {
margin-bottom: 0.682rem;
margin-bottom: 0.682rem;
}
.invisible {
opacity: 0;
background-color: transparent;
color: transparent;
opacity: 0;
background-color: transparent;
color: transparent;
}
.spacing-h--5>box {
margin-right: -0.341rem;
.spacing-h--5 > box {
margin-right: -0.341rem;
}
.spacing-h--5>box:last-child {
margin-right: 0rem;
.spacing-h--5 > box:last-child {
margin-right: 0rem;
}
.spacing-v--5>box {
margin-bottom: -0.341rem;
.spacing-v--5 > box {
margin-bottom: -0.341rem;
}
.spacing-v--5>box:last-child {
margin-bottom: 0rem;
.spacing-v--5 > box:last-child {
margin-bottom: 0rem;
}
.spacing-h--20>box {
margin-left: -1.364rem;
.spacing-h--20 > box {
margin-left: -1.364rem;
}
.spacing-h--20>box:first-child {
margin-left: 0rem;
.spacing-h--20 > box:first-child {
margin-left: 0rem;
}
$white: white;
$black: black;
.instant {
transition: 0ms;
transition: 0ms;
}
.md3_decel {
@include md3_decel;
}
@include md3_decel;
}

120
desktops/hyprland/ags/scss/_notifications.scss
View File

@@ -1,126 +1,126 @@
$notif_surface: $t_background;
@mixin notif-rounding {
@include small-rounding;
@include small-rounding;
}
.notif-low {
@include notif-rounding;
background-color: $l_l_t_surfaceVariant;
color: $onSurfaceVariant;
padding: $rounding_small;
padding-right: $rounding_small + 0.545rem;
@include notif-rounding;
background-color: $l_l_t_surfaceVariant;
color: $onSurfaceVariant;
padding: $rounding_small;
padding-right: $rounding_small + 0.545rem;
}
.notif-normal {
@include notif-rounding;
background-color: $l_l_t_surfaceVariant;
color: $onSurfaceVariant;
padding: $rounding_small;
padding-right: $rounding_small + 0.545rem;
@include notif-rounding;
background-color: $l_l_t_surfaceVariant;
color: $onSurfaceVariant;
padding: $rounding_small;
padding-right: $rounding_small + 0.545rem;
}
.notif-critical {
@include notif-rounding;
background-color: $error;
color: $onError;
padding: $rounding_small;
padding-right: $rounding_small + 0.545rem;
@include notif-rounding;
background-color: $error;
color: $onError;
padding: $rounding_small;
padding-right: $rounding_small + 0.545rem;
}
.popup-notif-low {
@include notif-rounding;
min-width: 30.682rem;
background-color: $notif_surface;
color: $onSurfaceVariant;
padding: $rounding_small;
padding-right: $rounding_small + 0.545rem;
@include notif-rounding;
min-width: 30.682rem;
background-color: $notif_surface;
color: $onSurfaceVariant;
padding: $rounding_small;
padding-right: $rounding_small + 0.545rem;
}
.popup-notif-normal {
@include notif-rounding;
min-width: 30.682rem;
background-color: $notif_surface;
color: $onSurfaceVariant;
padding: $rounding_small;
padding-right: $rounding_small + 0.545rem;
@include notif-rounding;
min-width: 30.682rem;
background-color: $notif_surface;
color: $onSurfaceVariant;
padding: $rounding_small;
padding-right: $rounding_small + 0.545rem;
}
.popup-notif-critical {
@include notif-rounding;
min-width: 30.682rem;
background-color: $error;
color: $onError;
padding: $rounding_small;
padding-right: $rounding_small + 0.545rem;
@include notif-rounding;
min-width: 30.682rem;
background-color: $error;
color: $onError;
padding: $rounding_small;
padding-right: $rounding_small + 0.545rem;
}
.notif-body-low {
color: mix($onSurfaceVariant, $surfaceVariant, 67%);
color: mix($onSurfaceVariant, $surfaceVariant, 67%);
}
.notif-body-normal {
color: mix($onSurfaceVariant, $surfaceVariant, 67%);
color: mix($onSurfaceVariant, $surfaceVariant, 67%);
}
.notif-body-critical {
color: mix($onError, $error, 67%);
color: mix($onError, $error, 67%);
}
.notif-icon {
@include full-rounding;
min-width: 3.409rem;
min-height: 3.409rem;
@include full-rounding;
min-width: 3.409rem;
min-height: 3.409rem;
}
.notif-icon-material {
background-color: $t_secondaryContainer;
color: $onSecondaryContainer;
background-color: $t_secondaryContainer;
color: $onSecondaryContainer;
}
.notif-icon-material-low {
background-color: $t_secondaryContainer;
color: $onSecondaryContainer;
background-color: $t_secondaryContainer;
color: $onSecondaryContainer;
}
.notif-icon-material-normal {
background-color: $t_secondaryContainer;
color: $onSecondaryContainer;
background-color: $t_secondaryContainer;
color: $onSecondaryContainer;
}
.notif-icon-material-critical {
background-color: $t_errorContainer;
color: $onErrorContainer;
background-color: $t_errorContainer;
color: $onErrorContainer;
}
.notif-close-btn {
@include notif-rounding;
padding: 0rem 0.136rem;
@include notif-rounding;
padding: 0rem 0.136rem;
}
.notif-close-btn:hover {
background: $hovercolor;
background: $hovercolor;
}
.notif-close-btn:active {
background: $activecolor;
background: $activecolor;
}
.notif-closeall-btn {
@include notif-rounding;
padding: 0.341rem 0.341rem;
@include notif-rounding;
padding: 0.341rem 0.341rem;
}
.notif-closeall-btn:hover {
background-color: $hovercolor;
background-color: $hovercolor;
}
.notif-closeall-btn:active {
background-color: $activecolor;
background-color: $activecolor;
}
.osd-notif {
@include notif-rounding;
background-color: transparentize($background, $transparentize_surface_amount_subtract_surface);
min-width: 30.682rem;
}
@include notif-rounding;
background-color: transparentize($background, $transparentize_surface_amount_subtract_surface);
min-width: 30.682rem;
}

74
desktops/hyprland/ags/scss/_osd.scss
View File

@@ -1,59 +1,59 @@
.osd-bg {
min-width: 8.864rem;
min-height: 3.409rem;
min-width: 8.864rem;
min-height: 3.409rem;
}
.osd-value {
background-color: $t_background;
border-radius: 1.023rem;
padding: 0.625rem 1.023rem;
padding-top: 0.313rem;
margin: 10px;
@include elevation2;
background-color: $t_background;
border-radius: 1.023rem;
padding: 0.625rem 1.023rem;
padding-top: 0.313rem;
margin: 10px;
@include elevation2;
}
.osd-progress {
min-height: 0.955rem;
min-height: 0.955rem;
min-width: 0.068rem;
padding: 0rem;
border-radius: 10rem;
@include fluent_decel;
trough {
min-height: 0.954rem;
min-width: 0.068rem;
padding: 0rem;
border-radius: 10rem;
background-color: $onPrimaryContainer;
}
progress {
@include fluent_decel;
trough {
min-height: 0.954rem;
min-width: 0.068rem;
border-radius: 10rem;
background-color: $onPrimaryContainer;
}
progress {
@include fluent_decel;
min-height: 0.680rem;
min-width: 0.680rem;
margin: 0rem 0.137rem;
border-radius: 10rem;
background-color: $primaryContainer;
}
min-height: 0.68rem;
min-width: 0.68rem;
margin: 0rem 0.137rem;
border-radius: 10rem;
background-color: $primaryContainer;
}
}
.osd-icon {
color: $onPrimaryContainer;
color: $onPrimaryContainer;
}
.osd-label {
font-size: 1.023rem;
font-weight: 500;
color: $onBackground;
margin-top: 0.341rem;
font-size: 1.023rem;
font-weight: 500;
color: $onBackground;
margin-top: 0.341rem;
}
.osd-value-txt {
@include titlefont;
font-size: 1.688rem;
font-weight: 500;
color: $onBackground;
@include titlefont;
font-size: 1.688rem;
font-weight: 500;
color: $onBackground;
}
.osd-notifs {
padding-top: 0.313rem;
}
padding-top: 0.313rem;
}

90
desktops/hyprland/ags/scss/_osk.scss
View File

@@ -5,93 +5,93 @@ $osk_key_rounding: 0.682rem;
$osk_key_fontsize: 1.091rem;
.osk-window {
@include md3_decel_fast;
@include large-rounding;
@include elevation-border;
@include elevation2;
// min-height: 29.591rem;
// min-width: 50rem;
background-color: $t_background;
padding: 1.023rem;
@include md3_decel_fast;
@include large-rounding;
@include elevation-border;
@include elevation2;
// min-height: 29.591rem;
// min-width: 50rem;
background-color: $t_background;
padding: 1.023rem;
}
.osk-show {
@include md3_decel_fast;
@include md3_decel_fast;
}
.osk-hide {
margin-top: 30.682rem;
margin-bottom: -30.682rem;
// opacity: 0;
@include md3_accel_fast;
margin-top: 30.682rem;
margin-bottom: -30.682rem;
// opacity: 0;
@include md3_accel_fast;
}
.osk-key {
border-radius: $osk_key_rounding;
background-color: $t_surfaceVariant;
color: $onSurfaceVariant;
padding: $osk_key_padding;
font-weight: 500;
font-size: $osk_key_fontsize;
border-radius: $osk_key_rounding;
background-color: $t_surfaceVariant;
color: $onSurfaceVariant;
padding: $osk_key_padding;
font-weight: 500;
font-size: $osk_key_fontsize;
}
.osk-key:hover {
background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 90%);
background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 90%);
}
.osk-key:active {
background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 70%);
font-size: $osk_key_fontsize;
background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 70%);
font-size: $osk_key_fontsize;
}
.osk-key-active {
background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 70%);
background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 70%);
}
.osk-key-normal {
min-width: $osk_key_width;
min-height: $osk_key_height;
min-width: $osk_key_width;
min-height: $osk_key_height;
}
.osk-key-fn {
min-width: $osk_key_width * 1.005;
min-height: $osk_key_height / 2;
min-width: $osk_key_width * 1.005;
min-height: $osk_key_height / 2;
}
.osk-key-tab {
min-width: $osk_key_width * 1.6;
min-height: $osk_key_height;
min-width: $osk_key_width * 1.6;
min-height: $osk_key_height;
}
.osk-key-caps {
min-width: $osk_key_width * 1.9;
min-height: $osk_key_height;
min-width: $osk_key_width * 1.9;
min-height: $osk_key_height;
}
.osk-key-shift {
min-width: $osk_key_width * 2.5;
min-height: $osk_key_height;
min-width: $osk_key_width * 2.5;
min-height: $osk_key_height;
}
.osk-key-control {
min-width: $osk_key_width * 1.3;
min-height: $osk_key_height;
min-width: $osk_key_width * 1.3;
min-height: $osk_key_height;
}
.osk-control-button {
border-radius: $osk_key_rounding;
background-color: $t_surfaceVariant;
color: $onSurfaceVariant;
font-weight: 500;
font-size: $osk_key_fontsize;
padding: 0.682rem;
border-radius: $osk_key_rounding;
background-color: $t_surfaceVariant;
color: $onSurfaceVariant;
font-weight: 500;
font-size: $osk_key_fontsize;
padding: 0.682rem;
}
.osk-control-button:hover {
background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 90%);
background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 90%);
}
.osk-control-button:active {
background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 70%);
font-size: $osk_key_fontsize;
}
background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 70%);
font-size: $osk_key_fontsize;
}

134
desktops/hyprland/ags/scss/_overview.scss
View File

@@ -1,130 +1,130 @@
.overview-search-box {
@include md3_decel;
@include large-rounding;
@include elevation-border;
@include elevation2;
min-width: 13.636rem;
min-height: 3.409rem;
padding: 0rem 1.364rem;
padding-right: 2.864rem;
background-color: $t_background;
color: $onBackground;
@include md3_decel;
@include large-rounding;
@include elevation-border;
@include elevation2;
min-width: 13.636rem;
min-height: 3.409rem;
padding: 0rem 1.364rem;
padding-right: 2.864rem;
background-color: $t_background;
color: $onBackground;
selection {
background-color: $secondary;
color: $onSecondary;
}
caret-color: transparent;
selection {
background-color: $secondary;
color: $onSecondary;
}
caret-color: transparent;
}
.overview-search-box-extended {
min-width: 25.909rem;
caret-color: $onSecondaryContainer;
min-width: 25.909rem;
caret-color: $onSecondaryContainer;
}
.overview-search-prompt {
color: $subtext;
color: $subtext;
}
.overview-search-icon {
margin: 0rem 1.023rem;
margin: 0rem 1.023rem;
}
.overview-search-prompt-box {
margin-left: -18.545rem;
margin-right: $elevation2_margin + 1px;
margin-left: -18.545rem;
margin-right: $elevation2_margin + 1px;
}
.overview-search-icon-box {
margin-left: -18.545rem;
margin-right: $elevation2_margin + 1px;
margin-left: -18.545rem;
margin-right: $elevation2_margin + 1px;
}
.overview-search-results {
// min-height: 2.813rem;
// min-height: 37.5rem;
@include large-rounding;
@include elevation-border;
@include elevation2;
min-width: 28.773rem;
padding: 0.682rem;
background-color: $t_background;
color: $onBackground;
// min-height: 2.813rem;
// min-height: 37.5rem;
@include large-rounding;
@include elevation-border;
@include elevation2;
min-width: 28.773rem;
padding: 0.682rem;
background-color: $t_background;
color: $onBackground;
}
.overview-search-results-icon {
margin: 0rem 0.682rem;
font-size: 2.386rem;
margin: 0rem 0.682rem;
font-size: 2.386rem;
}
.overview-search-results-txt {
margin-right: 0.682rem;
margin-right: 0.682rem;
}
.overview-search-results-txt-cmd {
margin-right: 0.682rem;
@include techfont;
font-size: 1.227rem;
margin-right: 0.682rem;
@include techfont;
font-size: 1.227rem;
}
.overview-search-result-btn {
@include normal-rounding;
padding: 0.341rem;
min-width: 2.386rem;
min-height: 2.386rem;
@include normal-rounding;
padding: 0.341rem;
min-width: 2.386rem;
min-height: 2.386rem;
caret-color: transparent;
caret-color: transparent;
}
.overview-search-result-btn:focus,
.overview-search-result-btn:hover {
background-color: $hovercolor;
background-color: $hovercolor;
}
.overview-search-result-btn:active {
background-color: $activecolor;
background-color: $activecolor;
}
.overview-tasks {
@include large-rounding;
@include elevation-border;
@include elevation2;
padding: 0.341rem;
background-color: $t_background;
color: $onBackground;
@include large-rounding;
@include elevation-border;
@include elevation2;
padding: 0.341rem;
background-color: $t_background;
color: $onBackground;
}
.overview-tasks-workspace {
@include normal-rounding;
// @include elevation-border;
margin: 0.341rem;
background-color: mix($t_t_surface, $t_onSurface, 93%);
@include normal-rounding;
// @include elevation-border;
margin: 0.341rem;
background-color: mix($t_t_surface, $t_onSurface, 93%);
}
.overview-tasks-window {
@include normal-rounding;
// @include elevation-border-softer;
@include md3_decel;
background-color: $l_t_secondaryContainer;
color: $onSecondaryContainer;
border: 0.068rem solid $t_t_t_onSecondaryContainer;
@include normal-rounding;
// @include elevation-border-softer;
@include md3_decel;
background-color: $l_t_secondaryContainer;
color: $onSecondaryContainer;
border: 0.068rem solid $t_t_t_onSecondaryContainer;
}
.overview-tasks-window:hover {
background-color: mix($l_t_secondaryContainer, $primary, 95%);
background-color: mix($l_t_secondaryContainer, $primary, 95%);
}
.overview-tasks-window:focus {
background-color: mix($l_t_secondaryContainer, $primary, 95%);
background-color: mix($l_t_secondaryContainer, $primary, 95%);
}
.overview-tasks-window:active {
background-color: mix($l_t_secondaryContainer, $primary, 90%);
background-color: mix($l_t_secondaryContainer, $primary, 90%);
}
.overview-tasks-window-selected {
background-color: mix($l_t_secondaryContainer, $primary, 90%);
background-color: mix($l_t_secondaryContainer, $primary, 90%);
}
.overview-tasks-window-dragging {
opacity: 0.2;
}
opacity: 0.2;
}

44
desktops/hyprland/ags/scss/_session.scss
View File

@@ -1,36 +1,36 @@
.session-bg {
margin-top: -2.727rem;
background-color: mix($t_t_background, $background, 70%);
margin-top: -2.727rem;
background-color: mix($t_t_background, $background, 70%);
}
.session-button {
@include large-rounding;
min-width: 8.182rem;
min-height: 8.182rem;
background-color: $surfaceVariant;
color: $onSurfaceVariant;
font-size: 3rem;
@include large-rounding;
min-width: 8.182rem;
min-height: 8.182rem;
background-color: $surfaceVariant;
color: $onSurfaceVariant;
font-size: 3rem;
}
.session-button-focused {
background-color: $secondaryContainer;
color: $onSecondaryContainer;
background-color: $secondaryContainer;
color: $onSecondaryContainer;
}
.session-button-desc {
background-color: mix($surface, $surfaceVariant, 50%);
color: mix($onSurface, $onSurfaceVariant, 50%);
border-bottom-left-radius: $rounding_large;
border-bottom-right-radius: $rounding_large;
padding: 0.205rem 0.341rem;
font-weight: 700;
background-color: mix($surface, $surfaceVariant, 50%);
color: mix($onSurface, $onSurfaceVariant, 50%);
border-bottom-left-radius: $rounding_large;
border-bottom-right-radius: $rounding_large;
padding: 0.205rem 0.341rem;
font-weight: 700;
}
.session-button-cancel {
@include large-rounding;
min-width: 8.182rem;
min-height: 5.455rem;
background-color: $surfaceVariant;
color: $onSurfaceVariant;
font-size: 3rem;
@include large-rounding;
min-width: 8.182rem;
min-height: 5.455rem;
background-color: $surfaceVariant;
color: $onSurfaceVariant;
font-size: 3rem;
}

358
desktops/hyprland/ags/scss/_sidebars.scss
View File

@@ -1,211 +1,211 @@
// sideleft sideright stuff
.sidebar-right {
@include md3_decel;
@include large-rounding;
@include elevation-border;
@include elevation2;
// min-width: 29.591rem;
// min-height: 29.591rem;
background-color: $t_background;
padding: 1.023rem;
@include md3_decel;
@include large-rounding;
@include elevation-border;
@include elevation2;
// min-width: 29.591rem;
// min-height: 29.591rem;
background-color: $t_background;
padding: 1.023rem;
}
.sideright-show {
@include md3_decel;
@include md3_decel;
}
.sideright-hide {
margin-right: -30.682rem;
// opacity: 0;
@include md3_accel;
margin-right: -30.682rem;
// opacity: 0;
@include md3_accel;
}
.sidebar-left {
@include md3_decel;
@include large-rounding;
@include elevation-border;
@include elevation2;
// min-width: 29.591rem; // COMMENT THIS LATER IF TEXT WRAP IS USED
// min-height: 29.591rem;
background-color: $t_background;
padding: 1.023rem;
@include md3_decel;
@include large-rounding;
@include elevation-border;
@include elevation2;
// min-width: 29.591rem; // COMMENT THIS LATER IF TEXT WRAP IS USED
// min-height: 29.591rem;
background-color: $t_background;
padding: 1.023rem;
}
.sideleft-show {
@include md3_decel;
@include md3_decel;
}
.sideleft-hide {
margin-left: -30.682rem;
// opacity: 0;
@include md3_accel;
margin-left: -30.682rem;
// opacity: 0;
@include md3_accel;
}
.sidebar-group {
@include normal-rounding;
// @include elevation-border;
@include group-padding;
background-color: $t_surface;
@include normal-rounding;
// @include elevation-border;
@include group-padding;
background-color: $t_surface;
}
.sidebar-group-nopad {
@include normal-rounding;
// @include elevation-border;
background-color: $t_surface;
@include normal-rounding;
// @include elevation-border;
background-color: $t_surface;
}
.sidebar-group-invisible {
@include group-padding;
@include group-padding;
}
.sidebar-group-invisible-morehorizpad {
padding: 0.341rem 0.682rem;
padding: 0.341rem 0.682rem;
}
.sidebar-iconbutton {
@include full-rounding;
@include md3_decel;
color: $onSurface;
min-width: 2.727rem;
min-height: 2.727rem;
@include full-rounding;
@include md3_decel;
color: $onSurface;
min-width: 2.727rem;
min-height: 2.727rem;
}
.sidebar-iconbutton:hover {
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
}
.sidebar-iconbutton:active {
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%);
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%);
}
.sidebar-button {
@include md3_decel;
padding: 0rem $rounding_small;
background-color: $t_secondaryContainer;
color: $onSecondaryContainer;
@include md3_decel;
padding: 0rem $rounding_small;
background-color: $t_secondaryContainer;
color: $onSecondaryContainer;
}
.sidebar-button-nopad {
@include md3_decel;
background-color: $t_secondaryContainer;
color: $onSecondaryContainer;
@include md3_decel;
background-color: $t_secondaryContainer;
color: $onSecondaryContainer;
}
.sidebar-button:hover {
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
}
.sidebar-button:active {
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%);
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%);
}
.sidebar-button-nopad:hover {
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
}
.sidebar-button-nopad:active {
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%);
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%);
}
.sidebar-button-left {
border-top-left-radius: $rounding_small;
border-bottom-left-radius: $rounding_small;
border-top-left-radius: $rounding_small;
border-bottom-left-radius: $rounding_small;
}
.sidebar-button-right {
border-top-right-radius: $rounding_small;
border-bottom-right-radius: $rounding_mediumsmall;
border-top-right-radius: $rounding_small;
border-bottom-right-radius: $rounding_mediumsmall;
}
.sidebar-button-alone {
@include small-rounding;
@include small-rounding;
}
.sidebar-button-alone-normal {
@include small-rounding;
@include small-rounding;
}
.sidebar-button-active {
background-color: $primary;
color: $onPrimary;
background-color: $primary;
color: $onPrimary;
}
.sidebar-button-active:hover {
background-color: mix($primary, $hovercolor, 90%);
background-color: mix($primary, $hovercolor, 90%);
}
.sidebar-button-active:active {
background-color: mix($primary, $hovercolor, 70%);
background-color: mix($primary, $hovercolor, 70%);
}
.sidebar-buttons-separator {
min-width: 0.068rem;
min-height: 0.068rem;
background-color: $onSurfaceVariant;
min-width: 0.068rem;
min-height: 0.068rem;
background-color: $onSurfaceVariant;
}
.sidebar-navrail {
// background-color: $t_surface;
padding: 0rem $rounding_medium;
// background-color: $t_surface;
padding: 0rem $rounding_medium;
}
.sidebar-navrail-btn>box>label {
@include full-rounding;
@include md3_decel;
.sidebar-navrail-btn > box > label {
@include full-rounding;
@include md3_decel;
}
.sidebar-navrail-btn:hover>box>label:first-child {
background-color: mix($t_surfaceVariant, $onSurfaceVariant, 90%);
.sidebar-navrail-btn:hover > box > label:first-child {
background-color: mix($t_surfaceVariant, $onSurfaceVariant, 90%);
}
.sidebar-navrail-btn:active>box>label:first-child {
background-color: mix($surfaceVariant, $onSurfaceVariant, 75%);
.sidebar-navrail-btn:active > box > label:first-child {
background-color: mix($surfaceVariant, $onSurfaceVariant, 75%);
}
.sidebar-navrail-btn-active>box>label:first-child {
background-color: $secondaryContainer;
color: $onSecondaryContainer;
.sidebar-navrail-btn-active > box > label:first-child {
background-color: $secondaryContainer;
color: $onSecondaryContainer;
}
.sidebar-navrail-btn-active:hover>box>label:first-child {
background-color: mix($secondaryContainer, $hovercolor, 90%);
color: mix($onSecondaryContainer, $hovercolor, 90%);
.sidebar-navrail-btn-active:hover > box > label:first-child {
background-color: mix($secondaryContainer, $hovercolor, 90%);
color: mix($onSecondaryContainer, $hovercolor, 90%);
}
.sidebar-sysinfo-grouppad {
padding: 1.159rem;
padding: 1.159rem;
}
.sidebar-memory-ram-circprog {
@include fluent_decel_long;
min-width: $rounding_small;
min-height: 4.091rem;
padding: 0.409rem;
background-color: $secondaryContainer;
color: $onSecondaryContainer;
font-size: 0px;
@include fluent_decel_long;
min-width: $rounding_small;
min-height: 4.091rem;
padding: 0.409rem;
background-color: $secondaryContainer;
color: $onSecondaryContainer;
font-size: 0px;
}
.sidebar-memory-swap-circprog {
@include fluent_decel_long;
min-width: $rounding_small;
min-height: 2.255rem;
padding: 0.409rem;
margin: 0.918rem;
background-color: $secondaryContainer;
color: $onSecondaryContainer;
font-size: 0px;
@include fluent_decel_long;
min-width: $rounding_small;
min-height: 2.255rem;
padding: 0.409rem;
margin: 0.918rem;
background-color: $secondaryContainer;
color: $onSecondaryContainer;
font-size: 0px;
}
.sidebar-cpu-circprog {
min-width: $rounding_small;
min-height: 3.409rem;
padding: 0.409rem;
background-color: $secondaryContainer;
color: $onSecondaryContainer;
@include fluent_decel_long;
font-size: 0px;
min-width: $rounding_small;
min-height: 3.409rem;
padding: 0.409rem;
background-color: $secondaryContainer;
color: $onSecondaryContainer;
@include fluent_decel_long;
font-size: 0px;
}
// .sidebar-sysinfo-txt {
@@ -214,168 +214,168 @@
// }
.sidebar-viewport {
@include small-rounding;
@include small-rounding;
}
.sidebar-scrollbar {
trough {
@include full-rounding;
min-width: 0.545rem;
background-color: transparent;
}
trough {
@include full-rounding;
min-width: 0.545rem;
background-color: transparent;
}
slider {
@include full-rounding;
min-width: 0.273rem;
min-height: 2.045rem;
background-color: $t_onSurfaceVariant;
}
slider {
@include full-rounding;
min-width: 0.273rem;
min-height: 2.045rem;
background-color: $t_onSurfaceVariant;
}
slider:hover {
background-color: mix($t_onSurfaceVariant, $onSurfaceVariant, 80%);
}
slider:hover {
background-color: mix($t_onSurfaceVariant, $onSurfaceVariant, 80%);
}
slider:active {
background-color: mix($onSurfaceVariant, $surfaceVariant, 50%);
}
slider:active {
background-color: mix($onSurfaceVariant, $surfaceVariant, 50%);
}
}
.sidebar-calendar-btn {
@include full-rounding;
@include md3_decel;
min-height: 2.523rem;
min-width: 2.523rem;
color: $onSurface;
@include full-rounding;
@include md3_decel;
min-height: 2.523rem;
min-width: 2.523rem;
color: $onSurface;
}
.sidebar-calendar-btn:hover {
background-color: $hovercolor;
background-color: $hovercolor;
}
.sidebar-calendar-btn:active {
background-color: $activecolor;
background-color: $activecolor;
}
.sidebar-calendar-btn-txt {
margin-left: -10.341rem;
margin-right: -10.341rem;
margin-left: -10.341rem;
margin-right: -10.341rem;
}
.sidebar-calendar-btn-today {
background-color: $primary;
color: $onPrimary;
background-color: $primary;
color: $onPrimary;
}
.sidebar-calendar-btn-today:hover {
background-color: mix($primary, $hovercolor, 90%);
background-color: mix($primary, $hovercolor, 90%);
}
.sidebar-calendar-btn-today:active {
background-color: mix($primary, $hovercolor, 70%);
background-color: mix($primary, $hovercolor, 70%);
}
.sidebar-calendar-btn-othermonth {
color: mix($onSurface, $surface, 50%);
color: mix($onSurface, $surface, 50%);
}
.sidebar-calendar-header {
margin: 0.341rem;
margin: 0.341rem;
}
.sidebar-calendar-monthyear-btn {
@include full-rounding;
padding: 0rem 0.682rem;
background-color: $t_surfaceVariant;
color: $onSurfaceVariant;
@include full-rounding;
padding: 0rem 0.682rem;
background-color: $t_surfaceVariant;
color: $onSurfaceVariant;
}
.sidebar-calendar-monthyear-btn:hover {
background-color: mix($t_surfaceVariant, $onSurfaceVariant, 95%);
color: mix($onSurfaceVariant, $surfaceVariant, 95%);
background-color: mix($t_surfaceVariant, $onSurfaceVariant, 95%);
color: mix($onSurfaceVariant, $surfaceVariant, 95%);
}
.sidebar-calendar-monthyear-btn:active {
background-color: mix($surfaceVariant, $onSurfaceVariant, 85%);
color: mix($onSurfaceVariant, $surfaceVariant, 85%);
background-color: mix($surfaceVariant, $onSurfaceVariant, 85%);
color: mix($onSurfaceVariant, $surfaceVariant, 85%);
}
.sidebar-calendar-monthshift-btn {
@include full-rounding;
min-width: 2.045rem;
min-height: 2.045rem;
background-color: $t_surfaceVariant;
color: $onSurfaceVariant;
@include full-rounding;
min-width: 2.045rem;
min-height: 2.045rem;
background-color: $t_surfaceVariant;
color: $onSurfaceVariant;
}
.sidebar-calendar-monthshift-btn:hover {
background-color: mix($t_surfaceVariant, $onSurfaceVariant, 95%);
color: mix($onSurfaceVariant, $surfaceVariant, 95%);
background-color: mix($t_surfaceVariant, $onSurfaceVariant, 95%);
color: mix($onSurfaceVariant, $surfaceVariant, 95%);
}
.sidebar-calendar-monthshift-btn:active {
background-color: mix($surfaceVariant, $onSurfaceVariant, 85%);
color: mix($onSurfaceVariant, $surfaceVariant, 85%);
background-color: mix($surfaceVariant, $onSurfaceVariant, 85%);
color: mix($onSurfaceVariant, $surfaceVariant, 85%);
}
.sidebar-todo-selector-tab {
@include small-rounding;
transition: 0ms;
min-height: 2.5rem;
color: $onSurface;
@include small-rounding;
transition: 0ms;
min-height: 2.5rem;
color: $onSurface;
}
.sidebar-todo-selector-tab:hover {
background-color: mix($t_surfaceVariant, $onSurfaceVariant, 90%);
background-color: mix($t_surfaceVariant, $onSurfaceVariant, 90%);
}
.sidebar-todo-selector-tab:active {
background-color: mix($surfaceVariant, $onSurfaceVariant, 75%);
background-color: mix($surfaceVariant, $onSurfaceVariant, 75%);
}
.sidebar-todo-selector-tab-active>box>label {
color: $primary;
.sidebar-todo-selector-tab-active > box > label {
color: $primary;
}
.sidebar-todo-selector-highlight-offset {
margin-top: -0.205rem;
margin-bottom: 0.205rem;
margin-top: -0.205rem;
margin-bottom: 0.205rem;
}
.sidebar-todo-selector-highlight {
transition: 180ms ease-in-out; // Doesn't look that good, but it syncs with GtkStack animation of the actual todo widget content
color: $primary;
padding: 0rem 2.045rem;
min-height: 0.205rem;
transition: 180ms ease-in-out; // Doesn't look that good, but it syncs with GtkStack animation of the actual todo widget content
color: $primary;
padding: 0rem 2.045rem;
min-height: 0.205rem;
}
.sidebar-todo-item-action {
border-radius: 9999px;
min-width: 1.705rem;
min-height: 1.705rem;
border-radius: 9999px;
min-width: 1.705rem;
min-height: 1.705rem;
}
.sidebar-todo-item-action:hover {
background-color: mix($t_surface, $t_onSurface, 95%);
background-color: mix($t_surface, $t_onSurface, 95%);
}
.sidebar-todo-item-action:active {
background-color: mix($t_surface, $t_onSurface, 85%);
background-color: mix($t_surface, $t_onSurface, 85%);
}
.sidebar-clipboard-item {
border-radius: $rounding_small;
min-height: 2.045rem;
padding: 0.341rem;
background-color: $t_secondaryContainer;
color: $onSecondaryContainer;
border-radius: $rounding_small;
min-height: 2.045rem;
padding: 0.341rem;
background-color: $t_secondaryContainer;
color: $onSecondaryContainer;
}
.sidebar-clipboard-item:hover {
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 90%);
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 90%);
}
.sidebar-clipboard-item:active {
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
}
// cool gradient background from amberol
@@ -386,4 +386,4 @@
// transition-property: background;
// transition-duration: 250ms;
// transition-timing-function: ease;
// }
// }

32
desktops/hyprland/ags/scss/main.scss
View File

@@ -1,28 +1,28 @@
// Reset
* {
all: unset;
all: unset;
}
// Colors
@import './material'; // Material colors
@import './colors'; // Global color definitions. Uses material colors as base.
@import './lib'; // Global mixins and functions
@import './common'; // Context menu n stuff
@import "./material"; // Material colors
@import "./colors"; // Global color definitions. Uses material colors as base.
@import "./lib"; // Global mixins and functions
@import "./common"; // Context menu n stuff
// Components
@import './bar';
@import './cheatsheet';
@import './sidebars';
@import './osd';
@import './overview';
@import './osk';
@import './session';
@import './notifications';
@import "./bar";
@import "./cheatsheet";
@import "./sidebars";
@import "./osd";
@import "./overview";
@import "./osk";
@import "./session";
@import "./notifications";
// Classes for interaction
.growingRadial {
transition: 300ms cubic-bezier(0.2, 0.0, 0, 1.0);
transition: 300ms cubic-bezier(0.2, 0, 0, 1);
}
.fadingRadial {
transition: 50ms cubic-bezier(0.2, 0.0, 0, 1.0);
}
transition: 50ms cubic-bezier(0.2, 0, 0, 1);
}

44
desktops/hyprland/ags/scss/scss.js
View File

@@ -1,30 +1,34 @@
const { App, Service, Utils } = ags;
const { execAsync, CONFIG_DIR } = Utils;
const {App, Service, Utils} = ags
const {execAsync, CONFIG_DIR} = Utils
async function setupScss() {
try {
await execAsync(['sassc', `${CONFIG_DIR}/scss/main.scss`, `${CONFIG_DIR}/style.css`]);
App.resetCss();
App.applyCss(`${CONFIG_DIR}/style.css`);
} catch (error) {
print(error);
}
try {
await execAsync(["sassc", `${CONFIG_DIR}/scss/main.scss`, `${CONFIG_DIR}/style.css`])
App.resetCss()
App.applyCss(`${CONFIG_DIR}/style.css`)
} catch (error) {
print(error)
}
}
class ThemeService extends Service {
static { Service.register(this); }
static {
Service.register(this)
}
constructor() {
super();
this.setup();
}
constructor() {
super()
this.setup()
}
setup() {
setupScss();
}
setup() {
setupScss()
}
}
var Theme = class Theme {
static { globalThis['Theme'] = this; }
static instance = new ThemeService();
};
static {
globalThis["Theme"] = this
}
static instance = new ThemeService()
}