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

Added scaling to individual elements (all menus and the bar). (#154)

Browse Source 
* Added scaling to individual elements (all menus and the bar).

* Make all dialog pages scrollable

* Add battery menu to settings

* update battery menu scaling

* Fix typo

* Add confirmation dialog scaling
This commit is contained in:
Jas Singh
2024-08-18 18:03:45 -07:00
committed by GitHub
parent 05a7f130ef
commit 830de04b14
22 changed files with 327 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
scss/style/bar/bar.scss
View File

@@ -1,4 +1,8 @@
.bar {
* {
font-size: $font-size * $bar-scaling/100;
}
.bar-panel-container {
margin-top: if($bar-floating, $bar-margin_top, 0em);
margin-bottom: if($bar-floating, $bar-margin_bottom, 0em);
@@ -19,7 +23,7 @@
background-color: $bar-buttons-background;
border-radius: $bar-buttons-radius;
padding: 0.2rem 0.9rem;
margin: 0.5rem $bar-buttons-spacing;
margin: $bar-buttons-y_margins $bar-buttons-spacing;
opacity: $bar-buttons-opacity/100;
&:hover {

260
scss/style/menus/audiomenu.scss
View File

@@ -1,174 +1,184 @@
.menu-items.audio {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-volume-background-color);
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-volume-border-color);
opacity: $bar-menus-opacity/100;
}
.menu-items-container.audio {
min-width: 18em * $bar-menus-menu-volume-scaling/100;
.menu-dropdown-label.audio {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-volume-label-color);
}
@import "./menu.scss";
.menu-label.audio {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-volume-label-color);
}
.menu-active.playback,
.menu-active.input {
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text);
}
.menu-button-isactive.audio {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-volume-icons-active);
}
.menu-slider.playback {
trough {
background: if($bar-menus-monochrome, $bar-menus-slider-background, $bar-menus-menu-volume-audio_slider-background);
highlight,
progress {
background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-volume-audio_slider-primary);
}
* {
font-size: $font-size * $bar-menus-menu-volume-scaling/100;
}
&:hover {
.menu-items {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-volume-background-color);
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-volume-border-color);
opacity: $bar-menus-opacity/100;
}
.menu-dropdown-label.audio {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-volume-label-color);
}
.menu-label.audio {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-volume-label-color);
}
.menu-active.playback,
.menu-active.input {
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text);
}
.menu-button-isactive.audio {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-volume-icons-active);
}
.menu-slider.playback {
trough {
background: if($bar-menus-monochrome, $bar-menus-slider-backgroundhover, $bar-menus-menu-volume-audio_slider-backgroundhover);
background: if($bar-menus-monochrome, $bar-menus-slider-background, $bar-menus-menu-volume-audio_slider-background);
highlight,
progress {
background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-volume-audio_slider-primary);
}
}
slider {
background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-volume-audio_slider-puck);
}
}
}
&:hover {
trough {
background: if($bar-menus-monochrome, $bar-menus-slider-backgroundhover, $bar-menus-menu-volume-audio_slider-backgroundhover);
}
.menu-slider.inputs {
trough {
background: if($bar-menus-monochrome, $bar-menus-slider-background, $bar-menus-menu-volume-input_slider-background);
highlight,
progress {
background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-volume-input_slider-primary);
slider {
background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-volume-audio_slider-puck);
}
}
}
&:hover {
.menu-slider.inputs {
trough {
background: if($bar-menus-monochrome, $bar-menus-slider-backgroundhover, $bar-menus-menu-volume-input_slider-backgroundhover);
background: if($bar-menus-monochrome, $bar-menus-slider-background, $bar-menus-menu-volume-input_slider-background);
highlight,
progress {
background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-volume-input_slider-primary);
}
}
slider {
background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-volume-input_slider-puck);
}
}
}
&:hover {
trough {
background: if($bar-menus-monochrome, $bar-menus-slider-backgroundhover, $bar-menus-menu-volume-input_slider-backgroundhover);
}
.menu-active-percentage.playback,
.menu-active-percentage.input {
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text);
}
.menu-active-button {
.menu-active-icon.playback,
.menu-active-icon.input {
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbutton-active);
opacity: 1;
}
&.muted {
.menu-active-icon.playback,
.menu-active-icon.input {
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-volume-iconbutton-passive);
opacity: 1;
slider {
background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-volume-input_slider-puck);
}
}
}
&:hover {
.menu-active-icon.playback,
.menu-active-icon.input {
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-volume-iconbutton-passive);
opacity: 0.3;
}
.menu-active-percentage.playback,
.menu-active-percentage.input {
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text);
}
&.muted:hover {
.menu-active-button {
.menu-active-icon.playback,
.menu-active-icon.input {
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbutton-active);
opacity: 1;
}
}
}
.menu-button-icon.playback,
.menu-button-icon.input {
color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-volume-icons-passive);
&.muted {
&.active {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-volume-icons-active);
}
}
.menu-active-icon.playback,
.menu-active-icon.input {
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-volume-iconbutton-passive);
opacity: 1;
}
}
.menu-button.audio {
color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-volume-icons-passive);
&:hover {
.menu-button-name.playback,
.menu-button-name.input {
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text);
.menu-active-icon.playback,
.menu-active-icon.input {
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-volume-iconbutton-passive);
opacity: 0.3;
}
}
&.muted:hover {
.menu-active-icon.playback,
.menu-active-icon.input {
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbutton-active);
opacity: 1;
}
}
}
.menu-button-icon.playback,
.menu-button-icon.input {
color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-volume-icons-passive);
&:hover {
&.active {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-volume-icons-active);
}
}
.menu-button.audio {
color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-volume-icons-passive);
.menu-button-name.playback,
.menu-button-name.input {
color: if($bar-menus-monochrome, $bar-menus-listitems-active, $bar-menus-menu-volume-listitems-active);
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text);
}
&:hover {
.menu-button-name.playback,
.menu-button-name.input {
color: if($bar-menus-monochrome, $bar-menus-listitems-active, $bar-menus-menu-volume-listitems-active);
}
}
}
}
.menu-section-container.volume {
margin-bottom: 0.65em;
}
.menu-section-container.volume {
margin-bottom: 0.65em;
}
.menu-section-container.playback {
margin-top: 0em;
margin-bottom: 1em;
}
.menu-section-container.playback {
margin-top: 0em;
margin-bottom: 1em;
}
.menu-section-container.input {
margin-top: 0em;
}
.menu-section-container.input {
margin-top: 0em;
}
.menu-label-container.input {
border-radius: 0em;
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
}
.menu-label-container.input {
border-radius: 0em;
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
}
.menu-label-container.playback {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
}
.menu-label-container.playback {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
}
.menu-items-section.input {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
}
.menu-items-section.input {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
}
.menu-items-section.playback {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
}
.menu-items-section.playback {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
}
.menu-label-container.selected {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
}
.menu-label-container.selected {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
}
.menu-items-section.selected {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
}
.menu-items-section.selected {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-volume-card-color);
}
.menu-items-section.playback {
border-radius: 0em;
.menu-items-section.playback {
border-radius: 0em;
}
}

