diff --git a/src/client/components/analog-clock.vue b/src/client/components/analog-clock.vue index a107362240..b8fb4cf7be 100644 --- a/src/client/components/analog-clock.vue +++ b/src/client/components/analog-clock.vue @@ -1,10 +1,11 @@ <template> -<svg class="mk-analog-clock" viewBox="0 0 10 10" preserveAspectRatio="none"> - <circle v-for="angle, i in graduations" +<svg class="mbcofsoe" viewBox="0 0 10 10" preserveAspectRatio="none"> + <circle v-for="(angle, i) in graduations" :cx="5 + (Math.sin(angle) * (5 - graduationsPadding))" :cy="5 - (Math.cos(angle) * (5 - graduationsPadding))" :r="i % 5 == 0 ? 0.125 : 0.05" - :fill="i % 5 == 0 ? majorGraduationColor : minorGraduationColor"/> + :fill="i % 5 == 0 ? majorGraduationColor : minorGraduationColor" + :key="i"/> <line :x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))" @@ -38,10 +39,6 @@ import * as tinycolor from 'tinycolor2'; export default Vue.extend({ props: { - dark: { - type: Boolean, - default: false - }, smooth: { type: Boolean, default: false @@ -63,6 +60,10 @@ export default Vue.extend({ }, computed: { + dark(): boolean { + return tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--bg')).isDark(); + }, + majorGraduationColor(): string { return this.dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)'; }, @@ -74,14 +75,14 @@ export default Vue.extend({ return this.dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.3)'; }, mHandColor(): string { - return this.dark ? '#fff' : '#777'; + return tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--fg')).toHexString(); }, hHandColor(): string { - return tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--primary')).toHexString(); + return tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--accent')).toHexString(); }, ms(): number { - return this.now.getMilliseconds() * this.smooth; + return this.now.getMilliseconds() * (this.smooth ? 1 : 0); }, s(): number { return this.now.getSeconds(); @@ -137,7 +138,7 @@ export default Vue.extend({ </script> <style lang="scss" scoped> -.mk-analog-clock { +.mbcofsoe { display: block; } </style> diff --git a/src/client/widgets/clock.vue b/src/client/widgets/clock.vue index bd521813b7..8e61898033 100644 --- a/src/client/widgets/clock.vue +++ b/src/client/widgets/clock.vue @@ -1,8 +1,8 @@ <template> -<div class="mkw-clock"> +<div> <mk-container :naked="props.style % 2 === 0" :show-header="false"> - <div class="mkw-analog-clock--body"> - <mk-analog-clock :dark="$store.state.device.darkmode" :smooth="props.style < 2"/> + <div class="vubelbmv"> + <mk-analog-clock class="clock" :smooth="props.style < 2"/> </div> </mk-container> </div> @@ -10,7 +10,6 @@ <script lang="ts"> import define from './define'; - import MkContainer from '../components/ui/container.vue'; import MkAnalogClock from '../components/analog-clock.vue'; @@ -34,9 +33,12 @@ export default define({ </script> <style lang="scss" scoped> -.mkw-analog-clock { - .mkw-analog-clock--body { - padding: 8px; +.vubelbmv { + padding: 8px; + + > .clock { + height: 150px; + margin: auto; } } </style>