bar: utils buttons, new battery indicator

This commit is contained in:
end-4
2023-12-31 01:01:05 +07:00
parent 7d4374d52b
commit 6a42af63ca
14 changed files with 351 additions and 244 deletions
+49 -30
View File
@@ -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%);
}
+58 -17
View File
@@ -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%);
+32 -28
View File
@@ -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
View File
@@ -1 +0,0 @@
-1
View File
@@ -14,7 +14,6 @@
border-radius: 1.023rem;
padding: 0.625rem 1.023rem;
padding-top: 0.313rem;
margin: 10px;
}
.osd-progress {