refactor(client): use css modules
This commit is contained in:
syuilo
parent
2f06f2a6da
commit
efbec444e8
1 changed files with 241 additions and 273 deletions
|
|
@ -1,66 +1,65 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="gafaadew"
|
:class="[$style.root, { [$style.modal]: modal, _popup: modal }]"
|
||||||
:class="{ modal, _popup: modal }"
|
|
||||||
@dragover.stop="onDragover"
|
@dragover.stop="onDragover"
|
||||||
@dragenter="onDragenter"
|
@dragenter="onDragenter"
|
||||||
@dragleave="onDragleave"
|
@dragleave="onDragleave"
|
||||||
@drop.stop="onDrop"
|
@drop.stop="onDrop"
|
||||||
>
|
>
|
||||||
<header>
|
<header :class="$style.header">
|
||||||
<button v-if="!fixed" class="cancel _button" @click="cancel"><i class="ti ti-x"></i></button>
|
<button v-if="!fixed" :class="$style.cancel" class="_button" @click="cancel"><i class="ti ti-x"></i></button>
|
||||||
<button v-click-anime v-tooltip="i18n.ts.switchAccount" class="account _button" @click="openAccountMenu">
|
<button v-click-anime v-tooltip="i18n.ts.switchAccount" :class="$style.account" class="_button" @click="openAccountMenu">
|
||||||
<MkAvatar :user="postAccount ?? $i" class="avatar"/>
|
<MkAvatar :user="postAccount ?? $i" :class="$style.avatar"/>
|
||||||
</button>
|
</button>
|
||||||
<div class="right">
|
<div :class="$style.headerRight">
|
||||||
<span class="text-count" :class="{ over: textLength > maxTextLength }">{{ maxTextLength - textLength }}</span>
|
<span :class="[$style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</span>
|
||||||
<span v-if="localOnly" class="local-only"><i class="ti ti-world-off"></i></span>
|
<span v-if="localOnly" :class="$style.localOnly"><i class="ti ti-world-off"></i></span>
|
||||||
<button ref="visibilityButton" v-tooltip="i18n.ts.visibility" class="_button visibility" :disabled="channel != null" @click="setVisibility">
|
<button ref="visibilityButton" v-tooltip="i18n.ts.visibility" class="_button" :class="$style.visibility" :disabled="channel != null" @click="setVisibility">
|
||||||
<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
|
<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
|
||||||
<span v-if="visibility === 'home'"><i class="ti ti-home"></i></span>
|
<span v-if="visibility === 'home'"><i class="ti ti-home"></i></span>
|
||||||
<span v-if="visibility === 'followers'"><i class="ti ti-lock"></i></span>
|
<span v-if="visibility === 'followers'"><i class="ti ti-lock"></i></span>
|
||||||
<span v-if="visibility === 'specified'"><i class="ti ti-mail"></i></span>
|
<span v-if="visibility === 'specified'"><i class="ti ti-mail"></i></span>
|
||||||
</button>
|
</button>
|
||||||
<button v-tooltip="i18n.ts.previewNoteText" class="_button preview" :class="{ active: showPreview }" @click="showPreview = !showPreview"><i class="ti ti-eye"></i></button>
|
<button v-tooltip="i18n.ts.previewNoteText" class="_button" :class="[$style.previewButton, { [$style.previewButtonActive]: showPreview }]" @click="showPreview = !showPreview"><i class="ti ti-eye"></i></button>
|
||||||
<button v-click-anime class="submit _button" :class="{ posting }" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
|
<button v-click-anime class="_button" :class="[$style.submit, { [$style.submitPosting]: posting }]" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
|
||||||
<div class="inner">
|
<div :class="$style.submitInner">
|
||||||
<template v-if="posted"></template>
|
<template v-if="posted"></template>
|
||||||
<template v-else-if="posting"><MkEllipsis/></template>
|
<template v-else-if="posting"><MkEllipsis/></template>
|
||||||
<template v-else>{{ submitText }}</template>
|
<template v-else>{{ submitText }}</template>
|
||||||
<i :class="posted ? 'ti ti-check' : reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : 'ti ti-send'"></i>
|
<i style="margin-left: 6px;" :class="posted ? 'ti ti-check' : reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : 'ti ti-send'"></i>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="form" :class="{ fixed }">
|
<div :class="[$style.form]">
|
||||||
<MkNoteSimple v-if="reply" class="preview" :note="reply"/>
|
<MkNoteSimple v-if="reply" :class="$style.targetNote" :note="reply"/>
|
||||||
<MkNoteSimple v-if="renote" class="preview" :note="renote"/>
|
<MkNoteSimple v-if="renote" :class="$style.targetNote" :note="renote"/>
|
||||||
<div v-if="quoteId" class="with-quote"><i class="ti ti-quote"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null"><i class="ti ti-x"></i></button></div>
|
<div v-if="quoteId" :class="$style.withQuote"><i class="ti ti-quote"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null"><i class="ti ti-x"></i></button></div>
|
||||||
<div v-if="visibility === 'specified'" class="to-specified">
|
<div v-if="visibility === 'specified'" :class="$style.toSpecified">
|
||||||
<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
|
<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
|
||||||
<div class="visibleUsers">
|
<div :class="$style.visibleUsers">
|
||||||
<span v-for="u in visibleUsers" :key="u.id">
|
<span v-for="u in visibleUsers" :key="u.id" :class="$style.visibleUser">
|
||||||
<MkAcct :user="u"/>
|
<MkAcct :user="u"/>
|
||||||
<button class="_button" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button>
|
<button class="_button" style="padding: 4px 8px;" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button>
|
||||||
</span>
|
</span>
|
||||||
<button class="_buttonPrimary" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
|
<button class="_buttonPrimary" style="padding: 4px; border-radius: 8px;" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<MkInfo v-if="hasNotSpecifiedMentions" warn class="hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
|
<MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
|
||||||
<input v-show="useCw" ref="cwInputEl" v-model="cw" class="cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
|
<input v-show="useCw" ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
|
||||||
<textarea ref="textareaEl" v-model="text" class="text" :class="{ withCw: useCw }" :disabled="posting || posted" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
|
<textarea ref="textareaEl" v-model="text" :class="[$style.text, { [$style.withCw]: useCw }]" :disabled="posting || posted" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
|
||||||
<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" class="hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
|
<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="$style.hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
|
||||||
<XPostFormAttaches v-model="files" class="attaches" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/>
|
<XPostFormAttaches v-model="files" :class="$style.attaches" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/>
|
||||||
<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
|
<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
|
||||||
<XNotePreview v-if="showPreview" class="preview" :text="text"/>
|
<XNotePreview v-if="showPreview" :class="$style.preview" :text="text"/>
|
||||||
<footer>
|
<footer :class="$style.footer">
|
||||||
<button v-tooltip="i18n.ts.attachFile" class="_button" @click="chooseFileFrom"><i class="ti ti-photo-plus"></i></button>
|
<button v-tooltip="i18n.ts.attachFile" class="_button" :class="$style.footerButton" @click="chooseFileFrom"><i class="ti ti-photo-plus"></i></button>
|
||||||
<button v-tooltip="i18n.ts.poll" class="_button" :class="{ active: poll }" @click="togglePoll"><i class="ti ti-chart-arrows"></i></button>
|
<button v-tooltip="i18n.ts.poll" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: poll }]" @click="togglePoll"><i class="ti ti-chart-arrows"></i></button>
|
||||||
<button v-tooltip="i18n.ts.useCw" class="_button" :class="{ active: useCw }" @click="useCw = !useCw"><i class="ti ti-eye-off"></i></button>
|
<button v-tooltip="i18n.ts.useCw" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: useCw }]" @click="useCw = !useCw"><i class="ti ti-eye-off"></i></button>
|
||||||
<button v-tooltip="i18n.ts.mention" class="_button" @click="insertMention"><i class="ti ti-at"></i></button>
|
<button v-tooltip="i18n.ts.mention" class="_button" :class="$style.footerButton" @click="insertMention"><i class="ti ti-at"></i></button>
|
||||||
<button v-tooltip="i18n.ts.hashtags" class="_button" :class="{ active: withHashtags }" @click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button>
|
<button v-tooltip="i18n.ts.hashtags" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: withHashtags }]" @click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button>
|
||||||
<button v-tooltip="i18n.ts.emoji" class="_button" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
|
<button v-tooltip="i18n.ts.emoji" class="_button" :class="$style.footerButton" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
|
||||||
<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" @click="showActions"><i class="ti ti-plug"></i></button>
|
<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" :class="$style.footerButton" @click="showActions"><i class="ti ti-plug"></i></button>
|
||||||
</footer>
|
</footer>
|
||||||
<datalist id="hashtags">
|
<datalist id="hashtags">
|
||||||
<option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
|
<option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
|
||||||
|
|
@ -742,306 +741,275 @@ defineExpose({
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" module>
|
||||||
.gafaadew {
|
.root {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&.modal {
|
&.modal {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 520px;
|
max-width: 520px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
> header {
|
.header {
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
height: 66px;
|
height: 66px;
|
||||||
|
}
|
||||||
|
|
||||||
> .cancel {
|
.cancel {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
width: 64px;
|
width: 64px;
|
||||||
line-height: 66px;
|
line-height: 66px;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .account {
|
.account {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
aspect-ratio: 1/1;
|
aspect-ratio: 1/1;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
> .avatar {
|
.avatar {
|
||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
> .right {
|
.headerRight {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
> .text-count {
|
.textCount {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
line-height: 66px;
|
line-height: 66px;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .visibility {
|
.visibility {
|
||||||
height: 34px;
|
height: 34px;
|
||||||
width: 34px;
|
width: 34px;
|
||||||
margin: 0 0 0 8px;
|
margin: 0 0 0 8px;
|
||||||
|
|
||||||
& + .localOnly {
|
& + .localOnly {
|
||||||
margin-left: 0 !important;
|
margin-left: 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> .local-only {
|
|
||||||
margin: 0 0 0 12px;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .preview {
|
.localOnly {
|
||||||
display: inline-block;
|
margin: 0 0 0 12px;
|
||||||
padding: 0;
|
opacity: 0.7;
|
||||||
margin: 0 8px 0 0;
|
}
|
||||||
font-size: 16px;
|
|
||||||
width: 34px;
|
|
||||||
height: 34px;
|
|
||||||
border-radius: 6px;
|
|
||||||
|
|
||||||
&:hover {
|
.previewButton {
|
||||||
background: var(--X5);
|
display: inline-block;
|
||||||
}
|
padding: 0;
|
||||||
|
margin: 0 8px 0 0;
|
||||||
|
font-size: 16px;
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
&.active {
|
&:hover {
|
||||||
color: var(--accent);
|
background: var(--X5);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
> .submit {
|
&.previewButtonActive {
|
||||||
margin: 16px 16px 16px 0;
|
color: var(--accent);
|
||||||
vertical-align: bottom;
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&:disabled {
|
.submit {
|
||||||
opacity: 0.7;
|
margin: 16px 16px 16px 0;
|
||||||
}
|
vertical-align: bottom;
|
||||||
|
|
||||||
&.posting {
|
&:disabled {
|
||||||
cursor: wait;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:disabled):hover {
|
&.posting {
|
||||||
> .inner {
|
cursor: wait;
|
||||||
background: linear-gradient(90deg, var(--X8), var(--X8));
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:disabled):active {
|
&:not(:disabled):hover {
|
||||||
> .inner {
|
> .inner {
|
||||||
background: linear-gradient(90deg, var(--X8), var(--X8));
|
background: linear-gradient(90deg, var(--X8), var(--X8));
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .inner {
|
|
||||||
padding: 0 12px;
|
|
||||||
line-height: 34px;
|
|
||||||
font-weight: bold;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 0.9em;
|
|
||||||
min-width: 90px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
color: var(--fgOnAccent);
|
|
||||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
|
||||||
|
|
||||||
> i {
|
|
||||||
margin-left: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> .form {
|
&:not(:disabled):active {
|
||||||
> .preview {
|
> .inner {
|
||||||
padding: 16px;
|
background: linear-gradient(90deg, var(--X8), var(--X8));
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
> .with-quote {
|
.submitInner {
|
||||||
margin: 0 0 8px 0;
|
padding: 0 12px;
|
||||||
color: var(--accent);
|
line-height: 34px;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
min-width: 90px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: var(--fgOnAccent);
|
||||||
|
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||||
|
}
|
||||||
|
|
||||||
> button {
|
.form {
|
||||||
padding: 4px 8px;
|
}
|
||||||
color: var(--accentAlpha04);
|
|
||||||
|
|
||||||
&:hover {
|
.preview {
|
||||||
color: var(--accentAlpha06);
|
padding: 16px 20px 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
.targetNote {
|
||||||
color: var(--accentDarken30);
|
padding: 0 20px 16px 20px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .to-specified {
|
.withQuote {
|
||||||
padding: 6px 24px;
|
margin: 0 0 8px 0;
|
||||||
margin-bottom: 8px;
|
color: var(--accent);
|
||||||
overflow: auto;
|
}
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
> .visibleUsers {
|
.toSpecified {
|
||||||
display: inline;
|
padding: 6px 24px;
|
||||||
top: -1px;
|
margin-bottom: 8px;
|
||||||
font-size: 14px;
|
overflow: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
> button {
|
.visibleUsers {
|
||||||
padding: 4px;
|
display: inline;
|
||||||
border-radius: 8px;
|
top: -1px;
|
||||||
}
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
> span {
|
.visibleUser {
|
||||||
margin-right: 14px;
|
margin-right: 14px;
|
||||||
padding: 8px 0 8px 8px;
|
padding: 8px 0 8px 8px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: var(--X4);
|
background: var(--X4);
|
||||||
|
}
|
||||||
|
|
||||||
> button {
|
.hasNotSpecifiedMentions {
|
||||||
padding: 4px 8px;
|
margin: 0 20px 16px 20px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .hasNotSpecifiedMentions {
|
.cw,
|
||||||
margin: 0 20px 16px 20px;
|
.hashtags,
|
||||||
}
|
.text {
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 24px;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 16px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--fg);
|
||||||
|
font-family: inherit;
|
||||||
|
|
||||||
> .cw,
|
&:focus {
|
||||||
> .hashtags,
|
outline: none;
|
||||||
> .text {
|
}
|
||||||
display: block;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0 24px;
|
|
||||||
margin: 0;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 16px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 0;
|
|
||||||
background: transparent;
|
|
||||||
color: var(--fg);
|
|
||||||
font-family: inherit;
|
|
||||||
|
|
||||||
&:focus {
|
&:disabled {
|
||||||
outline: none;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&:disabled {
|
.cw {
|
||||||
opacity: 0.5;
|
z-index: 1;
|
||||||
}
|
padding-bottom: 8px;
|
||||||
}
|
border-bottom: solid 0.5px var(--divider);
|
||||||
|
}
|
||||||
|
|
||||||
> .cw {
|
.hashtags {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
padding-bottom: 8px;
|
padding-top: 8px;
|
||||||
border-bottom: solid 0.5px var(--divider);
|
padding-bottom: 8px;
|
||||||
}
|
border-top: solid 0.5px var(--divider);
|
||||||
|
}
|
||||||
|
|
||||||
> .hashtags {
|
.text {
|
||||||
z-index: 1;
|
max-width: 100%;
|
||||||
padding-top: 8px;
|
min-width: 100%;
|
||||||
padding-bottom: 8px;
|
min-height: 90px;
|
||||||
border-top: solid 0.5px var(--divider);
|
|
||||||
}
|
|
||||||
|
|
||||||
> .text {
|
&.withCw {
|
||||||
max-width: 100%;
|
padding-top: 8px;
|
||||||
min-width: 100%;
|
}
|
||||||
min-height: 90px;
|
}
|
||||||
|
|
||||||
&.withCw {
|
.footer {
|
||||||
padding-top: 8px;
|
padding: 0 16px 16px 16px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
> footer {
|
.footerButton {
|
||||||
padding: 0 16px 16px 16px;
|
display: inline-block;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1em;
|
||||||
|
width: 46px;
|
||||||
|
height: 46px;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
> button {
|
&:hover {
|
||||||
display: inline-block;
|
background: var(--X5);
|
||||||
padding: 0;
|
}
|
||||||
margin: 0;
|
|
||||||
font-size: 1em;
|
|
||||||
width: 46px;
|
|
||||||
height: 46px;
|
|
||||||
border-radius: 6px;
|
|
||||||
|
|
||||||
&:hover {
|
&.footerButtonActive {
|
||||||
background: var(--X5);
|
color: var(--accent);
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: var(--accent);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@container (max-width: 500px) {
|
@container (max-width: 500px) {
|
||||||
.gafaadew {
|
.header {
|
||||||
> header {
|
height: 50px;
|
||||||
height: 50px;
|
|
||||||
|
|
||||||
> .cancel {
|
> .cancel {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .headerRight {
|
||||||
|
> .textCount {
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .right {
|
> .submit {
|
||||||
> .text-count {
|
margin: 8px;
|
||||||
line-height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .submit {
|
|
||||||
margin: 8px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
> .form {
|
.toSpecified {
|
||||||
> .to-specified {
|
padding: 6px 16px;
|
||||||
padding: 6px 16px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
> .cw,
|
.cw,
|
||||||
> .hashtags,
|
.hashtags,
|
||||||
> .text {
|
.text {
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .text {
|
.text {
|
||||||
min-height: 80px;
|
min-height: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
> footer {
|
.footer {
|
||||||
padding: 0 8px 8px 8px;
|
padding: 0 8px 8px 8px;
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@container (max-width: 310px) {
|
@container (max-width: 310px) {
|
||||||
.gafaadew {
|
.footerButton {
|
||||||
> .form {
|
font-size: 14px;
|
||||||
> footer {
|
width: 44px;
|
||||||
> button {
|
height: 44px;
|
||||||
font-size: 14px;
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue