From 4a356f1ba742ae3965d01ad17179d3af4846377a Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Wed, 9 Oct 2024 18:08:14 +0900 Subject: refactor(frontend): prefix css variables (#14725) * wip * Update index.d.ts * remove unnecessary codes --- packages/frontend/src/components/MkLaunchPad.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'packages/frontend/src/components/MkLaunchPad.vue') diff --git a/packages/frontend/src/components/MkLaunchPad.vue b/packages/frontend/src/components/MkLaunchPad.vue index 8e3c19bd12..2dcba7a50e 100644 --- a/packages/frontend/src/components/MkLaunchPad.vue +++ b/packages/frontend/src/components/MkLaunchPad.vue @@ -105,8 +105,8 @@ function close() { box-sizing: border-box; &:hover { - color: var(--accent); - background: var(--accentedBg); + color: var(--MI_THEME-accent); + background: var(--MI_THEME-accentedBg); text-decoration: none; } @@ -137,7 +137,7 @@ function close() { position: absolute; top: 32px; left: 32px; - color: var(--indicator); + color: var(--MI_THEME-indicator); font-size: 8px; animation: global-blink 1s infinite; -- cgit v1.2.3-freya From 3cea890eba0b5137adcc4cb0d4fa2b2286914892 Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Tue, 15 Oct 2024 13:01:06 +0900 Subject: fix(frontend): blinkアニメーションが動作していないのを修正 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/components/MkLaunchPad.vue | 5 ++--- packages/frontend/src/components/MkMenu.vue | 9 ++++----- packages/frontend/src/style.scss | 6 +++++- packages/frontend/src/ui/_common_/navbar-for-mobile.vue | 5 ++--- packages/frontend/src/ui/_common_/navbar.vue | 6 ++---- packages/frontend/src/ui/classic.header.vue | 5 ++--- packages/frontend/src/ui/classic.sidebar.vue | 5 ++--- packages/frontend/src/ui/deck.vue | 7 +++---- packages/frontend/src/ui/universal.vue | 11 +++++------ 9 files changed, 27 insertions(+), 32 deletions(-) (limited to 'packages/frontend/src/components/MkLaunchPad.vue') diff --git a/packages/frontend/src/components/MkLaunchPad.vue b/packages/frontend/src/components/MkLaunchPad.vue index 2dcba7a50e..32c1a2d172 100644 --- a/packages/frontend/src/components/MkLaunchPad.vue +++ b/packages/frontend/src/components/MkLaunchPad.vue @@ -12,13 +12,13 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ item.text }}
{{ item.indicateValue }} - +
{{ item.text }}
{{ item.indicateValue }} - + @@ -139,7 +139,6 @@ function close() { left: 32px; color: var(--MI_THEME-indicator); font-size: 8px; - animation: global-blink 1s infinite; @media (max-width: 500px) { top: 16px; diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue index 59f36f8eec..13a65e411f 100644 --- a/packages/frontend/src/components/MkMenu.vue +++ b/packages/frontend/src/components/MkMenu.vue @@ -49,7 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ item.text }} - +
{{ item.text }} - +
@@ -639,7 +639,6 @@ onBeforeUnmount(() => { align-items: center; color: var(--MI_THEME-indicator); font-size: 12px; - animation: global-blink 1s infinite; } .divider { diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss index 1e6561bdb9..4204c5af59 100644 --- a/packages/frontend/src/style.scss +++ b/packages/frontend/src/style.scss @@ -480,7 +480,11 @@ html[data-color-scheme=dark] ._woodenFrame { transform: scale(0.9); } -@keyframes global-blink { +._blink { + animation: blink 1s infinite; +} + +@keyframes blink { 0% { opacity: 1; transform: scale(1); } 30% { opacity: 1; transform: scale(1); } 90% { opacity: 0; transform: scale(0.5); } diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue index 9acf7b2ede..44253e93bd 100644 --- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue +++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue @@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ navbarItemDef[item].title }} - + {{ navbarItemDef[item].indicateValue }} @@ -31,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only {{ i18n.ts.settings }} @@ -257,7 +257,6 @@ function more() { left: 20px; color: var(--MI_THEME-navIndicator); font-size: 8px; - animation: global-blink 1s infinite; &:has(.itemIndicateValueIcon) { animation: none; diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue index cbfdaac235..8ae11efa2c 100644 --- a/packages/frontend/src/ui/_common_/navbar.vue +++ b/packages/frontend/src/ui/_common_/navbar.vue @@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}" > {{ navbarItemDef[item].title }} - + {{ navbarItemDef[item].indicateValue }} @@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only {{ i18n.ts.settings }} @@ -350,7 +350,6 @@ function more(ev: MouseEvent) { left: 20px; color: var(--MI_THEME-navIndicator); font-size: 8px; - animation: global-blink 1s infinite; &:has(.itemIndicateValueIcon) { animation: none; @@ -555,7 +554,6 @@ function more(ev: MouseEvent) { left: 24px; color: var(--MI_THEME-navIndicator); font-size: 8px; - animation: global-blink 1s infinite; &:has(.itemIndicateValueIcon) { animation: none; diff --git a/packages/frontend/src/ui/classic.header.vue b/packages/frontend/src/ui/classic.header.vue index a0a8601887..f4633314ae 100644 --- a/packages/frontend/src/ui/classic.header.vue +++ b/packages/frontend/src/ui/classic.header.vue @@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
- +
@@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
@@ -142,7 +142,6 @@ onMounted(() => { left: 0; color: var(--MI_THEME-navIndicator); font-size: 8px; - animation: global-blink 1s infinite; } &:hover { diff --git a/packages/frontend/src/ui/classic.sidebar.vue b/packages/frontend/src/ui/classic.sidebar.vue index 4d1846c34c..5acef0bef8 100644 --- a/packages/frontend/src/ui/classic.sidebar.vue +++ b/packages/frontend/src/ui/classic.sidebar.vue @@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ navbarItemDef[item].title }} - + {{ navbarItemDef[item].indicateValue }} @@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only {{ i18n.ts.settings }} @@ -222,7 +222,6 @@ watch(defaultStore.reactiveState.menuDisplay, () => { left: 0; color: var(--MI_THEME-navIndicator); font-size: 8px; - animation: global-blink 1s infinite; &:has(.itemIndicateValueIcon) { animation: none; diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue index 36ffca8264..a1a76a7e7d 100644 --- a/packages/frontend/src/ui/deck.vue +++ b/packages/frontend/src/ui/deck.vue @@ -50,11 +50,11 @@ SPDX-License-Identifier: AGPL-3.0-only
- + @@ -97,6 +97,7 @@ import { v4 as uuid } from 'uuid'; import XCommon from './_common_/common.vue'; import { deckStore, columnTypes, addColumn as addColumnToStore, loadDeck, getProfiles, deleteProfile as deleteProfile_ } from './deck/deck-store.js'; import type { ColumnType } from './deck/deck-store.js'; +import type { MenuItem } from '@/types/menu.js'; import XSidebar from '@/ui/_common_/navbar.vue'; import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue'; import MkButton from '@/components/MkButton.vue'; @@ -118,7 +119,6 @@ import XMentionsColumn from '@/ui/deck/mentions-column.vue'; import XDirectColumn from '@/ui/deck/direct-column.vue'; import XRoleTimelineColumn from '@/ui/deck/role-timeline-column.vue'; import { mainRouter } from '@/router/main.js'; -import type { MenuItem } from '@/types/menu.js'; const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue')); const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue')); @@ -479,7 +479,6 @@ body { left: 0; color: var(--MI_THEME-indicator); font-size: 16px; - animation: global-blink 1s infinite; &:has(.itemIndicateValueIcon) { animation: none; diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue index 9fc8bd102d..d739c2e1cd 100644 --- a/packages/frontend/src/ui/universal.vue +++ b/packages/frontend/src/ui/universal.vue @@ -25,11 +25,11 @@ SPDX-License-Identifier: AGPL-3.0-only
- + @@ -96,9 +96,11 @@ SPDX-License-Identifier: AGPL-3.0-only