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

Update styling to be more responsive to scaling.

Browse Source
This commit is contained in:
Jas Singh
2024-06-23 23:34:18 -07:00
parent f03443a252
commit ef11216641
8 changed files with 84 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
modules/menus/DropdownMenu.js
View File

@@ -30,7 +30,7 @@ const moveBoxToCursor = (self, minWidth, minHeight, fixed) => {
marginRight = 13; marginRight = 13;
marginLeft = monWidth - minWidth - 13; marginLeft = monWidth - minWidth - 13;
} }
const marginTop = 43; const marginTop = 40;
const marginBottom = monHeight + minHeight - marginTop; const marginBottom = monHeight + minHeight - marginTop;
self.set_margin_left(marginLeft); self.set_margin_left(marginLeft);
self.set_margin_right(marginRight); self.set_margin_right(marginRight);

2
modules/menus/bluetooth/index.js
View File

@@ -131,6 +131,8 @@ export default () => {
}); });
}; };
console.log(JSON.stringify(btDevices, null, 2));
return btDevices.length === 0 ? noDevices() : deviceList(); return btDevices.length === 0 ? noDevices() : deviceList();
}; };

19
scss/bar/workspace.scss
View File

@@ -2,29 +2,32 @@
.workspaces { .workspaces {
label { label {
font-size: 0rem; font-size: 0.2em;
min-width: 1rem; min-width: 5em;
min-height: 1rem; min-height: 5em;
border-radius: 1.9rem * .6; border-radius: 1.9rem * .6;
margin: 0rem 0.5rem * .5; margin: 0rem 0.5rem * .5;
transition: 300ms * .5; transition: 300ms * .5;
background-color: $mauve; background-color: $mauve;
color: $mauve;
&.occupied { &.occupied {
background-color: $yellow; background-color: $yellow;
min-width: 1rem; color: $yellow;
min-height: 1rem; min-width: 5em;
min-height: 5em;
} }
&.active { &.active {
color: $sky;
background-color: $sky; background-color: $sky;
min-width: 2.2rem; min-width: 11em;
min-height: 1rem; min-height: 5em;
} }
} }
} }
.workspaces label:not(:first-child) { .workspaces label:not(:first-child) {
margin-left: 0.9rem; margin-left: 4.5em;
} }

26
scss/menus/media.scss
View File

