/* ===================================================================== Lynko design tokens The application is themed entirely through CSS custom properties. Light mode is the default; the dark variant kicks in automatically when the user's OS reports a dark preference, and can also be forced by setting `data-theme="dark"` on from JS. ===================================================================== */ :root { /* brand */ --brand-ink: #0F172A; --brand-ink-2: #1E293B; /* primary action: teal */ --primary-50: #E1F5EE; --primary-100: #C8EBDD; --primary-200: #9FE1CB; --primary-300: #5DCAA5; --primary-500: #1D9E75; --primary-600: #0F6E56; --primary-700: #085041; --primary-800: #06402F; --primary-900: #04342C; /* category accent palette (used for thumbnails when no OG image exists) */ --accent-amber-bg: #FAC775; --accent-amber-fg: #412402; --accent-coral-bg: #F5C4B3; --accent-coral-fg: #4A1B0C; --accent-purple-bg: #CECBF6; --accent-purple-fg: #26215C; --accent-pink-bg: #F4C0D1; --accent-pink-fg: #4B1528; --accent-blue-bg: #B5D4F4; --accent-blue-fg: #042C53; --accent-teal-bg: #9FE1CB; --accent-teal-fg: #04342C; /* surfaces */ --bg: #F8FAFC; --surface: #FFFFFF; --surface-2: #F1F5F9; --surface-3: #E2E8F0; --border: #E2E8F0; --border-2: #CBD5E1; /* text */ --text: #0F172A; --text-2: #475569; --text-3: #94A3B8; /* feedback */ --danger-bg: #FEE2E2; --danger-fg: #B91C1C; --success-bg: #DCFCE7; --success-fg: #15803D; /* shape */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 22px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03); --shadow-md: 0 6px 16px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04); --shadow-lg: 0 16px 40px rgba(15,23,42,.08), 0 4px 10px rgba(15,23,42,.04); --container: 1280px; --header-h: 60px; --sidebar-w: 240px; --t-fast: 120ms; --t-base: 180ms; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand-ink: #F1F5F9; --brand-ink-2: #CBD5E1; --bg: #0B1220; --surface: #111827; --surface-2: #1E293B; --surface-3: #334155; --border: #1F2937; --border-2: #334155; --text: #F1F5F9; --text-2: #CBD5E1; --text-3: #94A3B8; --primary-50: #06402F; --shadow-sm: 0 1px 2px rgba(0,0,0,.45); --shadow-md: 0 6px 16px rgba(0,0,0,.45); --shadow-lg: 0 16px 40px rgba(0,0,0,.55); } } :root[data-theme="dark"] { --brand-ink: #F1F5F9; --brand-ink-2: #CBD5E1; --bg: #0B1220; --surface: #111827; --surface-2: #1E293B; --surface-3: #334155; --border: #1F2937; --border-2: #334155; --text: #F1F5F9; --text-2: #CBD5E1; --text-3: #94A3B8; --primary-50: #06402F; } /* ===================================================================== Reset & base ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; } ::selection { background: var(--primary-200); color: var(--primary-900); } /* ===================================================================== Top bar ===================================================================== */ .topbar { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; height: var(--header-h); padding: 0 22px; background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: saturate(140%) blur(12px); } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--brand-ink); letter-spacing: -0.01em; } .brand-logo { width: auto; height: 30px; max-width: 140px; object-fit: contain; } .topbar nav.primary { display: flex; align-items: center; gap: 6px; justify-self: center; width: 100%; max-width: 520px; } .search-shell { flex: 1; display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text-3); transition: border-color var(--t-base), background var(--t-base); } .search-shell:focus-within { border-color: var(--primary-500); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500) 18%, transparent); } .search-shell input { flex: 1; border: 0; background: transparent; outline: 0; color: var(--text); font-size: 13.5px; height: 100%; } .search-shell .kbd { font-size: 10.5px; padding: 1px 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text-3); } .topbar .right { display: flex; align-items: center; gap: 8px; justify-self: end; } /* generic chip used for plan/lang badges */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 12.5px; color: var(--text-2); transition: background var(--t-fast), border-color var(--t-fast); } .chip:hover { background: var(--surface-2); border-color: var(--border-2); } .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--primary-600); color: #fff; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } /* language dropdown */ .lang-menu { position: relative; } .lang-list { position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); z-index: 50; display: none; } .lang-menu[data-open="1"] .lang-list { display: block; } .lang-list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 10px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--text); } .lang-list a:hover { background: var(--surface-2); } .lang-list a.active { background: var(--primary-50); color: var(--primary-900); font-weight: 500; } .lang-list .code { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; } /* ===================================================================== Page shell ===================================================================== */ .page { max-width: var(--container); margin: 0 auto; padding: 26px 22px; } .page-narrow { max-width: 720px; } /* ===================================================================== Hero (landing) ===================================================================== */ .hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; padding: 36px 0 28px; } .hero h1 { font-size: 52px; line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 16px; color: var(--brand-ink); } .hero p { font-size: 17px; color: var(--text-2); line-height: 1.6; margin: 0 0 22px; } .hero-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 22px; box-shadow: var(--shadow-md); } /* ===================================================================== Landing product preview image ===================================================================== This block controls the illustration used in the right side of the homepage hero. The image file is intentionally kept inside the public assets folder so it can be replaced without changing PHP logic. ===================================================================== */ .hero-preview-card { padding: 16px; overflow: hidden; } .hero-preview-image-wrap { position: relative; overflow: hidden; border-radius: 24px; background: var(--primary-100); border: 1px solid color-mix(in srgb, var(--primary-300) 55%, transparent); } .hero-preview-image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center; display: block; border-radius: 24px; } .hero-preview-badge { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 6px 12px; border-radius: 999px; background: var(--primary-600); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; box-shadow: 0 8px 18px rgba(15, 23, 42, .18); } .hero-preview-content { padding: 14px 4px 4px; } .hero-preview-content .card-title { margin: 0 0 6px; } .hero-preview-content .card-desc { margin: 0 0 16px; } @media (max-width: 720px) { .hero-preview-card { padding: 12px; } .hero-preview-image { aspect-ratio: 4 / 3; } .hero-preview-badge { top: 10px; left: 10px; min-height: 28px; padding: 6px 10px; font-size: 12px; } } .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; } .feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; } .feature b { display: block; font-size: 14.5px; margin: 0 0 4px; color: var(--brand-ink); } .feature span { font-size: 13.5px; color: var(--text-2); line-height: 1.55; } /* ===================================================================== Buttons ===================================================================== */ .btn, .btn-ghost, .btn-soft { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: var(--r-md); font-size: 13.5px; font-weight: 500; border: 1px solid transparent; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast); } .btn { background: var(--primary-600); color: #fff; box-shadow: var(--shadow-sm); } .btn:hover { background: var(--primary-700); } .btn:active { transform: scale(0.98); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn-ghost:hover { background: var(--surface-2); border-color: var(--border-2); } .btn-soft { background: var(--primary-50); color: var(--primary-900); } .btn-soft:hover { background: var(--primary-100); } .btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; } /* segmented toggle (cards/list) */ .segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 3px; gap: 2px; } .segmented a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 7px; font-size: 12.5px; color: var(--text-2); } .segmented a.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 500; } /* ===================================================================== Forms ===================================================================== */ .form { display: block; } .form label { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-2); margin: 14px 0 6px; letter-spacing: 0.01em; } .input, select, textarea { width: 100%; height: 40px; padding: 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 14px; color: var(--text); outline: 0; transition: border-color var(--t-base), box-shadow var(--t-base); font-family: inherit; } textarea { height: auto; padding: 10px 12px; min-height: 96px; resize: vertical; } .input:focus, select:focus, textarea:focus { border-color: var(--primary-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500) 18%, transparent); } .input-url { height: 46px; font-size: 15px; } .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; align-items: center; } .alert { padding: 10px 14px; border-radius: var(--r-md); margin-bottom: 14px; font-size: 13.5px; border: 1px solid transparent; } .alert-danger { background: var(--danger-bg); color: var(--danger-fg); border-color: color-mix(in srgb, var(--danger-fg) 22%, transparent); } .alert-ok { background: var(--success-bg); color: var(--success-fg); border-color: color-mix(in srgb, var(--success-fg) 22%, transparent); } /* ===================================================================== Auth boxes ===================================================================== */ .auth-box { max-width: 440px; margin: 60px auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 28px; box-shadow: var(--shadow-md); } .auth-box h1 { margin: 0 0 6px; font-size: 26px; letter-spacing: -0.02em; } .auth-box .muted { color: var(--text-2); font-size: 13.5px; } .auth-box .switch { margin-top: 18px; font-size: 13px; color: var(--text-2); } .auth-box .switch a { color: var(--primary-600); font-weight: 500; } /* ===================================================================== Section title ===================================================================== */ .section-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .section-title h1 { margin: 0 0 4px; font-size: 24px; letter-spacing: -0.02em; color: var(--brand-ink); } .section-title p { margin: 0; color: var(--text-2); font-size: 13.5px; } .crumbs { font-size: 12px; color: var(--text-3); margin-bottom: 6px; } .crumbs span { margin: 0 6px; } /* ===================================================================== Layout: sidebar + content ===================================================================== */ .layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr; gap: 22px; align-items: start; } .sidebar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 12px; position: sticky; top: calc(var(--header-h) + 16px); display: flex; flex-direction: column; gap: 16px; } .side-section h4 { margin: 0 6px 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); font-weight: 500; display: flex; justify-content: space-between; align-items: center; } .icon-btn { width: 22px; height: 22px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; } .icon-btn:hover { background: var(--primary-50); color: var(--primary-700); border-color: var(--primary-200); } .nav-list { display: flex; flex-direction: column; gap: 1px; } .nav-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: var(--r-md); color: var(--text); font-size: 13px; gap: 8px; } .nav-item:hover { background: var(--surface-2); } .nav-item.active { background: var(--primary-50); color: var(--primary-900); font-weight: 500; } .nav-item.active .ic { color: var(--primary-600); } .nav-item .ic { width: 14px; height: 14px; flex: 0 0 14px; color: var(--text-2); } .nav-item .label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-item .count { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; } .nav-item.active .count { color: var(--primary-700); } .nav-sub { display: none; flex-direction: column; gap: 1px; margin: 2px 0 4px 12px; padding-left: 10px; border-left: 1.5px solid var(--border); overflow: visible; max-height: none; } .cat-node[data-open="1"] .nav-sub { display: flex; max-height: none; overflow: visible; } .nav-item.sub { padding: 6px 10px; font-size: 12.5px; color: var(--text-2); } .nav-item.sub.active { color: var(--primary-900); } .toggle-row { display: grid; grid-template-columns: 22px 1fr; gap: 6px; align-items: center; } .toggle-row .toggle-btn { width: 22px; height: 22px; background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-2); font-size: 14px; line-height: 1; padding: 0; } .toggle-row .toggle-btn:hover { background: var(--surface-2); } .toggle-row .placeholder { width: 22px; height: 22px; } .plan-box { margin-top: auto; padding: 12px; background: var(--surface-2); border-radius: var(--r-md); border: 1px solid var(--border); } .plan-box .label { font-size: 11px; color: var(--text-3); margin-bottom: 4px; } .plan-box .name { font-size: 13px; font-weight: 500; margin-bottom: 8px; } .bar { height: 4px; background: var(--surface-3); border-radius: 2px; overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--primary-500); border-radius: 2px; } .plan-box .meta { font-size: 11px; color: var(--text-3); margin-top: 6px; } /* ===================================================================== Filter bar ===================================================================== */ .filterbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip-filter { padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--text-2); font-size: 12px; } .chip-filter:hover { background: var(--surface-2); } .chip-filter.active { background: var(--primary-900); border-color: var(--primary-900); color: #fff; } /* ===================================================================== Cards grid ===================================================================== */ .links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .link-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); color: inherit; position: relative; } .link-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--border-2); } .thumb { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; } .thumb img { width: 100%; height: 100%; object-fit: cover; } .thumb.fallback { display: grid; place-items: center; } .thumb.fallback svg { width: 38%; height: 38%; opacity: 0.55; } .thumb.theme-teal { background: var(--accent-teal-bg); color: var(--accent-teal-fg); } .thumb.theme-amber { background: var(--accent-amber-bg); color: var(--accent-amber-fg); } .thumb.theme-coral { background: var(--accent-coral-bg); color: var(--accent-coral-fg); } .thumb.theme-purple { background: var(--accent-purple-bg); color: var(--accent-purple-fg); } .thumb.theme-pink { background: var(--accent-pink-bg); color: var(--accent-pink-fg); } .thumb.theme-blue { background: var(--accent-blue-bg); color: var(--accent-blue-fg); } .thumb .badge { position: absolute; top: 8px; left: 8px; background: rgba(255,255,255,.92); color: var(--brand-ink); padding: 3px 9px; font-size: 11px; font-weight: 500; border-radius: var(--r-pill); } [data-theme="dark"] .thumb .badge, :root:not([data-theme="light"]) .thumb .badge { background: rgba(17,24,39,.85); color: #fff; } .card-body { padding: 12px 14px 13px; display: flex; flex-direction: column; gap: 6px; } .card-title { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-desc { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); margin-top: 2px; } .host-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary-500); } .card-meta .actions-mini { margin-left: auto; display: inline-flex; gap: 6px; color: var(--text-3); opacity: 0; transition: opacity var(--t-fast); } .link-card:hover .card-meta .actions-mini { opacity: 1; } .card-meta .actions-mini button { background: transparent; border: 0; padding: 2px; color: inherit; } .card-meta .actions-mini button:hover { color: var(--primary-600); } /* ===================================================================== List view ===================================================================== */ .links-list { display: flex; flex-direction: column; gap: 8px; } .link-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px; transition: background var(--t-fast), border-color var(--t-fast); color: inherit; } .link-row:hover { background: var(--surface-2); border-color: var(--border-2); } .link-row .thumb { aspect-ratio: 16/10; border-radius: var(--r-sm); } .link-row h3 { margin: 0 0 4px; font-size: 14px; font-weight: 500; } .link-row p { margin: 0 0 4px; color: var(--text-2); font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .link-row .meta { font-size: 11.5px; color: var(--text-3); } /* ===================================================================== Empty state ===================================================================== */ .empty { grid-column: 1 / -1; background: var(--surface); border: 1px dashed var(--border-2); border-radius: var(--r-lg); padding: 40px; text-align: center; } .empty b { display: block; font-size: 15px; margin-bottom: 4px; } .empty p { margin: 0 0 14px; color: var(--text-2); font-size: 13.5px; } /* ===================================================================== Tables (categories admin) ===================================================================== */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; } .card h2 { margin: 0 0 12px; font-size: 16px; } .split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .table { width: 100%; border-collapse: separate; border-spacing: 0; } .table th { text-align: left; font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); padding: 8px 12px; border-bottom: 1px solid var(--border); } .table td { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; } .table tr:last-child td { border-bottom: 0; } /* ===================================================================== Pricing ===================================================================== */ .pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .price-card { display: flex; flex-direction: column; gap: 12px; } .price-card .price { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin: 0; } .price-card .price small { font-size: 13px; color: var(--text-3); font-weight: 400; } .price-card ul { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 13.5px; line-height: 1.7; } .price-card.featured { border-color: var(--primary-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-500) 14%, transparent); } /* ===================================================================== Footer ===================================================================== */ .footer { text-align: center; color: var(--text-3); padding: 28px 18px; font-size: 12.5px; border-top: 1px solid var(--border); margin-top: 40px; } /* ===================================================================== Responsive ===================================================================== */ @media (max-width: 980px) { .hero { grid-template-columns: 1fr; gap: 24px; } .hero h1 { font-size: 38px; } .feature-grid { grid-template-columns: 1fr 1fr; } .layout { grid-template-columns: 1fr; } .sidebar { position: relative; top: auto; } .split-2 { grid-template-columns: 1fr; } .pricing { grid-template-columns: 1fr; } .topbar nav.primary { display: none; } .topbar { grid-template-columns: auto auto; } } @media (max-width: 640px) { .feature-grid { grid-template-columns: 1fr; } .links-grid { grid-template-columns: 1fr 1fr; } .link-row { grid-template-columns: 80px 1fr; } .link-row .meta { display: none; } .section-title { flex-direction: column; align-items: flex-start; } .page { padding: 18px 14px; } } @media (max-width: 420px) { .links-grid { grid-template-columns: 1fr; } .hero h1 { font-size: 30px; } } /* ===================================================================== Final alignment, mobile topbar and account menu adjustments ===================================================================== */ .topbar { max-width: var(--container); margin: 0 auto; width: 100%; } body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: saturate(140%) blur(12px); z-index: 29; pointer-events: none; } .brand-logo { height: 45px; max-width: 210px; } .user-menu { position: relative; } .avatar { border: 0; } .user-list { position: absolute; top: calc(100% + 6px); right: 0; min-width: 170px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); z-index: 50; display: none; } .user-menu[data-open="1"] .user-list { display: block; } .user-list a { display: block; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--text); } .user-list a:hover { background: var(--surface-2); } .chip.active, .check-row { background: var(--primary-50); color: var(--primary-900); border-color: color-mix(in srgb, var(--primary-500) 35%, var(--border)); } .check-row { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); font-size: 13.5px; cursor: pointer; } .switch.compact { margin-top: 4px; text-align: left; } @media (max-width: 980px) { .topbar { grid-template-columns: auto 1fr; min-height: var(--header-h); height: auto; padding: 8px 14px; gap: 10px; } .topbar .right { justify-self: end; flex-wrap: wrap; justify-content: flex-end; } .brand-logo { height: 40px; max-width: 185px; } } @media (max-width: 640px) { .topbar { grid-template-columns: 1fr auto; align-items: center; } .brand { min-width: 0; } .brand-logo { height: 38px; max-width: 165px; } .topbar .right { gap: 6px; } .topbar .right .chip span, .topbar .right .btn-sm, .topbar .right a.chip span { display: none; } .chip { padding: 7px 8px; } } @media (max-width: 420px) { .brand-logo { height: 34px; max-width: 145px; } .topbar { padding-left: 10px; padding-right: 10px; } } /* ===================================================================== Patch 2026-05-05: topbar alignment, dropdown behavior and stronger page contrast. This block intentionally stays at the end of the stylesheet so it can override previous layout rules without changing the rest of the design. ===================================================================== */ :root { /* Slightly darker application background so white cards and fields are more visible across dashboard, categories and search pages. */ --bg: #EEF2F7; --surface-2: #E8EEF6; --surface-3: #D7E0EC; --border: #CBD5E1; --border-2: #AEBBCC; } /* The header background spans the viewport, while the content inside the header follows the same max-width and horizontal alignment as
. */ .topbar { display: block; width: 100%; max-width: none; height: auto; min-height: var(--header-h); padding: 0; margin: 0; background: color-mix(in srgb, var(--surface) 94%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: saturate(140%) blur(12px); } body::before { display: none; } .topbar-inner { width: 100%; max-width: var(--container); min-height: var(--header-h); margin: 0 auto; padding: 0 22px; display: grid; grid-template-columns: minmax(170px, auto) minmax(260px, 520px) minmax(260px, auto); align-items: center; gap: 18px; } .topbar .brand { justify-self: start; } .topbar .brand-logo { height: 45px; max-width: 210px; width: auto; object-fit: contain; } .topbar nav.primary { justify-self: center; width: 100%; max-width: 520px; } .topbar .right { justify-self: end; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; } .lang-menu, .user-menu { position: relative; display: inline-flex; align-items: center; } /* Account options are hidden by default and only appear when JS changes data-open to 1 after the avatar click. The !important is deliberate to defeat browser/cache remnants from older deployments. */ .user-list, .lang-list { position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); z-index: 80; display: none !important; } .user-menu[data-open="1"] .user-list, .lang-menu[data-open="1"] .lang-list { display: flex !important; flex-direction: column; gap: 2px; } .user-list a, .lang-list a { width: 100%; white-space: nowrap; } .avatar { flex: 0 0 auto; border: 0; } /* Cards, forms and tables receive a slightly stronger border to stand out from the darker background. */ .card, .auth-box, .hero-card, .feature, .sidebar, .link-card, .link-row, .empty, .input, select, textarea, .search-shell, .chip, .btn-ghost { border-color: var(--border); } .card, .auth-box, .hero-card, .feature, .sidebar, .link-card, .link-row, .empty { box-shadow: var(--shadow-sm); } @media (max-width: 980px) { .topbar-inner { grid-template-columns: auto 1fr; grid-template-areas: "brand actions" "search search"; min-height: auto; padding: 8px 14px; gap: 8px 10px; } .topbar .brand { grid-area: brand; } .topbar nav.primary { grid-area: search; display: flex; max-width: none; } .topbar .right { grid-area: actions; flex-wrap: wrap; justify-content: flex-end; } .topbar .brand-logo { height: 40px; max-width: 185px; } } @media (max-width: 640px) { .topbar-inner { padding: 8px 12px; grid-template-columns: minmax(120px, 1fr) auto; } .topbar .brand-logo { height: 38px; max-width: 165px; } .topbar .right { gap: 6px; } .topbar .right .chip span, .topbar .right .btn-sm, .topbar .right a.chip span { display: none; } .chip { padding: 7px 8px; } .user-list, .lang-list { right: 0; min-width: 190px; } } @media (max-width: 420px) { .topbar-inner { padding-left: 10px; padding-right: 10px; } .topbar .brand-logo { height: 34px; max-width: 145px; } } /* ===================================================================== Patch 2026-05-05, final topbar alignment and dropdown behavior Keeps the logo aligned with the page content, keeps topbar actions on the right, and keeps language and user menus hidden until clicked. ===================================================================== */ html, body { background: var(--bg); } .topbar { position: sticky; top: 0; z-index: 80; width: 100%; max-width: none; height: auto; min-height: var(--header-h); margin: 0; padding: 0; display: block; background: color-mix(in srgb, var(--surface) 96%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: saturate(140%) blur(12px); } .topbar-inner { width: 100%; max-width: var(--container); min-height: var(--header-h); margin: 0 auto; padding: 0 22px; display: grid; grid-template-columns: 220px minmax(280px, 520px) 1fr; align-items: center; column-gap: 18px; } .topbar .brand { justify-self: start; min-width: 0; } .topbar .brand-logo { width: auto; height: 45px; max-width: 210px; object-fit: contain; } .topbar nav.primary { display: flex; justify-self: center; width: 100%; max-width: 520px; } .topbar .right { justify-self: end; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; white-space: nowrap; } .lang-menu, .user-menu { position: relative; display: inline-flex; align-items: center; isolation: isolate; z-index: 130; } .avatar { border: 0; flex: 0 0 auto; } .lang-list, .user-list { position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); z-index: 140; display: none; overflow: hidden; } .lang-menu[data-open="1"] .lang-list, .user-menu[data-open="1"] .user-list, .lang-menu:focus-within .lang-list, .user-menu:focus-within .user-list { display: flex; flex-direction: column; gap: 2px; } .user-list a, .lang-list a { display: flex; align-items: center; justify-content: space-between; width: 100%; white-space: nowrap; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--text); } .user-list a:hover, .lang-list a:hover { background: var(--surface-2); } .card, .auth-box, .hero-card, .feature, .sidebar, .link-card, .link-row, .empty, .search-shell, .input, select, textarea, .chip, .btn-ghost { border-color: var(--border); } .card, .auth-box, .hero-card, .feature, .sidebar, .link-card, .link-row, .empty { box-shadow: var(--shadow-sm); } @media (max-width: 980px) { .topbar-inner { grid-template-columns: minmax(150px, 1fr) auto; grid-template-areas: "brand actions" "search search"; row-gap: 8px; min-height: auto; padding: 8px 14px; } .topbar .brand { grid-area: brand; } .topbar nav.primary { grid-area: search; display: flex; max-width: none; } .topbar .right { grid-area: actions; justify-self: end; flex-wrap: wrap; justify-content: flex-end; } .topbar .brand-logo { height: 40px; max-width: 185px; } } @media (max-width: 640px) { .topbar-inner { grid-template-columns: minmax(120px, 1fr) auto; padding: 8px 12px; } .topbar .brand-logo { height: 38px; max-width: 165px; } .topbar .right { gap: 6px; } .topbar .right .chip span, .topbar .right a.chip span, .topbar .right .btn-sm { display: none; } .chip { padding: 7px 8px; } .lang-list, .user-list { min-width: 190px; right: 0; } } @media (max-width: 420px) { .topbar-inner { padding-left: 10px; padding-right: 10px; } .topbar .brand-logo { height: 34px; max-width: 145px; } } /* -------------------------------------------------------------------------- Dashboard sidebar add-category button -------------------------------------------------------------------------- The previous version stamped a tight "+ Nova" string into a 54px-wide chip, which was cramping the text. The new HTML uses a real SVG plus icon plus the localized word ("Nova" / "New" / "Nueva" / ...), and the button itself is a soft pill in the brand's primary color. Sizing is driven by content, not a fixed min-width, so longer translations like "Nouvelle" still fit without wrapping. */ .icon-btn.icon-btn-new { width: auto; height: 26px; padding: 0 11px 0 9px; gap: 4px; border-radius: var(--r-pill); background: var(--primary-50); color: var(--primary-700); border: 1px solid var(--primary-100); font-size: 11px; font-weight: 600; line-height: 1; text-transform: none; letter-spacing: 0; white-space: nowrap; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .icon-btn.icon-btn-new:hover { background: var(--primary-100); border-color: var(--primary-200); color: var(--primary-700); } .icon-btn.icon-btn-new svg { width: 11px; height: 11px; flex: 0 0 11px; } /* ========================================================================== Delete UI (trash icon buttons) -------------------------------------------------------------------------- Used in three places, always with the same .btn-trash base: - Sidebar (.btn-trash-side) on hover of a category/subcategory row - Cards (default) on hover of a link card or list row - Tables (.btn-trash-table) always visible inside the categories structure table The look is intentionally muted (text-3 color), turning red only on hover so the user notices the destructive intent without being shouted at all the time. ========================================================================== */ .btn-trash { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: var(--text-3); border-radius: var(--r-sm); cursor: pointer; transition: background var(--t-fast), color var(--t-fast), opacity var(--t-fast); } .btn-trash:hover { color: var(--danger-fg); background: var(--danger-bg); } .btn-trash:focus-visible { outline: 2px solid var(--danger-fg); outline-offset: 1px; } .btn-trash svg { display: block; } /* --- Sidebar variant ---------------------------------------------------- */ .nav-item-row { position: relative; display: block; } /* The `` is a flex grid in style.css line ~606 with .label flex:1 and .count fixed. We need the link to behave the same inside the wrapper, so just force the wrapper to be transparent and let .nav-item lay itself out as before. */ .nav-item-row .nav-item { width: 100%; } /* The trash form is purely a positioning shell - it has no visual presence of its own, just hosts the absolute-positioned button. */ .nav-delete { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); margin: 0; line-height: 0; } .btn-trash-side { width: 22px; height: 22px; opacity: 0; pointer-events: none; background: var(--surface); box-shadow: 0 0 0 1px var(--border); } .btn-trash-side svg { width: 12px; height: 12px; } /* Reveals the trash on hover OR on keyboard focus inside the row, so the action is reachable without a mouse. */ .nav-item-row:hover .btn-trash-side, .nav-item-row:focus-within .btn-trash-side { opacity: 1; pointer-events: auto; } /* When the trash is visible, hide the .count number underneath so they don't overlap. The count comes back automatically when hover ends. */ .nav-item-row:hover .nav-item .count, .nav-item-row:focus-within .nav-item .count { visibility: hidden; } /* --- Card / list variant ------------------------------------------------ */ /* A wrapper around each link card or list row, to host the delete form as a sibling of the (forms cannot live inside ). The wrapper is completely transparent - all visuals belong to .link-card / .link-row. */ .link-tile { position: relative; display: block; } .link-tile-row { display: block; } .link-tile-delete { position: absolute; top: 8px; right: 8px; margin: 0; line-height: 0; z-index: 2; } .link-tile .btn-trash { background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 1px var(--border), var(--shadow-sm); opacity: 0; pointer-events: none; } [data-theme="dark"] .link-tile .btn-trash, :root:not([data-theme="light"]) .link-tile .btn-trash { background: rgba(17, 24, 39, 0.85); } .link-tile:hover .btn-trash, .link-tile:focus-within .btn-trash { opacity: 1; pointer-events: auto; } /* On list view the row is shorter, so push the trash a bit higher. */ .link-tile-row .link-tile-delete { top: 10px; right: 10px; } /* --- Table variant (categories management) ------------------------------ */ .cell-actions { text-align: right; white-space: nowrap; } .btn-trash-table { width: 30px; height: 30px; border: 1px solid var(--border); background: var(--surface); } .btn-trash-table:hover { border-color: color-mix(in srgb, var(--danger-fg) 30%, transparent); } /* The "delete category" button in a row that already shows a "delete subcategory" button is slightly emphasized (filled red on hover) so the difference between the two destructive scopes is visible. */ .btn-trash-strong:hover { color: #fff; background: var(--danger-fg); border-color: var(--danger-fg); } /* ========================================================================== Confirmation modal -------------------------------------------------------------------------- Used as a styled replacement for the browser's confirm() dialog whenever any form posts a destructive action (link/category/subcategory delete). The HTML lives in src/views/footer.php and starts hidden via the `hidden` attribute. JS in app.js toggles the attribute and sets [data-open="1"] so we can drive a fade/scale-in transition without inline styles. ========================================================================== */ .confirm-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, 0.55); /* Suaves animações de entrada e saída. O navegador respeita o attribute `hidden` antes desta regra rodar (display:none > flex). */ animation: lynkoModalFadeIn 140ms ease-out; } /* * Correção crítica: a regra acima (`display: flex`) sobrescrevia o atributo * HTML `hidden` (que vale como `display: none` por padrão). Sem este bloco, * o modal aparecia sempre que a página carregasse, mesmo sem o JS ter * pedido para abrir. Como `[hidden]` cria especificidade maior do que a * classe sozinha, esta regra vence e mantém o modal escondido até o JS * remover o atributo. */ .confirm-modal[hidden] { display: none; } @keyframes lynkoModalFadeIn { from { opacity: 0; } to { opacity: 1; } } .confirm-modal-card { background: var(--surface); color: var(--text); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 420px; padding: 24px 24px 20px; border: 1px solid var(--border); animation: lynkoModalPop 160ms ease-out; } @keyframes lynkoModalPop { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .confirm-modal-title { margin: 0 0 10px; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--text); } .confirm-modal-message { margin: 0 0 20px; font-size: 14px; line-height: 1.55; color: var(--text-2); } .confirm-modal-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .confirm-modal-actions .btn, .confirm-modal-actions .btn-ghost { min-width: 96px; } /* The destructive primary button shown inside the modal. We intentionally only define the danger variant (no .btn-success, etc.) because the modal is currently used only for delete confirmations. */ .btn-danger { background: var(--danger-fg); color: #fff; border: 1px solid var(--danger-fg); } .btn-danger:hover { background: color-mix(in srgb, var(--danger-fg) 88%, black); border-color: color-mix(in srgb, var(--danger-fg) 88%, black); color: #fff; } .btn-danger:focus-visible { outline: 2px solid var(--danger-fg); outline-offset: 2px; } /* ===================================================================== Notice modal — aviso amigável (informativo, não destrutivo) --------------------------------------------------------------------- Mesmo padrão visual do confirm-modal mas com: - um ícone circular de alerta no topo; - apenas um botão "OK" (não tem cancelar); - cor de borda/destaque do ícone alinhada com o tom de aviso (var(--danger-fg) atualmente, mas pode ser parametrizado). Disparado pelo JS em /assets/js/app.js (função `window.lynkoNotice({title, message})`) — markup em src/views/footer.php. ===================================================================== */ .notice-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, 0.55); animation: lynkoModalFadeIn 140ms ease-out; } .notice-modal[hidden] { display: none; } .notice-modal-card { background: var(--surface); color: var(--text); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 440px; padding: 28px 26px 22px; border: 1px solid var(--border); text-align: center; animation: lynkoModalPop 160ms ease-out; } .notice-modal-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; background: var(--danger-bg); color: var(--danger-fg); margin: 0 auto 14px; } .notice-modal-title { margin: 0 0 8px; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--text); } .notice-modal-message { margin: 0 0 22px; font-size: 14px; line-height: 1.55; color: var(--text-2); } .notice-modal-actions { display: flex; justify-content: center; gap: 8px; } .notice-modal-actions .btn { min-width: 120px; } /* ===================================================================== Quick-create modal — criação rápida de categoria/subcategoria --------------------------------------------------------------------- Aparece na página /links/new.php. Usa o mesmo overlay/animação dos outros modais para ficar consistente, mas com um corpo de "form" no centro: dois campos no máximo (parent + name), uma área de erro inline e dois botões (Cancelar / Salvar). A largura é levemente maior que a do confirm-modal por causa do select de "Categoria principal" — fica desconfortável em 420px. Markup: /links/new.php JS: /assets/js/app.js (seção "Quick-create category/subcategory") ===================================================================== */ .quick-create-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, 0.55); animation: lynkoModalFadeIn 140ms ease-out; } .quick-create-modal[hidden] { display: none; } .quick-create-card { background: var(--surface); color: var(--text); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 480px; padding: 24px 24px 20px; border: 1px solid var(--border); animation: lynkoModalPop 160ms ease-out; } .quick-create-title { margin: 0 0 6px; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--text); } .quick-create-help { margin: 0 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); } .quick-create-field { margin-bottom: 14px; } .quick-create-field[hidden] { display: none; } .quick-create-field label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; font-weight: 500; } .quick-create-field .input, .quick-create-field select { width: 100%; box-sizing: border-box; } .quick-create-error { background: var(--danger-bg); color: var(--danger-fg); border: 1px solid color-mix(in srgb, var(--danger-fg) 22%, transparent); border-radius: var(--r-md); padding: 9px 12px; margin: 4px 0 14px; font-size: 13px; line-height: 1.45; } .quick-create-error[hidden] { display: none; } .quick-create-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .quick-create-actions .btn, .quick-create-actions .btn-ghost { min-width: 96px; } /* ===================================================================== Admin area --------------------------------------------------------------------- Estilos exclusivos da área administrativa (/admin/*). Reaproveitam os mesmos design tokens (cores, raios, sombras) das demais páginas para manter consistência visual. ===================================================================== */ /* Sub-navegação em pílulas no topo de cada página /admin */ .admin-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 14px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); width: fit-content; } .admin-tab { padding: 6px 14px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; color: var(--text-2); text-decoration: none; transition: background var(--t-fast), color var(--t-fast); } .admin-tab:hover { color: var(--text); background: var(--surface); } .admin-tab-active, .admin-tab-active:hover { background: var(--primary-500); color: #fff; } /* Grade de KPIs do painel */ .admin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 6px; } .admin-kpi .label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); font-weight: 500; } .admin-kpi .value { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; color: var(--text); } .admin-kpi .hint { margin-top: 2px; font-size: 12.5px; color: var(--text-2); } /* Cartão de filtros da listagem de usuários */ .admin-filter { margin-top: 10px; } .admin-filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .admin-filter-row .input { flex: 1 1 200px; min-width: 160px; } .admin-filter-row select.input { flex: 0 0 auto; min-width: 160px; } /* Paginação */ .admin-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; } .admin-pager-info { font-size: 12.5px; color: var(--text-3); } /* Lista descritiva (Resumo do usuário) */ .admin-dl { display: grid; grid-template-columns: 200px 1fr; gap: 6px 16px; margin: 8px 0 0; font-size: 13.5px; } .admin-dl dt { color: var(--text-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; align-self: center; } .admin-dl dd { margin: 0; color: var(--text); } /* Badges de plano usados em tabelas de usuários */ .badge-plan { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 500; background: var(--surface-2); color: var(--text-2); } .badge-plan-pro { background: var(--primary-100); color: var(--primary-700); } .badge-plan-free { background: var(--surface-2); color: var(--text-2); } /* Botão pequeno reutilizável dentro das tabelas */ .btn-sm { padding: 5px 10px; font-size: 12px; border-radius: var(--r-md); } /* Responsivo: linha de filtros vira coluna em mobile */ @media (max-width: 640px) { .admin-dl { grid-template-columns: 1fr; } .admin-dl dt { margin-top: 4px; } } /* Layout de 2 colunas usado na edição de usuário; vira 1 coluna em mobile. */ .split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 700px) { .split-2 { grid-template-columns: 1fr; } } /* Badge específico para Pro de cortesia (concedido pelo admin). */ .badge-courtesy { background: color-mix(in srgb, var(--primary-500) 12%, transparent); color: var(--primary-700); border: 1px dashed color-mix(in srgb, var(--primary-500) 40%, transparent); } /* ===================================================================== Renomeação inline em tabelas (/categories/index.php) ===================================================================== */ .row-edit, .row-edit-sub { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .row-edit-input { flex: 1 1 200px; min-width: 160px; padding: 4px 8px; font-size: 13px; } /* ===================================================================== Form de novo link: linha de categoria/subcategoria ===================================================================== */ #cat-rows .cat-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; } #cat-rows .cat-row select { width: 100%; } @media (max-width: 540px) { #cat-rows .cat-row { grid-template-columns: 1fr auto; grid-auto-flow: row; } #cat-rows .cat-row select { grid-column: 1 / -1; } #cat-rows .cat-row [data-action="cat-row-remove"] { grid-column: 2; } } /* ===================================================================== Dashboard · view "Title" --------------------------------------------------------------------- Lista numerada compacta com apenas título + host. Substitui o grid de cards quando o usuário escolhe a 3ª opção do segmented control. ===================================================================== */ .links-titles { list-style: decimal inside; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .links-titles li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 14px; } .links-titles li:last-child { border-bottom: none; } .links-titles li:hover { background: var(--surface-2); } .links-titles li a { color: var(--text); text-decoration: none; font-weight: 500; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .links-titles li a:hover { color: var(--primary-700); } .links-titles-host { color: var(--text-3); font-size: 12px; flex: 0 0 auto; } /* Badges adicionais para categorias secundárias de um link. */ .badge-extra { display: inline-block; background: var(--surface-2); color: var(--text-2); border-radius: var(--r-pill); padding: 1px 8px; font-size: 10.5px; font-weight: 500; margin-left: 4px; vertical-align: middle; } .card-extra-cats { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; } .card-extra-cats .badge-extra { margin-left: 0; } /* Menu do usuário: item destrutivo (Excluir conta). */ .user-list a.user-list-danger { color: var(--danger-fg); border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; } .user-list a.user-list-danger:hover { background: var(--danger-bg); } /* ===================================================================== Pricing — seção de planos na home ===================================================================== */ .pricing { margin: 56px auto 24px; max-width: 980px; padding: 0 16px; } .pricing-head { text-align: center; margin-bottom: 28px; } .pricing-head h2 { font-size: 28px; margin: 0 0 6px; letter-spacing: -0.01em; } .pricing-head p { color: var(--text-2); margin: 0; font-size: 15px; } .pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .pricing-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg, 14px); padding: 28px 24px 22px; display: flex; flex-direction: column; gap: 14px; position: relative; } .pricing-card-featured { border-color: var(--primary); box-shadow: 0 8px 24px -16px rgba(80, 100, 220, 0.4); } .pricing-card-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); font-weight: 600; } .pricing-card-featured .pricing-card-tag { color: var(--primary-700, var(--primary)); } .pricing-card-name { font-size: 22px; margin: 0; font-weight: 600; } .pricing-card-price { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 14px 0; display: flex; flex-direction: column; gap: 2px; } .pricing-card-price strong { font-size: 18px; font-weight: 600; } .pricing-card-price span { font-size: 12.5px; color: var(--text-3); } .pricing-card-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--text-2); flex: 1 1 auto; } .pricing-card-feats li::before { content: "✓"; color: var(--primary); font-weight: 700; margin-right: 8px; } @media (max-width: 720px) { .pricing-grid { grid-template-columns: 1fr; } } /* ===================================================================== Correção 2026-05-09, menu lateral expansível completo --------------------------------------------------------------------- Quando uma categoria tem muitas subcategorias, a versão anterior usava max-height: 600px no bloco aberto. Isso cortava listas grandes, como categorias com dezenas de subcategorias. Agora: - a sidebar tem altura máxima baseada na viewport; - a área de categorias rola internamente; - uma categoria aberta mostra todas as subcategorias; - a rolagem fica no menu lateral, não dentro da subcategoria. ===================================================================== */ .sidebar { max-height: calc(100vh - var(--header-h) - 32px); min-height: 0; } .sidebar-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .sidebar-scroll::-webkit-scrollbar { width: 8px; } .sidebar-scroll::-webkit-scrollbar-track { background: transparent; } .sidebar-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; } .nav-list-scrollable { overflow: visible; max-height: none; } .cat-node[data-open="1"] .nav-sub { display: flex; max-height: none; overflow: visible; } .plan-box { flex: 0 0 auto; } /* ===================================================================== Upload de capa visual — versão 2 --------------------------------------------------------------------- Substitui completamente a chrome nativa "Escolher arquivo" por dois componentes alinhados ao Lynko: 1. .cover-picker — usado nos formulários de criação (Nova categoria / Nova subcategoria). Card horizontal com thumb 72×72 à esquerda e texto de apoio à direita; quando o usuário escolhe um arquivo o thumb mostra a imagem em preview. 2. .cover-cell — usado nas linhas da tabela "Estrutura atual". Thumb 56×56 que ao mesmo tempo MOSTRA a capa atual e SERVE de botão de upload (auto-submit on change). Hover revela um overlay com ícone "↑ Trocar/Adicionar"; um pequeno × no canto superior direito remove a capa. Mantém uma camada de back-compat para .file-upload (forms antigos que ainda existam no app) usando o mesmo visual do .cover-picker. ===================================================================== */ /* --------------------------------------------------------------------- 1. Cover picker (formulário de criação) ------------------------------------------------------------------- */ .cover-picker { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 14px 10px 10px; border: 1px dashed var(--border-2); border-radius: var(--r-md); background: var(--surface); cursor: pointer; position: relative; transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base); } .cover-picker:hover { border-color: color-mix(in srgb, var(--primary-500) 55%, var(--border-2)); background: color-mix(in srgb, var(--primary-50) 25%, var(--surface)); } .cover-picker:focus-within { border-color: var(--primary-500); border-style: solid; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500) 18%, transparent); outline: none; } .cover-picker input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* Quadrado de preview à esquerda. */ .cover-picker-thumb { flex: 0 0 auto; width: 72px; height: 72px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; display: grid; place-items: center; transition: border-color var(--t-base), transform var(--t-base); } .cover-picker:hover .cover-picker-thumb { border-color: color-mix(in srgb, var(--primary-500) 35%, var(--border)); transform: scale(1.02); } .cover-picker-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .cover-picker-empty { color: var(--text-3); display: grid; place-items: center; width: 100%; height: 100%; } .cover-picker-empty svg { opacity: 0.85; } /* Bloco de texto à direita. */ .cover-picker-meta { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; line-height: 1.3; } .cover-picker-title { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cover-picker-hint { font-size: 11.5px; color: var(--text-3); } .cover-picker.has-file .cover-picker-title { color: var(--primary-700); } .cover-picker.has-file .cover-picker-hint::before { content: "✓ "; color: var(--primary-500); font-weight: 700; } /* Botão × para limpar a seleção (aparece após escolher um arquivo). */ .cover-picker-clear { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); display: grid; place-items: center; cursor: pointer; padding: 0; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); } .cover-picker-clear:hover { background: #ef4444; border-color: #ef4444; color: #fff; transform: scale(1.05); } /* Texto auxiliar inline no label "(opcional)". */ .form-help-inline { font-size: 11px; font-weight: 400; color: var(--text-3); margin-left: 4px; } /* --------------------------------------------------------------------- 2. Cover cell (thumb interativo da tabela "Estrutura atual") ------------------------------------------------------------------- */ .cover-cell { position: relative; width: 56px; height: 56px; } .cover-cell-form { margin: 0; padding: 0; line-height: 0; display: block; } .cover-cell-thumb { display: block; width: 56px; height: 56px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); overflow: hidden; cursor: pointer; position: relative; transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); } .cover-cell-thumb:hover { border-color: color-mix(in srgb, var(--primary-500) 50%, var(--border)); transform: translateY(-1px); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--primary-500) 40%, transparent); } .cover-cell-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Placeholder quando a entidade não tem capa. */ .cover-cell-empty { width: 100%; height: 100%; display: grid; place-items: center; color: var(--text-3); background: linear-gradient(135deg, color-mix(in srgb, var(--primary-50) 60%, var(--surface-2)) 0%, var(--surface-2) 100%); } .cover-cell-empty svg { opacity: 0.7; } /* Overlay "↑ Trocar/Adicionar" — fade-in no hover. */ .cover-cell-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: color-mix(in srgb, #000 62%, transparent); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity var(--t-fast); } .cover-cell-thumb:hover .cover-cell-overlay, .cover-cell-thumb:focus-visible .cover-cell-overlay { opacity: 1; } .cover-cell-overlay svg { opacity: 0.95; } /* Estado "enviando" — escurece o thumb durante o submit automático. */ .cover-cell-thumb.is-uploading { pointer-events: none; } .cover-cell-thumb.is-uploading::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--surface) 65%, transparent); } .cover-cell-thumb.is-uploading::before { content: ""; position: absolute; width: 18px; height: 18px; top: 50%; left: 50%; margin: -9px 0 0 -9px; border: 2px solid color-mix(in srgb, var(--primary-500) 30%, transparent); border-top-color: var(--primary-500); border-radius: 50%; animation: cover-cell-spin 0.7s linear infinite; z-index: 2; } @keyframes cover-cell-spin { to { transform: rotate(360deg); } } /* Botão × para remover a capa atual (canto superior direito). */ .cover-cell-clear { position: absolute; top: -6px; right: -6px; margin: 0; padding: 0; line-height: 0; z-index: 3; opacity: 0; transform: translateY(-2px); transition: opacity var(--t-fast), transform var(--t-fast); } .cover-cell:hover .cover-cell-clear, .cover-cell:focus-within .cover-cell-clear { opacity: 1; transform: translateY(0); } .cover-cell-clear button { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.18); transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .cover-cell-clear button:hover { background: #ef4444; border-color: #ef4444; color: #fff; } /* --------------------------------------------------------------------- 3. Tabela com capas: respiração das linhas ------------------------------------------------------------------- */ .table-covers td { vertical-align: middle; padding-top: 12px; padding-bottom: 12px; } /* --------------------------------------------------------------------- 4. Back-compat — antigas classes .file-upload / .cover-form Mantidas com visual aproximado para qualquer página que ainda as utilize. As páginas de categorias migraram para .cover-picker / .cover-cell. ------------------------------------------------------------------- */ .file-upload { display: flex; align-items: center; width: 100%; min-height: 40px; border: 1px solid var(--border-2); border-radius: var(--r-md); background: var(--surface); overflow: hidden; cursor: pointer; transition: border-color var(--t-base), background var(--t-base); } .file-upload:hover { border-color: color-mix(in srgb, var(--primary-500) 45%, var(--border-2)); background: color-mix(in srgb, var(--primary-50) 24%, var(--surface)); } .file-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .file-upload-button { flex: 0 0 auto; min-height: 40px; padding: 0 14px; background: var(--primary-50); color: var(--primary-700); border-right: 1px solid var(--border); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; } .file-upload-name { flex: 1 1 auto; padding: 0 12px; color: var(--text-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .file-upload.has-file .file-upload-name { color: var(--text); font-weight: 500; } /* --------------------------------------------------------------------- 5. Responsivo ------------------------------------------------------------------- */ @media (max-width: 760px) { .cover-picker { flex-wrap: wrap; } .cover-picker-meta { flex: 1 1 100%; } .cover-picker-clear { position: absolute; top: 8px; right: 8px; } .table-covers th:nth-child(1), .table-covers td:nth-child(1) { width: 70px; } .cover-cell, .cover-cell-thumb { width: 48px; height: 48px; } } /* ===================================================================== Campos extras do link + verificador de status (favicon, favorito, nota, status, botão editar) ===================================================================== */ .link-favicon { width: 16px; height: 16px; border-radius: 3px; object-fit: contain; vertical-align: -3px; margin-right: 6px; flex-shrink: 0; } .link-status-badge { display: inline-flex; align-items: center; font-size: 11px; line-height: 1; padding: 3px 8px; border-radius: 999px; font-weight: 500; white-space: nowrap; } .thumb .link-status-badge { position: absolute; top: 8px; left: 8px; z-index: 1; } .link-status-badge.is-broken { background: #fceaea; color: #a32d2d; } .link-status-badge.is-unknown { background: #faeeda; color: #854f0b; } .link-status-badge.is-archived { background: #eceae3; color: #5f5e5a; } .link-status-badge.is-online { background: #e1f5ee; color: #0f6e56; } .link-status-badge.is-new { background: #eceae3; color: #5f5e5a; } [data-theme="dark"] .link-status-badge.is-broken, :root:not([data-theme="light"]) .link-status-badge.is-broken { background: rgba(163,45,45,.22); color: #f0a3a3; } [data-theme="dark"] .link-status-badge.is-unknown, :root:not([data-theme="light"]) .link-status-badge.is-unknown { background: rgba(133,79,11,.24); color: #f0c987; } [data-theme="dark"] .link-status-badge.is-archived, :root:not([data-theme="light"]) .link-status-badge.is-archived { background: rgba(120,120,110,.24); color: #c9c8c1; } [data-theme="dark"] .link-status-badge.is-online, :root:not([data-theme="light"]) .link-status-badge.is-online { background: rgba(15,110,86,.24); color: #7fd9bf; } .link-fav-star { color: #d4a017; vertical-align: -2px; margin-left: 4px; } .thumb .link-fav-star { position: absolute; top: 7px; right: 8px; background: rgba(255,255,255,.92); border-radius: 999px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; z-index: 1; } [data-theme="dark"] .thumb .link-fav-star, :root:not([data-theme="light"]) .thumb .link-fav-star { background: rgba(17,24,39,.8); } .link-note-dot { color: #888780; vertical-align: -2px; margin-left: 6px; } .link-tile-edit { position: absolute; top: 8px; right: 44px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--text, #2c2c2a); background: rgba(255,255,255,.92); box-shadow: 0 0 0 1px var(--border), var(--shadow-sm); opacity: 0; pointer-events: none; z-index: 2; text-decoration: none; } [data-theme="dark"] .link-tile-edit, :root:not([data-theme="light"]) .link-tile-edit { background: rgba(17,24,39,.85); } .link-tile:hover .link-tile-edit, .link-tile:focus-within .link-tile-edit { opacity: 1; pointer-events: auto; } .link-tile-edit:hover { color: var(--primary-600); } .link-tile-row .link-tile-edit { top: 10px; right: 46px; } .link-status-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; } .link-status-pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; } .link-status-online .link-status-pill { background: #e1f5ee; color: #0f6e56; } .link-status-broken .link-status-pill { background: #fceaea; color: #a32d2d; } .link-status-unknown .link-status-pill { background: #faeeda; color: #854f0b; } .link-status-archived .link-status-pill { background: #eceae3; color: #5f5e5a; } .link-status-new .link-status-pill { background: #eceae3; color: #5f5e5a; } .link-fav-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 4px; font-size: 14px; cursor: pointer; } .link-fav-toggle input { width: 16px; height: 16px; } /* Nota pessoal exibida no card (texto). */ .card-note { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.4; color: #6a5b2e; background: #faf6e9; border-radius: 8px; padding: 6px 8px; margin: 2px 0 8px; } .card-note svg { flex-shrink: 0; margin-top: 1px; color: #b08900; } .links-list .card-note, .link-tile-row .card-note { margin: 4px 0; } [data-theme="dark"] .card-note, :root:not([data-theme="light"]) .card-note { background: rgba(176,137,0,.14); color: #e8d291; } [data-theme="dark"] .card-note svg, :root:not([data-theme="light"]) .card-note svg { color: #e8c45f; } /* Estrela de favorito ao lado do título. */ .card-title .link-fav-star, h3 .link-fav-star { color: #d4a017; margin-right: 5px; vertical-align: -2px; display: inline-flex; } /* Botão de filtro "Favoritos" ao lado da busca. */ .fav-filter { flex-shrink: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--text-3); transition: border-color var(--t-base), background var(--t-base), color var(--t-base); } .fav-filter:hover { color: #d4a017; border-color: var(--border-strong, var(--border)); } .fav-filter.active { color: #d4a017; border-color: #d4a017; background: color-mix(in srgb, #d4a017 12%, transparent); } /* ===== Combobox de categorias (links/new.php) ===== */ .cb { position: relative; } .cb-control { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--border); border-radius: 10px; padding: 6px 8px; background: var(--surface); } .cb-control:focus-within { border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(0,0,0,.05); } .cb-chips { display: flex; flex-wrap: wrap; gap: 6px; } .cb-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,.05); color: var(--text-1); font-size: 13px; padding: 3px 6px 3px 10px; border-radius: 8px; } .cb-chip-x { border: 0; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; color: var(--text-3); padding: 0 2px; } .cb-chip-x:hover { color: var(--text-1); } .cb-input { flex: 1 1 140px; min-width: 120px; border: 0; outline: 0; background: transparent; font: inherit; padding: 6px 4px; color: var(--text-1); } .cb-panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; max-height: 280px; overflow: auto; box-shadow: 0 8px 24px rgba(0,0,0,.10); } .cb-panel[hidden] { display: none; } .cb-section { font-size: 11.5px; color: var(--text-3); padding: 8px 12px 4px; } .cb-option { padding: 9px 12px; font-size: 14px; cursor: pointer; color: var(--text-1); } .cb-option:hover, .cb-option.is-active { background: rgba(0,0,0,.05); } .cb-parent { color: var(--text-3); } .cb-create { padding: 9px 12px; font-size: 14px; cursor: pointer; color: var(--primary-500); border-top: 1px solid var(--border); } .cb-create:hover, .cb-create.is-active { background: rgba(0,0,0,.05); } .cb-empty { padding: 10px 12px; font-size: 13px; color: var(--text-3); } .cb-error { color: #c0392b; font-size: 13px; margin-top: 6px; } @media (max-width: 560px) { .cb-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 60vh; border-radius: 14px 14px 0 0; box-shadow: 0 -8px 24px rgba(0,0,0,.16); } }