mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-09 01:16:15 -08:00
4gray
a874db0b41
Add a new mat-menu component for filtering and sorting playlists in the header area. The filter section iterates playlistTypes and allows toggling type selection with visual check state. The sort section adds options for name (asc/desc) and date added (newest/oldest) with active-state visuals and click handlers that call setSortOptions. A close button is also included. Remove unused/duplicate CSS rules from header styles: drop .filter- container and obsolete .dropdown-menu-header rules to avoid styling conflicts and reduce dead code. Adjust surrounding selector formatting.
494 lines
11 KiB
SCSS
494 lines
11 KiB
SCSS
:host {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.modern-header {
|
|
background: #131316;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 70px;
|
|
padding: 0 16px;
|
|
app-region: drag;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
|
|
|
|
// Subtle depth layer
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.01) 0%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
// Refined home page styling - seamless with #131316
|
|
:host.home-header .modern-header {
|
|
background: #131316;
|
|
|
|
// Elegant ambient glow
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -100%;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 200%;
|
|
background: radial-gradient(
|
|
ellipse at 50% 0%,
|
|
rgba(99, 102, 241, 0.04) 0%,
|
|
rgba(139, 92, 246, 0.02) 30%,
|
|
transparent 60%
|
|
);
|
|
animation: headerAmbience 20s ease-in-out infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
// Refined bottom accent
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
rgba(139, 92, 246, 0.15) 50%,
|
|
transparent 100%
|
|
);
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@keyframes headerAmbience {
|
|
0%,
|
|
100% {
|
|
opacity: 0.3;
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
opacity: 0.6;
|
|
transform: translateY(-5%);
|
|
}
|
|
}
|
|
|
|
// Refined brand block with elegant glass effect
|
|
.brand-block {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 0 16px 0 8px;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border-radius: 32px;
|
|
border: 1px solid rgba(255, 255, 255, 0.04);
|
|
backdrop-filter: blur(12px);
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
app-region: no-drag;
|
|
position: relative;
|
|
z-index: 1;
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
|
|
|
&:hover {
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border-color: rgba(255, 255, 255, 0.08);
|
|
transform: translateY(-1px);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.15),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
|
}
|
|
}
|
|
|
|
// Enhanced brand block on home page - refined elegance
|
|
:host.home-header .brand-block {
|
|
background: rgba(139, 92, 246, 0.04);
|
|
border-color: rgba(139, 92, 246, 0.08);
|
|
box-shadow:
|
|
0 2px 12px rgba(139, 92, 246, 0.06),
|
|
inset 0 1px 0 rgba(139, 92, 246, 0.08);
|
|
|
|
&:hover {
|
|
background: rgba(139, 92, 246, 0.08);
|
|
border-color: rgba(139, 92, 246, 0.15);
|
|
box-shadow:
|
|
0 4px 16px rgba(139, 92, 246, 0.12),
|
|
inset 0 1px 0 rgba(139, 92, 246, 0.12);
|
|
}
|
|
}
|
|
|
|
.logo-pulse {
|
|
position: relative;
|
|
width: 48px;
|
|
height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
img {
|
|
width: 38px;
|
|
height: 38px;
|
|
object-fit: contain;
|
|
position: relative;
|
|
z-index: 2;
|
|
filter: drop-shadow(0 2px 6px rgba(255, 59, 48, 0.25));
|
|
transition: filter 0.3s ease;
|
|
}
|
|
|
|
// Subtle ambient glow
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(255, 59, 48, 0.15) 0%,
|
|
rgba(255, 59, 48, 0.05) 50%,
|
|
transparent 70%
|
|
);
|
|
border-radius: 50%;
|
|
animation: logoGlow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
.brand-block:hover & img {
|
|
filter: drop-shadow(0 2px 8px rgba(255, 59, 48, 0.4));
|
|
}
|
|
}
|
|
|
|
@keyframes logoGlow {
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 0.6;
|
|
}
|
|
50% {
|
|
transform: scale(1.15);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.brand-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
.title {
|
|
font-size: 1.05rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.015em;
|
|
color: rgba(255, 255, 255, 0.95);
|
|
transition: all 0.3s ease;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.brand-block:hover & .title {
|
|
color: rgba(255, 255, 255, 1);
|
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
}
|
|
}
|
|
|
|
// Enhanced brand text on home page
|
|
:host.home-header .brand-text .title {
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(255, 255, 255, 0.95) 0%,
|
|
rgba(139, 92, 246, 0.8) 100%
|
|
);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
|
|
.brand-block:hover & {
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(255, 255, 255, 1) 0%,
|
|
rgba(139, 92, 246, 1) 100%
|
|
);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
}
|
|
|
|
// Refined search field with elegant glass-morphism
|
|
.search-container {
|
|
flex: 1;
|
|
max-width: 800px;
|
|
margin: 0 24px;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
border-radius: 20px;
|
|
padding: 0 18px;
|
|
height: 46px;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
app-region: no-drag;
|
|
z-index: 1;
|
|
box-shadow:
|
|
0 1px 3px rgba(0, 0, 0, 0.08),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.02);
|
|
|
|
&:focus-within {
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border-color: rgba(139, 92, 246, 0.3);
|
|
box-shadow:
|
|
0 0 0 2px rgba(139, 92, 246, 0.08),
|
|
0 2px 8px rgba(139, 92, 246, 0.12),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
&:hover:not(:focus-within) {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
}
|
|
|
|
// Enhanced search field on home page - refined elegance
|
|
:host.home-header .search-container {
|
|
background: rgba(139, 92, 246, 0.03);
|
|
border-color: rgba(139, 92, 246, 0.08);
|
|
box-shadow:
|
|
0 1px 4px rgba(139, 92, 246, 0.04),
|
|
inset 0 1px 0 rgba(139, 92, 246, 0.04);
|
|
|
|
&:focus-within {
|
|
background: rgba(139, 92, 246, 0.06);
|
|
border-color: rgba(139, 92, 246, 0.3);
|
|
box-shadow:
|
|
0 0 0 2px rgba(139, 92, 246, 0.1),
|
|
0 4px 16px rgba(139, 92, 246, 0.15),
|
|
inset 0 1px 0 rgba(139, 92, 246, 0.08);
|
|
}
|
|
|
|
&:hover:not(:focus-within) {
|
|
background: rgba(139, 92, 246, 0.05);
|
|
border-color: rgba(139, 92, 246, 0.12);
|
|
}
|
|
}
|
|
|
|
:host.home-header .search-icon {
|
|
color: rgba(139, 92, 246, 0.5);
|
|
|
|
.search-container:focus-within & {
|
|
color: rgba(139, 92, 246, 0.85);
|
|
}
|
|
}
|
|
|
|
.search-icon {
|
|
color: rgba(255, 255, 255, 0.35);
|
|
margin-right: 12px;
|
|
font-size: 20px;
|
|
width: 20px;
|
|
height: 20px;
|
|
transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
.search-container:focus-within & {
|
|
color: rgba(139, 92, 246, 0.85);
|
|
}
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
color: rgba(255, 255, 255, 0.95);
|
|
font-size: 14.5px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.005em;
|
|
|
|
&::placeholder {
|
|
color: rgba(255, 255, 255, 0.25);
|
|
font-weight: 400;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
&::-webkit-search-cancel-button {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
height: 16px;
|
|
width: 16px;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,0.35)'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
|
|
cursor: pointer;
|
|
opacity: 0.5;
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
app-region: no-drag; // Allow button interactions
|
|
}
|
|
|
|
.add-playlist-btn {
|
|
background-color: rgba(139, 92, 246, 0.12) !important;
|
|
color: rgba(139, 92, 246, 1) !important;
|
|
border: 1px solid rgba(139, 92, 246, 0.2);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
&:hover {
|
|
background-color: rgba(139, 92, 246, 0.2) !important;
|
|
border-color: rgba(139, 92, 246, 0.3);
|
|
box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15);
|
|
}
|
|
|
|
.mat-icon {
|
|
color: rgba(139, 92, 246, 1) !important;
|
|
}
|
|
}
|
|
|
|
// Badge styling for filter count
|
|
::ng-deep .mat-badge-accent .mat-badge-content {
|
|
background: rgba(139, 92, 246, 1);
|
|
color: white;
|
|
}
|
|
|
|
// Refined Material button and icon overrides
|
|
.modern-header {
|
|
// Elegant icon styling
|
|
::ng-deep .mat-icon {
|
|
color: rgba(255, 255, 255, 0.85) !important;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
// Refined icon buttons with glass effect
|
|
::ng-deep .mat-mdc-icon-button {
|
|
color: rgba(255, 255, 255, 0.85) !important;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
&:hover {
|
|
background-color: rgba(255, 255, 255, 0.06) !important;
|
|
|
|
.mat-icon {
|
|
color: rgba(255, 255, 255, 1) !important;
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
transform: scale(0.96);
|
|
}
|
|
}
|
|
|
|
// Menu items
|
|
::ng-deep .mat-mdc-menu-item {
|
|
color: rgba(255, 255, 255, 0.9) !important;
|
|
|
|
.mat-icon {
|
|
color: rgba(255, 255, 255, 0.8) !important;
|
|
}
|
|
|
|
span {
|
|
color: rgba(255, 255, 255, 0.9) !important;
|
|
}
|
|
|
|
&:hover {
|
|
.mat-icon {
|
|
color: rgba(255, 255, 255, 1) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Checkbox styling
|
|
::ng-deep .mat-mdc-checkbox {
|
|
color: rgba(255, 255, 255, 0.9) !important;
|
|
|
|
.mdc-checkbox__background {
|
|
border-color: rgba(255, 255, 255, 0.6) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Home page - refined purple accent for icons
|
|
:host.home-header .modern-header {
|
|
::ng-deep .mat-icon {
|
|
color: rgba(255, 255, 255, 0.85) !important;
|
|
}
|
|
|
|
::ng-deep .mat-mdc-icon-button {
|
|
&:hover {
|
|
background-color: rgba(139, 92, 246, 0.1) !important;
|
|
|
|
.mat-icon {
|
|
color: rgba(139, 92, 246, 1) !important;
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
background-color: rgba(139, 92, 246, 0.15) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Responsive design
|
|
@media (max-width: 899px) {
|
|
.search-container {
|
|
max-width: 300px;
|
|
margin: 0 16px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 599px) {
|
|
.modern-header {
|
|
height: 64px;
|
|
padding-left: 70px; // Reduced padding for smaller screens
|
|
}
|
|
|
|
.brand-block {
|
|
padding: 6px 12px 6px 6px;
|
|
gap: 8px;
|
|
}
|
|
|
|
.logo-pulse {
|
|
width: 40px;
|
|
height: 40px;
|
|
|
|
img {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
}
|
|
|
|
.brand-text .title {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.search-container {
|
|
margin: 0 12px;
|
|
height: 42px;
|
|
padding: 0 16px;
|
|
|
|
.search-input {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.menu {
|
|
gap: 2px;
|
|
}
|
|
}
|