mirror/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2025-01-27 03:31:37 +09:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

focusのデザイン修正

Browse Source
This commit is contained in:
kakkokari-gtyih 2024-07-09 19:13:37 +09:00
parent d8cf64a2ca
commit aaf02d575f
2 changed files with 75 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/frontend/src/components/MkSuperMenu.vue
View File

@ -10,15 +10,15 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="items"> <div class="items">
<template v-for="(item, i) in group.items"> <template v-for="(item, i) in group.items">
<a v-if="item.type === 'a'" :href="item.href" :target="item.target" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }"> <a v-if="item.type === 'a'" :href="item.href" :target="item.target" class="_button item" :class="{ danger: item.danger, active: item.active }">
<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span> <span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
<span class="text">{{ item.text }}</span> <span class="text">{{ item.text }}</span>
</a> </a>
<button v-else-if="item.type === 'button'" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="ev => item.action(ev)"> <button v-else-if="item.type === 'button'" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="ev => item.action(ev)">
<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span> <span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
<span class="text">{{ item.text }}</span> <span class="text">{{ item.text }}</span>
</button> </button>
<MkA v-else :to="item.to" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }"> <MkA v-else :to="item.to" class="_button item" :class="{ danger: item.danger, active: item.active }">
<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span> <span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
<span class="text">{{ item.text }}</span> <span class="text">{{ item.text }}</span>
</MkA> </MkA>

74
packages/frontend/src/ui/_common_/navbar.vue
View File

@ -166,6 +166,15 @@ function more(ev: MouseEvent) {
display: block; display: block;
text-align: center; text-align: center;
width: 100%; width: 100%;
&:focus-visible {
outline: none;
> .instanceIcon {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
}
} }
.instanceIcon { .instanceIcon {
@ -207,6 +216,15 @@ function more(ev: MouseEvent) {
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB)); background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
} }
&:focus-visible {
outline: none;
&:before {
outline: 2px solid var(--fgOnAccent);
outline-offset: -4px;
}
}
&:hover, &.active { &:hover, &.active {
&:before { &:before {
background: var(--accentLighten); background: var(--accentLighten);
@ -234,6 +252,14 @@ function more(ev: MouseEvent) {
text-align: left; text-align: left;
box-sizing: border-box; box-sizing: border-box;
overflow: clip; overflow: clip;
&:focus-visible {
outline: none;
> .avatar {
box-shadow: 0 0 0 4px var(--focus);
}
}
} }
.avatar { .avatar {
@ -282,7 +308,16 @@ function more(ev: MouseEvent) {
color: var(--navActive); color: var(--navActive);
} }
&:hover, &.active { &:focus-visible {
outline: none;
&:before {
outline: 2px solid var(--focus);
outline-offset: -2px;
}
}
&:hover, &.active, &:focus {
color: var(--accent); color: var(--accent);
&:before { &:before {
@ -352,6 +387,15 @@ function more(ev: MouseEvent) {
display: block; display: block;
text-align: center; text-align: center;
width: 100%; width: 100%;
&:focus-visible {
outline: none;
> .instanceIcon {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
}
} }
.instanceIcon { .instanceIcon {
@ -391,6 +435,15 @@ function more(ev: MouseEvent) {
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB)); background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
} }
&:focus-visible {
outline: none;
&:before {
outline: 2px solid var(--fgOnAccent);
outline-offset: -4px;
}
}
&:hover, &.active { &:hover, &.active {
&:before { &:before {
background: var(--accentLighten); background: var(--accentLighten);
@ -413,6 +466,14 @@ function more(ev: MouseEvent) {
padding: 20px 0; padding: 20px 0;
width: 100%; width: 100%;
overflow: clip; overflow: clip;
&:focus-visible {
outline: none;
> .avatar {
box-shadow: 0 0 0 4px var(--focus);
}
}
} }
.avatar { .avatar {
@ -442,7 +503,16 @@ function more(ev: MouseEvent) {
width: 100%; width: 100%;
text-align: center; text-align: center;
&:hover, &.active { &:focus-visible {
outline: none;
&:before {
outline: 2px solid var(--focus);
outline-offset: -2px;
}
}
&:hover, &.active, &:focus {
text-decoration: none; text-decoration: none;
color: var(--accent); color: var(--accent);