RKeaves
/
Cyber-PSS
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update cyber-pss.css

This commit is contained in:
RKeaves 2025-04-26 12:37:22 -05:00
parent a37b887178
commit 852cbb7cf9
1 changed files with 117 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
cyber-pss.css
View File

@ -55,6 +55,120 @@
--select-fg: #b5becc;
}
/*==============================================================================
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) */
--nav-trans: 0.4s ease-in-out;
}
/*==============================================================================
1) Medium (≤1196px):
• hide search
• center logo
• pin toggle & icon-bar
==============================================================================*/
@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);
}
}
/*==============================================================================
2) Small-tablet (≤1030px):
• hide stats (ratio-bar)
• hide icon-bar & profile avatar
==============================================================================*/
@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);
}
}
/*==============================================================================
3) Icon-bar only (≤1000px):
• hide icon-bar
==============================================================================*/
@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);
}
}
/*==============================================================================
4) Extra-small (≤800px):
• hide menu & search
• center logo
• show pinned toggle
==============================================================================*/
@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 on viewports narrower than 1000px */
@media (max-width: 1230px) {
.quick-search {
display: none !important;
}
}
/* ===============================================================
QUICK SEARCH
================================================================= */
@ -74,6 +188,9 @@
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 */