/*!* static/css/layout.css *!*/
/** { box-sizing: border-box; }*/
/*a { color: inherit; text-decoration: none; }*/
/*.app {*/
/* min-height: 100vh;*/
/* display: grid;*/
/* grid-template-columns: 320px 1fr;*/
/*}*/
/*!* top-right theme toggle — no outer capsule *!*/
/*.theme-toggle {*/
/* position: fixed;*/
/* top: 14px;*/
/* right: 14px;*/
/* z-index: 9999;*/
/* display: flex;*/
/* align-items: center;*/
/* gap: 10px;*/
/* padding: 0; !* remove capsule padding *!*/
/* border: 0; !* remove capsule border *!*/
/* background: transparent; !* remove capsule background *!*/
/* box-shadow: none; !* remove capsule shadow *!*/
/* border-radius: 0; !* remove capsule rounding *!*/
/* color: var(--text);*/
/* cursor: pointer;*/
/* user-select: none;*/
/* -webkit-tap-highlight-color: transparent;*/
/*}*/
/*.theme-toggle:hover {*/
/* background: transparent;*/
/*}*/
/*.theme-toggle:active {*/
/* transform: none; !* no button press shift *!*/
/*}*/
/*!* the actual switch *!*/
/*.theme-toggle-track {*/
/* width: 46px;*/
/* height: 26px;*/
/* border-radius: 999px;*/
/* background: var(--toggle-track);*/
/* border: 1px solid var(--line);*/
/* position: relative;*/
/* display: block;*/
/*}*/
/*.theme-toggle-thumb {*/
/* width: 20px;*/
/* height: 20px;*/
/* border-radius: 999px;*/
/* background: var(--toggle-thumb);*/
/* position: absolute;*/
/* top: 50%;*/
/* left: 3px;*/
/* transform: translateY(-50%);*/
/* transition: left 160ms ease, background 160ms ease;*/
/*}*/
/*html[data-theme="dark"] .theme-toggle-thumb {*/
/* left: 23px;*/
/*}*/
/*.theme-toggle-label {*/
/* font-size: 13px;*/
/* color: var(--muted);*/
/*}*/
/*.theme-toggle:hover .theme-toggle-track {*/
/* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);*/
/*}*/
/*@media (max-width: 700px) {*/
/* .theme-toggle-label { display: none; }*/
/*}*/
/*.sidebar {*/
/* padding: 28px 22px;*/
/* border-right: 1px solid var(--line);*/
/* position: sticky;*/
/* top: 0;*/
/* height: 100vh;*/
/* background: var(--sidebar-bg);*/
/* backdrop-filter: blur(8px);*/
/*}*/
/*.sidebar-card {*/
/* background: var(--panel);*/
/* border: 1px solid var(--line);*/
/* border-radius: var(--radius);*/
/* box-shadow: none;*/
/* padding: 18px 18px 16px 18px;*/
/*}*/
/*.avatar-wrap {*/
/* display: flex;*/
/* justify-content: center;*/
/* padding-top: 6px;*/
/*}*/
/*.avatar {*/
/* width: 190px;*/
/* height: 190px;*/
/* object-fit: cover;*/
/* border-radius: 22px;*/
/* border: 1px solid var(--line);*/
/*}*/
/*.name {*/
/* margin-top: 16px;*/
/* text-align: centre;*/
/* font-size: 26px;*/
/* font-weight: 600;*/
/*}*/
/*.tagline {*/
/* margin-top: 6px;*/
/* text-align: centre;*/
/* color: var(--muted);*/
/* font-size: 14px;*/
/*}*/
/*!*.social {*!*/
/*!* margin-top: 16px;*!*/
/*!* display: grid;*!*/
/*!* grid-auto-flow: column;*!*/
/*!* justify-content: center;*!*/
/*!* gap: 10px;*!*/
/*!*}*!*/
/*.social {*/
/* display: flex;*/
/* gap: 10px;*/
/* justify-content: center;*/
/*}*/
/*!*.icon {*!*/
/*!* width: 34px;*!*/
/*!* height: 34px;*!*/
/*!* display: grid;*!*/
/*!* place-items: center;*!*/
/*!* border-radius: 10px;*!*/
/*!* border: 1px solid var(--line);*!*/
/*!* background: var(--panel-2);*!*/
/*!*}*!*/
/*.social .icon {*/
/* width: 34px;*/
/* height: 34px;*/
/* display: grid;*/
/* place-items: center;*/
/* border-radius: 10px;*/
/* border: 1px solid var(--line);*/
/* background: var(--panel);*/
/* text-decoration: none;*/
/* overflow: hidden; !* prevents huge SVG bleed *!*/
/*}*/
/*!* IMPORTANT: this is what stops the SVG from exploding *!*/
/*.social .icon img {*/
/* width: 18px;*/
/* height: 18px;*/
/* max-width: 18px;*/
/* max-height: 18px;*/
/* display: block;*/
/* object-fit: contain;*/
/*}*/
/*!* keep your hover look *!*/
/*.social .icon:hover {*/
/* background: var(--panel-2);*/
/* transform: translateY(-1px);*/
/*}*/
/*!*.icon svg {*!*/
/*!* width: 18px;*!*/
/*!* height: 18px;*!*/
/*!* display: block;*!*/
/*!*}*!*/
/*.nav {*/
/* margin-top: 22px;*/
/* display: flex;*/
/* flex-direction: column;*/
/* gap: 6px;*/
/*}*/
/*.nav-link {*/
/* padding: 10px 12px;*/
/* border-radius: 12px;*/
/* color: var(--muted);*/
/* border: 1px solid transparent;*/
/*}*/
/*.nav-link:hover {*/
/* border-color: var(--line);*/
/* background: var(--panel);*/
/* color: var(--text);*/
/*}*/
/*.nav-link.active {*/
/* background: var(--panel);*/
/* border-color: var(--line);*/
/* color: var(--text);*/
/* position: relative;*/
/*}*/
/*.nav-link.active::before {*/
/* content: "";*/
/* position: absolute;*/
/* left: -12px;*/
/* top: 10px;*/
/* bottom: 10px;*/
/* width: 4px;*/
/* border-radius: 999px;*/
/* background: var(--text);*/
/* opacity: 0.28;*/
/*}*/
/*.main {*/
/* padding: 56px 28px;*/
/*}*/
/*.page {*/
/* max-width: 980px;*/
/* margin: 0 auto;*/
/*}*/
/*@media (max-width: 980px) {*/
/* .app { grid-template-columns: 1fr; }*/
/* .sidebar {*/
/* position: static;*/
/* height: auto;*/
/* border-right: none;*/
/* border-bottom: 1px solid var(--line);*/
/* }*/
/* .main { padding: 28px 18px; }*/
/* .page { max-width: 100%; }*/
/*}*/
/* static/css/layout.css */
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
.app {
min-height: 100vh;
display: grid;
grid-template-columns: 320px 1fr;
}
/* ─────────────────────────
Theme toggle (unchanged)
───────────────────────── */
/*.theme-toggle {*/
/* position: fixed;*/
/* top: 14px;*/
/* right: 14px;*/
/* z-index: 9999;*/
/* display: flex;*/
/* align-items: center;*/
/* gap: 10px;*/
/* padding: 0;*/
/* border: 0;*/
/* background: transparent;*/
/* box-shadow: none;*/
/* border-radius: 0;*/
/* color: var(--text);*/
/* cursor: pointer;*/
/*}*/
.theme-toggle {
position: fixed;
top: 14px;
right: 14px;
z-index: 9999;
display: flex;
align-items: center;
gap: 10px;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
color: var(--text);
cursor: pointer;
}
/*.theme-toggle-track {*/
/* width: 46px;*/
/* height: 26px;*/
/* border-radius: 999px;*/
/* background: var(--toggle-track);*/
/* border: 1px solid var(--line);*/
/* position: relative;*/
/*}*/
/*.theme-toggle-thumb {*/
/* width: 20px;*/
/* height: 20px;*/
/* border-radius: 999px;*/
/* background: var(--toggle-thumb);*/
/* position: absolute;*/
/* top: 50%;*/
/* left: 3px;*/
/* transform: translateY(-50%);*/
/* transition: left 160ms ease;*/
/*}*/
.theme-toggle-track {
width: 46px;
height: 26px;
border-radius: 999px;
background: var(--toggle-track);
border: 1px solid var(--line);
position: relative;
}
.theme-toggle-thumb {
width: 20px;
height: 20px;
border-radius: 999px;
background: var(--toggle-thumb);
position: absolute;
top: 50%;
left: 3px;
transform: translateY(-50%);
transition: left 180ms ease, background-color 180ms ease;
display: flex;
align-items: center;
justify-content: center;
}
/* icons inside the toggle thumb */
.tt-icon {
position: absolute;
font-size: 12px;
line-height: 1;
transition: opacity 160ms ease, transform 160ms ease;
}
/* light mode default */
.tt-sun {
opacity: 1;
transform: scale(1);
}
.tt-moon {
opacity: 0;
transform: scale(0.6);
}
html[data-theme="dark"] .theme-toggle-thumb {
left: 23px;
}
html[data-theme="dark"] .tt-sun {
opacity: 0;
transform: scale(0.6);
}
html[data-theme="dark"] .tt-moon {
opacity: 1;
transform: scale(1);
}
.theme-toggle:hover .theme-toggle-track {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
html[data-theme="dark"] .theme-toggle-thumb {
left: 23px;
}
.theme-toggle-label {
font-size: 13px;
color: var(--muted);
}
/* ─────────────────────────
Sidebar
───────────────────────── */
.sidebar {
padding: 28px 22px;
border-right: 1px solid var(--line);
position: sticky;
top: 0;
height: 100vh;
background: var(--sidebar-bg);
}
.sidebar-card {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 18px 18px 20px 18px;
}
/* Avatar */
.avatar-wrap {
display: flex;
justify-content: center;
padding-top: 6px;
}
.avatar {
width: 190px;
height: 190px;
object-fit: cover;
border-radius: 22px;
border: 1px solid var(--line);
}
/* Name */
.name {
margin-top: 14px;
text-align: center;
font-size: 26px;
font-weight: 600;
}
/* ✅ TAGLINE — moved UP closer to name */
.tagline {
margin-top: 4px; /* was 6px */
margin-bottom: 18px; /* creates space before icons */
text-align: center;
color: var(--muted);
font-size: 14px;
}
/* Social icons — now pushed DOWN */
.social {
display: flex;
justify-content: center;
gap: 12px; /* slightly more breathing room */
}
/* Icon container */
.social .icon {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 10px;
border: 1px solid var(--line);
background: var(--panel);
overflow: hidden;
transition: transform 120ms ease, background 120ms ease;
}
/* Icon image */
.social .icon img {
width: 18px;
height: 18px;
object-fit: contain;
}
.social .icon:hover {
background: var(--panel-2);
transform: translateY(-1px);
}
/* ─────────────────────────
Navigation
───────────────────────── */
.nav {
margin-top: 22px;
display: flex;
flex-direction: column;
gap: 6px;
}
.nav-link {
padding: 10px 12px;
border-radius: 12px;
color: var(--muted);
}
.nav-link:hover {
background: var(--panel);
color: var(--text);
}
.nav-link.active {
background: var(--panel);
color: var(--text);
position: relative;
}
.nav-link.active::before {
content: "";
position: absolute;
left: -12px;
top: 10px;
bottom: 10px;
width: 4px;
border-radius: 999px;
background: var(--text);
opacity: 0.28;
}
/* ─────────────────────────
Main content
───────────────────────── */
.main {
padding: 56px 28px;
}
.page {
max-width: 980px;
margin: 0 auto;
}
.now-playing{
display:flex;
flex-direction:column;
gap:8px;
}
.np-label{
/*text-align:center;*/
/*font-size:12px;*/
/*opacity:.65;*/
display:flex;
align-items:center;
justify-content:center;
gap:6px;
font-size:12px;
opacity:.65;
}
.np-marquee{
/*overflow:hidden;*/
/*border:1px solid var(--line);*/
/*border-radius:14px;*/
/*padding:10px 12px;*/
/*background:var(--panel);*/
overflow:hidden;
padding:8px 0;
background:transparent;
}
.np-track{
display:flex;
width:max-content;
animation:np-marquee 14s linear infinite;
}
.np-marquee:hover .np-track{
animation-play-state:paused;
}
.np-content{
/*display:inline-flex;*/
/*align-items:center;*/
/*gap:10px;*/
/*padding-right:28px;*/
/*white-space:nowrap;*/
/*text-decoration:none;*/
/*color:inherit;*/
display:inline-flex;
align-items:center;
gap:8px;
padding-right:24px;
white-space:nowrap;
text-decoration:none;
color:inherit;
}
/*.np-gif{*/
/* width:14px;*/
/* height:14px;*/
/* object-fit:contain;*/
/* flex-shrink:0;*/
/*}*/
.np-label-gif{
width:14px;
height:14px;
object-fit:contain;
}
.np-text{
font-size:14px;
}
@keyframes np-marquee{
from{ transform:translateX(0); }
to{ transform:translateX(-50%); }
}
/* Responsive */
@media (max-width: 980px) {
.app { grid-template-columns: 1fr; }
.sidebar {
position: static;
height: auto;
border-right: none;
border-bottom: 1px solid var(--line);
}
.main { padding: 28px 18px; }
.page { max-width: 100%; }
}