underline effect
This commit is contained in:
parent
11082f1fb2
commit
c3e6b6544b
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "calckey",
|
"name": "calckey",
|
||||||
"version": "12.119.0-calc.8-b.4",
|
"version": "12.119.0-calc.8-b.5",
|
||||||
"codename": "aqua",
|
"codename": "aqua",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
@ -76,7 +76,6 @@ function isMe(message): boolean {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none !important;
|
|
||||||
.avatar {
|
.avatar {
|
||||||
filter: saturate(200%);
|
filter: saturate(200%);
|
||||||
}
|
}
|
||||||
@ -140,10 +139,6 @@ function isMe(message): boolean {
|
|||||||
|
|
||||||
> .body {
|
> .body {
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .text {
|
> .text {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 0 0 0;
|
margin: 0 0 0 0;
|
||||||
@ -154,10 +149,6 @@ function isMe(message): boolean {
|
|||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
color: var(--faceText);
|
color: var(--faceText);
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.me {
|
.me {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
@ -70,7 +70,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<button class="_button tab" :class="{ active: tab === 'index' }" @click="tab = 'index'"><i class="ph-asterisk-bold ph-lg ph-fw ph-lg"></i></button>
|
<button class="_button tab" :class="{ active: tab === 'index' }" @click="tab = 'index'"><i class="ph-asterisk-bold ph-lg ph-fw ph-lg"></i></button>
|
||||||
<button class="_button tab" :class="{ active: tab === 'custom' }" @click="tab = 'custom'"><i class="ph-smiley-wink-bold ph-lg ph-fw ph-lg"></i></button>
|
<button class="_button tab" :class="{ active: tab === 'custom' }" @click="tab = 'custom'"><i class="ph-smiley-bold ph-lg ph-fw ph-lg"></i></button>
|
||||||
<button class="_button tab" :class="{ active: tab === 'unicode' }" @click="tab = 'unicode'"><i class="ph-leaf-bold ph-lg ph-fw ph-lg"></i></button>
|
<button class="_button tab" :class="{ active: tab === 'unicode' }" @click="tab = 'unicode'"><i class="ph-leaf-bold ph-lg ph-fw ph-lg"></i></button>
|
||||||
<button class="_button tab" :class="{ active: tab === 'tags' }" @click="tab = 'tags'"><i class="ph-hash-bold ph-lg ph-fw ph-lg"></i></button>
|
<button class="_button tab" :class="{ active: tab === 'tags' }" @click="tab = 'tags'"><i class="ph-hash-bold ph-lg ph-fw ph-lg"></i></button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -79,7 +79,7 @@
|
|||||||
<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
|
<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
|
||||||
<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
|
<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
|
||||||
<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
|
<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
|
||||||
<i class="ph-smiley-wink-bold ph-lg"></i>
|
<i class="ph-smiley-bold ph-lg"></i>
|
||||||
</button>
|
</button>
|
||||||
<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
|
<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
|
||||||
<i class="ph-minus-bold ph-lg"></i>
|
<i class="ph-minus-bold ph-lg"></i>
|
||||||
|
@ -89,7 +89,7 @@
|
|||||||
<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
|
<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
|
||||||
<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
|
<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
|
||||||
<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
|
<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
|
||||||
<i class="ph-smiley-wink-bold ph-lg"></i>
|
<i class="ph-smiley-bold ph-lg"></i>
|
||||||
</button>
|
</button>
|
||||||
<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
|
<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
|
||||||
<i class="ph-minus-bold ph-lg"></i>
|
<i class="ph-minus-bold ph-lg"></i>
|
||||||
|
@ -52,7 +52,7 @@
|
|||||||
<button v-tooltip="i18n.ts.useCw" class="_button" :class="{ active: useCw }" @click="useCw = !useCw"><i class="ph-eye-slash-bold ph-lg"></i></button>
|
<button v-tooltip="i18n.ts.useCw" class="_button" :class="{ active: useCw }" @click="useCw = !useCw"><i class="ph-eye-slash-bold ph-lg"></i></button>
|
||||||
<button v-tooltip="i18n.ts.mention" class="_button" @click="insertMention"><i class="ph-at-bold ph-lg"></i></button>
|
<button v-tooltip="i18n.ts.mention" class="_button" @click="insertMention"><i class="ph-at-bold ph-lg"></i></button>
|
||||||
<button v-tooltip="i18n.ts.hashtags" class="_button" :class="{ active: withHashtags }" @click="withHashtags = !withHashtags"><i class="ph-hash-bold ph-lg"></i></button>
|
<button v-tooltip="i18n.ts.hashtags" class="_button" :class="{ active: withHashtags }" @click="withHashtags = !withHashtags"><i class="ph-hash-bold ph-lg"></i></button>
|
||||||
<button v-tooltip="i18n.ts.emoji" class="_button" @click="insertEmoji"><i class="ph-smiley-wink-bold ph-lg"></i></button>
|
<button v-tooltip="i18n.ts.emoji" class="_button" @click="insertEmoji"><i class="ph-smiley-bold ph-lg"></i></button>
|
||||||
<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" @click="showActions"><i class="ph-plug-bold ph-lg"></i></button>
|
<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" @click="showActions"><i class="ph-plug-bold ph-lg"></i></button>
|
||||||
</footer>
|
</footer>
|
||||||
<datalist id="hashtags">
|
<datalist id="hashtags">
|
||||||
|
@ -297,7 +297,6 @@ onUnmounted(() => {
|
|||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transform: translateY(0.1em);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
> .title {
|
> .title {
|
||||||
|
@ -140,7 +140,7 @@ let theTabs = [{
|
|||||||
}, {
|
}, {
|
||||||
key: 'emojis',
|
key: 'emojis',
|
||||||
title: i18n.ts.customEmojis,
|
title: i18n.ts.customEmojis,
|
||||||
icon: 'ph-smiley-wink-bold ph-lg',
|
icon: 'ph-smiley-bold ph-lg',
|
||||||
}, {
|
}, {
|
||||||
key: 'charts',
|
key: 'charts',
|
||||||
title: i18n.ts.charts,
|
title: i18n.ts.charts,
|
||||||
|
@ -290,7 +290,7 @@ const headerTabs = $computed(() => [{
|
|||||||
|
|
||||||
definePageMetadata(computed(() => ({
|
definePageMetadata(computed(() => ({
|
||||||
title: i18n.ts.customEmojis,
|
title: i18n.ts.customEmojis,
|
||||||
icon: 'ph-smiley-wink-bold ph-lg',
|
icon: 'ph-smiley-bold ph-lg',
|
||||||
})));
|
})));
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -111,7 +111,7 @@ const menuDef = $computed(() => [{
|
|||||||
to: '/admin/users',
|
to: '/admin/users',
|
||||||
active: currentPage?.route.name === 'users',
|
active: currentPage?.route.name === 'users',
|
||||||
}, {
|
}, {
|
||||||
icon: 'ph-smiley-wink-bold ph-lg',
|
icon: 'ph-smiley-bold ph-lg',
|
||||||
text: i18n.ts.customEmojis,
|
text: i18n.ts.customEmojis,
|
||||||
to: '/admin/emojis',
|
to: '/admin/emojis',
|
||||||
active: currentPage?.route.name === 'emojis',
|
active: currentPage?.route.name === 'emojis',
|
||||||
|
@ -16,7 +16,7 @@
|
|||||||
<div v-if="file" class="file" @click="file = null">{{ file.name }}</div>
|
<div v-if="file" class="file" @click="file = null">{{ file.name }}</div>
|
||||||
<div class="buttons">
|
<div class="buttons">
|
||||||
<button class="_button" @click="chooseFile"><i class="ph-upload-bold ph-lg"></i></button>
|
<button class="_button" @click="chooseFile"><i class="ph-upload-bold ph-lg"></i></button>
|
||||||
<button class="_button" @click="insertEmoji"><i class="ph-smiley-wink-bold ph-lg"></i></button>
|
<button class="_button" @click="insertEmoji"><i class="ph-smiley-bold ph-lg"></i></button>
|
||||||
<button class="send _button" :disabled="!canSend || sending" :title="i18n.ts.send" @click="send">
|
<button class="send _button" :disabled="!canSend || sending" :title="i18n.ts.send" @click="send">
|
||||||
<template v-if="!sending"><i class="ph-paper-plane-tilt-bold ph-lg"></i></template><template v-if="sending"><i class="ph-circle-notch-bold ph-lg fa-pulse ph-fw ph-lg"></i></template>
|
<template v-if="!sending"><i class="ph-paper-plane-tilt-bold ph-lg"></i></template><template v-if="sending"><i class="ph-circle-notch-bold ph-lg fa-pulse ph-fw ph-lg"></i></template>
|
||||||
</button>
|
</button>
|
||||||
|
@ -68,7 +68,7 @@ const menuDef = computed(() => [{
|
|||||||
to: '/settings/privacy',
|
to: '/settings/privacy',
|
||||||
active: currentPage?.route.name === 'privacy',
|
active: currentPage?.route.name === 'privacy',
|
||||||
}, {
|
}, {
|
||||||
icon: 'ph-smiley-wink-bold ph-lg',
|
icon: 'ph-smiley-bold ph-lg',
|
||||||
text: i18n.ts.reaction,
|
text: i18n.ts.reaction,
|
||||||
to: '/settings/reaction',
|
to: '/settings/reaction',
|
||||||
active: currentPage?.route.name === 'reaction',
|
active: currentPage?.route.name === 'reaction',
|
||||||
|
@ -126,7 +126,7 @@ const headerTabs = $computed(() => []);
|
|||||||
|
|
||||||
definePageMetadata({
|
definePageMetadata({
|
||||||
title: i18n.ts.reaction,
|
title: i18n.ts.reaction,
|
||||||
icon: 'ph-smiley-wink-bold ph-lg',
|
icon: 'ph-smiley-bold ph-lg',
|
||||||
action: {
|
action: {
|
||||||
icon: 'ph-eye-bold ph-lg',
|
icon: 'ph-eye-bold ph-lg',
|
||||||
handler: preview,
|
handler: preview,
|
||||||
|
@ -103,7 +103,7 @@ const headerTabs = $computed(() => user ? [{
|
|||||||
}, ...($i && ($i.id === user.id)) || user.publicReactions ? [{
|
}, ...($i && ($i.id === user.id)) || user.publicReactions ? [{
|
||||||
key: 'reactions',
|
key: 'reactions',
|
||||||
title: i18n.ts.reaction,
|
title: i18n.ts.reaction,
|
||||||
icon: 'ph-smiley-wink-bold ph-lg',
|
icon: 'ph-smiley-bold ph-lg',
|
||||||
}] : [], {
|
}] : [], {
|
||||||
key: 'clips',
|
key: 'clips',
|
||||||
title: i18n.ts.clips,
|
title: i18n.ts.clips,
|
||||||
|
@ -97,9 +97,27 @@ a {
|
|||||||
tap-highlight-color: transparent;
|
tap-highlight-color: transparent;
|
||||||
-webkit-tap-highlight-color: transparent;
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
|
||||||
&:hover {
|
&::after {
|
||||||
text-decoration: underline;
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
transform: scaleX(0);
|
||||||
|
height: 2px;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: var(--link);
|
||||||
|
transform-origin: bottom right;
|
||||||
|
transition: transform 0.25s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:hover::after {
|
||||||
|
transform: scaleX(1);
|
||||||
|
transform-origin: bottom left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
transform: translateY(0.1em);
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea, input {
|
textarea, input {
|
||||||
|
@ -80,7 +80,7 @@ function openInstanceMenu(ev: MouseEvent) {
|
|||||||
}, {
|
}, {
|
||||||
type: 'link',
|
type: 'link',
|
||||||
text: i18n.ts.customEmojis,
|
text: i18n.ts.customEmojis,
|
||||||
icon: 'ph-smiley-wink-bold ph-lg',
|
icon: 'ph-smiley-bold ph-lg',
|
||||||
to: '/about#emojis',
|
to: '/about#emojis',
|
||||||
}, {
|
}, {
|
||||||
type: 'link',
|
type: 'link',
|
||||||
|
@ -133,7 +133,7 @@ function openInstanceMenu(ev: MouseEvent) {
|
|||||||
}, {
|
}, {
|
||||||
type: 'link',
|
type: 'link',
|
||||||
text: i18n.ts.customEmojis,
|
text: i18n.ts.customEmojis,
|
||||||
icon: 'ph-smiley-wink-bold ph-lg',
|
icon: 'ph-smiley-bold ph-lg',
|
||||||
to: '/about#emojis',
|
to: '/about#emojis',
|
||||||
}, {
|
}, {
|
||||||
type: 'link',
|
type: 'link',
|
||||||
@ -244,7 +244,6 @@ function more(ev: MouseEvent) {
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 55px;
|
width: 55px;
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
transform: translateY(0.2em);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -146,7 +146,7 @@ function openInstanceMenu(ev: MouseEvent) {
|
|||||||
}, {
|
}, {
|
||||||
type: 'link',
|
type: 'link',
|
||||||
text: i18n.ts.customEmojis,
|
text: i18n.ts.customEmojis,
|
||||||
icon: 'ph-smiley-wink-bold ph-lg',
|
icon: 'ph-smiley-bold ph-lg',
|
||||||
to: '/about#emojis',
|
to: '/about#emojis',
|
||||||
}, {
|
}, {
|
||||||
type: 'link',
|
type: 'link',
|
||||||
|
Loading…
Reference in New Issue
Block a user