[gtk+] Adwaita: reorderable tabs correctly styled for every notebook layout
- From: Lapo Calamandrei <lapo src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk+] Adwaita: reorderable tabs correctly styled for every notebook layout
- Date: Wed, 18 Jun 2014 10:09:38 +0000 (UTC)
commit 630b5b9797e909005fd1618776f2af109209f007
Author: Lapo Calamandrei <calamandrei gmail com>
Date: Wed Jun 18 12:08:04 2014 +0200
Adwaita: reorderable tabs correctly styled for every notebook layout
gtk/resources/theme/Adwaita/_common.scss | 48 ++++++++--
gtk/resources/theme/Adwaita/gtk-contained-dark.css | 100 +++++++++++++++++---
gtk/resources/theme/Adwaita/gtk-contained.css | 100 +++++++++++++++++---
3 files changed, 208 insertions(+), 40 deletions(-)
---
diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index c7b6b2a..aac6ff5 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -899,6 +899,32 @@ GtkPopover {
//notebook content frame...
&.top, &.bottom { padding: $vt_vpadding $vt_hpadding; }
&.left, &.right { padding: $ht_vpadding $ht_hpadding; }
+ &.reorderable-page {
+ &.top {
+ padding-top: ($vt_vpadding - 1px);
+ border-top-width: 1px;
+ border-left-width: 1px;
+ border-right-width: 1px;
+ }
+ &.bottom {
+ padding-bottom: ($vt_vpadding - 1px);
+ border-bottom-width: 1px;
+ border-left-width: 1px;
+ border-right-width: 1px;
+ }
+ &.left {
+ padding-left: ($ht_hpadding - 1px);
+ border-left-width: 1px;
+ border-top-width: 1px;
+ border-bottom-width: 1px;
+ }
+ &.right {
+ padding-right: ($ht_hpadding - 1px);
+ border-right-width: 1px;
+ border-top-width: 1px;
+ border-bottom-width: 1px;
+ }
+ }
&.top {
padding-bottom: ($vt_vpadding -$tab_indicator_size);
border-bottom-width: $tab_indicator_size;
@@ -927,27 +953,28 @@ GtkPopover {
background-color: transparent;
border-color: transparent;
}
- &.reorderable-page {
+ @each $_tab, $_border in (top, bottom),
+ (bottom, top),
+ (left, right),
+ (right, left) {
+ &.reorderable-page.#{$_tab}, {
border-color: transparent;
- border-left: 1px solid transparent;
- border-right: 1px solid transparent;
&:hover, &.prelight-page {
border-color: transparentize($borders_color,0.7);
- border-bottom-color: transparentize($borders_color,0.7);
+ border-#{$_border}-color: transparentize($borders_color,0.7);
background-color: transparentize($bg_color,0.8);
}
&:active, &.active-page {
background-color: transparentize($bg_color,0.5);
border-color: transparentize($borders_color,0.5);
- border-bottom-color: $selected_bg_color;
+ border-#{$_border}-color: $selected_bg_color;
&:hover {
background-color: transparentize($bg_color,0.3);
}
&:backdrop {
- border-left-color: $backdrop_borders_color;
- border-right-color: $backdrop_borders_color;
+ border-color: $backdrop_borders_color;
background-color: $backdrop_bg_color;
- border-bottom-color: $selected_bg_color;
+ border-#{$_border}-color: $selected_bg_color;
}
}
&:backdrop {
@@ -955,6 +982,7 @@ GtkPopover {
background-color: transparent;
}
}
+ }
GtkLabel { //tab text
// this doesn't affect labels on reorderable pages, not css fault.
padding: 0 2px; // needed for a nicer focus ring
@@ -1000,8 +1028,8 @@ GtkPopover {
}
}
-.notebook > .frame,
-.notebook > .view { border: none; }
+//.notebook > .frame,
+//.notebook > .view { border: none; }
/**************
* Scrollbars *
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index df3b4cd..53ca6c4 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -1050,6 +1050,26 @@ GtkPopover {
padding: 8px 20px; }
.notebook tab.left, .notebook tab.right {
padding: 5px 20px; }
+ .notebook tab.reorderable-page.top {
+ padding-top: 7px;
+ border-top-width: 1px;
+ border-left-width: 1px;
+ border-right-width: 1px; }
+ .notebook tab.reorderable-page.bottom {
+ padding-bottom: 7px;
+ border-bottom-width: 1px;
+ border-left-width: 1px;
+ border-right-width: 1px; }
+ .notebook tab.reorderable-page.left {
+ padding-left: 19px;
+ border-left-width: 1px;
+ border-top-width: 1px;
+ border-bottom-width: 1px; }
+ .notebook tab.reorderable-page.right {
+ padding-right: 19px;
+ border-right-width: 1px;
+ border-top-width: 1px;
+ border-bottom-width: 1px; }
.notebook tab.top {
padding-bottom: 5px;
border-bottom-width: 3px; }
@@ -1069,26 +1089,80 @@ GtkPopover {
.notebook tab:backdrop {
background-color: transparent;
border-color: transparent; }
- .notebook tab.reorderable-page {
- border-color: transparent;
- border-left: 1px solid transparent;
- border-right: 1px solid transparent; }
- .notebook tab.reorderable-page:hover, .notebook tab.reorderable-page.prelight-page {
+ .notebook tab.reorderable-page.top {
+ border-color: transparent; }
+ .notebook tab.reorderable-page.top:hover, .notebook tab.reorderable-page.top.prelight-page {
border-color: rgba(28, 31, 31, 0.3);
border-bottom-color: rgba(28, 31, 31, 0.3);
background-color: rgba(57, 63, 63, 0.2); }
- .notebook tab.reorderable-page:active, .notebook tab.reorderable-page.active-page {
+ .notebook tab.reorderable-page.top:active, .notebook tab.reorderable-page.top.active-page {
background-color: rgba(57, 63, 63, 0.5);
border-color: rgba(28, 31, 31, 0.5);
border-bottom-color: #215d9c; }
- .notebook tab.reorderable-page:active:hover, .notebook tab.reorderable-page.active-page:hover {
+ .notebook tab.reorderable-page.top:active:hover, .notebook
tab.reorderable-page.top.active-page:hover {
background-color: rgba(57, 63, 63, 0.7); }
- .notebook tab.reorderable-page:active:backdrop, .notebook tab.reorderable-page.active-page:backdrop {
- border-left-color: #1e2222;
- border-right-color: #1e2222;
+ .notebook tab.reorderable-page.top:active:backdrop, .notebook
tab.reorderable-page.top.active-page:backdrop {
+ border-color: #1e2222;
background-color: #393f3f;
border-bottom-color: #215d9c; }
- .notebook tab.reorderable-page:backdrop {
+ .notebook tab.reorderable-page.top:backdrop {
+ border-color: transparent;
+ background-color: transparent; }
+ .notebook tab.reorderable-page.bottom {
+ border-color: transparent; }
+ .notebook tab.reorderable-page.bottom:hover, .notebook tab.reorderable-page.bottom.prelight-page {
+ border-color: rgba(28, 31, 31, 0.3);
+ border-top-color: rgba(28, 31, 31, 0.3);
+ background-color: rgba(57, 63, 63, 0.2); }
+ .notebook tab.reorderable-page.bottom:active, .notebook tab.reorderable-page.bottom.active-page {
+ background-color: rgba(57, 63, 63, 0.5);
+ border-color: rgba(28, 31, 31, 0.5);
+ border-top-color: #215d9c; }
+ .notebook tab.reorderable-page.bottom:active:hover, .notebook
tab.reorderable-page.bottom.active-page:hover {
+ background-color: rgba(57, 63, 63, 0.7); }
+ .notebook tab.reorderable-page.bottom:active:backdrop, .notebook
tab.reorderable-page.bottom.active-page:backdrop {
+ border-color: #1e2222;
+ background-color: #393f3f;
+ border-top-color: #215d9c; }
+ .notebook tab.reorderable-page.bottom:backdrop {
+ border-color: transparent;
+ background-color: transparent; }
+ .notebook tab.reorderable-page.left {
+ border-color: transparent; }
+ .notebook tab.reorderable-page.left:hover, .notebook tab.reorderable-page.left.prelight-page {
+ border-color: rgba(28, 31, 31, 0.3);
+ border-right-color: rgba(28, 31, 31, 0.3);
+ background-color: rgba(57, 63, 63, 0.2); }
+ .notebook tab.reorderable-page.left:active, .notebook tab.reorderable-page.left.active-page {
+ background-color: rgba(57, 63, 63, 0.5);
+ border-color: rgba(28, 31, 31, 0.5);
+ border-right-color: #215d9c; }
+ .notebook tab.reorderable-page.left:active:hover, .notebook
tab.reorderable-page.left.active-page:hover {
+ background-color: rgba(57, 63, 63, 0.7); }
+ .notebook tab.reorderable-page.left:active:backdrop, .notebook
tab.reorderable-page.left.active-page:backdrop {
+ border-color: #1e2222;
+ background-color: #393f3f;
+ border-right-color: #215d9c; }
+ .notebook tab.reorderable-page.left:backdrop {
+ border-color: transparent;
+ background-color: transparent; }
+ .notebook tab.reorderable-page.right {
+ border-color: transparent; }
+ .notebook tab.reorderable-page.right:hover, .notebook tab.reorderable-page.right.prelight-page {
+ border-color: rgba(28, 31, 31, 0.3);
+ border-left-color: rgba(28, 31, 31, 0.3);
+ background-color: rgba(57, 63, 63, 0.2); }
+ .notebook tab.reorderable-page.right:active, .notebook tab.reorderable-page.right.active-page {
+ background-color: rgba(57, 63, 63, 0.5);
+ border-color: rgba(28, 31, 31, 0.5);
+ border-left-color: #215d9c; }
+ .notebook tab.reorderable-page.right:active:hover, .notebook
tab.reorderable-page.right.active-page:hover {
+ background-color: rgba(57, 63, 63, 0.7); }
+ .notebook tab.reorderable-page.right:active:backdrop, .notebook
tab.reorderable-page.right.active-page:backdrop {
+ border-color: #1e2222;
+ background-color: #393f3f;
+ border-left-color: #215d9c; }
+ .notebook tab.reorderable-page.right:backdrop {
border-color: transparent;
background-color: transparent; }
.notebook tab GtkLabel {
@@ -1136,10 +1210,6 @@ GtkPopover {
.notebook tab .button > GtkImage {
padding: 2px; }
-.notebook > .frame,
-.notebook > .view {
- border: none; }
-
/**************
* Scrollbars *
**************/
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 45de207..19ad7ca 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -1050,6 +1050,26 @@ GtkPopover {
padding: 8px 20px; }
.notebook tab.left, .notebook tab.right {
padding: 5px 20px; }
+ .notebook tab.reorderable-page.top {
+ padding-top: 7px;
+ border-top-width: 1px;
+ border-left-width: 1px;
+ border-right-width: 1px; }
+ .notebook tab.reorderable-page.bottom {
+ padding-bottom: 7px;
+ border-bottom-width: 1px;
+ border-left-width: 1px;
+ border-right-width: 1px; }
+ .notebook tab.reorderable-page.left {
+ padding-left: 19px;
+ border-left-width: 1px;
+ border-top-width: 1px;
+ border-bottom-width: 1px; }
+ .notebook tab.reorderable-page.right {
+ padding-right: 19px;
+ border-right-width: 1px;
+ border-top-width: 1px;
+ border-bottom-width: 1px; }
.notebook tab.top {
padding-bottom: 5px;
border-bottom-width: 3px; }
@@ -1069,26 +1089,80 @@ GtkPopover {
.notebook tab:backdrop {
background-color: transparent;
border-color: transparent; }
- .notebook tab.reorderable-page {
- border-color: transparent;
- border-left: 1px solid transparent;
- border-right: 1px solid transparent; }
- .notebook tab.reorderable-page:hover, .notebook tab.reorderable-page.prelight-page {
+ .notebook tab.reorderable-page.top {
+ border-color: transparent; }
+ .notebook tab.reorderable-page.top:hover, .notebook tab.reorderable-page.top.prelight-page {
border-color: rgba(161, 161, 161, 0.3);
border-bottom-color: rgba(161, 161, 161, 0.3);
background-color: rgba(237, 237, 237, 0.2); }
- .notebook tab.reorderable-page:active, .notebook tab.reorderable-page.active-page {
+ .notebook tab.reorderable-page.top:active, .notebook tab.reorderable-page.top.active-page {
background-color: rgba(237, 237, 237, 0.5);
border-color: rgba(161, 161, 161, 0.5);
border-bottom-color: #4a90d9; }
- .notebook tab.reorderable-page:active:hover, .notebook tab.reorderable-page.active-page:hover {
+ .notebook tab.reorderable-page.top:active:hover, .notebook
tab.reorderable-page.top.active-page:hover {
background-color: rgba(237, 237, 237, 0.7); }
- .notebook tab.reorderable-page:active:backdrop, .notebook tab.reorderable-page.active-page:backdrop {
- border-left-color: #a8a8a8;
- border-right-color: #a8a8a8;
+ .notebook tab.reorderable-page.top:active:backdrop, .notebook
tab.reorderable-page.top.active-page:backdrop {
+ border-color: #a8a8a8;
background-color: #ededed;
border-bottom-color: #4a90d9; }
- .notebook tab.reorderable-page:backdrop {
+ .notebook tab.reorderable-page.top:backdrop {
+ border-color: transparent;
+ background-color: transparent; }
+ .notebook tab.reorderable-page.bottom {
+ border-color: transparent; }
+ .notebook tab.reorderable-page.bottom:hover, .notebook tab.reorderable-page.bottom.prelight-page {
+ border-color: rgba(161, 161, 161, 0.3);
+ border-top-color: rgba(161, 161, 161, 0.3);
+ background-color: rgba(237, 237, 237, 0.2); }
+ .notebook tab.reorderable-page.bottom:active, .notebook tab.reorderable-page.bottom.active-page {
+ background-color: rgba(237, 237, 237, 0.5);
+ border-color: rgba(161, 161, 161, 0.5);
+ border-top-color: #4a90d9; }
+ .notebook tab.reorderable-page.bottom:active:hover, .notebook
tab.reorderable-page.bottom.active-page:hover {
+ background-color: rgba(237, 237, 237, 0.7); }
+ .notebook tab.reorderable-page.bottom:active:backdrop, .notebook
tab.reorderable-page.bottom.active-page:backdrop {
+ border-color: #a8a8a8;
+ background-color: #ededed;
+ border-top-color: #4a90d9; }
+ .notebook tab.reorderable-page.bottom:backdrop {
+ border-color: transparent;
+ background-color: transparent; }
+ .notebook tab.reorderable-page.left {
+ border-color: transparent; }
+ .notebook tab.reorderable-page.left:hover, .notebook tab.reorderable-page.left.prelight-page {
+ border-color: rgba(161, 161, 161, 0.3);
+ border-right-color: rgba(161, 161, 161, 0.3);
+ background-color: rgba(237, 237, 237, 0.2); }
+ .notebook tab.reorderable-page.left:active, .notebook tab.reorderable-page.left.active-page {
+ background-color: rgba(237, 237, 237, 0.5);
+ border-color: rgba(161, 161, 161, 0.5);
+ border-right-color: #4a90d9; }
+ .notebook tab.reorderable-page.left:active:hover, .notebook
tab.reorderable-page.left.active-page:hover {
+ background-color: rgba(237, 237, 237, 0.7); }
+ .notebook tab.reorderable-page.left:active:backdrop, .notebook
tab.reorderable-page.left.active-page:backdrop {
+ border-color: #a8a8a8;
+ background-color: #ededed;
+ border-right-color: #4a90d9; }
+ .notebook tab.reorderable-page.left:backdrop {
+ border-color: transparent;
+ background-color: transparent; }
+ .notebook tab.reorderable-page.right {
+ border-color: transparent; }
+ .notebook tab.reorderable-page.right:hover, .notebook tab.reorderable-page.right.prelight-page {
+ border-color: rgba(161, 161, 161, 0.3);
+ border-left-color: rgba(161, 161, 161, 0.3);
+ background-color: rgba(237, 237, 237, 0.2); }
+ .notebook tab.reorderable-page.right:active, .notebook tab.reorderable-page.right.active-page {
+ background-color: rgba(237, 237, 237, 0.5);
+ border-color: rgba(161, 161, 161, 0.5);
+ border-left-color: #4a90d9; }
+ .notebook tab.reorderable-page.right:active:hover, .notebook
tab.reorderable-page.right.active-page:hover {
+ background-color: rgba(237, 237, 237, 0.7); }
+ .notebook tab.reorderable-page.right:active:backdrop, .notebook
tab.reorderable-page.right.active-page:backdrop {
+ border-color: #a8a8a8;
+ background-color: #ededed;
+ border-left-color: #4a90d9; }
+ .notebook tab.reorderable-page.right:backdrop {
border-color: transparent;
background-color: transparent; }
.notebook tab GtkLabel {
@@ -1136,10 +1210,6 @@ GtkPopover {
.notebook tab .button > GtkImage {
padding: 2px; }
-.notebook > .frame,
-.notebook > .view {
- border: none; }
-
/**************
* Scrollbars *
**************/
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