12
scss/style/menus/bluetooth.scss
View File

@@ -1,10 +1,20 @@
.menu-items-container.bluetooth * {
font-size: $font-size * $bar-menus-menu-bluetooth-scaling/100;
}
@import "./menu.scss";
.menu-items.bluetooth {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-bluetooth-background-color);
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-bluetooth-border-color);
opacity: $bar-menus-opacity/100;
font-size: $font-size * $bar-menus-menu-bluetooth-scaling/100;
}
.menu-items-container.bluetooth {
min-width: 18em * $bar-menus-menu-bluetooth-scaling/100;
font-size: 1.3em;
.menu-section-container {
@@ -26,7 +36,7 @@
.menu-items-section {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-bluetooth-card-color);
min-height: 20em;
min-height: 20em * $bar-menus-menu-bluetooth-scaling/100;
font-size: 1em;
}

4
scss/style/menus/calendar.scss
View File

@@ -1,3 +1,7 @@
.calendar-menu-content * {
font-size: $font-size * $bar-menus-menu-clock-scaling/100;
}
.calendar-content-container {
margin-top: 0em;
min-width: 27em;

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

@@ -1,3 +1,7 @@
.dashboard-menu-content * {
font-size: $font-size * $bar-menus-menu-dashboard-scaling/100;
}
.dashboard-content-items {
margin-left: 0.50em;
min-width: 28.5em;
@@ -87,6 +91,8 @@
}
.shortcuts-container {
font-size: 1em;
.dashboard-card {
padding: 1.5em;
@@ -121,10 +127,8 @@
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text);
min-height: 3em;
&.discord {
label {
margin-right: 0.15em;
}
label {
font-size: 1.5em;
}
&.record.active {

9
scss/style/menus/energy.scss
View File

@@ -1,10 +1,19 @@
.menu-items-container.energy * {
font-size: $font-size * $bar-menus-menu-battery-scaling/100;
}
.menu-items.energy {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-battery-background-color);
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-battery-border-color);
opacity: $bar-menus-opacity/100;
font-size: $font-size * $bar-menus-menu-battery-scaling/100;
}
@import "./menu.scss";
.menu-items-container.energy {
min-width: 18em * $bar-menus-menu-battery-scaling/100;
.menu-label {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-battery-label-color);
}

9
scss/style/menus/media.scss
View File

@@ -2,11 +2,16 @@
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-media-background-color);
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-media-border-color);
opacity: $bar-menus-opacity/100;
}
.menu-items-container.media {
min-width: 23em;
min-height: 10em;
* {
font-size: $font-size * $bar-menus-menu-media-scaling/100;
}
min-width: 23em * $bar-menus-menu-media-scaling/100;
min-height: 10em * $bar-menus-menu-media-scaling/100;
.menu-section-container {
margin: 1em 0em;

2
scss/style/menus/menu.scss
View File

@@ -85,14 +85,12 @@
background: $crust;
border: $bar-menus-border-size solid $bar-menus-border-color;
border-radius: $bar-menus-border-radius;
min-width: 18em;
color: $text;
}
.menu-items-container {
border-radius: 0.4em;
font-size: 1.3em;
min-width: 18em;
}
.menu-section-container {

8
scss/style/menus/network.scss
View File

@@ -1,10 +1,18 @@
.menu-items-container.network * {
font-size: $font-size * $bar-menus-menu-network-scaling/100;
}
@import "./menu.scss";
.menu-items.network {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-network-background-color);
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-network-border-color);
opacity: $bar-menus-opacity/100;
font-size: $font-size * $bar-menus-menu-network-scaling/100;
}
.menu-items-container.network {
min-width: 18em * $bar-menus-menu-network-scaling/100;
font-size: 1.3em;
.menu-items-section {

16
scss/style/menus/notifications.scss
View File

@@ -1,7 +1,11 @@
.notification-menu-content * {
font-size: $font-size * $bar-menus-menu-notifications-scaling/100;
}
.notification-card-container.menu {
margin: 0em;
min-width: 30.6em;
min-height: 48em;
min-width: 30.6em * $bar-menus-menu-notifications-scaling/100;
min-height: 48em * $bar-menus-menu-notifications-scaling/100;
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-notifications-background);
border: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-notifications-border);
border-radius: $bar-menus-border-radius;
@@ -28,7 +32,8 @@
.notification-card.menu {
background: $notification-background;
min-width: 26.2em;
min-width: 26.2em * $bar-menus-menu-notifications-scaling/100;
font-size: $font-size * $bar-menus-menu-notifications-scaling/100;
border: 0.15em solid $notification-border;
border-radius: 0em;
border-bottom-left-radius: 0.4em;
@@ -50,6 +55,7 @@
.menu-label.notifications {
margin: 0em;
font-size: $font-size * $bar-menus-menu-notifications-scaling/100;
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-notifications-label);
}
@@ -107,11 +113,11 @@
}
.bell {
font-size: 10em;
font-size: 10em * $bar-menus-menu-notifications-scaling/100;
}
.message {
font-size: 1.5em;
font-size: 1.5em * $bar-menus-menu-notifications-scaling/100;
}
}

5
scss/style/menus/power.scss
View File

@@ -7,13 +7,16 @@ window#verification {
$popover-padding: 0.6rem * 1.6;
window#verification .verification {
* {
font-size: $font-size * $bar-menus-menu-dashboard-confirmation_scaling/100;
}
@include floating-widget;
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-powermenu-confirmation-background);
border: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-dashboard-powermenu-confirmation-border);
padding: 0.35em * 1.6 * 1.5;
min-width: 20em;
min-height: 6em;
font-size: 1.3em;
opacity: $bar-menus-opacity/100;
.verification-content {

4
scss/style/notifications/popups.scss
View File

@@ -10,6 +10,10 @@
}
.notification-card-container {
* {
font-size: $font-size * $notification-scaling/100;
}
padding: 1px;
}

4
scss/style/osd/index.scss
View File

@@ -1,4 +1,8 @@
.indicator {
* {
font-size: $font-size * $osd-scaling/100;
}
.osd-container {
margin: $osd-margins;
opacity: $osd-opacity/100;