[gnome-themes-standard/wip/sass] notebook work - redid the tab logic to use borders istead of box-shadow as tab active indicato
- From: Lapo Calamandrei <lapo src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-themes-standard/wip/sass] notebook work - redid the tab logic to use borders istead of box-shadow as tab active indicato
- Date: Thu, 29 May 2014 17:15:10 +0000 (UTC)
commit 79b6be03e1d8e773c1b4ce3b8c76e1eeabd78565
Author: Lapo Calamandrei <calamandrei gmail com>
Date: Thu May 29 19:11:28 2014 +0200
notebook work
- redid the tab logic to use borders istead of box-shadow as
tab active indicator
- based insensitive and backdrop colors on mix in the process
- properly(?) square tab close button
- unrelated, tried to make window close button transition less glitchy
themes/Adwaita/gtk-3.0/_colors.scss | 4 +-
themes/Adwaita/gtk-3.0/_common.scss | 112 +++++++++++++++------
themes/Adwaita/gtk-3.0/gtk-contained-dark.css | 130 ++++++++++++++-----------
themes/Adwaita/gtk-3.0/gtk-contained.css | 110 ++++++++++++---------
4 files changed, 220 insertions(+), 136 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_colors.scss b/themes/Adwaita/gtk-3.0/_colors.scss
index a12e4f7..a84935b 100644
--- a/themes/Adwaita/gtk-3.0/_colors.scss
+++ b/themes/Adwaita/gtk-3.0/_colors.scss
@@ -18,13 +18,13 @@ $success_color: $selected_bg_color;
$destructive_color: if($variant =='light', #ef2929, darken(#ef2929,10%));
//insensitive state derived colors
-$insensitive_fg_color: if($variant =='light', lighten($fg_color, 30%), lighten($fg_color, 10%));
+$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
$insensitive_bg_color: $bg_color;
$insensitive_borders_color: $borders_color;
//colors for the backdrop state, derived from the main colors.
$backdrop_base_color: if($variant =='light', darken($base_color,1%), darken($base_color,5%));
$backdrop_bg_color: $bg_color;
-$backdrop_fg_color: if($variant =='light', lighten($fg_color,10%), $fg_color);
+$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 80%);
$backdrop_insensitive_color: if($variant =='light', darken($backdrop_bg_color,15%),
lighten($insensitive_fg_color,5%));
$backdrop_borders_color: $borders_color;
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index b99ff7c..b5ac79c 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -623,7 +623,6 @@ GtkPopover {
.notebook {
padding: 0;
border-style: solid;
- border-color: $borders_color;
background-color: $base_color;
-GtkNotebook-initial-gap: 10;
-GtkNotebook-arrow-spacing: 5;
@@ -633,58 +632,105 @@ GtkPopover {
-GtkWidget-focus-padding: 0;
-GtkWidget-focus-line-width: 0;
transition: all 200ms ease-out;
- &.frame { border-width: 1px; }
+ &:backdrop {
+ background-color: $backdrop_base_color;
+ }
+ &.frame {
+ border-width: 1px;
+ border-color: $borders_color;
+ &:backdrop { border-color: $backdrop_borders_color; }
+ }
&.header {
- background-color: darken($bg_color,5%);
- box-shadow: inset 0 6px 4px -5px mix($borders_color, $bg_color, 50%);
-// I want just a top shadow
-// so negative spread
- border-width: 0px;
+ background-color: mix($bg_color, $borders_color, 60%);
+ box-shadow: inset 0 2px 3px -1px transparentize(black, 0.85);
&.frame {
border: 1px solid $borders_color;
&.top { border-bottom: none; };
&.bottom { border-top: none; };
&.right { border-left: none; };
&.left { border-right: none; };
+ &:backdrop {
+ border-color: $backdrop_borders_color;
+ // same color as backdrop pushed button, we use mix in both cases
+ // hence, FIXME
+ background-color: transparentize($backdrop_borders_color,.7);
+ box-shadow: none;
+ }
}
}
tab {
border-width: 0;
+ border-color: transparent;
background-color: transparent;
+
$tab_indicator_size: 2px;
- $active_tab_indicator: $selected_bg_color;
- $prelight_tab_indicator: $borders_color;
- &.top, &.bottom { padding: 8px 20px; }; //horizontal tab sizing
- &.left, &.right { padding: 5px 20px; }; //vertical tab sizing
- &.top:hover { box-shadow: inset 0 (-$tab_indicator_size) $prelight_tab_indicator; };
- &.top:active { box-shadow: inset 0 (-$tab_indicator_size) $active_tab_indicator; };
- &.bottom:hover { box-shadow: inset 0 $tab_indicator_size $prelight_tab_indicator; };
- &.bottom:active { box-shadow: inset 0 $tab_indicator_size $active_tab_indicator; };
- &.right:hover { box-shadow: inset $tab_indicator_size 0 $prelight_tab_indicator; };
- &.right:active { box-shadow: inset $tab_indicator_size 0 $active_tab_indicator; };
- &.left:hover { box-shadow: inset (-$tab_indicator_size) 0 $prelight_tab_indicator; };
- &.left:active { box-shadow: inset (-$tab_indicator_size) 0 $active_tab_indicator; };
- //FIXME: with backdrop in the mix this will explode we need smarter code
+ //vertical tab sizing
+ $vt_vpadding: 8px;
+ $vt_hpadding: 20px;
+ // horizontal tab sizing
+ $ht_vpadding: 5px;
+ $ht_hpadding: 20px;
+
+ &.top, &.bottom { padding: $vt_vpadding $vt_hpadding; }
+ &.left, &.right { padding: $ht_vpadding $ht_hpadding; }
+ &.top {
+ padding-bottom: ($vt_vpadding -$tab_indicator_size);
+ border-bottom-width: $tab_indicator_size;
+ }
+ &.bottom {
+ padding-top: ($vt_vpadding -$tab_indicator_size);
+ border-top-width: $tab_indicator_size;
+ }
+ &.left {
+ padding-right: ($ht_hpadding -$tab_indicator_size);
+ border-right-width: $tab_indicator_size;
+ }
+ &.right {
+ padding-left: ($ht_hpadding -$tab_indicator_size);
+ border-left-width: $tab_indicator_size;
+ }
+
+ //here's the interesting stuff
+ &:hover {
+ border-color: $borders_color;
+ }
+ &:active, &:backdrop:active {
+ border-color: $selected_bg_color;
+ }
+ &:backdrop {
+ background-color: transparent;
+ border-color: transparent;
+ }
&.reorderable-page:active {
border-width: 0 1px 0 1px;
background-color: transparentize($bg_color, .5); ;// darken($bg_color,3%);
- border-color: mix($borders_color,$bg_color, 50%);
+ border-color: transparentize($borders_color,0.5);
}
GtkLabel { //tab text
font-weight: bold;
- color: lighten($fg_color,30%); //FIXME
- &.active-page { color: $fg_color; } //active tab text
- &.prelight-page { color: lighten($fg_color,15%); } //prelight tab text
+ color: $insensitive_fg_color;
+ // prelight tab text
+ &.prelight-page { color: mix($fg_color, $insensitive_fg_color, 50%); }
+ //active tab text
+ &.active-page {
+ color: $fg_color;
+ &:backdrop { color: $backdrop_fg_color; }
+ }
+ &:backdrop {
+ color: mix($backdrop_fg_color, $backdrop_insensitive_color, 50%);
+ }
}
-
+
.button { //tab close button
- padding: 0 6px; //FIXME not really doing anything
border: 1px solid transparent; //avoid jumping around
box-shadow: none; //FIXME glitch in the transition
background-image: linear-gradient(to bottom, transparent);
color: transparentize($fg_color, .5);
&:hover { @include button(normal); }
&:active { @include button(active); }
+ & > GtkImage { // this is a hack
+ padding: 4px;
+ }
}
}
}
@@ -808,7 +854,7 @@ $asset_suffix: if($variant=='dark', '-dark', '');
/************
* GtkScale *
************/
-.scale { // FIXME: vertical
+.scale {
-GtkScale-slider-length: 20;
-GtkRange-slider-width: 20;
-GtkRange-trough-border: 2;
@@ -823,7 +869,7 @@ $asset_suffix: if($variant=='dark', '-dark', '');
transparentize(white,0.85)),
inset 0 #{-2px} $bg_color,
inset 0 #{-1px} mix($bg_color,$borders_color,50%);
- &:insensitive {
+ &:insensitive {
background-image: linear-gradient(to bottom, $insensitive_bg_color);
box-shadow: none;
}
@@ -850,7 +896,7 @@ $asset_suffix: if($variant=='dark', '-dark', '');
$widget_edge;
&.highlight {
border-color: darken($selected_bg_color,30%);
- background-color: $selected_bg_color;
+ background-color: $selected_bg_color;
box-shadow: $widget_edge;
&:backdrop {
border-color: $selected_bg_color;
@@ -858,14 +904,14 @@ $asset_suffix: if($variant=='dark', '-dark', '');
box-shadow: none;
}
}
- &:insensitive, &.hilight:insensitive {
+ &:insensitive, &.hilight:insensitive {
border-color: $insensitive_borders_color;
background-color: $insensitive_bg_color;
box-shadow: $widget_edge;
}
&:backdrop {
border-color: $backdrop_borders_color;
- background-color: mix($backdrop_bg_color,$borders_color);
+ background-color: mix($backdrop_bg_color,$borders_color);
box-shadow: none;
}
&:backdrop:insensitive, .hilight:backdrop:insensitive {
@@ -914,7 +960,7 @@ GtkScrolledWindow {
.button { padding: 6px; }
}
-
+
/**********************
* Window Decorations *
*********************/
@@ -947,6 +993,7 @@ GtkScrolledWindow {
padding: 8px;
border-color: transparent;
background-image: none;
+ transition-property: border, box-shadow, color;
box-shadow: inset 0 1px transparentize(white,1),
0 1px transparentize($borders_edge,1);
&:hover { @include button(normal); }
@@ -954,5 +1001,6 @@ GtkScrolledWindow {
&:backdrop {
@include button(backdrop);
border-color: transparent;
+ transition-property: border, box-shadow, color;
}
}
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
index 6d67d50..9de362b 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
@@ -71,7 +71,7 @@
color: #eeeeec; }
.gtkstyle-fallback:insensitive {
background-color: #393f3f;
- color: white; }
+ color: #939695; }
.gtkstyle-fallback:selected {
background-color: #215d9c;
color: white; }
@@ -122,7 +122,7 @@
border-style: solid;
border-width: 1px;
background-image: linear-gradient(to bottom, #2b2b2b, #333333 90%);
- color: white;
+ color: #939695;
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, #393f3f);
box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
@@ -131,7 +131,7 @@
border-style: solid;
border-width: 1px;
background-image: linear-gradient(to bottom, #2b2b2b, #333333 90%);
- color: #eeeeec;
+ color: #c9cbc9;
background-image: linear-gradient(to bottom, #262626);
box-shadow: 0 1px rgba(255, 255, 255, 0); }
.entry:backdrop:insensitive {
@@ -139,7 +139,7 @@
border-style: solid;
border-width: 1px;
background-image: linear-gradient(to bottom, #2b2b2b, #333333 90%);
- color: white;
+ color: #a0a3a2;
background-image: linear-gradient(to bottom, #393f3f);
box-shadow: 0 1px rgba(255, 255, 255, 0); }
.entry:selected, .entrybackdrop:selected {
@@ -197,7 +197,7 @@
.button:backdrop {
border-width: 1px;
border-style: solid;
- color: #eeeeec;
+ color: #c9cbc9;
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, #393f3f);
text-shadow: none;
@@ -206,27 +206,27 @@
.button:backdrop:active {
border-width: 1px;
border-style: solid;
- color: #eeeeec;
+ color: #c9cbc9;
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, rgba(28, 31, 31, 0.3));
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
.button:backdrop:insensitive {
border-width: 1px;
border-style: solid;
- color: white;
+ color: #a0a3a2;
border-color: #1c1f1f;
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
.button:backdrop:insensitive:active {
border-width: 1px;
border-style: solid;
- color: white;
+ color: #a0a3a2;
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, rgba(28, 31, 31, 0.1));
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
.button:insensitive {
border-width: 1px;
border-style: solid;
- color: white;
+ color: #939695;
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, #393f3f);
text-shadow: none;
@@ -235,7 +235,7 @@
.button:insensitive:active {
border-width: 1px;
border-style: solid;
- color: white;
+ color: #939695;
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, rgba(28, 31, 31, 0.2));
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
@@ -278,13 +278,13 @@
.button.suggested-action:backdrop:insensitive {
border-width: 1px;
border-style: solid;
- color: white;
+ color: #a0a3a2;
border-color: #1c1f1f;
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
.button.suggested-action:insensitive {
border-width: 1px;
border-style: solid;
- color: white;
+ color: #939695;
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, #393f3f);
text-shadow: none;
@@ -329,13 +329,13 @@
.button.destructive-action:backdrop:insensitive {
border-width: 1px;
border-style: solid;
- color: white;
+ color: #a0a3a2;
border-color: #1c1f1f;
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
.button.destructive-action:insensitive {
border-width: 1px;
border-style: solid;
- color: white;
+ color: #939695;
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, #393f3f);
text-shadow: none;
@@ -371,7 +371,7 @@
.menuitem.button:backdrop, .menuitem.button:backdrop:active:insensitive, .menuitem.button:hover:backdrop,
.menuitem.button:insensitive:backdrop, .menuitem.button:active:insensitive:backdrop,
.menuitem.button:active:backdrop, .menuitem.button:active:hover:backdrop,
.menuitem.button:active:selected:backdrop {
text-shadow: none;
icon-shadow: none;
- color: white;
+ color: #939695;
background-color: #393f3f;
background-image: none;
border: none;
@@ -390,14 +390,14 @@ GtkColorButton.button {
border-radius: 0;
box-shadow: none; }
.spinbutton .button:insensitive {
- color: rgba(255, 255, 255, 0.3); }
+ color: rgba(147, 150, 149, 0.3); }
.spinbutton .button:active {
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); }
.spinbutton .button:backdrop {
border-color: rgba(28, 31, 31, 0.3); }
.spinbutton .button:backdrop:insensitive {
border-width: 0 0 0 1px;
- color: rgba(255, 255, 255, 0.3); }
+ color: rgba(160, 163, 162, 0.3); }
.spinbutton.vertical .button:first-child {
border-width: 1px;
border-style: solid;
@@ -428,7 +428,7 @@ GtkColorButton.button {
.spinbutton.vertical .button:first-child:insensitive {
border-width: 1px;
border-style: solid;
- color: white;
+ color: #939695;
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, #393f3f);
text-shadow: none;
@@ -464,7 +464,7 @@ GtkColorButton.button {
.spinbutton.vertical .button:last-child:insensitive {
border-width: 1px;
border-style: solid;
- color: white;
+ color: #939695;
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, #393f3f);
text-shadow: none;
@@ -473,7 +473,7 @@ GtkColorButton.button {
.spinbutton.vertical .button:backdrop {
border-width: 1px;
border-style: solid;
- color: #eeeeec;
+ color: #c9cbc9;
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, #393f3f);
text-shadow: none;
@@ -482,7 +482,7 @@ GtkColorButton.button {
.spinbutton.vertical .button:backdrop:insensitive {
border-width: 1px;
border-style: solid;
- color: white;
+ color: #a0a3a2;
border-color: #1c1f1f;
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
.spinbutton.vertical.entry {
@@ -505,15 +505,15 @@ GtkComboBox {
text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176); }
GtkComboBox:insensitive {
- color: white;
+ color: #939695;
text-shadow: none;
icon-shadow: none; }
GtkComboBox:backdrop {
- color: #eeeeec;
+ color: #c9cbc9;
text-shadow: none;
icon-shadow: none; }
GtkComboBox:backdrop:insensitive {
- color: white; }
+ color: #a0a3a2; }
GtkComboBox .separator {
-GtkWidget-wide-separators: true;
-GtkWidget-horizontal-separator: 0;
@@ -669,7 +669,6 @@ GtkPopover {
.notebook {
padding: 0;
border-style: solid;
- border-color: #1c1f1f;
background-color: #333333;
-GtkNotebook-initial-gap: 10;
-GtkNotebook-arrow-spacing: 5;
@@ -679,12 +678,16 @@ GtkPopover {
-GtkWidget-focus-padding: 0;
-GtkWidget-focus-line-width: 0;
transition: all 200ms ease-out; }
+ .notebook:backdrop {
+ background-color: #262626; }
.notebook.frame {
- border-width: 1px; }
+ border-width: 1px;
+ border-color: #1c1f1f; }
+ .notebook.frame:backdrop {
+ border-color: #1c1f1f; }
.notebook.header {
background-color: #2d3232;
- box-shadow: inset 0 6px 4px -5px #2a2f2f;
- border-width: 0px; }
+ box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15); }
.notebook.header.frame {
border: 1px solid #1c1f1f; }
.notebook.header.frame.top {
@@ -695,42 +698,53 @@ GtkPopover {
border-left: none; }
.notebook.header.frame.left {
border-right: none; }
+ .notebook.header.frame:backdrop {
+ border-color: #1c1f1f;
+ background-color: rgba(28, 31, 31, 0.3);
+ box-shadow: none; }
.notebook tab {
border-width: 0;
+ border-color: transparent;
background-color: transparent; }
.notebook tab.top, .notebook tab.bottom {
padding: 8px 20px; }
.notebook tab.left, .notebook tab.right {
padding: 5px 20px; }
- .notebook tab.top:hover {
- box-shadow: inset 0 -2px #1c1f1f; }
- .notebook tab.top:active {
- box-shadow: inset 0 -2px #215d9c; }
- .notebook tab.bottom:hover {
- box-shadow: inset 0 2px #1c1f1f; }
- .notebook tab.bottom:active {
- box-shadow: inset 0 2px #215d9c; }
- .notebook tab.right:hover {
- box-shadow: inset 2px 0 #1c1f1f; }
- .notebook tab.right:active {
- box-shadow: inset 2px 0 #215d9c; }
- .notebook tab.left:hover {
- box-shadow: inset -2px 0 #1c1f1f; }
- .notebook tab.left:active {
- box-shadow: inset -2px 0 #215d9c; }
+ .notebook tab.top {
+ padding-bottom: 6px;
+ border-bottom-width: 2px; }
+ .notebook tab.bottom {
+ padding-top: 6px;
+ border-top-width: 2px; }
+ .notebook tab.left {
+ padding-right: 18px;
+ border-right-width: 2px; }
+ .notebook tab.right {
+ padding-left: 18px;
+ border-left-width: 2px; }
+ .notebook tab:hover {
+ border-color: #1c1f1f; }
+ .notebook tab:active, .notebook tab:backdrop:active {
+ border-color: #215d9c; }
+ .notebook tab:backdrop {
+ background-color: transparent;
+ border-color: transparent; }
.notebook tab.reorderable-page:active {
border-width: 0 1px 0 1px;
background-color: rgba(57, 63, 63, 0.5);
- border-color: #2a2f2f; }
+ border-color: rgba(28, 31, 31, 0.5); }
.notebook tab GtkLabel {
font-weight: bold;
- color: white; }
+ color: #939695; }
+ .notebook tab GtkLabel.prelight-page {
+ color: #c0c2c0; }
.notebook tab GtkLabel.active-page {
color: #eeeeec; }
- .notebook tab GtkLabel.prelight-page {
- color: white; }
+ .notebook tab GtkLabel.active-page:backdrop {
+ color: #c9cbc9; }
+ .notebook tab GtkLabel:backdrop {
+ color: #b4b7b5; }
.notebook tab .button {
- padding: 0 6px;
border: 1px solid transparent;
box-shadow: none;
background-image: linear-gradient(to bottom, transparent);
@@ -753,6 +767,8 @@ GtkPopover {
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); }
+ .notebook tab .button > GtkImage {
+ padding: 4px; }
/**************
* Scrollbars *
@@ -835,7 +851,7 @@ GtkSwitch {
GtkSwitch.slider:insensitive {
border-width: 1px;
border-style: solid;
- color: white;
+ color: #939695;
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, #393f3f);
text-shadow: none;
@@ -844,7 +860,7 @@ GtkSwitch {
GtkSwitch.slider:backdrop {
border-width: 1px;
border-style: solid;
- color: #eeeeec;
+ color: #c9cbc9;
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, #393f3f);
text-shadow: none;
@@ -853,7 +869,7 @@ GtkSwitch {
GtkSwitch.slider:backdrop:insensitive {
border-width: 1px;
border-style: solid;
- color: white;
+ color: #a0a3a2;
border-color: #1c1f1f;
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
@@ -1255,7 +1271,7 @@ GtkPopover GtkModelButton.button.radio:backdrop:active:insensitive {
.scale.slider:backdrop:insensitive {
border-width: 1px;
border-style: solid;
- color: white;
+ color: #a0a3a2;
border-color: #1c1f1f;
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
.scale.slider:active {
@@ -1287,7 +1303,7 @@ GtkPopover GtkModelButton.button.radio:backdrop:active:insensitive {
background-color: #2a2f2f;
box-shadow: none; }
.scale.trough:backdrop:insensitive, .scale.trough .hilight:backdrop:insensitive {
- border-color: white;
+ border-color: #a0a3a2;
background-color: #393f3f; }
/**********
@@ -1339,6 +1355,7 @@ GtkScrolledWindow GtkViewport.frame {
padding: 8px;
border-color: transparent;
background-image: none;
+ transition-property: border, box-shadow, color;
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); }
.button.titlebutton:hover {
border-width: 1px;
@@ -1361,10 +1378,11 @@ GtkScrolledWindow GtkViewport.frame {
.button.titlebutton:backdrop {
border-width: 1px;
border-style: solid;
- color: #eeeeec;
+ color: #c9cbc9;
border-color: #1c1f1f;
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);
- border-color: transparent; }
+ border-color: transparent;
+ transition-property: border, box-shadow, color; }
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index 0d99e8f..c0eb071 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -71,7 +71,7 @@
color: #2e3436; }
.gtkstyle-fallback:insensitive {
background-color: #ededed;
- color: #748489; }
+ color: #8d9091; }
.gtkstyle-fallback:selected {
background-color: #4a90d9;
color: white; }
@@ -122,7 +122,7 @@
border-style: solid;
border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
- color: #748489;
+ color: #8d9091;
border-color: #a1a1a1;
background-image: linear-gradient(to bottom, #ededed);
box-shadow: 0 1px white; }
@@ -131,7 +131,7 @@
border-style: solid;
border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, white 90%);
- color: #454f52;
+ color: #54595a;
background-image: linear-gradient(to bottom, #fcfcfc);
box-shadow: 0 1px rgba(255, 255, 255, 0); }
.entry:backdrop:insensitive {
@@ -197,7 +197,7 @@
.button:backdrop {
border-width: 1px;
border-style: solid;
- color: #454f52;
+ color: #54595a;
border-color: #a1a1a1;
background-image: linear-gradient(to bottom, #ededed);
text-shadow: none;
@@ -206,7 +206,7 @@
.button:backdrop:active {
border-width: 1px;
border-style: solid;
- color: #454f52;
+ color: #54595a;
border-color: #a1a1a1;
background-image: linear-gradient(to bottom, rgba(161, 161, 161, 0.3));
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
@@ -226,7 +226,7 @@
.button:insensitive {
border-width: 1px;
border-style: solid;
- color: #748489;
+ color: #8d9091;
border-color: #a1a1a1;
background-image: linear-gradient(to bottom, #ededed);
text-shadow: none;
@@ -235,7 +235,7 @@
.button:insensitive:active {
border-width: 1px;
border-style: solid;
- color: #748489;
+ color: #8d9091;
border-color: #a1a1a1;
background-image: linear-gradient(to bottom, rgba(161, 161, 161, 0.2));
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
@@ -284,7 +284,7 @@
.button.suggested-action:insensitive {
border-width: 1px;
border-style: solid;
- color: #748489;
+ color: #8d9091;
border-color: #a1a1a1;
background-image: linear-gradient(to bottom, #ededed);
text-shadow: none;
@@ -335,7 +335,7 @@
.button.destructive-action:insensitive {
border-width: 1px;
border-style: solid;
- color: #748489;
+ color: #8d9091;
border-color: #a1a1a1;
background-image: linear-gradient(to bottom, #ededed);
text-shadow: none;
@@ -371,7 +371,7 @@
.menuitem.button:backdrop, .menuitem.button:backdrop:active:insensitive, .menuitem.button:hover:backdrop,
.menuitem.button:insensitive:backdrop, .menuitem.button:active:insensitive:backdrop,
.menuitem.button:active:backdrop, .menuitem.button:active:hover:backdrop,
.menuitem.button:active:selected:backdrop {
text-shadow: none;
icon-shadow: none;
- color: #748489;
+ color: #8d9091;
background-color: #ededed;
background-image: none;
border: none;
@@ -390,7 +390,7 @@ GtkColorButton.button {
border-radius: 0;
box-shadow: none; }
.spinbutton .button:insensitive {
- color: rgba(116, 132, 137, 0.3); }
+ color: rgba(141, 144, 145, 0.3); }
.spinbutton .button:active {
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); }
.spinbutton .button:backdrop {
@@ -428,7 +428,7 @@ GtkColorButton.button {
.spinbutton.vertical .button:first-child:insensitive {
border-width: 1px;
border-style: solid;
- color: #748489;
+ color: #8d9091;
border-color: #a1a1a1;
background-image: linear-gradient(to bottom, #ededed);
text-shadow: none;
@@ -464,7 +464,7 @@ GtkColorButton.button {
.spinbutton.vertical .button:last-child:insensitive {
border-width: 1px;
border-style: solid;
- color: #748489;
+ color: #8d9091;
border-color: #a1a1a1;
background-image: linear-gradient(to bottom, #ededed);
text-shadow: none;
@@ -473,7 +473,7 @@ GtkColorButton.button {
.spinbutton.vertical .button:backdrop {
border-width: 1px;
border-style: solid;
- color: #454f52;
+ color: #54595a;
border-color: #a1a1a1;
background-image: linear-gradient(to bottom, #ededed);
text-shadow: none;
@@ -505,11 +505,11 @@ GtkComboBox {
text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); }
GtkComboBox:insensitive {
- color: #748489;
+ color: #8d9091;
text-shadow: none;
icon-shadow: none; }
GtkComboBox:backdrop {
- color: #454f52;
+ color: #54595a;
text-shadow: none;
icon-shadow: none; }
GtkComboBox:backdrop:insensitive {
@@ -669,7 +669,6 @@ GtkPopover {
.notebook {
padding: 0;
border-style: solid;
- border-color: #a1a1a1;
background-color: white;
-GtkNotebook-initial-gap: 10;
-GtkNotebook-arrow-spacing: 5;
@@ -679,12 +678,16 @@ GtkPopover {
-GtkWidget-focus-padding: 0;
-GtkWidget-focus-line-width: 0;
transition: all 200ms ease-out; }
+ .notebook:backdrop {
+ background-color: #fcfcfc; }
.notebook.frame {
- border-width: 1px; }
+ border-width: 1px;
+ border-color: #a1a1a1; }
+ .notebook.frame:backdrop {
+ border-color: #a1a1a1; }
.notebook.header {
- background-color: #e0e0e0;
- box-shadow: inset 0 6px 4px -5px #c7c7c7;
- border-width: 0px; }
+ background-color: #cecece;
+ box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15); }
.notebook.header.frame {
border: 1px solid #a1a1a1; }
.notebook.header.frame.top {
@@ -695,42 +698,53 @@ GtkPopover {
border-left: none; }
.notebook.header.frame.left {
border-right: none; }
+ .notebook.header.frame:backdrop {
+ border-color: #a1a1a1;
+ background-color: rgba(161, 161, 161, 0.3);
+ box-shadow: none; }
.notebook tab {
border-width: 0;
+ border-color: transparent;
background-color: transparent; }
.notebook tab.top, .notebook tab.bottom {
padding: 8px 20px; }
.notebook tab.left, .notebook tab.right {
padding: 5px 20px; }
- .notebook tab.top:hover {
- box-shadow: inset 0 -2px #a1a1a1; }
- .notebook tab.top:active {
- box-shadow: inset 0 -2px #4a90d9; }
- .notebook tab.bottom:hover {
- box-shadow: inset 0 2px #a1a1a1; }
- .notebook tab.bottom:active {
- box-shadow: inset 0 2px #4a90d9; }
- .notebook tab.right:hover {
- box-shadow: inset 2px 0 #a1a1a1; }
- .notebook tab.right:active {
- box-shadow: inset 2px 0 #4a90d9; }
- .notebook tab.left:hover {
- box-shadow: inset -2px 0 #a1a1a1; }
- .notebook tab.left:active {
- box-shadow: inset -2px 0 #4a90d9; }
+ .notebook tab.top {
+ padding-bottom: 6px;
+ border-bottom-width: 2px; }
+ .notebook tab.bottom {
+ padding-top: 6px;
+ border-top-width: 2px; }
+ .notebook tab.left {
+ padding-right: 18px;
+ border-right-width: 2px; }
+ .notebook tab.right {
+ padding-left: 18px;
+ border-left-width: 2px; }
+ .notebook tab:hover {
+ border-color: #a1a1a1; }
+ .notebook tab:active, .notebook tab:backdrop:active {
+ border-color: #4a90d9; }
+ .notebook tab:backdrop {
+ background-color: transparent;
+ border-color: transparent; }
.notebook tab.reorderable-page:active {
border-width: 0 1px 0 1px;
background-color: rgba(237, 237, 237, 0.5);
- border-color: #c7c7c7; }
+ border-color: rgba(161, 161, 161, 0.5); }
.notebook tab GtkLabel {
font-weight: bold;
- color: #748489; }
+ color: #8d9091; }
+ .notebook tab GtkLabel.prelight-page {
+ color: #5d6263; }
.notebook tab GtkLabel.active-page {
color: #2e3436; }
- .notebook tab GtkLabel.prelight-page {
- color: #515c5f; }
+ .notebook tab GtkLabel.active-page:backdrop {
+ color: #54595a; }
+ .notebook tab GtkLabel:backdrop {
+ color: #8d9090; }
.notebook tab .button {
- padding: 0 6px;
border: 1px solid transparent;
box-shadow: none;
background-image: linear-gradient(to bottom, transparent);
@@ -753,6 +767,8 @@ GtkPopover {
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; }
+ .notebook tab .button > GtkImage {
+ padding: 4px; }
/**************
* Scrollbars *
@@ -835,7 +851,7 @@ GtkSwitch {
GtkSwitch.slider:insensitive {
border-width: 1px;
border-style: solid;
- color: #748489;
+ color: #8d9091;
border-color: #a1a1a1;
background-image: linear-gradient(to bottom, #ededed);
text-shadow: none;
@@ -844,7 +860,7 @@ GtkSwitch {
GtkSwitch.slider:backdrop {
border-width: 1px;
border-style: solid;
- color: #454f52;
+ color: #54595a;
border-color: #a1a1a1;
background-image: linear-gradient(to bottom, #ededed);
text-shadow: none;
@@ -1339,6 +1355,7 @@ GtkScrolledWindow GtkViewport.frame {
padding: 8px;
border-color: transparent;
background-image: none;
+ transition-property: border, box-shadow, color;
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
.button.titlebutton:hover {
border-width: 1px;
@@ -1361,10 +1378,11 @@ GtkScrolledWindow GtkViewport.frame {
.button.titlebutton:backdrop {
border-width: 1px;
border-style: solid;
- color: #454f52;
+ color: #54595a;
border-color: #a1a1a1;
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);
- border-color: transparent; }
+ border-color: transparent;
+ transition-property: border, box-shadow, color; }
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]