/* ============================================================ CONSOLE — feuille de style unique Thème clair. Sidebar blanche, catégorie active en pilule bleu pâle, rail vertical reliant les sous-items. ============================================================ */ :root { /* ---- LE BLEU. Change cette ligne, tout suit. ---- */ --blue: #2F62E8; --blue-dark: #2450C8; /* survol du bouton */ --blue-pale: #E8F0FE; /* pilule de la catégorie ouverte */ --blue-rail: #C5D9F8; /* trait vertical des sous-items */ /* ---- Neutres ---- */ --ink: #1C2033; /* texte fort */ --ink-soft: #3F4657; --muted: #7A8194; /* texte secondaire, sous-items */ --line: #E8EAEF; --page: #F7F8FA; /* fond de la zone de contenu */ --white: #FFFFFF; /* ---- Surfaces & etats (remontees pour le theme sombre) ---- */ --surface-hover: #F3F5F9; --surface-soft: #FDECEE; --border-soft: #DDE1E8; --border-hover: #CFD4DE; --shadow-color: 28, 32, 51; --scrim: rgba(20, 24, 38, .35); --notice-err-bg: #FDECEE; --notice-err-line: #F5C6CD; --notice-err-ink: #9B2233; --notice-ok-bg: #E7F6EF; --notice-ok-line: #B9E3D0; --notice-ok-ink: #146343; --danger-soft-line: #F2C9CF; /* ---- Sémantique ---- */ --green: #22A06B; --red: #D93A4E; --sidebar-w: 264px; --topbar-h: 60px; --radius: 10px; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } /* ============================================================ THEME SOMBRE Memes variables, valeurs foncees. Active par data-theme="dark" sur . Rien d'autre a changer : tout le CSS lit ces variables. ============================================================ */ :root[data-theme="dark"] { /* Le bleu reste la signature, a peine eclairci pour tenir sur fond sombre. */ --blue: #5B8DEF; --blue-dark: #4A7BDC; --blue-pale: #1B2740; /* pilule de categorie ouverte */ --blue-rail: #2E4468; /* rail des sous-items */ /* Neutres inverses. */ --ink: #E6E8EE; /* texte fort */ --ink-soft: #B7BCC9; --muted: #8A91A3; /* texte secondaire */ --line: #2A2E3A; /* filets */ --page: #14161C; /* fond de la zone de contenu */ --white: #1B1E26; /* ex-blanc : surfaces (cartes, barres, sidebar) */ --green: #3FBF83; --red: #F0576B; /* Surfaces & etats. */ --surface-hover: #23273180; --surface-soft: #3A1E24; --border-soft: #333844; --border-hover: #454B5A; --shadow-color: 0, 0, 0; --scrim: rgba(0, 0, 0, .55); --notice-err-bg: #3A1E24; --notice-err-line: #5E2C34; --notice-err-ink: #F3A9B2; --notice-ok-bg: #163A2C; --notice-ok-line: #245743; --notice-ok-ink: #7FD9B4; --danger-soft-line: #5E2C34; } /* Transition douce quand on bascule, sans toucher aux survols rapides. */ body, .topbar, .sidebar, .card, .panel, .usermenu__panel { transition: background-color .2s ease, border-color .2s ease, color .2s ease; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; } a { color: var(--blue); } .skip { position: absolute; left: -9999px; } .skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 6px; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* ============================================================ BARRE DU HAUT ============================================================ */ .topbar { position: sticky; top: 0; z-index: 30; height: var(--topbar-h); display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem; background: var(--white); border-bottom: 1px solid var(--line); } .brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ink); } .brand__name { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; } .brand__tag { background: var(--blue); color: #fff; font-size: .72rem; font-weight: 600; padding: .12rem .5rem; border-radius: 4px; letter-spacing: .01em; } .topbar__right { margin-left: auto; display: flex; align-items: center; gap: .9rem; } /* ---- Tete d'avatar HabboCity ---- Les initiales sont EN DESSOUS de l'image. Si l'image charge, elle les recouvre ; si elle echoue, le onerror la retire et les initiales reapparaissent. Aucune icone cassee, jamais. */ .avatar { /* ---- Recadrage de la tete ---- L'API renvoie la toile du corps entier (~255x439) avec seulement la tete dessinee, petite et placee en haut. Il faut donc zoomer ET decaler pour la centrer dans le rond. Ces trois valeurs sont les seules a toucher pour ajuster. */ --head-zoom: 119%; /* plus grand = tete plus grosse */ --head-x: -14%; /* plus negatif = decale a gauche */ --head-y: -8%; /* plus negatif = remonte */ /* Une tete Habbo est bien plus HAUTE que large (180 x 130 px dans la toile). C'est donc la hauteur qui contraint le cadrage, pas la largeur. Ici : tete haute de 32 px dans un rond de 38 px. Les trois valeurs vont ENSEMBLE : changer le zoom seul decentre la tete. Deux autres reglages tout prets : plus petit -> 112% / -10% / -3% plus grand -> 127% / -18% / -10% */ position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--blue-pale); overflow: hidden; } .avatar__fallback { font-size: .78rem; font-weight: 700; color: var(--blue); letter-spacing: .02em; } .avatar img { position: absolute; width: var(--head-zoom); left: var(--head-x); top: var(--head-y); /* Le ratio de la toile renvoyee par l'API (255 x 439). On le DECLARE, au lieu de le deduire de l'image. Pourquoi : avec `height: auto`, la hauteur se calcule a partir des dimensions reelles de l'image. Tant qu'elle n'est pas chargee, elle vaut donc 0. Combine a `loading="lazy"`, ca cree un blocage circulaire : le navigateur ne charge que ce qui est visible, mais une image de hauteur 0 n'est jamais visible. Elle ne se chargeait donc jamais — sauf si elle etait deja en cache, ce qui masquait le bug. */ aspect-ratio: 255 / 439; height: auto; /* Pixel art : on ne lisse pas, on duplique les pixels. */ image-rendering: pixelated; } /* Version compacte, pour le tableau des comptes */ .avatar--sm { width: 30px; height: 30px; } .avatar--sm .avatar__fallback { font-size: .68rem; } .whoami { display: flex; flex-direction: column; line-height: 1.25; text-align: right; text-decoration: none; color: inherit; } .whoami:hover .whoami__name { color: var(--blue); } .whoami__name { font-size: .85rem; font-weight: 600; } .whoami__rank { font-size: .72rem; color: var(--muted); } /* ============================================================ MENU UTILISATEUR (barre du haut, a droite) Meme grammaire que la sidebar : fond blanc, survol gris pale, pilule bleu pale pour l'element actif. ============================================================ */ .usermenu { position: relative; } .usermenu__trigger { display: flex; align-items: center; gap: .65rem; padding: .3rem .5rem .3rem .3rem; background: none; border: 1px solid transparent; border-radius: 999px; font-family: inherit; cursor: pointer; color: inherit; } .usermenu__trigger:hover { background: var(--surface-hover); } .usermenu.is-open > .usermenu__trigger { background: var(--blue-pale); border-color: var(--blue-rail); } .usermenu.is-open > .usermenu__trigger .chevron { transform: rotate(180deg); } .usermenu__trigger .chevron { width: 16px; height: 16px; color: var(--muted); transition: transform .18s ease; } /* ---- Le panneau ---- */ .usermenu__panel { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 40; min-width: 250px; padding: .4rem; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(var(--shadow-color), .12); /* Ferme : invisible, hors du flux, et surtout inatteignable au clavier. */ opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease, visibility .14s; } .usermenu.is-open > .usermenu__panel { opacity: 1; visibility: visible; transform: translateY(0); } .usermenu__head { display: flex; flex-direction: column; padding: .55rem .7rem .65rem; border-bottom: 1px solid var(--line); margin-bottom: .35rem; line-height: 1.35; } .usermenu__head strong { font-size: .92rem; } .usermenu__item { width: 100%; display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border: none; border-radius: 8px; background: none; font-family: inherit; font-size: .9rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; text-align: left; cursor: pointer; } .usermenu__item:hover { background: var(--surface-hover); color: var(--ink); } .usermenu__item .ico { width: 19px; height: 19px; flex-shrink: 0; color: var(--muted); } .usermenu__item:hover .ico { color: var(--ink); } .usermenu__item--danger { color: var(--red); } .usermenu__item--danger .ico { color: var(--red); } .usermenu__item--danger:hover { background: var(--surface-soft); color: var(--red); } .usermenu__item--danger:hover .ico { color: var(--red); } .usermenu__sep { height: 1px; background: var(--line); margin: .35rem .3rem; } @media (max-width: 860px) { /* Le nom prend trop de place : on ne garde que la tete et le chevron. */ .usermenu__trigger .whoami { display: none; } .usermenu__panel { min-width: 220px; } } /* ---- Bouton bleu ---- */ .ui-btn { font-family: inherit; font-size: .875rem; font-weight: 600; padding: .5rem 1.1rem; border-radius: 8px; border: 1px solid transparent; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.4; white-space: nowrap; } .ui-btn--blue { background: var(--blue); color: #fff; } .ui-btn--blue:hover { background: var(--blue-dark); } .ui-btn--plain { background: var(--white); color: var(--ink-soft); border-color: var(--line); } .ui-btn--plain:hover { border-color: var(--border-hover); } .ui-btn--danger { background: var(--white); color: var(--red); border-color: var(--danger-soft-line); } .ui-btn--danger:hover { background: var(--red); color: #fff; border-color: var(--red); } .ui-btn--block { display: block; width: 100%; text-align: center; } /* ---- Burger (mobile) ---- */ .burger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 36px; height: 36px; padding: 0 7px; background: none; border: none; cursor: pointer; } .burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; } /* ============================================================ MISE EN PAGE ============================================================ */ .layout { display: flex; align-items: flex-start; min-height: calc(100vh - var(--topbar-h)); } .sidebar { position: sticky; top: var(--topbar-h); flex: 0 0 var(--sidebar-w); width: var(--sidebar-w); height: calc(100vh - var(--topbar-h)); overflow-y: auto; background: var(--white); border-right: 1px solid var(--line); padding: 1rem .75rem; } .content { flex: 1; min-width: 0; padding: 2rem 2.25rem 4rem; } /* ============================================================ SIDEBAR — items ============================================================ */ .nav-item { width: 100%; display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: var(--radius); border: none; background: none; font-family: inherit; font-size: .95rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; cursor: pointer; text-align: left; } .nav-item:hover { background: var(--surface-hover); } .nav-item .ico { width: 21px; height: 21px; flex-shrink: 0; color: var(--muted); } .nav-item > span { flex: 1; } /* Chevron : pointe vers le bas, se retourne à l'ouverture. */ .chevron { width: 17px; height: 17px; flex-shrink: 0; color: var(--muted); transition: transform .18s ease; } .nav-group.is-open .chevron { transform: rotate(180deg); } /* Catégorie ouverte : pilule bleu pâle, libellé en gras. */ .nav-group.is-open > .nav-item--toggle { background: var(--blue-pale); color: var(--ink); font-weight: 700; } .nav-group.is-open > .nav-item--toggle .ico, .nav-group.is-open > .nav-item--toggle .chevron { color: var(--ink); } /* Page courante */ .nav-item.is-current { background: var(--blue-pale); color: var(--ink); font-weight: 700; } .nav-item.is-current .ico { color: var(--ink); } /* ---- Sous-items ---- */ .nav-sub { display: none; position: relative; margin: .25rem 0 .25rem 1.4rem; padding-left: 1.15rem; } .nav-group.is-open .nav-sub { display: block; } /* Le rail vertical qui relie les sous-items. */ .nav-sub::before { content: ""; position: absolute; left: 0; top: .35rem; bottom: .35rem; width: 2px; background: var(--blue-rail); border-radius: 2px; } .nav-sub__item { display: block; padding: .45rem .6rem; border-radius: 7px; font-size: .92rem; color: var(--muted); text-decoration: none; } .nav-sub__item:hover { color: var(--ink); background: var(--surface-hover); } .nav-sub__item.is-current { color: var(--blue); font-weight: 600; } .nav-sep { height: 1px; background: var(--line); margin: .75rem .5rem; } .nav-empty { padding: 1rem .75rem; font-size: .85rem; color: var(--muted); } /* ============================================================ CONTENU ============================================================ */ .page-head { margin-bottom: 1.75rem; } h1 { font-size: 1.65rem; font-weight: 700; letter-spacing: -0.025em; margin-bottom: .3rem; } h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin: 2rem 0 .9rem; } .lede { color: var(--muted); max-width: 62ch; } /* ---- Cartes d'outils (page d'accueil) ---- */ .ui-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .9rem; } .ui-card { display: block; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 1.15rem 1.25rem; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; } .ui-card:hover { border-color: var(--blue-rail); box-shadow: 0 2px 10px rgba(var(--shadow-color),.06); } .ui-card__label { font-weight: 600; margin-bottom: .25rem; } .ui-card__desc { font-size: .87rem; color: var(--muted); } /* ---- Panneau / formulaire ---- */ .panel { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem; } .panel--narrow { max-width: 380px; margin: 3.5rem auto; } .field { margin-bottom: 1rem; } .field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; color: var(--ink-soft); } .field input[type=text], .field input[type=password], .field select { width: 100%; padding: .55rem .7rem; font-family: inherit; font-size: .95rem; color: var(--ink); background: var(--white); border: 1px solid var(--border-soft); border-radius: 8px; } .field input:focus, .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,98,232,.12); outline: none; } .hint { font-size: .78rem; color: var(--muted); margin-top: .3rem; } /* ---- Messages ---- */ .notice { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1.15rem; font-size: .88rem; border: 1px solid; } .notice--error { background: var(--surface-soft); border-color: #F5C6CD; color: #9B2233; } .notice--success { background: var(--notice-ok-bg); border-color: var(--notice-ok-line); color: var(--notice-ok-ink); } /* ---- Tableaux ---- */ .table-wrap { overflow-x: auto; background: var(--white); border: 1px solid var(--line); border-radius: 12px; } table { width: 100%; border-collapse: collapse; font-size: .9rem; } th { text-align: left; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: .75rem .9rem; border-bottom: 1px solid var(--line); white-space: nowrap; } td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: middle; } tr:last-child td { border-bottom: 0; } .matrix td, .matrix th { text-align: center; } .matrix td:first-child, .matrix th:first-child { text-align: left; } .matrix input[type=checkbox] { width: 19px; height: 19px; accent-color: var(--blue); cursor: pointer; } .muted { color: var(--muted); } .mono { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: .84rem; } .pill { display: inline-block; font-size: .72rem; font-weight: 600; padding: .12rem .5rem; border-radius: 20px; } .pill--public { background: #E7F6EF; color: var(--green); } .pill--rank { background: var(--blue-pale); color: var(--blue); } .ui-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.25rem; } /* ============================================================ MOBILE ============================================================ */ .scrim { position: fixed; inset: var(--topbar-h) 0 0 0; background: var(--scrim); z-index: 19; } @media (max-width: 860px) { .burger { display: flex; } .sidebar { position: fixed; top: var(--topbar-h); left: 0; z-index: 20; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 8px 30px rgba(var(--shadow-color),.12); } body.menu-open .sidebar { transform: translateX(0); } .content { padding: 1.5rem 1.15rem 3rem; } .whoami { display: none; } .topbar { padding: 0 .9rem; gap: .6rem; } } @media (min-width: 861px) { .scrim { display: none; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* ============================================================ ADMIN — RANGER LES OUTILS (glisser-déposer) ============================================================ */ .board { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .board__col { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: .75rem; display: flex; flex-direction: column; transition: border-color .15s, background .15s; } /* La colonne survolée pendant un glisser : on montre où ça va tomber. */ .board__col.is-over { border-color: var(--blue); background: rgba(47, 98, 232, .04); } .board__head { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600; padding: 0 .25rem .6rem; border-bottom: 1px solid var(--border); margin-bottom: .6rem; } .board__head .ico { width: 16px; height: 16px; color: var(--text-muted); } .board__drop { display: flex; flex-direction: column; gap: .4rem; min-height: 48px; /* sinon on ne peut rien déposer dans une colonne vide */ flex: 1; } .board__item { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; cursor: grab; user-select: none; transition: box-shadow .15s, opacity .15s, border-color .15s; } .board__item:hover { border-color: var(--border-strong); } .board__item:active { cursor: grabbing; } /* L'élément en cours de déplacement : on l'estompe pour suivre le mouvement. */ .board__item.is-dragging { opacity: .4; border-color: var(--blue); } .board__grip { color: var(--text-dim); font-size: .9rem; line-height: 1; letter-spacing: -1px; } .board__info { display: flex; flex-direction: column; min-width: 0; } .board__label { font-size: .85rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .board__code { font-size: .72rem; } .board__empty { font-size: .75rem; color: var(--text-dim); text-align: center; padding: .5rem; margin: 0; } /* Le message ne s'affiche que si la colonne est vide. */ .board__drop:not(:empty) + .board__empty { display: none; } /* ---- Choix d'icône, en visuel ---- */ .iconpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: .4rem; } .iconpick__opt { cursor: pointer; } .iconpick__opt input { position: absolute; opacity: 0; pointer-events: none; } .iconpick__opt span { display: flex; align-items: center; justify-content: center; height: 44px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); transition: border-color .15s, background .15s, color .15s; } .iconpick__opt:hover span { border-color: var(--border-strong); } .iconpick__opt input:checked + span { border-color: var(--blue); background: rgba(47, 98, 232, .08); color: var(--blue); box-shadow: 0 0 0 2px rgba(47, 98, 232, .15); } .iconpick__opt .ico { width: 18px; height: 18px; } /* ---- Le repli, discret ---- */ .fallback { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); } .fallback summary { font-size: .8rem; color: var(--text-dim); cursor: pointer; } .fallback summary:hover { color: var(--blue); } /* Petite icone du bouton de theme, dans le menu deroulant. */ .theme-ico { display: inline-flex; width: 18px; justify-content: center; font-size: 14px; line-height: 1; }