:root{--image-modal-min-height:200px; --start-fade-in-scale:0.95; --image-modal-height:calc((var(--vh, 1vh) * 100) - 50px)} body.t-modal{overflow:hidden; scrollbar-width:none} body.t-post{display:flex; flex-direction:column} body.t-post section.feed, body.t-post #posts-container, body.t-post div.item{display:flex; flex-direction:column; flex:1} body.t-post div.content{flex:1} div.posts-header h1{font-size:22px; text-transform:uppercase; text-align:center; overflow-wrap:break-word; word-wrap:break-word} div#posts-header-description{text-align:center; margin:25px auto; font-size:14px; color:#686868} .post-title{margin:0; padding:0; font-size:21px; font-weight:normal; word-wrap:break-word; overflow-wrap:break-word} .post-title-link{text-decoration:none; color:#404040} #posts-container, #posts-more-container{width:100%} .item.p, .item.a{box-sizing:border-box; position:relative; transition:visibility 0.2s, opacity 0.2s; min-height:40px} .content{min-width:300px; display:flex; flex-direction:column} .post-content, .empty-content, .ad-content{box-sizing:border-box; margin:3px 0; border-radius:5px; border:1px solid #ddd; background-color:#fff; width:100%; flex:1; display:flex; flex-direction:column; min-height:200px} .post-content, .empty-content, .ad-content{} .empty-content-post-feed, .empty-content-comment{display:flex; flex-direction:column} #modal-content .empty-content{margin:0; border-radius:0} .post-content-container{flex:1; display:flex; flex-direction:column} .item.p .content .post-content-container, .item.p .content .empty-content{max-height:100vh; min-height:300px; padding-bottom:3px} .item.a .content .ad-content, .item.a .content .empty-content{min-height:200px} div.post-content button, .item-modal button{cursor:pointer; background-color:transparent; border:none; outline:none; -webkit-tap-highlight-color:transparent; display:flex; align-items:center; justify-content:center; margin:0; padding:0} .box-header, .posts-header, .post-header, .post-body, .post-tags, .post-actions, .post-comments-container{margin:3px 10px} .post-header-top{padding:5px 0; display:flex} .post-body{display:flex; justify-content:center; align-items:center; flex:1; overflow:hidden; position:relative} .post-tags{display:flex; flex-direction:row; align-content:center; align-items:center; gap:6px} .modal-aside .post-tags{flex-wrap:wrap} .post-tags:empty{padding:0; margin:0} div.post-author{flex:1; text-align:left; display:flex; align-items:center; justify-content:flex-start; gap:10px; overflow:hidden} div.author-image{width:28px; height:28px; border-radius:50%; overflow:hidden; display:flex; justify-content:center; align-items:center} div.author-image>a, div.user-image>a, div.user-image>span{text-decoration:none; color:#fff; font-weight:bold; width:100%; height:100%; display:flex; justify-content:center; align-items:center; font-size:13px; text-transform:uppercase} div.author-image>a>img, div.user-image>img, div.user-image>a>img{object-fit:cover; object-position:center} div.author-image>a>svg, div.author-image>a>img, div.user-image>img, div.user-image>a>img{width:100%; height:100%; display:block} div.author-image>a>svg{color:#212121} .author-default-image-0{background-color:#2d7dfc; color:#fff} .author-default-image-1{background-color:#ff6373; color:#fff} .author-default-image-2{background-color:#00ad03; color:#fff} .author-default-image-3{background-color:#ff9d00; color:#fff} .author-default-image-4{background-color:#7a7a7a; color:#fff} .author-default-image-5{background-color:#0075ff; color:#fff} .author-default-image-6{background-color:#955b9b; color:#fff} .author-default-image-7{background-color:#35bd8e; color:#fff} .author-default-image-8{background-color:#74bee8; color:#fff} .author-default-image-9{background-color:#9bae00; color:#fff} div.post-author-details{flex:1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:5px; position:relative} body:not(.t-modal) div.post-body.mask-sensitive{max-height:400px; min-height:400px} .mask-sensitive-overlay{position:absolute; left:0; top:0; z-index:2; width:100%; height:100%; background-color:#424242; color:#fff; display:flex; flex-direction:column; justify-content:space-around; opacity:1; transform:scale(1); transition:opacity 150ms ease, transform 150ms ease} .mask-sensitive-overlay.fade-out{opacity:0; transform:scale(0.98)} .mask-sensitive-top, .mask-sensitive-bottom{margin:10px; height:70px} div.mask-sensitive-content{height:70%; display:flex; align-content:center; justify-content:center; flex-wrap:wrap; align-items:center; flex-direction:column; gap:10px; text-align:center; padding:0 50px} .mask-sensitive-bottom{display:flex; justify-content:flex-end; flex-direction:column; align-content:center; flex-wrap:wrap; align-items:center} div.mask-sensitive-content p{font-size:12px; line-height:22px} .mask-sensitive-title{margin:0; padding:0} div.mask-sensitive-overlay button.mask-sensitive-btn{color:#fff; border:1px solid #cecece; background-color:transparent; padding:5px 10px} div.mask-sensitive-overlay button.mask-sensitive-btn:hover{background-color:transparent; border:1px solid #fff; background-color:#6c6c6c} .mask-sensitive-bottom p{font-size:11px; text-align:center} div.mask-sensitive-overlay div.mask-sensitive-bottom button{border:none; color:#fff; transition:transform 0.15s ease; font-size:13px} div.mask-sensitive-overlay div.mask-sensitive-bottom button:hover{border:none; transform:scale(1.2)} .mask-sensitive-options-container{display:flex; justify-content:center; align-items:center; gap:20px} div.post-comment-right div.post-author-details{display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:7px} div.post-author-details a.post-author-username{font-size:13px; font-weight:bold; text-decoration:none; color:#363636} div.post-author-details a.post-author-username:hover{text-decoration:underline} .date-added{font-size:10px; text-decoration:none; color:#5c5c5c} span.dot-separator{font-size:17px} .img-content-url{display:block; width:100%; text-decoration:none} .img-content{width:100%; height:auto; object-fit:cover; display:block; margin:0 auto; border:1px solid #f0f0f0; min-height:200px} div.post-options, div.post-hide{width:40px; display:flex; align-items:center; justify-content:center; text-align:center} div.post-options button, div.post-hide button{border-radius:50%; object-fit:cover; padding:0; width:32px; height:32px} div.post-options button:hover, div.post-hide button:hover{outline:1px solid #ddd; background-color:#f7f7f7} div.post-hide{width:34px} .blocked-from-user-container{background-color:#fff; box-sizing:border-box; margin:3px 0; padding:10px; border-radius:5px; border:1px solid #ddd; width:100%; flex:1; display:flex; flex-direction:column} .blocked-from-user-header{display:flex; justify-content:space-between; gap:5px; color:#505050} .blocked-from-user-title{flex:1; font-weight:bold; font-size:14px} .blocked-from-user-icon, .blocked-from-user-title, .blocked-from-user-undo{display:flex; justify-content:flex-start; align-items:center} .blocked-from-user-body{font-size:13px; color:#818181} .post-tag{text-decoration:none; color:#616161; font-size:10px; text-transform:uppercase; display:inline-block; border-radius:20px; border:1px solid #ddd; padding:6px 10px 5px 10px} .post-tag:hover{border-color:#8a8a8a; text-decoration:none} body.isMobile .post-tags{white-space:nowrap; overflow-x:scroll} .post-actions{display:flex; align-items:center; margin:10px 15px} div.post-actions-left, div.post-actions-center, div.post-actions-right{width:33%} div.post-actions-left{display:flex; align-items:center; justify-content:flex-start} div.post-actions-center{display:flex; align-items:center; justify-content:center} div.post-actions-right{display:flex; align-items:center; justify-content:flex-end} div.post-rating, div.post-actions-comments, div.post-share{display:flex; justify-content:center; align-items:center} span.post-rating-value{border-radius:20%; display:flex; justify-content:center; align-items:center; padding:5px; font-size:12px; cursor:pointer} span.post-rating-value, span.post-actions-comments-count{color:#808080; font-weight:bold; font-size:12px; text-align:center; display:inline-block; min-width:30px; padding-left:2px; padding-right:2px; margin-left:3px} button.post-rating, button.post-actions-comments, button.post-share-toggle{margin-left:0; margin-right:0; padding-left:0; padding-right:0; width:24px; height:24px} .item.hidden, .item-comment.hidden{visibility:hidden} div.post-content button svg, #modal-content button svg{transition:transform 0.15s ease} body:not(.isMobile) button.post-rating:hover svg.vote-icon-up, body:not(.isMobile) button.comment-rating:hover svg.vote-icon-up{transform:scale(1.1)} body:not(.isMobile) button.post-rating:hover svg.vote-icon-down, body:not(.isMobile) button.comment-rating:hover svg.vote-icon-down{transform:scale(-1.1)} body:not(.isMobile) button.post-actions-comments:hover svg, body:not(.isMobile) button.post-share-toggle:hover svg{transform:scale(1.1)} .upload-status{margin:15px auto; font-size:13px} svg.loader-sircle{margin:auto} .loading-container{flex:1; display:flex; justify-content:center; align-items:center; height:100%} svg.empty-content-loading-icon, svg.loading-content{width:50px; height:50px} #loading-posts{text-align:center; margin:20px 0} #loading-posts.hidden{display:none} .empty-content .fade-bg{animation:fadeBackground 1s infinite alternate} @keyframes fadeBackground{0%{opacity:1} 50%{opacity:0.5} 100%{opacity:1} } .empty-content-action, .empty-content-action-rating, .empty-content-tag, .empty-content-options, .empty-content-username, .empty-content-author-image, .empty-content-header-title{background-color:#f0f0f0} .empty-content-header{padding:0 10px; height:50px; display:flex; align-items:center; gap:10px} .empty-content-author-image{width:30px; height:30px; border-radius:10px} .empty-content-username{width:100px; height:15px; border-radius:10px} .empty-content-options{width:30px; height:5px; border-radius:10px} .empty-content-header-title{margin:10px 10px; width:150px; height:17px; border-radius:10px} .empty-content-tags{margin:10px 0; padding:10px 10px; height:30px; display:flex; gap:10px; justify-content:flex-start; align-items:center} .empty-content-tag{width:70px; height:15px; border-radius:10px} .empty-content-actions{padding:0 10px; height:35px; display:flex; gap:10px; justify-content:space-between; align-items:center} .empty-content-action{width:40px; height:20px; border-radius:10px} .empty-content-action-rating{width:80px; height:20px; border-radius:10px} #modal{display:none; position:fixed; left:0; top:0; width:100%; height:100%; overflow:hidden; background-color:#fff; z-index:999} #modal-header{position:sticky; top:0; border-bottom:1px solid #ddd; padding:0 10px; background-color:#fff; height:50px; display:flex; justify-content:flex-start; align-items:center; z-index:99} #modal-close{color:black; background-color:white; border:none; outline:none; border-radius:50%; cursor:pointer} #modal-close svg{transition:transform 0.3s} #modal-close:hover svg{transform:scale(1.2)} #modal-content{height:100%; max-height:var(--image-modal-height); min-height:var(--image-modal-min-height)} .item-modal{height:100%} .modal-post-content, .empty-content-modal{display:flex; flex-direction:row; height:100%} .modal-body{min-width:350px; flex:1; display:flex; justify-content:center} .modal-aside{display:flex; flex-direction:column; min-width:350px; width:35%} .modal-body .post-body .img-content{width:100%; max-width:700px; height:auto; max-height:var(--image-modal-height); min-height:var(--image-modal-min-height); object-fit:contain; border:none} .modal-body .post-body{padding:0; background-color:#000} .modal-body .post-body, .empty-content .modal-body{border-right:1px solid #f0f0f0} .modal-body .post-body, #modal-content .empty-content .loading-container{min-height:200px} #modal-content{overflow:unset} .modal-aside{overflow:auto} #modal .post-body{margin:0 auto} @keyframes fadeIn{from{opacity:0.2; transform:scale(var(--start-fade-in-scale))} to{opacity:1; transform:scale(1)} } div.empty-content, img.loading-content, #loading-posts{opacity:0; --start-fade-in-scale:1; animation:fadeIn 0.5s ease forwards} .post-content{--start-fade-in-scale:1; animation:fadeIn 0.15s ease forwards} #modal{animation:fadeIn 0.3s ease forwards} #modal:not(.dynamic-loaded){--start-fade-in-scale:1} .user-option-text{display:block; width:100%; text-decoration:none; color:#333333} .user-option-text:hover{text-decoration:none} .post-option, .post-share-option, .post-comment-option, .user-option{cursor:pointer; padding:7px 10px; margin:3px 0; border-radius:5px; text-align:left; font-size:14px; display:flex; justify-content:flex-start; align-items:center; gap:10px} div.post-option:hover, div.post-share-option:hover, div.post-comment-option:hover, div.user-option:hover{background-color:#f5f5f5} div.report-option{text-align:left; font-size:17px; padding:10px; margin:5px 0; cursor:pointer; display:flex} .report-option-title{flex:1} div.report-option:hover{background-color:#f5f5f5} body.isMobile .message-box-header{margin-bottom:20px} .upload-tag-suggests-container{display:flex; gap:5px; flex-wrap:wrap} .upload-tag-suggests{background-color:#ebebeb; border-radius:20px; white-space:nowrap; padding:7px 7px 6px 7px; cursor:pointer; display:flex; align-items:center; gap:3px} .upload-tag-suggests:hover{background-color:#d8d7d7} .upload-tag-suggests-text{font-size:11px; color:#292929; text-transform:uppercase} .upload-title-container, .upload-tag-container, .upload-tag-suggests-container{margin:10px auto} .upload-tag-suggests-container:empty{height:0; margin:0} .upload-title-container, .upload-tag-container{border-radius:8px; border:1px solid #e5e5e5; width:100%} .upload-title-container{display:flex; align-items:center; padding:10px 12px} textarea.upload-title{outline:none; border:none; height:auto; flex:1; word-wrap:break-word; background-color:transparent; color:#000; resize:none; overflow:hidden; padding:0; margin:0; appearance:none; -moz-appearance:none; . -webkit-appearance:none; font-weight:700; font:18px -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, Helvetica, Geneva, sans-serif} .upload-title-counter{padding-left:10px; color:#808080; font-size:17px} #upload-image-container{border-radius:8px; height:300px; width:100%; border:1px dashed #ccc; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; position:relative; overflow:hidden; background-color:#f9f9f9} #upload-image-container.dragover{border-color:#4CAF50; background-color:#e8f5e9} #upload-image-button{padding:10px 20px; z-index:2} #upload-image-preview-container{position:absolute; left:0; top:0; width:100%; height:100%} #upload-image-preview-image{width:100%; height:100%; object-fit:contain} #upload-image-clear-button{position:absolute; top:10px; right:10px; border-radius:50%; width:30px; height:30px} #upload-image-clear-button svg{transition:transform 0.15s} #upload-image-clear-button:hover svg{transform:scale(1.2)} #upload-image-info{color:#808080; font-size:11px; margin:5px auto} #upload-image-err-log{min-height:20px; font-size:13px; margin:5px auto} #upload-image-top-block{min-height:50%; display:flex; align-items:flex-end; flex-direction:column; justify-content:flex-end} .upload-post-button{margin:10px auto; padding:10px 20px; text-transform:uppercase} .item:has(>.content:not(.hidden):empty){display:none} body.t-modal .left, .t-modal .right{display:none} body.t-modal .center{width:100%} .item-modal.deleting, .item.deleting{pointer-events:none; opacity:0.3} @media (max-width:900px){.modal-post-content, .empty-content-modal{flex-direction:column} .modal-post-content>.modal-body{flex:none} .modal-body .post-body, .empty-content .modal-body{border:none} .modal-aside{min-width:300px; width:100%; overflow:unset; flex:1} #modal-content{overflow:auto} } @media (max-width:615px){.post-content, .empty-content, .ad-content, .img-content{border-radius:0; border-left:none; border-right:none} .post-body{padding-left:0; padding-right:0; margin-left:0; margin-right:0; border-left:none; border-right:none} }