misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

refactor(frontend): prefix css variables (#14725)

Browse source 
* wip

* Update index.d.ts

* remove unnecessary codes
This commit is contained in:
syuilo 2024-10-09 18:08:14 +09:00 • committed by GitHub
parent 0ad31bd5d4
commit 4a356f1ba7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
280 changed files with 1076 additions and 1093 deletions
Download patch file Download diff file Expand all files Collapse all files

16
packages/frontend/src/pages/reversi/game.board.vue
View file

@ -504,7 +504,7 @@ $gap: 4px;
.boardInner {
padding: 32px;
background: var(--panel);
background: var(--MI_THEME-panel);
box-shadow: 0 0 2px 1px #ce8a5c, inset 0 0 1px 1px #693410;
border-radius: 8px;
}
@ -574,34 +574,34 @@ $gap: 4px;
transition: border 0.25s ease, opacity 0.25s ease;
&.boardCell_empty {
border: solid 2px var(--divider);
border: solid 2px var(--MI_THEME-divider);
}
&.boardCell_empty.boardCell_can {
border-color: var(--accent);
border-color: var(--MI_THEME-accent);
opacity: 0.5;
}
&.boardCell_empty.boardCell_myTurn {
border-color: var(--divider);
border-color: var(--MI_THEME-divider);
opacity: 1;
&.boardCell_can {
border-color: var(--accent);
border-color: var(--MI_THEME-accent);
cursor: pointer;
&:hover {
background: var(--accent);
background: var(--MI_THEME-accent);
}
}
}
&.boardCell_prev {
box-shadow: 0 0 0 4px var(--accent);
box-shadow: 0 0 0 4px var(--MI_THEME-accent);
}
&.boardCell_isEnded {
border-color: var(--divider);
border-color: var(--MI_THEME-divider);
}
&.boardCell_none {

12
packages/frontend/src/pages/reversi/game.setting.vue
View file

@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<template v-else>
<div class="_panel">
<div style="display: flex; align-items: center; padding: 16px; border-bottom: solid 1px var(--divider);">
<div style="display: flex; align-items: center; padding: 16px; border-bottom: solid 1px var(--MI_THEME-divider);">
<div>{{ mapName }}</div>
<MkButton style="margin-left: auto;" @click="chooseMap">{{ i18n.ts._reversi.chooseBoard }}</MkButton>
</div>
@ -87,7 +87,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.footer">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="16">
<div style="text-align: center;" class="_gaps_s">
<div v-if="opponentHasSettingsChanged" style="color: var(--warn);">{{ i18n.ts._reversi.opponentHasSettingsChanged }}</div>
<div v-if="opponentHasSettingsChanged" style="color: var(--MI_THEME-warn);">{{ i18n.ts._reversi.opponentHasSettingsChanged }}</div>
<div>
<template v-if="isReady && isOpReady">{{ i18n.ts._reversi.thisGameIsStartedSoon }}<MkEllipsis/></template>
<template v-if="isReady && !isOpReady">{{ i18n.ts._reversi.waitingForOther }}<MkEllipsis/></template>
@ -273,14 +273,14 @@ onUnmounted(() => {
width: 300px;
height: 300px;
margin: 0 auto;
color: var(--fg);
color: var(--MI_THEME-fg);
}
.boardCell {
display: grid;
place-items: center;
background: transparent;
border: solid 2px var(--divider);
border: solid 2px var(--MI_THEME-divider);
border-radius: 6px;
overflow: clip;
cursor: pointer;
@ -292,7 +292,7 @@ onUnmounted(() => {
.footer {
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
background: var(--acrylicBg);
border-top: solid 0.5px var(--divider);
background: var(--MI_THEME-acrylicBg);
border-top: solid 0.5px var(--MI_THEME-divider);
}
</style>

18
packages/frontend/src/pages/reversi/index.vue
View file

@ -36,13 +36,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.gamePreviews">
<MkA v-for="g in items" :key="g.id" v-panel :class="[$style.gamePreview, !g.isStarted && !g.isEnded && $style.gamePreviewWaiting, g.isStarted && !g.isEnded && $style.gamePreviewActive]" tabindex="-1" :to="`/reversi/g/${g.id}`">
<div :class="$style.gamePreviewPlayers">
<span v-if="g.winnerId === g.user1Id" style="margin-right: 0.75em; color: var(--accent); font-weight: bold;"><i class="ti ti-trophy"></i></span>
<span v-if="g.winnerId === g.user1Id" style="margin-right: 0.75em; color: var(--MI_THEME-accent); font-weight: bold;"><i class="ti ti-trophy"></i></span>
<span v-if="g.winnerId === g.user2Id" style="margin-right: 0.75em; visibility: hidden;"><i class="ti ti-x"></i></span>
<MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user1"/>
<span style="margin: 0 1em;">vs</span>
<MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user2"/>
<span v-if="g.winnerId === g.user1Id" style="margin-left: 0.75em; visibility: hidden;"><i class="ti ti-x"></i></span>
<span v-if="g.winnerId === g.user2Id" style="margin-left: 0.75em; color: var(--accent); font-weight: bold;"><i class="ti ti-trophy"></i></span>
<span v-if="g.winnerId === g.user2Id" style="margin-left: 0.75em; color: var(--MI_THEME-accent); font-weight: bold;"><i class="ti ti-trophy"></i></span>
</div>
<div :class="$style.gamePreviewFooter">
<span v-if="g.isStarted && !g.isEnded" :class="$style.gamePreviewStatusActive">{{ i18n.ts._reversi.playing }}</span>
@ -63,13 +63,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.gamePreviews">
<MkA v-for="g in items" :key="g.id" v-panel :class="[$style.gamePreview, !g.isStarted && !g.isEnded && $style.gamePreviewWaiting, g.isStarted && !g.isEnded && $style.gamePreviewActive]" tabindex="-1" :to="`/reversi/g/${g.id}`">
<div :class="$style.gamePreviewPlayers">
<span v-if="g.winnerId === g.user1Id" style="margin-right: 0.75em; color: var(--accent); font-weight: bold;"><i class="ti ti-trophy"></i></span>
<span v-if="g.winnerId === g.user1Id" style="margin-right: 0.75em; color: var(--MI_THEME-accent); font-weight: bold;"><i class="ti ti-trophy"></i></span>
<span v-if="g.winnerId === g.user2Id" style="margin-right: 0.75em; visibility: hidden;"><i class="ti ti-x"></i></span>
<MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user1"/>
<span style="margin: 0 1em;">vs</span>
<MkAvatar :class="$style.gamePreviewPlayersAvatar" :user="g.user2"/>
<span v-if="g.winnerId === g.user1Id" style="margin-left: 0.75em; visibility: hidden;"><i class="ti ti-x"></i></span>
<span v-if="g.winnerId === g.user2Id" style="margin-left: 0.75em; color: var(--accent); font-weight: bold;"><i class="ti ti-trophy"></i></span>
<span v-if="g.winnerId === g.user2Id" style="margin-left: 0.75em; color: var(--MI_THEME-accent); font-weight: bold;"><i class="ti ti-trophy"></i></span>
</div>
<div :class="$style.gamePreviewFooter">
<span v-if="g.isStarted && !g.isEnded" :class="$style.gamePreviewStatusActive">{{ i18n.ts._reversi.playing }}</span>
@ -295,11 +295,11 @@ definePageMetadata(() => ({
}
.gamePreviewActive {
box-shadow: inset 0 0 8px 0px var(--accent);
box-shadow: inset 0 0 8px 0px var(--MI_THEME-accent);
}
.gamePreviewWaiting {
box-shadow: inset 0 0 8px 0px var(--warn);
box-shadow: inset 0 0 8px 0px var(--MI_THEME-warn);
}
.gamePreviewPlayers {
@ -324,19 +324,19 @@ definePageMetadata(() => ({
.gamePreviewFooter {
display: flex;
align-items: baseline;
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
padding: 6px 10px;
font-size: 0.9em;
}
.gamePreviewStatusActive {
color: var(--accent);
color: var(--MI_THEME-accent);
font-weight: bold;
animation: blink 2s infinite;
}
.gamePreviewStatusWaiting {
color: var(--warn);
color: var(--MI_THEME-warn);
font-weight: bold;
animation: blink 2s infinite;
}