From 9cab659392a6ff9bacdc95742d4ff423c843b73f Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 3 Oct 2021 02:46:58 +0900 Subject: [PATCH] :art: --- .../components/channel-follow-button.vue | 2 +- src/client/components/emoji-picker-window.vue | 2 +- src/client/components/emoji-picker.vue | 2 +- src/client/components/follow-button.vue | 2 +- src/client/components/media-caption.vue | 2 +- src/client/components/note.vue | 2 +- src/client/components/post-form.vue | 2 +- src/client/components/ui/button.vue | 17 ++++++++++---- src/client/components/ui/menu.vue | 2 +- src/client/pages/messaging/index.vue | 3 ++- src/client/pages/reversi/game.setting.vue | 2 +- src/client/pages/settings/index.link.vue | 22 +++++++++++++------ src/client/pages/settings/index.vue | 16 +++++--------- src/client/style.scss | 4 ++-- src/client/ui/chat/note.vue | 2 +- src/client/ui/chat/post-form.vue | 2 +- src/client/widgets/aiscript.vue | 2 +- src/client/widgets/memo.vue | 2 +- 18 files changed, 50 insertions(+), 38 deletions(-) diff --git a/src/client/components/channel-follow-button.vue b/src/client/components/channel-follow-button.vue index 6f9405b97..bd8627f6e 100644 --- a/src/client/components/channel-follow-button.vue +++ b/src/client/components/channel-follow-button.vue @@ -91,7 +91,7 @@ export default defineComponent({ width: 31px; } - &:focus { + &:focus-visible { &:after { content: ""; pointer-events: none; diff --git a/src/client/components/emoji-picker-window.vue b/src/client/components/emoji-picker-window.vue index 53b6ae6b3..b7b884565 100644 --- a/src/client/components/emoji-picker-window.vue +++ b/src/client/components/emoji-picker-window.vue @@ -153,7 +153,7 @@ export default defineComponent({ height: var(--eachSize); border-radius: 4px; - &:focus { + &:focus-visible { outline: solid 2px var(--focus); z-index: 1; } diff --git a/src/client/components/emoji-picker.vue b/src/client/components/emoji-picker.vue index d8703202c..85a12a08e 100644 --- a/src/client/components/emoji-picker.vue +++ b/src/client/components/emoji-picker.vue @@ -465,7 +465,7 @@ export default defineComponent({ height: var(--eachSize); border-radius: 4px; - &:focus { + &:focus-visible { outline: solid 2px var(--focus); z-index: 1; } diff --git a/src/client/components/follow-button.vue b/src/client/components/follow-button.vue index 5685b86a5..5eba9b1f6 100644 --- a/src/client/components/follow-button.vue +++ b/src/client/components/follow-button.vue @@ -161,7 +161,7 @@ export default defineComponent({ width: 31px; } - &:focus { + &:focus-visible { &:after { content: ""; pointer-events: none; diff --git a/src/client/components/media-caption.vue b/src/client/components/media-caption.vue index 73eba2302..b35b101d0 100644 --- a/src/client/components/media-caption.vue +++ b/src/client/components/media-caption.vue @@ -206,7 +206,7 @@ export default defineComponent({ min-width: 100%; min-height: 90px; - &:focus { + &:focus-visible { outline: none; } diff --git a/src/client/components/note.vue b/src/client/components/note.vue index 9fa986836..3b07884ce 100644 --- a/src/client/components/note.vue +++ b/src/client/components/note.vue @@ -888,7 +888,7 @@ export default defineComponent({ //content-visibility: auto; //contain-intrinsic-size: 0 128px; - &:focus { + &:focus-visible { outline: none; &:after { diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue index 657053cc9..4ec09e76d 100644 --- a/src/client/components/post-form.vue +++ b/src/client/components/post-form.vue @@ -819,7 +819,7 @@ export default defineComponent({ color: var(--fg); font-family: inherit; - &:focus { + &:focus-visible { outline: none; } diff --git a/src/client/components/ui/button.vue b/src/client/components/ui/button.vue index 6e3cd485c..53b973fe5 100644 --- a/src/client/components/ui/button.vue +++ b/src/client/components/ui/button.vue @@ -1,7 +1,7 @@ @@ -18,12 +22,16 @@ export default defineComponent({ props: { to: { type: String, - required: true + required: false }, active: { type: Boolean, required: false }, + danger: { + type: Boolean, + required: false + }, external: { type: Boolean, required: false @@ -33,10 +41,6 @@ export default defineComponent({ required: false, }, }, - data() { - return { - }; - } }); @@ -61,6 +65,10 @@ export default defineComponent({ background: var(--accentedBg); } + &.danger { + color: var(--error); + } + > .icon { width: 32px; margin-right: 2px; diff --git a/src/client/pages/settings/index.vue b/src/client/pages/settings/index.vue index 399f4049b..5748d4bf5 100644 --- a/src/client/pages/settings/index.vue +++ b/src/client/pages/settings/index.vue @@ -33,12 +33,10 @@ API {{ $ts.other }} - - {{ $ts.clearCache }} - - - {{ $ts.logout }} - +
+ {{ $ts.clearCache }} + {{ $ts.logout }} +
@@ -50,8 +48,6 @@ import { computed, defineAsyncComponent, defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue'; import { i18n } from '@client/i18n'; 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 { scroll } from '@client/scripts/scroll'; import { signout } from '@client/account'; @@ -63,8 +59,6 @@ import { $i } from '@client/account'; export default defineComponent({ components: { XLink, - FormGroup, - FormButton, MkInfo, }, @@ -220,7 +214,7 @@ export default defineComponent({ display: block; width: 50px; height: 50px; - margin: 0 auto 8px auto; + margin: 8px auto 16px auto; } } } diff --git a/src/client/style.scss b/src/client/style.scss index 5b55ab8ca..8e1d74bc7 100644 --- a/src/client/style.scss +++ b/src/client/style.scss @@ -178,7 +178,7 @@ hr { pointer-events: none; } - &:focus { + &:focus-visible { outline: none; } @@ -509,7 +509,7 @@ hr { padding: 5px; } -.prism-editor__textarea:focus { +.prism-editor__textarea:focus-visible { outline: none; } diff --git a/src/client/ui/chat/note.vue b/src/client/ui/chat/note.vue index 26d44d26a..c376887b8 100644 --- a/src/client/ui/chat/note.vue +++ b/src/client/ui/chat/note.vue @@ -872,7 +872,7 @@ export default defineComponent({ //content-visibility: auto; //contain-intrinsic-size: 0 128px; - &:focus { + &:focus-visible { outline: none; } diff --git a/src/client/ui/chat/post-form.vue b/src/client/ui/chat/post-form.vue index 0f9a206fa..0cacaf77e 100644 --- a/src/client/ui/chat/post-form.vue +++ b/src/client/ui/chat/post-form.vue @@ -681,7 +681,7 @@ export default defineComponent({ color: var(--fg); font-family: inherit; - &:focus { + &:focus-visible { outline: none; } diff --git a/src/client/widgets/aiscript.vue b/src/client/widgets/aiscript.vue index 2ea6d09ff..aaf0a0372 100644 --- a/src/client/widgets/aiscript.vue +++ b/src/client/widgets/aiscript.vue @@ -125,7 +125,7 @@ export default defineComponent({ box-sizing: border-box; font: inherit; - &:focus { + &:focus-visible { outline: none; } } diff --git a/src/client/widgets/memo.vue b/src/client/widgets/memo.vue index 13ab628f2..3f11e6409 100644 --- a/src/client/widgets/memo.vue +++ b/src/client/widgets/memo.vue @@ -81,7 +81,7 @@ export default defineComponent({ font: inherit; font-size: 0.9em; - &:focus { + &:focus-visible { outline: none; } }