1 files changed, 38 insertions, 5 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