theme: use Adwaita dark style for popup menus
- cannot sue box-shadow sadly.
This commit is contained in:
Jakub Steiner
Carlos Soriano
parent
2dbc7b5c51
commit
082d403829
@ -89,6 +89,58 @@ StScrollBar {
|
|||||||
&:hover { color: lighten($link_color,10%); }
|
&:hover { color: lighten($link_color,10%); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Popvers/Menus */
|
||||||
|
|
||||||
|
.popup-menu {
|
||||||
|
min-width: 200px;
|
||||||
|
|
||||||
|
.popup-menu-arrow { } //defined globally in the TOP BAR
|
||||||
|
.popup-sub-menu {
|
||||||
|
background-color: darken($bg_color,2%);
|
||||||
|
border-top: 1px solid lighten($borders_color,5%);
|
||||||
|
border-bottom: 1px solid lighten($borders_color,5%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-menu-content { padding: 1em 0em; }
|
||||||
|
.popup-menu-item {
|
||||||
|
spacing: 12px;
|
||||||
|
|
||||||
|
&:ltr { padding: .4em 1.75em .4em 0em; }
|
||||||
|
&:rtl { padding: .4em 0em .4em 1.75em; }
|
||||||
|
&:active { background-color: lighten($bg_color,10%); }
|
||||||
|
&:insensitive { background-color: transparentize($bg_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
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-menu-boxpointer,
|
||||||
|
.candidate-popup-boxpointer {
|
||||||
|
-arrow-border-radius: 3px;
|
||||||
|
-arrow-background-color: $bg_color;
|
||||||
|
-arrow-border-width: 1px;
|
||||||
|
-arrow-border-color: $borders_color;
|
||||||
|
-arrow-base: 24px;
|
||||||
|
-arrow-rise: 11px;
|
||||||
|
-arrow-box-shadow: 0 1px 3px red; //dreaming. bug #689995
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* fallback menu
|
||||||
|
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
|
||||||
|
app menu inside the main app window itself rather than the top bar
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* TOP BAR */
|
/* TOP BAR */
|
||||||
|
|
||||||
|
// not really top bar only
|
||||||
|
.popup-menu-arrow { width: 16px; height: 16px; }
|
||||||
|
.popup-menu-icon { icon-size: 1.09em; }
|
||||||
|
|
||||||
/* NOTIFICATIONS & MESSAGE TRAY */
|
/* NOTIFICATIONS & MESSAGE TRAY */
|
||||||
|
|||||||
@ -254,58 +254,3 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin trough($flat:false, $c:$bg_color, $tc:$fg_color, $noedge:false) {
|
|
||||||
color: mix($tc,$bg_color,80%);
|
|
||||||
@if $flat { background-image: linear-gradient(to bottom,$c); }
|
|
||||||
@else {
|
|
||||||
background-image: linear-gradient(to bottom,
|
|
||||||
mix(black,$c,15%) 5%,
|
|
||||||
mix(black,$c,10%) 20%,
|
|
||||||
mix(black,$c,10%) 90%,
|
|
||||||
$c);
|
|
||||||
}
|
|
||||||
|
|
||||||
border-color: if($c!=$bg_color, _border_color($c), $border_color);
|
|
||||||
|
|
||||||
@if not($noedge) {
|
|
||||||
@if lightness($c) > 60% {
|
|
||||||
box-shadow: inset 0 -1px $borders_edge,
|
|
||||||
0 1px $borders_edge;
|
|
||||||
}
|
|
||||||
@else {
|
|
||||||
box-shadow: inset 0 -1px transparentize($borders_edge,0.5),
|
|
||||||
0 1px transparentize($borders_edge,0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@else { box-shadow: none; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin progressbar_fill($d:horizontal) {
|
|
||||||
$dir: if($d==vertical,right,bottom);
|
|
||||||
background-image: linear-gradient(to $dir, $selected_bg_color 2px,
|
|
||||||
lighten($selected_bg_color,6%));
|
|
||||||
}
|
|
||||||
|
|
||||||
@function headerbar_gradient($c, $tc:lighten($c,4%)) {
|
|
||||||
//
|
|
||||||
// headerbar gradient helper function
|
|
||||||
//
|
|
||||||
// $c: base color
|
|
||||||
// $tc: top color
|
|
||||||
//
|
|
||||||
@return linear-gradient(to bottom, $tc, $c);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin headerbar_fill($c:$bg_color, $tc:lighten($c,4%), $hc:$top_hilight) {
|
|
||||||
//
|
|
||||||
// headerbar fill
|
|
||||||
//
|
|
||||||
// $c: base color
|
|
||||||
// $tc: top color
|
|
||||||
// $hc: top highlight color
|
|
||||||
//
|
|
||||||
background-image: headerbar_gradient($c, $tc);
|
|
||||||
box-shadow: inset 0 -1px mix(_border_color($c), $c, 30%), // bottom shade
|
|
||||||
inset 0 1px $hc; // top highlight
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|||||||
@ -65,73 +65,7 @@
|
|||||||
width: 1em;
|
width: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup-menu-boxpointer,
|
|
||||||
.candidate-popup-boxpointer {
|
|
||||||
-arrow-border-radius: 8px;
|
|
||||||
-arrow-background-color: rgba(0,0,0,0.9);
|
|
||||||
-arrow-border-width: 2px;
|
|
||||||
-arrow-border-color: #a5a5a5;
|
|
||||||
-arrow-base: 24px;
|
|
||||||
-arrow-rise: 11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-menu-boxpointer.fallback-app-menu {
|
|
||||||
-arrow-border-radius: 4px;
|
|
||||||
-arrow-background-color: #ededed;
|
|
||||||
-arrow-border-width: 1px;
|
|
||||||
-arrow-border-color: #a6a6a6;
|
|
||||||
-arrow-base: 24px;
|
|
||||||
-arrow-rise: 11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-menu-boxpointer.fallback-app-menu.dark {
|
|
||||||
-arrow-background-color: #3f4747;
|
|
||||||
-arrow-border-color: #282b2b;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.popup-menu {
|
|
||||||
min-width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-menu-arrow {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-submenu-menu-item:open {
|
|
||||||
background-color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fallback-app-menu .popup-submenu-menu-item:open {
|
|
||||||
background-color: #888888;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fallback-app-menu.dark .popup-submenu-menu-item:open {
|
|
||||||
background-color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-sub-menu {
|
|
||||||
background-gradient-start: rgba(80,80,80,0.3);
|
|
||||||
background-gradient-end: rgba(80,80,80,0.4);
|
|
||||||
background-gradient-direction: vertical;
|
|
||||||
box-shadow: inset 0px 2px 4px rgba(0,0,0,0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
.fallback-app-menu .popup-sub-menu {
|
|
||||||
background-gradient-start: #dddddd;
|
|
||||||
background-gradient-end: #dfdfdf;
|
|
||||||
background-gradient-direction: vertical;
|
|
||||||
box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.fallback-app-menu.dark .popup-sub-menu {
|
|
||||||
background-gradient-start: #474747;
|
|
||||||
background-gradient-end: #4b4b4b;
|
|
||||||
background-gradient-direction: vertical;
|
|
||||||
box-shadow: inset 0px 2px 4px rgba(0,0,0,0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-sub-menu:scrolled .popup-menu-item:ltr {
|
.popup-sub-menu:scrolled .popup-menu-item:ltr {
|
||||||
padding-right: 0em;
|
padding-right: 0em;
|
||||||
@ -157,87 +91,8 @@
|
|||||||
/* The remaining popup-menu sizing is all done in ems, so that if you
|
/* The remaining popup-menu sizing is all done in ems, so that if you
|
||||||
* override .popup-menu.font-size, everything else will scale with it.
|
* override .popup-menu.font-size, everything else will scale with it.
|
||||||
*/
|
*/
|
||||||
.popup-menu-content {
|
|
||||||
padding: 1em 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-menu-item {
|
|
||||||
spacing: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-menu-item:ltr {
|
|
||||||
padding: .4em 1.75em .4em 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-menu-item:rtl {
|
|
||||||
padding: .4em 0em .4em 1.75em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-menu-item:active {
|
|
||||||
background-color: #4c4c4c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-menu-item:insensitive {
|
|
||||||
color: #9f9f9f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fallback-app-menu .popup-menu-item {
|
|
||||||
color: #43484a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fallback-app-menu .popup-menu-item:active {
|
|
||||||
color: white;
|
|
||||||
background-color: #4689cd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fallback-app-menu .popup-menu-item:insensitive {
|
|
||||||
color: gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fallback-app-menu.dark .popup-menu-item {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fallback-app-menu.dark .popup-menu-item:active {
|
|
||||||
background-color: #445f7d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fallback-app-menu.dark .popup-menu-item:insensitive {
|
|
||||||
color: #9f9f9f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-separator-menu-item {
|
|
||||||
-gradient-height: 1px;
|
|
||||||
-gradient-start: rgba(255,255,255,0.0);
|
|
||||||
-gradient-end: rgba(255,255,255,0.3);
|
|
||||||
-margin-horizontal: 24px;
|
|
||||||
height: 1px;
|
|
||||||
padding: 8px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fallback-app-menu .popup-separator-menu-item {
|
|
||||||
-gradient-start: #a0a2a3;
|
|
||||||
-gradient-end: #a0a2a3;
|
|
||||||
-margin-horizontal: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fallback-app-menu.dark .popup-separator-menu-item {
|
|
||||||
-gradient-start: #818584;
|
|
||||||
-gradient-end: #818584;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-status-menu-item {
|
|
||||||
font-weight: normal;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-inactive-menu-item, .popup-inactive-menu-item:insensitive {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-menu-icon {
|
|
||||||
icon-size: 1.09em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Switches */
|
/* Switches */
|
||||||
.toggle-switch {
|
.toggle-switch {
|
||||||
|
|||||||
@ -52,62 +52,6 @@
|
|||||||
text-align: right;
|
text-align: right;
|
||||||
width: 1em; }
|
width: 1em; }
|
||||||
|
|
||||||
.popup-menu-boxpointer,
|
|
||||||
.candidate-popup-boxpointer {
|
|
||||||
-arrow-border-radius: 8px;
|
|
||||||
-arrow-background-color: rgba(0, 0, 0, 0.9);
|
|
||||||
-arrow-border-width: 2px;
|
|
||||||
-arrow-border-color: #a5a5a5;
|
|
||||||
-arrow-base: 24px;
|
|
||||||
-arrow-rise: 11px; }
|
|
||||||
|
|
||||||
.popup-menu-boxpointer.fallback-app-menu {
|
|
||||||
-arrow-border-radius: 4px;
|
|
||||||
-arrow-background-color: #ededed;
|
|
||||||
-arrow-border-width: 1px;
|
|
||||||
-arrow-border-color: #a6a6a6;
|
|
||||||
-arrow-base: 24px;
|
|
||||||
-arrow-rise: 11px; }
|
|
||||||
|
|
||||||
.popup-menu-boxpointer.fallback-app-menu.dark {
|
|
||||||
-arrow-background-color: #3f4747;
|
|
||||||
-arrow-border-color: #282b2b; }
|
|
||||||
|
|
||||||
.popup-menu {
|
|
||||||
min-width: 200px; }
|
|
||||||
|
|
||||||
.popup-menu-arrow {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px; }
|
|
||||||
|
|
||||||
.popup-submenu-menu-item:open {
|
|
||||||
background-color: #333333; }
|
|
||||||
|
|
||||||
.fallback-app-menu .popup-submenu-menu-item:open {
|
|
||||||
background-color: #888888;
|
|
||||||
color: white; }
|
|
||||||
|
|
||||||
.fallback-app-menu.dark .popup-submenu-menu-item:open {
|
|
||||||
background-color: #333333; }
|
|
||||||
|
|
||||||
.popup-sub-menu {
|
|
||||||
background-gradient-start: rgba(80, 80, 80, 0.3);
|
|
||||||
background-gradient-end: rgba(80, 80, 80, 0.4);
|
|
||||||
background-gradient-direction: vertical;
|
|
||||||
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.9); }
|
|
||||||
|
|
||||||
.fallback-app-menu .popup-sub-menu {
|
|
||||||
background-gradient-start: #dddddd;
|
|
||||||
background-gradient-end: #dfdfdf;
|
|
||||||
background-gradient-direction: vertical;
|
|
||||||
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.4); }
|
|
||||||
|
|
||||||
.fallback-app-menu.dark .popup-sub-menu {
|
|
||||||
background-gradient-start: #474747;
|
|
||||||
background-gradient-end: #4b4b4b;
|
|
||||||
background-gradient-direction: vertical;
|
|
||||||
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.9); }
|
|
||||||
|
|
||||||
.popup-sub-menu:scrolled .popup-menu-item:ltr {
|
.popup-sub-menu:scrolled .popup-menu-item:ltr {
|
||||||
padding-right: 0em; }
|
padding-right: 0em; }
|
||||||
|
|
||||||
@ -127,70 +71,6 @@
|
|||||||
/* The remaining popup-menu sizing is all done in ems, so that if you
|
/* The remaining popup-menu sizing is all done in ems, so that if you
|
||||||
* override .popup-menu.font-size, everything else will scale with it.
|
* override .popup-menu.font-size, everything else will scale with it.
|
||||||
*/
|
*/
|
||||||
.popup-menu-content {
|
|
||||||
padding: 1em 0em; }
|
|
||||||
|
|
||||||
.popup-menu-item {
|
|
||||||
spacing: 12px; }
|
|
||||||
|
|
||||||
.popup-menu-item:ltr {
|
|
||||||
padding: .4em 1.75em .4em 0em; }
|
|
||||||
|
|
||||||
.popup-menu-item:rtl {
|
|
||||||
padding: .4em 0em .4em 1.75em; }
|
|
||||||
|
|
||||||
.popup-menu-item:active {
|
|
||||||
background-color: #4c4c4c; }
|
|
||||||
|
|
||||||
.popup-menu-item:insensitive {
|
|
||||||
color: #9f9f9f; }
|
|
||||||
|
|
||||||
.fallback-app-menu .popup-menu-item {
|
|
||||||
color: #43484a; }
|
|
||||||
|
|
||||||
.fallback-app-menu .popup-menu-item:active {
|
|
||||||
color: white;
|
|
||||||
background-color: #4689cd; }
|
|
||||||
|
|
||||||
.fallback-app-menu .popup-menu-item:insensitive {
|
|
||||||
color: gray; }
|
|
||||||
|
|
||||||
.fallback-app-menu.dark .popup-menu-item {
|
|
||||||
color: white; }
|
|
||||||
|
|
||||||
.fallback-app-menu.dark .popup-menu-item:active {
|
|
||||||
background-color: #445f7d; }
|
|
||||||
|
|
||||||
.fallback-app-menu.dark .popup-menu-item:insensitive {
|
|
||||||
color: #9f9f9f; }
|
|
||||||
|
|
||||||
.popup-separator-menu-item {
|
|
||||||
-gradient-height: 1px;
|
|
||||||
-gradient-start: rgba(255, 255, 255, 0);
|
|
||||||
-gradient-end: rgba(255, 255, 255, 0.3);
|
|
||||||
-margin-horizontal: 24px;
|
|
||||||
height: 1px;
|
|
||||||
padding: 8px 0px; }
|
|
||||||
|
|
||||||
.fallback-app-menu .popup-separator-menu-item {
|
|
||||||
-gradient-start: #a0a2a3;
|
|
||||||
-gradient-end: #a0a2a3;
|
|
||||||
-margin-horizontal: 0; }
|
|
||||||
|
|
||||||
.fallback-app-menu.dark .popup-separator-menu-item {
|
|
||||||
-gradient-start: #818584;
|
|
||||||
-gradient-end: #818584; }
|
|
||||||
|
|
||||||
.popup-status-menu-item {
|
|
||||||
font-weight: normal;
|
|
||||||
color: #999; }
|
|
||||||
|
|
||||||
.popup-inactive-menu-item, .popup-inactive-menu-item:insensitive {
|
|
||||||
color: white; }
|
|
||||||
|
|
||||||
.popup-menu-icon {
|
|
||||||
icon-size: 1.09em; }
|
|
||||||
|
|
||||||
/* Switches */
|
/* Switches */
|
||||||
.toggle-switch {
|
.toggle-switch {
|
||||||
width: 65px;
|
width: 65px;
|
||||||
@ -2173,5 +2053,50 @@ StScrollBar {
|
|||||||
.shell-link:hover {
|
.shell-link:hover {
|
||||||
color: #74aae2; }
|
color: #74aae2; }
|
||||||
|
|
||||||
|
/* Popvers/Menus */
|
||||||
|
.popup-menu {
|
||||||
|
min-width: 200px; }
|
||||||
|
.popup-menu .popup-sub-menu {
|
||||||
|
background-color: #343a3a;
|
||||||
|
border-top: 1px solid #282c2c;
|
||||||
|
border-bottom: 1px solid #282c2c; }
|
||||||
|
.popup-menu .popup-menu-content {
|
||||||
|
padding: 1em 0em; }
|
||||||
|
.popup-menu .popup-menu-item {
|
||||||
|
spacing: 12px; }
|
||||||
|
.popup-menu .popup-menu-item:ltr {
|
||||||
|
padding: .4em 1.75em .4em 0em; }
|
||||||
|
.popup-menu .popup-menu-item:rtl {
|
||||||
|
padding: .4em 0em .4em 1.75em; }
|
||||||
|
.popup-menu .popup-menu-item:active {
|
||||||
|
background-color: #515a5a; }
|
||||||
|
.popup-menu .popup-menu-item:insensitive {
|
||||||
|
background-color: rgba(57, 63, 63, 0.5); }
|
||||||
|
.popup-menu .popup-inactive-menu-item {
|
||||||
|
color: #eeeeec; }
|
||||||
|
.popup-menu .popup-inactive-menu-item:insensitive {
|
||||||
|
color: rgba(238, 238, 236, 0.5); }
|
||||||
|
|
||||||
|
.popup-menu-boxpointer,
|
||||||
|
.candidate-popup-boxpointer {
|
||||||
|
-arrow-border-radius: 3px;
|
||||||
|
-arrow-background-color: #393f3f;
|
||||||
|
-arrow-border-width: 1px;
|
||||||
|
-arrow-border-color: #1c1f1f;
|
||||||
|
-arrow-base: 24px;
|
||||||
|
-arrow-rise: 11px;
|
||||||
|
-arrow-box-shadow: 0 1px 3px red; }
|
||||||
|
|
||||||
|
/* fallback menu
|
||||||
|
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
|
||||||
|
app menu inside the main app window itself rather than the top bar
|
||||||
|
*/
|
||||||
/* TOP BAR */
|
/* TOP BAR */
|
||||||
|
.popup-menu-arrow {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px; }
|
||||||
|
|
||||||
|
.popup-menu-icon {
|
||||||
|
icon-size: 1.09em; }
|
||||||
|
|
||||||
/* NOTIFICATIONS & MESSAGE TRAY */
|
/* NOTIFICATIONS & MESSAGE TRAY */
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user