summaryrefslogtreecommitdiff
path: root/packages/frontend/src/widgets/WidgetDigitalClock.vue
diff options
context:
space:
mode:
authorsyuilo <Syuilotan@yahoo.co.jp>2023-01-15 14:03:28 +0900
committersyuilo <Syuilotan@yahoo.co.jp>2023-01-15 14:03:28 +0900
commit07025caee95f8b21411fb8d6089f15b87f9265ec (patch)
tree958b9c2d368c123db91b4fc546924143a447b4e7 /packages/frontend/src/widgets/WidgetDigitalClock.vue
parentFix #9582 (diff)
downloadsharkey-07025caee95f8b21411fb8d6089f15b87f9265ec.tar.gz
sharkey-07025caee95f8b21411fb8d6089f15b87f9265ec.tar.bz2
sharkey-07025caee95f8b21411fb8d6089f15b87f9265ec.zip
refactor(client): use css modules
Diffstat (limited to 'packages/frontend/src/widgets/WidgetDigitalClock.vue')
-rw-r--r--packages/frontend/src/widgets/WidgetDigitalClock.vue20
1 files changed, 10 insertions, 10 deletions
diff --git a/packages/frontend/src/widgets/WidgetDigitalClock.vue b/packages/frontend/src/widgets/WidgetDigitalClock.vue
index d2bfd523f3..b70b2767b3 100644
--- a/packages/frontend/src/widgets/WidgetDigitalClock.vue
+++ b/packages/frontend/src/widgets/WidgetDigitalClock.vue
@@ -1,10 +1,10 @@
<template>
-<div class="mkw-digitalClock _monospace" :class="{ _panel: !widgetProps.transparent }" :style="{ fontSize: `${widgetProps.fontSize}em` }">
- <div v-if="widgetProps.showLabel" class="label">{{ tzAbbrev }}</div>
- <div class="time">
+<div class="_monospace" :class="[$style.root, { _panel: !widgetProps.transparent }]" :style="{ fontSize: `${widgetProps.fontSize}em` }">
+ <div v-if="widgetProps.showLabel" :class="$style.label">{{ tzAbbrev }}</div>
+ <div>
<MkDigitalClock :show-ms="widgetProps.showMs" :offset="tzOffset"/>
</div>
- <div v-if="widgetProps.showLabel" class="label">{{ tzOffsetLabel }}</div>
+ <div v-if="widgetProps.showLabel" :class="$style.label">{{ tzOffsetLabel }}</div>
</div>
</template>
@@ -79,14 +79,14 @@ defineExpose<WidgetComponentExpose>({
});
</script>
-<style lang="scss" scoped>
-.mkw-digitalClock {
+<style lang="scss" module>
+.root {
padding: 16px 0;
text-align: center;
+}
- > .label {
- font-size: 65%;
- opacity: 0.7;
- }
+.label {
+ font-size: 65%;
+ opacity: 0.7;
}
</style>