LESA/custum-hyprpanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated the margins for the dashboard menu to auto-adjust based on configuration. (#369)

Browse Source
This commit is contained in:
Jas Singh
2024-10-25 01:40:18 -07:00
committed by GitHub
parent fcdba86fec
commit 2d1e230405
1 changed files with 578 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

304
scss/style/menus/dashboard.scss
View File

@@ -3,10 +3,11 @@
} }
.dashboard-content-items { .dashboard-content-items {
margin-left: 0.50em; margin-left: 0.5em;
min-width: 28.5em; min-width: 28.5em;
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-background-color); background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-background-color);
border: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-dashboard-border-color); border: $bar-menus-border-size solid
if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-dashboard-border-color);
border-radius: $bar-menus-border-radius; border-radius: $bar-menus-border-radius;
opacity: $bar-menus-opacity * 0.01; opacity: $bar-menus-opacity * 0.01;
@@ -16,14 +17,13 @@
.dashboard-card { .dashboard-card {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-card-color); background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-card-color);
margin: 1.3em; margin: 0em 1.3em;
border-radius: $bar-menus-card_radius; border-radius: $bar-menus-card_radius;
padding: 1.5em; padding: 1.5em;
} }
.profile-picture-container { .profile-picture-container {
margin-right: 0.65em; margin-right: 0.65em;
margin-bottom: 0.65em;
.profile-picture { .profile-picture {
min-width: $bar-menus-menu-dashboard-profile-size; min-width: $bar-menus-menu-dashboard-profile-size;
@@ -43,7 +43,6 @@
.power-menu-container { .power-menu-container {
margin-left: 0em; margin-left: 0em;
margin-bottom: 0.65em;
.dashboard-button { .dashboard-button {
min-width: 3em; min-width: 3em;
@@ -59,7 +58,11 @@
} }
&.shutdown { &.shutdown {
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-shutdown); background: if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-powermenu-shutdown
);
label { label {
font-size: 1.9em; font-size: 1.9em;
@@ -67,7 +70,11 @@
} }
&.restart { &.restart {
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-restart); background: if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-powermenu-restart
);
label { label {
font-size: 1.9em; font-size: 1.9em;
@@ -75,32 +82,66 @@
} }
&.lock { &.lock {
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-logout); background: if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-powermenu-logout
);
} }
&.sleep { &.sleep {
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-sleep); background: if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-powermenu-sleep
);
} }
&:hover { &:hover {
&.shutdown { &.shutdown {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-shutdown), 0.5); background: transparentize(
if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-powermenu-shutdown
),
0.5
);
} }
&.restart { &.restart {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-restart), 0.5); background: transparentize(
if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-powermenu-restart
),
0.5
);
} }
&.lock { &.lock {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-logout), 0.5); background: transparentize(
if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-powermenu-logout
),
0.5
);
} }
&.sleep { &.sleep {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-sleep), 0.5); background: transparentize(
if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-powermenu-sleep
),
0.5
);
} }
} }
} }
} }
@@ -126,7 +167,6 @@
.container { .container {
margin-top: 0em; margin-top: 0em;
margin-bottom: 0.65em;
&.most-used { &.most-used {
margin-right: 0.65em; margin-right: 0.65em;
@@ -137,7 +177,11 @@
} }
button { button {
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-shortcuts-background); background: if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-shortcuts-background
);
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text); color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text);
min-height: 3em; min-height: 3em;
@@ -154,15 +198,20 @@
} }
&:hover { &:hover {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-shortcuts-background), 0.5); background: transparentize(
if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-shortcuts-background
),
0.5
);
} }
} }
} }
} }
.controls-container { .controls-container {
margin-bottom: 0.65em;
&.dashboard-card { &.dashboard-card {
margin-top: 0em; margin-top: 0em;
} }
@@ -182,66 +231,160 @@
} }
&.wifi { &.wifi {
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-wifi-background); background: if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-controls-wifi-background
);
} }
&.bluetooth { &.bluetooth {
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-bluetooth-background); background: if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-controls-bluetooth-background
);
} }
&.notifications { &.notifications {
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-notifications-background); background: if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-controls-notifications-background
);
} }
&.playback { &.playback {
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-volume-background); background: if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-controls-volume-background
);
} }
&.input { &.input {
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-input-background); background: if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-controls-input-background
);
} }
&.wifi:hover { &.wifi:hover {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-wifi-background), 0.5); background: transparentize(
if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-controls-wifi-background
),
0.5
);
} }
&.bluetooth:hover { &.bluetooth:hover {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-bluetooth-background), 0.5); background: transparentize(
if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-controls-bluetooth-background
),
0.5
);
} }
&.notifications:hover { &.notifications:hover {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-notifications-background), 0.5); background: transparentize(
if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-controls-notifications-background
),
0.5
);
} }
&.playback:hover { &.playback:hover {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-volume-background), 0.5); background: transparentize(
if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-controls-volume-background
),
0.5
);
} }
&.input:hover { &.input:hover {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-input-background), 0.5); background: transparentize(
if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-controls-input-background
),
0.5
);
} }
&.disabled { &.disabled {
background: if($bar-menus-monochrome, $bar-menus-buttons-disabled, $bar-menus-menu-dashboard-controls-disabled); background: if(
$bar-menus-monochrome,
$bar-menus-buttons-disabled,
$bar-menus-menu-dashboard-controls-disabled
);
&.wifi:hover { &.wifi:hover {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-wifi-background), 0.5); background: transparentize(
if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-controls-wifi-background
),
0.5
);
} }
&.bluetooth:hover { &.bluetooth:hover {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-bluetooth-background), 0.5); background: transparentize(
if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-controls-bluetooth-background
),
0.5
);
} }
&.notifications:hover { &.notifications:hover {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-notifications-background), 0.5); background: transparentize(
if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-controls-notifications-background
),
0.5
);
} }
&.playback:hover { &.playback:hover {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-volume-background), 0.5); background: transparentize(
if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-controls-volume-background
),
0.5
);
} }
&.input:hover { &.input:hover {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-input-background), 0.5); background: transparentize(
if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-controls-input-background
),
0.5
);
} }
} }
} }
@@ -250,7 +393,6 @@
.directories-container { .directories-container {
&.dashboard-card { &.dashboard-card {
margin-top: 0em; margin-top: 0em;
margin-bottom: 0.65em;
padding-left: 1.5em; padding-left: 1.5em;
padding-right: 0em; padding-right: 0em;
} }
@@ -268,27 +410,51 @@
} }
&.right.top { &.right.top {
color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-right-top-color); color: if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-directories-right-top-color
);
} }
&.right.middle { &.right.middle {
color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-right-middle-color); color: if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-directories-right-middle-color
);
} }
&.right.bottom { &.right.bottom {
color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-right-bottom-color); color: if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-directories-right-bottom-color
);
} }
&.left.top { &.left.top {
color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-left-top-color); color: if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-directories-left-top-color
);
} }
&.left.middle { &.left.middle {
color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-left-middle-color); color: if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-directories-left-middle-color
);
} }
&.left.bottom { &.left.bottom {
color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-left-bottom-color); color: if(
$bar-menus-monochrome,
$bar-menus-buttons-default,
$bar-menus-menu-dashboard-directories-left-bottom-color
);
} }
&:hover { &:hover {
@@ -336,7 +502,11 @@
border-radius: 0.4em; border-radius: 0.4em;
&.empty { &.empty {
background: if($bar-menus-monochrome, $bar-menus-progressbar-background, $bar-menus-menu-dashboard-monitors-bar_background); background: if(
$bar-menus-monochrome,
$bar-menus-progressbar-background,
$bar-menus-menu-dashboard-monitors-bar_background
);
} }
&.filled { &.filled {
@@ -346,24 +516,40 @@
} }
&.cpu .stats-bar block.filled { &.cpu .stats-bar block.filled {
background: if($bar-menus-monochrome, $bar-menus-progressbar-foreground, $bar-menus-menu-dashboard-monitors-cpu-bar); background: if(
$bar-menus-monochrome,
$bar-menus-progressbar-foreground,
$bar-menus-menu-dashboard-monitors-cpu-bar
);
} }
&.ram .stats-bar block.filled { &.ram .stats-bar block.filled {
background: if($bar-menus-monochrome, $bar-menus-progressbar-foreground, $bar-menus-menu-dashboard-monitors-ram-bar); background: if(
$bar-menus-monochrome,
$bar-menus-progressbar-foreground,
$bar-menus-menu-dashboard-monitors-ram-bar
);
} }
&.gpu .stats-bar block.filled { &.gpu .stats-bar block.filled {
background: if($bar-menus-monochrome, $bar-menus-progressbar-foreground, $bar-menus-menu-dashboard-monitors-gpu-bar); background: if(
$bar-menus-monochrome,
$bar-menus-progressbar-foreground,
$bar-menus-menu-dashboard-monitors-gpu-bar
);
} }
&.storage .stats-bar block.filled { &.storage .stats-bar block.filled {
background: if($bar-menus-monochrome, $bar-menus-progressbar-foreground, $bar-menus-menu-dashboard-monitors-disk-bar); background: if(
$bar-menus-monochrome,
$bar-menus-progressbar-foreground,
$bar-menus-menu-dashboard-monitors-disk-bar
);
} }
} }
.stat-value { .stat-value {
margin-bottom: 0.75em; margin-bottom: 0.5em;
font-size: 0.9em; font-size: 0.9em;
&.cpu { &.cpu {
@@ -384,3 +570,23 @@
} }
} }
} }
.dashboard-content-items > :not(:first-child):not(:last-child) {
margin-top: 0;
margin-bottom: 0.65em;
}
.dashboard-content-items > :first-child {
margin-top: 1.3em;
margin-bottom: 0.65em;
}
.dashboard-content-items > :last-child {
margin-top: 0;
margin-bottom: 1.3em;
}
.dashboard-content-items > :only-child {
margin-top: 1.3em;
margin-bottom: 1.3em;
}