From 4ce4f6ea399e94efbc55429583472e99ceb1acbc Mon Sep 17 00:00:00 2001 From: Urtsi Santsi Date: Thu, 16 Jan 2025 07:29:22 +0200 Subject: [PATCH 1/2] Use CSS variables instead of GTK-specific syntax --- src/Animation/main.css | 2 +- src/Box/main.css | 2 +- src/CSS Gradients/main.css | 18 +++++++++--------- src/Drop Zone/main.css | 2 +- src/Level Bars/main.css | 22 +++++++++++----------- src/Map/main.css | 2 +- src/Network Monitor/main.css | 2 +- src/Styling with CSS/main.css | 12 ++++++------ 8 files changed, 31 insertions(+), 31 deletions(-) diff --git a/src/Animation/main.css b/src/Animation/main.css index 51e35a49..072ad206 100644 --- a/src/Animation/main.css +++ b/src/Animation/main.css @@ -2,7 +2,7 @@ min-height: 50px; min-width: 50px; border-radius: 50%; - background-image: linear-gradient(@green_2, @green_5); + background-image: linear-gradient(var(--green-2), var(--green-5)); } .circular { diff --git a/src/Box/main.css b/src/Box/main.css index fee0d55f..e5d02ff1 100644 --- a/src/Box/main.css +++ b/src/Box/main.css @@ -4,7 +4,7 @@ } .border { - border: 3px solid @accent_color; + border: 3px solid var(--accent-color); } .rotate { diff --git a/src/CSS Gradients/main.css b/src/CSS Gradients/main.css index 5fb6e5cf..e7ae0bd4 100644 --- a/src/CSS Gradients/main.css +++ b/src/CSS Gradients/main.css @@ -1,28 +1,28 @@ .linear { - background-image: linear-gradient(@red_3, @yellow_3, @blue_3); + background-image: linear-gradient(var(--red-3), var(--yellow-3), var(--blue-3)); } .radial { - background-image: radial-gradient(@red_3, @yellow_3, @blue_3); + background-image: radial-gradient(var(--red-3), var(--yellow-3), var(--blue-3)); } .conic { - background-image: conic-gradient(@red_3, @yellow_3, @blue_3, @red_3); + background-image: conic-gradient(var(--red-3), var(--yellow-3), var(--blue-3), var(--red-3)); } .repeating-linear { background-image: repeating-linear-gradient( - @red_3, - @yellow_3 15%, - @blue_3 30% + var(--red-3), + var(--yellow-3) 15%, + var(--blue-3) 30% ); } .repeating-radial { background-image: repeating-radial-gradient( - @red_3, - @yellow_3 15%, - @blue_3 30% + var(--red-3), + var(--yellow-3) 15%, + var(--blue-3) 30% ); } diff --git a/src/Drop Zone/main.css b/src/Drop Zone/main.css index c20887fc..c523d45e 100644 --- a/src/Drop Zone/main.css +++ b/src/Drop Zone/main.css @@ -1,6 +1,6 @@ .overlay-drag-area { box-shadow: none; - background-color: alpha(@accent_color, 0.35); + background-color: alpha(var(--accent-color), 0.35); margin: 12px; border-radius: 12px; } diff --git a/src/Level Bars/main.css b/src/Level Bars/main.css index 8318f1f0..330b7f23 100644 --- a/src/Level Bars/main.css +++ b/src/Level Bars/main.css @@ -1,43 +1,43 @@ levelbar block.full { - background-color: @success_color; + background-color: var(--success-color); } levelbar block.half { - background-color: @warning_color; + background-color: var(--warning-color); } levelbar block.low { - background-color: @error_color; + background-color: var(--error-color); } levelbar block.very-weak { - background-color: @red_4; + background-color: var(--red-4); } levelbar block.weak { - background-color: @orange_4; + background-color: var(--orange-4); } levelbar block.moderate { - background-color: @yellow_4; + background-color: var(--yellow-4); } levelbar block.strong { - background-color: @green_4; + background-color: var(--green-4); } .very-weak-label { - color: @red_4; + color: var(--red-4); } .weak-label { - color: @orange_4; + color: var(--orange-4); } .moderate-label { - color: @yellow_4; + color: var(--yellow-4); } .strong-label { - color: @green_4; + color: var(--green-4); } diff --git a/src/Map/main.css b/src/Map/main.css index 3359850a..178070d8 100644 --- a/src/Map/main.css +++ b/src/Map/main.css @@ -1,3 +1,3 @@ .map-marker { - color: @red_2; + color: var(--red-2); } diff --git a/src/Network Monitor/main.css b/src/Network Monitor/main.css index c142ce0b..9414b057 100644 --- a/src/Network Monitor/main.css +++ b/src/Network Monitor/main.css @@ -1,3 +1,3 @@ levelbar block.full { - background-color: @blue_3; + background-color: var(--blue-3); } diff --git a/src/Styling with CSS/main.css b/src/Styling with CSS/main.css index 9cc5c5ea..e07c819a 100644 --- a/src/Styling with CSS/main.css +++ b/src/Styling with CSS/main.css @@ -1,25 +1,25 @@ #css_text { - color: @blue_1; /* Adwaita Named Color */ + color: var(--blue-1); /* Adwaita Named Color */ } .css_text { - color: @green_1; /* Adwaita Named Color */ + color: var(--green-1); /* Adwaita Named Color */ } .my_custom_class { - color: @red_1; + color: var(--red-1); font-weight: bold; text-decoration: underline; } #linked_box > :hover:first-child { - background-color: @destructive_bg_color; + background-color: var(--destructive-bg-color); } #linked_box > :hover:nth-child(2) { - background-color: @success_bg_color; + background-color: var(--success-bg-color); } #linked_box > :hover:last-child { - background-color: @accent_bg_color; + background-color: var(--accent-bg-color); } From 7f1c99a1e08ce3bad61adaeea83928abb8200224 Mon Sep 17 00:00:00 2001 From: Urtsi Santsi Date: Thu, 16 Jan 2025 08:07:03 +0200 Subject: [PATCH 2/2] Format --- src/CSS Gradients/main.css | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/CSS Gradients/main.css b/src/CSS Gradients/main.css index e7ae0bd4..0ed6500e 100644 --- a/src/CSS Gradients/main.css +++ b/src/CSS Gradients/main.css @@ -1,13 +1,26 @@ .linear { - background-image: linear-gradient(var(--red-3), var(--yellow-3), var(--blue-3)); + background-image: linear-gradient( + var(--red-3), + var(--yellow-3), + var(--blue-3) + ); } .radial { - background-image: radial-gradient(var(--red-3), var(--yellow-3), var(--blue-3)); + background-image: radial-gradient( + var(--red-3), + var(--yellow-3), + var(--blue-3) + ); } .conic { - background-image: conic-gradient(var(--red-3), var(--yellow-3), var(--blue-3), var(--red-3)); + background-image: conic-gradient( + var(--red-3), + var(--yellow-3), + var(--blue-3), + var(--red-3) + ); } .repeating-linear {