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%);
box-shadow: inset 0 1px transparentize(white, 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:selected
@ -3136,22 +3132,26 @@ colorswatch {
}
// indicator and keynav outline colors
&.dark overlay {
&.dark {
color: white;
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); }
}
&.light overlay {
&.light {
color: black;
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); }
}
// border color
& overlay,
& overlay:selected {
border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
&:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); }
background: none;
border: none;
}
// 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 {
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); }
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.dark:backdrop, colorswatch.dark:backdrop:selected {
background-image: none;
box-shadow: none; }
colorswatch.dark overlay {
colorswatch.dark {
color: white;
outline-color: rgba(255, 255, 255, 0.5); }
colorswatch.dark overlay:backdrop {
outline-color: rgba(255, 255, 255, 0.5);
border: 1px solid #1c1f1f; }
colorswatch.dark:hover {
border-color: black; }
colorswatch.dark:backdrop {
color: rgba(255, 255, 255, 0.3); }
colorswatch.light overlay {
colorswatch.light {
color: black;
outline-color: rgba(0, 0, 0, 0.5); }
colorswatch.light overlay:backdrop {
outline-color: rgba(0, 0, 0, 0.5);
border: 1px solid #1c1f1f; }
colorswatch.light:hover {
border-color: black; }
colorswatch.light:backdrop {
color: rgba(0, 0, 0, 0.3); }
colorswatch overlay, colorswatch overlay:selected {
border: 1px solid #1c1f1f; }
colorswatch overlay:hover, colorswatch overlay:selected:hover {
border-color: black; }
background: none;
border: none; }
colorswatch#add-color-button {
border-style: solid;
border-width: 1px;

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

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