GNOME.org
 

[gnome-shell/wip/sass: 7/23] theme: modal dialogs and tweaked entries

commit fb70e37018e53fbde6f2ea087afc4121b4d76a6c
Author: Jakub Steiner <jimmac gmail com>
Date:   Thu Oct 2 21:03:25 2014 +0200

    theme: modal dialogs and tweaked entries

 data/theme/_common.scss          |   59 +++++++++++++-
 data/theme/_drawing.scss         |   61 +++-----------
 data/theme/_gnome-shell-old.scss |  134 -----------------------------
 data/theme/gnome-shell.css       |  172 ++++++++++++-------------------------
 data/theme/gnome-shell.scss      |    2 +-
 5 files changed, 127 insertions(+), 301 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index 439197e..a30f404 100644
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -37,7 +37,8 @@ stage {
 /* WIDGETS */
 
 /* Buttons */
-//one would think we may want a generic button class:
+// one would think we may want a generic button class:
+// bug #737785
 .candidate-page-button,
 .notification-button,
 .notification-icon-button,
@@ -56,6 +57,26 @@ stage {
 }
 
 /* Entries */
+StEntry {
+  border-radius: 3px;
+  padding: 4px;
+  border-width: 1px;
+  color: $fg_color;
+  @include entry(normal);
+  //&:hover { @include entry(hover);}
+  &:focus { @include entry(focus,$fc:transparentize($fg_color,0.5));}
+  &:insensitive { @include entry(insensitive);}
+  
+  .search-entry {
+    padding: 9px;
+    border-radius: 24px;
+    &:focus {
+      padding: 8px;
+      border-width: 2px;
+    }
+  }
+}
+
 
 /* Scrollbars */
 
@@ -89,6 +110,42 @@ StScrollBar {
   &:hover { color: lighten($link_color,10%); }
 }
 
+/* Modal Dialogs */
+
+.lightbox { background-color: black; } //FIXME where is this?
+.flashspot { background-color: white; } //FIXME where is this?
+
+.modal-dialog {
+  border-radius: 5px;
+  background-color: transparentize(darken($bg_color,10%),0.05);
+  border: 1px solid $borders_color;
+  padding: 24px;
+
+  .run-dialog-entry { width: 20em; }
+  .run-dialog-error-box {
+    padding-top: 16px;
+    spacing: 6px;
+  }
+  .run-dialog-button-box { padding-top: 1em; }
+  .run-dialog-label { 
+    font-size: fontsize($font-size + 1.1); 
+    font-weight: bold;
+    color: darken($fg_color,10%);
+    padding-bottom: .4em;
+  }
+  
+}
+  .button-dialog-button-box {
+    spacing: 18px;
+    padding-top: 48px;
+  }
+
+  .show-processes-dialog-subject,
+  .mount-question-dialog-subject,
+  .end-session-dialog-subject { //this should be a generic header class
+    font-size: fontsize($font-size * 1.3);
+  }
+
 /* Popvers/Menus */
 
 .popup-menu {
diff --git a/data/theme/_drawing.scss b/data/theme/_drawing.scss
index 33b4fd4..e537a80 100644
--- a/data/theme/_drawing.scss
+++ b/data/theme/_drawing.scss
@@ -25,10 +25,6 @@
 
 // entries
 
- function entry_gradient($c) {
-  @return linear-gradient(to bottom, darken($c,3%), $c 90%);
-}
-
 @mixin entry($t, $fc:$selected_bg_color, $edge: $borders_edge) {
 //
 // Entries drawing function
@@ -39,60 +35,27 @@
 //        use the default one
 //
 // possible $t values:
-// normal, focus, insensitive, backdrop, backdrop-insensitive;
+// normal, focus, insensitive
 //
-  background-color: transparent;
-  background-image: entry_gradient($base_color);
-  $_blank_edge: if($edge == none, none, 0 1px transparentize($edge,1));
-  $_entry_edge: if($edge == none, none, _widget_edge($edge));
-  $_inner_shadows: inset 0 3px transparentize(black, 0.98),
-                   inset 0 2px transparentize(black, 0.97),
-                   inset 0 1px transparentize(black, 0.92);
-
-  // we need to match the same shadow types (inset/outset) in various states
-  // hence transparent shadows istead of resetting them when not needed
-  $_blank_inner_shadows: inset 0 3px transparentize(black, 1),
-                         inset 0 2px transparentize(black, 1),
-                         inset 0 1px transparentize(black, 1);
-  $_focus_glow_color: if($variant=='light', transparentize($fc,0.85),
-                                            transparentize($fc,0.3));
+  $_inner_shadows: inset 0 2px 4px transparentize(black, 0.6);
 
   @if $t==normal {
+    background-color: $base_color;
     border-color: $borders_color;
-    @include _shadows($_inner_shadows,
-                      inset 0 0 0 1px transparentize($fc,1),
-                      $_entry_edge);
-    // the second transparent shadow is needed for the transition to work
+    @include _shadows($_inner_shadows);
+
   }
   @if $t==focus {
-    @include _shadows($_inner_shadows,
-                      inset 0 0 0 1px $_focus_glow_color,
-                      $_entry_edge);
-    @if $variant == 'light' { border-color: $fc; }
-    @else {
-      border-color: if($fc==$selected_bg_color,
-                       $selected_borders_color,
-                       darken($fc,35%));
-    }
+    @include _shadows($_inner_shadows);
+    border-color: if($fc==$selected_bg_color,
+                     $selected_borders_color,
+                     darken($fc,35%));
   }
+  @if $t==hover { }
   @if $t==insensitive {
     color: $insensitive_fg_color;
-    border-color: $borders_color;
-    background-image: linear-gradient(to bottom, $insensitive_bg_color);
-    @include _shadows($_blank_inner_shadows, $_entry_edge);
-
-  }
-  @if $t==backdrop {
-    color: $backdrop_fg_color;
-    border-color: $backdrop_borders_color;
-    background-image: linear-gradient(to bottom, $backdrop_base_color);
-    @include _shadows($_blank_inner_shadows, $_blank_edge);
-  }
-  @if $t==backdrop-insensitive {
-    color: $backdrop_insensitive_color;
-    border-color: $backdrop_borders_color;
-    background-image: linear-gradient(to bottom, $insensitive_bg_color);
-    @include _shadows($_blank_inner_shadows, $_blank_edge);
+    border-color: $insensitive_bg_color;
+    box-shadow: none;
   }
 }
 
diff --git a/data/theme/_gnome-shell-old.scss b/data/theme/_gnome-shell-old.scss
index aa21a37..6b7a82c 100644
--- a/data/theme/_gnome-shell-old.scss
+++ b/data/theme/_gnome-shell-old.scss
@@ -189,91 +189,7 @@
 }
 
 
-/* Entries */
-
-.search-entry,
-.login-dialog StEntry,
-.notification StEntry,
-.modal-dialog StEntry {
-    color: rgb(64, 64, 64);
-    caret-color: rgb(64, 64, 64);
-    font-size: 12pt;
-    caret-size: 1px;
-    selected-color: white;
-    padding: 4px 12px;
-}
 
-.search-entry,
-.login-dialog StEntry,
-.run-dialog-entry,
-.notification StEntry {
-    border: 2px solid rgba(245,245,245,0.2);
-    background-gradient-start: rgba(5,5,6,0.1);
-    background-gradient-end: rgba(254,254,254,0.1);
-    background-gradient-direction: vertical;
-    transition-duration: 300ms;
-    box-shadow: inset 0px 2px 4px rgba(0,0,0,0.6);
-}
-
-.search-entry:focus,
-.search-entry:hover,
-.login-dialog StEntry:focus,
-.notification StEntry:focus,
-.modal-dialog StEntry {
-    border: 2px solid rgb(136,138,133);
-    background-gradient-start: rgb(200,200,200);
-    background-gradient-end: white;
-    background-gradient-direction: vertical;
-    box-shadow: inset 0px 2px 4px rgba(0,0,0,0.6);
-}
-
-.login-dialog StEntry:focus,
-.notification StEntry:focus,
-.modal-dialog StEntry:focus {
-    border: 2px solid #3465a4;
-}
-
-.search-entry {
-    border-color: rgba(245,245,245,0.3);
-    color: rgb(192, 192, 192);
-    caret-color: rgb(192, 192, 192);
-}
-
-.search-entry:hover {
-    color: rgb(128, 128, 128);
-    caret-color: rgb(128, 128, 128);
-}
-
-.search-entry:focus {
-    color: rgb(64, 64, 64);
-    caret-color: rgb(64, 64, 64);
-    font-weight: bold;
-    transition-duration: 0ms;
-}
-
-.login-dialog StEntry,
-.notification StEntry,
-.modal-dialog StEntry {
-    border-radius: 5px;
-    padding: 4px 4px;
-}
-
-.prompt-dialog-password-entry .capslock-warning,
-.login-dialog-prompt-entry .capslock-warning {
-    icon-size: 16px;
-    warning-color: #999;
-    padding: 0 4px;
-}
-
-.login-dialog StEntry:insensitive,
-.modal-dialog StEntry:insensitive {
-    border-color: #666666;
-    color: #9f9f9f;
-    border: 2px solid #9f9f9f;
-    background-gradient-direction: none;
-    background-color: rgba(102, 102, 102, 0.15);
-    box-shadow: inset 0 0 rgba(0,0,0,1.0);
-}
 
 /* Panel */
 
@@ -1629,56 +1545,6 @@
 
 /* Modal Dialogs */
 
-/* Dialog Subject Text Style */
-.show-processes-dialog-subject,
-.mount-question-dialog-subject,
-.end-session-dialog-subject {
-    font-size: 14pt;
-    font-weight: bold;
-    color: #999999;
-}
-
-.modal-dialog {
-    border-radius: 24px;
-    background-color: rgba(0.0, 0.0, 0.0, 0.9);
-    border: 2px solid #868686;
-
-    padding-right: 42px;
-    padding-left: 42px;
-    padding-bottom: 30px;
-    padding-top: 30px;
-}
-
-.modal-dialog-button-box {
-    spacing: 21px;
-    padding-top: 50px;
-}
-
-/* Run Dialog */
-
-.run-dialog-label {
-    font-size: 12pt;
-    font-weight: bold;
-    color: #999999;
-    padding-bottom: .4em;
-}
-
-.run-dialog-error-box {
-    padding-top: 15px;
-    spacing: 5px;
-}
-
-.modal-dialog .run-dialog-entry {
-    width: 20em;
-}
-
-.lightbox {
-    background-color: black;
-}
-
-.flashspot {
-    background-color: white;
-}
 
 /* End Session Dialog */
 .end-session-dialog {
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 8d884f1..cfc660e 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -150,81 +150,6 @@
 .no-networks-box {
   spacing: 12px; }
 
-/* Entries */
-.search-entry,
-.login-dialog StEntry,
-.notification StEntry,
-.modal-dialog StEntry {
-  color: #404040;
-  caret-color: #404040;
-  font-size: 12pt;
-  caret-size: 1px;
-  selected-color: white;
-  padding: 4px 12px; }
-
-.search-entry,
-.login-dialog StEntry,
-.run-dialog-entry,
-.notification StEntry {
-  border: 2px solid rgba(245, 245, 245, 0.2);
-  background-gradient-start: rgba(5, 5, 6, 0.1);
-  background-gradient-end: rgba(254, 254, 254, 0.1);
-  background-gradient-direction: vertical;
-  transition-duration: 300ms;
-  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.6); }
-
-.search-entry:focus,
-.search-entry:hover,
-.login-dialog StEntry:focus,
-.notification StEntry:focus,
-.modal-dialog StEntry {
-  border: 2px solid #888a85;
-  background-gradient-start: #c8c8c8;
-  background-gradient-end: white;
-  background-gradient-direction: vertical;
-  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.6); }
-
-.login-dialog StEntry:focus,
-.notification StEntry:focus,
-.modal-dialog StEntry:focus {
-  border: 2px solid #3465a4; }
-
-.search-entry {
-  border-color: rgba(245, 245, 245, 0.3);
-  color: silver;
-  caret-color: silver; }
-
-.search-entry:hover {
-  color: gray;
-  caret-color: gray; }
-
-.search-entry:focus {
-  color: #404040;
-  caret-color: #404040;
-  font-weight: bold;
-  transition-duration: 0ms; }
-
-.login-dialog StEntry,
-.notification StEntry,
-.modal-dialog StEntry {
-  border-radius: 5px;
-  padding: 4px 4px; }
-
-.prompt-dialog-password-entry .capslock-warning,
-.login-dialog-prompt-entry .capslock-warning {
-  icon-size: 16px;
-  warning-color: #999;
-  padding: 0 4px; }
-
-.login-dialog StEntry:insensitive,
-.modal-dialog StEntry:insensitive {
-  border-color: #666666;
-  color: #9f9f9f;
-  border: 2px solid #9f9f9f;
-  background-gradient-direction: none;
-  background-color: rgba(102, 102, 102, 0.15);
-  box-shadow: inset 0 0 black; }
-
 /* Panel */
 #panel {
   background-color: black;
@@ -1323,47 +1248,6 @@
   border-radius: 6px 6px 0 0; }
 
 /* Modal Dialogs */
