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

Adwaita: Update color swatch styling

Browse Source 
The adjustments here are provisional and need an artistic eye.
This commit is contained in:
Matthias Clasen 2015-12-14 16:10:54 -05:00
parent c376e82702
commit ff9f3c108f
3 changed files with 36 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3122,10 +3122,6 @@ colorswatch {
transparentize(white, 1) 50%); transparentize(white, 1) 50%);
box-shadow: inset 0 1px transparentize(white, 0.6), box-shadow: inset 0 1px transparentize(white, 0.6),
inset 0 -1px if($variant == 'light', transparentize(black, 0.9), transparentize(black, 0.6)); inset 0 -1px if($variant == 'light', transparentize(black, 0.9), transparentize(black, 0.6));
&.dark overlay { // swatches with colors with luminosity lower than 50% get the dark class
background-image: linear-gradient(135deg, transparentize(white, 0.5),
transparentize(white, 1) 50%);
}
} }
&:backdrop, &:backdrop,
&:backdrop:selected &:backdrop:selected
@ -3136,22 +3132,26 @@ colorswatch {
} }
// indicator and keynav outline colors // indicator and keynav outline colors
&.dark overlay { &.dark {
color: white; color: white;
outline-color: transparentize(white, 0.5); outline-color: transparentize(white, 0.5);
border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
&:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); }
&:backdrop { color: transparentize(white, 0.7); } &:backdrop { color: transparentize(white, 0.7); }
} }
&.light overlay { &.light {
color: black; color: black;
outline-color: transparentize(black, 0.5); outline-color: transparentize(black, 0.5);
border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
&:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); }
&:backdrop { color: transparentize(black, 0.7); } &:backdrop { color: transparentize(black, 0.7); }
} }
// border color // border color
& overlay, & overlay,
& overlay:selected { & overlay:selected {
border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color); background: none;
&:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); } border: none;
} }
// make the add color button looks like, well, a button // make the add color button looks like, well, a button

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

@ -4327,26 +4327,29 @@ colorswatch {
colorswatch.activatable:hover, colorswatch.activatable:hover:selected { colorswatch.activatable:hover, colorswatch.activatable:hover:selected {
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%); 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); } box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.4); }
colorswatch.activatable:hover.dark overlay, colorswatch.activatable:hover:selected.dark overlay {
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%); }
colorswatch:backdrop, colorswatch:backdrop:selected colorswatch:backdrop, colorswatch:backdrop:selected
colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected { colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected {
background-image: none; background-image: none;
box-shadow: none; } box-shadow: none; }
colorswatch.dark overlay { colorswatch.dark {
color: white; color: white;
outline-color: rgba(255, 255, 255, 0.5); } outline-color: rgba(255, 255, 255, 0.5);
colorswatch.dark overlay:backdrop { border: 1px solid #1c1f1f; }
colorswatch.dark:hover {
border-color: black; }
colorswatch.dark:backdrop {
color: rgba(255, 255, 255, 0.3); } color: rgba(255, 255, 255, 0.3); }
colorswatch.light overlay { colorswatch.light {
color: black; color: black;
outline-color: rgba(0, 0, 0, 0.5); } outline-color: rgba(0, 0, 0, 0.5);
colorswatch.light overlay:backdrop { border: 1px solid #1c1f1f; }
colorswatch.light:hover {
border-color: black; }
colorswatch.light:backdrop {
color: rgba(0, 0, 0, 0.3); } color: rgba(0, 0, 0, 0.3); }
colorswatch overlay, colorswatch overlay:selected { colorswatch overlay, colorswatch overlay:selected {
border: 1px solid #1c1f1f; } background: none;
colorswatch overlay:hover, colorswatch overlay:selected:hover { border: none; }
border-color: black; }
colorswatch#add-color-button { colorswatch#add-color-button {
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;

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

@ -4499,26 +4499,29 @@ colorswatch {
colorswatch.activatable:hover, colorswatch.activatable:hover:selected { colorswatch.activatable:hover, colorswatch.activatable:hover:selected {
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%); 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); } box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.1); }
colorswatch.activatable:hover.dark overlay, colorswatch.activatable:hover:selected.dark overlay {
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%); }
colorswatch:backdrop, colorswatch:backdrop:selected colorswatch:backdrop, colorswatch:backdrop:selected
colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected { colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected {
background-image: none; background-image: none;
box-shadow: none; } box-shadow: none; }
colorswatch.dark overlay { colorswatch.dark {
color: white; color: white;
outline-color: rgba(255, 255, 255, 0.5); } outline-color: rgba(255, 255, 255, 0.5);
colorswatch.dark overlay:backdrop { border: 1px solid rgba(0, 0, 0, 0.3); }
colorswatch.dark:hover {
border-color: rgba(0, 0, 0, 0.5); }
colorswatch.dark:backdrop {
color: rgba(255, 255, 255, 0.3); } color: rgba(255, 255, 255, 0.3); }
colorswatch.light overlay { colorswatch.light {
color: black; color: black;
outline-color: rgba(0, 0, 0, 0.5); } outline-color: rgba(0, 0, 0, 0.5);
colorswatch.light overlay:backdrop { border: 1px solid rgba(0, 0, 0, 0.3); }
colorswatch.light:hover {
border-color: rgba(0, 0, 0, 0.5); }
colorswatch.light:backdrop {
color: rgba(0, 0, 0, 0.3); } color: rgba(0, 0, 0, 0.3); }
colorswatch overlay, colorswatch overlay:selected { colorswatch overlay, colorswatch overlay:selected {
border: 1px solid rgba(0, 0, 0, 0.3); } background: none;
colorswatch overlay:hover, colorswatch overlay:selected:hover { border: none; }
border-color: rgba(0, 0, 0, 0.5); }
colorswatch#add-color-button { colorswatch#add-color-button {
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;