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

Added 3 new styles for bar buttons. (#168)

Browse Source 
* Added a new style called split for bar buttons

* Added wavy button styles.

* Added padding configuration

* Update bar padding

* Fix styling for battery style2

* Fix icon only setting for bar

* Update types and options

* Add button style to exported theme props.

* Fix top margin for menus.
This commit is contained in:
Jas Singh
2024-08-24 00:01:21 -07:00
committed by GitHub
parent c0d9c594c9
commit 2908ff7dd6
31 changed files with 459 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
scss/style/bar/audio.scss
View File

@@ -5,5 +5,24 @@
.bar-button-label.volume {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-volume-text);
min-width: 2.2em;
margin-left: $bar-buttons-volume-spacing;
}
.style2 {
.bar-button-icon.volume {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-volume-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-volume-spacing;
}
.bar-button-label.volume {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-volume-spacing;
margin-left: 0em;
}
}

67
scss/style/bar/bar.scss
View File

@@ -28,9 +28,19 @@ $transparency-value-hover: 1 - $bar-button-background-hover-opacity-ratio;
.bar_item_box_visible {
background-color: transparentize($bar-buttons-background, $transparency-value);
border-radius: $bar-buttons-radius;
padding: 0.2rem 0.9rem;
margin: $bar-buttons-y_margins $bar-buttons-spacing;
opacity: $bar-buttons-opacity/100;
padding: $bar-buttons-padding_y $bar-buttons-padding_x;
&.style3 {
border-bottom-left-radius: 1.3em;
border-top-right-radius: 1.3em;
}
&.style4 {
border-bottom-right-radius: 1.3em;
border-top-left-radius: 1.3em;
}
&:hover {
background: transparentize($bar-buttons-hover, $transparency-value-hover);
@@ -119,6 +129,61 @@ $transparency-value-hover: 1 - $bar-button-background-hover-opacity-ratio;
&.workspaces {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-workspaces-background), $transparency-value);
}
&.style2 {
padding: 0em;
&:hover {
.dashboard .bar-button_icon {
color: $bar-buttons-dashboard_background;
}
}
&:hover .no-label {
.battery .bar-button-icon {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-battery-hover), $transparency-value);
color: $bar-buttons-battery-icon_background;
}
.bluetooth.bar-button-icon {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-bluetooth-hover), $transparency-value);
color: $bar-buttons-bluetooth-icon_background;
}
.media.bar-button-icon {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-media-hover), $transparency-value);
color: $bar-buttons-media-icon_background;
}
.network.bar-button-icon {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-network-hover), $transparency-value);
color: $bar-buttons-network-icon_background;
}
.notifications.bar-button-icon {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-notifications-hover), $transparency-value);
color: $bar-buttons-notifications-icon_background;
}
.volume.bar-button-icon {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-volume-hover), $transparency-value);
color: $bar-buttons-volume-icon_background;
}
.windowtitle.bar-button-icon {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-windowtitle-hover), $transparency-value);
color: $bar-buttons-windowtitle-icon_background;
}
}
}
}
.no-label.style2 {
.bar-button-icon {
border-top-right-radius: $bar-buttons-radius;
border-bottom-right-radius: $bar-buttons-radius;
}
}
.bar_item_box_hidden {

40
scss/style/bar/battery.scss
View File

@@ -1,20 +1,26 @@
.bar {
.battery {
.bar-button-label.battery {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-battery-text);
margin-left: $bar-buttons-battery-spacing;
}
.bar-button-label.battery {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-battery-text);
margin-left: $bar-buttons-battery-spacing;
}
.bar-button-icon.battery {
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-battery-icon);
}
.bar-button-icon.battery {
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-battery-icon);
}
.style2 {
.bar-button-icon.battery {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-battery-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-battery-spacing;
}
.bar-button-label.battery {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-battery-spacing;
margin-left: 0em;
}
}
.menu-section-container.brightness {
margin-bottom: 0em;
}
.menu-section-container.energy {
margin-top: 0.5em;
}

18
scss/style/bar/bluetooth.scss
View File

@@ -18,3 +18,21 @@
.menu-button-isactive {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-bluetooth-text);
}
.style2 {
.bar-button-icon.bluetooth {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-bluetooth-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-bluetooth-spacing;
}
.bar-button-label.bluetooth {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-bluetooth-spacing;
margin-left: 0em;
}
}

4
scss/style/bar/clock.scss
View File

@@ -1,3 +1,7 @@
.clock {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-clock-text);
}
.style2.clock {
padding: $bar-buttons-padding_y $bar-buttons-padding_x;
}

18
scss/style/bar/media.scss
View File

@@ -7,3 +7,21 @@
font-size: 1.2em;
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-media-icon);
}
.style2 {
.bar-button-icon.media {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-media-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-media-spacing;
}
.bar-button-label.media {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-media-spacing;
margin-left: 0em;
}
}

4
scss/style/bar/menu.scss
View File

@@ -2,3 +2,7 @@
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-dashboard-icon);
font-size: 1.3em;
}
.style2 .bar-menu_label {
padding: $bar-buttons-padding_y $bar-buttons-padding_x;
}

18
scss/style/bar/network.scss
View File

@@ -6,3 +6,21 @@
.bar-button-icon.network {
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-network-icon);
}
.style2 {
.bar-button-icon.network {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-network-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-network-spacing;
}
.bar-button-label.network {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-network-spacing;
margin-left: 0em;
}
}

20
scss/style/bar/notifications.scss
View File

@@ -1,10 +1,28 @@
.bar-button-icon.notifications {
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-notifications-icon);
font-size: 1.3em;
min-width: 1em;
}
.bar-button-label.notifications {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-notifications-total);
margin-left: $bar-buttons-notifications-spacing;
min-width: 1em;
}
.style2 {
.bar-button-icon.notifications {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-notifications-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-notifications-spacing;
}
.bar-button-label.notifications {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-notifications-spacing;
margin-left: 0em;
}
}

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

@@ -1,7 +1,11 @@
.systray button:not(:first-child) {
margin-left: 0.75rem;
margin-left: $bar-buttons-systray-spacing;
}
.systray-icon {
font-size: 1.3em;
}
.style2.systray {
padding: $bar-buttons-padding_y $bar-buttons-padding_x;
}

18
scss/style/bar/window_title.scss
View File

@@ -6,3 +6,21 @@
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-windowtitle-text);
margin-left: $bar-buttons-windowtitle-spacing;
}
.style2 {
.bar-button-icon.windowtitle {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-windowtitle-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-windowtitle-spacing;
}
.bar-button-label.windowtitle {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-windowtitle-spacing;
margin-left: 0em;
}
}

4
scss/style/bar/workspace.scss
View File

@@ -75,3 +75,7 @@
border-radius: $bar-buttons-workspaces-numbered_active_highlight_border;
}
}
.style2.workspaces {
padding: $bar-buttons-padding_y $bar-buttons-padding_x;
}

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

@@ -235,7 +235,7 @@
.event-top-padding * {
min-height: 0em;
margin-top: 2.8em + if($bar-floating, $bar-margin_top, 0em);
margin-top: 2.8em + if($bar-floating, $bar-margin_top * 1.1, $bar-margin_top * 0.1);
}
@keyframes spin {