[gtk+] Adwaita: initial flat entry styling.
- From: Lapo Calamandrei <lapo src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk+] Adwaita: initial flat entry styling.
- Date: Fri, 27 Jun 2014 12:25:31 +0000 (UTC)
commit 8b1e52cbd6546161baeb286d6f1a7ce09f14b79e
Author: Lapo Calamandrei <calamandrei gmail com>
Date: Fri Jun 27 14:24:53 2014 +0200
Adwaita: initial flat entry styling.
gtk/resources/theme/Adwaita/_common.scss | 17 ++
gtk/resources/theme/Adwaita/gtk-contained-dark.css | 250 +++++++++++---------
gtk/resources/theme/Adwaita/gtk-contained.css | 242 ++++++++++---------
3 files changed, 285 insertions(+), 224 deletions(-)
---
diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index 5ac4a7f..7b7c359 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -153,6 +153,12 @@
border-radius: 3px;
transition: all 200ms ease-out;
@include entry(normal);
+ &.flat, &.flat:focus {
+ padding: 2px;
+ @include entry(normal, $noedge:true);
+ border: none;
+ border-radius: 0;
+ }
&:focus { @include entry(focus); }
&:insensitive { @include entry(insensitive); }
&:backdrop { @include entry(backdrop); }
@@ -494,6 +500,17 @@ GtkColorButton.button { padding: 4px; } // Uniform padding on the GtkColorButton
border-top-width: 0;
}
}
+/* This is to fix spinbuttons in entries, but I feel like hiding code issues
+ * hence it's commented atm.
+ * GtkTreeView & {
+ * &.entry, &.entry:focus {
+ * padding: 1px;
+ * border-width: 1px 0;
+ * border-color: $selected_bg_color;
+ * border-radius: 0;
+ * box-shadow: none;
+ * }
+ * } */
}
/**************
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index fbb4fe7..39ee895 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -139,6 +139,16 @@
background-image: linear-gradient(to bottom, #212121, #292929 90%);
border-color: #1c1f1f;
box-shadow: inset 0 2px 2px -2px #141414, 0 1px rgba(238, 238, 236, 0.1); }
+ .entry.flat, .entry.flat:focus {
+ padding: 2px;
+ background-color: transparent;
+ border-style: solid;
+ border-width: 1px;
+ background-image: linear-gradient(to bottom, #212121, #292929 90%);
+ border-color: #1c1f1f;
+ box-shadow: inset 0 2px 2px -2px #141414;
+ border: none;
+ border-radius: 0; }
.entry:focus {
background-color: transparent;
border-style: solid;
@@ -499,136 +509,148 @@ GtkColorButton.button {
/*****************
* GtkSpinButton *
*****************/
-.spinbutton .button {
- background-image: none;
- border-width: 0 0 0 1px;
- border-color: rgba(28, 31, 31, 0.3);
- color: #e4e4e2;
- border-radius: 0;
- box-shadow: none; }
- .spinbutton .button:dir(rtl) {
- border-width: 0 1px 0 0; }
- .spinbutton .button:hover {
- color: #eeeeec;
- background-color: rgba(0, 0, 0, 0.05); }
- .spinbutton .button:insensitive {
- color: rgba(147, 150, 149, 0.3); }
- .spinbutton .button:active {
- box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2);
- background-color: rgba(0, 0, 0, 0.1); }
- .spinbutton .button:backdrop {
- border-color: rgba(30, 34, 34, 0.3); }
- .spinbutton .button:backdrop:insensitive {
+.spinbutton {
+ /* This is to fix spinbuttons in entries, but I feel like hiding code issues
+ * hence it's commented atm.
+ * GtkTreeView & {
+ * &.entry, &.entry:focus {
+ * padding: 1px;
+ * border-width: 1px 0;
+ * border-color: $selected_bg_color;
+ * border-radius: 0;
+ * box-shadow: none;
+ * }
+ * } */ }
+ .spinbutton .button {
background-image: none;
- color: rgba(69, 76, 76, 0.3);
- border-width: 0 0 0 1px; }
- .spinbutton .button:backdrop:insensitive:dir(rtl) {
+ border-width: 0 0 0 1px;
+ border-color: rgba(28, 31, 31, 0.3);
+ color: #e4e4e2;
+ border-radius: 0;
+ box-shadow: none; }
+ .spinbutton .button:dir(rtl) {
border-width: 0 1px 0 0; }
-.spinbutton.vertical .button:first-child {
- border-width: 1px;
- border-style: solid;
- color: #eeeeec;
- background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232);
- border-color: #1c1f1f;
- text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
- icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
- .spinbutton.vertical .button:first-child:active {
- border-width: 1px;
- border-style: solid;
- color: #eeeeec;
- border-color: #1c1f1f;
- background-image: linear-gradient(to bottom, #212424, #2d3232 3%);
- text-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
- icon-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
- box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3); }
- .spinbutton.vertical .button:first-child:hover {
+ .spinbutton .button:hover {
+ color: #eeeeec;
+ background-color: rgba(0, 0, 0, 0.05); }
+ .spinbutton .button:insensitive {
+ color: rgba(147, 150, 149, 0.3); }
+ .spinbutton .button:active {
+ box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2);
+ background-color: rgba(0, 0, 0, 0.1); }
+ .spinbutton .button:backdrop {
+ border-color: rgba(30, 34, 34, 0.3); }
+ .spinbutton .button:backdrop:insensitive {
+ background-image: none;
+ color: rgba(69, 76, 76, 0.3);
+ border-width: 0 0 0 1px; }
+ .spinbutton .button:backdrop:insensitive:dir(rtl) {
+ border-width: 0 1px 0 0; }
+ .spinbutton.vertical .button:first-child {
border-width: 1px;
border-style: solid;
color: #eeeeec;
+ background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232);
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);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
- .spinbutton.vertical .button:first-child:insensitive {
- border-width: 1px;
- border-style: solid;
- color: #939695;
- border-color: #1c1f1f;
- background-image: linear-gradient(to bottom, #323636);
- text-shadow: none;
- icon-shadow: none;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
- .spinbutton.vertical .button:first-child:backdrop {
- border-width: 1px;
- border-style: solid;
- color: #c9cbc9;
- border-color: #1e2222;
- 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(255, 255, 255, 0); }
-.spinbutton.vertical .button:last-child {
- border-width: 1px;
- border-style: solid;
- color: #eeeeec;
- background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232);
- border-color: #1c1f1f;
- text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
- 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); }
- .spinbutton.vertical .button:last-child:active {
- border-width: 1px;
- border-style: solid;
- color: #eeeeec;
- border-color: #1c1f1f;
- background-image: linear-gradient(to bottom, #212424, #2d3232 3%);
- text-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
- icon-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
- box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(238, 238, 236, 0.1); }
- .spinbutton.vertical .button:last-child:hover {
+ .spinbutton.vertical .button:first-child:active {
+ border-width: 1px;
+ border-style: solid;
+ color: #eeeeec;
+ border-color: #1c1f1f;
+ background-image: linear-gradient(to bottom, #212424, #2d3232 3%);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
+ box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3); }
+ .spinbutton.vertical .button:first-child:hover {
+ border-width: 1px;
+ border-style: solid;
+ color: #eeeeec;
+ 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); }
+ .spinbutton.vertical .button:first-child:insensitive {
+ border-width: 1px;
+ border-style: solid;
+ color: #939695;
+ border-color: #1c1f1f;
+ background-image: linear-gradient(to bottom, #323636);
+ text-shadow: none;
+ icon-shadow: none;
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+ .spinbutton.vertical .button:first-child:backdrop {
+ border-width: 1px;
+ border-style: solid;
+ color: #c9cbc9;
+ border-color: #1e2222;
+ 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(255, 255, 255, 0); }
+ .spinbutton.vertical .button:last-child {
border-width: 1px;
border-style: solid;
color: #eeeeec;
+ background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232);
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);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
+ 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); }
- .spinbutton.vertical .button:last-child:insensitive {
- border-width: 1px;
- border-style: solid;
- color: #939695;
- border-color: #1c1f1f;
- background-image: linear-gradient(to bottom, #323636);
- text-shadow: none;
- icon-shadow: none;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
- .spinbutton.vertical .button:last-child:backdrop {
+ .spinbutton.vertical .button:last-child:active {
+ border-width: 1px;
+ border-style: solid;
+ color: #eeeeec;
+ border-color: #1c1f1f;
+ background-image: linear-gradient(to bottom, #212424, #2d3232 3%);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
+ box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(238, 238, 236, 0.1); }
+ .spinbutton.vertical .button:last-child:hover {
+ border-width: 1px;
+ border-style: solid;
+ color: #eeeeec;
+ 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); }
+ .spinbutton.vertical .button:last-child:insensitive {
+ border-width: 1px;
+ border-style: solid;
+ color: #939695;
+ border-color: #1c1f1f;
+ background-image: linear-gradient(to bottom, #323636);
+ text-shadow: none;
+ icon-shadow: none;
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
+ .spinbutton.vertical .button:last-child:backdrop {
+ border-width: 1px;
+ border-style: solid;
+ color: #c9cbc9;
+ border-color: #1e2222;
+ 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(255, 255, 255, 0); }
+ .spinbutton.vertical .button:backdrop:insensitive {
border-width: 1px;
border-style: solid;
- color: #c9cbc9;
+ color: #454c4c;
border-color: #1e2222;
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(255, 255, 255, 0); }
-.spinbutton.vertical .button:backdrop:insensitive {
- border-width: 1px;
- border-style: solid;
- color: #454c4c;
- border-color: #1e2222;
- background-image: linear-gradient(to bottom, #393f3f);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
-.spinbutton.vertical.entry {
- border-radius: 0; }
-.spinbutton.vertical .button:first-child, .spinbutton.vertical .button:first-child:active,
.spinbutton.vertical .button:first-child:hover, .spinbutton.vertical .button:first-child:insensitive,
.spinbutton.vertical .button:first-child:backdrop {
- border-radius: 3px 3px 0 0;
- border-bottom-width: 0; }
-.spinbutton.vertical .button:last-child, .spinbutton.vertical .button:last-child:active,
.spinbutton.vertical .button:last-child:hover, .spinbutton.vertical .button:last-child:insensitive,
.spinbutton.vertical .button:last-child:backdrop {
- border-radius: 0 0 3px 3px;
- border-top-width: 0; }
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+ .spinbutton.vertical.entry {
+ border-radius: 0; }
+ .spinbutton.vertical .button:first-child, .spinbutton.vertical .button:first-child:active,
.spinbutton.vertical .button:first-child:hover, .spinbutton.vertical .button:first-child:insensitive,
.spinbutton.vertical .button:first-child:backdrop {
+ border-radius: 3px 3px 0 0;
+ border-bottom-width: 0; }
+ .spinbutton.vertical .button:last-child, .spinbutton.vertical .button:last-child:active,
.spinbutton.vertical .button:last-child:hover, .spinbutton.vertical .button:last-child:insensitive,
.spinbutton.vertical .button:last-child:backdrop {
+ border-radius: 0 0 3px 3px;
+ border-top-width: 0; }
/**************
* ComboBoxes *
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 2df5e80..5f0b8ff 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -139,6 +139,16 @@
background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
border-color: #a1a1a1;
box-shadow: inset 0 2px 2px -2px #7f7f7f, 0 1px white; }
+ .entry.flat, .entry.flat:focus {
+ padding: 2px;
+ background-color: transparent;
+ border-style: solid;
+ border-width: 1px;
+ background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
+ border-color: #a1a1a1;
+ box-shadow: inset 0 2px 2px -2px #7f7f7f;
+ border: none;
+ border-radius: 0; }
.entry:focus {
background-color: transparent;
border-style: solid;
@@ -499,136 +509,148 @@ GtkColorButton.button {
/*****************
* GtkSpinButton *
*****************/
-.spinbutton .button {
- background-image: none;
- border-width: 0 0 0 1px;
- border-color: rgba(161, 161, 161, 0.3);
- color: #383e40;
- border-radius: 0;
- box-shadow: none; }
- .spinbutton .button:dir(rtl) {
- border-width: 0 1px 0 0; }
- .spinbutton .button:hover {
- color: #2e3436;
- background-color: rgba(0, 0, 0, 0.05); }
- .spinbutton .button:insensitive {
- color: rgba(141, 144, 145, 0.3); }
- .spinbutton .button:active {
- box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2);
- background-color: rgba(0, 0, 0, 0.1); }
- .spinbutton .button:backdrop {
- border-color: rgba(168, 168, 168, 0.3); }
- .spinbutton .button:backdrop:insensitive {
+.spinbutton {
+ /* This is to fix spinbuttons in entries, but I feel like hiding code issues
+ * hence it's commented atm.
+ * GtkTreeView & {
+ * &.entry, &.entry:focus {
+ * padding: 1px;
+ * border-width: 1px 0;
+ * border-color: $selected_bg_color;
+ * border-radius: 0;
+ * box-shadow: none;
+ * }
+ * } */ }
+ .spinbutton .button {
background-image: none;
- color: rgba(199, 199, 199, 0.3);
- border-width: 0 0 0 1px; }
- .spinbutton .button:backdrop:insensitive:dir(rtl) {
+ border-width: 0 0 0 1px;
+ border-color: rgba(161, 161, 161, 0.3);
+ color: #383e40;
+ border-radius: 0;
+ box-shadow: none; }
+ .spinbutton .button:dir(rtl) {
border-width: 0 1px 0 0; }
-.spinbutton.vertical .button:first-child {
- border-width: 1px;
- border-style: solid;
- color: #2e3436;
- background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0);
- border-color: #a1a1a1;
- 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; }
- .spinbutton.vertical .button:first-child:active {
- border-width: 1px;
- border-style: solid;
- color: #2e3436;
- border-color: #a1a1a1;
- background-image: linear-gradient(to bottom, #c7c7c7, #d1d1d1 3%, lightgray);
- text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
- box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3); }
- .spinbutton.vertical .button:first-child:hover {
+ .spinbutton .button:hover {
+ color: #2e3436;
+ background-color: rgba(0, 0, 0, 0.05); }
+ .spinbutton .button:insensitive {
+ color: rgba(141, 144, 145, 0.3); }
+ .spinbutton .button:active {
+ box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2);
+ background-color: rgba(0, 0, 0, 0.1); }
+ .spinbutton .button:backdrop {
+ border-color: rgba(168, 168, 168, 0.3); }
+ .spinbutton .button:backdrop:insensitive {
+ background-image: none;
+ color: rgba(199, 199, 199, 0.3);
+ border-width: 0 0 0 1px; }
+ .spinbutton .button:backdrop:insensitive:dir(rtl) {
+ border-width: 0 1px 0 0; }
+ .spinbutton.vertical .button:first-child {
border-width: 1px;
border-style: solid;
color: #2e3436;
+ background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0);
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; }
- .spinbutton.vertical .button:first-child:insensitive {
- border-width: 1px;
- border-style: solid;
- color: #8d9091;
- 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); }
- .spinbutton.vertical .button:first-child:backdrop {
- border-width: 1px;
- border-style: solid;
- color: #54595a;
- border-color: #a8a8a8;
- 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); }
-.spinbutton.vertical .button:last-child {
- border-width: 1px;
- border-style: solid;
- color: #2e3436;
- background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0);
- border-color: #a1a1a1;
- 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; }
- .spinbutton.vertical .button:last-child:active {
- border-width: 1px;
- border-style: solid;
- color: #2e3436;
- border-color: #a1a1a1;
- background-image: linear-gradient(to bottom, #c7c7c7, #d1d1d1 3%, lightgray);
- text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
- box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px white; }
- .spinbutton.vertical .button:last-child:hover {
+ .spinbutton.vertical .button:first-child:active {
+ border-width: 1px;
+ border-style: solid;
+ color: #2e3436;
+ border-color: #a1a1a1;
+ background-image: linear-gradient(to bottom, #c7c7c7, #d1d1d1 3%, lightgray);
+ text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+ icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+ box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3); }
+ .spinbutton.vertical .button:first-child:hover {
+ border-width: 1px;
+ border-style: solid;
+ color: #2e3436;
+ 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; }
+ .spinbutton.vertical .button:first-child:insensitive {
+ border-width: 1px;
+ border-style: solid;
+ color: #8d9091;
+ 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); }
+ .spinbutton.vertical .button:first-child:backdrop {
+ border-width: 1px;
+ border-style: solid;
+ color: #54595a;
+ border-color: #a8a8a8;
+ 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); }
+ .spinbutton.vertical .button:last-child {
border-width: 1px;
border-style: solid;
color: #2e3436;
+ background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0);
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; }
- .spinbutton.vertical .button:last-child:insensitive {
- border-width: 1px;
- border-style: solid;
- color: #8d9091;
- 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), 0 1px white; }
- .spinbutton.vertical .button:last-child:backdrop {
+ .spinbutton.vertical .button:last-child:active {
+ border-width: 1px;
+ border-style: solid;
+ color: #2e3436;
+ border-color: #a1a1a1;
+ background-image: linear-gradient(to bottom, #c7c7c7, #d1d1d1 3%, lightgray);
+ text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+ icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+ box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px white; }
+ .spinbutton.vertical .button:last-child:hover {
+ border-width: 1px;
+ border-style: solid;
+ color: #2e3436;
+ 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; }
+ .spinbutton.vertical .button:last-child:insensitive {
+ border-width: 1px;
+ border-style: solid;
+ color: #8d9091;
+ 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), 0 1px white; }
+ .spinbutton.vertical .button:last-child:backdrop {
+ border-width: 1px;
+ border-style: solid;
+ color: #54595a;
+ border-color: #a8a8a8;
+ 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); }
+ .spinbutton.vertical .button:backdrop:insensitive {
border-width: 1px;
border-style: solid;
- color: #54595a;
+ color: #c7c7c7;
border-color: #a8a8a8;
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); }
-.spinbutton.vertical .button:backdrop:insensitive {
- border-width: 1px;
- border-style: solid;
- color: #c7c7c7;
- border-color: #a8a8a8;
- background-image: linear-gradient(to bottom, #ededed);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
-.spinbutton.vertical.entry {
- border-radius: 0; }
-.spinbutton.vertical .button:first-child, .spinbutton.vertical .button:first-child:active,
.spinbutton.vertical .button:first-child:hover, .spinbutton.vertical .button:first-child:insensitive,
.spinbutton.vertical .button:first-child:backdrop {
- border-radius: 3px 3px 0 0;
- border-bottom-width: 0; }
-.spinbutton.vertical .button:last-child, .spinbutton.vertical .button:last-child:active,
.spinbutton.vertical .button:last-child:hover, .spinbutton.vertical .button:last-child:insensitive,
.spinbutton.vertical .button:last-child:backdrop {
- border-radius: 0 0 3px 3px;
- border-top-width: 0; }
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+ .spinbutton.vertical.entry {
+ border-radius: 0; }
+ .spinbutton.vertical .button:first-child, .spinbutton.vertical .button:first-child:active,
.spinbutton.vertical .button:first-child:hover, .spinbutton.vertical .button:first-child:insensitive,
.spinbutton.vertical .button:first-child:backdrop {
+ border-radius: 3px 3px 0 0;
+ border-bottom-width: 0; }
+ .spinbutton.vertical .button:last-child, .spinbutton.vertical .button:last-child:active,
.spinbutton.vertical .button:last-child:hover, .spinbutton.vertical .button:last-child:insensitive,
.spinbutton.vertical .button:last-child:backdrop {
+ border-radius: 0 0 3px 3px;
+ border-top-width: 0; }
/**************
* ComboBoxes *
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]