mirror of
https://github.com/EliverLara/Nordic.git
synced 2026-09-28 01:46:08 -04:00
Gnome-shell: Improve popups appearance
This commit is contained in:
EliverLara
+92
-63
@@ -518,49 +518,12 @@ StScrollBar {
|
||||
|
||||
/* Popovers/Menus */
|
||||
|
||||
|
||||
.popup-menu {
|
||||
min-width: 15em;
|
||||
background-color: transparent;
|
||||
color: $fg_color;
|
||||
.popup-menu-arrow { } //defined globally in the TOP BAR
|
||||
.popup-sub-menu {
|
||||
background-color: transparentize(darken($main_dark,57%), 0.8);
|
||||
box-shadow: $depth6;
|
||||
}
|
||||
|
||||
.popup-menu-content {
|
||||
background-color: darken($bg_color, 2%);
|
||||
padding: 16px 6px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.popup-menu-item {
|
||||
spacing: 6px;
|
||||
padding: 6px;
|
||||
|
||||
&:ltr { padding-right: 1.75em; padding-left: 0; }
|
||||
&:rtl { padding-right: 0; padding-left: 1.75em; }
|
||||
|
||||
&:checked {
|
||||
background-color: transparentize($selected_bg_color,0.1) !important;
|
||||
color: $selected_fg_color;
|
||||
box-shadow: inset 0 1px 0px lighten($borders_color,5%);
|
||||
font-weight: bold;
|
||||
&:hover{
|
||||
background-color: transparentize($selected_bg_color,0.1);
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
&.selected, &:hover { background-color: transparentize($fg_color,0.9) !important; color: $fg_color; }
|
||||
&:active { background-color: $selected_bg_color !important; color: $selected_fg_color; }
|
||||
&:insensitive { color: transparentize($fg_color,.5); }
|
||||
}
|
||||
|
||||
.popup-inactive-menu-item { //all icons and other graphical elements
|
||||
color: $fg_color;
|
||||
|
||||
&:insensitive { color: transparentize($fg_color,0.5); }
|
||||
}
|
||||
//.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is
|
||||
&.panel-menu {
|
||||
-boxpointer-gap: 4px;
|
||||
@@ -568,37 +531,103 @@ StScrollBar {
|
||||
}
|
||||
}
|
||||
|
||||
.popup-menu-arrow { } //defined globally in the TOP BAR
|
||||
.popup-sub-menu {
|
||||
background-color: lighten($bg_color, 4%);
|
||||
box-shadow: $depth6;
|
||||
border: none;
|
||||
border-radius: 0px 0px 6px 6px;
|
||||
.popup-menu-item {
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 0 6px 6px;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&:hover,
|
||||
&:focus { background-color: lighten($bg_color, 9%) !important; color: $fg_color; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.popup-menu-content {
|
||||
padding: 6px;
|
||||
background: darken($bg_color, 2%);
|
||||
border-radius: 12px;
|
||||
border: 1px solid $borders_color;
|
||||
}
|
||||
|
||||
.popup-menu-item {
|
||||
spacing: 6px;
|
||||
border-radius: 6px;
|
||||
|
||||
&:ltr {padding-left: 6px;}
|
||||
&:rtl {padding-right: 6px;}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&:hover,
|
||||
&:focus { background-color: lighten($bg_color, 6%) !important; color: $fg_color; }
|
||||
|
||||
&:checked {
|
||||
background-color: transparentize($selected_bg_color, 0.5) !important;
|
||||
border-radius: 6px 6px 0px 0px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:insensitive { color: transparentize($fg_color,.5); }
|
||||
}
|
||||
|
||||
.popup-inactive-menu-item { //all icons and other graphical elements
|
||||
color: $fg_color;
|
||||
|
||||
&:insensitive { color: transparentize($fg_color,0.5); }
|
||||
}
|
||||
|
||||
// symbolic icons in popover
|
||||
.popup-menu-arrow,
|
||||
.popup-menu-icon {
|
||||
icon-size: 16px !important; // for some reason the variable doesn't work here
|
||||
}
|
||||
|
||||
|
||||
.popup-menu-ornament {
|
||||
text-align: right;
|
||||
width: 1.2em;
|
||||
}
|
||||
|
||||
// separator
|
||||
.popup-separator-menu-item {
|
||||
margin: 6px 0;
|
||||
padding:0 !important;
|
||||
&:ltr { margin-right: 6px;}
|
||||
&:rtl { margin-left: 6px;}
|
||||
|
||||
.popup-separator-menu-item-separator {
|
||||
height: 1px; //not really the whole box
|
||||
background-color: $gray;
|
||||
}
|
||||
|
||||
.popup-menu-ornament {
|
||||
text-align: right;
|
||||
width: 1.2em;
|
||||
}
|
||||
.popup-menu-boxpointer,
|
||||
.candidate-popup-boxpointer {
|
||||
-arrow-border-radius: 5px;
|
||||
-arrow-background-color: darken($bg_color, 2%);
|
||||
-arrow-border-width: 1px;
|
||||
-arrow-border-color: $borders_color;
|
||||
-arrow-base: 24px;
|
||||
-arrow-rise: 11px;
|
||||
-arrow-box-shadow: 0 1px 3px black; //dreaming. bug #689995
|
||||
width: 0 !important;
|
||||
}
|
||||
|
||||
.popup-separator-menu-item {
|
||||
// separators in submenus
|
||||
.popup-sub-menu & {
|
||||
background-color: transparent;
|
||||
|
||||
&-separator {
|
||||
//-margin-horizontal: 24px;
|
||||
height: 1px; //not really the whole box
|
||||
margin: 6px 64px;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
.popup-sub-menu & &-separator { //submenu separators
|
||||
margin: 0 64px 0 32px;
|
||||
background: transparent;
|
||||
// account for ornament
|
||||
&:ltr { margin-right: 2.5em;}
|
||||
&:rtl { margin-left: 2.5em;}
|
||||
|
||||
.popup-separator-menu-item-separator {
|
||||
background-color: lighten($gray, 7%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Background menu
|
||||
|
||||
+72
-60
@@ -493,71 +493,80 @@ StScrollBar {
|
||||
min-width: 15em;
|
||||
background-color: transparent;
|
||||
color: #d8dee9; }
|
||||
.popup-menu .popup-sub-menu {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.2); }
|
||||
.popup-menu .popup-menu-content {
|
||||
background-color: #2a2f3a;
|
||||
padding: 16px 6px;
|
||||
border: none;
|
||||
border-radius: 5px; }
|
||||
.popup-menu .popup-menu-item {
|
||||
spacing: 6px;
|
||||
padding: 6px; }
|
||||
.popup-menu .popup-menu-item:ltr {
|
||||
padding-right: 1.75em;
|
||||
padding-left: 0; }
|
||||
.popup-menu .popup-menu-item:rtl {
|
||||
padding-right: 0;
|
||||
padding-left: 1.75em; }
|
||||
.popup-menu .popup-menu-item:checked {
|
||||
background-color: rgba(129, 161, 193, 0.9) !important;
|
||||
color: #fefefe;
|
||||
box-shadow: inset 0 1px 0px #2a2f3a;
|
||||
font-weight: bold; }
|
||||
.popup-menu .popup-menu-item:checked:hover {
|
||||
background-color: rgba(129, 161, 193, 0.9);
|
||||
color: #fefefe; }
|
||||
.popup-menu .popup-menu-item.selected, .popup-menu .popup-menu-item:hover {
|
||||
background-color: rgba(216, 222, 233, 0.1) !important;
|
||||
color: #d8dee9; }
|
||||
.popup-menu .popup-menu-item:active {
|
||||
background-color: #81a1c1 !important;
|
||||
color: #fefefe; }
|
||||
.popup-menu .popup-menu-item:insensitive {
|
||||
color: rgba(216, 222, 233, 0.5); }
|
||||
.popup-menu .popup-inactive-menu-item {
|
||||
color: #d8dee9; }
|
||||
.popup-menu .popup-inactive-menu-item:insensitive {
|
||||
color: rgba(216, 222, 233, 0.5); }
|
||||
.popup-menu.panel-menu {
|
||||
-boxpointer-gap: 4px;
|
||||
margin-bottom: 1.75em; }
|
||||
|
||||
.popup-sub-menu {
|
||||
background-color: #373e4c;
|
||||
box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.2);
|
||||
border: none;
|
||||
border-radius: 0px 0px 6px 6px; }
|
||||
.popup-sub-menu .popup-menu-item {
|
||||
border-radius: 0;
|
||||
margin: 0; }
|
||||
.popup-sub-menu .popup-menu-item:last-child {
|
||||
border-radius: 0 0 6px 6px; }
|
||||
.popup-sub-menu .popup-menu-item:active, .popup-sub-menu .popup-menu-item.selected, .popup-sub-menu .popup-menu-item:hover, .popup-sub-menu .popup-menu-item:focus {
|
||||
background-color: #414a5b !important;
|
||||
color: #d8dee9; }
|
||||
|
||||
.popup-menu-content {
|
||||
padding: 6px;
|
||||
background: #2a2f3a;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #1f232b; }
|
||||
|
||||
.popup-menu-item {
|
||||
spacing: 6px;
|
||||
border-radius: 6px; }
|
||||
.popup-menu-item:ltr {
|
||||
padding-left: 6px; }
|
||||
.popup-menu-item:rtl {
|
||||
padding-right: 6px; }
|
||||
.popup-menu-item:active, .popup-menu-item.selected, .popup-menu-item:hover, .popup-menu-item:focus {
|
||||
background-color: #3b4252 !important;
|
||||
color: #d8dee9; }
|
||||
.popup-menu-item:checked {
|
||||
background-color: rgba(129, 161, 193, 0.5) !important;
|
||||
border-radius: 6px 6px 0px 0px;
|
||||
box-shadow: none; }
|
||||
.popup-menu-item:insensitive {
|
||||
color: rgba(216, 222, 233, 0.5); }
|
||||
|
||||
.popup-inactive-menu-item {
|
||||
color: #d8dee9; }
|
||||
.popup-inactive-menu-item:insensitive {
|
||||
color: rgba(216, 222, 233, 0.5); }
|
||||
|
||||
.popup-menu-arrow,
|
||||
.popup-menu-icon {
|
||||
icon-size: 16px !important; }
|
||||
|
||||
.popup-menu-ornament {
|
||||
text-align: right;
|
||||
width: 1.2em; }
|
||||
|
||||
.popup-menu-boxpointer,
|
||||
.candidate-popup-boxpointer {
|
||||
-arrow-border-radius: 5px;
|
||||
-arrow-background-color: #2a2f3a;
|
||||
-arrow-border-width: 1px;
|
||||
-arrow-border-color: #1f232b;
|
||||
-arrow-base: 24px;
|
||||
-arrow-rise: 11px;
|
||||
-arrow-box-shadow: 0 1px 3px black; }
|
||||
|
||||
.popup-separator-menu-item-separator {
|
||||
height: 1px;
|
||||
margin: 6px 64px;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid; }
|
||||
.popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator {
|
||||
margin: 0 64px 0 32px;
|
||||
background: transparent; }
|
||||
.popup-separator-menu-item {
|
||||
margin: 6px 0;
|
||||
padding: 0 !important; }
|
||||
.popup-separator-menu-item:ltr {
|
||||
margin-right: 6px; }
|
||||
.popup-separator-menu-item:rtl {
|
||||
margin-left: 6px; }
|
||||
.popup-separator-menu-item .popup-separator-menu-item-separator {
|
||||
height: 1px;
|
||||
background-color: #4e586d; }
|
||||
.popup-separator-menu-item .popup-menu-ornament {
|
||||
width: 0 !important; }
|
||||
.popup-sub-menu .popup-separator-menu-item {
|
||||
background-color: transparent; }
|
||||
.popup-sub-menu .popup-separator-menu-item:ltr {
|
||||
margin-right: 2.5em; }
|
||||
.popup-sub-menu .popup-separator-menu-item:rtl {
|
||||
margin-left: 2.5em; }
|
||||
.popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator {
|
||||
background-color: #5d6981; }
|
||||
|
||||
.background-menu {
|
||||
-boxpointer-gap: 4px;
|
||||
@@ -969,7 +978,8 @@ StScrollBar {
|
||||
|
||||
/* Message list */
|
||||
.message-list {
|
||||
width: 31.5em; }
|
||||
width: 31.5em;
|
||||
border: none; }
|
||||
.message-list .message-title, .message-list .message-content, .message-list .message-body {
|
||||
color: #c8d0e0; }
|
||||
|
||||
@@ -1394,10 +1404,12 @@ StScrollBar {
|
||||
|
||||
/* App Folders */
|
||||
.app-well-app.app-folder {
|
||||
background-color: #3d4555; }
|
||||
background-color: #3d4555;
|
||||
border-radius: 12px; }
|
||||
|
||||
.app-folder-dialog {
|
||||
background-color: rgba(35, 40, 49, 0.95); }
|
||||
background-color: rgba(35, 40, 49, 0.95);
|
||||
border: none; }
|
||||
.app-folder-dialog .edit-folder-button {
|
||||
padding: 0;
|
||||
width: 36px;
|
||||
|
||||
Reference in New Issue
Block a user