Update cyber-pss.css
This commit is contained in:
parent
fb81e8fd51
commit
022393cee7
308
cyber-pss.css
308
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
|
||||
================================================================= */
|
||||
|
|
|
|||
Loading…
Reference in New Issue