Refactoring

templates/user/auth/signup_inner.tmpl

@@ -38,7 +38,7 @@
 				{{template "user/auth/captcha" .}}
 
 				{{ if (.PrivacyPolicyURL) }}
-					<div id="consent_container">
+					<div id="consent-container">
 						<label>
 							<input id="consent" name="consent" type="checkbox">
 							{{ ctx.Locale.Tr "consent_agree" .PrivacyPolicyURL }}

web_src/css/index.css

@@ -77,31 +77,4 @@
 @tailwind utilities;
 @import "./helpers.css";
 
-/* git724 tweaks below this line */
+@import "./tweaks/tweaks.css";
-
-#consent_container {
-  margin-bottom: .6em;
-
-  label {
-    input {
-      margin-right: .75em;
-      margin-top: .2em;
-      margin-bottom: .4em;
-    }
-
-    &::after {
-      content: "*";
-      color: var(--color-red);
-    }
-  }
-
-  .help {
-    margin-left: 0 !important;
-  }
-}
-
-.captcha-img {
-  width: min(400px, 100%);
-
-  /* rest in markup/dark.css */
-}

web_src/css/markup/dark.css

@@ -12,11 +12,5 @@
   display: unset;
 }
 
-/*
+/* The reason we're doing this *here* is because dark vanilla templates always use this file, and there's no other way to detect dark theme */
-git724 tweaks; the reason we're doing this here is because dark vanilla templates use this
+@import "../tweaks/tweaks-dark.css";
-there's no other way to do it
-*/
-
-.captcha-img {
-  filter: invert();
-}

web_src/css/tweaks/tweaks-dark.css

@@ -0,0 +1,5 @@
+/* git724 tweaks - dark theme only */
+
+.captcha-img {
+  filter: invert();
+}

web_src/css/tweaks/tweaks.css

@@ -0,0 +1,39 @@
+/*
+git724 tweaks
+Note that not all changes are here, only those that don't belong anywhere else
+*/
+
+#consent-container {
+  margin-bottom: .6em;
+
+  label {
+    input {
+      margin-right: .75em;
+      margin-top: .2em;
+      margin-bottom: .4em;
+    }
+
+    &::after {
+      content: "*";
+      color: var(--color-red);
+    }
+  }
+
+  .help {
+    margin-left: 0 !important;
+  }
+}
+
+.captcha-img {
+  width: min(400px, 100%);
+}
+
+/* This removes hover fade transition from most buttons */
+.ui.menu .item, .ui.button {
+  transition: none !important;
+}
+
+/* Adds fade to buttons which don't have it */
+#oauth2-login-navigator-inner > a:hover {
+  background: var(--color-secondary-bg); /* Not perfect but good enough. There's no button hover var */
+}