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

Adwaita: drop active style fixes

Browse Source 
taking care of:
* entries
* buttons (misses some linking logic still)
* comboboxes (untested)
* spinbuttons
This commit is contained in:
Lapo Calamandrei 2016-03-11 14:42:49 +01:00
parent ab5ebf6199
commit e8c5db0425
4 changed files with 104 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gtk/theme/Adwaita/_colors.scss
View File

@ -44,6 +44,8 @@ $base_hover_color: transparentize($fg_color, 0.95);
$tooltip_borders_color: transparentize(white, 0.9);
$shadow_color: transparentize(black, 0.9);
$drop_target_color: black; // FIXME: we need something different than black here...
//insensitive state derived colors
$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
$insensitive_bg_color: mix($bg_color, $base_color, 60%);

48
gtk/theme/Adwaita/_common.scss
View File

@ -273,6 +273,7 @@ entry {
background-image: none;
background-color: transparent;
box-shadow: none;
&:backdrop { background-color: transparent; }
}
@ -281,6 +282,10 @@ entry {
.linked:not(.vertical) > &:focus + button,
.linked:not(.vertical) > &:focus + combobox > box > button.combo { border-left-color: entry_focus_border(); }
.linked:not(.vertical) > &:drop(active) + entry,
.linked:not(.vertical) > &:drop(active) + button,
.linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; }
// entry error and warning style
@each $e_type, $e_color in (error, $error_color),
(warning, $warning_color) {
@ -313,6 +318,13 @@ entry {
&:disabled { @include entry(osd-insensitive); }
}
&:drop(active) {
&:focus, & {
border-color: $drop_target_color;
box-shadow: inset 0 0 0 1px $drop_target_color;
}
}
}
// Vertically linked entries
@ -326,6 +338,8 @@ entry {
// add back the focus shadow
> entry:focus:not(:last-child) { box-shadow: entry_focus_shadow(); }
> entry:drop(active):not(:last-child) { box-shadow: inset 0 0 0 1px $drop_target_color; }
// brighter border between linked entries
> entry:not(:disabled) + entry:not(:disabled) {
border-top-color: mix($borders_color, $base_color, 30%);
@ -346,17 +360,26 @@ entry {
box-shadow: entry_focus_shadow();
}
> entry + entry:drop(active):not(:last-child) {
border-top-color: $drop_target_color;
box-shadow: inset 0 0 0 1px $drop_target_color;
}
// just recolor the top border on the last focused entry, since we don't reset the shadow here letting that be
// inherited by the entry styling.
> entry + entry:focus:last-child {
border-top-color: entry_focus_border();
}
> entry + entry:focus:last-child { border-top-color: entry_focus_border(); }
> entry + entry:drop(active):last-child { border-top-color: $drop_target_color; }
// this takes care of coloring the top border of the focused entry subsequent widget.
// :not(:only-child) is a specificity bump hack.
> entry:focus:not(:only-child) + entry,
> entry:focus:not(:only-child) + button,
> entry:focus:not(:only-child) + combobox > box > button.combo { border-top-color: entry_focus_border(); }
> entry:drop(active):not(:only-child) + entry,
> entry:drop(active):not(:only-child) + button,
> entry:drop(active):not(:only-child) + combobox > box > button.combo { border-top-color: $drop_target_color; }
}
@ -464,6 +487,11 @@ button {
padding-right: 8px;
}
}
&:drop(active) {
border-color: $drop_target_color;
box-shadow: inset 0 0 0 1px $drop_target_color;
}
}
// big standalone buttons like in Documents pager
@ -1015,6 +1043,11 @@ spinbutton {
&:disabled { color: $insensitive_fg_color; }
&:backdrop:disabled { color: $backdrop_insensitive_color; }
&:drop(active) {
border-color: transparent;
box-shadow: none;
}
entry {
min-height: 32px;
min-width: 32px;
@ -1045,6 +1078,7 @@ spinbutton {
// OSD vertical
.osd &.vertical button:first-child {
@include button(osd);
&:hover { @include button(osd-hover);}
&:active { @include button(osd-active); }
@ -1084,6 +1118,12 @@ combobox {
&:dir(rtl) { @extend %linked:first-child; }
}
}
&:drop(active) { // FIXME: untested
box-shadow: none;
button.combo { @extend button:drop(active); }
}
}
.linked > combobox > box > button.combo {
@ -3975,7 +4015,7 @@ button.circular { // FIXME: aggregate to buttons
}
*:drop(active):focus,
*:drop(active) { // FIXME figure out a proper color
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
border-color: black;
box-shadow: inset 0 0 0 1px black;
}

29
gtk/theme/Adwaita/gtk-contained-dark.css
View File

@ -235,6 +235,8 @@ entry, spinbutton:not(.vertical) {
background-color: transparent; }
.linked:not(.vertical) > entry:focus + entry, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + entry, .linked:not(.vertical) > entry:focus + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:focus:not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:focus + button, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + button, .linked:not(.vertical) > entry:focus + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + combobox > box > button.combo {
border-left-color: #0f2b48; }
.linked:not(.vertical) > entry:drop(active) + entry, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + entry, .linked:not(.vertical) > entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:drop(active) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, .linked:not(.vertical) > entry:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo {
border-left-color: black; }
entry.error, spinbutton.error:not(.vertical) {
color: #cc0000;
border-color: #1a0000; }
@ -303,11 +305,16 @@ entry, spinbutton:not(.vertical) {
box-shadow: none;
text-shadow: none;
-gtk-icon-shadow: none; }
entry:drop(active):focus, spinbutton:drop(active):focus:not(.vertical), entry:drop(active), spinbutton:drop(active):not(.vertical) {
border-color: black;
box-shadow: inset 0 0 0 1px black; }
.linked.vertical > entry:not(:last-child), .linked.vertical > spinbutton:not(:last-child):not(.vertical) {
box-shadow: none; }
.linked.vertical > entry:focus:not(:last-child), .linked.vertical > spinbutton:focus:not(:last-child):not(.vertical) {
box-shadow: inset 0 0 0 1px #215d9c; }
.linked.vertical > entry:drop(active):not(:last-child), .linked.vertical > spinbutton:drop(active):not(:last-child):not(.vertical) {
box-shadow: inset 0 0 0 1px black; }
.linked.vertical > entry:not(:disabled) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical) {
border-top-color: #252626;
background-image: linear-gradient(to bottom, #292929); }
@ -319,14 +326,25 @@ entry, spinbutton:not(.vertical) {
.linked.vertical > entry + entry:focus:not(:last-child), .linked.vertical > spinbutton:not(.vertical) + entry:focus:not(:last-child), .linked.vertical > entry + spinbutton:focus:not(:last-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:not(:last-child):not(.vertical) {
border-top-color: #0f2b48;
box-shadow: inset 0 0 0 1px #215d9c; }
.linked.vertical > entry + entry:drop(active):not(:last-child), .linked.vertical > spinbutton:not(.vertical) + entry:drop(active):not(:last-child), .linked.vertical > entry + spinbutton:drop(active):not(:last-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):not(:last-child):not(.vertical) {
border-top-color: black;
box-shadow: inset 0 0 0 1px black; }
.linked.vertical > entry + entry:focus:last-child, .linked.vertical > spinbutton:not(.vertical) + entry:focus:last-child, .linked.vertical > entry + spinbutton:focus:last-child:not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:last-child:not(.vertical) {
border-top-color: #0f2b48; }
.linked.vertical > entry + entry:drop(active):last-child, .linked.vertical > spinbutton:not(.vertical) + entry:drop(active):last-child, .linked.vertical > entry + spinbutton:drop(active):last-child:not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):last-child:not(.vertical) {
border-top-color: black; }
.linked.vertical > entry:focus:not(:only-child) + entry, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + entry, .linked.vertical > entry:focus:not(:only-child) + spinbutton:not(.vertical), .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + spinbutton:not(.vertical),
.linked.vertical > entry:focus:not(:only-child) + button,
.linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + button,
.linked.vertical > entry:focus:not(:only-child) + combobox > box > button.combo,
.linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + combobox > box > button.combo {
border-top-color: #0f2b48; }
.linked.vertical > entry:drop(active):not(:only-child) + entry, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + entry, .linked.vertical > entry:drop(active):not(:only-child) + spinbutton:not(.vertical), .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + spinbutton:not(.vertical),
.linked.vertical > entry:drop(active):not(:only-child) + button,
.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button,
.linked.vertical > entry:drop(active):not(:only-child) + combobox > box > button.combo,
.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo {
border-top-color: black; }
/***********
* Buttons *
@ -491,6 +509,12 @@ notebook > header > tabs > arrow, headerbar button.titlebutton,
.titlebar button.text-button.image-button.titlebutton label, button.text-button.image-button label {
padding-left: 8px;
padding-right: 8px; }
notebook > header > tabs > arrow:drop(active), headerbar button.titlebutton:drop(active), headerbar combobox:drop(active) button.titlebutton.combo, combobox:drop(active) headerbar button.titlebutton.combo,
.titlebar button.titlebutton:drop(active),
.titlebar combobox:drop(active) button.titlebutton.combo,
combobox:drop(active) .titlebar button.titlebutton.combo, button:drop(active), combobox:drop(active) button.combo {
border-color: black;
box-shadow: inset 0 0 0 1px black; }
button.osd {
color: #eeeeec;
border-radius: 5px;
@ -1320,6 +1344,9 @@ spinbutton.vertical:disabled {
color: #949796; }
spinbutton.vertical:backdrop:disabled {
color: #5d6767; }
spinbutton.vertical:drop(active) {
border-color: transparent;
box-shadow: none; }
spinbutton.vertical entry, spinbutton.vertical spinbutton:not(.vertical) {
min-height: 32px;
min-width: 32px;
@ -1394,6 +1421,8 @@ combobox arrow {
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
min-height: 16px;
min-width: 16px; }
combobox:drop(active) {
box-shadow: none; }
/************
* Toolbars *

29
gtk/theme/Adwaita/gtk-contained.css
View File

@ -235,6 +235,8 @@ entry, spinbutton:not(.vertical) {
background-color: transparent; }
.linked:not(.vertical) > entry:focus + entry, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + entry, .linked:not(.vertical) > entry:focus + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:focus:not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:focus + button, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + button, .linked:not(.vertical) > entry:focus + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + combobox > box > button.combo {
border-left-color: #4a90d9; }
.linked:not(.vertical) > entry:drop(active) + entry, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + entry, .linked:not(.vertical) > entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:drop(active) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, .linked:not(.vertical) > entry:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo {
border-left-color: black; }
entry.error, spinbutton.error:not(.vertical) {
color: #cc0000;
border-color: #cc0000; }
@ -303,11 +305,16 @@ entry, spinbutton:not(.vertical) {
box-shadow: none;
text-shadow: none;
-gtk-icon-shadow: none; }
entry:drop(active):focus, spinbutton:drop(active):focus:not(.vertical), entry:drop(active), spinbutton:drop(active):not(.vertical) {
border-color: black;
box-shadow: inset 0 0 0 1px black; }
.linked.vertical > entry:not(:last-child), .linked.vertical > spinbutton:not(:last-child):not(.vertical) {
box-shadow: none; }
.linked.vertical > entry:focus:not(:last-child), .linked.vertical > spinbutton:focus:not(:last-child):not(.vertical) {
box-shadow: inset 0 0 0 1px #4a90d9; }
.linked.vertical > entry:drop(active):not(:last-child), .linked.vertical > spinbutton:drop(active):not(:last-child):not(.vertical) {
box-shadow: inset 0 0 0 1px black; }
.linked.vertical > entry:not(:disabled) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical) {
border-top-color: #e2e2e0;
background-image: linear-gradient(to bottom, #ffffff); }
@ -319,14 +326,25 @@ entry, spinbutton:not(.vertical) {
.linked.vertical > entry + entry:focus:not(:last-child), .linked.vertical > spinbutton:not(.vertical) + entry:focus:not(:last-child), .linked.vertical > entry + spinbutton:focus:not(:last-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:not(:last-child):not(.vertical) {
border-top-color: #4a90d9;
box-shadow: inset 0 0 0 1px #4a90d9; }
.linked.vertical > entry + entry:drop(active):not(:last-child), .linked.vertical > spinbutton:not(.vertical) + entry:drop(active):not(:last-child), .linked.vertical > entry + spinbutton:drop(active):not(:last-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):not(:last-child):not(.vertical) {
border-top-color: black;
box-shadow: inset 0 0 0 1px black; }
.linked.vertical > entry + entry:focus:last-child, .linked.vertical > spinbutton:not(.vertical) + entry:focus:last-child, .linked.vertical > entry + spinbutton:focus:last-child:not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:last-child:not(.vertical) {
border-top-color: #4a90d9; }
.linked.vertical > entry + entry:drop(active):last-child, .linked.vertical > spinbutton:not(.vertical) + entry:drop(active):last-child, .linked.vertical > entry + spinbutton:drop(active):last-child:not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):last-child:not(.vertical) {
border-top-color: black; }
.linked.vertical > entry:focus:not(:only-child) + entry, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + entry, .linked.vertical > entry:focus:not(:only-child) + spinbutton:not(.vertical), .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + spinbutton:not(.vertical),
.linked.vertical > entry:focus:not(:only-child) + button,
.linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + button,
.linked.vertical > entry:focus:not(:only-child) + combobox > box > button.combo,
.linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + combobox > box > button.combo {
border-top-color: #4a90d9; }
.linked.vertical > entry:drop(active):not(:only-child) + entry, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + entry, .linked.vertical > entry:drop(active):not(:only-child) + spinbutton:not(.vertical), .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + spinbutton:not(.vertical),
.linked.vertical > entry:drop(active):not(:only-child) + button,
.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button,
.linked.vertical > entry:drop(active):not(:only-child) + combobox > box > button.combo,
.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo {
border-top-color: black; }
/***********
* Buttons *
@ -491,6 +509,12 @@ notebook > header > tabs > arrow, headerbar button.titlebutton,
.titlebar button.text-button.image-button.titlebutton label, button.text-button.image-button label {
padding-left: 8px;
padding-right: 8px; }
notebook > header > tabs > arrow:drop(active), headerbar button.titlebutton:drop(active), headerbar combobox:drop(active) button.titlebutton.combo, combobox:drop(active) headerbar button.titlebutton.combo,
.titlebar button.titlebutton:drop(active),
.titlebar combobox:drop(active) button.titlebutton.combo,
combobox:drop(active) .titlebar button.titlebutton.combo, button:drop(active), combobox:drop(active) button.combo {
border-color: black;
box-shadow: inset 0 0 0 1px black; }
button.osd {
color: #eeeeec;
border-radius: 5px;
@ -1324,6 +1348,9 @@ spinbutton.vertical:disabled {
color: #8b8e8f; }
spinbutton.vertical:backdrop:disabled {
color: #c3c3c0; }
spinbutton.vertical:drop(active) {
border-color: transparent;
box-shadow: none; }
spinbutton.vertical entry, spinbutton.vertical spinbutton:not(.vertical) {
min-height: 32px;
min-width: 32px;
@ -1398,6 +1425,8 @@ combobox arrow {
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
min-height: 16px;
min-width: 16px; }
combobox:drop(active) {
box-shadow: none; }
/************
* Toolbars *