mirror of
https://github.com/EliverLara/Nordic.git
synced 2026-09-27 17:36:00 -04:00
Gnome 43: Improve popovers appearance
This commit is contained in:
EliverLara
+73
-1
@@ -3245,7 +3245,7 @@ popover.background {
|
||||
border-style: none;
|
||||
background-color: transparent; }
|
||||
popover.background > contents separator {
|
||||
background-color: #2d333f;
|
||||
background-color: #3d4556;
|
||||
margin: 3px; }
|
||||
popover.background > contents list separator {
|
||||
margin: 0; }
|
||||
@@ -3261,6 +3261,78 @@ popover.background {
|
||||
magnifier {
|
||||
background-color: #3b4252; }
|
||||
|
||||
/**********************
|
||||
* Popover Base Menus *
|
||||
**********************/
|
||||
popover.menu {
|
||||
padding: 0; }
|
||||
popover.menu box.inline-buttons {
|
||||
padding: 0 12px; }
|
||||
popover.menu box.inline-buttons button.image-button.model {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
min-height: 30px;
|
||||
min-width: 30px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
transition: none; }
|
||||
popover.menu box.inline-buttons button.image-button.model:selected {
|
||||
background: image(#3f4758); }
|
||||
popover.menu box.circular-buttons {
|
||||
padding: 12px 12px 6px; }
|
||||
popover.menu box.circular-buttons button.circular.image-button.model {
|
||||
padding: 11px; }
|
||||
popover.menu box.circular-buttons button.circular.image-button.model:focus {
|
||||
background-color: #3f4758;
|
||||
border-color: #3f4758; }
|
||||
popover.menu > arrow, popover.menu.background > contents {
|
||||
background-color: #2e3440;
|
||||
padding: 5px; }
|
||||
popover.menu.background separator {
|
||||
margin: 6px 0; }
|
||||
popover.menu accelerator {
|
||||
color: alpha(currentColor,0.55); }
|
||||
popover.menu accelerator:dir(ltr) {
|
||||
margin-left: 12px; }
|
||||
popover.menu accelerator:dir(rtl) {
|
||||
margin-right: 12px; }
|
||||
popover.menu check:hover, popover.menu check:active,
|
||||
popover.menu radio:hover,
|
||||
popover.menu radio:active {
|
||||
background-color: transparent; }
|
||||
popover.menu radio {
|
||||
border-color: #232831; }
|
||||
popover.menu radio:active {
|
||||
border-color: rgba(35, 40, 49, 0.5); }
|
||||
popover.menu arrow.left,
|
||||
popover.menu radio.left,
|
||||
popover.menu check.left {
|
||||
margin-left: -2px;
|
||||
margin-right: 6px; }
|
||||
popover.menu arrow.right,
|
||||
popover.menu radio.right,
|
||||
popover.menu check.right {
|
||||
margin-left: 6px;
|
||||
margin-right: -2px; }
|
||||
popover.menu modelbutton {
|
||||
min-height: 30px;
|
||||
min-width: 40px;
|
||||
padding: 0 12px;
|
||||
border-radius: 5px; }
|
||||
popover.menu modelbutton:selected {
|
||||
color: #d8dee9;
|
||||
background-color: #3f4758; }
|
||||
popover.menu modelbutton:selected:active {
|
||||
background-color: #545f76; }
|
||||
popover.menu label.title {
|
||||
font-weight: bold;
|
||||
padding: 4px 32px; }
|
||||
|
||||
/*****************
|
||||
* Progress bars *
|
||||
*****************/
|
||||
|
||||
+73
-1
@@ -3245,7 +3245,7 @@ popover.background {
|
||||
border-style: none;
|
||||
background-color: transparent; }
|
||||
popover.background > contents separator {
|
||||
background-color: #2d333f;
|
||||
background-color: #3d4556;
|
||||
margin: 3px; }
|
||||
popover.background > contents list separator {
|
||||
margin: 0; }
|
||||
@@ -3261,6 +3261,78 @@ popover.background {
|
||||
magnifier {
|
||||
background-color: #3b4252; }
|
||||
|
||||
/**********************
|
||||
* Popover Base Menus *
|
||||
**********************/
|
||||
popover.menu {
|
||||
padding: 0; }
|
||||
popover.menu box.inline-buttons {
|
||||
padding: 0 12px; }
|
||||
popover.menu box.inline-buttons button.image-button.model {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
min-height: 30px;
|
||||
min-width: 30px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
transition: none; }
|
||||
popover.menu box.inline-buttons button.image-button.model:selected {
|
||||
background: image(#3f4758); }
|
||||
popover.menu box.circular-buttons {
|
||||
padding: 12px 12px 6px; }
|
||||
popover.menu box.circular-buttons button.circular.image-button.model {
|
||||
padding: 11px; }
|
||||
popover.menu box.circular-buttons button.circular.image-button.model:focus {
|
||||
background-color: #3f4758;
|
||||
border-color: #3f4758; }
|
||||
popover.menu > arrow, popover.menu.background > contents {
|
||||
background-color: #2e3440;
|
||||
padding: 5px; }
|
||||
popover.menu.background separator {
|
||||
margin: 6px 0; }
|
||||
popover.menu accelerator {
|
||||
color: alpha(currentColor,0.55); }
|
||||
popover.menu accelerator:dir(ltr) {
|
||||
margin-left: 12px; }
|
||||
popover.menu accelerator:dir(rtl) {
|
||||
margin-right: 12px; }
|
||||
popover.menu check:hover, popover.menu check:active,
|
||||
popover.menu radio:hover,
|
||||
popover.menu radio:active {
|
||||
background-color: transparent; }
|
||||
popover.menu radio {
|
||||
border-color: #232831; }
|
||||
popover.menu radio:active {
|
||||
border-color: rgba(35, 40, 49, 0.5); }
|
||||
popover.menu arrow.left,
|
||||
popover.menu radio.left,
|
||||
popover.menu check.left {
|
||||
margin-left: -2px;
|
||||
margin-right: 6px; }
|
||||
popover.menu arrow.right,
|
||||
popover.menu radio.right,
|
||||
popover.menu check.right {
|
||||
margin-left: 6px;
|
||||
margin-right: -2px; }
|
||||
popover.menu modelbutton {
|
||||
min-height: 30px;
|
||||
min-width: 40px;
|
||||
padding: 0 12px;
|
||||
border-radius: 5px; }
|
||||
popover.menu modelbutton:selected {
|
||||
color: #d8dee9;
|
||||
background-color: #3f4758; }
|
||||
popover.menu modelbutton:selected:active {
|
||||
background-color: #545f76; }
|
||||
popover.menu label.title {
|
||||
font-weight: bold;
|
||||
padding: 4px 32px; }
|
||||
|
||||
/*****************
|
||||
* Progress bars *
|
||||
*****************/
|
||||
|
||||
@@ -34,7 +34,7 @@ popover.background {
|
||||
}
|
||||
|
||||
separator {
|
||||
background-color: mix($bg_color, $borders_color, 30%);
|
||||
background-color: mix($bg_color, $base_color, 30%);
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
@@ -63,4 +63,119 @@ popover.background {
|
||||
|
||||
magnifier {
|
||||
background-color: $base_color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**********************
|
||||
* Popover Base Menus *
|
||||
**********************/
|
||||
|
||||
$_menu-padding: 12px; //inner menuitem padding
|
||||
//global 5px for outside menuitems
|
||||
|
||||
popover.menu {
|
||||
padding: 0;
|
||||
|
||||
box.inline-buttons {
|
||||
padding: 0 $_menu-padding;
|
||||
|
||||
button.image-button.model {
|
||||
@include button(undecorated);
|
||||
|
||||
min-height: 30px;
|
||||
min-width: 30px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
transition: none;
|
||||
|
||||
&:selected {
|
||||
background: image($popover_hover_color);
|
||||
|
||||
// @if $contrast == 'high' {
|
||||
// box-shadow: inset 0 0 0 1px $borders_color;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
box.circular-buttons {
|
||||
padding: $_menu-padding $_menu-padding 6px;
|
||||
|
||||
button.circular.image-button.model {
|
||||
// @extend %list_button;
|
||||
|
||||
padding: 11px;
|
||||
&:focus {
|
||||
background-color: $popover_hover_color;
|
||||
border-color: $popover_hover_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > arrow,
|
||||
&.background > contents {
|
||||
background-color: $main_dark_color;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
&.background separator {
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
accelerator {
|
||||
color: gtkalpha(currentColor,0.55);
|
||||
|
||||
&:dir(ltr) { margin-left: $_menu-padding; }
|
||||
&:dir(rtl) { margin-right: $_menu-padding; }
|
||||
}
|
||||
|
||||
check,
|
||||
radio {
|
||||
// @include check('menu', 'transparent', $text_color);
|
||||
|
||||
&:hover, &:active { background-color: transparent; }
|
||||
}
|
||||
|
||||
|
||||
radio { border-color: $borders_color;
|
||||
&:active { border-color: transparentize($borders_color,0.5); }
|
||||
}
|
||||
|
||||
|
||||
arrow.left,
|
||||
radio.left,
|
||||
check.left {
|
||||
margin-left: -2px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
arrow.right,
|
||||
radio.right,
|
||||
check.right {
|
||||
margin-left: 6px;
|
||||
margin-right: -2px;
|
||||
}
|
||||
|
||||
modelbutton {
|
||||
min-height: 30px;
|
||||
min-width: 40px;
|
||||
padding: 0 $_menu-padding;
|
||||
border-radius: 5px;
|
||||
|
||||
&:selected {
|
||||
color: $text-color;
|
||||
background-color: $popover_hover_color;
|
||||
}
|
||||
&:selected:active {
|
||||
//@extend %selected_items;
|
||||
//color: $selected_fg_color;
|
||||
background-color: lighten($popover_hover_color, 10%); // matching buttons
|
||||
}
|
||||
}
|
||||
|
||||
label.title {
|
||||
font-weight: bold;
|
||||
padding: 4px ($_menu-padding + 20px); //this will fall apart with font sizing
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user