Add colour varibales for some opacities

templates/base.html

@@ -19,10 +19,22 @@
     <meta name="author" content="Teckids e.V." />
     <style>
         :root {
-            --teckids-primary-light: {{ PRIMARY_LIGHT }};
-            --teckids-primary-dark: {{ PRIMARY_DARK }};
-            --teckids-secondary-light: {{ SECONDARY_LIGHT }};
-            --teckids-secondary-dark: {{ SECONDARY_DARK }};
+            --teckids-primary-light: {{ PRIMARY_LIGHT }}ff;
+            --teckids-primary-dark: {{ PRIMARY_DARK }}ff;
+            --teckids-secondary-light: {{ SECONDARY_LIGHT }}ff;
+            --teckids-secondary-dark: {{ SECONDARY_DARK }}ff;
+            --teckids-primary-light-10: {{ PRIMARY_LIGHT }}20;
+            --teckids-primary-dark-10: {{ PRIMARY_DARK }}20;
+            --teckids-secondary-light-10: {{ SECONDARY_LIGHT }}20;
+            --teckids-secondary-dark-10: {{ SECONDARY_DARK }}20;
+            --teckids-primary-light-25: {{ PRIMARY_LIGHT }}40;
+            --teckids-primary-dark-25: {{ PRIMARY_DARK }}40;
+            --teckids-secondary-light-25: {{ SECONDARY_LIGHT }}40;
+            --teckids-secondary-dark-25: {{ SECONDARY_DARK }}40;
+            --teckids-primary-light-50: {{ PRIMARY_LIGHT }}80;
+            --teckids-primary-dark-50: {{ PRIMARY_DARK }}80;
+            --teckids-secondary-light-50: {{ SECONDARY_LIGHT }}80;
+            --teckids-secondary-dark-50: {{ SECONDARY_DARK }}80;
         }
     </style>
     <link rel="stylesheet" type="text/css" href="/{{ THEME_STATIC_DIR }}/css/bootstrap.min.css" />