diff options
Diffstat (limited to 'packages/frontend/src/components')
| -rw-r--r-- | packages/frontend/src/components/MkEmojiPickerDialog.vue | 16 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkTextarea.vue | 143 | ||||
| -rw-r--r-- | packages/frontend/src/components/form/link.vue | 114 | ||||
| -rw-r--r-- | packages/frontend/src/components/page/page.section.vue | 38 | ||||
| -rw-r--r-- | packages/frontend/src/components/page/page.text.vue | 20 | ||||
| -rw-r--r-- | packages/frontend/src/components/page/page.vue | 18 |
6 files changed, 157 insertions, 192 deletions
diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue index d60921803b..cfb65e3b63 100644 --- a/packages/frontend/src/components/MkEmojiPickerDialog.vue +++ b/packages/frontend/src/components/MkEmojiPickerDialog.vue @@ -14,8 +14,8 @@ > <MkEmojiPicker ref="picker" - class="ryghynhb _popup _shadow" - :class="{ drawer: type === 'drawer' }" + class="_popup _shadow" + :class="{ [$style.drawer]: type === 'drawer' }" :showPinned="showPinned" :asReactionPicker="asReactionPicker" :asDrawer="type === 'drawer'" @@ -67,12 +67,10 @@ function opening() { } </script> -<style lang="scss" scoped> -.ryghynhb { - &.drawer { - border-radius: 24px; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - } +<style lang="scss" module> +.drawer { + border-radius: 24px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; } </style> diff --git a/packages/frontend/src/components/MkTextarea.vue b/packages/frontend/src/components/MkTextarea.vue index e8f10ab048..f5e6c71b75 100644 --- a/packages/frontend/src/components/MkTextarea.vue +++ b/packages/frontend/src/components/MkTextarea.vue @@ -1,12 +1,12 @@ <template> -<div class="adhpbeos"> - <div class="label" @click="focus"><slot name="label"></slot></div> - <div class="input" :class="{ disabled, focused, tall, pre }"> +<div> + <div :class="$style.label" @click="focus"><slot name="label"></slot></div> + <div :class="{ [$style.disabled]: disabled, [$style.focused]: focused, [$style.tall]: tall, [$style.pre]: pre }" style="position: relative;"> <textarea ref="inputEl" v-model="v" v-adaptive-border - :class="{ code, _monospace: code }" + :class="[$style.textarea, { [$style.code]: code, _monospace: code }]" :disabled="disabled" :required="required" :readonly="readonly" @@ -20,9 +20,9 @@ @input="onInput" ></textarea> </div> - <div class="caption"><slot name="caption"></slot></div> + <div :class="$style.caption"><slot name="caption"></slot></div> - <MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton> + <MkButton v-if="manualSave && changed" primary :class="$style.save" @click="updated"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton> </div> </template> @@ -111,87 +111,82 @@ onMounted(() => { }); </script> -<style lang="scss" scoped> -.adhpbeos { - > .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; } +} - > .input { - position: relative; - - > textarea { - appearance: none; - -webkit-appearance: none; - display: block; - width: 100%; - min-width: 100%; - max-width: 100%; - min-height: 130px; - margin: 0; - padding: 12px; - font: inherit; - font-weight: normal; - font-size: 1em; - color: var(--fg); - background: var(--panel); - border: solid 1px var(--panel); - border-radius: 6px; - outline: none; - box-shadow: none; - box-sizing: border-box; - transition: border-color 0.1s ease-out; - - &:hover { - border-color: var(--inputBorderHover) !important; - } - } +.textarea { + appearance: none; + -webkit-appearance: none; + display: block; + width: 100%; + min-width: 100%; + max-width: 100%; + min-height: 130px; + margin: 0; + padding: 12px; + font: inherit; + font-weight: normal; + font-size: 1em; + color: var(--fg); + background: var(--panel); + border: solid 1px var(--panel); + border-radius: 6px; + outline: none; + box-shadow: none; + box-sizing: border-box; + transition: border-color 0.1s ease-out; - &.focused { - > textarea { - border-color: var(--accent) !important; - } - } + &:hover { + border-color: var(--inputBorderHover) !important; + } +} - &.disabled { - opacity: 0.7; +.focused { + > .textarea { + border-color: var(--accent) !important; + } +} - &, * { - cursor: not-allowed !important; - } - } +.disabled { + opacity: 0.7; + cursor: not-allowed !important; - &.tall { - > textarea { - min-height: 200px; - } - } + > .textarea { + cursor: not-allowed !important; + } +} - &.pre { - > textarea { - white-space: pre; - } - } +.tall { + > .textarea { + min-height: 200px; } +} - > .save { - margin: 8px 0 0 0; +.pre { + > .textarea { + white-space: pre; } } + +.save { + margin: 8px 0 0 0; +} </style> diff --git a/packages/frontend/src/components/form/link.vue b/packages/frontend/src/components/form/link.vue index a1775c0bdb..1424332dae 100644 --- a/packages/frontend/src/components/form/link.vue +++ b/packages/frontend/src/components/form/link.vue @@ -1,19 +1,19 @@ <template> -<div class="ffcbddfc" :class="{ inline }"> - <a v-if="external" class="main _button" :href="to" target="_blank"> - <span class="icon"><slot name="icon"></slot></span> - <span class="text"><slot></slot></span> - <span class="right"> - <span class="text"><slot name="suffix"></slot></span> - <i class="ti ti-external-link icon"></i> +<div :class="[$style.root, { [$style.inline]: inline }]"> + <a v-if="external" :class="$style.main" class="_button" :href="to" target="_blank"> + <span :class="$style.icon"><slot name="icon"></slot></span> + <span :class="$style.text"><slot></slot></span> + <span :class="$style.suffix"> + <span :class="$style.suffixText"><slot name="suffix"></slot></span> + <i class="ti ti-external-link" :class="$style.suffixIcon"></i> </span> </a> - <MkA v-else class="main _button" :class="{ active }" :to="to" :behavior="behavior"> - <span class="icon"><slot name="icon"></slot></span> - <span class="text"><slot></slot></span> - <span class="right"> - <span class="text"><slot name="suffix"></slot></span> - <i class="ti ti-chevron-right icon"></i> + <MkA v-else :class="[$style.main, { [$style.active]: active }]" class="_button" :to="to" :behavior="behavior"> + <span :class="$style.icon"><slot name="icon"></slot></span> + <span :class="$style.text"><slot></slot></span> + <span :class="$style.suffix"> + <span :class="$style.suffixText"><slot name="suffix"></slot></span> + <i class="ti ti-chevron-right" :class="$style.suffixIcon"></i> </span> </MkA> </div> @@ -31,65 +31,65 @@ const props = defineProps<{ }>(); </script> -<style lang="scss" scoped> -.ffcbddfc { +<style lang="scss" module> +.root { display: block; &.inline { display: inline-block; } +} - > .main { - display: flex; - align-items: center; - width: 100%; - box-sizing: border-box; - padding: 10px 14px; - background: var(--buttonBg); - border-radius: 6px; - font-size: 0.9em; +.main { + display: flex; + align-items: center; + width: 100%; + box-sizing: border-box; + padding: 10px 14px; + background: var(--buttonBg); + border-radius: 6px; + font-size: 0.9em; - &:hover { - text-decoration: none; - background: var(--buttonHoverBg); - } + &:hover { + text-decoration: none; + background: var(--buttonHoverBg); + } - &.active { - color: var(--accent); - background: var(--buttonHoverBg); - } + &.active { + color: var(--accent); + background: var(--buttonHoverBg); + } +} - > .icon { - margin-right: 0.75em; - flex-shrink: 0; - text-align: center; - color: var(--fgTransparentWeak); +.icon { + margin-right: 0.75em; + flex-shrink: 0; + text-align: center; + color: var(--fgTransparentWeak); - &:empty { - display: none; + &:empty { + display: none; - & + .text { - padding-left: 4px; - } - } + & + .text { + padding-left: 4px; } + } +} - > .text { - flex-shrink: 1; - white-space: normal; - padding-right: 12px; - text-align: center; - } +.text { + flex-shrink: 1; + white-space: normal; + padding-right: 12px; + text-align: center; +} - > .right { - margin-left: auto; - opacity: 0.7; - white-space: nowrap; +.suffix { + margin-left: auto; + opacity: 0.7; + white-space: nowrap; - > .text:not(:empty) { - margin-right: 0.75em; - } - } + > .suffixText:not(:empty) { + margin-right: 0.75em; } } </style> diff --git a/packages/frontend/src/components/page/page.section.vue b/packages/frontend/src/components/page/page.section.vue index dc06a231f9..9f79ecc833 100644 --- a/packages/frontend/src/components/page/page.section.vue +++ b/packages/frontend/src/components/page/page.section.vue @@ -1,8 +1,8 @@ <template> -<section class="sdgxphyu"> - <component :is="'h' + h">{{ block.title }}</component> +<section> + <component :is="'h' + h" :class="h < 5 ? $style['h' + h] : null">{{ block.title }}</component> - <div class="children"> + <div class="_gaps"> <XBlock v-for="child in block.children" :key="child.id" :page="page" :block="child" :h="h + 1"/> </div> </section> @@ -22,27 +22,19 @@ defineProps<{ }>(); </script> -<style lang="scss" scoped> -.sdgxphyu { - margin: 1.5em 0; - - > h2 { - font-size: 1.35em; - margin: 0 0 0.5em 0; - } - - > h3 { - font-size: 1em; - margin: 0 0 0.5em 0; - } +<style lang="scss" module> +.h2 { + font-size: 1.35em; + margin: 0 0 0.5em 0; +} - > h4 { - font-size: 1em; - margin: 0 0 0.5em 0; - } +.h3 { + font-size: 1em; + margin: 0 0 0.5em 0; +} - > .children { - //padding 16px - } +.h4 { + font-size: 1em; + margin: 0 0 0.5em 0; } </style> diff --git a/packages/frontend/src/components/page/page.text.vue b/packages/frontend/src/components/page/page.text.vue index 308948b45c..48ce4b0e1e 100644 --- a/packages/frontend/src/components/page/page.text.vue +++ b/packages/frontend/src/components/page/page.text.vue @@ -1,7 +1,7 @@ <template> -<div class="mrdgzndn"> +<div class="_gaps"> <Mfm :text="block.text" :isNote="false" :i="$i"/> - <MkUrlPreview v-for="url in urls" :key="url" :url="url" class="url"/> + <MkUrlPreview v-for="url in urls" :key="url" :url="url"/> </div> </template> @@ -22,19 +22,3 @@ const props = defineProps<{ const urls = props.block.text ? extractUrlFromMfm(mfm.parse(props.block.text)) : []; </script> - -<style lang="scss" scoped> -.mrdgzndn { - &:not(:first-child) { - margin-top: 0.5em; - } - - &:not(:last-child) { - margin-bottom: 0.5em; - } - - > .url { - margin: 0.5em 0; - } -} -</style> diff --git a/packages/frontend/src/components/page/page.vue b/packages/frontend/src/components/page/page.vue index f9291c4d2d..a6d3ff6359 100644 --- a/packages/frontend/src/components/page/page.vue +++ b/packages/frontend/src/components/page/page.vue @@ -1,5 +1,5 @@ <template> -<div class="iroscrza" :class="{ center: page.alignCenter, serif: page.font === 'serif' }"> +<div :class="{ [$style.center]: page.alignCenter, [$style.serif]: page.font === 'serif' }"> <XBlock v-for="child in page.content" :key="child.id" :block="child" :h="2"/> </div> </template> @@ -14,16 +14,12 @@ defineProps<{ }>(); </script> -<style lang="scss" scoped> -.iroscrza { - &.serif { - > div { - font-family: serif; - } - } +<style lang="scss" module> +.serif { + font-family: serif; +} - &.center { - text-align: center; - } +.center { + text-align: center; } </style> |