[gtk+] Adwaita: fix switch styling
- From: Lapo Calamandrei <lapo src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk+] Adwaita: fix switch styling
- Date: Fri, 23 Oct 2015 15:13:40 +0000 (UTC)
commit 5b0a26f8a318814f2a702ceba72d4a16ddb49f98
Author: Lapo Calamandrei <calamandrei gmail com>
Date: Fri Oct 23 17:12:01 2015 +0200
Adwaita: fix switch styling
looks like switch stare are not passed to the slider anymore so
rewrite selectors accordingly.
gtk/theme/Adwaita/_common.scss | 43 +++++++++-------
gtk/theme/Adwaita/gtk-contained-dark.css | 80 +++++++++++++++---------------
gtk/theme/Adwaita/gtk-contained.css | 80 +++++++++++++++---------------
3 files changed, 104 insertions(+), 99 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index d5ba620..6a88c6b 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -2006,7 +2006,9 @@ switch {
background-image: none;
background-color: $insensitive_bg_color;
}
- & slider {
+ // slider styling
+ // switch slider doesn't respond to its own states but relies on the switch ones
+ slider {
border: 1px solid;
border-radius: 3px;
@include button(normal);
@@ -2014,26 +2016,29 @@ switch {
transparentize(white, 0.85)),
inset 0 -2px transparentize($bg_color, 0.4),
inset 0 -1px mix($bg_color, $borders_color, 50%);
- &:hover {
- @include button(hover);
- box-shadow: inset 0 1px if($variant=='light', white,
- transparentize(white, 0.85)),
- inset 0 -2px transparentize($bg_color, 0.4),
- inset 0 -1px mix($bg_color, $borders_color, 50%);
- }
- &:active { border: 1px solid $selected_borders_color; }
- &:insensitive { @include button(insensitive, $edge:none); }
- &:backdrop {
+ }
+ &:hover slider {
+ @include button(hover);
+ box-shadow: inset 0 1px if($variant=='light', white,
+ transparentize(white, 0.85)),
+ inset 0 -2px transparentize($bg_color, 0.4),
+ inset 0 -1px mix($bg_color, $borders_color, 50%);
+ }
+ &:active slider { border: 1px solid $selected_borders_color; }
+
+ &:insensitive slider { @include button(insensitive, $edge:none); }
+
+ &:backdrop {
+ slider {
@include button(backdrop);
box-shadow: none;
- &:active{
- border-color: if($variant == 'light', $selected_bg_color,
- $selected_borders_color);
- }
- &:insensitive {
- @include button(backdrop-insensitive);
- box-shadow: none;
- }
+ }
+
+ &:active slider { border-color: if($variant == 'light', $selected_bg_color, $selected_borders_color); }
+
+ &:insensitive slider {
+ @include button(backdrop-insensitive);
+ box-shadow: none;
}
}
.list-row:selected & {
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index e550622..fdfe5ca 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -2474,46 +2474,46 @@ switch {
icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), inset 0 -2px rgba(57, 63, 63, 0.6), inset 0 -1px
#2b2f2f; }
- switch slider:hover {
- color: #eeeeec;
- outline-color: rgba(238, 238, 236, 0.3);
- border-color: #1c1f1f;
- background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f);
- text-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
- icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), inset 0 -2px rgba(57, 63, 63, 0.6), inset 0 -1px
#2b2f2f; }
- switch slider:active {
- border: 1px solid #0f2b48; }
- switch slider:insensitive {
- color: #949796;
- border-color: #1c1f1f;
- background-image: linear-gradient(to bottom, #333636);
- text-shadow: none;
- icon-shadow: none;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
- switch slider:insensitive > .label {
- color: inherit; }
- switch slider:backdrop {
- color: #949796;
- border-color: #1f2222;
- background-image: linear-gradient(to bottom, #393f3f);
- text-shadow: none;
- icon-shadow: none;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
- box-shadow: none; }
- switch slider:backdrop:active {
- border-color: #0f2b48; }
- switch slider:backdrop:insensitive {
- color: #5d6767;
- border-color: #1f2222;
- background-image: linear-gradient(to bottom, #333636);
- text-shadow: none;
- icon-shadow: none;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
- box-shadow: none; }
- switch slider:backdrop:insensitive > .label {
- color: inherit; }
+ switch:hover slider {
+ color: #eeeeec;
+ outline-color: rgba(238, 238, 236, 0.3);
+ border-color: #1c1f1f;
+ background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1);
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), inset 0 -2px rgba(57, 63, 63, 0.6), inset 0 -1px
#2b2f2f; }
+ switch:active slider {
+ border: 1px solid #0f2b48; }
+ switch:insensitive slider {
+ color: #949796;
+ border-color: #1c1f1f;
+ background-image: linear-gradient(to bottom, #333636);
+ text-shadow: none;
+ icon-shadow: none;
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+ switch:insensitive slider > .label {
+ color: inherit; }
+ switch:backdrop slider {
+ color: #949796;
+ border-color: #1f2222;
+ background-image: linear-gradient(to bottom, #393f3f);
+ text-shadow: none;
+ icon-shadow: none;
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
+ box-shadow: none; }
+ switch:backdrop:active slider {
+ border-color: #0f2b48; }
+ switch:backdrop:insensitive slider {
+ color: #5d6767;
+ border-color: #1f2222;
+ background-image: linear-gradient(to bottom, #333636);
+ text-shadow: none;
+ icon-shadow: none;
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
+ box-shadow: none; }
+ switch:backdrop:insensitive slider > .label {
+ color: inherit; }
/*************************
* Check and Radio items *
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index edd406d..31ada6a 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -2481,46 +2481,46 @@ switch {
icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
box-shadow: inset 0 1px white, 0 1px white;
box-shadow: inset 0 1px white, inset 0 -2px rgba(237, 237, 237, 0.6), inset 0 -1px #c7c7c7; }
- switch slider:hover {
- color: #2e3436;
- outline-color: rgba(46, 52, 54, 0.3);
- border-color: #a1a1a1;
- background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed);
- text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
- box-shadow: inset 0 1px white, 0 1px white;
- box-shadow: inset 0 1px white, inset 0 -2px rgba(237, 237, 237, 0.6), inset 0 -1px #c7c7c7; }
- switch slider:active {
- border: 1px solid #184472; }
- switch slider:insensitive {
- color: #8e9192;
- border-color: #a1a1a1;
- background-image: linear-gradient(to bottom, #f4f4f4);
- text-shadow: none;
- icon-shadow: none;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
- switch slider:insensitive > .label {
- color: inherit; }
- switch slider:backdrop {
- color: #8e9192;
- border-color: darkgray;
- background-image: linear-gradient(to bottom, #ededed);
- text-shadow: none;
- icon-shadow: none;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
- box-shadow: none; }
- switch slider:backdrop:active {
- border-color: #4a90d9; }
- switch slider:backdrop:insensitive {
- color: #c7c7c7;
- border-color: darkgray;
- background-image: linear-gradient(to bottom, #f4f4f4);
- text-shadow: none;
- icon-shadow: none;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
- box-shadow: none; }
- switch slider:backdrop:insensitive > .label {
- color: inherit; }
+ switch:hover slider {
+ color: #2e3436;
+ outline-color: rgba(46, 52, 54, 0.3);
+ border-color: #a1a1a1;
+ background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed);
+ text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+ icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+ box-shadow: inset 0 1px white, 0 1px white;
+ box-shadow: inset 0 1px white, inset 0 -2px rgba(237, 237, 237, 0.6), inset 0 -1px #c7c7c7; }
+ switch:active slider {
+ border: 1px solid #184472; }
+ switch:insensitive slider {
+ color: #8e9192;
+ border-color: #a1a1a1;
+ background-image: linear-gradient(to bottom, #f4f4f4);
+ text-shadow: none;
+ icon-shadow: none;
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+ switch:insensitive slider > .label {
+ color: inherit; }
+ switch:backdrop slider {
+ color: #8e9192;
+ border-color: darkgray;
+ background-image: linear-gradient(to bottom, #ededed);
+ text-shadow: none;
+ icon-shadow: none;
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
+ box-shadow: none; }
+ switch:backdrop:active slider {
+ border-color: #4a90d9; }
+ switch:backdrop:insensitive slider {
+ color: #c7c7c7;
+ border-color: darkgray;
+ background-image: linear-gradient(to bottom, #f4f4f4);
+ text-shadow: none;
+ icon-shadow: none;
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
+ box-shadow: none; }
+ switch:backdrop:insensitive slider > .label {
+ color: inherit; }
.list-row:selected switch {
box-shadow: none;
border-color: #184472; }
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]