AuroraMiddleware/gtk2
1
0
Fork 0
forked from AuroraMiddleware/gtk
Code Issues Pull Requests Projects Releases Wiki Activity

Adwaita: reorderable tabs correctly styled for every notebook layout

Browse Source
This commit is contained in:
Lapo Calamandrei 2014-06-18 12:08:04 +02:00
parent e1ae22465b
commit 630b5b9797
3 changed files with 208 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
gtk/resources/theme/Adwaita/_common.scss
View File

@ -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 *

100
gtk/resources/theme/Adwaita/gtk-contained-dark.css
View File

@ -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 *
**************/

100
gtk/resources/theme/Adwaita/gtk-contained.css
View File

@ -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 *
**************/