Commit 043c444f authored by Adrien Plazas's avatar Adrien Plazas Committed by Alexander Mikhaylenko
Browse files

Move dedicated styles to global CSS files

Fixes Librem5/libhandy#196.
parent 19c36ab5
......@@ -7,3 +7,75 @@
* meaning its priority is lower than themes, settings, applications, and user
* provided styles.
*/
/* Preferences */
HdyPreferencesPage label.h4 {
font-weight: bold;
}
/* Shadows */
hdyleaflet > dimming {
background: rgba(0, 0, 0, 0.12);
}
hdyleaflet > shadow {
min-width: 56px;
min-height: 56px;
}
hdyleaflet > border {
min-width: 1px;
min-height: 1px;
background: rgba(0, 0, 0, 0.05);
}
hdyleaflet > 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);
}
hdyleaflet > 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);
}
hdyleaflet > 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);
}
hdyleaflet > 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);
}
......@@ -8,3 +8,188 @@
* priority is higher than themes and settings, but lower than applications and
* user provided styles.
*/
/* HdyComboRow */
popover list.transparent-background {
border-style: none;
background-color: transparent;
}
/* HdyExpanderRow */
/* Animate the arrow's rotation */
row button.image-button.rotated-checked:checked:dir(ltr) > image,
row button.image-button.rotated-checked:checked:dir(rtl) > image {
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-gtk-icon-transform: rotate(0turn);
}
row button.image-button.rotated-checked:not(checked):dir(ltr) > image {
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-gtk-icon-transform: rotate(-0.25turn);
}
row button.image-button.rotated-checked:not(checked):dir(rtl) > image {
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-gtk-icon-transform: rotate(0.25turn);
}
/* HdyKeypad */
hdykeypad .digit {
font-size: 200%;
font-weight: bold;
}
hdykeypad .letters {
font-size: 70%;
}
hdykeypad .symbol {
font-size: 160%;
}
/* HdyViewSwitcher */
hdyviewswitcher {
margin: 0;
padding: 0;
}
hdyviewswitcher > button {
padding: 0;
margin: 0;
border-radius: 0;
border-top: 0;
border-bottom: 0;
box-shadow: none;
font-size: 1rem;
}
hdyviewswitcher > button:not(:checked):not(:hover) {
background: transparent;
}
hdyviewswitcher > button:not(:only-child):not(:last-child) {
border-right-width: 0px;
}
hdyviewswitcher > button:not(only-child):first-child:not(:checked):not(:hover) {
border-left-color: transparent;
}
hdyviewswitcher > button:not(:checked):not(:hover) + button:not(:checked):not(:hover) {
border-left-color: transparent;
}
hdyviewswitcher > button:not(only-child):last-child:not(:checked):not(:hover) {
border-right-color: transparent;
}
hdyviewswitcher > button:not(:checked):hover:not(:backdrop) {
background-image: image(lighter(@theme_bg_color));
}
hdyviewswitcher > button:not(only-child):first-child:not(:checked):hover {
border-left-color: shade(@borders, 1.15);
}
hdyviewswitcher > button:not(:checked):hover + button:not(:checked):not(:hover) {
border-left-color: shade(@borders, 1.15);
}
hdyviewswitcher > button:not(:checked):not(:hover) + button:not(:checked):hover {
border-left-color: shade(@borders, 1.15);
}
hdyviewswitcher > button:not(only-child):last-child:not(:checked):hover {
border-right-color: shade(@borders, 1.15);
}
headerbar hdyviewswitcher > button:not(:checked):hover:not(:backdrop) {
/* Reimplementation of $button_fill from Adwaita. The shade should be 4% and
* 1% in light and dark mode respectively, so please note the shade is a bit
* too strong in dark mode.
*
* The colors are made only 70% visible to avoid the highlight to be too
* strong.
*/
background-image: linear-gradient(to top, shade(alpha(@theme_bg_color, 0.7), 0.96) 2px, alpha(@theme_bg_color, 0.7));
}
headerbar hdyviewswitcher > button:not(only-child):first-child:not(:checked):hover {
border-left-color: @borders;
}
headerbar hdyviewswitcher > button:not(:checked):hover + button:not(:checked):not(:hover) {
border-left-color: @borders;
}
headerbar hdyviewswitcher > button:not(:checked):not(:hover) + button:not(:checked):hover {
border-left-color: @borders;
}
headerbar hdyviewswitcher > button:not(only-child):last-child:not(:checked):hover {
border-right-color: @borders;
}
hdyviewswitcher > button:not(:checked):hover:backdrop,
headerbar hdyviewswitcher > button:not(:checked):hover:backdrop {
background-image: image(@theme_bg_color);
}
hdyviewswitcher > button > stack > box.narrow {
font-size: 0.75rem;
padding-top: 7px;
padding-bottom: 5px;
}
hdyviewswitcher > button > stack > box.narrow image,
hdyviewswitcher > button > stack > box.narrow label {
padding-left: 8px;
padding-right: 8px;
}
hdyviewswitcher > button box.wide {
padding: 8px 12px;
}
hdyviewswitcher > button > stack > box.wide label:dir(ltr) {
padding-right: 7px;
}
hdyviewswitcher > button > stack > box.wide label:dir(rtl) {
padding-left: 7px;
}
hdyviewswitcher > button > stack > box label.active {
font-weight: bold;
}
hdyviewswitcher > button.needs-attention:active > stack > box label,
hdyviewswitcher > button.needs-attention:checked > stack > box label {
animation: none;
background-image: none;
}
hdyviewswitcher > button.needs-attention > stack > box label {
animation: needs_attention 150ms ease-in;
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3584e4), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
background-position: right 0px, right 1px;
}
hdyviewswitcher > button.needs-attention > stack > box label:backdrop {
background-size: 6px 6px, 0 0;
}
hdyviewswitcher > button.needs-attention > stack > box label:dir(rtl) {
background-position: left 0px, left 1px;
}
hdyviewswitcherbar actionbar > revealer > box {
padding: 0;
}
......@@ -15,16 +15,6 @@
<file preprocess="xml-stripblanks">hdy-view-switcher-button.ui</file>
</gresource>
<gresource prefix="/sm/puri/handy/style">
<file>hdy-combo-row-list.css</file>
<file>hdy-leaflet.css</file>
<file>hdy-expander-row-arrow.css</file>
<file>hdy-keypad-digit.css</file>
<file>hdy-keypad-letters.css</file>
<file>hdy-keypad-symbol.css</file>
<file>hdy-text.css</file>
<file>hdy-view-switcher.css</file>
<file>hdy-view-switcher-bar-box.css</file>
<file>hdy-view-switcher-button.css</file>
<file compressed="true">handy-fallback.css</file>
<file compressed="true">handy-override.css</file>
</gresource>
......
/* Make the list's background transparent. */
list {
border-style: none;
background-color: transparent;
}
......@@ -9,7 +9,6 @@
#include <glib/gi18n-lib.h>
#include "hdy-list-box.h"
#include "hdy-style-private.h"
/**
* SECTION:hdy-combo-row
......@@ -375,18 +374,6 @@ hdy_combo_row_class_init (HdyComboRowClass *klass)
gtk_widget_class_bind_template_child_private (widget_class, HdyComboRow, popover);
}
static void
list_init (HdyComboRow *self)
{
HdyComboRowPrivate *priv = hdy_combo_row_get_instance_private (self);
g_autoptr (GtkCssProvider) provider = gtk_css_provider_new ();
gtk_css_provider_load_from_resource (provider, "/sm/puri/handy/style/hdy-combo-row-list.css");
gtk_style_context_add_provider (gtk_widget_get_style_context (GTK_WIDGET (priv->list)),
GTK_STYLE_PROVIDER (provider),
HDY_STYLE_PROVIDER_PRIORITY);
}
static void
hdy_combo_row_init (HdyComboRow *self)
{
......@@ -394,8 +381,6 @@ hdy_combo_row_init (HdyComboRow *self)
gtk_widget_init_template (GTK_WIDGET (self));
list_init (self);
priv->selected_index = -1;
gtk_list_box_set_header_func (priv->list, hdy_list_box_separator_header, NULL, NULL);
......
......@@ -34,6 +34,9 @@
<property name="margin_top">12</property>
<property name="selection_mode">none</property>
<property name="visible">True</property>
<style>
<class name="transparent-background"/>
</style>
</object>
</child>
</object>
......
/* Animate the arrow's rotation */
row button:checked:dir(ltr) image,
row button:checked:dir(rtl) image {
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-gtk-icon-transform: rotate(0turn);
}
row button:not(checked):dir(ltr) image {
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-gtk-icon-transform: rotate(-0.25turn);
}
row button:not(checked):dir(rtl) image {
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-gtk-icon-transform: rotate(0.25turn);
}
......@@ -8,7 +8,6 @@
#include "hdy-expander-row.h"
#include <glib/gi18n-lib.h>
#include "hdy-style-private.h"
/**
* SECTION:hdy-expander-row
......@@ -51,13 +50,6 @@ static GParamSpec *props[LAST_PROP];
static void
arrow_init (HdyExpanderRow *self)
{
HdyExpanderRowPrivate *priv = hdy_expander_row_get_instance_private (self);
g_autoptr (GtkCssProvider) provider = gtk_css_provider_new ();
gtk_css_provider_load_from_resource (provider, "/sm/puri/handy/style/hdy-expander-row-arrow.css");
gtk_style_context_add_provider (gtk_widget_get_style_context (GTK_WIDGET (priv->image)),
GTK_STYLE_PROVIDER (provider),
HDY_STYLE_PROVIDER_PRIORITY);
}
static void
......
......@@ -29,6 +29,7 @@
<property name="visible">True</property>
<style>
<class name="image-button"/>
<class name="rotated-checked"/>
</style>
<child>
<object class="GtkImage" id="image">
......
......@@ -7,7 +7,6 @@
#include "config.h"
#include <glib/gi18n-lib.h>
#include "hdy-style-private.h"
#include "hdy-keypad-button-private.h"
/**
......@@ -256,23 +255,9 @@ static void
hdy_keypad_button_init (HdyKeypadButton *self)
{
HdyKeypadButtonPrivate *priv = hdy_keypad_button_get_instance_private(self);
g_autoptr (GtkCssProvider) provider_digit = NULL;
g_autoptr (GtkCssProvider) provider_letters = NULL;
gtk_widget_init_template (GTK_WIDGET (self));
provider_digit = gtk_css_provider_new ();
gtk_css_provider_load_from_resource (provider_digit, "/sm/puri/handy/style/hdy-keypad-digit.css");
gtk_style_context_add_provider (gtk_widget_get_style_context (GTK_WIDGET (priv->label)),
GTK_STYLE_PROVIDER (provider_digit),
HDY_STYLE_PROVIDER_PRIORITY);
provider_letters = gtk_css_provider_new ();
gtk_css_provider_load_from_resource (provider_letters, "/sm/puri/handy/style/hdy-keypad-letters.css");
gtk_style_context_add_provider (gtk_widget_get_style_context (GTK_WIDGET (priv->secondary_label)),
GTK_STYLE_PROVIDER (provider_letters),
HDY_STYLE_PROVIDER_PRIORITY);
priv->symbols = NULL;
}
......
hdykeypad .digit {
font-size: 200%;
font-weight: bold;
}
hdykeypad .letters {
font-size: 70%;
}
hdykeypad .symbol {
font-size: 160%;
}
......@@ -7,7 +7,6 @@
#include "config.h"
#include <glib/gi18n-lib.h>
#include "hdy-style-private.h"
#include "hdy-keypad.h"
#include "hdy-keypad-button-private.h"
......@@ -214,25 +213,6 @@ hdy_keypad_get_property (GObject *object,
}
static void
hdy_keypad_constructed (GObject *object)
{
HdyKeypadPrivate *priv = hdy_keypad_get_instance_private (HDY_KEYPAD (object));
g_autoptr (GtkCssProvider) provider = NULL;
G_OBJECT_CLASS (hdy_keypad_parent_class)->constructed (object);
provider = gtk_css_provider_new ();
gtk_css_provider_load_from_resource (provider, "/sm/puri/handy/style/hdy-keypad-symbol.css");
gtk_style_context_add_provider (gtk_widget_get_style_context (priv->label_asterisk),
GTK_STYLE_PROVIDER (provider),
HDY_STYLE_PROVIDER_PRIORITY);
gtk_style_context_add_provider (gtk_widget_get_style_context (priv->label_hash),
GTK_STYLE_PROVIDER (provider),
HDY_STYLE_PROVIDER_PRIORITY);
}
static void
hdy_keypad_finalize (GObject *object)
{
......@@ -252,7 +232,6 @@ hdy_keypad_class_init (HdyKeypadClass *klass)
GtkWidgetClass *widget_class = GTK_WIDGET_CLASS (klass);
object_class->finalize = hdy_keypad_finalize;
object_class->constructed = hdy_keypad_constructed;
object_class->set_property = hdy_keypad_set_property;
object_class->get_property = hdy_keypad_get_property;
......
......@@ -3698,8 +3698,7 @@ hdy_leaflet_init (HdyLeaflet *self)
priv->tracker = hdy_swipe_tracker_new (HDY_SWIPEABLE (self));
g_object_set (priv->tracker, "orientation", priv->orientation, "enabled", FALSE, NULL);
priv->shadow_helper = hdy_shadow_helper_new (widget,
"/sm/puri/handy/style/hdy-leaflet.css");
priv->shadow_helper = hdy_shadow_helper_new (widget);
gtk_widget_set_has_window (widget, FALSE);
gtk_widget_set_can_focus (widget, FALSE);
......
hdyleaflet > dimming {
background: rgba(0, 0, 0, 0.12);
}
hdyleaflet > shadow {
min-width: 56px;
min-height: 56px;
}
hdyleaflet > border {
min-width: 1px;
min-height: 1px;
background: rgba(0, 0, 0, 0.05);
}
hdyleaflet > 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);
}
hdyleaflet > 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);
}
hdyleaflet > 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);
}
hdyleaflet > 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);
}
......@@ -7,6 +7,7 @@
#include "hdy-main-private.h"
#include <gio/gio.h>
#include <glib/gi18n-lib.h>
#include <gtk/gtk.h>
#include "gconstructorprivate.h"
#include "hdy-style-private.h"
......
......@@ -263,7 +263,6 @@ static void
hdy_preferences_group_init (HdyPreferencesGroup *self)
{
HdyPreferencesGroupPrivate *priv = hdy_preferences_group_get_instance_private (self);
g_autoptr (GtkCssProvider) provider = gtk_css_provider_new ();
gtk_widget_init_template (GTK_WIDGET (self));
......@@ -272,11 +271,6 @@ hdy_preferences_group_init (HdyPreferencesGroup *self)
update_description_visibility (self);
update_title_visibility (self);
update_listbox_visibility (self);
gtk_css_provider_load_from_resource (provider, "/sm/puri/handy/style/hdy-text.css");
gtk_style_context_add_provider (gtk_widget_get_style_context (GTK_WIDGET (priv->title)),
GTK_STYLE_PROVIDER (provider),
GTK_STYLE_PROVIDER_PRIORITY_FALLBACK);
}
/**
......
......@@ -18,8 +18,7 @@ G_BEGIN_DECLS
G_DECLARE_FINAL_TYPE (HdyShadowHelper, hdy_shadow_helper, HDY, SHADOW_HELPER, GObject)
HdyShadowHelper *hdy_shadow_helper_new (GtkWidget *widget,
const gchar *css_path);
HdyShadowHelper *hdy_shadow_helper_new (GtkWidget *widget);
void hdy_shadow_helper_clear_cache (HdyShadowHelper *self);
......
......@@ -29,8 +29,6 @@ struct _HdyShadowHelper
GObject parent_instance;
GtkWidget *widget;
gchar *css_path;
GtkCssProvider *provider;
gboolean is_cache_valid;
......@@ -51,7 +49,6 @@ G_DEFINE_TYPE (HdyShadowHelper, hdy_shadow_helper, G_TYPE_OBJECT);
enum {
PROP_0,
PROP_WIDGET,
PROP_CSS_PATH,
LAST_PROP,
};
......@@ -82,10 +79,6 @@ create_context (HdyShadowHelper *self,
context = gtk_style_context_new ();
gtk_style_context_set_path (context, path);
gtk_style_context_add_provider (context,
GTK_STYLE_PROVIDER (self->provider),
HDY_STYLE_PROVIDER_PRIORITY);
g_type_class_unref (enum_class);
return context;
......@@ -187,18 +180,6 @@ cache_shadow (HdyShadowHelper *self,
self->last_scale = scale;