underline effect

This commit is contained in:
ThatOneCalculator 2022-11-06 19:14:55 -08:00
parent 293ad4e670
commit 3b9fda8f05
18 changed files with 36 additions and 29 deletions

View file

@ -1,6 +1,6 @@
{
"name": "calckey",
"version": "12.119.0-calc.8-b.4",
"version": "12.119.0-calc.8-b.5",
"codename": "aqua",
"repository": {
"type": "git",

View file

@ -76,7 +76,6 @@ function isMe(message): boolean {
}
&:hover {
text-decoration: none !important;
.avatar {
filter: saturate(200%);
}
@ -140,10 +139,6 @@ function isMe(message): boolean {
> .body {
&:hover {
text-decoration: none !important;
}
> .text {
display: block;
margin: 0 0 0 0;
@ -154,10 +149,6 @@ function isMe(message): boolean {
font-size: 1.1em;
color: var(--faceText);
&:hover {
text-decoration: none !important;
}
.me {
opacity: 0.7;
}

View file

@ -70,7 +70,7 @@
</div>
<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 === '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 === 'tags' }" @click="tab = 'tags'"><i class="ph-hash-bold ph-lg ph-fw ph-lg"></i></button>
</div>

View file

@ -79,7 +79,7 @@
<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
<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()">
<i class="ph-smiley-wink-bold ph-lg"></i>
<i class="ph-smiley-bold ph-lg"></i>
</button>
<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
<i class="ph-minus-bold ph-lg"></i>

View file

@ -89,7 +89,7 @@
<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
<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()">
<i class="ph-smiley-wink-bold ph-lg"></i>
<i class="ph-smiley-bold ph-lg"></i>
</button>
<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
<i class="ph-minus-bold ph-lg"></i>

View file

@ -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.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.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>
</footer>
<datalist id="hashtags">

View file

@ -297,7 +297,6 @@ onUnmounted(() => {
margin-right: 8px;
width: 16px;
text-align: center;
transform: translateY(0.1em);
}
> .title {

View file

@ -140,7 +140,7 @@ let theTabs = [{
}, {
key: 'emojis',
title: i18n.ts.customEmojis,
icon: 'ph-smiley-wink-bold ph-lg',
icon: 'ph-smiley-bold ph-lg',
}, {
key: 'charts',
title: i18n.ts.charts,

View file

@ -290,7 +290,7 @@ const headerTabs = $computed(() => [{
definePageMetadata(computed(() => ({
title: i18n.ts.customEmojis,
icon: 'ph-smiley-wink-bold ph-lg',
icon: 'ph-smiley-bold ph-lg',
})));
</script>

View file

@ -111,7 +111,7 @@ const menuDef = $computed(() => [{
to: '/admin/users',
active: currentPage?.route.name === 'users',
}, {
icon: 'ph-smiley-wink-bold ph-lg',
icon: 'ph-smiley-bold ph-lg',
text: i18n.ts.customEmojis,
to: '/admin/emojis',
active: currentPage?.route.name === 'emojis',

View file

@ -16,7 +16,7 @@
<div v-if="file" class="file" @click="file = null">{{ file.name }}</div>
<div class="buttons">
<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">
<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>

View file

@ -68,7 +68,7 @@ const menuDef = computed(() => [{
to: '/settings/privacy',
active: currentPage?.route.name === 'privacy',
}, {
icon: 'ph-smiley-wink-bold ph-lg',
icon: 'ph-smiley-bold ph-lg',
text: i18n.ts.reaction,
to: '/settings/reaction',
active: currentPage?.route.name === 'reaction',

View file

@ -126,7 +126,7 @@ const headerTabs = $computed(() => []);
definePageMetadata({
title: i18n.ts.reaction,
icon: 'ph-smiley-wink-bold ph-lg',
icon: 'ph-smiley-bold ph-lg',
action: {
icon: 'ph-eye-bold ph-lg',
handler: preview,

View file

@ -103,7 +103,7 @@ const headerTabs = $computed(() => user ? [{
}, ...($i && ($i.id === user.id)) || user.publicReactions ? [{
key: 'reactions',
title: i18n.ts.reaction,
icon: 'ph-smiley-wink-bold ph-lg',
icon: 'ph-smiley-bold ph-lg',
}] : [], {
key: 'clips',
title: i18n.ts.clips,

View file

@ -97,9 +97,27 @@ a {
tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
&:hover {
text-decoration: underline;
&::after {
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 {

View file

@ -80,7 +80,7 @@ function openInstanceMenu(ev: MouseEvent) {
}, {
type: 'link',
text: i18n.ts.customEmojis,
icon: 'ph-smiley-wink-bold ph-lg',
icon: 'ph-smiley-bold ph-lg',
to: '/about#emojis',
}, {
type: 'link',

View file

@ -133,7 +133,7 @@ function openInstanceMenu(ev: MouseEvent) {
}, {
type: 'link',
text: i18n.ts.customEmojis,
icon: 'ph-smiley-wink-bold ph-lg',
icon: 'ph-smiley-bold ph-lg',
to: '/about#emojis',
}, {
type: 'link',
@ -244,7 +244,6 @@ function more(ev: MouseEvent) {
display: inline-block;
width: 55px;
aspect-ratio: 1;
transform: translateY(0.2em);
}
}
}

View file

@ -146,7 +146,7 @@ function openInstanceMenu(ev: MouseEvent) {
}, {
type: 'link',
text: i18n.ts.customEmojis,
icon: 'ph-smiley-wink-bold ph-lg',
icon: 'ph-smiley-bold ph-lg',
to: '/about#emojis',
}, {
type: 'link',