diff options
Diffstat (limited to 'src/client/components')
29 files changed, 92 insertions, 511 deletions
diff --git a/src/client/components/abuse-report-window.vue b/src/client/components/abuse-report-window.vue index 7dbb9657bd..35732d5731 100644 --- a/src/client/components/abuse-report-window.vue +++ b/src/client/components/abuse-report-window.vue @@ -80,6 +80,6 @@ export default defineComponent({ <style lang="scss" scoped> .dpvffvvy { - --section-padding: 16px; + --root-margin: 16px; } </style> diff --git a/src/client/components/channel-preview.vue b/src/client/components/channel-preview.vue index e222ad7ae7..4dc633bcb7 100644 --- a/src/client/components/channel-preview.vue +++ b/src/client/components/channel-preview.vue @@ -123,7 +123,7 @@ export default defineComponent({ > footer { padding: 12px 16px; - border-top: solid 1px var(--divider); + border-top: solid 0.5px var(--divider); > span { opacity: 0.7; diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue index be9f01ca1f..433655d6ed 100644 --- a/src/client/components/date-separated-list.vue +++ b/src/client/components/date-separated-list.vue @@ -37,14 +37,16 @@ export default defineComponent({ }); } + const noGap = [...document.querySelectorAll('._noGap_')].some(el => el.contains(this.$parent.$el)); + return h(this.$store.state.animation ? TransitionGroup : 'div', this.$store.state.animation ? { - class: 'sqadhkmv _list_', + class: 'sqadhkmv' + (noGap ? ' _block' : ''), name: 'list', tag: 'div', 'data-direction': this.direction, 'data-reversed': this.reversed ? 'true' : 'false', } : { - class: 'sqadhkmv _list_', + class: 'sqadhkmv', }, this.items.map((item, i) => { const el = this.$slots.default({ item: item @@ -117,11 +119,7 @@ export default defineComponent({ transform: translateY(-64px); } } -} -</style> -<style lang="scss"> -.sqadhkmv { > .separator { text-align: center; @@ -155,4 +153,25 @@ export default defineComponent({ } } } + +._noGap_ .sqadhkmv { + > * { + margin: 0 !important; + border: none; + border-radius: 0; + box-shadow: none; + + &:not(:last-child) { + border-bottom: solid 0.5px var(--divider); + } + } +} + +._inContainer_ .sqadhkmv > * { + margin: 0 !important; + border: none; + border-bottom: solid 0.5px var(--divider); + border-radius: 0; + box-shadow: none; +} </style> diff --git a/src/client/components/drive.file.vue b/src/client/components/drive.file.vue index 03f2da008d..fb8b50d25a 100644 --- a/src/client/components/drive.file.vue +++ b/src/client/components/drive.file.vue @@ -330,8 +330,8 @@ export default defineComponent({ } > .thumbnail { - width: 128px; - height: 128px; + width: 110px; + height: 110px; margin: auto; } diff --git a/src/client/components/drive.vue b/src/client/components/drive.vue index 150d0d8774..2c8c16c482 100644 --- a/src/client/components/drive.vue +++ b/src/client/components/drive.vue @@ -704,6 +704,7 @@ export default defineComponent({ > .main { flex: 1; overflow: auto; + padding: var(--margin); &, * { user-select: none; @@ -735,7 +736,7 @@ export default defineComponent({ > .folder, > .file { flex-grow: 1; - width: 144px; + width: 128px; margin: 4px; box-sizing: border-box; } @@ -743,7 +744,7 @@ export default defineComponent({ > .padding { flex-grow: 1; pointer-events: none; - width: 144px + 8px; + width: 128px + 8px; } } diff --git a/src/client/components/emoji-picker-dialog.vue b/src/client/components/emoji-picker-dialog.vue index 5bdbc330ad..c4b12e2f61 100644 --- a/src/client/components/emoji-picker-dialog.vue +++ b/src/client/components/emoji-picker-dialog.vue @@ -123,7 +123,7 @@ export default defineComponent({ > .index { min-height: var(--height); position: relative; - border-bottom: solid 1px var(--divider); + border-bottom: solid 0.5px var(--divider); > .arrow { position: absolute; @@ -181,7 +181,7 @@ export default defineComponent({ } &.result { - border-bottom: solid 1px var(--divider); + border-bottom: solid 0.5px var(--divider); &:empty { display: none; diff --git a/src/client/components/emoji-picker-window.vue b/src/client/components/emoji-picker-window.vue index 5504eaecd6..53b6ae6b32 100644 --- a/src/client/components/emoji-picker-window.vue +++ b/src/client/components/emoji-picker-window.vue @@ -119,7 +119,7 @@ export default defineComponent({ > .index { min-height: var(--height); position: relative; - border-bottom: solid 1px var(--divider); + border-bottom: solid 0.5px var(--divider); > .arrow { position: absolute; @@ -177,7 +177,7 @@ export default defineComponent({ } &.result { - border-bottom: solid 1px var(--divider); + border-bottom: solid 0.5px var(--divider); &:empty { display: none; diff --git a/src/client/components/emoji-picker.vue b/src/client/components/emoji-picker.vue index 573833b9d3..a212c15049 100644 --- a/src/client/components/emoji-picker.vue +++ b/src/client/components/emoji-picker.vue @@ -402,7 +402,7 @@ export default defineComponent({ > .tab { flex: 1; height: 38px; - border-top: solid 1px var(--divider); + border-top: solid 0.5px var(--divider); &.active { border-top: solid 1px var(--accent); @@ -425,7 +425,7 @@ export default defineComponent({ > div { &:not(.index) { padding: 4px 0 8px 0; - border-top: solid 1px var(--divider); + border-top: solid 0.5px var(--divider); } > header { @@ -492,7 +492,7 @@ export default defineComponent({ } &.result { - border-bottom: solid 1px var(--divider); + border-bottom: solid 0.5px var(--divider); &:empty { display: none; diff --git a/src/client/components/launch-pad.vue b/src/client/components/launch-pad.vue index a81320954c..7610b44eb5 100644 --- a/src/client/components/launch-pad.vue +++ b/src/client/components/launch-pad.vue @@ -146,7 +146,7 @@ export default defineComponent({ > .sub { margin-top: 8px; padding-top: 8px; - border-top: solid 1px var(--divider); + border-top: solid 0.5px var(--divider); } } </style> diff --git a/src/client/components/media-image.vue b/src/client/components/media-image.vue index 41760d98d7..4de5daa84f 100644 --- a/src/client/components/media-image.vue +++ b/src/client/components/media-image.vue @@ -123,7 +123,7 @@ export default defineComponent({ .gqnyydlz { position: relative; - border: solid 1px var(--divider); + border: solid 0.5px var(--divider); > i { display: block; diff --git a/src/client/components/note-detailed.vue b/src/client/components/note-detailed.vue index 5124b2a88c..373c96e5a0 100644 --- a/src/client/components/note-detailed.vue +++ b/src/client/components/note-detailed.vue @@ -1,6 +1,6 @@ <template> <div - class="note _panel" + class="note _block" v-if="!muted" v-show="!isDeleted" :tabindex="!isDeleted ? '-1' : null" @@ -1007,7 +1007,7 @@ export default defineComponent({ margin: 0 0.5em; padding: 4px 6px; font-size: 80%; - border: solid 1px var(--divider); + border: solid 0.5px var(--divider); border-radius: 4px; } @@ -1110,7 +1110,7 @@ export default defineComponent({ } > .reply { - border-top: solid 1px var(--divider); + border-top: solid 0.5px var(--divider); } &.max-width_500px { diff --git a/src/client/components/note-header.vue b/src/client/components/note-header.vue index a6e9b6fe56..ab40c5fd4a 100644 --- a/src/client/components/note-header.vue +++ b/src/client/components/note-header.vue @@ -78,7 +78,7 @@ export default defineComponent({ margin: 0 .5em 0 0; padding: 1px 6px; font-size: 80%; - border: solid 1px var(--divider); + border: solid 0.5px var(--divider); border-radius: 3px; } diff --git a/src/client/components/note.sub.vue b/src/client/components/note.sub.vue index 853d481406..899c4b2f16 100644 --- a/src/client/components/note.sub.vue +++ b/src/client/components/note.sub.vue @@ -139,7 +139,7 @@ export default defineComponent({ } > .reply { - border-left: solid 1px var(--divider); + border-left: solid 0.5px var(--divider); margin-top: 10px; } } diff --git a/src/client/components/note.vue b/src/client/components/note.vue index a656ffc356..870f8a839b 100644 --- a/src/client/components/note.vue +++ b/src/client/components/note.vue @@ -1,6 +1,6 @@ <template> <div - class="tkcbzcuz _panel" + class="tkcbzcuz" v-if="!muted" v-show="!isDeleted" :tabindex="!isDeleted ? '-1' : null" @@ -90,7 +90,7 @@ </div> </article> </div> -<div v-else class="_panel muted" @click="muted = false"> +<div v-else class="muted" @click="muted = false"> <I18n :src="$ts.userSaysSomething" tag="small"> <template #name> <MkA class="name" :to="userPage(appearNote.user)" v-user-preview="appearNote.userId"> @@ -851,6 +851,7 @@ export default defineComponent({ position: relative; transition: box-shadow 0.1s ease; overflow: hidden; + overflow: clip; contain: content; // これらの指定はパフォーマンス向上には有効だが、ノートの高さは一定でないため、 @@ -981,11 +982,17 @@ export default defineComponent({ > .avatar { flex-shrink: 0; display: block; - //position: sticky; - //top: 72px; margin: 0 14px 8px 0; width: 58px; height: 58px; + position: sticky; + top: calc(22px + var(--stickyTop, 0px)); + left: 0; + + /* iOSはoverflow: clipをサポートしていない影響でposition: stickyが動作しない */ + @supports (-webkit-touch-callout: none) { + top: 0; + } } > .main { @@ -1106,7 +1113,7 @@ export default defineComponent({ } > .reply { - border-top: solid 1px var(--divider); + border-top: solid 0.5px var(--divider); } &.max-width_500px { @@ -1129,6 +1136,12 @@ export default defineComponent({ margin: 0 10px 8px 0; width: 50px; height: 50px; + top: calc(14px + var(--stickyTop, 0px)); + + /* iOSはoverflow: clipをサポートしていない影響でposition: stickyが動作しない */ + @supports (-webkit-touch-callout: none) { + top: 0; + } } } } diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue index 80a9502d5f..724131d0c2 100644 --- a/src/client/components/notes.vue +++ b/src/client/components/notes.vue @@ -1,5 +1,5 @@ <template> -<div class="_list_"> +<div> <div class="_fullinfo" v-if="empty"> <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> <div>{{ $ts.noNotes }}</div> @@ -15,7 +15,7 @@ </div> <XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed"> - <XNote :note="note" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/> + <XNote :note="note" class="_block _isolated" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/> </XList> <div v-show="more && !reversed" style="margin-top: var(--margin);"> diff --git a/src/client/components/page-window.vue b/src/client/components/page-window.vue index ca6f4dd73e..e423757e0c 100644 --- a/src/client/components/page-window.vue +++ b/src/client/components/page-window.vue @@ -14,7 +14,7 @@ <button class="_button" @click="back()" v-if="history.length > 0"><Fa :icon="faChevronLeft"/></button> <button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button> </template> - <div class="yrolvcoq" style="min-height: 100%; background: var(--bg);"> + <div class="yrolvcoq _flat_"> <component :is="component" v-bind="props" :ref="changePage"/> </div> </XWindow> @@ -155,6 +155,7 @@ export default defineComponent({ <style lang="scss" scoped> .yrolvcoq { - --section-padding: 16px; + min-height: 100%; + background: var(--bg); } </style> diff --git a/src/client/components/poll.vue b/src/client/components/poll.vue index af3b3804ab..6cf6a8e918 100644 --- a/src/client/components/poll.vue +++ b/src/client/components/poll.vue @@ -110,7 +110,7 @@ export default defineComponent({ position: relative; margin: 4px 0; padding: 4px 8px; - border: solid 1px var(--divider); + border: solid 0.5px var(--divider); border-radius: 4px; overflow: hidden; cursor: pointer; diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue index 765824b2ab..a67f3ed10a 100644 --- a/src/client/components/post-form.vue +++ b/src/client/components/post-form.vue @@ -767,7 +767,7 @@ export default defineComponent({ > .cw { z-index: 1; padding-bottom: 8px; - border-bottom: solid 1px var(--divider); + border-bottom: solid 0.5px var(--divider); } > .text { diff --git a/src/client/components/sidebar.vue b/src/client/components/sidebar.vue deleted file mode 100644 index 61439781b4..0000000000 --- a/src/client/components/sidebar.vue +++ /dev/null @@ -1,458 +0,0 @@ -<template> -<div class="mvcprjjd"> - <transition name="nav-back"> - <div class="nav-back _modalBg" - v-if="showing" - @click="showing = false" - @touchstart.passive="showing = false" - ></div> - </transition> - - <transition name="nav"> - <nav class="nav" :class="{ iconOnly, hidden }" v-show="showing"> - <div> - <button class="item _button account" @click="openAccountMenu"> - <MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/> - </button> - <MkA class="item index" active-class="active" to="/" exact> - <Fa :icon="faHome" fixed-width/><span class="text">{{ $ts.timeline }}</span> - </MkA> - <template v-for="item in menu"> - <div v-if="item === '-'" class="divider"></div> - <component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="item" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to"> - <Fa :icon="menuDef[item].icon" fixed-width/><span class="text">{{ $ts[menuDef[item].title] }}</span> - <i v-if="menuDef[item].indicated"><Fa :icon="faCircle"/></i> - </component> - </template> - <div class="divider"></div> - <button class="item _button" :class="{ active: $route.path === '/instance' || $route.path.startsWith('/instance/') }" v-if="$i.isAdmin || $i.isModerator" @click="oepnInstanceMenu"> - <Fa :icon="faServer" fixed-width/><span class="text">{{ $ts.instance }}</span> - </button> - <button class="item _button" @click="more"> - <Fa :icon="faEllipsisH" fixed-width/><span class="text">{{ $ts.more }}</span> - <i v-if="otherNavItemIndicated"><Fa :icon="faCircle"/></i> - </button> - <MkA class="item" active-class="active" to="/settings"> - <Fa :icon="faCog" fixed-width/><span class="text">{{ $ts.settings }}</span> - </MkA> - <button class="item _button post" @click="post"> - <Fa :icon="faPencilAlt" fixed-width/><span class="text">{{ $ts.note }}</span> - </button> - </div> - </nav> - </transition> -</div> -</template> - -<script lang="ts"> -import { defineComponent } from 'vue'; -import { faGripVertical, faChevronLeft, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faListUl, faPlus, faUserClock, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faInfoCircle, faQuestionCircle, faProjectDiagram, faStream, faExclamationCircle } from '@fortawesome/free-solid-svg-icons'; -import { faBell, faEnvelope, faLaugh, faComments } from '@fortawesome/free-regular-svg-icons'; -import { host } from '@client/config'; -import { search } from '@client/scripts/search'; -import * as os from '@client/os'; -import { sidebarDef } from '@client/sidebar'; -import { getAccounts, addAccount, login } from '@client/account'; - -export default defineComponent({ - props: { - defaultHidden: { - type: Boolean, - required: false, - default: false, - } - }, - - data() { - return { - host: host, - showing: false, - accounts: [], - connection: null, - menuDef: sidebarDef, - iconOnly: false, - hidden: this.defaultHidden, - faGripVertical, faChevronLeft, faComments, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faBell, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faEnvelope, faListUl, faPlus, faUserClock, faLaugh, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faProjectDiagram - }; - }, - - computed: { - menu(): string[] { - return this.$store.state.menu; - }, - - otherNavItemIndicated(): boolean { - for (const def in this.menuDef) { - if (this.menu.includes(def)) continue; - if (this.menuDef[def].indicated) return true; - } - return false; - }, - }, - - watch: { - $route(to, from) { - this.showing = false; - }, - - '$store.reactiveState.sidebarDisplay.value'() { - this.calcViewState(); - }, - - iconOnly() { - this.$nextTick(() => { - this.$emit('change-view-mode'); - }); - }, - - hidden() { - this.$nextTick(() => { - this.$emit('change-view-mode'); - }); - } - }, - - created() { - window.addEventListener('resize', this.calcViewState); - this.calcViewState(); - }, - - methods: { - calcViewState() { - this.iconOnly = (window.innerWidth <= 1279) || (this.$store.state.sidebarDisplay === 'icon'); - if (!this.defaultHidden) { - this.hidden = (window.innerWidth <= 650); - } - }, - - show() { - this.showing = true; - }, - - post() { - os.post(); - }, - - search() { - search(); - }, - - async openAccountMenu(ev) { - const storedAccounts = getAccounts().filter(x => x.id !== this.$i.id); - const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) }); - - const accountItemPromises = storedAccounts.map(a => new Promise(res => { - accountsPromise.then(accounts => { - const account = accounts.find(x => x.id === a.id); - if (account == null) return res(null); - res({ - type: 'user', - user: account, - action: () => { this.switchAccount(account); } - }); - }); - })); - - os.modalMenu([...[{ - type: 'link', - text: this.$ts.profile, - to: `/@${ this.$i.username }`, - avatar: this.$i, - }, null, ...accountItemPromises, { - icon: faPlus, - text: this.$ts.addAcount, - action: () => { - os.modalMenu([{ - text: this.$ts.existingAcount, - action: () => { this.addAcount(); }, - }, { - text: this.$ts.createAccount, - action: () => { this.createAccount(); }, - }], ev.currentTarget || ev.target); - }, - }]], ev.currentTarget || ev.target, { - align: 'left' - }); - }, - - oepnInstanceMenu(ev) { - os.modalMenu([{ - type: 'link', - text: this.$ts.dashboard, - to: '/instance', - icon: faTachometerAlt, - }, null, this.$i.isAdmin ? { - type: 'link', - text: this.$ts.settings, - to: '/instance/settings', - icon: faCog, - } : undefined, { - type: 'link', - text: this.$ts.customEmojis, - to: '/instance/emojis', - icon: faLaugh, - }, { - type: 'link', - text: this.$ts.users, - to: '/instance/users', - icon: faUsers, - }, { - type: 'link', - text: this.$ts.files, - to: '/instance/files', - icon: faCloud, - }, { - type: 'link', - text: this.$ts.jobQueue, - to: '/instance/queue', - icon: faExchangeAlt, - }, { - type: 'link', - text: this.$ts.federation, - to: '/instance/federation', - icon: faGlobe, - }, { - type: 'link', - text: this.$ts.relays, - to: '/instance/relays', - icon: faProjectDiagram, - }, { - type: 'link', - text: this.$ts.announcements, - to: '/instance/announcements', - icon: faBroadcastTower, - }, { - type: 'link', - text: this.$ts.abuseReports, - to: '/instance/abuses', - icon: faExclamationCircle, - }, { - type: 'link', - text: this.$ts.logs, - to: '/instance/logs', - icon: faStream, - }], ev.currentTarget || ev.target); - }, - - more(ev) { - os.popup(import('./launch-pad.vue'), {}, { - }, 'closed'); - }, - - addAcount() { - os.popup(import('./signin-dialog.vue'), {}, { - done: res => { - addAccount(res.id, res.i); - os.success(); - }, - }, 'closed'); - }, - - createAccount() { - os.popup(import('./signup-dialog.vue'), {}, { - done: res => { - addAccount(res.id, res.i); - this.switchAccountWithToken(res.i); - }, - }, 'closed'); - }, - - switchAccount(account: any) { - const storedAccounts = getAccounts(); - const token = storedAccounts.find(x => x.id === account.id).token; - this.switchAccountWithToken(token); - }, - - switchAccountWithToken(token: string) { - login(token); - }, - } -}); -</script> - -<style lang="scss" scoped> -.nav-enter-active, -.nav-leave-active { - opacity: 1; - transform: translateX(0); - transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); -} -.nav-enter-from, -.nav-leave-active { - opacity: 0; - transform: translateX(-240px); -} - -.nav-back-enter-active, -.nav-back-leave-active { - opacity: 1; - transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); -} -.nav-back-enter-from, -.nav-back-leave-active { - opacity: 0; -} - -.mvcprjjd { - $ui-font-size: 1em; // TODO: どこかに集約したい - $nav-width: 250px; - $nav-icon-only-width: 86px; - - > .nav-back { - z-index: 1001; - } - - > .nav { - $avatar-size: 32px; - $avatar-margin: 8px; - - flex: 0 0 $nav-width; - width: $nav-width; - box-sizing: border-box; - - &.iconOnly { - flex: 0 0 $nav-icon-only-width; - width: $nav-icon-only-width; - - &:not(.hidden) { - > div { - width: $nav-icon-only-width; - - > .divider { - margin: 8px auto; - width: calc(100% - 32px); - } - - > .item { - padding-left: 0; - width: 100%; - text-align: center; - font-size: $ui-font-size * 1.1; - line-height: 3.7rem; - - > [data-icon], - > .avatar { - margin-right: 0; - } - - > i { - left: 10px; - } - - > .text { - display: none; - } - - &:first-child { - margin-bottom: 8px; - } - - &:last-child { - margin-top: 8px; - } - } - } - } - } - - &.hidden { - position: fixed; - top: 0; - left: 0; - z-index: 1001; - } - - &:not(.hidden) { - display: block !important; - } - - > div { - position: fixed; - top: 0; - left: 0; - z-index: 1001; - width: $nav-width; - // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ - height: calc(var(--vh, 1vh) * 100); - box-sizing: border-box; - overflow: auto; - background: var(--navBg); - - > .divider { - margin: 16px 0; - border-top: solid 1px var(--divider); - } - - > .item { - position: relative; - display: block; - padding-left: 24px; - font-size: $ui-font-size; - line-height: 3rem; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - width: 100%; - text-align: left; - box-sizing: border-box; - color: var(--navFg); - - > [data-icon] { - width: 32px; - } - - > [data-icon], - > .avatar { - margin-right: $avatar-margin; - } - - > .avatar { - width: $avatar-size; - height: $avatar-size; - vertical-align: middle; - } - - > i { - position: absolute; - top: 0; - left: 20px; - color: var(--navIndicator); - font-size: 8px; - animation: blink 1s infinite; - } - - &:hover { - text-decoration: none; - color: var(--navHoverFg); - } - - &.active { - color: var(--navActive); - } - - &:first-child, &:last-child { - position: sticky; - z-index: 1; - padding-top: 8px; - padding-bottom: 8px; - background: var(--X14); - -webkit-backdrop-filter: blur(8px); - backdrop-filter: blur(8px); - } - - &:first-child { - top: 0; - margin-bottom: 16px; - border-bottom: solid 1px var(--divider); - } - - &:last-child { - bottom: 0; - margin-top: 16px; - border-top: solid 1px var(--divider); - } - } - } - } -} -</style> diff --git a/src/client/components/signin.vue b/src/client/components/signin.vue index b9d8fe6a77..193d5afecf 100755 --- a/src/client/components/signin.vue +++ b/src/client/components/signin.vue @@ -1,6 +1,6 @@ <template> -<form class="eppvobhk" :class="{ signing, totpLogin }" @submit.prevent="onSubmit"> - <div class="auth _section"> +<form class="eppvobhk _root" :class="{ signing, totpLogin }" @submit.prevent="onSubmit"> + <div class="auth"> <div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div> <div class="normal-signin" v-if="!totpLogin"> <MkInput v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:value="onUsernameChange"> @@ -38,7 +38,8 @@ </div> </div> </div> - <div class="social _section"> + <div class="_hr"></div> + <div class="social"> <a class="_borderButton _vMargin" v-if="meta && meta.enableTwitterIntegration" :href="`${apiUrl}/signin/twitter`"><Fa :icon="faTwitter" style="margin-right: 4px;"/>{{ $t('signinWith', { x: 'Twitter' }) }}</a> <a class="_borderButton _vMargin" v-if="meta && meta.enableGithubIntegration" :href="`${apiUrl}/signin/github`"><Fa :icon="faGithub" style="margin-right: 4px;"/>{{ $t('signinWith', { x: 'GitHub' }) }}</a> <a class="_borderButton _vMargin" v-if="meta && meta.enableDiscordIntegration" :href="`${apiUrl}/signin/discord`"><Fa :icon="faDiscord" style="margin-right: 4px;"/>{{ $t('signinWith', { x: 'Discord' }) }}</a> diff --git a/src/client/components/signup-dialog.vue b/src/client/components/signup-dialog.vue index 072a5ac19f..5015b77c75 100644 --- a/src/client/components/signup-dialog.vue +++ b/src/client/components/signup-dialog.vue @@ -7,7 +7,7 @@ > <template #header>{{ $ts.signup }}</template> - <div class="_section"> + <div class="_root"> <XSignup :auto-set="autoSet" @signup="onSignup"/> </div> </XModalWindow> diff --git a/src/client/components/taskmanager.api-window.vue b/src/client/components/taskmanager.api-window.vue index 9b6c3f16d0..c9b2c43413 100644 --- a/src/client/components/taskmanager.api-window.vue +++ b/src/client/components/taskmanager.api-window.vue @@ -9,7 +9,7 @@ <template #header>Req Viewer</template> <div class="rlkneywz"> - <MkTab v-model:value="tab" style="border-bottom: solid 1px var(--divider);"> + <MkTab v-model:value="tab" style="border-bottom: solid 0.5px var(--divider);"> <option value="req">Request</option> <option value="res">Response</option> </MkTab> diff --git a/src/client/components/taskmanager.vue b/src/client/components/taskmanager.vue index af9033178e..1339e2e352 100644 --- a/src/client/components/taskmanager.vue +++ b/src/client/components/taskmanager.vue @@ -4,7 +4,7 @@ <Fa :icon="faTerminal" style="margin-right: 0.5em;"/>Task Manager </template> <div class="qljqmnzj _monospace"> - <MkTab v-model:value="tab" style="border-bottom: solid 1px var(--divider);"> + <MkTab v-model:value="tab" style="border-bottom: solid 0.5px var(--divider);"> <option value="windows">Windows</option> <option value="stream">Stream</option> <option value="streamPool">Stream (Pool)</option> @@ -215,7 +215,7 @@ export default defineComponent({ width: 100%; padding: 8px 16px; box-sizing: border-box; - border-top: solid 1px var(--divider); + border-top: solid 0.5px var(--divider); font-size: 0.9em; > div { diff --git a/src/client/components/ui/container.vue b/src/client/components/ui/container.vue index c3353cca89..efcff7a36c 100644 --- a/src/client/components/ui/container.vue +++ b/src/client/components/ui/container.vue @@ -1,5 +1,5 @@ <template> -<div class="ukygtjoj _panel" :class="{ naked, hideHeader: !showHeader, scrollable, closed: !showBody }" v-size="{ max: [380] }"> +<div class="ukygtjoj _block _isolated" :class="{ naked, hideHeader: !showHeader, scrollable, closed: !showBody }" v-size="{ max: [380] }"> <header v-if="showHeader" ref="header"> <div class="title"><slot name="header"></slot></div> <div class="sub"> @@ -136,7 +136,7 @@ export default defineComponent({ position: relative; color: var(--panelHeaderFg); background: var(--panelHeaderBg); - box-shadow: 0 1px 0 0 var(--panelHeaderDivider); + border-bottom: solid 0.5px var(--panelHeaderDivider); z-index: 2; line-height: 1.4em; @@ -172,7 +172,7 @@ export default defineComponent({ padding: 24px; & + ._content { - border-top: solid 1px var(--divider); + border-top: solid 0.5px var(--divider); } } } diff --git a/src/client/components/ui/folder.vue b/src/client/components/ui/folder.vue index 1cd67c2521..523298f225 100644 --- a/src/client/components/ui/folder.vue +++ b/src/client/components/ui/folder.vue @@ -137,4 +137,8 @@ export default defineComponent({ } } } + +._flat_ .ssazuxis { + margin: var(--margin); +} </style> diff --git a/src/client/components/ui/modal-window.vue b/src/client/components/ui/modal-window.vue index 2cdf961379..ca17ae6093 100644 --- a/src/client/components/ui/modal-window.vue +++ b/src/client/components/ui/modal-window.vue @@ -94,10 +94,10 @@ export default defineComponent({ flex-direction: column; contain: content; - --section-padding: 24px; + --root-margin: 24px; @media (max-width: 500px) { - --section-padding: 16px; + --root-margin: 16px; } > .header { diff --git a/src/client/components/user-info.vue b/src/client/components/user-info.vue index 34ea38c3b4..ac2f9a75a6 100644 --- a/src/client/components/user-info.vue +++ b/src/client/components/user-info.vue @@ -104,7 +104,7 @@ export default defineComponent({ > .description { padding: 16px; font-size: 0.8em; - border-top: solid 1px var(--divider); + border-top: solid 0.5px var(--divider); > .mfm { display: -webkit-box; @@ -116,7 +116,7 @@ export default defineComponent({ > .status { padding: 10px 16px; - border-top: solid 1px var(--divider); + border-top: solid 0.5px var(--divider); > div { display: inline-block; diff --git a/src/client/components/user-select-dialog.vue b/src/client/components/user-select-dialog.vue index e21deea178..05a43402a8 100644 --- a/src/client/components/user-select-dialog.vue +++ b/src/client/components/user-select-dialog.vue @@ -153,7 +153,7 @@ export default defineComponent({ > .user { display: flex; align-items: center; - padding: 8px var(--section-padding); + padding: 8px var(--root-margin); font-size: 14px; &:hover { diff --git a/src/client/components/visibility-picker.vue b/src/client/components/visibility-picker.vue index 0b98d30b9d..caa2b116a6 100644 --- a/src/client/components/visibility-picker.vue +++ b/src/client/components/visibility-picker.vue @@ -97,7 +97,7 @@ export default defineComponent({ > .divider { margin: 8px 0; - border-top: solid 1px var(--divider); + border-top: solid 0.5px var(--divider); } > button { |