forked from Shinonome/dots-hyprland
separate scss color vars for bar elements (1) (#327)
This commit is contained in:
end-4
+109
-84
@@ -1,12 +1,8 @@
|
||||
// Made to be pixel-perfect with 11pt font size
|
||||
// 1rem = 11pt = 14.6666666667px
|
||||
|
||||
$black: black;
|
||||
$white: white;
|
||||
$bar_ws_width: 1.774rem;
|
||||
$bar_ws_width_focus: 0.614rem;
|
||||
$bar_ws_width_focus_active: 2.045rem;
|
||||
$bar_subgroup_bg: $surfaceVariant;
|
||||
|
||||
@mixin bar-group-rounding {
|
||||
@include small-rounding;
|
||||
@@ -17,12 +13,12 @@ $bar_subgroup_bg: $surfaceVariant;
|
||||
}
|
||||
|
||||
.bar-bg {
|
||||
background-color: $t_background;
|
||||
background-color: $layer0;
|
||||
min-height: 2.727rem;
|
||||
}
|
||||
|
||||
.bar-bg-focus {
|
||||
background-color: $t_background;
|
||||
background-color: $layer0;
|
||||
min-height: 1.364rem;
|
||||
}
|
||||
|
||||
@@ -39,7 +35,7 @@ $bar_subgroup_bg: $surfaceVariant;
|
||||
}
|
||||
|
||||
.bar-group {
|
||||
background-color: $l_l_t_surfaceVariant;
|
||||
background-color: $layer1;
|
||||
}
|
||||
|
||||
.bar-group-pad {
|
||||
@@ -88,70 +84,57 @@ $bar_subgroup_bg: $surfaceVariant;
|
||||
border-bottom-right-radius: 1.364rem;
|
||||
}
|
||||
|
||||
.bar-sidemodule {
|
||||
min-width: 26rem;
|
||||
}
|
||||
|
||||
.bar-ws-width {
|
||||
min-width: 18.341rem;
|
||||
}
|
||||
|
||||
.bar-ws {
|
||||
min-width: $bar_ws_width;
|
||||
color: mix($onBackground, $background, 40%);
|
||||
|
||||
@if $darkmode ==true {
|
||||
color: mix($onBackground, $background, 45%);
|
||||
}
|
||||
color: $workspaceOnLayer1Inactive;
|
||||
}
|
||||
|
||||
.bar-ws-active {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
background-color: $workspaceSecondaryContainer;
|
||||
color: $workspaceOnSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-ws-occupied {
|
||||
background-color: $bar_subgroup_bg;
|
||||
color: $onSurfaceVariant;
|
||||
background-color: $layer2;
|
||||
color: $workspaceOnSurfaceVariant;
|
||||
}
|
||||
|
||||
// Focus is the bar mode name, not the workspace state!
|
||||
|
||||
.bar-ws-focus {
|
||||
background-color: $bar_subgroup_bg;
|
||||
background-color: $layer2;
|
||||
min-width: $bar_ws_width_focus;
|
||||
}
|
||||
|
||||
.bar-ws-focus-active {
|
||||
min-width: $bar_ws_width_focus_active;
|
||||
background-color: $onBackground;
|
||||
background-color: $layer2;
|
||||
}
|
||||
|
||||
.bar-ws-focus-occupied {
|
||||
background-color: mix($onBackground, $background, 40%);
|
||||
|
||||
@if $darkmode ==true {
|
||||
background-color: mix($onBackground, $background, 45%);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
background-color: $layer2;
|
||||
}
|
||||
|
||||
.bar-clock-box {
|
||||
margin: 0rem 0.682rem;
|
||||
}
|
||||
|
||||
.bar-clock {
|
||||
.bar-time {
|
||||
@include titlefont;
|
||||
font-size: 1.2727rem;
|
||||
color: $timeOnLayer1;
|
||||
}
|
||||
|
||||
.bar-date {
|
||||
@include titlefont;
|
||||
font-size: 1rem;
|
||||
color: $onBackground;
|
||||
color: $dateOnLayer1;
|
||||
}
|
||||
|
||||
.bar-batt {
|
||||
@@ -164,20 +147,6 @@ $bar_subgroup_bg: $surfaceVariant;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-sidemodule {
|
||||
min-width: 26rem;
|
||||
}
|
||||
|
||||
.bar-batt-low {
|
||||
background-color: $error;
|
||||
color: $errorContainer;
|
||||
}
|
||||
|
||||
.bar-batt-full {
|
||||
// background-color: $successContainer;
|
||||
// color: $onSuccessContainer;
|
||||
}
|
||||
|
||||
.bar-batt-circprog {
|
||||
@include fluent_decel_long;
|
||||
min-width: 0.068rem; // line width
|
||||
@@ -192,9 +161,79 @@ $bar_subgroup_bg: $surfaceVariant;
|
||||
color: $errorContainer;
|
||||
}
|
||||
|
||||
.bar-batt-circprog-full {
|
||||
// background-color: $successContainer;
|
||||
// color: $onSuccessContainer;
|
||||
|
||||
.bar-batt-low {
|
||||
background-color: $error;
|
||||
color: $errorContainer;
|
||||
}
|
||||
|
||||
.bar-ram-icon {
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
min-height: 1.77rem;
|
||||
min-width: 1.77rem;
|
||||
border-radius: 10rem;
|
||||
background-color: $ramSecondaryContainer;
|
||||
color: $ramOnSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-ram-circprog {
|
||||
@include fluent_decel_long;
|
||||
min-width: 0.068rem; // line width
|
||||
min-height: 1.636rem;
|
||||
padding: 0rem;
|
||||
background-color: $ramSecondaryContainer;
|
||||
color: $ramOnSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-ram-txt {
|
||||
color: $ramOnLayer1;
|
||||
}
|
||||
|
||||
.bar-swap-icon {
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
min-height: 1.77rem;
|
||||
min-width: 1.77rem;
|
||||
border-radius: 10rem;
|
||||
background-color: $swapSecondaryContainer;
|
||||
color: $swapOnSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-swap-circprog {
|
||||
@include fluent_decel_long;
|
||||
min-width: 0.068rem; // line width
|
||||
min-height: 1.636rem;
|
||||
padding: 0rem;
|
||||
background-color: $swapSecondaryContainer;
|
||||
color: $swapOnSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-swap-txt {
|
||||
color: $swapOnLayer1;
|
||||
}
|
||||
|
||||
.bar-cpu-icon {
|
||||
@include full-rounding;
|
||||
@include element_decel;
|
||||
min-height: 1.77rem;
|
||||
min-width: 1.77rem;
|
||||
border-radius: 10rem;
|
||||
background-color: $cpuSecondaryContainer;
|
||||
color: $cpuOnSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-cpu-circprog {
|
||||
@include fluent_decel_long;
|
||||
min-width: 0.068rem; // line width
|
||||
min-height: 1.636rem;
|
||||
padding: 0rem;
|
||||
background-color: $cpuSecondaryContainer;
|
||||
color: $cpuOnSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-cpu-txt {
|
||||
color: $cpuOnLayer1;
|
||||
}
|
||||
|
||||
.bar-music-playstate {
|
||||
@@ -202,8 +241,8 @@ $bar_subgroup_bg: $surfaceVariant;
|
||||
min-height: 1.77rem;
|
||||
min-width: 1.77rem;
|
||||
border-radius: 10rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
background-color: $musicSecondaryContainer;
|
||||
color: $musicOnSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-music-circprog {
|
||||
@@ -211,16 +250,16 @@ $bar_subgroup_bg: $surfaceVariant;
|
||||
min-width: 0.068rem; // line width
|
||||
min-height: 1.636rem;
|
||||
padding: 0rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
background-color: $musicSecondaryContainer;
|
||||
color: $musicOnSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-music-playstate-playing {
|
||||
min-height: 1.77rem;
|
||||
min-width: 1.77rem;
|
||||
border-radius: 10rem;
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
background-color: $musicSecondaryContainer;
|
||||
color: $musicOnSecondaryContainer;
|
||||
}
|
||||
|
||||
.bar-music-playstate-txt {
|
||||
@@ -228,6 +267,10 @@ $bar_subgroup_bg: $surfaceVariant;
|
||||
@include icon-material;
|
||||
}
|
||||
|
||||
.bar-music-txt {
|
||||
color: $musicOnLayer1;
|
||||
}
|
||||
|
||||
.bar-music-cover {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@@ -240,11 +283,6 @@ $bar_subgroup_bg: $surfaceVariant;
|
||||
min-width: 34.091rem;
|
||||
}
|
||||
|
||||
.bar-music-extended-ctl-bg {
|
||||
border-radius: 1.364rem;
|
||||
background-color: rgba(30, 30, 30, 0.6);
|
||||
}
|
||||
|
||||
.bar-music-hide-false {
|
||||
@include menu_decel;
|
||||
transition-duration: 100ms;
|
||||
@@ -263,7 +301,7 @@ $bar_subgroup_bg: $surfaceVariant;
|
||||
}
|
||||
|
||||
.corner {
|
||||
background-color: $t_background;
|
||||
background-color: $layer0;
|
||||
@include large-rounding;
|
||||
}
|
||||
|
||||
@@ -275,7 +313,7 @@ $bar_subgroup_bg: $surfaceVariant;
|
||||
.bar-topdesc {
|
||||
margin-top: -0.136rem;
|
||||
margin-bottom: -0.341rem;
|
||||
color: $subtext;
|
||||
color: $windowtitleOnLayer1Inactive;
|
||||
}
|
||||
|
||||
.bar-space-button {
|
||||
@@ -287,15 +325,6 @@ $bar_subgroup_bg: $surfaceVariant;
|
||||
padding: 0rem 0.682rem;
|
||||
}
|
||||
|
||||
.bar-space-button:hover>box:first-child,
|
||||
.bar-space-button:focus>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;
|
||||
@@ -327,12 +356,8 @@ $bar_subgroup_bg: $surfaceVariant;
|
||||
padding: 0rem 0.614rem;
|
||||
}
|
||||
|
||||
.bar-statusicons-hover {
|
||||
background-color: mix($t_background, $t_onBackground, 90%);
|
||||
}
|
||||
|
||||
.bar-statusicons-active {
|
||||
background-color: mix($t_background, $t_onBackground, 80%);
|
||||
background-color: $layer0Active;
|
||||
}
|
||||
|
||||
.bar-util-btn {
|
||||
@@ -340,16 +365,17 @@ $bar_subgroup_bg: $surfaceVariant;
|
||||
@include element_decel;
|
||||
min-height: 1.77rem;
|
||||
min-width: 1.77rem;
|
||||
background-color: $bar_subgroup_bg;
|
||||
background-color: $layer2;
|
||||
color: $onLayer2;
|
||||
}
|
||||
|
||||
.bar-util-btn:hover,
|
||||
.bar-util-btn:focus {
|
||||
background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 90%);
|
||||
background-color: $layer2Hover;
|
||||
}
|
||||
|
||||
.bar-util-btn:active {
|
||||
background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 80%);
|
||||
background-color: $layer2Active;
|
||||
}
|
||||
|
||||
.bar-bluetooth-device {
|
||||
@@ -358,7 +384,6 @@ $bar_subgroup_bg: $surfaceVariant;
|
||||
min-height: 1.032rem;
|
||||
min-width: 1.032rem;
|
||||
font-size: 1.032rem;
|
||||
background-color: $surface;
|
||||
color: $onSurface;
|
||||
color: $onLayer0;
|
||||
padding: 0.205rem 0.341rem;
|
||||
}
|
||||
@@ -116,6 +116,8 @@ $hovercolor: mix($t_surface, $t_onSurface, 50%);
|
||||
$activecolor: mix($t_surface, $t_onSurface, 30%);
|
||||
$subtext: mix($onBackground, $background, 70%);
|
||||
$actiontext: mix($onBackground, $background, 85%);
|
||||
$black: black;
|
||||
$white: white;
|
||||
|
||||
// Terminal colors
|
||||
$termbg: mix($t_surfaceVariant, $t_onSurfaceVariant, 80%);
|
||||
@@ -127,4 +129,40 @@ $term3: $onPrimaryContainer;
|
||||
$term4: $onPrimaryContainer;
|
||||
$term5: $onSecondaryContainer;
|
||||
$term6: $primary;
|
||||
$term7: $onSurfaceVariant;
|
||||
$term7: $onSurfaceVariant;
|
||||
|
||||
/// Color mappings for more chaotic, dynamic colors like the average rice ///
|
||||
// General
|
||||
$layer0: $t_background;
|
||||
$onLayer0: $onBackground;
|
||||
$layer0Active: mix($t_background, $t_onBackground, 80%);
|
||||
$layer1: $surface;
|
||||
$onLayer1Inactive: mix($onBackground, $background, 45%);
|
||||
$onLayer1: $onSurfaceVariant;
|
||||
$layer2: $surfaceVariant;
|
||||
$onLayer2: $onSurfaceVariant;
|
||||
$layer2Hover: mix($layer2, $onSurfaceVariant, 90%);
|
||||
$layer2Active: mix($layer2, $onSurfaceVariant, 80%);
|
||||
// Elements
|
||||
// For now they just use Material colors. I'll make a proper theme later
|
||||
$windowtitleOnLayer1Inactive: $onLayer1;
|
||||
$timeOnLayer1: $onLayer1;
|
||||
$dateOnLayer1: $onLayer1;
|
||||
$ramOnLayer1: $onLayer1;
|
||||
$ramSecondaryContainer: $secondaryContainer;
|
||||
$ramOnSecondaryContainer: $onSecondaryContainer;
|
||||
$swapOnLayer1: $onLayer1;
|
||||
$swapSecondaryContainer: $secondaryContainer;
|
||||
$swapOnSecondaryContainer: $onSecondaryContainer;
|
||||
$cpuOnLayer1: $onLayer1;
|
||||
$cpuSecondaryContainer: $secondaryContainer;
|
||||
$cpuOnSecondaryContainer: $onSecondaryContainer;
|
||||
$musicOnLayer1: $onLayer1;
|
||||
$musicSecondaryContainer: $secondaryContainer;
|
||||
$musicOnSecondaryContainer: $onSecondaryContainer;
|
||||
|
||||
$workspaceOnLayer1Inactive: $onLayer1Inactive;
|
||||
$workspaceSecondaryContainer: $secondaryContainer;
|
||||
$workspaceOnSecondaryContainer: $onSecondaryContainer;
|
||||
$workspaceOnSurfaceVariant: $onSurfaceVariant;
|
||||
|
||||
|
||||
@@ -50,6 +50,10 @@
|
||||
color: $onSurfaceVariant;
|
||||
}
|
||||
|
||||
.txt-onLayer1 {
|
||||
color: $onLayer1;
|
||||
}
|
||||
|
||||
.txt-shadow {
|
||||
text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.69);
|
||||
margin: 10px;
|
||||
|
||||
Reference in New Issue
Block a user