1169 lines
31 KiB
CSS
1169 lines
31 KiB
CSS
/*===================================================================================!/*
|
|
!/* Theme: Cyber-PSS !/*
|
|
!/* Description: A sleek, cyberpunk-inspired CSS theme. !/*
|
|
!/* Version: 1.0.0 !/*
|
|
!/* Author: RKeaves !/*
|
|
!/* Author URL: https://rkeaves.online !/*
|
|
!/* Feel free to suggest improvements or report any issues. !/*
|
|
/*===================================================================================*/
|
|
|
|
/* ===========================
|
|
GLOBAL DESIGN VARIABLES
|
|
=========================== */
|
|
:root {
|
|
--primary-accent: #0b3d91;
|
|
--secondary-accent: #ac3535;
|
|
--cyber-magenta: #ac3535;
|
|
--cyber-cyan: #33c1ff;
|
|
--dark-base: #070b14;
|
|
--surface-01: #0f1624;
|
|
--surface-02: #1a2233;
|
|
--text-primary: #cadcff;
|
|
--text-secondary: #9ca7c2;
|
|
--textarea-fg: #c9c2d1;
|
|
--quick-search-input-offset: 0px;
|
|
--content-max-width: 1200px;
|
|
--content-padding: 20px;
|
|
--data-table-th-bg: #0f1624;
|
|
--subforum-listing-odd-bg: #162439;
|
|
--subforum-listing-even-bg: #1c1c1c;
|
|
--panel-bg: #0f1624;
|
|
--panel-head-bg: transparent !important;
|
|
--user-stat-card-bg: #212a3e;
|
|
--quick-search-bg: #444757;
|
|
--top-nav-icon-bar-icon-hover-bg: #ac3535;
|
|
--top-nav-dropdown-menu-item-icon-bg: #ac3535;
|
|
--top-nav-icon-bar-icon-bg: transparent !important;
|
|
--top-nav-icon-bar-icon-hover-fg: #fff;
|
|
--top-nav-icon-bar-icon-fg: #b7b7b7;
|
|
--data-table-tr-even-bg: #1c1c1c;
|
|
--data-table-tr-hover-bg: #ac35350f;
|
|
--data-table-tr-odd-bg: #1a2233;
|
|
--post-bg: #23344d91;
|
|
--post-aside-bg: #161e30;
|
|
--post-toolbar-bg: #161e30;
|
|
--footer-hr-fg: #dad9e31f;
|
|
--post-head-bg: #161e30;
|
|
--post-toolbar-fg: #b5becc;
|
|
--post-like-fg: #b5becc;
|
|
--post-dislike-fg: #b5becc;
|
|
--post-toolbar-hover-bg: #ac3535;
|
|
--post-aside-fg: #b5becc;
|
|
--post-footer-fg: #b5becc;
|
|
--select-fg: #b5becc;
|
|
--meta-backdrop-filter: brightness(30%);
|
|
--meta-dropdown-backdrop-filter: brightness(2) blur(10px);
|
|
}
|
|
/* ====================
|
|
MOBILE ADJUSTMENTS
|
|
==================== */
|
|
:root {
|
|
--bp-md: 1196px; /* search, logo */
|
|
--bp-sm: 1030px; /* stats, icons, avatar */
|
|
--bp-icon: 1000px; /* icon-bar */
|
|
--bp-xs: 800px; /* full collapse */
|
|
--nav-trans: 0.4s ease-in-out;
|
|
}
|
|
/* --bp-md */
|
|
@media (max-width: var(--bp-md)) {
|
|
.quick-search {
|
|
display: none !important;
|
|
}
|
|
|
|
.top-nav__left {
|
|
display: flex !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
position: relative !important;
|
|
transition: all var(--nav-trans);
|
|
}
|
|
|
|
.top-nav__toggle,
|
|
.top-nav__icon-bar {
|
|
position: absolute !important;
|
|
right: 1rem !important;
|
|
top: 50% !important;
|
|
transform: translateY(-50%) !important;
|
|
transition: all var(--nav-trans);
|
|
}
|
|
}
|
|
/* --bp-sm */
|
|
@media (max-width: var(--bp-sm)) {
|
|
.top-nav__ratio-bar,
|
|
.top-nav__icon-bar,
|
|
.top-nav__profile-image {
|
|
display: none !important;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity var(--nav-trans), visibility var(--nav-trans);
|
|
}
|
|
}
|
|
/* --bp-icon */
|
|
@media (max-width: var(--bp-icon)) {
|
|
.top-nav__icon-bar {
|
|
display: none !important;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity var(--nav-trans), visibility var(--nav-trans);
|
|
}
|
|
}
|
|
/* --bp-xs */
|
|
@media (max-width: var(--bp-xs)) {
|
|
.top-nav__main-menus,
|
|
.quick-search {
|
|
display: none !important;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity var(--nav-trans), visibility var(--nav-trans);
|
|
}
|
|
|
|
.top-nav__left {
|
|
display: flex !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
position: relative !important;
|
|
transition: all var(--nav-trans);
|
|
}
|
|
|
|
.top-nav__toggle {
|
|
display: block !important;
|
|
position: absolute !important;
|
|
right: 1rem !important;
|
|
top: 50% !important;
|
|
transform: translateY(-50%) !important;
|
|
transition: all var(--nav-trans);
|
|
}
|
|
}
|
|
/* Hide the search bar */
|
|
@media (max-width: 1230px) {
|
|
.quick-search {
|
|
display: none !important;
|
|
}
|
|
}
|
|
/* ===============================================================
|
|
STAFF DASHBOARD
|
|
================================================================= */
|
|
.dashboard__menus > section.panelV2.panel--grid-item {
|
|
background-color: rgba(18, 22, 32, 0.9) !important;
|
|
background-image: url('https://ptpimg.me/wy2n6s.png') !important;
|
|
background-repeat: repeat !important;
|
|
background-blend-mode: overlay !important;
|
|
border-radius: 8px !important;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
|
|
transition: none !important;
|
|
}
|
|
|
|
.dashboard__menus > section.panelV2.panel--grid-item > .panel__body {
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.dashboard__menus > section.panelV2.panel--grid-item:hover {
|
|
filter: none !important;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
|
|
transition: none !important;
|
|
}
|
|
|
|
.dashboard__menus
|
|
> section.panelV2.panel--grid-item
|
|
> .panel__body a:hover {
|
|
background-color: rgba(255, 255, 255, 0.07) !important;
|
|
border-radius: 4px;
|
|
}
|
|
/* ===============================================================
|
|
QUICK SEARCH
|
|
================================================================= */
|
|
.quick-search__input {
|
|
width: 100% !important;
|
|
height: 35px !important;
|
|
line-height: 42px !important;
|
|
padding: 0 15px !important;
|
|
font-size: 15px !important;
|
|
color: #fff !important;
|
|
background: linear-gradient(145deg, #1c273a, #121a28) !important;
|
|
border-radius: 8px !important;
|
|
border: 1px solid #82B1FF85 !important;
|
|
transition: transform 0.5s ease, box-shadow 0.3s ease, border-color 0.3s ease;
|
|
position: relative;
|
|
top: var(--quick-search-input-offset);
|
|
}
|
|
|
|
.quick-search__input:hover {
|
|
transform: scale(1.0035);
|
|
box-shadow: 0 0 1px rgba(68,138,255,0.6), inset 0 0 4px rgba(130,177,255,0.6);
|
|
border-color: #33c1ff;
|
|
}
|
|
|
|
.quick-search__input:focus {
|
|
border-color: #33c1ff;
|
|
box-shadow: 0 0 10px rgba(51, 193, 255, 0.6);
|
|
}
|
|
|
|
.quick-search__input::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
filter: blur(12px);
|
|
mix-blend-mode: screen;
|
|
background-size: 400% 400%;
|
|
animation: liquidShift 4s ease-in-out infinite;
|
|
z-index: -2;
|
|
}
|
|
|
|
.quick-search__input::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: repeating-linear-gradient(to right, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 3px);
|
|
animation: matrixLines 5s linear infinite;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
@keyframes liquidShift {
|
|
0%, 100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
|
|
@keyframes matrixLines {
|
|
0% { background-position: 0 0; }
|
|
100% { background-position: 100px 0; }
|
|
}
|
|
/* ===============================================================
|
|
FORUM
|
|
================================================================= */
|
|
.subforum-listing {
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
background-image: url('https://ptpimg.me/wy2n6s.png'); /* https://i.ibb.co/Ps1zwDBD/black-linen.png*/
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
|
|
}
|
|
/* ===============================================================
|
|
ARTICLES PAGE
|
|
================================================================= */
|
|
.article-preview {
|
|
all: unset !important;
|
|
padding: 18px !important;
|
|
border-radius: 5px !important;
|
|
background:
|
|
url('https://ptpimg.me/wy2n6s.png') repeat 0 0,
|
|
#1c1c1c !important;
|
|
box-shadow: none !important;
|
|
}
|
|
/* ===============================================================
|
|
GENERAL SETTINGS PAGE
|
|
================================================================= */
|
|
.form__label--floating {
|
|
top: -0.9rem;
|
|
left: 0.75rem;
|
|
background-color: #1a1a1a;
|
|
padding: 0 0.25rem;
|
|
font-size: 0.995rem;
|
|
color: #999;
|
|
}
|
|
/* ===============================================================
|
|
SIDE BAR PROFILE
|
|
================================================================= */
|
|
.key-value__group:nth-child(2n+1) {
|
|
background-color: #2b2f35a3 !important;
|
|
}
|
|
/* ===============================================================
|
|
GLOBAL TRANSITION & RESET
|
|
================================================================= */
|
|
* {
|
|
transition: all 0.4s ease;
|
|
box-sizing: border-box;
|
|
}
|
|
/* ===============================================================
|
|
TORRENTS PAGE
|
|
================================================================= */
|
|
menu.torrent__buttons {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
gap: 1rem !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
menu.torrent__buttons > li.form__group {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
menu.torrent__buttons .form__button {
|
|
flex: 1 1 auto !important;
|
|
min-width: 8.5rem !important;
|
|
height: 2.6rem !important;
|
|
padding: 0.6rem 1.2rem !important;
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
gap: 0.5ch !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
a.form__button--filled.form__button--centered[href*="/torrents/download/"] {
|
|
background: transparent !important;
|
|
border: 1px solid #757575 !important;
|
|
border-radius: 12px !important;
|
|
color: var(--text-primary) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
menu.torrent__buttons .form__button:hover {
|
|
background: var(--secondary-accent) !important;
|
|
border-color: var(--secondary-accent) !important;
|
|
color: #fff !important;
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
|
|
}
|
|
/* ===============================================================
|
|
FOOTER
|
|
================================================================= */
|
|
.footer__section-title {
|
|
position: relative;
|
|
display: inline-block;
|
|
padding-left: 55px;
|
|
margin-top: -10px;
|
|
}
|
|
|
|
.footer__wrapper > .footer__section:first-child .footer__section-title::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
transform: translateY(-50%);
|
|
width: 55px;
|
|
height: 55px;
|
|
background-image: url('https://ptpimg.me/9wbam9.png'); /* https://i.ibb.co/6R4KKM1H/pss-logo3.png */
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.footer__section-title img {
|
|
display: none;
|
|
}
|
|
|
|
.footer__section-list {
|
|
display: block;
|
|
text-align: left;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.footer__section-title {
|
|
padding-left: 50px;
|
|
padding-bottom: 2px;
|
|
margin-top: 0px;
|
|
font-size: 1.55rem;
|
|
}
|
|
|
|
.footer__section-list {
|
|
padding-left: 50px;
|
|
list-style-type: none;
|
|
margin: 0;
|
|
}
|
|
/* ===============================================================
|
|
BODY & MAIN CONTENT CONTAINER
|
|
================================================================= */
|
|
body {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 14px;
|
|
color: var(--text-primary);
|
|
background: var(--dark-base);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.content-container {
|
|
max-width: var(--content-max-width);
|
|
margin: 0 auto;
|
|
padding: 0 var(--content-padding);
|
|
}
|
|
/* ===============================================================
|
|
NAVIGATION & HEADER COMPONENTS
|
|
================================================================= */
|
|
|
|
.top-nav__branding::before {
|
|
content: "";
|
|
display: block;
|
|
height: 65.2px;
|
|
width: 60px;
|
|
background: url("https://ptpimg.me/9wbam9.png") no-repeat center/contain;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: left center;
|
|
will-change: transform;
|
|
transform-origin: center center;
|
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
margin-right: -14px;
|
|
margin-bottom: -4px;
|
|
}
|
|
|
|
.top-nav__branding:hover::before {
|
|
transform: scale(1.0611);
|
|
}
|
|
|
|
.top-nav__branding img {
|
|
display: none;
|
|
}
|
|
|
|
.top-nav {
|
|
background: linear-gradient(145deg, #10182b 0%, #1a2233 100%);
|
|
border-bottom: 2px solid var(--primary-accent);
|
|
position: relative;
|
|
transition: filter 0.2s ease-in-out;
|
|
}
|
|
|
|
.top-nav:hover {
|
|
filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.8));
|
|
}
|
|
|
|
.top-nav__left,
|
|
.top-nav__right,
|
|
.top-nav__main-menus,
|
|
.top-nav__icon-bar {
|
|
align-items: center;
|
|
}
|
|
.top-nav__branding {
|
|
font-family: 'Orbitron', monospace;
|
|
font-size: 18px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
@keyframes cleanStatic {
|
|
0% { text-shadow: 2px 2px 4px rgba(255, 51, 102, 0.7), -2px -2px 4px rgba(51, 193, 255, 0.7); }
|
|
25% { text-shadow: -2px 2px 4px rgba(255, 51, 102, 0.7), 2px -2px 4px rgba(51, 193, 255, 0.7); }
|
|
50% { text-shadow: 2px 2px 4px rgba(255, 51, 102, 0.7), -2px -2px 4px rgba(51, 193, 255, 0.7); }
|
|
100% { text-shadow: 2px 2px 4px rgba(255, 51, 102, 0.7), -2px -2px 4px rgba(51, 193, 255, 0.7); }
|
|
}
|
|
|
|
.top-nav__site-logo {
|
|
font-family: 'Orbitron', monospace;
|
|
background-image: radial-gradient(circle at 65% 35%, #fff 25%, #fff 60%, #fff 90%);
|
|
background-color: rgba(11, 61, 145, 0.2);
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
color: white;
|
|
animation: cleanStatic 2s infinite ease-in-out;
|
|
text-shadow: 2px 2px 4px rgba(255, 51, 102, 0.7), -2px -2px 4px rgba(51, 193, 255, 0.7);
|
|
transition: text-shadow 0.3s ease, filter 0.3s ease;
|
|
}
|
|
|
|
.top-nav__site-logo:hover {
|
|
filter: drop-shadow(0 0 5px var(--primary-accent));
|
|
text-shadow: 0 0 20px var(--cyber-magenta), 0 0 30px var(--cyber-magenta);
|
|
}
|
|
|
|
.secondary-nav {
|
|
background: linear-gradient(to right, #10182b 0%, #1a2233 50%, #10182b 100%);
|
|
border-color: var(--primary-accent);
|
|
box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.top-nav__dropdown ul,
|
|
.nav-tab-menu__items {
|
|
background: #161e30;
|
|
border-radius: 8px;
|
|
transition: box-shadow 0.2s ease;
|
|
}
|
|
|
|
.top-nav__dropdown ul:hover,
|
|
.nav-tab-menu__items:hover {
|
|
box-shadow: 0 8px 21px rgba(0, 0, 0, 0.76);
|
|
}
|
|
|
|
/* ===============================================================
|
|
Stats Box (Ratio Bar) Shared styles + hover transform
|
|
================================================================= */
|
|
|
|
.top-nav__ratio-bar {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4px 0 !important;
|
|
font-size: 1rem;
|
|
background: var(--surface-01);
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
border: 1px solid #82B1FF;
|
|
padding-left: 15px !important;
|
|
padding-right: 15px !important;
|
|
gap: 0px 16px !important;
|
|
transition:
|
|
transform 0.5s ease,
|
|
box-shadow 0.3s ease;
|
|
}
|
|
|
|
.top-nav__ratio-bar::before {
|
|
content: "";
|
|
position: absolute; inset: 0;
|
|
filter: blur(12px);
|
|
mix-blend-mode: screen;
|
|
background-size: 400% 400%;
|
|
animation: liquidShift 4s ease-in-out infinite;
|
|
z-index: -2;
|
|
}
|
|
|
|
.top-nav__ratio-bar::after {
|
|
content: "";
|
|
position: absolute; inset: 0;
|
|
background-image: repeating-linear-gradient(
|
|
to right,
|
|
rgba(255,255,255,0.02) 0,
|
|
rgba(255,255,255,0.02) 1px,
|
|
transparent 1px,
|
|
transparent 3px
|
|
);
|
|
animation: matrixLines 5s linear infinite;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.top-nav__ratio-bar:hover {
|
|
transform: scale(1.015);
|
|
box-shadow:
|
|
0 0 6px rgba(68,138,255,0.6),
|
|
inset 0 0 4px rgba(130,177,255,0.6);
|
|
}
|
|
|
|
@keyframes liquidShift {
|
|
0%,100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
|
|
@keyframes matrixLines {
|
|
0% { background-position: 0 0; }
|
|
100% { background-position: 100px 0; }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.top-nav__ratio-bar {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-gap: 0.5rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.top-nav__ratio-bar::before,
|
|
.top-nav__ratio-bar::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 15px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.top-nav__ratio-bar::before { left: 0; }
|
|
.top-nav__ratio-bar::after { right: 0; }
|
|
}
|
|
/* ===============================================================
|
|
TORENT SEARCH
|
|
================================================================= */
|
|
.form__group--short-horizontal .vscomp-toggle-button {
|
|
appearance: none !important;
|
|
-webkit-appearance: none !important;
|
|
-moz-appearance: none !important;
|
|
|
|
background-color: rgba(var(--surface-02-rgb), var(--vs-toggle-bg-opacity)) !important;
|
|
box-shadow:
|
|
inset 0 0 2px rgba(255,255,255, var(--vs-toggle-inset-opacity)),
|
|
0 0 8px rgba(11,61,145, var(--vs-toggle-glow-opacity)) !important;
|
|
|
|
border: 1px solid #686868 !important;
|
|
border-radius: 4px !important;
|
|
|
|
padding: 6px 30px 6px 10px !important;
|
|
font-family: 'Orbitron', monospace !important;
|
|
font-size: 0.9rem !important;
|
|
color: var(--text-primary) !important;
|
|
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: box-shadow 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
|
|
.form__group--short-horizontal .vscomp-toggle-button:hover,
|
|
.form__group--short-horizontal .vscomp-toggle-button:focus {
|
|
outline: none !important;
|
|
border-color: #959595 !important;
|
|
box-shadow:
|
|
inset 0 0 2px rgba(255,255,255, var(--vs-toggle-inset-focus-opacity)),
|
|
0 0 12px rgba(11,61,145, var(--vs-toggle-glow-focus-opacity)) !important;
|
|
}
|
|
|
|
.form__group--short-horizontal .vscomp-toggle-button::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 12px;
|
|
width: 6px;
|
|
height: 6px;
|
|
margin-top: -3px;
|
|
border-right: 2px solid var(--text-secondary);
|
|
border-top: 2px solid var(--text-secondary);
|
|
transform: rotate(45deg);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.form__group--short-horizontal .vscomp-dropbox-container {
|
|
background-color: rgba(var(--surface-02-rgb), var(--vs-toggle-bg-opacity)) !important;
|
|
border: 1px solid var(--surface-01) !important;
|
|
border-radius: 4px !important;
|
|
box-shadow: 0 0 8px rgba(11,61,145, var(--vs-toggle-glow-opacity)) !important;
|
|
}
|
|
|
|
/* ===============================================================
|
|
USER PROFILE
|
|
================================================================= */
|
|
.profile__about .bbcode-rendered,
|
|
.profile__about .bbcode-rendered pre {
|
|
box-shadow: none !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.panel__body img:not(.profile__avatar) {
|
|
transition: transform 0.35s ease-in-out;
|
|
}
|
|
|
|
.panel__body img:not(.profile__avatar):hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.profile__avatar {
|
|
display: inline-block;
|
|
border-radius: 50%;
|
|
border: 3px solid transparent;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease, border-color 0.3s ease;
|
|
animation: subtle-float 5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes subtle-float {
|
|
0%, 100% {
|
|
transform: translateY(0);
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
|
}
|
|
50% {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
|
|
}
|
|
}
|
|
|
|
.profile__avatar:hover {
|
|
filter: brightness(1.1);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
border-color: #003366;
|
|
}
|
|
|
|
/* ===============================================================
|
|
USER PROFILE HEADER
|
|
================================================================= */
|
|
.top-nav__username--highresolution,
|
|
.top-nav--right__icon-link,
|
|
.top-nav__toggle {
|
|
color: var(--text-secondary);
|
|
padding: 0 10px;
|
|
cursor: pointer;
|
|
transition: color 0.3s;
|
|
}
|
|
.top-nav__username--highresolution:hover,
|
|
.top-nav--right__icon-link:hover {
|
|
color: var(--cyber-magenta);
|
|
}
|
|
|
|
|
|
.user-search__avatar {
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
|
|
.user-search__avatar:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* ===============================================================
|
|
QUICK SEARCH
|
|
================================================================= */
|
|
.quick-search {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
.quick-search__inputs {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.quick-search__results,
|
|
.quick-search__result--default,
|
|
.quick-search__result--empty {
|
|
background-color: #2c2c2c !important;
|
|
color: var(--text-primary);
|
|
border-radius: 4px;
|
|
margin-top: 17px;
|
|
}
|
|
.quick-search__result-link {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 12px;
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
}
|
|
.quick-search__result-link:hover {
|
|
background-color: var(--surface-02);
|
|
color: var(--cyber-magenta);
|
|
}
|
|
.quick-search__image {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.quick-search__result-year,
|
|
.quick-search__result-type {
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* ===============================================================
|
|
PANELS, CARDS, FORMS, BUTTONS
|
|
================================================================= */
|
|
|
|
.panelV2.blocks__news .article-preview {
|
|
all: revert !important;
|
|
}
|
|
|
|
/* Panels */
|
|
.panelV2 {
|
|
background: #272727;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
|
overflow: hidden;
|
|
}
|
|
.panelV2:hover {
|
|
filter: drop-shadow(0 0 4px var(--cyber-cyan));
|
|
}
|
|
.panel__header,
|
|
.panel__heading {
|
|
padding: 1rem;
|
|
font-family: 'Orbitron', monospace;
|
|
font-size: 1.1rem;
|
|
color: var(--text-primary);
|
|
background: var(--surface-02);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.panel__body {
|
|
padding: 1rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Cards */
|
|
.torrent-card {
|
|
background: linear-gradient(135deg, var(--surface-02), #0e1a30);
|
|
border: 1px solid var(--primary-accent);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.2);
|
|
}
|
|
.torrent-card:hover {
|
|
filter: drop-shadow(0 0 4px var(--cyber-cyan));
|
|
}
|
|
.torrent-card__header,
|
|
.torrent-card__footer {
|
|
background: var(--surface-01);
|
|
padding: 0.5rem 1rem;
|
|
border-top: 1px solid var(--primary-accent);
|
|
color: var(--text-primary);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.torrent-card__title {
|
|
font-weight: bold;
|
|
font-size: 1rem;
|
|
color: var(--cyber-cyan);
|
|
}
|
|
.torrent-card__genre,
|
|
.torrent-card__rating {
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
.torrent-card__plot {
|
|
padding: 0.5rem 1rem;
|
|
color: var(--text-primary);
|
|
font-size: 9.5px;
|
|
animation: subtlePulse 6s ease-in-out infinite;
|
|
}
|
|
|
|
/* Forms & Buttons */
|
|
.form__button--filled,
|
|
button {
|
|
background: var(--primary-accent);
|
|
color: white;
|
|
padding: 0.5rem 1rem;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
}
|
|
|
|
button.post__tip-button:hover {
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
button.form__standard-icon-button:hover i {
|
|
text-shadow: 0 0 8px #ffffff, 0 0 15px #ffffff, 0 0 25px #ffffff; /* White glow */
|
|
transition: text-shadow 0.3s ease;
|
|
}
|
|
|
|
button:not(.form__standard-icon-button):hover i {
|
|
text-shadow: none;
|
|
}
|
|
|
|
/* Exclude these specific buttons from the white shadow effect */
|
|
button.form__button.form__standard-icon-button.form__standard-icon-button--skinny:hover i,
|
|
button[title="Toggle typing notifications"]:hover i,
|
|
button[title="Toggle typing notifications"] i.fa-bell:hover {
|
|
text-shadow: none; /* Remove text-shadow */
|
|
}
|
|
|
|
/* Exclude specific buttons from the hover effect */
|
|
button.form__button.form__standard-icon-button.form__standard-icon-button--skinny:hover,
|
|
button[title="Toggle typing notifications"]:hover,
|
|
button[title="Toggle typing notifications"] i.fa-bell:hover {
|
|
background: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
select {
|
|
/*! background: var(--surface-02); */
|
|
color: var(--text-primary);
|
|
/*! border: 1px solid var(--primary-accent); */
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 14px;
|
|
}
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
border-color: var(--cyber-cyan);
|
|
box-shadow: 0 0 6px var(--cyber-cyan);
|
|
}
|
|
|
|
/* ===============================================================
|
|
DATA TABLES
|
|
================================================================= */
|
|
.data-table th {
|
|
background: var(--surface-02);
|
|
color: var(--text-primary);
|
|
border-bottom: 2px solid var(--primary-accent);
|
|
}
|
|
|
|
/* ===============================================================
|
|
TYPOGRAPHY
|
|
================================================================= */
|
|
h1, h2, h3, h4 {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
h1:not(.panel__heading):hover,
|
|
h2:not(.panel__heading):hover,
|
|
h3:not(.panel__heading):hover,
|
|
h4:not(.panel__heading):hover {
|
|
filter: drop-shadow(0 0 3px var(--cyber-cyan));
|
|
}
|
|
|
|
.text-info {
|
|
color: var(--text-secondary);
|
|
}
|
|
.text-info:hover {
|
|
color: var(--cyber-magenta);
|
|
}
|
|
|
|
/* ===============================================================
|
|
TORRENT DESCRIPTION
|
|
================================================================= */
|
|
|
|
/* Apply the same texture to the panel__body and bbcode-rendered sections */
|
|
.panel__body,
|
|
.bbcode-rendered {
|
|
background: url('https://ptpimg.me/wy2n6s.png') repeat; /* https://i.ibb.co/Ps1zwDBD/black-linen.png*/
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8); /* Black drop shadow */
|
|
}
|
|
|
|
/* ===============================================================
|
|
CREATE NEW PLAYLIST PAGE
|
|
================================================================= */
|
|
|
|
.bbcode-input__tab-pane {
|
|
background-color: #1c1c1c !important;
|
|
}
|
|
|
|
/* ===============================================================
|
|
CHATBOX & MESSAGES
|
|
================================================================= */
|
|
|
|
.chatbox__chatroom {
|
|
background-color: #0c0c0f; /* Solid background color */
|
|
position: relative;
|
|
padding: 6px;
|
|
border-radius: 8px;
|
|
border: 0px solid var(--primary-accent);
|
|
max-height: 60vh;
|
|
line-height: 0.9 !important;
|
|
background: url('https://ptpimg.me/wy2n6s.png') repeat; /* https://i.ibb.co/Ps1zwDBD/black-linen.png*/
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8); /* Black drop shadow */
|
|
}
|
|
|
|
@media (max-height: 500px) {
|
|
.chatbox__chatroom {
|
|
max-height: 50vh;
|
|
}
|
|
}
|
|
.chatbox--fullscreen .chatbox__chatroom {
|
|
max-height: calc(100vh - 36px - 37px);
|
|
}
|
|
.panel__tabs {
|
|
background-color: #0b101c;
|
|
}
|
|
#chatbox__messages-create {
|
|
margin-bottom: 9px;
|
|
}
|
|
|
|
.chatbox-message,
|
|
.chatbox-message:before {
|
|
background-color: transparent;
|
|
border: none;
|
|
font-size: 14px !important;
|
|
white-space: normal !important;
|
|
max-width: 60vw !important;
|
|
}
|
|
@media (max-width: 992px) {
|
|
.chatbox-message,
|
|
.chatbox-message:before {
|
|
max-width: 70vw !important;
|
|
}
|
|
}
|
|
@media (max-width: 768px) {
|
|
.chatbox-message,
|
|
.chatbox-message:before {
|
|
max-width: 75vw !important;
|
|
}
|
|
}
|
|
@media (max-width: 576px) {
|
|
.chatbox-message,
|
|
.chatbox-message:before {
|
|
max-width: 85vw !important;
|
|
}
|
|
}
|
|
.chatbox-message:has(aside > figure > i) {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
.chatbox-message__address.user-tag:has(a[title=Bot]) {
|
|
padding: 0 !important;
|
|
}
|
|
.chatbox-message__aside {
|
|
bottom: auto;
|
|
top: 4px;
|
|
}
|
|
.chatbox-message__header > div,
|
|
.chatbox-message__content > div {
|
|
color: #d5cede !important;
|
|
font-family: Calibri, sans-serif !important;
|
|
font-style: normal !important;
|
|
}
|
|
.chatbox-message__header > div {
|
|
font-size: 13px !important;
|
|
}
|
|
.chatbox-message__content {
|
|
font-family: Calibri, sans-serif;
|
|
color: #ded7e8;
|
|
transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
|
|
}
|
|
.chatbox-message__content:hover {
|
|
color: #fff;
|
|
text-shadow: 0 0 4px rgba(255, 255, 255, 0.37), 0 0 6px rgba(255, 255, 255, 0.045);
|
|
}
|
|
.chatbox-message__time {
|
|
padding: 0;
|
|
font-size: 10px !important;
|
|
color: rgba(170, 170, 170, 0.5019607843) !important;
|
|
}
|
|
|
|
a[href="/users/System"] {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
i[title="System Notification"] {
|
|
display: none;
|
|
}
|
|
|
|
/* ===============================================================
|
|
Hide any horizontal scrollbar in the chatroom
|
|
================================================================= */
|
|
|
|
.chatbox__chatroom {
|
|
overflow-x: hidden !important; /* kill the horizontal track */
|
|
overflow-y: auto !important; /* keep vertical scroll */
|
|
}
|
|
|
|
/* ===============================================================
|
|
Force long words/URLs to wrap inside each message
|
|
================================================================= */
|
|
|
|
.chatbox-message,
|
|
.chatbox-message__content,
|
|
.chatbox-message__header > div,
|
|
.chatbox-message__content > div,
|
|
div[style*="white-space: nowrap"] {
|
|
white-space: pre-wrap !important; /* honor newlines, then wrap */
|
|
overflow-wrap: break-word !important; /* break long words/URLs */
|
|
word-break: break-word !important; /* ensure wrapping on every browser */
|
|
}
|
|
|
|
.chatbox-message {
|
|
margin-top: 1px !important;
|
|
margin-bottom: 1px !important;
|
|
}
|
|
|
|
.chatbox-message__header {
|
|
margin-top: 0.1px !important; /* small space before the header */
|
|
margin-bottom: 0.1px !important; /* space after it before the message text */
|
|
line-height: 15px !important; /* ~160% of the font size */
|
|
}
|
|
|
|
/* ===============================================================
|
|
COLLAPSIBLE PANELS
|
|
================================================================= */
|
|
details.panel {
|
|
border: 1px solid var(--primary-accent);
|
|
border-radius: 8px;
|
|
margin: 1rem 0;
|
|
overflow: hidden;
|
|
background: var(--surface-01);
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
.panel__heading {
|
|
list-style: none;
|
|
padding: 0.75rem 1rem;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 1.25rem;
|
|
color: var(--text-primary);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
.panel__heading i {
|
|
margin-right: 0.5rem;
|
|
}
|
|
.panel__heading::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
details.panel[open] .panel__heading::after {
|
|
content: "-";
|
|
}
|
|
.panel__content {
|
|
padding: 1rem;
|
|
background: var(--surface-02);
|
|
color: var(--text-primary);
|
|
transition: max-height 0.3s ease;
|
|
}
|
|
|
|
/* ===============================================================
|
|
AVATAR GLOW EFFECTS & TOOLTIP
|
|
================================================================= */
|
|
img.user-search__avatar,
|
|
img.user-stat-card__avatar,
|
|
img.chatbox-message__avatar {
|
|
position: relative;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
img.user-search__avatar:hover,
|
|
img.user-stat-card__avatar:hover,
|
|
img.chatbox-message__avatar:hover {
|
|
transform: scale(1.1); /* Enlarges the image by 10% */
|
|
}
|
|
|
|
img.user-search__avatar::after,
|
|
img.user-stat-card__avatar::after,
|
|
img.chatbox-message__avatar::after {
|
|
content: "ifn oksut";
|
|
position: absolute;
|
|
bottom: -1.5em;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: var(--cyber-cyan);
|
|
color: var(--dark-base);
|
|
padding: 2px 4px;
|
|
border-radius: 3px;
|
|
font-size: 0.8rem;
|
|
white-space: nowrap;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
img.user-search__avatar:hover::after,
|
|
img.user-stat-card__avatar:hover::after,
|
|
img.chatbox-message__avatar:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.user-stat-card {
|
|
background-color: var(--user-stat-card-bg);
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
|
overflow: hidden;
|
|
position: relative;
|
|
padding: 7px;
|
|
}
|
|
|
|
|
|
/* ===============================================================
|
|
ANIMATIONS
|
|
================================================================= */
|
|
@keyframes subtlePulse {
|
|
0% { opacity: 0.95; }
|
|
50% { opacity: 1; }
|
|
100% { opacity: 0.95; }
|
|
}
|
|
.torrent-card__plot {
|
|
animation: subtlePulse 6s ease-in-out infinite;
|
|
}
|
|
@keyframes cyberFlicker {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.6; }
|
|
}
|
|
.cyber-icon.glow {
|
|
animation: cyberFlicker 1.5s infinite;
|
|
}
|
|
|
|
/* ===============================================================
|
|
CYBER ICON STYLE
|
|
================================================================= */
|
|
.cyber-icon {
|
|
display: inline-block;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: var(--surface-02);
|
|
border: 2px solid var(--primary-accent);
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
font-size: 1.2rem;
|
|
color: var(--text-primary);
|
|
box-shadow: 0 0 8px var(--cyber-cyan);
|
|
}
|
|
.cyber-icon:hover {
|
|
filter: drop-shadow(0 0 3px var(--cyber-cyan));
|
|
}
|
|
|
|
/*# sourceMappingURL=chat.css.map */ |