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

WIP - Refactor media menu

Browse Source
This commit is contained in:
Jas Singh
2024-07-10 00:46:24 -07:00
parent 81ecf205be
commit 6cda814d9b
14 changed files with 358 additions and 564 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
scss/menus/dashboard.scss
View File

@@ -131,7 +131,7 @@
&:not(:last-child) {
margin-right: 1em;
}
&.wifi {
background: $mauve;
}
@@ -147,25 +147,40 @@
&.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: $surface2;
background: $surface1;
}
&.disabled {
background: $surface2;
&.wifi:hover {
background: $mauve;
background: transparentize($mauve, 0.7);
}
&.bluetooth:hover {
background: $sky;
background: transparentize($sky, 0.7);
}
&.notifications:hover {
background: $yellow;
background: transparentize($yellow, 0.7);
}
&.playback:hover {
background: $maroon;
background: transparentize($maroon, 0.7);
}
&.input:hover {
background: $pink;
background: transparentize($pink, 0.7);
}
}
}

23
scss/menus/media.scss
View File

@@ -8,22 +8,19 @@
margin: 1.3em 0em;
}
.media-indicator-items {
margin: 1rem;
margin-bottom: 1.3rem;
.menu-items-section {
border-radius: 0.4em;
padding: 0em;
}
.media-indicator-current-album-cover {
border-radius: 0.25em;
min-width: 9.5em;
min-height: 9.5em;
background-size: contain;
background-repeat: no-repeat;
.menu-content {
border-radius: 0.4em;
background-size: cover;
background-position: center;
}
.media-indicator-right-section {
margin-left: 2em;
.media-content {
margin: 1em;
}
.media-indicator-current-song-name {
@@ -66,7 +63,7 @@
border-radius: 0.2rem;
&.disabled {
background: $surface0;
background: $surface2;
}
&.enabled {
@@ -91,7 +88,7 @@
margin-top: 1rem;
trough {
background: $surface0;
background: $surface2;
border-radius: 0.3rem;
highlight,

48
scss/menus/power.scss
View File

@@ -10,11 +10,18 @@ $popover-padding: 0.6rem * 1.6;
window#verification .verification {
@include floating-widget;
background: $crust;
padding: 0.35em * 1.6 * 1.5;
min-width: 20em;
min-height: 6em;
font-size: 1.3em;
.verification-content {
background: $base;
border-radius: 0.4em;
padding: 1em;
}
.text-box {
margin-bottom: 0.3em;
@@ -33,45 +40,50 @@ window#verification .verification {
}
.verification-button {
background: $crust;
background: $base;
padding: 0.7em 0em;
margin: 0.4em 1.7em;
border: 0.15em solid;
border-color: $crust;
border-radius: 0.3em;
opacity: 1;
transition: border-color 0.2s ease-in-out;
transition: opacity .3s ease-in-out;
&.bar-verification_yes {
background-color: $green;
}
&.bar-verification_no {
background-color: $red;
}
&:hover {
&.bar-verification_yes{
border-color: $green;
transition: border-color 0.2s ease-in-out;
&.bar-verification_yes {
background: $lavender;
transition: background-color 0.2s ease-in-out;
}
&.bar-verification_no {
border-color: $red;
transition: border-color 0.2s ease-in-out;
background: $lavender;
transition: background-color 0.2s ease-in-out;
}
}
&:focus {
&.bar-verification_yes{
border-color: $green;
transition: border-color 0.2s ease-in-out;
background: $lavender;
transition: background 0.2s ease-in-out;
}
&.bar-verification_no {
border-color: $red;
transition: border-color 0.2s ease-in-out;
background: $lavender;
transition: background 0.2s ease-in-out;
}
}
&:active {
&.bar-verification_yes {
border-color: rgba($green, 0.4);
transition: border-color 0.2s ease-in-out;
background: rgb($lavender, 0.4);
transition: background 0.2s ease-in-out;
}
&.bar-verification_no {
border-color: rgba($red, 0.4);
transition: border-color 0.2s ease-in-out;
background: rgb($lavender, 0.4);
transition: background 0.2s ease-in-out;
}
image {
@@ -85,10 +97,10 @@ window#verification .verification {
}
}
.bar-verification_no label {
color: $red;
color: $mantle;
}
.bar-verification_yes label {
color: $green;
color: $mantle;
}
}