diff --git a/src/webfiles/web/community.ejs b/src/webfiles/web/community.ejs index 1423ca7..ffc3c4c 100644 --- a/src/webfiles/web/community.ejs +++ b/src/webfiles/web/community.ejs @@ -56,23 +56,13 @@ +
+ <%= lang.community.recent %> + <%= lang.community.popular %> + +
<%- include('partials/' + template, { bundle }); %> - diff --git a/src/webfiles/web/css/web.css b/src/webfiles/web/css/web.css index c25eaa3..cc967a3 100644 --- a/src/webfiles/web/css/web.css +++ b/src/webfiles/web/css/web.css @@ -1,1091 +1,1136 @@ :root { - --background: #1B1F3B; - --background-alt: #2a2f50; - --text: white; - --text-secondary: #A1A8D9; - --btn: #673DB6; - --btn-secondary: #333960; - --theme: var(--btn); - --theme-light: #A185D6; - --text-secondary-2: #8990C1; - --border: rgba(255, 255, 255, 0.1); - --background-alt-alt: #383f6b; + --background: #1b1f3b; + --background-alt: #2a2f50; + --text: white; + --text-secondary: #a1a8d9; + --btn: #673db6; + --btn-secondary: #333960; + --theme: var(--btn); + --theme-light: #a185d6; + --text-secondary-2: #8990c1; + --border: rgba(255, 255, 255, 0.1); + --background-alt-alt: #383f6b; } button, input[type="button"], input[type="submit"] { - cursor: pointer; - background: var(--background-alt-alt); - color: var(--text); - border: 0; - border-radius: 1em; - font-weight: 700; - padding: 1em; + cursor: pointer; + background: var(--background-alt-alt); + color: var(--text); + border: 0; + border-radius: 1em; + font-weight: 700; + padding: 1em; } a { - color: unset + color: unset; } a:hover { - cursor: pointer; - text-decoration: underline + cursor: pointer; + text-decoration: underline; } #title { - color: var(--text); - display: flex; - justify-content: center + color: var(--text); + display: flex; + justify-content: center; } #nav-bar { - display: flex; - background: -webkit-gradient(linear, left top, right top, from(#fff), to(#fff5f5)); - list-style: none; - user-select: none + display: flex; + background: -webkit-gradient( + linear, + left top, + right top, + from(#fff), + to(#fff5f5) + ); + list-style: none; + user-select: none; } .badge, body, button { - color: var(--text) + color: var(--text); } .badge { - position: absolute; - background: var(--btn); - padding: 3px 8px; - border-radius: 1em; - margin-left: 1.25em; - display: none; - margin-bottom: 30px + position: absolute; + background: var(--btn); + padding: 3px 8px; + border-radius: 1em; + margin-left: 1.25em; + display: none; + margin-bottom: 30px; } body { - background-color: var(--background); - margin: 0; - font-family: Conv_Poppins-Light, sans-serif + background-color: var(--background); + margin: 0; + font-family: Conv_Poppins-Light, sans-serif; } header { - display: flex; - align-items: flex-start; - margin-top: 35px; - flex-direction: column; - position: fixed + display: flex; + align-items: flex-start; + margin-top: 35px; + flex-direction: column; + position: fixed; } a, header a, -header>a, -header>a:hover { - text-decoration: none +header > a, +header > a:hover { + text-decoration: none; } header .logo-link, header .logo-link svg { - display: block; - width: 5em + display: block; + width: 5em; } header a { - color: var(--text-secondary); - padding: .25em 1.5em .25em 1em; - border-radius: 2em; - display: flex; - margin: .1em; - align-items: center + color: var(--text-secondary); + padding: 0.25em 1.5em 0.25em 1em; + border-radius: 2em; + display: flex; + margin: 0.1em; + align-items: center; } header a:first-child { - padding: .5em 1em + padding: 0.5em 1em; } header a:hover, -header>.selected { - background: var(--background-alt) +header > .selected { + background: var(--background-alt); } -header>a>p { - padding-left: 1em +header > a > p { + padding-left: 1em; } -header>.selected { - border-radius: 1em; - font-weight: 700; - color: var(--theme-light) +header > .selected { + border-radius: 1em; + font-weight: 700; + color: var(--theme-light); } -header>.selected>svg { - stroke: var(--theme-light) +header > .selected > svg { + stroke: var(--theme-light); } .mii-icon { - width: 40px; - height: 40px; - background: #a1a8d9; - border-radius: 50px + width: 40px; + height: 40px; + background: #a1a8d9; + border-radius: 50px; } #main { - width: 95%; - max-width: 1400px; - margin: 0 auto; - overflow: hidden + width: 95%; + max-width: 1400px; + margin: 0 auto; + overflow: hidden; } .post-meta-wrapper { - display: flex; - color: var(--text); - align-items: center; - margin-left: .5em; - height: 2em; - margin-bottom: 0; - font-size: small + display: flex; + color: var(--text); + align-items: center; + margin-left: 0.5em; + height: 2em; + margin-bottom: 0; + font-size: small; } -.post-meta-wrapper>h3>a { - text-decoration: none; - color: var(--text) +.post-meta-wrapper > h3 > a { + text-decoration: none; + color: var(--text); } -.post-meta-wrapper>h3>a:hover { - text-decoration: underline +.post-meta-wrapper > h3 > a:hover { + text-decoration: underline; } -.post-meta-wrapper>h4:last-child { - padding-left: .5em; - color: var(--text-secondary) +.post-meta-wrapper > h4:last-child { + padding-left: 0.5em; + color: var(--text-secondary); } .post-user-info-wrapper { - display: flex; - height: 2em + display: flex; + height: 2em; } #wrapper { - display: flex; - flex-direction: column; - align-content: center; - justify-content: center; - align-items: center + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; + align-items: center; } .posts-wrapper { - width: 600px; - color: var(--text); - background: var(--background-alt); - margin-bottom: 1em; - padding: 1em; - border-radius: 1em + width: 600px; + color: var(--text); + background: var(--background-alt); + margin-bottom: 1em; + padding: 1em; + border-radius: 1em; } -.icon-container>img, +.icon-container > img, .user-icon { - width: 64px; - height: 64px; - border-radius: .5em; - background: var(--text-secondary) + width: 64px; + height: 64px; + border-radius: 0.5em; + background: var(--text-secondary); } .user-icon.verified { - border: solid 4px var(--btn); - width: 60px; - height: 60px + border: solid 4px var(--btn); + width: 60px; + height: 60px; } .verified-badge { - background: var(--btn); - padding: 1px 5px; - border-radius: 1em; - color: var(--text); - margin-left: .25em + background: var(--btn); + padding: 1px 5px; + border-radius: 1em; + color: var(--text); + margin-left: 0.25em; } .painting, .screenshot { - border-radius: 1em; - width: 100% + border-radius: 1em; + width: 100%; } .painting { - image-rendering: pixelated + image-rendering: pixelated; } .screenshot { - margin-bottom: 1em + margin-bottom: 1em; } .post-content { - display: flex; - flex-direction: column; - cursor: pointer + display: flex; + flex-direction: column; + cursor: pointer; } -.post-content>h4 { - margin-top: 0; - margin-bottom: .5em; - font-weight: 400; - margin-left: .25em; - word-wrap: break-word; - white-space: pre-wrap +.post-content > h4 { + margin-top: 0; + margin-bottom: 0.5em; + font-weight: 400; + margin-left: 0.25em; + word-wrap: break-word; + white-space: pre-wrap; } .post-content, .spoiler-overlay { - margin-left: 74px + margin-left: 74px; } -.spoiler-overlay>button { - width: 100%; - padding: 12px 48px +.spoiler-overlay > button { + width: 100%; + padding: 12px 48px; } .post-buttons-wrapper { - margin-top: 1em; - display: flex; - justify-content: space-between; - user-select: none; - margin-left: 74px + margin-top: 1em; + display: flex; + justify-content: space-between; + user-select: none; + margin-left: 74px; } -.post-buttons-wrapper>span { - display: flex; - flex-direction: row; - align-items: center; - padding: .5em +.post-buttons-wrapper > span { + display: flex; + flex-direction: row; + align-items: center; + padding: 0.5em; } -.post-buttons-wrapper>span:nth-of-type(2):hover { - background: rgba(0, 255, 0, .25) +.post-buttons-wrapper > span:nth-of-type(2):hover { + background: rgba(0, 255, 0, 0.25); } -.post-buttons-wrapper>span:last-child:hover { - background: rgba(0, 150, 255, .25) +.post-buttons-wrapper > span:last-child:hover { + background: rgba(0, 150, 255, 0.25); } -.post-buttons-wrapper>span:hover { - cursor: pointer; - background: rgba(255, 0, 0, .25); - border-radius: .75em +.post-buttons-wrapper > span:hover { + cursor: pointer; + background: rgba(255, 0, 0, 0.25); + border-radius: 0.75em; } -.post-buttons-wrapper>span>h4 { - padding-left: .5em; - margin: 0 +.post-buttons-wrapper > span > h4 { + padding-left: 0.5em; + margin: 0; } -.post-buttons-wrapper>span.selected>svg { - fill: red; - stroke: red +.post-buttons-wrapper > span.selected > svg { + fill: red; + stroke: red; } #load-more { - width: 632px; - margin-bottom: 1em + width: 632px; + margin-bottom: 1em; } #toast, iframe { - border-radius: 1em + border-radius: 1em; } #toast { - opacity: 0; - min-width: 250px; - margin-left: -141px; - background-color: var(--btn); - color: var(--text); - text-align: center; - position: fixed; - z-index: 10; - left: 50%; - bottom: 5em; - padding: 1ch; - transition: all .5s ease + opacity: 0; + min-width: 250px; + margin-left: -141px; + background-color: var(--btn); + color: var(--text); + text-align: center; + position: fixed; + z-index: 10; + left: 50%; + bottom: 5em; + padding: 1ch; + transition: all 0.5s ease; } #toast.show { - opacity: 1 + opacity: 1; } .community-list-wrapper { - display: grid; - grid-template-areas: "icon main" "icon footer"; - gap: 0; - cursor: pointer; - background: var(--background-alt); - padding: 1em; - width: 90%; - border-radius: 1em; - grid-template-columns: 111px 152px + display: grid; + grid-template-areas: "icon main" "icon footer"; + gap: 0; + cursor: pointer; + background: var(--background-alt); + padding: 1em; + width: 90%; + border-radius: 1em; + grid-template-columns: 111px 152px; } .community-list-icon { - width: 100px; - height: 100px; - grid-area: icon; - margin-right: 1em; - border-radius: 1em; - -webkit-border-radius: 1em; - -moz-border-radius: 1em; - -ms-border-radius: 1em; - -o-border-radius: 1em + width: 100px; + height: 100px; + grid-area: icon; + margin-right: 1em; + border-radius: 1em; + -webkit-border-radius: 1em; + -moz-border-radius: 1em; + -ms-border-radius: 1em; + -o-border-radius: 1em; } .community-list-title { - margin: .5em 0-1em; - font-size: 2ch + margin: 0.5em 0-1em; + font-size: 2ch; } .community-list-followers { - margin: .5em 0 0; - font-size: 1.5ch + margin: 0.5em 0 0; + font-size: 1.5ch; } .communities-wrapper { - display: grid; - max-width: 900px; - grid-template-columns: auto auto auto; - grid-row-gap: 1em; - grid-column-gap: 1em + display: grid; + max-width: 900px; + grid-template-columns: auto auto auto; + grid-row-gap: 1em; + grid-column-gap: 1em; } #new { - margin-bottom: 1em + margin-bottom: 1em; } iframe { - width: 100%; - height: 20em; - margin-top: 1em + width: 100%; + height: 20em; + margin-top: 1em; } .notifications-list-content { - background: var(--background-alt); - width: 600px; - min-height: 4em; - margin: 0; - display: flex; - justify-content: flex-start; - align-items: center; - border-bottom: 2px solid var(--btn-secondary); - user-select: none; - cursor: pointer; - font-size: small + background: var(--background-alt); + width: 600px; + min-height: 4em; + margin: 0; + display: flex; + justify-content: flex-start; + align-items: center; + border-bottom: 2px solid var(--btn-secondary); + user-select: none; + cursor: pointer; + font-size: small; } .notifications-list-content:hover { - text-decoration: none; - background: var(--btn-secondary) + text-decoration: none; + background: var(--btn-secondary); } .notifications-list-content:first-of-type { - border-top-left-radius: 1em; - border-top-right-radius: 1em + border-top-left-radius: 1em; + border-top-right-radius: 1em; } .notifications-list-content:last-of-type { - border-bottom-left-radius: 1em; - border-bottom-right-radius: 1em + border-bottom-left-radius: 1em; + border-bottom-right-radius: 1em; } .unread-badge { - padding: .25em; - border-radius: 1em; - margin: 1em; - background-color: var(--btn) + padding: 0.25em; + border-radius: 1em; + margin: 1em; + background-color: var(--btn); } .community-top { - background: var(--background-alt); - margin-bottom: 1em; - padding: 1em; - border-radius: 1em; - width: 600px; - overflow: hidden + background: var(--background-alt); + margin-bottom: 1em; + padding: 1em; + border-radius: 1em; + width: 600px; + overflow: hidden; } .community-info { - display: flex + display: flex; } .info-boxes-wrapper { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; } -.info-boxes-wrapper>div { - background: var(--background-alt-alt); - border-radius: 1em; - display: flex; - flex-direction: column; - align-items: center; - margin: .5em; - flex-grow: 1 +.info-boxes-wrapper > div { + background: var(--background-alt-alt); + border-radius: 1em; + display: flex; + flex-direction: column; + align-items: center; + margin: 0.5em; + flex-grow: 1; } -.info-boxes-wrapper>div>h4:first-child { - margin: .75em 0 0; - color: var(--theme-light); - font-size: small; - font-weight: bolder +.info-boxes-wrapper > div > h4:first-child { + margin: 0.75em 0 0; + color: var(--theme-light); + font-size: small; + font-weight: bolder; } -.info-boxes-wrapper>div>h4:last-child { - margin: .75em 0; - color: var(--text-secondary); - font-size: small +.info-boxes-wrapper > div > h4:last-child { + margin: 0.75em 0; + color: var(--text-secondary); + font-size: small; } .community-title { - padding-left: .5em; - font-size: larger; - padding-top: .5em + padding-left: 0.5em; + font-size: larger; + padding-top: 0.5em; } .banner { - width: 110%; - margin: -1em + width: 110%; + margin: -1em; } .community-page-follow-button-wrapper { - padding: .25em; - border: 2px solid var(--btn); - border-radius: 1em; - margin: 1.5em 0 auto auto; - cursor: pointer; - height: fit-content + padding: 0.25em; + border: 2px solid var(--btn); + border-radius: 1em; + margin: 1.5em 0 auto auto; + cursor: pointer; + height: fit-content; } .community-page-follow-button-wrapper.selected, .favorite-button.checked { - background: var(--btn) + background: var(--btn); } -.community-page-follow-button-wrapper>p, +.community-page-follow-button-wrapper > p, .favorite-button { - margin: .25em; - color: var(--text) !important + margin: 0.25em; + color: var(--text) !important; } .favorite-button { - border: 2px solid var(--btn); - border-radius: 1em; - margin: 1.5em 0 auto auto; - cursor: pointer; - height: fit-content; - text-decoration: none !important; - padding: 1ch + border: 2px solid var(--btn); + border-radius: 1em; + margin: 1.5em 0 auto auto; + cursor: pointer; + height: fit-content; + text-decoration: none !important; + padding: 1ch; } .list-content-with-icon-and-text { - list-style: none; - padding: unset + list-style: none; + padding: unset; } .list-content-with-icon-and-text li { - display: flex; - padding: .25em 0; - border-bottom: 1px solid var(--text-secondary) + display: flex; + padding: 0.25em 0; + border-bottom: 1px solid var(--text-secondary); } .list-content-with-icon-and-text .body { - margin-left: 1em; - width: 100%; - align-items: center; - display: inherit; - text-decoration: none + margin-left: 1em; + width: 100%; + align-items: center; + display: inherit; + text-decoration: none; } #news-list-content li .text .nick-name { - font-weight: 700 + font-weight: 700; } #news-list-content li .text .link { - color: var(--theme-light) + color: var(--theme-light); } #news-list-content li .text .timestamp { - color: #969696; - white-space: nowrap + color: #969696; + white-space: nowrap; } .hover { - width: 600px; - display: inherit; - border-radius: 1em; - padding: 1em + width: 600px; + display: inherit; + border-radius: 1em; + padding: 1em; } .hover:hover { - background: var(--background-alt) + background: var(--background-alt); } .body.messages { - flex-direction: column; - justify-content: center; - align-items: flex-start !important + flex-direction: column; + justify-content: center; + align-items: flex-start !important; } -.body.messages>.text { - padding-bottom: .5ch +.body.messages > .text { + padding-bottom: 0.5ch; } .report h4, .report p { - margin: 0 0 5px 0; + margin: 0 0 5px 0; } .list-content-with-icon-and-text li.reports { - flex-direction: column + flex-direction: column; } .reports .hover:hover { - background: unset + background: unset; } .reports button { - margin-bottom: 1em + margin-bottom: 1em; } button.report { - margin-bottom: 1.5em; - max-width: 630px; - width: 90vw + margin-bottom: 1.5em; + max-width: 630px; + width: 90vw; } #report-post-page { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 1em; - margin: auto; - height: 100%; - background: none; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 1em; + margin: auto; + height: 100%; + background: none; } #report-post-page > #report-form { - margin-top: 0; - margin-bottom: 0; - padding-top: 0; - padding-bottom: 0; + margin-top: 0; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; } -#report-form, .add-post-page { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 1em; - max-width: 600px; - background: var(--background-alt); - border-radius: 1em; - margin-top: 4em +#report-form, +.add-post-page { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 1em; + max-width: 600px; + background: var(--background-alt); + border-radius: 1em; + margin-top: 4em; } -.add-post-page-content.report>div { - display: flex; - justify-items: center; - align-items: center; - justify-content: center; - margin-top: 13px +.add-post-page-content.report > div { + display: flex; + justify-items: center; + align-items: center; + justify-content: center; + margin-top: 13px; } .report .textarea-text { - width: 100%; - height: 100px; - border-radius: 1em; - border: none; - background: var(--text); - padding: 10px; - margin: 1em 0; - resize: none + width: 100%; + height: 100px; + border-radius: 1em; + border: none; + background: var(--text); + padding: 10px; + margin: 1em 0; + resize: none; } - .textarea-menu { - padding-left: 0; - margin: 0; - border-right: 1px solid var(--background-alt-alt); - } - .textarea-container.textarea-with-menu.active-text { - display: flex; - } - .textarea-memo.trigger { - background: var(--background); - height: 200px; - display: flex; - align-items: center; - width: 100%; - justify-content: center; - border-radius: 0 20px 20px 0; - } - .add-post-page .textarea-text { - width: 100%; - height: 200px; - margin: 0; - padding: 1ch; - border: none; - resize: none; - border-radius: 0 20px 20px 0; - background: #f9f5fb; - } - .report .textarea-text { - border-radius: 10px; - padding: 1ch; - margin-top: 1em; - } - input[type=radio] { - -webkit-appearance:none; - appearance: none; - } - .textarea-menu-memo>input[type=radio], - .textarea-menu-text>input[type=radio] { - display:inline-block; - width:95px; - height:140px; - border:0; - margin:0; - background-repeat:no-repeat; - background-position:0 0; - } - .textarea-menu-text>input[type=radio] { - border-top-left-radius:20px; - background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='64' fill='%23000' viewBox='0 0 256 256'%3E%3Cpolyline points='152 192 80 56 8 192' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='20'/%3E%3Cellipse cx='208' cy='166.9' rx='32' ry='28' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cpath d='M184,112.4a34.1,34.1,0,0,1,24-9.5c17.7,0,32,12.5,32,28V192' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cline x1='130.8' y1='152' x2='29.2' y2='152' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3C/svg%3E")no-repeat center center,-webkit-gradient(linear,left top,left bottom,from(#fff),color-stop(.5,#fff),to(#e6e6e6))0 0 - } - .textarea-menu-text>input[type=radio]:checked { - border-top-left-radius:20px; - background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpolyline points='152 192 80 56 8 192' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='20'/%3E%3Cellipse cx='208' cy='166.9' rx='32' ry='28' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cpath d='M184,112.4a34.1,34.1,0,0,1,24-9.5c17.7,0,32,12.5,32,28V192' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cline x1='130.8' y1='152' x2='29.2' y2='152' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3C/svg%3E")no-repeat center center,-webkit-gradient(linear,left top,left bottom,from(#866dbe),to(#673db6))0 0 - } - .textarea-menu-memo>input[type=radio] { - border-bottom-left-radius:20px; - background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M96,216H48a8,8,0,0,1-8-8V163.3a7.9,7.9,0,0,1,2.3-5.6l120-120a8,8,0,0,1,11.4,0l44.6,44.6a8,8,0,0,1,0,11.4Z' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='136' y1='64' x2='192' y2='120' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpolyline points='216 216 96 216 40.5 160.5' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='164' y1='92' x2='68' y2='188' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")no-repeat center center,-webkit-gradient(linear,left top,left bottom,from(#fff),color-stop(.5,#fff),to(#e6e6e6))0 0 - } - .textarea-menu-memo>input[type=radio]:checked { - border-bottom-left-radius:20px; - background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M96,216H48a8,8,0,0,1-8-8V163.3a7.9,7.9,0,0,1,2.3-5.6l120-120a8,8,0,0,1,11.4,0l44.6,44.6a8,8,0,0,1,0,11.4Z' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='136' y1='64' x2='192' y2='120' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpolyline points='216 216 96 216 40.5 160.5' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='164' y1='92' x2='68' y2='188' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")no-repeat center center,-webkit-gradient(linear,left top,left bottom,from(#866dbe),to(#673db6))0 0 - } - .textarea-menu-text>input:checked~.textarea-menu-memo, - .textarea-menu>li>input:checked~.textarea-menu-text { - background:-webkit-gradient(linear,left top,left bottom,from(#866dbe),to(#673db6)) - } - .textarea-memo-preview { - image-rendering:pixelated; - width:360; - height:160px; - cursor: pointer; - } - .textarea-menu-memo>input[type=radio], - .textarea-menu-text>input[type=radio] { - display:inline-block; - width:60px; - height:100px; - border:0; - margin:0; - background-repeat:no-repeat; - background-position:0 0; - background-size: 60% !important; - cursor: pointer; - } - .textarea-menu>li { - list-style: none; - width: 60px; - height: 100px; - } - .textarea-menu-text>input[type=radio] { - border-top-left-radius:20px; - background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23000' viewBox='0 0 256 256'%3E%3Cpolyline points='152 192 80 56 8 192' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='20'/%3E%3Cellipse cx='208' cy='166.9' rx='32' ry='28' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cpath d='M184,112.4a34.1,34.1,0,0,1,24-9.5c17.7,0,32,12.5,32,28V192' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cline x1='130.8' y1='152' x2='29.2' y2='152' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3C/svg%3E")no-repeat center center; - background-color: var(--text); - } - .textarea-menu-text>input[type=radio]:checked { - border-top-left-radius:20px; - background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpolyline points='152 192 80 56 8 192' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='20'/%3E%3Cellipse cx='208' cy='166.9' rx='32' ry='28' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cpath d='M184,112.4a34.1,34.1,0,0,1,24-9.5c17.7,0,32,12.5,32,28V192' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cline x1='130.8' y1='152' x2='29.2' y2='152' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3C/svg%3E")no-repeat center center; - background-color: var(--btn); - } - .textarea-menu-memo>input[type=radio] { - border-bottom-left-radius:20px; - background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M96,216H48a8,8,0,0,1-8-8V163.3a7.9,7.9,0,0,1,2.3-5.6l120-120a8,8,0,0,1,11.4,0l44.6,44.6a8,8,0,0,1,0,11.4Z' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='136' y1='64' x2='192' y2='120' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpolyline points='216 216 96 216 40.5 160.5' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='164' y1='92' x2='68' y2='188' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")no-repeat center center; - background-color: var(--text); - } - .textarea-menu-memo>input[type=radio]:checked { - border-bottom-left-radius:20px; - background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M96,216H48a8,8,0,0,1-8-8V163.3a7.9,7.9,0,0,1,2.3-5.6l120-120a8,8,0,0,1,11.4,0l44.6,44.6a8,8,0,0,1,0,11.4Z' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='136' y1='64' x2='192' y2='120' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpolyline points='216 216 96 216 40.5 160.5' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='164' y1='92' x2='68' y2='188' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")no-repeat center center; - background-color: var(--btn); - } - .textarea-menu-text>input:checked~.textarea-menu-memo, - .textarea-menu>li>input:checked~.textarea-menu-text { - background:-webkit-gradient(linear,left top,left bottom,from(#866dbe),to(#673db6)) - } - .textarea-menu-text>input:checked~.textarea-text { - display:block - } - .textarea-menu-memo>input:checked~.textarea-memo { - display:block; - position:absolute - } - .textarea-memo-preview { - display:block; - } - -#report-post-page input[type=submit], -#add-post-page input[type=submit], -#button-wrapper button.primary -{ - background: var(--btn); - margin: 1ch; + padding-left: 0; + margin: 0; + border-right: 1px solid var(--background-alt-alt); +} +.textarea-container.textarea-with-menu.active-text { + display: flex; +} +.textarea-memo.trigger { + background: var(--background); + height: 200px; + display: flex; + align-items: center; + width: 100%; + justify-content: center; + border-radius: 0 20px 20px 0; +} +.add-post-page .textarea-text { + width: 100%; + height: 200px; + margin: 0; + padding: 1ch; + border: none; + resize: none; + border-radius: 0 20px 20px 0; + background: #f9f5fb; +} +.report .textarea-text { + border-radius: 10px; + padding: 1ch; + margin-top: 1em; +} +input[type="radio"] { + -webkit-appearance: none; + appearance: none; +} +.textarea-menu-memo > input[type="radio"], +.textarea-menu-text > input[type="radio"] { + display: inline-block; + width: 95px; + height: 140px; + border: 0; + margin: 0; + background-repeat: no-repeat; + background-position: 0 0; +} +.textarea-menu-text > input[type="radio"] { + border-top-left-radius: 20px; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='64' fill='%23000' viewBox='0 0 256 256'%3E%3Cpolyline points='152 192 80 56 8 192' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='20'/%3E%3Cellipse cx='208' cy='166.9' rx='32' ry='28' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cpath d='M184,112.4a34.1,34.1,0,0,1,24-9.5c17.7,0,32,12.5,32,28V192' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cline x1='130.8' y1='152' x2='29.2' y2='152' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3C/svg%3E") + no-repeat center center, + -webkit-gradient( + linear, + left top, + left bottom, + from(#fff), + color-stop(0.5, #fff), + to(#e6e6e6) + ) 0 0; +} +.textarea-menu-text > input[type="radio"]:checked { + border-top-left-radius: 20px; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpolyline points='152 192 80 56 8 192' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='20'/%3E%3Cellipse cx='208' cy='166.9' rx='32' ry='28' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cpath d='M184,112.4a34.1,34.1,0,0,1,24-9.5c17.7,0,32,12.5,32,28V192' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cline x1='130.8' y1='152' x2='29.2' y2='152' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3C/svg%3E") + no-repeat center center, + -webkit-gradient(linear, left top, left bottom, from(#866dbe), to(#673db6)) 0 + 0; +} +.textarea-menu-memo > input[type="radio"] { + border-bottom-left-radius: 20px; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M96,216H48a8,8,0,0,1-8-8V163.3a7.9,7.9,0,0,1,2.3-5.6l120-120a8,8,0,0,1,11.4,0l44.6,44.6a8,8,0,0,1,0,11.4Z' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='136' y1='64' x2='192' y2='120' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpolyline points='216 216 96 216 40.5 160.5' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='164' y1='92' x2='68' y2='188' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E") + no-repeat center center, + -webkit-gradient( + linear, + left top, + left bottom, + from(#fff), + color-stop(0.5, #fff), + to(#e6e6e6) + ) 0 0; +} +.textarea-menu-memo > input[type="radio"]:checked { + border-bottom-left-radius: 20px; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M96,216H48a8,8,0,0,1-8-8V163.3a7.9,7.9,0,0,1,2.3-5.6l120-120a8,8,0,0,1,11.4,0l44.6,44.6a8,8,0,0,1,0,11.4Z' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='136' y1='64' x2='192' y2='120' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpolyline points='216 216 96 216 40.5 160.5' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='164' y1='92' x2='68' y2='188' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E") + no-repeat center center, + -webkit-gradient(linear, left top, left bottom, from(#866dbe), to(#673db6)) 0 + 0; +} +.textarea-menu-text > input:checked ~ .textarea-menu-memo, +.textarea-menu > li > input:checked ~ .textarea-menu-text { + background: -webkit-gradient( + linear, + left top, + left bottom, + from(#866dbe), + to(#673db6) + ); +} +.textarea-memo-preview { + image-rendering: pixelated; + width: 360; + height: 160px; + cursor: pointer; +} +.textarea-menu-memo > input[type="radio"], +.textarea-menu-text > input[type="radio"] { + display: inline-block; + width: 60px; + height: 100px; + border: 0; + margin: 0; + background-repeat: no-repeat; + background-position: 0 0; + background-size: 60% !important; + cursor: pointer; +} +.textarea-menu > li { + list-style: none; + width: 60px; + height: 100px; +} +.textarea-menu-text > input[type="radio"] { + border-top-left-radius: 20px; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23000' viewBox='0 0 256 256'%3E%3Cpolyline points='152 192 80 56 8 192' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='20'/%3E%3Cellipse cx='208' cy='166.9' rx='32' ry='28' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cpath d='M184,112.4a34.1,34.1,0,0,1,24-9.5c17.7,0,32,12.5,32,28V192' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cline x1='130.8' y1='152' x2='29.2' y2='152' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3C/svg%3E") + no-repeat center center; + background-color: var(--text); +} +.textarea-menu-text > input[type="radio"]:checked { + border-top-left-radius: 20px; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpolyline points='152 192 80 56 8 192' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='20'/%3E%3Cellipse cx='208' cy='166.9' rx='32' ry='28' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cpath d='M184,112.4a34.1,34.1,0,0,1,24-9.5c17.7,0,32,12.5,32,28V192' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cline x1='130.8' y1='152' x2='29.2' y2='152' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3C/svg%3E") + no-repeat center center; + background-color: var(--btn); +} +.textarea-menu-memo > input[type="radio"] { + border-bottom-left-radius: 20px; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M96,216H48a8,8,0,0,1-8-8V163.3a7.9,7.9,0,0,1,2.3-5.6l120-120a8,8,0,0,1,11.4,0l44.6,44.6a8,8,0,0,1,0,11.4Z' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='136' y1='64' x2='192' y2='120' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpolyline points='216 216 96 216 40.5 160.5' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='164' y1='92' x2='68' y2='188' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E") + no-repeat center center; + background-color: var(--text); +} +.textarea-menu-memo > input[type="radio"]:checked { + border-bottom-left-radius: 20px; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M96,216H48a8,8,0,0,1-8-8V163.3a7.9,7.9,0,0,1,2.3-5.6l120-120a8,8,0,0,1,11.4,0l44.6,44.6a8,8,0,0,1,0,11.4Z' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='136' y1='64' x2='192' y2='120' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpolyline points='216 216 96 216 40.5 160.5' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='164' y1='92' x2='68' y2='188' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E") + no-repeat center center; + background-color: var(--btn); +} +.textarea-menu-text > input:checked ~ .textarea-menu-memo, +.textarea-menu > li > input:checked ~ .textarea-menu-text { + background: -webkit-gradient( + linear, + left top, + left bottom, + from(#866dbe), + to(#673db6) + ); +} +.textarea-menu-text > input:checked ~ .textarea-text { + display: block; +} +.textarea-menu-memo > input:checked ~ .textarea-memo { + display: block; + position: absolute; +} +.textarea-memo-preview { + display: block; } -#report-post-page input[type=button], -#add-post-page input[type=button], +#report-post-page input[type="submit"], +#add-post-page input[type="submit"], +#button-wrapper button.primary { + background: var(--btn); + margin: 1ch; +} + +#report-post-page input[type="button"], +#add-post-page input[type="button"], #button-wrapper button { - background: var(--btn-secondary); - margin: 1ch; + background: var(--btn-secondary); + margin: 1ch; } .buttons.tabs { - display: flex; - justify-content: center + display: flex; + justify-content: center; } -.buttons.tabs>a, -.buttons.tabs>button { - width: 100%; - margin: 0 1ch; - border: 1px solid var(--text-secondary); - cursor: pointer; - border-radius: 1em; - font-weight: 700; - padding: 0.5em 1em; - text-decoration: none; - text-align: center; - text-wrap: nowrap; +.buttons.tabs > a, +.buttons.tabs > button { + width: 100%; + margin: 0 1ch; + border: 1px solid var(--text-secondary); + cursor: pointer; + border-radius: 1em; + font-weight: 700; + padding: 0.5em 1em; + text-decoration: none; + text-align: center; + text-wrap: nowrap; } -.buttons.tabs>a.selected, -.buttons.tabs>button.selected { - background: var(--btn); - border-color: transparent +.buttons.tabs > a.selected, +.buttons.tabs > button.selected { + background: var(--btn); + border-color: transparent; } .col { - margin: 2ch; - font-size: larger + margin: 2ch; + font-size: larger; } .mt-5.text-center { - display: flex; - justify-content: center + display: flex; + justify-content: center; } .message-post-list .post { - position: relative; - padding: 10px 0; - margin-bottom: 20px; - margin-top: 30px; + position: relative; + padding: 10px 0; + margin-bottom: 20px; + margin-top: 30px; } .message-post-list .post.my-post .mii-icon-container { - float: right; - margin: 0 0 0 10px + float: right; + margin: 0 0 0 10px; } .message-post-list .post .mii-icon-container { - position: relative; - float: left; - width: 50px; - height: 50px; - margin-right: 20px; - border-radius: 12px; - box-shadow: 0 3px 10px rgba(0, 0, 0, .6) + position: relative; + float: left; + width: 50px; + height: 50px; + margin-right: 20px; + border-radius: 12px; + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6); } .message-post-list .post .mii-icon { - width: 50px; - height: 50px; - background: #fff; - border-radius: 12px + width: 50px; + height: 50px; + background: #fff; + border-radius: 12px; } .message-post-list .post.my-post footer { - right: 0; + right: 0; } .message-post-list .post footer { - display: block; - height: 16px; - color: var(--text-secondary-2); - font-size: 16px; - position: absolute; - bottom: -14px; + display: block; + height: 16px; + color: var(--text-secondary-2); + font-size: 16px; + position: absolute; + bottom: -14px; } .message-post-list .post.my-post .post-body { - float: right; - background: var(--theme); - color: #fff + float: right; + background: var(--theme); + color: #fff; } .message-post-list .post .post-body { - float: left; - position: relative; - background: #fff; - border-radius: 20px; - box-shadow: 0 3px 10px rgba(0, 0, 0, .4); - padding: 15px 20px; - color: #000 + float: left; + position: relative; + background: #fff; + border-radius: 20px; + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4); + padding: 15px 20px; + color: #000; } .message-post-list .post .post-content { - word-wrap: break-word; - white-space: pre-wrap; - margin-bottom: 0; - margin-left: 0; - margin-top: 0 + word-wrap: break-word; + white-space: pre-wrap; + margin-bottom: 0; + margin-left: 0; + margin-top: 0; } .message-post-list .post::after, -.settings-list-content .settings-list>li:after { - content: ""; - display: block; - clear: both +.settings-list-content .settings-list > li:after { + content: ""; + display: block; + clear: both; } .message-viewer-bubble-sent-memo { - width: 340px; - height: 127px + width: 340px; + height: 127px; } .message-viewer-bubble-sent-screenshot { - max-width: 500px; - max-height: 281px; - width: 100%; + max-width: 500px; + max-height: 281px; + width: 100%; } .message-post-list .post .post-buttons { - margin: 10px -20px -15px; - border-top: 2px solid #938a8a; - border-radius: 0 0 20px 20px; - text-align: right + margin: 10px -20px -15px; + border-top: 2px solid #938a8a; + border-radius: 0 0 20px 20px; + text-align: right; } .message-post-list .post .post-buttons a, .message-post-list .post .post-buttons button { - display: inline-block; - padding: 0 15px; - margin: 0; - border-width: 0; - border-left: none currentcolor; - line-height: 50px; - font-size: 20px; - color: #938a8a; - box-shadow: inset 2px 0 0#ddd + display: inline-block; + padding: 0 15px; + margin: 0; + border-width: 0; + border-left: none currentcolor; + line-height: 50px; + font-size: 20px; + color: #938a8a; + box-shadow: inset 2px 0 0#ddd; } .header-button { - position: fixed; - bottom: 5%; - right: 5%; - width: 60px; - height: 60px; - background: var(--btn-secondary); - color: var(--text); - font-size: 25px; - padding: 0; - z-index: 100; - } - + position: fixed; + bottom: 5%; + right: 5%; + width: 60px; + height: 60px; + background: var(--btn-secondary); + color: var(--text); + font-size: 25px; + padding: 0; + z-index: 100; +} .feeling-selector.expression { - display: flex; - width: 100%; - align-items: center; - flex-wrap: wrap; - justify-content: center; + display: flex; + width: 100%; + align-items: center; + flex-wrap: wrap; + justify-content: center; } .feeling-selector.expression > #mii-face { - width: 66px; - height: 66px; - margin: 0 1ch 1em 0; - border-radius: .5em; - background: var(--text-secondary); + width: 66px; + height: 66px; + margin: 0 1ch 1em 0; + border-radius: 0.5em; + background: var(--text-secondary); } .feeling-selector.expression .buttons { - list-style: none; - display: flex; - padding-left: 0; - background: var(--background-alt-alt); - border-radius: .5em; - margin: 0 0 1em 0; - flex-wrap: wrap; - justify-content: center; + list-style: none; + display: flex; + padding-left: 0; + background: var(--background-alt-alt); + border-radius: 0.5em; + margin: 0 0 1em 0; + flex-wrap: wrap; + justify-content: center; } .feeling-selector .buttons li { - display: inline-block; + display: inline-block; } .feeling-selector .buttons li > input { - width: 60px; - height: 60px; - appearance: none; - background-size: 60px !important; - background-repeat: no-repeat !important; - cursor: pointer; + width: 60px; + height: 60px; + appearance: none; + background-size: 60px !important; + background-repeat: no-repeat !important; + cursor: pointer; } .feeling-button-normal { - background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cline x1='88' y1='160' x2='168' y2='160' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23846abd'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23846abd' /%3E%3C/svg%3E")!important + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cline x1='88' y1='160' x2='168' y2='160' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23846abd'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23846abd' /%3E%3C/svg%3E") !important; } .feeling-button-happy { - background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23846abd'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23846abd'/%3E%3Cpath d='M169.6,152a48.1,48.1,0,0,1-83.2,0' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")!important + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23846abd'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23846abd'/%3E%3Cpath d='M169.6,152a48.1,48.1,0,0,1-83.2,0' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E") !important; } .feeling-button-like { - background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23846abd'/%3E%3Cline x1='152' y1='108' x2='176' y2='108' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpath d='M169.6,152a48.1,48.1,0,0,1-83.2,0' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")!important + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23846abd'/%3E%3Cline x1='152' y1='108' x2='176' y2='108' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpath d='M169.6,152a48.1,48.1,0,0,1-83.2,0' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E") !important; } .feeling-button-surprised { - background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cline x1='184' y1='96' x2='152' y2='128' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='128' x2='152' y2='96' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='96' x2='72' y2='128' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='128' x2='72' y2='96' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='128' cy='180' r='12' fill='%23846abd'/%3E%3C/svg%3E")!important + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cline x1='184' y1='96' x2='152' y2='128' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='128' x2='152' y2='96' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='96' x2='72' y2='128' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='128' x2='72' y2='96' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='128' cy='180' r='12' fill='%23846abd'/%3E%3C/svg%3E") !important; } .feeling-button-frustrated { - background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' stroke='%23846abd' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cpolyline points='80 172 96 152 112 172 128 152 144 172 160 152 176 172' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='96' x2='152' y2='128' fill='%23fff' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='128' x2='152' y2='96' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='96' x2='72' y2='128' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='128' x2='72' y2='96' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")!important + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' stroke='%23846abd' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cpolyline points='80 172 96 152 112 172 128 152 144 172 160 152 176 172' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='96' x2='152' y2='128' fill='%23fff' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='128' x2='152' y2='96' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='96' x2='72' y2='128' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='128' x2='72' y2='96' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E") !important; } .feeling-button-puzzled { - background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cpolyline points='80 172 96 152 112 172 128 152 144 172 160 152 176 172' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23846abd'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23846abd'/%3E%3C/svg%3E")!important + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cpolyline points='80 172 96 152 112 172 128 152 144 172 160 152 176 172' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23846abd'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23846abd'/%3E%3C/svg%3E") !important; } .feeling-button-normal:checked { - background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cline x1='88' y1='160' x2='168' y2='160' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23fff'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23fff'/%3E%3C/svg%3E")!important; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cline x1='88' y1='160' x2='168' y2='160' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23fff'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23fff'/%3E%3C/svg%3E") !important; } .feeling-button-happy:checked { - background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23fff'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23fff'/%3E%3Cpath d='M169.6,152a48.1,48.1,0,0,1-83.2,0' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")!important + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23fff'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23fff'/%3E%3Cpath d='M169.6,152a48.1,48.1,0,0,1-83.2,0' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E") !important; } .feeling-button-like:checked { - background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23fff'/%3E%3Cline x1='152' y1='108' x2='176' y2='108' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpath d='M169.6,152a48.1,48.1,0,0,1-83.2,0' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")!important + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23fff'/%3E%3Cline x1='152' y1='108' x2='176' y2='108' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpath d='M169.6,152a48.1,48.1,0,0,1-83.2,0' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E") !important; } .feeling-button-surprised:checked { - background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cline x1='184' y1='96' x2='152' y2='128' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='128' x2='152' y2='96' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='96' x2='72' y2='128' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='128' x2='72' y2='96' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='128' cy='180' r='12' fill='%23fff'/%3E%3C/svg%3E")!important + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cline x1='184' y1='96' x2='152' y2='128' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='128' x2='152' y2='96' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='96' x2='72' y2='128' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='128' x2='72' y2='96' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='128' cy='180' r='12' fill='%23fff'/%3E%3C/svg%3E") !important; } .feeling-button-frustrated:checked { - background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cpolyline points='80 172 96 152 112 172 128 152 144 172 160 152 176 172' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='96' x2='152' y2='128' fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='128' x2='152' y2='96' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='96' x2='72' y2='128' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='128' x2='72' y2='96' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")!important + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cpolyline points='80 172 96 152 112 172 128 152 144 172 160 152 176 172' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='96' x2='152' y2='128' fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='128' x2='152' y2='96' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='96' x2='72' y2='128' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='128' x2='72' y2='96' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E") !important; } .feeling-button-puzzled:checked { - background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cpolyline points='80 172 96 152 112 172 128 152 144 172 160 152 176 172' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23fff'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23fff'/%3E%3C/svg%3E")!important + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cpolyline points='80 172 96 152 112 172 128 152 144 172 160 152 176 172' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23fff'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23fff'/%3E%3C/svg%3E") !important; } #button-wrapper { - display: flex; - justify-content: center; + display: flex; + justify-content: center; } #posts-form { - margin-bottom: 0; + margin-bottom: 0; } .checkbox-container.spoiler-button { - display: flex; - justify-content: center; - margin: 1em 0 0.5em 0; - user-select: none; - cursor: pointer; + display: flex; + justify-content: center; + margin: 1em 0 0.5em 0; + user-select: none; + cursor: pointer; } /* Painting Stuff */ #painting { - background: gray; - border: 1px solid #d3d3d3; - image-rendering: pixelated; - object-fit: contain; - width: 100%; - box-sizing: border-box; - margin-bottom: 1em; - } - .painting-wrapper { - position: absolute; - display: flex; - background: #000000ad; - width: 100%; - height: 100vh; - justify-content: center; - align-items: center; - top: 0; - z-index: 100; - left: 0; - } - #painting-content { - width: 100%; - max-width: 800px; - height: fit-content; - display: flex; - background: var(--background-alt); - border-radius: 1em; - flex-direction: column; - justify-content: center; - align-content: center; - align-items: center; - padding: 1em; - } - #painting-content .tools { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - width: 100%; - margin-bottom: 1em; - } - .buttons.pencil, .buttons.eraser { - list-style: none; - display: flex; - padding-left: 0; - border-radius: .5em; - margin: 0; - flex-wrap: wrap; - justify-content: center; - } - .tools .buttons input[type="radio"] { - width: 4em; - height: 4em; - background: #EFE6FF; - cursor: pointer; - color: var(--text); - border: 0; - font-weight: 700; - padding: 1em; - margin: 0; - background-repeat: no-repeat !important; - background-position: center !important; - border-right: 1px solid var(--background); - } + background: gray; + border: 1px solid #d3d3d3; + image-rendering: pixelated; + object-fit: contain; + width: 100%; + box-sizing: border-box; + margin-bottom: 1em; +} +.painting-wrapper { + position: absolute; + display: flex; + background: #000000ad; + width: 100%; + height: 100vh; + justify-content: center; + align-items: center; + top: 0; + z-index: 100; + left: 0; +} +#painting-content { + width: 100%; + max-width: 800px; + height: fit-content; + display: flex; + background: var(--background-alt); + border-radius: 1em; + flex-direction: column; + justify-content: center; + align-content: center; + align-items: center; + padding: 1em; +} +#painting-content .tools { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + margin-bottom: 1em; +} +.buttons.pencil, +.buttons.eraser { + list-style: none; + display: flex; + padding-left: 0; + border-radius: 0.5em; + margin: 0; + flex-wrap: wrap; + justify-content: center; +} +.tools .buttons input[type="radio"] { + width: 4em; + height: 4em; + background: #efe6ff; + cursor: pointer; + color: var(--text); + border: 0; + font-weight: 700; + padding: 1em; + margin: 0; + background-repeat: no-repeat !important; + background-position: center !important; + border-right: 1px solid var(--background); +} - .tools .buttons input[type="radio"].small { - border-radius: 1em 0 0 1em; - } +.tools .buttons input[type="radio"].small { + border-radius: 1em 0 0 1em; +} - .tools .buttons input[type="radio"].large { - border-radius: 0 1em 1em 0; - border: none; - } +.tools .buttons input[type="radio"].large { + border-radius: 0 1em 1em 0; + border: none; +} - .tools .buttons input[type="radio"]:checked { - background: var(--btn); - } +.tools .buttons input[type="radio"]:checked { + background: var(--btn); +} .tools div:last-of-type { - display: flex; - flex-wrap: nowrap; - background: var(--background-alt-alt); - padding: 1.25ch; - border-radius: 1em; + display: flex; + flex-wrap: nowrap; + background: var(--background-alt-alt); + padding: 1.25ch; + border-radius: 1em; } .buttons.pencil { - margin-right: 1em; + margin-right: 1em; } .tools button { - width: 4em; - height: 4em; - margin: 0 1ch 0 0; - background: var(--btn); - } + width: 4em; + height: 4em; + margin: 0 1ch 0 0; + background: var(--btn); +} #painting-content #button-wrapper button { margin: 0 1ch; font-size: 15px; @@ -1093,66 +1138,65 @@ button.report { } input.pencil:checked { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M240,100.68a15.86,15.86,0,0,0-4.69-11.31L166.63,20.68a16,16,0,0,0-22.63,0L115.57,49.11l-58,21.77A16.06,16.06,0,0,0,47.35,83.23L24.11,222.68A8,8,0,0,0,32,232a8.4,8.4,0,0,0,1.32-.11l139.44-23.24a16,16,0,0,0,12.35-10.17l21.77-58L235.31,112A15.87,15.87,0,0,0,240,100.68Zm-69.87,92.19L55.32,212l47.37-47.37a28,28,0,1,0-11.32-11.32L44,200.7,63.13,85.86,118,65.29,190.7,138ZM104,140a12,12,0,1,1,12,12A12,12,0,0,1,104,140Zm96-15.32L131.31,56l24-24L224,100.68Z'%3E%3C/path%3E%3C/svg%3E") !important; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M240,100.68a15.86,15.86,0,0,0-4.69-11.31L166.63,20.68a16,16,0,0,0-22.63,0L115.57,49.11l-58,21.77A16.06,16.06,0,0,0,47.35,83.23L24.11,222.68A8,8,0,0,0,32,232a8.4,8.4,0,0,0,1.32-.11l139.44-23.24a16,16,0,0,0,12.35-10.17l21.77-58L235.31,112A15.87,15.87,0,0,0,240,100.68Zm-69.87,92.19L55.32,212l47.37-47.37a28,28,0,1,0-11.32-11.32L44,200.7,63.13,85.86,118,65.29,190.7,138ZM104,140a12,12,0,1,1,12,12A12,12,0,0,1,104,140Zm96-15.32L131.31,56l24-24L224,100.68Z'%3E%3C/path%3E%3C/svg%3E") !important; background-size: 20px !important; } input.pencil { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23000' viewBox='0 0 256 256'%3E%3Cpath d='M240,100.68a15.86,15.86,0,0,0-4.69-11.31L166.63,20.68a16,16,0,0,0-22.63,0L115.57,49.11l-58,21.77A16.06,16.06,0,0,0,47.35,83.23L24.11,222.68A8,8,0,0,0,32,232a8.4,8.4,0,0,0,1.32-.11l139.44-23.24a16,16,0,0,0,12.35-10.17l21.77-58L235.31,112A15.87,15.87,0,0,0,240,100.68Zm-69.87,92.19L55.32,212l47.37-47.37a28,28,0,1,0-11.32-11.32L44,200.7,63.13,85.86,118,65.29,190.7,138ZM104,140a12,12,0,1,1,12,12A12,12,0,0,1,104,140Zm96-15.32L131.31,56l24-24L224,100.68Z'%3E%3C/path%3E%3C/svg%3E") !important; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23000' viewBox='0 0 256 256'%3E%3Cpath d='M240,100.68a15.86,15.86,0,0,0-4.69-11.31L166.63,20.68a16,16,0,0,0-22.63,0L115.57,49.11l-58,21.77A16.06,16.06,0,0,0,47.35,83.23L24.11,222.68A8,8,0,0,0,32,232a8.4,8.4,0,0,0,1.32-.11l139.44-23.24a16,16,0,0,0,12.35-10.17l21.77-58L235.31,112A15.87,15.87,0,0,0,240,100.68Zm-69.87,92.19L55.32,212l47.37-47.37a28,28,0,1,0-11.32-11.32L44,200.7,63.13,85.86,118,65.29,190.7,138ZM104,140a12,12,0,1,1,12,12A12,12,0,0,1,104,140Zm96-15.32L131.31,56l24-24L224,100.68Z'%3E%3C/path%3E%3C/svg%3E") !important; background-size: 20px !important; } input.pencil.medium { - background-size: 25px !important; + background-size: 25px !important; } input.pencil.large { - background-size: 30px !important; + background-size: 30px !important; } input.eraser:checked { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M225,80.4,183.6,39a24,24,0,0,0-33.94,0L31,157.66a24,24,0,0,0,0,33.94l30.06,30.06A8,8,0,0,0,66.74,224H216a8,8,0,0,0,0-16h-84.7L225,114.34A24,24,0,0,0,225,80.4ZM108.68,208H70.05L42.33,180.28a8,8,0,0,1,0-11.31L96,115.31,148.69,168Zm105-105L160,156.69,107.31,104,161,50.34a8,8,0,0,1,11.32,0l41.38,41.38a8,8,0,0,1,0,11.31Z'%3E%3C/path%3E%3C/svg%3E") !important; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M225,80.4,183.6,39a24,24,0,0,0-33.94,0L31,157.66a24,24,0,0,0,0,33.94l30.06,30.06A8,8,0,0,0,66.74,224H216a8,8,0,0,0,0-16h-84.7L225,114.34A24,24,0,0,0,225,80.4ZM108.68,208H70.05L42.33,180.28a8,8,0,0,1,0-11.31L96,115.31,148.69,168Zm105-105L160,156.69,107.31,104,161,50.34a8,8,0,0,1,11.32,0l41.38,41.38a8,8,0,0,1,0,11.31Z'%3E%3C/path%3E%3C/svg%3E") !important; background-size: 20px !important; } input.eraser { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23000' viewBox='0 0 256 256'%3E%3Cpath d='M225,80.4,183.6,39a24,24,0,0,0-33.94,0L31,157.66a24,24,0,0,0,0,33.94l30.06,30.06A8,8,0,0,0,66.74,224H216a8,8,0,0,0,0-16h-84.7L225,114.34A24,24,0,0,0,225,80.4ZM108.68,208H70.05L42.33,180.28a8,8,0,0,1,0-11.31L96,115.31,148.69,168Zm105-105L160,156.69,107.31,104,161,50.34a8,8,0,0,1,11.32,0l41.38,41.38a8,8,0,0,1,0,11.31Z'%3E%3C/path%3E%3C/svg%3E") !important; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23000' viewBox='0 0 256 256'%3E%3Cpath d='M225,80.4,183.6,39a24,24,0,0,0-33.94,0L31,157.66a24,24,0,0,0,0,33.94l30.06,30.06A8,8,0,0,0,66.74,224H216a8,8,0,0,0,0-16h-84.7L225,114.34A24,24,0,0,0,225,80.4ZM108.68,208H70.05L42.33,180.28a8,8,0,0,1,0-11.31L96,115.31,148.69,168Zm105-105L160,156.69,107.31,104,161,50.34a8,8,0,0,1,11.32,0l41.38,41.38a8,8,0,0,1,0,11.31Z'%3E%3C/path%3E%3C/svg%3E") !important; background-size: 20px !important; } input.eraser.medium { - background-size: 25px !important; + background-size: 25px !important; } input.eraser.large { - background-size: 30px !important; + background-size: 30px !important; } .tools button { - background-repeat: no-repeat; - background-position: center; - background-size: 30px; + background-repeat: no-repeat; + background-position: center; + background-size: 30px; } .tools button.clear { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-50.34-74.34L139.31,152l18.35,18.34a8,8,0,0,1-11.32,11.32L128,163.31l-18.34,18.35a8,8,0,0,1-11.32-11.32L116.69,152,98.34,133.66a8,8,0,0,1,11.32-11.32L128,140.69l18.34-18.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E") !important;; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-50.34-74.34L139.31,152l18.35,18.34a8,8,0,0,1-11.32,11.32L128,163.31l-18.34,18.35a8,8,0,0,1-11.32-11.32L116.69,152,98.34,133.66a8,8,0,0,1,11.32-11.32L128,140.69l18.34-18.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E") !important; } .tools button.undo { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M136,80v43.47l36.12,21.67a8,8,0,0,1-8.24,13.72l-40-24A8,8,0,0,1,120,128V80a8,8,0,0,1,16,0Zm-8-48A95.44,95.44,0,0,0,60.08,60.15C52.81,67.51,46.35,74.59,40,82V64a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H72a8,8,0,0,0,0-16H49c7.15-8.42,14.27-16.35,22.39-24.57a80,80,0,1,1,1.66,114.75,8,8,0,1,0-11,11.64A96,96,0,1,0,128,32Z'%3E%3C/path%3E%3C/svg%3E") !important; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M136,80v43.47l36.12,21.67a8,8,0,0,1-8.24,13.72l-40-24A8,8,0,0,1,120,128V80a8,8,0,0,1,16,0Zm-8-48A95.44,95.44,0,0,0,60.08,60.15C52.81,67.51,46.35,74.59,40,82V64a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H72a8,8,0,0,0,0-16H49c7.15-8.42,14.27-16.35,22.39-24.57a80,80,0,1,1,1.66,114.75,8,8,0,1,0-11,11.64A96,96,0,1,0,128,32Z'%3E%3C/path%3E%3C/svg%3E") !important; } /* End of painting stuff */ li.reports .hover { - display: flex; - user-select: none; - cursor: pointer; - padding: 0; - padding-left: 2ch; + display: flex; + user-select: none; + cursor: pointer; + padding: 0; + padding-left: 2ch; } - summary::before { content: "►"; display: flex; @@ -1183,11 +1227,11 @@ details { flex-direction: column; } li.reports .posts-wrapper { - margin-top: 1ch; + margin-top: 1ch; } li.reports .post-buttons-wrapper { - display: none; + display: none; } li.reports .button-spacer { @@ -1218,203 +1262,207 @@ li.reports .button-spacer { color: var(--text); } +.community-page-post-box .buttons.tabs { + margin-bottom: 1em; +} + @media screen and (max-width: 1400px) { - .communities-wrapper { - max-width: 600px; - grid-template-columns: auto auto; - grid-row-gap: 10px; - grid-column-gap: 10px - } + .communities-wrapper { + max-width: 600px; + grid-template-columns: auto auto; + grid-row-gap: 10px; + grid-column-gap: 10px; + } - header { - align-items: center - } + header { + align-items: center; + } - header p { - display: none - } + header p { + display: none; + } - header a { - padding: .25em .5em .25em .5em - } + header a { + padding: 0.25em 0.5em 0.25em 0.5em; + } } @media screen and (max-width: 1000px) { - #main { - width: 100%; - margin-bottom: 60px - } + #main { + width: 100%; + margin-bottom: 60px; + } - #news-list-content, - .posts-wrapper { - max-width: 600px; - width: 90vw - } + #news-list-content, + .posts-wrapper { + max-width: 600px; + width: 90vw; + } - .post-content, - .spoiler-overlay { - margin-top: .25em; - margin-left: 2.5em - } + .post-content, + .spoiler-overlay { + margin-top: 0.25em; + margin-left: 2.5em; + } - .user-icon, - .user-icon.verified { - width: 2em; - height: 2em - } + .user-icon, + .user-icon.verified { + width: 2em; + height: 2em; + } - .user-icon.verified { - border: solid 2px var(--btn) - } + .user-icon.verified { + border: solid 2px var(--btn); + } - .post-buttons-wrapper { - margin-top: .5em; - margin-bottom: -.5em; - margin-left: 2.5em - } + .post-buttons-wrapper { + margin-top: 0.5em; + margin-bottom: -0.5em; + margin-left: 2.5em; + } - header { - width: 100%; - margin: 0; - background: var(--background); - flex-direction: row; - justify-content: space-evenly; - bottom: 0; - border-top: 1px solid var(--text-secondary); - z-index: 100; - } + header { + width: 100%; + margin: 0; + background: var(--background); + flex-direction: row; + justify-content: space-evenly; + bottom: 0; + border-top: 1px solid var(--text-secondary); + z-index: 100; + } - header>a:first-child { - display: none - } + header > a:first-child { + display: none; + } - header>a:nth-of-type(2) { - position: fixed; - top: 2px; - left: 4px; - border-radius: 100%; - width: 3em; - height: 3em; - padding: 0; - justify-content: center; - z-index: 20 - } + header > a:nth-of-type(2) { + position: fixed; + top: 2px; + left: 4px; + border-radius: 100%; + width: 3em; + height: 3em; + padding: 0; + justify-content: center; + z-index: 20; + } - header>a>p { - display: none - } + header > a > p { + display: none; + } - header a { - padding: .25em 1em - } + header a { + padding: 0.25em 1em; + } - header svg { - scale: .75 - } + header svg { + scale: 0.75; + } - header>.selected { - background: var(--background-alt); - border-radius: 1em; - font-weight: 700; - color: var(--theme-light); - margin: unset - } + header > .selected { + background: var(--background-alt); + border-radius: 1em; + font-weight: 700; + color: var(--theme-light); + margin: unset; + } - header>.selected>svg { - stroke: var(--theme-light) - } + header > .selected > svg { + stroke: var(--theme-light); + } - #load-more { - margin-bottom: 1em; - max-width: 600px; - width: 90vw - } + #load-more { + margin-bottom: 1em; + max-width: 600px; + width: 90vw; + } - #title { - color: var(--text); - width: 100vw; - display: flex; - justify-content: center; - border-bottom: 1px solid var(--text-secondary); - padding-top: .5em; - padding-bottom: .5em; - position: fixed; - background: var(--background); - margin-top: 0; - z-index: 100; - } + #title { + color: var(--text); + width: 100vw; + display: flex; + justify-content: center; + border-bottom: 1px solid var(--text-secondary); + padding-top: 0.5em; + padding-bottom: 0.5em; + position: fixed; + background: var(--background); + margin-top: 0; + z-index: 100; + } - #wrapper { - margin-top: 4em - } + #wrapper { + margin-top: 4em; + } - #wrapper.bottom { - margin-top: 0; - margin-bottom: 1em - } + #wrapper.bottom { + margin-top: 0; + margin-bottom: 1em; + } - .communities-wrapper { - max-width: 600px; - grid-template-columns: auto; - grid-row-gap: 10px; - grid-column-gap: 10px - } + .communities-wrapper { + max-width: 600px; + grid-template-columns: auto; + grid-row-gap: 10px; + grid-column-gap: 10px; + } - .notifications-list-content { - width: 90vw; - min-height: 4em - } + .notifications-list-content { + width: 90vw; + min-height: 4em; + } - community-info>.user-icon.verified { - width: 60px; - height: 60px - } + community-info > .user-icon.verified { + width: 60px; + height: 60px; + } - .community-info>.user-icon, - community-info>.user-icon { - width: 64px; - height: 64px - } + .community-info > .user-icon, + community-info > .user-icon { + width: 64px; + height: 64px; + } - .community-top { - max-width: 600px; - width: 90vw - } + .community-top { + max-width: 600px; + width: 90vw; + } - .info-boxes-wrapper>div { - width: 100% - } + .info-boxes-wrapper > div { + width: 100%; + } - .community-info>.user-icon.verified { - border: solid 4px var(--btn); - width: 60px; - height: 60px - } + .community-info > .user-icon.verified { + border: solid 4px var(--btn); + width: 60px; + height: 60px; + } - list-content-with-icon-and-text li.reports>* { - width: 100%; - overflow: clip - } + list-content-with-icon-and-text li.reports > * { + width: 100%; + overflow: clip; + } - li.reports .posts-wrapper { - margin-left: 0em; - width: calc(90vw - 2em); - max-width: calc(600px - 2em); - } + li.reports .posts-wrapper { + margin-left: 0em; + width: calc(90vw - 2em); + max-width: calc(600px - 2em); + } - li.reports .hover { - width: auto; - padding: .5em .25em; - } + li.reports .hover { + width: auto; + padding: 0.5em 0.25em; + } - #message-page { - width: 95%; - } + #message-page { + width: 95%; + } - .scroll-focus.mii-icon-container { - display: none; - } - .header-button { - bottom: 8%; - } -} \ No newline at end of file + .scroll-focus.mii-icon-container { + display: none; + } + .header-button { + bottom: 8%; + } +} diff --git a/src/webfiles/web/css/web.min.css b/src/webfiles/web/css/web.min.css index 8df8318..3942e7d 100644 --- a/src/webfiles/web/css/web.min.css +++ b/src/webfiles/web/css/web.min.css @@ -1 +1 @@ -:root{--background:#1B1F3B;--background-alt:#2a2f50;--text:white;--text-secondary:#A1A8D9;--btn:#673DB6;--btn-secondary:#333960;--theme:var(--btn);--theme-light:#A185D6;--text-secondary-2:#8990C1;--border:rgba(255, 255, 255, 0.1);--background-alt-alt:#383f6b}button,input[type=button],input[type=submit]{cursor:pointer;background:var(--background-alt-alt);color:var(--text);border:0;border-radius:1em;font-weight:700;padding:1em}a{color:unset}a:hover{cursor:pointer;text-decoration:underline}#title{color:var(--text);display:flex;justify-content:center}#nav-bar{display:flex;background:-webkit-gradient(linear,left top,right top,from(#fff),to(#fff5f5));list-style:none;user-select:none}.badge,body,button{color:var(--text)}.badge{position:absolute;background:var(--btn);padding:3px 8px;border-radius:1em;margin-left:1.25em;display:none;margin-bottom:30px}body{background-color:var(--background);margin:0;font-family:Conv_Poppins-Light,sans-serif}header{display:flex;align-items:flex-start;margin-top:35px;flex-direction:column;position:fixed}a,header a,header>a,header>a:hover{text-decoration:none}header .logo-link,header .logo-link svg{display:block;width:5em}header a{color:var(--text-secondary);padding:.25em 1.5em .25em 1em;border-radius:2em;display:flex;margin:.1em;align-items:center}header a:first-child{padding:.5em 1em}header a:hover,header>.selected{background:var(--background-alt)}header>a>p{padding-left:1em}header>.selected{border-radius:1em;font-weight:700;color:var(--theme-light)}header>.selected>svg{stroke:var(--theme-light)}.mii-icon{width:40px;height:40px;background:#a1a8d9;border-radius:50px}#main{width:95%;max-width:1400px;margin:0 auto;overflow:hidden}.post-meta-wrapper{display:flex;color:var(--text);align-items:center;margin-left:.5em;height:2em;margin-bottom:0;font-size:small}.post-meta-wrapper>h3>a{text-decoration:none;color:var(--text)}.post-meta-wrapper>h3>a:hover{text-decoration:underline}.post-meta-wrapper>h4:last-child{padding-left:.5em;color:var(--text-secondary)}.post-user-info-wrapper{display:flex;height:2em}#wrapper{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center}.posts-wrapper{width:600px;color:var(--text);background:var(--background-alt);margin-bottom:1em;padding:1em;border-radius:1em}.icon-container>img,.user-icon{width:64px;height:64px;border-radius:.5em;background:var(--text-secondary)}.user-icon.verified{border:solid 4px var(--btn);width:60px;height:60px}.verified-badge{background:var(--btn);padding:1px 5px;border-radius:1em;color:var(--text);margin-left:.25em}.painting,.screenshot{border-radius:1em;width:100%}.painting{image-rendering:pixelated}.screenshot{margin-bottom:1em}.post-content{display:flex;flex-direction:column;cursor:pointer}.post-content>h4{margin-top:0;margin-bottom:.5em;font-weight:400;margin-left:.25em;word-wrap:break-word;white-space:pre-wrap}.post-content,.spoiler-overlay{margin-left:74px}.spoiler-overlay>button{width:100%;padding:12px 48px}.post-buttons-wrapper{margin-top:1em;display:flex;justify-content:space-between;user-select:none;margin-left:74px}.post-buttons-wrapper>span{display:flex;flex-direction:row;align-items:center;padding:.5em}.post-buttons-wrapper>span:nth-of-type(2):hover{background:rgba(0,255,0,.25)}.post-buttons-wrapper>span:last-child:hover{background:rgba(0,150,255,.25)}.post-buttons-wrapper>span:hover{cursor:pointer;background:rgba(255,0,0,.25);border-radius:.75em}.post-buttons-wrapper>span>h4{padding-left:.5em;margin:0}.post-buttons-wrapper>span.selected>svg{fill:red;stroke:red}#load-more{width:632px;margin-bottom:1em}#toast,iframe{border-radius:1em}#toast{opacity:0;min-width:250px;margin-left:-141px;background-color:var(--btn);color:var(--text);text-align:center;position:fixed;z-index:10;left:50%;bottom:5em;padding:1ch;transition:all .5s ease}#toast.show{opacity:1}.community-list-wrapper{display:grid;grid-template-areas:"icon main" "icon footer";gap:0;cursor:pointer;background:var(--background-alt);padding:1em;width:90%;border-radius:1em;grid-template-columns:111px 152px}.community-list-icon{width:100px;height:100px;grid-area:icon;margin-right:1em;border-radius:1em;-webkit-border-radius:1em;-moz-border-radius:1em;-ms-border-radius:1em;-o-border-radius:1em}.community-list-title{margin:.5em 0-1em;font-size:2ch}.community-list-followers{margin:.5em 0 0;font-size:1.5ch}.communities-wrapper{display:grid;max-width:900px;grid-template-columns:auto auto auto;grid-row-gap:1em;grid-column-gap:1em}#new{margin-bottom:1em}iframe{width:100%;height:20em;margin-top:1em}.notifications-list-content{background:var(--background-alt);width:600px;min-height:4em;margin:0;display:flex;justify-content:flex-start;align-items:center;border-bottom:2px solid var(--btn-secondary);user-select:none;cursor:pointer;font-size:small}.notifications-list-content:hover{text-decoration:none;background:var(--btn-secondary)}.notifications-list-content:first-of-type{border-top-left-radius:1em;border-top-right-radius:1em}.notifications-list-content:last-of-type{border-bottom-left-radius:1em;border-bottom-right-radius:1em}.unread-badge{padding:.25em;border-radius:1em;margin:1em;background-color:var(--btn)}.community-top{background:var(--background-alt);margin-bottom:1em;padding:1em;border-radius:1em;width:600px;overflow:hidden}.community-info{display:flex}.info-boxes-wrapper{display:flex;justify-content:space-evenly;flex-wrap:wrap}.info-boxes-wrapper>div{background:var(--background-alt-alt);border-radius:1em;display:flex;flex-direction:column;align-items:center;margin:.5em;flex-grow:1}.info-boxes-wrapper>div>h4:first-child{margin:.75em 0 0;color:var(--theme-light);font-size:small;font-weight:bolder}.info-boxes-wrapper>div>h4:last-child{margin:.75em 0;color:var(--text-secondary);font-size:small}.community-title{padding-left:.5em;font-size:larger;padding-top:.5em}.banner{width:110%;margin:-1em}.community-page-follow-button-wrapper{padding:.25em;border:2px solid var(--btn);border-radius:1em;margin:1.5em 0 auto auto;cursor:pointer;height:fit-content}.community-page-follow-button-wrapper.selected,.favorite-button.checked{background:var(--btn)}.community-page-follow-button-wrapper>p,.favorite-button{margin:.25em;color:var(--text)!important}.favorite-button{border:2px solid var(--btn);border-radius:1em;margin:1.5em 0 auto auto;cursor:pointer;height:fit-content;text-decoration:none!important;padding:1ch}.list-content-with-icon-and-text{list-style:none;padding:unset}.list-content-with-icon-and-text li{display:flex;padding:.25em 0;border-bottom:1px solid var(--text-secondary)}.list-content-with-icon-and-text .body{margin-left:1em;width:100%;align-items:center;display:inherit;text-decoration:none}#news-list-content li .text .nick-name{font-weight:700}#news-list-content li .text .link{color:var(--theme-light)}#news-list-content li .text .timestamp{color:#969696;white-space:nowrap}.hover{width:600px;display:inherit;border-radius:1em;padding:1em}.hover:hover{background:var(--background-alt)}.body.messages{flex-direction:column;justify-content:center;align-items:flex-start!important}.body.messages>.text{padding-bottom:.5ch}.report h4,.report p{margin:0 5px 0 0}.list-content-with-icon-and-text li.reports{flex-direction:column}.reports .hover:hover{background:unset}.reports button{margin-bottom:1em}button.report{margin-bottom:1.5em;max-width:630px;width:90vw}#report-post-page{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1em}#report-form,.add-post-page{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1em;max-width:600px;background:var(--background-alt);border-radius:1em;margin-top:4em}.add-post-page-content.report>div{display:flex;justify-items:center;align-items:center;justify-content:center;margin-top:13px}.report .textarea-text{width:100%;height:100px;border-radius:1em;border:none;background:var(--text);padding:10px;margin:1em 0;resize:none}.textarea-menu{padding-left:0;margin:0;border-right:1px solid var(--background-alt-alt)}.textarea-container.textarea-with-menu.active-text{display:flex}.textarea-memo.trigger{background:var(--background);height:200px;display:flex;align-items:center;width:100%;justify-content:center;border-radius:0 20px 20px 0}.add-post-page .textarea-text{width:100%;height:200px;margin:0;padding:1ch;border:none;resize:none;border-radius:0 20px 20px 0;background:#f9f5fb}input[type=radio]{-webkit-appearance:none;appearance:none}.textarea-menu-memo>input[type=radio],.textarea-menu-text>input[type=radio]{display:inline-block;width:95px;height:140px;border:0;margin:0;background-repeat:no-repeat;background-position:0 0}.textarea-menu-text>input[type=radio]{border-top-left-radius:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='64' fill='%23000' viewBox='0 0 256 256'%3E%3Cpolyline points='152 192 80 56 8 192' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='20'/%3E%3Cellipse cx='208' cy='166.9' rx='32' ry='28' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cpath d='M184,112.4a34.1,34.1,0,0,1,24-9.5c17.7,0,32,12.5,32,28V192' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cline x1='130.8' y1='152' x2='29.2' y2='152' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3C/svg%3E") no-repeat center center,-webkit-gradient(linear,left top,left bottom,from(#fff),color-stop(.5,#fff),to(#e6e6e6)) 0 0}.textarea-menu-text>input[type=radio]:checked{border-top-left-radius:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpolyline points='152 192 80 56 8 192' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='20'/%3E%3Cellipse cx='208' cy='166.9' rx='32' ry='28' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cpath d='M184,112.4a34.1,34.1,0,0,1,24-9.5c17.7,0,32,12.5,32,28V192' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cline x1='130.8' y1='152' x2='29.2' y2='152' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3C/svg%3E") no-repeat center center,-webkit-gradient(linear,left top,left bottom,from(#866dbe),to(#673db6)) 0 0}.textarea-menu-memo>input[type=radio]{border-bottom-left-radius:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M96,216H48a8,8,0,0,1-8-8V163.3a7.9,7.9,0,0,1,2.3-5.6l120-120a8,8,0,0,1,11.4,0l44.6,44.6a8,8,0,0,1,0,11.4Z' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='136' y1='64' x2='192' y2='120' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpolyline points='216 216 96 216 40.5 160.5' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='164' y1='92' x2='68' y2='188' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E") no-repeat center center,-webkit-gradient(linear,left top,left bottom,from(#fff),color-stop(.5,#fff),to(#e6e6e6)) 0 0}.textarea-menu-memo>input[type=radio]:checked{border-bottom-left-radius:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M96,216H48a8,8,0,0,1-8-8V163.3a7.9,7.9,0,0,1,2.3-5.6l120-120a8,8,0,0,1,11.4,0l44.6,44.6a8,8,0,0,1,0,11.4Z' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='136' y1='64' x2='192' y2='120' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpolyline points='216 216 96 216 40.5 160.5' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='164' y1='92' x2='68' y2='188' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E") no-repeat center center,-webkit-gradient(linear,left top,left bottom,from(#866dbe),to(#673db6)) 0 0}.textarea-menu-text>input:checked~.textarea-menu-memo,.textarea-menu>li>input:checked~.textarea-menu-text{background:-webkit-gradient(linear,left top,left bottom,from(#866dbe),to(#673db6))}.textarea-memo-preview{image-rendering:pixelated;width:360;height:160px}.textarea-menu-memo>input[type=radio],.textarea-menu-text>input[type=radio]{display:inline-block;width:60px;height:100px;border:0;margin:0;background-repeat:no-repeat;background-position:0 0;background-size:60%!important;cursor:pointer}.textarea-menu>li{list-style:none;width:60px;height:100px}.textarea-menu-text>input[type=radio]{border-top-left-radius:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23000' viewBox='0 0 256 256'%3E%3Cpolyline points='152 192 80 56 8 192' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='20'/%3E%3Cellipse cx='208' cy='166.9' rx='32' ry='28' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cpath d='M184,112.4a34.1,34.1,0,0,1,24-9.5c17.7,0,32,12.5,32,28V192' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cline x1='130.8' y1='152' x2='29.2' y2='152' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3C/svg%3E") no-repeat center center;background-color:var(--text)}.textarea-menu-text>input[type=radio]:checked{border-top-left-radius:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpolyline points='152 192 80 56 8 192' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='20'/%3E%3Cellipse cx='208' cy='166.9' rx='32' ry='28' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cpath d='M184,112.4a34.1,34.1,0,0,1,24-9.5c17.7,0,32,12.5,32,28V192' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cline x1='130.8' y1='152' x2='29.2' y2='152' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3C/svg%3E") no-repeat center center;background-color:var(--btn)}.textarea-menu-memo>input[type=radio]{border-bottom-left-radius:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M96,216H48a8,8,0,0,1-8-8V163.3a7.9,7.9,0,0,1,2.3-5.6l120-120a8,8,0,0,1,11.4,0l44.6,44.6a8,8,0,0,1,0,11.4Z' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='136' y1='64' x2='192' y2='120' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpolyline points='216 216 96 216 40.5 160.5' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='164' y1='92' x2='68' y2='188' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E") no-repeat center center;background-color:var(--text)}.textarea-menu-memo>input[type=radio]:checked{border-bottom-left-radius:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M96,216H48a8,8,0,0,1-8-8V163.3a7.9,7.9,0,0,1,2.3-5.6l120-120a8,8,0,0,1,11.4,0l44.6,44.6a8,8,0,0,1,0,11.4Z' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='136' y1='64' x2='192' y2='120' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpolyline points='216 216 96 216 40.5 160.5' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='164' y1='92' x2='68' y2='188' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E") no-repeat center center;background-color:var(--btn)}.textarea-menu-text>input:checked~.textarea-menu-memo,.textarea-menu>li>input:checked~.textarea-menu-text{background:-webkit-gradient(linear,left top,left bottom,from(#866dbe),to(#673db6))}.textarea-menu-text>input:checked~.textarea-text{display:block}.textarea-menu-memo>input:checked~.textarea-memo{display:block;position:absolute}.textarea-memo-preview{display:block}#add-post-page input[type=submit],#report-post-page input[type=submit]{background:var(--btn);margin:1ch}#add-post-page input[type=button],#report-post-page input[type=button]{background:var(--btn-secondary);margin:1ch}.buttons.tabs{display:flex;justify-content:center}.buttons.tabs>a,.buttons.tabs>button{width:100%;margin:0 1ch;border:1px solid var(--text-secondary);cursor:pointer;border-radius:1em;font-weight:700;padding:1em;text-decoration:none;text-align:center}.buttons.tabs>a.selected,.buttons.tabs>button.selected{background:var(--btn);border-color:transparent}.col{margin:2ch;font-size:larger}.mt-5.text-center{display:flex;justify-content:center}.message-post-list .post{position:relative;padding:10px 0;margin-bottom:20px;margin-top:30px}.message-post-list .post.my-post .mii-icon-container{float:right;margin:0 0 0 10px}.message-post-list .post .mii-icon-container{position:relative;float:left;width:50px;height:50px;margin-right:20px;border-radius:12px;box-shadow:0 3px 10px rgba(0,0,0,.6)}.message-post-list .post .mii-icon{width:50px;height:50px;background:#fff;border-radius:12px}.message-post-list .post.my-post footer{right:0}.message-post-list .post footer{display:block;height:16px;color:var(--text-secondary-2);font-size:16px;position:absolute;bottom:-14px}.message-post-list .post.my-post .post-body{float:right;background:var(--theme);color:#fff}.message-post-list .post .post-body{float:left;position:relative;background:#fff;border-radius:20px;box-shadow:0 3px 10px rgba(0,0,0,.4);padding:15px 20px;color:#000}.message-post-list .post .post-content{word-wrap:break-word;white-space:pre-wrap;margin-bottom:0;margin-left:0;margin-top:0}.message-post-list .post::after,.settings-list-content .settings-list>li:after{content:"";display:block;clear:both}.message-viewer-bubble-sent-memo{width:340px;height:127px}.message-viewer-bubble-sent-screenshot{max-width:500px;max-height:281px;width:100%}.message-post-list .post .post-buttons{margin:10px -20px -15px;border-top:2px solid #938a8a;border-radius:0 0 20px 20px;text-align:right}.message-post-list .post .post-buttons a,.message-post-list .post .post-buttons button{display:inline-block;padding:0 15px;margin:0;border-width:0;border-left:none currentcolor;line-height:50px;font-size:20px;color:#938a8a;box-shadow:inset 2px 0 0#ddd}.header-button{position:fixed;bottom:5%;right:5%;width:60px;height:60px;background:var(--btn-secondary);color:var(--text);font-size:25px;padding:0;z-index:100}.feeling-selector.expression{display:flex;width:100%;align-items:center;flex-wrap:wrap;justify-content:center}.feeling-selector.expression>#mii-face{width:66px;height:66px;margin:0 1ch 1em 0;border-radius:.5em;background:var(--text-secondary)}.feeling-selector.expression .buttons{list-style:none;display:flex;padding-left:0;background:var(--background-alt-alt);border-radius:.5em;margin:0 0 1em 0;flex-wrap:wrap;justify-content:center}.feeling-selector .buttons li{display:inline-block}.feeling-selector .buttons li>input{width:60px;height:60px;appearance:none;background-size:60px!important;background-repeat:no-repeat!important;cursor:pointer}.feeling-button-normal{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cline x1='88' y1='160' x2='168' y2='160' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23846abd'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23846abd' /%3E%3C/svg%3E")!important}.feeling-button-happy{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23846abd'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23846abd'/%3E%3Cpath d='M169.6,152a48.1,48.1,0,0,1-83.2,0' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")!important}.feeling-button-like{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23846abd'/%3E%3Cline x1='152' y1='108' x2='176' y2='108' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpath d='M169.6,152a48.1,48.1,0,0,1-83.2,0' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")!important}.feeling-button-surprised{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cline x1='184' y1='96' x2='152' y2='128' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='128' x2='152' y2='96' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='96' x2='72' y2='128' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='128' x2='72' y2='96' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='128' cy='180' r='12' fill='%23846abd'/%3E%3C/svg%3E")!important}.feeling-button-frustrated{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' stroke='%23846abd' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cpolyline points='80 172 96 152 112 172 128 152 144 172 160 152 176 172' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='96' x2='152' y2='128' fill='%23fff' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='128' x2='152' y2='96' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='96' x2='72' y2='128' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='128' x2='72' y2='96' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")!important}.feeling-button-puzzled{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cpolyline points='80 172 96 152 112 172 128 152 144 172 160 152 176 172' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23846abd'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23846abd'/%3E%3C/svg%3E")!important}.feeling-button-normal:checked{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cline x1='88' y1='160' x2='168' y2='160' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23fff'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23fff'/%3E%3C/svg%3E")!important}.feeling-button-happy:checked{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23fff'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23fff'/%3E%3Cpath d='M169.6,152a48.1,48.1,0,0,1-83.2,0' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")!important}.feeling-button-like:checked{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23fff'/%3E%3Cline x1='152' y1='108' x2='176' y2='108' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpath d='M169.6,152a48.1,48.1,0,0,1-83.2,0' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")!important}.feeling-button-surprised:checked{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cline x1='184' y1='96' x2='152' y2='128' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='128' x2='152' y2='96' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='96' x2='72' y2='128' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='128' x2='72' y2='96' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='128' cy='180' r='12' fill='%23fff'/%3E%3C/svg%3E")!important}.feeling-button-frustrated:checked{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cpolyline points='80 172 96 152 112 172 128 152 144 172 160 152 176 172' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='96' x2='152' y2='128' fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='128' x2='152' y2='96' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='96' x2='72' y2='128' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='128' x2='72' y2='96' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")!important}.feeling-button-puzzled:checked{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cpolyline points='80 172 96 152 112 172 128 152 144 172 160 152 176 172' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23fff'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23fff'/%3E%3C/svg%3E")!important}#button-wrapper{display:flex;justify-content:center}#posts-form{margin-bottom:0}.checkbox-container.spoiler-button{display:flex;justify-content:center;margin:1em 0 .5em 0;user-select:none;cursor:pointer}#painting{background:gray;border:1px solid #d3d3d3;image-rendering:pixelated;object-fit:contain;width:600px;margin:1em}.painting-wrapper{position:absolute;display:flex;background:#000000ad;width:100%;height:100vh;justify-content:center;align-items:center;top:0;z-index:100;left:0}#painting-content{width:100%;max-width:800px;height:fit-content;display:flex;background:var(--background-alt);border-radius:1em;flex-direction:column;justify-content:center;align-content:center;align-items:center}#painting-content .tools{display:flex;flex-direction:row;justify-content:center;align-items:center;height:5em;width:100%;max-width:600px}.buttons.eraser,.buttons.pencil{list-style:none;display:flex;padding-left:0;border-radius:.5em;margin:0;flex-wrap:wrap;justify-content:center}.tools .buttons input[type=radio]{width:4em;height:4em;background:red;cursor:pointer;color:var(--text);border:0;font-weight:700;padding:1em;margin:0}.tools .buttons input[type=radio].small{border-radius:1em 0 0 1em}.tools .buttons input[type=radio].large{border-radius:0 1em 1em 0}.tools .buttons input[type=radio]:checked{background:#00f}@media screen and (max-width:1400px){.communities-wrapper{max-width:600px;grid-template-columns:auto auto;grid-row-gap:10px;grid-column-gap:10px}header{align-items:center}header p{display:none}header a{padding:.25em .5em .25em .5em}}@media screen and (max-width:1000px){#main{width:100%;margin-bottom:60px}#news-list-content,.posts-wrapper{max-width:600px;width:90vw}.post-content,.spoiler-overlay{margin-top:.25em;margin-left:2.5em}.user-icon,.user-icon.verified{width:2em;height:2em}.user-icon.verified{border:solid 2px var(--btn)}.post-buttons-wrapper{margin-top:.5em;margin-bottom:-.5em;margin-left:2.5em}header{width:100%;margin:0;background:var(--background);flex-direction:row;justify-content:space-evenly;bottom:0;border-top:1px solid var(--text-secondary);z-index:100}header>a:first-child{display:none}header>a:nth-of-type(2){position:fixed;top:2px;left:4px;border-radius:100%;width:3em;height:3em;padding:0;justify-content:center;z-index:20}header>a>p{display:none}header a{padding:.25em 1em}header svg{scale:.75}header>.selected{background:var(--background-alt);border-radius:1em;font-weight:700;color:var(--theme-light);margin:unset}header>.selected>svg{stroke:var(--theme-light)}#load-more{margin-bottom:1em;max-width:600px;width:90vw}#title{color:var(--text);width:100vw;display:flex;justify-content:center;border-bottom:1px solid var(--text-secondary);padding-top:.5em;padding-bottom:.5em;position:fixed;background:var(--background);margin-top:0;z-index:100}#wrapper{margin-top:4em}#wrapper.bottom{margin-top:0;margin-bottom:1em}.communities-wrapper{max-width:600px;grid-template-columns:auto;grid-row-gap:10px;grid-column-gap:10px}.notifications-list-content{width:90vw;min-height:4em}community-info>.user-icon.verified{width:60px;height:60px}.community-info>.user-icon,community-info>.user-icon{width:64px;height:64px}.community-top{max-width:600px;width:90vw}.info-boxes-wrapper>div{width:100%}.community-info>.user-icon.verified{border:solid 4px var(--btn);width:60px;height:60px}list-content-with-icon-and-text li.reports>*{width:100%;overflow:clip}li.reports .posts-wrapper{margin-left:-1em}li.reports .hover{width:auto;padding:.5em .25em}#message-page{width:95%}.scroll-focus.mii-icon-container{display:none}.header-button{bottom:8%}} \ No newline at end of file +:root{--background:#1b1f3b;--background-alt:#2a2f50;--text:white;--text-secondary:#a1a8d9;--btn:#673db6;--btn-secondary:#333960;--theme:var(--btn);--theme-light:#a185d6;--text-secondary-2:#8990c1;--border:rgba(255, 255, 255, 0.1);--background-alt-alt:#383f6b}button,input[type=button],input[type=submit]{cursor:pointer;background:var(--background-alt-alt);color:var(--text);border:0;border-radius:1em;font-weight:700;padding:1em}a{color:unset}a:hover{cursor:pointer;text-decoration:underline}#title{color:var(--text);display:flex;justify-content:center}#nav-bar{display:flex;background:-webkit-gradient(linear,left top,right top,from(#fff),to(#fff5f5));list-style:none;user-select:none}.badge,body,button{color:var(--text)}.badge{position:absolute;background:var(--btn);padding:3px 8px;border-radius:1em;margin-left:1.25em;display:none;margin-bottom:30px}body{background-color:var(--background);margin:0;font-family:Conv_Poppins-Light,sans-serif}header{display:flex;align-items:flex-start;margin-top:35px;flex-direction:column;position:fixed}a,header a,header>a,header>a:hover{text-decoration:none}header .logo-link,header .logo-link svg{display:block;width:5em}header a{color:var(--text-secondary);padding:.25em 1.5em .25em 1em;border-radius:2em;display:flex;margin:.1em;align-items:center}header a:first-child{padding:.5em 1em}header a:hover,header>.selected{background:var(--background-alt)}header>a>p{padding-left:1em}header>.selected{border-radius:1em;font-weight:700;color:var(--theme-light)}header>.selected>svg{stroke:var(--theme-light)}.mii-icon{width:40px;height:40px;background:#a1a8d9;border-radius:50px}#main{width:95%;max-width:1400px;margin:0 auto;overflow:hidden}.post-meta-wrapper{display:flex;color:var(--text);align-items:center;margin-left:.5em;height:2em;margin-bottom:0;font-size:small}.post-meta-wrapper>h3>a{text-decoration:none;color:var(--text)}.post-meta-wrapper>h3>a:hover{text-decoration:underline}.post-meta-wrapper>h4:last-child{padding-left:.5em;color:var(--text-secondary)}.post-user-info-wrapper{display:flex;height:2em}#wrapper{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center}.posts-wrapper{width:600px;color:var(--text);background:var(--background-alt);margin-bottom:1em;padding:1em;border-radius:1em}.icon-container>img,.user-icon{width:64px;height:64px;border-radius:.5em;background:var(--text-secondary)}.user-icon.verified{border:solid 4px var(--btn);width:60px;height:60px}.verified-badge{background:var(--btn);padding:1px 5px;border-radius:1em;color:var(--text);margin-left:.25em}.painting,.screenshot{border-radius:1em;width:100%}.painting{image-rendering:pixelated}.screenshot{margin-bottom:1em}.post-content{display:flex;flex-direction:column;cursor:pointer}.post-content>h4{margin-top:0;margin-bottom:.5em;font-weight:400;margin-left:.25em;word-wrap:break-word;white-space:pre-wrap}.post-content,.spoiler-overlay{margin-left:74px}.spoiler-overlay>button{width:100%;padding:12px 48px}.post-buttons-wrapper{margin-top:1em;display:flex;justify-content:space-between;user-select:none;margin-left:74px}.post-buttons-wrapper>span{display:flex;flex-direction:row;align-items:center;padding:.5em}.post-buttons-wrapper>span:nth-of-type(2):hover{background:rgba(0,255,0,.25)}.post-buttons-wrapper>span:last-child:hover{background:rgba(0,150,255,.25)}.post-buttons-wrapper>span:hover{cursor:pointer;background:rgba(255,0,0,.25);border-radius:.75em}.post-buttons-wrapper>span>h4{padding-left:.5em;margin:0}.post-buttons-wrapper>span.selected>svg{fill:red;stroke:red}#load-more{width:632px;margin-bottom:1em}#toast,iframe{border-radius:1em}#toast{opacity:0;min-width:250px;margin-left:-141px;background-color:var(--btn);color:var(--text);text-align:center;position:fixed;z-index:10;left:50%;bottom:5em;padding:1ch;transition:all .5s ease}#toast.show{opacity:1}.community-list-wrapper{display:grid;grid-template-areas:"icon main" "icon footer";gap:0;cursor:pointer;background:var(--background-alt);padding:1em;width:90%;border-radius:1em;grid-template-columns:111px 152px}.community-list-icon{width:100px;height:100px;grid-area:icon;margin-right:1em;border-radius:1em;-webkit-border-radius:1em;-moz-border-radius:1em;-ms-border-radius:1em;-o-border-radius:1em}.community-list-title{margin:.5em 0-1em;font-size:2ch}.community-list-followers{margin:.5em 0 0;font-size:1.5ch}.communities-wrapper{display:grid;max-width:900px;grid-template-columns:auto auto auto;grid-row-gap:1em;grid-column-gap:1em}#new{margin-bottom:1em}iframe{width:100%;height:20em;margin-top:1em}.notifications-list-content{background:var(--background-alt);width:600px;min-height:4em;margin:0;display:flex;justify-content:flex-start;align-items:center;border-bottom:2px solid var(--btn-secondary);user-select:none;cursor:pointer;font-size:small}.notifications-list-content:hover{text-decoration:none;background:var(--btn-secondary)}.notifications-list-content:first-of-type{border-top-left-radius:1em;border-top-right-radius:1em}.notifications-list-content:last-of-type{border-bottom-left-radius:1em;border-bottom-right-radius:1em}.unread-badge{padding:.25em;border-radius:1em;margin:1em;background-color:var(--btn)}.community-top{background:var(--background-alt);margin-bottom:1em;padding:1em;border-radius:1em;width:600px;overflow:hidden}.community-info{display:flex}.info-boxes-wrapper{display:flex;justify-content:space-evenly;flex-wrap:wrap}.info-boxes-wrapper>div{background:var(--background-alt-alt);border-radius:1em;display:flex;flex-direction:column;align-items:center;margin:.5em;flex-grow:1}.info-boxes-wrapper>div>h4:first-child{margin:.75em 0 0;color:var(--theme-light);font-size:small;font-weight:bolder}.info-boxes-wrapper>div>h4:last-child{margin:.75em 0;color:var(--text-secondary);font-size:small}.community-title{padding-left:.5em;font-size:larger;padding-top:.5em}.banner{width:110%;margin:-1em}.community-page-follow-button-wrapper{padding:.25em;border:2px solid var(--btn);border-radius:1em;margin:1.5em 0 auto auto;cursor:pointer;height:fit-content}.community-page-follow-button-wrapper.selected,.favorite-button.checked{background:var(--btn)}.community-page-follow-button-wrapper>p,.favorite-button{margin:.25em;color:var(--text)!important}.favorite-button{border:2px solid var(--btn);border-radius:1em;margin:1.5em 0 auto auto;cursor:pointer;height:fit-content;text-decoration:none!important;padding:1ch}.list-content-with-icon-and-text{list-style:none;padding:unset}.list-content-with-icon-and-text li{display:flex;padding:.25em 0;border-bottom:1px solid var(--text-secondary)}.list-content-with-icon-and-text .body{margin-left:1em;width:100%;align-items:center;display:inherit;text-decoration:none}#news-list-content li .text .nick-name{font-weight:700}#news-list-content li .text .link{color:var(--theme-light)}#news-list-content li .text .timestamp{color:#969696;white-space:nowrap}.hover{width:600px;display:inherit;border-radius:1em;padding:1em}.hover:hover{background:var(--background-alt)}.body.messages{flex-direction:column;justify-content:center;align-items:flex-start!important}.body.messages>.text{padding-bottom:.5ch}.report h4,.report p{margin:0 0 5px 0}.list-content-with-icon-and-text li.reports{flex-direction:column}.reports .hover:hover{background:unset}.reports button{margin-bottom:1em}button.report{margin-bottom:1.5em;max-width:630px;width:90vw}#report-post-page{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1em;margin:auto;height:100%;background:0 0}#report-post-page>#report-form{margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0}#report-form,.add-post-page{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1em;max-width:600px;background:var(--background-alt);border-radius:1em;margin-top:4em}.add-post-page-content.report>div{display:flex;justify-items:center;align-items:center;justify-content:center;margin-top:13px}.report .textarea-text{width:100%;height:100px;border-radius:1em;border:none;background:var(--text);padding:10px;margin:1em 0;resize:none}.textarea-menu{padding-left:0;margin:0;border-right:1px solid var(--background-alt-alt)}.textarea-container.textarea-with-menu.active-text{display:flex}.textarea-memo.trigger{background:var(--background);height:200px;display:flex;align-items:center;width:100%;justify-content:center;border-radius:0 20px 20px 0}.add-post-page .textarea-text{width:100%;height:200px;margin:0;padding:1ch;border:none;resize:none;border-radius:0 20px 20px 0;background:#f9f5fb}.report .textarea-text{border-radius:10px;padding:1ch;margin-top:1em}input[type=radio]{-webkit-appearance:none;appearance:none}.textarea-menu-memo>input[type=radio],.textarea-menu-text>input[type=radio]{display:inline-block;width:95px;height:140px;border:0;margin:0;background-repeat:no-repeat;background-position:0 0}.textarea-menu-text>input[type=radio]{border-top-left-radius:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='64' fill='%23000' viewBox='0 0 256 256'%3E%3Cpolyline points='152 192 80 56 8 192' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='20'/%3E%3Cellipse cx='208' cy='166.9' rx='32' ry='28' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cpath d='M184,112.4a34.1,34.1,0,0,1,24-9.5c17.7,0,32,12.5,32,28V192' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cline x1='130.8' y1='152' x2='29.2' y2='152' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3C/svg%3E") no-repeat center center,-webkit-gradient(linear,left top,left bottom,from(#fff),color-stop(.5,#fff),to(#e6e6e6)) 0 0}.textarea-menu-text>input[type=radio]:checked{border-top-left-radius:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpolyline points='152 192 80 56 8 192' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='20'/%3E%3Cellipse cx='208' cy='166.9' rx='32' ry='28' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cpath d='M184,112.4a34.1,34.1,0,0,1,24-9.5c17.7,0,32,12.5,32,28V192' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cline x1='130.8' y1='152' x2='29.2' y2='152' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3C/svg%3E") no-repeat center center,-webkit-gradient(linear,left top,left bottom,from(#866dbe),to(#673db6)) 0 0}.textarea-menu-memo>input[type=radio]{border-bottom-left-radius:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M96,216H48a8,8,0,0,1-8-8V163.3a7.9,7.9,0,0,1,2.3-5.6l120-120a8,8,0,0,1,11.4,0l44.6,44.6a8,8,0,0,1,0,11.4Z' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='136' y1='64' x2='192' y2='120' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpolyline points='216 216 96 216 40.5 160.5' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='164' y1='92' x2='68' y2='188' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E") no-repeat center center,-webkit-gradient(linear,left top,left bottom,from(#fff),color-stop(.5,#fff),to(#e6e6e6)) 0 0}.textarea-menu-memo>input[type=radio]:checked{border-bottom-left-radius:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M96,216H48a8,8,0,0,1-8-8V163.3a7.9,7.9,0,0,1,2.3-5.6l120-120a8,8,0,0,1,11.4,0l44.6,44.6a8,8,0,0,1,0,11.4Z' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='136' y1='64' x2='192' y2='120' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpolyline points='216 216 96 216 40.5 160.5' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='164' y1='92' x2='68' y2='188' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E") no-repeat center center,-webkit-gradient(linear,left top,left bottom,from(#866dbe),to(#673db6)) 0 0}.textarea-menu-text>input:checked~.textarea-menu-memo,.textarea-menu>li>input:checked~.textarea-menu-text{background:-webkit-gradient(linear,left top,left bottom,from(#866dbe),to(#673db6))}.textarea-memo-preview{image-rendering:pixelated;width:360;height:160px;cursor:pointer}.textarea-menu-memo>input[type=radio],.textarea-menu-text>input[type=radio]{display:inline-block;width:60px;height:100px;border:0;margin:0;background-repeat:no-repeat;background-position:0 0;background-size:60%!important;cursor:pointer}.textarea-menu>li{list-style:none;width:60px;height:100px}.textarea-menu-text>input[type=radio]{border-top-left-radius:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23000' viewBox='0 0 256 256'%3E%3Cpolyline points='152 192 80 56 8 192' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='20'/%3E%3Cellipse cx='208' cy='166.9' rx='32' ry='28' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cpath d='M184,112.4a34.1,34.1,0,0,1,24-9.5c17.7,0,32,12.5,32,28V192' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cline x1='130.8' y1='152' x2='29.2' y2='152' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3C/svg%3E") no-repeat center center;background-color:var(--text)}.textarea-menu-text>input[type=radio]:checked{border-top-left-radius:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpolyline points='152 192 80 56 8 192' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='20'/%3E%3Cellipse cx='208' cy='166.9' rx='32' ry='28' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cpath d='M184,112.4a34.1,34.1,0,0,1,24-9.5c17.7,0,32,12.5,32,28V192' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3Cline x1='130.8' y1='152' x2='29.2' y2='152' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3C/svg%3E") no-repeat center center;background-color:var(--btn)}.textarea-menu-memo>input[type=radio]{border-bottom-left-radius:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M96,216H48a8,8,0,0,1-8-8V163.3a7.9,7.9,0,0,1,2.3-5.6l120-120a8,8,0,0,1,11.4,0l44.6,44.6a8,8,0,0,1,0,11.4Z' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='136' y1='64' x2='192' y2='120' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpolyline points='216 216 96 216 40.5 160.5' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='164' y1='92' x2='68' y2='188' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E") no-repeat center center;background-color:var(--text)}.textarea-menu-memo>input[type=radio]:checked{border-bottom-left-radius:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M96,216H48a8,8,0,0,1-8-8V163.3a7.9,7.9,0,0,1,2.3-5.6l120-120a8,8,0,0,1,11.4,0l44.6,44.6a8,8,0,0,1,0,11.4Z' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='136' y1='64' x2='192' y2='120' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpolyline points='216 216 96 216 40.5 160.5' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='164' y1='92' x2='68' y2='188' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E") no-repeat center center;background-color:var(--btn)}.textarea-menu-text>input:checked~.textarea-menu-memo,.textarea-menu>li>input:checked~.textarea-menu-text{background:-webkit-gradient(linear,left top,left bottom,from(#866dbe),to(#673db6))}.textarea-menu-text>input:checked~.textarea-text{display:block}.textarea-menu-memo>input:checked~.textarea-memo{display:block;position:absolute}.textarea-memo-preview{display:block}#add-post-page input[type=submit],#button-wrapper button.primary,#report-post-page input[type=submit]{background:var(--btn);margin:1ch}#add-post-page input[type=button],#button-wrapper button,#report-post-page input[type=button]{background:var(--btn-secondary);margin:1ch}.buttons.tabs{display:flex;justify-content:center}.buttons.tabs>a,.buttons.tabs>button{width:100%;margin:0 1ch;border:1px solid var(--text-secondary);cursor:pointer;border-radius:1em;font-weight:700;padding:.5em 1em;text-decoration:none;text-align:center;text-wrap:nowrap}.buttons.tabs>a.selected,.buttons.tabs>button.selected{background:var(--btn);border-color:transparent}.col{margin:2ch;font-size:larger}.mt-5.text-center{display:flex;justify-content:center}.message-post-list .post{position:relative;padding:10px 0;margin-bottom:20px;margin-top:30px}.message-post-list .post.my-post .mii-icon-container{float:right;margin:0 0 0 10px}.message-post-list .post .mii-icon-container{position:relative;float:left;width:50px;height:50px;margin-right:20px;border-radius:12px;box-shadow:0 3px 10px rgba(0,0,0,.6)}.message-post-list .post .mii-icon{width:50px;height:50px;background:#fff;border-radius:12px}.message-post-list .post.my-post footer{right:0}.message-post-list .post footer{display:block;height:16px;color:var(--text-secondary-2);font-size:16px;position:absolute;bottom:-14px}.message-post-list .post.my-post .post-body{float:right;background:var(--theme);color:#fff}.message-post-list .post .post-body{float:left;position:relative;background:#fff;border-radius:20px;box-shadow:0 3px 10px rgba(0,0,0,.4);padding:15px 20px;color:#000}.message-post-list .post .post-content{word-wrap:break-word;white-space:pre-wrap;margin-bottom:0;margin-left:0;margin-top:0}.message-post-list .post::after,.settings-list-content .settings-list>li:after{content:"";display:block;clear:both}.message-viewer-bubble-sent-memo{width:340px;height:127px}.message-viewer-bubble-sent-screenshot{max-width:500px;max-height:281px;width:100%}.message-post-list .post .post-buttons{margin:10px -20px -15px;border-top:2px solid #938a8a;border-radius:0 0 20px 20px;text-align:right}.message-post-list .post .post-buttons a,.message-post-list .post .post-buttons button{display:inline-block;padding:0 15px;margin:0;border-width:0;border-left:none currentcolor;line-height:50px;font-size:20px;color:#938a8a;box-shadow:inset 2px 0 0#ddd}.header-button{position:fixed;bottom:5%;right:5%;width:60px;height:60px;background:var(--btn-secondary);color:var(--text);font-size:25px;padding:0;z-index:100}.feeling-selector.expression{display:flex;width:100%;align-items:center;flex-wrap:wrap;justify-content:center}.feeling-selector.expression>#mii-face{width:66px;height:66px;margin:0 1ch 1em 0;border-radius:.5em;background:var(--text-secondary)}.feeling-selector.expression .buttons{list-style:none;display:flex;padding-left:0;background:var(--background-alt-alt);border-radius:.5em;margin:0 0 1em 0;flex-wrap:wrap;justify-content:center}.feeling-selector .buttons li{display:inline-block}.feeling-selector .buttons li>input{width:60px;height:60px;appearance:none;background-size:60px!important;background-repeat:no-repeat!important;cursor:pointer}.feeling-button-normal{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cline x1='88' y1='160' x2='168' y2='160' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23846abd'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23846abd' /%3E%3C/svg%3E")!important}.feeling-button-happy{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23846abd'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23846abd'/%3E%3Cpath d='M169.6,152a48.1,48.1,0,0,1-83.2,0' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")!important}.feeling-button-like{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23846abd'/%3E%3Cline x1='152' y1='108' x2='176' y2='108' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpath d='M169.6,152a48.1,48.1,0,0,1-83.2,0' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")!important}.feeling-button-surprised{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cline x1='184' y1='96' x2='152' y2='128' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='128' x2='152' y2='96' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='96' x2='72' y2='128' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='128' x2='72' y2='96' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='128' cy='180' r='12' fill='%23846abd'/%3E%3C/svg%3E")!important}.feeling-button-frustrated{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' stroke='%23846abd' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cpolyline points='80 172 96 152 112 172 128 152 144 172 160 152 176 172' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='96' x2='152' y2='128' fill='%23fff' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='128' x2='152' y2='96' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='96' x2='72' y2='128' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='128' x2='72' y2='96' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")!important}.feeling-button-puzzled{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' stroke='%23fff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cpolyline points='80 172 96 152 112 172 128 152 144 172 160 152 176 172' fill='none' stroke='%23846abd' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23846abd'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23846abd'/%3E%3C/svg%3E")!important}.feeling-button-normal:checked{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cline x1='88' y1='160' x2='168' y2='160' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23fff'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23fff'/%3E%3C/svg%3E")!important}.feeling-button-happy:checked{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23fff'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23fff'/%3E%3Cpath d='M169.6,152a48.1,48.1,0,0,1-83.2,0' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")!important}.feeling-button-like:checked{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23fff'/%3E%3Cline x1='152' y1='108' x2='176' y2='108' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpath d='M169.6,152a48.1,48.1,0,0,1-83.2,0' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")!important}.feeling-button-surprised:checked{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cline x1='184' y1='96' x2='152' y2='128' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='128' x2='152' y2='96' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='96' x2='72' y2='128' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='128' x2='72' y2='96' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='128' cy='180' r='12' fill='%23fff'/%3E%3C/svg%3E")!important}.feeling-button-frustrated:checked{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cpolyline points='80 172 96 152 112 172 128 152 144 172 160 152 176 172' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='96' x2='152' y2='128' fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='184' y1='128' x2='152' y2='96' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='96' x2='72' y2='128' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='104' y1='128' x2='72' y2='96' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E")!important}.feeling-button-puzzled:checked{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23ce80ff' stroke='%23fff' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='96' fill='23ce80ff' stroke='%23ce80ff' stroke-miterlimit='10' stroke-width='16'/%3E%3Cpolyline points='80 172 96 152 112 172 128 152 144 172 160 152 176 172' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Ccircle cx='92' cy='108' r='12' fill='%23fff'/%3E%3Ccircle cx='164' cy='108' r='12' fill='%23fff'/%3E%3C/svg%3E")!important}#button-wrapper{display:flex;justify-content:center}#posts-form{margin-bottom:0}.checkbox-container.spoiler-button{display:flex;justify-content:center;margin:1em 0 .5em 0;user-select:none;cursor:pointer}#painting{background:gray;border:1px solid #d3d3d3;image-rendering:pixelated;object-fit:contain;width:100%;box-sizing:border-box;margin-bottom:1em}.painting-wrapper{position:absolute;display:flex;background:#000000ad;width:100%;height:100vh;justify-content:center;align-items:center;top:0;z-index:100;left:0}#painting-content{width:100%;max-width:800px;height:fit-content;display:flex;background:var(--background-alt);border-radius:1em;flex-direction:column;justify-content:center;align-content:center;align-items:center;padding:1em}#painting-content .tools{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;margin-bottom:1em}.buttons.eraser,.buttons.pencil{list-style:none;display:flex;padding-left:0;border-radius:.5em;margin:0;flex-wrap:wrap;justify-content:center}.tools .buttons input[type=radio]{width:4em;height:4em;background:#efe6ff;cursor:pointer;color:var(--text);border:0;font-weight:700;padding:1em;margin:0;background-repeat:no-repeat!important;background-position:center!important;border-right:1px solid var(--background)}.tools .buttons input[type=radio].small{border-radius:1em 0 0 1em}.tools .buttons input[type=radio].large{border-radius:0 1em 1em 0;border:none}.tools .buttons input[type=radio]:checked{background:var(--btn)}.tools div:last-of-type{display:flex;flex-wrap:nowrap;background:var(--background-alt-alt);padding:1.25ch;border-radius:1em}.buttons.pencil{margin-right:1em}.tools button{width:4em;height:4em;margin:0 1ch 0 0;background:var(--btn)}#painting-content #button-wrapper button{margin:0 1ch;font-size:15px;min-width:10em}input.pencil:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M240,100.68a15.86,15.86,0,0,0-4.69-11.31L166.63,20.68a16,16,0,0,0-22.63,0L115.57,49.11l-58,21.77A16.06,16.06,0,0,0,47.35,83.23L24.11,222.68A8,8,0,0,0,32,232a8.4,8.4,0,0,0,1.32-.11l139.44-23.24a16,16,0,0,0,12.35-10.17l21.77-58L235.31,112A15.87,15.87,0,0,0,240,100.68Zm-69.87,92.19L55.32,212l47.37-47.37a28,28,0,1,0-11.32-11.32L44,200.7,63.13,85.86,118,65.29,190.7,138ZM104,140a12,12,0,1,1,12,12A12,12,0,0,1,104,140Zm96-15.32L131.31,56l24-24L224,100.68Z'%3E%3C/path%3E%3C/svg%3E")!important;background-size:20px!important}input.pencil{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23000' viewBox='0 0 256 256'%3E%3Cpath d='M240,100.68a15.86,15.86,0,0,0-4.69-11.31L166.63,20.68a16,16,0,0,0-22.63,0L115.57,49.11l-58,21.77A16.06,16.06,0,0,0,47.35,83.23L24.11,222.68A8,8,0,0,0,32,232a8.4,8.4,0,0,0,1.32-.11l139.44-23.24a16,16,0,0,0,12.35-10.17l21.77-58L235.31,112A15.87,15.87,0,0,0,240,100.68Zm-69.87,92.19L55.32,212l47.37-47.37a28,28,0,1,0-11.32-11.32L44,200.7,63.13,85.86,118,65.29,190.7,138ZM104,140a12,12,0,1,1,12,12A12,12,0,0,1,104,140Zm96-15.32L131.31,56l24-24L224,100.68Z'%3E%3C/path%3E%3C/svg%3E")!important;background-size:20px!important}input.pencil.medium{background-size:25px!important}input.pencil.large{background-size:30px!important}input.eraser:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M225,80.4,183.6,39a24,24,0,0,0-33.94,0L31,157.66a24,24,0,0,0,0,33.94l30.06,30.06A8,8,0,0,0,66.74,224H216a8,8,0,0,0,0-16h-84.7L225,114.34A24,24,0,0,0,225,80.4ZM108.68,208H70.05L42.33,180.28a8,8,0,0,1,0-11.31L96,115.31,148.69,168Zm105-105L160,156.69,107.31,104,161,50.34a8,8,0,0,1,11.32,0l41.38,41.38a8,8,0,0,1,0,11.31Z'%3E%3C/path%3E%3C/svg%3E")!important;background-size:20px!important}input.eraser{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23000' viewBox='0 0 256 256'%3E%3Cpath d='M225,80.4,183.6,39a24,24,0,0,0-33.94,0L31,157.66a24,24,0,0,0,0,33.94l30.06,30.06A8,8,0,0,0,66.74,224H216a8,8,0,0,0,0-16h-84.7L225,114.34A24,24,0,0,0,225,80.4ZM108.68,208H70.05L42.33,180.28a8,8,0,0,1,0-11.31L96,115.31,148.69,168Zm105-105L160,156.69,107.31,104,161,50.34a8,8,0,0,1,11.32,0l41.38,41.38a8,8,0,0,1,0,11.31Z'%3E%3C/path%3E%3C/svg%3E")!important;background-size:20px!important}input.eraser.medium{background-size:25px!important}input.eraser.large{background-size:30px!important}.tools button{background-repeat:no-repeat;background-position:center;background-size:30px}.tools button.clear{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-50.34-74.34L139.31,152l18.35,18.34a8,8,0,0,1-11.32,11.32L128,163.31l-18.34,18.35a8,8,0,0,1-11.32-11.32L116.69,152,98.34,133.66a8,8,0,0,1,11.32-11.32L128,140.69l18.34-18.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E")!important}.tools button.undo{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M136,80v43.47l36.12,21.67a8,8,0,0,1-8.24,13.72l-40-24A8,8,0,0,1,120,128V80a8,8,0,0,1,16,0Zm-8-48A95.44,95.44,0,0,0,60.08,60.15C52.81,67.51,46.35,74.59,40,82V64a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H72a8,8,0,0,0,0-16H49c7.15-8.42,14.27-16.35,22.39-24.57a80,80,0,1,1,1.66,114.75,8,8,0,1,0-11,11.64A96,96,0,1,0,128,32Z'%3E%3C/path%3E%3C/svg%3E")!important}li.reports .hover{display:flex;user-select:none;cursor:pointer;padding:0;padding-left:2ch}summary::before{content:"►";display:flex;flex-direction:revert;position:absolute;margin-left:-1em}details[open] summary::before{content:"▼"}summary::marker{display:none}summary{list-style:none}summary{display:flex;align-items:center;padding-left:1em}details{display:flex;justify-content:center;align-content:center;flex-direction:column}li.reports .posts-wrapper{margin-top:1ch}li.reports .post-buttons-wrapper{display:none}li.reports .button-spacer{text-align:center}.accounts .hover{padding:0}.accounts .icon{width:40px;height:40px}.accounts button>a{text-wrap:nowrap}#search{margin-top:16px;width:20em;height:2em;border-radius:1em;padding:2ch;border:1px solid var(--background-alt-alt);font-size:1rem;background-color:var(--background-alt);padding:12px;color:var(--text)}.community-page-post-box .buttons.tabs{margin-bottom:1em}@media screen and (max-width:1400px){.communities-wrapper{max-width:600px;grid-template-columns:auto auto;grid-row-gap:10px;grid-column-gap:10px}header{align-items:center}header p{display:none}header a{padding:.25em .5em .25em .5em}}@media screen and (max-width:1000px){#main{width:100%;margin-bottom:60px}#news-list-content,.posts-wrapper{max-width:600px;width:90vw}.post-content,.spoiler-overlay{margin-top:.25em;margin-left:2.5em}.user-icon,.user-icon.verified{width:2em;height:2em}.user-icon.verified{border:solid 2px var(--btn)}.post-buttons-wrapper{margin-top:.5em;margin-bottom:-.5em;margin-left:2.5em}header{width:100%;margin:0;background:var(--background);flex-direction:row;justify-content:space-evenly;bottom:0;border-top:1px solid var(--text-secondary);z-index:100}header>a:first-child{display:none}header>a:nth-of-type(2){position:fixed;top:2px;left:4px;border-radius:100%;width:3em;height:3em;padding:0;justify-content:center;z-index:20}header>a>p{display:none}header a{padding:.25em 1em}header svg{scale:.75}header>.selected{background:var(--background-alt);border-radius:1em;font-weight:700;color:var(--theme-light);margin:unset}header>.selected>svg{stroke:var(--theme-light)}#load-more{margin-bottom:1em;max-width:600px;width:90vw}#title{color:var(--text);width:100vw;display:flex;justify-content:center;border-bottom:1px solid var(--text-secondary);padding-top:.5em;padding-bottom:.5em;position:fixed;background:var(--background);margin-top:0;z-index:100}#wrapper{margin-top:4em}#wrapper.bottom{margin-top:0;margin-bottom:1em}.communities-wrapper{max-width:600px;grid-template-columns:auto;grid-row-gap:10px;grid-column-gap:10px}.notifications-list-content{width:90vw;min-height:4em}community-info>.user-icon.verified{width:60px;height:60px}.community-info>.user-icon,community-info>.user-icon{width:64px;height:64px}.community-top{max-width:600px;width:90vw}.info-boxes-wrapper>div{width:100%}.community-info>.user-icon.verified{border:solid 4px var(--btn);width:60px;height:60px}list-content-with-icon-and-text li.reports>*{width:100%;overflow:clip}li.reports .posts-wrapper{margin-left:0;width:calc(90vw - 2em);max-width:calc(600px - 2em)}li.reports .hover{width:auto;padding:.5em .25em}#message-page{width:95%}.scroll-focus.mii-icon-container{display:none}.header-button{bottom:8%}} \ No newline at end of file diff --git a/src/webfiles/web/edit_community.ejs b/src/webfiles/web/edit_community.ejs index 8ce5827..dc6ad6d 100644 --- a/src/webfiles/web/edit_community.ejs +++ b/src/webfiles/web/edit_community.ejs @@ -54,7 +54,7 @@
Posts Accounts - Communities + Communities