diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue index 5088de7353..fb2cb5671d 100644 --- a/packages/frontend/src/components/MkPostForm.vue +++ b/packages/frontend/src/components/MkPostForm.vue @@ -23,7 +23,7 @@ </button> <button v-tooltip="i18n.ts.previewNoteText" class="_button preview" :class="{ active: showPreview }" @click="showPreview = !showPreview"><i class="ti ti-eye"></i></button> <button v-click-anime class="submit _button" :class="{ posting }" :disabled="!canPost" data-cy-open-post-form-submit @click="post"> - <div class="inner _buttonGradate"> + <div class="inner"> <template v-if="posted"></template> <template v-else-if="posting"><MkEllipsis/></template> <template v-else>{{ submitText }}</template> @@ -829,6 +829,18 @@ defineExpose({ cursor: wait; } + &:not(:disabled):hover { + > .inner { + background: linear-gradient(90deg, var(--X8), var(--X8)); + } + } + + &:not(:disabled):active { + > .inner { + background: linear-gradient(90deg, var(--X8), var(--X8)); + } + } + > .inner { padding: 0 12px; line-height: 34px; @@ -837,6 +849,8 @@ defineExpose({ font-size: 0.9em; min-width: 90px; box-sizing: border-box; + color: var(--fgOnAccent); + background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB)); > i { margin-left: 6px;