forked from Shinonome/dots-hyprland
ags: sync
This commit is contained in:
end-4
+96
-164
@@ -1,27 +1,20 @@
|
||||
// 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
|
||||
$bar_ws_width: 1.774rem;
|
||||
$bar_subgroup_bg: mix($surfaceVariant, $primary, 89%);
|
||||
@if $darkmode ==true {
|
||||
$notchSecondaryContainer: $secondaryContainer;
|
||||
$notchOnSecondaryContainer: $onSecondaryContainer;
|
||||
$notchPrimary: $primary;
|
||||
$notchOnPrimary: $onPrimary;
|
||||
$bar_subgroup_bg: $surfaceVariant;
|
||||
}
|
||||
|
||||
@else {
|
||||
$notchSecondaryContainer: $onSecondaryContainer;
|
||||
$notchOnSecondaryContainer: $secondaryContainer;
|
||||
$notchPrimary: $primaryContainer;
|
||||
$notchOnPrimary: $onPrimaryContainer;
|
||||
@mixin bar-group-rounding {
|
||||
@include small-rounding;
|
||||
}
|
||||
|
||||
.bar-height {
|
||||
min-height: 2.727rem;
|
||||
}
|
||||
|
||||
.bar-bg {
|
||||
@@ -34,31 +27,17 @@ $notchOnPrimary: $onPrimary;
|
||||
}
|
||||
|
||||
.bar-group-margin {
|
||||
padding: 0.2rem;
|
||||
padding: 0.273rem 0rem;
|
||||
}
|
||||
|
||||
.bar-group {
|
||||
// @include elevation-border;
|
||||
background-color: $t_surface;
|
||||
}
|
||||
|
||||
.bar-group-center {
|
||||
border-bottom-left-radius: 1.364rem;
|
||||
border-bottom-right-radius: 1.364rem;
|
||||
padding: 0.2rem;
|
||||
// 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
|
||||
background-color: $l_l_t_surfaceVariant;
|
||||
}
|
||||
|
||||
.bar-group-pad {
|
||||
padding: 0rem 1.023rem;
|
||||
// padding: 0rem 1.023rem;
|
||||
padding: 0.205rem;
|
||||
// padding-left: 0.341rem;
|
||||
}
|
||||
|
||||
.bar-group-pad-less {
|
||||
@@ -67,12 +46,12 @@ $notchOnPrimary: $onPrimary;
|
||||
|
||||
.bar-group-pad-system {
|
||||
padding-left: 1.023rem;
|
||||
padding-right: 0.547rem;
|
||||
padding-right: 0.341rem;
|
||||
}
|
||||
|
||||
.bar-group-pad-music {
|
||||
padding-right: 1.023rem;
|
||||
// padding-left: 0.273rem;
|
||||
padding-left: 0.341rem;
|
||||
}
|
||||
|
||||
.bar-group-pad-left {
|
||||
@@ -94,7 +73,7 @@ $notchOnPrimary: $onPrimary;
|
||||
}
|
||||
|
||||
.bar-group-standalone {
|
||||
border-radius: 1.364rem;
|
||||
@include bar-group-rounding;
|
||||
-gtk-outline-radius: 1.364rem;
|
||||
}
|
||||
|
||||
@@ -123,7 +102,25 @@ $notchOnPrimary: $onPrimary;
|
||||
}
|
||||
|
||||
.bar-ws-width {
|
||||
min-width: 18.614rem;
|
||||
min-width: 18.341rem;
|
||||
}
|
||||
|
||||
.bar-ws {
|
||||
min-width: $bar_ws_width;
|
||||
color: mix($onBackground, $background, 40%);
|
||||
@if $darkmode ==true {
|
||||
color: mix($onBackground, $background, 45%);
|
||||
}
|
||||
}
|
||||
|
||||
.bar-ws-active {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-ws-occupied {
|
||||
background-color: $bar_subgroup_bg;
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.bar-separator {
|
||||
@@ -137,7 +134,6 @@ $notchOnPrimary: $onPrimary;
|
||||
.bar-clock {
|
||||
@include titlefont;
|
||||
font-size: 1.2727rem;
|
||||
color: $onBackground;
|
||||
}
|
||||
|
||||
.bar-date {
|
||||
@@ -146,95 +142,13 @@ $notchOnPrimary: $onPrimary;
|
||||
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 {
|
||||
transition: 100ms cubic-bezier(0.05, 0.7, 0.1, 1);
|
||||
}
|
||||
|
||||
.bar-ws-active {
|
||||
min-height: 1.5rem;
|
||||
min-width: 1.5rem;
|
||||
font-size: 1.091rem;
|
||||
@include mainfont;
|
||||
|
||||
background-color: $notchPrimary;
|
||||
color: $notchOnPrimary;
|
||||
border-radius: 999px;
|
||||
margin: 0.068rem;
|
||||
// background-color: red;
|
||||
}
|
||||
|
||||
.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: $onBackground;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.bar-batt {
|
||||
@include full-rounding;
|
||||
padding: 0rem 0.341rem;
|
||||
background-color: $t_secondaryContainer;
|
||||
color: $t_onSecondaryContainer;
|
||||
// border: 1px solid $onSecondaryContainer;
|
||||
min-height: 1.77rem;
|
||||
min-width: 1.77rem;
|
||||
border-radius: 10rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-sidemodule {
|
||||
@@ -251,19 +165,36 @@ $notchOnPrimary: $onPrimary;
|
||||
color: $onSuccessContainer;
|
||||
}
|
||||
|
||||
.bar-batt-prog-low {
|
||||
.bar-batt-circprog {
|
||||
@include fluent_decel_long;
|
||||
min-width: 0.068rem; // line width
|
||||
min-height: 1.636rem;
|
||||
padding: 0rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-batt-circprog-low {
|
||||
@include fluent_decel_long;
|
||||
min-width: 0.068rem; // line width
|
||||
min-height: 1.636rem;
|
||||
padding: 0rem;
|
||||
background-color: $error;
|
||||
color: $errorContainer;
|
||||
}
|
||||
|
||||
.bar-batt-prog-full {
|
||||
.bar-batt-circprog-full {
|
||||
@include fluent_decel_long;
|
||||
min-width: 0.068rem; // line width
|
||||
min-height: 1.636rem;
|
||||
padding: 0rem;
|
||||
background-color: $successContainer;
|
||||
color: $onSuccessContainer;
|
||||
}
|
||||
|
||||
.bar-music-playstate {
|
||||
min-height: 1.770rem;
|
||||
min-width: 1.770rem;
|
||||
min-height: 1.77rem;
|
||||
min-width: 1.77rem;
|
||||
border-radius: 10rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
@@ -272,15 +203,15 @@ $notchOnPrimary: $onPrimary;
|
||||
.bar-music-circprog {
|
||||
@include fluent_decel_long;
|
||||
min-width: 0.068rem; // line width
|
||||
min-height: 1.770rem;
|
||||
min-height: 1.636rem;
|
||||
padding: 0rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-music-playstate-playing {
|
||||
min-height: 1.770rem;
|
||||
min-width: 1.770rem;
|
||||
min-height: 1.77rem;
|
||||
min-width: 1.77rem;
|
||||
border-radius: 10rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
@@ -363,8 +294,8 @@ $notchOnPrimary: $onPrimary;
|
||||
}
|
||||
|
||||
progress {
|
||||
min-height: 0.680rem;
|
||||
min-width: 0.680rem;
|
||||
min-height: 0.68rem;
|
||||
min-width: 0.68rem;
|
||||
margin: 0rem 0.137rem;
|
||||
border-radius: 10rem;
|
||||
background-color: $t_onSecondaryContainer;
|
||||
@@ -392,30 +323,14 @@ $notchOnPrimary: $onPrimary;
|
||||
border-radius: 10rem;
|
||||
min-width: 0.681rem;
|
||||
min-height: 0.681rem;
|
||||
background-color: $t_onSecondaryContainer;
|
||||
color: $secondaryContainer;
|
||||
background-color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.bar-batt-chargestate-charging-smaller {
|
||||
border-radius: 10rem;
|
||||
min-width: 0.409rem;
|
||||
min-height: 0.409rem;
|
||||
background-color: $t_onSecondaryContainer;
|
||||
color: $secondaryContainer;
|
||||
}
|
||||
|
||||
.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;
|
||||
background-color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.corner {
|
||||
@@ -424,7 +339,7 @@ $notchOnPrimary: $onPrimary;
|
||||
}
|
||||
|
||||
.corner-black {
|
||||
background-color: $black; // Hard code because fake screen corner
|
||||
background-color: $black; // Hard code: fake screen corner
|
||||
@include large-rounding;
|
||||
}
|
||||
|
||||
@@ -438,17 +353,17 @@ $notchOnPrimary: $onPrimary;
|
||||
padding: 0.341rem;
|
||||
}
|
||||
|
||||
.bar-space-button>box:first-child {
|
||||
.bar-space-button > box:first-child {
|
||||
@include full-rounding;
|
||||
padding: 0rem 0.682rem;
|
||||
}
|
||||
|
||||
.bar-space-button:hover>box:first-child,
|
||||
.bar-space-button:focus>box:first-child {
|
||||
.bar-space-button:hover > box:first-child,
|
||||
.bar-space-button:focus > box:first-child {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.bar-space-button:active>box:first-child {
|
||||
.bar-space-button:active > box:first-child {
|
||||
background-color: $activecolor;
|
||||
}
|
||||
|
||||
@@ -458,25 +373,26 @@ $notchOnPrimary: $onPrimary;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-space-area-rightmost>box {
|
||||
.bar-space-area-rightmost > box {
|
||||
padding-right: 2.386rem;
|
||||
}
|
||||
|
||||
.bar-systray {
|
||||
@include full-rounding;
|
||||
min-height: 1.909rem;
|
||||
min-width: 1.909rem;
|
||||
margin: 0.137rem 0rem;
|
||||
padding: 0rem 0.682rem;
|
||||
}
|
||||
|
||||
.bar-systray-item {
|
||||
@include full-rounding;
|
||||
min-width: 1.909rem;
|
||||
min-height: 1.032rem;
|
||||
min-width: 1.032rem;
|
||||
}
|
||||
|
||||
.bar-statusicons {
|
||||
@include full-rounding;
|
||||
@include menu_decel;
|
||||
margin: 0.2rem;
|
||||
margin: 0.273rem;
|
||||
padding: 0rem 0.614rem;
|
||||
}
|
||||
|
||||
@@ -486,4 +402,20 @@ $notchOnPrimary: $onPrimary;
|
||||
|
||||
.bar-statusicons-active {
|
||||
background-color: mix($t_background, $t_onBackground, 80%);
|
||||
}
|
||||
|
||||
.bar-util-btn {
|
||||
@include full-rounding;
|
||||
min-height: 1.77rem;
|
||||
min-width: 1.77rem;
|
||||
background-color: $bar_subgroup_bg;
|
||||
}
|
||||
|
||||
.bar-util-btn:hover,
|
||||
.bar-util-btn:focus {
|
||||
background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 90%);
|
||||
}
|
||||
|
||||
.bar-util-btn:active {
|
||||
background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 80%);
|
||||
}
|
||||
@@ -5,15 +5,18 @@ $transparency_enabled: false;
|
||||
|
||||
@if $transparency_enabled ==false {
|
||||
@if $darkmode ==true {
|
||||
$primary: mix($primary, white, 70%);
|
||||
$primaryContainer: mix($primaryContainer, white, 90%);
|
||||
$background: mix(mix($background, $primary, 94%), #000000, 50%);
|
||||
$surface: mix($surface, $primaryContainer, 98%);
|
||||
$surfaceVariant: mix($surfaceVariant, #000000, 55%);
|
||||
$surfaceVariant: mix($surfaceVariant, #000000, 75%);
|
||||
// $secondaryContainer: mix($secondaryContainer, $primaryContainer, 90%);
|
||||
}
|
||||
|
||||
@if $darkmode ==false {
|
||||
$background: mix($background, $primary, 87%);
|
||||
$surface: mix($surface, $primary, 93%);
|
||||
$surfaceVariant: mix($surfaceVariant, #FFFFFF, 55%);
|
||||
$surfaceVariant: mix($surfaceVariant, #ffffff, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,7 +30,7 @@ $transparency_enabled: false;
|
||||
@if $darkmode ==false {
|
||||
$background: mix($background, $primary, 94%);
|
||||
$surface: mix($surface, $primary, 93%);
|
||||
$surfaceVariant: mix($surfaceVariant, #FFFFFF, 55%);
|
||||
$surfaceVariant: mix($surfaceVariant, #ffffff, 55%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -37,7 +40,8 @@ $transparentize_surface_amount_less: 0.6;
|
||||
$transparentize_surface_amount_less_less: 0.55;
|
||||
$transparentize_surface_amount: 0.7;
|
||||
$transparentize_surface_amount_more: 0.8;
|
||||
$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;
|
||||
$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount -
|
||||
$transparentize_amount;
|
||||
|
||||
@if $darkmode ==true {
|
||||
// Less transparency
|
||||
@@ -46,7 +50,8 @@ $transparentize_surface_amount_subtract_surface: $transparentize_surface_amount
|
||||
$transparentize_surface_amount_less_less: 0.55;
|
||||
$transparentize_surface_amount: 0.69;
|
||||
$transparentize_surface_amount_more: 0.9;
|
||||
$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;
|
||||
$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount -
|
||||
$transparentize_amount;
|
||||
}
|
||||
|
||||
@if $transparency_enabled ==false {
|
||||
@@ -71,33 +76,69 @@ $onSuccessContainer: #0c1f13;
|
||||
$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_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_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_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_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_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);
|
||||
@@ -107,7 +148,10 @@ $t_inversePrimary: transparentize($inversePrimary, $transparentize_amount);
|
||||
$t_success: transparentize($error, $transparentize_amount);
|
||||
$t_onSuccess: transparentize($onError, $transparentize_amount);
|
||||
$t_successContainer: transparentize($errorContainer, $transparentize_amount);
|
||||
$t_onSuccessContainer: transparentize($onErrorContainer, $transparentize_amount);
|
||||
$t_onSuccessContainer: transparentize(
|
||||
$onErrorContainer,
|
||||
$transparentize_amount
|
||||
);
|
||||
|
||||
// Others
|
||||
$hovercolor: mix($t_surface, $t_onSurface, 50%);
|
||||
@@ -125,4 +169,4 @@ $term3: $onPrimaryContainer;
|
||||
$term4: $onPrimaryContainer;
|
||||
$term5: $onSecondaryContainer;
|
||||
$term6: $primary;
|
||||
$term7: $onSurfaceVariant;
|
||||
$term7: $onSurfaceVariant;
|
||||
|
||||
@@ -42,7 +42,7 @@ menu {
|
||||
-gtk-outline-radius: 1.159rem;
|
||||
|
||||
animation-name: appear;
|
||||
animation-duration: 100ms;
|
||||
animation-duration: 40ms;
|
||||
animation-timing-function: ease-out;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
@@ -81,12 +81,11 @@ tooltip {
|
||||
}
|
||||
|
||||
.configtoggle-box {
|
||||
padding: 0.205rem;
|
||||
padding: 0.205rem 0.341rem;
|
||||
border: 0.136rem solid transparent;
|
||||
}
|
||||
|
||||
.configtoggle-box:focus {
|
||||
padding: 0.205rem;
|
||||
border: 0.136rem solid mix($onSurface, $surface, 40%);
|
||||
}
|
||||
|
||||
@@ -126,4 +125,70 @@ tooltip {
|
||||
@include menu_decel;
|
||||
min-width: 1.636rem;
|
||||
min-height: 0.819rem;
|
||||
}
|
||||
|
||||
.segment-container {
|
||||
@include full-rounding;
|
||||
border: 0.068rem solid $outline;
|
||||
}
|
||||
|
||||
.segment-container>*:first-child {
|
||||
border-top-left-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
}
|
||||
|
||||
.segment-container>* {
|
||||
border-right: 0.068rem solid $outline;
|
||||
padding: 0.341rem 0.682rem;
|
||||
}
|
||||
|
||||
.segment-container>*:last-child {
|
||||
border-right: 0rem solid transparent;
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
}
|
||||
|
||||
.segment-btn {
|
||||
color: $onSurface;
|
||||
}
|
||||
|
||||
.segment-btn:focus,
|
||||
.segment-btn:hover {
|
||||
background-color: $surfaceVariant;
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.segment-btn-enabled {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.segment-btn-enabled:hover,
|
||||
.segment-btn-enabled:focus {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.gap-v-5 {
|
||||
min-height: 0.341rem;
|
||||
}
|
||||
|
||||
.gap-h-5 {
|
||||
min-width: 0.341rem;
|
||||
}
|
||||
|
||||
.gap-v-10 {
|
||||
min-height: 0.682rem;
|
||||
}
|
||||
|
||||
.gap-h-10 {
|
||||
min-width: 0.682rem;
|
||||
}
|
||||
|
||||
.gap-v-15 {
|
||||
min-height: 1.023rem;
|
||||
}
|
||||
|
||||
.gap-h-15 {
|
||||
min-width: 1.023rem;
|
||||
}
|
||||
@@ -69,6 +69,10 @@
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.txt-onSurfaceVariant {
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.txt-shadow {
|
||||
text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.69);
|
||||
margin: 10px;
|
||||
@@ -214,6 +218,14 @@
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-15>scrolledwindow>* {
|
||||
margin-right: 1.023rem;
|
||||
}
|
||||
|
||||
.spacing-h-15>scrolledwindow:last-child>* {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v-5>box {
|
||||
margin-bottom: 0.341rem;
|
||||
}
|
||||
@@ -238,6 +250,22 @@
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v-5-revealer>scrolledwindow>* {
|
||||
margin-bottom: 0.341rem;
|
||||
}
|
||||
|
||||
.spacing-v-5-revealer>scrolledwindow:last-child>* {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-4>* {
|
||||
margin-right: 0.273rem;
|
||||
}
|
||||
|
||||
.spacing-h-4>*:last-child {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-5>* {
|
||||
margin-right: 0.341rem;
|
||||
}
|
||||
@@ -262,6 +290,14 @@
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-5>scrolledwindow>* {
|
||||
margin-right: 0.341rem;
|
||||
}
|
||||
|
||||
.spacing-h-5>scrolledwindow:last-child>* {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v-minus5>* {
|
||||
margin-bottom: -0.341rem;
|
||||
}
|
||||
@@ -286,6 +322,14 @@
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-10>scrolledwindow>* {
|
||||
margin-right: 0.682rem;
|
||||
}
|
||||
|
||||
.spacing-h-10>scrolledwindow:last-child>* {
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h-10>flowboxchild>* {
|
||||
margin-right: 0.682rem;
|
||||
}
|
||||
@@ -393,43 +437,43 @@
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v--5>box {
|
||||
.spacing-v--5>* {
|
||||
margin-bottom: -0.341rem;
|
||||
}
|
||||
|
||||
.spacing-v--5>box:last-child {
|
||||
.spacing-v--5>*:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v--5>label {
|
||||
margin-bottom: -0.341rem;
|
||||
}
|
||||
|
||||
.spacing-v--5>label:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v--10>box {
|
||||
margin-bottom: -0.682rem;
|
||||
}
|
||||
|
||||
.spacing-v--10>box:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v--10>label {
|
||||
margin-bottom: -0.682rem;
|
||||
}
|
||||
|
||||
.spacing-v--10>label:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h--20>box {
|
||||
.spacing-h--10>* {
|
||||
margin-left: -1.364rem;
|
||||
}
|
||||
|
||||
.spacing-h--20>box:first-child {
|
||||
.spacing-h--10>*:first-child {
|
||||
margin-left: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v--10>* {
|
||||
margin-bottom: -0.682rem;
|
||||
}
|
||||
|
||||
.spacing-v--10>*:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-v--10>* {
|
||||
margin-bottom: -0.682rem;
|
||||
}
|
||||
|
||||
.spacing-v--10>*:last-child {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.spacing-h--20>* {
|
||||
margin-left: -1.364rem;
|
||||
}
|
||||
|
||||
.spacing-h--20>*:first-child {
|
||||
margin-left: 0rem;
|
||||
}
|
||||
|
||||
@@ -439,4 +483,12 @@
|
||||
|
||||
.menu-decel {
|
||||
@include menu_decel;
|
||||
}
|
||||
|
||||
.element-show {
|
||||
@include element_easeInOut;
|
||||
}
|
||||
|
||||
.element-hide {
|
||||
@include element_easeInOut;
|
||||
}
|
||||
@@ -40,6 +40,7 @@ $rounding_large: 1.705rem;
|
||||
@mixin mainfont {
|
||||
// Other clean sans-serif
|
||||
font-family:
|
||||
'Rubik',
|
||||
'Geist',
|
||||
'AR One Sans',
|
||||
'Reddit Sans',
|
||||
@@ -160,6 +161,18 @@ $elevation_margin: 0.476rem;
|
||||
transition: 150ms cubic-bezier(0.3, 0, 0.8, 0.15);
|
||||
}
|
||||
|
||||
@mixin element_decel {
|
||||
transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
|
||||
}
|
||||
|
||||
@mixin element_accel {
|
||||
transition: 300ms cubic-bezier(0.55, 0, 1, 0.45);
|
||||
}
|
||||
|
||||
@mixin element_easeInOut {
|
||||
transition: 300ms cubic-bezier(0.85, 0, 0.15, 1);
|
||||
}
|
||||
|
||||
@function tint($color, $percentage) {
|
||||
@return mix(rgb(245, 250, 255), $color, $percentage);
|
||||
}
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
$darkmode: true;
|
||||
$primary: #c4c0ff;
|
||||
$onPrimary: #251a8c;
|
||||
$primaryContainer: #3d36a2;
|
||||
$onPrimaryContainer: #e3dfff;
|
||||
$secondary: #c7c4dd;
|
||||
$onSecondary: #2f2e42;
|
||||
$secondaryContainer: #464559;
|
||||
$onSecondaryContainer: #e3dff9;
|
||||
$tertiary: #eab9d1;
|
||||
$onTertiary: #472639;
|
||||
$tertiaryContainer: #603c50;
|
||||
$onTertiaryContainer: #ffd8eb;
|
||||
$primary: #ffabf1;
|
||||
$onPrimary: #551251;
|
||||
$primaryContainer: #702c69;
|
||||
$onPrimaryContainer: #ffd6f5;
|
||||
$secondary: #dbbed2;
|
||||
$onSecondary: #3d2b39;
|
||||
$secondaryContainer: #554050;
|
||||
$onSecondaryContainer: #f8daee;
|
||||
$tertiary: #f5b9a6;
|
||||
$onTertiary: #4c2619;
|
||||
$tertiaryContainer: #663c2e;
|
||||
$onTertiaryContainer: #ffdbcf;
|
||||
$error: #ffb4a9;
|
||||
$onError: #680003;
|
||||
$errorContainer: #930006;
|
||||
$onErrorContainer: #ffb4a9;
|
||||
$colorbarbg: #101012;
|
||||
$background: #101012;
|
||||
$onBackground: #e5e1e6;
|
||||
$surface: #1c1b1f;
|
||||
$onSurface: #e5e1e6;
|
||||
$surfaceVariant: #47464f;
|
||||
$onSurfaceVariant: #c8c5d0;
|
||||
$outline: #928f9a;
|
||||
$colorbarbg: #120F11;
|
||||
$background: #120F11;
|
||||
$onBackground: #eae0e4;
|
||||
$surface: #1f1a1d;
|
||||
$onSurface: #eae0e4;
|
||||
$surfaceVariant: #4e444b;
|
||||
$onSurfaceVariant: #d1c2cb;
|
||||
$outline: #9a8d95;
|
||||
$shadow: #000000;
|
||||
$inverseSurface: #e5e1e6;
|
||||
$inverseOnSurface: #313033;
|
||||
$inversePrimary: #5550bb;
|
||||
$inverseSurface: #eae0e4;
|
||||
$inverseOnSurface: #342f32;
|
||||
$inversePrimary: #8c4483;
|
||||
|
||||
@@ -4,11 +4,11 @@
|
||||
@import './musicwal';
|
||||
@import './colors';
|
||||
@import './lib_mixins';
|
||||
$music_gradient1: mix($color1, $background, 30%);
|
||||
$music_gradient1: mix($color1, $background, 50%);
|
||||
|
||||
@if $darkmode ==true {
|
||||
$music_gradient1: mix($color1, $background, 30%);
|
||||
}
|
||||
// @if $darkmode ==true {
|
||||
// $music_gradient1: mix($color1, $background, 30%);
|
||||
// }
|
||||
|
||||
$music_gradient2: $color3;
|
||||
$music_gradient3: $color5;
|
||||
@@ -17,6 +17,9 @@ $music_extra_transparentize: 0.15;
|
||||
|
||||
$secondaryContainer: transparentize(mix(mix($background, $color2, 50%), $color6, 80%), 0.5);
|
||||
$onSecondaryContainer: mix($color7, $color2, 90%);
|
||||
@if $darkmode ==false {
|
||||
$onSecondaryContainer: mix($onSecondaryContainer, black, 50%);
|
||||
}
|
||||
|
||||
.osd-music {
|
||||
@include menu_decel;
|
||||
|
||||
@@ -1 +1,29 @@
|
||||
|
||||
$darkmode: true;
|
||||
$primary: #ecb1ff;
|
||||
$onPrimary: #4f076e;
|
||||
$primaryContainer: #682886;
|
||||
$onPrimaryContainer: #f9d8ff;
|
||||
$secondary: #d4c0d8;
|
||||
$onSecondary: #392c3d;
|
||||
$secondaryContainer: #504254;
|
||||
$onSecondaryContainer: #f1dcf4;
|
||||
$tertiary: #f5b7b5;
|
||||
$onTertiary: #4c2525;
|
||||
$tertiaryContainer: #663b3a;
|
||||
$onTertiaryContainer: #ffdad8;
|
||||
$error: #ffb4a9;
|
||||
$onError: #680003;
|
||||
$errorContainer: #930006;
|
||||
$onErrorContainer: #ffb4a9;
|
||||
$colorbarbg: #120F12;
|
||||
$background: #120F12;
|
||||
$onBackground: #e8e0e5;
|
||||
$surface: #1e1a1e;
|
||||
$onSurface: #e8e0e5;
|
||||
$surfaceVariant: #4c444d;
|
||||
$onSurfaceVariant: #cec3cd;
|
||||
$outline: #978e97;
|
||||
$shadow: #000000;
|
||||
$inverseSurface: #e8e0e5;
|
||||
$inverseOnSurface: #332f33;
|
||||
$inversePrimary: #8342a1;
|
||||
|
||||
@@ -1 +1,26 @@
|
||||
// SCSS Variables
|
||||
// Generated by 'wal'
|
||||
$wallpaper: "/home/end/.cache/ags/media/c77cd3721bb54437609b42bd5254d1a16437f855";
|
||||
|
||||
// Special
|
||||
$background: #0C0820;
|
||||
$foreground: #e5c7e7;
|
||||
$cursor: #e5c7e7;
|
||||
|
||||
// Colors
|
||||
$color0: #0C0820;
|
||||
$color1: #3F26DE;
|
||||
$color2: #671AD9;
|
||||
$color3: #A152BD;
|
||||
$color4: #9E1EEA;
|
||||
$color5: #E424F5;
|
||||
$color6: #E65BF0;
|
||||
$color7: #e5c7e7;
|
||||
$color8: #a08ba1;
|
||||
$color9: #3F26DE;
|
||||
$color10: #671AD9;
|
||||
$color11: #A152BD;
|
||||
$color12: #9E1EEA;
|
||||
$color13: #E424F5;
|
||||
$color14: #E65BF0;
|
||||
$color15: #e5c7e7;
|
||||
|
||||
@@ -93,17 +93,18 @@ $notif_surface: $t_background;
|
||||
color: $secondaryContainer;
|
||||
}
|
||||
|
||||
.notif-close-btn {
|
||||
.notif-expand-btn {
|
||||
@include notif-rounding;
|
||||
padding: 0rem 0.136rem;
|
||||
min-width: 1.841rem;
|
||||
min-height: 1.841rem;
|
||||
}
|
||||
|
||||
.notif-close-btn:hover,
|
||||
.notif-close-btn:focus {
|
||||
.notif-expand-btn:hover,
|
||||
.notif-expand-btn:focus {
|
||||
background: $hovercolor;
|
||||
}
|
||||
|
||||
.notif-close-btn:active {
|
||||
.notif-expand-btn:active {
|
||||
background: $activecolor;
|
||||
}
|
||||
|
||||
@@ -123,14 +124,17 @@ $notif_surface: $t_background;
|
||||
|
||||
.osd-notif {
|
||||
@include notif-rounding;
|
||||
background-color: transparentize($background, $transparentize_surface_amount_subtract_surface);
|
||||
background-color: transparentize(
|
||||
$background,
|
||||
$transparentize_surface_amount_subtract_surface
|
||||
);
|
||||
min-width: 30.682rem;
|
||||
}
|
||||
|
||||
.notif-circprog-low {
|
||||
transition: 0ms linear;
|
||||
min-width: 0.136rem; // line width
|
||||
min-height: 1.770rem;
|
||||
min-height: 3.136rem;
|
||||
padding: 0rem;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
@@ -138,7 +142,7 @@ $notif_surface: $t_background;
|
||||
.notif-circprog-normal {
|
||||
transition: 0ms linear;
|
||||
min-width: 0.136rem; // line width
|
||||
min-height: 1.770rem;
|
||||
min-height: 3.136rem;
|
||||
padding: 0rem;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
@@ -146,7 +150,57 @@ $notif_surface: $t_background;
|
||||
.notif-circprog-critical {
|
||||
transition: 0ms linear;
|
||||
min-width: 0.136rem; // line width
|
||||
min-height: 1.770rem;
|
||||
min-height: 3.136rem;
|
||||
padding: 0rem;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
color: $secondaryContainer;
|
||||
}
|
||||
|
||||
.notif-actions {
|
||||
min-height: 2.045rem;
|
||||
}
|
||||
|
||||
.notif-action {
|
||||
@include small-rounding;
|
||||
}
|
||||
|
||||
.notif-action-low {
|
||||
background-color: mix($t_onSurfaceVariant, $t_surface, 10%);
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.notif-action-low:focus,
|
||||
.notif-action-low:hover {
|
||||
background-color: mix($t_onSurfaceVariant, $t_surface, 18%);
|
||||
}
|
||||
|
||||
.notif-action-low:active {
|
||||
background-color: mix($t_onSurfaceVariant, $t_surface, 23%);
|
||||
}
|
||||
|
||||
.notif-action-normal {
|
||||
background-color: mix($t_onSurfaceVariant, $t_surface, 10%);
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.notif-action-normal:focus,
|
||||
.notif-action-normal:hover {
|
||||
background-color: mix($t_onSurfaceVariant, $t_surface, 18%);
|
||||
}
|
||||
|
||||
.notif-action-normal:active {
|
||||
background-color: mix($t_onSurfaceVariant, $t_surface, 23%);
|
||||
}
|
||||
|
||||
.notif-action-critical {
|
||||
background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 10%);
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.notif-action-critical:focus,
|
||||
.notif-action-critical:hover {
|
||||
background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 18%);
|
||||
}
|
||||
|
||||
.notif-action-critical:active {
|
||||
background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 23%);
|
||||
}
|
||||
|
||||
@@ -1,15 +1,19 @@
|
||||
// .osd-window {
|
||||
// margin-top: 2.727rem;
|
||||
// }
|
||||
|
||||
.osd-bg {
|
||||
min-width: 8.864rem;
|
||||
min-height: 3.409rem;
|
||||
}
|
||||
|
||||
.osd-value {
|
||||
@include elevation-border;
|
||||
@include elevation2;
|
||||
background-color: $t_background;
|
||||
border-radius: 1.023rem;
|
||||
padding: 0.625rem 1.023rem;
|
||||
padding-top: 0.313rem;
|
||||
margin: 10px;
|
||||
@include elevation2;
|
||||
}
|
||||
|
||||
.osd-progress {
|
||||
@@ -113,4 +117,12 @@
|
||||
background-color: $background;
|
||||
color: $onBackground;
|
||||
box { background-color: $onBackground; }
|
||||
}
|
||||
|
||||
.osd-show {
|
||||
transition: 200ms cubic-bezier(0.1, 1, 0, 1);
|
||||
}
|
||||
|
||||
.osd-hide {
|
||||
transition: 190ms cubic-bezier(0.85, 0, 0.15, 1);
|
||||
}
|
||||
@@ -1,3 +1,7 @@
|
||||
.overview-window {
|
||||
margin-top: 2.727rem;
|
||||
}
|
||||
|
||||
.overview-search-box {
|
||||
@include menu_decel;
|
||||
@include large-rounding;
|
||||
|
||||
@@ -12,7 +12,7 @@ $onChatgpt: $onPrimary;
|
||||
@include menu_decel;
|
||||
@include elevation-border;
|
||||
@include elevation2;
|
||||
border-radius: $rounding_large - $elevation_margin;
|
||||
border-radius: $rounding_large - $elevation_margin + 0.068rem;
|
||||
min-width: 27.818rem; // COMMENT THIS LATER IF TEXT WRAP IS USED
|
||||
// min-height: 29.591rem;
|
||||
background-color: $t_background;
|
||||
@@ -33,7 +33,7 @@ $onChatgpt: $onPrimary;
|
||||
@include menu_decel;
|
||||
@include elevation-border;
|
||||
@include elevation2;
|
||||
border-radius: $rounding_large - $elevation_margin;
|
||||
border-radius: $rounding_large - $elevation_margin + 0.068rem;
|
||||
min-width: 27.818rem; // COMMENT THIS LATER IF TEXT WRAP IS USED
|
||||
// min-height: 29.591rem;
|
||||
background-color: $t_background;
|
||||
@@ -332,7 +332,7 @@ $onChatgpt: $onPrimary;
|
||||
|
||||
.sidebar-selector-tab {
|
||||
@include small-rounding;
|
||||
transition: 0ms;
|
||||
@include menu_decel;
|
||||
min-height: 2.5rem;
|
||||
color: $onSurface;
|
||||
}
|
||||
@@ -500,9 +500,28 @@ $onChatgpt: $onPrimary;
|
||||
min-height: 1.705rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-apiswitcher {
|
||||
@include full-rounding;
|
||||
@include group-padding;
|
||||
background-color: $t_surface;
|
||||
}
|
||||
|
||||
.sidebar-chat-apiswitcher-icon {
|
||||
@include menu_decel;
|
||||
@include full-rounding;
|
||||
min-width: 2.182rem;
|
||||
min-height: 2.182rem;
|
||||
color: $onSurface;
|
||||
}
|
||||
|
||||
.sidebar-chat-apiswitcher-icon-enabled {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.sidebar-chat-viewport {
|
||||
@include menu_decel;
|
||||
margin: 0.682rem 0rem;
|
||||
// margin: 0.682rem 0rem;
|
||||
padding: 0.682rem 0rem;
|
||||
}
|
||||
|
||||
@@ -645,7 +664,7 @@ $onChatgpt: $onPrimary;
|
||||
margin: 0rem 3.409rem;
|
||||
}
|
||||
|
||||
.sidebar-chat-settings {
|
||||
.sidebar-chat-settings-toggles {
|
||||
margin: 0rem 5.455rem;
|
||||
}
|
||||
|
||||
@@ -687,4 +706,38 @@ $onChatgpt: $onPrimary;
|
||||
.sidebar-chat-chip-action-active {
|
||||
color: $sidebar_chat_textboxareaColor;
|
||||
border: 0.068rem solid $sidebar_chat_textboxareaColor;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-pin {
|
||||
@include small-rounding;
|
||||
@include menu_decel;
|
||||
min-height: 2.386rem;
|
||||
min-width: 2.386rem;
|
||||
color: $onSurface;
|
||||
}
|
||||
|
||||
.sidebar-pin:hover,
|
||||
.sidebar-pin:focus {
|
||||
background-color: mix($t_surfaceVariant, $onSurfaceVariant, 90%);
|
||||
}
|
||||
|
||||
.sidebar-pin:active {
|
||||
background-color: mix($surfaceVariant, $onSurfaceVariant, 75%);
|
||||
}
|
||||
|
||||
.sidebar-pin-enabled {
|
||||
background-color: $primary;
|
||||
label {
|
||||
color: $onPrimary;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-pin-enabled:hover,
|
||||
.sidebar-pin-enabled:focus {
|
||||
background-color: mix($primary, $onPrimary, 90%);
|
||||
}
|
||||
|
||||
.sidebar-pin-enabled:active {
|
||||
background-color: mix($primary, $onPrimary, 80%);
|
||||
}
|
||||
|
||||
|
||||
@@ -32,3 +32,9 @@
|
||||
.fadingRadial {
|
||||
transition: 50ms cubic-bezier(0.2, 0.0, 0, 1.0);
|
||||
}
|
||||
.sidebar-pinned {
|
||||
margin: 0rem;
|
||||
border-radius: 0rem;
|
||||
border-bottom-right-radius: $rounding_large;
|
||||
border: 0rem solid;
|
||||
}
|
||||
Reference in New Issue
Block a user