Update cyber-pss.css
This commit is contained in:
parent
a37b887178
commit
852cbb7cf9
117
cyber-pss.css
117
cyber-pss.css
|
|
@ -55,6 +55,120 @@
|
||||||
--select-fg: #b5becc;
|
--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
|
QUICK SEARCH
|
||||||
================================================================= */
|
================================================================= */
|
||||||
|
|
@ -74,6 +188,9 @@
|
||||||
top: var(--quick-search-input-offset);
|
top: var(--quick-search-input-offset);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Add glowing effect and scale transformation on hover */
|
/* Add glowing effect and scale transformation on hover */
|
||||||
.quick-search__input:hover {
|
.quick-search__input:hover {
|
||||||
transform: scale(1.0035); /* Slight scale on hover */
|
transform: scale(1.0035); /* Slight scale on hover */
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue