diff options
author | ng <�> | 2022-09-24 23:23:09 +0200 |
---|---|---|
committer | ng <�> | 2022-09-24 23:23:09 +0200 |
commit | 42a33bdb7120c5e2fe66624741a4737231c67396 (patch) | |
tree | 5c8dba005d4a56a3895895f2b58741307aee43ec /talermerchantdemos | |
parent | debf91d256d13e5242dd3fb9adcfed7e6c029bca (diff) | |
download | taler-merchant-demos-42a33bdb7120c5e2fe66624741a4737231c67396.tar.gz taler-merchant-demos-42a33bdb7120c5e2fe66624741a4737231c67396.tar.bz2 taler-merchant-demos-42a33bdb7120c5e2fe66624741a4737231c67396.zip |
feat: ✨ Add a shopping cart icon to the pay button
Diffstat (limited to 'talermerchantdemos')
-rw-r--r-- | talermerchantdemos/static/blog.css | 26 | ||||
-rw-r--r-- | talermerchantdemos/templates/blog-index.html.j2 | 3 |
2 files changed, 26 insertions, 3 deletions
diff --git a/talermerchantdemos/static/blog.css b/talermerchantdemos/static/blog.css index 9e0b910..e226ecd 100644 --- a/talermerchantdemos/static/blog.css +++ b/talermerchantdemos/static/blog.css @@ -22,6 +22,23 @@ color: var(--link-colour, var(--default-link-colour, black)); } +/* 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); @@ -48,13 +65,20 @@ /* 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); } -.payLink:active { + +/* 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 diff --git a/talermerchantdemos/templates/blog-index.html.j2 b/talermerchantdemos/templates/blog-index.html.j2 index 9468cc7..7c69b12 100644 --- a/talermerchantdemos/templates/blog-index.html.j2 +++ b/talermerchantdemos/templates/blog-index.html.j2 @@ -20,12 +20,11 @@ {{ gettext("Click on an individual chapter to to purchase it with GNU Taler.") }} {{ gettext('You can get free, virtual money to buy articles on this page at the <a href="{}")">bank</a>.').format(env('TALER_ENV_URL_BANK')) }} </div> - <div> {% for article in articles %} <div class="notice"> <h3><a href="{{ url_for('article', lang=article.lang, article_name=article.slug) }}" class="articleTitle">{{article.title}}</a></h3> - <p>{{ article.teaser|safe }} <a class="payLink" href="{{ url_for('article', lang=article.lang, article_name=article.slug) }}">{{ gettext('Pay to read more...') }}</a></p> + <p>{{ article.teaser|safe }} <a class="payLink" href="{{ url_for('article', lang=article.lang, article_name=article.slug) }}"><span class="icon"></span>{{ gettext('Pay to read more...') }}</a></p> </div> {% else %} <em>({{ gettext("No articles available in this language.") }})</em> |