Adwaita: notebook legibility fixes

- make inactive tabs more legible

Fixes https://gitlab.gnome.org/GNOME/gtk/-/issues/2652
This commit is contained in:
Jakub Steiner 2020-06-23 22:24:57 +02:00
parent 04ed7fe7db
commit de348ba984
3 changed files with 32 additions and 31 deletions

View File

@ -2376,11 +2376,11 @@ notebook {
> tabs { > tabs {
margin-bottom: -2px; margin-bottom: -2px;
> tab { > tab {
&:hover { box-shadow: inset 0 -3px $borders_color; } &:hover { box-shadow: inset 0 -4px $borders_color; }
&:backdrop { box-shadow: none; } &:backdrop { box-shadow: none; }
&:checked { box-shadow: inset 0 -3px $selected_bg_color; } &:checked { box-shadow: inset 0 -4px $selected_bg_color; }
} }
} }
} }
@ -2390,11 +2390,11 @@ notebook {
> tabs { > tabs {
margin-top: -2px; margin-top: -2px;
> tab { > tab {
&:hover { box-shadow: inset 0 3px $borders_color; } &:hover { box-shadow: inset 0 4px $borders_color; }
&:backdrop { box-shadow: none; } &:backdrop { box-shadow: none; }
&:checked { box-shadow: inset 0 3px $selected_bg_color; } &:checked { box-shadow: inset 0 4px $selected_bg_color; }
} }
} }
} }
@ -2404,11 +2404,11 @@ notebook {
> tabs { > tabs {
margin-right: -2px; margin-right: -2px;
> tab { > tab {
&:hover { box-shadow: inset -3px 0 $borders_color; } &:hover { box-shadow: inset -4px 0 $borders_color; }
&:backdrop { box-shadow: none; } &:backdrop { box-shadow: none; }
&:checked { box-shadow: inset -3px 0 $selected_bg_color; } &:checked { box-shadow: inset -4px 0 $selected_bg_color; }
} }
} }
} }
@ -2418,11 +2418,11 @@ notebook {
> tabs { > tabs {
margin-left: -2px; margin-left: -2px;
> tab { > tab {
&:hover { box-shadow: inset 3px 0 $borders_color; } &:hover { box-shadow: inset 4px 0 $borders_color; }
&:backdrop { box-shadow: none; } &:backdrop { box-shadow: none; }
&:checked { box-shadow: inset 3px 0 $selected_bg_color; } &:checked { box-shadow: inset 4px 0 $selected_bg_color; }
} }
} }
} }
@ -2500,14 +2500,15 @@ notebook {
outline-offset: -5px; outline-offset: -5px;
color: $insensitive_fg_color; color: $fg_color;
font-weight: bold; font-weight: normal;
border-width: 1px; // for reorderable tabs border-width: 1px; // for reorderable tabs
border-color: transparent; // border-color: transparent; //
&:hover { &:hover {
color: mix($insensitive_fg_color, $fg_color, 50%); color: $fg_color;
background-color: darken($bg_color,4%);
&.reorderable-page { &.reorderable-page {
border-color: transparentize($borders_color, 0.7); border-color: transparentize($borders_color, 0.7);

View File

@ -837,41 +837,41 @@ notebook > header.top { border-bottom-style: solid; }
notebook > header.top > tabs { margin-bottom: -2px; } notebook > header.top > tabs { margin-bottom: -2px; }
notebook > header.top > tabs > tab:hover { box-shadow: inset 0 -3px #1b1b1b; } notebook > header.top > tabs > tab:hover { box-shadow: inset 0 -4px #1b1b1b; }
notebook > header.top > tabs > tab:backdrop { box-shadow: none; } notebook > header.top > tabs > tab:backdrop { box-shadow: none; }
notebook > header.top > tabs > tab:checked { box-shadow: inset 0 -3px #15539e; } notebook > header.top > tabs > tab:checked { box-shadow: inset 0 -4px #15539e; }
notebook > header.bottom { border-top-style: solid; } notebook > header.bottom { border-top-style: solid; }
notebook > header.bottom > tabs { margin-top: -2px; } notebook > header.bottom > tabs { margin-top: -2px; }
notebook > header.bottom > tabs > tab:hover { box-shadow: inset 0 3px #1b1b1b; } notebook > header.bottom > tabs > tab:hover { box-shadow: inset 0 4px #1b1b1b; }
notebook > header.bottom > tabs > tab:backdrop { box-shadow: none; } notebook > header.bottom > tabs > tab:backdrop { box-shadow: none; }
notebook > header.bottom > tabs > tab:checked { box-shadow: inset 0 3px #15539e; } notebook > header.bottom > tabs > tab:checked { box-shadow: inset 0 4px #15539e; }
notebook > header.left { border-right-style: solid; } notebook > header.left { border-right-style: solid; }
notebook > header.left > tabs { margin-right: -2px; } notebook > header.left > tabs { margin-right: -2px; }
notebook > header.left > tabs > tab:hover { box-shadow: inset -3px 0 #1b1b1b; } notebook > header.left > tabs > tab:hover { box-shadow: inset -4px 0 #1b1b1b; }
notebook > header.left > tabs > tab:backdrop { box-shadow: none; } notebook > header.left > tabs > tab:backdrop { box-shadow: none; }
notebook > header.left > tabs > tab:checked { box-shadow: inset -3px 0 #15539e; } notebook > header.left > tabs > tab:checked { box-shadow: inset -4px 0 #15539e; }
notebook > header.right { border-left-style: solid; } notebook > header.right { border-left-style: solid; }
notebook > header.right > tabs { margin-left: -2px; } notebook > header.right > tabs { margin-left: -2px; }
notebook > header.right > tabs > tab:hover { box-shadow: inset 3px 0 #1b1b1b; } notebook > header.right > tabs > tab:hover { box-shadow: inset 4px 0 #1b1b1b; }
notebook > header.right > tabs > tab:backdrop { box-shadow: none; } notebook > header.right > tabs > tab:backdrop { box-shadow: none; }
notebook > header.right > tabs > tab:checked { box-shadow: inset 3px 0 #15539e; } notebook > header.right > tabs > tab:checked { box-shadow: inset 4px 0 #15539e; }
notebook > header.top > tabs > arrow { border-top-style: none; } notebook > header.top > tabs > arrow { border-top-style: none; }
@ -899,9 +899,9 @@ notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) { background-
notebook > header > tabs > arrow:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } notebook > header > tabs > arrow:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
notebook > header tab { min-height: 30px; min-width: 30px; padding: 3px 12px; outline-offset: -5px; color: #919190; font-weight: bold; border-width: 1px; border-color: transparent; } notebook > header tab { min-height: 30px; min-width: 30px; padding: 3px 12px; outline-offset: -5px; color: #eeeeec; font-weight: normal; border-width: 1px; border-color: transparent; }
notebook > header tab:hover { color: #c0c0be; } notebook > header tab:hover { color: #eeeeec; background-color: #2b2b2b; }
notebook > header tab:hover.reorderable-page { border-color: rgba(27, 27, 27, 0.3); background-color: rgba(53, 53, 53, 0.2); } notebook > header tab:hover.reorderable-page { border-color: rgba(27, 27, 27, 0.3); background-color: rgba(53, 53, 53, 0.2); }

View File

@ -845,41 +845,41 @@ notebook > header.top { border-bottom-style: solid; }
notebook > header.top > tabs { margin-bottom: -2px; } notebook > header.top > tabs { margin-bottom: -2px; }
notebook > header.top > tabs > tab:hover { box-shadow: inset 0 -3px #cdc7c2; } notebook > header.top > tabs > tab:hover { box-shadow: inset 0 -4px #cdc7c2; }
notebook > header.top > tabs > tab:backdrop { box-shadow: none; } notebook > header.top > tabs > tab:backdrop { box-shadow: none; }
notebook > header.top > tabs > tab:checked { box-shadow: inset 0 -3px #3584e4; } notebook > header.top > tabs > tab:checked { box-shadow: inset 0 -4px #3584e4; }
notebook > header.bottom { border-top-style: solid; } notebook > header.bottom { border-top-style: solid; }
notebook > header.bottom > tabs { margin-top: -2px; } notebook > header.bottom > tabs { margin-top: -2px; }
notebook > header.bottom > tabs > tab:hover { box-shadow: inset 0 3px #cdc7c2; } notebook > header.bottom > tabs > tab:hover { box-shadow: inset 0 4px #cdc7c2; }
notebook > header.bottom > tabs > tab:backdrop { box-shadow: none; } notebook > header.bottom > tabs > tab:backdrop { box-shadow: none; }
notebook > header.bottom > tabs > tab:checked { box-shadow: inset 0 3px #3584e4; } notebook > header.bottom > tabs > tab:checked { box-shadow: inset 0 4px #3584e4; }
notebook > header.left { border-right-style: solid; } notebook > header.left { border-right-style: solid; }
notebook > header.left > tabs { margin-right: -2px; } notebook > header.left > tabs { margin-right: -2px; }
notebook > header.left > tabs > tab:hover { box-shadow: inset -3px 0 #cdc7c2; } notebook > header.left > tabs > tab:hover { box-shadow: inset -4px 0 #cdc7c2; }
notebook > header.left > tabs > tab:backdrop { box-shadow: none; } notebook > header.left > tabs > tab:backdrop { box-shadow: none; }
notebook > header.left > tabs > tab:checked { box-shadow: inset -3px 0 #3584e4; } notebook > header.left > tabs > tab:checked { box-shadow: inset -4px 0 #3584e4; }
notebook > header.right { border-left-style: solid; } notebook > header.right { border-left-style: solid; }
notebook > header.right > tabs { margin-left: -2px; } notebook > header.right > tabs { margin-left: -2px; }
notebook > header.right > tabs > tab:hover { box-shadow: inset 3px 0 #cdc7c2; } notebook > header.right > tabs > tab:hover { box-shadow: inset 4px 0 #cdc7c2; }
notebook > header.right > tabs > tab:backdrop { box-shadow: none; } notebook > header.right > tabs > tab:backdrop { box-shadow: none; }
notebook > header.right > tabs > tab:checked { box-shadow: inset 3px 0 #3584e4; } notebook > header.right > tabs > tab:checked { box-shadow: inset 4px 0 #3584e4; }
notebook > header.top > tabs > arrow { border-top-style: none; } notebook > header.top > tabs > arrow { border-top-style: none; }
@ -907,9 +907,9 @@ notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) { background-
notebook > header > tabs > arrow:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } notebook > header > tabs > arrow:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
notebook > header tab { min-height: 30px; min-width: 30px; padding: 3px 12px; outline-offset: -5px; color: #929595; font-weight: bold; border-width: 1px; border-color: transparent; } notebook > header tab { min-height: 30px; min-width: 30px; padding: 3px 12px; outline-offset: -5px; color: #2e3436; font-weight: normal; border-width: 1px; border-color: transparent; }
notebook > header tab:hover { color: #606566; } notebook > header tab:hover { color: #2e3436; background-color: #edebe9; }
notebook > header tab:hover.reorderable-page { border-color: rgba(205, 199, 194, 0.3); background-color: rgba(246, 245, 244, 0.2); } notebook > header tab:hover.reorderable-page { border-color: rgba(205, 199, 194, 0.3); background-color: rgba(246, 245, 244, 0.2); }