gtk3: Make tooltip closer to the guidelines
But Grey 700 is obviously too bright to me. So let's use Grey 800 instead.
by roundabout, Thursday, 15 March 2018, 13:29:50 (1521120590), pushed by roundabout, Sunday, 11 May 2025, 13:22:21 (1746969741)
Author identity: nana-4 <hnmaigo@gmail.com>
0428a374df699da0a031ab8e8ac6e9fa6c6bef8d
src/_sass/_colors.scss
@@ -55,6 +55,8 @@ $inverse_panel_bg_color: rgba($inverse_fg_color, 0.1);
$solid_panel_bg_color: if($titlebar == 'dark', $grey_900, $panel_bg_color);
$opaque_panel_bg_color: if($titlebar == 'dark', $grey_900, mix($grey_300, $grey_400, 50%)); // for Unity panel which cannot use translucent colors
$gdm_bg_color: $grey_850;
$fill_color: gtkalpha(currentColor, $lower_opacity);
src/_sass/gtk/_common-3.18.scss
@@ -2052,12 +2052,12 @@ GtkInfoBar {
&.background {
// 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: rgba($base_color, $higher_opacity);
// box-shadow: inset 0 1px $highlight_color;
background-color: rgba($tooltip_bg_color, $higher_opacity);
}
// @extend %osd;
color: $fg_color;
color: $inverse_fg_color;
padding: 4px; /* not working */
border-radius: 2px;
box-shadow: none; // otherwise it gets inherited by windowframe.csd
@@ -2235,7 +2235,7 @@ GtkVolumeButton.button {
}
&.tooltip {
border-radius: 2px;
box-shadow: $shadow_2;
box-shadow: none;
}
&.message-dialog {
border-radius: 2px;
src/_sass/gtk/_common-3.20.scss
@@ -3146,8 +3146,9 @@ tooltip {
&.background {
// 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: rgba($base_color, $higher_opacity);
// box-shadow: inset 0 1px $highlight_color;
background-color: rgba($tooltip_bg_color, $higher_opacity);
color: $inverse_fg_color;
}
// @extend %osd;
@@ -3157,9 +3158,9 @@ tooltip {
box-shadow: none; // otherwise it gets inherited by windowframe.csd
&:not(.csd):not(.unity-csd) {
border: 1px solid $border_color;
border-radius: 2px + 1px;
background-clip: $extra_background_clip;
// border: 1px solid $border_color;
// border-radius: 2px + 1px;
// background-clip: $extra_background_clip;
}
// FIXME: we need a border or tooltips vanish on black background.
@@ -3365,7 +3366,7 @@ decoration {
tooltip.csd & {
border-radius: 2px;
box-shadow: $shadow_2;
box-shadow: none;
}
messagedialog.csd & {
src/_sass/gtk/apps/_misc.scss
@@ -35,7 +35,7 @@ window.background > box.vertical > scrolledwindow > widget toolbar {
/************
* Chromium *
************/
tooltip.chromium { background-color: $base_color; }
tooltip.chromium { background-color: $tooltip_bg_color; }
/***********
src/gtk/3.18/gtk-dark.css
@@ -2666,8 +2666,7 @@ GtkInfoBar {
}
.tooltip.background {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
background-color: rgba(48, 48, 48, 0.9);
background-color: rgba(66, 66, 66, 0.9);
}
.tooltip.window-frame.csd {
@@ -2811,7 +2810,7 @@ GtkColorSwatch#add-color-button {
.window-frame.csd.tooltip {
border-radius: 2px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
box-shadow: none;
}
.window-frame.csd.message-dialog {
src/gtk/3.18/gtk-light.css
@@ -2658,7 +2658,7 @@ GtkInfoBar {
* Tooltips *
************/
.tooltip {
color: rgba(0, 0, 0, 0.87);
color: #FFFFFF;
padding: 4px;
/* not working */
border-radius: 2px;
@@ -2666,8 +2666,7 @@ GtkInfoBar {
}
.tooltip.background {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.9);
background-color: rgba(66, 66, 66, 0.9);
}
.tooltip.window-frame.csd {
@@ -2811,7 +2810,7 @@ GtkColorSwatch#add-color-button {
.window-frame.csd.tooltip {
border-radius: 2px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
box-shadow: none;
}
.window-frame.csd.message-dialog {
src/gtk/3.18/gtk.css
@@ -2658,7 +2658,7 @@ GtkInfoBar {
* Tooltips *
************/
.tooltip {
color: rgba(0, 0, 0, 0.87);
color: #FFFFFF;
padding: 4px;
/* not working */
border-radius: 2px;
@@ -2666,8 +2666,7 @@ GtkInfoBar {
}
.tooltip.background {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.9);
background-color: rgba(66, 66, 66, 0.9);
}
.tooltip.window-frame.csd {
@@ -2811,7 +2810,7 @@ GtkColorSwatch#add-color-button {
.window-frame.csd.tooltip {
border-radius: 2px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
box-shadow: none;
}
.window-frame.csd.message-dialog {
src/gtk/3.20/gtk-compact.css
@@ -3551,14 +3551,8 @@ tooltip {
}
tooltip.background {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.9);
}
tooltip:not(.csd):not(.unity-csd) {
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 3px;
background-clip: padding-box;
background-color: rgba(66, 66, 66, 0.9);
color: #FFFFFF;
}
tooltip decoration {
@@ -3728,7 +3722,7 @@ decoration:backdrop {
tooltip.csd decoration {
border-radius: 2px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
box-shadow: none;
}
messagedialog.csd decoration {
@@ -4531,7 +4525,7 @@ window.background > box.vertical > scrolledwindow > widget toolbar button {
* Chromium *
************/
tooltip.chromium {
background-color: #FFFFFF;
background-color: #424242;
}
/***********
src/gtk/3.20/gtk-dark-compact.css
@@ -3551,14 +3551,8 @@ tooltip {
}
tooltip.background {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
background-color: rgba(48, 48, 48, 0.9);
}
tooltip:not(.csd):not(.unity-csd) {
border: 1px solid rgba(0, 0, 0, 0.26);
border-radius: 3px;
background-clip: border-box;
background-color: rgba(66, 66, 66, 0.9);
color: #FFFFFF;
}
tooltip decoration {
@@ -3728,7 +3722,7 @@ decoration:backdrop {
tooltip.csd decoration {
border-radius: 2px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
box-shadow: none;
}
messagedialog.csd decoration {
@@ -4531,7 +4525,7 @@ window.background > box.vertical > scrolledwindow > widget toolbar button {
* Chromium *
************/
tooltip.chromium {
background-color: #303030;
background-color: #424242;
}
/***********
src/gtk/3.20/gtk-dark.css
@@ -3551,14 +3551,8 @@ tooltip {
}
tooltip.background {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
background-color: rgba(48, 48, 48, 0.9);
}
tooltip:not(.csd):not(.unity-csd) {
border: 1px solid rgba(0, 0, 0, 0.26);
border-radius: 3px;
background-clip: border-box;
background-color: rgba(66, 66, 66, 0.9);
color: #FFFFFF;
}
tooltip decoration {
@@ -3728,7 +3722,7 @@ decoration:backdrop {
tooltip.csd decoration {
border-radius: 2px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
box-shadow: none;
}
messagedialog.csd decoration {
@@ -4531,7 +4525,7 @@ window.background > box.vertical > scrolledwindow > widget toolbar button {
* Chromium *
************/
tooltip.chromium {
background-color: #303030;
background-color: #424242;
}
/***********
src/gtk/3.20/gtk-light-compact.css
@@ -3551,14 +3551,8 @@ tooltip {
}
tooltip.background {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.9);
}
tooltip:not(.csd):not(.unity-csd) {
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 3px;
background-clip: padding-box;
background-color: rgba(66, 66, 66, 0.9);
color: #FFFFFF;
}
tooltip decoration {
@@ -3728,7 +3722,7 @@ decoration:backdrop {
tooltip.csd decoration {
border-radius: 2px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
box-shadow: none;
}
messagedialog.csd decoration {
@@ -4531,7 +4525,7 @@ window.background > box.vertical > scrolledwindow > widget toolbar button {
* Chromium *
************/
tooltip.chromium {
background-color: #FFFFFF;
background-color: #424242;
}
/***********
src/gtk/3.20/gtk-light.css
@@ -3551,14 +3551,8 @@ tooltip {
}
tooltip.background {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.9);
}
tooltip:not(.csd):not(.unity-csd) {
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 3px;
background-clip: padding-box;
background-color: rgba(66, 66, 66, 0.9);
color: #FFFFFF;
}
tooltip decoration {
@@ -3728,7 +3722,7 @@ decoration:backdrop {
tooltip.csd decoration {
border-radius: 2px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
box-shadow: none;
}
messagedialog.csd decoration {
@@ -4531,7 +4525,7 @@ window.background > box.vertical > scrolledwindow > widget toolbar button {
* Chromium *
************/
tooltip.chromium {
background-color: #FFFFFF;
background-color: #424242;
}
/***********
src/gtk/3.20/gtk.css
@@ -3551,14 +3551,8 @@ tooltip {
}
tooltip.background {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.9);
}
tooltip:not(.csd):not(.unity-csd) {
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 3px;
background-clip: padding-box;
background-color: rgba(66, 66, 66, 0.9);
color: #FFFFFF;
}
tooltip decoration {
@@ -3728,7 +3722,7 @@ decoration:backdrop {
tooltip.csd decoration {
border-radius: 2px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
box-shadow: none;
}
messagedialog.csd decoration {
@@ -4531,7 +4525,7 @@ window.background > box.vertical > scrolledwindow > widget toolbar button {
* Chromium *
************/
tooltip.chromium {
background-color: #FFFFFF;
background-color: #424242;
}
/***********
src/gtk/3.22/gtk-compact.css
@@ -3552,14 +3552,8 @@ tooltip {
}
tooltip.background {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.9);
}
tooltip:not(.csd):not(.unity-csd) {
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 3px;
background-clip: padding-box;
background-color: rgba(66, 66, 66, 0.9);
color: #FFFFFF;
}
tooltip decoration {
@@ -3729,7 +3723,7 @@ decoration:backdrop {
tooltip.csd decoration {
border-radius: 2px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
box-shadow: none;
}
messagedialog.csd decoration {
@@ -4783,7 +4777,7 @@ window.background > box.vertical > scrolledwindow > widget toolbar button {
* Chromium *
************/
tooltip.chromium {
background-color: #FFFFFF;
background-color: #424242;
}
/***********
src/gtk/3.22/gtk-dark-compact.css
@@ -3552,14 +3552,8 @@ tooltip {
}
tooltip.background {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
background-color: rgba(48, 48, 48, 0.9);
}
tooltip:not(.csd):not(.unity-csd) {
border: 1px solid rgba(0, 0, 0, 0.26);
border-radius: 3px;
background-clip: border-box;
background-color: rgba(66, 66, 66, 0.9);
color: #FFFFFF;
}
tooltip decoration {
@@ -3729,7 +3723,7 @@ decoration:backdrop {
tooltip.csd decoration {
border-radius: 2px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
box-shadow: none;
}
messagedialog.csd decoration {
@@ -4783,7 +4777,7 @@ window.background > box.vertical > scrolledwindow > widget toolbar button {
* Chromium *
************/
tooltip.chromium {
background-color: #303030;
background-color: #424242;
}
/***********
src/gtk/3.22/gtk-dark.css
@@ -3552,14 +3552,8 @@ tooltip {
}
tooltip.background {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
background-color: rgba(48, 48, 48, 0.9);
}
tooltip:not(.csd):not(.unity-csd) {
border: 1px solid rgba(0, 0, 0, 0.26);
border-radius: 3px;
background-clip: border-box;
background-color: rgba(66, 66, 66, 0.9);
color: #FFFFFF;
}
tooltip decoration {
@@ -3729,7 +3723,7 @@ decoration:backdrop {
tooltip.csd decoration {
border-radius: 2px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
box-shadow: none;
}
messagedialog.csd decoration {
@@ -4783,7 +4777,7 @@ window.background > box.vertical > scrolledwindow > widget toolbar button {
* Chromium *
************/
tooltip.chromium {
background-color: #303030;
background-color: #424242;
}
/***********
src/gtk/3.22/gtk-light-compact.css
@@ -3552,14 +3552,8 @@ tooltip {
}
tooltip.background {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.9);
}
tooltip:not(.csd):not(.unity-csd) {
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 3px;
background-clip: padding-box;
background-color: rgba(66, 66, 66, 0.9);
color: #FFFFFF;
}
tooltip decoration {
@@ -3729,7 +3723,7 @@ decoration:backdrop {
tooltip.csd decoration {
border-radius: 2px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
box-shadow: none;
}
messagedialog.csd decoration {
@@ -4783,7 +4777,7 @@ window.background > box.vertical > scrolledwindow > widget toolbar button {
* Chromium *
************/
tooltip.chromium {
background-color: #FFFFFF;
background-color: #424242;
}
/***********
src/gtk/3.22/gtk-light.css
@@ -3552,14 +3552,8 @@ tooltip {
}
tooltip.background {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.9);
}
tooltip:not(.csd):not(.unity-csd) {
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 3px;
background-clip: padding-box;
background-color: rgba(66, 66, 66, 0.9);
color: #FFFFFF;
}
tooltip decoration {
@@ -3729,7 +3723,7 @@ decoration:backdrop {
tooltip.csd decoration {
border-radius: 2px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
box-shadow: none;
}
messagedialog.csd decoration {
@@ -4783,7 +4777,7 @@ window.background > box.vertical > scrolledwindow > widget toolbar button {
* Chromium *
************/
tooltip.chromium {
background-color: #FFFFFF;
background-color: #424242;
}
/***********
src/gtk/3.22/gtk.css
@@ -3552,14 +3552,8 @@ tooltip {
}
tooltip.background {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.9);
}
tooltip:not(.csd):not(.unity-csd) {
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 3px;
background-clip: padding-box;
background-color: rgba(66, 66, 66, 0.9);
color: #FFFFFF;
}
tooltip decoration {
@@ -3729,7 +3723,7 @@ decoration:backdrop {
tooltip.csd decoration {
border-radius: 2px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
box-shadow: none;
}
messagedialog.csd decoration {
@@ -4783,7 +4777,7 @@ window.background > box.vertical > scrolledwindow > widget toolbar button {
* Chromium *
************/
tooltip.chromium {
background-color: #FFFFFF;
background-color: #424242;
}
/***********