forked from Shinonome/dots-hyprland
bar: utils buttons, new battery indicator
This commit is contained in:
+49
-30
@@ -4,6 +4,10 @@
|
||||
$black: black;
|
||||
$white: white;
|
||||
$bar_ws_width: 1.774rem;
|
||||
$bar_subgroup_bg: mix($surfaceVariant, $primary, 89%);
|
||||
@if $darkmode ==true {
|
||||
$bar_subgroup_bg: $surfaceVariant;
|
||||
}
|
||||
|
||||
@mixin bar-group-rounding {
|
||||
@include small-rounding;
|
||||
@@ -33,6 +37,7 @@ $bar_ws_width: 1.774rem;
|
||||
.bar-group-pad {
|
||||
// padding: 0rem 1.023rem;
|
||||
padding: 0.205rem;
|
||||
// padding-left: 0.341rem;
|
||||
}
|
||||
|
||||
.bar-group-pad-less {
|
||||
@@ -41,7 +46,7 @@ $bar_ws_width: 1.774rem;
|
||||
|
||||
.bar-group-pad-system {
|
||||
padding-left: 1.023rem;
|
||||
padding-right: 0.547rem;
|
||||
padding-right: 0.341rem;
|
||||
}
|
||||
|
||||
.bar-group-pad-music {
|
||||
@@ -114,10 +119,7 @@ $bar_ws_width: 1.774rem;
|
||||
}
|
||||
|
||||
.bar-ws-occupied {
|
||||
background-color: mix($surfaceVariant, $primary, 89%);
|
||||
@if $darkmode ==true {
|
||||
background-color: $surfaceVariant;
|
||||
}
|
||||
background-color: $bar_subgroup_bg;
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
@@ -132,7 +134,6 @@ $bar_ws_width: 1.774rem;
|
||||
.bar-clock {
|
||||
@include titlefont;
|
||||
font-size: 1.2727rem;
|
||||
color: $onBackground;
|
||||
}
|
||||
|
||||
.bar-date {
|
||||
@@ -143,10 +144,11 @@ $bar_ws_width: 1.774rem;
|
||||
|
||||
.bar-batt {
|
||||
@include full-rounding;
|
||||
padding: 0rem 0.341rem;
|
||||
background-color: $t_secondaryContainer;
|
||||
color: $t_onSecondaryContainer;
|
||||
// border: 0.068rem solid $outline;
|
||||
min-height: 1.77rem;
|
||||
min-width: 1.77rem;
|
||||
border-radius: 10rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-sidemodule {
|
||||
@@ -163,12 +165,29 @@ $bar_ws_width: 1.774rem;
|
||||
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;
|
||||
}
|
||||
@@ -304,30 +323,14 @@ $bar_ws_width: 1.774rem;
|
||||
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 {
|
||||
@@ -400,3 +403,19 @@ $bar_ws_width: 1.774rem;
|
||||
.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%);
|
||||
}
|
||||
@@ -16,7 +16,7 @@ $transparency_enabled: false;
|
||||
@if $darkmode ==false {
|
||||
$background: mix($background, $primary, 87%);
|
||||
$surface: mix($surface, $primary, 93%);
|
||||
$surfaceVariant: mix($surfaceVariant, #FFFFFF, 25%);
|
||||
$surfaceVariant: mix($surfaceVariant, #ffffff, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -30,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%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -40,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
|
||||
@@ -49,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 {
|
||||
@@ -74,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);
|
||||
@@ -110,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%);
|
||||
|
||||
@@ -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;
|
||||
@@ -433,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;
|
||||
}
|
||||
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
|
||||
|
||||
@@ -14,7 +14,6 @@
|
||||
border-radius: 1.023rem;
|
||||
padding: 0.625rem 1.023rem;
|
||||
padding-top: 0.313rem;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.osd-progress {
|
||||
|
||||
Reference in New Issue
Block a user