diff --git a/cyber-pss.css b/cyber-pss.css index 92257cf..2e9ea00 100644 --- a/cyber-pss.css +++ b/cyber-pss.css @@ -3,15 +3,13 @@ !/* Description: A sleek, cyberpunk-inspired CSS theme. !/* !/* Version: 1.0.0 !/* !/* Author: RKeaves !/* - !/* Author URL: https://github.com/rkeaves !/* - !/* > Contributions & Feedback < !/* + !/* Author URL: https://rkeaves.online !/* !/* Feel free to suggest improvements or report any issues. !/* - !/* https://rkeaves.online !/* /*===================================================================================*/ -/* =============================================================== +/* =========================== GLOBAL DESIGN VARIABLES -================================================================= */ +=========================== */ :root { --primary-accent: #0b3d91; --secondary-accent: #ac3535; @@ -53,27 +51,20 @@ --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 -==============================================================================*/ - -/* Breakpoints & transition */ +==================== */ :root { - --bp-md: 1196px; /* hide search, center logo */ - --bp-sm: 1030px; /* hide stats, icons, avatar */ - --bp-icon: 1000px; /* hide icon-bar only */ - --bp-xs: 800px; /* full collapse (menu + search) */ + --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; } - -/*============================================================================== - 1) Medium (≤1196px): - • hide search - • center logo - • pin toggle & icon-bar -==============================================================================*/ +/* --bp-md */ @media (max-width: var(--bp-md)) { .quick-search { display: none !important; @@ -96,13 +87,7 @@ transition: all var(--nav-trans); } } - - -/*============================================================================== - 2) Small-tablet (≤1030px): - • hide stats (ratio-bar) - • hide icon-bar & profile avatar -==============================================================================*/ +/* --bp-sm */ @media (max-width: var(--bp-sm)) { .top-nav__ratio-bar, .top-nav__icon-bar, @@ -113,12 +98,7 @@ transition: opacity var(--nav-trans), visibility var(--nav-trans); } } - - -/*============================================================================== - 3) Icon-bar only (≤1000px): - • hide icon-bar -==============================================================================*/ +/* --bp-icon */ @media (max-width: var(--bp-icon)) { .top-nav__icon-bar { display: none !important; @@ -127,14 +107,7 @@ transition: opacity var(--nav-trans), visibility var(--nav-trans); } } - - -/*============================================================================== - 4) Extra-small (≤800px): - • hide menu & search - • center logo - • show pinned toggle -==============================================================================*/ +/* --bp-xs */ @media (max-width: var(--bp-xs)) { .top-nav__main-menus, .quick-search { @@ -161,18 +134,45 @@ transition: all var(--nav-trans); } } - -/* Hide the search bar on viewports narrower than 1000px */ +/* 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; @@ -181,30 +181,24 @@ 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 */ + 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); } - - - -/* 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 */ + 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; } -/* 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 */ + border-color: #33c1ff; + box-shadow: 0 0 10px rgba(51, 193, 255, 0.6); } -/* Optional: add a similar animated effect to .top-nav__ratio-bar */ .quick-search__input::before { content: ""; position: absolute; @@ -226,37 +220,30 @@ 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-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); /* Adjust the shadow to match the lighter background */ + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); } - /* =============================================================== ARTICLES PAGE ================================================================= */ - .article-preview { all: unset !important; - /* Now only the below rules will apply: */ padding: 18px !important; border-radius: 5px !important; background: @@ -264,28 +251,23 @@ #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 */ + top: -0.9rem; + left: 0.75rem; + background-color: #1a1a1a; padding: 0 0.25rem; - font-size: 0.995rem; /* smaller than input text */ + font-size: 0.995rem; color: #999; } - - /* =============================================================== +/* =============================================================== SIDE BAR PROFILE ================================================================= */ - .key-value__group:nth-child(2n+1) { background-color: #2b2f35a3 !important; } - /* =============================================================== GLOBAL TRANSITION & RESET ================================================================= */ @@ -293,15 +275,13 @@ 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 */ + gap: 1rem !important; padding: 0 !important; margin: 0 !important; } @@ -311,14 +291,14 @@ menu.torrent__buttons > li.form__group { } 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 */ + 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; /* icon/text spacing */ + gap: 0.5ch !important; box-sizing: border-box !important; } @@ -330,68 +310,58 @@ a.form__button--filled.form__button--centered[href*="/torrents/download/"] { 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 */ + position: relative; + display: inline-block; + padding-left: 55px; + margin-top: -10px; } -/* 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 */ + content: ''; 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 */ + 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; } -/* Hide any img tags inside .footer__section-title */ .footer__section-title img { - display: none; /* Hide any img tag inside */ + display: none; } -/* 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 */ + font-size: 1.55rem; } -/* Adjust the list under the title to keep consistent */ .footer__section-list { - padding-left: 50px; /* Adjust to make it consistent */ + padding-left: 50px; list-style-type: none; margin: 0; } - /* =============================================================== BODY & MAIN CONTENT CONTAINER ================================================================= */ @@ -408,48 +378,39 @@ body { margin: 0 auto; padding: 0 var(--content-padding); } - /* =============================================================== - NAVIGATION & HEADER COMPONENTS (Full-Width Top Bar) + NAVIGATION & HEADER COMPONENTS ================================================================= */ .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 */ + 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; } -/* 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; + transform: scale(1.0611); } .top-nav__branding img { -display: none; /* Hide any img tag inside */ +display: none; } .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; + position: relative; + transition: filter 0.2s ease-in-out; } .top-nav:hover { @@ -500,22 +461,14 @@ transition: text-shadow 0.3s ease, filter 0.3s ease; .top-nav__dropdown ul, .nav-tab-menu__items { - background: #161e30; +background: #161e30; +border-radius: 8px; +transition: box-shadow 0.2s ease; } -/* 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 */ +box-shadow: 0 8px 21px rgba(0, 0, 0, 0.76); } /* =============================================================== @@ -526,16 +479,18 @@ box-shadow: 0 8px 21px rgba(0, 0, 0, 0.76); /* Slightly increased spread */ 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 */ +border: 1px solid #82B1FF; +padding-left: 15px !important; +padding-right: 15px !important; +gap: 0px 16px !important; transition: - transform 0.5s ease, /* smooth 0.5s scale on hover */ - box-shadow 0.3s ease; /* existing glow transition */ + transform 0.5s ease, + box-shadow 0.3s ease; } .top-nav__ratio-bar::before { @@ -564,28 +519,22 @@ z-index: 1; } .top-nav__ratio-bar:hover { -transform: scale(1.1); /* scale up 10% on 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 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; @@ -607,20 +556,9 @@ transform: scale(1.005); .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; @@ -644,7 +582,6 @@ transform: scale(1.005); 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; @@ -654,7 +591,6 @@ transform: scale(1.005); 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; @@ -669,7 +605,6 @@ transform: scale(1.005); 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; @@ -680,24 +615,20 @@ transform: scale(1.005); /* =============================================================== 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% */ +transform: scale(1.1); } - -/* Profile avatar styling */ .profile__avatar { display: inline-block; border-radius: 50%; @@ -706,7 +637,6 @@ transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease, border- animation: subtle-float 5s ease-in-out infinite; } -/* Subtle floating animation */ @keyframes subtle-float { 0%, 100% { transform: translateY(0); @@ -718,11 +648,10 @@ animation: subtle-float 5s ease-in-out infinite; } } -/* 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 */ +border-color: #003366; } /* =============================================================== @@ -747,7 +676,7 @@ transition: transform 0.3s ease-in-out; } .user-search__avatar:hover { -transform: scale(1.1); /* Increase size by 10% */ +transform: scale(1.1); } /* =============================================================== @@ -799,10 +728,7 @@ transform: scale(1.1); /* Increase size by 10% */ PANELS, CARDS, FORMS, BUTTONS ================================================================= */ -/* undo the global article-preview rules inside the news panel */ .panelV2.blocks__news .article-preview { - /* all: revert restores each property to whatever it would have been - without your earlier “all: unset” rule */ all: revert !important; } @@ -825,8 +751,6 @@ transform: scale(1.1); /* Increase size by 10% */ background: var(--surface-02); display: flex; align-items: center; - /*! justify-content: space-between; */ - /*! border-bottom: 1px solid var(--primary-accent); */ } .panel__body { padding: 1rem; @@ -866,7 +790,7 @@ transform: scale(1.1); /* Increase size by 10% */ .torrent-card__plot { padding: 0.5rem 1rem; color: var(--text-primary); - font-size: 0.9rem; + font-size: 9.5px; animation: subtlePulse 6s ease-in-out infinite; } @@ -880,29 +804,20 @@ button { 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 */ +text-shadow: none; } /* Exclude these specific buttons from the white shadow effect */ @@ -1211,6 +1126,7 @@ position: relative; padding: 7px; } + /* =============================================================== ANIMATIONS ================================================================= */