Fix coloring issues and added an option to configure media menu border. (#135)

* Fix coloring issues and added an option to configure media menu border.

* Updated and added options to style radio and check butto ns.

* Update themes to reflect the changes
This commit is contained in:
Jas Singh
2024-08-15 23:09:18 -07:00
committed by GitHub
parent 0ba89aae4a
commit f3a690026b
17 changed files with 101 additions and 65 deletions

View File

@@ -17,12 +17,16 @@ menu {
font: initial;
text-shadow: none;
border-radius: 6px;
&:hover, &:active{
background-color: $secondary_bg;
&:hover,
&:active {
background-color: $secondary_bg;
}
&:disabled {
color: $secondary_bg;
}
arrow {
min-height: 16px;
min-width: 16px;
@@ -30,6 +34,7 @@ menu {
margin-left: 8px;
}
}
separator {
min-height: 1px;
margin: 4px 0;
@@ -37,20 +42,20 @@ menu {
}
}
menu > arrow {
menu>arrow {
min-height: 16px;
min-width: 16px;
padding: 4px;
color: $secondary_bg;
}
menu > arrow.top {
menu>arrow.top {
margin-top: 0;
border-radius: 6px;
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
}
menu > arrow.bottom {
menu>arrow.bottom {
margin-top: 8px;
margin-bottom: -12px;
border-radius: 6px;
@@ -88,21 +93,24 @@ radio:active {
background-color: $primary_bg;
}
check:checked, check:indeterminate,
check:checked,
check:indeterminate,
radio:checked,
radio:indeterminate {
color: $primary_bg;
background-color: $primary_fg;
}
check:checked:hover, check:indeterminate:hover,
check:checked:hover,
check:indeterminate:hover,
radio:checked:hover,
radio:indeterminate:hover {
box-shadow: 0 0 0 4px transparentize($primary_fg, 0.8);
background-color: $primary_fg;
}
check:checked:active, check:indeterminate:active,
check:checked:active,
check:indeterminate:active,
radio:checked:active,
radio:indeterminate:active {
box-shadow: 0 0 0 4px transparentize($primary_fg, 0.8);
@@ -202,12 +210,6 @@ tooltip {
box-shadow: none;
}
tooltip.background {
background-color: $crust;
color: $text;
border-radius: 6px;
}
separator {
min-width: 1px;
min-height: 1px;

View File

@@ -7,20 +7,47 @@ window.popup {
}
&:hover {
background-color: transparentize($bar-menus-popover-text, 0.6);
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.6);
}
}
menu {
background: $bar-menus-popover-background;
border-color: $bar-menus-popover-border;
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
}
separator {
background: transparentize($bar-menus-popover-text, 0.7);
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.7);
min-height: 0.075em;
}
arrow {
color: $bar-menus-popover-text;
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text);
}
}
tooltip {
* {
all: unset;
}
font-size: 1.1em;
>*>* {
padding: 0.6em;
border-radius: $bar-menus-border-radius/2;
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-tooltip-text);
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-tooltip-background);
}
}
check:not(:checked) {
background-color: $bar-menus-check_radio_button-background;
border: 1px solid $bar-menus-check_radio_button-active;
}
check:checked {
background-color: $bar-menus-check_radio_button-active;
border: 1px solid $bar-menus-check_radio_button-background;
}