*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0 } :root { --bg: #fff; --text: #000; --muted: #777; --accent: #dc2626; --accent-hover: #ef4444; --dark: #232526; --dark2: #323232; --border: #d9d9d9; --card-bg: #e8e8e8; --section-bg: #f7f7f7; --grad: linear-gradient(to right,#8e2de2,#ff4e9b); --blue: #004488 } body { font-family: 'Helvetica-Neue',sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; margin: auto } ul { margin: 0; padding: 0; border: 0 } a { text-decoration: none; color: inherit } a:hover { color: var(--accent) } img { vertical-align: middle; max-width: 100%; border: 0 } header { background: var(--dark); max-width: 1260px; margin: 0 auto; width: 90%; } .top-nav { max-width: 1260px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; gap: 10px; flex-wrap: wrap } .logo img { height: 55px; width: 194px; display: block } .form-wrapper { display: flex; height: 36px; flex: 1; min-width: 180px; max-width: 480px } .form-wrapper input { flex: 1; padding: 0 12px; border: none; font-size: 14px; font-family: inherit; border-radius: 4px 0 0 4px; outline: none; background: #fff } .form-wrapper button { width: 70px; border: none; background: var(--accent); color: #fff; font-size: 14px; font-family: inherit; font-weight: 500; cursor: pointer; border-radius: 0 4px 4px 0; transition: background .2s } .form-wrapper button:hover { background: var(--accent-hover) } .navbar { background: var(--dark); border-top: 1px solid #444; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none } .navbar::-webkit-scrollbar { display: none } .navbar-inner { max-width: 1260px; margin: 0 auto; display: flex; white-space: nowrap } .navbar a { display: inline-block; color: #fefefe; padding: 12px 16px; font-size: 14px; border-right: 1px solid #444; transition: background .2s; flex-shrink: 0 } .navbar a:hover,.navbar a[aria-current] { background: #3a3a3a; color: #fff } .navbar a[aria-current] { border-bottom: 2px solid var(--accent) } main { max-width: 1260px; margin: 0 auto; padding: 8px 0; width: 90%; } .mainContent { display: flex; gap: 16px; align-items: flex-start } .main-content { flex: 1; min-width: 0 } .sidebar { width: 25%; flex-shrink: 0 } .bpan { padding: 8px; background: var(--section-bg); font-size: 13px } .breadcrumb { list-style: none; display: flex; gap: 4px; flex-wrap: wrap; align-items: center } .breadcrumb li { display: inline } .breadcrumb li+li::before { content: "›"; padding: 0 4px; color: #999; font-size: 16px } h1.heading { background: var(--dark); color: #fff; margin: 0; padding: 10px 12px; font-size: 16px; font-weight: 500; border-bottom: 2px solid; border-image: var(--grad) 1 } .heading3 { padding: 8px 10px; font-size: 14px; font-weight: 700; color: #333; background: linear-gradient(-35deg,#fff 70%,#ff9999 85%,#ff2b2b 100%); margin: 8px 0 0 } .section-heading { background: var(--dark); color: #fff; padding: 10px 12px; font-size: 15px; font-weight: 500; border-bottom: 2px solid; border-image: var(--grad) 1; text-transform: capitalize; margin-top: 12px } .filter-section { padding: 8px; display: flex; justify-content: flex-start } #year-filter-form { display: flex; gap: 8px; align-items: center; margin-right: 5px } #year-filter-form select { height: 36px; padding: 0 28px 0 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13px; font-family: inherit; color: #111; background: #f9fafb url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path d='M5 7.5L10 12.5L15 7.5' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") no-repeat right 6px center/14px; appearance: none; -webkit-appearance: none; outline: none; cursor: pointer } .clear-filter { height: 36px; padding: 0 14px; border: none; border-radius: 8px; background: var(--accent); color: #fff; font-size: 13px; font-family: inherit; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap } .clear-filter:hover { background: var(--accent-hover); color: #fff } .song-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; /* padding: 10px 0; */ padding: 8px; } .song-card { width: calc(20% - 8px); position: relative; overflow: hidden } .song-card a { display: block; text-decoration: none; color: inherit; position: relative } .image-thumb { width: 100%; height: 160px; object-fit: cover; display: block; transition: opacity .3s } .song-card a::after { content: ""; position: absolute; inset: 0 0 35px 0; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .3s; pointer-events: none } .song-card:hover a::after { opacity: 1 } .playBtn { position: absolute; top: calc(50% - 17px); left: 50%; transform: translate(-50%,-50%) scale(.6); width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; opacity: 0; transition: all .3s; z-index: 5 } .playBtn svg { width: 22px; height: 22px } .song-card:hover .playBtn { opacity: 1; transform: translate(-50%,-50%) scale(.9) } .desc { background: var(--card-bg); border: 1px solid var(--border); height: 34px; display: flex; align-items: center; padding: 0 6px } .desc .b { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100% } .card-desc { border: 1px solid var(--border); background: var(--card-bg); height: 34px; display: flex; align-items: center; padding: 0 6px } .card-title { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100% } .pgn { background: #fff; text-align: center; padding: 14px 8px 8px; margin: 4px 0 } .pgn a,.pgn span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border: 1px solid #2e76b3; padding: 0 10px; margin: 0 2px 4px; background: #3a87c9; color: #fff; border-radius: 4px; font-size: 14px; text-decoration: none; transition: background .2s } .pgn a:hover,.pgn span.current { background: #215f94; border-color: #1f5c8f; color: #fff } .contentsec { padding: 8px; background: #f9f9f9 } .contentsec h3 { font-size: 20px; margin-bottom: 12px; color: #202020 } .contentsec p { line-height: 1.7; font-size: 14px } .intro-panel { padding: 12px; background: var(--section-bg); margin-bottom: 12px } .intro-panel h1 { color: var(--blue); font-size: 18px; font-weight: 400; text-align: center; margin-bottom: 8px } .intro-panel p { font-size: 15px; line-height: 1.4; text-align: justify } .intro-panel .share-note { text-align: center } .share-icons { display: flex; justify-content: center; gap: 8px; margin: 10px } .share-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center; margin-bottom: 6px } .share-row img { width: 30px; height: 30px } .share-note { text-align: center; font-size: 12px; color: var(--blue) } .view-more { text-align: center; padding: 10px 0 4px } .btn-view { display: inline-block; background: var(--accent); color: #fff; padding: 10px 28px; border-radius: 8px; font-size: 14px; font-weight: 500; transition: background .2s } .btn-view:hover { background: var(--accent-hover); color: #fff } .browsecats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; padding: 8px } .category-item { background: #fff; border-radius: 8px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.12); padding: 16px 10px; gap: 8px; text-align: center; transition: box-shadow .2s,border .2s; border: 1px solid transparent } .category-item:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(220,38,38,.2); color: inherit } .category-item svg { width: 38px; fill: var(--accent); flex-shrink: 0 } .category-item .cat-name { font-size: 13px; font-weight: 600; color: #333 } .post-count { font-size: 11px; background: #e8f0fb; color: #0056ad; padding: 2px 8px; border-radius: 10px } table.share-icons img { width: 28px; height: 28px } .wlist { display: flex; flex-wrap: wrap; background: var(--section-bg) } .wlist li { display: flex; align-items: center; width: 49%; background: #fff; cursor: pointer; padding: 12px 0 12px 4px; font-size: 17px; margin: 1px 0 0 0; border-bottom: 1px solid #d8cdcd; overflow: auto } .wlist li:hover { box-shadow: 0 1px 8px rgba(0,0,0,.2) } .track-link { display: flex; width: 100%; height: 100%; text-decoration: none; color: inherit } .track-icon { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 26px; color: #DB0707 } .track-icon::before { content: '♫' } .track-info { min-width: 0 } .track-name { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; color: #000 } .track-name:hover { color: var(--accent) } .singer-name { display: block; font-size: 12px; font-weight: 400; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px } .info-card { display: flex; align-items: flex-start; padding: 12px 10px; background: var(--section-bg); gap: 0 } .info-img { flex-shrink: 0; width: 205px; margin-right: 18px } .info-img img { width: 205px; height: 205px; object-fit: cover; border-radius: 2px; display: block } .info-details { flex: 1; min-width: 0 } .song-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; line-height: 1.3 } .info-table { width: 100%; border-collapse: collapse } .info-table tr td { border-bottom: 1px solid #e2d9d9; padding: 4px; font-size: 13px; vertical-align: top; line-height: 1.45 } .info-label { width: 110px; white-space: nowrap } .info-value { color: #000 } .info-value a { color: #296a8f } .player-cell { padding-top: 10px; padding-bottom: 4px } .player { display: flex; align-items: center; border: 1px solid #818181; border-radius: 10px; background: #e7e7e7e6; box-shadow: 2px 2px 4px #b3b3b3; padding: 5px; width: 100%; max-width: 340px; margin: 10px 0 } #playPauseBtn { cursor: pointer; flex-shrink: 0; display: flex; align-items: center } .pro_wrap { flex: 1; margin: 10px 10px 0 10px } #progress { width: 100%; height: 3px; accent-color: #000; cursor: pointer; display: block; margin: 0 } .time { display: flex; justify-content: space-between; font-size: 11px; padding-top: 10px; color: #555 } .volume-control { display: flex; align-items: center; flex-shrink: 0 } #muteBtn { cursor: pointer; display: flex; align-items: center } #volRange { width: 0; opacity: 0; height: 3px; transition: width .4s,opacity .4s; margin-left: 4px; accent-color: #000 } .volume-control:hover #volRange { width: 46px; opacity: 1 } .listen-txt { font-size: 12px; color: var(--text); margin-top: 6px } .desc-block { padding: 10px; font-size: 14px; line-height: 1.65; text-align: justify; background: var(--section-bg); } .dwn-section { padding: 10px; background: #fff; text-align: center } .dbutton { display: inline-flex; align-items: center; gap: 6px; background: #dc2626; color: #fff; font-size: 14px; border-radius: 6px; padding: 8px 16px; margin: 5px; cursor: pointer; border: none; font-family: inherit } .dbutton:hover { background-color: #ef4444; color: #fff; } .svg-dwn { width: 17px; height: 17px; flex-shrink: 0 } .grid-block { background: var(--section-bg) } .sidebar-content { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px } .ts-head { display: flex; align-items: center; color: #fff; padding: 8px 10px; margin: 0; background: var(--dark); border-bottom: 2px solid; border-image: var(--grad) 1; font-size: 1rem; font-weight: 500 } .ts-head .tsHeading { font-size: 14px; font-weight: 500 } .ts-content { background: var(--section-bg); list-style: none; padding: 8px; } .ts-song { display: flex; align-items: center; background: #fff; padding: 7px; margin-bottom: 7px; border-radius: 3px; gap: 8px; text-decoration: none; color: inherit; transition: box-shadow .2s } .ts-song:last-child { margin-bottom: 0 } .song-thumb img { width: 52px; height: 52px; object-fit: cover; border-radius: 5px; flex-shrink: 0; display: block } .song-content { min-width: 0 } .title-box { font-size: 13px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3 } .ts-title { font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3 } .album-name { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px } footer { background: var(--dark); color: #fff; text-align: center; padding: 14px 12px; border-bottom: 2px solid; border-image: var(--grad) 1; max-width: 1260px; margin: 0 auto; width: 90%; } footer p { font-size: 13px; margin: 0 0 8px } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px } .footer-links a { padding: 4px 10px; font-size: 13px } .footer-links a:last-child { border-right: none } .footer-links a:hover { color: #fff } @media(max-width: 1024px) { header, main, footer { width: 100%; max-width: 100%; } .song-card { width: calc(25% - 8px) } .browsecats { grid-template-columns: repeat(3,1fr) } } @media(max-width: 900px) { .song-card { width:calc(33.33% - 8px) } .image-thumb { height: 130px } .browsecats { grid-template-columns: repeat(3,1fr) } } @media(max-width: 768px) { .mainContent { flex-direction:column } .main-content { width: 100% } .sidebar { width: 100% } .sidebar-content { position: static } .song-card { width: calc(33.33% - 8px) } .image-thumb { height: 130px } .ts-content { display: grid; grid-template-columns: 1fr 1fr; gap: 6px } .ts-song { margin-bottom: 0 } .browsecats { grid-template-columns: repeat(3,1fr); gap: 10px } .info-img { width: 175px; margin-right: 14px } .info-img img { width: 175px; height: 175px } } @media(max-width: 576px) { .top-nav { flex-direction:column; padding: 10px; gap: 8px } .form-wrapper { width: 100%; max-width: 100%; flex: auto } main { padding: 0 } .song-card { width: calc(50% - 6px) } .image-thumb { height: 140px } .song-list { gap: 8px; padding: 8px } .browsecats { grid-template-columns: repeat(2,1fr); gap: 8px } .info-card { flex-direction: column; align-items: center; padding: 12px 8px } .info-img { width: 100%; margin-right: 0; margin-bottom: 14px; text-align: center } .info-img img { width: 210px; height: 210px; margin: 0 auto; display: block } .info-details { width: 100% } .wlist li { width: 100% } .player { max-width: 80% } } @media(max-width: 480px) { .ts-content { grid-template-columns:1fr } .browsecats { gap: 8px } .wlist li { width: 100% } } @media(max-width: 400px) { .image-thumb { height:120px } .song-card { width: calc(50% - 5px) } .song-list { gap: 6px } .info-img img { width: 180px; height: 180px } } .section-wrap { background: #fff } .az-heading { padding: 8px 10px 8px 14px; background: #232526; color: #fff; font-size: 15px; font-weight: 400; border-bottom: 2px solid; border-image: linear-gradient(to right,#8e2de2,#ff4e9b) 1; cursor: default } .list-label { padding: 8px 14px; background: #232526; color: #fff; font-size: 15px; font-weight: 400; border-bottom: 2px solid #dc2626; display: flex; align-items: center; justify-content: space-between } .no-result { padding: 24px; text-align: center; color: #888; font-size: 14px; background: #f7f7f7; border: 1px solid #ebebeb; border-top: none; display: none } .az-bar { display: flex; align-items: center; justify-content: center; list-style: none; text-align: center; padding: 6px; margin: 0; flex-wrap: wrap; background: linear-gradient(90deg,rgba(255,239,239,1) 0%,rgba(228,228,255,1) 35%,rgba(229,251,255,1) 100%) } .az-bar li { margin: 5px 4px } .az-bar li a { display: inline-block; padding: 8px 8px 9px 8px; background: #3d3d3d; color: #fff; border: 1px solid #ccc; border-radius: 3px; text-decoration: none; font-weight: 700 } .az-bar li a.active,.az-bar li a:hover { background: #dc2626; border-color: #dc2626 } .sing-list { display: grid; grid-template-columns: repeat(3,1fr); column-gap: 15px; row-gap: 5px; list-style: none; background: #fff; padding: 12px 14px; margin: 0; border-top: none } .sing-list li { padding: 5px 5px 5px 14px; border-bottom: 1px solid #eee; position: relative } .sing-list li::before { content: '•'; position: absolute; left: 0; top: 5px; color: #dc2626; font-size: 16px } .sing-list li a { color: #333; text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px } .sing-list li a:hover { color: #dc2626 } .pgn { background: #fff; border: 1px solid #f2f6fa; border-top: none; text-align: center; padding: 14px 10px 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px } .pgn a,.pgn button { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid #2e76b3; background: #3a87c9; color: #fff; border-radius: 4px; font-size: 14px; text-decoration: none; cursor: pointer; transition: background .15s; font-family: inherit } .pgn a:hover,.pgn button:hover { background: #215f94; border-color: #1f5c8f; color: #fff } .pgn span.current { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid #1f5c8f; background: #215f94; color: #fff; border-radius: 4px; font-size: 14px; font-weight: 700; cursor: default } .pgn span.dots { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 36px; color: #555; font-size: 14px; cursor: default; border: none; background: transparent } .pgn a.disabled { background: #b0c8e0; border-color: #9ab5cc; cursor: not-allowed; pointer-events: none } .pgn .pgn-info { width: 100%; margin-top: 6px; font-size: 12px; color: #888; text-align: center } @media(max-width: 768px) { .sing-list { grid-template-columns:repeat(2,1fr) } } @media(max-width: 480px) { .sing-list { grid-template-columns:1fr } } @media(max-width: 400px) { .pgn a,.pgn button,.pgn span.current { min-width:30px; height: 32px; font-size: 13px; padding: 0 7px } }