GTK3: Update text opacity based on material design guidelines
Drop scale-alpha() function.
Reduce GTK+ alpha() expression dependency.
by roundabout, Wednesday, 31 May 2017, 04:22:13 (1496204533), pushed by roundabout, Sunday, 11 May 2025, 13:22:10 (1746969730)
Author identity: nana-4 <hnmaigo@gmail.com>
63398c2e1734d57d99be722e0c753903fedcd03b
src/gtk-3.0/3.18/sass/_apps.scss
@@ -42,7 +42,7 @@ EelEditableLabel.entry { transition: none; }
}
.nautilus-desktop.nautilus-canvas-item {
// background-color: scale-alpha(#000000, $lower_opacity);
// background-color: rgba(#000000, $lower_opacity);
color: $inverse_fg_color;
text-shadow: $shadow_1;
}
src/gtk-3.0/3.18/sass/_common.scss
@@ -109,7 +109,7 @@
.rubberband {
border: 1px solid $alt_primary_color;
background-color: scale-alpha($alt_primary_color, $lower_opacity);
background-color: rgba($alt_primary_color, $lower_opacity);
}
.label {
@@ -877,7 +877,7 @@ GtkTreeView.view {
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
&:selected {
color: scale-alpha($inverse_fg_color, $secondary_opacity);
color: $secondary_inverse_fg_color;
&:hover, &:active { color: $inverse_fg_color; }
}
}
@@ -893,7 +893,7 @@ GtkTreeView.view {
&.trough { // progress bar trough in treeviews
@extend .entry.progressbar;
border-width: 4px;
border-color: scale-alpha($primary_color, $lower_opacity);
border-color: rgba($primary_color, $lower_opacity);
&:selected {
border-color: $fill_color;
}
@@ -1268,7 +1268,7 @@ $_slider_fine_tune_margin: 6px;
.slider {
margin: $_slider_margin - 1px;
border: 1px solid scale-alpha($base_color, $lower_opacity);
border: 1px solid rgba($base_color, $lower_opacity);
// background-clip: padding-box;
}
@@ -1282,7 +1282,7 @@ $_slider_fine_tune_margin: 6px;
&.dragging,
&.hovering {
.trough {
background-color: scale-alpha($base_color, $higher_opacity);
background-color: rgba($base_color, $higher_opacity);
}
}
}
@@ -1383,9 +1383,9 @@ GtkSwitch {
color: gtkalpha(currentColor, $disabled_opacity);
}
&:active {
background-color: scale-alpha($accent_color, 0.5);
background-color: rgba($accent_color, 0.5);
&:insensitive {
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
background-color: rgba($accent_color, 0.3);
}
}
}
@@ -1611,7 +1611,7 @@ GtkProgressBar {
}
&.trough { // background
border-radius: 0;
background-color: scale-alpha($primary_color, $lower_opacity);
background-color: rgba($primary_color, $lower_opacity);
&.osd {
border-style: none;
box-shadow: none;
@@ -2053,7 +2053,7 @@ GtkInfoBar {
// background-color needs to be set this way otherwise it gets drawn twice
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
box-shadow: inset 0 1px $highlight_color;
background-color: scale-alpha($base_color, $higher_opacity);
background-color: rgba($base_color, $higher_opacity);
}
// @extend %osd;
src/gtk-3.0/3.18/sass/_drawing.scss
@@ -172,7 +172,7 @@
@if $t == checked-insensitive {
background-color: $fill_color;
color: scale-alpha($primary_color, $disabled_opacity);
color: rgba($primary_color, $disabled_opacity);
> .label { color: inherit; }
}
@@ -250,7 +250,7 @@
background-image: -gtk-gradient(radial,
$_position, 0,
$_position, 0.75,
to(scale-alpha($alt_primary_color, $lower_opacity)),
to(rgba($alt_primary_color, $lower_opacity)),
to(transparent));
background-repeat: no-repeat;
@@ -272,8 +272,8 @@
// top, bottom, right, left
//
$_undershoot_color_dark: scale-alpha($fg_color, $lower_opacity);
$_undershoot_color_light: scale-alpha($base_color, $lower_opacity);
$_undershoot_color_dark: $track_color;
$_undershoot_color_light: rgba($base_color, $lower_opacity);
$_gradient_dir: left;
$_dash_bg_size: 12px 1px;
src/gtk-3.0/3.20/sass/apps/_gnome.scss
@@ -22,7 +22,7 @@
}
.nautilus-desktop.nautilus-canvas-item:not(:selected) {
// background-color: scale-alpha($black, $lower_opacity);
// background-color: rgba($black, $lower_opacity);
color: $inverse_fg_color;
text-shadow: $shadow_1;
}
@@ -83,10 +83,7 @@
&.used { background-color: $primary_color; }
&.free {
background-color: $fill_color;
color: $disabled_fg_color;
}
&.free { background-color: $divider_color; }
}
// View
@@ -165,7 +162,7 @@
.gedit-search-entry-occurrences-tag {
all: unset;
color: gtkalpha(currentColor, $tertiary_opacity);
color: $tertiary_fg_color;
}
}
@@ -342,7 +339,7 @@ entry.search-missing {
// tweak icons for treeviews
workbench treeview.image {
color: gtkalpha(currentColor, $tertiary_opacity);
color: $tertiary_fg_color;
&:selected { color: $tertiary_inverse_fg_color; }
}
@@ -393,7 +390,7 @@ docktab {
font-weight: 500;
&:hover {
box-shadow: inset 0 -2px $fill_color;
box-shadow: inset 0 -2px $track_color;
color: $fg_color;
}
@@ -419,12 +416,12 @@ dockoverlayedge {
}
&.left-edge docktab {
&:hover { box-shadow: inset -2px 0 $fill_color; }
&:hover { box-shadow: inset -2px 0 $track_color; }
&:checked { box-shadow: inset -2px 0 $primary_color; }
}
&.right-edge docktab {
&:hover { box-shadow: inset 2px 0 $fill_color; }
&:hover { box-shadow: inset 2px 0 $track_color; }
&:checked { box-shadow: inset 2px 0 $primary_color; }
}
}
@@ -664,8 +661,8 @@ list.categories { background-image: image($lighter_bg_color); }
min-height: 24px;
padding: 0 4px;
border-radius: $material_radius;
background-color: scale-alpha($black, $lower_opacity);
color: $white;
background-color: rgba($black, $lower_opacity);
color: $inverse_fg_color;
}
src/gtk-3.0/3.22/sass/_colors.scss
@@ -5,10 +5,6 @@
@return unquote("alpha(#{$c}, #{$a})");
}
@function scale-alpha($c, $a) {
@return scale-color($c, $alpha: percentage(-1 + $a));
}
@function chroma($c) {
@return mix($c, $grey_800, 75%);
}
@@ -16,32 +12,33 @@
@import 'color-palette';
// Foreground colors
$dark_fg_color: scale-alpha($black, 0.8);
$dark_fg_color: rgba($black, 0.87);
$light_fg_color: $white;
$fg_color: if($variant == 'light', $dark_fg_color, $light_fg_color);
$secondary_fg_color: scale-alpha($fg_color, $secondary_opacity);
$tertiary_fg_color: scale-alpha($fg_color, $tertiary_opacity);
$inverse_fg_color: $light_fg_color;
$secondary_inverse_fg_color: scale-alpha($inverse_fg_color, $secondary_opacity);
$tertiary_inverse_fg_color: scale-alpha($inverse_fg_color, $tertiary_opacity);
$titlebar_fg_color: if($titlebar == 'dark', $inverse_fg_color, $fg_color);
$secondary_titlebar_fg_color: if($titlebar == 'dark', $secondary_inverse_fg_color, $secondary_fg_color);
$tertiary_titlebar_fg_color: if($titlebar == 'dark', $tertiary_inverse_fg_color, $tertiary_fg_color);
$disabled_fg_color: scale-alpha($fg_color, $disabled_opacity);
$disabled_secondary_fg_color: scale-alpha($secondary_fg_color, $disabled_opacity);
$disabled_tertiary_fg_color: scale-alpha($tertiary_fg_color, $disabled_opacity);
$disabled_inverse_fg_color: scale-alpha($inverse_fg_color, $disabled_opacity);
$disabled_secondary_inverse_fg_color: scale-alpha($secondary_inverse_fg_color, $disabled_opacity);
$disabled_tertiary_inverse_fg_color: scale-alpha($tertiary_inverse_fg_color, $disabled_opacity);
$disabled_titlebar_fg_color: if($titlebar == 'dark', $disabled_inverse_fg_color, $disabled_fg_color);
$disabled_secondary_titlebar_fg_color: if($titlebar == 'dark', $disabled_secondary_inverse_fg_color, $disabled_secondary_fg_color);
$disabled_tertiary_titlebar_fg_color: if($titlebar == 'dark', $disabled_tertiary_inverse_fg_color, $disabled_tertiary_fg_color);
$fg_color: if($variant == 'light', rgba($black, 0.87), $white);
$button_fg_color: if($variant == 'light', rgba($black, 0.62), rgba($white, 0.8));
$secondary_fg_color: if($variant == 'light', rgba($black, 0.54), rgba($white, 0.7));
$tertiary_fg_color: if($variant == 'light', rgba($black, 0.38), rgba($white, 0.5));
$disabled_fg_color: if($variant == 'light', rgba($black, 0.38), rgba($white, 0.5));
$disabled_secondary_fg_color: if($variant == 'light', rgba($black, 0.26), rgba($white, 0.3));
$track_color: if($variant == 'light', rgba($black, 0.26), rgba($white, 0.3));
$divider_color: if($variant == 'light', rgba($black, 0.12), rgba($white, 0.12));
$titlebar_fg_color: if($titlebar == 'light', rgba($black, 0.87), $white);
$secondary_titlebar_fg_color: if($titlebar == 'light', rgba($black, 0.54), rgba($white, 0.7));
$tertiary_titlebar_fg_color: if($titlebar == 'light', rgba($black, 0.38), rgba($white, 0.5));
$disabled_titlebar_fg_color: if($titlebar == 'light', rgba($black, 0.38), rgba($white, 0.5));
$disabled_secondary_titlebar_fg_color: if($titlebar == 'light', rgba($black, 0.26), rgba($white, 0.3));
$titlebar_track_color: if($titlebar == 'light', rgba($black, 0.26), rgba($white, 0.3));
$titlebar_divider_color: if($titlebar == 'light', rgba($black, 0.12), rgba($white, 0.12));
$inverse_fg_color: $white;
$secondary_inverse_fg_color: rgba($white, 0.7);
$tertiary_inverse_fg_color: rgba($white, 0.5);
$disabled_inverse_fg_color: rgba($white, 0.5);
$disabled_secondary_inverse_fg_color: rgba($white, 0.3);
$inverse_track_color: rgba($white, 0.3);
$inverse_divider_color: rgba($white, 0.12);
// Background colors
$bg_color: if($variant == 'light', $grey_100, chroma($blue_grey_700));
@@ -62,6 +59,7 @@ $row_fill_color: gtkalpha(currentColor, 0.05);
$primary_color: $blue_400;
$alt_primary_color: $light_blue_A200;
$accent_color: $pink_A200;
$disabled_accent_color: rgba($accent_color, 0.5);
$link_color: $primary_color;
$visited_link_color: $purple_A200;
@@ -78,13 +76,15 @@ $question_bg_color: $blue_400;
$warning_bg_color: $orange_400;
$error_bg_color: $red_400;
$border_color: if($variant == 'light', scale-alpha($black, 0.1), scale-alpha($black, 0.2));
$highlight_color: if($variant == 'light', scale-alpha($white, 0.4), scale-alpha($white, 0.1));
$alt_highlight_color: scale-alpha($white, 0.2);
$unity_highlight_color: if($titlebar == 'dark', scale-alpha($white, 0.1), scale-alpha($white, 0.2));
$titlebar_highlight_color: if($titlebar == 'dark', scale-alpha($white, 0.15), $highlight_color);
$border_color: if($variant == 'light', rgba($black, 0.1), rgba($black, 0.2));
$highlight_color: if($variant == 'light', rgba($white, 0.4), rgba($white, 0.1));
$alt_highlight_color: rgba($white, 0.2);
$unity_highlight_color: if($titlebar == 'dark', rgba($white, 0.1), rgba($white, 0.2));
$titlebar_highlight_color: if($titlebar == 'dark', rgba($white, 0.15), $highlight_color);
$titlebar_indicator_color: if($titlebar == 'dark', currentColor, $primary_color);
// FIXME: @placeholder_text_color should really use $tertiary_fg_color, but
// doesn't work translucent colors here. So we use an opaque color instead.
$placeholder_text_color: mix($fg_color, $base_color, percentage($tertiary_opacity));
$placeholder_text_color: if($variant == 'light',
mix($black, $base_color, percentage(0.54)),
mix($white, $base_color, percentage(0.7)));
src/gtk-3.0/3.22/sass/_common.scss
@@ -109,7 +109,7 @@ textview {
.rubberband,
rubberband {
border: 1px solid $alt_primary_color;
background-color: scale-alpha($alt_primary_color, $lower_opacity);
background-color: rgba($alt_primary_color, $lower_opacity);
}
flowbox {
@@ -240,11 +240,11 @@ entry {
// min-width: $small_size;
// border-radius: $circular_radius;
// -gtk-outline-radius: $circular_radius;
color: gtkalpha(currentColor, $secondary_opacity);
color: $secondary_fg_color;
&:hover, &:active { color: currentColor; }
&:hover, &:active { color: $fg_color; }
&:disabled { color: gtkalpha(currentColor, $tertiary_opacity); }
&:disabled { color: $tertiary_fg_color; }
&.left {
margin-left: ($medium_size - 16px) / 2 - 8px;
@@ -282,6 +282,14 @@ entry {
&:disabled { @include entry(flat-disabled, $e_color); }
}
image {
color: $secondary_inverse_fg_color;
&:hover, &:active { color: $inverse_fg_color; }
&:disabled { color: $tertiary_inverse_fg_color; }
}
}
}
@@ -501,7 +509,7 @@ button {
&:disabled { @include button(flat-disabled, $b_color); }
&:checked { background-color: $fill_color; }
&:checked { background-color: rgba($b_color, 0.3); }
}
.osd & {
@@ -908,7 +916,7 @@ combobox {
@include entry(flat-normal);
&:hover { box-shadow: inset 0 -2px $fill_color; }
&:hover { box-shadow: inset 0 -2px $tertiary_fg_color; }
&:checked {
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
@@ -1034,19 +1042,44 @@ headerbar {
$titlebar_indicator_color 0%,
transparent 0%)
0 0 0 / 0 0 0px;
color: $secondary_titlebar_fg_color;
&:hover, &:active { color: $titlebar_fg_color; }
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
&:checked {
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
$titlebar_indicator_color 100%,
transparent 0%)
0 0 2 / 0 0 2px;
color: $titlebar_fg_color;
&:disabled { color: $disabled_titlebar_fg_color; }
&, &:disabled { background-color: transparent; }
}
&:backdrop {
color: $tertiary_titlebar_fg_color;
&:hover, &:active { color: $secondary_titlebar_fg_color; }
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
&:checked {
color: $secondary_titlebar_fg_color;
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
}
}
}
button.suggested-action, button.destructive-action {
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
&:disabled {
background-color: $titlebar_divider_color;
color: $disabled_titlebar_fg_color;
}
}
&.selection-mode {
@@ -1299,7 +1332,7 @@ treeview.view {
}
&.trough { // progress bar trough in treeviews
border-bottom: $bar_size solid scale-alpha($primary_color, $lower_opacity);
border-bottom: $bar_size solid rgba($primary_color, $lower_opacity);
box-shadow: none;
background-color: transparent;
@@ -1360,7 +1393,7 @@ menubar,
&:hover { // Seems like it :hover even with keyboard focus
transition: none;
background-color: $semi_fill_color;
background-color: $titlebar_divider_color;
color: $titlebar_fg_color;
}
@@ -1394,7 +1427,7 @@ menu,
&:hover {
transition: none;
background-color: $semi_fill_color;
background-color: $divider_color;
}
&:disabled { color: $disabled_fg_color; }
@@ -1443,7 +1476,7 @@ menu,
}
&:hover {
background-image: image($semi_fill_color);
background-image: image($divider_color);
color: $fg_color;
}
@@ -1459,28 +1492,28 @@ menu,
}
menuitem {
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
accelerator { color: $secondary_fg_color; }
}
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
// Electron/Atom render all translucent colors in opaque colors.
// It's a very critical issue for this theme and should be fixed by upstream...
.popup:not(.csd) menu {
$opaque_fg_color: if($variant == 'light', mix($black, $base_color, percentage(0.8)), $white);
$opaque_semi_fill_color: mix($opaque_fg_color, $base_color, percentage($lower_opacity / 2));
$opaque_disabled_fg_color: mix($opaque_fg_color, $base_color, percentage($disabled_opacity));
$opaque_tertiary_fg_color: mix($opaque_fg_color, $base_color, percentage($tertiary_opacity));
$opaque_fg_color: if($variant == 'light', $grey_900, $white);
$opaque_divider_color: if($variant == 'light', $grey_300, mix($white, $base_color, percentage(0.12)));
$opaque_disabled_fg_color: if($variant == 'light', $grey_500, mix($white, $base_color, percentage(0.5)));
$opaque_secondary_fg_color: if($variant == 'light', $grey_600, mix($white, $base_color, percentage(0.7)));
menuitem {
color: $opaque_fg_color;
&:hover { background-color: $opaque_semi_fill_color; }
&:hover { background-color: $opaque_divider_color; }
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
}
// TODO: not working this, where/how i can set the accelerators?
accelerator { color: $opaque_tertiary_fg_color; }
accelerator { color: $opaque_secondary_fg_color; }
}
@@ -1556,7 +1589,7 @@ notebook {
margin-bottom: -1px;
> tab {
&:hover { box-shadow: inset 0 -2px $fill_color; }
&:hover { box-shadow: inset 0 -2px $track_color; }
&:checked { box-shadow: inset 0 -2px $primary_color; }
}
@@ -1569,7 +1602,7 @@ notebook {
margin-top: -1px;
> tab {
&:hover { box-shadow: inset 0 2px $fill_color; }
&:hover { box-shadow: inset 0 2px $track_color; }
&:checked { box-shadow: inset 0 2px $primary_color; }
}
@@ -1582,7 +1615,7 @@ notebook {
margin-right: -1px;
> tab {
&:hover { box-shadow: inset -2px 0 $fill_color; }
&:hover { box-shadow: inset -2px 0 $track_color; }
&:checked { box-shadow: inset -2px 0 $primary_color; }
}
@@ -1595,7 +1628,7 @@ notebook {
margin-left: -1px;
> tab {
&:hover { box-shadow: inset 2px 0 $fill_color; }
&:hover { box-shadow: inset 2px 0 $track_color; }
&:checked { box-shadow: inset 2px 0 $primary_color; }
}
@@ -1822,7 +1855,7 @@ scrollbar {
&:active { background-color: $fg_color; }
&:disabled { background-color: $disabled_tertiary_fg_color; }
&:disabled { background-color: $disabled_secondary_fg_color; }
}
&.fine-tune {
@@ -1846,20 +1879,20 @@ scrollbar {
min-width: 4px;
min-height: 4px;
margin: 4px - 1px;
border: 1px solid scale-alpha($base_color, $lower_opacity);
border: 1px solid rgba($base_color, $lower_opacity);
}
button {
min-width: 4px;
min-height: 4px;
margin: 4px - 1px;
border: 1px solid scale-alpha($base_color, $lower_opacity);
border: 1px solid rgba($base_color, $lower_opacity);
border-radius: $circular_radius;
background-color: $tertiary_fg_color;
background-clip: padding-box;
-gtk-icon-source: none;
&:disabled { background-color: $disabled_tertiary_fg_color; }
&:disabled { background-color: $disabled_secondary_fg_color; }
}
&.horizontal {
@@ -1876,7 +1909,7 @@ scrollbar {
}
&.dragging,
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
&.hovering { background-color: rgba($base_color, $higher_opacity); }
}
&.horizontal slider { min-width: $_slider_min_length; }
@@ -1921,17 +1954,17 @@ switch {
padding: 0 2px;
border: 4px solid transparent;
border-radius: $circular_radius;
background-color: $fill_color;
background-color: $track_color;
background-clip: padding-box;
font-size: 0;
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
&:disabled { background-color: $divider_color; }
&:checked {
background-color: scale-alpha($accent_color, 0.5);
background-color: rgba($accent_color, 0.5);
&:disabled {
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
background-color: rgba($accent_color, 0.3);
color: $disabled_fg_color;
}
}
@@ -2014,20 +2047,26 @@ radio {
@extend %circular_button;
&:checked, &:indeterminate {
color: $accent_color;
&:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
&:disabled { color: $disabled_accent_color; }
}
// &:only-child { margin: -12px; }
row &:not(:checked):not(:indeterminate) {
color: gtkalpha(currentColor, $secondary_opacity);
row:selected &:not(:checked):not(:indeterminate) {
color: $secondary_inverse_fg_color;
&:hover, &:active { color: currentColor; }
&:hover, &:active { color: $inverse_fg_color; }
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
&:disabled { color: $disabled_secondary_inverse_fg_color; }
}
popover & {
@@ -2036,7 +2075,7 @@ radio {
background-image: none;
}
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
&.left:dir(rtl) {
margin-left: -16px;
@@ -2060,7 +2099,7 @@ radio {
&:dir(rtl) { margin-left: 8px; }
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
&, &:hover, &:disabled {
box-shadow: none;
@@ -2117,7 +2156,7 @@ radio {
border-image-source: -gtk-gradient(radial,
center center, 0,
center center, $radio_indicator,
to(scale-alpha($accent_color, $disabled_opacity)),
to($disabled_accent_color),
to(transparent));
}
}
@@ -2211,7 +2250,7 @@ treeview.view radio {
&:checked, &:indeterminate { color: $accent_color; }
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
&:checked:disabled, &:indeterminate:disabled { color: $disabled_accent_color; }
}
&:selected {
@@ -2223,7 +2262,7 @@ treeview.view radio {
&:checked, &:indeterminate { color: $accent_color; }
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
&:checked:disabled, &:indeterminate:disabled { color: $disabled_accent_color; }
}
}
@@ -2269,9 +2308,9 @@ scale {
// the backing bit
trough {
outline-offset: 2px;
background-color: $fill_color;
background-color: $track_color;
&:disabled { color: $disabled_fg_color; }
&:disabled { background-color: $divider_color; }
}
// the colored part of the backing bit
@@ -2284,7 +2323,7 @@ scale {
// this is another differently styled part of the backing bit, the most relevant use case is for example
// in media player to indicate how much video stream as been cached
fill {
background-color: $fill_color;
background-color: $track_color;
&:disabled { background-color: transparent; }
}
@@ -2318,10 +2357,10 @@ scale {
slider { background-size: calc(100% - 12px); }
}
value { color: gtkalpha(currentColor, $tertiary_opacity); }
value { color: $tertiary_fg_color; }
marks {
color: $fill_color;
color: $track_color;
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
(bottom, bottom, top),
@@ -2490,7 +2529,7 @@ progressbar {
color: $tertiary_fg_color;
font-size: smaller;
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
trough { background-color: rgba($primary_color, $lower_opacity); }
progress { background-color: $primary_color; }
@@ -2552,10 +2591,7 @@ levelbar {
&.full { background-color: $success_color; }
&.empty {
background-color: $fill_color;
color: $disabled_fg_color;
}
&.empty { background-color: $divider_color; }
}
}
@@ -2775,11 +2811,11 @@ calendar {
&.button { @extend %simple_flat_button; }
&.highlight {
color: gtkalpha(currentColor, $tertiary_opacity);
color: $secondary_fg_color;
font-weight: 500;
}
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
&:indeterminate { color: $disabled_secondary_fg_color; }
}
@@ -3062,7 +3098,7 @@ tooltip {
// background-color needs to be set this way otherwise it gets drawn twice
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
box-shadow: inset 0 1px $highlight_color;
background-color: scale-alpha($base_color, $higher_opacity);
background-color: rgba($base_color, $higher_opacity);
}
// @extend %osd;
src/gtk-3.0/3.22/sass/_drawing.scss
@@ -55,7 +55,7 @@
$fc 0%,
transparent 0%)
0 0 0 / 0 0 0px;
box-shadow: inset 0 -1px if($fc == $primary_color, $fill_color, $fc);
box-shadow: inset 0 -1px if($fc == $primary_color, $track_color, $fc);
background-color: transparent;
color: $fg_color;
}
@@ -65,11 +65,11 @@
$fc 100%,
transparent 0%)
0 0 2 / 0 0 2px;
box-shadow: inset 0 -1px if($fc == $primary_color, $fill_color, $fc);
box-shadow: inset 0 -1px if($fc == $primary_color, $track_color, $fc);
}
@if $t == flat-disabled {
box-shadow: inset 0 -1px $fill_color;
box-shadow: inset 0 -1px $divider_color;
background-color: transparent;
color: $disabled_fg_color;
}
@@ -97,7 +97,7 @@
background-repeat: no-repeat;
background-position: center;
background-size: 1000% 1000%;
color: $secondary_fg_color;
color: $button_fg_color;
}
@if $t == hover {
@@ -120,7 +120,7 @@
@if $t == disabled {
box-shadow: none;
background-color: $fill_color;
background-color: $divider_color;
color: if($c == $lighter_bg_color, $disabled_secondary_fg_color, $disabled_fg_color);
}
@@ -130,8 +130,8 @@
}
@if $t == checked-disabled {
background-color: $fill_color;
color: scale-alpha($primary_color, $disabled_opacity);
background-color: rgba($primary_color, $lower_opacity);
color: rgba($primary_color, $disabled_opacity);
}
@if $t == flat-normal {
@@ -146,12 +146,12 @@
background-repeat: no-repeat;
background-position: center;
background-size: 1000% 1000%;
color: gtkalpha(currentColor, $secondary_opacity);
color: $secondary_fg_color;
}
@if $t == flat-hover {
box-shadow: inset 0 0 0 9999px $semi_fill_color;
color: currentColor;
color: $fg_color;
}
@if $t == flat-active {
@@ -164,25 +164,23 @@
$semi_fill_color 10%,
transparent 0%);
background-size: 0% 0%;
color: currentColor;
color: $fg_color;
}
@if $t == flat-disabled {
box-shadow: none;
background-color: transparent;
color: if($c == $lighter_bg_color,
gtkalpha(currentColor, $secondary_opacity * $disabled_opacity),
gtkalpha(currentColor, $disabled_opacity));
color: if($c == $lighter_bg_color, $disabled_secondary_fg_color, $disabled_fg_color);
}
@if $t == flat-checked {
background-color: $fill_color;
color: currentColor;
background-color: $track_color;
color: $fg_color;
}
@if $t == flat-checked-disabled {
background-color: $fill_color;
color: gtkalpha(currentColor, $disabled_opacity);
background-color: $divider_color;
color: $disabled_fg_color;
}
}
@@ -206,7 +204,7 @@
background-image: -gtk-gradient(radial,
$_position, 0,
$_position, 0.75,
to(scale-alpha($alt_primary_color, $lower_opacity)),
to(rgba($alt_primary_color, $lower_opacity)),
to(transparent));
background-repeat: no-repeat;
@@ -228,8 +226,8 @@
// top, bottom, right, left
//
$_undershoot_color_dark: scale-alpha($fg_color, $lower_opacity);
$_undershoot_color_light: scale-alpha($base_color, $lower_opacity);
$_undershoot_color_dark: $track_color;
$_undershoot_color_light: rgba($base_color, $lower_opacity);
$_gradient_dir: left;
$_dash_bg_size: 12px 1px;
src/gtk-3.0/3.22/sass/_variables.scss
@@ -8,7 +8,7 @@ $lower_opacity: 0.3;
$secondary_opacity: 0.75;
$tertiary_opacity: 0.6;
$disabled_opacity: 0.4;
$disabled_opacity: 0.5;
// sizes
$small_size: if($compact == 'false', 24px, 20px);
src/gtk-3.0/3.22/sass/apps/_budgie.scss
@@ -134,7 +134,7 @@ popover.background.places-menu {
button { border-radius: 0; }
separator { background-color: $fill_color; }
separator { background-color: $titlebar_track_color; }
// used to indicate unread notifications
.alert { color: $destructive_color; }
@@ -288,7 +288,7 @@ $pos_list: ((top, bottom), (bottom, top), (left, right), (right, left));
&.frame { border-style: solid none; }
> overlay > image { color: $fill_color; }
> overlay > image { color: $track_color; }
grid > label:first-child { min-height: $medium_size; } // workaround to fix vertical-align
@@ -329,8 +329,8 @@ calendar.raven-calendar {
// MPRIS Applet
.raven-mpris {
background-color: scale-alpha($black, $middle_opacity);
color: $white;
background-color: rgba($black, $middle_opacity);
color: $inverse_fg_color;
label { min-height: 24px; }
src/gtk-3.0/3.22/sass/apps/_gnome.scss
@@ -22,7 +22,7 @@
}
.nautilus-desktop.nautilus-canvas-item:not(:selected) {
// background-color: scale-alpha($black, $lower_opacity);
// background-color: rgba($black, $lower_opacity);
color: $inverse_fg_color;
text-shadow: $shadow_1;
}
@@ -83,10 +83,7 @@
&.used { background-color: $primary_color; }
&.free {
background-color: $fill_color;
color: $disabled_fg_color;
}
&.free { background-color: $divider_color; }
}
// View
@@ -224,7 +221,7 @@ dialog.background > box.dialog-vbox.vertical > grid.horizontal {
.gedit-search-entry-occurrences-tag {
all: unset;
color: gtkalpha(currentColor, $tertiary_opacity);
color: $tertiary_fg_color;
}
}
@@ -377,7 +374,7 @@ entry.search-missing {
// tweak icons for treeviews
window.workbench treeview.image {
color: gtkalpha(currentColor, $tertiary_opacity);
color: $tertiary_fg_color;
&:selected { color: $tertiary_inverse_fg_color; }
}
@@ -507,7 +504,7 @@ docktab {
font-weight: 500;
&:hover {
box-shadow: inset 0 -2px $fill_color;
box-shadow: inset 0 -2px $track_color;
color: $fg_color;
}
@@ -533,12 +530,12 @@ dockoverlayedge {
}
&.left-edge docktab {
&:hover { box-shadow: inset -2px 0 $fill_color; }
&:hover { box-shadow: inset -2px 0 $track_color; }
&:checked { box-shadow: inset -2px 0 $primary_color; }
}
&.right-edge docktab {
&:hover { box-shadow: inset 2px 0 $fill_color; }
&:hover { box-shadow: inset 2px 0 $track_color; }
&:checked { box-shadow: inset 2px 0 $primary_color; }
}
}
@@ -771,8 +768,8 @@ list.categories { background-image: image($lighter_bg_color); }
min-height: 24px;
padding: 0 4px;
border-radius: $material_radius;
background-color: scale-alpha($black, $lower_opacity);
color: $white;
background-color: rgba($black, $lower_opacity);
color: $inverse_fg_color;
}
src/gtk-3.0/3.22/sass/apps/_lightdm.scss
@@ -6,8 +6,8 @@
************************/
// the panel widget at the top
#panel_window {
background-color: scale-alpha($black, $lower_opacity);
color: $white;
background-color: rgba($black, $lower_opacity);
color: $inverse_fg_color;
// font-weight: bold;
// the menubars/menus of the panel, i.e. indicators
src/gtk-3.0/3.22/sass/apps/_third-party.scss
@@ -35,7 +35,7 @@ window.background > box.vertical > scrolledwindow > widget toolbar {
/***********
* Firefox *
***********/
$firefox_border_color: scale-alpha($black, 0.2);
$firefox_border_color: rgba($black, 0.2);
window.background:not(.csd) {
> widget {
src/gtk-3.0/3.22/sass/apps/_unity.scss
@@ -41,12 +41,12 @@ UnityDecoration {
.bottom {}
.menuitem {
color: gtkalpha(currentColor, $secondary_opacity);
color: $secondary_titlebar_fg_color;
&:hover {
box-shadow: inset 0 -2px $titlebar_indicator_color;
background-color: transparent;
color: currentColor;
color: $titlebar_fg_color;
}
}
}
@@ -77,14 +77,14 @@ UnityPanelWidget,
.unity-panel.menuitem,
.unity-panel .menuitem {
color: gtkalpha(currentColor, $secondary_opacity);
color: $secondary_titlebar_fg_color;
}
.unity-panel.menubar.menuitem:hover,
.unity-panel.menubar .menuitem *:hover {
box-shadow: inset 0 -2px $titlebar_indicator_color;
background-color: transparent;
color: currentColor;
color: $titlebar_fg_color;
}
.menu IdoPlaybackMenuItem.menuitem:active {