From 3613876a3226f88b4ee94833a9eb934110d5efb8 Mon Sep 17 00:00:00 2001
From: Nils Windisch <windisch@sub.uni-goettingen.de>
Date: Mon, 3 May 2021 14:42:18 +0200
Subject: [PATCH 1/2] style: style links in metadata and similar places

---
 src/components/urls.vue | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/components/urls.vue b/src/components/urls.vue
index 2175f9f..ec1bb9a 100644
--- a/src/components/urls.vue
+++ b/src/components/urls.vue
@@ -11,13 +11,16 @@
         :title="url.linkTitle + '- open in a new tab or window'"
         rel="noopener noreferrer"
         target="_blank"
+        class="content__link q-pl-xs q-pr-xs"
+        :class="$q.dark.isActive ? 'bg-grey-5 text-dark' : 'bg-secondary text-accent'"
       >
         <span>{{ url.linkTitle }}</span>
 
         <q-icon
           :name="fasExternalLinkAlt"
           size="12px"
-          class="q-pl-xs"
+          class="content__link-icon q-pl-xs"
+          :class="$q.dark.isActive ? 'bg-grey-5 text-dark' : 'text-accent'"
         />
       </a>
 
@@ -97,6 +100,34 @@ export default {
   flex-wrap: wrap;
 }
 
+.content__link,
+.content__link-icon {
+  text-decoration: none;
+
+  &:focus,
+  &:hover,
+  &:active,
+  &:focus svg,
+  &:hover svg,
+  &:active svg {
+    background-color: var(--q-color-accent) !important;
+    color: var(--q-color-secondary) !important;
+    fill: var(--q-color-secondary);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    &:focus,
+    &:hover,
+    &:active
+    &:focus svg,
+    &:hover svg,
+    &:active svg {
+      background-color: var(--q-color-grey-0) !important;
+      color: var(--q-color-secondary) !important;
+    }
+  }
+}
+
 .url-text {
   display: flex;
   padding-right: 4px;
-- 
GitLab


From 80f92959d9f2fdeece04d8101e03019f8e5f4343 Mon Sep 17 00:00:00 2001
From: Nils Windisch <windisch@sub.uni-goettingen.de>
Date: Tue, 4 May 2021 14:00:04 +0200
Subject: [PATCH 2/2] style: style links in metadata more like Quasar likes to
 do it

---
 src/components/urls.vue | 36 ++++++++++++------------------------
 1 file changed, 12 insertions(+), 24 deletions(-)

diff --git a/src/components/urls.vue b/src/components/urls.vue
index ec1bb9a..03053a6 100644
--- a/src/components/urls.vue
+++ b/src/components/urls.vue
@@ -11,8 +11,8 @@
         :title="url.linkTitle + '- open in a new tab or window'"
         rel="noopener noreferrer"
         target="_blank"
-        class="content__link q-pl-xs q-pr-xs"
-        :class="$q.dark.isActive ? 'bg-grey-5 text-dark' : 'bg-secondary text-accent'"
+        class="content__link"
+        :class="$q.dark.isActive ? 'text-white' : 'text-accent'"
       >
         <span>{{ url.linkTitle }}</span>
 
@@ -20,7 +20,6 @@
           :name="fasExternalLinkAlt"
           size="12px"
           class="content__link-icon q-pl-xs"
-          :class="$q.dark.isActive ? 'bg-grey-5 text-dark' : 'text-accent'"
         />
       </a>
 
@@ -100,31 +99,20 @@ export default {
   flex-wrap: wrap;
 }
 
-.content__link,
-.content__link-icon {
+.content__link {
+  border-bottom: 1px var(--q-color-accent) dotted;
   text-decoration: none;
 
-  &:focus,
-  &:hover,
-  &:active,
-  &:focus svg,
-  &:hover svg,
-  &:active svg {
-    background-color: var(--q-color-accent) !important;
-    color: var(--q-color-secondary) !important;
-    fill: var(--q-color-secondary);
+  @media (prefers-color-scheme: dark) {
+    border-color: var(--q-color-white);
   }
+}
 
-  @media (prefers-color-scheme: dark) {
-    &:focus,
-    &:hover,
-    &:active
-    &:focus svg,
-    &:hover svg,
-    &:active svg {
-      background-color: var(--q-color-grey-0) !important;
-      color: var(--q-color-secondary) !important;
-    }
+.content__link {
+  &:focus,
+  &:hover,
+  &:active {
+    border-bottom-style: solid;
   }
 }
 
-- 
GitLab