From 8b39c09484f0bb8ed98981cee31fc9230977a1e2 Mon Sep 17 00:00:00 2001 From: Gato Date: Fri, 19 Jun 2026 14:39:24 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20ajout=20des=20badges=20th=C3=A8mes=20ra?= =?UTF-8?q?pides=20dans=20le=20modal=20CSS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Sonnet 4.6 --- src/index.html | 9 ++++++++ src/style.css | 34 ++++++++++++++++++++++++++++ src/ui/css-modal.js | 54 ++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 96 insertions(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index f168c82..945789b 100644 --- a/src/index.html +++ b/src/index.html @@ -74,6 +74,15 @@
+
+

Thèmes rapides

+
+ + + + +
+

Personnalisez l'apparence de vos pages en modifiant le CSS ci-dessous. Les styles s'appliquent à l'onglet actif.

diff --git a/src/style.css b/src/style.css index e88fcfe..636dfec 100644 --- a/src/style.css +++ b/src/style.css @@ -646,6 +646,40 @@ body { .css-modal__btn--ghost { background: transparent; color: #777; border: 1px solid #ddd; } .css-modal__btn--ghost:hover { background: #f0f0f4; color: #444; } +/* ── Quick themes ── */ +.css-modal__quick-themes { flex-shrink: 0; } +.css-modal__quick-themes-label { + font-size: 11px; + font-weight: 600; + color: #aaa; + text-transform: uppercase; + letter-spacing: 0.08em; + margin: 0 0 8px; +} +.css-modal__quick-themes-list { + display: flex; + flex-wrap: wrap; + gap: 8px; +} +.css-modal__theme-badge { + padding: 6px 14px; + border: 1px solid #ddd; + border-radius: 999px; + background: #fff; + font-family: 'Poppins', sans-serif; + font-size: 13px; + font-weight: 400; + color: #555; + cursor: pointer; + transition: border-color 0.15s, color 0.15s, background 0.15s; +} +.css-modal__theme-badge:hover { border-color: #bbb; color: #222; background: #f8f8f8; } +.css-modal__theme-badge.active { + border-color: #ff5577; + color: #ff5577; + background: rgba(255, 85, 119, 0.06); +} + /* ── Back button ── */ .btn-back { width: 100%; diff --git a/src/ui/css-modal.js b/src/ui/css-modal.js index 6b8971f..63349b5 100644 --- a/src/ui/css-modal.js +++ b/src/ui/css-modal.js @@ -1,6 +1,34 @@ const CSS_TABS = ['general', 'police', 'contenu', 'avance']; let activeTab = CSS_TABS[0]; +const QUICK_THEME_KEY = 'pena_quick_theme'; + +const QUICK_THEMES = { + dark: `.content { background: #1e1e2e; color: #cdd6f4; } +.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { color: #cdd6f4; } +.content p, .content ul li, .content ol li { color: #cdd6f4; } +.content a { color: #89b4fa; } +.content a:visited { color: #cba6f7; } +.content code { background: #313244; color: #cba6f7; } +.content pre { background: #313244; } +.content blockquote { border-color: #6c7086; color: #a6adc8; } +.content table td, .content table th { color: #cdd6f4; }`, + + sepia: `.content { background: #f4ecd8; } +.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { color: #5c4a1e; } +.content p, .content ul li, .content ol li { color: #5c4a1e; } +.content a { color: #7a5c2e; } +.content code { background: #e8d5b0; color: #5c4a1e; } +.content pre { background: #e8d5b0; }`, + + 'large-text': `.content { font-size: 18px; } +.content p { line-height: 1.8; }`, + + emerald: `.content a:hover { color: #10b981; } +.content table th { border-bottom-color: #10b981; } +.content table td { border-bottom-color: rgba(16, 185, 129, 0.25); }`, +}; + function cssKey(tab) { return `pena_css_${tab}`; } function loadTabCss(tab) { return localStorage.getItem(cssKey(tab)) ?? ''; } @@ -17,11 +45,22 @@ function applyCustomCss() { styleEl.id = 'pena-custom-style'; document.head.appendChild(styleEl); } - styleEl.textContent = CSS_TABS.map(t => loadTabCss(t)).filter(Boolean).join('\n'); + const tabCss = CSS_TABS.map(t => loadTabCss(t)).filter(Boolean).join('\n'); + const activeTheme = localStorage.getItem(QUICK_THEME_KEY); + const themeCss = activeTheme ? (QUICK_THEMES[activeTheme] ?? '') : ''; + styleEl.textContent = [tabCss, themeCss].filter(Boolean).join('\n'); +} + +function syncThemeBadges() { + const activeTheme = localStorage.getItem(QUICK_THEME_KEY); + document.querySelectorAll('.css-modal__theme-badge').forEach(btn => { + btn.classList.toggle('active', btn.dataset.theme === activeTheme); + }); } export function initCssModal() { applyCustomCss(); + syncThemeBadges(); const cssModalOverlay = document.getElementById('css-modal-overlay'); const cssEditor = document.getElementById('css-editor'); @@ -60,7 +99,20 @@ export function initCssModal() { document.getElementById('btn-css-reset').addEventListener('click', () => { CSS_TABS.forEach(t => localStorage.removeItem(cssKey(t))); + localStorage.removeItem(QUICK_THEME_KEY); cssEditor.value = ''; applyCustomCss(); + syncThemeBadges(); + }); + + document.querySelectorAll('.css-modal__theme-badge').forEach(btn => { + btn.addEventListener('click', () => { + const theme = btn.dataset.theme; + const current = localStorage.getItem(QUICK_THEME_KEY); + if (current === theme) localStorage.removeItem(QUICK_THEME_KEY); + else localStorage.setItem(QUICK_THEME_KEY, theme); + applyCustomCss(); + syncThemeBadges(); + }); }); }