From 6462fc6fd4acc40773317ab12d6f5b66c036ec57 Mon Sep 17 00:00:00 2001
From: "Gustavo L de Mello (Guz)" <contact@guz.one>
Date: Fri, 29 Nov 2024 20:30:57 -0300
Subject: [PATCH] feat: radio buttons styling

---
 capytal/forgejo/themes/theme-capytal-dark.css | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/capytal/forgejo/themes/theme-capytal-dark.css b/capytal/forgejo/themes/theme-capytal-dark.css
index fa2e1d5..fa18811 100644
--- a/capytal/forgejo/themes/theme-capytal-dark.css
+++ b/capytal/forgejo/themes/theme-capytal-dark.css
@@ -219,6 +219,8 @@
 :root {
   --icon-check-square-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M12 22c-4.714 0-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22m4.03-13.03a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l4.47-4.47a.75.75 0 0 1 1.06 0' clip-rule='evenodd'/%3E%3C/svg%3E");
   --icon-minus-quare-line-duotone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath d='M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12Z' opacity='.5'/%3E%3Cpath stroke-linecap='round' d='M15 12H9'/%3E%3C/g%3E%3C/svg%3E");
+  --icon-stop-circle-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10M8.586 8.586C8 9.172 8 10.114 8 12s0 2.828.586 3.414S10.114 16 12 16s2.828 0 3.414-.586S16 13.886 16 12s0-2.828-.586-3.414S13.886 8 12 8s-2.828 0-3.414.586' clip-rule='evenodd'/%3E%3C/svg%3E");
+  --icon-stop-circle-line-duotone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10' opacity='.5'/%3E%3Cpath d='M8 12c0-1.886 0-2.828.586-3.414S10.114 8 12 8s2.828 0 3.414.586S16 10.114 16 12s0 2.828-.586 3.414S13.886 16 12 16s-2.828 0-3.414-.586S8 13.886 8 12Z'/%3E%3C/g%3E%3C/svg%3E");
 }
 
 /* Custom styling of individual elements.
@@ -282,6 +284,41 @@ a.ui.primary.label:hover,
   position: absolute;
 }
 
+.ui.radio input[type="radio"] {
+  display: none
+}
+.ui.radio input[type="radio"] + label::before {
+  content: "";
+  width: 1.4rem;
+  height: 1.4rem;
+  top: -0.1rem;
+  left: -2.1rem;
+  -webkit-mask: var(--icon-stop-circle-line-duotone) no-repeat;
+  mask: var(--icon-stop-circle-line-duotone) no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  background-color: currentColor;
+  color: var(--color-primary-text);
+  position: absolute;
+}
+
+.ui.radio input[type="radio"]:checked {
+  display: none
+}
+.ui.radio input[type="radio"]:checked + label::before {
+  content: "";
+  width: 1.4rem;
+  height: 1.4rem;
+  top: -0.1rem;
+  left: -2.1rem;
+  -webkit-mask: var(--icon-stop-circle-bold) no-repeat;
+  mask: var(--icon-stop-circle-bold) no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  background-color: currentColor;
+  color: var(--color-primary-text);
+  position: absolute;
+}
 
 
 .markup input[type="checkbox"] {