refactor(client): use css modules
This commit is contained in:
syuilo
parent
1c0289e490
commit
07025caee9
3 changed files with 152 additions and 150 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue