mirror of
https://github.com/Theaninova/TheaninovOS.git
synced 2026-04-22 20:49:07 +00:00
feat: update ags
This commit is contained in:
@@ -1,468 +0,0 @@
|
||||
// Made to be pixel-perfect with 11pt font size
|
||||
// 1rem = 11pt = 14.6666666667px
|
||||
|
||||
// Init
|
||||
$black: black;
|
||||
$white: white;
|
||||
$notchSecondaryContainer: $secondaryContainer;
|
||||
$notchOnSecondaryContainer: $onSecondaryContainer;
|
||||
$notchPrimary: $primary;
|
||||
$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;
|
||||
}
|
||||
|
||||
.bar-bg {
|
||||
background-color: $t_background;
|
||||
min-height: 2.727rem;
|
||||
}
|
||||
|
||||
.bar-sidespace {
|
||||
min-width: 1.5rem;
|
||||
}
|
||||
|
||||
.bar-group-margin {
|
||||
padding: 0.2rem;
|
||||
}
|
||||
|
||||
.bar-group {
|
||||
// @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
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
.bar-group-pad {
|
||||
padding: 0rem 1.023rem;
|
||||
}
|
||||
|
||||
.bar-group-pad-less {
|
||||
padding: 0rem 0.681rem;
|
||||
}
|
||||
|
||||
.bar-group-pad-system {
|
||||
padding-left: 1.023rem;
|
||||
padding-right: 0.547rem;
|
||||
}
|
||||
|
||||
.bar-group-pad-music {
|
||||
padding-right: 1.023rem;
|
||||
// padding-left: 0.273rem;
|
||||
}
|
||||
|
||||
.bar-group-pad-left {
|
||||
padding-left: 1.364rem;
|
||||
padding-right: 0.681rem;
|
||||
}
|
||||
|
||||
.bar-group-pad-right {
|
||||
padding-left: 0.681rem;
|
||||
padding-right: 1.364rem;
|
||||
}
|
||||
|
||||
.bar-group-pad-leftonly {
|
||||
padding-left: 0.681rem;
|
||||
}
|
||||
|
||||
.bar-group-pad-rightonly {
|
||||
padding-right: 0.681rem;
|
||||
}
|
||||
|
||||
.bar-group-standalone {
|
||||
border-radius: 1.364rem;
|
||||
-gtk-outline-radius: 1.364rem;
|
||||
}
|
||||
|
||||
.bar-group-round {
|
||||
border-radius: 10rem;
|
||||
-gtk-outline-radius: 10rem;
|
||||
}
|
||||
|
||||
.bar-group-middle {
|
||||
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;
|
||||
}
|
||||
|
||||
.bar-group-right {
|
||||
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;
|
||||
}
|
||||
|
||||
.bar-clock {
|
||||
@include titlefont;
|
||||
font-size: 1.2727rem;
|
||||
color: $onBackground;
|
||||
}
|
||||
|
||||
.bar-date {
|
||||
@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;
|
||||
}
|
||||
|
||||
.bar-ws-active-box {
|
||||
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;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.bar-ws-occupied {
|
||||
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;
|
||||
|
||||
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;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.bar-ws-empty {
|
||||
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;
|
||||
}
|
||||
|
||||
.bar-sidemodule {
|
||||
min-width: 26rem;
|
||||
}
|
||||
|
||||
.bar-batt-low {
|
||||
background-color: $error;
|
||||
color: $errorContainer;
|
||||
}
|
||||
|
||||
.bar-batt-full {
|
||||
background-color: $successContainer;
|
||||
color: $onSuccessContainer;
|
||||
}
|
||||
|
||||
.bar-batt-prog-low {
|
||||
background-color: $error;
|
||||
color: $errorContainer;
|
||||
}
|
||||
|
||||
.bar-batt-prog-full {
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.bar-music-cover {
|
||||
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;
|
||||
}
|
||||
|
||||
.bar-music-extended-ctl-bg {
|
||||
border-radius: 1.364rem;
|
||||
background-color: rgba(30, 30, 30, 0.6);
|
||||
}
|
||||
|
||||
.bar-music-bottom-bg {
|
||||
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);
|
||||
}
|
||||
|
||||
.bar-music-extended-textbox {
|
||||
margin: 1.023rem;
|
||||
}
|
||||
|
||||
.bar-music-bottom-cover {
|
||||
border-radius: 10rem;
|
||||
}
|
||||
|
||||
.bar-music-hide-false {
|
||||
@include md3_decel;
|
||||
transition-duration: 100ms;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.bar-music-hide-true {
|
||||
@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;
|
||||
}
|
||||
|
||||
.bar-music-btn:hover {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.bar-prog-batt {
|
||||
min-height: 0.955rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-prog-batt-low {
|
||||
progress {
|
||||
background-color: $errorContainer;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-prog-batt-full {
|
||||
progress {
|
||||
background-color: $onSuccessContainer;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-batt-chargestate {
|
||||
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;
|
||||
}
|
||||
|
||||
.bar-batt-chargestate-low {
|
||||
background-color: $errorContainer;
|
||||
}
|
||||
|
||||
.bar-batt-chargestate-full {
|
||||
background-color: $onSuccessContainer;
|
||||
}
|
||||
|
||||
.bar-batt-percentage {
|
||||
font-size: 1rem;
|
||||
margin-top: -0.068rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.corner {
|
||||
background-color: $t_background;
|
||||
@include large-rounding;
|
||||
}
|
||||
|
||||
.corner-black {
|
||||
background-color: $black; // Hard code because fake screen corner
|
||||
@include large-rounding;
|
||||
}
|
||||
|
||||
.bar-topdesc {
|
||||
margin-top: -0.136rem;
|
||||
margin-bottom: -0.341rem;
|
||||
color: $subtext;
|
||||
}
|
||||
|
||||
.bar-space-button {
|
||||
padding: 0.341rem;
|
||||
}
|
||||
|
||||
.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:active>box:first-child {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
|
||||
.bar-space-button-leftmost {
|
||||
box {
|
||||
margin: 0rem 0.682rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-space-area-rightmost>box {
|
||||
padding-right: 2.386rem;
|
||||
}
|
||||
|
||||
.bar-systray {
|
||||
@include full-rounding;
|
||||
min-height: 1.909rem;
|
||||
min-width: 1.909rem;
|
||||
}
|
||||
|
||||
.bar-systray-item {
|
||||
@include full-rounding;
|
||||
min-width: 1.909rem;
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
.cheatsheet-bg {
|
||||
@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;
|
||||
}
|
||||
|
||||
.cheatsheet-key-notkey {
|
||||
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;
|
||||
}
|
||||
|
||||
.cheatsheet-closebtn:hover {
|
||||
background-color: $surfaceVariant;
|
||||
}
|
||||
|
||||
.cheatsheet-closebtn:active {
|
||||
background-color: mix($surfaceVariant, $onSurfaceVariant, 70%);
|
||||
}
|
||||
|
||||
.cheatsheet-category-title {
|
||||
@include titlefont;
|
||||
font-size: 1.705rem;
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
// Transparent version
|
||||
$transparentize_amount: 0.6;
|
||||
$transparentize_surface_amount_less: 0.3;
|
||||
$transparentize_surface_amount_less_less: 0.15;
|
||||
$transparentize_surface_amount: 0.7;
|
||||
$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;
|
||||
}
|
||||
|
||||
// Extended material
|
||||
$success: #4f6354;
|
||||
$onSuccess: #ffffff;
|
||||
$successContainer: #d1e8d5;
|
||||
$onSuccessContainer: #0c1f13;
|
||||
|
||||
@if $darkmode ==true {
|
||||
// Dark variant
|
||||
$success: #b5ccba;
|
||||
$onSuccess: #213528;
|
||||
$successContainer: #374b3e;
|
||||
$onSuccessContainer: #d1e9d6;
|
||||
}
|
||||
|
||||
// Transparent material
|
||||
$t_primary: transparentize($primary, $transparentize_amount);
|
||||
$t_onPrimary: transparentize($onPrimary, $transparentize_amount);
|
||||
$t_primaryContainer: transparentize($primaryContainer, $transparentize_amount);
|
||||
$t_onPrimaryContainer: transparentize($onPrimaryContainer, $transparentize_amount);
|
||||
$t_secondary: transparentize($secondary, $transparentize_amount);
|
||||
$t_onSecondary: transparentize($onSecondary, $transparentize_amount);
|
||||
$t_secondaryContainer: transparentize($secondaryContainer, $transparentize_amount);
|
||||
$l_t_secondaryContainer: transparentize($secondaryContainer, $transparentize_surface_amount_less);
|
||||
$t_onSecondaryContainer: transparentize($onSecondaryContainer, $transparentize_amount);
|
||||
$t_t_t_onSecondaryContainer: transparentize($onSecondaryContainer, 0.93);
|
||||
$t_tertiary: transparentize($tertiary, $transparentize_amount);
|
||||
$t_onTertiary: transparentize($onTertiary, $transparentize_amount);
|
||||
$t_tertiaryContainer: transparentize($tertiaryContainer, $transparentize_amount);
|
||||
$t_onTertiaryContainer: transparentize($onTertiaryContainer, $transparentize_amount);
|
||||
$t_error: transparentize($error, $transparentize_amount);
|
||||
$t_onError: transparentize($onError, $transparentize_amount);
|
||||
$t_errorContainer: transparentize($errorContainer, $transparentize_amount);
|
||||
$t_onErrorContainer: transparentize($onErrorContainer, $transparentize_amount);
|
||||
$t_colorbarbg: transparentize($colorbarbg, $transparentize_amount);
|
||||
$t_background: transparentize($background, $transparentize_amount);
|
||||
$t_t_background: transparentize($background, $transparentize_surface_amount_more);
|
||||
$t_onBackground: transparentize($onBackground, $transparentize_amount);
|
||||
$t_surface: transparentize($surface, $transparentize_surface_amount);
|
||||
$t_t_surface: transparentize($surface, $transparentize_surface_amount_more);
|
||||
$t_onSurface: transparentize($onSurface, $transparentize_surface_amount);
|
||||
$t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount);
|
||||
$t_onSurfaceVariant: transparentize($onSurfaceVariant, $transparentize_surface_amount);
|
||||
$t_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_more);
|
||||
$l_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_less);
|
||||
$l_l_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_less_less);
|
||||
$t_outline: transparentize($outline, $transparentize_amount);
|
||||
$t_shadow: transparentize($shadow, $transparentize_amount);
|
||||
$t_inverseSurface: transparentize($inverseSurface, $transparentize_amount);
|
||||
$t_inverseOnSurface: transparentize($inverseOnSurface, $transparentize_amount);
|
||||
$t_inversePrimary: transparentize($inversePrimary, $transparentize_amount);
|
||||
// Transparent material (extended)
|
||||
$t_success: transparentize($error, $transparentize_amount);
|
||||
$t_onSuccess: transparentize($onError, $transparentize_amount);
|
||||
$t_successContainer: transparentize($errorContainer, $transparentize_amount);
|
||||
$t_onSuccessContainer: transparentize($onErrorContainer, $transparentize_amount);
|
||||
|
||||
// Common stuff
|
||||
$hovercolor: mix($t_surface, $t_onSurface, 50%);
|
||||
$activecolor: mix($t_surface, $t_onSurface, 30%);
|
||||
$subtext: mix($onBackground, $background, 70%);
|
||||
$actiontext: mix($onBackground, $background, 85%);
|
||||
@@ -1,43 +0,0 @@
|
||||
*:focus {
|
||||
// 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;
|
||||
}
|
||||
|
||||
.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:hover {
|
||||
background-color: mix($surfaceVariant, $onSurfaceVariant, 90%);
|
||||
}
|
||||
|
||||
.separator-line {
|
||||
background-color: $surfaceVariant;
|
||||
min-width: 0.068rem;
|
||||
min-height: 0.068rem;
|
||||
}
|
||||
|
||||
tooltip {
|
||||
@include large-rounding;
|
||||
background-color: $surfaceVariant;
|
||||
color: $onSurfaceVariant;
|
||||
border: 1px solid $onSurfaceVariant;
|
||||
}
|
||||
@@ -1,696 +0,0 @@
|
||||
// Common colors
|
||||
$hovercolor: rgba(128, 128, 128, 0.3);
|
||||
$activecolor: rgba(128, 128, 128, 0.7);
|
||||
$rounding_small: 0.818rem;
|
||||
$rounding_mediumsmall: 0.955rem;
|
||||
$rounding_medium: 1.159rem;
|
||||
$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;
|
||||
}
|
||||
|
||||
.test-size {
|
||||
min-height: 3rem;
|
||||
min-width: 3rem;
|
||||
}
|
||||
|
||||
// Common rules
|
||||
@mixin small-rounding {
|
||||
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
|
||||
}
|
||||
|
||||
@mixin large-rounding {
|
||||
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;
|
||||
}
|
||||
|
||||
@mixin titlefont {
|
||||
// Geometric sans-serif
|
||||
font-family:
|
||||
'Noto Sans',
|
||||
'Gabarito',
|
||||
'Lexend',
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.txt-title {
|
||||
@include titlefont;
|
||||
font-size: 2.045rem;
|
||||
}
|
||||
|
||||
.txt-title-small {
|
||||
@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;
|
||||
}
|
||||
|
||||
@mixin icon-material {
|
||||
// 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;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
.techfont {
|
||||
@include techfont;
|
||||
}
|
||||
|
||||
@mixin subtext {
|
||||
color: $subtext;
|
||||
}
|
||||
|
||||
@mixin actiontext {
|
||||
color: $actiontext;
|
||||
}
|
||||
|
||||
@mixin elevation-safe {
|
||||
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;
|
||||
}
|
||||
|
||||
@mixin elevation2-margin {
|
||||
margin: $elevation2_margin;
|
||||
}
|
||||
|
||||
@mixin elevation2-padding {
|
||||
padding: $elevation2_margin;
|
||||
}
|
||||
|
||||
@mixin elevation3 {
|
||||
box-shadow: 0px 2px 5px $shadow;
|
||||
margin: 7px;
|
||||
}
|
||||
|
||||
@mixin md3_decel {
|
||||
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);
|
||||
}
|
||||
|
||||
@mixin md3_accel {
|
||||
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);
|
||||
}
|
||||
|
||||
@mixin fluent_decel {
|
||||
// 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);
|
||||
}
|
||||
|
||||
@mixin fluent_accel {
|
||||
transition: 150ms cubic-bezier(0.42, 0, 1, 1);
|
||||
}
|
||||
|
||||
@mixin noanim {
|
||||
transition: 0ms;
|
||||
}
|
||||
|
||||
@mixin anim-enter {
|
||||
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);
|
||||
}
|
||||
|
||||
@keyframes flyin-top {
|
||||
from {
|
||||
margin-top: -2.795rem;
|
||||
}
|
||||
|
||||
to {
|
||||
margin-top: 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flyin-bottom {
|
||||
from {
|
||||
margin-top: 4.841rem;
|
||||
margin-bottom: -4.841rem;
|
||||
}
|
||||
|
||||
to {
|
||||
margin-bottom: 0rem;
|
||||
margin-top: 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
@function tint($color, $percentage) {
|
||||
@return mix(rgb(245, 250, 255), $color, $percentage);
|
||||
}
|
||||
|
||||
@function shade($color, $percentage) {
|
||||
@return mix(rgb(0, 0, 0), $color, $percentage);
|
||||
}
|
||||
|
||||
.no-anim {
|
||||
@include noanim;
|
||||
}
|
||||
|
||||
.txt {
|
||||
color: $onBackground;
|
||||
}
|
||||
|
||||
.txt-shadow {
|
||||
text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.69);
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.txt-badonkers {
|
||||
@include mainfont;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.txt-tiddies {
|
||||
@include mainfont;
|
||||
font-size: 2.7273rem;
|
||||
}
|
||||
|
||||
.txt-hugeass {
|
||||
@include mainfont;
|
||||
font-size: 1.8182rem;
|
||||
}
|
||||
|
||||
.txt-larger {
|
||||
@include mainfont;
|
||||
font-size: 1.6363rem;
|
||||
}
|
||||
|
||||
.txt-large {
|
||||
//16pt
|
||||
@include mainfont;
|
||||
font-size: 1.4545rem;
|
||||
}
|
||||
|
||||
.txt-norm {
|
||||
//14pt
|
||||
@include mainfont;
|
||||
font-size: 1.2727rem;
|
||||
}
|
||||
|
||||
.txt-small {
|
||||
//12pt
|
||||
@include mainfont;
|
||||
font-size: 1.0909rem;
|
||||
}
|
||||
|
||||
.txt-smallie {
|
||||
//11pt
|
||||
@include mainfont;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.txt-smaller {
|
||||
//10pt
|
||||
@include mainfont;
|
||||
font-size: 0.9091rem;
|
||||
}
|
||||
|
||||
.txt-smaller-offset {
|
||||
margin-top: -0.136rem;
|
||||
}
|
||||
|
||||
.txt-tiny {
|
||||
@include mainfont;
|
||||
font-size: 0.7273rem;
|
||||
}
|
||||
|
||||
.txt-subtext {
|
||||
@include subtext;
|
||||
}
|
||||
|
||||
.txt-action {
|
||||
@include actiontext;
|
||||
}
|
||||
|
||||
.txt-semibold {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.txt-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.titlefont {
|
||||
@include titlefont;
|
||||
}
|
||||
|
||||
.mainfont {
|
||||
@include mainfont;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
$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:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v-15>scrolledwindow {
|
||||
margin-bottom: 1.023rem;
|
||||
}
|
||||
|
||||
.spacing-v-15>scrolledwindow:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v-15>revealer {
|
||||
margin-bottom: 1.023rem;
|
||||
}
|
||||
|
||||
.spacing-v-15>revealer:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v-15>label {
|
||||
margin-bottom: 1.023rem;
|
||||
}
|
||||
|
||||
.spacing-v-15>label:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-15>box {
|
||||
margin-right: 1.023rem;
|
||||
}
|
||||
|
||||
.spacing-h-15>box:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-15>stack {
|
||||
margin-right: 1.023rem;
|
||||
}
|
||||
|
||||
.spacing-h-15>stack:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-15>label {
|
||||
margin-right: 1.023rem;
|
||||
}
|
||||
|
||||
.spacing-h-15>label:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-15>button {
|
||||
margin-right: 1.023rem;
|
||||
}
|
||||
|
||||
.spacing-h-15>button:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v-5>box {
|
||||
margin-bottom: 0.341rem;
|
||||
}
|
||||
|
||||
.spacing-v-5>box:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v-5>label {
|
||||
margin-bottom: 0.341rem;
|
||||
}
|
||||
|
||||
.spacing-v-5>label:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v-5>button {
|
||||
margin-bottom: 0.341rem;
|
||||
}
|
||||
|
||||
.spacing-v-5>button:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v-5-revealer>revealer>box {
|
||||
margin-bottom: 0.341rem;
|
||||
}
|
||||
|
||||
.spacing-v-5-revealer>revealer:last-child>box {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-5>box {
|
||||
margin-right: 0.341rem;
|
||||
}
|
||||
|
||||
.spacing-h-5>box:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-5>button {
|
||||
margin-right: 0.341rem;
|
||||
}
|
||||
|
||||
.spacing-h-5>button:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-5>label {
|
||||
margin-right: 0.341rem;
|
||||
}
|
||||
|
||||
.spacing-h-5>label:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-5>widget>box {
|
||||
margin-right: 0.341rem;
|
||||
}
|
||||
|
||||
.spacing-h-5>widget:last-child>box {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-5>progressbar {
|
||||
margin-right: 0.341rem;
|
||||
}
|
||||
|
||||
.spacing-h-5>progressbar:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-5>scrolledwindow {
|
||||
margin-right: 0.341rem;
|
||||
}
|
||||
|
||||
.spacing-h-5>scrolledwindow:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-5>scrollbar {
|
||||
margin-right: 0.341rem;
|
||||
}
|
||||
|
||||
.spacing-h-5>scrollbar:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v-minus5>box {
|
||||
margin-bottom: -0.341rem;
|
||||
}
|
||||
|
||||
.spacing-v-minus5>box:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v-minus5>label {
|
||||
margin-bottom: -0.341rem;
|
||||
}
|
||||
|
||||
.spacing-v-minus5>label:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-10>box {
|
||||
margin-right: 0.682rem;
|
||||
}
|
||||
|
||||
.spacing-h-10>box:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-10>flowboxchild>button {
|
||||
margin-right: 0.682rem;
|
||||
}
|
||||
|
||||
.spacing-h-10>flowboxchild:last-child>button {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-10>label {
|
||||
margin-right: 0.682rem;
|
||||
}
|
||||
|
||||
.spacing-h-10>label:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-10>revealer {
|
||||
margin-right: 0.682rem;
|
||||
}
|
||||
|
||||
.spacing-h-10>revealer:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-10>overlay {
|
||||
margin-right: 0.682rem;
|
||||
}
|
||||
|
||||
.spacing-h-10>overlay:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-10>button {
|
||||
margin-right: 0.682rem;
|
||||
}
|
||||
|
||||
.spacing-h-10>button:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-10>label {
|
||||
margin-right: 0.682rem;
|
||||
}
|
||||
|
||||
.spacing-h-10>label:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-10>widget {
|
||||
margin-right: 0.682rem;
|
||||
}
|
||||
|
||||
.spacing-h-10>widget:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-10>stack {
|
||||
margin-right: 0.682rem;
|
||||
}
|
||||
|
||||
.spacing-h-10>stack:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v-10>box {
|
||||
margin-bottom: 0.682rem;
|
||||
}
|
||||
|
||||
.spacing-v-10>box:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v-10>button {
|
||||
margin-bottom: 0.682rem;
|
||||
}
|
||||
|
||||
.spacing-v-10>button:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.anim-enter {
|
||||
@include anim-enter;
|
||||
}
|
||||
|
||||
.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%);
|
||||
}
|
||||
|
||||
@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%);
|
||||
}
|
||||
|
||||
@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%);
|
||||
}
|
||||
|
||||
@mixin elevation-border-transparent {
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
|
||||
@mixin button-minsize {
|
||||
min-width: 2.727rem;
|
||||
min-height: 2.727rem;
|
||||
}
|
||||
|
||||
.button-minsize {
|
||||
@include button-minsize;
|
||||
}
|
||||
|
||||
@mixin group-padding {
|
||||
padding: 0.341rem;
|
||||
}
|
||||
|
||||
.group-padding {
|
||||
@include group-padding;
|
||||
}
|
||||
|
||||
.margin-right-5 {
|
||||
margin-right: 0.341rem;
|
||||
}
|
||||
|
||||
.margin-left-5 {
|
||||
margin-left: 0.341rem;
|
||||
}
|
||||
|
||||
.margin-top-5 {
|
||||
margin-top: 0.341rem;
|
||||
}
|
||||
|
||||
.margin-bottom-5 {
|
||||
margin-bottom: 0.341rem;
|
||||
}
|
||||
|
||||
.margin-right-10 {
|
||||
margin-right: 0.682rem;
|
||||
}
|
||||
|
||||
.margin-left-10 {
|
||||
margin-left: 0.682rem;
|
||||
}
|
||||
|
||||
.margin-top-10 {
|
||||
margin-top: 0.682rem;
|
||||
}
|
||||
|
||||
.margin-bottom-10 {
|
||||
margin-bottom: 0.682rem;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
opacity: 0;
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.spacing-h--5>box {
|
||||
margin-right: -0.341rem;
|
||||
}
|
||||
|
||||
.spacing-h--5>box:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v--5>box {
|
||||
margin-bottom: -0.341rem;
|
||||
}
|
||||
|
||||
.spacing-v--5>box:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h--20>box {
|
||||
margin-left: -1.364rem;
|
||||
}
|
||||
|
||||
.spacing-h--20>box:first-child {
|
||||
margin-left: 0rem;
|
||||
}
|
||||
|
||||
$white: white;
|
||||
$black: black;
|
||||
|
||||
.instant {
|
||||
transition: 0ms;
|
||||
}
|
||||
|
||||
.md3_decel {
|
||||
@include md3_decel;
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
$darkmode: true;
|
||||
$primary: #50d8ec;
|
||||
$onPrimary: #00363d;
|
||||
$primaryContainer: #004f58;
|
||||
$onPrimaryContainer: #99f0ff;
|
||||
$secondary: #b1cbd0;
|
||||
$onSecondary: #1c3438;
|
||||
$secondaryContainer: #334b4f;
|
||||
$onSecondaryContainer: #cde7ec;
|
||||
$tertiary: #bbc6ea;
|
||||
$onTertiary: #24304d;
|
||||
$tertiaryContainer: #3b4665;
|
||||
$onTertiaryContainer: #dae2ff;
|
||||
$error: #ba1b1b;
|
||||
$onError: #ffffff;
|
||||
$errorContainer: #ffdad4;
|
||||
$onErrorContainer: #410001;
|
||||
$colorbarbg: #191c1d;
|
||||
$background: #191c1d;
|
||||
$onBackground: #e1e3e3;
|
||||
$surface: #191c1d;
|
||||
$onSurface: #e1e3e3;
|
||||
$surfaceVariant: #3f484a;
|
||||
$onSurfaceVariant: #bfc8ca;
|
||||
$outline: #899294;
|
||||
$shadow: #000000;
|
||||
$inverseOnSurface: #2d3132;
|
||||
$inverseSurface: #eff1f1;
|
||||
$inversePrimary: #4fd8ea;
|
||||
@@ -1,126 +0,0 @@
|
||||
$notif_surface: $t_background;
|
||||
|
||||
@mixin notif-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;
|
||||
}
|
||||
|
||||
.notif-normal {
|
||||
@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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.popup-notif-critical {
|
||||
@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%);
|
||||
}
|
||||
|
||||
.notif-body-normal {
|
||||
color: mix($onSurfaceVariant, $surfaceVariant, 67%);
|
||||
}
|
||||
|
||||
.notif-body-critical {
|
||||
color: mix($onError, $error, 67%);
|
||||
}
|
||||
|
||||
.notif-icon {
|
||||
@include full-rounding;
|
||||
min-width: 3.409rem;
|
||||
min-height: 3.409rem;
|
||||
}
|
||||
|
||||
.notif-icon-material {
|
||||
background-color: $t_secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.notif-icon-material-low {
|
||||
background-color: $t_secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.notif-icon-material-normal {
|
||||
background-color: $t_secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.notif-icon-material-critical {
|
||||
background-color: $t_errorContainer;
|
||||
color: $onErrorContainer;
|
||||
}
|
||||
|
||||
.notif-close-btn {
|
||||
@include notif-rounding;
|
||||
padding: 0rem 0.136rem;
|
||||
}
|
||||
|
||||
.notif-close-btn:hover {
|
||||
background: $hovercolor;
|
||||
}
|
||||
|
||||
.notif-close-btn:active {
|
||||
background: $activecolor;
|
||||
}
|
||||
|
||||
.notif-closeall-btn {
|
||||
@include notif-rounding;
|
||||
padding: 0.341rem 0.341rem;
|
||||
}
|
||||
|
||||
.notif-closeall-btn:hover {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.notif-closeall-btn:active {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
|
||||
.osd-notif {
|
||||
@include notif-rounding;
|
||||
background-color: transparentize($background, $transparentize_surface_amount_subtract_surface);
|
||||
min-width: 30.682rem;
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
.osd-bg {
|
||||
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;
|
||||
}
|
||||
|
||||
.osd-progress {
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.osd-icon {
|
||||
color: $onPrimaryContainer;
|
||||
}
|
||||
|
||||
.osd-label {
|
||||
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;
|
||||
}
|
||||
|
||||
.osd-notifs {
|
||||
padding-top: 0.313rem;
|
||||
}
|
||||
@@ -1,97 +0,0 @@
|
||||
$osk_key_height: 2.5rem;
|
||||
$osk_key_width: 2.5rem;
|
||||
$osk_key_padding: 0.188rem;
|
||||
$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;
|
||||
}
|
||||
|
||||
.osk-show {
|
||||
@include md3_decel_fast;
|
||||
}
|
||||
|
||||
.osk-hide {
|
||||
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;
|
||||
}
|
||||
|
||||
.osk-key:hover {
|
||||
background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 90%);
|
||||
}
|
||||
|
||||
.osk-key:active {
|
||||
background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 70%);
|
||||
font-size: $osk_key_fontsize;
|
||||
}
|
||||
|
||||
.osk-key-active {
|
||||
background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 70%);
|
||||
}
|
||||
|
||||
.osk-key-normal {
|
||||
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;
|
||||
}
|
||||
|
||||
.osk-key-tab {
|
||||
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;
|
||||
}
|
||||
|
||||
.osk-key-shift {
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.osk-control-button:hover {
|
||||
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;
|
||||
}
|
||||
@@ -1,130 +0,0 @@
|
||||
.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;
|
||||
|
||||
selection {
|
||||
background-color: $secondary;
|
||||
color: $onSecondary;
|
||||
}
|
||||
caret-color: transparent;
|
||||
}
|
||||
|
||||
.overview-search-box-extended {
|
||||
min-width: 25.909rem;
|
||||
caret-color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.overview-search-prompt {
|
||||
color: $subtext;
|
||||
}
|
||||
|
||||
.overview-search-icon {
|
||||
margin: 0rem 1.023rem;
|
||||
}
|
||||
|
||||
.overview-search-prompt-box {
|
||||
margin-left: -18.545rem;
|
||||
margin-right: $elevation2_margin + 1px;
|
||||
}
|
||||
|
||||
.overview-search-icon-box {
|
||||
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;
|
||||
}
|
||||
|
||||
.overview-search-results-icon {
|
||||
margin: 0rem 0.682rem;
|
||||
font-size: 2.386rem;
|
||||
}
|
||||
.overview-search-results-txt {
|
||||
margin-right: 0.682rem;
|
||||
}
|
||||
|
||||
.overview-search-results-txt-cmd {
|
||||
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;
|
||||
|
||||
caret-color: transparent;
|
||||
}
|
||||
|
||||
.overview-search-result-btn:focus,
|
||||
.overview-search-result-btn:hover {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.overview-search-result-btn:active {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
|
||||
.overview-tasks {
|
||||
@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%);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.overview-tasks-window:hover {
|
||||
background-color: mix($l_t_secondaryContainer, $primary, 95%);
|
||||
}
|
||||
|
||||
.overview-tasks-window:focus {
|
||||
background-color: mix($l_t_secondaryContainer, $primary, 95%);
|
||||
}
|
||||
|
||||
.overview-tasks-window:active {
|
||||
background-color: mix($l_t_secondaryContainer, $primary, 90%);
|
||||
}
|
||||
|
||||
.overview-tasks-window-selected {
|
||||
background-color: mix($l_t_secondaryContainer, $primary, 90%);
|
||||
}
|
||||
|
||||
.overview-tasks-window-dragging {
|
||||
opacity: 0.2;
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
.session-bg {
|
||||
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;
|
||||
}
|
||||
|
||||
.session-button-focused {
|
||||
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;
|
||||
}
|
||||
|
||||
.session-button-cancel {
|
||||
@include large-rounding;
|
||||
min-width: 8.182rem;
|
||||
min-height: 5.455rem;
|
||||
background-color: $surfaceVariant;
|
||||
color: $onSurfaceVariant;
|
||||
font-size: 3rem;
|
||||
}
|
||||
@@ -1,389 +0,0 @@
|
||||
// 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;
|
||||
}
|
||||
|
||||
.sideright-show {
|
||||
@include md3_decel;
|
||||
}
|
||||
|
||||
.sideright-hide {
|
||||
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;
|
||||
}
|
||||
|
||||
.sideleft-show {
|
||||
@include md3_decel;
|
||||
}
|
||||
|
||||
.sideleft-hide {
|
||||
margin-left: -30.682rem;
|
||||
// opacity: 0;
|
||||
@include md3_accel;
|
||||
}
|
||||
|
||||
.sidebar-group {
|
||||
@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;
|
||||
}
|
||||
|
||||
.sidebar-group-invisible {
|
||||
@include group-padding;
|
||||
}
|
||||
|
||||
.sidebar-group-invisible-morehorizpad {
|
||||
padding: 0.341rem 0.682rem;
|
||||
}
|
||||
|
||||
.sidebar-iconbutton {
|
||||
@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%);
|
||||
}
|
||||
|
||||
.sidebar-iconbutton:active {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%);
|
||||
}
|
||||
|
||||
.sidebar-button {
|
||||
@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;
|
||||
}
|
||||
|
||||
.sidebar-button:hover {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
|
||||
}
|
||||
|
||||
.sidebar-button:active {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%);
|
||||
}
|
||||
|
||||
.sidebar-button-nopad:hover {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
|
||||
}
|
||||
|
||||
.sidebar-button-nopad:active {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%);
|
||||
}
|
||||
|
||||
.sidebar-button-left {
|
||||
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;
|
||||
}
|
||||
|
||||
.sidebar-button-alone {
|
||||
@include small-rounding;
|
||||
}
|
||||
|
||||
.sidebar-button-alone-normal {
|
||||
@include small-rounding;
|
||||
}
|
||||
|
||||
.sidebar-button-active {
|
||||
background-color: $primary;
|
||||
color: $onPrimary;
|
||||
}
|
||||
|
||||
.sidebar-button-active:hover {
|
||||
background-color: mix($primary, $hovercolor, 90%);
|
||||
}
|
||||
|
||||
.sidebar-button-active:active {
|
||||
background-color: mix($primary, $hovercolor, 70%);
|
||||
}
|
||||
|
||||
.sidebar-buttons-separator {
|
||||
min-width: 0.068rem;
|
||||
min-height: 0.068rem;
|
||||
background-color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.sidebar-navrail {
|
||||
// background-color: $t_surface;
|
||||
padding: 0rem $rounding_medium;
|
||||
}
|
||||
|
||||
.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: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:hover>box>label:first-child {
|
||||
background-color: mix($secondaryContainer, $hovercolor, 90%);
|
||||
color: mix($onSecondaryContainer, $hovercolor, 90%);
|
||||
}
|
||||
|
||||
.sidebar-sysinfo-grouppad {
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
// .sidebar-sysinfo-txt {
|
||||
// font-size: 1.0909rem;
|
||||
// @include techfont;
|
||||
// }
|
||||
|
||||
.sidebar-viewport {
|
||||
@include small-rounding;
|
||||
}
|
||||
|
||||
.sidebar-scrollbar {
|
||||
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:hover {
|
||||
background-color: mix($t_onSurfaceVariant, $onSurfaceVariant, 80%);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.sidebar-calendar-btn:hover {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.sidebar-calendar-btn:active {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
|
||||
.sidebar-calendar-btn-txt {
|
||||
margin-left: -10.341rem;
|
||||
margin-right: -10.341rem;
|
||||
}
|
||||
|
||||
.sidebar-calendar-btn-today {
|
||||
background-color: $primary;
|
||||
color: $onPrimary;
|
||||
}
|
||||
|
||||
.sidebar-calendar-btn-today:hover {
|
||||
background-color: mix($primary, $hovercolor, 90%);
|
||||
}
|
||||
|
||||
.sidebar-calendar-btn-today:active {
|
||||
background-color: mix($primary, $hovercolor, 70%);
|
||||
}
|
||||
|
||||
.sidebar-calendar-btn-othermonth {
|
||||
color: mix($onSurface, $surface, 50%);
|
||||
}
|
||||
|
||||
.sidebar-calendar-header {
|
||||
margin: 0.341rem;
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthyear-btn {
|
||||
@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%);
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthyear-btn:active {
|
||||
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;
|
||||
}
|
||||
|
||||
.sidebar-calendar-monthshift-btn:hover {
|
||||
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%);
|
||||
}
|
||||
|
||||
.sidebar-todo-selector-tab {
|
||||
@include small-rounding;
|
||||
transition: 0ms;
|
||||
min-height: 2.5rem;
|
||||
color: $onSurface;
|
||||
}
|
||||
|
||||
.sidebar-todo-selector-tab:hover {
|
||||
background-color: mix($t_surfaceVariant, $onSurfaceVariant, 90%);
|
||||
}
|
||||
|
||||
.sidebar-todo-selector-tab:active {
|
||||
background-color: mix($surfaceVariant, $onSurfaceVariant, 75%);
|
||||
}
|
||||
|
||||
.sidebar-todo-selector-tab-active>box>label {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.sidebar-todo-selector-highlight-offset {
|
||||
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;
|
||||
}
|
||||
|
||||
.sidebar-todo-item-action {
|
||||
border-radius: 9999px;
|
||||
min-width: 1.705rem;
|
||||
min-height: 1.705rem;
|
||||
}
|
||||
|
||||
.sidebar-todo-item-action:hover {
|
||||
background-color: mix($t_surface, $t_onSurface, 95%);
|
||||
}
|
||||
|
||||
.sidebar-todo-item-action:active {
|
||||
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;
|
||||
}
|
||||
|
||||
.sidebar-clipboard-item:hover {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 90%);
|
||||
}
|
||||
|
||||
.sidebar-clipboard-item:active {
|
||||
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%);
|
||||
}
|
||||
|
||||
// cool gradient background from amberol
|
||||
// .main-window {
|
||||
// background: linear-gradient(127deg, alpha(@background_color_0, .55), alpha(@background_color_0, 0) 70.71%),
|
||||
// linear-gradient(217deg, alpha(@background_color_1, .55), alpha(@background_color_1, 0) 70.71%),
|
||||
// linear-gradient(336deg, alpha(@background_color_2, .55), alpha(@background_color_2, 0) 70.71%);
|
||||
// transition-property: background;
|
||||
// transition-duration: 250ms;
|
||||
// transition-timing-function: ease;
|
||||
// }
|
||||
45
home/desktops/hyprland/ags/scss/common/a11y-button.scss
Normal file
45
home/desktops/hyprland/ags/scss/common/a11y-button.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
@import "./button";
|
||||
|
||||
@mixin accs-button($flat: false, $reactive: true) {
|
||||
@include button($flat: true, $reactive: false, $focusable: false);
|
||||
color: $fg-color;
|
||||
|
||||
> * {
|
||||
border-radius: $radii;
|
||||
transition: $transition;
|
||||
|
||||
@if $flat {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
} @else {
|
||||
background-color: $widget-bg;
|
||||
box-shadow: inset 0 0 0 $border-width $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
@if $reactive {
|
||||
&:focus > *,
|
||||
&.focused > * {
|
||||
@include button-focus;
|
||||
}
|
||||
|
||||
&:hover > * {
|
||||
@include button-hover;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active,
|
||||
&.on,
|
||||
&:checked {
|
||||
> * {
|
||||
@include button-active;
|
||||
}
|
||||
|
||||
&:hover > * {
|
||||
box-shadow:
|
||||
inset 0 0 0 $border-width $border-color,
|
||||
inset 0 0 0 99px $hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
69
home/desktops/hyprland/ags/scss/common/button.scss
Normal file
69
home/desktops/hyprland/ags/scss/common/button.scss
Normal file
@@ -0,0 +1,69 @@
|
||||
@mixin button-focus() {
|
||||
box-shadow: inset 0 0 0 $border-width $accent;
|
||||
background-color: $hover;
|
||||
color: $hover-fg;
|
||||
}
|
||||
|
||||
@mixin button-hover() {
|
||||
box-shadow: inset 0 0 0 $border-width $border-color;
|
||||
background-color: $hover;
|
||||
color: $hover-fg;
|
||||
}
|
||||
|
||||
@mixin button-active() {
|
||||
box-shadow: inset 0 0 0 $border-width $border-color;
|
||||
background-image: $active-gradient;
|
||||
background-color: $accent;
|
||||
color: $accent-fg;
|
||||
}
|
||||
|
||||
@mixin button-disabled() {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
color: transparentize($fg-color, 0.7);
|
||||
}
|
||||
|
||||
@mixin button($flat: false, $reactive: true, $radii: $radii, $focusable: true) {
|
||||
all: unset;
|
||||
transition: $transition;
|
||||
border-radius: $radii;
|
||||
color: $fg-color;
|
||||
|
||||
@if $flat {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
} @else {
|
||||
background-color: $widget-bg;
|
||||
box-shadow: inset 0 0 0 $border-width $border-color;
|
||||
}
|
||||
|
||||
@if $reactive {
|
||||
@if $focusable {
|
||||
&:focus {
|
||||
@include button-focus;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include button-hover;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.on,
|
||||
&.active,
|
||||
&:checked {
|
||||
@include button-active;
|
||||
|
||||
&:hover {
|
||||
box-shadow:
|
||||
inset 0 0 0 $border-width $border-color,
|
||||
inset 0 0 0 99px $hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
@include button-disabled;
|
||||
}
|
||||
}
|
||||
12
home/desktops/hyprland/ags/scss/common/floating-widget.scss
Normal file
12
home/desktops/hyprland/ags/scss/common/floating-widget.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
@mixin floating-widget {
|
||||
@if $drop-shadow {
|
||||
box-shadow: 0 0 5px 0 $shadow;
|
||||
}
|
||||
|
||||
margin: max($spacing, 8px);
|
||||
border: $border-width solid $popover-border-color;
|
||||
background-color: $bg-color;
|
||||
color: $fg-color;
|
||||
border-radius: $popover-radius;
|
||||
padding: $popover-padding;
|
||||
}
|
||||
15
home/desktops/hyprland/ags/scss/common/hidden.scss
Normal file
15
home/desktops/hyprland/ags/scss/common/hidden.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
@mixin hidden {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
-gtk-icon-transform: scale(0);
|
||||
|
||||
* {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
-gtk-icon-transform: scale(0);
|
||||
}
|
||||
}
|
||||
29
home/desktops/hyprland/ags/scss/common/menu.scss
Normal file
29
home/desktops/hyprland/ags/scss/common/menu.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
window.popup {
|
||||
> * {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
menu {
|
||||
border-radius: $popover-radius;
|
||||
background-color: $bg-color;
|
||||
padding: $popover-padding;
|
||||
border: $border-width solid $popover-border-color;
|
||||
|
||||
separator {
|
||||
background-color: $border-color;
|
||||
}
|
||||
|
||||
menuitem {
|
||||
@include button;
|
||||
padding: $spacing/2;
|
||||
margin: $spacing/2 0;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
28
home/desktops/hyprland/ags/scss/common/scrollable.scss
Normal file
28
home/desktops/hyprland/ags/scss/common/scrollable.scss
Normal file
@@ -0,0 +1,28 @@
|
||||
@mixin scrollable {
|
||||
scrollbar,
|
||||
scrollbar * {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
scrollbar.vertical {
|
||||
transition: $transition;
|
||||
background-color: transparentize($bg-color, 0.7);
|
||||
|
||||
&:hover {
|
||||
background-color: transparentize($bg-color, 0.3);
|
||||
|
||||
slider {
|
||||
background-color: transparentize($fg-color, 0.3);
|
||||
min-width: 0.6em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
scrollbar.vertical slider {
|
||||
background-color: transparentize($fg-color, 0.5);
|
||||
border-radius: $radii;
|
||||
min-width: 0.4em;
|
||||
min-height: 2em;
|
||||
transition: $transition;
|
||||
}
|
||||
}
|
||||
79
home/desktops/hyprland/ags/scss/common/slider.scss
Normal file
79
home/desktops/hyprland/ags/scss/common/slider.scss
Normal file
@@ -0,0 +1,79 @@
|
||||
@import "./unset";
|
||||
|
||||
@mixin slider(
|
||||
$width: 0.7em,
|
||||
$slider-width: 0.5em,
|
||||
$gradient: $active-gradient,
|
||||
$slider: true,
|
||||
$focusable: true,
|
||||
$radii: $radii
|
||||
) {
|
||||
@include unset($rec: true);
|
||||
|
||||
trough {
|
||||
transition: $transition;
|
||||
border-radius: $radii;
|
||||
border: $border;
|
||||
background-color: $widget-bg;
|
||||
min-height: $width;
|
||||
min-width: $width;
|
||||
|
||||
highlight,
|
||||
progress {
|
||||
border-radius: max($radii - $border-width, 0);
|
||||
background-image: $gradient;
|
||||
min-height: $width;
|
||||
min-width: $width;
|
||||
}
|
||||
}
|
||||
|
||||
slider {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
border: $border-width solid transparent;
|
||||
transition: $transition;
|
||||
border-radius: $radii;
|
||||
min-height: $width;
|
||||
min-width: $width;
|
||||
margin: -$slider-width;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
trough {
|
||||
background-color: $hover;
|
||||
}
|
||||
|
||||
slider {
|
||||
@if $slider {
|
||||
background-color: $fg-color;
|
||||
border-color: $border-color;
|
||||
|
||||
@if $drop-shadow {
|
||||
box-shadow: 0 0 3px 0 $shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
highlight,
|
||||
progress {
|
||||
background-color: transparentize($fg-color, 0.4);
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
@if $focusable {
|
||||
trough:focus {
|
||||
background-color: $hover;
|
||||
box-shadow: inset 0 0 0 $border-width $accent;
|
||||
|
||||
slider {
|
||||
@if $slider {
|
||||
background-color: $fg-color;
|
||||
box-shadow: inset 0 0 0 $border-width $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
45
home/desktops/hyprland/ags/scss/common/spacing.scss
Normal file
45
home/desktops/hyprland/ags/scss/common/spacing.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
@mixin spacing($multiplier: 1, $spacing: $spacing, $rec: false) {
|
||||
&.horizontal > * {
|
||||
margin: 0 $spacing * $multiplier / 2;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical > * {
|
||||
margin: $spacing * $multiplier / 2 0;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@if $rec {
|
||||
box {
|
||||
&.horizontal > * {
|
||||
margin: 0 $spacing * $multiplier / 2;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical > * {
|
||||
margin: $spacing * $multiplier / 2 0;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
16
home/desktops/hyprland/ags/scss/common/switch.scss
Normal file
16
home/desktops/hyprland/ags/scss/common/switch.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
@import "./button";
|
||||
|
||||
@mixin switch {
|
||||
@include button;
|
||||
|
||||
slider {
|
||||
background-color: $accent-fg;
|
||||
border-radius: $radii;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
image {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
13
home/desktops/hyprland/ags/scss/common/text-border.scss
Normal file
13
home/desktops/hyprland/ags/scss/common/text-border.scss
Normal file
@@ -0,0 +1,13 @@
|
||||
@mixin text-border {
|
||||
text-shadow:
|
||||
-1 * $border-width -1 * $border-width 0 $border-color,
|
||||
$border-width $border-width 0 $border-color,
|
||||
-1 * $border-width $border-width 0 $border-color,
|
||||
$border-width -1 * $border-width 0 $border-color;
|
||||
|
||||
-gtk-icon-shadow:
|
||||
-1 * $border-width -1 * $border-width 0 $border-color,
|
||||
$border-width $border-width 0 $border-color,
|
||||
-1 * $border-width $border-width 0 $border-color,
|
||||
$border-width -1 * $border-width 0 $border-color;
|
||||
}
|
||||
18
home/desktops/hyprland/ags/scss/common/tooltip.scss
Normal file
18
home/desktops/hyprland/ags/scss/common/tooltip.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
tooltip {
|
||||
* {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
|
||||
> * > * {
|
||||
background-color: $bg-color;
|
||||
border-radius: $radii;
|
||||
border: $border-width solid $popover-border-color;
|
||||
color: $fg-color;
|
||||
padding: 8px;
|
||||
margin: 4px;
|
||||
box-shadow: 0 0 3px 0 $shadow;
|
||||
}
|
||||
}
|
||||
9
home/desktops/hyprland/ags/scss/common/unset.scss
Normal file
9
home/desktops/hyprland/ags/scss/common/unset.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
@mixin unset($rec: false) {
|
||||
all: unset;
|
||||
|
||||
@if $rec {
|
||||
* {
|
||||
all: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
7
home/desktops/hyprland/ags/scss/common/widget.scss
Normal file
7
home/desktops/hyprland/ags/scss/common/widget.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
@mixin widget {
|
||||
transition: $transition;
|
||||
border-radius: $radii;
|
||||
color: $fg-color;
|
||||
background-color: $widget-bg;
|
||||
border: $border;
|
||||
}
|
||||
@@ -1,28 +1,36 @@
|
||||
// Reset
|
||||
* {
|
||||
all: unset;
|
||||
}
|
||||
@import "/tmp/ags/scss/options";
|
||||
@import "./variables";
|
||||
|
||||
// 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
|
||||
// common
|
||||
@import "./common/unset";
|
||||
@import "./common/widget";
|
||||
@import "./common/button";
|
||||
@import "./common/a11y-button";
|
||||
@import "./common/floating-widget";
|
||||
@import "./common/slider";
|
||||
@import "./common/scrollable";
|
||||
@import "./common/switch";
|
||||
@import "./common/hidden";
|
||||
@import "./common/text-border";
|
||||
@import "./common/tooltip";
|
||||
@import "./common/menu";
|
||||
@import "./common/spacing";
|
||||
|
||||
// Components
|
||||
@import './bar';
|
||||
@import './cheatsheet';
|
||||
@import './sidebars';
|
||||
@import './osd';
|
||||
@import './overview';
|
||||
@import './osk';
|
||||
@import './session';
|
||||
@import './notifications';
|
||||
// widgets
|
||||
@import "./widgets/about";
|
||||
@import "./widgets/applauncher";
|
||||
@import "./widgets/bar";
|
||||
@import "./widgets/desktop";
|
||||
@import "./widgets/notifications";
|
||||
@import "./widgets/overview";
|
||||
@import "./widgets/osd";
|
||||
@import "./widgets/dashboard";
|
||||
@import "./widgets/dock";
|
||||
@import "./widgets/powermenu";
|
||||
@import "./widgets/lockscreen";
|
||||
@import "./widgets/media";
|
||||
@import "./widgets/quicksettings";
|
||||
@import "./widgets/settings";
|
||||
|
||||
// Classes for interaction
|
||||
.growingRadial {
|
||||
transition: 300ms cubic-bezier(0.2, 0.0, 0, 1.0);
|
||||
}
|
||||
.fadingRadial {
|
||||
transition: 50ms cubic-bezier(0.2, 0.0, 0, 1.0);
|
||||
}
|
||||
// additional overrides
|
||||
@import "/tmp/ags/scss/additional";
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
class ThemeService extends Service {
|
||||
static { Service.register(this); }
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.setup();
|
||||
}
|
||||
|
||||
setup() {
|
||||
setupScss();
|
||||
}
|
||||
}
|
||||
|
||||
var Theme = class Theme {
|
||||
static { globalThis['Theme'] = this; }
|
||||
static instance = new ThemeService();
|
||||
};
|
||||
32
home/desktops/hyprland/ags/scss/variables.scss
Normal file
32
home/desktops/hyprland/ags/scss/variables.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
// variables are defined in options.js
|
||||
// these ones are derived from those
|
||||
|
||||
$hover: transparentize($_widget-bg, ($widget-opacity * 0.9) / 100);
|
||||
$widget-bg: transparentize($_widget-bg, $widget-opacity / 100);
|
||||
$active-gradient: linear-gradient($accent-gradient);
|
||||
|
||||
$hover-fg: if(
|
||||
$color-scheme == "dark",
|
||||
lighten($fg-color, 10%),
|
||||
darken($fg-color, 8%)
|
||||
);
|
||||
|
||||
$border-color: transparentize($_border-color, $border-opacity / 100);
|
||||
$border: $border-width solid $border-color;
|
||||
|
||||
$text-shadow: 2px 2px 2px $shadow;
|
||||
|
||||
$popover-border-color: transparentize(
|
||||
$_border-color,
|
||||
max(($border-opacity - 1) / 100, 0)
|
||||
);
|
||||
$popover-padding: $padding * $popover-padding-multiplier;
|
||||
$popover-radius: if($radii == 0, 0, $radii + $popover-padding);
|
||||
|
||||
$wm-gaps: floor($spacing * $wm-gaps-multiplier);
|
||||
|
||||
$shader-fg: #fff;
|
||||
|
||||
* {
|
||||
font-size: $font-size;
|
||||
}
|
||||
62
home/desktops/hyprland/ags/scss/widgets/about.scss
Normal file
62
home/desktops/hyprland/ags/scss/widgets/about.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
window#about {
|
||||
@include unset;
|
||||
|
||||
.window-content {
|
||||
@include floating-widget;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
min-width: 200px;
|
||||
min-height: 200px;
|
||||
background-size: cover;
|
||||
border: $border;
|
||||
margin: $spacing 0;
|
||||
}
|
||||
|
||||
.labels {
|
||||
.title {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.author {
|
||||
color: transparentize($fg-color, 0.2);
|
||||
}
|
||||
|
||||
.version {
|
||||
margin-top: $spacing;
|
||||
margin-bottom: $spacing * 2;
|
||||
border-radius: $radii;
|
||||
background-color: $widget-bg;
|
||||
color: $accent;
|
||||
padding: $padding;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
padding-bottom: $popover-padding;
|
||||
|
||||
button {
|
||||
@include button;
|
||||
padding: $padding;
|
||||
|
||||
&:first-child {
|
||||
border-radius: $radii $radii 0 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 0 $radii $radii;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dont-show {
|
||||
@include button;
|
||||
padding: $padding;
|
||||
|
||||
image {
|
||||
font-size: 1.4em;
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
71
home/desktops/hyprland/ags/scss/widgets/applauncher.scss
Normal file
71
home/desktops/hyprland/ags/scss/widgets/applauncher.scss
Normal file
@@ -0,0 +1,71 @@
|
||||
window#applauncher .window-content {
|
||||
@include floating_widget;
|
||||
|
||||
entry {
|
||||
@include button;
|
||||
padding: $padding;
|
||||
margin-bottom: $spacing;
|
||||
|
||||
label,
|
||||
image {
|
||||
color: $fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
separator {
|
||||
min-height: 1px;
|
||||
background-color: $hover;
|
||||
}
|
||||
|
||||
scrolledwindow {
|
||||
@include scrollable;
|
||||
min-width: $applauncher-width;
|
||||
min-height: $applauncher-height;
|
||||
}
|
||||
|
||||
button.app-item {
|
||||
@include button($flat: true, $reactive: false);
|
||||
> box {
|
||||
@include spacing(0.5);
|
||||
}
|
||||
transition: $transition;
|
||||
padding: $padding;
|
||||
|
||||
label {
|
||||
transition: $transition;
|
||||
|
||||
&.title {
|
||||
color: $fg-color;
|
||||
}
|
||||
|
||||
&.description {
|
||||
color: transparentize($fg-color, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
transition: $transition;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.title {
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
image {
|
||||
-gtk-icon-shadow: 2px 2px $accent;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: transparentize($accent, 0.5);
|
||||
border-radius: $radii;
|
||||
box-shadow: inset 0 0 0 $border-width $border-color;
|
||||
|
||||
.title {
|
||||
color: $fg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
283
home/desktops/hyprland/ags/scss/widgets/bar.scss
Normal file
283
home/desktops/hyprland/ags/scss/widgets/bar.scss
Normal file
@@ -0,0 +1,283 @@
|
||||
$bar-spacing: $spacing / 2;
|
||||
$button-radius: if(
|
||||
$bar-style == "floating",
|
||||
max(0, $radii - $bar-spacing),
|
||||
$radii
|
||||
);
|
||||
|
||||
@mixin panel-button($flat: $bar-flat-buttons, $reactive: true) {
|
||||
@include unset;
|
||||
|
||||
@if $bar-style == "separated" {
|
||||
transition: $transition;
|
||||
|
||||
> * {
|
||||
@include floating-widget;
|
||||
border-radius: $radii;
|
||||
margin: $wm-gaps $bar-spacing;
|
||||
transition: $transition;
|
||||
}
|
||||
|
||||
&:hover > * {
|
||||
color: $hover-fg;
|
||||
|
||||
@if $drop-shadow {
|
||||
box-shadow:
|
||||
0 0 min(6px, $spacing/2) 0 $shadow,
|
||||
inset 0 0 0 99px $hover;
|
||||
} @else {
|
||||
box-shadow: inset 0 0 0 99px $hover;
|
||||
}
|
||||
}
|
||||
|
||||
&:active > *,
|
||||
&.active > * {
|
||||
label,
|
||||
image {
|
||||
color: $accent-fg;
|
||||
}
|
||||
background-image: $active-gradient;
|
||||
background-color: $accent;
|
||||
}
|
||||
} @else {
|
||||
@include accs-button($flat, $reactive);
|
||||
|
||||
> * {
|
||||
border-radius: $button-radius;
|
||||
margin: $bar-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
label,
|
||||
image {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> * {
|
||||
padding: $padding * 0.4 $padding * 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
@if $bar-style == "normal" {
|
||||
background-color: $bg-color;
|
||||
}
|
||||
|
||||
@if not $screen-corners and $bar-style == "normal" {
|
||||
@if $bar-position == "bottom" {
|
||||
border-top: $border;
|
||||
} @else {
|
||||
border-bottom: $border;
|
||||
}
|
||||
}
|
||||
|
||||
@if $bar-style == "floating" {
|
||||
@include floating-widget;
|
||||
border-radius: $radii;
|
||||
margin: $wm-gaps;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@if $bar-style == "separated" {
|
||||
> .end > button:last-child > * {
|
||||
margin-right: $wm-gaps;
|
||||
}
|
||||
|
||||
> .start > button:first-child > * {
|
||||
margin-left: $wm-gaps;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-button {
|
||||
@include panel-button;
|
||||
}
|
||||
|
||||
.tray-item,
|
||||
.color-picker {
|
||||
@include panel-button($flat: true);
|
||||
}
|
||||
|
||||
separator {
|
||||
background-color: transparentize($fg-color, 0.86);
|
||||
border-radius: $radii;
|
||||
min-height: 5px;
|
||||
min-width: 5px;
|
||||
}
|
||||
|
||||
.overview {
|
||||
label {
|
||||
color: transparentize($accent, 0.2);
|
||||
}
|
||||
&:hover label {
|
||||
color: $accent;
|
||||
}
|
||||
&:active label,
|
||||
&.active label {
|
||||
color: $accent-fg;
|
||||
}
|
||||
}
|
||||
|
||||
.powermenu,
|
||||
.recorder {
|
||||
image {
|
||||
color: transparentize($red, 0.3);
|
||||
}
|
||||
&:hover image {
|
||||
color: transparentize($red, 0.15);
|
||||
}
|
||||
&:active image {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
.focused-client > box > box,
|
||||
.quicksettings > box > box {
|
||||
@include spacing(
|
||||
$spacing: if($bar-spacing == 0, $padding / 2, $bar-spacing)
|
||||
);
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line selector-not-notation */
|
||||
.quicksettings:not(.active):not(:active) {
|
||||
.bluetooth {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
.battery {
|
||||
&.low {
|
||||
color: $red;
|
||||
}
|
||||
&.charged,
|
||||
&.charging {
|
||||
color: $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media {
|
||||
&.spotify image {
|
||||
color: $green;
|
||||
}
|
||||
&.firefox image {
|
||||
color: $orange;
|
||||
}
|
||||
&.mpv image {
|
||||
color: $magenta;
|
||||
}
|
||||
}
|
||||
|
||||
.notifications {
|
||||
image {
|
||||
color: $yellow;
|
||||
}
|
||||
}
|
||||
|
||||
.battery-bar {
|
||||
.font-icon {
|
||||
font-size: 1.15em;
|
||||
}
|
||||
|
||||
@if $battery-bar-full {
|
||||
> box {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
image,
|
||||
.font-icon {
|
||||
margin-right: $bar-spacing * 0.5;
|
||||
}
|
||||
|
||||
levelbar trough {
|
||||
@include widget;
|
||||
min-width: $battery-bar-width;
|
||||
min-height: $battery-bar-height;
|
||||
|
||||
block.filled {
|
||||
border-radius: max($radii - $border-width, 0);
|
||||
background-image: $active-gradient;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin color($color) {
|
||||
image,
|
||||
label {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
block.filled {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
$color,
|
||||
lighten($color, 6%)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.medium {
|
||||
@include color($yellow);
|
||||
}
|
||||
.low {
|
||||
@include color($red);
|
||||
}
|
||||
.charging {
|
||||
@include color($green);
|
||||
}
|
||||
&:active {
|
||||
@include color($accent-fg);
|
||||
}
|
||||
|
||||
.whole-button {
|
||||
label {
|
||||
color: $fg-color;
|
||||
text-shadow: $text-shadow;
|
||||
}
|
||||
|
||||
trough,
|
||||
block.filled {
|
||||
border-radius: $button-radius;
|
||||
}
|
||||
|
||||
@if $bar-style == "separated" {
|
||||
trough {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.workspaces button {
|
||||
all: unset;
|
||||
|
||||
.indicator {
|
||||
font-size: 0;
|
||||
min-width: 8px;
|
||||
min-height: 8px;
|
||||
border-radius: $radii * 0.6;
|
||||
box-shadow: inset 0 0 0 $border-width $border-color;
|
||||
margin: 0 $padding/2;
|
||||
transition: $transition/2;
|
||||
background-color: transparentize($fg-color, 0.8);
|
||||
}
|
||||
|
||||
&.occupied .indicator {
|
||||
background-color: transparentize($fg-color, 0.2);
|
||||
min-width: 10px;
|
||||
min-height: 10px;
|
||||
}
|
||||
|
||||
&:hover .indicator {
|
||||
box-shadow: inset 0 0 0 10px transparentize($fg-color, 0.8);
|
||||
}
|
||||
|
||||
&.active .indicator,
|
||||
&:active .indicator {
|
||||
background-color: $accent;
|
||||
}
|
||||
|
||||
&.active .indicator {
|
||||
min-width: 24px;
|
||||
min-height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
131
home/desktops/hyprland/ags/scss/widgets/dashboard.scss
Normal file
131
home/desktops/hyprland/ags/scss/widgets/dashboard.scss
Normal file
@@ -0,0 +1,131 @@
|
||||
@mixin calendar {
|
||||
@include widget;
|
||||
padding: $padding * 2 $padding * 2 0;
|
||||
|
||||
calendar {
|
||||
all: unset;
|
||||
|
||||
&.button {
|
||||
@include button($flat: true);
|
||||
}
|
||||
|
||||
&:selected {
|
||||
box-shadow:
|
||||
inset 0 -8px 0 0 transparentize($accent, 0.5),
|
||||
inset 0 0 0 1px $accent;
|
||||
border-radius: $radii * 0.6;
|
||||
}
|
||||
|
||||
&.header {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: transparentize($fg-color, 0.5);
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
background-color: transparent;
|
||||
color: transparentize($accent, 0.5);
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
color: transparentize($fg-color, 0.9);
|
||||
}
|
||||
font-size: 1.1em;
|
||||
padding: 0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
window#dashboard .window-content {
|
||||
@include floating-widget;
|
||||
|
||||
.notifications {
|
||||
min-width: $notifications-width;
|
||||
|
||||
.header {
|
||||
margin-bottom: $spacing;
|
||||
margin-right: $spacing;
|
||||
|
||||
> label {
|
||||
margin-left: $radii / 2;
|
||||
}
|
||||
|
||||
button {
|
||||
@include button;
|
||||
padding: $padding/2 $padding;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-scrollable {
|
||||
@include scrollable;
|
||||
}
|
||||
|
||||
.notification-list {
|
||||
margin-right: $spacing;
|
||||
}
|
||||
|
||||
.notification {
|
||||
@include notification;
|
||||
|
||||
> box {
|
||||
@include widget;
|
||||
padding: $padding;
|
||||
margin-bottom: $spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
image {
|
||||
font-size: 7em;
|
||||
}
|
||||
label {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
separator {
|
||||
background-color: $popover-border-color;
|
||||
min-width: 2px;
|
||||
border-radius: $radii;
|
||||
margin-right: $spacing;
|
||||
}
|
||||
|
||||
.datemenu,
|
||||
.system-info {
|
||||
@include spacing;
|
||||
}
|
||||
|
||||
.clock-box {
|
||||
padding: $padding;
|
||||
|
||||
.clock {
|
||||
font-size: 5em;
|
||||
}
|
||||
|
||||
.uptime {
|
||||
color: transparentize($fg-color, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.calendar {
|
||||
@include calendar;
|
||||
}
|
||||
|
||||
.circular-progress-box {
|
||||
@include widget;
|
||||
padding: $padding;
|
||||
|
||||
.circular-progress {
|
||||
min-height: $sys-info-size;
|
||||
min-width: $sys-info-size;
|
||||
margin: $padding/2;
|
||||
font-size: $padding;
|
||||
background-color: $bg-color;
|
||||
color: $accent;
|
||||
|
||||
image {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
81
home/desktops/hyprland/ags/scss/widgets/desktop.scss
Normal file
81
home/desktops/hyprland/ags/scss/widgets/desktop.scss
Normal file
@@ -0,0 +1,81 @@
|
||||
window.corner .corner {
|
||||
background-color: $bg-color;
|
||||
border-radius: $radii * 2;
|
||||
min-width: 2px;
|
||||
min-height: 2px;
|
||||
}
|
||||
|
||||
window.desktop {
|
||||
@if $bar-style == "normal" {
|
||||
border-radius: if($screen-corners, $radii * 2, 0);
|
||||
box-shadow: inset 0 0 $wm-gaps / 2 0 $shadow;
|
||||
}
|
||||
|
||||
.clock-box-shadow {
|
||||
border: 5px solid $wallpaper-fg;
|
||||
border-radius: $radii;
|
||||
|
||||
.clock-box {
|
||||
border-radius: max($radii - 5px, 0);
|
||||
padding: 0 14px;
|
||||
|
||||
.clock {
|
||||
color: $wallpaper-fg;
|
||||
font-size: 140px;
|
||||
font-family: $mono-font;
|
||||
}
|
||||
|
||||
.separator-box {
|
||||
padding: 24px 12px;
|
||||
|
||||
separator {
|
||||
border-radius: $radii;
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
background-color: $wallpaper-fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
color: $wallpaper-fg;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
@if $drop-shadow {
|
||||
.clock-box-shadow,
|
||||
separator {
|
||||
box-shadow: 2px 2px 2px 0 $shadow;
|
||||
}
|
||||
|
||||
.clock-box {
|
||||
box-shadow: inset 2px 2px 2px 0 $shadow;
|
||||
}
|
||||
|
||||
label {
|
||||
text-shadow: $text-shadow;
|
||||
}
|
||||
} @else {
|
||||
.clock-box-shadow {
|
||||
box-shadow:
|
||||
0 0 0 $border-width $border-color,
|
||||
inset 0 0 0 $border-width $border-color;
|
||||
}
|
||||
|
||||
separator {
|
||||
border: $border;
|
||||
}
|
||||
|
||||
label {
|
||||
@include text-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.desktop-menu {
|
||||
image {
|
||||
margin-left: -14px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
44
home/desktops/hyprland/ags/scss/widgets/dock.scss
Normal file
44
home/desktops/hyprland/ags/scss/widgets/dock.scss
Normal file
@@ -0,0 +1,44 @@
|
||||
@mixin dock($spacing: $spacing * 0.7) {
|
||||
separator {
|
||||
border-radius: $radii;
|
||||
background-color: transparentize($fg-color, 0.8);
|
||||
margin: 0 $spacing;
|
||||
min-width: 2px;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
button {
|
||||
@include accs-button($flat: true);
|
||||
|
||||
.box {
|
||||
margin: $spacing / 2;
|
||||
}
|
||||
|
||||
image {
|
||||
margin: $padding;
|
||||
|
||||
@if $color-scheme == "light" {
|
||||
-gtk-icon-shadow: $text-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator {
|
||||
min-width: 8px;
|
||||
min-height: 8px;
|
||||
background-color: $fg-color;
|
||||
border-radius: $radii;
|
||||
margin-bottom: $padding/2;
|
||||
|
||||
&.focused {
|
||||
background-image: $active-gradient;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.floating-dock .dock {
|
||||
@include dock;
|
||||
@include floating-widget;
|
||||
border-radius: if($radii == 0, 0, $radii + $spacing / 2);
|
||||
padding: $spacing / 2;
|
||||
}
|
||||
26
home/desktops/hyprland/ags/scss/widgets/lockscreen.scss
Normal file
26
home/desktops/hyprland/ags/scss/widgets/lockscreen.scss
Normal file
@@ -0,0 +1,26 @@
|
||||
window.lockscreen {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
|
||||
.avatar {
|
||||
@include widget;
|
||||
border-radius: $radii * 2;
|
||||
min-height: 200px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.content {
|
||||
@include floating-widget;
|
||||
padding: $spacing * 4;
|
||||
}
|
||||
|
||||
spinner {
|
||||
margin-top: $spacing * 2;
|
||||
}
|
||||
|
||||
entry {
|
||||
@include button;
|
||||
margin-top: $spacing * 2;
|
||||
padding: $spacing;
|
||||
min-height: 20px;
|
||||
}
|
||||
}
|
||||
120
home/desktops/hyprland/ags/scss/widgets/media.scss
Normal file
120
home/desktops/hyprland/ags/scss/widgets/media.scss
Normal file
@@ -0,0 +1,120 @@
|
||||
@mixin player-color($color) {
|
||||
button {
|
||||
.shuffle.enabled {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.loop {
|
||||
&.playlist,
|
||||
&.track {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
&:active label {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.position-slider:hover trough {
|
||||
background-color: transparentize($color, 0.5);
|
||||
}
|
||||
|
||||
.player-icon {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin media() {
|
||||
@include widget;
|
||||
|
||||
label {
|
||||
color: $shader-fg;
|
||||
text-shadow: $text-shadow;
|
||||
}
|
||||
|
||||
.blurred-cover,
|
||||
.cover {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: $radii * 0.8;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.cover {
|
||||
min-height: 100px;
|
||||
min-width: 100px;
|
||||
box-shadow: 2px 2px 2px 0 $shadow;
|
||||
margin: $padding;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.labels {
|
||||
margin-top: $padding;
|
||||
|
||||
label {
|
||||
font-size: 1.1em;
|
||||
text-shadow: $text-shadow;
|
||||
|
||||
&.title {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.position-slider {
|
||||
@include slider(
|
||||
$width: 0.4em,
|
||||
$slider: false,
|
||||
$gradient: linear-gradient($shader-fg, $shader-fg),
|
||||
$radii: 0
|
||||
);
|
||||
margin-bottom: $padding/2;
|
||||
|
||||
trough {
|
||||
border: none;
|
||||
background-color: transparentize($shader-fg, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.footer-box {
|
||||
margin: -$padding/2 $padding $padding/2;
|
||||
|
||||
image {
|
||||
-gtk-icon-shadow: $text-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.controls button {
|
||||
@include unset;
|
||||
|
||||
label {
|
||||
font-size: 2em;
|
||||
color: transparentize($shader-fg, 0.2);
|
||||
transition: $transition;
|
||||
|
||||
&.shuffle,
|
||||
&.loop {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover label {
|
||||
color: transparentize($shader-fg, 0.1);
|
||||
}
|
||||
|
||||
&:active label {
|
||||
color: $shader-fg;
|
||||
}
|
||||
}
|
||||
|
||||
&.spotify {
|
||||
@include player-color($green);
|
||||
}
|
||||
&.firefox {
|
||||
@include player-color($orange);
|
||||
}
|
||||
&.mpv {
|
||||
@include player-color($magenta);
|
||||
}
|
||||
}
|
||||
81
home/desktops/hyprland/ags/scss/widgets/notifications.scss
Normal file
81
home/desktops/hyprland/ags/scss/widgets/notifications.scss
Normal file
@@ -0,0 +1,81 @@
|
||||
@mixin notification() {
|
||||
&.critical > box {
|
||||
box-shadow: inset 0 0 0.5em 0 $red;
|
||||
}
|
||||
|
||||
&:hover button.close-button {
|
||||
@include button-hover;
|
||||
background-color: transparentize($red, 0.5);
|
||||
}
|
||||
|
||||
.content {
|
||||
.title {
|
||||
margin-right: $spacing;
|
||||
color: $fg-color;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: transparentize($fg-color, 0.2);
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 0.9em;
|
||||
color: transparentize($fg-color, 0.2);
|
||||
}
|
||||
|
||||
.icon {
|
||||
border-radius: $radii * 0.8;
|
||||
margin-right: $spacing;
|
||||
|
||||
&.img {
|
||||
border: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
box.actions {
|
||||
@include spacing(0.5);
|
||||
margin-top: $spacing;
|
||||
|
||||
button {
|
||||
@include button;
|
||||
border-radius: $radii * 0.8;
|
||||
font-size: 1.2em;
|
||||
padding: $padding * 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
button.close-button {
|
||||
@include button($flat: true);
|
||||
margin-left: $spacing / 2;
|
||||
border-radius: $radii * 0.8;
|
||||
min-width: 1.2em;
|
||||
min-height: 1.2em;
|
||||
|
||||
&:hover {
|
||||
background-color: transparentize($red, 0.2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-image: linear-gradient($red, $red);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.notifications {
|
||||
@include unset;
|
||||
|
||||
.notification {
|
||||
@include notification;
|
||||
|
||||
> box {
|
||||
@include floating-widget;
|
||||
border-radius: $radii;
|
||||
}
|
||||
|
||||
.description {
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
}
|
||||
19
home/desktops/hyprland/ags/scss/widgets/osd.scss
Normal file
19
home/desktops/hyprland/ags/scss/widgets/osd.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
window.indicator .progress {
|
||||
@include floating-widget;
|
||||
padding: $padding / 2;
|
||||
border-radius: if($radii == 0, 0, $radii + $padding / 2);
|
||||
|
||||
.fill {
|
||||
border-radius: $radii;
|
||||
background-color: $accent;
|
||||
color: $accent-fg;
|
||||
|
||||
image {
|
||||
-gtk-icon-transform: scale(0.7);
|
||||
}
|
||||
|
||||
.font-icon {
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
30
home/desktops/hyprland/ags/scss/widgets/overview.scss
Normal file
30
home/desktops/hyprland/ags/scss/widgets/overview.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
window#overview .window-content {
|
||||
@include floating-widget;
|
||||
@include spacing;
|
||||
|
||||
.workspace {
|
||||
&.active > widget {
|
||||
border-color: $accent;
|
||||
}
|
||||
|
||||
> widget {
|
||||
@include widget;
|
||||
border-radius: if($radii == 0, 0, $radii + $padding);
|
||||
|
||||
&:drop(active) {
|
||||
border-color: $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client {
|
||||
@include button;
|
||||
border-radius: $radii;
|
||||
margin: $padding;
|
||||
|
||||
&.hidden {
|
||||
@include hidden;
|
||||
transition: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
84
home/desktops/hyprland/ags/scss/widgets/powermenu.scss
Normal file
84
home/desktops/hyprland/ags/scss/widgets/powermenu.scss
Normal file
@@ -0,0 +1,84 @@
|
||||
window#powermenu,
|
||||
window#verification {
|
||||
.shader {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
window#verification .window-content {
|
||||
@include floating-widget;
|
||||
min-width: 300px;
|
||||
min-height: 100px;
|
||||
|
||||
.text-box {
|
||||
.title {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: transparentize($fg-color, 0.1);
|
||||
font-size: 1.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
@include spacing;
|
||||
margin-top: $padding;
|
||||
|
||||
button {
|
||||
@include button;
|
||||
font-size: 1.5em;
|
||||
padding: $padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window#powermenu .window-content {
|
||||
@include floating-widget;
|
||||
@include spacing(2);
|
||||
padding: $popover-padding + $spacing * 1.5;
|
||||
border-radius: if(
|
||||
$radii == 0,
|
||||
0,
|
||||
$popover-radius + ($popover-padding + $spacing * 1.5)
|
||||
);
|
||||
|
||||
button {
|
||||
@include unset;
|
||||
|
||||
image {
|
||||
@include button;
|
||||
border-radius: $popover-radius;
|
||||
min-width: 1.7em;
|
||||
min-height: 1.7em;
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
label,
|
||||
image {
|
||||
color: transparentize($fg-color, 0.1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
image {
|
||||
@include button-hover;
|
||||
}
|
||||
label {
|
||||
color: $fg-color;
|
||||
}
|
||||
}
|
||||
&:focus image {
|
||||
@include button-focus;
|
||||
}
|
||||
&:active image {
|
||||
@include button-active;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
label {
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
165
home/desktops/hyprland/ags/scss/widgets/quicksettings.scss
Normal file
165
home/desktops/hyprland/ags/scss/widgets/quicksettings.scss
Normal file
@@ -0,0 +1,165 @@
|
||||
window#quicksettings .window-content {
|
||||
@include floating-widget;
|
||||
@include spacing;
|
||||
|
||||
.avatar {
|
||||
@include widget;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.header {
|
||||
@include spacing($rec: true);
|
||||
|
||||
button,
|
||||
.uptime,
|
||||
.battery {
|
||||
@include button;
|
||||
padding: $padding;
|
||||
font-weight: bold;
|
||||
min-height: 20px;
|
||||
min-width: 20px;
|
||||
|
||||
image {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.battery {
|
||||
@include spacing($multiplier: 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.battery-progress {
|
||||
label {
|
||||
color: $accent-fg;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.charging label {
|
||||
font-size: $padding * 2;
|
||||
}
|
||||
|
||||
&.half label {
|
||||
color: $fg-color;
|
||||
}
|
||||
|
||||
progressbar {
|
||||
@include slider($width: $padding * 3.6);
|
||||
}
|
||||
|
||||
&.low progressbar {
|
||||
@include slider(
|
||||
$width: $padding * 3.6,
|
||||
$gradient: linear-gradient(to right, $red, $red)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.sliders-box {
|
||||
@include widget;
|
||||
@include spacing($rec: true);
|
||||
@include spacing(0);
|
||||
padding: $padding;
|
||||
|
||||
button {
|
||||
@include button($flat: true);
|
||||
padding: $padding / 2;
|
||||
}
|
||||
|
||||
scale {
|
||||
@include slider;
|
||||
margin-left: $spacing * -0.5;
|
||||
}
|
||||
|
||||
.menu {
|
||||
margin: $spacing 0;
|
||||
background-color: $bg-color;
|
||||
border: $border-width solid $popover-border-color;
|
||||
border-radius: $radii;
|
||||
}
|
||||
}
|
||||
|
||||
.mixer-item {
|
||||
scale {
|
||||
@include slider($width: 7px);
|
||||
}
|
||||
image {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
@include spacing($rec: true);
|
||||
}
|
||||
|
||||
.menu {
|
||||
@include unset;
|
||||
@include widget;
|
||||
@include spacing($rec: true);
|
||||
padding: $padding;
|
||||
margin-top: $spacing;
|
||||
|
||||
.title {
|
||||
@include spacing(0.5);
|
||||
}
|
||||
|
||||
separator {
|
||||
margin: 0 $radii / 2;
|
||||
}
|
||||
|
||||
button {
|
||||
@include button($flat: true);
|
||||
padding: $padding / 2;
|
||||
}
|
||||
|
||||
switch {
|
||||
@include switch;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-button {
|
||||
@include button;
|
||||
font-weight: bold;
|
||||
|
||||
.label-box {
|
||||
@include spacing(0.5);
|
||||
}
|
||||
|
||||
button {
|
||||
@include button($flat: true);
|
||||
padding: $padding;
|
||||
|
||||
&:first-child {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $accent;
|
||||
|
||||
label,
|
||||
image {
|
||||
color: $accent-fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.simple-toggle {
|
||||
@include button;
|
||||
padding: $padding $padding * 1.1;
|
||||
}
|
||||
|
||||
.media {
|
||||
@include spacing;
|
||||
|
||||
.player {
|
||||
@include media;
|
||||
}
|
||||
}
|
||||
}
|
||||
143
home/desktops/hyprland/ags/scss/widgets/settings.scss
Normal file
143
home/desktops/hyprland/ags/scss/widgets/settings.scss
Normal file
@@ -0,0 +1,143 @@
|
||||
window#settings-dialog {
|
||||
background-color: $bg-color;
|
||||
|
||||
.page {
|
||||
@include scrollable;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
margin: $spacing;
|
||||
}
|
||||
|
||||
.sidebar-box {
|
||||
@include spacing($rec: true);
|
||||
background-color: $widget-bg;
|
||||
border-right: $border;
|
||||
padding: $spacing / 2;
|
||||
|
||||
button {
|
||||
@include button($flat: true);
|
||||
padding: $padding / 2 $padding * 2;
|
||||
}
|
||||
|
||||
scrolledwindow {
|
||||
@include scrollable;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
background-color: $widget-bg;
|
||||
border-right: $border;
|
||||
border-bottom: $border;
|
||||
padding: $spacing / 2;
|
||||
|
||||
button {
|
||||
@include button($flat: true);
|
||||
padding: $padding / 2 $padding;
|
||||
}
|
||||
|
||||
button:last-child {
|
||||
margin-left: $spacing / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
background-color: $widget-bg;
|
||||
border-right: $border;
|
||||
border-top: $border;
|
||||
padding: $spacing / 2;
|
||||
|
||||
button {
|
||||
@include button($flat: true);
|
||||
padding: $padding / 2 $padding;
|
||||
}
|
||||
}
|
||||
|
||||
entry.search {
|
||||
@include button;
|
||||
border-radius: 0;
|
||||
padding: $padding;
|
||||
}
|
||||
|
||||
.row {
|
||||
@include widget;
|
||||
border-radius: 0;
|
||||
border-bottom-width: 0;
|
||||
padding: $padding;
|
||||
transition: border-radius 0;
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 0 $radii $radii;
|
||||
border-bottom-width: $border-width;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-radius: $radii $radii 0 0;
|
||||
}
|
||||
|
||||
&:first-child:last-child {
|
||||
border-radius: $radii;
|
||||
}
|
||||
|
||||
.overlay-padding {
|
||||
min-height: $font-size * 3;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $hover;
|
||||
}
|
||||
|
||||
entry,
|
||||
button {
|
||||
@include button;
|
||||
padding: $padding;
|
||||
}
|
||||
|
||||
switch {
|
||||
@include switch;
|
||||
}
|
||||
|
||||
spinbutton {
|
||||
@include unset;
|
||||
|
||||
entry {
|
||||
border-radius: $radii 0 0 $radii;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
button:last-child {
|
||||
border-radius: 0 $radii $radii 0;
|
||||
}
|
||||
}
|
||||
|
||||
.enum-setter {
|
||||
label {
|
||||
background-color: $widget-bg;
|
||||
border-top: $border;
|
||||
border-bottom: $border;
|
||||
padding: 0 $padding;
|
||||
}
|
||||
|
||||
button:first-child {
|
||||
border-radius: $radii 0 0 $radii;
|
||||
}
|
||||
|
||||
button:last-child {
|
||||
border-radius: 0 $radii $radii 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.id,
|
||||
.note {
|
||||
font-size: 0.8em;
|
||||
color: transparentize($fg-color, $amount: 0.5);
|
||||
}
|
||||
|
||||
.id {
|
||||
font-family: $mono-font;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user