Commit 9bd865a7 authored by Adrien Plazas's avatar Adrien Plazas
Browse files

Drop the hdy prefix from CSS node names

This make the CSS node names be the widget's name, in lowercase, with no
separator, and without the hdy prefix. This makes the class names more
generic, making them blend better with the names usedin Adwaita.

This also updates the node names where they are used.

Fixes Librem5/libhandy#190.
parent 40e8ec35
......@@ -3,6 +3,6 @@ stacksidebar list {
border-right-width: 0px;
}
hdycarousel.horizontal .carousel-icon {
carousel.horizontal .carousel-icon {
-gtk-icon-transform: rotate(90deg);
}
......@@ -10,28 +10,28 @@
/* Preferences */
HdyPreferencesPage label.h4 {
preferencespage label.h4 {
font-weight: bold;
}
/* Shadows */
hdyleaflet > dimming {
leaflet > dimming {
background: rgba(0, 0, 0, 0.12);
}
hdyleaflet > shadow {
leaflet > shadow {
min-width: 56px;
min-height: 56px;
}
hdyleaflet > border {
leaflet > border {
min-width: 1px;
min-height: 1px;
background: rgba(0, 0, 0, 0.05);
}
hdyleaflet > shadow.left {
leaflet > shadow.left {
background-image:
linear-gradient(to right,
alpha(#000, 0.05),
......@@ -43,7 +43,7 @@ hdyleaflet > shadow.left {
alpha(#000, 0) 24px);
}
hdyleaflet > shadow.right {
leaflet > shadow.right {
background-image:
linear-gradient(to left,
alpha(#000, 0.05),
......@@ -56,7 +56,7 @@ hdyleaflet > shadow.right {
}
hdyleaflet > shadow.up {
leaflet > shadow.up {
background-image:
linear-gradient(to bottom,
alpha(#000, 0.05),
......@@ -68,7 +68,7 @@ hdyleaflet > shadow.up {
alpha(#000, 0) 24px);
}
hdyleaflet > shadow.down {
leaflet > shadow.down {
background-image:
linear-gradient(to top,
alpha(#000, 0.05),
......
......@@ -38,27 +38,27 @@ row button.image-button.rotated-checked:not(checked):dir(rtl) > image {
/* HdyKeypad */
hdykeypad .digit {
keypad .digit {
font-size: 200%;
font-weight: bold;
}
hdykeypad .letters {
keypad .letters {
font-size: 70%;
}
hdykeypad .symbol {
keypad .symbol {
font-size: 160%;
}
/* HdyViewSwitcher */
hdyviewswitcher {
viewswitcher {
margin: 0;
padding: 0;
}
hdyviewswitcher > button {
viewswitcher > button {
padding: 0;
margin: 0;
border-radius: 0;
......@@ -68,47 +68,47 @@ hdyviewswitcher > button {
font-size: 1rem;
}
hdyviewswitcher > button:not(:checked):not(:hover) {
viewswitcher > button:not(:checked):not(:hover) {
background: transparent;
}
hdyviewswitcher > button:not(:only-child):not(:last-child) {
viewswitcher > button:not(:only-child):not(:last-child) {
border-right-width: 0px;
}
hdyviewswitcher > button:not(only-child):first-child:not(:checked):not(:hover) {
viewswitcher > 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) {
viewswitcher > 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) {
viewswitcher > button:not(only-child):last-child:not(:checked):not(:hover) {
border-right-color: transparent;
}
hdyviewswitcher > button:not(:checked):hover:not(:backdrop) {
viewswitcher > button:not(:checked):hover:not(:backdrop) {
background-image: image(lighter(@theme_bg_color));
}
hdyviewswitcher > button:not(only-child):first-child:not(:checked):hover {
viewswitcher > 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) {
viewswitcher > 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 {
viewswitcher > 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 {
viewswitcher > button:not(only-child):last-child:not(:checked):hover {
border-right-color: shade(@borders, 1.15);
}
headerbar hdyviewswitcher > button:not(:checked):hover:not(:backdrop) {
headerbar viewswitcher > 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.
......@@ -119,62 +119,62 @@ headerbar hdyviewswitcher > button:not(:checked):hover:not(:backdrop) {
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 {
headerbar viewswitcher > button:not(only-child):first-child:not(:checked):hover {
border-left-color: @borders;
}
headerbar hdyviewswitcher > button:not(:checked):hover + button:not(:checked):not(:hover) {
headerbar viewswitcher > button:not(:checked):hover + button:not(:checked):not(:hover) {
border-left-color: @borders;
}
headerbar hdyviewswitcher > button:not(:checked):not(:hover) + button:not(:checked):hover {
headerbar viewswitcher > button:not(:checked):not(:hover) + button:not(:checked):hover {
border-left-color: @borders;
}
headerbar hdyviewswitcher > button:not(only-child):last-child:not(:checked):hover {
headerbar viewswitcher > 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 {
viewswitcher > button:not(:checked):hover:backdrop,
headerbar viewswitcher > button:not(:checked):hover:backdrop {
background-image: image(@theme_bg_color);
}
hdyviewswitcher > button > stack > box.narrow {
viewswitcher > 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 {
viewswitcher > button > stack > box.narrow image,
viewswitcher > button > stack > box.narrow label {
padding-left: 8px;
padding-right: 8px;
}
hdyviewswitcher > button box.wide {
viewswitcher > button box.wide {
padding: 8px 12px;
}
hdyviewswitcher > button > stack > box.wide label:dir(ltr) {
viewswitcher > button > stack > box.wide label:dir(ltr) {
padding-right: 7px;
}
hdyviewswitcher > button > stack > box.wide label:dir(rtl) {
viewswitcher > button > stack > box.wide label:dir(rtl) {
padding-left: 7px;
}
hdyviewswitcher > button > stack > box label.active {
viewswitcher > button > stack > box label.active {
font-weight: bold;
}
hdyviewswitcher > button.needs-attention:active > stack > box label,
hdyviewswitcher > button.needs-attention:checked > stack > box label {
viewswitcher > button.needs-attention:active > stack > box label,
viewswitcher > button.needs-attention:checked > stack > box label {
animation: none;
background-image: none;
}
hdyviewswitcher > button.needs-attention > stack > box label {
viewswitcher > 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;
......@@ -182,14 +182,14 @@ hdyviewswitcher > button.needs-attention > stack > box label {
background-position: right 0px, right 1px;
}
hdyviewswitcher > button.needs-attention > stack > box label:backdrop {
viewswitcher > button.needs-attention > stack > box label:backdrop {
background-size: 6px 6px, 0 0;
}
hdyviewswitcher > button.needs-attention > stack > box label:dir(rtl) {
viewswitcher > button.needs-attention > stack > box label:dir(rtl) {
background-position: left 0px, left 1px;
}
hdyviewswitcherbar actionbar > revealer > box {
viewswitcherbar actionbar > revealer > box {
padding: 0;
}
......@@ -958,7 +958,7 @@ hdy_carousel_class_init (HdyCarouselClass *klass)
gtk_widget_class_bind_template_callback (widget_class, notify_spacing_cb);
gtk_widget_class_bind_template_callback (widget_class, animation_stopped_cb);
gtk_widget_class_set_css_name (widget_class, "hdycarousel");
gtk_widget_class_set_css_name (widget_class, "carousel");
}
static void
......
......@@ -315,7 +315,7 @@ hdy_column_class_init (HdyColumnClass *klass)
g_object_class_install_properties (object_class, LAST_PROP, props);
gtk_widget_class_set_css_name (widget_class, "hdycolumn");
gtk_widget_class_set_css_name (widget_class, "column");
}
static void
......
......@@ -285,7 +285,7 @@ hdy_keypad_class_init (HdyKeypadClass *klass)
gtk_widget_class_bind_template_callback(widget_class, long_press_zero_cb);
gtk_widget_class_set_accessible_role (widget_class, ATK_ROLE_DIAL);
gtk_widget_class_set_css_name (widget_class, "hdykeypad");
gtk_widget_class_set_css_name (widget_class, "keypad");
}
......
......@@ -3666,7 +3666,7 @@ hdy_leaflet_class_init (HdyLeafletClass *klass)
gtk_container_class_install_child_properties (container_class, LAST_CHILD_PROP, child_props);
gtk_widget_class_set_accessible_role (widget_class, ATK_ROLE_PANEL);
gtk_widget_class_set_css_name (widget_class, "hdyleaflet");
gtk_widget_class_set_css_name (widget_class, "leaflet");
}
GtkWidget *
......
......@@ -249,7 +249,7 @@ hdy_preferences_group_class_init (HdyPreferencesGroupClass *klass)
g_object_class_install_properties (object_class, LAST_PROP, props);
gtk_widget_class_set_css_name (widget_class, "hdypreferencesgroup");
gtk_widget_class_set_css_name (widget_class, "preferencesgroup");
gtk_widget_class_set_template_from_resource (widget_class,
"/sm/puri/handy/ui/hdy-preferences-group.ui");
gtk_widget_class_bind_template_child_private (widget_class, HdyPreferencesGroup, description);
......
......@@ -165,7 +165,7 @@ hdy_preferences_page_class_init (HdyPreferencesPageClass *klass)
gtk_widget_class_bind_template_child_private (widget_class, HdyPreferencesPage, box);
gtk_widget_class_bind_template_child_private (widget_class, HdyPreferencesPage, viewport);
gtk_widget_class_set_css_name (widget_class, "HdyPreferencesPage");
gtk_widget_class_set_css_name (widget_class, "preferencespage");
}
static void
......
......@@ -1137,7 +1137,7 @@ hdy_squeezer_class_init (HdySqueezerClass *klass)
gtk_container_class_install_child_properties (container_class, LAST_CHILD_PROP, child_props);
gtk_widget_class_set_css_name (widget_class, "hdysqueezer");
gtk_widget_class_set_css_name (widget_class, "squeezer");
}
static void
......
......@@ -171,7 +171,7 @@ hdy_view_switcher_bar_class_init (HdyViewSwitcherBarClass *klass)
g_object_class_install_properties (object_class, LAST_PROP, props);
gtk_widget_class_set_css_name (widget_class, "hdyviewswitcherbar");
gtk_widget_class_set_css_name (widget_class, "viewswitcherbar");
gtk_widget_class_set_template_from_resource (widget_class,
"/sm/puri/handy/ui/hdy-view-switcher-bar.ui");
......
......@@ -249,10 +249,10 @@ hdy_view_switcher_button_class_init (HdyViewSwitcherButtonClass *klass)
g_object_class_install_properties (object_class, LAST_PROP, props);
/* We probably should set the class's CSS name to "hdyviewswitcherbutton"
/* We probably should set the class's CSS name to "viewswitcherbutton"
* here, but it doesn't work because GtkCheckButton hardcodes it to "button"
* on instanciation, and the functions required to override it are private.
* In the meantime, we can use the "hdyviewswitcher > button" CSS selector as
* In the meantime, we can use the "viewswitcher > button" CSS selector as
* a fairly safe fallback.
*/
......
......@@ -576,7 +576,7 @@ hdy_view_switcher_class_init (HdyViewSwitcherClass *klass)
g_object_class_install_properties (object_class, LAST_PROP, props);
gtk_widget_class_set_css_name (widget_class, "hdyviewswitcher");
gtk_widget_class_set_css_name (widget_class, "viewswitcher");
}
static void
......
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