Nora CSS and build system updates

6 files changed, 141 insertions, 18 deletions

diff --git a/talermerchantdemos/static/blog.css b/talermerchantdemos/static/blog.css
index c288119..3331684 100644
--- a/talermerchantdemos/static/blog.css
+++ b/talermerchantdemos/static/blog.css
@@ -1,20 +1,53 @@
+@charset "UTF-8";
+@import url(/static/theme.css);
+
 .notice {
   border-radius: 1em;
-  background: rgb(228, 228, 228);
-  border-left: 0.3em solid #1e2739;
+  background: var(--quote-background-colour);
+  border-left: 0.3em solid var(--demo-common-dark-blue);
   padding-left: 1em;
+  padding-right: 1em;
   padding-top: 0.5em;
   padding-bottom: 0.5em;
   margin-top: 2em;
   margin-bottom: 2em;
-}
-.notice {
   position: relative;
   left: 0;
 }
+
 #main a:link,
 #main a:visited,
 #main a:hover,
 #main a:active {
-  color: black;
+  color: var(--link-colour, var(--default-link-colour, black));
+}
+
+.payLink {
+  /* Variables */
+  --link-colour: var(--button-confirm-foreground);
+  --background: var(--button-confirm-background);
+  /* General */
+  display: block;
+  border-radius: 10px;
+  border-bottom: 0.3em solid var(--demo-common-dark-blue);
+  color: var(--link-colour);
+  background: var(--background);
+  text-decoration: none;
+  /* Size */
+  max-width: max-content;
+  padding: 10px 10px;
+  /* Positioning */
+  margin-top: 10px;
+  /* Transitions */
+  transition: border-bottom 1s, background 1s, margin-top 1s;
+}
+.payLink:hover {
+  --background: var(--button-confirm-hovering-background);
+  --link-colour: var(--button-confirm-hovering-foreground);
+  border-bottom: 0 solid var(--demo-common-dark-blue);
+  margin-top: calc(10px + 0.3em);
 }
+.payLink:active {
+  --background: var(--button-confirm-active-background);
+  --link-colour: var(--button-confirm-active-foreground);
+}
\ No newline at end of file
diff --git a/talermerchantdemos/static/colors-blog.css b/talermerchantdemos/static/colors-blog.css
index 59890af..7d16fc4 100644
--- a/talermerchantdemos/static/colors-blog.css
+++ b/talermerchantdemos/static/colors-blog.css
@@ -1,17 +1,21 @@
+@import url(/static/theme.css);
+/* General Navigation Bar Styles */
 nav,
 nav a,
 nav span,
 .navcontainer,
 .demobar,
 .navbtn {
-  color: white;
-  background: #385723;
+  color: var(--navbar-foreground);
+  background: var(--navbar-background);
+  transition: background 0.2s, color 0.2s;
 }
 
+/* Currently Visible Page */
 nav a.active,
 nav span.active,
 .navbtn.active {
-  background-color: #233a13;
+  background-color: var(--navbar-button-selected);
 }
 
 nav a.active:hover,
@@ -20,5 +24,5 @@ nav span.active:hover,
 nav a:hover,
 nav span:hover,
 .navbtn:hover {
-  background: #568636;
+  background: var(--navbar-button-hovering);
 }
diff --git a/talermerchantdemos/static/colors-donations.css b/talermerchantdemos/static/colors-donations.css
index bf96697..bf03043 100644
--- a/talermerchantdemos/static/colors-donations.css
+++ b/talermerchantdemos/static/colors-donations.css
@@ -1,3 +1,4 @@
+@import url(/static/theme.css);
 nav,
 nav a,
 nav span,
diff --git a/talermerchantdemos/static/demo.css b/talermerchantdemos/static/demo.css
index 53ec986..ed4f4ca 100644
--- a/talermerchantdemos/static/demo.css
+++ b/talermerchantdemos/static/demo.css
@@ -1,12 +1,5 @@
 @charset "UTF-8";