-/* Dialog Subject Text Style */
-.show-processes-dialog-subject,
-.mount-question-dialog-subject,
-.end-session-dialog-subject {
-  font-size: 14pt;
-  font-weight: bold;
-  color: #999999; }
-
-.modal-dialog {
-  border-radius: 24px;
-  background-color: rgba(0, 0, 0, 0.9);
-  border: 2px solid #868686;
-  padding-right: 42px;
-  padding-left: 42px;
-  padding-bottom: 30px;
-  padding-top: 30px; }
-
-.modal-dialog-button-box {
-  spacing: 21px;
-  padding-top: 50px; }
-
-/* Run Dialog */
-.run-dialog-label {
-  font-size: 12pt;
-  font-weight: bold;
-  color: #999999;
-  padding-bottom: .4em; }
-
-.run-dialog-error-box {
-  padding-top: 15px;
-  spacing: 5px; }
-
-.modal-dialog .run-dialog-entry {
-  width: 20em; }
-
-.lightbox {
-  background-color: black; }
-
-.flashspot {
-  background-color: white; }
-
 /* End Session Dialog */
 .end-session-dialog {
   spacing: 42px; }
@@ -2024,6 +1908,28 @@ stage {
     icon-shadow: none; }
 
 /* Entries */
+StEntry {
+  border-radius: 3px;
+  padding: 4px;
+  border-width: 1px;
+  color: #eeeeec;
+  background-color: #292929;
+  border-color: #1c1f1f;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4); }
+  StEntry:focus {
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
+    border-color: rgba(154, 154, 142, 0.5); }
+  StEntry:insensitive {
+    color: #939695;
+    border-color: #323636;
+    box-shadow: none; }
+  StEntry .search-entry {
+    padding: 9px;
+    border-radius: 24px; }
+    StEntry .search-entry:focus {
+      padding: 8px;
+      border-width: 2px; }
+
 /* Scrollbars */
 StScrollBar {
   padding: 0; }
@@ -2052,6 +1958,40 @@ StScrollBar {
   .shell-link:hover {
     color: #74aae2; }
 
+/* Modal Dialogs */
+.lightbox {
+  background-color: black; }
+
+.flashspot {
+  background-color: white; }
+
+.modal-dialog {
+  border-radius: 5px;
+  background-color: rgba(33, 36, 36, 0.95);
+  border: 1px solid #1c1f1f;
+  padding: 24px; }
+  .modal-dialog .run-dialog-entry {
+    width: 20em; }
+  .modal-dialog .run-dialog-error-box {
+    padding-top: 16px;
+    spacing: 6px; }
+  .modal-dialog .run-dialog-button-box {
+    padding-top: 1em; }
+  .modal-dialog .run-dialog-label {
+    font-size: fontsize(12.1);
+    font-weight: bold;
+    color: #d6d6d1;
+    padding-bottom: .4em; }
+
+.button-dialog-button-box {
+  spacing: 18px;
+  padding-top: 48px; }
+
+.show-processes-dialog-subject,
+.mount-question-dialog-subject,
+.end-session-dialog-subject {
+  font-size: fontsize(14.3); }
+
 /* Popvers/Menus */
 .popup-menu {
   min-width: 200px; }
diff --git a/data/theme/gnome-shell.scss b/data/theme/gnome-shell.scss
index 1ef9f29..b40a76c 100644
--- a/data/theme/gnome-shell.scss
+++ b/data/theme/gnome-shell.scss
@@ -1,6 +1,6 @@
 $variant: 'dark';
 
- import "_gnome-shell-old.scss"; //temporary
+ import "_gnome-shell-old.scss"; //temporary. sadlu shell crashes when trying to build a theme from scratch
 @import "_colors"; //use gtk colors
 @import "_drawing";
 @import "_common";
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]