AuroraMiddleware/gtk
1
0
Fork 1
mirror of https://gitlab.gnome.org/GNOME/gtk.git synced 2024-11-17 14:30:15 +00:00
Code Issues Projects Releases Wiki Activity

Adwaita: Update notebook styling

Browse Source 
Adapt to the changes in the previous commit.
This commit is contained in:
Matthias Clasen 2015-11-08 18:11:25 -05:00
parent 4802b515e4
commit f564f16b5c
3 changed files with 162 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
gtk/theme/Adwaita/_common.scss
View File

@ -1573,7 +1573,17 @@ notebook {
border: 1px solid $borders_color; border: 1px solid $borders_color;
&:backdrop { border-color: $backdrop_borders_color; } &:backdrop { border-color: $backdrop_borders_color; }
} }
& header { & header {
//vertical tab sizing
$vt_vpadding: 8px;
$vt_hpadding: 20px;
// horizontal tab sizing
$ht_vpadding: 5px;
$ht_hpadding: 20px;
$tab_indicator_size: 3px;
$_header_shade: inset 0 2px 3px -1px transparentize(black, 0.85);
// FIXME: double borders in some case, can't fix it w/o a class tho // FIXME: double borders in some case, can't fix it w/o a class tho
// FIXME: doesn't work on dark var // FIXME: doesn't work on dark var
background-color: mix($bg_color, $borders_color, 70%); background-color: mix($bg_color, $borders_color, 70%);
@ -1588,42 +1598,11 @@ notebook {
&:backdrop { border-color: $backdrop_borders_color; } &:backdrop { border-color: $backdrop_borders_color; }
} }
$_header_shade: inset 0 2px 3px -1px transparentize(black, 0.85);
&.top { &.top {
box-shadow: $_header_shade, box-shadow: $_header_shade,
inset 0 -1px $borders_color; // border inset 0 -1px $borders_color; // border
&:backdrop { box-shadow: inset 0 -1px $backdrop_borders_color; } &:backdrop { box-shadow: inset 0 -1px $backdrop_borders_color; }
} & tab {
&.bottom {
box-shadow: $_header_shade,
inset 0 1px $borders_color;
&:backdrop { box-shadow: inset 0 1px $backdrop_borders_color; }
}
&.right {
box-shadow: $_header_shade,
inset 1px 0 $borders_color;
&:backdrop { box-shadow: inset 1px 0 $backdrop_borders_color; }
}
&.left {
box-shadow: $_header_shade,
inset -1px 0 $borders_color;
&:backdrop { box-shadow: inset -1px 0 $backdrop_borders_color; }
}
&:backdrop {
// same color as backdrop pushed button
background-color: $backdrop_dark_fill;
box-shadow: none;
}
}
//vertical tab sizing
$vt_vpadding: 8px;
$vt_hpadding: 20px;
// horizontal tab sizing
$ht_vpadding: 5px;
$ht_hpadding: 20px;
$tab_indicator_size: 3px;
& header.top tab {
padding: $vt_vpadding $vt_hpadding; padding: $vt_vpadding $vt_hpadding;
border-bottom-width: $tab_indicator_size; border-bottom-width: $tab_indicator_size;
&.reorderable-page { &.reorderable-page {
@ -1633,7 +1612,12 @@ notebook {
border-right-width: 1px; border-right-width: 1px;
} }
} }
& header.bottom tab { }
&.bottom {
box-shadow: $_header_shade,
inset 0 1px $borders_color;
&:backdrop { box-shadow: inset 0 1px $backdrop_borders_color; }
& tab {
padding: $vt_vpadding $vt_hpadding; padding: $vt_vpadding $vt_hpadding;
border-top-width: $tab_indicator_size; border-top-width: $tab_indicator_size;
&.reorderable-page { &.reorderable-page {
@ -1643,15 +1627,12 @@ notebook {
border-right-width: 1px; border-right-width: 1px;
} }
} }
& header.left tab {
padding: $ht_vpadding $ht_hpadding;
border-right-width: $tab_indicator_size;
&.reorderable-page {
border-bottom-width: 1px;
border-top-width: 1px;
} }
} &.right {
& header.right tab { box-shadow: $_header_shade,
inset 1px 0 $borders_color;
&:backdrop { box-shadow: inset 1px 0 $backdrop_borders_color; }
& tab {
padding: $ht_vpadding $ht_hpadding; padding: $ht_vpadding $ht_hpadding;
border-left-width: $tab_indicator_size; border-left-width: $tab_indicator_size;
&.reorderable-page { &.reorderable-page {
@ -1659,8 +1640,44 @@ notebook {
border-top-width: 1px; border-top-width: 1px;
} }
} }
}
&.left {
box-shadow: $_header_shade,
inset -1px 0 $borders_color;
&:backdrop { box-shadow: inset -1px 0 $backdrop_borders_color; }
& tab {
padding: $ht_vpadding $ht_hpadding;
border-right-width: $tab_indicator_size;
&.reorderable-page {
border-bottom-width: 1px;
border-top-width: 1px;
}
}
}
&:backdrop {
// same color as backdrop pushed button
background-color: $backdrop_dark_fill;
box-shadow: none;
}
&.top, &.bottom {
& tabs arrow.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
& tabs arrow.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
}
&.left, &.right {
& tabs arrow.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
& tabs arrow.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
}
& tabs arrow {
color: $insensitive_fg_color;
&:hover { color: mix($fg_color, $insensitive_fg_color, 50%); }
&:active { color: $fg_color; }
&:insensitive { color: transparentize($insensitive_fg_color,0.7); }
&:backdrop { color: transparentize($backdrop_fg_color,0.6); }
&:backdrop:insensitive { color: $backdrop_insensitive_color; }
}
}
tab { & tab {
border-width: 0; border-width: 0;
border-style: solid; border-style: solid;
border-color: transparent; border-color: transparent;
@ -1754,26 +1771,6 @@ notebook {
} }
} }
notebook header tabs arrow.arrow {
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
color: red; //$insensitive_fg_color;
&:hover {
color: mix($fg_color, $insensitive_fg_color, 50%);
}
&:active {
color: green; //$fg_color;
}
&:insensitive {
color: blue; //transparentize($insensitive_fg_color,0.7);
}
&:backdrop {
color: brown; //transparentize($backdrop_fg_color,0.6);
&:insensitive {
color: $backdrop_insensitive_color;
}
}
}
/************** /**************
* Scrollbars * * Scrollbars *
**************/ **************/

81
gtk/theme/Adwaita/gtk-contained-dark.css
View File

@ -2109,10 +2109,9 @@ popover {
text-shadow: none; text-shadow: none;
transition: none; } transition: none; }
/***************** /*************
* Notebooks and * * Notebooks *
* Tabs * *************/
*****************/
notebook { notebook {
-GtkNotebook-initial-gap: 10; -GtkNotebook-initial-gap: 10;
-GtkNotebook-arrow-spacing: 5; -GtkNotebook-arrow-spacing: 5;
@ -2148,21 +2147,6 @@ notebook {
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 -1px #1c1f1f; } box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 -1px #1c1f1f; }
notebook header.top:backdrop { notebook header.top:backdrop {
box-shadow: inset 0 -1px #1f2222; } box-shadow: inset 0 -1px #1f2222; }
notebook header.bottom {
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 1px #1c1f1f; }
notebook header.bottom:backdrop {
box-shadow: inset 0 1px #1f2222; }
notebook header.right {
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 1px 0 #1c1f1f; }
notebook header.right:backdrop {
box-shadow: inset 1px 0 #1f2222; }
notebook header.left {
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset -1px 0 #1c1f1f; }
notebook header.left:backdrop {
box-shadow: inset -1px 0 #1f2222; }
notebook header:backdrop {
background-color: #303535;
box-shadow: none; }
notebook header.top tab { notebook header.top tab {
padding: 8px 20px; padding: 8px 20px;
border-bottom-width: 3px; } border-bottom-width: 3px; }
@ -2171,6 +2155,10 @@ notebook {
padding-right: 12px; padding-right: 12px;
border-left-width: 1px; border-left-width: 1px;
border-right-width: 1px; } border-right-width: 1px; }
notebook header.bottom {
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 1px #1c1f1f; }
notebook header.bottom:backdrop {
box-shadow: inset 0 1px #1f2222; }
notebook header.bottom tab { notebook header.bottom tab {
padding: 8px 20px; padding: 8px 20px;
border-top-width: 3px; } border-top-width: 3px; }
@ -2179,18 +2167,49 @@ notebook {
padding-right: 12px; padding-right: 12px;
border-left-width: 1px; border-left-width: 1px;
border-right-width: 1px; } border-right-width: 1px; }
notebook header.left tab { notebook header.right {
padding: 5px 20px; box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 1px 0 #1c1f1f; }
border-right-width: 3px; } notebook header.right:backdrop {
notebook header.left tab.reorderable-page { box-shadow: inset 1px 0 #1f2222; }
border-bottom-width: 1px;
border-top-width: 1px; }
notebook header.right tab { notebook header.right tab {
padding: 5px 20px; padding: 5px 20px;
border-left-width: 3px; } border-left-width: 3px; }
notebook header.right tab.reorderable-page { notebook header.right tab.reorderable-page {
border-bottom-width: 1px; border-bottom-width: 1px;
border-top-width: 1px; } border-top-width: 1px; }
notebook header.left {
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset -1px 0 #1c1f1f; }
notebook header.left:backdrop {
box-shadow: inset -1px 0 #1f2222; }
notebook header.left tab {
padding: 5px 20px;
border-right-width: 3px; }
notebook header.left tab.reorderable-page {
border-bottom-width: 1px;
border-top-width: 1px; }
notebook header:backdrop {
background-color: #303535;
box-shadow: none; }
notebook header.top tabs arrow.up, notebook header.bottom tabs arrow.up {
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
notebook header.top tabs arrow.down, notebook header.bottom tabs arrow.down {
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
notebook header.left tabs arrow.up, notebook header.right tabs arrow.up {
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
notebook header.left tabs arrow.down, notebook header.right tabs arrow.down {
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
notebook header tabs arrow {
color: #949796; }
notebook header tabs arrow:hover {
color: #c1c3c1; }
notebook header tabs arrow:active {
color: #eeeeec; }
notebook header tabs arrow:insensitive {
color: rgba(148, 151, 150, 0.3); }
notebook header tabs arrow:backdrop {
color: rgba(148, 151, 150, 0.4); }
notebook header tabs arrow:backdrop:insensitive {
color: #5d6767; }
notebook tab { notebook tab {
border-width: 0; border-width: 0;
border-style: solid; border-style: solid;
@ -2334,18 +2353,6 @@ notebook {
notebook tab .titlebar button.titlebutton > image, notebook tab .titlebar button.titlebutton > image,
.titlebar notebook tab button.titlebutton > image { .titlebar notebook tab button.titlebutton > image {
padding: 2px; } padding: 2px; }
notebook.arrow {
color: #949796; }
notebook.arrow:hover {
color: #c1c3c1; }
notebook.arrow:active {
color: #eeeeec; }
notebook.arrow:insensitive {
color: rgba(148, 151, 150, 0.3); }
notebook.arrow:backdrop {
color: rgba(148, 151, 150, 0.4); }
notebook.arrow:backdrop:insensitive {
color: #5d6767; }
/************** /**************
* Scrollbars * * Scrollbars *

81
gtk/theme/Adwaita/gtk-contained.css
View File

@ -2115,10 +2115,9 @@ popover {
text-shadow: none; text-shadow: none;
transition: none; } transition: none; }
/***************** /*************
* Notebooks and * * Notebooks *
* Tabs * *************/
*****************/
notebook { notebook {
-GtkNotebook-initial-gap: 10; -GtkNotebook-initial-gap: 10;
-GtkNotebook-arrow-spacing: 5; -GtkNotebook-arrow-spacing: 5;
@ -2154,21 +2153,6 @@ notebook {
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 -1px #a1a1a1; } box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 -1px #a1a1a1; }
notebook header.top:backdrop { notebook header.top:backdrop {
box-shadow: inset 0 -1px darkgray; } box-shadow: inset 0 -1px darkgray; }
notebook header.bottom {
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 1px #a1a1a1; }
notebook header.bottom:backdrop {
box-shadow: inset 0 1px darkgray; }
notebook header.right {
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 1px 0 #a1a1a1; }
notebook header.right:backdrop {
box-shadow: inset 1px 0 darkgray; }
notebook header.left {
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset -1px 0 #a1a1a1; }
notebook header.left:backdrop {
box-shadow: inset -1px 0 darkgray; }
notebook header:backdrop {
background-color: #d5d5d5;
box-shadow: none; }
notebook header.top tab { notebook header.top tab {
padding: 8px 20px; padding: 8px 20px;
border-bottom-width: 3px; } border-bottom-width: 3px; }
@ -2177,6 +2161,10 @@ notebook {
padding-right: 12px; padding-right: 12px;
border-left-width: 1px; border-left-width: 1px;
border-right-width: 1px; } border-right-width: 1px; }
notebook header.bottom {
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 1px #a1a1a1; }
notebook header.bottom:backdrop {
box-shadow: inset 0 1px darkgray; }
notebook header.bottom tab { notebook header.bottom tab {
padding: 8px 20px; padding: 8px 20px;
border-top-width: 3px; } border-top-width: 3px; }
@ -2185,18 +2173,49 @@ notebook {
padding-right: 12px; padding-right: 12px;
border-left-width: 1px; border-left-width: 1px;
border-right-width: 1px; } border-right-width: 1px; }
notebook header.left tab { notebook header.right {
padding: 5px 20px; box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 1px 0 #a1a1a1; }
border-right-width: 3px; } notebook header.right:backdrop {
notebook header.left tab.reorderable-page { box-shadow: inset 1px 0 darkgray; }
border-bottom-width: 1px;
border-top-width: 1px; }
notebook header.right tab { notebook header.right tab {
padding: 5px 20px; padding: 5px 20px;
border-left-width: 3px; } border-left-width: 3px; }
notebook header.right tab.reorderable-page { notebook header.right tab.reorderable-page {
border-bottom-width: 1px; border-bottom-width: 1px;
border-top-width: 1px; } border-top-width: 1px; }
notebook header.left {
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset -1px 0 #a1a1a1; }
notebook header.left:backdrop {
box-shadow: inset -1px 0 darkgray; }
notebook header.left tab {
padding: 5px 20px;
border-right-width: 3px; }
notebook header.left tab.reorderable-page {
border-bottom-width: 1px;
border-top-width: 1px; }
notebook header:backdrop {
background-color: #d5d5d5;
box-shadow: none; }
notebook header.top tabs arrow.up, notebook header.bottom tabs arrow.up {
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
notebook header.top tabs arrow.down, notebook header.bottom tabs arrow.down {
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
notebook header.left tabs arrow.up, notebook header.right tabs arrow.up {
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
notebook header.left tabs arrow.down, notebook header.right tabs arrow.down {
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
notebook header tabs arrow {
color: #8e9192; }
notebook header tabs arrow:hover {
color: #5e6364; }
notebook header tabs arrow:active {
color: #2e3436; }
notebook header tabs arrow:insensitive {
color: rgba(142, 145, 146, 0.3); }
notebook header tabs arrow:backdrop {
color: rgba(142, 145, 146, 0.4); }
notebook header tabs arrow:backdrop:insensitive {
color: #c7c7c7; }
notebook tab { notebook tab {
border-width: 0; border-width: 0;
border-style: solid; border-style: solid;
@ -2340,18 +2359,6 @@ notebook {
notebook tab .titlebar button.titlebutton > image, notebook tab .titlebar button.titlebutton > image,
.titlebar notebook tab button.titlebutton > image { .titlebar notebook tab button.titlebutton > image {
padding: 2px; } padding: 2px; }
notebook.arrow {
color: #8e9192; }
notebook.arrow:hover {
color: #5e6364; }
notebook.arrow:active {
color: #2e3436; }
notebook.arrow:insensitive {
color: rgba(142, 145, 146, 0.3); }
notebook.arrow:backdrop {
color: rgba(142, 145, 146, 0.4); }
notebook.arrow:backdrop:insensitive {
color: #c7c7c7; }
/************** /**************
* Scrollbars * * Scrollbars *