diff --git a/src/gui/css-code.h b/src/gui/css-code.h deleted file mode 100644 index a00161ee..00000000 --- a/src/gui/css-code.h +++ /dev/null @@ -1,248 +0,0 @@ -/* css-code.h - * - * Copyright (C) 2015 Erick Pérez Castellanos - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -#ifndef CSS_CODE_H -#define CSS_CODE_H - -#define CSS_TEMPLATE \ -".color-%1$d {"\ -" background-color: %2$s;"\ -"}"\ -".color-%1$d.timed {"\ -" background-color: alpha(%2$s, 0.17);"\ -"}"\ -".color-%1$d.timed widget.edge{"\ -" background-color: %2$s;"\ -"}"\ -".color-%1$d.slanted {"\ -" background-color: transparent;"\ -" background-image: linear-gradient(100deg, /* left edge */"\ -" alpha(%2$s, 0) 5px,"\ -" %2$s 6px,"\ -" %2$s 9px,"\ -" alpha(%2$s, 0) 10px,"\ -" alpha(%2$s, 0) 16px,"\ -" %2$s 17px),"\ -" linear-gradient(280deg, /* right edge */"\ -" alpha(%2$s, 0) 5px,"\ -" %2$s 6px,"\ -" %2$s 9px,"\ -" alpha(%2$s, 0) 10px,"\ -" alpha(%2$s, 0) 16px,"\ -" %2$s 17px),"\ -" linear-gradient(100deg, /* left edge shadow */"\ -" transparent 5px,"\ -" @event_shadow_color 6px,"\ -" @event_shadow_color 9px,"\ -" transparent 10px,"\ -" transparent 16px,"\ -" @event_shadow_color 17px),"\ -" linear-gradient(280deg, /* right edge shadow*/"\ -" transparent 5px,"\ -" @event_shadow_color 6px,"\ -" @event_shadow_color 9px,"\ -" transparent 10px,"\ -" transparent 16px,"\ -" @event_shadow_color 17px);"\ -" border-bottom: 1px solid transparent; /* for the shadow displacement */"\ -" background-size: 50%% 100%%, 50%% 100%%, 50%% 100%%, 50%% 100%%;"\ -" background-position: left bottom, right bottom, left bottom, right bottom;"\ -" background-repeat: no-repeat;"\ -" background-origin: padding-box, padding-box, border-box, border-box;"\ -" background-clip: padding-box, padding-box, border-box, border-box;"\ -"}"\ -".color-%1$d.slanted:backdrop {"\ -" background-image: linear-gradient(100deg, /* left edge */"\ -" alpha(%2$s, 0) 5px,"\ -" %2$s 6px,"\ -" %2$s 9px,"\ -" alpha(%2$s, 0) 10px,"\ -" alpha(%2$s, 0) 16px,"\ -" %2$s 17px),"\ -" linear-gradient(280deg, /* right edge */"\ -" alpha(%2$s, 0) 5px,"\ -" %2$s 6px,"\ -" %2$s 9px,"\ -" alpha(%2$s, 0) 10px,"\ -" alpha(%2$s, 0) 16px,"\ -" %2$s 17px);"\ -"}"\ -".color-%1$d.slanted:dir(rtl) {"\ -" background-image: linear-gradient(80deg, /* left edge */"\ -" alpha(%2$s, 0) 5px,"\ -" %2$s 6px,"\ -" %2$s 9px,"\ -" alpha(%2$s, 0) 10px,"\ -" alpha(%2$s, 0) 16px,"\ -" %2$s 17px),"\ -" linear-gradient(260deg, /* right edge */"\ -" alpha(%2$s, 0) 5px,"\ -" %2$s 6px,"\ -" %2$s 9px,"\ -" alpha(%2$s, 0) 10px,"\ -" alpha(%2$s, 0) 16px,"\ -" %2$s 17px),"\ -" linear-gradient(80deg, /* left edge shadow */"\ -" transparent 5px,"\ -" @event_shadow_color 6px,"\ -" @event_shadow_color 9px,"\ -" transparent 10px,"\ -" transparent 16px,"\ -" @event_shadow_color 17px),"\ -" linear-gradient(260deg, /* right edge shadow*/"\ -" transparent 5px,"\ -" @event_shadow_color 6px,"\ -" @event_shadow_color 9px,"\ -" transparent 10px,"\ -" transparent 16px,"\ -" @event_shadow_color 17px);"\ -"}"\ -".color-%1$d.slanted:dir(rtl):backdrop {"\ -" background-image: linear-gradient(80deg, /* left edge */"\ -" alpha(%2$s, 0) 5px,"\ -" %2$s 6px,"\ -" %2$s 9px,"\ -" alpha(%2$s, 0) 10px,"\ -" alpha(%2$s, 0) 16px,"\ -" %2$s 17px),"\ -" linear-gradient(260deg, /* right edge */"\ -" alpha(%2$s, 0) 5px,"\ -" %2$s 6px,"\ -" %2$s 9px,"\ -" alpha(%2$s, 0) 10px,"\ -" alpha(%2$s, 0) 16px,"\ -" %2$s 17px);"\ -"}"\ -".color-%1$d.slanted-start {"\ -" background-color: transparent;"\ -" background-image: linear-gradient(100deg, /* left edge */"\ -" alpha(%2$s, 0) 5px,"\ -" %2$s 6px,"\ -" %2$s 9px,"\ -" alpha(%2$s, 0) 10px,"\ -" alpha(%2$s, 0) 16px,"\ -" %2$s 17px),"\ -" linear-gradient(100deg, /* left edge shadow */"\ -" transparent 5px,"\ -" @event_shadow_color 6px,"\ -" @event_shadow_color 9px,"\ -" transparent 10px,"\ -" transparent 16px,"\ -" @event_shadow_color 17px);"\ -" border-bottom: 1px solid transparent; /* for the shadow displacement */"\ -" background-position: left bottom, left bottom;"\ -" background-size: 100%% 100%%, 100%% 100%%;"\ -" background-origin: padding-box, border-box;"\ -" background-clip: padding-box, border-box;"\ -"}"\ -".color-%1$d.slanted-start:backdrop {"\ -" background-image: linear-gradient(100deg, /* left edge */"\ -" alpha(%2$s, 0) 5px,"\ -" %2$s 6px,"\ -" %2$s 9px,"\ -" alpha(%2$s, 0) 10px,"\ -" alpha(%2$s, 0) 16px,"\ -" %2$s 17px);"\ -"}"\ -".color-%1$d.slanted-start:dir(rtl) {"\ -" background-image: linear-gradient(260deg, /* right edge */"\ -" alpha(%2$s, 0) 5px,"\ -" %2$s 6px,"\ -" %2$s 9px,"\ -" alpha(%2$s, 0) 10px,"\ -" alpha(%2$s, 0) 16px,"\ -" %2$s 17px),"\ -" linear-gradient(260deg, /* right edge shadow */"\ -" transparent 5px,"\ -" @event_shadow_color 6px,"\ -" @event_shadow_color 9px,"\ -" transparent 10px,"\ -" transparent 16px,"\ -" @event_shadow_color 17px);"\ -" border-bottom: 1px solid transparent; /* for the shadow displacement */"\ -" background-position: right bottom, right bottom;"\ -"}"\ -".color-%1$d.slanted-start:dir(rtl):backdrop {"\ -" background-image: linear-gradient(260deg, /* right edge */"\ -" alpha(%2$s, 0) 5px,"\ -" %2$s 6px,"\ -" %2$s 9px,"\ -" alpha(%2$s, 0) 10px,"\ -" alpha(%2$s, 0) 16px,"\ -" %2$s 17px);"\ -"}"\ -".color-%1$d.slanted-end {"\ -" background-color: transparent;"\ -" background-image: linear-gradient(280deg, /* right edge */"\ -" alpha(%2$s, 0) 5px,"\ -" %2$s 6px,"\ -" %2$s 9px,"\ -" alpha(%2$s, 0) 10px,"\ -" alpha(%2$s, 0) 16px,"\ -" %2$s 17px),"\ -" linear-gradient(280deg, /* right edge shadow */"\ -" transparent 5px,"\ -" @event_shadow_color 6px,"\ -" @event_shadow_color 9px,"\ -" transparent 10px,"\ -" transparent 16px,"\ -" @event_shadow_color 17px);"\ -" border-bottom: 1px solid transparent; /* for the shadow displacement */"\ -" background-position: right bottom, right bottom;"\ -" background-size: 100%% 100%%, 100%% 100%%;"\ -" background-origin: padding-box, border-box;"\ -" background-clip: padding-box, border-box;"\ -"}"\ -".color-%1$d.slanted-end:backdrop {"\ -" background-image: linear-gradient(280deg, /* right edge */"\ -" alpha(%2$s, 0) 5px,"\ -" %2$s 6px,"\ -" %2$s 9px,"\ -" alpha(%2$s, 0) 10px,"\ -" alpha(%2$s, 0) 16px,"\ -" %2$s 17px);"\ -"}"\ -".color-%1$d.slanted-end:dir(rtl) {"\ -" background-image: linear-gradient(80deg, /* left edge */"\ -" alpha(%2$s, 0) 5px,"\ -" %2$s 6px,"\ -" %2$s 9px,"\ -" alpha(%2$s, 0) 10px,"\ -" alpha(%2$s, 0) 16px,"\ -" %2$s 17px),"\ -" linear-gradient(80deg, /* left edge shadow */"\ -" transparent 5px,"\ -" @event_shadow_color 6px,"\ -" @event_shadow_color 9px,"\ -" transparent 10px,"\ -" transparent 16px,"\ -" @event_shadow_color 17px);"\ -" background-position: left bottom, left bottom;"\ -"}"\ -".color-%1$d.slanted-end:dir(rtl):backdrop {"\ -" background-image: linear-gradient(80deg, /* left edge */"\ -" alpha(%2$s, 0) 5px,"\ -" %2$s 6px,"\ -" %2$s 9px,"\ -" alpha(%2$s, 0) 10px,"\ -" alpha(%2$s, 0) 16px,"\ -" %2$s 17px);"\ -"}" - -#endif /* CSS_CODE_H */ - diff --git a/src/gui/gcal-window.c b/src/gui/gcal-window.c index 594494ce..1c0521d4 100644 --- a/src/gui/gcal-window.c +++ b/src/gui/gcal-window.c @@ -19,7 +19,6 @@ #define G_LOG_DOMAIN "GcalWindow" -#include "css-code.h" #include "gcal-agenda-view.h" #include "gcal-calendar-management-dialog.h" #include "gcal-calendar-button.h" @@ -287,7 +286,7 @@ recalculate_calendar_colors_css (GcalWindow *self) color_str = gdk_rgba_to_string (color); color_id = g_quark_from_string (color_str); - new_css_snippets[i] = g_strdup_printf (CSS_TEMPLATE, color_id, color_str); + new_css_snippets[i] = g_strdup_printf (".color-%u { --event-bg-color: %s; }", color_id, color_str); } new_css_data = g_strjoinv ("\n", new_css_snippets); diff --git a/src/theme/events.css b/src/theme/events.css new file mode 100644 index 00000000..459a87a7 --- /dev/null +++ b/src/theme/events.css @@ -0,0 +1,219 @@ +event { + margin: 1px; + font-size: 0.9rem; + background-color: var(--event-bg-color); +} + +event.timed { + background-color: color-mix(in srgb, var(--event-bg-color) 17%, transparent); +} + +event widget.content { + margin: 4px; +} + +event.timed widget.edge { + background-color: var(--event-bg-color); +} + +event.timed, +event:not(.slanted):not(.slanted-start):not(.slanted-end) { + border-radius: 2.5px; +} + +event.timed widget.edge { + border-radius: 2.5px; + min-width: 5px; +} + +event.slanted, +event.slanted-start, +event.slanted-end:dir(rtl) { + padding-left: 16px; + border-radius: 0 2.5px 2.5px 0; +} + +event.slanted, +event.slanted-end, +event.slanted-start:dir(rtl) { + padding-right: 16px; + border-radius: 2.5px 0 0 2.5px; +} + +event:not(.timed).color-dark { + /* Keep in symc with the dark style's event.timed colors */ + color: @light_1; + outline-color: rgba(0, 0, 0, 0.3); +} + +event.timed, +event:not(.timed).color-light { + color: alpha(@dark_5, 0.8); + outline-color: rgba(255, 255, 255, 0.5); +} + +event.slanted { + background-color: transparent; + background-image: linear-gradient(100deg, /* left edge */ + transparent 5px, + var(--event-bg-color) 6px, + var(--event-bg-color) 9px, + transparent 10px, + transparent 16px, + var(--event-bg-color) 17px), + linear-gradient(280deg, /* right edge */ + transparent 5px, + var(--event-bg-color) 6px, + var(--event-bg-color) 9px, + transparent 10px, + transparent 16px, + var(--event-bg-color) 17px); + background-size: 50% 100%, 50% 100%, 50% 100%, 50% 100%; + background-position: left bottom, right bottom, left bottom, right bottom; + background-repeat: no-repeat; + background-origin: padding-box, padding-box, border-box, border-box; + background-clip: padding-box, padding-box, border-box, border-box; +} + +event.slanted:backdrop { + background-image: linear-gradient(100deg, /* left edge */ + transparent 5px, + var(--event-bg-color) 6px, + var(--event-bg-color) 9px, + transparent 10px, + transparent 16px, + var(--event-bg-color) 17px), + linear-gradient(280deg, /* right edge */ + transparent 5px, + var(--event-bg-color) 6px, + var(--event-bg-color) 9px, + transparent 10px, + transparent 16px, + var(--event-bg-color) 17px); +} + +event.slanted:dir(rtl) { + background-image: linear-gradient(80deg, /* left edge */ + transparent 5px, + var(--event-bg-color) 6px, + var(--event-bg-color) 9px, + transparent 10px, + transparent 16px, + var(--event-bg-color) 17px), + linear-gradient(260deg, /* right edge */ + transparent 5px, + var(--event-bg-color) 6px, + var(--event-bg-color) 9px, + transparent 10px, + transparent 16px, + var(--event-bg-color) 17px); +} + +event.slanted:dir(rtl):backdrop { + background-image: linear-gradient(80deg, /* left edge */ + transparent 5px, + var(--event-bg-color) 6px, + var(--event-bg-color) 9px, + transparent 10px, + transparent 16px, + var(--event-bg-color) 17px), + linear-gradient(260deg, /* right edge */ + transparent 5px, + var(--event-bg-color) 6px, + var(--event-bg-color) 9px, + transparent 10px, + transparent 16px, + var(--event-bg-color) 17px); +} + +event.slanted-start { + background-color: transparent; + background-image: linear-gradient(100deg, /* left edge */ + transparent 5px, + var(--event-bg-color) 6px, + var(--event-bg-color) 9px, + transparent 10px, + transparent 16px, + var(--event-bg-color) 17px); + background-position: left bottom, left bottom; + background-size: 100% 100%, 100% 100%; + background-origin: padding-box, border-box; + background-clip: padding-box, border-box; +} + +event.slanted-start:backdrop { + background-image: linear-gradient(100deg, /* left edge */ + transparent 5px, + var(--event-bg-color) 6px, + var(--event-bg-color) 9px, + transparent 10px, + transparent 16px, + var(--event-bg-color) 17px); +} + +event.slanted-start:dir(rtl) { + background-image: linear-gradient(260deg, /* right edge */ + transparent 5px, + var(--event-bg-color) 6px, + var(--event-bg-color) 9px, + transparent 10px, + transparent 16px, + var(--event-bg-color) 17px); + background-position: right bottom, right bottom; +} + +event.slanted-start:dir(rtl):backdrop { + background-image: linear-gradient(260deg, /* right edge */ + transparent 5px, + var(--event-bg-color) 6px, + var(--event-bg-color) 9px, + transparent 10px, + transparent 16px, + var(--event-bg-color) 17px); +} + +event.slanted-end { + background-color: transparent; + background-image: linear-gradient(280deg, /* right edge */ + transparent 5px, + var(--event-bg-color) 6px, + var(--event-bg-color) 9px, + transparent 10px, + transparent 16px, + var(--event-bg-color) 17px); + background-position: right bottom, right bottom; + background-size: 100% 100%, 100% 100%; + background-origin: padding-box, border-box; + background-clip: padding-box, border-box; +} + +event.slanted-end:backdrop { + background-image: linear-gradient(280deg, /* right edge */ + transparent 5px, + var(--event-bg-color) 6px, + var(--event-bg-color) 9px, + transparent 10px, + transparent 16px, + var(--event-bg-color) 17px); +} + +event.slanted-end:dir(rtl) { + background-image: linear-gradient(80deg, /* left edge */ + transparent 5px, + var(--event-bg-color) 6px, + var(--event-bg-color) 9px, + transparent 10px, + transparent 16px, + var(--event-bg-color) 17px); + background-position: left bottom, left bottom; +} + +event.slanted-end:dir(rtl):backdrop { + background-image: linear-gradient(80deg, /* left edge */ + transparent 5px, + var(--event-bg-color) 6px, + var(--event-bg-color) 9px, + transparent 10px, + transparent 16px, + var(--event-bg-color) 17px); +} diff --git a/src/theme/style.css b/src/theme/style.css index 7449c77e..18da6ec0 100644 --- a/src/theme/style.css +++ b/src/theme/style.css @@ -1,3 +1,5 @@ +@import 'events.css'; + @define-color month_separator_color mix(@borders, @dark_5, 0.09); @define-color month_today_color alpha(@accent_bg_color, 0.15); @define-color month_today_hover_color alpha(@accent_bg_color, 0.25); @@ -71,56 +73,6 @@ popover.events button { } -/* - * Event widget - */ - -event { - margin: 1px; - font-size: 0.9rem; -} - -event widget.content { - margin: 4px; -} - -event.timed, -event:not(.slanted):not(.slanted-start):not(.slanted-end) { - border-radius: 2.5px; -} - -event.timed widget.edge { - border-radius: 2.5px; - min-width: 5px; -} - -event.slanted, -event.slanted-start, -event.slanted-end:dir(rtl) { - padding-left: 16px; - border-radius: 0 2.5px 2.5px 0; -} - -event.slanted, -event.slanted-end, -event.slanted-start:dir(rtl) { - padding-right: 16px; - border-radius: 2.5px 0 0 2.5px; -} - -event:not(.timed).color-dark { - /* Keep in symc with the dark style's event.timed colors */ - color: @light_1; - outline-color: rgba(0, 0, 0, 0.3); -} - -event.timed, -event:not(.timed).color-light { - color: alpha(@dark_5, 0.8); - outline-color: rgba(255, 255, 255, 0.5); -} - - /* Event Popover */ popover.event-popover, popover.event-popover > contents { diff --git a/src/theme/theme.gresource.xml b/src/theme/theme.gresource.xml index 004f820c..de0ae233 100644 --- a/src/theme/theme.gresource.xml +++ b/src/theme/theme.gresource.xml @@ -1,6 +1,7 @@ + events.css style.css style-dark.css style-hc.css