Archives/horst3180_arc-theme
1
0
Fork 0
mirror of https://github.com/horst3180/arc-theme.git synced 2024-10-27 19:04:02 +00:00
Code Issues Projects Releases Wiki Activity

tweak notebook styling

Browse Source
This commit is contained in:
Horst3180 2016-02-19 11:06:17 +01:00 committed by Horst3180
parent 1d514cea1d
commit be715132b9
7 changed files with 203 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
common/gtk-3.0/3.20/gtk-dark.css
View File

@ -1494,8 +1494,10 @@ notebook {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
notebook.frame { notebook.frame {
border: 1px solid #2b2e39; } border: 1px solid #2b2e39; }
notebook.frame header {
margin: -1px; }
notebook header { notebook header {
padding: 2px; padding: 3px;
background-color: #383C4A; } background-color: #383C4A; }
notebook header.top { notebook header.top {
box-shadow: inset 0 -1px #2b2e39; } box-shadow: inset 0 -1px #2b2e39; }
@ -1573,29 +1575,29 @@ notebook {
color: #D3DAE3; } color: #D3DAE3; }
notebook header tabs arrow:disabled { notebook header tabs arrow:disabled {
color: rgba(211, 218, 227, 0.15); } color: rgba(211, 218, 227, 0.15); }
notebook header tab { notebook header tab {
background-color: rgba(64, 69, 82, 0); } background-color: rgba(64, 69, 82, 0); }
notebook header tab label { notebook header tab label {
color: rgba(211, 218, 227, 0.45); } color: rgba(211, 218, 227, 0.45); }
notebook header tab:hover { notebook header tab:hover {
background-color: rgba(64, 69, 82, 0.5); background-color: rgba(64, 69, 82, 0.5);
border-color: #2b2e39; } border-color: #2b2e39; }
notebook header tab:hover label { notebook header tab:hover label {
color: rgba(211, 218, 227, 0.725); } color: rgba(211, 218, 227, 0.725); }
notebook header tab:active { notebook header tab:active {
background-color: #404552; background-color: #404552;
border-color: #2b2e39; } border-color: #2b2e39; }
notebook header tab:active label { notebook header tab:active label {
color: #D3DAE3; } color: #D3DAE3; }
notebook header tab button { notebook header tab button {
min-height: 18px; min-height: 18px;
min-width: 16px; min-width: 16px;
padding: 0; padding: 0;
color: #9da3ad; } color: #9da3ad; }
notebook header tab button:hover { notebook header tab button:hover {
color: #ff4d4d; } color: #ff4d4d; }
notebook header tab button:active, notebook header tab button:active:hover { notebook header tab button:active, notebook header tab button:active:hover {
color: #5294E2; } color: #5294E2; }
* { * {
-GtkRange-slider-width: 13; -GtkRange-slider-width: 13;

50
common/gtk-3.0/3.20/gtk-darker.css
View File

@ -1493,8 +1493,10 @@ notebook {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
notebook.frame { notebook.frame {
border: 1px solid #dcdfe3; } border: 1px solid #dcdfe3; }
notebook.frame header {
margin: -1px; }
notebook header { notebook header {
padding: 2px; padding: 3px;
background-color: #F5F6F7; } background-color: #F5F6F7; }
notebook header.top { notebook header.top {
box-shadow: inset 0 -1px #dcdfe3; } box-shadow: inset 0 -1px #dcdfe3; }
@ -1572,29 +1574,29 @@ notebook {
color: #5c616c; } color: #5c616c; }
notebook header tabs arrow:disabled { notebook header tabs arrow:disabled {
color: rgba(92, 97, 108, 0.25); } color: rgba(92, 97, 108, 0.25); }
notebook header tab { notebook header tab {
background-color: rgba(255, 255, 255, 0); } background-color: rgba(255, 255, 255, 0); }
notebook header tab label { notebook header tab label {
color: rgba(92, 97, 108, 0.55); } color: rgba(92, 97, 108, 0.55); }
notebook header tab:hover { notebook header tab:hover {
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
border-color: #dcdfe3; } border-color: #dcdfe3; }
notebook header tab:hover label { notebook header tab:hover label {
color: rgba(92, 97, 108, 0.775); } color: rgba(92, 97, 108, 0.775); }
notebook header tab:active { notebook header tab:active {
background-color: #ffffff; background-color: #ffffff;
border-color: #dcdfe3; } border-color: #dcdfe3; }
notebook header tab:active label { notebook header tab:active label {
color: #5c616c; } color: #5c616c; }
notebook header tab button { notebook header tab button {
min-height: 18px; min-height: 18px;
min-width: 16px; min-width: 16px;
padding: 0; padding: 0;
color: #92959d; } color: #92959d; }
notebook header tab button:hover { notebook header tab button:hover {
color: #ff4d4d; } color: #ff4d4d; }
notebook header tab button:active, notebook header tab button:active:hover { notebook header tab button:active, notebook header tab button:active:hover {
color: #5294E2; } color: #5294E2; }
* { * {
-GtkRange-slider-width: 13; -GtkRange-slider-width: 13;

50
common/gtk-3.0/3.20/gtk-solid-dark.css
View File

@ -1494,8 +1494,10 @@ notebook {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
notebook.frame { notebook.frame {
border: 1px solid #2b2e39; } border: 1px solid #2b2e39; }
notebook.frame header {
margin: -1px; }
notebook header { notebook header {
padding: 2px; padding: 3px;
background-color: #383C4A; } background-color: #383C4A; }
notebook header.top { notebook header.top {
box-shadow: inset 0 -1px #2b2e39; } box-shadow: inset 0 -1px #2b2e39; }
@ -1573,29 +1575,29 @@ notebook {
color: #D3DAE3; } color: #D3DAE3; }
notebook header tabs arrow:disabled { notebook header tabs arrow:disabled {
color: rgba(211, 218, 227, 0.15); } color: rgba(211, 218, 227, 0.15); }
notebook header tab { notebook header tab {
background-color: rgba(64, 69, 82, 0); } background-color: rgba(64, 69, 82, 0); }
notebook header tab label { notebook header tab label {
color: rgba(211, 218, 227, 0.45); } color: rgba(211, 218, 227, 0.45); }
notebook header tab:hover { notebook header tab:hover {
background-color: rgba(64, 69, 82, 0.5); background-color: rgba(64, 69, 82, 0.5);
border-color: #2b2e39; } border-color: #2b2e39; }
notebook header tab:hover label { notebook header tab:hover label {
color: rgba(211, 218, 227, 0.725); } color: rgba(211, 218, 227, 0.725); }
notebook header tab:active { notebook header tab:active {
background-color: #404552; background-color: #404552;
border-color: #2b2e39; } border-color: #2b2e39; }
notebook header tab:active label { notebook header tab:active label {
color: #D3DAE3; } color: #D3DAE3; }
notebook header tab button { notebook header tab button {
min-height: 18px; min-height: 18px;
min-width: 16px; min-width: 16px;
padding: 0; padding: 0;
color: #9da3ad; } color: #9da3ad; }
notebook header tab button:hover { notebook header tab button:hover {
color: #ff4d4d; } color: #ff4d4d; }
notebook header tab button:active, notebook header tab button:active:hover { notebook header tab button:active, notebook header tab button:active:hover {
color: #5294E2; } color: #5294E2; }
* { * {
-GtkRange-slider-width: 13; -GtkRange-slider-width: 13;

50
common/gtk-3.0/3.20/gtk-solid-darker.css
View File

@ -1493,8 +1493,10 @@ notebook {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
notebook.frame { notebook.frame {
border: 1px solid #dcdfe3; } border: 1px solid #dcdfe3; }
notebook.frame header {
margin: -1px; }
notebook header { notebook header {
padding: 2px; padding: 3px;
background-color: #F5F6F7; } background-color: #F5F6F7; }
notebook header.top { notebook header.top {
box-shadow: inset 0 -1px #dcdfe3; } box-shadow: inset 0 -1px #dcdfe3; }
@ -1572,29 +1574,29 @@ notebook {
color: #5c616c; } color: #5c616c; }
notebook header tabs arrow:disabled { notebook header tabs arrow:disabled {
color: rgba(92, 97, 108, 0.25); } color: rgba(92, 97, 108, 0.25); }
notebook header tab { notebook header tab {
background-color: rgba(255, 255, 255, 0); } background-color: rgba(255, 255, 255, 0); }
notebook header tab label { notebook header tab label {
color: rgba(92, 97, 108, 0.55); } color: rgba(92, 97, 108, 0.55); }
notebook header tab:hover { notebook header tab:hover {
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
border-color: #dcdfe3; } border-color: #dcdfe3; }
notebook header tab:hover label { notebook header tab:hover label {
color: rgba(92, 97, 108, 0.775); } color: rgba(92, 97, 108, 0.775); }
notebook header tab:active { notebook header tab:active {
background-color: #ffffff; background-color: #ffffff;
border-color: #dcdfe3; } border-color: #dcdfe3; }
notebook header tab:active label { notebook header tab:active label {
color: #5c616c; } color: #5c616c; }
notebook header tab button { notebook header tab button {
min-height: 18px; min-height: 18px;
min-width: 16px; min-width: 16px;
padding: 0; padding: 0;
color: #92959d; } color: #92959d; }
notebook header tab button:hover { notebook header tab button:hover {
color: #ff4d4d; } color: #ff4d4d; }
notebook header tab button:active, notebook header tab button:active:hover { notebook header tab button:active, notebook header tab button:active:hover {
color: #5294E2; } color: #5294E2; }
* { * {
-GtkRange-slider-width: 13; -GtkRange-slider-width: 13;

50
common/gtk-3.0/3.20/gtk-solid.css
View File

@ -1497,8 +1497,10 @@ notebook {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
notebook.frame { notebook.frame {
border: 1px solid #dcdfe3; } border: 1px solid #dcdfe3; }
notebook.frame header {
margin: -1px; }
notebook header { notebook header {
padding: 2px; padding: 3px;
background-color: #F5F6F7; } background-color: #F5F6F7; }
notebook header.top { notebook header.top {
box-shadow: inset 0 -1px #dcdfe3; } box-shadow: inset 0 -1px #dcdfe3; }
@ -1576,29 +1578,29 @@ notebook {
color: #5c616c; } color: #5c616c; }
notebook header tabs arrow:disabled { notebook header tabs arrow:disabled {
color: rgba(92, 97, 108, 0.25); } color: rgba(92, 97, 108, 0.25); }
notebook header tab { notebook header tab {
background-color: rgba(255, 255, 255, 0); } background-color: rgba(255, 255, 255, 0); }
notebook header tab label { notebook header tab label {
color: rgba(92, 97, 108, 0.55); } color: rgba(92, 97, 108, 0.55); }
notebook header tab:hover { notebook header tab:hover {
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
border-color: #dcdfe3; } border-color: #dcdfe3; }
notebook header tab:hover label { notebook header tab:hover label {
color: rgba(92, 97, 108, 0.775); } color: rgba(92, 97, 108, 0.775); }
notebook header tab:active { notebook header tab:active {
background-color: #ffffff; background-color: #ffffff;
border-color: #dcdfe3; } border-color: #dcdfe3; }
notebook header tab:active label { notebook header tab:active label {
color: #5c616c; } color: #5c616c; }
notebook header tab button { notebook header tab button {
min-height: 18px; min-height: 18px;
min-width: 16px; min-width: 16px;
padding: 0; padding: 0;
color: #92959d; } color: #92959d; }
notebook header tab button:hover { notebook header tab button:hover {
color: #ff4d4d; } color: #ff4d4d; }
notebook header tab button:active, notebook header tab button:active:hover { notebook header tab button:active, notebook header tab button:active:hover {
color: #5294E2; } color: #5294E2; }
* { * {
-GtkRange-slider-width: 13; -GtkRange-slider-width: 13;

50
common/gtk-3.0/3.20/gtk.css
View File

@ -1497,8 +1497,10 @@ notebook {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
notebook.frame { notebook.frame {
border: 1px solid #dcdfe3; } border: 1px solid #dcdfe3; }
notebook.frame header {
margin: -1px; }
notebook header { notebook header {
padding: 2px; padding: 3px;
background-color: #F5F6F7; } background-color: #F5F6F7; }
notebook header.top { notebook header.top {
box-shadow: inset 0 -1px #dcdfe3; } box-shadow: inset 0 -1px #dcdfe3; }
@ -1576,29 +1578,29 @@ notebook {
color: #5c616c; } color: #5c616c; }
notebook header tabs arrow:disabled { notebook header tabs arrow:disabled {
color: rgba(92, 97, 108, 0.25); } color: rgba(92, 97, 108, 0.25); }
notebook header tab { notebook header tab {
background-color: rgba(255, 255, 255, 0); } background-color: rgba(255, 255, 255, 0); }
notebook header tab label { notebook header tab label {
color: rgba(92, 97, 108, 0.55); } color: rgba(92, 97, 108, 0.55); }
notebook header tab:hover { notebook header tab:hover {
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
border-color: #dcdfe3; } border-color: #dcdfe3; }
notebook header tab:hover label { notebook header tab:hover label {
color: rgba(92, 97, 108, 0.775); } color: rgba(92, 97, 108, 0.775); }
notebook header tab:active { notebook header tab:active {
background-color: #ffffff; background-color: #ffffff;
border-color: #dcdfe3; } border-color: #dcdfe3; }
notebook header tab:active label { notebook header tab:active label {
color: #5c616c; } color: #5c616c; }
notebook header tab button { notebook header tab button {
min-height: 18px; min-height: 18px;
min-width: 16px; min-width: 16px;
padding: 0; padding: 0;
color: #92959d; } color: #92959d; }
notebook header tab button:hover { notebook header tab button:hover {
color: #ff4d4d; } color: #ff4d4d; }
notebook header tab button:active, notebook header tab button:active:hover { notebook header tab button:active, notebook header tab button:active:hover {
color: #5294E2; } color: #5294E2; }
* { * {
-GtkRange-slider-width: 13; -GtkRange-slider-width: 13;

93
common/gtk-3.0/3.20/sass/_common.scss
View File

@ -1577,24 +1577,25 @@ notebook {
background-color: $base_color; background-color: $base_color;
transition: all 200ms $ease-out-quad; transition: all 200ms $ease-out-quad;
&.frame { border: 1px solid $borders_color; } &.frame {
border: 1px solid $borders_color;
header { margin: -1px; } // ugly hack to hide the borders around the header
}
header { header {
$vpadding: 4px; $vpadding: 4px;
$hpadding: 15px; $hpadding: 15px;
padding: 2px; padding: 3px;
background-color: $bg_color; background-color: $bg_color;
$_header_border: $borders_color; &.top { box-shadow: inset 0 -1px $borders_color; }
&.bottom { box-shadow: inset 0 1px $borders_color; }
// FIXME use borders and margins &.right { box-shadow: inset 1px 0 $borders_color; }
&.top { box-shadow: inset 0 -1px $_header_border; } &.left { box-shadow: inset -1px 0 $borders_color; }
&.bottom { box-shadow: inset 0 1px $_header_border; }
&.right { box-shadow: inset 1px 0 $_header_border; }
&.left { box-shadow: inset -1px 0 $_header_border; }
@each $_pos, $_bpos in (top, bottom), (bottom, top), (right, left), (left, right) { @each $_pos, $_bpos in (top, bottom), (bottom, top), (right, left), (left, right) {
// sizing and borders
&.#{$_pos} { &.#{$_pos} {
padding-#{$_bpos}: 0; padding-#{$_bpos}: 0;
@ -1603,16 +1604,16 @@ notebook {
border: 1px solid transparent; border: 1px solid transparent;
border-#{$_bpos}: none; border-#{$_bpos}: none;
// nicer close button placement
&.reorderable-page { &.reorderable-page {
padding-left: 12px; // for a nicer close button padding-left: 12px;
padding-right: 12px; // placement padding-right: 12px;
} }
// tab overlap
// Tab overlap
@if $_pos==top or $_pos==bottom { margin-right: -1px; } @if $_pos==top or $_pos==bottom { margin-right: -1px; }
@else { margin-bottom: -1px; } @else { margin-bottom: -1px; }
// Tab border radius // tab border radius
@if $_pos==top { border-radius: 1px 1px 0 0; } @if $_pos==top { border-radius: 1px 1px 0 0; }
@else if $_pos==bottom { border-radius: 0 0 1px 1px; } @else if $_pos==bottom { border-radius: 0 0 1px 1px; }
@else if $_pos==left { border-radius: 1px 0 0 1px; } @else if $_pos==left { border-radius: 1px 0 0 1px; }
@ -1620,7 +1621,7 @@ notebook {
} }
} }
} }
// overflow arrows
&.top, &.bottom { &.top, &.bottom {
tabs arrow.up { tabs arrow.up {
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
@ -1648,41 +1649,41 @@ notebook {
&:active { color: $fg_color; } &:active { color: $fg_color; }
&:disabled { color: transparentize($insensitive_fg_color,0.3); } &:disabled { color: transparentize($insensitive_fg_color,0.3); }
} }
} // tab colors
tab {
background-color: transparentize($base_color, 1);
header tab { label { color: $insensitive_fg_color; }
background-color: transparentize($base_color, 1);
label { color: $insensitive_fg_color; }
&:hover {
background-color: transparentize($base_color, 0.5);
border-color: $borders_color;
label { color: mix($fg_color, $insensitive_fg_color, 50%); }
}
&:active {
background-color: $base_color;
border-color: $borders_color;
label { color: $fg_color; }
}
button { // close button
min-height: 18px;
min-width: 16px;
padding: 0;
color: mix($bg_color, $fg_color, 35%);
@extend %undecorated_button;
&:hover { &:hover {
@extend %undecorated_button; background-color: transparentize($base_color, 0.5);
color: lighten(red, 15%); border-color: $borders_color;
label { color: mix($fg_color, $insensitive_fg_color, 50%); }
} }
&:active, &:active:hover { &:active {
background-color: $base_color;
border-color: $borders_color;
label { color: $fg_color; }
}
// close button
button {
min-height: 18px;
min-width: 16px;
padding: 0;
color: mix($bg_color, $fg_color, 35%);
@extend %undecorated_button; @extend %undecorated_button;
color: $selected_bg_color;
&:hover {
@extend %undecorated_button;
color: lighten(red, 15%);
}
&:active, &:active:hover {
@extend %undecorated_button;
color: $selected_bg_color;
}
} }
} }
} }