natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎨

This commit is contained in:
syuilo 2021-10-03 02:46:58 +09:00
parent dcd216daff
commit 9cab659392
18 changed files with 50 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/components/channel-follow-button.vue
View File

@ -91,7 +91,7 @@ export default defineComponent({
width: 31px; width: 31px;
} }
&:focus { &:focus-visible {
&:after { &:after {
content: ""; content: "";
pointer-events: none; pointer-events: none;

2
src/client/components/emoji-picker-window.vue
View File

@ -153,7 +153,7 @@ export default defineComponent({
height: var(--eachSize); height: var(--eachSize);
border-radius: 4px; border-radius: 4px;
&:focus { &:focus-visible {
outline: solid 2px var(--focus); outline: solid 2px var(--focus);
z-index: 1; z-index: 1;
} }

2
src/client/components/emoji-picker.vue
View File

@ -465,7 +465,7 @@ export default defineComponent({
height: var(--eachSize); height: var(--eachSize);
border-radius: 4px; border-radius: 4px;
&:focus { &:focus-visible {
outline: solid 2px var(--focus); outline: solid 2px var(--focus);
z-index: 1; z-index: 1;
} }

2
src/client/components/follow-button.vue
View File

@ -161,7 +161,7 @@ export default defineComponent({
width: 31px; width: 31px;
} }
&:focus { &:focus-visible {
&:after { &:after {
content: ""; content: "";
pointer-events: none; pointer-events: none;

2
src/client/components/media-caption.vue
View File

@ -206,7 +206,7 @@ export default defineComponent({
min-width: 100%; min-width: 100%;
min-height: 90px; min-height: 90px;
&:focus { &:focus-visible {
outline: none; outline: none;
} }

2
src/client/components/note.vue
View File

@ -888,7 +888,7 @@ export default defineComponent({
//content-visibility: auto; //content-visibility: auto;
//contain-intrinsic-size: 0 128px; //contain-intrinsic-size: 0 128px;
&:focus { &:focus-visible {
outline: none; outline: none;
&:after { &:after {

2
src/client/components/post-form.vue
View File

@ -819,7 +819,7 @@ export default defineComponent({
color: var(--fg); color: var(--fg);
font-family: inherit; font-family: inherit;
&:focus { &:focus-visible {
outline: none; outline: none;
} }

17
src/client/components/ui/button.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<component class="bghgjjyj _button" <component class="bghgjjyj _button"
:is="link ? 'MkA' : 'button'" :is="link ? 'MkA' : 'button'"
:class="{ inline, primary, danger, full }" :class="{ inline, primary, danger, rounded, full }"
:type="type" :type="type"
@click="$emit('click', $event)" @click="$emit('click', $event)"
@mousedown="onMousedown" @mousedown="onMousedown"
@ -27,6 +27,11 @@ export default defineComponent({
required: false, required: false,
default: false default: false
}, },
rounded: {
type: Boolean,
required: false,
default: false
},
inline: { inline: {
type: Boolean, type: Boolean,
required: false, required: false,
@ -124,8 +129,8 @@ export default defineComponent({
box-shadow: none; box-shadow: none;
text-decoration: none; text-decoration: none;
background: var(--buttonBg); background: var(--buttonBg);
border-radius: 999px; border-radius: 4px;
overflow: hidden; overflow: clip;
box-sizing: border-box; box-sizing: border-box;
transition: background 0.1s ease; transition: background 0.1s ease;
@ -141,6 +146,10 @@ export default defineComponent({
width: 100%; width: 100%;
} }
&.rounded {
border-radius: 999px;
}
&.primary { &.primary {
font-weight: bold; font-weight: bold;
color: var(--fgOnAccent) !important; color: var(--fgOnAccent) !important;
@ -176,7 +185,7 @@ export default defineComponent({
opacity: 0.7; opacity: 0.7;
} }
&:focus { &:focus-visible {
outline: solid 2px var(--focus); outline: solid 2px var(--focus);
outline-offset: 2px; outline-offset: 2px;
} }

2
src/client/components/ui/menu.vue
View File

@ -206,7 +206,7 @@ export default defineComponent({
background: var(--accentDarken); background: var(--accentDarken);
} }
&:not(:active):focus { &:not(:active):focus-visible {
box-shadow: 0 0 0 2px var(--focus) inset; box-shadow: 0 0 0 2px var(--focus) inset;
} }

3
src/client/pages/messaging/index.vue
View File

@ -53,7 +53,8 @@ export default defineComponent({
return { return {
[symbols.PAGE_INFO]: { [symbols.PAGE_INFO]: {
title: this.$ts.messaging, title: this.$ts.messaging,
icon: 'fas fa-comments' icon: 'fas fa-comments',
bg: 'var(--bg)',
}, },
fetching: true, fetching: true,
moreFetching: false, moreFetching: false,

2
src/client/pages/reversi/game.setting.vue
View File

@ -303,7 +303,7 @@ export default defineComponent({
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
&:focus, &:focus-visible,
&:active { &:active {
border-color: var(--accent); border-color: var(--accent);
} }

22
src/client/pages/settings/index.link.vue
View File

@ -1,13 +1,17 @@
<template> <template>
<div class="qmfkfnzj"> <div class="qmfkfnzj">
<a class="main _button" :href="to" target="_blank" v-if="external"> <a v-if="external" class="main _button" :href="to" target="_blank">
<span class="icon"><slot name="icon"></slot></span> <span class="icon"><slot name="icon"></slot></span>
<span class="text"><slot></slot></span> <span class="text"><slot></slot></span>
</a> </a>
<MkA class="main _button" :class="{ active }" :to="to" :behavior="behavior" v-else> <MkA v-else-if="to" class="main _button" :class="{ active }" :to="to" :behavior="behavior">
<span class="icon"><slot name="icon"></slot></span> <span class="icon"><slot name="icon"></slot></span>
<span class="text"><slot></slot></span> <span class="text"><slot></slot></span>
</MkA> </MkA>
<button v-else class="main _button button" :class="{ danger }">
<span class="icon"><slot name="icon"></slot></span>
<span class="text"><slot></slot></span>
</button>
</div> </div>
</template> </template>
@ -18,12 +22,16 @@ export default defineComponent({
props: { props: {
to: { to: {
type: String, type: String,
required: true required: false
}, },
active: { active: {
type: Boolean, type: Boolean,
required: false required: false
}, },
danger: {
type: Boolean,
required: false
},
external: { external: {
type: Boolean, type: Boolean,
required: false required: false
@ -33,10 +41,6 @@ export default defineComponent({
required: false, required: false,
}, },
}, },
data() {
return {
};
}
}); });
</script> </script>
@ -61,6 +65,10 @@ export default defineComponent({
background: var(--accentedBg); background: var(--accentedBg);
} }
&.danger {
color: var(--error);
}
> .icon { > .icon {
width: 32px; width: 32px;
margin-right: 2px; margin-right: 2px;

16
src/client/pages/settings/index.vue
View File

@ -33,12 +33,10 @@
<XLink :active="page === 'api'" replace to="/settings/api"><template #icon><i class="fas fa-key"></i></template>API</XLink> <XLink :active="page === 'api'" replace to="/settings/api"><template #icon><i class="fas fa-key"></i></template>API</XLink>
<XLink :active="page === 'other'" replace to="/settings/other"><template #icon><i class="fas fa-ellipsis-h"></i></template>{{ $ts.other }}</XLink> <XLink :active="page === 'other'" replace to="/settings/other"><template #icon><i class="fas fa-ellipsis-h"></i></template>{{ $ts.other }}</XLink>
</div> </div>
<FormGroup> <div class="group">
<FormButton @click="clear">{{ $ts.clearCache }}</FormButton> <XLink @click="clear"><template #icon><i class="fas fa-trash"></i></template>{{ $ts.clearCache }}</XLink>
</FormGroup> <XLink @click="logout" danger><template #icon><i class="fas fa-sign-in-alt fa-flip-horizontal"></i></template>{{ $ts.logout }}</XLink>
<FormGroup> </div>
<FormButton @click="logout" danger>{{ $ts.logout }}</FormButton>
</FormGroup>
</div> </div>
<div class="main"> <div class="main">
<component :is="component" :key="page" @info="onInfo" v-bind="pageProps"/> <component :is="component" :key="page" @info="onInfo" v-bind="pageProps"/>
@ -50,8 +48,6 @@
import { computed, defineAsyncComponent, defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue'; import { computed, defineAsyncComponent, defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue';
import { i18n } from '@client/i18n'; import { i18n } from '@client/i18n';
import XLink from './index.link.vue'; import XLink from './index.link.vue';
import FormGroup from '@client/components/debobigego/group.vue';
import FormButton from '@client/components/debobigego/button.vue';
import MkInfo from '@client/components/ui/info.vue'; import MkInfo from '@client/components/ui/info.vue';
import { scroll } from '@client/scripts/scroll'; import { scroll } from '@client/scripts/scroll';
import { signout } from '@client/account'; import { signout } from '@client/account';
@ -63,8 +59,6 @@ import { $i } from '@client/account';
export default defineComponent({ export default defineComponent({
components: { components: {
XLink, XLink,
FormGroup,
FormButton,
MkInfo, MkInfo,
}, },
@ -220,7 +214,7 @@ export default defineComponent({
display: block; display: block;
width: 50px; width: 50px;
height: 50px; height: 50px;
margin: 0 auto 8px auto; margin: 8px auto 16px auto;
} }
} }
} }

4
src/client/style.scss
View File

@ -178,7 +178,7 @@ hr {
pointer-events: none; pointer-events: none;
} }
&:focus { &:focus-visible {
outline: none; outline: none;
} }
@ -509,7 +509,7 @@ hr {
padding: 5px; padding: 5px;
} }
.prism-editor__textarea:focus { .prism-editor__textarea:focus-visible {
outline: none; outline: none;
} }

2
src/client/ui/chat/note.vue
View File

@ -872,7 +872,7 @@ export default defineComponent({
//content-visibility: auto; //content-visibility: auto;
//contain-intrinsic-size: 0 128px; //contain-intrinsic-size: 0 128px;
&:focus { &:focus-visible {
outline: none; outline: none;
} }

2
src/client/ui/chat/post-form.vue
View File

@ -681,7 +681,7 @@ export default defineComponent({
color: var(--fg); color: var(--fg);
font-family: inherit; font-family: inherit;
&:focus { &:focus-visible {
outline: none; outline: none;
} }

2
src/client/widgets/aiscript.vue
View File

@ -125,7 +125,7 @@ export default defineComponent({
box-sizing: border-box; box-sizing: border-box;
font: inherit; font: inherit;
&:focus { &:focus-visible {
outline: none; outline: none;
} }
} }

2
src/client/widgets/memo.vue
View File

@ -81,7 +81,7 @@ export default defineComponent({
font: inherit; font: inherit;
font-size: 0.9em; font-size: 0.9em;
&:focus { &:focus-visible {
outline: none; outline: none;
} }
} }