:root { color-scheme: light dark; supported-color-schemes: light dark; } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } body { width: 960px; margin: 0px auto 40px; font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-y: scroll; } a { text-decoration: none; color: rgb(0, 0, 255); } a:hover { text-decoration: underline; } a:visited { color: rgb(0, 0, 255); } #github { position: fixed; bottom: 10px; right: 10px; z-index: 10; } #github img { width: 20px; opacity: 0.4; } #github a:hover img { opacity: 0.6; } #search { visibility: hidden; position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 5%; } #search form { border: 2px solid hsl(210, 100%, 80%); border-radius: 10px; padding: 15px 20px; margin-left: 50px; } #search input { font-size: 16pt; width: 600px; border: 0; margin-left: 8px; } #search input:focus { outline: none; } #account { position: fixed; top: 10px; left: 10px; line-height: 24px; z-index: 20; user-select: none; -webkit-user-select: none; } #account i { opacity: 0.4; } #account i:hover { cursor: pointer; opacity: 0.6; } #account img.avatar { width: 24px; height: 24px; border-radius: 13px; box-shadow: 0px 0px 2px black; } #account_menu { position: fixed; visibility: hidden; top: 5px; left: 5px; padding-top: 30px; z-index: 15; background: hsl(210, 33.33%, 94.0%); border: 1px solid #ccc; border-radius: 5px; user-select: none; -webkit-user-select: none; } #account_menu ul { list-style-type: none; margin: 0px 0px 10px; padding: 6px 11px; } #account_menu li a[data-action] { display: inline-block; color: #333; font-size: 11pt; border: 1px solid #bbb; padding: 3px 5px; margin-top: 8px; border-radius: 5px; background-color: hsla(210, 100%, 4%, 0.12); } #account_menu li a[data-action]:hover { background-color: hsla(210, 100%, 4%, 0.2); text-decoration: none; } #account_menu li:not(.link) + li.link { margin-top: 16px; padding-top: 10px; border-top: 1px solid #ccc; } #account_menu li.link { margin-top: 8px; margin-left: 2px; } #account_menu li.link a { font-size: 11pt; color: #333; } #account_menu li .check { display: none; } .dialog { visibility: hidden; position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 5%; z-index: 10; background-color: rgba(240, 240, 240, 0.4); } .dialog.expanded { padding-bottom: 0; } .dialog form { position: relative; border: 2px solid hsl(210, 100%, 85%); background-color: hsl(210, 100%, 98%); border-radius: 10px; padding: 15px 25px; } .dialog .close { position: absolute; top: 5px; right: 5px; color: hsl(210, 100%, 75%); opacity: 0.6; } .dialog .close:hover { color: hsl(210, 100%, 65%); opacity: 1.0; } .dialog p { text-align: center; line-height: 125%; } .dialog h2 { font-size: 13pt; font-weight: 600; text-align: center; margin-bottom: 25px; padding-right: 10px; } .dialog p.submit { margin-top: 25px; } .dialog p.info { font-size: 9pt; } .dialog p.info a { color: #666; } .dialog input[type="text"], .dialog input[type="password"] { width: 200px; font-size: 11pt; border: 1px solid #d6d6d6; border-radius: 4px; padding: 5px 6px; margin: 0px 15px; } .dialog input[type="submit"] { width: 150px; font-size: 11pt; border: 1px solid hsl(210, 90%, 85%); background-color: hsl(210, 100%, 92%); border-radius: 4px; padding: 5px 6px; } .dialog input[type="submit"]:hover { background-color: hsl(210, 100%, 90%); border: 1px solid hsl(210, 90%, 82%); } .dialog input[type="submit"]:active { background-color: hsl(210, 100%, 87%); border: 1px solid hsl(210, 90%, 80%); } #login #cloudy { color: hsl(210, 60%, 75%); margin: 14px 0px; display: none; } #login .info-box { display: none; border: 1px solid hsl(45, 100%, 60%); background-color: hsl(50, 100%, 96%); width: 360px; font-size: 11pt; border-radius: 6px; } #login.expanded .info-box { display: block; } #login .info-box p { margin: 15px 15px; text-align: left; } #biohazard_dialog form { width: 400px; } #biohazard_dialog p.submit { margin-top: 40px; margin-bottom: 20px; } #biohazard_dialog input[type="submit"] { width: 180px; margin-left: 5px; margin-right: 5px; } #loader { display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 36px; height: 36px; } #loader img { width: 36px; animation: rotation 3s infinite linear; } #thread { padding-top: 1px; } #thread.overlay { filter: blur(8px); } #thread header h2 { margin-left: 20px; margin-top: 40px; margin-bottom: 50px; font-size: 18pt; } #thread.quotes .post { padding-bottom: 5px; } #thread.hashtag .post { padding-bottom: 10px; border-bottom: 1px solid #ddd; } #thread.notifications .post { padding-bottom: 4px; border-bottom: 1px solid #ddd; margin-top: 24px; } #thread.notifications .back { margin-left: 22px; margin-bottom: -12px; margin-top: 15px; } #thread.notifications .back, #thread.notifications .back a { font-size: 10pt; } #thread.notifications .back i { font-size: 9pt; margin-right: 2px; } #thread + p.note { margin-top: 30px; margin-left: 15px; font-size: 11pt; color: #666; } .back, .back a { font-size: 11pt; color: #666; } .back i { margin-right: 2px; } p.back i { font-size: 10pt; color: #888; margin-right: 5px; } .post { position: relative; padding-left: 21px; margin-top: 30px; } .post .edge { position: absolute; left: -2px; top: 30px; bottom: 0px; width: 6px; } .post .edge .line { position: absolute; left: 2px; top: 0px; bottom: 0px; border-left: 1px solid #aaa; } .post .edge:hover .line { border-left: 2px solid #888; } .post .plus { position: absolute; top: 8px; left: -6px; width: 14px; } .post.collapsed .line { display: none; } .post.collapsed .content { display: none; } .post.flat { padding-left: 0px; margin-top: 25px; } .post.flat > .margin { display: none; } .post .avatar { width: 32px; height: 32px; border-radius: 16px; vertical-align: middle; margin-bottom: 3px; margin-right: 8px; } .post .missing { color: #aaa; background-color: #eee; border-radius: 16px; vertical-align: middle; margin-right: 8px; } .post.muted .missing { color: #bbb; } .post h2 { font-size: 12pt; margin-bottom: 0; } .post h2 .handle { color: #888; font-weight: normal; font-size: 11pt; vertical-align: text-top; } .post h2 .separator, .post .blocked-header .separator, .blocked-header .separator { color: #888; font-weight: normal; font-size: 11pt; vertical-align: text-top; } .post h2 .time { color: #666; font-weight: normal; font-size: 10pt; vertical-align: text-top; } .post h2 .action, .post .blocked-header .action, .blocked-header .action { color: #888; font-weight: normal; font-size: 10pt; vertical-align: text-top; } .post h2 .action:hover, .post .blocked-header .action:hover, .blocked-header .action:hover { color: #444; } .post h2 img.mastodon { width: 15px; position: relative; top: 2px; margin-left: 3px; } .post p { margin-top: 10px; } .post div.body p + p { margin-top: 18px; } .post .body .highlight { background-color: rgba(255, 255, 0, 0.75); padding: 1px 2px; margin-left: -1px; margin-right: -1px; } .post .quote-embed { border: 1px solid #ddd; border-radius: 8px; background-color: #fbfcfd; margin-top: 25px; margin-bottom: 15px; margin-left: 0px; max-width: 800px; } .post .quote-embed .post { margin-top: 16px; padding-left: 16px; padding-right: 16px; padding-bottom: 5px; } .post .quote-embed .placeholder { font-style: italic; font-size: 11pt; color: #888; } .post-quotes .post-quote .quote-embed { display: none; } .post-quotes .post-quote p.stats { display: none; } .post .image-alt { font-size: 11pt; color: #666; margin-bottom: 20px; } .post .image-alt summary { font-size: 11pt; color: #666; margin-bottom: 5px; user-select: none; -webkit-user-select: none; cursor: default; } .post.blocked p, .post.blocked a { font-size: 11pt; color: #666; } .post.blocked .blocked-header i { margin-right: 2px; } .post.muted > h2, .post.muted > .content > details > p, .post.muted > .content > details summary { opacity: 0.3; } .post.muted > h2 { font-weight: 600; } .post.muted details { margin-top: 12px; margin-bottom: 10px; } .post.muted details summary { font-size: 10pt; user-select: none; -webkit-user-select: none; cursor: default; } .post a.link-card { display: block; position: relative; max-width: 500px; margin-bottom: 12px; } .post a.link-card:hover { text-decoration: none; } .post a.link-card > div { background-color: #fcfcfd; border: 1px solid #d8d8d8; border-radius: 8px; padding: 11px 15px; } .post a.link-card:hover > div { background-color: #f6f7f8; border: 1px solid #c8c8c8; } .post a.link-card > div:not(:has(p.description)) { padding-bottom: 14px; } .post a.link-card p.domain { color: #888; font-size: 10pt; margin-top: 1px; margin-bottom: 5px; } .post a.link-card h2 { color: #333; margin-top: 8px; } .post a.link-card p.description { color: #666; font-size: 11pt; margin-top: 8px; margin-bottom: 4px; line-height: 135%; } .post a.link-card.record > div:has(.avatar) { padding-left: 65px; } .post a.link-card.record h2 { margin-top: 3px; } .post a.link-card.record .handle { color: #666; margin-left: 5px; } .post a.link-card.record .avatar { width: 36px; height: 36px; border: 1px solid #ddd; border-radius: 6px; position: absolute; top: 15px; left: 15px; } .post a.link-card.record .stats { margin-top: 9px; margin-bottom: 1px; } .post a.link-card.record .stats i.fa-heart:hover { color: #aaa; } .post a.fedi-link { display: inline-block; margin-bottom: 6px; margin-top: 2px; } .post a.fedi-link:hover { text-decoration: none; } .post a.fedi-link > div { border: 1px solid #d0d0d0; border-radius: 8px; padding: 5px 9px; color: #555; font-size: 10pt; } .post a.fedi-link i { margin-right: 3px; } .post a.fedi-link:hover > div { background-color: #f6f7f8; border: 1px solid #c8c8c8; } .post div.gif img { user-select: none; -webkit-user-select: none; } .post div.gif img.static { opacity: 0.75; } .post .stats { font-size: 10pt; color: #666; } .post .stats a { color: #666; text-decoration: none; } .post .stats a:hover { text-decoration: underline; } .post .stats i { font-size: 9pt; color: #888; } .post .stats i.fa-heart { color: #aaa; } .post .stats i.fa-heart.liked { color: #e03030; } .post .stats i.fa-heart:hover { color: #888; cursor: pointer; } .post .stats i.fa-heart.liked:hover { color: #c02020; } .post .stats span { margin-right: 10px; } .post .stats .blocked-info { color: #a02020; font-weight: bold; margin-left: 5px; } .post img.loader { width: 24px; animation: rotation 3s infinite linear; margin-top: 5px; } .post .tags a { background-color: hsl(210, 90%, 97%); border: 1px solid hsl(215, 90%, 85%); border-radius: 6px; padding: 3px 7px; margin-right: 5px; font-size: 10pt; color: #333; } .post .tags a:hover { text-decoration: none; background-color: hsl(210, 90%, 93%); } .post p.hidden-replies { margin-top: 20px; font-size: 11pt; } .post p.hidden-replies a { font-size: 12pt; color: saddlebrown; } .post p.missing-replies-info { font-size: 11pt; color: darkred; margin-top: 25px; } #posting_stats_page { display: none; } #posting_stats_page input[type="radio"] { position: relative; top: -1px; margin-left: 5px; } #posting_stats_page input[type="radio"] + label { user-select: none; -webkit-user-select: none; } #posting_stats_page input[type="radio"]:disabled + label { color: #999; } #posting_stats_page input[type="range"] { width: 250px; vertical-align: middle; } #posting_stats_page input[type="submit"] { font-size: 12pt; margin: 5px 0px; padding: 5px 10px; } #posting_stats_page select { font-size: 12pt; margin-left: 5px; } #posting_stats_page progress { width: 300px; margin-left: 10px; vertical-align: middle; display: none; } #posting_stats_page .list-choice { display: none; } #posting_stats_page .user-choice { display: none; position: relative; } #posting_stats_page .user-choice input { width: 260px; font-size: 11pt; } #posting_stats_page .user-choice .autocomplete { display: none; position: absolute; left: 0; top: 0; margin-top: 4px; width: 350px; max-height: 250px; overflow-y: auto; background-color: white; border: 1px solid #ccc; z-index: 10; } #posting_stats_page .user-choice .selected-users { width: 275px; height: 150px; overflow-y: auto; border: 1px solid #aaa; padding: 4px; margin-top: 20px; } #posting_stats_page .user-choice .user-row { position: relative; padding: 2px 4px 2px 37px; cursor: pointer; } #posting_stats_page .user-choice .user-row .avatar { position: absolute; left: 6px; top: 8px; width: 24px; border-radius: 12px; } #posting_stats_page .user-choice .user-row span { display: block; overflow-x: hidden; text-overflow: ellipsis; } #posting_stats_page .user-choice .user-row .name { font-size: 11pt; margin-top: 1px; margin-bottom: 1px; } #posting_stats_page .user-choice .user-row .handle { font-size: 10pt; margin-bottom: 2px; color: #666; } #posting_stats_page .user-choice .autocomplete .user-row { cursor: pointer; } #posting_stats_page .user-choice .autocomplete .user-row.hover { background-color: hsl(207, 100%, 85%); } #posting_stats_page .user-choice .selected-users .user-row span { padding-right: 14px; } #posting_stats_page .user-choice .selected-users .user-row .remove { position: absolute; right: 4px; top: 11px; padding: 0px 4px; color: #333; line-height: 17px; } #posting_stats_page .user-choice .selected-users .user-row .remove:hover { text-decoration: none; background-color: #ddd; border-radius: 8px; } #posting_stats_page .scan-info { display: none; font-weight: 600; line-height: 125%; margin: 20px 0px; } #posting_stats_page .scan-result { border: 1px solid #333; border-collapse: collapse; display: none; } #posting_stats_page .scan-result td, #posting_stats_page .scan-result th { border: 1px solid #333; } #posting_stats_page .scan-result td { text-align: right; padding: 5px 8px; } #posting_stats_page .scan-result th { text-align: center; background-color: hsl(207, 100%, 86%); padding: 7px 10px; } #posting_stats_page .scan-result td.handle { text-align: left; max-width: 450px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #posting_stats_page .scan-result tr.total td { font-weight: bold; font-size: 11pt; background-color: hsla(207, 100%, 86%, 0.4); } #posting_stats_page .scan-result tr.total td.handle { text-align: left; padding: 10px 12px; } #posting_stats_page .scan-result .avatar { width: 24px; height: 24px; border-radius: 14px; vertical-align: middle; margin-right: 2px; padding: 2px; } #posting_stats_page .scan-result td.no { font-weight: bold; } #posting_stats_page .scan-result td.percent { min-width: 70px; } #like_stats_page { display: none; } #like_stats_page input[type="range"] { width: 250px; vertical-align: middle; } #like_stats_page input[type="submit"] { font-size: 12pt; margin: 5px 0px; padding: 5px 10px; } #like_stats_page progress { width: 300px; margin-left: 10px; vertical-align: middle; display: none; } #like_stats_page .scan-result { border: 1px solid #333; border-collapse: collapse; display: none; float: left; margin-top: 20px; margin-bottom: 40px; } #like_stats_page .given-likes { margin-right: 100px; } #like_stats_page .scan-result td, #like_stats_page .scan-result th { border: 1px solid #333; padding: 5px 10px; } #like_stats_page .scan-result th { text-align: center; background-color: hsl(207, 100%, 86%); padding: 12px 10px; } #like_stats_page .scan-result td.no { font-weight: bold; text-align: right; } #like_stats_page .scan-result td.handle { width: 280px; } #like_stats_page .scan-result td.count { padding: 5px 15px; } #like_stats_page .scan-result .avatar { width: 24px; height: 24px; border-radius: 14px; vertical-align: middle; margin-right: 2px; padding: 2px; } #private_search_page { display: none; } #private_search_page input[type="range"] { width: 250px; vertical-align: middle; } #private_search_page input[type="submit"] { font-size: 12pt; margin: 5px 0px; padding: 5px 10px; } #private_search_page progress { width: 300px; margin-left: 10px; vertical-align: middle; display: none; } #private_search_page .search { display: none; } #private_search_page .search-query { font-size: 12pt; border: 1px solid #ccc; border-radius: 6px; padding: 5px 6px; margin-left: 8px; } #private_search_page .search-collections label { vertical-align: middle; } #private_search_page .lycan-import { display: none; margin-top: 30px; border-top: 1px solid #ccc; padding-top: 5px; } #private_search_page .lycan-import form p { line-height: 135%; } #private_search_page .lycan-import .import-progress progress { margin-left: 0; margin-right: 6px; } #private_search_page .lycan-import .import-progress progress + output { font-size: 11pt; } #private_search_page .results { margin-top: 30px; } #private_search_page .results > .post { margin-left: -15px; padding-left: 15px; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-top: 24px; } #private_search_page .results-end { font-size: 12pt; color: #333; } #private_search_page .post + .results-end { font-size: 11pt; } @media (prefers-color-scheme: dark) { body { background-color: rgb(39, 39, 37); color: #eee; } a { color: rgb(0, 133, 255); } a:visited { color: rgb(0, 133, 255); } #loader { filter: invert(); } #search form { border-color: hsl(210, 40%, 60%); } #search form input { background-color: transparent; } #account.active { color: #333; } #account_menu { background: hsl(210, 33.33%, 94.0%); border-color: #ccc; } #account_menu li a[data-action] { color: #333; border-color: #bbb; background-color: hsla(210, 100%, 4%, 0.12); } #account_menu li a[data-action]:hover { background-color: hsla(210, 100%, 4%, 0.2); } #login { background-color: rgba(240, 240, 240, 0.15); } #login form { border-color: hsl(210, 20%, 40%); background-color: hsl(210, 12%, 25%); } #login .close { color: hsl(210, 20%, 50%); opacity: 0.6; } #login .close:hover { color: hsl(210, 20%, 50%); opacity: 1.0; } #login p.info a { color: #888; } #login input[type="text"], #login input[type="password"] { border-color: #666; } #login input[type="submit"] { border-color: hsl(210, 15%, 40%); background-color: hsl(210, 12%, 35%); } #login input[type="submit"]:active { border-color: hsl(210, 15%, 35%); background-color: hsl(210, 12%, 30%); } #login #cloudy { color: hsl(210, 60%, 75%); } #login .info-box { border-color: hsl(45, 100%, 45%); background-color: hsl(50, 40%, 30%); } #login .info-box a { color: hsl(45, 100%, 50%); } #github { filter: invert(); } .back, .back a { color: #888; } p.back i { color: #888; } .post h2 .handle { color: #888; } .post h2 .separator { color: #888; } .post h2 .time { color: #aaa; } .post h2 .action { color: #888; } .post .body .highlight { background-color: rgba(255, 255, 0, 0.35); } .post .quote-embed { background-color: #303030; border-color: #606060; } .post .image-alt, .post .image-alt summary { color: #999; } .post.blocked p, .post.blocked a { color: #aaa; } .post .edge .line { border-left-color: #666; } .post .edge:hover .line { border-left-color: #888; } .post .plus { filter: invert(); } .post .stats { color: #aaa; } .post .stats i { color: #888; } .post .stats i.fa-heart { color: #aaa; } .post .stats i.fa-heart.liked { color: #f04040; } .post .stats i.fa-heart:hover { color: #eee; } .post .stats i.fa-heart.liked:hover { color: #ff7070; } .post a.link-card > div { background-color: #303030; border-color: #606060; } .post a.link-card:hover > div { background-color: #383838; border-color: #707070; } .post a.link-card p.domain { color: #666; } .post a.link-card h2 { color: #ccc; } .post a.link-card p.description { color: #888; } .post a.link-card.record .handle { color: #666; } .post a.link-card.record .avatar { border-color: #888; } .post a.link-card.record .stats i.fa-heart:hover { color: #eee; } .post a.fedi-link > div { border-color: #606060; color: #909090; } .post a.fedi-link:hover > div { background-color: #444; border-color: #909090; } #posting_stats_page input:disabled + label { color: #777; } #posting_stats_page .user-choice .autocomplete { background-color: hsl(210, 5%, 18%); border-color: #4b4b4b; } #posting_stats_page .user-choice .selected-users { border-color: #666; } #posting_stats_page .user-choice .user-row .handle { color: #888; } #posting_stats_page .user-choice .autocomplete .user-row.hover { background-color: hsl(207, 90%, 25%); } #posting_stats_page .user-choice .selected-users .user-row .remove { color: #aaa; } #posting_stats_page .user-choice .selected-users .user-row .remove:hover { background-color: #555; color: #bbb; } #posting_stats_page .scan-result, #posting_stats_page .scan-result td, #posting_stats_page .scan-result th { border-color: #888; } #posting_stats_page .scan-result th { background-color: hsl(207, 90%, 25%); } #posting_stats_page .scan-result tr.total td { background-color: hsla(207, 90%, 25%, 0.4); } #like_stats_page .scan-result, #like_stats_page .scan-result td, #like_stats_page .scan-result th { border-color: #888; } #like_stats_page .scan-result th { background-color: hsl(207, 90%, 25%); } #private_search_page .search-query { border: 1px solid #666; } #private_search_page .lycan-import { border-top-color: #888; } #private_search_page .results-end { color: #888; } #private_search_page .results > .post { border-bottom: 1px solid #555; } }