forked from AuroraMiddleware/gtk
Adwaita: colorchooser style rewrite
To reflect latest Benjamin changes. As a bonus the colorchooser looks better to me, same for the scss code.
This commit is contained in:
Lapo Calamandrei
parent
140a64eea4
commit
e34bb3d483
@ -2774,46 +2774,9 @@ GtkInfoBar {
|
||||
*****************/
|
||||
|
||||
GtkColorSwatch {
|
||||
border: 1px solid;
|
||||
@if $variant == light {
|
||||
border-color: transparentize(black,0.7);
|
||||
box-shadow: inset 0 1px 1px transparentize(black, 0.8);
|
||||
}
|
||||
@else {
|
||||
border-color: $borders_color;
|
||||
box-shadow: inset 0 1px 1px transparentize(black, 0.6);
|
||||
}
|
||||
|
||||
&.color-light {
|
||||
outline-color: transparentize(black,0.7);
|
||||
&:hover {
|
||||
background-image: linear-gradient(to bottom,
|
||||
transparentize(white, 1) 40%,
|
||||
transparentize(white, 0.6));
|
||||
&:backdrop { background-image: none; }
|
||||
}
|
||||
}
|
||||
&.color-dark {
|
||||
outline-color: transparentize(white,0.5);
|
||||
&:hover {
|
||||
background-image: linear-gradient(to bottom,
|
||||
transparentize(white, 1) 40%,
|
||||
transparentize(white, 0.8));
|
||||
&:backdrop { background-image: none; }
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: if($variant=='light', transparentize(black, 0.5),
|
||||
$backdrop_borders_color);
|
||||
}
|
||||
|
||||
&:backdrop {
|
||||
border-color: if($variant=='light', transparentize(black,0.8),
|
||||
$backdrop_borders_color);
|
||||
box-shadow: none;
|
||||
}
|
||||
box-shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
|
||||
|
||||
// border rounding
|
||||
&.top {
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
@ -2833,37 +2796,52 @@ GtkColorSwatch {
|
||||
&:only-child {
|
||||
border-radius: 5px;
|
||||
}
|
||||
&.overlay, &.overlay:hover {
|
||||
/* turn off everything from regular color swatch */
|
||||
border-width: 0px;
|
||||
border-radius: 50%;
|
||||
box-shadow: none;
|
||||
background-image: none;
|
||||
&:selected {
|
||||
border-width: 2px;
|
||||
&.color-light, &.color-light:hover {
|
||||
color: transparentize(black,0.7);
|
||||
border-color: transparentize(black,0.7);
|
||||
}
|
||||
&.color-dark, &.color-dark:hover {
|
||||
color: transparentize(white,0.5);
|
||||
border-color: transparentize(white,0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
GtkColorChooserWidget #add-color-button {
|
||||
border-color: mix($borders_color,$bg_color,50%);
|
||||
background-color: mix($borders_color,$bg_color,50%);
|
||||
color: $bg_color;
|
||||
box-shadow: none;
|
||||
|
||||
// hover effect
|
||||
&:hover {
|
||||
border-color: $borders_color;
|
||||
background-color: $borders_color;
|
||||
background-image: linear-gradient(135deg, transparentize(white, 0.3),
|
||||
transparentize(white, 1) 50%);
|
||||
box-shadow: inset 0 1px transparentize(white, 0.6),
|
||||
inset 0 -1px if($variant == 'light', transparentize(black, 0.9), transparentize(black, 0.6));
|
||||
}
|
||||
&:backdrop {
|
||||
border-color: mix($backdrop_borders_color,$backdrop_bg_color,50%);
|
||||
background-color: mix($backdrop_borders_color,$backdrop_bg_color,50%);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// no hover effect for the colorswatch in the color editor
|
||||
GtkColorEditor & {
|
||||
border-radius: 3px; // same radius as the entry
|
||||
&:hover {
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
|
||||
}
|
||||
&:backdrop { box-shadow: none; }
|
||||
}
|
||||
|
||||
// indicator and keynav outline colors, color-dark is a color with luminosity lower then 50%
|
||||
&.color-dark {
|
||||
color: white;
|
||||
outline-color: transparentize(black, 0.7);
|
||||
&:backdrop { color: transparentize(white, 0.7); }
|
||||
}
|
||||
&.color-light {
|
||||
color: black;
|
||||
outline-color: transparentize(white, 0.5);
|
||||
&:backdrop { color: transparentize(black, 0.7); }
|
||||
}
|
||||
|
||||
// border color
|
||||
&.overlay {
|
||||
border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
|
||||
&:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); }
|
||||
}
|
||||
|
||||
// make the add color button looks like, well, a button
|
||||
&#add-color-button {
|
||||
@include button(normal);
|
||||
&:hover { @include button(hover); }
|
||||
&:backdrop { @include button(backdrop); }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -4156,26 +4156,7 @@ GtkInfoBar {
|
||||
* Color Chooser *
|
||||
*****************/
|
||||
GtkColorSwatch {
|
||||
border: 1px solid;
|
||||
border-color: #1c1f1f;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4); }
|
||||
GtkColorSwatch.color-light {
|
||||
outline-color: rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.color-light:hover {
|
||||
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.4)); }
|
||||
GtkColorSwatch.color-light:hover:backdrop {
|
||||
background-image: none; }
|
||||
GtkColorSwatch.color-dark {
|
||||
outline-color: rgba(255, 255, 255, 0.5); }
|
||||
GtkColorSwatch.color-dark:hover {
|
||||
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2)); }
|
||||
GtkColorSwatch.color-dark:hover:backdrop {
|
||||
background-image: none; }
|
||||
GtkColorSwatch:hover {
|
||||
border-color: #1e2222; }
|
||||
GtkColorSwatch:backdrop {
|
||||
border-color: #1e2222;
|
||||
box-shadow: none; }
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
|
||||
GtkColorSwatch.top {
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px; }
|
||||
@ -4190,32 +4171,56 @@ GtkColorSwatch {
|
||||
border-bottom-right-radius: 5px; }
|
||||
GtkColorSwatch:only-child {
|
||||
border-radius: 5px; }
|
||||
GtkColorSwatch.overlay, GtkColorSwatch.overlay:hover {
|
||||
/* turn off everything from regular color swatch */
|
||||
border-width: 0px;
|
||||
border-radius: 50%;
|
||||
box-shadow: none;
|
||||
background-image: none; }
|
||||
GtkColorSwatch.overlay:selected, GtkColorSwatch.overlay:hover:selected {
|
||||
border-width: 2px; }
|
||||
GtkColorSwatch.overlay:selected.color-light, GtkColorSwatch.overlay:selected.color-light:hover, GtkColorSwatch.overlay:hover:selected.color-light, GtkColorSwatch.overlay:hover:selected.color-light:hover {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
border-color: rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.overlay:selected.color-dark, GtkColorSwatch.overlay:selected.color-dark:hover, GtkColorSwatch.overlay:hover:selected.color-dark, GtkColorSwatch.overlay:hover:selected.color-dark:hover {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
border-color: rgba(255, 255, 255, 0.5); }
|
||||
|
||||
GtkColorChooserWidget #add-color-button {
|
||||
border-color: #2a2f2f;
|
||||
background-color: #2a2f2f;
|
||||
color: #393f3f;
|
||||
box-shadow: none; }
|
||||
GtkColorChooserWidget #add-color-button:hover {
|
||||
GtkColorSwatch:hover {
|
||||
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.4); }
|
||||
GtkColorSwatch:backdrop {
|
||||
background-image: none;
|
||||
box-shadow: none; }
|
||||
GtkColorEditor GtkColorSwatch {
|
||||
border-radius: 3px; }
|
||||
GtkColorEditor GtkColorSwatch:hover {
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
|
||||
GtkColorEditor GtkColorSwatch:backdrop {
|
||||
box-shadow: none; }
|
||||
GtkColorSwatch.color-dark {
|
||||
color: white;
|
||||
outline-color: rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.color-dark:backdrop {
|
||||
color: rgba(255, 255, 255, 0.3); }
|
||||
GtkColorSwatch.color-light {
|
||||
color: black;
|
||||
outline-color: rgba(255, 255, 255, 0.5); }
|
||||
GtkColorSwatch.color-light:backdrop {
|
||||
color: rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.overlay {
|
||||
border: 1px solid #1c1f1f; }
|
||||
GtkColorSwatch.overlay:hover {
|
||||
border-color: black; }
|
||||
GtkColorSwatch#add-color-button {
|
||||
color: #eeeeec;
|
||||
outline-color: rgba(238, 238, 236, 0.3);
|
||||
border-color: #1c1f1f;
|
||||
background-color: #1c1f1f; }
|
||||
GtkColorChooserWidget #add-color-button:backdrop {
|
||||
border-color: #2b3030;
|
||||
background-color: #2b3030; }
|
||||
background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232);
|
||||
text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
|
||||
icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
|
||||
GtkColorSwatch#add-color-button:hover {
|
||||
color: #eeeeec;
|
||||
outline-color: rgba(238, 238, 236, 0.3);
|
||||
border-color: #1c1f1f;
|
||||
background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f);
|
||||
text-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
|
||||
icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
|
||||
GtkColorSwatch#add-color-button:backdrop {
|
||||
color: #c9cbc9;
|
||||
border-color: #1e2222;
|
||||
background-image: linear-gradient(to bottom, #393f3f);
|
||||
text-shadow: none;
|
||||
icon-shadow: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); }
|
||||
|
||||
/********
|
||||
* Misc *
|
||||
|
||||
@ -4317,26 +4317,7 @@ GtkInfoBar {
|
||||
* Color Chooser *
|
||||
*****************/
|
||||
GtkColorSwatch {
|
||||
border: 1px solid;
|
||||
border-color: rgba(0, 0, 0, 0.3);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); }
|
||||
GtkColorSwatch.color-light {
|
||||
outline-color: rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.color-light:hover {
|
||||
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.4)); }
|
||||
GtkColorSwatch.color-light:hover:backdrop {
|
||||
background-image: none; }
|
||||
GtkColorSwatch.color-dark {
|
||||
outline-color: rgba(255, 255, 255, 0.5); }
|
||||
GtkColorSwatch.color-dark:hover {
|
||||
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2)); }
|
||||
GtkColorSwatch.color-dark:hover:backdrop {
|
||||
background-image: none; }
|
||||
GtkColorSwatch:hover {
|
||||
border-color: rgba(0, 0, 0, 0.5); }
|
||||
GtkColorSwatch:backdrop {
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
box-shadow: none; }
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px white; }
|
||||
GtkColorSwatch.top {
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px; }
|
||||
@ -4351,32 +4332,56 @@ GtkColorSwatch {
|
||||
border-bottom-right-radius: 5px; }
|
||||
GtkColorSwatch:only-child {
|
||||
border-radius: 5px; }
|
||||
GtkColorSwatch.overlay, GtkColorSwatch.overlay:hover {
|
||||
/* turn off everything from regular color swatch */
|
||||
border-width: 0px;
|
||||
border-radius: 50%;
|
||||
box-shadow: none;
|
||||
background-image: none; }
|
||||
GtkColorSwatch.overlay:selected, GtkColorSwatch.overlay:hover:selected {
|
||||
border-width: 2px; }
|
||||
GtkColorSwatch.overlay:selected.color-light, GtkColorSwatch.overlay:selected.color-light:hover, GtkColorSwatch.overlay:hover:selected.color-light, GtkColorSwatch.overlay:hover:selected.color-light:hover {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
border-color: rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.overlay:selected.color-dark, GtkColorSwatch.overlay:selected.color-dark:hover, GtkColorSwatch.overlay:hover:selected.color-dark, GtkColorSwatch.overlay:hover:selected.color-dark:hover {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
border-color: rgba(255, 255, 255, 0.5); }
|
||||
|
||||
GtkColorChooserWidget #add-color-button {
|
||||
border-color: #c7c7c7;
|
||||
background-color: #c7c7c7;
|
||||
color: #ededed;
|
||||
box-shadow: none; }
|
||||
GtkColorChooserWidget #add-color-button:hover {
|
||||
GtkColorSwatch:hover {
|
||||
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.1); }
|
||||
GtkColorSwatch:backdrop {
|
||||
background-image: none;
|
||||
box-shadow: none; }
|
||||
GtkColorEditor GtkColorSwatch {
|
||||
border-radius: 3px; }
|
||||
GtkColorEditor GtkColorSwatch:hover {
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px white; }
|
||||
GtkColorEditor GtkColorSwatch:backdrop {
|
||||
box-shadow: none; }
|
||||
GtkColorSwatch.color-dark {
|
||||
color: white;
|
||||
outline-color: rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.color-dark:backdrop {
|
||||
color: rgba(255, 255, 255, 0.3); }
|
||||
GtkColorSwatch.color-light {
|
||||
color: black;
|
||||
outline-color: rgba(255, 255, 255, 0.5); }
|
||||
GtkColorSwatch.color-light:backdrop {
|
||||
color: rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.overlay {
|
||||
border: 1px solid rgba(0, 0, 0, 0.3); }
|
||||
GtkColorSwatch.overlay:hover {
|
||||
border-color: rgba(0, 0, 0, 0.5); }
|
||||
GtkColorSwatch#add-color-button {
|
||||
color: #2e3436;
|
||||
outline-color: rgba(46, 52, 54, 0.3);
|
||||
border-color: #a1a1a1;
|
||||
background-color: #a1a1a1; }
|
||||
GtkColorChooserWidget #add-color-button:backdrop {
|
||||
border-color: #cacaca;
|
||||
background-color: #cacaca; }
|
||||
background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0);
|
||||
text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
|
||||
icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
|
||||
box-shadow: inset 0 1px white, 0 1px white; }
|
||||
GtkColorSwatch#add-color-button:hover {
|
||||
color: #2e3436;
|
||||
outline-color: rgba(46, 52, 54, 0.3);
|
||||
border-color: #a1a1a1;
|
||||
background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed);
|
||||
text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
|
||||
icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
|
||||
box-shadow: inset 0 1px white, 0 1px white; }
|
||||
GtkColorSwatch#add-color-button:backdrop {
|
||||
color: #54595a;
|
||||
border-color: #a8a8a8;
|
||||
background-image: linear-gradient(to bottom, #ededed);
|
||||
text-shadow: none;
|
||||
icon-shadow: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
|
||||
|
||||
/********
|
||||
* Misc *
|
||||
|
||||
Loading…
Reference in New Issue
Block a user