[gtk+] Adwaita: bit padding overhaul
- From: Lapo Calamandrei <lapo src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk+] Adwaita: bit padding overhaul
- Date: Mon, 21 Jul 2014 16:53:06 +0000 (UTC)
commit 306890ef9d84316a5c269df5480870785bb6d799
Author: Lapo Calamandrei <calamandrei gmail com>
Date: Mon Jul 21 18:49:15 2014 +0200
Adwaita: bit padding overhaul
Header-bar and action-bar buttons used to be bigger then others
now everything is as big as those, maintaining two different sizes
for default widgets depending on the placement is a maintainance
nightmare and having controls the same size is good from a usability
point of view.
gtk/resources/theme/Adwaita/_common.scss | 32 ++-
gtk/resources/theme/Adwaita/gtk-contained-dark.css | 254 ++++++++++----------
gtk/resources/theme/Adwaita/gtk-contained.css | 246 ++++++++++---------
3 files changed, 277 insertions(+), 255 deletions(-)
---
diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index 96af7d0..b240e35 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -172,7 +172,7 @@ GtkLabel {
****************/
.entry {
- padding: 4px;
+ padding: 5px 8px 6px;
border-radius: 3px;
transition: all 200ms ease-out;
@include entry(normal);
@@ -270,7 +270,7 @@ GtkLabel {
.button {
border-radius: 3px;
transition: all 200ms ease-out;
- padding: 4px 6px;
+ padding: 5px 8px 6px;
@include button(normal);
&:hover, &.flat:hover {
@include button(hover);
@@ -356,14 +356,13 @@ GtkLabel {
}
}
}
- // buttons in header bars and action bars
- .header-bar &.button,
- .action-bar &.button,
- .header-bar &.text-button,
- .action-bar &.text-button { padding: 6px 16px 5px; } // due to font metrics
- .header-bar &.image-button,
- .action-bar &.image-button { padding: 8px; }
+ &.image-button,
+ &.image-button { padding: 8px; }
+ &.text-button {
+ padding-left: 16px;
+ padding-right: 16px;
+ }
// stack switcher buttons
.action-bar .stack-switcher &.image-button,
@@ -376,6 +375,8 @@ GtkLabel {
.header-bar .stack-switcher &.text-button {
padding-left: 10px;
padding-right: 10px;
+ padding-top: 5px; // I need these two to not get overridden by radio
+ padding-bottom: 6px; // button style
}
.stack-switcher > & {
padding-left: 0; // subtract the padding which will be added to the
@@ -607,6 +608,8 @@ GtkColorButton.button {
}
&.vertical {
.button {
+ padding-top: 8px; // Same vertical padding as image-buttons
+ padding-bottom: 8px; //
&:first-child {
@extend %top_button;
@include button(normal, $noedge: true);
@@ -655,6 +658,8 @@ GtkColorButton.button {
// we should remove the bottom edge hilight here, but seems
// like buttons are on top of it so it doesn't show up
border-radius: 0;
+ padding-left: 3px;
+ padding-right: 3px;
}
%top_button {
border-radius: 3px 3px 0 0;
@@ -682,7 +687,7 @@ GtkColorButton.button {
* ComboBoxes *
**************/
GtkComboBox {
- > .button { padding-top: 2px; padding-bottom: 2px; } // Otherwise combos
+ > .button { padding-top: 3px; padding-bottom: 4px; } // Otherwise combos
// are bigger then
// buttons
-GtkComboBox-arrow-scaling: 0.5;
@@ -1456,7 +1461,8 @@ GtkTreeView.view.progressbar { //Progressbar in treeview cells
GtkSwitch {
// FIXME: backdrop insensinsitive slider on the dark variant
- -GtkSwitch-slider-width: 47px;
+ -GtkSwitch-slider-width: 47px; // 57px is the right value to make it as tall
+ // as buttons, not doing that for now
font: bold condensed 9;
outline-offset: -4px;
box-shadow: inset 0 1px transparentize(black, 0.9), // needs to be set here
@@ -1562,7 +1568,7 @@ $asset_suffix: if($variant=='dark', '-dark', '');
background-image: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"),
url("assets/#{$a}#{$as}#{$asset_suffix} 2 png"));
background-repeat: no-repeat;
- background-position: center;
+ background-position: center center;
}
}
@@ -1644,7 +1650,7 @@ $asset_suffix: if($variant=='dark', '-dark', '');
GtkCheckButton.text-button, GtkRadioButton.text-button {
// this is for a nice focus on check and radios text
- padding: 1px;
+ padding: 1px 2px 4px;
outline-offset: 0;
}
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index 9943920..f105980 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -142,7 +142,7 @@
* Text Entries *
****************/
.entry {
- padding: 4px;
+ padding: 5px 8px 6px;
border-radius: 3px;
transition: all 200ms ease-out;
background-color: transparent;
@@ -265,7 +265,7 @@
.button {
border-radius: 3px;
transition: all 200ms ease-out;
- padding: 4px 6px;
+ padding: 5px 8px 6px;
border-style: solid;
border-width: 1px;
color: #eeeeec;
@@ -480,15 +480,18 @@
text-shadow: none;
icon-shadow: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
- .header-bar .button.button, .action-bar .button.button, .header-bar .button.text-button, .action-bar
.button.text-button {
- padding: 6px 16px 5px; }
- .header-bar .button.image-button, .action-bar .button.image-button {
+ .button.image-button, .button.image-button {
padding: 8px; }
+ .button.text-button {
+ padding-left: 16px;
+ padding-right: 16px; }
.action-bar .stack-switcher .button.image-button, .header-bar .stack-switcher .button.image-button {
padding: 5px 2px; }
.action-bar .stack-switcher .button.text-button, .header-bar .stack-switcher .button.text-button {
padding-left: 10px;
- padding-right: 10px; }
+ padding-right: 10px;
+ padding-top: 5px;
+ padding-bottom: 6px; }
.stack-switcher > .button {
padding-left: 0;
padding-right: 0; }
@@ -702,96 +705,101 @@ GtkColorButton.button {
border-width: 0 0 0 1px; }
.spinbutton .button:backdrop:insensitive:dir(rtl) {
border-width: 0 1px 0 0; }
- .spinbutton.vertical .button:first-child {
- border-style: solid;
- border-width: 1px;
- 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-style: solid;
- color: #eeeeec;
- border-color: #1c1f1f;
- background-image: linear-gradient(to bottom, #232727, #2d3232);
- 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 1px -2px rgba(0, 0, 0, 0.6); }
- .spinbutton.vertical .button:first-child:hover {
+ .spinbutton.vertical .button {
+ padding-top: 8px;
+ padding-bottom: 8px; }
+ .spinbutton.vertical .button:first-child {
border-style: solid;
+ border-width: 1px;
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-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-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-style: solid;
- border-width: 1px;
- 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-style: solid;
- color: #eeeeec;
- border-color: #1c1f1f;
- background-image: linear-gradient(to bottom, #232727, #2d3232);
- 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 1px -2px rgba(0, 0, 0, 0.6), 0 1px rgba(238, 238, 236, 0.1); }
- .spinbutton.vertical .button:last-child:hover {
+ .spinbutton.vertical .button:first-child:active {
+ border-style: solid;
+ color: #eeeeec;
+ border-color: #1c1f1f;
+ background-image: linear-gradient(to bottom, #232727, #2d3232);
+ 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 1px -2px rgba(0, 0, 0, 0.6); }
+ .spinbutton.vertical .button:first-child:hover {
+ 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-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-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-style: solid;
+ border-width: 1px;
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-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-style: solid;
+ color: #eeeeec;
+ border-color: #1c1f1f;
+ background-image: linear-gradient(to bottom, #232727, #2d3232);
+ 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 1px -2px rgba(0, 0, 0, 0.6), 0 1px rgba(238, 238, 236, 0.1); }
+ .spinbutton.vertical .button:last-child:hover {
+ 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-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-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-style: solid;
- color: #c9cbc9;
+ color: #454c4c;
border-color: #1e2222;
- background-image: linear-gradient(to bottom, #393f3f);
- text-shadow: none;
- icon-shadow: none;
+ background-image: linear-gradient(to bottom, #323636);
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
- .spinbutton.vertical .button:backdrop:insensitive {
- border-style: solid;
- color: #454c4c;
- border-color: #1e2222;
- background-image: linear-gradient(to bottom, #323636);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
.spinbutton.vertical.entry {
- border-radius: 0; }
+ border-radius: 0;
+ padding-left: 3px;
+ padding-right: 3px; }
.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; }
@@ -809,8 +817,8 @@ GtkComboBox {
text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176); }
GtkComboBox > .button {
- padding-top: 2px;
- padding-bottom: 2px; }
+ padding-top: 3px;
+ padding-bottom: 4px; }
GtkComboBox:insensitive {
color: #939695;
text-shadow: none;
@@ -1644,92 +1652,92 @@ GtkSwitch {
.check {
background-image: -gtk-scaled(url("assets/checkbox-unchecked-dark.png"),
url("assets/checkbox-unchecked-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:hover {
background-image: -gtk-scaled(url("assets/checkbox-unchecked-hover-dark.png"),
url("assets/checkbox-unchecked-hover-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:selected {
background-image: -gtk-scaled(url("assets/checkbox-unchecked-active-dark.png"),
url("assets/checkbox-unchecked-active-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:insensitive {
background-image: -gtk-scaled(url("assets/checkbox-unchecked-insensitive-dark.png"),
url("assets/checkbox-unchecked-insensitive-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:backdrop {
background-image: -gtk-scaled(url("assets/checkbox-unchecked-backdrop-dark.png"),
url("assets/checkbox-unchecked-backdrop-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:backdrop:insensitive {
background-image: -gtk-scaled(url("assets/checkbox-unchecked-backdrop-insensitive-dark.png"),
url("assets/checkbox-unchecked-backdrop-insensitive-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:inconsistent {
background-image: -gtk-scaled(url("assets/checkbox-mixed-dark.png"), url("assets/checkbox-mixed-dark 2
png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:inconsistent:hover {
background-image: -gtk-scaled(url("assets/checkbox-mixed-hover-dark.png"),
url("assets/checkbox-mixed-hover-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:inconsistent:selected {
background-image: -gtk-scaled(url("assets/checkbox-mixed-active-dark.png"),
url("assets/checkbox-mixed-active-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:inconsistent:backdrop {
background-image: -gtk-scaled(url("assets/checkbox-mixed-backdrop-dark.png"),
url("assets/checkbox-mixed-backdrop-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:inconsistent:insensitive {
background-image: -gtk-scaled(url("assets/checkbox-mixed-insensitive-dark.png"),
url("assets/checkbox-mixed-insensitive-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:inconsistent:insensitive:backdrop {
background-image: -gtk-scaled(url("assets/checkbox-mixed-backdrop-insensitive-dark.png"),
url("assets/checkbox-mixed-backdrop-insensitive-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:active {
background-image: -gtk-scaled(url("assets/checkbox-checked-dark.png"), url("assets/checkbox-checked-dark 2
png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:active:insensitive {
background-image: -gtk-scaled(url("assets/checkbox-checked-insensitive-dark.png"),
url("assets/checkbox-checked-insensitive-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:hover:active {
background-image: -gtk-scaled(url("assets/checkbox-checked-hover-dark.png"),
url("assets/checkbox-checked-hover-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:active:selected {
background-image: -gtk-scaled(url("assets/checkbox-checked-active-dark.png"),
url("assets/checkbox-checked-active-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:backdrop:active {
background-image: -gtk-scaled(url("assets/checkbox-checked-backdrop-dark.png"),
url("assets/checkbox-checked-backdrop-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:backdrop:active:insensitive {
background-image: -gtk-scaled(url("assets/checkbox-checked-backdrop-insensitive-dark.png"),
url("assets/checkbox-checked-backdrop-insensitive-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.menuitem.check {
color: rgba(238, 238, 236, 0.1);
@@ -1798,92 +1806,92 @@ GtkSwitch {
.radio {
background-image: -gtk-scaled(url("assets/radio-unchecked-dark.png"), url("assets/radio-unchecked-dark 2
png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:hover {
background-image: -gtk-scaled(url("assets/radio-unchecked-hover-dark.png"),
url("assets/radio-unchecked-hover-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:selected {
background-image: -gtk-scaled(url("assets/radio-unchecked-active-dark.png"),
url("assets/radio-unchecked-active-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:insensitive {
background-image: -gtk-scaled(url("assets/radio-unchecked-insensitive-dark.png"),
url("assets/radio-unchecked-insensitive-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:backdrop {
background-image: -gtk-scaled(url("assets/radio-unchecked-backdrop-dark.png"),
url("assets/radio-unchecked-backdrop-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:backdrop:insensitive {
background-image: -gtk-scaled(url("assets/radio-unchecked-backdrop-insensitive-dark.png"),
url("assets/radio-unchecked-backdrop-insensitive-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:inconsistent {
background-image: -gtk-scaled(url("assets/radio-mixed-dark.png"), url("assets/radio-mixed-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:inconsistent:hover {
background-image: -gtk-scaled(url("assets/radio-mixed-hover-dark.png"), url("assets/radio-mixed-hover-dark
2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:inconsistent:selected {
background-image: -gtk-scaled(url("assets/radio-mixed-active-dark.png"),
url("assets/radio-mixed-active-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:inconsistent:backdrop {
background-image: -gtk-scaled(url("assets/radio-mixed-backdrop-dark.png"),
url("assets/radio-mixed-backdrop-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:inconsistent:insensitive {
background-image: -gtk-scaled(url("assets/radio-mixed-insensitive-dark.png"),
url("assets/radio-mixed-insensitive-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:inconsistent:insensitive:backdrop {
background-image: -gtk-scaled(url("assets/radio-mixed-backdrop-insensitive-dark.png"),
url("assets/radio-mixed-backdrop-insensitive-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:active {
background-image: -gtk-scaled(url("assets/radio-checked-dark.png"), url("assets/radio-checked-dark 2
png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:active:insensitive {
background-image: -gtk-scaled(url("assets/radio-checked-insensitive-dark.png"),
url("assets/radio-checked-insensitive-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:hover:active {
background-image: -gtk-scaled(url("assets/radio-checked-hover-dark.png"),
url("assets/radio-checked-hover-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:active:selected {
background-image: -gtk-scaled(url("assets/radio-checked-active-dark.png"),
url("assets/radio-checked-active-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:backdrop:active {
background-image: -gtk-scaled(url("assets/radio-checked-backdrop-dark.png"),
url("assets/radio-checked-backdrop-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:backdrop:active:insensitive {
background-image: -gtk-scaled(url("assets/radio-checked-backdrop-insensitive-dark.png"),
url("assets/radio-checked-backdrop-insensitive-dark 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.menuitem.radio {
color: rgba(238, 238, 236, 0.1);
@@ -1950,7 +1958,7 @@ GtkSwitch {
color: #c9cbc9; }
GtkCheckButton.text-button, GtkRadioButton.text-button {
- padding: 1px;
+ padding: 1px 2px 4px;
outline-offset: 0; }
/************
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index a40547d..63f87d4 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -142,7 +142,7 @@
* Text Entries *
****************/
.entry {
- padding: 4px;
+ padding: 5px 8px 6px;
border-radius: 3px;
transition: all 200ms ease-out;
background-color: transparent;
@@ -257,7 +257,7 @@
.button {
border-radius: 3px;
transition: all 200ms ease-out;
- padding: 4px 6px;
+ padding: 5px 8px 6px;
border-style: solid;
border-width: 1px;
color: #2e3436;
@@ -472,15 +472,18 @@
text-shadow: none;
icon-shadow: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
- .header-bar .button.button, .action-bar .button.button, .header-bar .button.text-button, .action-bar
.button.text-button {
- padding: 6px 16px 5px; }
- .header-bar .button.image-button, .action-bar .button.image-button {
+ .button.image-button, .button.image-button {
padding: 8px; }
+ .button.text-button {
+ padding-left: 16px;
+ padding-right: 16px; }
.action-bar .stack-switcher .button.image-button, .header-bar .stack-switcher .button.image-button {
padding: 5px 2px; }
.action-bar .stack-switcher .button.text-button, .header-bar .stack-switcher .button.text-button {
padding-left: 10px;
- padding-right: 10px; }
+ padding-right: 10px;
+ padding-top: 5px;
+ padding-bottom: 6px; }
.stack-switcher > .button {
padding-left: 0;
padding-right: 0; }
@@ -694,96 +697,101 @@ GtkColorButton.button {
border-width: 0 0 0 1px; }
.spinbutton .button:backdrop:insensitive:dir(rtl) {
border-width: 0 1px 0 0; }
- .spinbutton.vertical .button:first-child {
- border-style: solid;
- border-width: 1px;
- 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-style: solid;
- color: #2e3436;
- border-color: #a1a1a1;
- background-image: linear-gradient(to bottom, #d6d6d6, #e0e0e0);
- 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 1px -2px rgba(0, 0, 0, 0.6); }
- .spinbutton.vertical .button:first-child:hover {
+ .spinbutton.vertical .button {
+ padding-top: 8px;
+ padding-bottom: 8px; }
+ .spinbutton.vertical .button:first-child {
border-style: solid;
+ border-width: 1px;
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-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-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-style: solid;
- border-width: 1px;
- 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-style: solid;
- color: #2e3436;
- border-color: #a1a1a1;
- background-image: linear-gradient(to bottom, #d6d6d6, #e0e0e0);
- 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 1px -2px rgba(0, 0, 0, 0.6), 0 1px white; }
- .spinbutton.vertical .button:last-child:hover {
+ .spinbutton.vertical .button:first-child:active {
+ border-style: solid;
+ color: #2e3436;
+ border-color: #a1a1a1;
+ background-image: linear-gradient(to bottom, #d6d6d6, #e0e0e0);
+ 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 1px -2px rgba(0, 0, 0, 0.6); }
+ .spinbutton.vertical .button:first-child:hover {
+ 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-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-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-style: solid;
+ border-width: 1px;
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-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-style: solid;
+ color: #2e3436;
+ border-color: #a1a1a1;
+ background-image: linear-gradient(to bottom, #d6d6d6, #e0e0e0);
+ 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 1px -2px rgba(0, 0, 0, 0.6), 0 1px white; }
+ .spinbutton.vertical .button:last-child:hover {
+ 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-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-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-style: solid;
- color: #54595a;
+ color: #c7c7c7;
border-color: #a8a8a8;
- background-image: linear-gradient(to bottom, #ededed);
- text-shadow: none;
- icon-shadow: none;
+ background-image: linear-gradient(to bottom, #f4f4f4);
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
- .spinbutton.vertical .button:backdrop:insensitive {
- border-style: solid;
- color: #c7c7c7;
- border-color: #a8a8a8;
- background-image: linear-gradient(to bottom, #f4f4f4);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
.spinbutton.vertical.entry {
- border-radius: 0; }
+ border-radius: 0;
+ padding-left: 3px;
+ padding-right: 3px; }
.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; }
@@ -801,8 +809,8 @@ GtkComboBox {
text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); }
GtkComboBox > .button {
- padding-top: 2px;
- padding-bottom: 2px; }
+ padding-top: 3px;
+ padding-bottom: 4px; }
GtkComboBox:insensitive {
color: #8d9091;
text-shadow: none;
@@ -1638,92 +1646,92 @@ GtkSwitch {
.check {
background-image: -gtk-scaled(url("assets/checkbox-unchecked.png"), url("assets/checkbox-unchecked 2
png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:hover {
background-image: -gtk-scaled(url("assets/checkbox-unchecked-hover.png"),
url("assets/checkbox-unchecked-hover 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:selected {
background-image: -gtk-scaled(url("assets/checkbox-unchecked-active.png"),
url("assets/checkbox-unchecked-active 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:insensitive {
background-image: -gtk-scaled(url("assets/checkbox-unchecked-insensitive.png"),
url("assets/checkbox-unchecked-insensitive 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:backdrop {
background-image: -gtk-scaled(url("assets/checkbox-unchecked-backdrop.png"),
url("assets/checkbox-unchecked-backdrop 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:backdrop:insensitive {
background-image: -gtk-scaled(url("assets/checkbox-unchecked-backdrop-insensitive.png"),
url("assets/checkbox-unchecked-backdrop-insensitive 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:inconsistent {
background-image: -gtk-scaled(url("assets/checkbox-mixed.png"), url("assets/checkbox-mixed 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:inconsistent:hover {
background-image: -gtk-scaled(url("assets/checkbox-mixed-hover.png"), url("assets/checkbox-mixed-hover 2
png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:inconsistent:selected {
background-image: -gtk-scaled(url("assets/checkbox-mixed-active.png"), url("assets/checkbox-mixed-active 2
png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:inconsistent:backdrop {
background-image: -gtk-scaled(url("assets/checkbox-mixed-backdrop.png"),
url("assets/checkbox-mixed-backdrop 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:inconsistent:insensitive {
background-image: -gtk-scaled(url("assets/checkbox-mixed-insensitive.png"),
url("assets/checkbox-mixed-insensitive 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:inconsistent:insensitive:backdrop {
background-image: -gtk-scaled(url("assets/checkbox-mixed-backdrop-insensitive.png"),
url("assets/checkbox-mixed-backdrop-insensitive 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:active {
background-image: -gtk-scaled(url("assets/checkbox-checked.png"), url("assets/checkbox-checked 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:active:insensitive {
background-image: -gtk-scaled(url("assets/checkbox-checked-insensitive.png"),
url("assets/checkbox-checked-insensitive 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:hover:active {
background-image: -gtk-scaled(url("assets/checkbox-checked-hover.png"), url("assets/checkbox-checked-hover
2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:active:selected {
background-image: -gtk-scaled(url("assets/checkbox-checked-active.png"),
url("assets/checkbox-checked-active 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:backdrop:active {
background-image: -gtk-scaled(url("assets/checkbox-checked-backdrop.png"),
url("assets/checkbox-checked-backdrop 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.check:backdrop:active:insensitive {
background-image: -gtk-scaled(url("assets/checkbox-checked-backdrop-insensitive.png"),
url("assets/checkbox-checked-backdrop-insensitive 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.menuitem.check {
color: rgba(46, 52, 54, 0.1);
@@ -1792,92 +1800,92 @@ GtkSwitch {
.radio {
background-image: -gtk-scaled(url("assets/radio-unchecked.png"), url("assets/radio-unchecked 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:hover {
background-image: -gtk-scaled(url("assets/radio-unchecked-hover.png"), url("assets/radio-unchecked-hover 2
png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:selected {
background-image: -gtk-scaled(url("assets/radio-unchecked-active.png"), url("assets/radio-unchecked-active
2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:insensitive {
background-image: -gtk-scaled(url("assets/radio-unchecked-insensitive.png"),
url("assets/radio-unchecked-insensitive 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:backdrop {
background-image: -gtk-scaled(url("assets/radio-unchecked-backdrop.png"),
url("assets/radio-unchecked-backdrop 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:backdrop:insensitive {
background-image: -gtk-scaled(url("assets/radio-unchecked-backdrop-insensitive.png"),
url("assets/radio-unchecked-backdrop-insensitive 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:inconsistent {
background-image: -gtk-scaled(url("assets/radio-mixed.png"), url("assets/radio-mixed 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:inconsistent:hover {
background-image: -gtk-scaled(url("assets/radio-mixed-hover.png"), url("assets/radio-mixed-hover 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:inconsistent:selected {
background-image: -gtk-scaled(url("assets/radio-mixed-active.png"), url("assets/radio-mixed-active 2
png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:inconsistent:backdrop {
background-image: -gtk-scaled(url("assets/radio-mixed-backdrop.png"), url("assets/radio-mixed-backdrop 2
png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:inconsistent:insensitive {
background-image: -gtk-scaled(url("assets/radio-mixed-insensitive.png"),
url("assets/radio-mixed-insensitive 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:inconsistent:insensitive:backdrop {
background-image: -gtk-scaled(url("assets/radio-mixed-backdrop-insensitive.png"),
url("assets/radio-mixed-backdrop-insensitive 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:active {
background-image: -gtk-scaled(url("assets/radio-checked.png"), url("assets/radio-checked 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:active:insensitive {
background-image: -gtk-scaled(url("assets/radio-checked-insensitive.png"),
url("assets/radio-checked-insensitive 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:hover:active {
background-image: -gtk-scaled(url("assets/radio-checked-hover.png"), url("assets/radio-checked-hover 2
png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:active:selected {
background-image: -gtk-scaled(url("assets/radio-checked-active.png"), url("assets/radio-checked-active 2
png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:backdrop:active {
background-image: -gtk-scaled(url("assets/radio-checked-backdrop.png"), url("assets/radio-checked-backdrop
2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.radio:backdrop:active:insensitive {
background-image: -gtk-scaled(url("assets/radio-checked-backdrop-insensitive.png"),
url("assets/radio-checked-backdrop-insensitive 2 png"));
background-repeat: no-repeat;
- background-position: center; }
+ background-position: center center; }
.menuitem.radio {
color: rgba(46, 52, 54, 0.1);
@@ -1944,7 +1952,7 @@ GtkSwitch {
color: #54595a; }
GtkCheckButton.text-button, GtkRadioButton.text-button {
- padding: 1px;
+ padding: 1px 2px 4px;
outline-offset: 0; }
/************
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]