callisto-debian/gtk3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

HighContrast: update notebook styling

Browse Source 
Adapt to the changes in the previous commit.
This commit is contained in:
Matthias Clasen
2015-11-07 11:31:24 -05:00
parent 6592c6f51f
commit e892b918dc
2 changed files with 107 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
gtk/theme/HighContrast/_common.scss
View File

@ -1237,11 +1237,6 @@ notebook {
} }
&.frame { &.frame {
border: 1px solid $borders_color; border: 1px solid $borders_color;
// FIXME doesn't work
&.top { border-top-width: 0; }
&.bottom { border-bottom-width: 0; }
&.right { border-right-width: 0; }
&.left { border-left-width: 0; }
&:backdrop { border-color: $backdrop_borders_color; } &:backdrop { border-color: $backdrop_borders_color; }
} }
&.header { &.header {
@ -1250,7 +1245,7 @@ notebook {
background-color: mix($bg_color, $borders_color, 70%); background-color: mix($bg_color, $borders_color, 70%);
// this is the shading of the header behind the tabs // this is the shading of the header behind the tabs
&.frame { .frame & {
border: 1px solid $borders_color; border: 1px solid $borders_color;
&.top { border-bottom-width: 0; } &.top { border-bottom-width: 0; }
&.bottom { border-top-width: 0; } &.bottom { border-top-width: 0; }
@ -1286,7 +1281,52 @@ notebook {
box-shadow: none; box-shadow: none;
} }
} }
tab { //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;
}
}
& 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;
}
}
& 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;
}
}
& tab {
border-width: 0; border-width: 0;
border-style: solid; border-style: solid;
border-color: transparent; border-color: transparent;
@ -1294,78 +1334,6 @@ notebook {
outline-offset: 0; outline-offset: 0;
$tab_indicator_size: 3px;
//vertical tab sizing
$vt_vpadding: 8px;
$vt_hpadding: 20px;
// horizontal tab sizing
$ht_vpadding: 5px;
$ht_hpadding: 20px;
//FIXME: we get double border in some cases, not considering the broken
//notebook content frame...
&.top, &.bottom { padding: $vt_vpadding $vt_hpadding; }
&.left, &.right { padding: $ht_vpadding $ht_hpadding; }
/* works for testnotebookdnd, but there's a superfluous border
in gedit or web, commented out for now, needs gtk fixes
&.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;
}
}
*/
&.reorderable-page {
&.top, &.bottom {
padding-left: 12px; // for a nicer close button
padding-right: 12px; // placement
border-left-width: 1px;
border-right-width: 1px;
}
&.left, &.right {
border-bottom-width: 1px;
border-top-width: 1px;
}
}
&.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 //here's the interesting stuff
&:hover { &:hover {
border-color: $borders_color; border-color: $borders_color;
@ -1381,7 +1349,7 @@ notebook {
(bottom, top), (bottom, top),
(left, right), (left, right),
(right, left) { (right, left) {
&.reorderable-page.#{$_tab} { .#{$_tab} &.reorderable-page {
border-color: transparent; border-color: transparent;
&:hover { &:hover {
border-color: transparentize($borders_color,0.7); border-color: transparentize($borders_color,0.7);

147
gtk/theme/HighContrast/gtk.css
View File

@ -1374,29 +1374,21 @@ notebook {
background-color: #fff; } background-color: #fff; }
notebook.frame { notebook.frame {
border: 1px solid gray; } border: 1px solid gray; }
notebook.frame.top {
border-top-width: 0; }
notebook.frame.bottom {
border-bottom-width: 0; }
notebook.frame.right {
border-right-width: 0; }
notebook.frame.left {
border-left-width: 0; }
notebook.frame:backdrop { notebook.frame:backdrop {
border-color: #8d8d8d; } border-color: #8d8d8d; }
notebook.header { notebook.header {
background-color: #d9d9d9; } background-color: #d9d9d9; }
notebook.header.frame { .frame notebook.header {
border: 1px solid gray; } border: 1px solid gray; }
notebook.header.frame.top { .frame notebook.header.top {
border-bottom-width: 0; } border-bottom-width: 0; }
notebook.header.frame.bottom { .frame notebook.header.bottom {
border-top-width: 0; } border-top-width: 0; }
notebook.header.frame.right { .frame notebook.header.right {
border-left-width: 0; } border-left-width: 0; }
notebook.header.frame.left { .frame notebook.header.left {
border-right-width: 0; } border-right-width: 0; }
notebook.header.frame:backdrop { .frame notebook.header:backdrop {
border-color: #8d8d8d; } border-color: #8d8d8d; }
notebook.header.top { notebook.header.top {
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 -1px gray; } box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.15), inset 0 -1px gray; }
@ -1417,61 +1409,40 @@ notebook {
notebook.header:backdrop { notebook.header:backdrop {
background-color: #d7d7d7; background-color: #d7d7d7;
box-shadow: none; } 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 tab { notebook tab {
border-width: 0; border-width: 0;
border-style: solid; border-style: solid;
border-color: transparent; border-color: transparent;
background-color: transparent; background-color: transparent;
outline-offset: 0; outline-offset: 0; }
/* works for testnotebookdnd, but there's a superfluous border
in gedit or web, commented out for now, needs gtk fixes
&.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;
}
}
*/ }
notebook tab.top, notebook tab.bottom {
padding: 8px 20px; }
notebook tab.left, notebook tab.right {
padding: 5px 20px; }
notebook tab.reorderable-page.top, notebook tab.reorderable-page.bottom {
padding-left: 12px;
padding-right: 12px;
border-left-width: 1px;
border-right-width: 1px; }
notebook tab.reorderable-page.left, notebook tab.reorderable-page.right {
border-bottom-width: 1px;
border-top-width: 1px; }
notebook tab.top {
border-bottom-width: 3px; }
notebook tab.bottom {
border-top-width: 3px; }
notebook tab.left {
border-right-width: 3px; }
notebook tab.right {
border-left-width: 3px; }
notebook tab:hover { notebook tab:hover {
border-color: gray; } border-color: gray; }
notebook tab:active, notebook tab:backdrop:active { notebook tab:active, notebook tab:backdrop:active {
@ -1479,80 +1450,80 @@ notebook {
notebook tab:backdrop { notebook tab:backdrop {
background-color: transparent; background-color: transparent;
border-color: transparent; } border-color: transparent; }
notebook tab.reorderable-page.top { .top notebook tab.reorderable-page {
border-color: transparent; } border-color: transparent; }
notebook tab.reorderable-page.top:hover { .top notebook tab.reorderable-page:hover {
border-color: rgba(128, 128, 128, 0.3); border-color: rgba(128, 128, 128, 0.3);
border-bottom-color: gray; border-bottom-color: gray;
background-color: rgba(255, 255, 255, 0.2); } background-color: rgba(255, 255, 255, 0.2); }
notebook tab.reorderable-page.top:active { .top notebook tab.reorderable-page:active {
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
border-color: rgba(128, 128, 128, 0.5); border-color: rgba(128, 128, 128, 0.5);
border-bottom-color: #000; } border-bottom-color: #000; }
notebook tab.reorderable-page.top:active:hover { .top notebook tab.reorderable-page:active:hover {
background-color: rgba(255, 255, 255, 0.7); } background-color: rgba(255, 255, 255, 0.7); }
notebook tab.reorderable-page.top:active:backdrop { .top notebook tab.reorderable-page:active:backdrop {
border-color: #8d8d8d; border-color: #8d8d8d;
background-color: #fff; background-color: #fff;
border-bottom-color: #000; } border-bottom-color: #000; }
notebook tab.reorderable-page.top:backdrop { .top notebook tab.reorderable-page:backdrop {
border-color: transparent; border-color: transparent;
background-color: transparent; } background-color: transparent; }
notebook tab.reorderable-page.bottom { .bottom notebook tab.reorderable-page {
border-color: transparent; } border-color: transparent; }
notebook tab.reorderable-page.bottom:hover { .bottom notebook tab.reorderable-page:hover {
border-color: rgba(128, 128, 128, 0.3); border-color: rgba(128, 128, 128, 0.3);
border-top-color: gray; border-top-color: gray;
background-color: rgba(255, 255, 255, 0.2); } background-color: rgba(255, 255, 255, 0.2); }
notebook tab.reorderable-page.bottom:active { .bottom notebook tab.reorderable-page:active {
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
border-color: rgba(128, 128, 128, 0.5); border-color: rgba(128, 128, 128, 0.5);
border-top-color: #000; } border-top-color: #000; }
notebook tab.reorderable-page.bottom:active:hover { .bottom notebook tab.reorderable-page:active:hover {
background-color: rgba(255, 255, 255, 0.7); } background-color: rgba(255, 255, 255, 0.7); }
notebook tab.reorderable-page.bottom:active:backdrop { .bottom notebook tab.reorderable-page:active:backdrop {
border-color: #8d8d8d; border-color: #8d8d8d;
background-color: #fff; background-color: #fff;
border-top-color: #000; } border-top-color: #000; }
notebook tab.reorderable-page.bottom:backdrop { .bottom notebook tab.reorderable-page:backdrop {
border-color: transparent; border-color: transparent;
background-color: transparent; } background-color: transparent; }
notebook tab.reorderable-page.left { .left notebook tab.reorderable-page {
border-color: transparent; } border-color: transparent; }
notebook tab.reorderable-page.left:hover { .left notebook tab.reorderable-page:hover {
border-color: rgba(128, 128, 128, 0.3); border-color: rgba(128, 128, 128, 0.3);
border-right-color: gray; border-right-color: gray;
background-color: rgba(255, 255, 255, 0.2); } background-color: rgba(255, 255, 255, 0.2); }
notebook tab.reorderable-page.left:active { .left notebook tab.reorderable-page:active {
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
border-color: rgba(128, 128, 128, 0.5); border-color: rgba(128, 128, 128, 0.5);
border-right-color: #000; } border-right-color: #000; }
notebook tab.reorderable-page.left:active:hover { .left notebook tab.reorderable-page:active:hover {
background-color: rgba(255, 255, 255, 0.7); } background-color: rgba(255, 255, 255, 0.7); }
notebook tab.reorderable-page.left:active:backdrop { .left notebook tab.reorderable-page:active:backdrop {
border-color: #8d8d8d; border-color: #8d8d8d;
background-color: #fff; background-color: #fff;
border-right-color: #000; } border-right-color: #000; }
notebook tab.reorderable-page.left:backdrop { .left notebook tab.reorderable-page:backdrop {
border-color: transparent; border-color: transparent;
background-color: transparent; } background-color: transparent; }
notebook tab.reorderable-page.right { .right notebook tab.reorderable-page {
border-color: transparent; } border-color: transparent; }
notebook tab.reorderable-page.right:hover { .right notebook tab.reorderable-page:hover {
border-color: rgba(128, 128, 128, 0.3); border-color: rgba(128, 128, 128, 0.3);
border-left-color: gray; border-left-color: gray;
background-color: rgba(255, 255, 255, 0.2); } background-color: rgba(255, 255, 255, 0.2); }
notebook tab.reorderable-page.right:active { .right notebook tab.reorderable-page:active {
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
border-color: rgba(128, 128, 128, 0.5); border-color: rgba(128, 128, 128, 0.5);
border-left-color: #000; } border-left-color: #000; }
notebook tab.reorderable-page.right:active:hover { .right notebook tab.reorderable-page:active:hover {
background-color: rgba(255, 255, 255, 0.7); } background-color: rgba(255, 255, 255, 0.7); }
notebook tab.reorderable-page.right:active:backdrop { .right notebook tab.reorderable-page:active:backdrop {
border-color: #8d8d8d; border-color: #8d8d8d;
background-color: #fff; background-color: #fff;
border-left-color: #000; } border-left-color: #000; }
notebook tab.reorderable-page.right:backdrop { .right notebook tab.reorderable-page:backdrop {
border-color: transparent; border-color: transparent;
background-color: transparent; } background-color: transparent; }
notebook tab label { notebook tab label {