[gnome-shell/wip/sass: 2/16] theme: use Adwaita dark style for popup menus
- From: Jakub Steiner <jimmac src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell/wip/sass: 2/16] theme: use Adwaita dark style for popup menus
- Date: Wed, 15 Oct 2014 15:41:41 +0000 (UTC)
commit b5d266656f1d2b5be5ecf8dc2cdfe66ad427d5e7
Author: Jakub Steiner <jimmac gmail com>
Date: Thu Oct 2 16:49:31 2014 +0200
theme: use Adwaita dark style for popup menus
- cannot sue box-shadow sadly.
data/theme/_common.scss | 52 ++++++++++++
data/theme/_drawing.scss | 55 -------------
data/theme/_gnome-shell-old.scss | 145 ---------------------------------
data/theme/gnome-shell.css | 165 ++++++++++---------------------------
4 files changed, 97 insertions(+), 320 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index b9e6f08..528c0cb 100644
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -89,6 +89,58 @@ StScrollBar {
&: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 */
+// not really top bar only
+.popup-menu-arrow { width: 16px; height: 16px; }
+.popup-menu-icon { icon-size: 1.09em; }
+
/* NOTIFICATIONS & MESSAGE TRAY */
diff --git a/data/theme/_drawing.scss b/data/theme/_drawing.scss
index acd989b..33b4fd4 100644
--- a/data/theme/_drawing.scss
+++ b/data/theme/_drawing.scss
@@ -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
-
-}
diff --git a/data/theme/_gnome-shell-old.scss b/data/theme/_gnome-shell-old.scss
index a8ba428..dcbf186 100644
--- a/data/theme/_gnome-shell-old.scss
+++ b/data/theme/_gnome-shell-old.scss
@@ -65,73 +65,7 @@
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 {
padding-right: 0em;
@@ -157,87 +91,8 @@
/* 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.
*/
-.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 */
.toggle-switch {
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 29f085d..4e35971 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -52,62 +52,6 @@
text-align: right;
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 {
padding-right: 0em; }
@@ -131,70 +75,6 @@
/* 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.
*/
-.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 */
.toggle-switch {
width: 65px;
@@ -2177,5 +2057,50 @@ StScrollBar {
.shell-link:hover {
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 */
+.popup-menu-arrow {
+ width: 16px;
+ height: 16px; }
+
+.popup-menu-icon {
+ icon-size: 1.09em; }
+
/* NOTIFICATIONS & MESSAGE TRAY */
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]