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

Start work for the media menu refactor...

Browse Source
This commit is contained in:
Jas Singh
2024-06-30 16:46:09 -07:00
parent 9cf5b0f5ea
commit 6b98da2145
19 changed files with 807 additions and 900 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scss/menus/bluetooth.scss
View File

@@ -75,7 +75,7 @@
.connection-status {
font-size: 0.9em;
margin-left: 0.8em;
margin-left: 1em;
}
}

209
scss/menus/media.scss
View File

@@ -1,137 +1,110 @@
@import "../colors";
.media-indicator-container {
min-width: 35rem;
min-height: 10rem;
background: $mantle;
border: 0.13em solid $surface0;
border-radius: 0.4rem;
}
.menu-items-container.media {
min-width: 36.5em;
min-height: 18em;
.media-indicator-items {
margin: 1rem;
margin-bottom: 1.3rem;
}
.media-indicator-current-album-cover {
border: 0.2em solid $surface0;
background-color: $surface0;
border-radius: 0.25em;
min-width: 8.5em;
min-height: 8.5em;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.media-indicator-current-song-name {
margin-bottom: 0.75rem;
}
.media-indicator-current-song-author {
margin-bottom: 0.5rem;
}
.media-indicator-current-song-name-label {
color: $lavender;
font-size: 1.35em;
}
.media-indicator-current-song-author-label {
color: $teal;
font-size: 1em;
}
.media-indicator-current-song-album-label {
color: $pink;
font-size: 1em;
}
.media-indicator-current-controls {
margin-top: 1.5rem;
margin-bottom: 0.2rem;
}
.media-indicator-control {
margin: 0rem 0.5rem;
}
.media-indicator-control-button {
background: $lavender;
color: $crust;
min-height: 1.8em;
min-width: 2em;
border-radius: 0.2rem;
&.disabled {
background: $surface0;
.menu-section-container {
margin: 1.3em 0em;
}
&.enabled {
.media-indicator-items {
margin: 1rem;
margin-bottom: 1.3rem;
}
.media-indicator-current-album-cover {
border-radius: 0.25em;
min-width: 8.5em;
min-height: 8.5em;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.media-indicator-right-section {
margin-left: 2em;
}
.media-indicator-current-song-name {
margin-bottom: 0.75rem;
}
.media-indicator-current-song-author {
margin-bottom: 0.5rem;
}
.media-indicator-current-song-name-label {
color: $lavender;
font-size: 1.35em;
}
.media-indicator-current-song-author-label {
color: $teal;
font-size: 1em;
}
.media-indicator-current-song-album-label {
color: $pink;
font-size: 1em;
}
.media-indicator-current-controls {
margin-top: 1.5rem;
margin-bottom: 0.2rem;
}
.media-indicator-control {
margin: 0rem 0.5rem;
}
.media-indicator-control-button {
background: $lavender;
&:hover {
background: $pink;
}
color: $crust;
min-height: 1.8em;
min-width: 2em;
border-radius: 0.2rem;
&.active {
background: $pink;
}
}
}
image {
font-size: 1.3em;
}
.menu-slider.media.progress {
margin-top: 1rem;
min-height: 2em;
min-width: 12em;
trough {
background: $base;
border-radius: 0.3rem;
highlight,
progress {
min-height: 1rem;
background: $lavender;
border-radius: 0.3rem;
}
}
slider {
box-shadow: none;
background-color: transparent;
min-height: 1.2rem;
min-width: 1.2rem;
border: 0rem solid transparent;
border-radius: 0.3rem;
}
&:hover {
trough {
&.disabled {
background: $surface0;
}
slider {
background: $overlay0;
box-shadow: none;
&.enabled {
background: $lavender;
&:hover {
background: $pink;
}
&.active {
background: $pink;
}
}
}
&:disabled {
highlight,
progress {
}
image {
font-size: 1.1em;
}
trough:focus {
.menu-slider.media.progress {
margin-top: 1rem;
slider {
trough {
background: $surface0;
border-radius: 0.3rem;
highlight,
progress {
min-height: 1rem;
background: $lavender;
}
}
&:hover {
trough {
background: $surface1;
}
}
}
}