kenji/illogical-impulse
1
0
Fork 0
forked from Shinonome/dots-hyprland
Code Pull Requests Activity

update bar styles

Browse Source
This commit is contained in:
end-4
2024-03-15 22:56:14 +07:00
parent 01e60cd5f6
commit 14770aa80c
3 changed files with 74 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.config/ags/modules/bar/normal/system.js
+1 -1
View File
@@ -97,7 +97,7 @@ const BarBattery = () => Box({
}), }),
}), }),
Label({ Label({
className: 'txt-smallie txt-onSurfaceVariant', className: 'txt-smallie bar-batt-txt',
setup: (self) => self.hook(Battery, label => { setup: (self) => self.hook(Battery, label => {
label.label = `${Battery.percent}%`; label.label = `${Battery.percent}%`;
}), }),
.config/ags/scss/_bar.scss
+23 -25
View File
@@ -98,13 +98,13 @@ $bar_ws_width_focus_active: 2.045rem;
} }
.bar-ws-active { .bar-ws-active {
background-color: $workspaceSecondaryContainer; background-color: $workspaceLayer3;
color: $workspaceOnSecondaryContainer; color: $workspaceOnLayer3;
} }
.bar-ws-occupied { .bar-ws-occupied {
background-color: $layer2; background-color: $layer2;
color: $workspaceOnSurfaceVariant; color: $workspaceOnLayer2;
} }
// Focus is the bar mode name, not the workspace state! // Focus is the bar mode name, not the workspace state!
@@ -143,8 +143,11 @@ $bar_ws_width_focus_active: 2.045rem;
min-height: 1.77rem; min-height: 1.77rem;
min-width: 1.77rem; min-width: 1.77rem;
border-radius: 10rem; border-radius: 10rem;
background-color: $secondaryContainer; color: $battOnLayer2;
color: $onSecondaryContainer; }
.bar-batt-txt {
color: $battOnLayer1;
} }
.bar-batt-circprog { .bar-batt-circprog {
@@ -152,8 +155,8 @@ $bar_ws_width_focus_active: 2.045rem;
min-width: 0.068rem; // line width min-width: 0.068rem; // line width
min-height: 1.636rem; min-height: 1.636rem;
padding: 0rem; padding: 0rem;
background-color: $secondaryContainer; background-color: $battLayer2;
color: $onSecondaryContainer; color: $battOnLayer2;
} }
.bar-batt-circprog-low { .bar-batt-circprog-low {
@@ -173,8 +176,7 @@ $bar_ws_width_focus_active: 2.045rem;
min-height: 1.77rem; min-height: 1.77rem;
min-width: 1.77rem; min-width: 1.77rem;
border-radius: 10rem; border-radius: 10rem;
background-color: $ramSecondaryContainer; color: $ramOnLayer2;
color: $ramOnSecondaryContainer;
} }
.bar-ram-circprog { .bar-ram-circprog {
@@ -182,8 +184,8 @@ $bar_ws_width_focus_active: 2.045rem;
min-width: 0.068rem; // line width min-width: 0.068rem; // line width
min-height: 1.636rem; min-height: 1.636rem;
padding: 0rem; padding: 0rem;
background-color: $ramSecondaryContainer; background-color: $ramLayer2;
color: $ramOnSecondaryContainer; color: $ramOnLayer2;
} }
.bar-ram-txt { .bar-ram-txt {
@@ -196,8 +198,7 @@ $bar_ws_width_focus_active: 2.045rem;
min-height: 1.77rem; min-height: 1.77rem;
min-width: 1.77rem; min-width: 1.77rem;
border-radius: 10rem; border-radius: 10rem;
background-color: $swapSecondaryContainer; color: $swapOnLayer2;
color: $swapOnSecondaryContainer;
} }
.bar-swap-circprog { .bar-swap-circprog {
@@ -205,8 +206,8 @@ $bar_ws_width_focus_active: 2.045rem;
min-width: 0.068rem; // line width min-width: 0.068rem; // line width
min-height: 1.636rem; min-height: 1.636rem;
padding: 0rem; padding: 0rem;
background-color: $swapSecondaryContainer; background-color: $swapLayer2;
color: $swapOnSecondaryContainer; color: $swapOnLayer2;
} }
.bar-swap-txt { .bar-swap-txt {
@@ -219,8 +220,7 @@ $bar_ws_width_focus_active: 2.045rem;
min-height: 1.77rem; min-height: 1.77rem;
min-width: 1.77rem; min-width: 1.77rem;
border-radius: 10rem; border-radius: 10rem;
background-color: $cpuSecondaryContainer; color: $cpuOnLayer2;
color: $cpuOnSecondaryContainer;
} }
.bar-cpu-circprog { .bar-cpu-circprog {
@@ -228,8 +228,8 @@ $bar_ws_width_focus_active: 2.045rem;
min-width: 0.068rem; // line width min-width: 0.068rem; // line width
min-height: 1.636rem; min-height: 1.636rem;
padding: 0rem; padding: 0rem;
background-color: $cpuSecondaryContainer; background-color: $cpuLayer2;
color: $cpuOnSecondaryContainer; color: $cpuOnLayer2;
} }
.bar-cpu-txt { .bar-cpu-txt {
@@ -241,8 +241,7 @@ $bar_ws_width_focus_active: 2.045rem;
min-height: 1.77rem; min-height: 1.77rem;
min-width: 1.77rem; min-width: 1.77rem;
border-radius: 10rem; border-radius: 10rem;
background-color: $musicSecondaryContainer; color: $musicOnLayer2;
color: $musicOnSecondaryContainer;
} }
.bar-music-circprog { .bar-music-circprog {
@@ -250,16 +249,15 @@ $bar_ws_width_focus_active: 2.045rem;
min-width: 0.068rem; // line width min-width: 0.068rem; // line width
min-height: 1.636rem; min-height: 1.636rem;
padding: 0rem; padding: 0rem;
background-color: $musicSecondaryContainer; background-color: $musicLayer2;
color: $musicOnSecondaryContainer; color: $musicOnLayer2;
} }
.bar-music-playstate-playing { .bar-music-playstate-playing {
min-height: 1.77rem; min-height: 1.77rem;
min-width: 1.77rem; min-width: 1.77rem;
border-radius: 10rem; border-radius: 10rem;
background-color: $musicSecondaryContainer; color: $musicOnLayer2;
color: $musicOnSecondaryContainer;
} }
.bar-music-playstate-txt { .bar-music-playstate-txt {
.config/ags/scss/_colors.scss
+50 -12
View File
@@ -144,25 +144,63 @@ $onLayer2: $onSurfaceVariant;
$layer2Hover: mix($layer2, $onSurfaceVariant, 90%); $layer2Hover: mix($layer2, $onSurfaceVariant, 90%);
$layer2Active: mix($layer2, $onSurfaceVariant, 80%); $layer2Active: mix($layer2, $onSurfaceVariant, 80%);
// Elements // Elements
// For now they just use Material colors. I'll make a proper theme later
$windowtitleOnLayer1Inactive: $onLayer1; $windowtitleOnLayer1Inactive: $onLayer1;
$timeOnLayer1: $onLayer1; $timeOnLayer1: $onLayer1;
$dateOnLayer1: $onLayer1; $dateOnLayer1: $onLayer1;
$ramOnLayer1: $onLayer1; $ramOnLayer1: $onLayer1;
$ramSecondaryContainer: $secondaryContainer; $ramLayer2: $secondaryContainer;
$ramOnSecondaryContainer: $onSecondaryContainer; $ramOnLayer2: $onSecondaryContainer;
$swapOnLayer1: $onLayer1; $swapOnLayer1: $onLayer1;
$swapSecondaryContainer: $secondaryContainer; $swapLayer2: $secondaryContainer;
$swapOnSecondaryContainer: $onSecondaryContainer; $swapOnLayer2: $onSecondaryContainer;
$cpuOnLayer1: $onLayer1; $cpuOnLayer1: $onLayer1;
$cpuSecondaryContainer: $secondaryContainer; $cpuLayer2: $secondaryContainer;
$cpuOnSecondaryContainer: $onSecondaryContainer; $cpuOnLayer2: $onSecondaryContainer;
$musicOnLayer1: $onLayer1; $musicOnLayer1: $onLayer1;
$musicSecondaryContainer: $secondaryContainer; $musicLayer2: $secondaryContainer;
$musicOnSecondaryContainer: $onSecondaryContainer; $musicOnLayer2: $onSecondaryContainer;
$battOnLayer1: $onLayer1;
$battLayer2: $secondaryContainer;
$battOnLayer2: $onSecondaryContainer;
$workspaceOnLayer1Inactive: $onLayer1Inactive; $workspaceOnLayer1Inactive: $onLayer1Inactive;
$workspaceSecondaryContainer: $secondaryContainer; $workspaceLayer3: $secondaryContainer;
$workspaceOnSecondaryContainer: $onSecondaryContainer; $workspaceOnLayer3: $onSecondaryContainer;
$workspaceOnSurfaceVariant: $onSurfaceVariant; $workspaceOnLayer2: $onSurfaceVariant;
///////////////////// test theme: amarena (kind of) /////////////////////////
// $layer0: #0e1116;
// $onLayer0: #FFFFFF;
// $layer0Active: mix($t_background, $t_onBackground, 80%);
// $layer1: #171c22;
// $onLayer1Inactive: mix($onBackground, $background, 45%);
// $onLayer1: $onSurfaceVariant;
// $layer2: #252c35;
// $onLayer2: $onSurfaceVariant;
// $layer2Hover: mix($layer2, $onSurfaceVariant, 90%);
// $layer2Active: mix($layer2, $onSurfaceVariant, 80%);
// $layer3: #1C232A;
// $windowtitleOnLayer1Inactive: $onLayer1;
// $timeOnLayer1: #cc7691;
// $dateOnLayer1: #cc7691;
// $ramOnLayer1: #61adc0;
// $ramLayer2: $layer2;
// $ramOnLayer2: #61adc0;
// $swapOnLayer1: #b371ad;
// $swapLayer2: $layer2;
// $swapOnLayer2: #b371ad;
// $cpuOnLayer1: #7db17d;
// $cpuLayer2: $layer2;
// $cpuOnLayer2: #7db17d;
// $musicOnLayer1: #b64a6e;
// $musicLayer2: $layer2;
// $musicOnLayer2: #b64a6e;
// $battOnLayer1: #7db17d;
// $battLayer2: $layer2;
// $battOnLayer2: #7db17d;
// $workspaceOnLayer1Inactive: $onLayer1Inactive;
// $workspaceLayer3: #33554f;
// $workspaceOnLayer3: #84EFDB;
// $workspaceOnLayer2: #84EFDB;