Shinonome/dots-hyprland
1
0
Fork 1
mirror of https://github.com/end-4/dots-hyprland.git synced 2026-06-05 23:09:26 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki 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({
className: 'txt-smallie txt-onSurfaceVariant',
className: 'txt-smallie bar-batt-txt',
setup: (self) => self.hook(Battery, label => {
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 {
background-color: $workspaceSecondaryContainer;
color: $workspaceOnSecondaryContainer;
background-color: $workspaceLayer3;
color: $workspaceOnLayer3;
}
.bar-ws-occupied {
background-color: $layer2;
color: $workspaceOnSurfaceVariant;
color: $workspaceOnLayer2;
}
// 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-width: 1.77rem;
border-radius: 10rem;
background-color: $secondaryContainer;
color: $onSecondaryContainer;
color: $battOnLayer2;
}
.bar-batt-txt {
color: $battOnLayer1;
}
.bar-batt-circprog {
@@ -152,8 +155,8 @@ $bar_ws_width_focus_active: 2.045rem;
min-width: 0.068rem; // line width
min-height: 1.636rem;
padding: 0rem;
background-color: $secondaryContainer;
color: $onSecondaryContainer;
background-color: $battLayer2;
color: $battOnLayer2;
}
.bar-batt-circprog-low {
@@ -173,8 +176,7 @@ $bar_ws_width_focus_active: 2.045rem;
min-height: 1.77rem;
min-width: 1.77rem;
border-radius: 10rem;
background-color: $ramSecondaryContainer;
color: $ramOnSecondaryContainer;
color: $ramOnLayer2;
}
.bar-ram-circprog {
@@ -182,8 +184,8 @@ $bar_ws_width_focus_active: 2.045rem;
min-width: 0.068rem; // line width
min-height: 1.636rem;
padding: 0rem;
background-color: $ramSecondaryContainer;
color: $ramOnSecondaryContainer;
background-color: $ramLayer2;
color: $ramOnLayer2;
}
.bar-ram-txt {
@@ -196,8 +198,7 @@ $bar_ws_width_focus_active: 2.045rem;
min-height: 1.77rem;
min-width: 1.77rem;
border-radius: 10rem;
background-color: $swapSecondaryContainer;
color: $swapOnSecondaryContainer;
color: $swapOnLayer2;
}
.bar-swap-circprog {
@@ -205,8 +206,8 @@ $bar_ws_width_focus_active: 2.045rem;
min-width: 0.068rem; // line width
min-height: 1.636rem;
padding: 0rem;
background-color: $swapSecondaryContainer;
color: $swapOnSecondaryContainer;
background-color: $swapLayer2;
color: $swapOnLayer2;
}
.bar-swap-txt {
@@ -219,8 +220,7 @@ $bar_ws_width_focus_active: 2.045rem;
min-height: 1.77rem;
min-width: 1.77rem;
border-radius: 10rem;
background-color: $cpuSecondaryContainer;
color: $cpuOnSecondaryContainer;
color: $cpuOnLayer2;
}
.bar-cpu-circprog {
@@ -228,8 +228,8 @@ $bar_ws_width_focus_active: 2.045rem;
min-width: 0.068rem; // line width
min-height: 1.636rem;
padding: 0rem;
background-color: $cpuSecondaryContainer;
color: $cpuOnSecondaryContainer;
background-color: $cpuLayer2;
color: $cpuOnLayer2;
}
.bar-cpu-txt {
@@ -241,8 +241,7 @@ $bar_ws_width_focus_active: 2.045rem;
min-height: 1.77rem;
min-width: 1.77rem;
border-radius: 10rem;
background-color: $musicSecondaryContainer;
color: $musicOnSecondaryContainer;
color: $musicOnLayer2;
}
.bar-music-circprog {
@@ -250,16 +249,15 @@ $bar_ws_width_focus_active: 2.045rem;
min-width: 0.068rem; // line width
min-height: 1.636rem;
padding: 0rem;
background-color: $musicSecondaryContainer;
color: $musicOnSecondaryContainer;
background-color: $musicLayer2;
color: $musicOnLayer2;
}
.bar-music-playstate-playing {
min-height: 1.77rem;
min-width: 1.77rem;
border-radius: 10rem;
background-color: $musicSecondaryContainer;
color: $musicOnSecondaryContainer;
color: $musicOnLayer2;
}
.bar-music-playstate-txt {
.config/ags/scss/_colors.scss
+50 -12
View File
@@ -144,25 +144,63 @@ $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;
$ramLayer2: $secondaryContainer;
$ramOnLayer2: $onSecondaryContainer;
$swapOnLayer1: $onLayer1;
$swapSecondaryContainer: $secondaryContainer;
$swapOnSecondaryContainer: $onSecondaryContainer;
$swapLayer2: $secondaryContainer;
$swapOnLayer2: $onSecondaryContainer;
$cpuOnLayer1: $onLayer1;
$cpuSecondaryContainer: $secondaryContainer;
$cpuOnSecondaryContainer: $onSecondaryContainer;
$cpuLayer2: $secondaryContainer;
$cpuOnLayer2: $onSecondaryContainer;
$musicOnLayer1: $onLayer1;
$musicSecondaryContainer: $secondaryContainer;
$musicOnSecondaryContainer: $onSecondaryContainer;
$musicLayer2: $secondaryContainer;
$musicOnLayer2: $onSecondaryContainer;
$battOnLayer1: $onLayer1;
$battLayer2: $secondaryContainer;
$battOnLayer2: $onSecondaryContainer;
$workspaceOnLayer1Inactive: $onLayer1Inactive;
$workspaceSecondaryContainer: $secondaryContainer;
$workspaceOnSecondaryContainer: $onSecondaryContainer;
$workspaceOnSurfaceVariant: $onSurfaceVariant;
$workspaceLayer3: $secondaryContainer;
$workspaceOnLayer3: $onSecondaryContainer;
$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;