/*
* TorrentPier – Bull-powered BitTorrent tracker engine
*
* Modern skin layer for the "modern" template.
*
* Loaded ON TOP of the legacy stylesheet (main.css + dark-mode.css) and the
* Tailwind Play CDN. Every rule is scoped under `body.modern-ui`, so the
* "default" template is never affected. Dark mode reuses the existing
* `body.dark-mode` class (kept in sync with Tailwind's `.dark` on ).
*
* Design language: orange accent, rounded corners, soft shadows, responsive.
*/
body.modern-ui .colorAdmin, a.colorAdmin, a.colorAdmin:visited {
color: #DE0000 !important;
font-weight: bold;
text-shadow: 0px 0px 7px;
/* font-family: Segoe UI; */
background: url(../images/Nick/AdminEffect.gif),
url(../images/Nick/adminicon.png) no-repeat ;
padding-left: 18px;
padding-top: 1px;
}
body.modern-ui .colorTech, a.colorTech, a.colorTech:visited {
color: #000 !important;
font-weight: bold;
text-shadow: 0px 0px 7px #000;
background: url(../images/Nick/TechEffect.gif),
url(../images/Nick/techicon.png) no-repeat ;
padding-left: 18px;
padding-top: 1px;
}
body.modern-ui .colorSupp, a.colorSupp, a.colorSupp:visited {
color: #000 !important;
font-weight: bold;
text-shadow: 0px 0px 7px #000;
}
body.modern-ui .colorSuperMod, a.colorSuperMod, a.colorSuperMod:visited {
color: #006400 !important;
font-weight: bold;
text-shadow: 0px 0px 7px;
/* font-family: Segoe UI; */
background: url(../images/Nick/supermod.gif),
url(../images/Nick/sumodericon.png) no-repeat;
padding-left: 18px;
padding-top: 1px;
}
body.modern-ui .colorMod, a.colorMod, a.colorMod:visited {
color: #009900 !important;
font-weight: bold;
text-shadow: 0px 0px 7px;
/* font-family: Segoe UI; */
background: url(../images/Nick/ModerEffect.gif),
url(../images/Nick/modericon.png) no-repeat;
padding-left: 18px;
padding-top: 1px;
}
body.modern-ui .colorUpload, a.colorUpload, a.colorUpload:visited {
color: rgb(0, 135, 255) !important;
font-weight: bold;
text-shadow: 0px 0px 7px;
/* font-family: Segoe UI; */
background: url(../images/Nick/ReleaseEffect.gif);
/*url(../images/Nick/modericon.png) no-repeat; */
/*padding-left: 18px; */
padding-top: 1px;
}
body.modern-ui .colorModStaj, a.colorModStaj, a.colorModStaj:visited {
color: #00bf07 !important;
font-weight: bold;
text-shadow: 1px 0px 4px rgb(37, 255, 0);
}
body.modern-ui .colorVip, a.colorVip, a.colorVip:visited {
color: #ff7800 !important;
font-weight: bold;
text-shadow: 0px 0px 7px #ff7800;
background: url(../images/Nick/VIPEffect.gif),
url(../images/Nick/vipicon.gif) no-repeat ;
padding-left: 18px;
padding-top: 1px;
}
body.modern-ui .colorGirl, a.colorGirl, a.colorGirl:visited {
color: #ff00d8 !important;
font-weight: bold;
text-shadow: 0px 0px 7px #ff00d8;
background: url(../images/Nick/GirlEffect.gif),
url(../images/Nick/girlicon.png) no-repeat ;
padding-left: 18px;
padding-top: 1px;
}
body.modern-ui .colorReporters, a.colorReporters, a.colorReporters:visited {
color: #787878 !important;
font-weight: bold;
text-shadow: 0px 0px 7px;
/* font-family: Segoe UI; */
background: url(../images/Nick/boom.gif),
url(../images/Nick/reportersico.png) no-repeat ;
padding-left: 18px;
padding-top: 1px;
}
body.modern-ui .colorGroup, a.colorGroup, a.colorGroup:visited {
color: #6700B3;
font-weight: bold;
text-shadow: 0px 0px 7px !important;
}
body.modern-ui .colorLeg, a.colorLeg, a.colorLeg:visited {
color: rgb(0, 135, 255);
font-weight: bold;
text-shadow: 1px 0px 4px rgba(68, 108, 179, 0.7) !important;
}
body.modern-ui .colorProver, a.colorProver, a.colorProver:visited {
color: #00a599;
font-weight: bold;
text-shadow: 1px 0px 4px !important;
}
/* ------------------------------------------------------------------ *
Theme tokens
* ------------------------------------------------------------------ */
body.modern-ui {
--m-accent: #f97316; /* orange-500 */
--m-accent-600: #ea580c; /* orange-600 */
--m-accent-700: #c2410c; /* orange-700 */
--m-accent-soft: #fff7ed; /* orange-50 */
--m-accent-ring: rgba(249, 115, 22, .35);
--m-bg: #eef1f5;
--m-surface: #ffffff;
--m-surface-2: #f6f8fb;
--m-border: #e3e8ef;
--m-text: #1f2937;
--m-text-muted: #64748b;
--m-link: #ea6a18;
--m-radius: 16px;
--m-radius-sm: 12px;
--m-radius-xs: 9px;
--m-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .07);
--m-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
min-width: 0;
background: var(--m-bg);
color: var(--m-text);
}
/* Dark theme — triggered by legacy `body.dark-mode` (synced from cookie) */
body.modern-ui.dark-mode {
--m-accent-soft: #2a1707;
--m-accent-ring: rgba(249, 115, 22, .45);
--m-accent: #632900; /* orange-500 */
--m-accent-600: #591e00; /* orange-600 */
--m-accent-700: #c2410c; /* orange-700 */
--m-bg: #0f1216;
--m-surface: #161a20;
--m-surface-2: #1d222b;
--m-border: #2a303b;
--m-text: #e6e9ee;
--m-text-muted: #98a2b3;
--m-link: #ff9a4d;
--m-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .55);
--m-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
}
/* ------------------------------------------------------------------ *
Reset a few legacy globals just for the modern skin
* ------------------------------------------------------------------ */
body.modern-ui,
body.modern-ui th,
body.modern-ui td,
body.modern-ui font {
font-family: "Inter", "Segoe UI", Verdana, Arial, sans-serif;
}
body.modern-ui #body_container {
background: var(--m-bg);
}
body.modern-ui #page_container {
/* Fills FullHD (~1920) almost edge-to-edge, but caps on 2K/4K so the
content is centered instead of stretched too wide. */
max-width: 1920px;
width: 100%;
margin: 0 auto;
padding: 0 24px 28px;
}
/* ------------------------------------------------------------------ *
Top utility bar (#main-nav replacement)
* ------------------------------------------------------------------ */
body.modern-ui .m-topbar {
position: sticky;
top: 0;
z-index: 900;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
padding: 9px 16px;
margin: 0 -14px 0;
background: color-mix(in srgb, var(--m-surface) 86%, transparent);
-webkit-backdrop-filter: saturate(160%) blur(10px);
backdrop-filter: saturate(160%) blur(10px);
border-bottom: 1px solid var(--m-border);
}
body.modern-ui .m-topbar .m-nav {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
body.modern-ui .m-nav-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: var(--m-text);
white-space: nowrap;
transition: background-color .15s ease, color .15s ease;
}
body.modern-ui .m-nav-link:hover {
background: var(--m-accent-soft);
color: var(--m-accent-700) !important;
}
body.modern-ui.dark-mode .m-nav-link:hover {
color: var(--m-link) !important;
}
body.modern-ui .m-nav-link.is-accent {
color: var(--m-accent-700) !important;
}
/* dropdown */
body.modern-ui .m-nav-item {
position: relative;
}
body.modern-ui .m-nav-item > .m-nav-link.has-caret::after {
content: "";
width: 6px;
height: 6px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
opacity: .55;
}
body.modern-ui .m-nav-sub {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 190px;
padding: 6px;
background: var(--m-surface);
border: 1px solid var(--m-border);
border-radius: var(--m-radius-sm);
box-shadow: var(--m-shadow);
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity .15s ease, transform .15s ease, visibility .15s;
z-index: 950;
}
body.modern-ui .m-nav-item:hover > .m-nav-sub,
body.modern-ui .m-nav-item:focus-within > .m-nav-sub {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
body.modern-ui .m-nav-sub a {
display: block;
padding: 8px 12px;
border-radius: var(--m-radius-xs);
font-size: 13px;
font-weight: 500;
color: var(--m-text) !important;
}
body.modern-ui .m-nav-sub a:hover {
background: var(--m-accent-soft);
color: var(--m-accent-700) !important;
}
body.modern-ui.dark-mode .m-nav-sub a:hover {
color: var(--m-link) !important;
}
body.modern-ui .m-topbar .m-spacer {
margin-left: auto;
}
/* theme toggle + round buttons in topbar/header */
body.modern-ui .m-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 999px;
border: 1px solid var(--m-border);
background: var(--m-surface);
color: var(--m-text) !important;
font-size: 16px;
line-height: 1;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
body.modern-ui .m-icon-btn:hover {
background: var(--m-accent-soft);
border-color: var(--m-accent);
transform: translateY(-1px);
}
/* mobile hamburger */
body.modern-ui .m-burger {
display: none;
}
/* ------------------------------------------------------------------ *
Header card: logo + search + account
* ------------------------------------------------------------------ */
body.modern-ui .m-header {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
margin: 16px 0 12px;
padding: 16px 18px;
background: var(--m-surface);
border: 1px solid var(--m-border);
border-radius: var(--m-radius);
box-shadow: var(--m-shadow);
}
body.modern-ui .m-logo {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
body.modern-ui .m-logo img {
max-width: 360px;
width: 100%;
height: auto;
}
/* ---- theme-aware logo: light & dark ![]()
toggled per theme ----
The two logo files are set in page_header.twig on
![]()
and ![]()
. */
body.modern-ui .m-logo-dark { display: none; }
body.modern-ui.dark-mode .m-logo-light { display: none; }
body.modern-ui.dark-mode .m-logo-dark { display: block; }
body.modern-ui .m-header-mid {
flex: 0 1 540px;
max-width: 540px;
min-width: 220px;
margin-left: auto; /* push the search box to the right */
}
body.modern-ui .m-search {
display: flex;
align-items: stretch;
gap: 0;
width: 100%;
background: var(--m-surface-2);
border: 1px solid var(--m-border);
border-radius: 999px;
padding: 4px;
transition: border-color .15s ease, box-shadow .15s ease;
}
body.modern-ui .m-search:focus-within {
border-color: var(--m-accent);
box-shadow: 0 0 0 4px var(--m-accent-ring);
}
body.modern-ui .m-search input[type="text"] {
flex: 1 1 auto;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
padding: 8px 14px;
font-size: 13px;
color: var(--m-text);
}
body.modern-ui .m-search select {
border: 0;
outline: 0;
background: transparent;
color: var(--m-text-muted);
font-size: 12px;
max-width: 120px;
}
body.modern-ui .m-search .m-search-go {
flex: 0 0 auto;
border: 0;
border-radius: 999px;
padding: 0 18px;
font-size: 13px;
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, var(--m-accent) 0%, var(--m-accent-600) 100%);
cursor: pointer;
transition: filter .15s ease;
}
body.modern-ui .m-search .m-search-go:hover {
filter: brightness(1.06);
}
body.modern-ui .m-header-end {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 14px;
margin-left: auto;
}
/* logged-in account → its own full-width row below logo/search */
body.modern-ui .m-account-row {
flex: 1 1 100%;
margin-left: 0;
margin-top: 8px;
padding-top: 10px;
border-top: 0;
}
body.modern-ui .m-account {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 6px 16px;
width: 100%;
font-size: 12px;
color: var(--m-text-muted);
line-height: 1.5;
}
body.modern-ui .m-welcome {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 13px;
flex-wrap: wrap;
color: var(--m-text-muted);
}
/* username → chip (keeps its rank icon/colour inside) */
body.modern-ui .m-welcome b {
display: inline-flex;
align-items: center;
padding: 4px 13px;
border-radius: 999px;
background: var(--m-surface-2);
border: 1px solid var(--m-border);
color: var(--m-text);
font-weight: 700;
}
body.modern-ui .m-account-links {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
body.modern-ui .m-account b { color: var(--m-text); }
/* account action buttons → pills */
body.modern-ui .m-acc-btn {
display: inline-flex;
align-items: center;
padding: 5px 14px;
border-radius: 999px;
border: 1px solid var(--m-border);
background: var(--m-surface-2);
color: var(--m-text) !important;
font-size: 12px;
font-weight: 600;
text-decoration: none !important;
transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
body.modern-ui .m-acc-btn:hover {
border-color: var(--m-accent);
background: var(--m-accent-soft);
color: var(--m-accent-700) !important;
transform: translateY(-1px);
}
body.modern-ui.dark-mode .m-acc-btn:hover { color: var(--m-link) !important; }
/* the dropdown caret next to Profile */
body.modern-ui .m-acc-caret { padding: 5px 10px; font-size: 9px; }
/* logout → red accent */
body.modern-ui .m-acc-logout:hover {
border-color: #ef4444;
background: rgba(239, 68, 68, .12);
color: #ef4444 !important;
}
/* ================================================================== *
Live search dropdown → frosted glass (transparency + blur)
* ================================================================== */
body.modern-ui .ls-dropdown {
background: rgba(255, 255, 255, .72) !important;
-webkit-backdrop-filter: blur(16px) saturate(160%);
backdrop-filter: blur(16px) saturate(160%);
border: 1px solid var(--m-border) !important;
border-radius: var(--m-radius) !important;
box-shadow: var(--m-shadow) !important;
padding: 6px !important;
}
body.modern-ui.dark-mode .ls-dropdown {
background: rgba(16, 20, 26, .80) !important;
border-color: rgba(255, 255, 255, .12) !important;
}
body.modern-ui .ls-item {
border-bottom: 0 !important;
border-radius: var(--m-radius-sm);
margin: 2px 0;
padding: 7px 10px;
color: var(--m-text) !important;
}
body.modern-ui .ls-item:hover,
body.modern-ui .ls-item.ls-active {
background: var(--m-accent-soft) !important;
}
body.modern-ui.dark-mode .ls-item:hover,
body.modern-ui.dark-mode .ls-item.ls-active {
background: rgba(255, 255, 255, .09) !important;
}
body.modern-ui .ls-poster,
body.modern-ui .ls-poster-empty {
border-radius: 8px;
border-color: var(--m-border) !important;
}
body.modern-ui .ls-title { color: var(--m-text) !important; font-weight: 700; }
body.modern-ui .ls-hl { color: var(--m-accent-700) !important; }
body.modern-ui.dark-mode .ls-hl { color: var(--m-link) !important; }
body.modern-ui .ls-meta,
body.modern-ui .ls-size,
body.modern-ui .ls-forum,
body.modern-ui .ls-status { color: var(--m-text-muted) !important; }
/* ================================================================== *
Modern colour palette (posting editor) — works on every OS
* ================================================================== */
body.modern-ui .m-color-native { display: none !important; }
body.modern-ui .m-color-wrap {
position: relative;
display: inline-block;
vertical-align: middle;
}
body.modern-ui .m-color-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
border-radius: 999px;
border: 1px solid var(--m-border);
background: var(--m-surface);
color: var(--m-text);
cursor: pointer;
user-select: none;
vertical-align: middle;
transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
body.modern-ui .m-color-trigger:hover {
border-color: var(--m-accent);
background: var(--m-accent-soft);
transform: translateY(-1px);
}
body.modern-ui .m-color-dot {
width: 14px;
height: 14px;
border-radius: 4px;
background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
border: 1px solid rgba(0, 0, 0, .2);
}
body.modern-ui .m-color-pop {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 3000;
width: 282px;
padding: 10px;
grid-template-columns: repeat(12, 1fr);
gap: 4px;
background: var(--m-surface);
border: 1px solid var(--m-border);
border-radius: var(--m-radius-sm);
box-shadow: var(--m-shadow);
}
body.modern-ui .m-color-pop.open { display: grid; }
body.modern-ui .m-color-sw {
width: 100%;
aspect-ratio: 1 / 1;
min-height: 16px;
border-radius: 4px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, .18);
transition: transform .1s ease, box-shadow .1s ease;
}
body.modern-ui .m-color-sw:hover {
transform: scale(1.25);
box-shadow: 0 0 0 2px var(--m-accent);
position: relative;
z-index: 1;
}
/* ---- full-colour photo backdrop for the header card ----
Light theme → beach / sea (day), dark theme → night.
Swap the URLs for your own (e.g. ../images/header-day.jpg). */
body.modern-ui .m-header {
background-image: url(../images/fons/fonleto.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
body.modern-ui.dark-mode .m-header {
background-image: url(../images/fons/fonletodark.png);
}
/* welcome text sits directly on the photo → white with a soft shadow */
body.modern-ui .m-welcome {
color: #fff;
text-shadow: 0 1px 4px rgba(0, 0, 0, .75);
}
/* --- frosted glass (transparency + blur) for the header controls --- */
body.modern-ui .m-header .m-search,
body.modern-ui .m-header .m-acc-btn,
body.modern-ui .m-header .m-welcome b {
background: rgba(255, 255, 255, .42) !important;
border-color: rgba(255, 255, 255, .55) !important;
-webkit-backdrop-filter: blur(10px) saturate(150%);
backdrop-filter: blur(10px) saturate(150%);
box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}
body.modern-ui.dark-mode .m-header .m-search,
body.modern-ui.dark-mode .m-header .m-acc-btn,
body.modern-ui.dark-mode .m-header .m-welcome b {
background: rgba(12, 16, 22, .40) !important;
border-color: rgba(255, 255, 255, .16) !important;
}
/* the search INPUT stays transparent so the glass shows through */
body.modern-ui .m-header .m-search input[type="text"],
body.modern-ui .m-header .m-search #search-text {
background: transparent !important;
border: 0 !important;
}
/* the search SELECT is a solid pill control (native dropdowns can't be
styled reliably, so keep it solid → the option list stays clean) */
body.modern-ui .m-header .m-search select {
background: var(--m-surface) !important;
color: var(--m-text) !important;
border: 1px solid var(--m-border) !important;
border-radius: 999px;
padding: 4px 10px;
}
body.modern-ui.dark-mode .m-header .m-search select {
background: #161a20 !important;
color: #eef2f7 !important;
}
/* dark theme: native