commit a37b887178fdca0effbb94cb1b5fe94baefbfb21 Author: RKeaves Date: Sat Apr 26 12:03:14 2025 -0500 add cyber-pss.css diff --git a/cyber-pss.css b/cyber-pss.css new file mode 100644 index 0000000..697f9ad --- /dev/null +++ b/cyber-pss.css @@ -0,0 +1,1129 @@ +/*===================================================================================!/* + !/* Theme: Cyber-PSS !/* + !/* Description: A sleek, cyberpunk-inspired CSS theme. !/* + !/* Version: 1.0.0 !/* + !/* Author: RKeaves !/* + !/* Author URL: https://github.com/rkeaves !/* + !/* > Contributions & Feedback < !/* + !/* Feel free to suggest improvements or report any issues. !/* + !/* https://rkeaves.online !/* +/*===================================================================================*/ + +/* =============================================================== + 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; +} + +/* =============================================================== + 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; /* Matching border radius */ + border: 1px solid #82B1FF85 !important; /* Ice blue border matching .top-nav__ratio-bar */ + transition: transform 0.5s ease, box-shadow 0.3s ease, border-color 0.3s ease; /* Adding transitions */ + position: relative; + top: var(--quick-search-input-offset); +} + +/* Add glowing effect and scale transformation on hover */ +.quick-search__input:hover { + transform: scale(1.0035); /* Slight scale on hover */ + box-shadow: 0 0 1px rgba(68,138,255,0.6), inset 0 0 4px rgba(130,177,255,0.6); /* Glowing effect */ + border-color: #33c1ff; /* Glowing border effect */ +} + +/* Add focus effect to highlight the input */ +.quick-search__input:focus { + border-color: #33c1ff; /* Highlight the border on focus */ + box-shadow: 0 0 10px rgba(51, 193, 255, 0.6); /* Glow on focus */ +} + +/* Optional: add a similar animated effect to .top-nav__ratio-bar */ +.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 for the liquid shift effect */ +@keyframes liquidShift { + 0%, 100% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } +} + +/* Slow, subtle drift of vertical matrix lines */ +@keyframes matrixLines { + 0% { background-position: 0 0; } + 100% { background-position: 100px 0; } +} + + /* =============================================================== + FORUM +================================================================= */ + +.subforum-listing { + background-color: rgba(0, 0, 0, 0.3); /* Lighten the background with higher transparency */ + 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); /* Adjust the shadow to match the lighter background */ +} + +/* =============================================================== + ARTICLES PAGE +================================================================= */ + +.article-preview { + all: unset !important; + /* Now only the below rules will apply: */ + 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; /* adjust this value to move label above the border */ + left: 0.75rem; /* adjust based on padding of your input */ + background-color: #1a1a1a; /* match background of your form */ + padding: 0 0.25rem; + font-size: 0.995rem; /* smaller than input text */ + 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; /* space between buttons */ + 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; /* grow/shrink equally */ + min-width: 8.5rem !important; /* match your other buttons */ + height: 2.6rem !important; /* consistent height */ + padding: 0.6rem 1.2rem !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + gap: 0.5ch !important; /* icon/text spacing */ + 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; +} + +/* Hover for all buttons */ +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 +================================================================= */ + +/* Apply styles to the footer section title */ +.footer__section-title { + position: relative; /* Establish a positioning context for the pseudo-element */ + display: inline-block; /* Ensure the element behaves like an inline element */ + padding-left: 55px; /* Adjust space for the background image */ + margin-top: -10px; /* Adjust space for the background image */ +} + +/* Add a background image only to the first footer section */ +.footer__wrapper > .footer__section:first-child .footer__section-title::before { + content: ''; /* Required for pseudo-elements */ + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); /* Vertically center the image */ + width: 55px; /* Set the width of the background image */ + height: 55px; /* Set the height of the background image */ + 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; +} + +/* Hide any img tags inside .footer__section-title */ +.footer__section-title img { + display: none; /* Hide any img tag inside */ +} + +/* Center the footer list items */ +.footer__section-list { + display: block; + text-align: left; + padding-left: 20px; +} + +/* Align the section titles */ +.footer__section-title { + padding-left: 50px; + padding-bottom: 2px; + margin-top: 0px; + font-size: 1.55rem; /* Set a consistent font size */ +} + +/* Adjust the list under the title to keep consistent */ +.footer__section-list { + padding-left: 50px; /* Adjust to make it consistent */ + 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 (Full-Width Top Bar) +================================================================= */ + +.top-nav__branding::before { +content: ''; +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: left center; +height: 65px; +width: 65px; +margin-right: -14px; /* space between logo and text */ +margin-bottom: -4px; +transition: transform 0.2s ease, box-shadow 0.2s ease; /* smooth transition for transform and shadow */ +} + +/* Add hover effect to .top-nav__branding */ +.top-nav__branding:hover::before { +transform: scale(1.0611); + +margin-top: -0.43px; +} + +.top-nav__branding::before { +/* existing styles */ +transition: transform 0.5s ease; +} + +.top-nav__branding img { +display: none; /* Hide any img tag inside */ +} + +.top-nav { + background: linear-gradient(145deg, #10182b 0%, #1a2233 100%); + border-bottom: 2px solid var(--primary-accent); +} + +.top-nav { +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; +} + +/* Apply a subtle black drop shadow to dropdown menus */ +.top-nav__dropdown ul, +.nav-tab-menu__items { +background: #161e30; /* Dark background */ +/*! box-shadow: 0 8px 20px rgba(0, 0, 0, 0.76); */ /* Adjusted shadow */ +border-radius: 8px; /* Optional: rounded corners for a modern look */ +transition: box-shadow 0.2s ease; /* Smooth transition for hover effect */ +} + +/* Enhance shadow on hover */ +.top-nav__dropdown ul:hover, +.nav-tab-menu__items:hover { +box-shadow: 0 8px 21px rgba(0, 0, 0, 0.76); /* Slightly increased spread */ +} + +/* =============================================================== + Stats Box (Ratio Bar) Shared styles + hover transform +================================================================= */ + +.top-nav__ratio-bar { +position: relative; +display: inline-flex; +align-items: center; +gap: 8px; +padding: 4px 0 !important; +font-size: 1rem; +background: var(--surface-01); +border-radius: 6px; +overflow: hidden; +border: 1px solid #82B1FF; /* ice blue */ +transition: + transform 0.5s ease, /* smooth 0.5s scale on hover */ + box-shadow 0.3s ease; /* existing glow transition */ +} + +.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.1); /* scale up 10% on hover */ +box-shadow: + 0 0 6px rgba(68,138,255,0.6), + inset 0 0 4px rgba(130,177,255,0.6); +} + +/* keyframes for the gradient motion */ +@keyframes liquidShift { +0%,100% { background-position: 0% 50%; } +50% { background-position: 100% 50%; } +} + +/* slow, subtle drift of vertical matrix lines */ +@keyframes matrixLines { +0% { background-position: 0 0; } +100% { background-position: 100px 0; } +} + +.top-nav__ratio-bar:hover { +transform: scale(1.005); +} + +@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; } +} + +.top-nav__ratio-bar { +padding-left: 15px !important; +padding-right: 15px !important; +} + +.top-nav__ratio-bar:hover { +transform: scale(1.005); +} + +/* =============================================================== + 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; +} + +/* hover/focus glow match */ +.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; +} + +/* custom caret, same as form__select */ +.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; +} + +/* dropdown panel background & glow */ +.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 +================================================================= */ +/* User information section */ +.profile__about .bbcode-rendered, +.profile__about .bbcode-rendered pre { + box-shadow: none !important; + background: transparent !important; +} + +/* Apply hover effect to all images within .panel__body except those with .profile__avatar */ +.panel__body img:not(.profile__avatar) { +transition: transform 0.35s ease-in-out; +} + +.panel__body img:not(.profile__avatar):hover { +transform: scale(1.1); /* Increase size by 10% */ +} + + +/* Profile avatar styling */ +.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; +} + +/* Subtle floating animation */ +@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); +} +} + +/* Hover effect */ +.profile__avatar:hover { +filter: brightness(1.1); +box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +border-color: #003366; /* Darker blue border */ +} + +/* =============================================================== + 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); /* Increase size by 10% */ +} + +/* =============================================================== + 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 +================================================================= */ + +/* 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; + /*! justify-content: space-between; */ + /*! border-bottom: 1px solid var(--primary-accent); */ +} +.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: 0.9rem; + 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; + /*! box-shadow: 0 2px 4px rgba(11, 61, 145, 0.4); */ +} + +/*──────────────────────────────────────────────────────────────*/ +/* Remove the red hover effect from only the tip button */ +/*──────────────────────────────────────────────────────────────*/ +button.post__tip-button:hover { + /* cancel the red background & glow */ + background: transparent !important; + box-shadow: none !important; + /* if you need to restore its normal fill, you can also add: */ + /* background-color: var(--surface-02) !important; */ +} + +/* Glow effect for the arrow icon */ +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; +} + +/* Apply the same effect only to buttons with the arrow icon */ +button:not(.form__standard-icon-button):hover i { +text-shadow: none; /* Remove text-shadow for non-arrow buttons */ +} + +/* 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 */ \ No newline at end of file