diff options
Diffstat (limited to 'talermerchantdemos/static/blog.css')
-rw-r--r-- | talermerchantdemos/static/blog.css | 131 |
1 files changed, 126 insertions, 5 deletions
diff --git a/talermerchantdemos/static/blog.css b/talermerchantdemos/static/blog.css index c288119..a406f31 100644 --- a/talermerchantdemos/static/blog.css +++ b/talermerchantdemos/static/blog.css @@ -1,20 +1,141 @@ +@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)); +} + +/* Licensing Information */ +.essay-shop-title { + display: inline-block; +} +.fsfs-license { + /* by default, hide it until users interact with it */ + display: none; + /* when shown, it should stay at a fixed position on screen */ + position: fixed; + /* Center it on screen */ + top: 50vh; + left: 50vw; + transform: translate(-50%,-50%); + /* Set Minimum Size Requirements */ + min-width: 50vw; + min-height: 20vh; + /* Padding */ + padding: 25px 25px; + /* Border Rounding */ + border-radius: 25px; + /* Always On-Top */ + z-index: 500000; + /* Background */ + color: #ffffff; + background: #1a1a1a66; + backdrop-filter: blur(8px) brightness(0.5); + /* Cursor */ + cursor: text; + /* Interactions */ + pointer-events: visibleStroke; +} +.info-icon::before { + content: ' '; + /* Size & Positioning */ + display: inline-block; + width: 1.2em; + height: 1.2em; + margin-right: 5px; + /* Set Icon */ + background-image: url(/static/noun-info-2691045.svg); + /* Ensure Icon is rendered correctly */ + background-size: contain; + background-position: center center; + background-repeat: no-repeat; + /* Invert it by default unless otherwise specified */ + filter: var(--license-info-icon-filter, invert()); + /* Use Pointer Cursor */ + cursor: pointer; +} +.info-icon:active > .fsfs-license, +.info-icon:focus > .fsfs-license, +.info-icon:focus-within > .fsfs-license, +.fsfs-license:focus, +.fsfs-license:focus-within { + display: block; +} + +/* Pay Icon */ +.payLink > .icon::before { + content: ''; /* Blank = CSS Won't render, which is why we put a Zero-Width-Space */ + /* Size & Positioning */ + display: inline-block; + width: 1.2em; + margin-right: 5px; + /* Set Icon */ + background-image: url(/static/noun-shopping-cart-5195508.svg); + /* Ensure Icon is rendered correctly */ + background-size: contain; + background-position: center center; + background-repeat: no-repeat; + /* Invert it by default unless otherwise specified */ + filter: var(--paylink-icon-filter, invert()); +} +/* Pay Button */ +.payLink { + /* Variables */ + --link-colour: var(--button-confirm-foreground); + --background: var(--button-confirm-background); + --bottom-line: 6px; + /* General */ + display: block; + border-radius: 10px; + color: var(--link-colour); + background: var(--background); + text-decoration: none; + /* Size */ + max-width: max-content; + padding: 10px 10px; + /* Positioning */ + margin-top: 10px; + margin-bottom: 0; + /* Transitions */ + transition: background 1s, box-shadow 1s, transform 1s; + /* Border */ + box-shadow: 0px var(--bottom-line) 0px 0 var(--demo-common-dark-blue); + -webkit-box-shadow: 0px var(--bottom-line) 0px 0 var(--demo-common-dark-blue); + -moz-box-shadow: 0px var(--bottom-line) 0px 0 var(--demo-common-dark-blue); + /* Transformations */ + transform: none; +} + +/* Hover */ +.payLink:hover { + --background: var(--button-confirm-hovering-background); + --link-colour: var(--button-confirm-hovering-foreground); + --bottom-line: 0; + transform: translateY(6px); } + +/* Active */ +.payLink:active, +.payLink:focus, +.payLink:focus-within, +.payLink:focus-visible { + --background: var(--button-confirm-active-background); + --link-colour: var(--button-confirm-active-foreground); +}
\ No newline at end of file |