[Touch-packages] [Bug 1092753] Re: Light themes are missing GTK 3 OSD configuration
Seems to be fixed using latest Gnome Shell with Ambiance.
** Changed in: ubuntu-themes (Ubuntu)
Status: Triaged => Fix Released
--
You received this bug notification because you are a member of Ubuntu
Touch seeded packages, which is subscribed to ubuntu-themes in Ubuntu.
https://bugs.launchpad.net/bugs/1092753
Title:
Light themes are missing GTK 3 OSD configuration
Status in ubuntu-themes package in Ubuntu:
Fix Released
Bug description:
The "Light Themes" Ambiance and Radiance appear to be missing On
Screen Display CSS code in GTK 3, leaving the OSD pop-up rather poorly
styled.
For your convenience, here's some CSS code for the OSD taken from a
fairly well-done theme that based itself at least in part on Ambiance,
Zukitwo:
(The following code came from gtk-main-common.css in Zukitwo, though
it could just go in gtk-main.css in Ambiance and Radiance:)
/***
* OSD *
***/
@define-color osd_highlight #ff;
@define-color osd_lowlight #525252;
@define-color osd_base #212526;
@define-color osd_fg #ededed;
@define-color osd_bg alpha(@osd_base, 0.80);
@define-color osd_bg_backdrop alpha(shade(@osd_base, 1.40), 0.90);
@define-color osd_text_shadow alpha(black, 0.75);
@define-color osd_toolbar_bg_a alpha(@osd_base, 0.80);
@define-color osd_toolbar_bg_b alpha(#101010, 0.80);
@define-color osd_toolbar_bg_c alpha(shade(@osd_base, 1.02), 0.80);
@define-color osd_button_bg_a alpha(@osd_highlight, 0.16);
@define-color osd_button_bg_b alpha(@osd_lowlight, 0.05);
@define-color osd_button_bg_c alpha(@osd_highlight, 0.12);
@define-color osd_button_bg_insensitive alpha(@osd_highlight, 0.25);
@define-color osd_button_bg_insensitive_active alpha(@osd_highlight, 0.16);
@define-color osd_button_bg_hover_a alpha(@osd_highlight, 0.28);
@define-color osd_button_bg_hover_b alpha(@osd_lowlight, 0.14);
@define-color osd_button_bg_hover_c alpha(@osd_highlight, 0.14);
@define-color osd_button_bg_active_a alpha(@osd_lowlight, 0.18);
@define-color osd_button_bg_active_b alpha(@osd_highlight, 0.23);
@define-color osd_button_bg_active_c alpha(@osd_lowlight, 0.17);
@define-color osd_button_bg_backdrop alpha(@osd_highlight, 0.18);
@define-color osd_button_bg_backdrop_hover alpha(@osd_highlight, 0.25);
@define-color osd_button_bg_backdrop_active alpha(@osd_highlight, 0.35);
@define-color osd_button_bg_backdrop_insensitive alpha(@osd_highlight, 0.08);
@define-color osd_button_fg_backdrop shade(@osd_fg, 0.70);
@define-color osd_button_fg_backdrop_active shade(@osd_fg, 0.95);
@define-color osd_button_fg shade(@osd_fg, 0.80);
@define-color osd_button_fg_hover shade(@osd_fg, 0.96);
@define-color osd_button_fg_active shade(@osd_fg, 1.10);
@define-color osd_button_fg_insensitive shade(@osd_fg, 0.70);
@define-color osd_button_border alpha(@osd_highlight, 0.40);
@define-color osd_button_inset shade(@osd_fg, 0.67);
@define-color osd_button_shadow alpha(black, 0.35);
@define-color osd_trough_bg alpha(@osd_button_fg, 0.10);
(The following code came from gtk-widgets.css in Zukitwo, and should
probably go there in Ambaince and Radiance:)
/***
* OSD *
***/
GtkWindow.osd {
color: @osd_fg;
background-color: @osd_bg;
}
GtkOverlay.osd {
background-color: transparent;
}
.osd .button,
.osd .button:active {
border-width: 1px;
border-style: solid;
border-image: none;
border-color: @osd_button_border;
border-radius: 5px;
}
.osd .button {
padding: 4px;
background-image: linear-gradient(to bottom,
@osd_button_bg_a,
@osd_button_bg_b 68%,
@osd_button_bg_c
);
color: @osd_button_fg;
text-shadow: 0 -1px @osd_button_shadow;
icon-shadow: 0 -1px @osd_button_shadow;
}
.osd .button,
.osd .button:prelight,
.osd .button:active {
background-color: transparent;
}
.osd .button:insensitive {
background-image: none;
background-color: @osd_button_bg_insensitive;
}
.osd .button:active:insensitive {
background-image: none;
background-color: @osd_button_bg_insensitive_active;
}
.osd .button *:hover {
color: @osd_button_fg_hover;
}
.osd .button *:active,
.osd .button *:hover:active {
color: @osd_button_fg_active;
}
.osd .button *:insensitive,
.osd .button *:insensitive:active {
color: @osd_button_fg_insensitive;
}
.osd .button:hover {
background-image: linear-gradient(to bottom,
@osd_button_bg_hover_a,
@osd_button_bg_hover_b 68%,
@osd_button_bg_hover_c
);
}
.osd .button:active,
.osd .button:active:hover,
.osd GtkMenuButton.button:active {
background-image: linear-gradient(to bottom,
@osd_button_bg_active_a,
@osd_button_bg_active_b
[Touch-packages] [Bug 1092753] Re: Light themes are missing GTK 3 OSD configuration
** Project changed: ubuntu-themes = ubuntu-themes (Ubuntu)
** Changed in: ubuntu-themes (Ubuntu)
Status: New = Triaged
** Changed in: ubuntu-themes (Ubuntu)
Importance: Undecided = Wishlist
--
You received this bug notification because you are a member of Ubuntu
Touch seeded packages, which is subscribed to ubuntu-themes in Ubuntu.
https://bugs.launchpad.net/bugs/1092753
Title:
Light themes are missing GTK 3 OSD configuration
Status in ubuntu-themes package in Ubuntu:
Triaged
Bug description:
The Light Themes Ambiance and Radiance appear to be missing On
Screen Display CSS code in GTK 3, leaving the OSD pop-up rather poorly
styled.
For your convenience, here's some CSS code for the OSD taken from a
fairly well-done theme that based itself at least in part on Ambiance,
Zukitwo:
(The following code came from gtk-main-common.css in Zukitwo, though
it could just go in gtk-main.css in Ambiance and Radiance:)
/***
* OSD *
***/
@define-color osd_highlight #ff;
@define-color osd_lowlight #525252;
@define-color osd_base #212526;
@define-color osd_fg #ededed;
@define-color osd_bg alpha(@osd_base, 0.80);
@define-color osd_bg_backdrop alpha(shade(@osd_base, 1.40), 0.90);
@define-color osd_text_shadow alpha(black, 0.75);
@define-color osd_toolbar_bg_a alpha(@osd_base, 0.80);
@define-color osd_toolbar_bg_b alpha(#101010, 0.80);
@define-color osd_toolbar_bg_c alpha(shade(@osd_base, 1.02), 0.80);
@define-color osd_button_bg_a alpha(@osd_highlight, 0.16);
@define-color osd_button_bg_b alpha(@osd_lowlight, 0.05);
@define-color osd_button_bg_c alpha(@osd_highlight, 0.12);
@define-color osd_button_bg_insensitive alpha(@osd_highlight, 0.25);
@define-color osd_button_bg_insensitive_active alpha(@osd_highlight, 0.16);
@define-color osd_button_bg_hover_a alpha(@osd_highlight, 0.28);
@define-color osd_button_bg_hover_b alpha(@osd_lowlight, 0.14);
@define-color osd_button_bg_hover_c alpha(@osd_highlight, 0.14);
@define-color osd_button_bg_active_a alpha(@osd_lowlight, 0.18);
@define-color osd_button_bg_active_b alpha(@osd_highlight, 0.23);
@define-color osd_button_bg_active_c alpha(@osd_lowlight, 0.17);
@define-color osd_button_bg_backdrop alpha(@osd_highlight, 0.18);
@define-color osd_button_bg_backdrop_hover alpha(@osd_highlight, 0.25);
@define-color osd_button_bg_backdrop_active alpha(@osd_highlight, 0.35);
@define-color osd_button_bg_backdrop_insensitive alpha(@osd_highlight, 0.08);
@define-color osd_button_fg_backdrop shade(@osd_fg, 0.70);
@define-color osd_button_fg_backdrop_active shade(@osd_fg, 0.95);
@define-color osd_button_fg shade(@osd_fg, 0.80);
@define-color osd_button_fg_hover shade(@osd_fg, 0.96);
@define-color osd_button_fg_active shade(@osd_fg, 1.10);
@define-color osd_button_fg_insensitive shade(@osd_fg, 0.70);
@define-color osd_button_border alpha(@osd_highlight, 0.40);
@define-color osd_button_inset shade(@osd_fg, 0.67);
@define-color osd_button_shadow alpha(black, 0.35);
@define-color osd_trough_bg alpha(@osd_button_fg, 0.10);
(The following code came from gtk-widgets.css in Zukitwo, and should
probably go there in Ambaince and Radiance:)
/***
* OSD *
***/
GtkWindow.osd {
color: @osd_fg;
background-color: @osd_bg;
}
GtkOverlay.osd {
background-color: transparent;
}
.osd .button,
.osd .button:active {
border-width: 1px;
border-style: solid;
border-image: none;
border-color: @osd_button_border;
border-radius: 5px;
}
.osd .button {
padding: 4px;
background-image: linear-gradient(to bottom,
@osd_button_bg_a,
@osd_button_bg_b 68%,
@osd_button_bg_c
);
color: @osd_button_fg;
text-shadow: 0 -1px @osd_button_shadow;
icon-shadow: 0 -1px @osd_button_shadow;
}
.osd .button,
.osd .button:prelight,
.osd .button:active {
background-color: transparent;
}
.osd .button:insensitive {
background-image: none;
background-color: @osd_button_bg_insensitive;
}
.osd .button:active:insensitive {
background-image: none;
background-color: @osd_button_bg_insensitive_active;
}
.osd .button *:hover {
color: @osd_button_fg_hover;
}
.osd .button *:active,
.osd .button *:hover:active {
color: @osd_button_fg_active;
}
.osd .button *:insensitive,
.osd .button *:insensitive:active {
color: @osd_button_fg_insensitive;
}
.osd .button:hover {
background-image: linear-gradient(to bottom,
@osd_button_bg_hover_a,
@osd_button_bg_hover_b 68%,
@osd_button_bg_hover_c
);
}
.osd .button:active,
.osd .button:active:hover,
.osd GtkMenuButton.button:active {
background-image: linear-gradient(to bottom,