@@ -14,11 +14,11 @@
} }
.media-indicator-current-album-cover { .media-indicator-current-album-cover {
border: 0.25rem solid $surface0; border: 0.2em solid $surface0;
background-color: $surface0; background-color: $surface0;
border-radius: 0.25rem; border-radius: 0.25em;
min-width: 10rem; min-width: 8.3em;
min-height: 10rem; min-height: 8.3em;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
@@ -38,17 +38,17 @@
.media-indicator-current-song-name-label { .media-indicator-current-song-name-label {
color: $lavender; color: $lavender;
font-size: 1.65rem; font-size: 1.4em;
} }
.media-indicator-current-song-author-label { .media-indicator-current-song-author-label {
color: $teal; color: $teal;
font-size: 1.1rem; font-size: 1em;
} }
.media-indicator-current-song-album-label { .media-indicator-current-song-album-label {
color: $pink; color: $pink;
font-size: 1.1rem; font-size: 1em;
} }
.media-indicator-current-controls { .media-indicator-current-controls {
@@ -62,7 +62,7 @@
.media-indicator-time { .media-indicator-time {
color: $overlay2; color: $overlay2;
font-size: 0.9rem; font-size: 0.8em;
font-weight: 800; font-weight: 800;
margin-top: 0.9rem; margin-top: 0.9rem;
@@ -78,8 +78,8 @@
.media-indicator-control-button { .media-indicator-control-button {
background: $lavender; background: $lavender;
color: $crust; color: $crust;
min-height: 2.1rem; min-height: 1.8em;
min-width: 2.4rem; min-width: 2em;
border-radius: 0.2rem; border-radius: 0.2rem;
tooltip { tooltip {
@@ -107,13 +107,13 @@
} }
image { image {
font-size: 1.5rem; font-size: 1.3em;
} }
.menu-slider.media.progress { .menu-slider.media.progress {
margin-top: 1rem; margin-top: 1rem;
min-height: 2rem; min-height: 2em;
min-width: 15rem; min-width: 15em;
trough { trough {
background: $base; background: $base;

22
scss/menus/menu.scss
View File

@@ -108,13 +108,13 @@
} }
.menu-dropdown-label { .menu-dropdown-label {
font-size: 1.5rem; font-size: 1.3em;
font-weight: bold; font-weight: bold;
color: $text; color: $text;
} }
.menu-active { .menu-active {
font-size: 1.15rem; font-size: 0.95em;
font-weight: bold; font-weight: bold;
margin: 0rem .5rem; margin: 0rem .5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
@@ -123,13 +123,13 @@
.menu-active-icon { .menu-active-icon {
color: $overlay1; color: $overlay1;
font-size: 1.7rem; font-size: 1.5em;
font-weight: bold; font-weight: bold;
margin-right: 0.7rem; margin-right: 0.7rem;
} }
.menu-active-percentage { .menu-active-percentage {
font-size: 1.1rem; font-size: 1em;
margin-left: 0.5rem; margin-left: 0.5rem;
font-weight: bold; font-weight: bold;
} }
@@ -140,8 +140,8 @@
} }
.menu-active-slider * { .menu-active-slider * {
min-height: 1.3rem; min-height: 1.1em;
border-radius: .7rem; border-radius: .2em;
} }
.menu-slider-container { .menu-slider-container {
margin-bottom: .7rem; margin-bottom: .7rem;
@@ -149,14 +149,14 @@
.menu-label { .menu-label {
color: $text; color: $text;
font-size: 1.3rem; font-size: 1.1em;
font-weight: bold; font-weight: bold;
} }
.menu-label-dim { .menu-label-dim {
color: $overlay0; color: $overlay0;
margin-right: 1rem; margin-right: 1rem;
font-size: 1rem; font-size: 1em;
font-weight: bold; font-weight: bold;
} }
@@ -174,18 +174,18 @@
} }
.menu-button { .menu-button {
margin-bottom: .4rem; margin-bottom: .4em;
} }
.menu-button-name { .menu-button-name {
font-size: 1.1rem; font-size: 0.95em;
font-weight: bold; font-weight: bold;
margin-left: 1rem; margin-left: 1rem;
margin-right: 1.2rem; margin-right: 1.2rem;
} }
.menu-button-icon { .menu-button-icon {
font-size: 1.3rem; font-size: 1.3em;
font-weight: bold; font-weight: bold;
color: $overlay0; color: $overlay0;
margin-right: .5rem; margin-right: .5rem;

10
scss/menus/network.scss
View File

@@ -17,12 +17,12 @@
} }
.network-element-items-container * { .network-element-items-container * {
font-size: 1.1rem; font-size: 0.95em;
} }
.network-element-item { .network-element-item {
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 0.5rem; margin-bottom: 0.4em;
} }
&:hover { &:hover {
@@ -40,7 +40,7 @@
padding: 0.4rem; padding: 0.4rem;
margin-left: 2.5rem; margin-left: 2.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-size: 1rem; font-size: 0.85em;
} }
.menu-icon-button.refresh.network { .menu-icon-button.refresh.network {
@@ -60,7 +60,7 @@
} }
label { label {
font-size: 1.35rem; font-size: 1.45em;
} }
} }
@@ -86,6 +86,6 @@
} }
label { label {
font-size: 1.5rem; font-size: 1.35em;
} }
} }

77
style.css
View File

@@ -328,27 +328,30 @@ spinner:checked {
} }
.workspaces label { .workspaces label {
font-size: 0rem; font-size: 0.2em;
min-width: 1rem; min-width: 5em;
min-height: 1rem; min-height: 5em;
border-radius: 1.14rem; border-radius: 1.14rem;
margin: 0rem 0.25rem; margin: 0rem 0.25rem;
transition: 150ms; transition: 150ms;
background-color: #cba6f7; background-color: #cba6f7;
color: #cba6f7;
} }
.workspaces label.occupied { .workspaces label.occupied {
background-color: #f9e2af; background-color: #f9e2af;
min-width: 1rem; color: #f9e2af;
min-height: 1rem; min-width: 5em;
min-height: 5em;
} }
.workspaces label.active { .workspaces label.active {
color: #89dceb;
background-color: #89dceb; background-color: #89dceb;
min-width: 2.2rem; min-width: 11em;
min-height: 1rem; min-height: 5em;
} }
.workspaces label:not(:first-child) { .workspaces label:not(:first-child) {
margin-left: 0.9rem; margin-left: 4.5em;
} }
.window_title { .window_title {
@@ -494,13 +497,13 @@ spinner:checked {
} }
.menu-dropdown-label { .menu-dropdown-label {
font-size: 1.5rem; font-size: 1.3em;
font-weight: bold; font-weight: bold;
color: #cdd6f4; color: #cdd6f4;
} }
.menu-active { .menu-active {
font-size: 1.15rem; font-size: 0.95em;
font-weight: bold; font-weight: bold;
margin: 0rem 0.5rem; margin: 0rem 0.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
@@ -509,13 +512,13 @@ spinner:checked {
.menu-active-icon { .menu-active-icon {
color: #7f849c; color: #7f849c;
font-size: 1.7rem; font-size: 1.5em;
font-weight: bold; font-weight: bold;
margin-right: 0.7rem; margin-right: 0.7rem;
} }
.menu-active-percentage { .menu-active-percentage {
font-size: 1.1rem; font-size: 1em;
margin-left: 0.5rem; margin-left: 0.5rem;
font-weight: bold; font-weight: bold;
} }
@@ -526,8 +529,8 @@ spinner:checked {
} }
.menu-active-slider * { .menu-active-slider * {
min-height: 1.3rem; min-height: 1.1em;
border-radius: 0.7rem; border-radius: 0.2em;
} }
.menu-slider-container { .menu-slider-container {
@@ -536,14 +539,14 @@ spinner:checked {
.menu-label { .menu-label {
color: #cdd6f4; color: #cdd6f4;
font-size: 1.3rem; font-size: 1.1em;
font-weight: bold; font-weight: bold;
} }
.menu-label-dim { .menu-label-dim {
color: #6c7086; color: #6c7086;
margin-right: 1rem; margin-right: 1rem;
font-size: 1rem; font-size: 1em;
font-weight: bold; font-weight: bold;
} }
@@ -560,18 +563,18 @@ spinner:checked {
} }
.menu-button { .menu-button {
margin-bottom: 0.4rem; margin-bottom: 0.4em;
} }
.menu-button-name { .menu-button-name {
font-size: 1.1rem; font-size: 0.95em;
font-weight: bold; font-weight: bold;
margin-left: 1rem; margin-left: 1rem;
margin-right: 1.2rem; margin-right: 1.2rem;
} }
.menu-button-icon { .menu-button-icon {
font-size: 1.3rem; font-size: 1.3em;
font-weight: bold; font-weight: bold;
color: #6c7086; color: #6c7086;
margin-right: 0.5rem; margin-right: 0.5rem;
@@ -788,11 +791,11 @@ window#powermenu .powermenu.box {
} }
.network-element-items-container * { .network-element-items-container * {
font-size: 1.1rem; font-size: 0.95em;
} }
.network-element-item:not(:last-child) { .network-element-item:not(:last-child) {
margin-bottom: 0.5rem; margin-bottom: 0.4em;
} }
.network-element-item:hover { .network-element-item:hover {
color: #cba6f7; color: #cba6f7;
@@ -808,7 +811,7 @@ window#powermenu .powermenu.box {
padding: 0.4rem; padding: 0.4rem;
margin-left: 2.5rem; margin-left: 2.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-size: 1rem; font-size: 0.85em;
} }
.menu-icon-button.refresh.network { .menu-icon-button.refresh.network {
@@ -826,7 +829,7 @@ window#powermenu .powermenu.box {
color: #89dceb; color: #89dceb;
} }
.network-password-input-close label { .network-password-input-close label {
font-size: 1.35rem; font-size: 1.45em;
} }
.menu-icon-button.network.disconnect { .menu-icon-button.network.disconnect {
@@ -848,7 +851,7 @@ window#powermenu .powermenu.box {
color: #cba6f7; color: #cba6f7;
} }
.menu-icon-button.network.forget label { .menu-icon-button.network.forget label {
font-size: 1.5rem; font-size: 1.35em;
} }
.menu-dropdown-label.bluetooth { .menu-dropdown-label.bluetooth {
@@ -909,11 +912,11 @@ window#powermenu .powermenu.box {
} }
.media-indicator-current-album-cover { .media-indicator-current-album-cover {
border: 0.25rem solid #313244; border: 0.2em solid #313244;
background-color: #313244; background-color: #313244;
border-radius: 0.25rem; border-radius: 0.25em;
min-width: 10rem; min-width: 8.3em;
min-height: 10rem; min-height: 8.3em;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
@@ -933,17 +936,17 @@ window#powermenu .powermenu.box {
.media-indicator-current-song-name-label { .media-indicator-current-song-name-label {
color: #b4befe; color: #b4befe;
font-size: 1.65rem; font-size: 1.4em;
} }
.media-indicator-current-song-author-label { .media-indicator-current-song-author-label {
color: #94e2d5; color: #94e2d5;
font-size: 1.1rem; font-size: 1em;
} }
.media-indicator-current-song-album-label { .media-indicator-current-song-album-label {
color: #f5c2e7; color: #f5c2e7;
font-size: 1.1rem; font-size: 1em;
} }
.media-indicator-current-controls { .media-indicator-current-controls {
@@ -957,7 +960,7 @@ window#powermenu .powermenu.box {
.media-indicator-time { .media-indicator-time {
color: #9399b2; color: #9399b2;
font-size: 0.9rem; font-size: 0.8em;
font-weight: 800; font-weight: 800;
margin-top: 0.9rem; margin-top: 0.9rem;
} }
@@ -971,8 +974,8 @@ window#powermenu .powermenu.box {
.media-indicator-control-button { .media-indicator-control-button {
background: #b4befe; background: #b4befe;
color: #11111b; color: #11111b;
min-height: 2.1rem; min-height: 1.8em;
min-width: 2.4rem; min-width: 2em;
border-radius: 0.2rem; border-radius: 0.2rem;
} }
.media-indicator-control-button tooltip { .media-indicator-control-button tooltip {
@@ -994,13 +997,13 @@ window#powermenu .powermenu.box {
} }
image { image {
font-size: 1.5rem; font-size: 1.3em;
} }
.menu-slider.media.progress { .menu-slider.media.progress {
margin-top: 1rem; margin-top: 1rem;
min-height: 2rem; min-height: 2em;
min-width: 15rem; min-width: 15em;
} }
.menu-slider.media.progress trough { .menu-slider.media.progress trough {
background: #1e1e2e; background: #1e1e2e;

2
style.css.map
View File

File diff suppressed because one or more lines are too long