kibi/f0ckm
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d7b87af138316ec43af84298bb9bb3b18368a7b3
f0ckm/public/s/css/f0ckm.css

13518 lines
262 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* =============================================
f0ckm.css - Unified Stylesheet
Merged: f0ck.css + w0bm.css + view styles
============================================= */
/* f0ckwork omega */
/* written by sirx for f0ck.me */
/* use whatever you like */
/* once upon a time this was a stiefelstrapse! but no more! */
/* Licensed under wtfpl */
html[theme='f0ck'] {
--accent: #9f0;
--accent-rgb: 153, 255, 0;
--bg: #111;
--black: #000;
--white: #fff;
--gray: #262626;
--nav-bg: #2b2b2b;
--nav-brand-border: inset 1px #242424;
--nav-brand-bg: #171717;
--navigation-links-bg: #2b2b2b;
--navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0);
--navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
--navigation-links-box-shadow: rgba(255, 255, 255, .05);
--nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
--nav-link-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
--nav-link-hover-bg: #333;
--nav-border-color: rgba(255, 255, 255, .05);
--dropdown-bg: #232323;
--dropdown-item-hover: #0d0d0d;
--nav-brand-font: 'VCR';
--font: monospace;
--pagination-background: #2b2b2b;
--pagination-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
--pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
--pagination-background-hover: #333;
--pagination-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
--metadata-bg: #2b2b2b;
--badge-bg: #171717;
--posts-meta-bg: #000000b8;
--badge-sfw: #68a728;
--badge-nsfw: #E10DC3;
--badge-nsfl: #660000;
--badge-tag: #090909;
--scrollbar-color: #555;
--scroller-bg: #424242;
--footbar-color: #9f0;
--loading-indicator-color: #9f0;
--img-border-width: 0;
--img-border-color: #363636;
--maximize_button: #9f0;
--bg-gradient: linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgb(6, 6, 6) 10%, rgb(43, 43, 43) 100%);
/* appearance */
background: black;
}
html[theme="f0ck"] .admin-search button {
color: var(--black) !important;
}
html[theme="f0ck"] .pagination>a,
.pagination>span {
border-radius: 3px;
border: 1px solid var(--black);
}
html[theme="f0ck"] .pagination>span {
border-radius: 3px;
}
html[theme="f0ck"] span#favs {
border: 1px solid var(--black);
}
html[theme='p1nk'] {
--accent: #ff00d0;
--accent-rgb: 255, 0, 208;
--bg: #111;
--black: #000;
--white: #fff;
--gray: #262626;
--nav-bg: #201f1f;
--nav-brand-border: inset 1px #242424;
--nav-brand-bg: #171717;
--navigation-links-bg: #201f1f;
--navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0);
--navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
--navigation-links-box-shadow: rgba(255, 255, 255, .05);
--nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
--nav-link-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
--nav-link-hover-bg: #333;
--nav-border-color: rgba(255, 255, 255, .05);
--dropdown-bg: #232323;
--dropdown-item-hover: #0d0d0d;
--nav-brand-font: 'VCR';
--font: monospace;
--pagination-background: #201f1f;
--pagination-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
;
--pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
--pagination-background-hover: #333;
--pagination-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
--badge-bg: #171717;
--badge-sfw: #68a728;
--badge-nsfw: #E10DC3;
--badge-nsfl: #660000;
--badge-tag: #090909;
--metadata-bg: #2b2b2b;
--posts-meta-bg: #000000b8;
--scrollbar-color: #555;
--scroller-bg: #424242;
--footbar-color: #ff00d0;
--loading-indicator-color: #ff00d0;
--img-border-width: 0;
--img-border-color: #363636;
--maximize_button: #ff00d0;
--bg-gradient: linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgb(6, 6, 6) 10%, rgb(43, 43, 43) 100%);
/* appearance */
background: black;
--motd-bg: #111;
}
html[theme="p1nk"] .pagination>a,
.pagination>span {
border-radius: 3px;
border: 1px solid var(--black);
}
html[theme="p1nk"] .pagination>span {
border-radius: 3px;
}
html[theme="p1nk"] span#favs {
border: 1px solid var(--black);
}
html[theme='orange'] {
--accent: #ff6f00;
--accent-rgb: 255, 111, 0;
--bg: #111;
--black: #000;
--white: #fff;
--gray: #262626;
--nav-bg: #2b2b2b;
--nav-brand-border: inset 1px #242424;
--nav-brand-bg: #171717;
--navigation-links-bg: #2b2b2b;
--navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0);
--navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
--navigation-links-box-shadow: rgba(255, 255, 255, .05);
--nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
--nav-link-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
--nav-link-hover-bg: #333;
--dropdown-bg: #232323;
--nav-border-color: rgba(255, 255, 255, .05);
--dropdown-item-hover: #0d0d0d;
--nav-brand-font: 'VCR';
--font: monospace;
--pagination-background: #2b2b2b;
--pagination-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
--pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
--pagination-background-hover: #333;
--pagination-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
--metadata-bg: #2b2b2b;
--badge-bg: #151515;
--posts-meta-bg: #000000b8;
--badge-tag: #090909;
--badge-sfw: #68a728;
--badge-nsfw: #E10DC3;
--badge-nsfl: #660000;
--scrollbar-color: #555;
--scroller-bg: #424242;
--footbar-color: #ff6f00;
--loading-indicator-color: #ff6f00;
--img-border-width: 0;
--img-border-color: #363636;
--maximize_button: #ff6f00;
--bg-gradient: linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgb(6, 6, 6) 10%, rgb(43, 43, 43) 100%);
/* appearance */
background: black;
--motd-bg: #111;
}
html[theme="orange"] .pagination>a,
.pagination>span {
border-radius: 3px;
border: 1px solid var(--black);
}
html[theme="orange"] .pagination>span {
border-radius: 3px;
}
html[theme="orange"] span#favs {
border: 1px solid var(--black);
user-select: none;
}
html[theme='amoled'] {
--accent: #fff;
--accent-rgb: 255, 255, 255;
--bg: #000;
--black: #000;
--white: #fff;
--gray: #2f2d2d;
--nav-bg: #000;
--nav-brand-border: inset 1px #242424;
--nav-brand-bg: #000;
--navigation-links-bg: #000;
--navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0);
--navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
--navigation-links-box-shadow: rgba(255, 255, 255, .05);
--nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
--nav-link-box-shadow: inset 0 0 0 1px rgb(92, 92, 92), inset 0 1px rgb(92, 92, 92), inset 0 -1px rgb(92, 92, 92), 0 1px 1px rgba(92, 92, 92, 0);
--nav-link-hover-bg: #6a6a6a70;
--nav-border-color: rgba(255, 255, 255, .05);
--dropdown-bg: #232323;
--dropdown-item-hover: #0d0d0d;
--nav-brand-font: 'VCR';
--font: monospace;
--pagination-background: #000;
--pagination-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0px rgba(255, 255, 255, 0), inset 0 0px rgba(248, 248, 248, 0), 0 0px 0px rgba(255, 255, 255, 0);
--pagination-anchor-box-shadow: inset 0 0 0 1px rgb(92, 92, 92), inset 0 1px rgb(92, 92, 92), inset 0 -1px rgb(92, 92, 92), 0 1px 1px rgba(92, 92, 92, 0);
--pagination-background-hover: #6a6a6a70;
--pagination-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
--metadata-bg: #000;
--badge-bg: #000;
--posts-meta-bg: #000000b8;
--badge-sfw: #68a728;
--badge-nsfw: #E10DC3;
--badge-nsfl: #660000;
--badge-tag: #1a1a1a;
--scrollbar-color: #444;
--scroller-bg: #424242;
--footbar-color: #fff;
--loading-indicator-color: #fff;
--img-border-width: 0;
--img-border-color: #363636;
--maximize_button: #fff;
--bg-gradient: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 10%, rgb(0, 0, 0) 100%);
background: black;
}
html[theme="amoled"] .metadata {
border: none;
}
html[theme="amoled"] .pagination>a,
.pagination>span {
border-radius: 3px;
border: 1px solid var(--black);
}
html[theme="amoled"] .pagination>span {
border-radius: 3px;
}
html[theme="amoled"] span#favs {
border: 1px solid var(--black);
}
html[theme="amoled"] .admin-search button {
color: var(--black) !important;
}
html[theme="amoled"] table.table tbody tr:nth-of-type(2n+1) a {
color: var(--white) !important;
text-decoration: underline;
}
html[theme="amoled"] table.table tbody tr:nth-of-type(2n+1) {
color: var(--white) !important;
}
html[theme="amoled"] table.table a {
text-decoration: underline;
}
html[theme="paper"] {
--accent: #000;
--accent-rgb: 0, 0, 0;
--bg: #fff;
--black: #000;
--white: #fff;
--gray: #262626;
--nav-bg: #fff;
--nav-brand-border: inset 1px #242424;
--nav-brand-bg: #fff;
--navigation-links-bg: #fff;
--navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0);
--navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
--navigation-links-box-shadow: rgba(255, 255, 255, .05);
--nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
--nav-link-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
--nav-link-hover-bg: #3939354a;
--nav-border-color: rgba(255, 255, 255, .05);
--dropdown-bg: #fff;
--dropdown-item-hover: #3939354a;
--nav-brand-font: 'VCR';
--font: monospace;
--pagination-background: #fff;
--pagination-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
--pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
--pagination-background-hover: #3939354a;
--pagination-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
--metadata-bg: #fff;
--badge-bg: #fff;
--posts-meta-bg: #000000db;
--badge-sfw: #68a728;
--badge-nsfw: #E10DC3;
--badge-nsfl: #660000;
--badge-tag: #000000;
--scrollbar-color: #6c6c6c;
--scroller-bg: #424242;
--footbar-color: #000;
--loading-indicator-color: #000;
--img-border-width: 0;
--img-border-color: #363636;
--maximize_button: #fff;
}
html[theme="paper"] .err {
background: black;
color: white;
}
html[theme="paper"] ._204863 {
color: white;
}
html[theme="paper"] svg.iconset {
background: black;
}
html[theme="paper"] svg.iconset:hover {
background: rgb(31, 30, 30);
}
html[theme="paper"] .iconset#a_favo {
fill: var(--white);
}
html[theme="paper"] .iconset#a_delete {
stroke: var(--white);
}
html[theme="paper"] .pagination>a,
.pagination>span {
border-radius: 3px;
border: 1px solid var(--black);
}
html[theme="paper"] .pagination>span {
border-radius: 3px;
}
html[theme="paper"] span#favs {
border: 1px solid var(--black);
}
html[theme="paper"] body {
color: var(--black);
}
html[theme="paper"] a#next {
color: var(--white) !important;
-webkit-text-stroke: 1px var(--black);
font-size: 40px;
}
html[theme="paper"] a#prev {
color: var(--white) !important;
-webkit-text-stroke: 1px var(--black);
font-size: 40px;
}
html[theme="paper"] .about {
color: var(--black);
}
html[theme="paper"] .about a:hover {
text-decoration: underline;
}
html[theme="paper"] div.posts>a::after {
color: var(--white);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
html[theme="paper"] .v0ck_player_controls>input[type="range"][name="volume"]::-webkit-slider-thumb {
background: var(--white);
box-shadow: -100vw 0 0 100vw var(--white);
}
html[theme="paper"] .v0ck_player_controls>input[type="range"][name="volume"]::-moz-range-thumb {
background: var(--white);
box-shadow: -100vw 0 0 100vw var(--white);
}
html[theme="paper"] div.posts>a {
box-shadow: 1px 1px 1px black;
border-radius: 5px;
}
html[theme="paper"] .v0ck_progress_filled {
background: var(--white);
}
html[theme="paper"] .metadata {
color: var(--black);
border: none;
}
html[theme="paper"] .navbar-brand {
background: var(--black);
color: var(--white) !important;
}
html[theme="paper"] a.removetag {
color: var(--white) !important;
}
html[theme="paper"] .navbar {
border-bottom: 1px solid var(--black);
}
html[theme="paper"] .embed-responsive-image {
background: var(--white);
}
html[theme="paper"] .v0ck_player_button svg:hover {
fill: var(--black);
stroke: var(--white);
}
html[theme="paper"] .badge-dark,
#themeselector {
box-shadow: 1px 1px 0px 0px var(--black);
}
html[theme="paper"] span#favs {
border: 1px solid var(--white);
}
html[theme="paper"] .admin-search button {
color: var(--white) !important;
opacity: 0.9;
}
html[theme="paper"] table.table tbody tr:nth-of-type(2n+1) a {
color: var(--white) !important;
text-decoration: underline;
}
html[theme="paper"] table.table tbody tr:nth-of-type(2n+1) {
color: var(--white) !important;
}
html[theme="paper"] table.table a {
text-decoration: underline;
}
html[theme="paper"] a {
color: var(--black);
}
html[theme="paper"] .login-form {
background: white;
}
html[theme="paper"] .login-form input {
color: black;
}
html[theme="paper"] .login-form button[type="submit"] {
color: black;
}
html[theme="atmos"] {
--accent: #1fb2b0;
--accent-rgb: 31, 178, 176;
--bg: #111;
--black: #000;
--white: #fff;
--gray: #262626;
--nav-bg: rgb(32, 32, 32);
--nav-brand-border: inset 1px #242424;
--nav-brand-bg: #171717;
--navigation-links-bg: rgb(32, 32, 32);
--navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0);
--navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
--navigation-links-box-shadow: rgba(255, 255, 255, .05);
--nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
--nav-link-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
--nav-link-hover-bg: #333;
--nav-border-color: rgba(255, 255, 255, .05);
--dropdown-bg: #232323;
--dropdown-item-hover: #0d0d0d;
--nav-brand-font: 'VCR';
--font: monospace;
--pagination-background: rgb(32, 32, 32);
--pagination-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
--pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
--pagination-background-hover: #333;
--pagination-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
--metadata-bg: rgba(34, 34, 34, 0.8);
--badge-bg: #131313;
--posts-meta-bg: #000000b8;
--badge-sfw: #68a728;
--badge-nsfw: #a72828;
--badge-nsfl: #660000;
--badge-tag: #353535;
--scrollbar-color: #555;
--footbar-color: #1fb2b0;
--loading-indicator-color: #1fb2b0;
--img-border-width: 0;
--img-border-color: #363636;
--maximize_button: #1fb2b0;
--bg-gradient: linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgb(6, 6, 6) 10%, rgb(43, 43, 43) 100%);
/* appearance */
background: black;
--motd-bg: #111;
}
html[theme="atmos"] .pagination>a,
.pagination>span {
border-radius: 3px;
border: 1px solid var(--black);
}
html[theme="atmos"] .pagination>span {
border-radius: 3px;
}
html[theme="atmos"] span#favs {
border: 1px solid var(--black);
}
html[theme="term"] {
--accent: #00DF00;
--accent-rgb: 0, 223, 0;
--bg: #000;
--black: #000;
--white: #fff;
--gray: #262626;
--nav-bg: #040404;
--nav-brand-border: inset 1px #111111;
--nav-brand-bg: #040404;
--navigation-links-bg: #040404;
--navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0);
--navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
--navigation-links-box-shadow: rgba(255, 255, 255, .05);
--nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
--nav-link-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
--nav-link-hover-bg: #282828;
--nav-border-color: rgba(255, 255, 255, .05);
--dropdown-bg: #040404;
--dropdown-item-hover: #282828;
--nav-brand-font: 'VCR';
--font: monospace;
--pagination-background: #040404;
--pagination-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
--pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
--pagination-background-hover: #282828;
--pagination-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
--metadata-bg: #000;
--badge-bg: #060606;
--posts-meta-bg: #000000b8;
--badge-sfw: #076a19;
--badge-nsfw: #E10DC3;
--badge-nsfl: #660000;
--badge-tag: #131212;
--scrollbar-color: #555;
--scroller-bg: #424242;
--tooltip-bg: #131212;
--footbar-color: #00DF00;
--loading-indicator-color: #00DF00;
--img-border-width: 0;
--img-border-color: #363636;
--maximize_button: #00DF00;
--bg-gradient: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 10%, rgb(0, 0, 0) 100%);
/* appearance */
background: black;
}
html[theme="term"] .pagination>a,
.pagination>span {
border-radius: 3px;
border: 1px solid var(--black);
}
html[theme="term"] .pagination>span {
border-radius: 3px;
}
html[theme="term"] span#favs {
box-shadow: var(--pagination-anchor-box-shadow);
background-image: linear-gradient(to bottom, var(--nav-link-background-linear-gradient));
border: 1px solid var(--black);
}
html[theme="term"] .metadata {
text-shadow: 0px 0px 1px var(--accent), 1px 0px 2px var(--accent), 0px 0px 5px var(--black);
}
html[theme="term"] .metadata>.badge-dark,
#themeselector {
box-shadow: var(--pagination-anchor-box-shadow);
background-image: linear-gradient(to bottom, var(--nav-link-background-linear-gradient));
}
html[theme="term"] .navbar-brand:hover {
background: #0a2008;
}
html[theme="iced"] {
--accent: #0084ff;
--accent-rgb: 0, 132, 255;
--bg: #031c35;
--black: #000;
--white: #fff;
--gray: rgba(255, 255, 255, .05);
--nav-bg: #111d37;
--nav-brand-border: inset 1px #242424;
--nav-brand-bg: #000;
--navigation-links-bg: #111d37;
--navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0);
--navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
--navigation-links-box-shadow: rgba(255, 255, 255, .05);
--nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
--nav-link-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
--nav-link-hover-bg: #0a3f53;
--nav-border-color: rgba(255, 255, 255, .05);
--dropdown-bg: #111d37;
--dropdown-item-hover: #0a3f53;
--nav-brand-font: 'VCR';
--font: monospace;
--pagination-background: #111d37;
--pagination-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
--pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
--pagination-background-hover: #0a3f53;
--pagination-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
--metadata-bg: #000e1a;
--badge-bg: #091f39;
--posts-meta-bg: #000000b8;
--badge-sfw: #07866e;
--badge-nsfw: #E10DC3;
--badge-nsfl: #660000;
--badge-tag: #22083c;
--scrollbar-color: #555;
--scroller-bg: #424242;
--tooltip-bg: #0a3f53;
--footbar-color: #0084ff;
--loading-indicator-color: #0084ff;
--img-border-width: 0;
--img-border-color: #363636;
--maximize_button: #0084ff;
--bg-gradient: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 10%, #062631 100%);
/* appearance */
background: black;
}
html[theme="iced"] ._204863 {
background: -webkit-linear-gradient(left, #102c5e, #111d37);
}
html[theme="iced"] svg.iconset {
background: #111d37;
}
html[theme="iced"] svg.iconset#subscribe-btn {
background: #111d37;
}
html[theme="iced"] svg.iconset:hover {
background: #1b2f5a;
}
html[theme="iced"] .pagination>a,
.pagination>span {
border-radius: 3px;
border: 1px solid var(--black);
}
html[theme="iced"] .pagination>span {
border-radius: 3px;
}
html[theme="iced"] span#favs {
border: 1px solid var(--black);
}
html[theme="iced"] .navbar-brand:hover {
background: #1d2941;
}
/* f0ck95 */
html[theme='f0ck95'] {
--accent: silver;
--accent-rgb: 192, 192, 192;
--bg: teal;
--black: #000;
--white: #fff;
--gray: rgba(255, 255, 255, .05);
;
--nav-bg: silver;
--nav-brand-border: inset 1px black;
--nav-brand-bg: silver;
--navigation-links-bg: silver;
--navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0);
--navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
--navigation-links-box-shadow: rgba(255, 255, 255, .05);
--nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
--nav-link-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
--nav-link-hover-bg: #8a8989;
--nav-border-color: #282727;
--dropdown-bg: silver;
--dropdown-item-hover: #8a8989;
--nav-brand-font: 'VCR';
--font: monospace;
--pagination-background: silver;
--pagination-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
--pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
--pagination-background-hover: #8a8989;
--pagination-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
--metadata-bg: silver;
--badge-bg: #a8a5a5;
--posts-meta-bg: #000000b8;
--badge-sfw: #339f72;
--badge-nsfw: #E10DC3;
--badge-nsfl: #660000;
--badge-tag: #959393;
--scrollbar-color: #555;
--scroller-bg: #424242;
--footbar-color: #000;
--loading-indicator-color: #000;
--img-border-width: 0;
--img-border-color: #808080;
--maximize_button: #000;
--bg-gradient: linear-gradient(0deg, rgba(0, 128, 128, 0.514), rgba(0, 0, 0, 0) 10%, rgba(0, 128, 128, 0.363) 100%);
/* appearance */
background: teal;
}
html[theme="f0ck95"] html,
body {
color: var(--black);
}
html[theme="f0ck95"] a {
color: var(--black);
}
html[theme="f0ck95"] span#favs {
border: inset 1px gray;
}
html[theme="f0ck95"] .embed-responsive-image {
border: none;
}
html[theme="f0ck95"] .nav-link,
.pagination>a,
.pagination>span {
border-radius: 0;
border-left: inset 1px silver;
border-bottom: outset 1px silver;
border-right: outset 1px silver;
border-top: 1px outset gray;
box-shadow: var(--pagination-anchor-box-shadow);
background-image: linear-gradient(to bottom, var(--nav-link-background-linear-gradient));
}
html[theme="f0ck95"] .pagination>a:active,
.pagination>span {
color: black;
}
html[theme="f0ck95"] .pagination>a,
.pagination>span {
border-radius: 0;
border-left: inset 1px silver;
border-bottom: outset 1px silver;
border-right: outset 1px silver;
border-top: 1px outset gray;
}
html[theme="f0ck95"] .metadata {
border-left: inset 2px silver;
border-bottom: outset 2px silver;
border-right: outset 2px silver;
border-top: 2px outset #8c8888;
color: var(--black);
}
html[theme="f0ck95"] .media-object {
border-left: inset 2px silver;
border-right: outset 2px silver;
}
html[theme="f0ck95"] .embed-responsive.embed-responsive-16by9 {
background: black;
}
html[theme="f0ck95"] .embed-responsive-image {
background: #0000;
}
html[theme="f0ck95"] span.placeholder {
border-left: 1px solid var(--black);
}
html[theme="f0ck95"] #prev {
color: white !important;
}
html[theme="f0ck95"] #next {
color: white !important;
}
html[theme="4d"] {
--accent: #f2ef0b;
--accent-rgb: 31, 178, 176;
--bg: #242424;
--black: #000;
--white: #fff;
--gray: #262626;
--nav-bg: #171717;
--nav-brand-border: inset 1px #242424;
--nav-brand-bg: #171717;
--motd-bg: #252424;
--navigation-links-bg: rgb(32, 32, 32);
--navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0);
--navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
--navigation-links-box-shadow: rgba(255, 255, 255, .05);
--nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
--nav-link-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
--nav-link-hover-bg: #333;
--nav-border-color: rgba(255, 255, 255, .05);
--dropdown-bg: #232323;
--dropdown-item-hover: #0d0d0d;
--nav-brand-font: 'VCR';
--font: monospace;
--pagination-background: #171717;
--pagination-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
--pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
--pagination-background-hover: #333;
--pagination-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
--metadata-bg: rgba(34, 34, 34, 0.8);
--badge-bg: #131313;
--posts-meta-bg: #000000b8;
--badge-sfw: #68a728;
--badge-nsfw: #E10DC3;
--badge-nsfl: #660000;
--badge-tag: #353535;
--scrollbar-color: #555;
--footbar-color: #1fb2b0;
--loading-indicator-color: #1fb2b0;
--img-border-width: 0;
--img-border-color: #363636;
--maximize_button: #1fb2b0;
--bg-gradient: linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgb(6, 6, 6) 10%, rgb(43, 43, 43) 100%);
background: black;
}
/* xd */
html[theme="xd"] {
--accent: #17786a;
--accent-rgb: 31,178,176;
--bg: #0c0c0c;
--black: #000;
--white: #fff;
--gray: #262626;
--nav-bg: #101010;
--nav-brand-border: inset 1px #242424;
--nav-brand-bg: #171717;
--motd-bg: #101010;
--navigation-links-bg: rgb(32,32,32);
--navigation-links-background-linear-gradient: rgba(0,0,0,.12),rgba(0,0,0,0);
--navigation-links-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
--navigation-links-box-shadow: rgba(255,255,255,.05);
--nav-link-background-linear-gradient: rgba(255,255,255,.04),rgba(255,255,255,0);
--nav-link-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 0px rgba(255,255,255,.04),inset 0 0px rgba(0,0,0,.15),0 0px 0px rgba(0,0,0,.1);
--nav-link-hover-bg: #333;
--nav-border-color: #3b3b3c;
--dropdown-bg: #232323;
--dropdown-item-hover: #0d0d0d;
--nav-brand-font: 'VCR';
--font: monospace;
--pagination-background: #171717;
--pagination-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 0px rgba(255,255,255,.04),inset 0 0px rgba(0,0,0,.15),0 0px 0px rgba(0,0,0,.1);
--pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.1);
--pagination-background-hover: #333;
--pagination-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
--metadata-bg: rgba(34,34,34,0.8);
--badge-bg: #131313;
--posts-meta-bg: #000000b8;
--badge-sfw: #68a728;
--badge-nsfw: #E10DC3;
--badge-nsfl: #660000;
--badge-tag: #353535;
--scrollbar-color: #555;
--footbar-color: #1fb2b0;
--loading-indicator-color: #1fb2b0;
--img-border-width: 0;
--img-border-color: #363636;
--maximize_button: #1fb2b0;
--bg-gradient: linear-gradient(0deg,rgba(0,0,0,0.94) 0%,rgb(6,6,6) 10%,rgb(43,43,43) 100%);
}
html[theme="xd"] .motd-container {
border-top: 2px solid var(--nav-border-color);
border-bottom: 1px solid var(--nav-border-color);
}
html[theme="xd"] .item-sidebar-right,
html[theme="xd"] .index-sidebar-right,
html[theme="xd"] .global-sidebar-right {
background: #131313 !important;
border-left: 2px solid var(--nav-border-color) !important;
}
/* f0ck95 - v2 (theme '95') */
html[theme='95'] {
--accent: #000080;
--accent-rgb: 0, 0, 128;
--bg: #008080;
--black: #000;
--white: #fff;
--gray: #808080;
--silver: #c0c0c0;
--nav-bg: #c0c0c0;
--nav-brand-border: outset 2px #dfdfdf;
--nav-brand-bg: #c0c0c0;
--navigation-links-bg: #c0c0c0;
--navigation-links-background-linear-gradient: none;
--navigation-links-border-color: #dfdfdf #808080 #808080 #dfdfdf;
--navigation-links-box-shadow: none;
--nav-link-background-linear-gradient: none;
--nav-link-box-shadow: none;
--nav-link-hover-bg: #000080;
--nav-border-color: #808080;
--dropdown-bg: #c0c0c0;
--dropdown-item-hover: #000080;
--nav-brand-font: 'Tahoma', 'MS Sans Serif', sans-serif;
--font: 'Tahoma', 'MS Sans Serif', sans-serif;
--pagination-background: #c0c0c0;
--pagination-box-shadow: none;
--pagination-anchor-box-shadow: none;
--pagination-background-hover: #000080;
--pagination-border-color: #808080;
--metadata-bg: #c0c0c0;
--badge-bg: #c0c0c0;
--posts-meta-bg: #c0c0c0cc;
--badge-sfw: #008000;
--badge-nsfw: #800000;
--badge-nsfl: #000;
--badge-tag: #808080;
--scrollbar-color: #c0c0c0;
--scroller-bg: #008080;
--footbar-color: #000;
--loading-indicator-color: #000080;
--img-border-width: 2px;
--img-border-color: #808080;
--maximize_button: #000;
--bg-gradient: none;
background: #008080;
}
html[theme='95'] body {
color: #000;
background: var(--bg);
}
html[theme='95'] a {
color: #0000ee;
}
html[theme='95'] a:hover {
text-decoration: underline;
}
html[theme='95'] .navbar {
border-bottom: 2px outset #dfdfdf;
background: #c0c0c0;
}
html[theme='95'] .navbar-brand {
background: #000080;
color: #fff !important;
padding: 2px 10px;
font-family: var(--nav-brand-font);
box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px #808080;
}
html[theme='95'] .nav-link,
html[theme='95'] .pagination>a,
html[theme='95'] .pagination>span,
html[theme='95'] button,
html[theme='95'] .btn {
border: 2px outset #dfdfdf !important;
background: #c0c0c0 !important;
color: #000 !important;
padding: 4px 8px !important;
border-radius: 0 !important;
text-decoration: none !important;
box-shadow: none !important;
}
html[theme='95'] .nav-link:hover,
html[theme='95'] .pagination>a:hover,
html[theme='95'] button:hover,
html[theme='95'] .btn:hover {
background: #c0c0c0 !important;
}
html[theme='95'] .nav-link:active,
html[theme='95'] .pagination>a:active,
html[theme='95'] button:active,
html[theme='95'] .btn:active {
border: 2px inset #dfdfdf !important;
}
html[theme='95'] .dropdown-menu {
background: #c0c0c0;
border: 2px outset #dfdfdf;
border-radius: 0;
}
html[theme='95'] .dropdown-item {
color: #000;
}
html[theme='95'] .dropdown-item:hover {
background: #000080;
color: #fff;
}
html[theme='95'] .metadata,
html[theme='95'] .comment,
html[theme='95'] .login-form,
html[theme='95'] .user-infobox-block {
border: 2px inset #dfdfdf !important;
background: #c0c0c0 !important;
color: #000 !important;
padding: 10px !important;
border-radius: 0 !important;
}
html[theme='95'] input,
html[theme='95'] textarea,
html[theme='95'] select {
border: 2px inset #dfdfdf !important;
background: #fff !important;
color: #000 !important;
border-radius: 0 !important;
padding: 2px 4px !important;
}
html[theme='95'] .badge {
border-radius: 0 !important;
border: 1px solid #000 !important;
}
html[theme='95'] .posts>a {
border: 2px outset #dfdfdf !important;
background: #c0c0c0 !important;
}
html[theme='95'] .v0ck_player_controls {
background: #c0c0c0 !important;
border-top: 2px outset #dfdfdf !important;
padding: 2px !important;
display: flex !important;
align-items: center !important;
}
html[theme='95'] .v0ck_player_button {
background: #c0c0c0 !important;
border: 2px outset #dfdfdf !important;
border-radius: 0 !important;
margin: 0 2px !important;
padding: 2px !important;
}
html[theme='95'] .v0ck_player_button:active {
border: 2px inset #dfdfdf !important;
}
html[theme='95'] .v0ck_player_button svg,
html[theme='95'] .v0ck_player_controls svg {
fill: #000 !important;
color: #000 !important;
}
html[theme='95'] .v0ck_progress {
background: #fff !important;
border: 2px inset #dfdfdf !important;
height: 14px !important;
border-radius: 0 !important;
}
html[theme='95'] .v0ck_progress_filled {
background: #000080 !important;
}
html[theme='95'] .about {
color: #000;
}
html[theme='95'] .gchat-online-inner {
background: #c0c0c0 !important;
border-bottom: 2px outset #dfdfdf !important;
color: #000 !important;
}
html[theme='95'] .gchat-online-count {
color: #000 !important;
}
html[theme='95'] .global-sidebar-right-footer,
html[theme='95'] .item-sidebar-right-footer,
html[theme='95'] .index-sidebar-right-footer {
background: #c0c0c0 !important;
border-top: 2px outset #dfdfdf !important;
color: #000 !important;
}
html[theme='95'] .global-sidebar-right-footer>a {
border-right: 2px outset #dfdfdf !important;
color: #000 !important;
opacity: 1 !important;
}
html[theme='95'] #sidebar-activity-container {
background: #fff !important;
border: 2px inset #dfdfdf !important;
color: #000 !important;
}
html[theme='95'] .linear-view .comment {
border: 2px inset #dfdfdf !important;
background: #fff !important;
margin-bottom: 8px !important;
color: #000 !important;
}
html[theme='95'] .sidebar-activity-header {
background: #000080 !important;
color: #fff !important;
padding: 4px 10px !important;
border-bottom: 2px outset #dfdfdf !important;
}
html[theme='95'] #comments-container {
background: #fff !important;
border: 2px inset #dfdfdf !important;
color: #000 !important;
}
html[theme='95'] .item-main-content {
background: transparent !important;
border: none !important;
padding: 20px !important;
}
html[theme='95'] .item-main-content ._204863 {
background: linear-gradient(90deg, #000080, #1084d0) !important;
color: #fff !important;
font-family: var(--font) !important;
font-weight: bold !important;
font-size: 13px !important;
padding: 2px 4px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin: 0 !important;
width: 100% !important;
height: 24px !important;
border-top: 2px outset #dfdfdf !important;
border-left: 2px outset #dfdfdf !important;
border-right: 2px outset #dfdfdf !important;
box-sizing: border-box !important;
}
html[theme='95'] .item-main-content ._204863::after {
content: " _ ❐ ✕ ";
font-family: 'Arial', sans-serif;
font-size: 10px;
background: #c0c0c0;
color: #000;
border: 2px outset #dfdfdf;
padding: 0 4px;
line-height: 14px;
height: 16px;
display: flex;
align-items: center;
}
html[theme='95'] .item-main-content .content {
background: #c0c0c0 !important;
border-bottom: 2px outset #dfdfdf !important;
border-left: 2px outset #dfdfdf !important;
border-right: 2px outset #dfdfdf !important;
padding: 4px !important;
flex: none !important;
display: flex !important;
box-sizing: border-box !important;
}
html[theme='95'] .item-main-content .media-object {
background: #000 !important;
border: 2px inset #dfdfdf !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
html[theme='95'] .item-main-content .metadata {
border: 2px inset #dfdfdf !important;
background: #c0c0c0 !important;
padding: 10px !important;
margin-top: 10px !important;
color: #000 !important;
}
/* removing in favor of new appearance */
/*
/* Notifications */
.nav-item-rel {
position: relative;
display: inline-block;
}
.notif-count {
position: absolute;
top: 0px;
right: -5px;
background: var(--badge-nsfw);
color: white;
font-size: 10px;
padding: 2px 2px;
border-radius: 3px;
line-height: 1;
}
.flash-error {
color: #ff4444;
text-align: center;
margin-bottom: 10px;
font-weight: bold;
}
.flash-success {
color: #000;
background: var(--accent);
padding: 10px;
border-radius: 4px;
margin-bottom: 10px;
text-align: center;
font-weight: bold;
}
.notif-dropdown {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 320px;
background: var(--dropdown-bg);
border: 1px solid var(--nav-border-color);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
z-index: 1000;
margin-top: 6px;
border-radius: 6px;
}
/* Arrow caret pointing up toward the icon */
.notif-dropdown::before {
content: '';
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid var(--nav-border-color);
}
.notif-dropdown::after {
content: '';
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid var(--dropdown-bg);
}
.notif-dropdown.visible {
display: block;
}
@media (max-width: 768px) {
.notif-dropdown {
position: fixed;
transform: none;
width: 320px;
max-width: calc(100vw - 16px);
margin-top: 0;
}
/* Hide arrow on mobile — bell position varies */
.notif-dropdown::before,
.notif-dropdown::after {
display: none;
}
}
.notif-header {
padding: 8px 10px 6px;
border-bottom: 1px solid var(--nav-border-color);
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 0.9rem;
color: var(--white);
background: var(--nav-bg);
}
.notif-header button#mark-all-read {
background: none;
border: none;
color: var(--accent);
cursor: pointer;
font-size: 0.7rem;
padding: 0;
white-space: nowrap;
flex-shrink: 0;
}
/* Notification Tabs (dropdown) */
.notif-tabs {
display: flex;
gap: 2px;
flex: 1;
min-width: 0;
}
.notif-tab {
background: none;
border: none;
color: #888;
font-size: 0.78rem;
font-weight: 600;
padding: 4px 10px;
cursor: pointer;
border-radius: 4px;
transition: all 0.15s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
position: relative;
}
.notif-tab:hover {
color: #ccc;
background: rgba(255, 255, 255, 0.05);
}
.notif-tab.active {
color: var(--accent);
background: rgba(var(--accent-rgb, 31, 178, 176), 0.1);
}
.notif-tab-badge {
display: inline-block;
background: var(--badge-nsfw);
color: #fff;
font-size: 9px;
min-width: 14px;
height: 14px;
line-height: 14px;
text-align: center;
border-radius: 7px;
padding: 0 3px;
margin-left: 3px;
font-weight: 700;
vertical-align: middle;
}
/* Notification Page Tabs */
.notif-page-tabs {
display: flex;
gap: 0;
margin-bottom: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(0, 0, 0, 0.15);
border-radius: 4px 4px 0 0;
overflow: hidden;
}
.notif-page-tab {
flex: 1;
background: none;
border: none;
color: #888;
font-size: 0.9rem;
font-weight: 600;
padding: 10px 20px;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.2s ease;
border-bottom: 2px solid transparent;
position: relative;
}
.notif-page-tab:hover {
color: #ccc;
background: rgba(255, 255, 255, 0.03);
}
.notif-page-tab.active {
color: var(--accent);
border-bottom-color: var(--accent);
background: rgba(var(--accent-rgb, 31, 178, 176), 0.05);
}
.notif-list {
max-height: 300px;
overflow-y: auto;
}
.notif-item {
padding: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
background: var(--dropdown-bg);
cursor: pointer;
transition: background 0.2s;
font-size: 0.85rem;
color: var(--white);
display: block;
text-decoration: none;
}
.notif-item:hover {
background: var(--dropdown-item-hover);
text-decoration: none;
color: var(--white);
}
.notif-item.unread {
border-left: 3px solid var(--accent);
background: rgba(255, 255, 255, 0.02);
}
.notif-item.notif-with-thumb {
display: flex;
align-items: flex-start;
gap: 12px;
}
.notif-with-thumb .notif-thumb {
flex-shrink: 0;
width: 70px;
height: 70px;
border-radius: 4px;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.notif-with-thumb .notif-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.2s;
}
.notif-item:hover .notif-thumb img {
transform: scale(1.1);
}
.notif-with-thumb .notif-content {
flex: 1;
min-width: 0;
}
.notif-with-thumb .notif-info {
font-weight: bold;
color: var(--accent);
font-size: 0.9em;
margin-bottom: 2px;
}
.notif-with-thumb .notif-msg {
color: #ccc;
font-size: 0.85em;
line-height: 1.2;
}
.notif-time {
font-size: 0.75rem;
color: #888;
margin-top: 3px;
display: block;
}
.notif-expandable:hover .notif-reason-preview {
text-decoration: underline;
color: #ffcccc;
}
.notif-reason-full {
animation: slideDown 0.2s ease-out;
}
.notif-empty {
text-align: center;
font-size: smaller;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.notif-fade-out {
opacity: 0 !important;
transform: translateX(20px);
max-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin: 0 !important;
border: 0 !important;
transition: all 0.3s ease-in-out;
pointer-events: none;
overflow: hidden;
}
@keyframes notif-pulse {
0% {
box-shadow: 0 0 0 0 var(--accent, #e91e63);
background: rgba(233, 30, 99, .18);
}
50% {
box-shadow: 0 0 0 6px rgba(233, 30, 99, .0);
background: rgba(233, 30, 99, .1);
}
100% {
box-shadow: none;
background: transparent;
}
}
.notif-highlight {
animation: notif-pulse 1.2s ease-out 2;
border-radius: 6px;
}
/* Base style for all right sidebars */
.item-sidebar-right,
.index-sidebar-right,
.global-sidebar-right {
display: flex !important;
flex-direction: column !important;
position: fixed !important;
top: var(--navbar-h, 50px) !important;
bottom: 0 !important;
right: 0;
width: 300px;
max-width: 85%;
height: auto !important;
max-height: none !important;
background: var(--bg);
border-left: 1px solid var(--nav-border-color);
z-index: 900 !important;
/* below navbar dropdowns (1000+) but above page content */
transition: right 0.3s ease-in-out, visibility 0.3s !important;
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5) !important;
overflow: visible !important;
/* iOS Safari: allow vertical scroll but let JS handle horizontal swipe-to-close */
touch-action: pan-y;
}
body.sidebar-right-hidden .global-sidebar-right {
right: -300px !important;
}
/* Prevent native image drag from hijacking the sidebar mouse-drag gesture */
.global-sidebar-right img,
.item-sidebar-right img,
.index-sidebar-right img {
-webkit-user-drag: none;
user-select: none;
}
/* Edge zone drag handle — simple centered vertical pill */
#sidebar-drag-zone {
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s ease;
}
#sidebar-drag-zone::after {
content: '';
display: block;
width: 4px;
height: 40px;
border-radius: 2px;
background: var(--accent, #888);
transition: height 0.2s ease, opacity 0.2s ease;
}
#sidebar-drag-zone:hover {
opacity: 1;
}
/* Always show the handle on touch devices (no hover state available) */
@media (pointer: coarse) {
#sidebar-drag-zone {
opacity: 0.7;
justify-content: flex-end;
padding-right: 6px;
}
}
#sidebar-drag-zone:hover::after {
height: 56px;
}
/* Ensure intermediate tablet screens also hide correctly */
@media (max-width: 1199px) {
body.sidebar-right-hidden .item-sidebar-right,
body.sidebar-right-hidden .index-sidebar-right,
body.sidebar-right-hidden .global-sidebar-right {
right: -100% !important;
/* Fallback for variable width sidebars */
right: -300px !important;
}
}
/* ============================================================
ITEM PAGE LAYOUTS — Desktop (min-width: 1000px)
Two layouts, clearly scoped to body class.
body.layout-modern = 3-column (guests + use_new_layout members)
body.layout-legacy = 2-column scrolling (!use_new_layout members)
============================================================ */
@media (min-width: 1000px) {
/* ----------------------------------------------------------
LAYOUT: MODERN — 3-column viewport-locked grid
---------------------------------------------------------- */
body.layout-modern .item-layout-container {
display: grid;
grid-template-columns: 400px minmax(0, 1fr) 300px;
grid-template-rows: auto;
flex: 1;
min-height: calc(100vh - var(--navbar-h, 50px));
width: 100%;
height: auto;
overflow: visible;
transition: grid-template-columns 0.3s ease;
}
/* Collapsed right sidebar — grid track shrinks to 0 */
body.layout-modern.sidebar-right-hidden .item-layout-container {
grid-template-columns: 400px minmax(0, 1fr) 0px;
}
body.layout-modern .item-sidebar-left {
grid-column: 1;
height: calc(100vh - var(--navbar-h, 50px));
position: sticky;
top: var(--navbar-h, 50px);
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
border-right: 1px solid var(--nav-border-color);
z-index: 1;
}
body.layout-modern .item-layout-container .item-main-content {
grid-column: 2;
height: auto;
display: grid;
grid-template-rows: auto auto auto;
justify-items: center;
align-content: baseline; /*with center the layout shifts when item has favs, with baseline it stays consistent and expands to the bottom cleanly */
overflow: visible;
padding: 20px;
min-height: 0;
min-width: 0;
gap: 0;
}
body.layout-modern .item-layout-container .item-main-content ._204863 {
align-self: end;
}
body.layout-modern .item-layout-container .item-main-content .content {
align-self: center;
}
body.layout-modern .item-layout-container .item-main-content .metadata {
align-self: start;
}
/* Sidebar toggle: hide left sidebar (e.g. keybind toggle) */
body.layout-modern .item-layout-container.sidebar-hidden {
grid-template-columns: 1fr;
}
body.layout-modern .item-layout-container.sidebar-hidden .item-sidebar-left {
display: none;
}
body.layout-modern .item-layout-container.sidebar-hidden .item-main-content {
grid-column: 1;
}
body.layout-modern .item-sidebar-right,
body.layout-modern .global-sidebar-right {
grid-column: 3;
/* Inheritance from universal .item-sidebar-right (fixed, right: 0) */
}
body.layout-modern.sidebar-right-hidden .item-sidebar-right,
body.layout-modern.sidebar-right-hidden .global-sidebar-right {
/* Inheritance from universal body.sidebar-right-hidden .item-sidebar-right (right: -300px) */
min-width: 0;
}
/* Toggle tab button — positioned absolutely inside sidebar, pokes out left edge */
.item-sidebar-left {
position: relative;
}
/* Removed local sidebar and toggle overrides — now using universal rules */
/* Collapse right sidebar on narrower screens in modern view */
@media (max-width: 1400px) {
body.layout-modern .item-layout-container {
grid-template-columns: 400px minmax(0, 1fr);
}
/* Uses universal fixed slide-out logic; no need for display: none at this breakpoint */
}
/* ----------------------------------------------------------
LAYOUT: LEGACY — 2-column, natural page scroll
Right sidebar is fixed to viewport.
---------------------------------------------------------- */
body.layout-legacy .item-layout-container {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
height: auto !important;
overflow: visible !important;
}
body.layout-legacy.sidebar-right-hidden .item-layout-container {
grid-template-columns: 1fr;
}
body.layout-legacy .item-layout-container .item-main-content {
grid-column: 1;
display: flex !important;
flex-direction: column;
align-items: center;
height: auto !important;
max-height: none !important;
overflow: visible !important;
gap: 0;
padding: 20px;
}
body.layout-legacy .item-layout-container .item-main-content ._204863 {
align-self: center;
width: 100%;
}
body.layout-legacy .item-layout-container .item-main-content .content {
align-self: center;
width: 100%;
}
body.layout-legacy .item-layout-container .item-main-content .metadata {
align-self: center;
width: 800px;
max-width: 100%;
}
body.layout-legacy .item-layout-container #comments-container {
width: 800px;
max-width: 100%;
align-self: center;
flex: 0 0 auto !important;
z-index: 1;
}
body.layout-legacy .item-layout-container .user-infobox-block {
width: 800px;
max-width: 100%;
}
body.layout-legacy .item-layout-container .item-sidebar-right,
body.layout-legacy .item-layout-container .global-sidebar-right {
/* Inheritance from universal .item-sidebar-right (fixed, right: 0) */
grid-column: 2;
grid-row: 1 / span 10;
}
/* Slide the legacy sidebar off-screen — handled by universal rule */
}
.sidebar-activity {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
touch-action: pan-y;
/* iOS Safari: keep horizontal swipe-to-close claimable by JS */
}
.sidebar-activity-header {
padding: 15px;
font-weight: bold;
color: var(--accent);
border-bottom: 1px solid var(--nav-border-color);
font-family: 'VCR';
font-size: 0.9em;
letter-spacing: 1px;
}
#sidebar-activity-container.sidebar-comments-list {
flex: 1;
overflow-y: auto;
padding: 5px;
touch-action: pan-y;
}
#sidebar-activity-container.sidebar-comments-list .comment {
margin-bottom: 5px;
padding: 5px;
font-size: 0.9em;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.sidebar-activity .comment-content-inner {
display: block;
max-height: 80px;
/* Roughly 4-5 lines */
overflow: hidden;
position: relative;
white-space: pre-wrap;
}
/* Subtle fade to indicate more content */
.sidebar-activity .comment-content.has-overflow:not(.expanded) .comment-content-inner::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 20px;
background: linear-gradient(to bottom, transparent, rgba(28, 27, 27, 0.8));
pointer-events: none;
}
.sidebar-activity .comment-content.expanded .comment-content-inner {
max-height: unset;
overflow: visible;
}
.sidebar-activity .read-more-btn,
.sidebar-activity .see-less-btn {
background: none;
border: none;
color: var(--accent);
cursor: pointer;
padding: 0;
margin-top: 5px;
font-size: 0.85em;
display: none;
/* Hidden by default, shown via JS if overflow detected */
}
/* Avatar in sidebar activity */
.sidebar-avatar-link {
flex-shrink: 0;
display: flex;
}
.sidebar-avatar {
width: 24px;
height: 24px;
object-fit: cover;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.read-more-btn,
.see-less-btn {
display: inline;
padding: 0;
background: none;
border: none;
color: var(--accent);
font-size: inherit;
cursor: pointer;
opacity: 0.8;
text-decoration: underline;
text-underline-offset: 2px;
}
.read-more-btn:hover,
.see-less-btn:hover {
opacity: 1;
}
#sidebar-activity-container.sidebar-comments-list .comment:last-child {
border-bottom: none;
}
#sidebar-activity-container.sidebar-comments-list .comment-header {
margin-bottom: 4px;
}
/* Mobile Stacking for Legacy Mode (max-width: 999px) */
@media (max-width: 999px) {
.item-layout-container {
display: flex;
flex-direction: column;
width: 100%;
padding: 5px;
}
.item-layout-container .item-main-content {
order: 1;
/* Main content (video) on top */
/* padding: 10px; */
}
.item-sidebar-left {
order: 2;
/* Comments/Tags on bottom */
/* padding: 10px; */
z-index: 1;
}
/* Mobile Overrides if necessary — most styles now universal */
.item-sidebar-right,
.index-sidebar-right,
.global-sidebar-right {
width: 280px !important;
}
body.sidebar-right-hidden .item-sidebar-right,
body.sidebar-right-hidden .index-sidebar-right,
body.sidebar-right-hidden .global-sidebar-right {
right: -280px !important;
}
#sidebar-right-toggle {
top: 80% !important;
transform: none !important;
}
}
/* Common sizing for the Legacy content area */
.item-layout-container .item-main-content>._204863,
.item-layout-container .item-main-content>.content,
.item-layout-container .item-main-content>.metadata,
.item-layout-container .item-main-content #comments-container {
width: 100%;
max-width: 1100px;
/* Optional cap to prevent excessive width on huge screens */
min-height: 0;
min-width: 0;
}
.item-layout-container .item-main-content>.content {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.item-layout-container .item-main-content .media-object {
height: auto;
width: 100%;
max-width: 100%;
min-height: 0;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.item-layout-container .item-main-content .embed-responsive {
width: 100%;
max-width: calc(100vh * (16 / 9));
/* Cap width based on viewport height to fit vertically */
margin: 0 auto;
}
.item-main-content video,
.item-main-content img {
max-height: calc(100vh - 180px);
/* Leave space for ID and Metadata bars */
object-fit: contain;
}
#comments-container {
color: var(--white);
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
/* Modern: comments fill all remaining left-sidebar space; list scrolls internally */
body.layout-modern .item-sidebar-left #comments-container {
display: flex !important;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
body.layout-modern #comments-container .main-input {
order: -1;
}
/* Legacy: comments sit in the page flow, no forced height */
body.layout-legacy #comments-container {
display: flex !important;
flex-direction: column;
flex: 0 0 auto !important;
min-height: 0;
overflow: visible;
}
/* Pin tags + controls to the bottom of the left sidebar */
body.layout-modern .item-sidebar-left .sidebar-tags-container,
body.layout-modern .item-sidebar-left .tag-controls {
flex-shrink: 0;
}
#comments-container.faded-out {
opacity: 0;
pointer-events: none;
}
.comments-controls {
display: flex;
align-items: center;
gap: 5px;
}
.comments-controls button,
.comments-controls select {
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--nav-border-color);
color: var(--white);
padding: 0 10px;
height: 24px;
font-size: 11px;
text-transform: uppercase;
font-weight: 600;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s;
}
.comments-controls button:hover {
background: rgba(255, 255, 255, 0.2);
}
.admin-pin-btn,
.admin-edit-btn,
.admin-delete-btn {
background: none;
border: none;
padding: 0;
margin: 0;
color: #888;
cursor: pointer;
text-decoration: underline;
}
.admin-delete-btn:hover {
color: #ff4444;
}
.admin-pin-btn:hover,
.admin-edit-btn:hover {
color: var(--accent);
}
.comment-input {
margin-bottom: 5px;
background: rgba(255, 255, 255, 0.05);
padding: 5px;
border: 1px solid var(--nav-border-color);
border-radius: 0;
;
margin: 5px;
}
.comment-input textarea {
width: 100%;
background: rgba(0, 0, 0, 0.2);
border: none;
color: var(--white);
padding: 10px;
min-height: 80px;
resize: vertical;
border-radius: 0;
/* No rounded corners */
}
.input-actions {
margin-top: 10px;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 5px;
}
.submit-comment {
background: var(--accent);
color: var(--black);
border: none;
padding: 5px 15px;
font-weight: bold;
cursor: pointer;
border-radius: 0;
/* No rounded corners */
}
.submit-comment.loading {
pointer-events: none;
opacity: 0.7;
cursor: wait;
}
.cancel-reply {
background: transparent;
color: var(--white);
border: 1px solid var(--nav-border-color);
margin-left: 10px;
padding: 5px 10px;
cursor: pointer;
border-radius: 0;
}
.comments-list {
display: flex;
flex-direction: column;
gap: 5px;
padding-right: 5px;
padding-left: 5px;
padding-top: 5px;
}
body.layout-modern .comments-list {
position: relative;
display: flex;
flex-direction: column;
gap: 5px;
flex: 1 1 auto;
/* Grow to fill #comments-container */
overflow-y: auto;
/* Scroll comments here, not on the container */
overflow-x: hidden;
min-height: 0;
}
body.layout-legacy .comments-list {
position: relative;
display: flex;
flex-direction: column;
gap: 5px;
flex: 0 0 auto;
/* Natural height */
overflow: visible;
/* Unified scrolling */
min-height: 0;
}
body.layout-legacy .scroll-nav-wrapper {
position: absolute;
top: 0;
bottom: 0;
right: -50px;
width: 40px;
pointer-events: none;
z-index: 1000;
}
body.layout-legacy .scroll-to-bottom {
position: sticky;
top: calc(100vh - 80px);
width: 40px;
height: 40px;
background: var(--nav-bg);
border: 1px solid var(--nav-border-color);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto;
border-radius: 50%;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0.8;
}
body.layout-legacy .scroll-to-bottom:hover {
background: var(--nav-link-hover-bg);
opacity: 1;
transform: translateY(-2px);
}
body.layout-legacy .scroll-to-bottom .icon-up {
display: none;
}
body.layout-legacy .scroll-to-bottom.is-at-bottom .icon-up {
display: block;
}
body.layout-legacy .scroll-to-bottom.is-at-bottom .icon-down {
display: none;
}
body.layout-legacy .scroll-to-bottom svg {
width: 20px;
height: 20px;
}
.comments-list {
scrollbar-width: thin;
}
.comment {
display: flex;
gap: 15px;
padding: 10px;
background: rgba(255, 255, 255, 0.03);
/* Very light seethrough */
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 0;
/* No rounded corners */
position: relative;
padding-bottom: 25px;
/* Room for absolute permalink */
}
.comment.deleted {
opacity: 0.5;
}
.comment-avatar img {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 0;
/* Square avatars */
}
.comment-avatar::after {
content: "";
display: block;
height: 20px;
}
.comment-body {
flex: 1;
min-width: 0;
}
.comment-body {
flex: 1;
min-width: 0;
}
.comment-content p {
margin: 0;
}
.comment-header {
margin-bottom: 8px;
font-size: 0.85em;
color: #888;
display: flex;
justify-content: space-between;
align-items: flex-end;
line-height: normal;
flex-wrap: wrap;
gap: 2px 10px;
}
.comment-header-left {
display: flex;
align-items: center;
gap: 5px;
}
.pinned-badge {
background: var(--accent);
color: var(--nav-bg);
font-size: 0.8em;
padding: 1px 6px;
border-radius: 2px;
font-weight: bold;
display: inline-flex;
align-items: center;
gap: 3px;
line-height: 1;
margin-right: 5px;
}
.comment-header-left .pinned-badge {
padding: 2px 3px;
}
.pinned-badge svg {
width: 10px;
height: 10px;
display: block;
stroke-width: 3;
}
.comment-footer {
margin-top: 8px;
font-size: 0.85em;
color: #888;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 2px 10px;
}
.comment-footer-left,
.comment-footer-right {
display: flex;
align-items: center;
min-width: 0;
}
.comment-footer-right {
flex-grow: 1;
justify-content: flex-end;
}
.comment-actions {
display: flex;
align-items: center;
gap: 5px;
}
.comment-header button,
.comment-header a,
.comment-header span,
.comment-footer button,
.comment-footer a,
.comment-footer span {
padding: 0;
margin: 0;
line-height: 1;
font-family: inherit;
font-size: inherit;
vertical-align: top;
}
.comment-meta button,
.comment-meta a {
background: none;
border: none;
cursor: pointer;
color: #888;
padding-right: 8px;
display: flex;
align-items: center;
transition: color 0.1s;
text-decoration: none;
}
.comment-meta button svg,
.comment-meta a svg {
width: 14px;
height: 14px;
display: block;
margin-right: 2px;
}
.comment-header button:hover,
.comment-header a:hover,
.comment-footer button:hover,
.comment-footer a:hover {
color: var(--white);
}
.report-comment-btn:hover {
opacity: 1 !important;
color: var(--accent, #e91e63) !important;
}
.comment-permalink {
position: absolute;
bottom: 5px;
left: 10px;
font-size: 0.7em !important;
color: #555 !important;
white-space: nowrap;
font-family: 'VCR';
}
.comment-permalink:hover {
color: #888 !important;
}
.comment-author {
font-weight: bold;
color: var(--accent);
margin-right: 8px;
padding-right: 0 !important;
}
.comment-time {
margin-right: 5px;
font-size: 0.8em;
color: #777;
margin-bottom: 1px;
text-decoration: none;
align-self: baseline;
}
.comment-time:hover {
color: #aaa;
text-decoration: underline;
}
.admin-delete-btn:hover {
color: #ff4444 !important;
}
.admin-pin-btn.active {
color: var(--accent) !important;
}
.comment-permalink {
color: #666;
text-decoration: none;
}
.comment-permalink:hover {
text-decoration: underline;
}
.reply-btn,
.quote-btn {
background: none;
border: none;
color: #888;
cursor: pointer;
text-decoration: underline;
padding: 0;
margin: 0;
}
.comment-context-link {
color: var(--accent);
text-decoration: none;
font-family: 'VCR', monospace;
font-size: 0.9em;
opacity: 1;
}
.comment-context-link:hover {
opacity: 1;
text-decoration: underline;
}
.linear-view .comment {
margin-left: 0 !important;
}
.linear-view .comment-replies {
display: none !important;
}
@keyframes comment-highlight {
0% {
background: rgba(var(--accent-rgb, 255, 255, 255), 0.3);
}
100% {
background: rgba(255, 255, 255, 0.03);
}
}
.highlight-comment {
animation: comment-highlight 2s ease-out;
border-color: var(--accent) !important;
}
.comment-preview-popup {
background: #000000 !important;
/* Absolute solid black */
border: 1px solid var(--accent);
box-shadow: 0 20px 50px #000000;
/* Fully opaque black shadow */
padding: 15px;
max-width: 600px;
max-height: 500px;
overflow-y: auto;
pointer-events: auto;
opacity: 1 !important;
transform: translateY(5px);
animation: preview-fade-in 0.1s forwards ease-out;
/* Faster animation */
z-index: 1000001;
}
.comment-preview-popup .comment {
border: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
@keyframes preview-fade-in {
to {
transform: translateY(0);
}
}
.comment-backlinks {
display: inline-block;
font-size: 0.85em;
opacity: 0.8;
margin-left: 10px;
}
.comments-header-actions {
display: flex;
justify-content: flex-end;
margin-bottom: 15px;
padding: 0 5px;
}
.display-mode-selector {
display: flex;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding: 4px;
gap: 4px;
}
.mode-btn {
background: transparent;
border: none;
color: #888;
padding: 6px 14px;
cursor: pointer;
font-size: 0.8em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 8px;
}
.mode-btn:hover {
color: #fff;
background: rgba(255, 255, 255, 0.05);
}
.mode-btn.active {
background: var(--accent);
color: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.mode-btn i {
font-size: 1.1em;
}
.comment-backlinks a {
margin-left: 4px;
text-decoration: none;
color: var(--accent);
}
.comment-backlinks a:hover {
text-decoration: underline;
}
.comment-content {
line-height: 1.4;
word-break: break-word;
white-space: pre-wrap;
}
.spoiler {
background-color: #000 !important;
color: #000 !important;
cursor: pointer !important;
transition: color 0.1s;
border-radius: 4px;
pointer-events: auto !important;
/* Ensure interaction even if parent has pointer-events: none */
}
/* Ensure spoilers properly envelope media */
.spoiler:has(img, video, iframe, audio) {
display: inline-block;
max-width: 100%;
}
.spoiler:has(.vocaroo-embed-wrap, .video-embed-wrap, .yt-embed-wrap, .audio-embed-wrap, img, video, iframe, audio) {
display: inline-grid;
grid-auto-flow: column;
max-width: 100%;
vertical-align: middle;
}
.spoiler .vocaroo-embed-wrap,
.spoiler .video-embed-wrap,
.spoiler .yt-embed-wrap,
.spoiler .audio-embed-wrap {
display: inline-block;
vertical-align: middle;
width: auto;
max-width: 100%;
margin: 4px 2px;
}
.spoiler .yt-embed-wrap {
width: 480px;
/* YouTube needs a base width for the aspect ratio padding trick */
}
.spoiler img,
.spoiler video,
.spoiler iframe,
.spoiler audio,
.spoiler .sidebar-video-link {
display: inline-block;
vertical-align: middle;
filter: brightness(0);
background-color: #000 !important;
color: #000 !important;
pointer-events: none;
transition: filter 0.1s;
}
.spoiler .mention,
.spoiler a {
filter: brightness(0);
background-color: #000 !important;
color: #000 !important;
pointer-events: none;
transition: filter 0.1s;
}
.spoiler:hover {
color: #fff !important;
}
.spoiler:hover img,
.spoiler:hover video,
.spoiler:hover iframe,
.spoiler:hover audio,
.spoiler:hover .sidebar-video-link,
.spoiler:hover .mention,
.spoiler:hover a {
filter: none;
background-color: transparent !important;
color: inherit !important;
pointer-events: auto;
}
.spoiler.revealed {
color: #fff !important;
}
.spoiler.revealed img,
.spoiler.revealed video,
.spoiler.revealed iframe,
.spoiler.revealed audio,
.spoiler.revealed .sidebar-video-link,
.spoiler.revealed .mention,
.spoiler.revealed a {
filter: none;
background-color: transparent !important;
color: inherit !important;
pointer-events: auto;
}
.blur-text {
filter: blur(10px);
cursor: pointer !important;
transition: filter 0.2s ease;
pointer-events: auto !important;
display: inline-block;
max-width: 100%;
}
.blur-text:hover,
.blur-text.revealed {
filter: blur(0);
}
.blur-text img,
.blur-text video,
.blur-text iframe,
.blur-text audio,
.blur-text .vocaroo-embed-wrap,
.blur-text .video-embed-wrap,
.blur-text .yt-embed-wrap,
.blur-text .audio-embed-wrap {
filter: blur(10px);
transition: filter 0.2s ease;
}
.blur-text:hover img,
.blur-text:hover video,
.blur-text:hover iframe,
.blur-text:hover audio,
.blur-text:hover .vocaroo-embed-wrap,
.blur-text:hover .video-embed-wrap,
.blur-text:hover .yt-embed-wrap,
.blur-text:hover .audio-embed-wrap,
.blur-text.revealed img,
.blur-text.revealed video,
.blur-text.revealed iframe,
.blur-text.revealed audio,
.blur-text.revealed .vocaroo-embed-wrap,
.blur-text.revealed .video-embed-wrap,
.blur-text.revealed .yt-embed-wrap,
.blur-text.revealed .audio-embed-wrap {
filter: none;
}
.comment-children {
margin-top: 15px;
margin-left: 10px;
border-left: 1px solid var(--nav-border-color);
padding-left: 15px;
}
@media screen and (max-width: 600px) {
.comment-children {
margin-left: 5px;
padding-left: 8px;
}
}
.loading,
.error {
text-align: center;
padding: 20px;
color: #888;
}
.deleted-msg {
color: #666;
font-style: italic;
}
html[theme="f0ck95"] #tags .badge>a:first-child {
text-shadow: 1px 1px #8080805e;
}
html[theme="f0ck95"] .badge.badge-greentext.badge-light.mr-2 {
color: #b5bd68;
}
html[theme="f0ck95"] .pagination>span {
border: 1px dashed grey !important;
color: black;
text-shadow: none;
}
html[theme="f0ck95"] .dropdown-menu {
border-color: gray;
}
html[theme="f0ck95"] .err span {
text-shadow: 0px 0px transparent;
}
html[theme="f0ck95"] .err {
background: silver;
border: outset 2px gray;
}
html[theme="f0ck95"] div.posts>a::after {
color: var(--white);
}
html[theme="f0ck95"] .about {
color: black;
}
html[theme="f0ck95"] .badge-dark,
#themeselector {
border: inset 1px gray;
background: #a8a5a5;
}
html[theme="f0ck95"] .badge-light {
color: #000;
text-shadow: none;
border: 1px outset;
border-radius: 0;
}
html[theme="f0ck95"] .badge-success {
color: #000;
text-shadow: none;
border: 1px outset;
border-radius: 0;
}
html[theme="f0ck95"] .badge-danger {
color: #000;
text-shadow: none;
border: 1px outset;
border-radius: 0;
}
html[theme="f0ck95"] img.avatar {
border-top-left-radius: 0;
}
html[theme="f0ck95"] ._204863 {
content: " ";
background: -webkit-linear-gradient(left, #08216b, #a5cef7);
text-align: left;
width: 100%;
color: white;
height: auto;
border-left: inset 2px silver;
border-top: inset 2px silver;
border-right: outset 2px silver;
border-bottom: outset 2px silver;
line-height: 1.7;
}
html[theme="f0ck95"] .iconset#a_delete {
stroke: var(--black);
}
html[theme="f0ck95"] .iconset#a_favo {
fill: var(--black);
}
html[theme="f0ck95"] .gapD {
height: 16px;
background: #08f;
width: max-content;
display: flex;
}
html[theme="f0ck95"] svg.iconset {
display: inline-block;
height: 18px;
cursor: pointer;
width: 21px;
background: silver;
margin: 1px;
padding: 1px;
border: 1px outset silver;
position: relative;
right: 2px;
}
html[theme="f0ck95"] .gapRight {
display: flex;
align-items: center;
}
html[theme="f0ck95"] input {
color: #000;
}
html[theme="f0ck95"] .embed-responsive-image {
left: 2px;
right: 2px;
}
html[theme="f0ck95"] ._error_message {
color: black;
text-shadow: none;
}
html[theme="f0ck95"] ._error_topbar {
background: -webkit-linear-gradient(left, #08216b, #a5cef7);
}
html[theme="f0ck95"] .f0ckgle {
color: black;
}
html[theme="f0ck95"] .admin-search button {
color: black;
}
/* f0ck95dARK */
html[theme='f0ck95d'] {
--accent: #fff;
--bg: #0e0f0f;
--black: #000;
--white: #fff;
--gray: silver;
--nav-bg: #0b0a0a;
--nav-brand-border: inset 1px black;
--nav-brand-bg: #0000;
--navigation-links-bg: #0b0b0b;
--navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0);
--navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
--navigation-links-box-shadow: rgba(255, 255, 255, .05);
--nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
--nav-link-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
--nav-link-hover-bg: #333131;
--nav-border-color: #282727;
--dropdown-bg: #333131;
--dropdown-item-hover: #444242;
--nav-brand-font: 'VCR';
--font: monospace;
--pagination-background: #0b0a0a;
--pagination-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
--pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
--pagination-background-hover: #8a8989;
--pagination-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
--metadata-bg: #0b0a0a;
--badge-bg: #0f0e0e;
--posts-meta-bg: #000000b8;
--badge-sfw: teal;
--badge-nsfw: #a72828;
--badge-tag: #2f2f2f;
--scrollbar-color: #555;
--scroller-bg: #424242;
--footbar-color: #fff;
--loading-indicator-color: #fff;
--img-border-width: 0;
--img-border-color: #808080;
--maximize_button: #fff;
--bg-gradient: linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgb(6, 6, 6) 10%, rgb(43, 43, 43) 100%);
/* appearance */
background: black;
--motd-bg: #111;
}
html[theme="f0ck95d"] .err {
background: #4c4c4c;
border: 2px outset gray;
}
html[theme="f0ck95d"] ._error_topbar {
background: #081f3e;
}
html[theme="f0ck95d"] ._204863 {
content: " ";
background: -webkit-linear-gradient(left, #0e111a, #073c71);
text-align: left;
width: 100%;
color: white;
height: auto;
border-left: inset 2px silver;
border-top: inset 2px silver;
border-right: outset 2px silver;
border-bottom: outset 2px silver;
line-height: 1.7;
}
html[theme="f0ck95d"] .embed-responsive-image {
left: 2px;
right: 2px;
}
html[theme="f0ck95d"] .media-object {
border-left: inset 2px silver;
border-right: outset 2px silver;
}
html[theme="f0ck95d"] .embed-responsive.embed-responsive-16by9 {
background: black;
border-left: inset 1px silver;
border-right: outset 1px silver;
}
html[theme="f0ck95d"] .embed-responsive-image {
border: none;
}
html[theme="f0ck95d"] .embed-responsive-image {
background: #0000;
}
html[theme="f0ck95d"] html,
body {
color: var(--white);
}
html[theme="f0ck95d"] a {
color: var(--white);
}
html[theme="f0ck95d"] span#favs {
border: inset 1px gray;
background: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
background-image: linear-gradient(to bottom, var(--nav-link-background-linear-gradient));
}
html[theme="f0ck95d"] .nav-link,
.pagination>a,
.pagination>span {
border-radius: 0;
border-left: inset 1px black;
border-bottom: outset 1px black;
border-right: outset 1px black;
border-top: 1px inset black;
}
html[theme="f0ck95d"] .metadata {
border-left: inset 1px silver;
border-bottom: outset 1px silver;
border-right: outset 1px silver;
border-top: inset 2px silver;
color: var(--accent);
}
html[theme="f0ck95d"] .media-object {
border-left: inset 1px silver;
border-right: outset 1px silver;
}
html[theme="f0ck95d"] span.placeholder {
border-left: 1px solid var(--gray);
opacity: 0.5;
}
html[theme="f0ck95d"] #prev {
color: white;
}
html[theme="f0ck95d"] #next {
color: white;
}
/* same */
/* html[theme="f0ck95d"] .navbar-brand:hover {
background: transparent;
} */
html[theme="f0ck95d"] .pagination>span {
border: 1px dashed var(--accent) !important;
color: white;
text-shadow: none;
}
html[theme="f0ck95d"] .dropdown-menu {
border-left: inset 1px #4c4c4c;
border-bottom: outset 1px #4c4c4c;
border-right: outset 1px #4c4c4c;
border-top: outset 0px #4c4c4c;
}
html[theme="f0ck95d"] .err span {
text-shadow: 0px 0px transparent;
}
html[theme="f0ck95d"] div.posts>a::after {
color: var(--white);
}
html[theme="f0ck95d"] .about {
color: var(--white);
}
html[theme="f0ck95d"] .badge-dark,
#themeselector {
border: inset 1px gray;
background: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
background-image: linear-gradient(to bottom, var(--nav-link-background-linear-gradient));
box-shadow: var(--nav-link-box-shadow);
}
html[theme="f0ck95d"] .badge-light {
text-shadow: none;
border: 1px outset;
border-radius: 0;
}
html[theme="f0ck95d"] .badge-success {
text-shadow: none;
border: 1px outset;
border-radius: 0;
}
html[theme="f0ck95d"] .badge-danger {
text-shadow: none;
border: 1px outset;
border-radius: 0;
}
html[theme="f0ck95d"] .admin-search button {
color: black;
}
/* fullscreen */
html[res="fullscreen"] ._204863 {
border-top: none;
}
html[res="fullscreen"] .metadata {
border-bottom: none;
}
html[res="fullscreen"] .embed-responsive-16by9::before {
padding-top: 32.99%;
}
html[res="fullscreen"] .container {
max-width: 80% !important;
padding: 0 !important;
}
@media screen and (max-width: 600px) {
html[res="fullscreen"] .container {
max-width: 100% !important;
}
html[res="fullscreen"] #main {
padding: 0 !important;
}
}
html[res="fullscreen"] span#favs {
padding: 0 !important;
}
/* Global scrollbar rules */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-color);
background-clip: content-box;
border: 3px solid transparent;
border-radius: 10px;
transition: background-color 0.2s;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--accent);
}
::-webkit-scrollbar-track {
background-color: transparent;
}
* {
scrollbar-color: var(--scrollbar-color) transparent;
scrollbar-width: thin;
}
/* Linux Firefox "thin" is often too small and hard to see. Use auto there. */
html.is-linux.is-firefox * {
scrollbar-width: auto;
}
*,
::before,
::after {
box-sizing: border-box;
outline: 0;
-webkit-tap-highlight-color: transparent;
}
@font-face {
font-family: 'VCR';
src: url('/s/vcr.ttf') format('truetype');
/* https://www.dafont.com/vcr-osd-mono.font */
}
html {
background-color: var(--bg) !important;
background: var(--bg) !important;
}
body {
background: transparent !important;
color: var(--white);
margin: 0;
font-family: var(--font);
line-height: 2;
overflow-x: clip;
font-size: 14px;
}
html {
width: 100%;
height: 100%;
scrollbar-gutter: stable;
}
.noscript-badge {
display: block;
}
a {
color: var(--accent)
/* !important */
;
cursor: pointer;
text-decoration: none;
display: inline-block;
}
a.post_source:hover,
a.id-link:hover {
text-decoration: underline;
}
a.btn.disabled {
pointer-events: none;
user-select: none;
}
.btn.disabled,
.btn:disabled {
user-select: none;
font-weight: bold;
text-shadow: 1px 1px 1px var(--black);
}
h5 {
margin: 0;
font-size: x-large;
}
.mr-2 {
margin-right: 0.5rem !important;
}
div.posts {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
justify-items: center;
grid-gap: 5px;
margin: 0;
padding: 0;
margin-bottom: 35px;
}
/* Mobile: Ensure 3 columns of thumbnails */
@media (max-width: 600px) {
div.posts {
grid-template-columns: repeat(3, 1fr);
}
}
div.posts>a:not(.notif-item) {
display: inline-block;
position: relative;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
div.posts>a:not(.notif-item)::before {
content: "";
display: block;
margin-top: 100%;
}
div.posts>a:not(.notif-item):hover,
div.posts>a:not(.notif-item).touch-active {
box-shadow: 0 0 0 1px var(--white);
}
div.posts>a:not(.notif-item)::after {
position: absolute;
right: 0;
top: 0;
content: attr(data-ext) " / " attr(data-user);
color: var(--white);
text-shadow: 0px 1px var(--black);
font-size: 10px;
background: var(--posts-meta-bg);
visibility: hidden;
width: 100%;
text-align: center;
font-family: vcr;
text-transform: uppercase;
}
div.posts>a:not(.notif-item):hover::after,
div.posts>a:not(.notif-item).touch-active::after {
visibility: visible;
}
/* Navbar */
.nav {
background: var(--bg);
text-align: left;
}
/* .navbar layout defined in view-specific navbar section below */
.navbar.scrolled {
background: var(--nav-bg) !important;
/*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);*/
}
.navbar.scrolled .navbar-brand {
/*background: transparent !important;*/
}
.navbar-brand {
padding-right: 5px;
padding-left: 5px;
}
.navbar-brand:hover {
text-decoration: none;
transition: ease all .2s;
background: var(--black);
}
span.f0ck {
font-family: var(--nav-brand-font);
font-size: 20px;
text-shadow: 1px 1px 1px var(--black), 0px 0px 0px var(--green), -1px -1px 0px var(--black), 1px -1px 0px var(--black), -1px 1px 0px var(--black), 0px 0px 0px var(--green);
}
.navbar.navbar-expand-lg {
background: var(--nav-bg);
}
.navbar-expand-lg .navbar-collapse {
display: flex;
flex-basis: auto;
}
.navbar-collapse {
flex-grow: 1;
}
#navbarSupportedContent {
padding: 0;
}
.nav-link-identifier {
width: 100%;
}
.navbar-expand-lg .navbar-nav {
flex-direction: row;
}
.navbar-nav {
width: 100%;
display: flex;
flex-direction: column;
padding: 5px 0 5px 0;
margin-bottom: 0;
list-style: none;
margin: 0;
align-self: center;
margin-left: .5rem;
margin-right: .5rem;
}
ul.navbar-nav li.nav-item {
margin-right: .5rem;
}
.navigation-links {
display: flex;
border: 1px solid var(--navigation-links-border-color);
background: var(--navigation-links-bg);
}
.nav-item {
width: auto;
white-space: nowrap;
text-align: center;
}
.nav-link {
padding: 0;
padding-right: 0;
padding-left: 0;
display: flex;
justify-content: center;
min-width: 17px;
border: 1px solid var(--black);
border-radius: 3px;
background-image: linear-gradient(to bottom, var(--nav-link-background-linear-gradient));
box-shadow: var(--nav-link-box-shadow);
}
.navbar-expand-lg .navbar-nav .nav-link,
.pagination>a,
.pagination>span {
padding-right: .5rem;
padding-left: .5rem;
}
.pagination>a,
.pagination>span {
margin-right: 0px;
margin-left: 5px;
}
.nav-item:hover>a:hover,
.dropdown-item:hover>a:hover {
background-color: var(--nav-link-hover-bg);
}
.nav-link[data-toggle="dropdown"].ddcontent::after {
content: "\00a0(" attr(content) ")\00a0\25bc";
}
.nav-link[data-toggle="dropdown"]:not(.ddcontent)::after {
content: "\00a0\25bc";
}
.mandy {
visibility: hidden;
}
@media (max-width: 444px) {
.mandy {
position: fixed;
width: inherit;
height: 100%;
top: 0;
z-index: -1;
bottom: 25px;
visibility: visible;
}
#randbutton {
height: inherit;
width: inherit;
background: var(--bg);
border: none;
transition: .2s ease;
}
#randbutton:active {
background: var(--gray);
transition: .2s ease;
}
/* .metadata {
margin-bottom: 45px;
} */
.embed-responsive-16by9::before {
padding-top: 75% !important;
}
.pagination {
justify-content: center !important;
}
}
@media (max-width: 1240px) {
.nav-link[data-toggle="dropdown"]::after {
content: "" !important;
}
}
@media (max-width: 768px) {
/* .nav-link[data-toggle="dropdown"]::after {
content: "" !important;
} */
.fa-solid.fa-angle-up, .fa-regular.fa-image {
margin-right: 5px;
}
.navbar {
display: flex !important;
flex-wrap: wrap !important;
}
.navbar-header {
flex: 1;
}
.nav-right-group {
flex-shrink: 0;
margin-left: 0;
padding: 0 8px;
}
/* nav-left-group / navbarContent spans full width on the second row */
.nav-left-group {
width: 100%;
order: 10;
}
.navbar-brand {
grid-area: unset !important;
}
.navigation-links {
grid-row: 2;
}
.navbar-expand-lg .navbar-nav {
justify-content: center;
}
#navbarSupportedContent {
grid-row: 3;
}
/* On mobile: center the notification dropdown in the viewport */
.nav-right-group .notif-dropdown {
right: 0;
left: auto;
transform: none;
}
/* Hide caret arrow on mobile */
.nav-right-group .notif-dropdown::before,
.nav-right-group .notif-dropdown::after {
display: none;
}
}
span.placeholder {
border-left: 1px solid var(--accent);
margin-left: 3px;
user-select: none;
}
.navbar .nav-item .dropdown-menu {
display: none;
}
.dropup,
.dropright,
.dropdown,
.dropleft {
position: relative;
}
.navbar .nav-item:hover .dropdown-menu {
display: block;
}
.dropdown:hover .nav-link {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
transition: .2s ease;
background-color: var(--nav-link-hover-bg);
}
.navbar-nav .dropdown-menu {
float: none;
}
.dropdown-menu {
background: var(--dropdown-bg);
position: absolute;
top: 100%;
width: 100%;
z-index: 1000;
min-width: calc(100% - 10px);
padding: 0;
margin: 0;
font-size: 1rem;
text-align: center;
list-style: none;
border-left: 1px solid;
border-right: 1px solid;
border-bottom: 1px solid;
border-color: var(--black);
}
.dropdown-item {
width: 100%;
display: block;
}
.dropdown-menu>li:hover {
background: var(--dropdown-item-hover);
}
.dropdown-menu a {
width: 100%;
display: inline-block;
}
@media (max-width: 1056px) {
/* Navbar grid layout removed for modern-navbar compatibility */
.pagination-container-fluid {
justify-content: center;
}
.pagination {
justify-content: flex-end !important;
}
.pagination a:nth-last-child(2),
.pagination a:nth-last-child(3),
.pagination a:nth-child(2),
.pagination a:nth-child(3) {
display: none;
}
html,
body {
text-align: center;
}
}
@media (max-width: 1325px) {
/* ranking page - idea */
/* .ranking {
grid-template-columns: 1fr 1fr !important;
} */
.by-user,
.by-stats,
.by-hoster {
grid-column: unset !important;
grid-row: unset !important;
}
}
@media (max-width: 905px) {
.ranking {
display: flex !important;
flex-flow: column;
justify-content: center !important;
}
.ranking div {
display: flex;
flex-flow: column;
}
}
.media-object {
text-align: center;
align-self: center;
overflow: hidden;
border: 1px solid #363636;
border-top: none;
}
/* Pagination */
.pagination-wrapper {
align-items: center;
display: flex;
background: var(--pagination-background);
border: 1px solid var(--pagination-border-color);
width: 100%;
}
.pagination-container-fluid {
display: flex;
margin-left: 0;
width: 100%;
justify-content: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
/* Allow clicking through container if needed, but not on wrapper */
z-index: 10;
}
.bottom-pagination.fixed-pagination {
margin: 10px auto;
pointer-events: auto;
background: rgba(15, 15, 15, 0.75);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
padding: 2px;
max-width: fit-content;
}
/* Ensure pagination container is hidden when requested */
.pagination-container-fluid[style*="display: none"] {
display: none !important;
}
.pagination {
display: flex;
justify-content: space-around;
width: 100%;
padding: 5px;
color: transparent;
}
.pagination>a,
.pagination>span {
float: left;
padding: 0 5px;
min-width: 17px;
font-size: 14px;
font-weight: 500;
color: var(--accent);
text-align: center;
}
.pagination>span {
border: 1px solid var(--accent) !important;
}
.pagination :first-child {
margin-left: 0;
}
.pagination>a {
text-decoration: none;
text-shadow: 0 1px var(--black);
background-clip: padding-box;
box-shadow: var(--pagination-anchor-box-shadow);
background-image: linear-gradient(to bottom, var(--nav-link-background-linear-gradient));
}
.pagination>a:hover {
background-color: var(--pagination-background-hover);
}
.pagination>a:active,
.pagination>span {
color: var(--accent);
text-shadow: 0 -1px var(--black);
box-shadow: var(--pagination-anchor-box-shadow);
box-shadow: inset 0px -2px 0px var(--accent);
}
/* Content */
@media (max-width: 999px) {
.container {
max-width: 960px;
}
.dropdown-menu {
position: absolute;
left: 0;
}
.dropdown-menu li {
white-space: normal;
word-wrap: anywhere;
}
}
.content {
display: grid;
justify-content: space-around;
grid-template-columns: 0fr 1fr 0fr;
position: relative;
max-width: 100%;
}
.container {
width: 100%;
margin-right: auto;
margin-left: auto;
z-index: 1;
position: relative;
padding-top: 5vh;
padding-bottom: 15px;
}
.populateME {
position: relative;
left: 5px;
}
.gapRight {
align-items: center;
display: flex;
}
.admin-lock-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 20px;
min-width: 21px;
cursor: pointer;
background: #312c2c;
margin: 1px;
padding: 0 2px;
border: 1px outset #221d1d;
color: var(--white);
font-size: 11px;
text-transform: uppercase;
line-height: normal;
transition: all 0.1s ease;
vertical-align: middle;
}
.iconset-svg {
width: 14px;
height: 14px;
fill: currentColor;
stroke: none;
display: block;
}
#a_hall {
color: inherit;
}
.gapLeft {
align-self: center;
}
.imageDoor {
width: 25px;
height: 29px;
display: inline-flex;
padding: 2px;
}
.imageDoor img {
background: var(--accent);
width: inherit;
}
._204863 {
content: " ";
background: -webkit-linear-gradient(left, #131313, #4f4a4f);
text-align: left;
width: 100%;
color: var(--white);
height: auto;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: auto 1fr auto;
line-height: 1.7;
border: 1px solid #363636;
z-index: 1;
position: relative;
}
.location {
padding-left: 5px;
}
/* Index page layout with sidebar */
.index-layout-wrapper {
display: flex;
width: 100%;
gap: 0;
}
.index-layout-wrapper .index-container {
flex: 1;
min-width: 0;
}
@media (min-width: 1200px) {
/* Reserve space for the fixed sidebar so content doesn't flow behind it */
.index-layout-wrapper {
padding-right: 300px;
}
/* Collapse reserved space when sidebar is hidden */
body.sidebar-right-hidden .index-layout-wrapper {
padding-right: 0;
}
}
.index-container {
width: 100%;
padding: 5px;
margin: 0px 20px 0px 20px;
}
@media (min-width: 361px) {
.embed-responsive-image {
bottom: unset !important;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
.embed-responsive-image {
bottom: unset !important;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
.embed-responsive-image {
bottom: unset !important;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
.embed-responsive-image {
bottom: unset !important;
}
}
@media (min-width: 576px) {
.container {
max-width: 100%;
}
}
@media (min-width: 768px) {
.container {
max-width: 100%;
}
}
@media (min-width: 992px) {
.container:not(:has(.item-layout-container)) {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container:not(:has(.item-layout-container)) {
max-width: 1140px;
}
}
.embed-responsive {
position: relative;
display: block;
width: 100%;
padding: 0;
overflow: hidden;
}
.embed-responsive-16by9::before {
padding-top: 56.25%;
}
.embed-responsive-4by3::before {
padding-top: 75%;
}
.embed-responsive::before {
display: block;
content: "";
}
.embed-responsive .embed-responsive-item,
.embed-responsive video,
#ruffle-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
object-fit: contain;
touch-action: none;
user-select: none;
}
.ruffle-gesture-overlay {
position: absolute;
top: 0;
right: 0;
width: 5%;
height: 100%;
z-index: 10;
pointer-events: auto;
}
@media (max-width: 768px) {
.ruffle-gesture-overlay {
display: none;
/* No overlay on mobile to keep Flash interactive */
}
}
/* Danmaku toggle button on Ruffle embeds — appears on hover */
.ruffle-danmaku-toggle {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 8px;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: rgba(255, 255, 255, 0.45);
font-size: 16px;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.embed-responsive:hover .ruffle-danmaku-toggle,
#ruffle-container:hover .ruffle-danmaku-toggle {
opacity: 1;
pointer-events: auto;
}
.ruffle-danmaku-toggle:hover {
background: rgba(0, 0, 0, 0.75);
border-color: rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 0.85);
}
.ruffle-danmaku-toggle.active {
color: var(--accent, #9f0);
border-color: var(--accent, #9f0);
background: rgba(0, 0, 0, 0.65);
}
.ruffle-danmaku-toggle.active:hover {
background: rgba(0, 0, 0, 0.8);
}
/* Strikethrough line when inactive */
.ruffle-danmaku-toggle:not(.active)::after {
content: '';
position: absolute;
top: 50%;
left: 15%;
width: 70%;
height: 2px;
background: rgba(255, 80, 80, 0.8);
transform: rotate(-45deg);
border-radius: 1px;
pointer-events: none;
}
.embed-responsive-image {
position: absolute;
top: 0;
left: 0;
right: 0;
width: auto;
height: 100%;
box-sizing: content-box;
scrollbar-color: var(--scrollbar-color) transparent;
scrollbar-width: thin;
border-top: none;
}
.previous-post,
.next-post {
display: flex;
height: 100%;
position: relative;
}
#prev {
z-index: 1;
font-size: 30px;
opacity: 0.6;
text-shadow: 2px 2px 2px var(--black);
padding: 25px;
}
#prev::before {
content: "\00BB";
}
#next::before {
content: "\00AB";
}
#next {
z-index: 1;
font-size: 30px;
opacity: 0.6;
text-shadow: 2px 2px 2px var(--black);
padding: 25px;
}
#next:hover,
#prev:hover {
opacity: 1;
}
.arrow-next {
height: 100%;
display: flex;
width: 100%;
align-items: center;
justify-content: start;
position: absolute;
}
.arrow-prev {
height: 100%;
display: flex;
width: 100%;
align-items: center;
justify-content: flex-end;
position: absolute;
}
/* image */
#f0ck-image {
height: 100%;
width: 100%;
max-width: 100%;
object-fit: contain;
}
a#elfe {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
}
/* metadata */
/* Hall badge — compact primary + overflow pill */
.hall-badge-wrap {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 1.5px 5px;
}
.hall-badge-primary {
color: var(--accent);
text-decoration: none;
font-size: inherit;
}
.hall-badge-primary:hover {
text-decoration: underline;
}
a.remove-from-hall {
color: rgba(255, 255, 255, 0.4);
font-size: 0.8em;
text-decoration: none;
vertical-align: middle;
line-height: 1;
transition: color 0.15s;
}
a.remove-from-hall:hover {
color: #e74c3c;
}
.hall-overflow-pill {
position: relative;
display: inline-flex;
align-items: center;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 3px;
padding: 0 4px;
font-size: 0.78em;
color: rgba(255, 255, 255, 0.55);
cursor: default;
line-height: 1.6;
user-select: none;
}
.hall-overflow-pill:hover {
color: var(--white);
background: rgba(255, 255, 255, 0.14);
}
.hall-overflow-tooltip {
display: none;
position: absolute;
bottom: calc(100% + 5px);
left: 50%;
transform: translateX(-50%);
background: var(--dropdown-bg, #1e1e1e);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 4px;
padding: 4px 0;
min-width: 120px;
max-width: 200px;
z-index: 200;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
white-space: nowrap;
}
.hall-overflow-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: rgba(255, 255, 255, 0.15);
}
.hall-overflow-pill:hover .hall-overflow-tooltip {
display: block;
}
.hall-overflow-tooltip a {
display: block;
padding: 3px 10px;
color: var(--white);
text-decoration: none;
font-size: 0.9em;
transition: background 0.1s;
}
.hall-overflow-tooltip a:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--accent);
}
#halls-container {
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 768px) {
#halls-container {
grid-template-columns: 1fr 1fr;
}
}
.badge:empty {
display: none;
}
.metadata {
text-align: center;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background-color: var(--metadata-bg);
border: 1px solid #363636;
border-top: none;
z-index: 1;
position: relative;
}
#themeselector {
color: var(--white);
border: 0;
margin: 0;
padding: 0;
font-family: var(--font);
background-color: var(--metadata-bg);
text-align: center;
}
.badge-dark,
#themeselector {
background-color: var(--badge-bg);
border: 1px solid var(--black);
/*margin: 5px;*/
}
.badge.badge-dark.image-source {
white-space: normal;
word-wrap: anywhere;
}
@keyframes newTagGlow {
0% {
background-color: #302f2fa3;
}
100% {}
}
.new-tag-glow {
animation: newTagGlow 1s ease-out;
}
span#tags {
grid-column: 1/4;
display: inline-block;
vertical-align: middle;
padding-top: 2.5px;
padding-bottom: 2.5px;
}
span#tags:empty {
display: none;
}
.tags-inner {
display: contents;
}
span#tags .tags-inner>span {
display: inline-block;
margin-top: 2.5px;
margin-bottom: 2.5px;
}
span#tags:not(.tags-expanded) .tags-inner>span:nth-child(n+11) {
display: none;
}
.show-tags-toggle {
font-size: 0.8em;
color: var(--accent);
margin-top: 5px;
cursor: pointer;
text-decoration: underline;
vertical-align: middle;
}
.badge-success {
color: var(--white);
background-color: var(--badge-sfw);
padding-right: 5px;
padding-left: 5px;
padding-top: 1.5px;
padding-bottom: 1.5px;
border-radius: 3px;
text-shadow: 1px 1px var(--black);
text-transform: uppercase;
}
.badge-danger {
color: var(--white);
background-color: var(--badge-nsfw);
padding-right: 5px;
padding-left: 5px;
padding-top: 1.5px;
padding-bottom: 1.5px;
border-radius: 3px;
text-shadow: 1px 1px var(--black);
text-transform: uppercase;
}
.badge-light {
color: var(--white);
background-color: var(--badge-tag);
border-radius: 3px;
text-shadow: 1px 1px var(--black);
padding-right: 5px;
padding-left: 5px;
padding-top: 1.5px;
padding-bottom: 1.5px;
}
.badge-greentext {
color: #789922;
text-shadow: inherit !important;
background-color: #252525;
}
.badge-greentext .tag-name {
color: #789922 !important;
}
.badge-german {
background: linear-gradient(180deg, black 33.33%, red 33.33%, red 66.66%, yellow 66.66%) !important;
}
.badge-dutch {
background: linear-gradient(180deg, #ad1c23 33.33%, white 33.33%, white 66.66%, #26468f 66.66%) !important;
color: #000 !important;
}
.badge-void {
background: #000 !important;
color: #000 !important;
}
.about {
padding: 10px;
color: white;
word-break: break-word;
background: var(--navigation-links-bg);
text-align: left;
}
@media (max-width: 999px) {
.index-container {
padding-left: 5px;
padding-right: 5px;
}
}
/* .pbwork box-shadow removed as per user request */
/* .navbar.pbwork::after handles the top progress bar now */
@media(max-height: 820px) {
.embed-responsive-16by9::before {
padding-top: 50.25%;
}
}
@media(max-height: 755px) {
.embed-responsive-16by9::before {
padding-top: 42.25%;
}
}
@media(max-height: 640px) {
.embed-responsive-16by9::before {
padding-top: 36.25%;
}
}
@media(max-height: 525px) {
.embed-responsive-16by9::before {
padding-top: 26.25%;
}
}
@media(max-height: 414px) {
.embed-responsive-16by9::before {
padding-top: 16.25%;
}
}
@media(max-height: 300px) {
.embed-responsive-16by9::before {
padding-top: 14.5%;
}
}
@media(max-width: 580px) {
.embed-responsive-16by9::before {
padding-top: 100%;
}
}
@media(max-width: 555px) {
.metadata {
grid-template-columns: 1fr 1fr;
}
span#tags {
grid-column: 1/3;
}
a#prev:focus,
a#next:focus {
background: var(--nav-bg);
border-radius: 350px;
opacity: 0.6;
transition: .2s ease-in-out;
}
span#favs {
grid-column: 1/3 !important;
}
}
.post_source {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 20ch;
display: inline-block;
}
audio::-webkit-media-controls {
filter: invert(100%) contrast(2) opacity(95%) hue-rotate(180deg);
}
audio::-webkit-media-controls-timeline {
filter: contrast(0);
}
div.about>div {
float: right;
max-width: 500px;
margin-left: 5px;
}
div.about>div img {
max-width: 99%;
height: auto;
}
div.about>div p {
font-size: 7pt;
margin-top: 0;
}
/* loginform */
body[type='login'] {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.login-form {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 20px;
background: rgba(0, 0, 0, 0.8);
border-radius: 0;
border: 1px solid var(--accent);
}
.login-form button[type="submit"] {
width: 100%;
margin: 18px 0 9px 0;
background: var(--bg);
border: 1px solid var(--black);
color: var(--white);
opacity: 0.6;
padding: 8px 20px;
border-radius: 0;
overflow: hidden;
}
.login-form button[type="submit"]:hover {
cursor: pointer;
opacity: 1;
}
.login-form input {
background: var(--bg);
border: 1px solid var(--black);
padding: 5px;
margin-bottom: 10px;
border-radius: 0;
width: max-content;
max-width: 300px;
}
/* Markdown Styles */
.comment-content .greentext {
color: #789922;
font-family: monospace;
display: inline-block;
}
.comment-content blockquote {
border-left: 3px solid var(--accent);
margin: 5px 0;
padding-left: 10px;
opacity: 0.8;
}
.comment-content pre {
background: var(--gray);
padding: 15px;
border-radius: 4px;
overflow-x: auto;
}
.comment-content code {
background: var(--gray);
font-family: monospace !important;
}
.comment-content ul,
.comment-content ol {
padding-left: 20px;
}
/* Dynamic page content (about / rules) */
.dynamic-page-content blockquote {
color: #789922;
border-left: 3px solid #789922;
margin: 6px 0;
padding-left: 10px;
font-family: monospace;
}
.dynamic-page-content blockquote p {
margin: 0;
color: #789922;
}
.dynamic-page-content pre {
background: #222;
padding: 10px;
border-radius: 4px;
overflow-x: auto;
}
.dynamic-page-content code {
background: #333;
padding: 2px 4px;
border-radius: 3px;
font-family: monospace;
}
.dynamic-page-content ul,
.dynamic-page-content ol {
padding-left: 20px;
}
.dynamic-page-content h1,
.dynamic-page-content h2,
.dynamic-page-content h3,
.dynamic-page-content h4 {
color: var(--white);
}
.dynamic-page-content p {
margin-top: 0;
margin-bottom: 1.2em;
}
.dynamic-page-content p:last-child {
margin-bottom: 0;
}
/* Emoji Picker */
.input-actions {
position: relative;
/* Context for picker */
}
/* .emoji-picker {
position: relative;
width: 100%;
max-width: 85vw;
max-height: 300px;
background: var(--dropdown-bg);
border: 1px solid var(--black);
padding: 10px;
z-index: 1000;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
gap: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
border-radius: 8px;
} */
.emoji-picker {
position: relative;
width: 100%;
max-width: 100%;
max-height: 135px;
background: var(--dropdown-bg);
border: 1px solid var(--black);
padding: 5px;
z-index: 1000;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
gap: 0px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
border-radius: 0px;
margin-top: 5px;
}
.emoji-picker img {
width: 60px;
height: 60px;
object-fit: contain;
cursor: pointer;
transition: transform 0.1s, background 0.1s;
padding: 4px;
border-radius: 4px;
}
.emoji-picker img:hover {
transform: scale(1.1);
background: rgba(255, 255, 255, 0.1);
}
/* User Mentions */
.mention {
text-decoration: none !important;
color: var(--accent);
font-weight: bold;
}
.mention:hover {
text-decoration: underline !important;
}
/* Mention Autocomplete Dropdown */
.mention-suggestions {
position: fixed;
z-index: 10001;
background: #222;
border: 1px solid #444;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
max-height: 200px;
overflow-y: auto;
font-family: var(--font);
}
.mention-suggestion-item {
display: flex;
align-items: center;
padding: 8px 12px;
cursor: pointer;
border-bottom: 1px solid #333;
}
.mention-suggestion-item:last-child {
border-bottom: none;
}
.mention-suggestion-item.active,
.mention-suggestion-item:hover {
background: #333;
}
.mention-suggestion-item img {
width: 24px;
height: 24px;
border-radius: 50%;
margin-right: 10px;
object-fit: cover;
}
.mention-name {
font-weight: bold;
color: #eee;
margin-right: 8px;
}
.mention-display {
font-size: 0.85em;
color: #888;
}
.external-link-icon {
font-size: 0.65em;
margin-left: 4px;
vertical-align: middle;
position: relative;
top: -1px;
}
/* ── Inline emoji autocomplete dropdown ── */
.emoji-autocomplete {
position: fixed;
/* set by JS via getBoundingClientRect */
z-index: 9999;
background: var(--dropdown-bg, #1a1a1a);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6);
flex-direction: column;
max-height: 220px;
overflow-y: auto;
padding: 4px;
gap: 2px;
overscroll-behavior: contain;
}
.emoji-ac-item {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 8px;
border-radius: 4px;
cursor: pointer;
transition: background 0.1s;
user-select: none;
}
.emoji-ac-item:hover,
.emoji-ac-item.active {
background: rgba(255, 255, 255, 0.1);
}
.emoji-ac-item img {
width: 24px;
height: 24px;
object-fit: contain;
flex-shrink: 0;
}
.emoji-ac-item span {
font-size: 0.85em;
color: var(--text-muted, #aaa);
font-family: var(--font-mono, monospace);
}
.emoji-trigger {
background: none;
border: none;
color: var(--white);
font-size: 20px;
cursor: pointer;
margin-right: 5px;
padding: 0 5px;
vertical-align: middle;
transition: text-shadow 0.2s;
}
.emoji-trigger:hover {
text-shadow: 0 0 8px var(--accent);
}
.spoiler-trigger {
background: black;
border: none;
color: var(--white);
font-size: 0.85em;
font-weight: bold;
cursor: pointer;
vertical-align: middle;
}
.spoiler-trigger:hover {
text-decoration: underline;
}
/* visualizer */
canvas {
position: absolute;
top: 1px;
/* This removes the ugly 1px line seen at the bottom when you hover over the audio element */
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
pointer-events: none;
}
/* tags */
span#tags {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
line-height: 1.4;
padding: 5px;
}
input {
padding: 0;
margin: 0;
border: none;
color: #fff;
background-color: var(--badge-tag);
}
/* Tag Autocomplete Dropdown */
.tag-ac-wrapper {
position: relative;
display: inline-flex;
align-items: center;
vertical-align: middle;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.tag-ac-wrapper form {
display: flex;
align-items: center;
height: 100%;
}
.tag-ac-input {
font-size: inherit;
padding: 0 4px;
min-width: 80px;
background-color: var(--badge-tag);
color: #fff;
border: none;
outline: none;
height: 20px;
line-height: normal;
display: block;
}
.tag-ac-input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.tag-suggestions {
position: absolute;
bottom: 100%;
top: auto;
left: 0;
min-width: 220px;
max-width: 320px;
max-height: 260px;
overflow-y: auto;
background: var(--dropdown-bg, #1a1a1a);
border: 1px solid var(--black, #000);
border-radius: 6px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
z-index: 1000;
margin-bottom: 8px;
animation: tagDropIn 0.15s ease-out;
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-color, #555) transparent;
}
@keyframes tagDropIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.tag-suggestion-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
min-height: 44px;
cursor: pointer;
transition: background 0.12s;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.tag-suggestion-item:not(:last-child) {
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.tag-suggestion-item:hover,
.tag-suggestion-item:active,
.tag-suggestion-item.active {
background: rgba(255, 255, 255, 0.1);
}
.tag-suggestion-name {
font-size: 14px;
color: var(--accent, #e0e0e0);
font-weight: 500;
}
.tag-suggestion-meta {
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
margin-left: 12px;
white-space: nowrap;
}
@media (max-width: 555px) {
.tag-suggestions {
position: fixed;
left: 10px;
right: 10px;
top: auto;
bottom: 60px;
min-width: unset;
max-width: unset;
max-height: 40vh;
border-radius: 10px;
}
.tag-suggestion-item {
min-height: 48px;
padding: 12px 16px;
}
.tag-suggestion-name {
font-size: 16px;
}
.tag-suggestion-meta {
font-size: 12px;
}
}
/* toasts */
div#flash {
position: fixed;
bottom: -28px;
z-index: 999;
left: 0;
width: 100%;
text-align: center;
font-weight: bold;
}
div#flash.error {
background-color: #fddfdf;
border-bottom: 2px solid #f1a899;
color: #5f3f3f;
}
div#flash.success {
background-color: #4caf50;
border-bottom: 2px solid #006018;
color: #001c07;
}
div#flash.warn {
background-color: #fffa90;
border-bottom: 2px solid #dad55e;
color: #777620;
}
/* sfw/nsfw indexpage */
div.posts>a>p {
height: 100%;
width: 100%;
position: absolute;
bottom: calc(0px - 12px);
}
div.posts>a>p:before {
content: "";
position: absolute;
right: 0;
bottom: -2px;
height: 13px;
width: 100%;
}
div.posts>a[data-mode="sfw"]>p:before {
background: #000000;
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(63, 196, 61, 0) 85%, rgba(63, 196, 61, 1) 100%);
}
div.posts>a[data-mode="nsfw"]>p:before {
background: #000000;
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(227, 7, 7, 0) 85%, rgb(227, 7, 203) 100%);
}
div.posts>a[data-mode="nsfl"]>p::before {
background: #000;
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(227, 7, 7, 0) 85%, rgb(231, 3, 3) 100%);
}
div.posts>a[data-mode="null"]>p:before {
background-color: #dcd512;
/* untagged */
}
div#footbar {
width: 100%;
text-align: center;
margin-top: -30px;
transition: .2s ease-in-out;
user-select: none;
color: transparent;
}
/* avatar */
img.avatar {
height: auto;
position: relative;
width: 25px;
margin: 1px;
/* left: -7px; */
top: 0;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.ranking-table img.avatar {
left: 0;
border-radius: 3px;
display: block;
margin: 0 auto;
}
/* log */
div.logwrap {
height: auto;
text-align: left;
}
div.logwrap>p {
line-height: 0;
}
/* ranking page overhaul - clean tables */
.ranking-page {
padding: 30px;
max-width: 1200px;
margin: 0 auto;
}
.ranking-page h1,
.ranking-page h3 {
color: var(--white);
letter-spacing: 1px;
}
.ranking-wrapper {
display: flex;
gap: 40px;
align-items: flex-start;
margin-top: 30px;
}
@media (max-width: 992px) {
.ranking-wrapper {
flex-direction: column;
gap: 30px;
}
.section-big,
.section-small {
width: 100%;
flex: none;
}
}
.section-big {
flex: 2;
}
.section-small {
flex: 1;
display: flex;
flex-direction: column;
gap: 30px;
}
.clean-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin-top: 15px;
background: rgba(255, 255, 255, 0.02);
border-radius: 6px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.clean-table th {
background: rgba(255, 255, 255, 0.05);
color: var(--accent);
text-align: left;
padding: 15px;
font-size: 0.85em;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
border-bottom: 2px solid var(--accent);
}
.clean-table td {
padding: 12px 15px;
vertical-align: middle;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
}
.clean-table tbody tr:last-child td {
border-bottom: none;
}
.clean-table tbody tr:hover {
background: rgba(var(--accent-rgb), 0.03);
}
.rank-cell {
width: 60px;
font-weight: bold;
color: var(--accent) !important;
font-size: 1.1em;
}
.avatar-cell {
width: 80px;
}
.rank-avatar {
width: 36px;
height: 36px;
border-radius: 4px;
object-fit: cover;
border: 1px solid rgba(255, 255, 255, 0.1);
display: block;
}
.user-cell a {
font-weight: bold;
text-decoration: none !important;
}
.count-cell {
font-weight: bold;
text-align: right !important;
}
.clean-table .count-col {
text-align: right !important;
}
.stats-box-simple {
width: 100%;
background: rgba(255, 255, 255, 0.03);
padding: 20px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.stats-box-simple h3 {
margin-top: 0;
font-size: 1.1em;
text-transform: uppercase;
letter-spacing: 2px;
border-bottom: 1px solid rgba(var(--accent-rgb), 0.3);
padding-bottom: 10px;
margin-bottom: 15px;
}
.stats-table td:first-child,
.f0cks-table td:first-child {
font-size: 0.9em;
opacity: 0.7;
}
.stats-table td:last-child,
.f0cks-table td:last-child {
text-align: right;
font-weight: bold;
}
/* Premium Ranking Podium */
.ranking-podium {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 30px;
margin: 40px 0 60px;
padding: 20px;
background: radial-gradient(circle at center, rgba(var(--accent-rgb), 0.1) 0%, transparent 70%);
}
.podium-item {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.podium-item:hover {
transform: translateY(-15px);
}
.podium-avatar-wrapper {
position: relative;
margin-bottom: 20px;
}
.podium-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--accent);
background: var(--black);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
display: block;
margin: 0 auto;
}
.podium-crown {
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%) rotate(-10deg);
font-size: 2em;
filter: drop-shadow(0 0 10px gold);
z-index: 2;
}
.podium-rank-label {
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
background: var(--accent);
color: var(--white);
padding: 4px 15px;
border-radius: 20px;
font-weight: 800;
font-size: 1.2em;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
z-index: 1;
}
.podium-info {
text-align: center;
}
.podium-name {
font-weight: 800;
font-size: 1.4em;
color: var(--white);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
margin-bottom: 5px;
display: block;
}
.podium-count {
font-size: 1em;
color: var(--accent);
font-weight: bold;
letter-spacing: 1px;
}
/* Rank specific podium styles */
.podium-item.rank-1 {
order: 2;
transform: scale(1.1);
}
.podium-item.rank-1:hover {
transform: scale(1.15) translateY(-15px);
}
.podium-item.rank-2 {
order: 1;
}
.podium-item.rank-3 {
order: 3;
}
.rank-1 .podium-avatar {
border-color: #FFD700;
width: 140px;
height: 140px;
box-shadow: 0 0 40px rgba(255, 215, 0, 0.3);
}
.rank-2 .podium-avatar {
border-color: #C0C0C0;
width: 110px;
height: 110px;
box-shadow: 0 0 30px rgba(192, 192, 192, 0.2);
}
.rank-3 .podium-avatar {
border-color: #CD7F32;
width: 100px;
height: 100px;
box-shadow: 0 0 20px rgba(205, 127, 50, 0.1);
}
.rank-1 .podium-rank-label {
background: linear-gradient(135deg, #FFD700, #FFA500);
color: #000;
}
.rank-1 .podium-count {
color: #FFD700;
}
.rank-2 .podium-rank-label {
background: linear-gradient(135deg, #C0C0C0, #808080);
}
.rank-2 .podium-count {
color: #C0C0C0;
}
.rank-3 .podium-rank-label {
background: linear-gradient(135deg, #CD7F32, #8B4513);
}
.rank-3 .podium-count {
color: #CD7F32;
}
@media (max-width: 992px) {
.ranking-podium {
flex-direction: column;
align-items: center;
gap: 50px;
padding-top: 40px;
}
.podium-item {
order: unset !important;
}
.podium-item.rank-1 {
transform: scale(1);
}
}
/* Responsive clean table for Ranking */
@media (max-width: 600px) {
.ranking-table tr {
display: grid;
grid-template-areas:
"rank avatar user"
"rank avatar count";
grid-template-columns: 50px 70px 1fr;
grid-template-rows: auto auto;
gap: 0 15px;
padding: 15px;
align-items: center;
}
.rank-cell {
grid-area: rank;
font-size: 1.4em !important;
}
.avatar-cell {
grid-area: avatar;
padding: 0 !important;
width: auto;
}
.user-cell {
grid-area: user;
padding: 0 !important;
align-self: end;
}
.count-cell {
grid-area: count;
padding: 0 !important;
text-align: left !important;
align-self: start;
opacity: 0.7;
font-size: 0.9em;
}
.count-cell:after {
content: " tags";
}
.ranking-table thead {
display: none;
}
.rank-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
}
.ranking-page {
padding: 15px;
}
.ranking-wrapper {
margin-top: 15px;
}
}
.admin-icon {
margin-right: 6px;
color: #ffeb3b;
font-size: 0.9em;
}
.topf0ckers {
text-align: center;
padding: 20px 0;
}
/* tags */
#tags .badge>a:first-child {
color: inherit !important;
text-shadow: 1px 1px black;
}
/* tooltips */
[tooltip] {
position: relative;
}
[tooltip]::before,
[tooltip]::after {
text-transform: none;
font-size: .9em;
line-height: 1;
user-select: none;
pointer-events: none;
position: absolute;
display: block;
visibility: hidden;
opacity: 0;
transition:
opacity 0.18s ease,
transform 0.18s ease,
visibility 0s linear 0.18s;
}
[tooltip]::before {
content: '';
border: 5px solid transparent;
z-index: 100001;
}
[tooltip]::after {
content: attr(tooltip);
font-family: Helvetica, sans-serif;
text-align: center;
min-width: 3em;
max-width: 70em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 1ch 1.5ch;
border-radius: .3ch;
box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
background: var(--tooltip-bg, #333);
color: #fff;
z-index: 100000;
}
[tooltip]:hover::before,
[tooltip]:hover::after {
visibility: visible;
opacity: 1;
transition:
opacity 0.18s ease,
transform 0.18s ease,
visibility 0s linear 0s;
}
[tooltip='']::before,
[tooltip='']::after {
display: none !important;
visibility: hidden !important;
}
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
bottom: 100%;
border-bottom-width: 0;
border-top-color: var(--tooltip-bg, #333);
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
left: 50%;
transform: translate(-50%, -.25em);
}
[tooltip][flow^="down"]::before {
top: 100%;
border-top-width: 0;
border-bottom-color: var(--tooltip-bg, #333);
}
[tooltip][flow^="down"]::after {
top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
left: 50%;
transform: translate(-50%, .25em);
}
[tooltip][flow^="left"]::before {
top: 50%;
border-right-width: 0;
border-left-color: var(--tooltip-bg, #333);
left: calc(0em - 5px);
transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
top: 50%;
right: calc(100% + 5px);
transform: translate(-.5em, -50%);
}
[tooltip][flow^="right"]::before {
top: 50%;
border-left-width: 0;
border-right-color: var(--tooltip-bg, #333);
right: calc(0em - 5px);
transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
top: 50%;
left: calc(100% + 5px);
transform: translate(.5em, -50%);
}
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
opacity: 1;
transform: translate(-50%, 0);
}
[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
opacity: 1;
transform: translate(0, -50%);
}
.timeago:hover {
cursor: pointer;
}
/* buttons */
svg.iconset,
i.iconset {
display: inline-flex;
align-items: center;
justify-content: center;
height: 20px;
width: 23px;
font-size: 13px;
cursor: pointer;
background: #312c2c;
margin: 1px;
padding: 1px;
border: 1px outset #221d1d;
position: relative;
right: 2px;
}
svg.iconset:hover,
i.iconset:hover {
background: #7b7b77 !important;
transition: .2s ease;
}
svg.iconset.active,
i.iconset.active {
color: var(--accent) !important;
border-style: inset;
}
/* favorites */
span#favs {
text-align: center;
margin-left: 0;
grid-column: 1/4;
padding: 5px;
margin: 5px;
line-height: 0;
background: var(--badge-bg);
}
#favs>a img {
border: 2px solid var(--accent);
}
/* audio thumbnails */
/*a[data-mime^="audio"] {
background-color: var(--accent);
}*/
/* err page */
._error_wrapper {
display: flex;
justify-content: center;
}
.err {
display: grid;
grid-template-rows: auto;
grid-template-columns: auto;
margin: 50px;
background: var(--gray);
max-width: 100%;
width: 500px;
}
._error_topbar {
border-bottom: inset 2px gray;
text-align: left;
padding-left: 10px;
}
._error_content {
display: grid;
grid-template-columns: auto;
}
._error_content img {
max-width: 100%;
width: 100%;
padding: 5px;
margin: 0;
}
._error_message {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto 1fr;
margin: 5px;
padding: 5px;
text-shadow: 1px 1px black;
text-align: center;
}
.err code {
font-weight: bold;
text-align: center;
align-self: baseline;
font-size: 15px;
}
/* Admin search css early test */
.admin-search {
margin-top: 15px;
display: flex;
justify-content: center;
}
.admin-search button {
background: var(--accent);
border: none;
color: var(--white);
padding: 15px;
}
.admin-search button:hover {
transition: .2s all;
opacity: 0.7;
cursor: pointer;
}
.admin-search input {
padding: 15px;
border: 1px solid var(--accent);
}
table img {
border: 1px solid;
}
.results {
padding: 5px;
}
.mview_desc {
visibility: hidden;
}
/* fix for mobile table view in search! */
@media screen and (max-width: 650px) {
.results table.table th,
.results table.table td,
.admin-users-table th,
.admin-users-table td {
display: flex;
padding: 5px;
margin: 5px;
}
.results table.table tr td:first-child,
.admin-users-table tr td:first-child {
float: right;
}
.results table.table tbody td,
.admin-users-table tbody td {
display: block;
box-shadow: 0px 1px 0px var(--accent);
}
.results table.table tbody td:before,
.admin-users-table tbody td:before {
content: attr(data-th);
display: block;
text-align: left;
}
.results table thead,
.admin-users-table thead {
display: none;
}
.results table.table td img {
position: relative;
width: 100%;
}
.mview_desc {
visibility: visible;
}
}
/* gapRight icon colors: white for all, pink for favorites */
.gapRight i.iconset {
color: #fff !important;
fill: #fff !important;
}
.gapRight #a_favo {
color: #ff6b9d !important;
fill: #ff6b9d !important;
}
/* pin icon */
.iconset#a_pin {
color: inherit;
fill: inherit;
}
.iconset#a_pin::before {
display: inline-block;
transition: transform 0.25s ease;
}
/* pinned: rotate just the glyph so tip points down – "pushed into the board" */
.iconset#a_pin.active::before {
transform: rotate(-45deg);
}
.iconset#subscribe-btn {
border-style: outset;
}
.imageDoor:hover:after {
content: "";
background-image: var(--hover-image);
height: 128px;
width: 128px;
display: inline-block;
position: absolute;
z-index: 999;
}
/* Fix for navbar on mobile devices */
@media (max-width: 768px) {
.navbar-nav {
display: grid !important;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 0.25em;
}
}
/* Navbar Rework */
.navbar-nav-guests {
width: 100%;
display: flex;
flex-direction: column;
padding: 5px 0 5px 0;
margin-bottom: 0;
list-style: none;
margin: 0;
margin-right: 0px;
margin-left: 0px;
align-self: center;
margin-left: .5rem;
margin-right: .5rem;
}
.navbar-expand-lg .navbar-nav-guests {
flex-direction: row;
}
ul.navbar-nav-guests li.nav-item {
margin-right: .5rem;
}
.navbar-expand-lg .navbar-nav-guests .nav-link,
.pagination>a,
.pagination>span {
padding-right: .5rem;
padding-left: .5rem;
}
@media (max-width: 768px) {
ul.navbar-nav-guests {
display: grid !important;
grid-template-columns: 1fr 1fr;
grid-gap: .25em;
margin: 0;
padding: 5px;
}
ul.navbar-nav-guests li.nav-item {
margin-right: unset;
}
.nav-link.user {
justify-content: left;
}
}
.navigation-links-guest {
justify-content: center;
display: grid;
grid-template-columns: 1fr;
align-content: center;
width: 100%;
}
/* Pagination Responsiveness */
@media (max-width: 799px) {
.navbar-expand-lg .navbar-nav-guests .nav-link,
.pagination>a,
.pagination>span {
padding-right: 2px;
padding-left: 2px;
}
.pagination>a,
.pagination>span {
margin-right: 2px;
margin-left: 2px;
}
.pagination {
justify-content: center !important;
}
}
/* f0ckgle */
.f0ckgle {
display: grid;
align-content: center;
height: auto;
}
.search-title {
text-align: center;
font-size: xxx-large;
}
.admin-search input {
padding: 15px;
border: 1px solid var(--accent);
min-width: 30%;
}
.profile_head_avatar {
margin: 0;
}
.profile_head_username {
font-weight: bold;
padding-left: 5px;
}
.layersoffear {
display: grid;
}
.user_content_wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 5px;
padding: 5px;
}
.f0cks h5,
.favs h5 {
background: var(--dropdown-bg);
}
.uploads-header,
.favs-header {
display: grid;
grid-template-columns: 1fr auto;
background: var(--img-border-color);
padding: 0px 5px 0px 5px;
}
div.user-uploads div.posts {
padding: 5px;
background: var(--dropdown-bg);
}
div.favs div.posts {
padding: 5px;
background: var(--dropdown-bg);
}
#bg {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
-webkit-filter: blur(100px);
filter: blur(100px);
transform: translate3d(0, 0, 0);
z-index: 0;
transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0.2;
z-index: -2;
}
button#togglebg {
display: inline;
cursor: pointer;
background: transparent;
border: 0;
}
@keyframes fadeInFX {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeOutFX {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 0.2;
}
}
@keyframes fadeOut {
0% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
.fader-in {
opacity: 0.4 !important;
}
.fader-out {
opacity: 0 !important;
}
.fast-fade {
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.grid-transition {
opacity: 0;
}
.grid-transition.show {
opacity: 1 !important;
transition: opacity 0.3s ease-in-out;
}
/* Fix double transition: disable individual item entry animation when the whole grid is fading in, except for pinning animations */
.posts.grid-transition a:not(.anim-boxshadow) {
animation: none;
}
/* Make individual item entry subtler and faster for infinite scroll */
@keyframes fadeInFX {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
img#f0ck-image,
div.imageDoor,
div.posts a,
video {
animation: 0.4s ease-out 0s 1 fadeInFX;
}
.settings {
display: grid;
justify-content: center;
}
/* Touch-friendly font-size slider */
#font_size_slider {
-webkit-appearance: none;
appearance: none;
height: 6px;
border-radius: 3px;
background: var(--nav-border-color, #555);
outline: none;
touch-action: manipulation;
/* prevent scroll stealing */
cursor: pointer;
}
#font_size_slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--accent, #e91e63);
cursor: grab;
border: 3px solid var(--white, #fff);
box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
transition: transform .1s;
}
#font_size_slider::-webkit-slider-thumb:active {
transform: scale(1.2);
cursor: grabbing;
}
#font_size_slider::-moz-range-thumb {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--accent, #e91e63);
cursor: grab;
border: 3px solid var(--white, #fff);
box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
transition: transform .1s;
}
#font_size_slider::-moz-range-thumb:active {
transform: scale(1.2);
cursor: grabbing;
}
input[name="i_avatar"] {
text-align: center;
width: 50px;
padding: 10px;
}
input#s_avatar {
padding: 5px;
border: 1px solid var(--black);
border-radius: 0;
background-image: linear-gradient(to bottom, var(--nav-link-background-linear-gradient));
box-shadow: var(--nav-link-box-shadow);
cursor: pointer;
}
#s_avatar:hover {
background: #ffffff0f;
}
.theforceofthree {
display: grid;
grid-template-columns: 0.4fr 1fr 0.4fr;
}
.upload {
padding: 10px;
}
/* Infinite scroll loading indicator */
.loading-spinner {
display: inline-block;
font-size: 12px;
color: var(--footbar-color);
animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 0.1;
}
50% {
opacity: 1;
}
}
/* Modern Tags Layout */
.tags-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
padding: 20px 0;
}
.tag-card {
display: flex;
flex-direction: column;
background: var(--badge-bg, #171717);
border-radius: 0;
overflow: hidden;
text-decoration: none !important;
transition: transform 0.2s, box-shadow 0.2s;
border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.1));
position: relative;
}
.tag-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
background: var(--dropdown-bg, #232323);
border-color: var(--accent, #9f0);
}
.tag-card-image {
width: 100%;
height: 100px;
overflow: hidden;
position: relative;
background: #000;
}
.tag-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
opacity: 0.8;
}
.tag-card:hover .tag-card-image img {
transform: scale(1.1);
opacity: 1;
}
.tag-card-image-title {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1em;
font-weight: 700;
font-family: var(--font, monospace);
color: #fff;
text-align: center;
padding: 0 10px;
letter-spacing: 0.04em;
text-transform: uppercase;
text-shadow:
0 0 8px rgba(0, 0, 0, 0.9),
0 1px 3px rgba(0, 0, 0, 0.8),
0 0 24px rgba(0, 0, 0, 0.7);
background: linear-gradient(to bottom,
transparent 0%,
transparent 35%,
rgba(0, 0, 0, 0.4) 100%);
transition: letter-spacing 0.25s, font-size 0.25s;
pointer-events: none;
}
.tag-card:hover .tag-card-image-title {
font-size: 1.18em;
letter-spacing: 0.1em;
}
/* Hall rating badge */
.hall-rating-badge {
position: absolute;
bottom: 6px;
left: 8px;
font-size: 0.65em;
font-weight: 800;
font-family: var(--font, monospace);
letter-spacing: 0.08em;
padding: 2px 6px;
border-radius: 2px;
pointer-events: none;
text-transform: uppercase;
line-height: 1.4;
z-index: 2;
}
.hall-rating-sfw {
background: rgba(0, 180, 80, 0.85);
color: #fff;
border: 1px solid rgba(0, 255, 100, 0.3);
}
.hall-rating-nsfw {
background: rgba(220, 40, 60, 0.85);
color: #fff;
border: 1px solid rgba(255, 60, 80, 0.3);
}
.hall-rating-nsfl {
background: rgba(80, 0, 120, 0.9);
color: #e0b0ff;
border: 1px solid rgba(160, 60, 200, 0.4);
}
.tag-card-content {
padding: 15px;
display: flex;
flex-direction: column;
gap: 5px;
}
.tag-name {
color: var(--white, #fff);
font-weight: bold;
font-size: 1.1em;
font-family: var(--font, monospace);
}
.tag-count {
color: #888;
font-size: 0.9em;
}
.tag-description {
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 0.85em;
color: #aaa;
line-height: 1.4;
word-break: break-word;
}
/* Search Overlay */
#search-overlay,
#excluded-tags-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(5px);
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
#search-overlay.visible,
#excluded-tags-overlay.visible {
opacity: 1;
}
#search-input {
background: transparent;
border: none;
border-bottom: 2px solid var(--accent);
color: var(--white);
font-size: 3rem;
width: 100%;
max-width: 800px;
text-align: center;
outline: none;
font-family: var(--font);
padding: 10px;
}
#search-input::placeholder {
color: #555;
text-transform: uppercase;
}
#search-close,
#excluded-tags-close {
position: absolute;
top: 20px;
right: 30px;
color: var(--white);
font-size: 2rem;
cursor: pointer;
font-family: sans-serif;
opacity: 0.7;
transition: opacity 0.2s;
}
#search-close:hover,
#excluded-tags-close:hover {
opacity: 1;
}
/* Delete Tag Modal */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(5px);
z-index: 10001;
display: flex;
align-items: center;
justify-content: center;
}
.modal-content {
background: var(--dropdown-bg);
border: 1px solid var(--nav-border-color);
padding: 30px;
border-radius: 0;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
min-width: 300px;
}
.modal-content h3 {
margin-top: 0;
color: var(--white);
}
.modal-content p {
color: #ccc;
margin: 20px 0;
}
.modal-actions {
display: flex;
justify-content: center;
gap: 15px;
}
.modal-actions button {
padding: 10px 20px;
border: none;
border-radius: 0;
cursor: pointer;
font-weight: bold;
font-family: var(--font);
}
.btn-danger {
background: #e74c3c;
color: white;
}
.btn-danger:hover {
background: #c0392b;
}
.btn-secondary {
background: #555;
color: white;
}
.btn-secondary:hover {
background: #666;
}
/* Nav User Dropdown */
.nav-user-dropdown {
position: relative;
margin-left: 5px;
}
.nav-mime-dropdown {
position: relative;
display: inline-block;
}
.nav-mime-btn {
background: none;
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--white);
padding: 5px 5px;
font-size: 0.8em;
font-weight: bold;
cursor: pointer;
border-radius: 3px;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 5px;
min-width: 50px;
justify-content: center;
opacity: 0.8;
}
.nav-mime-btn:hover {
background: rgba(255, 255, 255, 0.1);
opacity: 1;
}
.nav-mime-btn::after {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 12px;
}
.nav-mime-menu {
display: none;
position: absolute;
top: calc(100% + 5px);
left: 0;
background: var(--dropdown-bg);
min-width: 150px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
z-index: 1000;
border-radius: 0;
border: 1px solid var(--nav-border-color);
overflow: hidden;
}
.nav-mime-dropdown:hover .nav-mime-menu,
.nav-mime-dropdown.stay-open .nav-mime-menu {
display: block;
}
.nav-mime-item {
color: #ccc;
padding: 10px 15px;
display: flex;
align-items: center;
gap: 10px;
font-size: 0.9em;
transition: all 0.2s;
cursor: pointer;
user-select: none;
}
.nav-mime-item:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--accent);
}
.nav-mime-item input[type="checkbox"] {
accent-color: var(--black);
cursor: pointer;
}
.nav-mime-divider {
height: 1px;
background: rgba(255, 255, 255, 0.1);
margin: 5px 0;
}
.nav-mime-clear {
background: transparent;
border: none;
color: #888;
padding: 8px 15px;
width: 100%;
text-align: left;
font-size: 0.8em;
cursor: pointer;
transition: all 0.2s;
}
.nav-mime-clear:hover {
color: #fff;
background: rgba(255, 255, 255, 0.05);
}
.nav-mime-menu.visible {
display: block;
animation: fadeInDown 0.2s ease-out;
}
.nav-mime-menu a {
color: #ccc;
padding: 10px 15px;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
font-size: 0.9em;
transition: all 0.2s;
}
.nav-mime-menu a:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--accent);
}
.nav-mime-menu a svg {
opacity: 0.7;
}
.nav-mime-menu a:hover svg {
opacity: 1;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.nav-user-btn {
background: none;
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--white);
padding: 5px 5px;
font-size: 0.8em;
font-weight: bold;
cursor: pointer;
border-radius: 3px;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 5px;
min-width: 50px;
justify-content: center;
opacity: 0.8;
}
.nav-user-btn:hover {
background: rgba(255, 255, 255, 0.1);
}
/* Avatar-style button variant */
.nav-avatar-btn {
background: none;
border: 1px solid transparent;
min-width: unset;
border-radius: 3px;
line-height: 1;
opacity: 1;
display: flex;
align-items: center;
gap: 6px;
transition: border-color 0.2s, background 0.2s;
}
.nav-avatar-btn:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
transform: none;
box-shadow: none;
}
.nav-avatar-btn.is-active {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.15);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.nav-avatar-btn.is-active .nav-avatar-caret {
transform: rotate(180deg);
}
.nav-avatar-caret {
transition: transform 0.2s ease;
}
.nav-avatar-img {
display: block;
width: 22px;
height: 22px;
object-fit: cover;
flex-shrink: 0;
}
.nav-avatar-name {
font-size: 14px;
color: var(--white);
white-space: nowrap;
max-width: 140px;
text-overflow: ellipsis;
}
.nav-avatar-caret {
font-size: 0.7em;
opacity: 0.6;
flex-shrink: 0;
}
.nav-user-btn::after {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 10px;
}
.nav-user-menu {
display: none;
position: absolute;
top: calc(100%);
left: auto;
right: 0;
min-width: 100%;
/* at least as wide as the avatar button */
background: var(--dropdown-bg);
border: 1px solid var(--nav-border-color);
border-radius: 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
z-index: 10000;
overflow: hidden;
}
.nav-user-menu.show {
display: block;
}
.nav-user-menu a {
display: block;
padding: 10px 15px;
color: var(--white);
text-decoration: none;
transition: background 0.2s;
}
.nav-user-menu a:hover {
background: rgba(255, 255, 255, 0.1);
}
.nav-user-divider {
height: 1px;
background: var(--nav-border-color);
margin: 5px 0;
}
/* nav-links base: horizontal flex row on desktop */
.nav-links {
display: flex;
align-items: center;
gap: 10px;
padding-left: 5px;
}
.nav-links a {
color: var(--white);
text-decoration: none;
font-size: 14px;
opacity: 0.8;
transition: opacity 0.2s;
}
.nav-links a:hover {
opacity: 1;
}
.nav-links svg {
vertical-align: middle;
}
/* Login Modal */
#login-modal,
#register-modal,
#shortcuts-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.85);
/* Semi-transparent black backdrop */
z-index: 99999;
display: flex;
/* Hidden by default via inline style usually, or JS toggles class */
justify-content: center;
align-items: center;
padding: 20px;
backdrop-filter: blur(5px);
}
.flash-success {
color: var(--accent);
background: var(--bg);
border: 1px solid var(--accent);
padding: 10px;
margin-bottom: 15px;
font-size: 0.9em;
text-align: center;
}
.flash-error {
color: #ff4444;
background: var(--bg);
border: 1px solid #ff4444;
padding: 10px;
margin-bottom: 15px;
font-size: 0.9em;
text-align: center;
}
#flash-container {
position: fixed;
top: 70px;
left: 50%;
transform: translateX(-50%);
width: 90%;
max-width: 600px;
z-index: 10001;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
}
.flash-message {
background: var(--bg);
padding: 15px 20px;
border-radius: 0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
animation: slideDown 0.3s ease-out;
pointer-events: auto;
font-size: 0.95em;
border: 1px solid var(--accent);
}
@keyframes slideDown {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.flash-message.flash-success {
border-color: var(--accent);
color: var(--accent);
}
.flash-message.flash-error {
border-color: #ff4444;
color: #ff4444;
}
.flash-message.flash-info {
border-color: #f0a030;
color: #f0a030;
}
.login-modal-content {
background: var(--bg);
border: 1px solid var(--accent);
border-radius: 0;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
max-width: 400px;
width: 100%;
position: relative;
text-align: center;
}
.login-modal-content {
max-height: 90vh;
overflow-y: auto;
display: flex;
flex-direction: column;
scrollbar-width: thin;
scrollbar-color: var(--accent) transparent;
}
.login-modal-content .login-form {
display: flex;
flex-direction: column;
gap: 15px;
background: transparent;
/* Override default login-form bg if needed */
}
.login-modal-content .login-image {
max-width: 100%;
margin-bottom: 1rem;
border-radius: 0;
}
.login-notice {
background: rgba(var(--accent-rgb), 0.1);
border: 1px solid var(--accent);
padding: 12px;
margin-bottom: 15px;
font-size: 0.85em;
color: var(--white);
text-align: left;
line-height: 1.5;
border-radius: 2px;
}
.notification-dot {
width: 10px;
height: 10px;
background-color: #39ff14;
/* Matrix neon green */
border-radius: 50%;
display: inline-block;
margin-left: 5px;
box-shadow: 0 0 5px #39ff14;
}
.login-modal-content input[type="text"],
.login-modal-content input[type="email"],
.login-modal-content input[type="password"] {
width: 100%;
padding: 10px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--nav-border-color);
color: var(--white);
font-family: var(--font);
}
.login-modal-content input:focus {
border-color: var(--accent);
outline: none;
}
.login-modal-content button[type="submit"] {
background: var(--accent);
color: var(--black);
border: none;
padding: 10px;
font-weight: bold;
cursor: pointer;
font-family: var(--font);
margin-top: 10px;
}
.login-modal-content button[type="submit"]:hover {
filter: brightness(1.1);
}
#login-modal-close,
#register-modal-close,
#shortcuts-modal-close {
position: absolute;
top: 10px;
right: 15px;
background: none;
border: none;
color: var(--white);
font-size: 1.5rem;
cursor: pointer;
opacity: 0.7;
}
#login-modal-close:hover,
#register-modal-close:hover {
opacity: 1;
color: var(--accent);
}
/* Comments System */
/* Primary definition moved up to line 1082 to avoid overrides */
#comments-container {
color: var(--white);
font-family: var(--font);
background: rgba(0, 0, 0, 0.2);
}
/* Definitions consolidated at line 1099 */
.comment {
padding: 10px;
background: rgba(0, 0, 0, 0.2);
display: flex;
gap: 15px;
margin-bottom: 0px;
}
.comment.deleted .comment-content {
color: #888;
font-style: italic;
}
.comment-avatar img {
width: 40px;
height: 40px;
}
.comment-body {
flex: 1;
min-width: 0;
}
/* .comment-meta styles moved to earlier consolidation block */
.comment-author {
font-weight: bold;
color: var(--white);
margin-right: 3px;
align-self: baseline;
}
.comment-permalink {
color: #666;
text-decoration: none;
}
.comment-content {
line-height: 1.4;
word-break: break-word;
overflow: auto;
white-space: pre-wrap;
}
/* .reply-btn consolidated earlier */
/* .comment-children consolidated earlier */
.comment-input textarea {
width: 100%;
min-height: 80px;
background: #000000a1;
border: none;
color: var(--white);
padding: 10px;
border-radius: 4px;
font-family: inherit;
resize: vertical;
}
.input-actions {
margin-top: 5px;
text-align: right;
}
.submit-comment,
.cancel-reply {
background: var(--accent);
color: var(--black);
border: none;
padding: 6px 12px;
border-radius: 3px;
cursor: pointer;
font-weight: bold;
opacity: 0.8;
}
.submit-comment:hover,
.cancel-reply:hover {
opacity: 1;
}
.cancel-reply {
background: #666;
color: white;
margin-left: 5px;
}
.comment-input.reply-input {
margin-top: 10px;
margin-bottom: 10px;
}
.loading,
.error {
text-align: center;
padding: 20px;
color: #888;
}
.login-placeholder {
padding: 15px;
text-align: center;
background: rgba(0, 0, 0, 0.1);
margin-bottom: 5px;
}
/* Markdown Styles */
.comment-content .greentext {
color: #789922;
font-family: monospace;
display: inline-block;
}
.comment-content blockquote {
border-left: 3px solid var(--accent);
margin: 5px 0;
padding-left: 10px;
opacity: 0.8;
}
.comment-content ul,
.comment-content ol {
padding-left: 20px;
}
.comment-content a {
color: #1fb2b0;
}
.comment-content a:hover {
text-decoration: underline;
}
/* YouTube embed wrapper */
.yt-embed-wrap {
display: block;
position: relative;
width: 100%;
max-width: 480px;
margin: 8px 0;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.yt-embed-wrap::before {
content: '';
display: block;
padding-top: 56.25%;
/* 16:9 */
}
.yt-embed-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/* Same-site video embed wrapper */
.video-embed-wrap {
display: block;
position: relative;
width: 100%;
max-width: 480px;
margin: 8px 0;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
background: #000;
}
.video-embed-wrap video {
width: 100%;
display: block;
max-height: 500px;
background: #000;
}
/* Same-site audio embed wrapper */
.audio-embed-wrap {
display: block;
width: 100%;
max-width: 480px;
margin: 8px 0;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.3);
padding: 6px 8px;
}
.audio-embed-wrap audio {
width: 100%;
display: block;
outline: none;
}
/* Vocaroo embed wrapper */
.vocaroo-embed-wrap {
display: block;
width: 100%;
max-width: 300px;
height: 60px;
margin: 8px 0;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
background: #000;
}
.vocaroo-embed-wrap iframe {
width: 100%;
height: 100%;
border: none;
}
@media (max-width: 600px) {
.yt-embed-wrap,
.video-embed-wrap,
.audio-embed-wrap {
max-width: 100%;
}
}
#comment-sor,
#lock-thread-btn {
background: none;
border: none;
}
/* Admin buttons consolidated earlier in the file */
/* Edit mode */
.edit-textarea {
width: 100%;
min-height: 80px;
background: var(--bg);
border: 1px solid var(--accent);
color: var(--white);
padding: 10px;
border-radius: 4px;
font-family: inherit;
resize: vertical;
margin-bottom: 8px;
}
.edit-actions {
display: flex;
gap: 8px;
}
.save-edit-btn,
.cancel-edit-btn {
padding: 6px 12px;
border: none;
border-radius: 3px;
cursor: pointer;
font-weight: bold;
}
.save-edit-btn {
background: var(--accent);
color: var(--black);
}
.cancel-edit-btn {
background: #666;
color: white;
}
/* Pinned comments */
.comment.pinned {
background: rgba(var(--accent-rgb, 153, 255, 0), 0.1);
border-left: 3px solid var(--accent);
}
.pinned-badge {
background: var(--accent);
color: var(--black);
padding: 2px 6px;
border-radius: 3px;
font-size: 0.75em;
font-weight: bold;
margin-right: 8px;
}
/* .admin-pin-btn consolidated earlier */
/* Two-level comment replies */
.comment-replies {
margin-left: 5px;
border-left: 2px solid var(--badge-tag);
padding-left: 5px;
margin-top: 0px;
}
.comment.reply {
background: rgba(0, 0, 0, 0.1);
}
.reply-mention {
color: var(--accent);
font-weight: bold;
margin-right: 4px;
}
.submanage {
text-align: center;
border-top: 1px solid black;
}
/* AJAX Loading Bar */
.navbar.pbwork::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 3px;
background: var(--accent);
z-index: 2000;
animation: pbwork-anim 2s infinite linear;
width: 100%;
transform-origin: 0% 50%;
}
@keyframes pbwork-anim {
0% {
transform: scaleX(0);
}
50% {
transform: scaleX(0.5);
}
100% {
transform: scaleX(1);
}
}
/* Session Page Grid Layout */
.session-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
padding: 20px;
}
.session-card {
background: var(--nav-bg);
border: 1px solid transparent;
border-radius: 4px;
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.session-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
border-color: var(--accent);
}
.session-card.current {
border: 1px solid #2ecc71;
box-shadow: 0 0 10px rgba(46, 204, 113, 0.2);
}
.session-card.current .session-user {
color: #2ecc71;
}
.session-header {
background: rgba(0, 0, 0, 0.2);
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.session-user {
font-weight: bold;
font-size: 1.1em;
color: var(--accent);
}
.session-badges {
display: flex;
align-items: center;
gap: 8px;
}
.session-id {
font-family: monospace;
color: #666;
font-size: 0.9em;
}
.session-body {
padding: 15px;
flex-grow: 1;
}
.session-info {
margin-bottom: 8px;
font-size: 0.9em;
line-height: 1.4;
display: flex;
flex-direction: column;
}
.session-info:last-child {
margin-bottom: 0;
}
.session-info .label {
font-weight: bold;
color: #888;
font-size: 0.8em;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2px;
}
.session-info .value {
color: var(--white);
word-break: break-all;
}
.browser-info {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
font-family: monospace;
font-size: 0.85em;
opacity: 0.9;
}
.session-footer {
padding: 10px 15px;
background: rgba(0, 0, 0, 0.1);
display: flex;
gap: 10px;
justify-content: flex-end;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.badge-kmsi {
background: #333;
color: #ccc;
border: 1px solid #555;
}
span.badge.badge-current {
font-weight: bold;
font-size: 12.5px;
margin: 5px;
padding: 2px;
text-transform: uppercase;
}
.badge-current {
background: var(--accent);
color: var(--black);
}
.session-page-title {
grid-column: 1 / -1;
margin: 0;
padding-bottom: 10px;
border-bottom: 2px solid var(--accent);
color: var(--white);
font-size: 1.5em;
text-transform: uppercase;
letter-spacing: 1px;
}
.session-stats {
font-size: 0.6em;
color: var(--accent);
vertical-align: middle;
margin-left: 10px;
}
.session-delete {
color: #888;
text-decoration: none;
font-size: 1.2em;
margin-left: auto;
transition: color 0.2s;
padding: 0 5px;
}
.session-delete:hover {
color: #e74c3c;
text-decoration: none;
}
/* Avatar Upload Styles */
.avatar-settings-wrapper {
display: grid;
grid-template-columns: auto 1fr;
gap: 30px;
background: var(--metadata-bg);
border-radius: 8px;
margin-bottom: 20px;
}
@media (max-width: 900px) {
.avatar-settings-wrapper {
grid-template-columns: 1fr;
}
}
.avatar-preview-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-left: 10px;
}
.avatar-preview-label {
font-size: 0.85em;
color: #888;
text-transform: uppercase;
letter-spacing: 1px;
}
.avatar-preview-img {
width: 128px;
height: 128px;
object-fit: cover;
border: 3px solid var(--accent);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.avatar-placeholder {
display: flex;
align-items: center;
justify-content: center;
background: var(--gray);
color: #666;
font-size: 3em;
font-weight: bold;
}
.avatar-upload-section,
.avatar-item-section {
display: flex;
flex-direction: column;
gap: 12px;
}
.avatar-upload-section h4,
.avatar-item-section h4 {
margin: 0;
color: var(--white);
font-size: 1em;
border-bottom: 1px solid var(--accent);
padding-bottom: 5px;
}
.avatar-hint {
margin: 0;
font-size: 0.8em;
color: #666;
}
.avatar-upload-wrapper {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.avatar-filename {
color: #888;
font-size: 0.9em;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.avatar-progress-wrapper {
display: flex;
align-items: center;
gap: 10px;
}
.avatar-progress-bar {
flex: 1;
height: 8px;
background: var(--gray);
border-radius: 4px;
overflow: hidden;
position: relative;
}
.avatar-progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--accent), #4ade80);
border-radius: 4px;
transition: width 0.15s ease;
position: relative;
}
.avatar-progress-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent);
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.avatar-progress-text {
font-size: 0.85em;
color: var(--accent);
min-width: 40px;
text-align: right;
font-family: monospace;
}
.avatar-upload-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.avatar-status {
font-size: 0.9em;
padding: 5px 0;
min-height: 1.5em;
}
.avatar-status.success {
color: #4ade80;
}
.avatar-status.error {
color: #ef4444;
}
.avatar-item-input-wrapper {
display: flex;
gap: 10px;
align-items: center;
}
.avatar-item-input-wrapper .input {
flex: 1;
max-width: 150px;
}
.button {
padding: 8px 16px;
background: var(--accent);
color: var(--black);
border: none;
border-radius: 4px;
cursor: pointer;
font-family: inherit;
font-size: 0.9em;
transition: background 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
}
.button:hover:not(:disabled) {
filter: brightness(1.1);
transform: translateY(-1px);
}
.button:active:not(:disabled) {
transform: translateY(0);
}
.button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.button-danger {
background: #ef4444;
color: white;
}
.button-danger:hover:not(:disabled) {
background: #dc2626;
}
.button-secondary {
background: #6b7280;
color: white;
}
.button-secondary:hover:not(:disabled) {
background: #4b5563;
}
.git-hash {
font-size: 10px;
color: #666;
user-select: none;
text-align: center;
align-content: center;
}
#help-button {
padding: 5px;
cursor: pointer;
}
.comment-content img {
max-height: 200px;
max-width: 100%;
border-radius: 4px;
}
.sidebar-comment-img {
max-height: 128px !important;
}
.sidebar-activity .video-embed-wrap {
display: block;
max-width: 100%;
box-shadow: none;
margin: 4px 0;
}
.sidebar-video-link {
display: block;
font-size: 0.8em;
color: var(--accent);
text-decoration: none;
margin: 4px 0;
font-style: italic;
}
.sidebar-video-link .yt-title {
font-weight: 500;
}
.sidebar-video-link i {
margin-right: 4px;
}
.sidebar-video-link:hover {
text-decoration: underline;
}
.sidebar-comment-img.emoji {
width: auto;
display: inline-block;
vertical-align: middle;
height: min-content;
}
.comment-content img:not(.emoji) {
display: block;
}
/* Smaller emojis in the narrow left sidebar */
body.layout-modern .comment-content img.emoji {
height: auto;
max-width: 60px !important;
vertical-align: middle;
}
@keyframes flashGreen {
0% {
background-color: rgba(var(--accent-rgb), 0.3);
}
100% {
background-color: var(--item-bg);
}
}
@keyframes newItemFlash {
0% {
border-left-color: var(--accent);
background: rgba(var(--accent-rgb), 0.15);
}
60% {
border-left-color: var(--accent);
background: rgba(var(--accent-rgb), 0.05);
}
100% {
border-left-color: transparent;
background: transparent;
}
}
.new-item-fade {
animation: newItemFlash 2.5s ease forwards;
border-left: 3px solid transparent;
}
.sidebar-activity .new-item-fade {
border-left: none;
animation: none;
}
/* Comment posted by the current user — fades in + accent border that auto-disappears */
@keyframes commentEnter {
0% {
opacity: 0;
transform: translateY(6px);
border-left-color: var(--accent);
background: rgba(var(--accent-rgb), 0.15);
}
20% {
opacity: 1;
transform: translateY(0);
border-left-color: var(--accent);
background: rgba(var(--accent-rgb), 0.15);
}
60% {
background: rgba(var(--accent-rgb), 0.05);
}
70% {
border-left-color: var(--accent);
background: transparent;
}
100% {
border-left-color: transparent;
}
}
.comment-entering {
animation: commentEnter 7.5s ease forwards;
border-left: 3px solid transparent;
}
.comment-highlighted {
border-left: 3px solid var(--accent) !important;
background: rgba(17, 17, 17, 0.55) !important;
}
@keyframes activityGlow {
0% {
color: var(--accent);
/* transform: scale(1); */
filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}
50% {
color: #1fb2b0;
/* transform: scale(1.2); */
filter: drop-shadow(0 0 10px #1fb2b0);
}
100% {
color: var(--accent);
/* transform: scale(1); */
filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}
}
.activity-glowing {
animation: activityGlow 1s ease-in-out;
transform-origin: center;
display: inline-block;
}
/* MOTD Display (Integrated into Navbar) */
.motd-container {
grid-column: 1 / -1;
width: 100%;
background: var(--motd-bg);
text-align: left;
z-index: 999;
border-top: 1px solid var(--nav-border-color);
border-bottom: 1px solid var(--nav-border-color);
font-size: 0.85em;
padding: 4px 0;
position: relative;
order: 2;
}
#motd-display {
text-transform: initial;
}
.motd-content {
line-height: 1.4;
/* padding: 0 30px 0 10px; */
/* Space for X button */
}
#motd-display,
#motd-display-guest {
left: 5px;
position: relative;
}
.motd-close {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--text-muted, #888);
font-size: 1.2em;
cursor: pointer;
padding: 0 5px;
line-height: 1;
transition: color 0.2s;
}
.motd-close:hover {
color: var(--accent);
}
.motd-content a {
color: var(--accent, #9f0);
text-decoration: underline;
}
.motd-content a:hover {
filter: brightness(1.2);
}
/* === SITE OVERRIDES (formerly w0bm.css) === */
.navbar-brand {
display: grid;
grid-template-columns: 1fr auto;
}
.image-brand {
width: 5cm;
}
.kontrollelement {
grid-column: 2;
}
.metadata {
grid-template-columns: 0.4fr auto 0.4fr;
grid-template-rows: auto 1fr;
background-color: transparent !important;
border: none !important;
}
html[theme="f0ck95d"] .badge-dark {
border: none;
background-image: none;
box-shadow: none;
}
.steuerung {
font-size: large;
font-family: monospace;
}
.steuerung a {
color: white;
}
.blahlol {
grid-column: 1 / 4;
width: 100%;
background: rgba(0, 0, 0, 0.2);
}
span#favs {
background: transparent !important;
border: none !important;
}
.badge-dark,
#themeselector {
background-color: unset;
border: unset;
}
._204863 {
background: none;
border: none;
background-color: none;
}
html[theme="iced"] ._204863 {
background: none;
}
.media-object {
border: none;
}
/*.v0ck {
background: transparent !important;
}*/
html[theme="f0ck95"] .embed-responsive.embed-responsive-16by9 {
background: var(--nav-bg) !important;
}
.v0ck_overlay {
background-color: transparent;
}
.v0ck_player_controls {
background: rgba(0, 0, 0, 0.95) !important;
}
html[theme="term"] .image-brand {
filter: hue-rotate(-50deg);
}
html[theme="f0ck"] .image-brand {
filter: hue-rotate(-50deg);
}
html[theme="p1nk"] .image-brand {
filter: hue-rotate(150deg);
}
html[theme="orange"] .image-brand {
filter: hue-rotate(-160deg);
}
.v0ck_overlay {
background-color: none !important;
}
.tags {
display: grid;
}
@media (min-width: 600px) {
.tags {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 900px) {
.tags {
grid-template-columns: repeat(3, 1fr);
}
}
.tag {
box-shadow: 1px 1px 1px black;
display: grid;
margin: 5px;
grid-template-columns: auto;
grid-template-rows: 1fr;
}
.navigation-rechts {
display: flex;
}
.about {
background: none !important;
}
.login-image {
width: 300px;
}
.tos {
margin: 2em;
}
.nav-link[data-toggle="dropdown"]::after {
content: "" !important;
}
/* .dropdown-menu.shii {
width: auto;
} */
@media (min-width: 900px) {
.tags {
grid-template-columns: repeat(auto-fill, 20em);
justify-content: center;
}
}
.tag img {
width: 100%;
}
@media (max-width: 1056px) {
html,
body {
text-align: left;
max-width: 100vw;
overflow-x: clip;
}
}
html[theme="f0ck95d"] .embed-responsive.embed-responsive-16by9 {
border-bottom: outset 2px silver;
}
html[theme="f0ck95"] .embed-responsive.embed-responsive-16by9 {
border-bottom: outset 2px silver;
}
/* Fade in video on page load */
video {
opacity: 0;
animation: fadeIn 2s forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.navbar {
border-bottom: none;
/* padding: 5px; */
/* testing if it works good */
}
.image-brand {
width: 4cm;
}
.pagewrapper {
padding: 5px;
padding-bottom: 65px;
/* Reserve space for fixed pagination */
position: relative;
}
@media (min-width: 1200px) {
.pagewrapper {
padding-right: 300px;
}
body.sidebar-right-hidden .pagewrapper {
padding-right: 5px;
}
}
/*
Since Index and Item pages have their own layout wrappers that handle space reservation,
we disable the generic pagewrapper padding on those pages to avoid "double padding" or broken expansion.
*/
@media (min-width: 1200px) {
.pagewrapper:has(.index-layout-wrapper),
.pagewrapper:has(.item-layout-container),
.pagewrapper:has(.meme-layout-wrapper),
body.private-gate-active .pagewrapper {
padding-right: 0 !important;
}
}
.container {
padding-top: 1vh;
}
#next,
#prev {
visibility: hidden;
}
@media (max-width: 1056px) {
.navigation-links {
display: grid;
grid-row: 1;
grid-column: 2;
}
.navbar-brand {
grid-row: 1;
grid-column: 1;
}
#navbarSupportedContent {
grid-row: 1;
grid-column: 3;
}
.navbar {
grid-template-columns: 0fr 1fr auto !important;
grid-template-rows: 1fr;
}
.navbar-nav {
display: grid !important;
grid-template-rows: auto;
grid-template-columns: auto auto 1fr;
grid-gap: 0.25em;
}
}
.bg-black {
background: #0000008a !important;
}
.pagination>a {
background: #232323b2;
}
html[theme="paper"] .pagination {
color: white;
}
html[theme="paper"] .navbar-brand {
background: transparent;
}
.navbar-brand:hover {
background: transparent;
}
div.search {
display: grid;
}
div.sbt {
display: grid;
grid-template-columns: 1fr auto;
align-content: center;
}
#sbtButton {
visibility: hidden;
}
#sbtInput {
background: #00000021;
box-shadow: -1px -1px 0px #252525;
border: inset 1px #0000001c;
padding: revert;
box-shadow: inset 0px 0px 5px 1px #0000005e;
width: 100%;
}
.navigation-links {
display: grid;
grid-row: 1;
grid-column: 2;
grid-template-columns: auto auto 1fr;
}
.navigation-links-guest,
ol {
margin: 5px;
margin-block-start: 0;
margin-block-end: 0;
padding-inline-start: 0;
}
/* === VIEW-SPECIFIC STYLES === */
/* === NAVBAR STYLES === */
/* ── Desktop layout: single flex row ── */
.navbar {
position: sticky;
top: 0;
z-index: 1005;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
/* allows motd-container to wrap to its own full-width row */
font-family: var(--font);
border-bottom: 1px solid var(--nav-border-color);
background: var(--nav-bg);
}
/* Brand: always visible, flush left */
.navbar-brand {
flex-shrink: 0;
display: flex;
align-items: center;
height: 40px;
max-width: 180px;
}
/* Nav collapse: fills middle, always visible on desktop */
.nav-collapse {
flex: 1;
display: flex;
align-items: center;
min-width: 0;
}
/* Right group: flush right */
.nav-right-group {
display: flex;
align-items: center;
gap: 20px;
padding: 0 15px;
flex-shrink: 0;
margin-left: auto;
}
/* MOTD: wraps to its own full-width row below brand+links+right-group */
.motd-container {
order: 999;
width: 100%;
flex-shrink: 0;
}
/* Uniform size for all Font Awesome icons in the navbar */
.navbar .fa-solid,
.navbar .fa-regular,
.navbar .fa {
font-size: 14px;
width: 14px;
text-align: center;
line-height: 1;
}
/* Hamburger button: hidden on desktop */
.navbar-toggler {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
gap: 5px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
cursor: pointer;
padding: 4px;
flex-shrink: 0;
}
.navbar-toggler span {
display: block;
width: 18px;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Animated X when open */
.navbar-toggler.is-open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.navbar-toggler.is-open span:nth-child(2) {
opacity: 0;
}
.navbar-toggler.is-open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Icon cluster: tags / filter / search */
.nav-icon-cluster {
display: flex;
align-items: center;
gap: 10px;
padding: 0 6px;
border-left: 1px solid rgba(255, 255, 255, 0.08);
border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-icon-cluster a,
.nav-item-rel>a,
.nav-right-group>a {
color: #fff;
opacity: 0.75;
transition: opacity 0.2s;
}
.nav-icon-cluster a:hover,
.nav-item-rel>a:hover,
.nav-right-group>a:hover {
opacity: 1;
}
/* Right-anchor all dropdowns inside nav-right-group */
.nav-right-group .nav-user-menu {
left: auto;
right: 0;
transform: none;
}
.nav-right-group .notif-dropdown {
left: auto;
right: 0;
/* anchor to bell container right edge; JS overrides on mobile */
transform: none;
}
/* Shift arrow to sit directly under the bell icon */
.nav-right-group .notif-dropdown::before,
.nav-right-group .notif-dropdown::after {
left: auto;
right: 0;
transform: none;
}
/* Bell active state: lights up when notification dropdown is open */
#nav-notif-btn {
transition: color 0.15s ease, filter 0.15s ease, transform 0.15s ease;
}
#nav-notif-btn.is-active {
color: var(--accent);
filter: drop-shadow(0 0 5px var(--accent));
opacity: 1;
}
/* ── Mobile: ≤768px ── */
@media (max-width: 768px) {
/* Show hamburger */
.navbar-toggler {
display: flex;
color: white;
}
/* Hide desktop icon cluster */
.nav-icon-cluster {
display: none;
}
/* On mobile: right group stays in the single top row */
.nav-right-group {
gap: 15px;
padding: 0 4px;
margin-left: auto;
}
/* nav-collapse: hidden by default, opens as full-width row below brand+right */
.nav-collapse {
display: none;
flex: none;
/* override desktop flex:1 so width:100% takes effect */
order: 10;
width: 100%;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
padding: 6px 8px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: var(--nav-bg);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
gap: 4px;
}
.nav-collapse.show {
display: flex;
animation: navFadeIn 0.2s ease-out;
}
@keyframes navFadeIn {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Nav links: horizontal row on mobile too */
.nav-links {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
width: 100%;
gap: 4px;
}
.nav-links>a {
display: inline-flex;
align-items: center;
padding: 8px 12px;
font-size: 0.9em;
}
.nav-halls-dropdown .nav-halls-btn {
display: block;
padding: 13px 16px;
width: 100%;
text-align: left;
}
.nav-halls-dropdown .nav-user-menu {
position: static !important;
display: none;
background: rgba(255, 255, 255, 0.04);
box-shadow: none;
border: none;
right: auto;
left: auto;
width: 100%;
}
.nav-halls-dropdown:hover .nav-user-menu,
.nav-halls-dropdown.is-open .nav-user-menu {
display: block;
}
/* Avatar dropdown stays floating (absolute) on mobile */
.nav-right-group .nav-user-menu {
position: absolute;
}
.nav-item-rel {
position: relative;
display: inline-flex;
}
}
@media (max-width: 467px) {
.nav-avatar-name,
.nav-avatar-caret {
display: none;
}
}
.switch-container {
display: inline-flex;
align-items: center;
margin-right: 15px;
}
.switch {
position: relative;
display: inline-block;
width: 34px;
height: 18px;
margin-bottom: 0;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 2px;
bottom: 2px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked+.slider {
background-color: #f44336;
}
input:checked+.slider:before {
transform: translateX(16px);
}
.switch-label {
margin-right: 8px;
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
}
.mode-selector {
display: inline-flex;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 3px;
overflow: hidden;
vertical-align: middle;
grid-column: 1;
}
.mode-btn {
display: inline-block;
background: transparent;
color: rgba(255, 255, 255, 0.7);
border: none;
padding: 2px 8px;
font-size: 11px;
cursor: pointer;
text-decoration: none;
transition: all 0.2s;
line-height: 18px;
}
.mode-btn:hover {
color: #fff;
background: rgba(255, 255, 255, 0.1);
text-decoration: none;
}
.mode-btn.active {
background: var(--accent);
color: var(--bg);
font-weight: bold;
}
.mode-btn:not(:last-child) {
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
/* ---------- Random / Shuffle mode button ---------- */
.shuffle-btn {
background: none;
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--white);
padding: 5px 5px;
font-size: 0.8em;
font-weight: bold;
cursor: pointer;
border-radius: 3px;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 5px;
min-width: 50px;
justify-content: center;
opacity: 0.8;
grid-row: 2;
}
.shuffle-btn:hover {
color: #fff;
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.4);
opacity: 1;
}
.shuffle-btn.active {
background: var(--accent);
color: var(--bg, #000);
border-color: rgba(255, 255, 255, 0.2);
font-weight: bold;
}
@keyframes shuffle-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.shuffle-btn.is-shuffling .shuffle-icon {
display: inline-block;
animation: shuffle-spin 0.4s ease-out;
}
.notif-footer {
padding: 10px;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(0, 0, 0, 0.2);
}
.view-all-notifs {
color: var(--accent) !important;
font-size: 11px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 0.5px;
}
.view-all-notifs:hover {
text-decoration: underline !important;
}
/* ---------- footer.html styles ---------- */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
}
body.modal-open {
overflow: hidden;
}
.modal-content {
background: #222;
padding: 20px;
width: 90%;
max-width: 400px;
color: #fff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 15px;
}
textarea.mod-reason {
width: 100%;
height: 80px;
margin-top: 10px;
background: #333;
color: #fff;
border: 1px solid #444;
resize: vertical;
padding: 5px;
}
.error-msg {
color: #ff6b6b;
font-size: 0.9em;
margin-top: 5px;
display: none;
}
/* ---------- notifications.html styles ---------- */
.notif-history-container {
max-width: 760px !important;
margin: 0 auto;
padding: 20px 10px;
}
.notif-page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding: 5px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.notif-page-header h2 {
font-size: 0.9em;
margin: 0;
text-transform: uppercase;
letter-spacing: 2px;
color: #777;
}
.notifications-list-full.posts {
display: grid !important;
grid-template-columns: 1fr;
gap: 0 !important;
width: 100% !important;
border: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
}
.notifications-page .notif-item {
display: grid !important;
grid-template-columns: 0.3fr 1fr 1fr;
width: 100%;
align-items: center;
padding: 8px 15px;
text-decoration: none;
color: #999;
border-bottom: 1px solid rgba(255, 255, 255, 0.02);
font-size: 0.9em;
transition: all 0.1s;
}
.notifications-page .notif-item:last-child {
border-bottom: none;
}
.notifications-page .notif-item:hover {
background: rgba(255, 255, 255, 0.04);
color: #eee;
}
.notifications-page .notif-item.unread {
background: rgba(var(--accent-rgb, 31, 178, 176), 0.03);
color: #eee;
border-left: 2px solid var(--accent, #1fb2b0);
font-weight: 500;
grid-template-columns: auto;
}
.notif-user {
font-weight: bold;
color: #bbb;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.notif-item.unread .notif-user {
color: var(--accent, #1fb2b0);
}
.notif-msg {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.notif-time {
font-family: monospace;
font-size: 0.8em;
color: #444;
}
.notif-item:hover .notif-time {
color: #777;
}
.btn-small {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #666;
padding: 3px 10px;
border-radius: 3px;
cursor: pointer;
font-size: 10px;
text-transform: uppercase;
transition: all 0.2s;
}
.btn-small:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #888;
color: #ccc;
}
/* ---------- subscriptions.html styles ---------- */
.subs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 15px;
margin-bottom: 40px;
}
.sub-card {
background: rgba(0, 0, 0, 0.3);
border-radius: 4px;
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.sub-link {
text-decoration: none;
color: inherit;
display: block;
flex-grow: 1;
}
.sub-card img {
width: 100%;
height: 110px;
object-fit: cover;
display: block;
}
.sub-info {
padding: 8px;
}
.sub-id {
display: block;
font-weight: bold;
color: var(--accent);
}
.sub-user {
display: block;
font-size: 0.85em;
color: #888;
}
.unsub-btn {
width: 100%;
border: none;
background: rgba(200, 50, 50, 0.2);
color: #ff6666;
padding: 8px;
cursor: pointer;
font-size: 0.9em;
transition: background 0.2s;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.unsub-btn:hover {
background: rgba(200, 50, 50, 0.4);
}
/* ---------- mod/approve.html styles ---------- */
.approval-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.approval-card {
background: var(--nav-bg);
border: 1px solid var(--nav-border-color);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.approval-card-media {
width: 100%;
background: #000;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
.approval-card-media img,
.approval-card-media video,
.approval-card-media iframe {
max-width: 100%;
max-height: 300px;
width: 100%;
object-fit: contain;
}
.approval-card-body {
padding: 15px;
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.approval-card-info {
font-size: 14px;
color: var(--white);
}
.approval-card-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.approval-card-actions {
margin-top: auto;
display: flex;
gap: 10px;
padding-top: 10px;
border-top: 1px solid var(--nav-border-color);
}
.approval-card-actions a {
flex: 1;
text-align: center;
padding: 8px;
text-decoration: none;
}
/* ---------- mod/audit.html styles ---------- */
.audit-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-top: 20px;
}
@media (min-width: 768px) {
.audit-grid {
grid-template-columns: 1fr 1fr;
}
}
.audit-card {
background: var(--badge-bg);
border: 1px solid var(--nav-border-color);
border-radius: 8px;
padding: 15px;
display: flex;
flex-direction: column;
gap: 10px;
transition: transform 0.2s ease, border-color 0.2s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.audit-card:hover {
transform: translateY(-2px);
border-color: var(--accent);
}
.audit-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
border-bottom: 1px solid var(--nav-border-color);
padding-bottom: 10px;
margin-bottom: 5px;
}
.audit-card-user {
font-weight: bold;
font-size: 1.1em;
}
.audit-card-time {
font-size: 0.85em;
color: #888;
}
.audit-card-body {
display: flex;
flex-direction: column;
gap: 8px;
}
.audit-card-row {
display: flex;
gap: 8px;
align-items: baseline;
}
.audit-label {
font-size: 0.8em;
text-transform: uppercase;
color: #888;
min-width: 80px;
}
.audit-value {
word-break: break-all;
}
.audit-reason-box {
margin-top: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.2);
border-left: 3px solid var(--accent);
font-style: italic;
font-size: 0.9em;
}
.badge-action {
text-transform: uppercase;
font-size: 0.75em;
}
.audit-diff {
background: rgba(0, 0, 0, 0.3);
border-radius: 4px;
padding: 10px;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 0.85em;
line-height: 1.4;
word-break: break-all;
border: 1px solid rgba(255, 255, 255, 0.05);
margin-top: 5px;
}
.diff-removed {
color: #ff8080;
background-color: rgba(255, 0, 0, 0.15);
display: block;
padding: 0 4px;
}
.diff-added {
color: #80ff80;
background-color: rgba(0, 255, 0, 0.15);
display: block;
padding: 0 4px;
}
div.posts>a.thumb.has-notif {
box-shadow: inset 0 0 0 1000px rgba(255, 0, 0, 0.28) !important;
border: 1px solid var(--accent);
}
div.posts>a.thumb.has-notif:hover {
box-shadow: inset 0 0 0 1000px rgba(255, 0, 0, 0.4), 0 0 0 2px var(--accent) !important;
}
div.posts>a.thumb.has-notif::after {
content: attr(data-ext) " / " attr(data-user) !important;
visibility: hidden;
opacity: 1 !important;
background-color: var(--posts-meta-bg) !important;
color: var(--accent) !important;
font-weight: normal !important;
z-index: 10 !important;
}
div.posts>a.thumb.has-notif:hover::after {
visibility: visible !important;
}
div.posts>a.thumb.has-notif p::after {
content: "!" !important;
position: absolute !important;
bottom: 10px !important;
left: 50% !important;
transform: translateX(-50%) !important;
color: var(--accent) !important;
font-size: 40px !important;
font-weight: 900 !important;
text-shadow: 0 0 10px #000, 0 0 20px rgba(var(--accent-rgb), 0.5) !important;
z-index: 200 !important;
pointer-events: none !important;
visibility: visible !important;
}
.thumb {
position: relative;
overflow: hidden;
}
.thumb>.preview-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 5;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease-in;
}
.thumb>.preview-video.playing {
opacity: 1;
}
.thumb p {
position: relative;
z-index: 10;
pointer-events: none;
}
div.posts>a::after {
z-index: 10 !important;
pointer-events: none;
}
/* Fallback placeholder for thumbnails that failed to load */
.thumb.thumb-fallback {
background-size: contain !important;
background-color: #0e0e1a !important;
opacity: 0.6;
}
.pin-indicator {
position: absolute;
top: 5px;
left: 5px;
font-size: 13px;
fill: var(--accent);
color: var(--accent);
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));
z-index: 15;
pointer-events: none;
}
.oc-indicator {
position: absolute;
left: 1px;
fill: #ffd700;
pointer-events: none;
bottom: 1px;
line-height: normal;
font-size: 13px;
font-family: 'VCR' !important;
z-index: 11;
}
/* For sub-cards which have a simpler structure */
.sub-link .pin-indicator {
top: 3px;
left: 3px;
}
/* Content Warning Modal */
#content-warning-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
z-index: 99999;
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(5px);
}
.content-warning-content {
background: var(--bg);
border: 1px solid var(--nav-border-color);
padding: 2rem;
max-width: 500px;
width: 90%;
text-align: center;
border-radius: 4px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
color: var(--font-color);
}
.content-warning-content h3 {
margin-top: 0;
color: var(--accent);
margin-bottom: 1rem;
}
.content-warning-content p {
margin-bottom: 2rem;
line-height: 1.5;
}
.content-warning-content .modal-actions {
display: flex;
justify-content: center;
gap: 1rem;
}
.content-warning-content button {
padding: 10px 20px;
cursor: pointer;
font-family: var(--font);
font-weight: bold;
border: none;
border-radius: 3px;
text-transform: uppercase;
color: var(--black);
}
.content-warning-content #cw-accept {
background: var(--accent);
}
.content-warning-content #cw-accept:hover {
opacity: 0.9;
}
.content-warning-content #cw-decline {
background: var(--gray);
color: var(--white);
}
.content-warning-content #cw-decline:hover {
background: #333;
}
/* Video Player Settings Menu */
.v0ck_settings_container {
position: relative;
display: flex;
/* Fix alignment */
align-items: center;
}
.v0ck_settings_menu {
position: absolute;
bottom: 100%;
/* Position above the button */
right: 0;
margin-bottom: 5px;
background-color: rgba(0, 0, 0, 0.9);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
padding: 5px 0;
display: flex;
flex-direction: column;
min-width: 100px;
z-index: 20;
/* Ensure it's above other controls */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.v0ck_settings_menu.v0ck_hidden {
display: none;
}
.v0ck_menu_item {
background: transparent;
border: none;
color: #fff;
padding: 8px 15px;
text-align: left;
cursor: pointer;
font-size: 14px;
font-family: inherit;
white-space: nowrap;
transition: background-color 0.2s;
width: 100%;
}
.v0ck_menu_item:hover {
background-color: rgba(255, 255, 255, 0.1);
}
/* ... (rest of CSS) */
/* Specific styling for SWF/BG buttons now in menu */
#toggleswf {
display: block;
width: 100%;
text-align: center;
/* Center text */
}
/* Background Row Styling */
.v0ck_bg_row {
display: flex;
align-items: center;
justify-content: space-between;
/* Label on left, switch on right? Or center? User asked for "items centered". */
/* If items centered, maybe justify-content: center with a gap? */
/* Let's try space-between for the row content (Label ... Switch) looks better usually,
but if the menu is wide, it might look odd.
Let's stick to space-between for the row, but ensure the menu itself centers the row?
The row IS the menu item.
Let's use space-between for label and switch.
*/
justify-content: space-between;
padding: 8px 15px;
width: 100%;
box-sizing: border-box;
}
.v0ck_switch_label {
margin-right: 10px;
font-size: 14px;
color: #fff;
}
/* Cool Switch Styling */
.v0ck_cool_switch {
width: 36px;
height: 20px;
background-color: #555;
border-radius: 10px;
position: relative;
cursor: pointer;
transition: background-color 0.3s;
}
.v0ck_cool_switch::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background-color: #fff;
border-radius: 50%;
transition: transform 0.3s;
}
.v0ck_cool_switch.active {
background-color: var(--gray);
}
.v0ck_cool_switch.active::after {
transform: translateX(16px);
}
.v0ck_cool_switch:hover {
opacity: 0.9;
}
/* Update Menu Item Styling for Centering */
.v0ck_menu_item {
/* ... existing styles ... */
/* We want to center the SWF button text */
text-align: center;
}
/* Ensure menu itself centers items? */
.v0ck_settings_menu {
/* ... existing styles ... */
align-items: center;
/* Center items horizontally */
min-width: 160px;
/* Ensure enough width */
}
/* Fix hover effect for settings button (viewBox scaling issue) */
.v0ck_settings_btn svg:hover {
stroke-width: 2px !important;
/* Override the default 30px which is for large viewBoxes */
}
/* Ensure SVG is vertically centered */
.v0ck_settings_btn svg {
vertical-align: middle;
}
/* Mobile Optimized Player Controls */
@media screen and (max-width: 600px) {
.v0ck_volume:hover+input[type="range"][name="volume"],
.v0ck_player_controls>input[type="range"][name="volume"]:hover {
min-width: 40px !important;
/* Smaller expansion on mobile */
max-width: 40px !important;
}
}
.navbar {
background: rgba(0, 0, 0, 0.2);
border-bottom: 1px solid var(--nav-border-color);
}
body.layout-modern .navbar-header,
body.layout-legacy .navbar-header {
background: transparent;
}
.sidebar-tags-container {
padding: 5px;
background: rgba(0, 0, 0, 0.2);
border-top: 1px solid var(--nav-border-color);
overflow: visible;
flex-shrink: 0;
}
/* ===== layout-modern: flexible by default, viewport-locked for item view ===== */
@media (min-width: 1000px) {
body.layout-modern {
display: flex;
flex-direction: column;
min-height: 100vh;
overflow-y: auto;
}
/* Removed app-like viewport lock to enable body scrolling */
body.layout-modern:has(.item-layout-container) {
overflow: visible;
height: auto;
}
body.layout-modern>.pagewrapper {
flex: 1;
display: flex;
flex-direction: column;
/* Reset top/side padding but let sidebar-aware padding-right be handled below */
padding-top: 0 !important;
padding-left: 0 !important;
padding-bottom: 0 !important;
padding-right: 0;
/* overridden to 300px by sidebar rule below for generic pages */
}
body.layout-modern:has(.item-layout-container)>.pagewrapper {
min-height: 0;
overflow: visible;
}
body.layout-modern>.pagewrapper>#main,
body.layout-modern>#main {
flex: 1;
display: flex;
flex-direction: column;
align-items: normal;
}
body.layout-modern:has(.item-layout-container)>.pagewrapper>#main,
body.layout-modern:has(.item-layout-container)>#main {
min-height: 0;
overflow: visible;
}
}
/* layout-modern: restore sidebar right-padding AND block-flow for generic pages
(profile, settings, subscriptions, etc.) — identical behaviour to layout-legacy.
Specialized pages (index, item, meme) manage their own layout, so exclude them. */
@media (min-width: 1200px) {
body.layout-modern>.pagewrapper:not(:has(.index-layout-wrapper)):not(:has(.item-layout-container)):not(:has(.meme-layout-wrapper)) {
padding-right: 300px;
}
body.layout-modern.sidebar-right-hidden>.pagewrapper:not(:has(.index-layout-wrapper)):not(:has(.item-layout-container)):not(:has(.meme-layout-wrapper)) {
padding-right: 0;
}
}
/* For generic pages in layout-modern, reset #main to plain block flow so children
fill the full available width — mirrors layout-legacy exactly and prevents any
flex child centering (e.g. margin:0 auto shrinking content like on /subscriptions). */
body.layout-modern>.pagewrapper:not(:has(.index-layout-wrapper)):not(:has(.item-layout-container)):not(:has(.meme-layout-wrapper)):not(:has(.messages-convo-page))>#main {
display: block !important;
width: 100%;
}
@media (min-width: 1000px) {
/* metadata + comment headers must sit above the grid overflow */
body.layout-modern .metadata,
body.layout-modern .comment-header {
z-index: 100 !important;
position: relative;
}
body.layout-modern .sidebar-tags-container {
overflow-y: visible !important;
}
body.layout-modern .sidebar-tags-container span#tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
max-height: 70px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-color) transparent;
}
}
/* ===== layout-legacy: natural page scroll (2-column, body scrolls) ===== */
@media (min-width: 1000px) {
body.layout-legacy {
overflow: visible !important;
height: auto !important;
max-height: none !important;
display: block;
}
body.layout-legacy>.wrapper,
body.layout-legacy>.pagewrapper {
display: block;
height: auto;
min-height: 100vh;
padding-top: 0 !important;
}
body.layout-legacy>#main:not(.messages-convo-page),
body.layout-legacy #main:not(.messages-convo-page) {
display: block;
height: auto;
/*padding-top: 0 !important;*/
}
body.layout-legacy .item-layout-container {
height: auto !important;
min-height: 0;
}
body.layout-legacy .metadata,
body.layout-legacy .comment-header {
z-index: 100 !important;
position: relative;
}
body.layout-legacy .sidebar-tags-container,
body.layout-legacy .comments-list {
overflow-y: visible !important;
}
}
/* Global Breakout Tooltip System (Replaces native CSS tooltips to prevent clipping/scrolling bugs) */
[tooltip]::before,
[tooltip]::after {
display: none !important;
}
#f0ck-breakout-tooltip {
font-family: Helvetica, sans-serif;
text-align: center;
padding: 5px 10px;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
background: #535050;
color: #fff;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
z-index: 1000000;
pointer-events: none;
position: fixed;
line-height: normal;
display: block;
opacity: 0;
transform: translateY(-5px);
transition: opacity 0.15s ease, transform 0.15s ease;
}
#f0ck-breakout-tooltip.is-visible {
opacity: 1;
transform: translateY(0);
}
#f0ck-breakout-tooltip::before {
content: '';
position: absolute;
border: 5px solid transparent;
z-index: 1000001;
}
#f0ck-breakout-tooltip[data-flow="up"]::before,
#f0ck-breakout-tooltip[data-flow="up-left"]::before {
top: 100%;
left: 50%;
transform: translateX(-50%);
border-top-color: #535050;
border-bottom-width: 0;
}
#f0ck-breakout-tooltip[data-flow="up-left"]::before {
left: 10px;
transform: none;
}
#f0ck-breakout-tooltip[data-flow="down"]::before {
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-bottom-color: var(--tooltip-bg, #131212);
border-top-width: 0;
}
#f0ck-breakout-tooltip[data-flow="left"]::before {
top: 50%;
left: 100%;
transform: translateY(-50%);
border-left-color: var(--tooltip-bg, #131212);
border-right-width: 0;
}
#f0ck-breakout-tooltip[data-flow="right"]::before {
top: 50%;
right: 100%;
transform: translateY(-50%);
border-right-color: var(--tooltip-bg, #131212);
border-left-width: 0;
}
/* Tag Controls Refinement */
.tag-controls {
display: flex;
align-items: center;
padding: 5px;
gap: 5px;
}
.tag-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--badge-tag, #171717);
border: 1px outset #221d1d;
color: var(--white, #fff) !important;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
text-decoration: none !important;
}
.tag-btn.is-sfw {
color: #28a745 !important;
}
.tag-btn.is-nsfw {
color: #dc3545 !important;
}
/* Rating Button in gapRight */
#a_toggle.rating-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 5px;
height: 14px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.15);
background-color: #444;
color: #fff;
font-size: 8px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
line-height: 1;
font-family: inherit;
}
#a_toggle.rating-btn:hover {
filter: brightness(1.15);
transform: scale(1.05);
}
#a_toggle.rating-btn.is-sfw {
background-color: var(--badge-sfw);
border-color: rgba(0, 0, 0, 0.15);
}
#a_toggle.rating-btn.is-nsfw {
background-color: var(--badge-nsfw);
border-color: rgba(0, 0, 0, 0.15);
}
#a_toggle.rating-btn.is-nsfl {
background-color: var(--badge-nsfl);
border-color: rgba(0, 0, 0, 0.15);
}
#a_toggle.rating-btn.is-untagged {
background-color: #444;
}
.tag-btn svg {
fill: currentColor;
width: 20px;
height: 20px;
}
.rules {
padding: 10px;
}
/* Shortcuts List */
#shortcuts-modal .login-modal-content {
max-height: 90vh;
overflow-y: auto;
display: flex;
flex-direction: column;
scrollbar-width: thin;
scrollbar-color: var(--accent) transparent;
}
#shortcuts-modal .login-modal-content::-webkit-scrollbar-thumb {
background-color: var(--accent);
background-clip: content-box;
border: 3px solid transparent;
border-radius: 10px;
}
.shortcuts-content {
padding: 10px 20px 20px 20px;
color: var(--white);
text-align: left;
}
.shortcut-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 15px;
}
.shortcut-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding-bottom: 8px;
font-family: var(--font);
gap: 15px;
}
.shortcut-item span:first-child {
flex-shrink: 0;
white-space: nowrap;
}
.shortcut-item span:last-child {
text-align: right;
opacity: 0.8;
}
.shortcut-item kbd {
background: var(--badge-bg);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--accent);
padding: 2px 6px;
border-radius: 3px;
font-size: 0.9em;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
#help-button:hover {
opacity: 1 !important;
color: var(--white) !important;
}
#shortcut-theme {
cursor: pointer;
}
@media (max-width: 480px) {
#shortcuts-modal {
padding: 10px;
}
.shortcuts-content h2 {
font-size: 1.2rem;
margin-bottom: 15px !important;
}
.shortcut-item {
font-size: 12px;
gap: 8px;
}
}
#a_username {
color: var(--white);
display: inline;
}
.id-link {
color: var(--white);
}
/* Image Modal / Lightbox */
.image-modal-overlay {
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 10000;
overflow: auto;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: opacity 0.3s ease;
display: none;
/* Hidden by default */
flex-direction: column;
}
.image-modal-overlay.visible {
display: flex !important;
}
.image-modal-close {
position: fixed;
top: 20px;
right: 30px;
color: #fff;
font-size: 32px;
font-weight: bold;
cursor: pointer;
z-index: 10002;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
transition: all 0.2s;
}
.image-modal-close:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
.image-modal-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
padding: 40px;
box-sizing: border-box;
margin: auto;
}
/* Explicitly isolate modal image from on-page styles */
.image-modal-container img#image-modal-img {
display: block;
margin: auto;
max-width: none !important;
max-height: none !important;
width: auto !important;
height: 100% !important;
border-radius: 2px;
animation: modalZoomIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
cursor: move !important;
/* Fallback */
cursor: -webkit-grab !important;
cursor: -moz-grab !important;
cursor: grab !important;
/* Standard rules must be last */
transform-origin: center;
transition: transform 0.05s ease-out;
user-select: none;
}
/* Mobile responsive scaling for the image modal */
@media (max-width: 768px) {
.image-modal-container {
padding: 0 !important;
}
.image-modal-container img#image-modal-img {
max-width: 100vw !important;
max-height: 100vh !important;
object-fit: contain;
}
.image-modal-close {
top: 10px;
right: 15px;
width: 40px;
height: 40px;
font-size: 28px;
background: rgba(0, 0, 0, 0.8);
/* Higher contrast on mobile */
}
}
/* Hardened 'Closed Grab' / Grabbing state */
body.modal-is-grabbing,
body.modal-is-grabbing * {
cursor: move !important;
/* Fallback */
cursor: -webkit-grabbing !important;
cursor: -moz-grabbing !important;
cursor: grabbing !important;
/* Standard rules must be last */
}
@keyframes modalZoomIn {
from {
transform: scale(0.98);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
body.modal-open {
overflow: hidden !important;
padding-right: var(--scrollbar-width, 0px);
}
body.layout-modern .tag-controls {
background: rgba(0, 0, 0, 0.2);
border-top: 1px solid var(--nav-border-color);
}
.phrase {
text-align: center;
font-size: small;
background: rgba(0, 0, 0, 0.2);
}
/* Global Drag & Drop Overlay */
#drop-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(var(--accent-rgb), 0.15);
backdrop-filter: blur(8px);
z-index: 10000;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
border: 4px dashed var(--accent);
margin: 10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
border-radius: 20px;
}
#drop-overlay.active {
display: flex;
pointer-events: auto;
}
#drop-overlay .overlay-content {
background: var(--shade1, #111);
padding: 40px;
border-radius: 20px;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 1);
border: 1px solid var(--shade3, #333);
}
#drop-overlay h2 {
margin: 15px 0 0 0;
font-size: 2rem;
color: var(--white);
text-transform: uppercase;
letter-spacing: 2px;
}
#drop-overlay svg {
color: var(--accent);
filter: drop-shadow(0 0 15px var(--accent));
}
/* Upload Drag Modal */
#upload-drag-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
z-index: 10001;
display: none;
align-items: center;
justify-content: center;
}
#upload-drag-modal.show {
display: flex;
}
#upload-drag-modal .modal-content {
background: var(--shade1, #111);
border: 1px solid var(--shade3, #333);
padding: 0;
width: 900px;
max-width: 95vw;
position: relative;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
max-height: 90vh;
overflow-y: auto;
}
#upload-drag-modal .modal-close {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
color: var(--white);
font-size: 24px;
cursor: pointer;
line-height: 1;
z-index: 10;
}
#upload-drag-modal .upload-container {
max-width: 100%;
width: 100%;
}
/* Private Society Gate */
.private-gate {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
text-align: center;
gap: 15px;
}
.private-gate h1 {
font-family: 'VCR', monospace;
font-size: 3rem;
color: var(--accent);
letter-spacing: 2px;
}
.private-gate p {
color: var(--white);
opacity: 0.7;
font-size: 1.1rem;
}
.private-gate-btn {
background: var(--accent);
color: var(--black);
border: none;
padding: 10px 40px;
font-weight: bold;
font-size: 1rem;
cursor: pointer;
letter-spacing: 1px;
text-transform: uppercase;
transition: opacity 0.2s;
}
.private-gate-btn:hover {
opacity: 0.85;
}
.private-gate-actions {
display: flex;
gap: 15px;
align-items: center;
}
.private-gate-btn-secondary {
background: transparent;
color: var(--accent);
border: 1px solid var(--accent);
}
.private-gate-btn-secondary:hover {
background: var(--accent);
color: var(--black);
}
.index-sidebar-right-footer,
.item-sidebar-right-footer,
.global-sidebar-right-footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr auto;
align-items: center;
align-content: center;
border-top: 1px solid var(--nav-border-color);
flex-shrink: 0;
background: rgba(0, 0, 0, 0.3);
min-height: 30px;
text-align: center;
}
.global-sidebar-right-footer>a {
border-right: 1px solid var(--gray);
opacity: 0.8;
}
.global-sidebar-right-footer>a:hover {
opacity: 1;
}
#help-button {
cursor: pointer;
padding: 0 10px;
font-size: 16px;
line-height: 1;
}
.git-hash {
font-family: monospace;
font-size: 10px;
opacity: 0.5;
text-align: right;
padding-right: 5px;
}
.item-preview {
background: #0000001f;
display: grid;
grid-template-columns: auto 1fr;
margin-top: 5px;
gap: 5px;
}
.item-preview a {
align-self: center;
}
.item-preview a img {
display: grid;
height: 32px;
background: black;
border-radius: 5px;
margin: 5px;
}
/* ═══════════════════════════════════════════════════════════
PRIVATE MESSAGES / DM SYSTEM
═══════════════════════════════════════════════════════════ */
/* ── Page layout ─────────────────────────────────────────── */
.messages-page {
max-width: 720px;
margin: 0 auto;
padding: 16px;
display: flex;
flex-direction: column;
min-height: auto;
}
.messages-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
border-bottom: 1px solid var(--border, #333);
padding-bottom: 12px;
gap: 12px;
}
.messages-header h2 {
margin: 0;
font-size: 1.1em;
letter-spacing: 0.08em;
color: var(--accent);
}
.dm-back-btn {
color: var(--accent);
font-size: 1.4em;
text-decoration: none;
line-height: 1;
padding: 4px 8px;
border-radius: 4px;
transition: background 0.15s;
}
.dm-back-btn:hover {
background: var(--bg2, #222);
}
.dm-convo-header-info {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
}
.dm-convo-badge.badge-nsfw {
background: var(--badge-nsfw);
}
.badge-nsfl {
color: var(--white);
background-color: var(--badge-nsfl);
padding-right: 5px;
padding-left: 5px;
padding-top: 1.5px;
padding-bottom: 1.5px;
border-radius: 3px;
text-shadow: 1px 1px var(--black);
text-transform: uppercase;
}
.dm-convo-delete {
background: var(--badge-nsfw);
border: none;
border-radius: 5px;
}
.dm-header-avatar {
width: 32px;
height: 32px;
border-radius: 4px;
object-fit: cover;
}
.dm-header-username {
font-weight: 600;
font-size: 1em;
text-decoration: none;
color: var(--fg, #ddd);
}
.dm-header-username:hover {
text-decoration: underline;
}
/* ── Key notice banner ───────────────────────────────────── */
.dm-key-notice {
background: rgba(255, 200, 80, 0.15);
border: 1px solid rgba(255, 200, 80, 0.4);
color: #ffc850;
padding: 10px 14px;
border-radius: 6px;
font-size: 0.88em;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.dm-key-export-inline {
background: rgba(255, 200, 80, 0.25);
border: 1px solid rgba(255, 200, 80, 0.5);
color: #ffc850;
padding: 3px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 0.9em;
}
.dm-key-export-inline:hover {
background: rgba(255, 200, 80, 0.4);
}
/* ── Inbox list ──────────────────────────────────────────── */
.dm-inbox-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.dm-convo-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 8px;
background: var(--bg2, #1a1a1a);
border: 1px solid transparent;
text-decoration: none;
color: var(--fg, #ccc);
transition: background 0.15s, border-color 0.15s;
position: relative;
}
.dm-convo-card:hover {
background: var(--bg3, #222);
border-color: var(--accent);
}
.dm-convo-card.dm-convo-unread {
border-color: var(--accent);
}
.dm-convo-avatar {
width: 42px;
height: 42px;
border-radius: 6px;
object-fit: cover;
flex-shrink: 0;
}
.dm-convo-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.dm-convo-name {
font-weight: 600;
font-size: 0.95em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dm-convo-time {
font-size: 0.78em;
color: #666;
}
.dm-convo-badge {
background: var(--accent);
color: var(--bg, #000);
font-size: 0.72em;
font-weight: 700;
min-width: 20px;
height: 20px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 5px;
flex-shrink: 0;
}
/* ── Thread ──────────────────────────────────────────────── */
.dm-thread {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 8px;
padding: 15px;
min-height: 200px;
max-height: calc(100vh - 420px);
}
/* ── Message bubbles ─────────────────────────────────────── */
.dm-msg {
display: flex;
flex-direction: column;
max-width: 75%;
gap: 3px;
}
.dm-msg-mine {
align-self: flex-end;
align-items: flex-end;
}
.dm-msg-theirs {
align-self: flex-start;
align-items: flex-start;
}
.dm-bubble {
padding: 9px 13px;
border-radius: 14px;
font-size: 0.92em;
line-height: 1.45;
word-break: break-word;
}
/* Full-width when message contains a block embed (YouTube etc.) */
.dm-msg.dm-has-embed {
width: 90%;
min-width: 280px;
max-width: 90%;
}
.dm-bubble .yt-embed-wrap {
max-width: 100%;
margin: 4px 0 0;
min-width: 400px;
}
@media (max-width: 700px) {
.dm-bubble .yt-embed-wrap {
min-width: 300px;
}
}
.dm-msg-mine .dm-bubble {
background: var(--badge-bg);
color: var(--white);
border-bottom-right-radius: 4px;
}
.dm-msg-theirs .dm-bubble {
background: var(--bg2, #222);
color: var(--fg, #ddd);
border: 1px solid #333;
border-bottom-left-radius: 4px;
}
.dm-msg-time {
font-size: 0.72em;
color: #555;
padding: 0 4px;
}
.dm-unreadable {
font-style: italic;
opacity: 0.5;
font-size: 0.88em;
}
/* ── Send form ───────────────────────────────────────────── */
.dm-send-form {
gap: 8px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #333;
flex-shrink: 0;
}
.dm-input {
flex: 1;
background: var(--bg2, #1a1a1a);
border: 1px solid #444;
color: var(--fg, #ddd);
border-radius: 8px;
padding: 10px 12px;
font-size: 0.92em;
resize: none;
min-height: 44px;
max-height: 140px;
font-family: inherit;
transition: border-color 0.15s;
line-height: 1.4;
}
.dm-input:focus {
outline: none;
border-color: var(--accent);
}
.dm-send-btn {
background: var(--accent);
color: var(--bg, #000);
border: none;
border-radius: 8px;
padding: 10px 18px;
font-weight: 700;
cursor: pointer;
font-size: 0.9em;
height: 44px;
flex-shrink: 0;
transition: opacity 0.15s;
}
.dm-send-btn:hover {
opacity: 0.85;
}
.dm-send-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* ── State messages ──────────────────────────────────────── */
.dm-loading,
.dm-empty,
.dm-error {
color: #666;
font-size: 0.9em;
padding: 24px;
text-align: center;
line-height: 1.6;
}
.dm-error {
color: #e06c6c;
}
/* ── Key Manager Modal ───────────────────────────────────── */
.dm-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.75);
z-index: 15000;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.dm-modal {
background: var(--bg, #111);
border: 1px solid var(--accent);
border-radius: 10px;
width: 100%;
max-width: 480px;
max-height: 90vh;
overflow-y: auto;
padding: 28px;
position: relative;
}
.dm-modal h2 {
margin: 0 0 6px;
font-size: 1.1em;
color: var(--accent);
}
.dm-modal-sub {
font-size: 0.85em;
color: #888;
margin: 0 0 18px;
line-height: 1.5;
}
.dm-modal-close {
position: absolute;
top: 14px;
right: 16px;
background: none;
border: none;
color: #888;
font-size: 1.4em;
cursor: pointer;
line-height: 1;
}
.dm-modal-close:hover {
color: var(--fg, #ddd);
}
.dm-key-status {
background: rgba(255, 255, 255, 0.04);
border-radius: 6px;
padding: 10px 12px;
font-size: 0.85em;
margin-bottom: 18px;
border: 1px solid #333;
}
.dm-key-section {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #2a2a2a;
}
.dm-key-section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.dm-key-section h3 {
font-size: 0.9em;
margin: 0 0 6px;
color: var(--fg, #ccc);
}
.dm-key-section p {
font-size: 0.82em;
color: #777;
margin: 0 0 10px;
line-height: 1.5;
}
.dm-key-input {
display: block;
width: 100%;
background: var(--bg2, #1a1a1a);
border: 1px solid #444;
color: var(--fg, #ddd);
border-radius: 6px;
padding: 8px 10px;
font-size: 0.88em;
margin-bottom: 8px;
box-sizing: border-box;
font-family: inherit;
}
.dm-key-input:focus {
outline: none;
border-color: var(--accent);
}
.dm-key-btn {
background: var(--accent);
color: var(--bg, #000);
border: none;
border-radius: 6px;
padding: 8px 16px;
font-weight: 600;
cursor: pointer;
font-size: 0.86em;
transition: opacity 0.15s;
}
.dm-key-btn:hover {
opacity: 0.85;
}
.dm-key-btn-danger {
background: #d94f4f;
color: #fff;
}
.dm-key-danger h3 {
color: #d94f4f;
}
.dm-key-msg {
font-size: 0.82em;
margin-top: 8px;
min-height: 18px;
}
.dm-msg-ok {
color: #5cb85c;
}
.dm-msg-err {
color: #e06c6c;
}
/* ── Blocking modal (seed-phrase setup / recovery) ───────── */
.dm-modal-blocking {
z-index: 20000;
/* above everything */
}
.dm-modal-blocking .dm-modal {
max-width: 540px;
}
/* ── Seed word grid ──────────────────────────────────────── */
.dm-seed-grid,
.dm-recovery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin: 16px 0;
}
.dm-seed-word {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid #333;
border-radius: 6px;
padding: 8px 10px;
font-size: 0.9em;
}
.dm-seed-num {
color: #555;
font-size: 0.78em;
min-width: 16px;
text-align: right;
flex-shrink: 0;
}
.dm-seed-val {
color: var(--accent);
font-weight: 600;
font-family: monospace;
letter-spacing: 0.03em;
word-break: break-all;
}
/* Recovery inputs reuse .dm-seed-word layout */
.dm-seed-input-wrap input.dm-recovery-word {
flex: 1;
background: none;
border: none;
outline: none;
color: var(--fg, #ddd);
font-size: 0.88em;
font-family: monospace;
padding: 0;
width: 100%;
min-width: 0;
}
.dm-seed-input-wrap:focus-within {
border-color: var(--accent);
}
/* Copy / primary button */
.dm-key-btn-primary {
background: var(--accent);
color: var(--bg, #000);
width: 100%;
margin-top: 4px;
}
.dm-key-btn-primary:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.dm-copy-seed {
width: 100%;
background: rgba(255, 255, 255, 0.07);
color: var(--fg, #ddd);
border: 1px solid #444;
margin-bottom: 14px;
}
/* Forced-confirm checkbox */
.dm-seed-confirm {
background: rgba(255, 200, 80, 0.08);
border: 1px solid rgba(255, 200, 80, 0.3);
border-radius: 6px;
padding: 12px 14px;
margin-bottom: 14px;
}
.dm-seed-confirm label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-size: 0.87em;
color: #ffc850;
line-height: 1.4;
}
.dm-seed-confirm input[type="checkbox"] {
margin-top: 2px;
flex-shrink: 0;
accent-color: var(--accent);
width: 16px;
height: 16px;
}
@media (max-width: 500px) {
.dm-seed-grid,
.dm-recovery-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ── Navbar DM icon ──────────────────────────────────────── */
#nav-dm-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 3px;
}
/* reuse .notif-count styling for dm badge — already defined */
/* ── Mobile adjustments ──────────────────────────────────── */
@media (max-width: 600px) {
.messages-page {
padding: 10px;
}
.dm-msg {
max-width: 90%;
}
.dm-thread {
max-height: calc(100vh - 240px);
}
.dm-modal {
padding: 20px;
}
}
/* ══════════════════════════════════════════════════════════
Full-height chat layout — conversation page
══════════════════════════════════════════════════════════ */
/* ── DESKTOP (> 768px): same pattern as the sidebar ───────
position:fixed takes it out of flow entirely — no pagewrapper
padding, no body scroll involvement, just viewport-anchored. */
@media (min-width: 769px) {
.messages-convo-page {
position: fixed !important;
top: var(--navbar-h, 50px) !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 1;
display: flex !important;
flex-direction: column !important;
}
/* Kill the layout-legacy pagewrapper min-height:100vh that causes body overflow */
body:has(.messages-convo-page) .pagewrapper {
min-height: 0 !important;
overflow: hidden;
}
}
/* ── MOBILE (≤ 768px): position:fixed pagewrapper ─────────
Works on mobile; locks the pagewrapper to the viewport. */
@media (max-width: 768px) {
html:has(.messages-convo-page),
body:has(.messages-convo-page) {
height: 100%;
overflow: hidden;
}
body:has(.messages-convo-page) .pagewrapper {
position: fixed;
top: var(--navbar-h, 50px);
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
padding: 0;
display: flex;
flex-direction: column;
}
}
/* ── Shared: convo pane is a flex column ──────────────────
Both viewports share this — desktop gets explicit height
above, mobile gets height from fixed pagewrapper. */
.messages-convo-page {
overflow: hidden;
padding: 0;
max-width: 720px;
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
/* flex:1 + min-height:0 for mobile where parent is fixed pagewrapper */
flex: 1;
min-height: 0;
}
/* Header: never shrinks */
.messages-convo-page .messages-header {
flex-shrink: 0;
padding: 10px 16px;
margin-bottom: 0;
border-bottom: 1px solid var(--border, #333);
}
/* Key notice banner if visible */
.messages-convo-page #dm-key-notice {
flex-shrink: 0;
}
/* Thread: grows + scrolls — min-height:0 is critical */
.messages-convo-page .dm-thread {
flex: 1;
min-height: 0;
max-height: none;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 12px 16px;
}
/* Input bar: never shrinks */
.messages-convo-page .dm-send-form {
flex-shrink: 0;
margin-top: 0;
padding: 10px 16px;
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid #333;
}
.notif-count-dm {
position: absolute;
top: -7px;
right: -5px;
background: var(--badge-nsfw);
color: white;
font-size: 10px;
padding: 2px 2px;
border-radius: 3px;
line-height: 1;
}
.dm-bubble .emoji {
max-width: 200px;
}
/* ── DM Post Preview Card ─────────────────────────────────── */
a.dm-post-card,
span.dm-post-card {
display: flex;
align-items: stretch;
gap: 0;
border-radius: 10px;
overflow: hidden;
text-decoration: none;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.3);
margin: 6px 0 2px;
max-width: 320px;
transition: border-color 0.15s, background 0.15s;
cursor: pointer;
}
a.dm-post-card:hover {
border-color: var(--accent);
background: rgba(0, 0, 0, 0.4);
}
/* Loading state */
span.dm-post-card--loading {
opacity: 0.55;
}
.dm-post-card__thumb-wrap {
position: relative;
flex-shrink: 0;
width: 72px;
height: 72px;
background: #111;
overflow: hidden;
}
.dm-post-card__thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dm-post-card__thumb-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #555;
font-size: 1.2em;
}
/* Media type badge (top-right of thumb) */
.dm-post-card__type-badge {
position: absolute;
top: 4px;
right: 4px;
background: rgba(0, 0, 0, 0.7);
color: var(--accent, #aaa);
font-size: 0.65em;
padding: 2px 4px;
border-radius: 4px;
line-height: 1.2;
pointer-events: none;
}
.dm-post-card__info {
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
padding: 8px 12px;
min-width: 160px;
flex: 1;
}
.dm-post-card__id {
font-weight: 700;
font-size: 0.88em;
color: var(--accent, #aaa);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dm-post-card__uploader,
.dm-post-card__comments {
font-size: 0.75em;
color: rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dm-post-card__uploader i,
.dm-post-card__comments i {
font-size: 0.85em;
opacity: 0.7;
flex-shrink: 0;
}
/* Invert text colors inside a "mine" bubble so card still reads well */
.dm-msg-mine .dm-post-card__uploader,
.dm-msg-mine .dm-post-card__comments {
color: rgba(255, 255, 255, 0.65);
}
.dm-msg-mine a.dm-post-card {
background: rgba(0, 0, 0, 0.2);
border-color: rgba(255, 255, 255, 0.15);
}
/* ── Global Chat Post Preview Card ──────────────────────────── */
a.gchat-post-card,
span.gchat-post-card {
display: inline-flex;
align-items: stretch;
border-radius: 8px;
overflow: hidden;
text-decoration: none;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.3);
margin: 4px 0 2px;
max-width: 280px;
transition: border-color 0.15s, background 0.15s;
vertical-align: middle;
cursor: pointer;
}
a.gchat-post-card:hover {
border-color: var(--accent);
background: rgba(0, 0, 0, 0.45);
}
span.gchat-post-card--loading {
opacity: 0.55;
}
.gchat-post-card__thumb-wrap {
position: relative;
flex-shrink: 0;
width: 60px;
height: 60px;
background: #111;
overflow: hidden;
}
.gchat-post-card__thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gchat-post-card__thumb-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #555;
font-size: 1em;
}
.gchat-post-card__type-badge {
position: absolute;
top: 3px;
right: 3px;
background: rgba(0, 0, 0, 0.75);
color: var(--accent, #aaa);
font-size: 0.6em;
padding: 2px 3px;
border-radius: 3px;
line-height: 1.2;
pointer-events: none;
}
.gchat-post-card__info {
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
padding: 6px 10px;
min-width: 120px;
flex: 1;
}
.gchat-post-card__id {
font-weight: 700;
font-size: 0.82em;
color: var(--accent, #aaa);
white-space: nowrap;
}
.gchat-post-card__uploader,
.gchat-post-card__comments {
font-size: 0.72em;
color: rgba(255, 255, 255, 0.45);
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gchat-post-card__uploader i,
.gchat-post-card__comments i {
font-size: 0.85em;
opacity: 0.7;
flex-shrink: 0;
}
/* Köpfe — random corner image */
#koepfe-img {
position: fixed;
bottom: 0;
left: 0;
z-index: -1;
max-height: 200px;
opacity: 0;
transition: opacity 0.3s ease;
user-select: none;
-webkit-user-drag: none;
will-change: opacity;
pointer-events: none;
}
#koepfe-img.visible {
opacity: 1;
}
.mode-filter {
display: grid;
justify-content: center;
margin: 20px;
grid-template-rows: 1fr;
grid-template-columns: auto 1fr;
gap: 5px;
}
#nav_excluded_tags_list {
margin-bottom: 15px;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
max-width: 100%;
}
.nav-exclude {
width: 100%;
max-width: 600px;
margin: 0 auto;
position: relative;
}
#nav_exclude_tag_input {
width: 100%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--nav-border-color);
color: var(--white);
padding: 10px;
}
#nav_exclude_suggestions {
display: none;
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background: #1e1e1e;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.5);
max-height: 200px;
overflow-y: auto;
z-index: 1000;
}
.nav-mime-filter {
position: relative;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
/* ── Meme Pages (Critical) ────────────────────────────── */
.meme-select-container,
.meme-creator-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 5vh 20px 20px;
/* matched to .container standards */
position: relative;
z-index: 10;
}
.meme-header {
margin-bottom: 25px;
border-bottom: 1px solid var(--accent, #9f0);
padding-bottom: 15px;
}
.meme-title {
font-family: var(--nav-brand-font, 'VCR'), monospace;
color: var(--accent, #9f0);
text-transform: uppercase;
margin: 0;
}
.meme-subtitle {
font-family: var(--font, monospace);
color: #888;
margin: 5px 0 20px 0;
}
.category-filter-bar {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding-bottom: 20px;
}
.category-chip {
background: var(--nav-bg, #2b2b2b);
border: 1px solid var(--nav-border-color, rgba(255, 255, 255, .05));
color: var(--white, #fff);
padding: 6px 14px;
border-radius: 20px;
font-family: var(--font, monospace);
font-size: 0.85em;
cursor: pointer;
}
.category-chip.active {
background: var(--accent, #9f0);
color: var(--black, #000);
border-color: var(--accent, #9f0);
}
.template-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 15px;
}
.anim {
margin: 0;
animation: color 0.6s linear infinite !important;
}
@keyframes color {
0% {
color: red;
}
25% {
color: yellow;
}
50% {
color: #1FB2B0;
}
75% {
color: #23dd06;
}
100% {
color: red;
}
}
.anim-boxshadow {
margin: 0;
animation: boxshadow 0.6s linear infinite !important;
}
@keyframes boxshadow {
0% {
box-shadow: 0 0 0 2px red;
}
25% {
box-shadow: 0 0 0 2px yellow;
}
50% {
box-shadow: 0 0 0 2px #1FB2B0;
}
75% {
box-shadow: 0 0 0 2px #23dd06;
}
100% {
box-shadow: 0 0 0 2px red;
}
}
body.layout-modern .gapRight {
justify-content: center;
}
body.layout-modern .gapRight>svg.iconset,
body.layout-modern .gapRight>i.iconset {
height: 30px;
width: 30px;
margin: 5px;
padding: 5px;
right: 0px;
background: var(--badge-tag);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
box-sizing: border-box;
}
body.layout-legacy .gapRight {
justify-content: center;
}
body.layout-legacy .gapRight>svg.iconset,
body.layout-legacy .gapRight>i.iconset {
height: 30px;
width: 30px;
margin: 5px;
padding: 5px;
right: 0px;
background: var(--badge-tag);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
box-sizing: border-box;
}
body.layout-legacy .gapRight>.iconset#a_favo {
fill: #ff009b;
}
/* OC Toggle Icon - now i element, color inherited from .gapRight i.iconset */
i.iconset#a_oc {
color: #fff !important;
fill: #fff !important;
}
/* OC Feature */
.oc-badge {
background: #009fff;
color: #000;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: bold;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
user-select: none;
font-family: 'VCR';
}
.oc-badge svg.iconset-oc {
width: 14px;
height: 14px;
}
.oc-option {
display: flex;
align-items: center;
gap: 8px;
user-select: none;
justify-content: center;
margin-bottom: 5px;
}
.oc-option input[type="checkbox"] {
cursor: pointer;
width: 16px;
height: 16px;
}
.oc-label {
font-weight: 500;
color: var(--white);
opacity: 0.9;
}
.oc-label i {
color: #ffd700;
margin-right: 4px;
}
/* Premium Responsive Table System */
.responsive-table {
width: 100%;
border-collapse: collapse;
color: var(--white);
}
.responsive-table th,
.responsive-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
@media (max-width: 768px) {
.responsive-table,
.responsive-table thead,
.responsive-table tbody,
.responsive-table th,
.responsive-table td,
.responsive-table tr {
display: block;
}
/* Hide table headers (but keep for accessibility) */
.responsive-table thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.responsive-table tr {
margin-bottom: 30px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 0;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
overflow: hidden;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.responsive-table td {
border: none;
position: relative;
padding: 12px 15px 12px 42% !important;
/* Slightly reduced labels width for more content space */
min-height: 48px;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
/* Prevent wrapping inside standard cells */
gap: 12px;
text-align: left !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
box-sizing: border-box;
}
/* Highlight the first cell (User Info) as a card header */
.responsive-table td:first-child {
background: rgba(255, 255, 255, 0.06);
padding: 20px 20px !important;
padding-left: 20px !important;
/* Explicit reset to fix "cramped to right" bug */
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 5px;
display: block;
/* Ensure it takes full width for the header style */
width: 100%;
box-sizing: border-box;
}
.responsive-table td:first-child::before {
display: none !important;
/* Force hide label */
}
.user-info-cell {
width: 100%;
justify-content: flex-start;
}
.responsive-table td::before {
content: attr(data-label);
position: absolute;
left: 15px;
width: 35%;
white-space: nowrap;
font-weight: 800;
color: var(--accent);
font-size: 0.65em;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.8;
}
/* Special handling for the Actions cell */
.responsive-table td[data-label="Actions"] {
background: rgba(0, 0, 0, 0.2);
padding: 15px !important;
margin-top: 10px;
display: block;
border-bottom: none;
}
.responsive-table td[data-label="Actions"]::before {
position: static;
display: block;
width: 100%;
margin-bottom: 12px;
text-align: center;
}
.user-actions-row {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 10px !important;
width: 100%;
justify-content: stretch !important;
}
.user-actions-row button {
margin: 0 !important;
width: 100%;
justify-content: center;
font-size: 0.8em;
padding: 10px 5px !important;
}
/* Fix for ghost users/incomplete rows */
.responsive-table td:empty {
display: none;
}
}
.admin-header-flex {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 35px;
flex-wrap: wrap;
gap: 15px;
padding: 0 10px;
}
@media (max-width: 600px) {
.admin-header-flex {
flex-direction: column;
align-items: center;
text-align: center;
}
.admin-header-flex h2 {
margin-bottom: 8px !important;
font-size: 1.8em;
}
.admin-header-flex button {
width: 100%;
max-width: 300px;
}
}
/* profile stuff */
.profile_head {
display: grid;
grid-template-columns: auto 1fr;
background: var(--nav-bg);
}
.profile_head_avatar {
display: grid;
align-items: normal;
padding: 5px;
}
.layersoffear {
display: grid;
grid-template-columns: auto;
}
.profile_head_user_stats {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
}
.stat-id,
.stat-joined,
.stat-comments,
.stat-tags,
.stat-halls {
padding: 5px;
}
.uploads-header,
.favs-header {
background: var(--black);
padding: 5px;
}
@media (max-width: 700px) {
.profile_head_user_stats {
grid-auto-flow: row;
grid-auto-columns: 1fr !important;
grid-template-columns: 1fr 1fr;
}
.user_content_wrapper {
grid-template-columns: auto;
grid-auto-flow: column;
grid-template-rows: auto auto;
}
}
.setting-item {
display: grid;
}
textarea#profile_description {
height: 7em;
background: var(--nav-bg);
color: var(--white);
}
.profile-settings-actions {
padding-top: 10px;
}
.profile_description {
font-size: 0.8em;
color: var(--white);
max-width: 500px;
word-wrap: break-word;
}
/* =============================================
USER ALTERNATIVE INFOBOX STYLES
============================================= */
/* When user infobox is active, expand .blahlol to full metadata width */
.blahlol:has(.user-infobox-block) {
grid-column: 1 / -1;
}
.user-infobox-block {
display: flex;
gap: 10px;
background: rgba(0, 0, 0, 0.2);
border: 1px solid var(--author-border, rgba(0, 255, 0, 0.2));
line-height: 1;
padding: 5px;
align-items: flex-start;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-bottom: 10px;
}
.user-infobox-avatar {
flex-shrink: 0;
}
.user-infobox-avatar img {
width: 64px;
height: 64px;
object-fit: cover;
}
.user-infobox-info {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.user-infobox-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.user-infobox-username {
font-weight: 700;
color: var(--author-accent, inherit) !important;
text-decoration: none;
}
.user-infobox-timestamp {
font-size: 0.8em;
color: #888;
letter-spacing: 0.5px;
}
.user-infobox-description {
font-size: 0.9em;
line-height: 1.5;
color: #ccc;
font-style: italic;
text-align: left;
padding-top: 4px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
/* =============================================
xD Score Badge
============================================= */
.xd-score-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
border-radius: 4px;
font-family: var(--font, monospace);
font-size: 0.82em;
font-weight: bold;
letter-spacing: 0.5px;
cursor: default;
user-select: none;
border: 1px solid transparent;
transition: filter 0.2s ease;
}
.xd-score-badge:hover {
filter: brightness(1.15);
}
/* xD num */
.xd-score-num {
font-size: 0.85em;
opacity: 0.75;
font-weight: normal;
}
/* Tier 1: 1–4 pts — muted lime */
.xd-tier-1 {
background: #1a2e10;
color: #7ec850;
border-color: #3a5a20;
}
/* Tier 2: 5–14 pts — yellow-green */
.xd-tier-2 {
background: #2a2d00;
color: #c8d830;
border-color: #5a6400;
}
/* Tier 3: 15–29 pts — orange */
.xd-tier-3 {
background: #2d1800;
color: #e08030;
border-color: #6a3800;
}
/* Tier 4: 30–59 pts — red-orange */
.xd-tier-4 {
background: #2d0a00;
color: #e84020;
border-color: #7a2010;
}
/* Tier 5: 60+ pts — neon, pulsing glow */
.xd-tier-5 {
background: #1a0000;
color: #ff5500;
border-color: #ff3300;
box-shadow: 0 0 6px rgba(255, 80, 0, 0.5);
animation: xd-pulse 1.8s ease-in-out infinite;
}
/* ─── xD score filter in filter modal ─────────────────────────────── */
.nav-xd-filter {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.nav-xd-label {
display: block;
font-size: 0.8em;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #888;
margin-bottom: 6px;
}
.nav-xd-controls {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
@keyframes xd-pulse {
0%,
100% {
box-shadow: 0 0 5px rgba(255, 80, 0, 0.4), 0 0 12px rgba(255, 50, 0, 0.2);
}
50% {
box-shadow: 0 0 10px rgba(255, 100, 0, 0.8), 0 0 22px rgba(255, 60, 0, 0.4);
}
}
/* ─── xD Score Slider ──────────────────────────────────────────────── */
.xd-slider {
-webkit-appearance: none;
appearance: none;
flex: 1;
height: 6px;
border-radius: 3px;
background: linear-gradient(to right,
var(--xd-fill, #4caf50) 0%,
var(--xd-fill, #4caf50) var(--xd-pct, 0%),
rgba(255, 255, 255, 0.12) var(--xd-pct, 0%));
outline: none;
cursor: pointer;
min-width: 120px;
}
.xd-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--xd-fill, #4caf50);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
cursor: pointer;
transition: border-color 0.2s, transform 0.1s;
}
.xd-slider::-webkit-slider-thumb:hover {
transform: scale(1.2);
}
.xd-slider::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--xd-fill, #4caf50);
cursor: pointer;
}
.xd-slider-val {
display: inline-block;
min-width: 28px;
text-align: center;
font-family: monospace;
font-size: 0.9em;
font-weight: bold;
color: var(--xd-fill, #4caf50);
padding: 1px 5px;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 4px;
background: rgba(0, 0, 0, 0.2);
}
/* ─── xD score wrapper ─────────────────────────────────────────────── */
.xd-score-wrapper {
margin-top: 8px;
text-align: left;
padding: 5px;
}
/* ─── xD score thumbnail indicator (position fix) ─────────────────── */
.thumb-xd-indicator {
position: absolute;
bottom: 5px;
left: 5px;
padding: 1px 5px;
border-radius: 4px;
font-size: 0.65em;
font-weight: 700;
letter-spacing: 0.03em;
line-height: 1.4;
pointer-events: none;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
z-index: 10;
}
.thumb-xd-indicator.xd-tier-1 {
color: #a8e6a3;
border-color: #a8e6a3;
}
.thumb-xd-indicator.xd-tier-2 {
color: #ffe066;
border-color: #ffe066;
}
.thumb-xd-indicator.xd-tier-3 {
color: #ffa94d;
border-color: #ffa94d;
}
.thumb-xd-indicator.xd-tier-4 {
color: #ff6b6b;
border-color: #ff6b6b;
}
.thumb-xd-indicator.xd-tier-5 {
color: #ff3cac;
border-color: #ff3cac;
}
/* Performance & Utility */
.desktop-only {
display: inline-block !important;
}
.mobile-only {
display: none !important;
}
@media (max-width: 768px) {
.desktop-only {
display: none !important;
}
.mobile-only {
display: block !important;
}
}
#reports-table-body tr {
text-align: center;
}
/* Meta Suggestions */
.meta-suggestions-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 10px;
}
.meta-suggestion {
padding: 0.35rem 0.75rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50px;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 0.5rem;
color: rgba(255, 255, 255, 0.8);
user-select: text;
max-width: 100%;
min-width: 0;
}
.meta-suggestion span {
overflow-wrap: break-word;
word-break: break-word;
white-space: normal;
min-width: 0;
flex: 1;
}
.meta-suggestion:hover {
background: var(--bg);
border-color: var(--accent);
transform: translateY(-1px);
}
.meta-suggestion i {
font-size: 0.7rem;
opacity: 0.6;
}
.meta-suggestion.selected {
opacity: 0.4;
cursor: default;
pointer-events: none;
background: rgba(255, 255, 255, 0.02);
border-color: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.4) !important;
}
.meta-suggestion.selected i {
color: var(--accent);
opacity: 1;
}
#metadata-modal .f0ck-modal-body {
max-height: 400px;
overflow-y: auto;
}
/* Selection-edit popover for meta-suggestion pills */
.sel-tag-popover {
position: fixed;
z-index: 99999;
display: flex;
align-items: center;
gap: 6px;
background: #1e1e2e;
border: 1px solid var(--accent, #9f0);
border-radius: 8px;
padding: 5px 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
animation: sel-pop-in 0.12s ease;
}
@keyframes sel-pop-in {
from {
opacity: 0;
transform: translateY(4px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.sel-tag-popover input {
background: transparent;
border: none;
outline: none;
color: #fff;
font-size: 0.85em;
font-family: var(--font, monospace);
min-width: 80px;
max-width: 220px;
width: auto;
}
.sel-tag-popover-confirm {
background: var(--accent, #9f0);
color: #000;
border: none;
border-radius: 4px;
padding: 2px 8px;
font-size: 0.8em;
font-weight: bold;
cursor: pointer;
white-space: nowrap;
}
.sel-tag-popover-confirm:hover {
filter: brightness(1.15);
}
/* ── Emoji Admin Card Grid ─────────────────────────────────────────── */
.emoji-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
padding: 4px;
}
.emoji-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px 10px 12px;
background: var(--dropdown-bg);
border: 1px solid var(--nav-border-color);
border-radius: 6px;
transition: border-color .2s, box-shadow .2s, transform .15s;
}
.emoji-card:hover {
border-color: var(--accent);
box-shadow: 0 0 12px rgba(var(--accent-rgb, 100, 100, 255), .25);
transform: translateY(-2px);
}
.emoji-card .emoji-preview {
height: 48px;
max-width: 80px;
object-fit: contain;
image-rendering: auto;
}
.emoji-card .emoji-label {
font-family: monospace;
font-size: .85em;
color: var(--accent);
text-align: center;
word-break: break-all;
line-height: 1.2;
}
.emoji-card .emoji-url {
font-size: .65em;
opacity: .45;
text-align: center;
word-break: break-all;
line-height: 1.15;
max-height: 2.3em;
overflow: hidden;
}
.emoji-card .emoji-delete {
position: absolute;
top: 5px;
right: 5px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(200, 0, 0, .85);
color: #fff;
border: none;
border-radius: 50%;
font-size: 13px;
line-height: 1;
cursor: pointer;
opacity: 0;
transition: opacity .15s;
}
.emoji-card:hover .emoji-delete {
opacity: 1;
}
.emoji-card .emoji-delete:hover {
background: #e00;
}
/* ================================================================
GLOBAL CHAT WIDGET — Facebook-style, bottom-right (left of sidebar)
================================================================ */
#gchat-widget {
position: fixed;
bottom: 0;
right: calc(300px + 18px);
z-index: 950;
display: flex;
flex-direction: column;
align-items: flex-end;
pointer-events: none;
font-family: var(--font, monospace);
max-height: calc(100dvh - var(--navbar-h, 50px));
overflow: hidden;
}
body.sidebar-right-hidden #gchat-widget {
right: 18px;
}
body.scroller-active #gchat-widget {
display: none !important;
}
/* Reopen bubble — appears when chat is closed */
#gchat-reopen-bubble {
position: fixed;
bottom: 18px;
right: 18px;
z-index: 9998;
width: 42px;
height: 42px;
border-radius: 50%;
border: none;
background: var(--color-primary, #2a2a2a);
color: #fff;
font-size: 1.1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
opacity: 0.75;
transition: opacity 0.15s, transform 0.15s;
}
#gchat-reopen-bubble:hover {
opacity: 1;
transform: scale(1.08);
}
.gchat-bubble-badge {
position: absolute;
top: -5px;
right: -5px;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 999px;
background: #e53935;
color: #fff;
font-size: 0.68em;
font-weight: 700;
line-height: 18px;
text-align: center;
pointer-events: none;
animation: gchat-badge-pop 0.2s ease;
}
body.sidebar-right-hidden #gchat-reopen-bubble {
right: 18px;
}
body.scroller-active #gchat-reopen-bubble {
display: none !important;
}
@media (max-width: 999px) {
#gchat-widget {
right: calc(280px + 14px);
}
body.sidebar-right-hidden #gchat-widget {
right: 14px;
}
}
/* Chat panel — always visible */
#gchat-panel {
pointer-events: all;
display: flex;
flex-direction: column;
width: 300px;
height: 40dvh;
max-height: calc(100dvh - var(--navbar-h, 50px));
background: var(--bg, #1a1a1a);
border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.08));
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65);
overflow: hidden;
}
/* Float mode — detached from bottom-right, freely positioned */
#gchat-panel.gchat-floating {
position: fixed;
right: auto;
bottom: auto;
max-height: calc(100dvh - var(--navbar-h, 50px));
}
/* Draggable header cursor in float mode */
#gchat-panel.gchat-floating #gchat-header {
cursor: move;
}
/* Minimized state — only header visible */
#gchat-panel.gchat-minimized {
height: auto !important;
max-height: 42px;
}
#gchat-panel.gchat-minimized #gchat-messages,
#gchat-panel.gchat-minimized #gchat-input-area {
display: none !important;
}
/* Header */
#gchat-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
height: 42px;
background: var(--nav-bg, #111);
border-bottom: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.08));
cursor: default;
user-select: none;
flex-shrink: 0;
}
.gchat-header-btns {
display: flex;
align-items: center;
gap: 0;
flex-shrink: 0;
}
#gchat-title {
font-size: 0.82em;
font-weight: bold;
color: var(--accent, #f2ef0b);
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 6px;
}
.gchat-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: #e53935;
color: #fff;
font-size: 0.72em;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
animation: gchat-badge-pop 0.2s ease;
}
@keyframes gchat-badge-pop {
0% {
transform: scale(0.6);
opacity: 0;
}
60% {
transform: scale(1.2);
}
100% {
transform: scale(1);
opacity: 1;
}
}
.gchat-icon-btn {
background: none;
border: none;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
padding: 4px 6px;
border-radius: 4px;
font-size: 12px;
transition: color 0.15s, background 0.15s;
line-height: 1;
}
.gchat-icon-btn:hover {
color: #fff;
background: rgba(255, 255, 255, 0.08);
}
/* Messages area */
/* Pinned topic bar */
/* Online users bar */
#gchat-online {
display: none;
flex-shrink: 0;
border-bottom: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.07));
background: rgba(0, 0, 0, 0.15);
}
.gchat-online-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 10px;
gap: 8px;
}
.gchat-online-count {
font-size: 0.68em;
color: rgba(255, 255, 255, 0.45);
white-space: nowrap;
display: flex;
align-items: center;
gap: 4px;
}
.gchat-online-count::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #4caf50;
flex-shrink: 0;
}
.gchat-online-avatars {
display: flex;
align-items: center;
flex-direction: row-reverse;
/* stack right-to-left */
}
.gchat-online-avatar {
width: 20px;
height: 20px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--bg, #1a1a1a);
margin-left: -6px;
flex-shrink: 0;
transition: transform 0.1s;
}
.gchat-online-avatar:last-child {
margin-left: 0;
}
.gchat-online-avatars:hover .gchat-online-avatar {
transform: scale(1.1);
}
.gchat-online-extra {
font-size: 0.65em;
color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.08);
border-radius: 999px;
padding: 1px 5px;
margin-left: -2px;
white-space: nowrap;
}
#gchat-topic {
padding: 5px 10px;
font-size: 0.78em;
font-weight: 600;
color: var(--bg, #111);
background: var(--accent, #f2ef0b);
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
word-break: break-word;
white-space: pre-wrap;
flex-shrink: 0;
opacity: 0.95;
}
#gchat-messages {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 8px;
display: flex;
flex-direction: column;
gap: 6px;
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-color, #333) transparent;
overscroll-behavior: contain;
}
/* Single message row */
.gchat-msg {
display: flex;
align-items: flex-end;
gap: 6px;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.15s ease, transform 0.15s ease;
max-width: 100%;
}
.gchat-msg.gchat-msg-in {
opacity: 1;
transform: translateY(0);
}
.gchat-msg.gchat-msg-self {
flex-direction: row-reverse;
}
.gchat-avatar-link {
flex-shrink: 0;
display: flex;
align-items: flex-end;
}
.gchat-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
object-fit: cover;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.gchat-bubble-wrap {
display: flex;
flex-direction: column;
gap: 2px;
max-width: calc(100% - 36px);
}
.gchat-msg-self .gchat-bubble-wrap {
align-items: flex-end;
}
.gchat-username {
font-size: 0.7em;
font-weight: bold;
opacity: 0.85;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
color: var(--white, #fff);
}
.gchat-bubble {
background: rgba(0, 0, 0, 0.98);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px 14px 14px 3px;
padding: 6px 10px;
font-size: 0.82em;
line-height: 1.4;
color: var(--white, #f0f0f0);
word-break: break-word;
white-space: pre-wrap;
max-width: 100%;
}
.gchat-msg-self .gchat-bubble {
background: rgba(0, 0, 0, 0.98);
border-color: rgba(var(--accent-rgb, 242, 239, 11), 0.25);
border-radius: 14px 14px 3px 14px;
color: #fff;
}
.gchat-time {
font-size: 0.65em;
opacity: 0.45;
white-space: nowrap;
}
/* Greentext inside chat bubbles */
.gchat-bubble .gchat-greentext {
color: #6abf69;
display: block;
}
/* Spoiler/blur inside chat bubbles inherit existing styles */
.gchat-bubble .spoiler,
.gchat-bubble .blur-text {
cursor: pointer;
}
/* Emoji images inside chat bubbles */
.gchat-bubble .emoji {
height: 10.4em;
vertical-align: middle;
display: inline-block;
}
/* @mention links in chat */
.gchat-bubble .mention {
color: var(--accent, #f2ef0b);
text-decoration: none;
font-weight: bold;
}
.gchat-bubble .mention:hover {
text-decoration: underline;
}
/* Input area — stacked: toolbar on top, input row below */
#gchat-input-area {
display: flex;
flex-direction: column;
border-top: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.07));
background: var(--nav-bg, #0d0d0d);
flex-shrink: 0;
position: relative;
}
/* Toolbar row */
#gchat-toolbar {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px 2px;
}
.gchat-tool-btn {
background: none;
border: none;
color: rgba(255, 255, 255, 0.45);
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
font-size: 13px;
transition: color 0.15s, background 0.15s;
line-height: 1.3;
user-select: none;
}
.gchat-tool-btn:hover {
color: #fff;
background: rgba(255, 255, 255, 0.08);
}
/* Input + send row */
#gchat-input-row {
display: flex;
align-items: flex-end;
gap: 6px;
padding: 4px 8px 8px;
}
#gchat-input {
flex: 1;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--white, #fff);
font-family: var(--font, monospace);
font-size: 0.82em;
padding: 7px 12px;
resize: none;
outline: none;
line-height: 1.4;
transition: border-color 0.15s;
scrollbar-width: thin;
}
#gchat-input:focus {
border-color: var(--accent, #f2ef0b);
}
#gchat-input::placeholder {
opacity: 0.4;
}
#gchat-send-btn {
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
background: var(--accent, #f2ef0b);
color: var(--bg, #111);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: transform 0.15s ease, box-shadow 0.15s ease;
flex-shrink: 0;
}
#gchat-send-btn:hover {
transform: scale(1.1);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
#gchat-send-btn:active {
transform: scale(0.92);
}
/* Emoji picker grid (above input area, inside panel) */
#gchat-emoji-picker {
display: none;
grid-template-columns: repeat(6, 1fr);
gap: 4px;
padding: 8px;
overflow-y: auto;
max-height: 140px;
background: var(--nav-bg, #111);
border-top: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.08));
scrollbar-width: thin;
}
#gchat-emoji-picker img {
width: 36px;
height: 36px;
object-fit: contain;
cursor: pointer;
border-radius: 4px;
padding: 2px;
transition: background 0.1s;
}
#gchat-emoji-picker img:hover {
background: rgba(255, 255, 255, 0.12);
}
/* :emoji inline autocomplete — portaled to body */
#gchat-emoji-ac {
position: fixed;
z-index: 2000;
background: var(--bg, #1a1a1a);
border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.12));
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
overflow-y: auto;
max-height: 180px;
scrollbar-width: thin;
}
.gchat-emoji-ac-item {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 10px;
cursor: pointer;
font-size: 0.82em;
color: rgba(255, 255, 255, 0.8);
transition: background 0.1s;
}
.gchat-emoji-ac-item:hover,
.gchat-emoji-ac-item.active {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.gchat-emoji-ac-item img {
width: 22px;
height: 22px;
object-fit: contain;
flex-shrink: 0;
}
@media (max-width: 999px) {
#gchat-widget {
right: calc(280px + 14px);
}
body.sidebar-right-hidden #gchat-widget {
right: 14px;
}
}
/* @user mention autocomplete — portaled to body, always opens upward */
#gchat-mention-ac {
position: fixed;
z-index: 2000;
background: var(--bg, #1a1a1a);
border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.12));
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
overflow-y: auto;
max-height: 200px;
scrollbar-width: thin;
}
.gchat-mention-item {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 10px;
cursor: pointer;
font-size: 0.82em;
color: rgba(255, 255, 255, 0.8);
transition: background 0.1s;
}
.gchat-mention-item:hover,
.gchat-mention-item.active {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.gchat-mention-item img {
width: 22px;
height: 22px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.gchat-mention-name {
font-weight: bold;
}
.gchat-mention-display {
opacity: 0.55;
margin-left: 4px;
font-size: 0.9em;
}
/* Top-edge height resize handle */
#gchat-resize-h {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
cursor: ns-resize;
z-index: 10;
user-select: none;
touch-action: none;
}
/* Left-side width resize handle */
#gchat-resize-w {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 5px;
cursor: ew-resize;
z-index: 10;
user-select: none;
touch-action: none;
}
#gchat-resize-e {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 5px;
cursor: ew-resize;
z-index: 10;
user-select: none;
touch-action: none;
}
/* Panel needs relative positioning for the absolute left handle */
#gchat-panel {
position: relative;
}
/* Message action row — timestamp + reply + delete */
.gchat-msg-actions {
display: flex;
align-items: center;
gap: 4px;
opacity: 0;
transition: opacity 0.15s;
margin-top: 2px;
}
.gchat-msg:hover .gchat-msg-actions {
opacity: 1;
}
.gchat-reply-btn,
.gchat-del-btn {
background: none;
border: none;
cursor: pointer;
padding: 2px 4px;
border-radius: 3px;
font-size: 10px;
line-height: 1;
transition: background 0.12s, color 0.12s;
}
.gchat-reply-btn {
color: rgba(255, 255, 255, 0.4);
}
.gchat-reply-btn:hover {
color: var(--accent, #f2ef0b);
background: rgba(255, 255, 255, 0.06);
}
.gchat-del-btn {
color: rgba(255, 100, 100, 0.5);
}
.gchat-del-btn:hover {
color: #ff5555;
background: rgba(255, 80, 80, 0.1);
}
/* ── Chat embedded media ─────────────────────────────────────────────────── */
.gchat-embed-img,
.gchat-embed-video,
.gchat-embed-audio,
.gchat-embed-yt {
display: block;
margin-top: 6px;
max-width: 100%;
}
.gchat-embed-img img {
max-width: 100%;
max-height: 200px;
border-radius: 6px;
display: block;
object-fit: contain;
cursor: zoom-in;
}
.gchat-embed-img img:hover {
opacity: 0.9;
}
.gchat-embed-video video {
max-width: 100%;
max-height: 350px;
border-radius: 6px;
display: block;
}
.gchat-embed-audio audio {
width: 100%;
height: 36px;
}
/* Old iframe embed (no longer used, kept for safety) */
.gchat-embed-yt {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: 6px;
}
.gchat-embed-yt iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/* ── YouTube oEmbed preview card ──────────────────────────────────────────── */
.gchat-yt-card {
display: flex;
align-items: center;
gap: 10px;
margin-top: 6px;
border-radius: 8px;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
text-decoration: none;
color: inherit;
transition: background 0.15s;
max-width: 320px;
}
.gchat-yt-card:hover {
background: rgba(255, 255, 255, 0.1);
}
.gchat-yt-thumb-wrap {
position: relative;
flex-shrink: 0;
width: 110px;
height: 62px;
overflow: hidden;
}
.gchat-yt-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gchat-yt-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.35);
font-size: 1.6rem;
color: #ff0000;
pointer-events: none;
transition: background 0.15s;
}
.gchat-yt-card:hover .gchat-yt-play {
background: rgba(0, 0, 0, 0.55);
}
.gchat-yt-info {
flex: 1;
min-width: 0;
padding: 6px 8px 6px 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.gchat-yt-title {
font-size: 0.78rem;
font-weight: 600;
line-height: 1.3;
color: #fff;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gchat-yt-author {
font-size: 0.7rem;
opacity: 0.55;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Chat image modal ──────────────────────────────────────────────────────── */
#gchat-img-modal {
display: none;
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(0, 0, 0, 0.85);
align-items: center;
justify-content: center;
cursor: zoom-out;
animation: gchat-modal-fade 0.18s ease;
}
#gchat-img-modal.gchat-img-modal-open {
display: flex;
}
@keyframes gchat-modal-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#gchat-img-modal-inner {
position: relative;
max-width: 92vw;
max-height: 92vh;
display: flex;
align-items: center;
justify-content: center;
}
#gchat-img-modal-img {
max-width: 92vw;
max-height: 92vh;
object-fit: contain;
border-radius: 4px;
box-shadow: 0 8px 48px rgba(0, 0, 0, 0.9);
cursor: default;
}
/* ── Same-site item preview card ───────────────────────────────────────────── */
.gchat-item-card {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 6px;
border-radius: 8px;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
text-decoration: none;
color: inherit;
transition: background 0.15s, border-color 0.15s;
max-width: 260px;
width: 100%;
}
.gchat-item-card:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--accent, rgba(255, 255, 255, 0.2));
text-decoration: none;
}
.gchat-item-card-thumb {
position: relative;
flex-shrink: 0;
width: 80px;
height: 60px;
overflow: hidden;
background: rgba(0, 0, 0, 0.3);
}
.gchat-item-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gchat-item-card-icon {
position: absolute;
bottom: 4px;
right: 4px;
background: rgba(0, 0, 0, 0.6);
border-radius: 4px;
padding: 2px 5px;
font-size: 0.72rem;
color: #fff;
line-height: 1;
pointer-events: none;
}
.gchat-item-card-info {
flex: 1;
min-width: 0;
padding: 6px 8px 6px 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.gchat-item-card-id {
font-size: 0.8rem;
font-weight: 700;
color: var(--accent, #f2ef0b);
white-space: nowrap;
}
.gchat-item-card-meta {
font-size: 0.7rem;
opacity: 0.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Same-site item preview card ───────────────────────────────────────────── */
.gchat-item-card {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 6px;
border-radius: 8px;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
text-decoration: none;
color: inherit;
transition: background 0.15s, border-color 0.15s;
max-width: 260px;
width: 100%;
}
.gchat-item-card:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--accent, rgba(255, 255, 255, 0.2));
text-decoration: none;
}
.gchat-item-card-thumb {
position: relative;
flex-shrink: 0;
width: 80px;
height: 60px;
overflow: hidden;
background: rgba(0, 0, 0, 0.3);
}
.gchat-item-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gchat-item-card-icon {
position: absolute;
bottom: 4px;
right: 4px;
background: rgba(0, 0, 0, 0.6);
border-radius: 4px;
padding: 2px 5px;
font-size: 0.72rem;
color: #fff;
line-height: 1;
pointer-events: none;
}
.gchat-item-card-info {
flex: 1;
min-width: 0;
padding: 6px 8px 6px 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.gchat-item-card-id {
font-size: 0.8rem;
font-weight: 700;
color: var(--accent, #f2ef0b);
white-space: nowrap;
}
.gchat-item-card-meta {
font-size: 0.7rem;
opacity: 0.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* =============================================
SETTINGS PAGE – MOBILE OVERFLOW FIXES
Prevents long i18n strings (Deutsch / Zange)
from expanding past the viewport on mobile.
============================================= */
.settings {
max-width: 100%;
overflow-x: hidden;
box-sizing: border-box;
word-break: break-word;
overflow-wrap: anywhere;
}
.settings h1,
.settings h2,
.settings h4,
.settings label,
.settings span,
.settings small,
.settings p,
.settings legend {
overflow-wrap: anywhere;
word-break: break-word;
}
.settings fieldset {
min-width: 0;
/* prevent fieldsets from blowing out grid */
max-width: 100%;
box-sizing: border-box;
}
@media (max-width: 600px) {
.settings {
padding: 0 4px;
}
/* Account info table: stack label and value */
.settings .account-info-table td {
display: block;
width: 100% !important;
padding: 2px 0;
}
.settings .account-info-table tr {
display: block;
margin-bottom: 8px;
}
/* Display name row – stack input & button vertically */
.settings .account-info-table td[style*="display: flex"] {
flex-wrap: wrap;
}
/* Account actions grid – single column on mobile */
.settings .account-actions-grid {
grid-template-columns: 1fr !important;
}
/* Prevent flex rows from overflowing */
.settings .setting-item label[style*="display: flex"] {
flex-wrap: wrap;
}
.settings .setting-item label span {
flex: 1;
min-width: 0;
}
/* Hint text under checkboxes */
.settings small.text-muted {
display: block;
margin-left: 0 !important;
margin-top: 2px;
word-break: break-word;
overflow-wrap: anywhere;
}
/* Username color row */
.settings .setting-item div[style*="display: flex"] {
flex-wrap: wrap;
}
/* Linked accounts wrapper */
.settings .linked-accounts-wrapper,
.settings .preferences-settings-wrapper,
.settings .account-settings-wrapper,
.settings .profile-settings-wrapper {
max-width: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
.settings .account-settings-wrapper {
padding: 12px !important;
}
/* Fieldset legend text */
.settings fieldset legend {
font-size: 1em !important;
max-width: 100%;
overflow-wrap: anywhere;
}
}
#nav-meme-link, #nav-upload-link {
white-space: nowrap;
}
Reference in New Issue View Git Blame Copy Permalink