diff options
Diffstat (limited to 'talermerchantdemos/static/blog.css')
-rw-r--r-- | talermerchantdemos/static/blog.css | 15 |
1 files changed, 11 insertions, 4 deletions
diff --git a/talermerchantdemos/static/blog.css b/talermerchantdemos/static/blog.css index 3331684..9e0b910 100644 --- a/talermerchantdemos/static/blog.css +++ b/talermerchantdemos/static/blog.css @@ -26,10 +26,10 @@ /* Variables */ --link-colour: var(--button-confirm-foreground); --background: var(--button-confirm-background); + --bottom-line: 6px; /* 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; @@ -38,14 +38,21 @@ padding: 10px 10px; /* Positioning */ margin-top: 10px; + margin-bottom: 0; /* Transitions */ - transition: border-bottom 1s, background 1s, margin-top 1s; + 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; } .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); + --bottom-line: 0; + transform: translateY(6px); } .payLink:active { --background: var(--button-confirm-active-background); |