-/*
-Style common to all demo pages.
-
-Colors (Taler / landing):
-- #1e2739 (dark blue)
-- #0042b2 (default blue)
-- #3daee9 (highlight blue)
-*/
+@import url(/static/theme.css);
 
 .demobar h1 {
   text-align: center;
@@ -39,6 +32,7 @@ Colors (Taler / landing):
 
 .content {
   margin-left: 2em;
+  margin-right: 2em;
   overflow-x: auto;
 }
 
@@ -106,7 +100,7 @@ nav span:hover,
 nav a.active,
 nav span.active,
 .navbtn.active {
-  background-color: #1e2739;
+  background-color: var(--demo-common-dark-blue);
 }
 
 nav a.active:hover,
diff --git a/talermerchantdemos/static/taler-fallback.css b/talermerchantdemos/static/taler-fallback.css
new file mode 100644
index 0000000..fac25c3
--- /dev/null
+++ b/talermerchantdemos/static/taler-fallback.css
@@ -0,0 +1,18 @@
+/* Fallback stylesheet.  Should be included in the document as follows:
+ *
+ * <link rel="stylesheet"
+ *       href="taler-fallback.css"
+ *       id="taler-presence-stylesheet />
+ *
+ * When either the taler-wallet-lib is included or the wallet is presence,
+ * it will take over this stylesheet for presence detection.
+ *
+ * This fallback stylesheet makes sure that classes for presence detection
+ * are displayed correctly, even if JavaScript is disabled and the wallet
+ * is not present.
+ */
+.taler-installed-show {
+  display: none;
+}
+
+/*# sourceMappingURL=taler-fallback.css.map */
diff --git a/talermerchantdemos/static/theme.css b/talermerchantdemos/static/theme.css
new file mode 100644
index 0000000..4309198
--- /dev/null
+++ b/talermerchantdemos/static/theme.css
@@ -0,0 +1,73 @@
+/* This file contains colour-scheme- & theme-related stuffs */
+
+/* Light Theme (Default) */
+:root {
+  /* Common Green (treat as private vars if possible) */
+  --green-0: #233a13;
+  --green-1: #385723;
+  --green-2: #457a22;
+  --green-3: #568636;
+
+  /* Black/Grey/White */
+  --grey-0: #000000;
+  --grey-1: #1a1a1a;
+  --grey-2: #2b2b2b;
+  --grey-3: #4a4a4a;
+  --grey-4: #6d6d6d;
+  --grey-5: #8e8e8e;
+  --grey-6: #a0a0a0;
+  --grey-7: #b3b3b3;
+  --grey-8: #e4e4e4;
+  --grey-9: #ffffff;
+  --black: var(--grey-0);
+  --white: var(--grey-9);
+  
+  /* Demo Commons */
+  --demo-common-dark-blue: #1e2739;
+  --demo-common-blue: #0042b2;
+  --demo-common-highlight-blue: #3daee9;
+
+  /* Navigation Bar */
+  --navbar-foreground: var(--white);
+  --navbar-background: var(--green-1);
+  --navbar-button-selected: var(--green-0);
+  --navbar-button-hovering: var(--green-3);
+
+  /* Main Content */
+  --main-text-colour: var(--black);
+  --main-background-colour: var(--white);
+
+  /* Misc */
+  --default-link-colour: var(--black);
+  --quote-background-colour: var(--grey-8);
+
+  /* Buttons */
+  --button-confirm-background: var(--green-2);
+  --button-confirm-foreground: var(--white);
+  --button-confirm-hovering-background: var(--green-1);
+  --button-confirm-hovering-foreground: var(--white);
+  --button-confirm-active-background: var(--green-1);
+  --button-confirm-active-foreground: var(--white);
+}
+
+/* Dark Theme Overwrites (UA can choose to enable this selector if it wants) */
+@media (prefers-color-scheme: dark) {
+  /* Modify core colour scheme */
+  a:root {
+    /* Link-related */
+    --default-link-colour: var(--white);
+    
+    /* Main Content */
+    --main-background-colour: var(--grey-2);
+    --main-text-colour: var(--grey-8);
+
+    /* Misc */
+    --quote-background-colour: var(--grey-3);
+  }
+}
+
+/* Universal theming, keep this minimal! */
+html {
+  background: var(--main-background-colour);
+  color: var(--main-text-colour);
+}
\ No newline at end of file