diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue index 6452e135da..8fa8092b8a 100644 --- a/packages/client/src/components/MkUrlPreview.vue +++ b/packages/client/src/components/MkUrlPreview.vue @@ -196,6 +196,7 @@ onUnmounted(() => { > a { display: flex; transition: background 0.2s; + text-decoration: none; > div:first-child:not(:last-child) { position: relative; width: 90px; @@ -277,7 +278,7 @@ onUnmounted(() => { &:focus, &:focus-within { background: var(--panelHighlight); - h1 { + h3 { text-decoration: underline; } } diff --git a/packages/client/src/components/global/MkUrl.vue b/packages/client/src/components/global/MkUrl.vue index 98ba8d94e9..3453bf5ed6 100644 --- a/packages/client/src/components/global/MkUrl.vue +++ b/packages/client/src/components/global/MkUrl.vue @@ -80,6 +80,8 @@ const target = self ? null : "_blank"; display: inline-block; overflow: clip; text-overflow: ellipsis; + text-decoration: none !important; + line-height: 1.05; > .icon { padding-left: 2px; diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts index cb0942a338..63465f38b5 100644 --- a/packages/client/src/components/mfm.ts +++ b/packages/client/src/components/mfm.ts @@ -409,6 +409,7 @@ export default defineComponent({ key: Math.random(), to: `/tags/${encodeURIComponent(token.props.hashtag)}`, style: "color:var(--hashtag);", + class: "_link", }, `#${token.props.hashtag}`, ), diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss index a6ef73015b..be12f8b156 100644 --- a/packages/client/src/style.scss +++ b/packages/client/src/style.scss @@ -145,6 +145,9 @@ a { cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; + &:hover { + text-decoration: underline; + } } // i { @@ -229,6 +232,7 @@ hr { font-size: 1em; font-family: inherit; line-height: inherit; + text-decoration: none; &, * { @@ -628,18 +632,22 @@ hr { ._link { position: relative; color: var(--link); + text-decoration: none !important; - &:after { + &::before, &::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0%; - border-bottom: 2px solid var(--link); + border-bottom: 1px solid var(--link); transition: 0.3s ease-in-out; } - - &:hover:after { + &::before { + width: 100%; + opacity: .4; + } + &:hover:after, &:focus:after { width: 100%; } }