/* ============================================================================ KUN THEME — feuille de style commune aux applications "Kun" (KunMail, Revokun…) Deux thèmes : data-theme="sobre" (défaut) et data-theme="indigo" Usage : + ============================================================================ */ /* ---------- 1. TOKENS ---------- */ :root, [data-theme="sobre"] { /* surfaces */ --km-bg-app: #f6f6f8; --km-bg-toolbar: #fbfbfc; --km-bg-sidebar: #efeff2; --km-bg-panel: #ffffff; --km-bg-aside: #fbfbfc; --km-bg-subtle: #f7f7f9; --km-bg-inset: #eeeef1; /* bordures */ --km-border: #e3e4e8; --km-border-soft: #f0f0f2; /* texte */ --km-text: #1d1d1f; --km-text-2: #3c3f44; --km-text-3: #8a8d94; --km-text-4: #a0a3aa; /* accent */ --km-accent: #0a66d0; --km-accent-strong: #0a4faf; --km-accent-soft: #e2e8f5; --km-accent-tint: #eef4fd; --km-on-accent: #ffffff; --km-accent-grad: #0a66d0; /* sidebar (thème clair : sidebar claire) */ --km-sidebar-text: #3c3f44; --km-sidebar-text-2: #6e7076; --km-sidebar-active-bg: var(--km-accent-soft); --km-sidebar-active-text: var(--km-accent-strong); --km-toolbar-text: #3c3f44; --km-toolbar-input-bg: #eeeef1; /* statuts */ --km-ok: #1f6d38; --km-ok-bg: #d9f0df; --km-warn: #a1541a; --km-warn-bg: #fce8d8; --km-info: #5a4fb0; --km-info-bg: #e8e5f8; --km-alert: #c2452e; /* classement (pastels + liseré) — significatifs, ne pas réassigner au hasard */ --km-cat1-bg: #fdfbf2; --km-cat1-line: #e8d48a; /* jaune */ --km-cat2-bg: #f4faf4; --km-cat2-line: #9fd3a8; /* vert */ --km-cat3-bg: #fdf6f2; --km-cat3-line: #f0b48a; /* orange */ --km-cat4-bg: #f3f0fb; --km-cat4-line: #b98add; /* violet */ /* forme & profondeur */ --km-radius-sm: 6px; --km-radius: 8px; --km-radius-lg: 10px; --km-radius-pill: 14px; --km-shadow: 0 1px 2px rgba(0,0,0,0.04); --km-row-selected-marker: 3px solid var(--km-accent); /* typo */ --km-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; --km-fs-micro: 10px; --km-fs-meta: 11px; --km-fs-ui: 12px; --km-fs-row: 13px; --km-fs-body: 14px; --km-fs-title: 17px; --km-lh-body: 1.65; } [data-theme="indigo"] { --km-bg-app: #fafafc; --km-bg-toolbar: #2c4272; --km-bg-sidebar: linear-gradient(135deg, #2c4272 0%, #0d1220 100%); --km-bg-panel: #ffffff; --km-bg-aside: #f4f4f8; --km-bg-subtle: #f7f7fa; --km-bg-inset: #f0f0f4; --km-border: #e6e7ee; --km-border-soft: #f0f0f2; --km-text: #1d1d1f; --km-text-2: #2c2e33; --km-text-3: #8a8d94; --km-text-4: #a0a3aa; --km-accent: #5157e8; --km-accent-strong: #3a3fd0; --km-accent-soft: #e6e8fd; --km-accent-tint: #eef0fe; --km-on-accent: #ffffff; --km-accent-grad: linear-gradient(135deg, #5157e8, #8a5cf5); --km-sidebar-text: #b8bacb; --km-sidebar-text-2: #8d90a5; --km-sidebar-active-bg: #5157e8; --km-sidebar-active-text: #ffffff; --km-toolbar-text: #e4ebf7; --km-toolbar-input-bg: rgba(255,255,255,0.14); --km-ok: #1f6d38; --km-ok-bg: #d9f0df; --km-warn: #a1541a; --km-warn-bg: #fce8d8; --km-info: #5a4fb0; --km-info-bg: #e8e5f8; --km-alert: #c2452e; /* en Indigo, le classement passe par des BADGES : fond neutre, teinte sur le badge */ --km-cat1-bg: transparent; --km-cat1-line: #e8d48a; --km-cat2-bg: transparent; --km-cat2-line: #9fd3a8; --km-cat3-bg: transparent; --km-cat3-line: #f0b48a; --km-cat4-bg: transparent; --km-cat4-line: #b98add; --km-cat1-badge-bg: #fbf1cf; --km-cat1-badge-fg: #8a6d1f; --km-cat2-badge-bg: #d9f0df; --km-cat2-badge-fg: #1f6d38; --km-cat3-badge-bg: #fce8d8; --km-cat3-badge-fg: #a1541a; --km-cat4-badge-bg: #e8e5f8; --km-cat4-badge-fg: #5a4fb0; --km-radius-sm: 6px; --km-radius: 8px; --km-radius-lg: 12px; --km-radius-pill: 999px; --km-shadow: 0 1px 3px rgba(28,29,38,0.08); --km-row-selected-marker: 3px solid var(--km-accent); } /* défauts de badge pour le thème sobre (pastel discret) */ [data-theme="sobre"] { --km-cat1-badge-bg: #fbf1cf; --km-cat1-badge-fg: #8a6d1f; --km-cat2-badge-bg: #e2f2e5; --km-cat2-badge-fg: #1f6d38; --km-cat3-badge-bg: #fce8d8; --km-cat3-badge-fg: #a1541a; --km-cat4-badge-bg: #e8e5f8; --km-cat4-badge-fg: #5a4fb0; } /* ---------- 2. BASE ---------- */ body { margin: 0; font-family: var(--km-font); font-size: var(--km-fs-body); color: var(--km-text); background: var(--km-bg-app); -webkit-font-smoothing: antialiased; } a { color: var(--km-accent); text-decoration: none; } a:hover { color: var(--km-accent-strong); text-decoration: underline; } * , *::before, *::after { box-sizing: border-box; } /* ---------- 3. COMPOSANTS ---------- */ /* Coque 4 colonnes */ .km-shell { display: flex; flex-direction: column; height: 100vh; background: var(--km-bg-app); } .km-body { display: flex; flex: 1; min-height: 0; } /* Toolbar */ .km-toolbar { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: var(--km-bg-toolbar); border-bottom: 1px solid var(--km-border); color: var(--km-toolbar-text); } [data-theme="indigo"] .km-toolbar { border-bottom-color: rgba(0,0,0,0.22); } .km-toolbar__title { font-size: var(--km-fs-body); font-weight: 700; color: var(--km-toolbar-text); } [data-theme="indigo"] .km-toolbar__title { color: #fff; } .km-search { display: flex; align-items: center; gap: 8px; background: var(--km-toolbar-input-bg); border: 1px solid var(--km-border); border-radius: var(--km-radius); padding: 6px 12px; width: 420px; font-size: var(--km-fs-row); color: var(--km-text-3); } [data-theme="indigo"] .km-search { border-color: transparent; color: var(--km-sidebar-text-2); } .km-actions { display: flex; gap: 2px; background: var(--km-bg-inset); border-radius: var(--km-radius); padding: 3px; } [data-theme="indigo"] .km-actions { background: rgba(255,255,255,0.10); gap: 2px; padding: 3px; } [data-theme="indigo"] .km-actions > * { color: #e4ebf7; font-weight: 500; padding: 5px 11px; } [data-theme="indigo"] .km-actions > *:hover { background: rgba(255,255,255,0.16); } .km-actions > * { padding: 5px 10px; font-size: var(--km-fs-ui); color: var(--km-toolbar-text); border-radius: var(--km-radius-sm); } /* Boutons */ .km-btn { font-family: inherit; font-size: var(--km-fs-ui); font-weight: 600; border: 0; border-radius: var(--km-radius); padding: 7px 14px; cursor: pointer; color: var(--km-on-accent); background: var(--km-accent); } .km-btn:hover { filter: brightness(1.06); } .km-btn--ghost { background: transparent; color: var(--km-text-2); border: 1px solid var(--km-border); font-weight: 500; } /* Sidebar */ .km-sidebar { width: 216px; flex-shrink: 0; padding: 14px 10px; background: var(--km-bg-sidebar); border-right: 1px solid var(--km-border); display: flex; flex-direction: column; gap: 2px; color: var(--km-sidebar-text); } [data-theme="indigo"] .km-sidebar { border-right-color: rgba(0,0,0,0.3); } .km-sidebar__label { display: flex; align-items: center; gap: 8px; padding: 4px 10px; font-size: var(--km-fs-meta); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--km-sidebar-text-2); } .km-nav { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--km-radius-sm); font-size: var(--km-fs-row); color: var(--km-sidebar-text); cursor: pointer; } .km-nav--nested { padding-left: 26px; } .km-nav:hover { background: rgba(125,125,140,0.14); } .km-nav[aria-current="true"] { background: var(--km-sidebar-active-bg); color: var(--km-sidebar-active-text); font-weight: 600; } .km-nav__count { margin-left: auto; font-size: var(--km-fs-meta); opacity: 0.75; } .km-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* Liste de messages */ .km-list { width: 352px; flex-shrink: 0; background: var(--km-bg-panel); border-right: 1px solid var(--km-border); display: flex; flex-direction: column; } .km-filters { display: flex; gap: 14px; padding: 12px 14px 0; border-bottom: 1px solid var(--km-border-soft); } .km-filter { font-size: var(--km-fs-ui); font-weight: 500; color: var(--km-text-3); padding-bottom: 8px; cursor: pointer; border-bottom: 2px solid transparent; } .km-filter[aria-selected="true"] { color: var(--km-accent); font-weight: 600; border-bottom-color: var(--km-accent); } /* variante pilules (Indigo) */ [data-theme="indigo"] .km-filters { gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--km-border-soft); } [data-theme="indigo"] .km-filter { border: 0; padding: 4px 12px; background: var(--km-bg-inset); border-radius: var(--km-radius-pill); color: var(--km-text-2); } [data-theme="indigo"] .km-filter[aria-selected="true"] { background: var(--km-accent); color: var(--km-on-accent); } .km-row { padding: 10px 14px; border-bottom: 1px solid var(--km-border-soft); display: flex; flex-direction: column; gap: 2px; cursor: pointer; border-left: 3px solid transparent; } .km-row:hover { background: var(--km-bg-subtle); } .km-row__top { display: flex; align-items: baseline; gap: 8px; } .km-row__from { font-size: var(--km-fs-row); font-weight: 600; color: var(--km-text); } .km-row__date { margin-left: auto; font-size: var(--km-fs-meta); color: var(--km-text-4); } .km-row__subject { font-size: var(--km-fs-row); color: var(--km-text); } .km-row__snippet { font-size: var(--km-fs-ui); color: var(--km-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .km-row__unread { width: 7px; height: 7px; border-radius: 50%; background: var(--km-accent); flex-shrink: 0; } .km-row[aria-selected="true"] { background: var(--km-accent-tint); border-left: var(--km-row-selected-marker); } .km-row[aria-selected="true"] .km-row__from { color: var(--km-accent-strong); font-weight: 700; } .km-row[aria-selected="true"] .km-row__subject { font-weight: 600; } /* Classement : .km-row--cat1…cat4 (pastel + liseré en Sobre, neutre en Indigo) */ .km-row--cat1 { background: var(--km-cat1-bg); border-left-color: var(--km-cat1-line); } .km-row--cat2 { background: var(--km-cat2-bg); border-left-color: var(--km-cat2-line); } .km-row--cat3 { background: var(--km-cat3-bg); border-left-color: var(--km-cat3-line); } .km-row--cat4 { background: var(--km-cat4-bg); border-left-color: var(--km-cat4-line); } [data-theme="indigo"] .km-row--cat1, [data-theme="indigo"] .km-row--cat2, [data-theme="indigo"] .km-row--cat3, [data-theme="indigo"] .km-row--cat4 { border-left-color: transparent; } /* Badges de catégorie */ .km-badge { display: inline-block; font-size: var(--km-fs-micro); font-weight: 600; border-radius: 4px; padding: 2px 8px; white-space: nowrap; } .km-badge--cat1 { background: var(--km-cat1-badge-bg); color: var(--km-cat1-badge-fg); } .km-badge--cat2 { background: var(--km-cat2-badge-bg); color: var(--km-cat2-badge-fg); } .km-badge--cat3 { background: var(--km-cat3-badge-bg); color: var(--km-cat3-badge-fg); } .km-badge--cat4 { background: var(--km-cat4-badge-bg); color: var(--km-cat4-badge-fg); } .km-badge--accent { background: var(--km-accent-soft); color: var(--km-accent-strong); } /* Volet de lecture */ .km-reader { flex: 1; min-width: 420px; background: var(--km-bg-panel); border-right: 1px solid var(--km-border); display: flex; flex-direction: column; overflow: auto; } .km-reader__head { padding: 20px 28px 14px; border-bottom: 1px solid var(--km-border-soft); } .km-reader__title { font-size: var(--km-fs-title); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; margin: 0; } [data-theme="indigo"] .km-reader__title { font-size: 19px; } .km-reader__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-top: 6px; font-size: var(--km-fs-ui); color: var(--km-text-3); } .km-reader__body { padding: 20px 28px; font-size: var(--km-fs-body); line-height: var(--km-lh-body); color: var(--km-text-2); } .km-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; background: var(--km-accent-soft); color: var(--km-accent-strong); } [data-theme="indigo"] .km-avatar { background: var(--km-accent); color: #fff; } /* Tableau clé/valeur (données de formulaire) */ .km-kv { display: grid; grid-template-columns: minmax(110px, 150px) 1fr; gap: 0; border: 1px solid var(--km-border); border-radius: var(--km-radius-lg); overflow: hidden; font-size: var(--km-fs-row); margin: 0 0 16px; } .km-kv dt { padding: 9px 14px; background: var(--km-bg-subtle); color: var(--km-text-3); border-bottom: 1px solid var(--km-border-soft); margin: 0; } .km-kv dd { padding: 9px 14px; font-weight: 600; border-bottom: 1px solid var(--km-border-soft); margin: 0; } .km-kv dt:nth-last-of-type(1), .km-kv dd:nth-last-of-type(1) { border-bottom: 0; } /* Panneau assistant (IA) */ .km-aside { width: 300px; flex-shrink: 0; background: var(--km-bg-aside); padding: 16px; display: flex; flex-direction: column; gap: 14px; overflow: auto; } .km-aside__head { display: flex; align-items: center; gap: 8px; } .km-aside__mark { width: 26px; height: 26px; border-radius: var(--km-radius); background: var(--km-accent-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; } .km-card { background: #fff; border: 1px solid var(--km-border); border-radius: var(--km-radius-lg); padding: 14px; display: flex; flex-direction: column; gap: 10px; } [data-theme="indigo"] .km-card { border-color: transparent; box-shadow: var(--km-shadow); } .km-card__title { font-size: var(--km-fs-meta); font-weight: 700; color: var(--km-text-3); text-transform: uppercase; letter-spacing: 0.05em; } [data-theme="indigo"] .km-card__title { font-size: var(--km-fs-ui); color: var(--km-text); text-transform: none; letter-spacing: 0; } /* champ de résumé : libellé + valeur, jamais de markdown brut */ .km-field { display: flex; gap: 10px; } .km-field__bar { width: 3px; border-radius: 2px; background: var(--km-accent); flex-shrink: 0; } [data-theme="sobre"] .km-field__bar { display: none; } .km-field__label { font-size: var(--km-fs-meta); font-weight: 600; color: var(--km-accent); } .km-field__value { font-size: var(--km-fs-ui); color: var(--km-text-2); line-height: 1.45; } .km-field--warn .km-field__bar, .km-field--warn .km-field__label { background: var(--km-warn); color: var(--km-warn); } .km-field--ok .km-field__bar, .km-field--ok .km-field__label { background: var(--km-ok); color: var(--km-ok); } .km-input { font-family: inherit; font-size: var(--km-fs-ui); color: var(--km-text); border: 1px solid var(--km-border); border-radius: var(--km-radius); padding: 10px; min-height: 52px; background: #fff; resize: vertical; } .km-input::placeholder { color: var(--km-text-4); } .km-input:focus { outline: 2px solid var(--km-accent-soft); border-color: var(--km-accent); } .km-chips { display: flex; gap: 6px; flex-wrap: wrap; } .km-chip { font-size: var(--km-fs-meta); color: var(--km-text-2); background: var(--km-bg-inset); border-radius: var(--km-radius-pill); padding: 3px 10px; cursor: pointer; border: 0; font-family: inherit; } .km-chip[aria-pressed="true"] { background: var(--km-accent); color: var(--km-on-accent); font-weight: 600; } /* Sélecteur de thème (Réglages) */ .km-themepick { display: flex; gap: 12px; } .km-themepick__opt{ flex: 1; border: 1px solid var(--km-border); border-radius: var(--km-radius-lg); padding: 12px; cursor: pointer; background: #fff; text-align: left; font-family: inherit; } .km-themepick__opt[aria-checked="true"] { border-color: var(--km-accent); box-shadow: 0 0 0 3px var(--km-accent-soft); } .km-themepick__swatches { display: flex; gap: 4px; margin-bottom: 8px; } .km-themepick__swatches span { width: 22px; height: 22px; border-radius: var(--km-radius-sm); display: block; } .km-themepick__name { font-size: var(--km-fs-row); font-weight: 600; color: var(--km-text); } .km-themepick__desc { font-size: var(--km-fs-meta); color: var(--km-text-3); } @media (prefers-reduced-motion: no-preference) { .km-nav, .km-row, .km-btn, .km-chip { transition: background-color .12s ease, color .12s ease; } }