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

Implement styling options for all the bar components (not menus) through options variables.

Browse Source
This commit is contained in:
Jas Singh
2024-07-17 01:44:50 -07:00
parent f4ff5bba27
commit 50eeb4275d
64 changed files with 783 additions and 2074 deletions
Download Patch File Download Diff File Expand all files Collapse all files

338
scss/style/menus/dashboard.scss Normal file
View File

@@ -0,0 +1,338 @@
@import "../colors";
.dashboard-content-items {
margin-left: 0.50em;
min-width: 28.5em;
background: $crust;
border: 0.13em solid $surface0;
border-radius: 0.7em;
button {
border-radius: 0.4em;
}
.dashboard-card {
background: $base;
margin: 1.3em;
border-radius: 0.4em;
padding: 1.5em;
}
.profile-picture-container {
margin-right: 0.65em;
margin-bottom: 0.65em;
.profile-picture {
font-size: 7.5em;
}
.profile-name {
font-size: 1.5em;
color: $pink;
margin-top: 0.75em;
}
}
.power-menu-container {
margin-left: 0em;
margin-bottom: 0.65em;
.dashboard-button {
min-width: 3em;
min-height: 2.5em;
&:not(:last-child) {
margin-bottom: 0.75em;
}
image {
color: $base;
font-size: 1.5em;
}
&.shutdown {
background: $red;
}
&.restart {
background: $peach;
}
&.lock {
background: $green;
}
&.sleep {
background: $sky;
}
&:hover {
background: $mauve;
}
}
}
.shortcuts-container {
.dashboard-card {
padding: 1.5em;
button {
min-height: 2.5em;
min-width: 2.5em;
}
}
.card-button-left-section {
margin-right: 1.5em;
}
.top-button {
margin-bottom: 1.5em;
}
.container {
margin-top: 0em;
margin-bottom: 0.65em;
&.most-used {
margin-right: 0em;
}
&.utilities {
margin-left: 0.65em;
}
button {
background: $lavender;
color: $base;
min-height: 3em;
&.discord {
label {
margin-right: 0.15em;
}
}
label {
font-size: 1.5em;
}
&.record.active {
background: $green;
&:hover {
background: $red;
}
}
&:hover {
background: $pink;
}
}
}
}
.controls-container {
margin-bottom: 0.65em;
&.dashboard-card {
margin-top: 0em;
}
button {
background: $red;
padding: 0em;
min-height: 3em;
label {
color: $base;
font-size: 1.6em;
}
&:not(:last-child) {
margin-right: 1em;
}
&.wifi {
background: $mauve;
}
&.bluetooth {
background: $sky;
}
&.notifications {
background: $yellow;
}
&.playback {
background: $maroon;
}
&.input {
background: $pink;
}
&.wifi:hover {
background: transparentize($mauve, 0.7);
}
&.bluetooth:hover {
background: transparentize($sky, 0.7);
}
&.notifications:hover {
background: transparentize($yellow, 0.7);
}
&.playback:hover {
background: transparentize($maroon, 0.7);
}
&.input:hover {
background: transparentize($pink, 0.7);
}
&:hover {
background: $surface1;
}
&.disabled {
background: $surface2;
&.wifi:hover {
background: transparentize($mauve, 0.7);
}
&.bluetooth:hover {
background: transparentize($sky, 0.7);
}
&.notifications:hover {
background: transparentize($yellow, 0.7);
}
&.playback:hover {
background: transparentize($maroon, 0.7);
}
&.input:hover {
background: transparentize($pink, 0.7);
}
}
}
}
.directories-container {
&.dashboard-card {
margin-top: 0em;
margin-bottom: 0.65em;
padding-left: 1.5em;
padding-right: 0em;
}
.directory-link {
padding: 0.5em 0em;
min-width: 9em;
&:last-child {
margin-bottom: 0em;
}
label {
font-size: 1.3em;
}
&.documents {
color: $teal;
}
&.downloads {
color: $pink;
}
&.home {
color: $lavender;
}
&.pictures {
color: $mauve;
}
&.videos {
color: $yellow;
}
&.projects {
color: $maroon;
}
&:hover {
opacity: 0.5;
}
}
}
.stats-container {
margin-top: 0em;
.stat {
label {
margin-right: 1em;
font-size: 1.5em;
}
&.cpu label{
color: $maroon;
}
&.ram label{
color: $yellow;
}
&.gpu label{
color: $green;
}
&.storage label{
color: $pink;
}
.stats-bar {
levelbar * {
transition: 200ms;
}
trough {
min-height: 1.05em;
}
block {
border-radius: 0.4em;
&.empty {
background: $surface1;
}
&.filled {
padding-left: 0.85em;
}
}
}
&.cpu .stats-bar block.filled {
background: $maroon;
}
&.ram .stats-bar block.filled {
background: $yellow;
}
&.gpu .stats-bar block.filled {
background: $green;
}
&.storage .stats-bar block.filled {
background: $pink;
}
}
.stat-value {
margin-bottom: 0.75em;
font-size: 0.9em;
&.cpu {
color: $maroon;
}
&.ram {
color: $yellow;
}
&.gpu {
color: $green;
}
&.storage {
color: $pink;
}
}
}
}
.dropdown.recording {
color: red;
background-color: $crust;
menuitem {
}
}