mirror of
https://gitlab.gnome.org/GNOME/gtk.git
synced 2024-12-28 22:41:43 +00:00
Adwaita: Update notebook styling
Adapt to the changes in the previous commit.
This commit is contained in:
Matthias Clasen
parent
4802b515e4
commit
f564f16b5c
@ -1573,7 +1573,17 @@ notebook {
|
||||
border: 1px solid $borders_color;
|
||||
&:backdrop { border-color: $backdrop_borders_color; }
|
||||
}
|
||||
|
||||
& 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: doesn't work on dark var
|
||||
background-color: mix($bg_color, $borders_color, 70%);
|
||||
@ -1588,79 +1598,86 @@ notebook {
|
||||
&:backdrop { border-color: $backdrop_borders_color; }
|
||||
}
|
||||
|
||||
$_header_shade: inset 0 2px 3px -1px transparentize(black, 0.85);
|
||||
&.top {
|
||||
box-shadow: $_header_shade,
|
||||
inset 0 -1px $borders_color; // border
|
||||
&:backdrop { box-shadow: inset 0 -1px $backdrop_borders_color; }
|
||||
& tab {
|
||||
padding: $vt_vpadding $vt_hpadding;
|
||||
border-bottom-width: $tab_indicator_size;
|
||||
&.reorderable-page {
|
||||
padding-left: 12px; // for a nicer close button
|
||||
padding-right: 12px; // placement
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.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;
|
||||
border-top-width: $tab_indicator_size;
|
||||
&.reorderable-page {
|
||||
padding-left: 12px; // for a nicer close button
|
||||
padding-right: 12px; // placement
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.right {
|
||||
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-left-width: $tab_indicator_size;
|
||||
&.reorderable-page {
|
||||
border-bottom-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;
|
||||
}
|
||||
}
|
||||
//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;
|
||||
border-bottom-width: $tab_indicator_size;
|
||||
&.reorderable-page {
|
||||
padding-left: 12px; // for a nicer close button
|
||||
padding-right: 12px; // placement
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px;
|
||||
&.top, &.bottom {
|
||||
& tabs arrow.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
|
||||
& tabs arrow.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
|
||||
}
|
||||
}
|
||||
& header.bottom tab {
|
||||
padding: $vt_vpadding $vt_hpadding;
|
||||
border-top-width: $tab_indicator_size;
|
||||
&.reorderable-page {
|
||||
padding-left: 12px; // for a nicer close button
|
||||
padding-right: 12px; // placement
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px;
|
||||
&.left, &.right {
|
||||
& tabs arrow.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
||||
& tabs arrow.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
|
||||
}
|
||||
}
|
||||
& header.left tab {
|
||||
padding: $ht_vpadding $ht_hpadding;
|
||||
border-right-width: $tab_indicator_size;
|
||||
&.reorderable-page {
|
||||
border-bottom-width: 1px;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
}
|
||||
& header.right tab {
|
||||
padding: $ht_vpadding $ht_hpadding;
|
||||
border-left-width: $tab_indicator_size;
|
||||
&.reorderable-page {
|
||||
border-bottom-width: 1px;
|
||||
border-top-width: 1px;
|
||||
& 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-style: solid;
|
||||
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 *
|
||||
**************/
|
||||
|
||||
@ -2109,10 +2109,9 @@ popover {
|
||||
text-shadow: none;
|
||||
transition: none; }
|
||||
|
||||
/*****************
|
||||
* Notebooks and *
|
||||
* Tabs *
|
||||
*****************/
|
||||
/*************
|
||||
* Notebooks *
|
||||
*************/
|
||||
notebook {
|
||||
-GtkNotebook-initial-gap: 10;
|
||||
-GtkNotebook-arrow-spacing: 5;
|
||||
@ -2148,49 +2147,69 @@ notebook {
|
||||
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 -1px #1c1f1f; }
|
||||
notebook header.top:backdrop {
|
||||
box-shadow: inset 0 -1px #1f2222; }
|
||||
notebook header.top tab {
|
||||
padding: 8px 20px;
|
||||
border-bottom-width: 3px; }
|
||||
notebook header.top tab.reorderable-page {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
border-left-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 {
|
||||
padding: 8px 20px;
|
||||
border-top-width: 3px; }
|
||||
notebook header.bottom tab.reorderable-page {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px; }
|
||||
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.right tab {
|
||||
padding: 5px 20px;
|
||||
border-left-width: 3px; }
|
||||
notebook header.right tab.reorderable-page {
|
||||
border-bottom-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 tab {
|
||||
padding: 8px 20px;
|
||||
border-bottom-width: 3px; }
|
||||
notebook header.top tab.reorderable-page {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px; }
|
||||
notebook header.bottom tab {
|
||||
padding: 8px 20px;
|
||||
border-top-width: 3px; }
|
||||
notebook header.bottom tab.reorderable-page {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px; }
|
||||
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.right tab {
|
||||
padding: 5px 20px;
|
||||
border-left-width: 3px; }
|
||||
notebook header.right tab.reorderable-page {
|
||||
border-bottom-width: 1px;
|
||||
border-top-width: 1px; }
|
||||
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 {
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
@ -2334,18 +2353,6 @@ notebook {
|
||||
notebook tab .titlebar button.titlebutton > image,
|
||||
.titlebar notebook tab button.titlebutton > image {
|
||||
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 *
|
||||
|
||||
@ -2115,10 +2115,9 @@ popover {
|
||||
text-shadow: none;
|
||||
transition: none; }
|
||||
|
||||
/*****************
|
||||
* Notebooks and *
|
||||
* Tabs *
|
||||
*****************/
|
||||
/*************
|
||||
* Notebooks *
|
||||
*************/
|
||||
notebook {
|
||||
-GtkNotebook-initial-gap: 10;
|
||||
-GtkNotebook-arrow-spacing: 5;
|
||||
@ -2154,49 +2153,69 @@ notebook {
|
||||
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 -1px #a1a1a1; }
|
||||
notebook header.top:backdrop {
|
||||
box-shadow: inset 0 -1px darkgray; }
|
||||
notebook header.top tab {
|
||||
padding: 8px 20px;
|
||||
border-bottom-width: 3px; }
|
||||
notebook header.top tab.reorderable-page {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
border-left-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 {
|
||||
padding: 8px 20px;
|
||||
border-top-width: 3px; }
|
||||
notebook header.bottom tab.reorderable-page {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px; }
|
||||
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.right tab {
|
||||
padding: 5px 20px;
|
||||
border-left-width: 3px; }
|
||||
notebook header.right tab.reorderable-page {
|
||||
border-bottom-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 tab {
|
||||
padding: 8px 20px;
|
||||
border-bottom-width: 3px; }
|
||||
notebook header.top tab.reorderable-page {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px; }
|
||||
notebook header.bottom tab {
|
||||
padding: 8px 20px;
|
||||
border-top-width: 3px; }
|
||||
notebook header.bottom tab.reorderable-page {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px; }
|
||||
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.right tab {
|
||||
padding: 5px 20px;
|
||||
border-left-width: 3px; }
|
||||
notebook header.right tab.reorderable-page {
|
||||
border-bottom-width: 1px;
|
||||
border-top-width: 1px; }
|
||||
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 {
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
@ -2340,18 +2359,6 @@ notebook {
|
||||
notebook tab .titlebar button.titlebutton > image,
|
||||
.titlebar notebook tab button.titlebutton > image {
|
||||
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 *
|
||||
|
||||
Loading…
Reference in New Issue
Block a user