GNOME.org
 

[gnome-shell/wip/sass: 18/51] theme: use Adwaita dark style for popup menus

commit 5b2bb5eb2b42700799c194501658355068504dc6
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 6e19db8..77eaaba 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 1695b14..d643ab9 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; }
 
@@ -127,70 +71,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;
@@ -2173,5 +2053,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]