[gnome-themes-standard/wip/sass] not sure if we need mixins for the linear gradients
- From: Jakub Steiner <jimmac src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-themes-standard/wip/sass] not sure if we need mixins for the linear gradients
- Date: Tue, 13 May 2014 14:13:49 +0000 (UTC)
commit e830a5ccc322850e673b63ee195ee4f9d6e2f82b
Author: Jakub Steiner <jimmac gmail com>
Date: Tue May 13 16:12:09 2014 +0200
not sure if we need mixins for the linear gradients
- lapo suggests being more fine grained with the generic
drawing routines/mixins, but in the end you're not saving
on repetition much. We'll see
themes/Adwaita/gtk-3.0/_common.scss | 27 ++-
themes/Adwaita/gtk-3.0/_drawing.scss | 25 +---
themes/Adwaita/gtk-3.0/gtk-dark.css | 340 +++++++++++++++++++++++++++-------
themes/Adwaita/gtk-3.0/gtk-dark.scss | 2 +
themes/Adwaita/gtk-3.0/gtk.css | 14 +-
themes/Adwaita/gtk-3.0/gtk.scss | 6 +-
6 files changed, 301 insertions(+), 113 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index 11ed278..ec6118e 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -150,7 +150,13 @@ GtkGrid:insensitive {
color: $theme_fg_color;
border-radius: 3px;
transition: all 200ms ease-out;
- @include draw_entry(null,null);
+ border: 1px solid $borders;
+ background-image: linear-gradient(to bottom,
+ darken($theme_base_color,20%) 1%,
+ darken($theme_base_color,10%) 10%,
+ $theme_base_color
+ );
+ background-color: transparent;
&:insensitive, &:backdrop:insensitive {
color: $insensitive_fg_color;
background-image: none;
@@ -192,26 +198,29 @@ GtkGrid:insensitive {
border-radius: 3px;
transition: all 200ms ease-out;
padding: 2px 4px;
- @include draw_button(null,null);
+ background-color: transparent;
+ background-image: linear-gradient(to bottom,
+ lighten($theme_bg_color,10%),
+ $theme_bg_color 40%,
+ darken($theme_bg_color,10%)
+ );
+ border: 1px solid $borders;
&:hover {
- $fill: linear-gradient(to bottom,
+ background-image: linear-gradient(to bottom,
lighten($theme_bg_color,15%),
lighten($theme_bg_color,10%),
$theme_bg_color);
- @include draw_button(null,$fill);
}
&:active {
- $fill: linear-gradient(to bottom,
+ background-image: linear-gradient(to bottom,
darken($theme_bg_color,20%),
darken($theme_bg_color,15%) 5%,
darken($theme_bg_color,10%));
- @include draw_button(null,$fill);
box-shadow: inset 0 1px 2px $borders;
}
&:insensitive, &:backdrop:insensitive {
- $fill: linear-gradient(to bottom, transparent);
+ background-image: linear-gradient(to bottom, transparent);
color: $insensitive_fg_color;
- @include draw_button(null,$fill);
}
}
@@ -286,7 +295,7 @@ GtkComboBox {
background-image: linear-gradient(to bottom,
lighten($theme_bg_color,2%),
darken($theme_bg_color,5%));
- box-shadow: inset 0 -1px $shadow,
+ box-shadow: inset 0 -1px $theme_shade,
inset 0 1px $borders_edge;
padding: 6px;
}
diff --git a/themes/Adwaita/gtk-3.0/_drawing.scss b/themes/Adwaita/gtk-3.0/_drawing.scss
index 361155d..3b4cf8a 100644
--- a/themes/Adwaita/gtk-3.0/_drawing.scss
+++ b/themes/Adwaita/gtk-3.0/_drawing.scss
@@ -1,26 +1,3 @@
// Drawing mixins
- mixin draw_entry($border,$fill) {
- $border: $borders !default;
- $fill: linear-gradient(to bottom,
- darken($theme_base_color,20%) 1%,
- darken($theme_base_color,10%) 10%,
- $theme_base_color
- ) !default;
-
- border: 1px solid $border;
- background-image: $fill;
- background-color: transparent;
-}
-
- mixin draw_button($border,$fill) {
- $border: $borders !default;
- $fill: linear-gradient(to bottom,
- lighten($theme_bg_color,10%),
- $theme_bg_color 40%,
- darken($theme_bg_color,10%)
- ) !default;
- border: 1px solid $border;
- background-image: $fill;
- background-color: transparent;
-}
+// generic drawing of more complex things
diff --git a/themes/Adwaita/gtk-3.0/gtk-dark.css b/themes/Adwaita/gtk-3.0/gtk-dark.css
index 3cf083f..9b57ffa 100644
--- a/themes/Adwaita/gtk-3.0/gtk-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-dark.css
@@ -1,67 +1,273 @@
-/*
-Syntax error: Undefined variable: "$shadow".
- on line 289 of _common.scss
- from line 21 of ./gtk-dark.scss
-
-Backtrace:
-_common.scss:289
-./gtk-dark.scss:21
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/script/variable.rb:49:in `_perform'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/script/node.rb:40:in `perform'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/script/list.rb:71:in `block in _perform'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/script/list.rb:71:in `map'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/script/list.rb:71:in `_perform'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/script/node.rb:40:in `perform'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/script/list.rb:71:in `block in _perform'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/script/list.rb:71:in `map'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/script/list.rb:71:in `_perform'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/script/node.rb:40:in `perform'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:298:in `visit_prop'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/base.rb:37:in `visit'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:100:in `visit'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/base.rb:53:in `block in visit_children'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/base.rb:53:in `map'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/base.rb:53:in `visit_children'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:109:in `block in visit_children'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:121:in `with_environment'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:108:in `visit_children'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/base.rb:37:in `block in visit'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:320:in `visit_rule'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/base.rb:37:in `visit'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:100:in `visit'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:227:in `block in visit_import'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:227:in `map'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:227:in `visit_import'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/base.rb:37:in `visit'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:100:in `visit'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/base.rb:53:in `block in visit_children'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/base.rb:53:in `map'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/base.rb:53:in `visit_children'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:109:in `block in visit_children'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:121:in `with_environment'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:108:in `visit_children'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/base.rb:37:in `block in visit'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:128:in `visit_root'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/base.rb:37:in `visit'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:100:in `visit'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/visitors/perform.rb:7:in `visit'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/tree/root_node.rb:20:in `render'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/engine.rb:315:in `_render'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/engine.rb:262:in `render'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/plugin/compiler.rb:362:in `update_stylesheet'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/plugin/compiler.rb:203:in `block in update_stylesheets'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/plugin/compiler.rb:201:in `each'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/plugin/compiler.rb:201:in `update_stylesheets'
-/home/jimmac/.gem/ruby/gems/sass-3.2.13/lib/sass/plugin/compiler.rb:283:in `block in watch'
-/home/jimmac/.gem/ruby/gems/listen-0.7.3/lib/listen/multi_listener.rb:108:in `call'
-/home/jimmac/.gem/ruby/gems/listen-0.7.3/lib/listen/multi_listener.rb:108:in `on_change'
-/home/jimmac/.gem/ruby/gems/listen-0.7.3/lib/listen/multi_listener.rb:117:in `block in initialize_adapter'
-/home/jimmac/.gem/ruby/gems/listen-0.7.3/lib/listen/adapter.rb:198:in `call'
-/home/jimmac/.gem/ruby/gems/listen-0.7.3/lib/listen/adapter.rb:198:in `report_changes'
-/home/jimmac/.gem/ruby/gems/listen-0.7.3/lib/listen/adapter.rb:210:in `poll_changed_dirs'
-/home/jimmac/.gem/ruby/gems/listen-0.7.3/lib/listen/adapters/linux.rb:48:in `block in start'
-*/
-body:before {
- white-space: pre;
- font-family: monospace;
- content: "Syntax error: Undefined variable: \"$shadow\".\A on line 289 of _common.scss\A
from line 21 of ./gtk-dark.scss"; }
+debug {
+ background-color: red; }
+
+* {
+ engine: adwaita;
+ padding: 0;
+ background-clip: padding-box;
+ -GtkToolButton-icon-spacing: 4;
+ -GtkTextView-error-underline-color: #cc0000;
+ -GtkPaned-handle-size: 5;
+ -GtkCheckButton-indicator-size: 16;
+ -GtkCheckMenuItem-indicator-size: 12;
+ /* The size for scrollbars. The slider is 2px smaller, but we keep it
+ * up so that the whole area is sensitive to button presses for the
+ * slider. The stepper button is larger in both directions, the slider
+ * only in the width
+ */
+ -GtkScrolledWindow-scrollbar-spacing: 0;
+ -GtkScrolledWindow-scrollbars-within-bevel: 1;
+ -GtkToolItemGroup-expander-size: 11;
+ -GtkExpander-expander-size: 11;
+ -GtkTreeView-expander-size: 11;
+ -GtkTreeView-horizontal-separator: 4;
+ -GtkMenu-horizontal-padding: 0;
+ -GtkMenu-vertical-padding: 0;
+ -GtkWidget-link-color: #4a90d9;
+ -GtkWidget-visited-link-color: #4a90d9;
+ -GtkWidget-focus-padding: 2;
+ -GtkWidget-focus-line-width: 1;
+ -GtkWindow-resize-grip-width: 0;
+ -GtkWindow-resize-grip-height: 0;
+ outline-color: rgba(238, 238, 236, 0.7);
+ outline-style: dashed;
+ outline-offset: 2px; }
+
+/***************
+ * Base States *
+ ***************/
+.background {
+ color: #eeeeec;
+ background-color: #393f3f; }
+
+.background:backdrop {
+ /* I want everything nice and flat in the unfocused window */
+ text-shadow: none;
+ icon-shadow: none;
+ color: white; }
+
+*:selected,
+*:selected:focus {
+ background-color: #2a76c6;
+ color: white; }
+
+*:selected:backdrop {
+ background-color: #2a76c6;
+ color: white; }
+
+*:insensitive {
+ background-color: transparent;
+ color: white;
+ border-color: #181b1b; }
+
+*:insensitive:backdrop {
+ /* I want everything nice and flat in the unfocused window */
+ text-shadow: none;
+ icon-shadow: none;
+ color: white; }
+
+/* Apply effects to insensitive and prelit images */
+*:insensitive {
+ -gtk-image-effect: dim; }
+
+*:hover {
+ -gtk-image-effect: highlight; }
+
+*:hover {
+ -gtk-image-effect: highlight; }
+
+.gtkstyle-fallback {
+ background-color: #393f3f;
+ color: #eeeeec; }
+
+.gtkstyle-fallback:prelight {
+ background-color: #515a5a;
+ color: #eeeeec; }
+
+.gtkstyle-fallback:active {
+ background-color: #212424;
+ color: #eeeeec; }
+
+.gtkstyle-fallback:insensitive {
+ background-color: transparent;
+ color: white; }
+
+.gtkstyle-fallback:selected {
+ background-color: #2a76c6;
+ color: white; }
+
+GtkImage,
+GtkImage:insensitive,
+GtkLabel,
+GtkLabel:insensitive,
+GtkBox,
+GtkBox:insensitive,
+GtkGrid,
+GtkGrid:insensitive {
+ background-color: transparent; }
+
+/*****************
+ * Miscellaneous *
+ *****************/
+ keyframes spinner {
+ 0.00% {
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.875)),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.75)),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.625)),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.5)),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.375)),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.25)),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.125)),
to(transparent)); }
+
+ 12.5% {
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.875)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.75)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.625)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.5)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.375)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.25)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.125)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(currentColor), to(transparent)); }
+
+ 25.0% {
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.75)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.625)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.5)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.375)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.25)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.125)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(currentColor), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.875)), to(transparent)); }
+
+ 37.5% {
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.625)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.5)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.375)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.25)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.125)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(currentColor), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.875)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.75)), to(transparent)); }
+
+ 50.0% {
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.5)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.375)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.25)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.125)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(currentColor), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.875)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.75)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.625)), to(transparent)); }
+
+ 62.5% {
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.375)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.25)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.125)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(currentColor), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.875)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.75)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.625)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.5)), to(transparent)); }
+
+ 75.0% {
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.25)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.125)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(currentColor), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.875)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.75)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.625)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.5)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.375)), to(transparent)); }
+
+ 87.5% {
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.125)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(currentColor), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.875)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.75)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.625)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.5)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.375)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.25)), to(transparent)); }
+
+ 100% {
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.875)),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.75)),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.625)),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.5)),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.375)),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.25)),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.125)),
to(transparent)); } }
+
+.spinner {
+ background-color: transparent;
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor),
to(transparent));
+ background-position: 14% 14%, 0% 50%, 14% 86%, 50% 100%, 86% 86%, 100% 50%, 86% 14%, 50% 0%;
+ background-size: 20% 20%;
+ background-repeat: no-repeat; }
+
+.spinner:active {
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.875)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.75)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.625)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.5)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.375)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.25)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.125)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(currentColor), to(transparent));
+ animation: spinner 1s infinite linear; }
+
+.button .spinner:active {
+ color: #eeeeec; }
+
+/****************
+ * Text Entries *
+ ****************/
+.entry, .linked .entry {
+ padding: 4px;
+ color: #eeeeec;
+ border-radius: 3px;
+ transition: all 200ms ease-out;
+ border: 1px solid black;
+ background-image: linear-gradient(to bottom, black 1%, #1a1a1a 10%, #333333);
+ background-color: transparent; }
+ .entry:insensitive, .entry:backdrop:insensitive {
+ color: white;
+ background-image: none;
+ background-color: transparent;
+ box-shadow: inset 0 1px rgba(51, 51, 51, 0.6), 0 1px rgba(51, 51, 51, 0.6);
+ /* doesn't have margin to paint on :( */ }
+ .entry:focus {
+ border-color: #2a76c6;
+ box-shadow: inset 0 0 2px 1px rgba(42, 118, 198, 0.5); }
+ .entry GtkLabel, .linked .entry GtkLabel {
+ text-shadow: 0 1px red; }
+
+.linked .entry:first-child {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-right-width: 0; }
+.linked .entry:last-child {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0; }
+
+/***********
+ * Buttons *
+ ***********/
+.button, .linked .button, GtkComboBox .button,
+.toolbar .button.raised,
+.toolbar .raised .button,
+.toolbar GtkComboBox .button,
+.spinbutton.vertical .button {
+ border-radius: 3px;
+ transition: all 200ms ease-out;
+ padding: 2px 4px;
+ background-color: transparent;
+ background-image: linear-gradient(to bottom, #515a5a, #393f3f 40%, #212424);
+ border: 1px solid black; }
+ .button:hover,
+ .toolbar .button.raised:hover,
+ .toolbar .raised .button:hover,
+ .toolbar GtkComboBox .button:hover,
+ .spinbutton.vertical .button:hover {
+ background-image: linear-gradient(to bottom, #5d6767, #515a5a, #393f3f); }
+ .button:active,
+ .toolbar .button.raised:active,
+ .toolbar .raised .button:active,
+ .toolbar GtkComboBox .button:active,
+ .spinbutton.vertical .button:active {
+ background-image: linear-gradient(to bottom, #090909, #151717 5%, #212424);
+ box-shadow: inset 0 1px 2px black; }
+ .button:insensitive, .button:backdrop:insensitive,
+ .toolbar .button.raised:insensitive,
+ .toolbar .button.raised:backdrop:insensitive,
+ .toolbar .raised .button:insensitive,
+ .toolbar .raised .button:backdrop:insensitive,
+ .toolbar GtkComboBox .button:insensitive,
+ .toolbar GtkComboBox .button:backdrop:insensitive,
+ .spinbutton.vertical .button:insensitive,
+ .spinbutton.vertical .button:backdrop:insensitive {
+ background-image: linear-gradient(to bottom, transparent);
+ color: white; }
+
+.linked .button:first-child {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-right-width: 0; }
+.linked .button:last-child {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0; }
+
+.header-bar .button.text-button {
+ padding: 2px 8px; }
+.header-bar .button.image-button {
+ padding: 4px; }
+
+/**************
+ * ComboBoxes *
+ **************/
+GtkComboBox {
+ padding: 0;
+ -GtkComboBox-arrow-scaling: 0.5;
+ -GtkComboBox-shadow-type: none; }
+ GtkComboBox .separator {
+ /* always disable separators */
+ -GtkWidget-wide-separators: true;
+ -GtkWidget-horizontal-separator: 0;
+ -GtkWidget-vertical-separator: 0; }
+ GtkComboBox.combobox-entry .entry:first-child {
+ border-radius: 3px 0 0 3px;
+ border-right: 0; }
+ GtkComboBox.combobox-entry .button:first-child {
+ border-radius: 3px 0 0 3px; }
+ GtkComboBox.combobox-entry .entry:last-child {
+ border-radius: 0 3px 3px 0;
+ border-left: 0; }
+ GtkComboBox.combobox-entry .button:last-child {
+ border-radius: 0 3px 3px 0; }
+ GtkComboBox .linked .button, .linked GtkComboBox .button, GtkComboBox .button {
+ padding: 2px 4px; }
+
+/***************
+ * Header bars *
+ ***************/
+.header-bar {
+ border-width: 0 0 1px;
+ border-style: solid;
+ border-color: shade(black, 0.9);
+ border-radius: 5px 5px 0 0;
+ background-color: none;
+ background-image: linear-gradient(to bottom, #3e4444, #2d3232);
+ box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2), inset 0 1px rgba(51, 51, 51, 0.6);
+ padding: 6px; }
diff --git a/themes/Adwaita/gtk-3.0/gtk-dark.scss b/themes/Adwaita/gtk-3.0/gtk-dark.scss
index c5a0320..eada429 100644
--- a/themes/Adwaita/gtk-3.0/gtk-dark.scss
+++ b/themes/Adwaita/gtk-3.0/gtk-dark.scss
@@ -8,6 +8,8 @@ $theme_selected_fg_color: lighten($theme_fg_color,10%);
$theme_selected_bg_color: darken(#4a90d9,10%);
$borders: darken($theme_bg_color,30%);
$borders_edge: transparentize($theme_base_color,.4);
+$theme_shade: rgba(0,0,0,.2); //shadow seems to be a reserved word
+$wm_shade: 0 2px 4px rgba(0,0,0,.6);
$link_color: lighten($theme_selected_bg_color,10%);
$warning_color: #f57900;
diff --git a/themes/Adwaita/gtk-3.0/gtk.css b/themes/Adwaita/gtk-3.0/gtk.css
index 3d045c0..7f8c334 100644
--- a/themes/Adwaita/gtk-3.0/gtk.css
+++ b/themes/Adwaita/gtk-3.0/gtk.css
@@ -193,25 +193,21 @@ GtkGrid:insensitive {
border-radius: 3px;
transition: all 200ms ease-out;
padding: 2px 4px;
- border: 1px solid #a1a1a1;
+ background-color: transparent;
background-image: linear-gradient(to bottom, white, #ededed 40%, lightgrey);
- background-color: transparent; }
+ border: 1px solid #a1a1a1; }
.button:hover,
.toolbar .button.raised:hover,
.toolbar .raised .button:hover,
.toolbar GtkComboBox .button:hover,
.spinbutton.vertical .button:hover {
- border: 1px solid #a1a1a1;
- background-image: linear-gradient(to bottom, white, white, #ededed);
- background-color: transparent; }
+ background-image: linear-gradient(to bottom, white, white, #ededed); }
.button:active,
.toolbar .button.raised:active,
.toolbar .raised .button:active,
.toolbar GtkComboBox .button:active,
.spinbutton.vertical .button:active {
- border: 1px solid #a1a1a1;
background-image: linear-gradient(to bottom, #bababa, #c7c7c7 5%, lightgrey);
- background-color: transparent;
box-shadow: inset 0 1px 2px #a1a1a1; }
.button:insensitive, .button:backdrop:insensitive,
.toolbar .button.raised:insensitive,
@@ -222,10 +218,8 @@ GtkGrid:insensitive {
.toolbar GtkComboBox .button:backdrop:insensitive,
.spinbutton.vertical .button:insensitive,
.spinbutton.vertical .button:backdrop:insensitive {
- color: #748489;
- border: 1px solid #a1a1a1;
background-image: linear-gradient(to bottom, transparent);
- background-color: transparent; }
+ color: #748489; }
.linked .button:first-child {
border-top-right-radius: 0;
diff --git a/themes/Adwaita/gtk-3.0/gtk.scss b/themes/Adwaita/gtk-3.0/gtk.scss
index b5925f0..86e110f 100644
--- a/themes/Adwaita/gtk-3.0/gtk.scss
+++ b/themes/Adwaita/gtk-3.0/gtk.scss
@@ -13,9 +13,9 @@ $theme_fg_color: #2e3436;
$theme_selected_fg_color: #ffffff;
$theme_selected_bg_color: #729fcf;
$borders: darken($theme_bg_color,30%);
-$borders_edge: transparentize($theme_base_color,.9);
-$shadow: rgba(0,0,0,.1);
-$wm_shadow: 0 2px 4px rgba(0,0,0,.5);
+$borders_edge: transparentize($theme_base_color,0.9);
+$theme_shade: rgba(0,0,0,.1); //shadow seems to be a reserved word
+$wm_shade: 0 2px 4px rgba(0,0,0,.5);
$link_color: lighten($theme_selected_bg_color,10%);
$warning_color: #f57900;
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
