sup39/firefish
1
0
Fork 0
Code Issues Pull requests Activity

refactor (client): organize CSS properties & improve RTL layout support

Browse source 
Co-authored-by: sup39 <dev@sup39.dev>
This commit is contained in:
naskya 2024-01-20 03:04:08 +09:00
parent 1893bfed44
commit ea020e9f7c
Signed by: naskya
GPG key ID: 712D413B3A9FED5C
92 changed files with 350 additions and 160 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/client/src/components/MkAnnouncement.vue
View file

@ -82,6 +82,9 @@ const gotIt = () => {
}
.gotIt {
margin: 1rem 0 1rem 2rem;
margin-top: 1rem;
margin-bottom: 1rem;
margin-inline-start: 2rem;
margin-inline-end: 0;
}
</style>

20
packages/client/src/components/MkAutocomplete.vue
View file

@ -526,19 +526,28 @@ onBeforeUnmount(() => {
min-height: 28px;
max-width: 28px;
max-height: 28px;
margin: 0 8px 0 0;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 8px;
border-radius: 100%;
}
.name {
margin: 0 8px 0 0;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 8px;
}
}
> .emojis > li {
.emoji {
display: inline-block;
margin: 0 4px 0 0;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 4px;
width: 24px;
> img {
@ -548,7 +557,10 @@ onBeforeUnmount(() => {
}
.alias {
margin: 0 0 0 8px;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 8px;
margin-inline-end: 0;
}
}

5
packages/client/src/components/MkChannelFollowButton.vue
View file

@ -79,7 +79,10 @@ async function onClick() {
background: #fff;
&.full {
padding: 0 8px 0 12px;
padding-top: 0;
padding-bottom: 0;
padding-inline-start: 12px;
padding-inline-end: 8px;
font-size: 14px;
}

17
packages/client/src/components/MkChatPreview.vue
View file

@ -136,7 +136,10 @@ function isMe(message): boolean {
}
> .time {
margin: 0 0 0 auto;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: auto;
margin-inline-end: 0;
}
}
@ -144,7 +147,10 @@ function isMe(message): boolean {
float: left;
width: 54px;
height: 54px;
margin: 0 16px 0 0;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 16px;
border-radius: 8px;
transition: all 0.1s ease;
}
@ -152,7 +158,7 @@ function isMe(message): boolean {
> .body {
> .text {
display: block;
margin: 0 0 0 0;
margin: 0;
padding: 0;
overflow: hidden;
overflow-wrap: break-word;
@ -180,7 +186,10 @@ function isMe(message): boolean {
font-size: 0.9em;
> .avatar {
margin: 0 12px 0 0;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 12px;
}
}
}

4
packages/client/src/components/MkDialog.vue
View file

@ -543,7 +543,7 @@ onBeforeUnmount(() => {
}
.title {
margin: 0 0 8px 0;
margin: 0 0 8px;
font-weight: bold;
font-size: 1.1em;
@ -553,7 +553,7 @@ onBeforeUnmount(() => {
}
.text {
margin: 16px 0 0 0;
margin: 16px 0 0;
}
.buttons {

7
packages/client/src/components/MkDonation.vue
View file

@ -171,7 +171,10 @@ function openExternal(link) {
}
.main {
padding: 25px 25px 25px 0;
padding-top: 25px;
padding-bottom: 25px;
padding-inline-start: 0;
padding-inline-end: 25px;
flex: 1;
}
@ -186,6 +189,6 @@ function openExternal(link) {
font-weight: bold;
}
.text {
margin: 0.7em 0 1em 0;
margin: 0.7em 0 1em;
}
</style>

4
packages/client/src/components/MkDrive.file.vue
View file

@ -229,7 +229,7 @@ async function deleteFile() {
<style lang="scss" scoped>
.ncvczrfv {
position: relative;
padding: 8px 0 0 0;
padding: 8px 0 0;
min-height: 180px;
border-radius: 8px;
@ -370,7 +370,7 @@ async function deleteFile() {
> .name {
display: block;
margin: 4px 0 0 0;
margin: 4px 0 0;
font-size: 0.8em;
text-align: center;
word-break: break-all;

2
packages/client/src/components/MkDrive.folder.vue
View file

@ -340,7 +340,7 @@ function onContextmenu(ev: MouseEvent) {
}
> .upload {
margin: 4px 4px;
margin: 4px;
font-size: 0.8em;
text-align: right;
color: var(--desktopDriveFolderFg);

2
packages/client/src/components/MkEmojiPicker.vue
View file

@ -627,7 +627,7 @@ defineExpose({
> .group {
&:not(.index) {
padding: 4px 0 8px 0;
padding: 4px 0 8px;
border-top: solid 0.5px var(--divider);
}

10
packages/client/src/components/MkFolder.vue
View file

@ -156,7 +156,10 @@ export default defineComponent({
> .title {
margin: 0;
padding: 12px 16px 12px 0;
padding-top: 12px;
padding-bottom: 12px;
padding-inline-start: 0;
padding-inline-end: 16px;
> i {
margin-inline-end: 6px;
@ -175,7 +178,10 @@ export default defineComponent({
}
> button {
padding: 12px 0 12px 16px;
padding-top: 12px;
padding-bottom: 12px;
padding-inline-start: 16px;
padding-inline-end: 0;
}
}
}

5
packages/client/src/components/MkFollowButton.vue
View file

@ -219,7 +219,10 @@ onBeforeUnmount(() => {
&.large {
font-size: 16px;
height: 38px;
padding: 0 12px 0 16px;
padding-top: 0;
padding-bottom: 0;
padding-inline-start: 16px;
padding-inline-end: 12px;
}
&:not(.full) {

15
packages/client/src/components/MkInstanceStats.vue
View file

@ -4,7 +4,7 @@
<template #header>Active Users</template>
<div :class="$style.chart">
<div class="selects">
<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px">
<MkSelect v-model="chartSpan" :class="$style.select">
<option value="hour">{{ i18n.ts.perHour }}</option>
<option value="day">{{ i18n.ts.perDay }}</option>
</MkSelect>
@ -198,11 +198,18 @@ onMounted(() => {
margin-bottom: 16px;
}
.retention {
padding: 16px;
margin-bottom: 16px;
.select {
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 10px;
margin-inline-end: 0;
}
// .retention {
// padding: 16px;
// margin-bottom: 16px;
// }
.federation {
&:global {
> .pies {

7
packages/client/src/components/MkKeyValue.vue
View file

@ -45,7 +45,7 @@ const copy_ = () => {
.alqyeyti {
> .key {
font-size: 0.85em;
padding: 0 0 0.25em 0;
padding: 0 0 0.25em;
opacity: 0.75;
}
@ -55,7 +55,10 @@ const copy_ = () => {
> .key {
width: 30%;
font-size: 1em;
padding: 0 8px 0 0;
padding-top: 0;
padding-bottom: 0;
padding-inline-start: 0;
padding-inline-end: 8px;
}
> .value {

2
packages/client/src/components/MkLaunchPad.vue
View file

@ -126,7 +126,7 @@ function close() {
&.asDrawer {
width: 100%;
padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px) 16px;
padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
border-radius: 24px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;

2
packages/client/src/components/MkManyAnnouncements.vue
View file

@ -47,6 +47,6 @@ const checkAnnouncements = () => {
}
.gotIt {
margin: 8px 0 0 0;
margin: 8px 0 0;
}
</style>

2
packages/client/src/components/MkMediaCaption.vue
View file

@ -234,7 +234,7 @@ export default defineComponent({
margin: auto;
> header {
margin: 0 0 8px 0;
margin: 0 0 8px;
position: relative;
> .title {

10
packages/client/src/components/MkMention.vue
View file

@ -61,7 +61,10 @@ const isMe =
.mention {
position: relative;
display: inline-block;
padding: 2px 8px 2px 2px;
padding-top: 2px;
padding-bottom: 2px;
padding-inline-start: 2px;
padding-inline-end: 8px;
margin-block: 2px;
border-radius: 999px;
max-width: 100%;
@ -88,7 +91,10 @@ const isMe =
width: 1.5em;
height: 1.5em;
object-fit: cover;
margin: 0 0.2em 0 0;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 0.2em;
vertical-align: bottom;
border-radius: 100%;
}

2
packages/client/src/components/MkMenu.vue
View file

@ -515,7 +515,7 @@ onBeforeUnmount(() => {
}
&.asDrawer {
padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px) 0;
padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px);
width: 100%;
border-radius: 24px;
border-bottom-right-radius: 0;

12
packages/client/src/components/MkNote.vue
View file

@ -730,7 +730,7 @@ defineExpose({
.note-context {
position: relative;
padding: 0 32px 0 32px;
padding: 0 32px;
display: flex;
z-index: 1;
&:first-child {
@ -879,7 +879,10 @@ defineExpose({
> .avatar {
flex-shrink: 0;
display: block;
margin: 0 14px 0 0;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 14px;
width: var(--avatarSize);
height: var(--avatarSize);
position: relative;
@ -976,7 +979,10 @@ defineExpose({
> .count {
display: inline;
margin: 0 0 0 8px;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 8px;
margin-inline-end: 0;
opacity: 0.7;
}

2
packages/client/src/components/MkNoteDetailed.vue
View file

@ -648,7 +648,7 @@ onUnmounted(() => {
}
> :deep(.note-container) {
padding: 12px 0 0 0;
padding: 12px 0 0;
font-size: 1.05rem;
> .header > .body {
padding-inline-start: 10px;

15
packages/client/src/components/MkNoteHeader.vue
View file

@ -132,7 +132,10 @@ function openServerInfo() {
.name {
// flex: 1 1 0px;
display: inline;
margin: 0 0.5em 0 0;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 0.5em;
padding: 0;
overflow: hidden;
font-weight: bold;
@ -142,7 +145,10 @@ function openServerInfo() {
.mkusername > .is-bot {
flex-shrink: 0;
align-self: center;
margin: 0 0.5em 0 0;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 0.5em;
padding: 1px 6px;
font-size: 80%;
border: solid 0.5px var(--divider);
@ -156,7 +162,10 @@ function openServerInfo() {
.username {
display: inline;
margin: 0 0.5em 0 0;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 0.5em;
overflow: hidden;
text-overflow: ellipsis;
align-self: flex-start;

15
packages/client/src/components/MkNotePreview.vue
View file

@ -37,7 +37,10 @@ defineProps<{
&.min-width_350px {
> .avatar {
margin: 0 10px 0 0;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 10px;
width: 44px;
height: 44px;
}
@ -45,7 +48,10 @@ defineProps<{
&.min-width_500px {
> .avatar {
margin: 0 12px 0 0;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 12px;
width: 48px;
height: 48px;
}
@ -54,7 +60,10 @@ defineProps<{
> .avatar {
flex-shrink: 0;
display: block;
margin: 0 10px 0 0;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 10px;
width: 40px;
height: 40px;
border-radius: 8px;

15
packages/client/src/components/MkNoteSimple.vue
View file

@ -31,7 +31,10 @@ defineProps<{
&.min-width_350px {
> .avatar {
margin: 0 10px 0 0;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 10px;
width: 44px;
height: 44px;
}
@ -39,7 +42,10 @@ defineProps<{
&.min-width_500px {
> .avatar {
margin: 0 12px 0 0;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 12px;
width: 48px;
height: 48px;
}
@ -48,7 +54,10 @@ defineProps<{
> .avatar {
flex-shrink: 0;
display: block;
margin: 0 10px 0 0;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 10px;
width: 40px;
height: 40px;
border-radius: 8px;

15
packages/client/src/components/MkNoteSub.vue
View file

@ -482,13 +482,19 @@ function noteClick(e) {
padding: 16px 32px;
outline: none;
&.children {
padding: 10px 0 0 var(--indent);
padding-top: 10px;
padding-bottom: 0;
padding-inline-start: var(--indent);
padding-inline-end: 0;
padding-inline-start: var(--indent) !important;
font-size: 1em;
cursor: auto;
&.max-width_500px {
padding: 10px 0 0 8px;
padding-top: 10px;
padding-bottom: 0;
padding-inline-start: 8px;
padding-inline-end: 0;
}
}
@ -581,7 +587,10 @@ function noteClick(e) {
> .count {
display: inline;
margin: 0 0 0 8px;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 8px;
margin-inline-end: 0;
opacity: 0.7;
}

4
packages/client/src/components/MkPollEditor.vue
View file

@ -190,7 +190,7 @@ watch(
padding: 8px 16px;
> .caution {
margin: 0 0 8px 0;
margin: 0 0 8px;
font-size: 0.8em;
color: #f00;
@ -228,7 +228,7 @@ watch(
}
> section {
margin: 16px 0 0 0;
margin: 16px 0 0;
> div {
margin: 0 8px;

33
packages/client/src/components/MkPostForm.vue
View file

@ -1284,7 +1284,10 @@ onMounted(() => {
> .visibility {
height: 34px;
width: 34px;
margin: 0 0 0 8px;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 8px;
margin-inline-end: 0;
& + .localOnly {
margin-inline-start: 0 !important;
@ -1296,7 +1299,10 @@ onMounted(() => {
}
> .local-only {
margin: 0 0 0 12px;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 12px;
margin-inline-end: 0;
opacity: 0.7;
}
@ -1308,7 +1314,10 @@ onMounted(() => {
> .preview {
display: inline-block;
padding: 0;
margin: 0 8px 0 0;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 8px;
font-size: inherit !important;
width: 34px;
height: 34px;
@ -1326,7 +1335,10 @@ onMounted(() => {
> .submit {
display: inline-flex;
align-items: center;
margin: 16px 16px 16px 0;
margin-top: 16px;
margin-bottom: 16px;
margin-inline-start: 0;
margin-inline-end: 16px;
padding: 0 12px;
line-height: 34px;
font-weight: bold;
@ -1395,7 +1407,10 @@ onMounted(() => {
> span {
margin: 0.3rem;
padding: 4px 0 4px 4px;
padding-top: 4px;
padding-bottom: 4px;
padding-inline-start: 4px;
padding-inline-end: 0;
border-radius: 999px;
background: var(--X3);
@ -1407,7 +1422,7 @@ onMounted(() => {
}
> .hasNotSpecifiedMentions {
margin: 0 20px 16px 20px;
margin: 0 20px 16px;
}
> .cw,
@ -1458,7 +1473,7 @@ onMounted(() => {
}
> footer {
padding: 0 16px 16px 16px;
padding: 0 16px 16px;
> button {
display: inline-block;
@ -1516,7 +1531,7 @@ onMounted(() => {
}
> footer {
padding: 0 8px 8px 8px;
padding: 0 8px 8px;
}
}
}
@ -1563,7 +1578,7 @@ onMounted(() => {
> .ph-lg {
vertical-align: -0.125em;
margin-left: 12px;
margin-inline-start: 12px;
}
}

2
packages/client/src/components/MkPostFormDialog.vue
View file

@ -7,7 +7,7 @@
>
<MkPostForm
ref="form"
style="margin: 0 auto auto auto"
style="margin: 0 auto auto"
v-bind="props"
autofocus
freeze-after-posted

5
packages/client/src/components/MkReactionsViewer.reaction.vue
View file

@ -165,7 +165,10 @@ useTooltip(
> .count {
font-size: 0.9em;
line-height: 32px;
margin: 0 0 0 4px;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 4px;
margin-inline-end: 0;
}
}
</style>

2
packages/client/src/components/MkSearchBox.vue
View file

@ -240,7 +240,7 @@ onBeforeUnmount(() => {
}
.title {
margin: 0 0 25px 0;
margin: 0 0 25px;
font-weight: bold;
font-size: 1.3em;
}

2
packages/client/src/components/MkSignin.vue
View file

@ -352,7 +352,7 @@ function showSuspendedDialog() {
.eppvobhk {
> .auth {
> .avatar {
margin: 0 auto 0 auto;
margin: 0 auto;
width: 64px;
height: 64px;
background: var(--accentedBg);

4
packages/client/src/components/MkSubNoteContent.vue
View file

@ -269,7 +269,7 @@ function focusFooter(ev) {
.reply-icon {
display: inline-block;
border-radius: 6px;
padding: 0.2em 0.2em;
padding: 0.2em;
margin-inline-end: 0.2em;
color: var(--accent);
transition: background 0.2s;
@ -303,7 +303,7 @@ function focusFooter(ev) {
.reply-icon {
display: inline-block;
border-radius: 6px;
padding: 0.2em 0.2em;
padding: 0.2em;
margin-inline-end: 0.2em;
color: var(--accent);
transition: background 0.2s;

12
packages/client/src/components/MkSuperMenu.vue
View file

@ -91,7 +91,10 @@ export default defineComponent({
align-items: center;
width: 100%;
box-sizing: border-box;
padding: 10px 16px 10px 8px;
padding-top: 10px;
padding-bottom: 10px;
padding-inline-start: 8px;
padding-inline-end: 16px;
border-radius: 9px;
font-size: 0.9em;
margin-bottom: 0.3rem;
@ -142,7 +145,10 @@ export default defineComponent({
> .title {
font-size: 1em;
opacity: 0.7;
margin: 0 0 8px 16px;
margin-top: 0;
margin-bottom: 8px;
margin-inline-start: 16px;
margin-inline-end: 0;
}
> .items {
@ -153,7 +159,7 @@ export default defineComponent({
> .item {
flex-direction: column;
padding: 18px 16px 16px 16px;
padding: 18px 16px 16px;
background: var(--panel);
border-radius: 8px;
text-align: center;

2
packages/client/src/components/MkUpdated.vue
View file

@ -92,7 +92,7 @@ function openReleaseNotes(): void {
}
.gotIt {
margin: 8px 0 0 0;
margin: 8px 0 0;
}
.releaseNotes {

2
packages/client/src/components/form/checkbox.vue
View file

@ -118,7 +118,7 @@ const toggle = () => {
}
> .caption {
margin: 8px 0 0 0;
margin: 8px 0 0;
color: var(--fgTransparentWeak);
font-size: 0.85em;

2
packages/client/src/components/form/folder.vue
View file

@ -39,7 +39,7 @@ const opened = ref(props.defaultOpen);
align-items: center;
width: 100%;
box-sizing: border-box;
padding: 12px 14px 12px 14px;
padding: 12px 14px;
background: var(--buttonBg);
&:hover {

6
packages/client/src/components/form/input.vue
View file

@ -183,7 +183,7 @@ defineExpose({
> label {
> .label {
font-size: 0.85em;
padding: 0 0 8px 0;
padding: 0 0 8px;
user-select: none;
&:empty {
@ -193,7 +193,7 @@ defineExpose({
> .caption {
font-size: 0.85em;
padding: 8px 0 0 0;
padding: 8px 0 0;
color: var(--fgTransparentWeak);
&:empty {
@ -292,7 +292,7 @@ defineExpose({
}
> .save {
margin: 8px 0 0 0;
margin: 8px 0 0;
}
}
</style>

4
packages/client/src/components/form/radios.vue
View file

@ -90,7 +90,7 @@ export default defineComponent({
padding: 0;
> .label {
font-size: 0.85em;
padding: 0 0 8px 0;
padding: 0 0 8px;
user-select: none;
&:empty {
@ -106,7 +106,7 @@ export default defineComponent({
> .caption {
font-size: 0.85em;
padding: 8px 0 0 0;
padding: 8px 0 0;
color: var(--fgTransparentWeak);
&:empty {

4
packages/client/src/components/form/range.vue
View file

@ -119,7 +119,7 @@ function tooltipHide() {
> .label {
font-size: 0.85em;
padding: 0 0 8px 0;
padding: 0 0 8px;
user-select: none;
&:empty {
@ -129,7 +129,7 @@ function tooltipHide() {
> .caption {
font-size: 0.85em;
padding: 8px 0 0 0;
padding: 8px 0 0;
color: var(--fgTransparentWeak);
&:empty {

2
packages/client/src/components/form/section.vue
View file

@ -28,7 +28,7 @@
> .label {
font-weight: bold;
margin: 1.5em 0 16px 0;
margin: 1.5em 0 16px;
font-size: 1em;
&:empty {

4
packages/client/src/components/form/select.vue
View file

@ -203,7 +203,7 @@ function show(ev: MouseEvent) {
.vblkjoeq {
> .label {
font-size: 0.85em;
padding: 0 0 8px 0;
padding: 0 0 8px;
user-select: none;
&:empty {
@ -213,7 +213,7 @@ function show(ev: MouseEvent) {
> .caption {
font-size: 0.85em;
padding: 8px 0 0 0;
padding: 8px 0 0;
color: var(--fgTransparentWeak);
&:empty {

4
packages/client/src/components/form/slot.vue
View file

@ -20,7 +20,7 @@ function focus() {
.adhpbeou {
> .label {
font-size: 0.85em;
padding: 0 0 8px 0;
padding: 0 0 8px;
user-select: none;
&:empty {
@ -30,7 +30,7 @@ function focus() {
> .caption {
font-size: 0.85em;
padding: 8px 0 0 0;
padding: 8px 0 0;
color: var(--fgTransparentWeak);
&:empty {

2
packages/client/src/components/form/switch.vue
View file

@ -106,7 +106,7 @@ function toggle(x) {
}
> .caption {
margin: 8px 0 0 0;
margin: 8px 0 0;
color: var(--fgTransparentWeak);
font-size: 0.85em;

6
packages/client/src/components/form/textarea.vue
View file

@ -201,7 +201,7 @@ export default defineComponent({
> label {
> .label {
font-size: 0.85em;
padding: 0 0 8px 0;
padding: 0 0 8px;
user-select: none;
&:empty {
display: none;
@ -209,7 +209,7 @@ export default defineComponent({
}
> .caption {
font-size: 0.85em;
padding: 8px 0 0 0;
padding: 8px 0 0;
color: var(--fgTransparentWeak);
&:empty {
@ -276,7 +276,7 @@ export default defineComponent({
}
> .save {
margin: 8px 0 0 0;
margin: 8px 0 0;
}
}
</style>

2
packages/client/src/components/global/MkError.vue
View file

@ -30,7 +30,7 @@ import icon from "@/scripts/icon";
text-align: center;
> p {
margin: 0 0 8px 0;
margin: 0 0 8px;
}
> .button {

6
packages/client/src/components/page/page.section.vue
View file

@ -46,17 +46,17 @@ export default defineComponent({
> h2 {
font-size: 1.35em;
margin: 0 0 0.5em 0;
margin: 0 0 0.5em;
}
> h3 {
font-size: 1em;
margin: 0 0 0.5em 0;
margin: 0 0 0.5em;
}
> h4 {
font-size: 1em;
margin: 0 0 0.5em 0;
margin: 0 0 0.5em;
}
// > .children {

2
packages/client/src/pages/_error_.vue
View file

@ -89,7 +89,7 @@ definePageMetadata({
text-align: center;
> p {
margin: 0 0 12px 0;
margin: 0 0 12px;
}
> .button {

2
packages/client/src/pages/about-firefish.vue
View file

@ -314,7 +314,7 @@ definePageMetadata({
}
> .misskey {
margin: 0.75em auto 0 auto;
margin: 0.75em auto 0;
width: max-content;
}

7
packages/client/src/pages/about.emojis.vue
View file

@ -143,7 +143,10 @@ export default defineComponent({
> .tags {
> .tag {
display: inline-block;
margin: 8px 8px 0 0;
margin-top: 8px;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 8px;
padding: 4px 8px;
font-size: 0.9em;
background: var(--accentedBg);
@ -164,7 +167,7 @@ export default defineComponent({
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
grid-gap: 12px;
margin: 0 var(--margin) var(--margin) var(--margin);
margin: 0 var(--margin) var(--margin);
}
}
}

2
packages/client/src/pages/about.vue
View file

@ -325,7 +325,7 @@ function syncSlide(index) {
> .icon {
display: block;
margin: 16px auto 0 auto;
margin: 16px auto 0;
height: 64px;
}

10
packages/client/src/pages/admin/emojis.vue
View file

@ -480,7 +480,10 @@ definePageMetadata(
}
> .body {
padding: 0 0 0 8px;
padding-top: 0;
padding-bottom: 0;
padding-inline-start: 8px;
padding-inline-end: 0;
white-space: nowrap;
overflow: hidden;
@ -526,7 +529,10 @@ definePageMetadata(
}
> .body {
padding: 0 0 0 8px;
padding-top: 0;
padding-bottom: 0;
padding-inline-start: 8px;
padding-inline-end: 0;
white-space: nowrap;
overflow: hidden;

2
packages/client/src/pages/admin/overview.queue.vue
View file

@ -114,7 +114,7 @@ onUnmounted(() => {
.root {
&:global {
> .status {
padding: 0 0 16px 0;
padding: 0 0 16px;
}
> .charts {

5
packages/client/src/pages/emojis.emoji.vue
View file

@ -72,7 +72,10 @@ function menu(ev) {
}
> .body {
padding: 0 0 0 8px;
padding-top: 0;
padding-bottom: 0;
padding-inline-start: 8px;
padding-inline-end: 0;
white-space: nowrap;
overflow: hidden;

5
packages/client/src/pages/follow-requests.vue
View file

@ -129,7 +129,10 @@ definePageMetadata(
> .avatar {
display: block;
flex-shrink: 0;
margin: 0 12px 0 0;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 12px;
width: 42px;
height: 42px;
border-radius: 8px;

9
packages/client/src/pages/gallery/post.vue
View file

@ -293,7 +293,7 @@ definePageMetadata(
display: flex;
align-items: center;
margin-top: 16px;
padding: 16px 0 0 0;
padding: 16px 0 0;
border-top: solid 0.5px var(--divider);
> .like {
@ -326,7 +326,7 @@ definePageMetadata(
> .user {
margin-top: 16px;
padding: 16px 0 0 0;
padding: 16px 0 0;
border-top: solid 0.5px var(--divider);
display: flex;
align-items: center;
@ -337,7 +337,10 @@ definePageMetadata(
}
> .name {
margin: 0 0 0 12px;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 12px;
margin-inline-end: 0;
font-size: 90%;
}

7
packages/client/src/pages/instance-info.vue
View file

@ -454,7 +454,10 @@ function syncSlide(index) {
> .icon {
display: block;
margin: 0 16px 0 0;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 16px;
height: 64px;
border-radius: 8px;
}
@ -467,7 +470,7 @@ function syncSlide(index) {
.cmhjzshl {
> .selects {
display: flex;
margin: 0 0 16px 0;
margin: 0 0 16px;
}
}
</style>

2
packages/client/src/pages/messaging/index.vue
View file

@ -281,7 +281,7 @@ onUnmounted(() => {
<style lang="scss" scoped>
.yweeujhr {
> .start {
margin: 0 auto var(--margin) auto;
margin: 0 auto var(--margin);
}
> .groupsbuttons {

2
packages/client/src/pages/messaging/messaging-room.form.vue
View file

@ -298,7 +298,7 @@ defineExpose({
max-width: 100%;
min-height: 80px;
margin: 0;
padding: 16px 16px 0 16px;
padding: 16px 16px 0;
resize: none;
font-size: 1em;
font-family: inherit;

2
packages/client/src/pages/messaging/messaging-room.message.vue
View file

@ -242,7 +242,7 @@ function del(): void {
> footer {
display: block;
margin: 2px 0 0 0;
margin: 2px 0 0;
font-size: 0.65em;
> .read {

2
packages/client/src/pages/messaging/messaging-room.vue
View file

@ -444,7 +444,7 @@ XMessage:last-of-type {
> .typers {
position: absolute;
bottom: 100%;
padding: 0 8px 0 8px;
padding: 0 8px;
font-size: 0.9em;
color: var(--fgTransparentWeak);

2
packages/client/src/pages/my-groups/index.vue
View file

@ -6,7 +6,7 @@
<MkSpacer :content-max="800" :margin-min="20">
<MkButton
primary
style="margin: 0 auto var(--margin) auto"
style="margin: 0 auto var(--margin)"
@click="create"
><i :class="icon('ph-plus')"></i>
{{ i18n.ts.createGroup }}</MkButton

2
packages/client/src/pages/no-graze.vue
View file

@ -26,7 +26,7 @@ import icon from "@/scripts/icon";
text-align: center;
> p {
margin: 0 0 8px 0;
margin: 0 0 8px;
}
> img {

2
packages/client/src/pages/page-editor/els/page-editor.el.button.vue
View file

@ -125,6 +125,6 @@ withDefaults(
<style lang="scss" scoped>
.xfhsjczc {
padding: 0 16px 0 16px;
padding: 0 16px;
}
</style>

2
packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
View file

@ -5,7 +5,7 @@
{{ i18n.ts._pages.blocks.counter }}</template
>
<section style="padding: 0 16px 0 16px">
<section style="padding: 0 16px">
<MkInput v-model="value.name">
<template #prefix
><i :class="icon('ph-magic-wand')"></i

2
packages/client/src/pages/page-editor/els/page-editor.el.if.vue
View file

@ -85,6 +85,6 @@ async function add() {
<style lang="scss" scoped>
.romcojzs {
padding: 0 16px 16px 16px;
padding: 0 16px 16px;
}
</style>

2
packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
View file

@ -5,7 +5,7 @@
{{ i18n.ts._pages.blocks.numberInput }}</template
>
<section style="padding: 0 16px 0 16px">
<section style="padding: 0 16px">
<MkInput v-model="value.name">
<template #prefix
><i :class="icon('ph-magic-wand')"></i

2
packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
View file

@ -48,6 +48,6 @@ withDefaults(
<style lang="scss" scoped>
.kjuadyyj {
padding: 0 16px 16px 16px;
padding: 0 16px 16px;
}
</style>

2
packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
View file

@ -5,7 +5,7 @@
{{ i18n.ts._pages.blocks.textInput }}</template
>
<section style="padding: 0 16px 0 16px">
<section style="padding: 0 16px">
<MkInput v-model="value.name"
><template #prefix
><i :class="icon('ph-magic-wand')"></i></template

4
packages/client/src/pages/page-editor/page-editor.container.vue
View file

@ -157,14 +157,14 @@ export default defineComponent({
> .warn {
color: #ea9d34;
margin: 0;
padding: 16px 16px 0 16px;
padding: 16px 16px 0;
font-size: 14px;
}
> .error {
color: #b4637a;
margin: 0;
padding: 16px 16px 0 16px;
padding: 16px 16px 0;
font-size: 14px;
}

2
packages/client/src/pages/page-editor/page-editor.script-block.vue
View file

@ -91,7 +91,7 @@
<section
v-else-if="modelValue.type === 'fn'"
class=""
style="padding: 0 16px 16px 16px"
style="padding: 0 16px 16px"
>
<MkTextarea v-model="slots">
<template #label>{{

6
packages/client/src/pages/page-editor/page-editor.vue
View file

@ -600,15 +600,15 @@ definePageMetadata(
}
> section {
padding: 0 32px 32px 32px;
padding: 0 32px 32px;
@media (max-width: 500px) {
padding: 0 16px 16px 16px;
padding: 0 16px 16px;
}
> .view {
display: inline-block;
margin: 16px 0 0 0;
margin: 16px 0 0;
font-size: 14px;
}

7
packages/client/src/pages/page.vue
View file

@ -438,7 +438,10 @@ definePageMetadata(
}
> .name {
margin: 0 0 0 12px;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 12px;
margin-inline-end: 0;
font-size: 90%;
}
@ -461,7 +464,7 @@ definePageMetadata(
}
> .footer {
margin: var(--margin) 0 var(--margin) 0;
margin: var(--margin) 0;
font-size: 85%;
opacity: 0.75;
}

5
packages/client/src/pages/settings/accounts.vue
View file

@ -161,7 +161,10 @@ definePageMetadata({
> .avatar {
display: block;
flex-shrink: 0;
margin: 0 12px 0 0;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 12px;
> .avatar {
width: 50px;

5
packages/client/src/pages/settings/apps.vue
View file

@ -92,7 +92,10 @@ definePageMetadata({
> .icon {
display: block;
flex-shrink: 0;
margin: 0 12px 0 0;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 12px;
width: 50px;
height: 50px;
border-radius: 8px;

2
packages/client/src/pages/settings/index.vue
View file

@ -330,7 +330,7 @@ definePageMetadata(INFO);
display: block;
width: 50px;
height: 50px;
margin: 8px auto 16px auto;
margin: 8px auto 16px;
}
}
}

2
packages/client/src/pages/settings/profile.vue
View file

@ -319,7 +319,7 @@ definePageMetadata({
display: inline-block;
width: 72px;
height: 72px;
margin: 0 auto 16px auto;
margin: 0 auto 16px;
}
}

2
packages/client/src/pages/settings/reaction.vue
View file

@ -257,7 +257,7 @@ definePageMetadata({
.add {
display: inline-block;
padding: 8px;
margin-left: 12px;
margin-inline-start: 12px;
margin-bottom: 12px;
}
</style>

2
packages/client/src/pages/user-info.vue
View file

@ -736,7 +736,7 @@ definePageMetadata(
.cmhjzshm {
> .selects {
display: flex;
margin: 0 0 16px 0;
margin: 0 0 16px;
}
}
</style>

17
packages/client/src/pages/user/home.vue
View file

@ -556,7 +556,10 @@ onUnmounted(() => {
bottom: 0;
inset-inline-start: 0;
width: 100%;
padding: 0 0 8px 154px;
padding-top: 0;
padding-bottom: 8px;
padding-inline-start: 154px;
padding-inline-end: 0;
box-sizing: border-box;
color: #fff;
@ -638,7 +641,10 @@ onUnmounted(() => {
bottom: 0;
inset-inline-start: 0;
width: 100%;
padding: 0 0 8px 154px;
padding-top: 0;
padding-bottom: 8px;
padding-inline-start: 154px;
padding-inline-end: 0;
box-sizing: border-box;
color: #fff;
@ -669,7 +675,7 @@ onUnmounted(() => {
> .title {
display: none;
text-align: center;
padding: 50px 8px 16px 8px;
padding: 50px 8px 16px;
font-weight: bold;
border-bottom: solid 0.5px var(--divider);
@ -733,7 +739,10 @@ onUnmounted(() => {
}
> .description {
padding: 72px 12px 2px 24px;
padding-top: 72px;
padding-bottom: 2px;
padding-inline-start: 24px;
padding-inline-end: 12px;
font-size: 0.95em;
top: -65px;
position: relative;

17
packages/client/src/pages/welcome.entrance.a.vue
View file

@ -291,7 +291,10 @@ function showMenu(ev) {
> .main {
position: relative;
width: min(480px, 100%);
margin: auto auto auto 128px;
margin-top: auto;
margin-bottom: auto;
margin-inline-start: 128px;
margin-inline-end: auto;
background: var(--panel);
border-radius: var(--radius);
box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
@ -324,7 +327,7 @@ function showMenu(ev) {
> h1 {
display: block;
margin: 0;
padding: 16px 32px 24px 32px;
padding: 16px 32px 24px;
font-size: 1.4em;
> .logo {
@ -377,8 +380,14 @@ function showMenu(ev) {
display: inline-flex;
align-items: center;
vertical-align: bottom;
padding: 6px 12px 6px 6px;
margin: 0 10px 0 0;
padding-top: 6px;
padding-bottom: 6px;
padding-inline-start: 6px;
padding-inline-end: 12px;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 10px;
background: var(--panel);
border-radius: 999px;

2
packages/client/src/pages/welcome.entrance.b.vue
View file

@ -253,7 +253,7 @@ export default defineComponent({
> h1 {
display: block;
margin: 0 0 32px 0;
margin: 0 0 32px;
padding: 0;
> .logo {

2
packages/client/src/pages/welcome.entrance.c.vue
View file

@ -287,7 +287,7 @@ export default defineComponent({
> h1 {
display: block;
margin: 0;
padding: 32px 32px 24px 32px;
padding: 32px 32px 24px;
> .logo {
vertical-align: bottom;

10
packages/client/src/pages/welcome.timeline.vue
View file

@ -93,11 +93,17 @@ export default defineComponent({
}
> .note {
margin: 16px 0 16px auto;
margin-top: 16px;
margin-bottom: 16px;
margin-inline-start: auto;
margin-inline-end: 0;
> .content {
padding: 16px;
margin: 0 0 0 auto;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: auto;
margin-inline-end: 0;
max-width: max-content;
border-radius: 16px;

2
packages/client/src/style.scss
View file

@ -176,7 +176,7 @@ option {
}
hr {
margin: var(--margin) 0 var(--margin) 0;
margin: var(--margin) 0;
border: none;
height: 1px;
background: var(--divider);

2
packages/client/src/ui/_common_/navbar-for-mobile.vue
View file

@ -326,7 +326,7 @@ function more() {
flex: 0.1;
> .divider {
margin: 16px 16px;
margin: 16px;
border-top: solid 0.5px var(--divider);
}

4
packages/client/src/ui/_common_/navbar.vue
View file

@ -400,7 +400,7 @@ function more(ev: MouseEvent) {
flex: 0.1;
> .divider {
margin: 16px 16px;
margin: 16px;
border-top: solid 0.5px var(--divider);
}
@ -408,7 +408,7 @@ function more(ev: MouseEvent) {
position: relative;
display: flex;
align-items: center;
padding-left: 30px;
padding-inline-start: 30px;
line-height: 2.85rem;
margin-bottom: 0.5rem;
white-space: nowrap;

12
packages/client/src/ui/_common_/upload.vue
View file

@ -86,7 +86,7 @@ const zIndex = os.claimZIndex("high");
}
.mk-uploader > ol > li {
display: grid;
margin: 8px 0 0 0;
margin: 8px 0 0;
padding: 0;
height: 36px;
width: 100%;
@ -116,7 +116,10 @@ const zIndex = os.claimZIndex("high");
}
.mk-uploader > ol > li > .top > .name {
display: block;
padding: 0 8px 0 0;
padding-top: 0;
padding-bottom: 0;
padding-inline-start: 0;
padding-inline-end: 8px;
margin: 0;
font-size: 0.8em;
white-space: nowrap;
@ -129,7 +132,10 @@ const zIndex = os.claimZIndex("high");
}
.mk-uploader > ol > li > .top > .status {
display: block;
margin: 0 0 0 auto;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: auto;
margin-inline-end: 0;
padding: 0;
font-size: 0.8em;
flex-shrink: 0;

2
packages/client/src/ui/universal.vue
View file

@ -725,7 +725,7 @@ console.log(mainRouter.currentRoute.value.name);
z-index: 1000;
bottom: 0;
inset-inline-start: 0;
padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 12px) 12px;
padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
display: flex;
width: 100%;
box-sizing: border-box;

2
packages/client/src/ui/visitor/a.vue
View file

@ -195,7 +195,7 @@ export default defineComponent({
> h1 {
margin: 0;
padding: 96px 32px 0 32px;
padding: 96px 32px 0;
text-shadow: 0 0 8px black;
> .logo {

5
packages/client/src/ui/visitor/header.vue
View file

@ -238,7 +238,10 @@ export default defineComponent({
}
> .action {
padding: 0 0 0 16px;
padding-top: 0;
padding-bottom: 0;
padding-inline-start: 16px;
padding-inline-end: 0;
}
}

4
packages/client/src/ui/visitor/kanban.vue
View file

@ -210,11 +210,11 @@ export default defineComponent({
> h1 {
display: block;
margin: 0;
padding: 32px 0 32px 0;
padding: 32px 0;
color: #fff;
&.full {
padding: 64px 0 0 0;
padding: 64px 0 0;
> .link {
> ::v-deep(.logo) {

7
packages/client/src/widgets/calendar.vue
View file

@ -186,7 +186,10 @@ defineExpose<WidgetComponentExpose>({
display: block;
float: left;
width: 40%;
padding: 0 16px 0 0;
padding-top: 0;
padding-bottom: 0;
padding-inline-start: 0;
padding-inline-end: 16px;
box-sizing: border-box;
> div {
@ -197,7 +200,7 @@ defineExpose<WidgetComponentExpose>({
}
> p {
margin: 0 0 2px 0;
margin: 0 0 2px;
font-size: 0.75em;
line-height: 18px;
opacity: 0.8;

5
packages/client/src/widgets/server-info.vue
View file

@ -80,7 +80,10 @@ defineExpose<WidgetComponentExpose>({
display: flex;
align-items: center;
min-width: 0;
padding: 0 16px 0 0;
padding-top: 0;
padding-bottom: 0;
padding-inline-start: 0;
padding-inline-end: 16px;
}
.body {