dans la codebox */
.codebox code {
display: block;
padding: 10px 12px;
overflow-x: auto;
}
/* mini scrollbars horizontales propres pour le code long */
.codebox code::-webkit-scrollbar {
height: 6px;
}
.codebox code::-webkit-scrollbar-track {
background: transparent;
}
.codebox code::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.8);
border-radius: 999px;
}
/* ========================================================================
TYPO – confort de lecture dans les messages
===================================================================== */
/* Légère limite de largeur pour le texte des posts (évite les lignes trop longues) */
.postbody .content,
.postbody .content > *:not(table):not(.bbcode-table) {
max-width: 100%;
}
/* Marges verticales un peu mieux calibrées */
.postbody p,
.content p {
margin: 0 0 0.85em;
}
/* Les listes restent lisibles mais pas énormes */
.postbody ul,
.postbody ol,
.content ul,
.content ol {
margin: 0.4em 0 0.9em 1.6em;
}
/* ========================================================================
ONGLET / MENUS – style tabs GitHub
===================================================================== */
/* Onglets principaux (ACP/UCP/profils) */
.tabs .tab > a {
background: transparent;
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
color: var(--color12);
padding: 6px 10px;
font-weight: 500;
font-size: 0.9rem;
text-transform: none;
box-shadow: none;
}
.tabs .tab > a:hover {
color: var(--color11);
border-bottom-color: rgba(88, 166, 255, 0.3);
background: transparent;
}
.tabs .activetab > a,
.tabs .activetab > a:hover {
color: var(--color11);
border-bottom-color: var(--color01); /* bleu GitHub */
background: transparent;
}
/* Mini onglets (sous-sections) */
.minitabs .tab > a {
background: transparent;
border-radius: 999px;
border: 1px solid transparent;
padding: 4px 10px;
font-size: 0.85rem;
color: var(--color12);
}
.minitabs .tab > a:hover {
border-color: var(--color04);
background: var(--color03);
color: var(--color11);
}
.minitabs .activetab > a,
.minitabs .activetab > a:hover {
border-color: var(--color01);
background: rgba(56, 139, 253, 0.15);
color: var(--color11);
}
/* Menu de navigation latéral (panneau de contrôle) */
.navigation a,
.rtl .navigation a {
background: transparent;
border-radius: 6px;
padding: 6px 10px;
color: var(--color12);
border: 1px solid transparent;
}
.navigation a:hover,
.rtl .navigation a:hover {
background: var(--color03);
border-color: var(--color04);
color: var(--color11);
}
.navigation .active-subsection a,
.navigation .active-subsection a:hover {
background: rgba(56, 139, 253, 0.15);
border-color: var(--color01);
color: var(--color11);
}
:root {
--tab-accent: #ff8c00; /* orange chaleureux */
}
/* ========================================================================
ONGLET – Soulignement orange
===================================================================== */
.tabs .tab > a {
background: transparent;
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
color: var(--color12);
padding: 6px 10px;
font-weight: 500;
font-size: 0.9rem;
transition: border-color 0.15s ease, color 0.15s ease;
}
.tabs .tab > a:hover {
color: var(--color11);
border-bottom-color: color-mix(in srgb, var(--tab-accent) 40%, transparent);
}
.tabs .activetab > a,
.tabs .activetab > a:hover {
color: var(--color11);
border-bottom-color: var(--tab-accent);
background: transparent;
}
:root {
--btn-primary-green: #28a745; /* vert GitHub */
--btn-primary-green-hover: #2ecc71; /* légèrement plus clair */
}
/* ========================================================================
BOUTONS PRIMAIRES – Vert
===================================================================== */
a.button1,
input.button1,
.button1 {
background-color: var(--btn-primary-green);
border: 1px solid var(--btn-primary-green);
color: #ffffff !important;
font-weight: 600;
border-radius: 6px;
padding: 6px 14px;
}
a.button1:hover,
input.button1:hover,
.button1:hover {
background-color: var(--btn-primary-green-hover);
border-color: var(--btn-primary-green-hover);
color: #ffffff !important;
transform: translateY(-1px);
}
/* =======================================================================
GitHub-like extra variables
==================================================================== */
:root {
/* Onglets (déjà défini plus haut si tu veux garder la même valeur) */
--tab-accent: #ff9800;
/* Boutons primaires verts */
--btn-primary-green: #2ea043; /* vert clair (light theme) */
--btn-primary-green-hover: #3fb950;
/* Variante sombre */
--btn-primary-green-dark: #238636; /* vert GitHub dark */
--btn-primary-green-dark-hover: #2ea043;
/* Alertes */
--alert-info-bg: #d0e7ff;
--alert-info-border:#78a9ff;
--alert-warn-bg: #fff3cd;
--alert-warn-border:#ffdd57;
--alert-danger-bg: #fde2e1;
--alert-danger-border:#ff7b72;
}
/* Overrides pour le thème sombre explicite */
[data-theme="dark"] {
--alert-info-bg: #1f2937;
--alert-info-border:#60a5fa;
--alert-warn-bg: #3b2f1a;
--alert-warn-border:#fbbf24;
--alert-danger-bg: #3f1d1d;
--alert-danger-border:#f87171;
}
/* =======================================================================
Primary buttons – green (light + dark)
==================================================================== */
a.button1,
input.button1,
.button1 {
background-color: var(--btn-primary-green);
border: 1px solid var(--btn-primary-green);
color: #ffffff !important;
font-weight: 600;
border-radius: 6px;
padding: 6px 14px;
line-height: 1.2;
transition: background-color 0.12s ease, border-color 0.12s ease,
transform 0.1s ease, box-shadow 0.1s ease;
}
a.button1:hover,
input.button1:hover,
.button1:hover {
background-color: var(--btn-primary-green-hover);
border-color: var(--btn-primary-green-hover);
color: #ffffff !important;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.18);
}
/* Variante sombre : un vert plus profond */
[data-theme="dark"] a.button1,
[data-theme="dark"] input.button1,
[data-theme="dark"] .button1 {
background-color: var(--btn-primary-green-dark);
border-color: var(--btn-primary-green-dark);
}
[data-theme="dark"] a.button1:hover,
[data-theme="dark"] input.button1:hover,
[data-theme="dark"] .button1:hover {
background-color: var(--btn-primary-green-dark-hover);
border-color: var(--btn-primary-green-dark-hover);
}
/* =======================================================================
ACP / UCP navigation – GitHub-like side menu
==================================================================== */
/* Colonne de navigation dans UCP / MCP */
.navigation a,
.rtl .navigation a {
background: transparent;
border-radius: 6px;
margin: 2px 0;
padding: 6px 10px;
color: var(--color13);
border: 1px solid transparent;
transition: background-color 0.12s ease, color 0.12s ease,
border-color 0.12s ease;
}
.navigation a:hover,
.rtl .navigation a:hover {
background: var(--color04);
border-color: var(--color05);
color: var(--color01);
}
/* Élément actif (section courante) */
.navigation .active-subsection a,
.navigation .active-subsection a:hover,
.rtl .navigation .active-subsection a,
.rtl .navigation .active-subsection a:hover {
background: var(--color02);
border-color: var(--tab-accent);
color: var(--color01);
font-weight: 600;
}
/* Panneau principal en UCP/ACP : léger card */
.panel-container .panel,
.cp-main .pm {
border-radius: 8px;
border: 1px solid var(--color04);
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
[data-theme="dark"] .panel-container .panel,
[data-theme="dark"] .cp-main .pm {
box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
/* =======================================================================
Tabs (ACP / UCP / global) – underline orange
==================================================================== */
.tabs .tab > a {
background: transparent;
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
color: var(--color12);
padding: 6px 10px;
font-weight: 500;
font-size: 0.9rem;
transition: border-color 0.15s ease, color 0.15s ease;
}
.tabs .tab > a:hover {
color: var(--color11);
border-bottom-color: color-mix(in srgb, var(--tab-accent) 40%, transparent);
}
.tabs .activetab > a,
.tabs .activetab > a:hover {
color: var(--color11);
border-bottom-color: var(--tab-accent);
background: transparent;
}
/* =======================================================================
Theme switch (soleil / lune)
==================================================================== */
.switch-theme {
border-radius: 999px;
border: 1px solid var(--color05);
padding: 2px 8px;
display: inline-flex;
align-items: center;
cursor: pointer;
background: var(--color02);
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.switch-theme:hover {
background: var(--color03);
border-color: var(--color06);
}
/* Icône déjà défini via --switch-light-dark */
/* =======================================================================
Dropdowns – style GitHub
==================================================================== */
.dropdown .dropdown-contents {
border-radius: 6px;
border: 1px solid var(--color05);
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
padding: 4px 0;
}
.dropdown-extended .header,
.dropdown-extended .footer {
background: var(--color03);
border-bottom: 1px solid var(--color04);
border-top: 1px solid var(--color04);
}
.dropdown li,
.dropdown li.separator,
.dropdown li li {
border-color: transparent;
}
.dropdown li a,
.dropdown li .button {
border-radius: 0;
}
.dropdown li:hover {
background-color: var(--color04);
}
/* =======================================================================
Pagination – pills GitHub-like
==================================================================== */
.pagination li a,
.pagination li span {
border-radius: 999px;
min-width: 28px;
padding: 3px 8px;
font-size: 0.85rem;
border: 1px solid var(--color05);
background: var(--color02);
color: var(--color12);
box-shadow: none;
}
.pagination li a:hover,
.pagination li a:hover .icon {
background: var(--color03);
border-color: var(--color06);
color: var(--color11);
}
.pagination li.active span {
background: var(--btn-primary-green);
border-color: var(--btn-primary-green);
color: #ffffff;
font-weight: 600;
}
[data-theme="dark"] .pagination li.active span {
background: var(--btn-primary-green-dark);
border-color: var(--btn-primary-green-dark);
}
/* =======================================================================
Alerts / notices – GitHub-style
==================================================================== */
/* Boîte générique d’alerte phpBB */
.phpbb_alert,
div.rules,
p.post-notice,
.notice {
border-radius: 6px;
padding: 8px 12px;
border-width: 1px;
border-style: solid;
margin: 0.9em 0;
font-size: 0.95rem;
}
/* Info (bleu) – par défaut */
.phpbb_alert,
div.rules {
background-color: var(--alert-info-bg);
border-color: var(--alert-info-border);
}
/* Erreur / danger (rouge) */
.error,
li.notification-reported strong,
li.notification-disapproved strong {
color: #b62324;
}
.phpbb_alert a {
font-weight: 600;
}
/* Notices d’avertissement (jaune) – on utilise .post-notice / .notice */
p.post-notice,
.notice {
background-color: var(--alert-warn-bg);
border-color: var(--alert-warn-border);
}
/* Messages d’erreur forts – on peut cibler .rules.error si tu en as,
ou ajouter une classe "alert-danger" dans tes templates plus tard */
.alert-danger,
div.rules.error {
background-color: var(--alert-danger-bg);
border-color: var(--alert-danger-border);
}
/* ========================================================================== */
/* Boutons par défaut (gris façon GitHub) */
/* ========================================================================== */
.button,
.button2,
a.button,
a.button2,
input.button,
input.button2 {
background-color: var(--color04);
border: 1px solid var(--color05);
color: var(--color11);
font-weight: 500;
padding: 4px 10px;
border-radius: 6px;
box-shadow: none;
transition: background-color 0.12s ease, border-color 0.12s ease,
transform 0.08s ease;
}
.button:hover,
.button2:hover,
a.button:hover,
a.button2:hover,
input.button:hover,
input.button2:hover {
background-color: var(--color05);
border-color: var(--color05);
color: var(--color01);
transform: translateY(-1px);
}
/* ========================================================================== */
/* Alignement des petits boutons de recherche avec le champ */
/* ========================================================================== */
/* Hauteur cohérente pour le champ et les boutons */
.search-box .inputbox {
height: 32px; /* ajuste si ton champ est plus haut ou plus bas */
}
/* Boutons loupe + engrenage collés au champ, même hauteur */
.search-box .button-search,
.search-box .button-search-end {
height: 32px;
padding: 0 10px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
/* Légère correction des bords pour que ça fasse un seul bloc */
.search-box .button-search {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-left: -1px; /* évite un double trait entre champ et bouton */
}
.search-box .button-search-end {
margin-left: 2px; /* espace entre les deux petits boutons */
}
/* ========================================================================== */
/* Inline code dans les messages – style GitHub */
/* ========================================================================== */
/* Tous les dans le texte… */
.postbody code,
.content code {
background: rgba(110, 118, 129, 0.25); /* petit gris bleuté */
border-radius: 4px;
padding: 0.05em 0.3em;
font-size: 0.9em;
}
/* …sauf à l’intérieur des blocs [code] (codebox) */
.codebox code {
background: transparent;
padding: 0;
}
/* ========================================================================== */
/* Alertes façon GitHub */
/* ========================================================================== */
/* Alerte générale (info) */
.phpbb_alert {
border-radius: 6px;
border: 1px solid #1f6feb;
background: rgba(31, 111, 235, 0.08);
color: var(--color11);
}
/* Boîtes de règles / notices “douces” */
div.rules,
p.post-notice {
border-radius: 6px;
border: 1px solid #9e6b16;
background: rgba(255, 196, 61, 0.10);
color: var(--color11);
}
/* Messages d’erreur / warning fort */
.error,
dd.profile-warnings {
color: #f85149;
}
.error,
.reported {
border-radius: 6px;
border: 1px solid #f85149;
background: rgba(248, 81, 73, 0.07);
}
/* ========================================================================== */
/* Boutons – look GitHub */
/* ========================================================================== */
.button,
.button1,
.button2,
.button3,
a.button1,
a.button2,
input.button1,
input.button2,
input.button3 {
border-radius: 6px;
border-width: 1px;
border-style: solid;
border-color: var(--color05);
background: var(--color04);
box-shadow: none;
font-weight: 500;
padding: 4px 10px;
}
/* Hover / focus : éclaircir légèrement + bord plus clair */
.button:hover,
.button:focus,
.button1:hover,
.button2:hover,
.button3:hover,
a.button1:hover,
a.button2:hover,
input.button1:hover,
input.button2:hover,
input.button3:hover {
background: var(--color05);
border-color: var(--color05);
color: var(--color11);
}
/* Bouton principal “Nouveau sujet / Répondre” un peu plus affirmé mais pas criard */
a.button1,
input.button1 {
background: #238636; /* vert GitHub */
border-color: #2ea043;
color: #ffffff;
}
a.button1:hover,
input.button1:hover {
background: #2ea043;
border-color: #3fb950;
color: #ffffff;
}
/* Séparateurs visibles entre les sujets (liste de topics) */
ul.topiclist.topics li.row {
border-top: 1px solid var(--color04); /* ligne fine entre chaque sujet */
}
/* Dernier sujet : on ferme proprement le bloc */
ul.topiclist.topics li.row:last-child {
border-bottom: 1px solid var(--color04);
}
/* === Spécifique au viewer Markdown (viewer.html) === */
/* Utilise la même logique que phpBB :
- --color02 = fond de page
- --color03 = blocs / panels (messages, viewer, etc.)
*/
.card,
.card .content,
.card .md-viewer,
.card .md-tab-pane,
.card #mdRendered {
background-color: var(--color03) !important;
}
/* === Bloc de code dans le viewer MD === */
/* Mode clair : background plus clair que le texte ET plus foncé que la page */
.card pre,
.card pre code,
.card .md-viewer pre,
.card .md-viewer pre code {
background-color: #f6f8fa !important; /* Gris clair GitHub */
border: 1px solid #d0d7de !important; /* Bordure GitHub */
color: #24292e !important; /* Texte de code GitHub */
}
/* Mode sombre : bloc de code plus sombre que le contenu, comme GitHub Dark */
[data-theme="dark"] .card pre,
[data-theme="dark"] .card pre code,
[data-theme="dark"] .card .md-viewer pre,
[data-theme="dark"] .card .md-viewer pre code {
background-color: #0d1117 !important; /* Fond code GitHub Dark */
border: 1px solid #30363d !important; /* Bordure code GitHub Dark */
color: #e6edf3 !important; /* Texte code GitHub Dark */
}
/* === Code du viewer Markdown : même style que les blocs [code] de phpBB === */
.card pre,
.card pre code,
.card .md-viewer pre,
.card .md-viewer pre code {
background-color: var(--code-bg) !important;
border: 1px solid var(--code-border) !important;
color: var(--code-text) !important;
}
/* Marge lisible pour les listes BBCode */
.postbody ul,
.postbody ol {
margin-left: 2em;
padding-left: 1.2em;
}
/* =========================================================================
CKEditor – Adaptation au thème sombre
========================================================================= */
/* Enveloppe générale */
[data-theme="dark"] .message-box .cke_chrome {
background-color: #2A2F38;
border: 1px solid #1f242c;
border-radius: 8px;
}
/* Barre du haut */
[data-theme="dark"] .message-box .cke_top {
background-color: #2A2F38;
border-bottom: 1px solid #1f242c;
}
/* Barre du bas */
[data-theme="dark"] .message-box .cke_bottom {
background-color: #2A2F38;
border-top: 1px solid #1f242c;
}
/* Zone d’édition */
[data-theme="dark"] .message-box .cke_contents {
background-color: #2A2F38;
border-top: 1px solid #1f242c;
}
/* Icônes et texte dans la toolbar */
[data-theme="dark"] .message-box .cke_button_icon,
[data-theme="dark"] .message-box .cke_combo_text,
[data-theme="dark"] .message-box .cke_combo_inlinelabel {
filter: none !important;
color: #D2D4D7 !important;
}
/* Boutons */
[data-theme="dark"] .message-box .cke_button,
[data-theme="dark"] .message-box .cke_combo_button {
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
}
/* Hover */
[data-theme="dark"] .message-box .cke_button:hover,
[data-theme="dark"] .message-box .cke_combo_button:hover {
background-color: #343a45;
border-color: #4a505c;
}
/* Bouton actif */
[data-theme="dark"] .message-box .cke_button_on,
[data-theme="dark"] .message-box .cke_combo_on {
background-color: #3a424f;
border-color: #5a6372;
}
/* =========================================================================
CKEditor – Correction du contraste en mode sombre
========================================================================= */
[data-theme="dark"] .message-box .cke_chrome * {
color: #D8D9DD !important;
/* Garantit que les labels textuels et menus héritent tous de la bonne couleur */
}
/* Éléments textuels spécifiques */
[data-theme="dark"] .message-box .cke_combo_text,
[data-theme="dark"] .message-box .cke_combo_inlinelabel,
[data-theme="dark"] .message-box .cke_toolgroup .cke_button span {
color: #D8D9DD !important;
}
/* Icônes PNG/SVG sombres → éclaircies */
[data-theme="dark"] .message-box .cke_button_icon {
filter: brightness(2.2) !important;
opacity: 1 !important;
}
/* Icônes désactivées (disabled) */
[data-theme="dark"] .message-box .cke_button_disabled .cke_button_icon {
filter: brightness(0.7) !important;
opacity: 0.4 !important;
}
/* Boutons au survol */
[data-theme="dark"] .message-box .cke_button:hover {
background-color: rgba(255,255,255,0.05) !important;
}
/* Bouton actif (gras, italique, etc.) */
[data-theme="dark"] .message-box .cke_button_on {
background-color: rgba(255,255,255,0.08) !important;
border-color: rgba(255,255,255,0.15) !important;
}
/* =========================================================================
CKEditor – Lisibilité des boutons désactivés en mode sombre
========================================================================= */
.phpbb-ck-upload input[type="file"]{
color:#111 !important;
background:#fff !important;
border:1px solid #bbb !important;
border-radius:4px !important;
padding:2px 6px !important;
}
.phpbb-ck-upload input[type="file"]::-webkit-file-upload-button{
color:#111 !important;
background:#e9e9e9 !important;
border:1px solid #bbb !important;
border-radius:4px !important;
padding:4px 10px !important;
cursor:pointer !important;
}
.phpbb-ck-upload-title{margin-bottom:6px;}
[data-theme="dark"] .message-box .cke_button_disabled .cke_button_icon,
[data-theme="dark"] .message-box .cke_button_disabled .cke_button_label {
/* un peu plus clairs que le fond, tout en restant "désactivés" */
filter: brightness(1.6) !important;
opacity: 0.6 !important;
}
/* BBTable : afficher uniquement une icône (pas le texte) */
.message-box .cke_button__bbtable .cke_button_icon {
display: none !important; /* on ignore le sprite */
}
/* On garde le label dans le DOM, mais on le cache visuellement */
.message-box .cke_button__bbtable .cke_button_label {
font-size: 0 !important; /* cache le texte */
line-height: 0 !important;
width: 18px; /* largeur du bouton */
display: inline-block !important;
overflow: hidden;
}
/* Icône de remplacement */
.message-box .cke_button__bbtable .cke_button_label::before {
content: "▦";
font-size: 14px;
line-height: 18px;
display: inline-block;
}
/* Couleur selon thème */
html[data-theme="dark"] .message-box .cke_button__bbtable .cke_button_label::before { color: #d8d9dd; }
html[data-theme="light"] .message-box .cke_button__bbtable .cke_button_label::before { color: #4a4a4a; }
/* Supprimer aussi le séparateur qui pourrait rester après */
.message-box .cke_button__table + .cke_toolbar_separator,
.message-box .cke_button__table + .cke_toolgroup {
/* selon la structure, l’un des deux marchera */
}
/* ==========================================================================
CKEditor (page) — Scrollbars (conteneur)
========================================================================== */
html[data-theme="dark"] .message-box .cke_contents,
html[data-theme="dark"] .message-box .cke_source {
scrollbar-width: thin;
scrollbar-color: #161B22 #0D1117;
}
html[data-theme="dark"] .message-box .cke_contents::-webkit-scrollbar,
html[data-theme="dark"] .message-box .cke_source::-webkit-scrollbar {
width: 10px;
}
html[data-theme="dark"] .message-box .cke_contents::-webkit-scrollbar-track,
html[data-theme="dark"] .message-box .cke_source::-webkit-scrollbar-track {
background: #0D1117;
}
html[data-theme="dark"] .message-box .cke_contents::-webkit-scrollbar-thumb,
html[data-theme="dark"] .message-box .cke_source::-webkit-scrollbar-thumb {
background: #161B22;
border-radius: 8px;
border: 2px solid #0D1117;
}
/* =========================================================================
CKEditor – Zone d’édition (UI + SOURCE) — scoped
========================================================================= */
/* 1) Mode Source (textarea) */
html[data-theme="light"] .message-box .cke_source {
background: #ffffff;
color: #24292f;
border: 1px solid var(--color04);
border-radius: 6px;
}
html[data-theme="dark"] .message-box .cke_source {
background: #0d1117;
color: #c9d1d9;
border: 1px solid var(--color04);
border-radius: 6px;
}
/* Sélection dans le Source */
html[data-theme="light"] .message-box .cke_source::selection {
background: rgba(31, 111, 235, 0.25);
}
html[data-theme="dark"] .message-box .cke_source::selection {
background: rgba(88, 166, 255, 0.28);
}
/* 2) Conteneur / cadre de l’éditeur (UI) */
html[data-theme="light"] .message-box .cke_chrome {
background: var(--color03);
border: 1px solid var(--color04);
border-radius: 8px;
}
html[data-theme="dark"] .message-box .cke_chrome {
background: var(--color03);
border: 1px solid var(--color04);
border-radius: 8px;
}
/* 3) Fond derrière l’iframe WYSIWYG (pas le contenu interne) */
html[data-theme="light"] .message-box .cke_contents { background: #ffffff; }
html[data-theme="dark"] .message-box .cke_contents { background: #0d1117; }
/* ============================================================
CKEditor — bouton Spoiler (icône CSS)
============================================================ */
.cke_button__spoiler .cke_button_icon {
background: none !important;
}
.cke_button__spoiler .cke_button_icon::before {
content: "▦"; /* symbole clair, lisible, universel */
font-size: 14px;
line-height: 16px;
display: inline-block;
color: currentColor;
}
/* ============================================================
CKEditor — bouton Code : icône CSS (title="Code")
============================================================ */
/* Neutralise l’icône sprite (souvent manquante) */
a.cke_button[title="Code"] .cke_button_icon {
background: none !important;
background-image: none !important;
/* le skin CKEditor peut cacher le contenu */
text-indent: 0 !important;
overflow: visible !important;
/* force une zone visible */
width: 18px !important;
height: 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Dessine l’icône */
a.cke_button[title="Code"] .cke_button_icon::before {
content: "";
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: currentColor;
}
/* =============================================================================
FIX TITRES (Preview + Posts)
- Empêche le h3 d’être inline/inline-block (bug "Titre 3 Texte 3" sur la même ligne)
- Ajoute plus d’espace entre le texte précédent et le titre suivant
========================================================================== */
/* 1) Cibler explicitement la zone Preview + posts */
#preview h1, #preview h2, #preview h3, #preview h4,
.postbody h1, .postbody h2, .postbody h3, .postbody h4,
.content h1, .content h2, .content h3, .content h4,
/* 2) Variantes possibles si tes BBCodes génèrent des spans/div */
#preview .bb-h1, #preview .bb-h2, #preview .bb-h3, #preview .bb-h4,
#preview .bb-h,
.postbody .bb-h1, .postbody .bb-h2, .postbody .bb-h3, .postbody .bb-h4,
.postbody .bb-h,
.content .bb-h1, .content .bb-h2, .content .bb-h3, .content .bb-h4,
.content .bb-h {
display: block !important;
float: none !important;
clear: both !important;
width: 100% !important;
/* Plus d’espace AVANT le titre (entre texte et titre) */
margin-top: 1.25em !important;
/* Un peu d’espace APRÈS le titre */
margin-bottom: 0.55em !important;
line-height: 1.25 !important;
}
/* Optionnel: si ton “Texte X” est dans des très compacts, assure une marge correcte */
#preview p,
.postbody p,
.content p {
margin: 0.65em 0 !important;
}
/* ======================================================================
FIX: [center] + [h1..h4] => titres réellement centrés
(override des règles "text-align:left" de la section TITRES)
====================================================================== */
.bbcode-center h1,
.bbcode-center h2,
.bbcode-center h3,
.bbcode-center h4,
.bbcode-center .bb-h,
.bbcode-center .bb-h1,
.bbcode-center .bb-h2,
.bbcode-center .bb-h3,
.bbcode-center .bb-h4,
.bbcode-center h1.bb-h,
.bbcode-center h2.bb-h,
.bbcode-center h3.bb-h,
.bbcode-center h4.bb-h {
text-align: center !important;
}
/* =====================================================================
Codebox — Fond sombre en mode clair (lisibilité maximale)
===================================================================== */
html[data-theme="light"] .codebox {
background: #0d1117; /* fond sombre type GitHub */
border: 1px solid #30363d;
border-radius: 8px;
}
html[data-theme="light"] .codebox p {
background: #161b22; /* barre "CODE: SELECT ALL" */
border-bottom: 1px solid #30363d;
color: #c9d1d9;
font-weight: 600;
}
html[data-theme="light"] .codebox p a {
color: #58a6ff; /* SELECT ALL */
}
html[data-theme="light"] .codebox p a:hover {
text-decoration: underline;
}
html[data-theme="light"] .codebox pre,
html[data-theme="light"] .codebox code {
background: transparent !important;
color: #c9d1d9; /* texte principal */
}
html[data-theme="light"] .codebox pre {
margin: 0;
padding: 12px;
line-height: 1.45;
overflow: auto;
}
/* Highlight.js (si présent) */
html[data-theme="light"] .codebox .hljs {
background: transparent !important;
color: #c9d1d9 !important;
}
/* ============================================================================
sylebel.net — Header custom (forum phpBB)
Objectif: reproduire le header du site AU PIXEL près,
sans impacter la navbar phpBB "Raccourcis / FAQ / …".
Dépend: overall_header.html doit utiliser .navbar-tabs pour la ligne d’onglets.
============================================================================ */
/* ----- 0) Neutraliser prosilver sur NOS blocs uniquement ----- */
#page-header .headerbar,
#page-header .navbar-tabs{
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
#page-header{
width: 100%;
margin: -3px 0 5px !important; /* top réduit, bottom = 5px */
}
/* La BOX visuelle est sur .inner (comme sur le site) */
#page-header .headerbar > .inner,
#page-header .navbar-tabs > .inner{
width: 100%;
max-width: 1150px !important;
margin: 0 auto !important;
padding: 0 10px !important; /* site: padding horizontal */
box-sizing: border-box !important;
background: var(--color03);
box-shadow: 0 0 0 1px var(--color04);
}
/* Coins */
#page-header .headerbar > .inner{
border-radius: 5px 5px 0 0;
}
#page-header .navbar-tabs > .inner{
border-radius: 0 0 5px 5px;
margin-bottom: 5px !important;
}
/* ----- 1) Headerbar layout (logo/titre à gauche, search à droite) ----- */
#page-header .headerbar > .inner{
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 6px;
/* Ajustement vertical: corrige le "titre 2px trop bas" */
padding-top: 8px !important;
padding-bottom: 6px !important;
/* IMPORTANT: pas de padding-left additionnel (ça créait un drift) */
}
/* Reset prosilver sur site-description/logo (sinon float + padding) */
#page-header #site-description.site-description{
float: none !important;
width: auto !important;
padding: 0 !important;
margin: 0 !important;
display: inline-flex;
align-items: center;
gap: 12px;
min-width: 0;
}
#page-header #logo.logo{
float: none !important;
padding: 0 !important;
margin: 0 !important;
display: inline-flex;
align-items: center;
text-decoration: none;
}
/* Logo */
#page-header .site-logo-img{
width: 42px;
height: 42px;
display: block;
}
/* Titre: même stack que le site */
#page-header .site-text h1,
#page-header .site-description h1{
margin: 0 !important;
line-height: 1.05;
font-size: 28px;
font-weight: 700;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif !important;
}
/* ----- 2) Search box (alignée à droite, GitHub-like) ----- */
#page-header #search-box{
display: inline-flex !important;
align-items: center;
margin: 0 !important;
/* Le point clé: pousse le search à droite même si prosilver tente autre chose */
margin-left: auto !important;
flex: 0 0 auto !important;
}
#page-header #search-box form{
margin: 0 !important;
}
#page-header #search-box fieldset{
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
min-inline-size: 0;
display: inline-flex !important;
align-items: center;
gap: 0; /* collé */
}
#page-header #search-box .inputbox.search{
width: 260px;
max-width: 40vw;
height: 32px;
padding: 6px 10px;
border-radius: 6px 0 0 6px;
border: 1px solid var(--color05);
border-right: 0;
background: var(--color04);
color: var(--color13);
outline: none;
box-sizing: border-box;
}
#page-header #search-box .inputbox.search:hover{
background: var(--color05);
}
#page-header #search-box .inputbox.search:focus{
background: var(--color05) !important;
border-color: var(--color05);
}
#page-header #search-box .button{
display: inline-flex !important;
align-items: center;
justify-content: center;
height: 32px;
width: 36px;
min-width: 36px;
padding: 0;
border: 1px solid var(--color05);
background: var(--color04);
color: var(--color12);
cursor: pointer;
box-sizing: border-box;
}
/* loupe */
#page-header #search-box .button.button-search{
border-radius: 0;
border-left: 1px solid var(--color05);
}
/* engrenage */
#page-header #search-box .button.button-search-end{
border-radius: 0;
border-left: 1px solid var(--color05);
}
/* Langue: séparée de 5px, 4 coins, moins large */
#page-header #search-box .button.button-lang{
width: auto !important;
min-width: 36px; /* réduit vs 44 */
padding: 0 9px; /* réduit */
margin-left: 5px;
border-radius: 6px;
text-decoration: none;
font-weight: 700;
font-size: 12px;
letter-spacing: .02em;
}
#page-header #search-box .button:hover{
background: var(--color05) !important;
color: var(--color11);
}
/* SVG icons */
#page-header #search-box .button .icon{
width: 14px;
height: 14px;
fill: var(--color12);
transition: fill .15s ease;
}
#page-header #search-box .button:hover .icon,
#page-header #search-box:focus-within .button .icon{
fill: var(--color01);
}
/* ----- 3) Onglets (3 items) — uniquement .navbar-tabs ----- */
#page-header .navbar-tabs > .inner{
position: relative;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* UL */
#page-header .navbar-tabs > .inner > ul.linklist{
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 18px;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* supprimer “bulletin dots” de phpBB */
#page-header .navbar-tabs > .inner > ul.linklist.bulletin > li:before{
content: none !important;
display: none !important;
}
#page-header .navbar-tabs > .inner > ul.linklist > li{
margin: 0 !important;
padding: 0 !important;
}
/* liens */
#page-header .navbar-tabs > .inner > ul.linklist a{
position: relative;
display: inline-flex;
align-items: center;
padding: 10px 2px; /* réduit l'espace vertical, et underline au bord */
line-height: 1.2;
text-decoration: none;
font-weight: 600;
font-size: 15px;
border-bottom: 0 !important;
color: var(--color12); /* inactif plus sombre */
transition: color .15s ease;
}
/* underline collée au bas */
#page-header .navbar-tabs > .inner > ul.linklist a::after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: transparent;
border-radius: 999px;
transition: background-color .15s ease;
}
#page-header .navbar-tabs > .inner > ul.linklist a:hover{
color: var(--color11);
}
#page-header .navbar-tabs > .inner > ul.linklist a:hover::after{
background: rgba(240, 246, 252, 0.18);
}
#page-header .navbar-tabs > .inner > ul.linklist > li.active > a{
color: var(--color11);
}
#page-header .navbar-tabs > .inner > ul.linklist > li.active > a::after{
background: var(--tab-accent);
}
/* ----- 4) Responsive: tablette puis mobile ----- */
/* Tablette/écran étroit: garder search à droite (pas de wrap) */
@media (max-width: 1100px){
#page-header .headerbar > .inner{
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: 10px;
overflow: hidden;
}
#page-header #site-description.site-description{ min-width: 0; }
#page-header .site-text{ min-width: 0; }
#page-header .site-description h1{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#page-header #search-box{
justify-self: end;
margin-left: 0 !important; /* grid gère le placement */
}
}
/* Mobile réel */
@media (max-width: 700px){
#page-header .site-logo-img{
width: 32px !important;
height: 32px !important;
}
#page-header .site-description h1{
font-size: 22px !important;
line-height: 1.1;
}
#page-header .navbar-tabs > .inner > ul.linklist a{
font-size: 90%;
}
/* cacher input + engrenage, garder loupe + langue */
#page-header #search-box .inputbox.search{ display: none !important; }
#page-header #search-box .button.button-search-end{ display: none !important; }
/* loupe indépendante */
#page-header #search-box .button.button-search{
border-radius: 6px;
border-left: 1px solid var(--color05) !important;
}
#page-header #search-box .button.button-lang{
border-radius: 6px !important;
margin-left: 5px !important;
}
}
.logo-phi {
width: 42px;
height: 42px;
background: var(--color01);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transform: translateY(2px);
}
.logo-phi .phi {
color: #FFFFFF;
font-size: 29px; /* 42px * 0.7 pour garder les proportions */
font-weight: bold;
font-family: 'Georgia', serif;
transform: rotate(0deg);
line-height: 1;
}