mirror of
https://github.com/horst3180/arc-theme.git
synced 2024-09-28 14:00:44 +00:00
tweak notebook styling
This commit is contained in:
Horst3180
Horst3180
parent
1d514cea1d
commit
be715132b9
@ -1494,8 +1494,10 @@ notebook {
|
||||
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
||||
notebook.frame {
|
||||
border: 1px solid #2b2e39; }
|
||||
notebook.frame header {
|
||||
margin: -1px; }
|
||||
notebook header {
|
||||
padding: 2px;
|
||||
padding: 3px;
|
||||
background-color: #383C4A; }
|
||||
notebook header.top {
|
||||
box-shadow: inset 0 -1px #2b2e39; }
|
||||
@ -1573,29 +1575,29 @@ notebook {
|
||||
color: #D3DAE3; }
|
||||
notebook header tabs arrow:disabled {
|
||||
color: rgba(211, 218, 227, 0.15); }
|
||||
notebook header tab {
|
||||
background-color: rgba(64, 69, 82, 0); }
|
||||
notebook header tab label {
|
||||
color: rgba(211, 218, 227, 0.45); }
|
||||
notebook header tab:hover {
|
||||
background-color: rgba(64, 69, 82, 0.5);
|
||||
border-color: #2b2e39; }
|
||||
notebook header tab:hover label {
|
||||
color: rgba(211, 218, 227, 0.725); }
|
||||
notebook header tab:active {
|
||||
background-color: #404552;
|
||||
border-color: #2b2e39; }
|
||||
notebook header tab:active label {
|
||||
color: #D3DAE3; }
|
||||
notebook header tab button {
|
||||
min-height: 18px;
|
||||
min-width: 16px;
|
||||
padding: 0;
|
||||
color: #9da3ad; }
|
||||
notebook header tab button:hover {
|
||||
color: #ff4d4d; }
|
||||
notebook header tab button:active, notebook header tab button:active:hover {
|
||||
color: #5294E2; }
|
||||
notebook header tab {
|
||||
background-color: rgba(64, 69, 82, 0); }
|
||||
notebook header tab label {
|
||||
color: rgba(211, 218, 227, 0.45); }
|
||||
notebook header tab:hover {
|
||||
background-color: rgba(64, 69, 82, 0.5);
|
||||
border-color: #2b2e39; }
|
||||
notebook header tab:hover label {
|
||||
color: rgba(211, 218, 227, 0.725); }
|
||||
notebook header tab:active {
|
||||
background-color: #404552;
|
||||
border-color: #2b2e39; }
|
||||
notebook header tab:active label {
|
||||
color: #D3DAE3; }
|
||||
notebook header tab button {
|
||||
min-height: 18px;
|
||||
min-width: 16px;
|
||||
padding: 0;
|
||||
color: #9da3ad; }
|
||||
notebook header tab button:hover {
|
||||
color: #ff4d4d; }
|
||||
notebook header tab button:active, notebook header tab button:active:hover {
|
||||
color: #5294E2; }
|
||||
|
||||
* {
|
||||
-GtkRange-slider-width: 13;
|
||||
|
||||
@ -1493,8 +1493,10 @@ notebook {
|
||||
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
||||
notebook.frame {
|
||||
border: 1px solid #dcdfe3; }
|
||||
notebook.frame header {
|
||||
margin: -1px; }
|
||||
notebook header {
|
||||
padding: 2px;
|
||||
padding: 3px;
|
||||
background-color: #F5F6F7; }
|
||||
notebook header.top {
|
||||
box-shadow: inset 0 -1px #dcdfe3; }
|
||||
@ -1572,29 +1574,29 @@ notebook {
|
||||
color: #5c616c; }
|
||||
notebook header tabs arrow:disabled {
|
||||
color: rgba(92, 97, 108, 0.25); }
|
||||
notebook header tab {
|
||||
background-color: rgba(255, 255, 255, 0); }
|
||||
notebook header tab label {
|
||||
color: rgba(92, 97, 108, 0.55); }
|
||||
notebook header tab:hover {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-color: #dcdfe3; }
|
||||
notebook header tab:hover label {
|
||||
color: rgba(92, 97, 108, 0.775); }
|
||||
notebook header tab:active {
|
||||
background-color: #ffffff;
|
||||
border-color: #dcdfe3; }
|
||||
notebook header tab:active label {
|
||||
color: #5c616c; }
|
||||
notebook header tab button {
|
||||
min-height: 18px;
|
||||
min-width: 16px;
|
||||
padding: 0;
|
||||
color: #92959d; }
|
||||
notebook header tab button:hover {
|
||||
color: #ff4d4d; }
|
||||
notebook header tab button:active, notebook header tab button:active:hover {
|
||||
color: #5294E2; }
|
||||
notebook header tab {
|
||||
background-color: rgba(255, 255, 255, 0); }
|
||||
notebook header tab label {
|
||||
color: rgba(92, 97, 108, 0.55); }
|
||||
notebook header tab:hover {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-color: #dcdfe3; }
|
||||
notebook header tab:hover label {
|
||||
color: rgba(92, 97, 108, 0.775); }
|
||||
notebook header tab:active {
|
||||
background-color: #ffffff;
|
||||
border-color: #dcdfe3; }
|
||||
notebook header tab:active label {
|
||||
color: #5c616c; }
|
||||
notebook header tab button {
|
||||
min-height: 18px;
|
||||
min-width: 16px;
|
||||
padding: 0;
|
||||
color: #92959d; }
|
||||
notebook header tab button:hover {
|
||||
color: #ff4d4d; }
|
||||
notebook header tab button:active, notebook header tab button:active:hover {
|
||||
color: #5294E2; }
|
||||
|
||||
* {
|
||||
-GtkRange-slider-width: 13;
|
||||
|
||||
@ -1494,8 +1494,10 @@ notebook {
|
||||
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
||||
notebook.frame {
|
||||
border: 1px solid #2b2e39; }
|
||||
notebook.frame header {
|
||||
margin: -1px; }
|
||||
notebook header {
|
||||
padding: 2px;
|
||||
padding: 3px;
|
||||
background-color: #383C4A; }
|
||||
notebook header.top {
|
||||
box-shadow: inset 0 -1px #2b2e39; }
|
||||
@ -1573,29 +1575,29 @@ notebook {
|
||||
color: #D3DAE3; }
|
||||
notebook header tabs arrow:disabled {
|
||||
color: rgba(211, 218, 227, 0.15); }
|
||||
notebook header tab {
|
||||
background-color: rgba(64, 69, 82, 0); }
|
||||
notebook header tab label {
|
||||
color: rgba(211, 218, 227, 0.45); }
|
||||
notebook header tab:hover {
|
||||
background-color: rgba(64, 69, 82, 0.5);
|
||||
border-color: #2b2e39; }
|
||||
notebook header tab:hover label {
|
||||
color: rgba(211, 218, 227, 0.725); }
|
||||
notebook header tab:active {
|
||||
background-color: #404552;
|
||||
border-color: #2b2e39; }
|
||||
notebook header tab:active label {
|
||||
color: #D3DAE3; }
|
||||
notebook header tab button {
|
||||
min-height: 18px;
|
||||
min-width: 16px;
|
||||
padding: 0;
|
||||
color: #9da3ad; }
|
||||
notebook header tab button:hover {
|
||||
color: #ff4d4d; }
|
||||
notebook header tab button:active, notebook header tab button:active:hover {
|
||||
color: #5294E2; }
|
||||
notebook header tab {
|
||||
background-color: rgba(64, 69, 82, 0); }
|
||||
notebook header tab label {
|
||||
color: rgba(211, 218, 227, 0.45); }
|
||||
notebook header tab:hover {
|
||||
background-color: rgba(64, 69, 82, 0.5);
|
||||
border-color: #2b2e39; }
|
||||
notebook header tab:hover label {
|
||||
color: rgba(211, 218, 227, 0.725); }
|
||||
notebook header tab:active {
|
||||
background-color: #404552;
|
||||
border-color: #2b2e39; }
|
||||
notebook header tab:active label {
|
||||
color: #D3DAE3; }
|
||||
notebook header tab button {
|
||||
min-height: 18px;
|
||||
min-width: 16px;
|
||||
padding: 0;
|
||||
color: #9da3ad; }
|
||||
notebook header tab button:hover {
|
||||
color: #ff4d4d; }
|
||||
notebook header tab button:active, notebook header tab button:active:hover {
|
||||
color: #5294E2; }
|
||||
|
||||
* {
|
||||
-GtkRange-slider-width: 13;
|
||||
|
||||
@ -1493,8 +1493,10 @@ notebook {
|
||||
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
||||
notebook.frame {
|
||||
border: 1px solid #dcdfe3; }
|
||||
notebook.frame header {
|
||||
margin: -1px; }
|
||||
notebook header {
|
||||
padding: 2px;
|
||||
padding: 3px;
|
||||
background-color: #F5F6F7; }
|
||||
notebook header.top {
|
||||
box-shadow: inset 0 -1px #dcdfe3; }
|
||||
@ -1572,29 +1574,29 @@ notebook {
|
||||
color: #5c616c; }
|
||||
notebook header tabs arrow:disabled {
|
||||
color: rgba(92, 97, 108, 0.25); }
|
||||
notebook header tab {
|
||||
background-color: rgba(255, 255, 255, 0); }
|
||||
notebook header tab label {
|
||||
color: rgba(92, 97, 108, 0.55); }
|
||||
notebook header tab:hover {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-color: #dcdfe3; }
|
||||
notebook header tab:hover label {
|
||||
color: rgba(92, 97, 108, 0.775); }
|
||||
notebook header tab:active {
|
||||
background-color: #ffffff;
|
||||
border-color: #dcdfe3; }
|
||||
notebook header tab:active label {
|
||||
color: #5c616c; }
|
||||
notebook header tab button {
|
||||
min-height: 18px;
|
||||
min-width: 16px;
|
||||
padding: 0;
|
||||
color: #92959d; }
|
||||
notebook header tab button:hover {
|
||||
color: #ff4d4d; }
|
||||
notebook header tab button:active, notebook header tab button:active:hover {
|
||||
color: #5294E2; }
|
||||
notebook header tab {
|
||||
background-color: rgba(255, 255, 255, 0); }
|
||||
notebook header tab label {
|
||||
color: rgba(92, 97, 108, 0.55); }
|
||||
notebook header tab:hover {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-color: #dcdfe3; }
|
||||
notebook header tab:hover label {
|
||||
color: rgba(92, 97, 108, 0.775); }
|
||||
notebook header tab:active {
|
||||
background-color: #ffffff;
|
||||
border-color: #dcdfe3; }
|
||||
notebook header tab:active label {
|
||||
color: #5c616c; }
|
||||
notebook header tab button {
|
||||
min-height: 18px;
|
||||
min-width: 16px;
|
||||
padding: 0;
|
||||
color: #92959d; }
|
||||
notebook header tab button:hover {
|
||||
color: #ff4d4d; }
|
||||
notebook header tab button:active, notebook header tab button:active:hover {
|
||||
color: #5294E2; }
|
||||
|
||||
* {
|
||||
-GtkRange-slider-width: 13;
|
||||
|
||||
@ -1497,8 +1497,10 @@ notebook {
|
||||
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
||||
notebook.frame {
|
||||
border: 1px solid #dcdfe3; }
|
||||
notebook.frame header {
|
||||
margin: -1px; }
|
||||
notebook header {
|
||||
padding: 2px;
|
||||
padding: 3px;
|
||||
background-color: #F5F6F7; }
|
||||
notebook header.top {
|
||||
box-shadow: inset 0 -1px #dcdfe3; }
|
||||
@ -1576,29 +1578,29 @@ notebook {
|
||||
color: #5c616c; }
|
||||
notebook header tabs arrow:disabled {
|
||||
color: rgba(92, 97, 108, 0.25); }
|
||||
notebook header tab {
|
||||
background-color: rgba(255, 255, 255, 0); }
|
||||
notebook header tab label {
|
||||
color: rgba(92, 97, 108, 0.55); }
|
||||
notebook header tab:hover {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-color: #dcdfe3; }
|
||||
notebook header tab:hover label {
|
||||
color: rgba(92, 97, 108, 0.775); }
|
||||
notebook header tab:active {
|
||||
background-color: #ffffff;
|
||||
border-color: #dcdfe3; }
|
||||
notebook header tab:active label {
|
||||
color: #5c616c; }
|
||||
notebook header tab button {
|
||||
min-height: 18px;
|
||||
min-width: 16px;
|
||||
padding: 0;
|
||||
color: #92959d; }
|
||||
notebook header tab button:hover {
|
||||
color: #ff4d4d; }
|
||||
notebook header tab button:active, notebook header tab button:active:hover {
|
||||
color: #5294E2; }
|
||||
notebook header tab {
|
||||
background-color: rgba(255, 255, 255, 0); }
|
||||
notebook header tab label {
|
||||
color: rgba(92, 97, 108, 0.55); }
|
||||
notebook header tab:hover {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-color: #dcdfe3; }
|
||||
notebook header tab:hover label {
|
||||
color: rgba(92, 97, 108, 0.775); }
|
||||
notebook header tab:active {
|
||||
background-color: #ffffff;
|
||||
border-color: #dcdfe3; }
|
||||
notebook header tab:active label {
|
||||
color: #5c616c; }
|
||||
notebook header tab button {
|
||||
min-height: 18px;
|
||||
min-width: 16px;
|
||||
padding: 0;
|
||||
color: #92959d; }
|
||||
notebook header tab button:hover {
|
||||
color: #ff4d4d; }
|
||||
notebook header tab button:active, notebook header tab button:active:hover {
|
||||
color: #5294E2; }
|
||||
|
||||
* {
|
||||
-GtkRange-slider-width: 13;
|
||||
|
||||
@ -1497,8 +1497,10 @@ notebook {
|
||||
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
||||
notebook.frame {
|
||||
border: 1px solid #dcdfe3; }
|
||||
notebook.frame header {
|
||||
margin: -1px; }
|
||||
notebook header {
|
||||
padding: 2px;
|
||||
padding: 3px;
|
||||
background-color: #F5F6F7; }
|
||||
notebook header.top {
|
||||
box-shadow: inset 0 -1px #dcdfe3; }
|
||||
@ -1576,29 +1578,29 @@ notebook {
|
||||
color: #5c616c; }
|
||||
notebook header tabs arrow:disabled {
|
||||
color: rgba(92, 97, 108, 0.25); }
|
||||
notebook header tab {
|
||||
background-color: rgba(255, 255, 255, 0); }
|
||||
notebook header tab label {
|
||||
color: rgba(92, 97, 108, 0.55); }
|
||||
notebook header tab:hover {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-color: #dcdfe3; }
|
||||
notebook header tab:hover label {
|
||||
color: rgba(92, 97, 108, 0.775); }
|
||||
notebook header tab:active {
|
||||
background-color: #ffffff;
|
||||
border-color: #dcdfe3; }
|
||||
notebook header tab:active label {
|
||||
color: #5c616c; }
|
||||
notebook header tab button {
|
||||
min-height: 18px;
|
||||
min-width: 16px;
|
||||
padding: 0;
|
||||
color: #92959d; }
|
||||
notebook header tab button:hover {
|
||||
color: #ff4d4d; }
|
||||
notebook header tab button:active, notebook header tab button:active:hover {
|
||||
color: #5294E2; }
|
||||
notebook header tab {
|
||||
background-color: rgba(255, 255, 255, 0); }
|
||||
notebook header tab label {
|
||||
color: rgba(92, 97, 108, 0.55); }
|
||||
notebook header tab:hover {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-color: #dcdfe3; }
|
||||
notebook header tab:hover label {
|
||||
color: rgba(92, 97, 108, 0.775); }
|
||||
notebook header tab:active {
|
||||
background-color: #ffffff;
|
||||
border-color: #dcdfe3; }
|
||||
notebook header tab:active label {
|
||||
color: #5c616c; }
|
||||
notebook header tab button {
|
||||
min-height: 18px;
|
||||
min-width: 16px;
|
||||
padding: 0;
|
||||
color: #92959d; }
|
||||
notebook header tab button:hover {
|
||||
color: #ff4d4d; }
|
||||
notebook header tab button:active, notebook header tab button:active:hover {
|
||||
color: #5294E2; }
|
||||
|
||||
* {
|
||||
-GtkRange-slider-width: 13;
|
||||
|
||||
@ -1577,24 +1577,25 @@ notebook {
|
||||
background-color: $base_color;
|
||||
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 {
|
||||
$vpadding: 4px;
|
||||
$hpadding: 15px;
|
||||
padding: 2px;
|
||||
padding: 3px;
|
||||
background-color: $bg_color;
|
||||
|
||||
$_header_border: $borders_color;
|
||||
|
||||
// FIXME use borders and margins
|
||||
&.top { box-shadow: inset 0 -1px $_header_border; }
|
||||
&.bottom { box-shadow: inset 0 1px $_header_border; }
|
||||
&.right { box-shadow: inset 1px 0 $_header_border; }
|
||||
&.left { box-shadow: inset -1px 0 $_header_border; }
|
||||
&.top { box-shadow: inset 0 -1px $borders_color; }
|
||||
&.bottom { box-shadow: inset 0 1px $borders_color; }
|
||||
&.right { box-shadow: inset 1px 0 $borders_color; }
|
||||
&.left { box-shadow: inset -1px 0 $borders_color; }
|
||||
|
||||
@each $_pos, $_bpos in (top, bottom), (bottom, top), (right, left), (left, right) {
|
||||
|
||||
// sizing and borders
|
||||
&.#{$_pos} {
|
||||
padding-#{$_bpos}: 0;
|
||||
|
||||
@ -1603,16 +1604,16 @@ notebook {
|
||||
border: 1px solid transparent;
|
||||
border-#{$_bpos}: none;
|
||||
|
||||
// nicer close button placement
|
||||
&.reorderable-page {
|
||||
padding-left: 12px; // for a nicer close button
|
||||
padding-right: 12px; // placement
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
// Tab overlap
|
||||
// tab overlap
|
||||
@if $_pos==top or $_pos==bottom { margin-right: -1px; }
|
||||
@else { margin-bottom: -1px; }
|
||||
|
||||
// Tab border radius
|
||||
// tab border radius
|
||||
@if $_pos==top { border-radius: 1px 1px 0 0; }
|
||||
@else if $_pos==bottom { border-radius: 0 0 1px 1px; }
|
||||
@else if $_pos==left { border-radius: 1px 0 0 1px; }
|
||||
@ -1620,7 +1621,7 @@ notebook {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// overflow arrows
|
||||
&.top, &.bottom {
|
||||
tabs arrow.up {
|
||||
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
||||
@ -1648,41 +1649,41 @@ notebook {
|
||||
&:active { color: $fg_color; }
|
||||
&:disabled { color: transparentize($insensitive_fg_color,0.3); }
|
||||
}
|
||||
}
|
||||
// tab colors
|
||||
tab {
|
||||
background-color: transparentize($base_color, 1);
|
||||
|
||||
header tab {
|
||||
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;
|
||||
label { color: $insensitive_fg_color; }
|
||||
|
||||
&:hover {
|
||||
@extend %undecorated_button;
|
||||
color: lighten(red, 15%);
|
||||
background-color: transparentize($base_color, 0.5);
|
||||
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;
|
||||
color: $selected_bg_color;
|
||||
|
||||
&:hover {
|
||||
@extend %undecorated_button;
|
||||
color: lighten(red, 15%);
|
||||
}
|
||||
&:active, &:active:hover {
|
||||
@extend %undecorated_button;
|
||||
color: $selected_bg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user