mirror/hotomoe
1
0
Fork 0
mirror of https://github.com/hotomoe/hotomoe synced 2024-12-02 08:48:11 +09:00
Code

refactor(client): use css modules

Browse Source
This commit is contained in:
syuilo 2023-01-15 11:30:40 +09:00
parent daddec8362
commit 7738a36014
1 changed files with 18 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
packages/frontend/src/ui/_common_/stream-indicator.vue
View File

@ -1,9 +1,9 @@
<template>
<div v-if="hasDisconnected && $store.state.serverDisconnectedBehavior === 'quiet'" class="nsbbhtug" @click="resetDisconnected">
<div>{{ i18n.ts.disconnectedFromServer }}</div>
<div class="command">
<button class="_textButton" @click="reload">{{ i18n.ts.reload }}</button>
<button class="_textButton">{{ i18n.ts.doNothing }}</button>
<div v-if="true || hasDisconnected && $store.state.serverDisconnectedBehavior === 'quiet'" :class="$style.root" class="_panel _shadow" @click="resetDisconnected">
<div><i class="ti ti-alert-triangle"></i> {{ i18n.ts.disconnectedFromServer }}</div>
<div :class="$style.command" class="_buttons">
<MkButton :class="$style.commandButton" small primary @click="reload">{{ i18n.ts.reload }}</MkButton>
<MkButton :class="$style.commandButton" small>{{ i18n.ts.doNothing }}</MkButton>
</div>
</div>
</template>
@ -12,6 +12,10 @@
import { onUnmounted } from 'vue';
import { stream } from '@/stream';
import { i18n } from '@/i18n';
import MkButton from '@/components/MkButton.vue';
import * as os from '@/os';
const zIndex = os.claimZIndex('high');
let hasDisconnected = $ref(false);
@ -34,28 +38,22 @@ onUnmounted(() => {
});
</script>
<style lang="scss" scoped>
.nsbbhtug {
<style lang="scss" module>
.root {
position: fixed;
z-index: 16385;
z-index: v-bind(zIndex);
bottom: calc(var(--minBottomSpacing) + var(--margin));
right: var(--margin);
margin: 0;
padding: 6px 12px;
padding: 12px;
font-size: 0.9em;
color: #fff;
background: #000;
opacity: 0.8;
border-radius: 4px;
max-width: 320px;
}
> .command {
display: flex;
justify-content: space-around;
.command {
margin-top: 8px;
}
> button {
padding: 0.7em;
}
}
.commandButton {
}
</style>