diff --git a/packages/frontend/src/widgets/WidgetCalendar.vue b/packages/frontend/src/widgets/WidgetCalendar.vue index 1bd431259a..1edadb1871 100644 --- a/packages/frontend/src/widgets/WidgetCalendar.vue +++ b/packages/frontend/src/widgets/WidgetCalendar.vue @@ -1,31 +1,31 @@ <template> -<div class="mkw-calendar" :class="{ _panel: !widgetProps.transparent }"> - <div class="calendar" :class="{ isHoliday }"> - <p class="month-and-year"> - <span class="year">{{ $t('yearX', { year }) }}</span> - <span class="month">{{ $t('monthX', { month }) }}</span> +<div :class="[$style.root, { _panel: !widgetProps.transparent }]"> + <div :class="[$style.calendar, { [$style.isHoliday]: isHoliday }]"> + <p :class="$style.monthAndYear"> + <span :class="$style.year">{{ $t('yearX', { year }) }}</span> + <span :class="$style.month">{{ $t('monthX', { month }) }}</span> </p> <p v-if="month === 1 && day === 1" class="day">🎉{{ $t('dayX', { day }) }}<span style="display: inline-block; transform: scaleX(-1);">🎉</span></p> - <p v-else class="day">{{ $t('dayX', { day }) }}</p> - <p class="week-day">{{ weekDay }}</p> + <p v-else :class="$style.day">{{ $t('dayX', { day }) }}</p> + <p :class="$style.weekDay">{{ weekDay }}</p> </div> - <div class="info"> - <div> - <p>{{ i18n.ts.today }}<b>{{ dayP.toFixed(1) }}%</b></p> - <div class="meter"> - <div class="val" :style="{ width: `${dayP}%` }"></div> + <div :class="$style.info"> + <div :class="$style.infoSection"> + <p :class="$style.infoText">{{ i18n.ts.today }}<b :class="$style.percentage">{{ dayP.toFixed(1) }}%</b></p> + <div :class="$style.meter"> + <div :class="$style.meterVal" :style="{ width: `${dayP}%` }"></div> </div> </div> - <div> - <p>{{ i18n.ts.thisMonth }}<b>{{ monthP.toFixed(1) }}%</b></p> - <div class="meter"> - <div class="val" :style="{ width: `${monthP}%` }"></div> + <div :class="$style.infoSection"> + <p :class="$style.infoText">{{ i18n.ts.thisMonth }}<b :class="$style.percentage">{{ monthP.toFixed(1) }}%</b></p> + <div :class="$style.meter"> + <div :class="$style.meterVal" :style="{ width: `${monthP}%` }"></div> </div> </div> - <div> - <p>{{ i18n.ts.thisYear }}<b>{{ yearP.toFixed(1) }}%</b></p> - <div class="meter"> - <div class="val" :style="{ width: `${yearP}%` }"></div> + <div :class="$style.infoSection"> + <p :class="$style.infoText">{{ i18n.ts.thisYear }}<b :class="$style.percentage">{{ yearP.toFixed(1) }}%</b></p> + <div :class="$style.meter"> + <div :class="$style.meterVal" :style="{ width: `${yearP}%` }"></div> </div> </div> </div> @@ -115,8 +115,8 @@ defineExpose<WidgetComponentExpose>({ }); </script> -<style lang="scss" scoped> -.mkw-calendar { +<style lang="scss" module> +.root { padding: 16px 0; &:after { @@ -124,91 +124,93 @@ defineExpose<WidgetComponentExpose>({ display: block; clear: both; } +} - > .calendar { - float: left; - width: 60%; - text-align: center; - - &.isHoliday { - > .day { - color: #ef95a0; - } - } - - > .month-and-year, > .week-day { - margin: 0; - line-height: 18px; - font-size: 0.9em; - - > .year, > .month { - margin: 0 4px; - } - } +.calendar { + float: left; + width: 60%; + text-align: center; + &.isHoliday { > .day { - margin: 10px 0; - line-height: 32px; - font-size: 1.75em; - } - } - - > .info { - display: block; - float: left; - width: 40%; - padding: 0 16px 0 0; - box-sizing: border-box; - - > div { - margin-bottom: 8px; - - &:last-child { - margin-bottom: 4px; - } - - > p { - display: flex; - margin: 0 0 2px 0; - font-size: 0.75em; - line-height: 18px; - opacity: 0.8; - - > b { - margin-left: auto; - } - } - - > .meter { - width: 100%; - overflow: hidden; - background: var(--X11); - border-radius: 8px; - - > .val { - height: 4px; - transition: width .3s cubic-bezier(0.23, 1, 0.32, 1); - } - } - - &:nth-child(1) { - > .meter > .val { - background: #f7796c; - } - } - - &:nth-child(2) { - > .meter > .val { - background: #a1de41; - } - } - - &:nth-child(3) { - > .meter > .val { - background: #41ddde; - } - } + color: #ef95a0; } } } + +.monthAndYear, +.weekDay { + margin: 0; + line-height: 18px; + font-size: 0.9em; +} + +.year, +.month { + margin: 0 4px; +} + +.day { + margin: 10px 0; + line-height: 32px; + font-size: 1.75em; +} + +.info { + display: block; + float: left; + width: 40%; + padding: 0 16px 0 0; + box-sizing: border-box; +} + +.infoSection { + margin-bottom: 8px; + + &:last-child { + margin-bottom: 4px; + } + + &:nth-child(1) { + > .meter > .meterVal { + background: #f7796c; + } + } + + &:nth-child(2) { + > .meter > .meterVal { + background: #a1de41; + } + } + + &:nth-child(3) { + > .meter > .meterVal { + background: #41ddde; + } + } +} + +.infoText { + display: flex; + margin: 0 0 2px 0; + font-size: 0.75em; + line-height: 18px; + opacity: 0.8; +} + +.percentage { + margin-left: auto; +} + +.meter { + width: 100%; + overflow: hidden; + background: var(--X11); + border-radius: 8px; +} + +.meterVal { + height: 4px; + transition: width .3s cubic-bezier(0.23, 1, 0.32, 1); +} </style> 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> diff --git a/packages/frontend/src/widgets/WidgetMemo.vue b/packages/frontend/src/widgets/WidgetMemo.vue index d5d96165c7..8523aee544 100644 --- a/packages/frontend/src/widgets/WidgetMemo.vue +++ b/packages/frontend/src/widgets/WidgetMemo.vue @@ -3,9 +3,9 @@ <template #icon><i class="ti ti-note"></i></template> <template #header>{{ i18n.ts._widgets.memo }}</template> - <div class="otgbylcu"> - <textarea v-model="text" :placeholder="i18n.ts.placeholder" @input="onChange"></textarea> - <button :disabled="!changed" class="_buttonPrimary" @click="saveMemo">{{ i18n.ts.save }}</button> + <div :class="$style.root"> + <textarea v-model="text" :class="$style.textarea" :placeholder="i18n.ts.placeholder" @input="onChange"></textarea> + <button :class="$style.save" :disabled="!changed" class="_buttonPrimary" @click="saveMemo">{{ i18n.ts.save }}</button> </div> </MkContainer> </template> @@ -68,45 +68,45 @@ defineExpose<WidgetComponentExpose>({ }); </script> -<style lang="scss" scoped> -.otgbylcu { +<style lang="scss" module> +.root { padding-bottom: 28px + 16px; +} - > textarea { - display: block; - width: 100%; - max-width: 100%; - min-width: 100%; - padding: 16px; - color: var(--fg); - background: transparent; - border: none; - border-bottom: solid 0.5px var(--divider); - border-radius: 0; - box-sizing: border-box; - font: inherit; - font-size: 0.9em; +.textarea { + display: block; + width: 100%; + max-width: 100%; + min-width: 100%; + padding: 16px; + color: var(--fg); + background: transparent; + border: none; + border-bottom: solid 0.5px var(--divider); + border-radius: 0; + box-sizing: border-box; + font: inherit; + font-size: 0.9em; - &:focus-visible { - outline: none; - } - } - - > button { - display: block; - position: absolute; - bottom: 8px; - right: 8px; - margin: 0; - padding: 0 10px; - height: 28px; + &:focus-visible { outline: none; - border-radius: 4px; + } +} - &:disabled { - opacity: 0.7; - cursor: default; - } +.save { + display: block; + position: absolute; + bottom: 8px; + right: 8px; + margin: 0; + padding: 0 10px; + height: 28px; + outline: none; + border-radius: 4px; + + &:disabled { + opacity: 0.7; + cursor: default; } } </style>