From 1bd9146e5e51cd9984dc9a460c99c7f017e6dd6a Mon Sep 17 00:00:00 2001 From: Jemma Poffinbarger Date: Mon, 29 Jul 2024 14:55:18 -0500 Subject: [PATCH] feat: added user page tabs on web --- .../juxt-web/routes/console/userpage.js | 11 +++++-- src/webfiles/web/css/web.css | 31 +++++++++++++++++-- src/webfiles/web/css/web.min.css | 2 +- src/webfiles/web/partials/following_list.ejs | 27 ++++++++++++++++ src/webfiles/web/partials/head.ejs | 2 +- src/webfiles/web/user_page.ejs | 13 ++++++-- 6 files changed, 75 insertions(+), 11 deletions(-) create mode 100644 src/webfiles/web/partials/following_list.ejs diff --git a/src/services/juxt-web/routes/console/userpage.js b/src/services/juxt-web/routes/console/userpage.js index af9fafc..5e0698c 100644 --- a/src/services/juxt-web/routes/console/userpage.js +++ b/src/services/juxt-web/routes/console/userpage.js @@ -281,7 +281,7 @@ async function userRelations(req, res, userID) { if (req.params.type === 'friends') { followers = await SETTINGS.find({ pid: friends }); communities = []; - selection = 2; + selection = 1; } else if (req.params.type === 'followers') { followers = await database.getFollowingUsers(userContent); communities = []; @@ -371,13 +371,18 @@ async function morePosts(req, res, userID) { async function moreYeahPosts(req, res, userID) { let offset = parseInt(req.query.offset); - const parentUserContent = await database.getUserContent(userID); const userContent = await database.getUserContent(req.pid); const communityMap = await util.getCommunityHash(); if (!offset) { offset = 0; } - const likesArray = await userContent.likes.slice().reverse(); + let likesArray; + try { + likesArray = await userContent.likes.slice().reverse(); + } catch (e) { + console.log(e); + likesArray = []; + } const posts = await POST.aggregate([ { $match: { id: { $in: likesArray }, removed: false } }, {$addFields: { diff --git a/src/webfiles/web/css/web.css b/src/webfiles/web/css/web.css index cc967a3..0cb2320 100644 --- a/src/webfiles/web/css/web.css +++ b/src/webfiles/web/css/web.css @@ -794,12 +794,12 @@ input[type="radio"] { .buttons.tabs { display: flex; justify-content: center; + flex-wrap: wrap; } .buttons.tabs > a, .buttons.tabs > button { - width: 100%; - margin: 0 1ch; + margin: 0.2em 1ch; border: 1px solid var(--text-secondary); cursor: pointer; border-radius: 1em; @@ -1016,6 +1016,31 @@ input[type="radio"] { .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; } +.supporter-star.mario>svg { + fill:rgba(255,132,132,.2); + color:#ff8484 +} +.supporter-star.super>svg { + fill:rgba(89,201,165,.3); + color:#59c9a5 +} +.supporter-star.mega>svg { + fill:rgba(202,177,251,.3); + color:#cab1fb +} +.supporter-star.dev>svg { + color:#fff; + fill:url(#rainbow) +} +.supporter-star.admin>svg { + fill:rgba(220,226,27,.3); + color:#dce21b +} +.supporter-star.tester>svg { + fill:rgba(23,212,237,.3); + color:#17d4ed; + -webkit-transform:translate(0,15%) +} #button-wrapper { display: flex; @@ -1430,7 +1455,7 @@ li.reports .button-spacer { } .info-boxes-wrapper > div { - width: 100%; + padding: 0.5em; } .community-info > .user-icon.verified { diff --git a/src/webfiles/web/css/web.min.css b/src/webfiles/web/css/web.min.css index 3942e7d..76fc532 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 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 +: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;flex-wrap:wrap}.buttons.tabs>a,.buttons.tabs>button{margin:.2em 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}.supporter-star.mario>svg{fill:rgba(255,132,132,.2);color:#ff8484}.supporter-star.super>svg{fill:rgba(89,201,165,.3);color:#59c9a5}.supporter-star.mega>svg{fill:rgba(202,177,251,.3);color:#cab1fb}.supporter-star.dev>svg{color:#fff;fill:url(#rainbow)}.supporter-star.admin>svg{fill:rgba(220,226,27,.3);color:#dce21b}.supporter-star.tester>svg{fill:rgba(23,212,237,.3);color:#17d4ed;-webkit-transform:translate(0,15%)}#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{padding:.5em}.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/partials/following_list.ejs b/src/webfiles/web/partials/following_list.ejs new file mode 100644 index 0000000..381a523 --- /dev/null +++ b/src/webfiles/web/partials/following_list.ejs @@ -0,0 +1,27 @@ + diff --git a/src/webfiles/web/partials/head.ejs b/src/webfiles/web/partials/head.ejs index 2bc46a7..7b28af4 100644 --- a/src/webfiles/web/partials/head.ejs +++ b/src/webfiles/web/partials/head.ejs @@ -1,5 +1,5 @@ - + diff --git a/src/webfiles/web/user_page.ejs b/src/webfiles/web/user_page.ejs index df9bdab..1336414 100644 --- a/src/webfiles/web/user_page.ejs +++ b/src/webfiles/web/user_page.ejs @@ -27,7 +27,7 @@

<%= lang.global.user_page %>

<%- include('partials/nav_bar', { selection: -1, pid: pid }); %>
-
+
@@ -43,7 +43,7 @@
<% if (!pnid.deleted && !banned) { %>

- + <%}%>

@@ -131,6 +131,13 @@ <% } %>
+
+ <%= lang.user_page.posts %> + <%= lang.user_page.friends %> + <%= lang.user_page.following %> + <%= lang.user_page.followers %> + <%= lang.global.yeahs %> +
<%- include('partials/' + template, { bundle }); %> <% } %>