Commit 59b51e94 authored by Alexander Mikhaylenko's avatar Alexander Mikhaylenko Committed by Adrien Plazas

theme: Split shared style into shared and fallback

The fact the shared style is loaded at override priority is causing
problems for elementary: #273

While window corners are fixed by the previous commit, they aren't the
only area that they may want to style. Split the part that's just visuals
into a separate stylesheet named fallback.css, and load it at a fallback
priority for all stylesheets, leave shared for critical styles, such as
layout.
parent 54d36f0a
Pipeline #55435 passed with stages
in 17 minutes and 27 seconds
......@@ -4,6 +4,7 @@
<file preprocess="xml-stripblanks">icons/hdy-expander-arrow-symbolic.svg</file>
<file compressed="true">themes/Adwaita.css</file>
<file compressed="true">themes/Adwaita-dark.css</file>
<file compressed="true">themes/fallback.css</file>
<file compressed="true">themes/shared.css</file>
</gresource>
<gresource prefix="/sm/puri/handy/ui">
......
......@@ -135,6 +135,19 @@ hdy_themes_queue_update (GtkCssProvider *css_provider)
NULL);
}
static void
load_fallback_style (void)
{
g_autoptr (GtkCssProvider) css_provider = NULL;
css_provider = gtk_css_provider_new ();
gtk_style_context_add_provider_for_screen (gdk_screen_get_default (),
GTK_STYLE_PROVIDER (css_provider),
GTK_STYLE_PROVIDER_PRIORITY_FALLBACK);
gtk_css_provider_load_from_resource (css_provider, HDY_THEMES_PATH"fallback.css");
}
/**
* hdy_style_init:
*
......@@ -170,6 +183,8 @@ hdy_style_init (void)
hdy_themes_update (css_provider);
load_fallback_style ();
g_once_init_leave (&guard, 1);
}
......
......@@ -5,8 +5,6 @@ row > box.header { margin-left: 12px; margin-right: 12px; min-height: 50px; }
row > box.header > box.title { margin-top: 8px; margin-bottom: 8px; }
popover.combo list { min-width: 200px; }
row.expander { background-color: transparent; }
row.expander list.nested > row { background-color: alpha(#353535, 0.5); border-color: alpha(#1b1b1b, 0.7); border-style: solid; border-width: 1px 0px 0px 0px; }
......@@ -61,6 +59,9 @@ avatar.color8 { background-image: linear-gradient(#cdab8f, #865d3c); color: #e5d
avatar.contrasted { color: #fff; }
/*************************** Check and Radio buttons * */
popover.combo list { min-width: 200px; }
window.csd.unified:not(.solid-csd), window.csd.unified:not(.solid-csd) headerbar { border-radius: 0; }
.windowhandle, .windowhandle * { -GtkWidget-window-dragging: true; }
......
......@@ -5,8 +5,6 @@ row > box.header { margin-left: 12px; margin-right: 12px; min-height: 50px; }
row > box.header > box.title { margin-top: 8px; margin-bottom: 8px; }
popover.combo list { min-width: 200px; }
row.expander { background-color: transparent; }
row.expander list.nested > row { background-color: alpha(#f6f5f4, 0.5); border-color: alpha(#cdc7c2, 0.7); border-style: solid; border-width: 1px 0px 0px 0px; }
......@@ -61,6 +59,9 @@ avatar.color8 { background-image: linear-gradient(#cdab8f, #865d3c); color: #e5d
avatar.contrasted { color: #fff; }
/*************************** Check and Radio buttons * */
popover.combo list { min-width: 200px; }
window.csd.unified:not(.solid-csd), window.csd.unified:not(.solid-csd) headerbar { border-radius: 0; }
.windowhandle, .windowhandle * { -GtkWidget-window-dragging: true; }
......
// Include base styling.
@import 'fallback-base';
@import 'shared-base';
// HdyComboRow
......
@import 'definitions';
// HdyActionRow
row {
label.subtitle {
font-size: smaller;
opacity: 0.55;
text-shadow: none;
}
> box.header {
margin-left: 12px;
margin-right: 12px;
min-height: 50px;
> box.title {
margin-top: 8px;
margin-bottom: 8px;
}
}
}
// HdyExpanderRow
row.expander {
// Drop transparent background on expander rows to let nested rows handle it,
// avoiding double highlights.
background-color: transparent;
list.nested > row {
background-color: hdyalpha($bg_color, 0.5);
border-color: hdyalpha($borders_color, 0.7);
border-style: solid;
border-width: 1px 0px 0px 0px;
}
// HdyExpanderRow arrow rotation
image.expander-row-arrow {
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
&:checked image.expander-row-arrow {
-gtk-icon-transform: rotate(0turn);
}
&:not(:checked) image.expander-row-arrow {
opacity: 0.55;
text-shadow: none;
&:dir(ltr) {
-gtk-icon-transform: rotate(-0.25turn);
}
&:dir(rtl) {
-gtk-icon-transform: rotate(0.25turn);
}
}
&:checked image.expander-row-arrow:not(:disabled) {
color: $selected_bg_color;
}
& image.expander-row-arrow:disabled {
color: $insensitive_fg_color;
}
}
// Preferences
preferencespage label.h4 {
font-weight: bold;
}
// Shadows
deck,
leaflet {
> dimming {
background: rgba(0, 0, 0, 0.12);
}
> border {
min-width: 1px;
min-height: 1px;
background: rgba(0, 0, 0, 0.05);
}
> shadow {
min-width: 56px;
min-height: 56px;
&.left { @include background-shadow(to right); }
&.right { @include background-shadow(to left); }
&.up { @include background-shadow(to bottom); }
&.down { @include background-shadow(to top); }
}
}
// Avatar
avatar {
border-radius: 9999px;
-gtk-outline-radius: 9999px;
font-weight: bold;
// The list of colors to generate avatars.
// Each avatar color is rapresented by a font color, a gradient start color and a gradient stop color.
// There are 8 differnt colors for avtars in the list if you change the number of them you
// need to update the NUMBER_OF_COLORS in src/hdy-avatar.c.
// The 2D list has this form: ((font-color, gradient-top-color, gradient-bottom-color)).
$avatarcolorlist: (
(#ffe5c5, #ffbe6f, #ed6f00), // orange
(#f9f4e1, #f8e45c, #e5a50a), // gold
(#e7c2e8, #dc8add, #8a3ea3), // purple
(#cfe1f5, #99c1f1, #337fdc), // blue
(#d8d7d3, #c0bfbc, #6e6d71), // gray
(#cbf7d5, #8de6ae, #29ae71), // green
(#f6c8c4, #f67365, #d91a23), // red
(#e5d6ca, #cdab8f, #865d3c), // brown
);
@for $i from 1 through length($avatarcolorlist) {
&.color#{$i} {
$avatarcolor: nth($avatarcolorlist, $i);
background-image: linear-gradient(nth($avatarcolor, 2), nth($avatarcolor, 3));
color: nth($avatarcolor, 1);
}
}
&.contrasted { color: #fff; }
}
@import 'definitions';
// HdyActionRow
row {
label.subtitle {
font-size: smaller;
opacity: 0.55;
text-shadow: none;
}
> box.header {
margin-left: 12px;
margin-right: 12px;
min-height: 50px;
> box.title {
margin-top: 8px;
margin-bottom: 8px;
}
}
}
// HdyComboRow
popover.combo list {
min-width: 200px;
}
// HdyExpanderRow
row.expander {
// Drop transparent background on expander rows to let nested rows handle it,
// avoiding double highlights.
background-color: transparent;
list.nested > row {
background-color: hdyalpha($bg_color, 0.5);
border-color: hdyalpha($borders_color, 0.7);
border-style: solid;
border-width: 1px 0px 0px 0px;
}
// HdyExpanderRow arrow rotation
image.expander-row-arrow {
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
&:checked image.expander-row-arrow {
-gtk-icon-transform: rotate(0turn);
}
&:not(:checked) image.expander-row-arrow {
opacity: 0.55;
text-shadow: none;
&:dir(ltr) {
-gtk-icon-transform: rotate(-0.25turn);
}
&:dir(rtl) {
-gtk-icon-transform: rotate(0.25turn);
}
}
&:checked image.expander-row-arrow:not(:disabled) {
color: $selected_bg_color;
}
& image.expander-row-arrow:disabled {
color: $insensitive_fg_color;
}
}
// Preferences
preferencespage label.h4 {
font-weight: bold;
}
// Shadows
deck,
leaflet {
> dimming {
background: rgba(0, 0, 0, 0.12);
}
> border {
min-width: 1px;
min-height: 1px;
background: rgba(0, 0, 0, 0.05);
}
> shadow {
min-width: 56px;
min-height: 56px;
&.left { @include background-shadow(to right); }
&.right { @include background-shadow(to left); }
&.up { @include background-shadow(to bottom); }
&.down { @include background-shadow(to top); }
}
}
// Avatar
avatar {
border-radius: 9999px;
-gtk-outline-radius: 9999px;
font-weight: bold;
// The list of colors to generate avatars.
// Each avatar color is rapresented by a font color, a gradient start color and a gradient stop color.
// There are 8 differnt colors for avtars in the list if you change the number of them you
// need to update the NUMBER_OF_COLORS in src/hdy-avatar.c.
// The 2D list has this form: ((font-color, gradient-top-color, gradient-bottom-color)).
$avatarcolorlist: (
(#ffe5c5, #ffbe6f, #ed6f00), // orange
(#f9f4e1, #f8e45c, #e5a50a), // gold
(#e7c2e8, #dc8add, #8a3ea3), // purple
(#cfe1f5, #99c1f1, #337fdc), // blue
(#d8d7d3, #c0bfbc, #6e6d71), // gray
(#cbf7d5, #8de6ae, #29ae71), // green
(#f6c8c4, #f67365, #d91a23), // red
(#e5d6ca, #cdab8f, #865d3c), // brown
);
@for $i from 1 through length($avatarcolorlist) {
&.color#{$i} {
$avatarcolor: nth($avatarcolorlist, $i);
background-image: linear-gradient(nth($avatarcolor, 2), nth($avatarcolor, 3));
color: nth($avatarcolor, 1);
}
}
&.contrasted { color: #fff; }
}
window.csd.unified:not(.solid-csd) {
// Since corners are masked, there's no need for round corners anymore
&, headerbar {
......
/*************************** Check and Radio buttons * */
row label.subtitle { font-size: smaller; opacity: 0.55; text-shadow: none; }
row > box.header { margin-left: 12px; margin-right: 12px; min-height: 50px; }
row > box.header > box.title { margin-top: 8px; margin-bottom: 8px; }
row.expander { background-color: transparent; }
row.expander list.nested > row { background-color: alpha(#f6f5f4, 0.5); border-color: alpha(#cdc7c2, 0.7); border-style: solid; border-width: 1px 0px 0px 0px; }
row.expander image.expander-row-arrow { transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
row.expander:checked image.expander-row-arrow { -gtk-icon-transform: rotate(0turn); }
row.expander:not(:checked) image.expander-row-arrow { opacity: 0.55; text-shadow: none; }
row.expander:not(:checked) image.expander-row-arrow:dir(ltr) { -gtk-icon-transform: rotate(-0.25turn); }
row.expander:not(:checked) image.expander-row-arrow:dir(rtl) { -gtk-icon-transform: rotate(0.25turn); }
row.expander:checked image.expander-row-arrow:not(:disabled) { color: #3584e4; }
row.expander image.expander-row-arrow:disabled { color: #929595; }
preferencespage label.h4 { font-weight: bold; }
deck > dimming, leaflet > dimming { background: rgba(0, 0, 0, 0.12); }
deck > border, leaflet > border { min-width: 1px; min-height: 1px; background: rgba(0, 0, 0, 0.05); }
deck > shadow, leaflet > shadow { min-width: 56px; min-height: 56px; }
deck > shadow.left, leaflet > shadow.left { background-image: linear-gradient(to right, alpha(#000, 0.05), alpha(#000, 0.01) 40px, alpha(#000, 0) 56px), linear-gradient(to right, alpha(#000, 0.03), alpha(#000, 0.01) 7px, alpha(#000, 0) 24px); }
deck > shadow.right, leaflet > shadow.right { background-image: linear-gradient(to left, alpha(#000, 0.05), alpha(#000, 0.01) 40px, alpha(#000, 0) 56px), linear-gradient(to left, alpha(#000, 0.03), alpha(#000, 0.01) 7px, alpha(#000, 0) 24px); }
deck > shadow.up, leaflet > shadow.up { background-image: linear-gradient(to bottom, alpha(#000, 0.05), alpha(#000, 0.01) 40px, alpha(#000, 0) 56px), linear-gradient(to bottom, alpha(#000, 0.03), alpha(#000, 0.01) 7px, alpha(#000, 0) 24px); }
deck > shadow.down, leaflet > shadow.down { background-image: linear-gradient(to top, alpha(#000, 0.05), alpha(#000, 0.01) 40px, alpha(#000, 0) 56px), linear-gradient(to top, alpha(#000, 0.03), alpha(#000, 0.01) 7px, alpha(#000, 0) 24px); }
avatar { border-radius: 9999px; -gtk-outline-radius: 9999px; font-weight: bold; }
avatar.color1 { background-image: linear-gradient(#ffbe6f, #ed6f00); color: #ffe5c5; }
avatar.color2 { background-image: linear-gradient(#f8e45c, #e5a50a); color: #f9f4e1; }
avatar.color3 { background-image: linear-gradient(#dc8add, #8a3ea3); color: #e7c2e8; }
avatar.color4 { background-image: linear-gradient(#99c1f1, #337fdc); color: #cfe1f5; }
avatar.color5 { background-image: linear-gradient(#c0bfbc, #6e6d71); color: #d8d7d3; }
avatar.color6 { background-image: linear-gradient(#8de6ae, #29ae71); color: #cbf7d5; }
avatar.color7 { background-image: linear-gradient(#f67365, #d91a23); color: #f6c8c4; }
avatar.color8 { background-image: linear-gradient(#cdab8f, #865d3c); color: #e5d6ca; }
avatar.contrasted { color: #fff; }
$variant: 'light';
@import 'fallback-base';
......@@ -13,7 +13,7 @@ fi
SASSC_OPT="-M -t compact"
: ${GTK_SOURCE_PATH:="../../../gtk"}
: ${GTK_TAG:="3.24.13"}
: ${GTK_TAG:="3.24.20"}
if [ ! -d "${GTK_SOURCE_PATH}/gtk/theme/Adwaita" ]; then
echo GTK sources not found at ${GTK_SOURCE_PATH}.
......@@ -34,5 +34,7 @@ sassc $SASSC_OPT -I${GTK_SOURCE_PATH}/gtk/theme/Adwaita \
Adwaita.scss Adwaita.css
sassc $SASSC_OPT -I${GTK_SOURCE_PATH}/gtk/theme/Adwaita \
Adwaita-dark.scss Adwaita-dark.css
sassc $SASSC_OPT -I${GTK_SOURCE_PATH}/gtk/theme/Adwaita \
fallback.scss fallback.css
sassc $SASSC_OPT -I${GTK_SOURCE_PATH}/gtk/theme/Adwaita \
shared.scss shared.css
/*************************** Check and Radio buttons * */
row label.subtitle { font-size: smaller; opacity: 0.55; text-shadow: none; }
row > box.header { margin-left: 12px; margin-right: 12px; min-height: 50px; }
row > box.header > box.title { margin-top: 8px; margin-bottom: 8px; }
popover.combo list { min-width: 200px; }
row.expander { background-color: transparent; }
row.expander list.nested > row { background-color: alpha(#f6f5f4, 0.5); border-color: alpha(#cdc7c2, 0.7); border-style: solid; border-width: 1px 0px 0px 0px; }
row.expander image.expander-row-arrow { transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
row.expander:checked image.expander-row-arrow { -gtk-icon-transform: rotate(0turn); }
row.expander:not(:checked) image.expander-row-arrow { opacity: 0.55; text-shadow: none; }
row.expander:not(:checked) image.expander-row-arrow:dir(ltr) { -gtk-icon-transform: rotate(-0.25turn); }
row.expander:not(:checked) image.expander-row-arrow:dir(rtl) { -gtk-icon-transform: rotate(0.25turn); }
row.expander:checked image.expander-row-arrow:not(:disabled) { color: #3584e4; }
row.expander image.expander-row-arrow:disabled { color: #929595; }
preferencespage label.h4 { font-weight: bold; }
deck > dimming, leaflet > dimming { background: rgba(0, 0, 0, 0.12); }
deck > border, leaflet > border { min-width: 1px; min-height: 1px; background: rgba(0, 0, 0, 0.05); }
deck > shadow, leaflet > shadow { min-width: 56px; min-height: 56px; }
deck > shadow.left, leaflet > shadow.left { background-image: linear-gradient(to right, alpha(#000, 0.05), alpha(#000, 0.01) 40px, alpha(#000, 0) 56px), linear-gradient(to right, alpha(#000, 0.03), alpha(#000, 0.01) 7px, alpha(#000, 0) 24px); }
deck > shadow.right, leaflet > shadow.right { background-image: linear-gradient(to left, alpha(#000, 0.05), alpha(#000, 0.01) 40px, alpha(#000, 0) 56px), linear-gradient(to left, alpha(#000, 0.03), alpha(#000, 0.01) 7px, alpha(#000, 0) 24px); }
deck > shadow.up, leaflet > shadow.up { background-image: linear-gradient(to bottom, alpha(#000, 0.05), alpha(#000, 0.01) 40px, alpha(#000, 0) 56px), linear-gradient(to bottom, alpha(#000, 0.03), alpha(#000, 0.01) 7px, alpha(#000, 0) 24px); }
deck > shadow.down, leaflet > shadow.down { background-image: linear-gradient(to top, alpha(#000, 0.05), alpha(#000, 0.01) 40px, alpha(#000, 0) 56px), linear-gradient(to top, alpha(#000, 0.03), alpha(#000, 0.01) 7px, alpha(#000, 0) 24px); }
avatar { border-radius: 9999px; -gtk-outline-radius: 9999px; font-weight: bold; }
avatar.color1 { background-image: linear-gradient(#ffbe6f, #ed6f00); color: #ffe5c5; }
avatar.color2 { background-image: linear-gradient(#f8e45c, #e5a50a); color: #f9f4e1; }
avatar.color3 { background-image: linear-gradient(#dc8add, #8a3ea3); color: #e7c2e8; }
avatar.color4 { background-image: linear-gradient(#99c1f1, #337fdc); color: #cfe1f5; }
avatar.color5 { background-image: linear-gradient(#c0bfbc, #6e6d71); color: #d8d7d3; }
avatar.color6 { background-image: linear-gradient(#8de6ae, #29ae71); color: #cbf7d5; }
avatar.color7 { background-image: linear-gradient(#f67365, #d91a23); color: #f6c8c4; }
avatar.color8 { background-image: linear-gradient(#cdab8f, #865d3c); color: #e5d6ca; }
avatar.contrasted { color: #fff; }
window.csd.unified:not(.solid-csd), window.csd.unified:not(.solid-csd) headerbar { border-radius: 0; }
.windowhandle, .windowhandle * { -GtkWidget-window-dragging: true; }
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment