mirror of
https://codeberg.org/yeentown/barkey
synced 2024-11-26 05:15:19 +00:00
🎨
This commit is contained in:
syuilo
parent
dcd216daff
commit
9cab659392
18 changed files with 50 additions and 38 deletions
|
|
@ -91,7 +91,7 @@ export default defineComponent({
|
|||
width: 31px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&:focus-visible {
|
||||
&:after {
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@ export default defineComponent({
|
|||
height: var(--eachSize);
|
||||
border-radius: 4px;
|
||||
|
||||
&:focus {
|
||||
&:focus-visible {
|
||||
outline: solid 2px var(--focus);
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -465,7 +465,7 @@ export default defineComponent({
|
|||
height: var(--eachSize);
|
||||
border-radius: 4px;
|
||||
|
||||
&:focus {
|
||||
&:focus-visible {
|
||||
outline: solid 2px var(--focus);
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -161,7 +161,7 @@ export default defineComponent({
|
|||
width: 31px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&:focus-visible {
|
||||
&:after {
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
|
|
|
|||
|
|
@ -206,7 +206,7 @@ export default defineComponent({
|
|||
min-width: 100%;
|
||||
min-height: 90px;
|
||||
|
||||
&:focus {
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -888,7 +888,7 @@ export default defineComponent({
|
|||
//content-visibility: auto;
|
||||
//contain-intrinsic-size: 0 128px;
|
||||
|
||||
&:focus {
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
|
||||
&:after {
|
||||
|
|
|
|||
|
|
@ -819,7 +819,7 @@ export default defineComponent({
|
|||
color: var(--fg);
|
||||
font-family: inherit;
|
||||
|
||||
&:focus {
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<component class="bghgjjyj _button"
|
||||
:is="link ? 'MkA' : 'button'"
|
||||
:class="{ inline, primary, danger, full }"
|
||||
:class="{ inline, primary, danger, rounded, full }"
|
||||
:type="type"
|
||||
@click="$emit('click', $event)"
|
||||
@mousedown="onMousedown"
|
||||
|
|
@ -27,6 +27,11 @@ export default defineComponent({
|
|||
required: false,
|
||||
default: false
|
||||
},
|
||||
rounded: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
inline: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
|
|
@ -124,8 +129,8 @@ export default defineComponent({
|
|||
box-shadow: none;
|
||||
text-decoration: none;
|
||||
background: var(--buttonBg);
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
overflow: clip;
|
||||
box-sizing: border-box;
|
||||
transition: background 0.1s ease;
|
||||
|
||||
|
|
@ -141,6 +146,10 @@ export default defineComponent({
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
&.rounded {
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
font-weight: bold;
|
||||
color: var(--fgOnAccent) !important;
|
||||
|
|
@ -176,7 +185,7 @@ export default defineComponent({
|
|||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&:focus-visible {
|
||||
outline: solid 2px var(--focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -206,7 +206,7 @@ export default defineComponent({
|
|||
background: var(--accentDarken);
|
||||
}
|
||||
|
||||
&:not(:active):focus {
|
||||
&:not(:active):focus-visible {
|
||||
box-shadow: 0 0 0 2px var(--focus) inset;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -53,7 +53,8 @@ export default defineComponent({
|
|||
return {
|
||||
[symbols.PAGE_INFO]: {
|
||||
title: this.$ts.messaging,
|
||||
icon: 'fas fa-comments'
|
||||
icon: 'fas fa-comments',
|
||||
bg: 'var(--bg)',
|
||||
},
|
||||
fetching: true,
|
||||
moreFetching: false,
|
||||
|
|
|
|||
|
|
@ -303,7 +303,7 @@ export default defineComponent({
|
|||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
&:focus,
|
||||
&:focus-visible,
|
||||
&:active {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
<template>
|
||||
<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="text"><slot></slot></span>
|
||||
</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="text"><slot></slot></span>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
|
|
@ -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 {
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -61,6 +65,10 @@ export default defineComponent({
|
|||
background: var(--accentedBg);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
> .icon {
|
||||
width: 32px;
|
||||
margin-right: 2px;
|
||||
|
|
|
|||
|
|
@ -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 === 'other'" replace to="/settings/other"><template #icon><i class="fas fa-ellipsis-h"></i></template>{{ $ts.other }}</XLink>
|
||||
</div>
|
||||
<FormGroup>
|
||||
<FormButton @click="clear">{{ $ts.clearCache }}</FormButton>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<FormButton @click="logout" danger>{{ $ts.logout }}</FormButton>
|
||||
</FormGroup>
|
||||
<div class="group">
|
||||
<XLink @click="clear"><template #icon><i class="fas fa-trash"></i></template>{{ $ts.clearCache }}</XLink>
|
||||
<XLink @click="logout" danger><template #icon><i class="fas fa-sign-in-alt fa-flip-horizontal"></i></template>{{ $ts.logout }}</XLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<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 { 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -872,7 +872,7 @@ export default defineComponent({
|
|||
//content-visibility: auto;
|
||||
//contain-intrinsic-size: 0 128px;
|
||||
|
||||
&:focus {
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -681,7 +681,7 @@ export default defineComponent({
|
|||
color: var(--fg);
|
||||
font-family: inherit;
|
||||
|
||||
&:focus {
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ export default defineComponent({
|
|||
box-sizing: border-box;
|
||||
font: inherit;
|
||||
|
||||
&:focus {
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ export default defineComponent({
|
|||
font: inherit;
|
||||
font-size: 0.9em;
|
||||
|
||||
&:focus {
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue