unify button-buttons and link-buttons

assets/styles.css

@@ -187,62 +187,48 @@ form aside {
     font-size: 0.8em;
 }
 
-a.login-btn {
-    color: white;
-    text-decoration: none;
-    background-color: #555;
-    border-radius: .3em;
-    overflow: hidden;
-    height: 2em;
-
-    display: inline-block;
-}
-
-a.login-btn:hover {
-    opacity: 0.9;
-}
-
-.login-btn > * {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.login-btn-header {
-    flex: 0 0;
-    width: 2em;
-    height: 2em;
-    padding-left: 0.1em;
-    background-image: linear-gradient(0deg,
-            rgba(255,255,255,0),
-            rgba(255,255,255,0.2)
-        );
-    text-align: center;
-}
-
-.login-btn-header img {
-    margin-top: 0.4em;
-    height: 1.1em;
-}
-
-.login-btn-content {
-    margin: 0 .5em;
-    line-height: 2em;
+button {
+    font-size: inherit;
 }
 
 .btn {
+    text-decoration: none;
+    border-radius: .2rem;
+    overflow: hidden;
+
+    display: inline-block;
+    padding: 0.4em 0.8em;
     border: none;
-    padding: 0.5rem 1rem;
+
+    border-color: currentColor;
 }
 
-.btn.dismiss,
-.enabled .btn.primary {
-    background-color: transparent;
-    border: 1px solid currentColor;
-}
-.disabled .btn.primary {
-    background-color: #37d;
+.btn.primary {
     color: white;
-    font-weight: bold;
+    background-color: #37d;
+    border-color: #37d;
+}
+
+.btn.secondary {
+    background-color: rgba(255,255,255,0.5);
+    border: 1px solid rgba(0,0,0,0.3);
+    color: inherit;
+}
+
+.btn:hover {
+    opacity: 0.9;
+}
+
+
+.btn img {
+    height: 1.1em;
+    transform: translatey(.2em);
+    margin: 0 .3em;
+}
+
+.btn img:first-child,
+.btn picture:first-child img {
+    margin-left: 0;
 }
 
 .btn-group.right {

components/Banner.html

@@ -1,6 +1,6 @@
 <div class='banner {{policy_enabled?'enabled':'disabled'}}'>
     <div class='btn-group right'>
-        <button class='btn primary' on:click='toggle(policy_enabled)'>{{policy_enabled?'Disable':'Enable'}}</button>
+        <button class='btn {{policy_enabled?"secondary":"primary"}}' on:click='toggle(policy_enabled)'>{{policy_enabled?'Disable':'Enable'}}</button>
     </div>
     <div>
         Forget is currently

templates/about.html

@@ -28,31 +28,35 @@
 {% endif %}
 
 <p>
-<a style='background-color:#1da1f2' class='login-btn' href="/login/twitter">
-    <span class='login-btn-header'>
-        {{picture(st, 'twitter', (20,40,80), ('webp', 'png'))}}
-    </span><span class='login-btn-content'>Log in with Twitter</span>
+<a style='background-color:#1da1f2' class='btn primary' href="/login/twitter">
+    {{picture(st, 'twitter', (20,40,80), ('webp', 'png'))}}
+    Log in with Twitter
 </a>
 </p>
 
 <p>
 
 {% for instance in mastodon_instances %}
-<a style='background-color:#282c37' class='login-btn' href="{{ url_for('mastodon_login_step1', instance_url=instance.instance) }}">
+<a style='background-color:#282c37' class='btn{% if loop.first %} primary{% endif %}' href="{{ url_for('mastodon_login_step1', instance_url=instance.instance) }}">
 {% if loop.first %}
-    <span class='login-btn-header'>
-        {{picture(st, 'mastodon', (20,40,80), ('webp', 'png'))}}
-    </span><span class='login-btn-content'>Log in with
-{% else %}
-    <span class='login-btn-content'>
+    {{picture(st, 'mastodon', (20,40,80), ('webp', 'png'))}}
+    Log in with
 {% endif %}
-        {{instance.instance}}</span>
+        {{instance.instance}}
+</a>
+{% else %}
+<a style='background-color:#282c37' class='btn primary' href="{{ url_for('mastodon_login_step1') }}">
+    {{picture(st, 'mastodon', (20,40,80), ('webp', 'png'))}}
+    Log in with Mastodon
 </a>
 {% endfor %}
 
-<a style='background-color:#ddd; color:inherit;' class='login-btn' href="{{ url_for('mastodon_login_step1') }}">
-    <span class='login-btn-content'>Another Mastodon instance</span>
+{% if mastodon_instances %}
+<a class='btn secondary ' href="{{ url_for('mastodon_login_step1') }}">
+    Another Mastodon instance
 </a>
+{% endif %}
+
 </p>
 </section>
 {% endif %}