diff --git a/packages/frontend/src/components/MkTagCloud.vue b/packages/frontend/src/components/MkTagCloud.vue
index 4e8d5bab7fd0753799187a0e50f6a66dba65b8f9..6e4e054aad1c3e6d99af972b7135643bf41add16 100644
--- a/packages/frontend/src/components/MkTagCloud.vue
+++ b/packages/frontend/src/components/MkTagCloud.vue
@@ -1,7 +1,7 @@
<template>
-<div ref="rootEl" class="meijqfqm">
- <canvas :id="idForCanvas" ref="canvasEl" class="canvas" :width="width" height="300" @contextmenu.prevent="() => {}"></canvas>
- <div :id="idForTags" ref="tagsEl" class="tags">
+<div ref="rootEl" :class="$style.root">
+ <canvas :id="idForCanvas" ref="canvasEl" style="display: block;" :width="width" height="300" @contextmenu.prevent="() => {}"></canvas>
+ <div :id="idForTags" ref="tagsEl" :class="$style.tags">
<ul>
<slot></slot>
</ul>
@@ -70,21 +70,17 @@ defineExpose({
});
</script>
-<style lang="scss" scoped>
-.meijqfqm {
+<style lang="scss" module>
+.root {
position: relative;
overflow: clip;
display: grid;
place-items: center;
+}
- > .canvas {
- display: block;
- }
-
- > .tags {
- position: absolute;
- top: 999px;
- left: 999px;
- }
+.tags {
+ position: absolute;
+ top: 999px;
+ left: 999px;
}
</style>
diff --git a/packages/frontend/src/components/form/slot.vue b/packages/frontend/src/components/form/slot.vue
index 79ce8fe51fc0d6a444108f77a9a1973a91349acb..792f664ea045f36ca07358a1842ebda1fd2b8346 100644
--- a/packages/frontend/src/components/form/slot.vue
+++ b/packages/frontend/src/components/form/slot.vue
@@ -1,10 +1,10 @@
<template>
-<div class="adhpbeou">
- <div class="label" @click="focus"><slot name="label"></slot></div>
- <div class="content">
+<div>
+ <div :class="$style.label" @click="focus"><slot name="label"></slot></div>
+ <div :class="$style.content">
<slot></slot>
</div>
- <div class="caption"><slot name="caption"></slot></div>
+ <div :class="$style.caption"><slot name="caption"></slot></div>
</div>
</template>
@@ -16,26 +16,24 @@ function focus() {
}
</script>
-<style lang="scss" scoped>
-.adhpbeou {
- > .label {
- font-size: 0.85em;
- padding: 0 0 8px 0;
- user-select: none;
+<style lang="scss" module>
+.label {
+ font-size: 0.85em;
+ padding: 0 0 8px 0;
+ user-select: none;
- &:empty {
- display: none;
- }
+ &:empty {
+ display: none;
}
+}
- > .caption {
- font-size: 0.85em;
- padding: 8px 0 0 0;
- color: var(--fgTransparentWeak);
+.caption {
+ font-size: 0.85em;
+ padding: 8px 0 0 0;
+ color: var(--fgTransparentWeak);
- &:empty {
- display: none;
- }
+ &:empty {
+ display: none;
}
}
</style>
diff --git a/packages/frontend/src/pages/pages.vue b/packages/frontend/src/pages/pages.vue
index b72271dbf7f62b68a0e8dbe96546efdf5ec89e4e..4f67bda11fc6c9e9b111a522459ec9bb608a4315 100644
--- a/packages/frontend/src/pages/pages.vue
+++ b/packages/frontend/src/pages/pages.vue
@@ -2,22 +2,28 @@
<MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="700">
- <div v-if="tab === 'featured'" class="rknalgpo">
+ <div v-if="tab === 'featured'">
<MkPagination v-slot="{items}" :pagination="featuredPagesPagination">
- <MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
+ <div class="_gaps">
+ <MkPagePreview v-for="page in items" :key="page.id" :page="page"/>
+ </div>
</MkPagination>
</div>
- <div v-else-if="tab === 'my'" class="rknalgpo my">
+ <div v-else-if="tab === 'my'" class="_gaps">
<MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton>
<MkPagination v-slot="{items}" :pagination="myPagesPagination">
- <MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
+ <div class="_gaps">
+ <MkPagePreview v-for="page in items" :key="page.id" :page="page"/>
+ </div>
</MkPagination>
</div>
- <div v-else-if="tab === 'liked'" class="rknalgpo">
+ <div v-else-if="tab === 'liked'">
<MkPagination v-slot="{items}" :pagination="likedPagesPagination">
- <MkPagePreview v-for="like in items" :key="like.page.id" class="ckltabjg" :page="like.page"/>
+ <div class="_gaps">
+ <MkPagePreview v-for="like in items" :key="like.page.id" :page="like.page"/>
+ </div>
</MkPagination>
</div>
</MkSpacer>
@@ -79,21 +85,3 @@ definePageMetadata(computed(() => ({
icon: 'ti ti-note',
})));
</script>
-
-<style lang="scss" scoped>
-.rknalgpo {
- &.my .ckltabjg:first-child {
- margin-top: 16px;
- }
-
- .ckltabjg:not(:last-child) {
- margin-bottom: 8px;
- }
-
- @media (min-width: 500px) {
- .ckltabjg:not(:last-child) {
- margin-bottom: 16px;
- }
- }
-}
-</style>
diff --git a/packages/frontend/src/pages/settings/apps.vue b/packages/frontend/src/pages/settings/apps.vue
index 599d6329e2c62a62ebb200fbae45960700cd387a..fbb78200d46238a523644006878c39be78b8fff1 100644
--- a/packages/frontend/src/pages/settings/apps.vue
+++ b/packages/frontend/src/pages/settings/apps.vue
@@ -9,11 +9,11 @@
</template>
<template #default="{items}">
<div class="_gaps">
- <div v-for="token in items" :key="token.id" class="_panel bfomjevm">
- <img v-if="token.iconUrl" class="icon" :src="token.iconUrl" alt=""/>
- <div class="body">
- <div class="name">{{ token.name }}</div>
- <div class="description">{{ token.description }}</div>
+ <div v-for="token in items" :key="token.id" class="_panel" :class="$style.app">
+ <img v-if="token.iconUrl" :class="$style.appIcon" :src="token.iconUrl" alt=""/>
+ <div :class="$style.appBody">
+ <div :class="$style.appName">{{ token.name }}</div>
+ <div>{{ token.description }}</div>
<MkKeyValue oneline>
<template #key>{{ i18n.ts.installedDate }}</template>
<template #value><MkTime :time="token.createdAt"/></template>
@@ -28,7 +28,7 @@
<li v-for="p in token.permission" :key="p">{{ i18n.t(`_permissions.${p}`) }}</li>
</ul>
</details>
- <div class="actions">
+ <div>
<MkButton inline danger @click="revoke(token)"><i class="ti ti-trash"></i></MkButton>
</div>
</div>
@@ -75,27 +75,27 @@ definePageMetadata({
});
</script>
-<style lang="scss" scoped>
-.bfomjevm {
+<style lang="scss" module>
+.app {
display: flex;
padding: 16px;
+}
- > .icon {
- display: block;
- flex-shrink: 0;
- margin: 0 12px 0 0;
- width: 50px;
- height: 50px;
- border-radius: 8px;
- }
+.appIcon {
+ display: block;
+ flex-shrink: 0;
+ margin: 0 12px 0 0;
+ width: 50px;
+ height: 50px;
+ border-radius: 8px;
+}
- > .body {
- width: calc(100% - 62px);
- position: relative;
+.appBody {
+ width: calc(100% - 62px);
+ position: relative;
+}
- > .name {
- font-weight: bold;
- }
- }
+.appName {
+ font-weight: bold;
}
</style>
diff --git a/packages/frontend/src/pages/user/activity.vue b/packages/frontend/src/pages/user/activity.vue
index dfdd7edb7d388dca761d737fca27d1d2f03f9b39..655371ac1d554d824d51e3c24474b464633de2e9 100644
--- a/packages/frontend/src/pages/user/activity.vue
+++ b/packages/frontend/src/pages/user/activity.vue
@@ -34,7 +34,3 @@ const props = defineProps<{
}>();
</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/frontend/src/pages/user/followers.vue b/packages/frontend/src/pages/user/followers.vue
index 7cbc5bee12dc66fe77b9c91a2ee27efdef4c66f8..b330f7863774cf7450bd636409c52ae95be0f2c9 100644
--- a/packages/frontend/src/pages/user/followers.vue
+++ b/packages/frontend/src/pages/user/followers.vue
@@ -56,6 +56,3 @@ definePageMetadata(computed(() => user ? {
avatar: user,
} : null));
</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/packages/frontend/src/pages/user/following.vue b/packages/frontend/src/pages/user/following.vue
index c36bc0b83916060b3589d83d197e1adb4003b2f4..9544cf76ca29d1b562d43c1b637b0ab19170c280 100644
--- a/packages/frontend/src/pages/user/following.vue
+++ b/packages/frontend/src/pages/user/following.vue
@@ -56,6 +56,3 @@ definePageMetadata(computed(() => user ? {
avatar: user,
} : null));
</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/packages/frontend/src/pages/user/index.vue b/packages/frontend/src/pages/user/index.vue
index 9fe94d68f633ae63f3aca5dd457a52d5fce9371d..6aba815e9d74d68da4a322031f59c58d30af9c42 100644
--- a/packages/frontend/src/pages/user/index.vue
+++ b/packages/frontend/src/pages/user/index.vue
@@ -2,21 +2,19 @@
<MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<div>
- <Transition name="fade" mode="out-in">
- <div v-if="user">
- <XHome v-if="tab === 'home'" :user="user"/>
- <XTimeline v-else-if="tab === 'notes'" :user="user"/>
- <XActivity v-else-if="tab === 'activity'" :user="user"/>
- <XAchievements v-else-if="tab === 'achievements'" :user="user"/>
- <XReactions v-else-if="tab === 'reactions'" :user="user"/>
- <XClips v-else-if="tab === 'clips'" :user="user"/>
- <XLists v-else-if="tab === 'lists'" :user="user"/>
- <XPages v-else-if="tab === 'pages'" :user="user"/>
- <XGallery v-else-if="tab === 'gallery'" :user="user"/>
- </div>
- <MkError v-else-if="error" @retry="fetchUser()"/>
- <MkLoading v-else/>
- </Transition>
+ <div v-if="user">
+ <XHome v-if="tab === 'home'" :user="user"/>
+ <XTimeline v-else-if="tab === 'notes'" :user="user"/>
+ <XActivity v-else-if="tab === 'activity'" :user="user"/>
+ <XAchievements v-else-if="tab === 'achievements'" :user="user"/>
+ <XReactions v-else-if="tab === 'reactions'" :user="user"/>
+ <XClips v-else-if="tab === 'clips'" :user="user"/>
+ <XLists v-else-if="tab === 'lists'" :user="user"/>
+ <XPages v-else-if="tab === 'pages'" :user="user"/>
+ <XGallery v-else-if="tab === 'gallery'" :user="user"/>
+ </div>
+ <MkError v-else-if="error" @retry="fetchUser()"/>
+ <MkLoading v-else/>
</div>
</MkStickyContainer>
</template>
@@ -118,14 +116,3 @@ definePageMetadata(computed(() => user ? {
},
} : null));
</script>
-
-<style lang="scss" scoped>
-.fade-enter-active,
-.fade-leave-active {
- transition: opacity 0.125s ease;
-}
-.fade-enter-from,
-.fade-leave-to {
- opacity: 0;
-}
-</style>
diff --git a/packages/frontend/src/widgets/WidgetClock.vue b/packages/frontend/src/widgets/WidgetClock.vue
index 7d814dcd531ea9c8dfb510df916d272611873ba7..707f4036037ea5774df93e4360cc429c4b09f41a 100644
--- a/packages/frontend/src/widgets/WidgetClock.vue
+++ b/packages/frontend/src/widgets/WidgetClock.vue
@@ -1,9 +1,9 @@
<template>
-<MkContainer :naked="widgetProps.transparent" :showHeader="false" data-cy-mkw-clock class="mkw-clock">
- <div class="vubelbmv" :class="widgetProps.size">
- <div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label a abbrev">{{ tzAbbrev }}</div>
+<MkContainer :naked="widgetProps.transparent" :showHeader="false" data-cy-mkw-clock>
+ <div :class="[$style.root, $style[widgetProps.size]]">
+ <div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace" :class="[$style.label, $style.a]">{{ tzAbbrev }}</div>
<MkAnalogClock
- class="clock"
+ :class="$style.clock"
:thickness="widgetProps.thickness"
:offset="tzOffset"
:graduations="widgetProps.graduations"
@@ -11,8 +11,8 @@
:twentyfour="widgetProps.twentyFour"
:sAnimation="widgetProps.sAnimation"
/>
- <MkDigitalClock v-if="widgetProps.label === 'time' || widgetProps.label === 'timeAndTz'" class="_monospace label c time" :showS="false" :offset="tzOffset"/>
- <div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label d offset">{{ tzOffsetLabel }}</div>
+ <MkDigitalClock v-if="widgetProps.label === 'time' || widgetProps.label === 'timeAndTz'" :class="[$style.label, $style.c]" class="_monospace" :showS="false" :offset="tzOffset"/>
+ <div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace" :class="[$style.label, $style.d]">{{ tzOffsetLabel }}</div>
</div>
</MkContainer>
</template>
@@ -140,39 +140,10 @@ defineExpose<WidgetComponentExpose>({
});
</script>
-<style lang="scss" scoped>
-.vubelbmv {
+<style lang="scss" module>
+.root {
position: relative;
- > .label {
- position: absolute;
- opacity: 0.7;
-
- &.a {
- top: 14px;
- left: 14px;
- }
-
- &.b {
- top: 14px;
- right: 14px;
- }
-
- &.c {
- bottom: 14px;
- left: 14px;
- }
-
- &.d {
- bottom: 14px;
- right: 14px;
- }
- }
-
- > .clock {
- margin: auto;
- }
-
&.small {
padding: 12px;
@@ -197,4 +168,33 @@ defineExpose<WidgetComponentExpose>({
}
}
}
+
+.label {
+ position: absolute;
+ opacity: 0.7;
+
+ &.a {
+ top: 14px;
+ left: 14px;
+ }
+
+ &.b {
+ top: 14px;
+ right: 14px;
+ }
+
+ &.c {
+ bottom: 14px;
+ left: 14px;
+ }
+
+ &.d {
+ bottom: 14px;
+ right: 14px;
+ }
+}
+
+.clock {
+ margin: auto;
+}
</style>