From ce26ac8c6b1a02ebbafbb9f54b9b28da8a051f85 Mon Sep 17 00:00:00 2001 From: Jemma Date: Mon, 15 Jan 2024 17:00:50 -0600 Subject: [PATCH] Started implementing drawing on desktop --- src/services/juxt-web/routes/console/posts.js | 2 +- src/webfiles/web/css/web.css | 385 +++++++++++++++++- src/webfiles/web/css/web.min.css | 2 +- src/webfiles/web/images/add-post-no-image.png | Bin 0 -> 12183 bytes src/webfiles/web/js/painting.js | 171 ++++++++ src/webfiles/web/js/web.js | 65 ++- src/webfiles/web/js/web.min.js | 2 +- src/webfiles/web/message_thread.ejs | 43 +- src/webfiles/web/partials/head.ejs | 4 +- src/webfiles/web/partials/nav_bar.ejs | 2 +- src/webfiles/web/partials/new_post.ejs | 69 ++++ src/webfiles/web/post.ejs | 33 ++ 12 files changed, 760 insertions(+), 18 deletions(-) create mode 100644 src/webfiles/web/images/add-post-no-image.png create mode 100644 src/webfiles/web/js/painting.js create mode 100644 src/webfiles/web/partials/new_post.ejs diff --git a/src/services/juxt-web/routes/console/posts.js b/src/services/juxt-web/routes/console/posts.js index c4d300f..9c5a1aa 100644 --- a/src/services/juxt-web/routes/console/posts.js +++ b/src/services/juxt-web/routes/console/posts.js @@ -243,7 +243,7 @@ async function newPost(req, res) { if (body) { body = req.body.body.replace(/[^A-Za-z\d\s-_!@#$%^&*(){}‛¨ƒºª«»“”„¿¡←→↑↓√§¶†‡¦–—⇒⇔¤¢€£¥™©®+×÷=±∞ˇ˘˙¸˛˜′″µ°¹²³♭♪•…¬¯‰¼½¾♡♥●◆■▲▼☆★♀♂,./?;:'"\\<>]/g, ''); } - if (body.length > 280) { + if (body.length > 280 && !req.moderator) { body = body.substring(0, 280); } const document = { diff --git a/src/webfiles/web/css/web.css b/src/webfiles/web/css/web.css index 6ae99fb..620ea21 100644 --- a/src/webfiles/web/css/web.css +++ b/src/webfiles/web/css/web.css @@ -21,7 +21,7 @@ input[type="submit"] { border: 0; border-radius: 1em; font-weight: 700; - padding: 1em + padding: 1em; } a { @@ -565,7 +565,7 @@ button.report { padding: 1em } -#report-form { +#report-form, .add-post-page { display: flex; flex-direction: column; justify-content: center; @@ -596,12 +596,139 @@ button.report { resize: none } -#report-post-page input[type=submit] { - background: var(--btn) + +.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; + 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; } -#report-post-page input[type=button] { - background: var(--btn-secondary) +#report-post-page input[type=button], +#add-post-page input[type=button], +#button-wrapper button { + background: var(--btn-secondary); + margin: 1ch; } .buttons.tabs { @@ -755,6 +882,252 @@ button.report { 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 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); + } + + .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; +} + +/* End of painting stuff */ + @media screen and (max-width: 1400px) { .communities-wrapper { max-width: 600px; diff --git a/src/webfiles/web/css/web.min.css b/src/webfiles/web/css/web.min.css index 8554e06..8df8318 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{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}#report-post-page input[type=submit]{background:var(--btn)}#report-post-page input[type=button]{background:var(--btn-secondary)}.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}@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:10%}} \ 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 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 diff --git a/src/webfiles/web/images/add-post-no-image.png b/src/webfiles/web/images/add-post-no-image.png new file mode 100644 index 0000000000000000000000000000000000000000..c4348a17e12950521eb8f03fa81bea060f44fb96 GIT binary patch literal 12183 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 literal 0 HcmV?d00001 diff --git a/src/webfiles/web/js/painting.js b/src/webfiles/web/js/painting.js new file mode 100644 index 0000000..94b7875 --- /dev/null +++ b/src/webfiles/web/js/painting.js @@ -0,0 +1,171 @@ +/*eslint-env browser*/ +/*eslint no-var: 'off'*/ +/*eslint @typescript-eslint/explicit-function-return-type: 'off'*/ +const c = document.getElementById('painting'); +const ctx = c.getContext('2d'); + +let scale = c.getBoundingClientRect().width / 320; +let isPainting = false; +let currentPen = drawPen1; +let oldCursorPosition = null; +let penColor = '#000'; + +clearCanvas(); + +ctx.imageSmoothingEnabled = false; + +function drawPen1(ctx, x, y, style) { + ctx.fillStyle = style; + ctx.fillRect(x, y, 1, 1); +} + +function drawPen2(ctx, x, y, style) { + ctx.fillStyle = style; + ctx.fillRect(x - 1, y, 3, 1); + ctx.fillRect(x, y - 1, 1, 3); +} + +function drawPen3(ctx, x, y, style) { + ctx.fillStyle = style; + ctx.fillRect(x - 3, y - 3, 7, 7); + ctx.fillRect(x - 4, y - 1, 9, 3); + ctx.fillRect(x - 1, y - 4, 3, 9); +} + +function clearCanvas() { + ctx.clearRect(0, 0, c.width, c.height); + ctx.fillStyle = '#fff'; + ctx.fillRect(0, 0, 320, 120); +} + +function setPen(number) { + setTool(number, '#000'); +} + +function setEraser(number) { + setTool(number, '#fff'); +} + +function setTool(number, color) { + penColor = color; + switch (number) { + case 0: + currentPen = drawPen1; + break; + case 1: + currentPen = drawPen2; + break; + case 2: + currentPen = drawPen3; + break; + } +} + +function getCursorPosition(e) { + const paintingBounds = c.getBoundingClientRect(); + let currentPosition = { x: 0, y: 0 }; + + if (e.type.indexOf('touch') !== -1) { + currentPosition.x = e.touches[0].clientX; + currentPosition.y = e.touches[0].clientY; + } else { + currentPosition.x = e.clientX; + currentPosition.y = e.clientY; + } + + return { + x: Math.round((currentPosition.x - paintingBounds.left) / scale) - 2, + y: Math.round((currentPosition.y - paintingBounds.top) / scale) - 2, + }; +} + +function draw(e) { + if (!isPainting) { + return; + } + + const currentCursorPosition = getCursorPosition(e); + + if (!currentCursorPosition) { + return; + } + + if (oldCursorPosition === null) { + oldCursorPosition = getCursorPosition(e); + } + + const points = calcStraightLine(currentCursorPosition, oldCursorPosition); + + for (const point of points) { + currentPen(ctx, point.x, point.y, penColor); + } + + oldCursorPosition = getCursorPosition(e); +} + +function calcStraightLine(startCoordinates, endCoordinates) { + const coordinatesArray = new Array(); + // Translate coordinates + let x1 = startCoordinates.x; + let y1 = startCoordinates.y; + const x2 = endCoordinates.x; + const y2 = endCoordinates.y; + + if (isNaN(x1) || isNaN(y1) || isNaN(x2) || isNaN(y2)) { + return; + } + + // Define differences and error check + const dx = Math.abs(x2 - x1); + const dy = Math.abs(y2 - y1); + const sx = x1 < x2 ? 1 : -1; + const sy = y1 < y2 ? 1 : -1; + let err = dx - dy; + // Set first coordinates + coordinatesArray.push({ x: x1, y: y1 }); + // Main loop + while (!(x1 == x2 && y1 == y2)) { + const e2 = err << 1; + if (e2 > -dy) { + err -= dy; + x1 += sx; + } + if (e2 < dx) { + err += dx; + y1 += sy; + } + // Set coordinates + coordinatesArray.push({ x: x1, y: y1 }); + } + // Return the result + return coordinatesArray; +} + +c.addEventListener('mousedown', (e) => { + oldCursorPosition = null; + isPainting = true; + draw(e); +}); + +c.addEventListener( + 'touchstart', + (e) => { + oldCursorPosition = null; + isPainting = true; + draw(e); + }, + { passive: false } +); + +c.addEventListener('mouseup', (e) => { + isPainting = false; + oldCursorPosition = null; +}); + +c.addEventListener('touchend', (e) => { + isPainting = false; + oldCursorPosition = null; +}); + +c.addEventListener('mousemove', draw); +c.addEventListener('touchmove', draw); diff --git a/src/webfiles/web/js/web.js b/src/webfiles/web/js/web.js index d4e7a01..b553597 100644 --- a/src/webfiles/web/js/web.js +++ b/src/webfiles/web/js/web.js @@ -1,3 +1,6 @@ +/*eslint-env browser*/ +/*eslint no-var: "off"*/ +/*eslint @typescript-eslint/explicit-function-return-type: "off"*/ let pjax; setInterval(checkForUpdates, 30000); @@ -144,12 +147,12 @@ function initPostModules() { document.getElementById(hide).style.display = 'none'; document.getElementById(show).style.display = ''; if (header === 'true') { - document.getElementById('header').style.display = 'block'; + document.getElementById('title').style.display = ''; } else { - document.getElementById('header').style.display = 'none'; + document.getElementById('title').style.display = 'none'; } if (menu === 'true') { - document.getElementById('nav-menu').style.display = 'block'; + document.getElementById('nav-menu').style.display = ''; } else { document.getElementById('nav-menu').style.display = 'none'; } @@ -171,7 +174,6 @@ function initPostEmotion() { } function initNewPost() { initPostEmotion(); - initScreenShots(); } function initSpoilers() { const els = document.querySelectorAll('button[data-post-id]'); @@ -303,7 +305,7 @@ function GET(url, callback) { } window.onscroll = function(ev) { - if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) { + if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight && document.getElementById('load-more')) { document.getElementById('load-more').click(); } }; @@ -344,4 +346,57 @@ function reportPost(post) { formID.value = id; console.log(id.replace(/(\d{3})(\d{4})(\d{3})(\d{4})(\d{3})(\d{4})/, "$1-$2-$3-$4-$5-$6")); button.click(); +} + +function openText() { + const textArea = document.getElementById('new-post-text'); + const paintingArea = document.getElementById('new-post-memo'); + const paintingOverlay = document.getElementById('painting-wrapper'); + + if (!textArea || !paintingArea || !paintingOverlay) { + return; + } + + textArea.style.display = ''; + paintingArea.style.display = 'none'; + paintingOverlay.style.display = 'none'; +} + +function newPainting(clear) { + const textArea = document.getElementById('new-post-text'); + const paintingArea = document.getElementById('new-post-memo'); + const paintingOverlay = document.getElementById('painting-wrapper'); + const c = document.getElementById('painting'); + + if (!textArea || !paintingArea || !paintingOverlay) { + return; + } + + if (clear) { + clearCanvas(); + } + + textArea.style.display = 'none'; + paintingArea.style.display = 'flex'; + paintingOverlay.style.display = ''; + scale = c.getBoundingClientRect().width / 320; + +} + +function closePainting(save) { + const paintingArea = document.getElementById('new-post-memo'); + const paintingOverlay = document.getElementById('painting-wrapper'); + const memo = document.getElementById('memo'); + const c = document.getElementById('painting'); + + if (!paintingOverlay || !paintingArea || !memo) { + return; + } + + if (save) { + memo.src = c.toDataURL(); + } + + paintingOverlay.style.display = 'none'; + } \ No newline at end of file diff --git a/src/webfiles/web/js/web.min.js b/src/webfiles/web/js/web.min.js index a622c02..23f64b9 100644 --- a/src/webfiles/web/js/web.min.js +++ b/src/webfiles/web/js/web.min.js @@ -1 +1 @@ -function initNavBar(){const e=document.querySelectorAll("#nav-menu > li");if(e)for(let t=0;t0&&e.message_count<99?(t.innerHTML=e.message_count,t.style.display="unset"):e.message_count>=99?(t.innerHTML="99+",t.style.display="unset"):(t.innerHTML="",t.style.display="none"),e.notification_count>0&&e.notification_count<99?(n.innerHTML=e.notification_count,n.style.display="unset"):e.notification_count>=99?(n.innerHTML="99+",n.style.display="unset"):(n.innerHTML="",n.style.display="none")}},e.open("GET","/notifications.json",!0),e.send()}function POST(e,t,n){const o=new XMLHttpRequest;o.onreadystatechange=function(){if(4===this.readyState)return n(this)},o.open("POST",e,!0),o.setRequestHeader("Content-type","application/x-www-form-urlencoded"),o.send(t)}function GET(e,t){const n=new XMLHttpRequest;n.onreadystatechange=function(){if(4===this.readyState)return t(this)},n.open("GET",e,!0),n.send()}function copyToClipboard(e){const t=document.getElementsByTagName("header")[0].appendChild(document.createElement("input"));t.value=e,t.focus(),t.select(),document.execCommand("copy"),t.parentNode.removeChild(t),Toast("Copied to clipboard.")}function Toast(e){const t=document.getElementById("toast");t.innerText=e,t.className="show",setTimeout(function(){t.className=t.className.replace("show","")},3e3)}function downloadURI(e,t){const n=document.createElement("a");n.download=t,n.href=e,document.body.appendChild(n),n.click(),document.body.removeChild(n),delete n}function reportPost(e){const t=e.getAttribute("data-post"),n=document.getElementById("report-launcher"),o=document.getElementById("report-form"),s=document.getElementById("report-post-id");t&&n&&o&&s&&(o.action="/posts/"+t+"/report",s.value=t,console.log(t.replace(/(\d{3})(\d{4})(\d{3})(\d{4})(\d{3})(\d{4})/,"$1-$2-$3-$4-$5-$6")),n.click())}let pjax;setInterval(checkForUpdates,3e4),console.debug("Document initialized:"+window.location.href),document.addEventListener("pjax:send",function(){console.debug("Event: pjax:send",arguments)}),document.addEventListener("pjax:complete",function(){console.debug("Event: pjax:complete",arguments)}),document.addEventListener("pjax:error",function(e){Toast("Error: Unable to load element. \nPlease send the error code and what you were doing in #support"),console.debug(e)}),document.addEventListener("pjax:success",function(){console.debug("Event: pjax:success",arguments),initAll()}),document.addEventListener("DOMContentLoaded",function(){pjax=new Pjax({elements:"a[data-pjax]",selectors:["title","#body"],switches:{"#nav-menu":Pjax.switches.replaceNode,".tab-body":Pjax.switches.replaceNode}}),console.debug("Pjax initialized.",pjax),initAll()}),window.onscroll=function(e){window.innerHeight+window.scrollY>=document.body.scrollHeight&&document.getElementById("load-more").click()}; \ No newline at end of file +function initNavBar(){const e=document.querySelectorAll("#nav-menu > li");if(e)for(let t=0;t0&&e.message_count<99?(t.innerHTML=e.message_count,t.style.display="unset"):e.message_count>=99?(t.innerHTML="99+",t.style.display="unset"):(t.innerHTML="",t.style.display="none"),e.notification_count>0&&e.notification_count<99?(n.innerHTML=e.notification_count,n.style.display="unset"):e.notification_count>=99?(n.innerHTML="99+",n.style.display="unset"):(n.innerHTML="",n.style.display="none")}},e.open("GET","/notifications.json",!0),e.send()}function POST(e,t,n){const o=new XMLHttpRequest;o.onreadystatechange=function(){if(4===this.readyState)return n(this)},o.open("POST",e,!0),o.setRequestHeader("Content-type","application/x-www-form-urlencoded"),o.send(t)}function GET(e,t){const n=new XMLHttpRequest;n.onreadystatechange=function(){if(4===this.readyState)return t(this)},n.open("GET",e,!0),n.send()}function copyToClipboard(e){const t=document.getElementsByTagName("header")[0].appendChild(document.createElement("input"));t.value=e,t.focus(),t.select(),document.execCommand("copy"),t.parentNode.removeChild(t),Toast("Copied to clipboard.")}function Toast(e){const t=document.getElementById("toast");t.innerText=e,t.className="show",setTimeout(function(){t.className=t.className.replace("show","")},3e3)}function downloadURI(e,t){const n=document.createElement("a");n.download=t,n.href=e,document.body.appendChild(n),n.click(),document.body.removeChild(n),delete n}function reportPost(e){const t=e.getAttribute("data-post"),n=document.getElementById("report-launcher"),o=document.getElementById("report-form"),s=document.getElementById("report-post-id");t&&n&&o&&s&&(o.action="/posts/"+t+"/report",s.value=t,console.log(t.replace(/(\d{3})(\d{4})(\d{3})(\d{4})(\d{3})(\d{4})/,"$1-$2-$3-$4-$5-$6")),n.click())}function newPainting(e){const t=document.getElementById("new-post-text"),n=document.getElementById("new-post-memo");t&&n&&(t.style.display="none",n.style.display="flex")}let pjax;setInterval(checkForUpdates,3e4),console.debug("Document initialized:"+window.location.href),document.addEventListener("pjax:send",function(){console.debug("Event: pjax:send",arguments)}),document.addEventListener("pjax:complete",function(){console.debug("Event: pjax:complete",arguments)}),document.addEventListener("pjax:error",function(e){Toast("Error: Unable to load element. \nPlease send the error code and what you were doing in #support"),console.debug(e)}),document.addEventListener("pjax:success",function(){console.debug("Event: pjax:success",arguments),initAll()}),document.addEventListener("DOMContentLoaded",function(){pjax=new Pjax({elements:"a[data-pjax]",selectors:["title","#body"],switches:{"#nav-menu":Pjax.switches.replaceNode,".tab-body":Pjax.switches.replaceNode}}),console.debug("Pjax initialized.",pjax),initAll()}),window.onscroll=function(e){window.innerHeight+window.scrollY>=document.body.scrollHeight&&document.getElementById("load-more")&&document.getElementById("load-more").click()}; \ No newline at end of file diff --git a/src/webfiles/web/message_thread.ejs b/src/webfiles/web/message_thread.ejs index 06add31..b8393dc 100644 --- a/src/webfiles/web/message_thread.ejs +++ b/src/webfiles/web/message_thread.ejs @@ -9,7 +9,7 @@
diff --git a/src/webfiles/web/partials/head.ejs b/src/webfiles/web/partials/head.ejs index 5bd82dc..0a918e2 100644 --- a/src/webfiles/web/partials/head.ejs +++ b/src/webfiles/web/partials/head.ejs @@ -1,7 +1,7 @@ - + - + diff --git a/src/webfiles/web/partials/nav_bar.ejs b/src/webfiles/web/partials/nav_bar.ejs index 5130081..6533be1 100644 --- a/src/webfiles/web/partials/nav_bar.ejs +++ b/src/webfiles/web/partials/nav_bar.ejs @@ -1,4 +1,4 @@ -
+