diff options
Diffstat (limited to 'packages/frontend')
| -rw-r--r-- | packages/frontend/src/ui/_common_/statusbars.vue | 122 |
1 files changed, 61 insertions, 61 deletions
diff --git a/packages/frontend/src/ui/_common_/statusbars.vue b/packages/frontend/src/ui/_common_/statusbars.vue index b1e2c80f10..bb245c7dd8 100644 --- a/packages/frontend/src/ui/_common_/statusbars.vue +++ b/packages/frontend/src/ui/_common_/statusbars.vue @@ -1,18 +1,18 @@ <template> -<div class="dlrsnxqu"> +<div :class="$style.root"> <div - v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" class="item" :class="[{ black: x.black }, { - verySmall: x.size === 'verySmall', - small: x.size === 'small', - medium: x.size === 'medium', - large: x.size === 'large', - veryLarge: x.size === 'veryLarge', + v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" :class="[$style.item, { [$style.black]: x.black, + [$style.verySmall]: x.size === 'verySmall', + [$style.small]: x.size === 'small', + [$style.medium]: x.size === 'medium', + [$style.large]: x.size === 'large', + [$style.veryLarge]: x.size === 'veryLarge', }]" > - <span class="name">{{ x.name }}</span> - <XRss v-if="x.type === 'rss'" class="body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :url="x.props.url" :shuffle="x.props.shuffle"/> - <XFederation v-else-if="x.type === 'federation'" class="body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :colored="x.props.colored"/> - <XUserList v-else-if="x.type === 'userList'" class="body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :userListId="x.props.userListId"/> + <span :class="$style.name">{{ x.name }}</span> + <XRss v-if="x.type === 'rss'" :class="$style.body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :url="x.props.url" :shuffle="x.props.shuffle"/> + <XFederation v-else-if="x.type === 'federation'" :class="$style.body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :colored="x.props.colored"/> + <XUserList v-else-if="x.type === 'userList'" :class="$style.body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :userListId="x.props.userListId"/> </div> </div> </template> @@ -25,67 +25,67 @@ const XFederation = defineAsyncComponent(() => import('./statusbar-federation.vu const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')); </script> -<style lang="scss" scoped> -.dlrsnxqu { +<style lang="scss" module> +.root { font-size: 15px; background: var(--panel); +} - > .item { - --height: 24px; - --nameMargin: 10px; - font-size: 0.85em; - - &.verySmall { - --nameMargin: 7px; - --height: 16px; - font-size: 0.75em; - } +.item { + --height: 24px; + --nameMargin: 10px; + font-size: 0.85em; - &.small { - --nameMargin: 8px; - --height: 20px; - font-size: 0.8em; - } + &.verySmall { + --nameMargin: 7px; + --height: 16px; + font-size: 0.75em; + } - &.large { - --nameMargin: 12px; - --height: 26px; - font-size: 0.875em; - } + &.small { + --nameMargin: 8px; + --height: 20px; + font-size: 0.8em; + } - &.veryLarge { - --nameMargin: 14px; - --height: 30px; - font-size: 0.9em; - } + &.large { + --nameMargin: 12px; + --height: 26px; + font-size: 0.875em; + } - display: flex; - vertical-align: bottom; - width: 100%; - line-height: var(--height); - height: var(--height); - overflow: clip; - contain: strict; + &.veryLarge { + --nameMargin: 14px; + --height: 30px; + font-size: 0.9em; + } - > .name { - padding: 0 var(--nameMargin); - font-weight: bold; - color: var(--accent); + display: flex; + vertical-align: bottom; + width: 100%; + line-height: var(--height); + height: var(--height); + overflow: clip; + contain: strict; - &:empty { - display: none; - } - } + &.black { + background: #000; + color: #fff; + } +} - > .body { - min-width: 0; - flex: 1; - } +.name { + padding: 0 var(--nameMargin); + font-weight: bold; + color: var(--accent); - &.black { - background: #000; - color: #fff; - } + &:empty { + display: none; } } + +.body { + min-width: 0; + flex: 1; +} </style> |