ホバー時にリンクに色付きの下線を引く

yuma140902 · Dec 22, 2023 · 0fd6ffa · 0fd6ffa
1 parent e31951f
commit 0fd6ffa
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/src/style.css b/src/style.css
@@ -46,6 +46,7 @@
   --color-header:                    var(--color-primary-500);
   --color-link-hover:                var(--color-gray-800);
   --color-link:                      var(--color-gray-700);
+  --color-link-underline:            var(--color-primary-600);
   --color-shadow:                    color-mix(in srgb, var(--color-gray-900) 50%, transparent);
   --color-sidebar-background:        var(--color-gray-100);
   --color-text-dimmed:               var(--color-gray-600);
@@ -66,6 +67,7 @@ body.dark {
   --color-header:                    var(--color-primary-500);
   --color-link-hover:                var(--color-gray-200);
   --color-link:                      var(--color-gray-300);
+  --color-link-underline:            var(--color-primary-500);
   --color-shadow:                    var(--color-gray-900);
   --color-sidebar-background:        var(--color-bluegray-750);
   --color-text-dimmed:               var(--color-bluegray-400);
@@ -97,6 +99,8 @@ a:link, a:visited {
 }
 a:hover {
   color: var(--color-link-hover);
+  text-decoration: underline;
+  text-decoration-color: var(--color-link-underline);
 }
 a[target='_blank']::after {
   content: '\e89e';
@@ -422,7 +426,7 @@ h2.ui-icon-text > .material-symbols-rounded {
   padding-left: 1.5em;
 }
 
-#sidebar li a {
+#sidebar li a:not(:hover) {
   text-decoration: none;
   color: var(--color-text);
 }
@@ -568,6 +572,6 @@ h2.ui-icon-text > .material-symbols-rounded {
   border-radius: calc(var(--ui-border-radius) * 0.5);
   box-shadow: 0 0 1px 0 var(--color-shadow), inset 0 -1px 1px -1px var(--color-shadow);
 }
-.markdown a {
+.markdown a:not(:hover) {
   text-decoration: underline;
 }