outside .codebox */
.postbody .content > code,
.postbody .content code:not(.codebox code):not(.bcodebox code) {
font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
font-size: 0.88em;
padding: 2px 6px;
border-radius: 4px;
border: 1px solid rgba(128,128,128,0.4);
background-color: rgba(110,118,129,0.2);
color: var(--codebox-color);
white-space: pre-wrap;
word-break: break-word;
}
.attachbox {
background-color: var(--color02);
border-color: var(--color05);
}
.pm-message .attachbox {
background-color: var(--color02);
}
.attachbox dd {
border-top-color: var(--color05);
}
.attachbox p, .attachbox p.stats {
color: var(--color11);
}
.attach-image img {
border-color: var(--color05);
}
.attach-image img:hover {
border-color: var(--color06);
}
dl.file dd {
color: var(--color11);
}
dl.thumbnail img {
border-color: var(--color04);
background-color: var(--color04);
}
dl.thumbnail dt a:hover {
background-color: var(--color04);
}
dl.thumbnail dt a img:hover {
border-color: var(--color05);
}
fieldset.polls dl {
border-top-color: var(--color05);
color: var(--color11);
}
fieldset.polls dl.voted, fieldset.polls dd div {
color: var(--color11);
}
.pollbar1, .pollbar2, .pollbar3, .pollbar4, .pollbar5 {
background-color: var(--color10);
border-bottom-color: var(--color10);
border-right-color: var(--color10);
}
.rtl .pollbar1, .rtl .pollbar2, .rtl .pollbar3, .rtl .pollbar4, .rtl .pollbar5 {
border-right-color: transparent;
border-left-color: var(--color10);
}
.postprofile {
color: var(--color11);
border-color: var(--color04);
}
.postprofile strong {
color: var(--color13);
}
.online {
background-image: var(--online);
}
.offline {
background-image: var(--offline);
}
dd.profile-warnings {
color: var(--color09);
}
.button {
background-color: var(--color04);
background-image: none;
border-color: var(--color05);
box-shadow: none;
color: var(--color01);
}
.button:hover, .button:focus {
background-color: var(--color05);
background-image: none;
border-color: var(--color05);
color: var(--color11);
text-shadow: none;
}
.button .icon, .button-secondary {
background-color: var(--color04);
background-image: none;
border-color: var(--color05);
box-shadow: none;
color: var(--color12);
}
.button:focus .icon, .button:hover .icon, .button-secondary:hover, .button-secondary:focus, .button-search:hover, .button-search-end:hover {
background-color: var(--color05);
background-image: none;
border-color: var(--color05);
color: var(--color01);
text-shadow: none;
}
.caret {
border-color: var(--color05);
}
.contact-icons a {
border-color: var(--color05);
}
.contact-icons a:hover {
background-color: var(--color05);
}
.row-item[class*=_read], .row-item[class*=_unread], .forum_link, .topic_moved {
background-image: none;
}
.row-item[class*=_read]:before, .forum_link:before, .topic_moved:before {
background-color: var(--color05);
}
.row-item[class*=_unread]:before {
background-color: var(--color01);
}
.pagination li a {
background-color: var(--color04);
background-image: none;
border-color: var(--color05);
box-shadow: none;
color: var(--color12);
}
.pagination li.ellipsis span {
background: 0 0;
color: var(--color11);
}
.pagination li span {
background: var(--color05);
border-color: var(--color05);
color: var(--color12);
}
.pagination li.active span {
background: var(--color05);
border-color: var(--color05);
color: var(--color01);
}
.pagination li a:hover, .pagination li a:hover .icon, .pagination .dropdown-visible a.dropdown-trigger, .nojs .pagination .dropdown-container:hover a.dropdown-trigger {
border-color: var(--color05);
background-color: var(--color05);
background-image: none;
text-shadow: none;
color: var(--color11);
}
.search-header, .search-box .inputbox, .search-box .inputbox:hover, .search-box .inputbox:focus {
border-color: var(--color05);
}
.search-header {
box-shadow: none;
}
.search-results li:hover, .search-results li.active {
background-color: var(--color05);
}
.contact-icon {
background-image: var(--contact-icon);
}
.panel-container h3, .panel-container hr, .cp-menu hr {
border-color: var(--color03);
}
.panel-container .panel li.row {
background-color: var(--color04);
border-bottom-color: var(--color04);
border-top-color: var(--color04);
}
.panel-container .panel li.row:hover {
background-color: var(--color05);
border-bottom-color: var(--color05);
border-top-color: var(--color05);
}
ul.cplist {
border-top-color: var(--color04);
}
.panel-container .panel li.header dd, .panel-container .panel li.header dt {
color: var(--color11);
}
.panel-container table.table1 thead th {
border-bottom-color: var(--color03);
color: var(--color11);
}
.cp-main .pm-message {
background-color: var(--color02);
border-color: var(--color05);
}
.tabs .tab>a {
background: var(--color04);
color: var(--color13);
}
.tabs .tab>a:hover {
background: var(--color05);
color: var(--color01);
}
.tabs .activetab>a, .tabs .activetab>a:hover {
background-color: var(--color03);
background-image: none;
border-color: var(--color03);
box-shadow: none;
color: var(--color01);
}
.minitabs .tab>a {
background: var(--color05);
color: var(--color13);
}
.minitabs .tab>a:hover {
background: var(--color06);
color: var(--color01);
}
.minitabs .activetab>a, .minitabs .activetab>a:hover {
background-color: var(--color04);
background-image: none;
border-color: var(--color04);
color: var(--color01);
}
.responsive-tab .responsive-tab-link:before {
border-color: var(--color11);
}
.responsive-tab .responsive-tab-link:hover:before {
border-color: var(--color01);
}
.navigation a, .rtl .navigation a {
background: var(--color05);
background-image: none;
color: var(--color13);
}
.navigation a:hover, .rtl .navigation a:hover {
background: var(--color06);
color: var(--color01);
}
.navigation .active-subsection a, .navigation .active-subsection a:hover {
background-color: var(--color04);
background-image: none;
border-color: var(--color04);
color: var(--color01);
}
@media only screen and (max-width:900px), only screen and (max-width:900px) {
#navigation a, .rtl #navigation a {
background: var(--color04);
}
#navigation a:hover, .rtl #navigation a:hover {
background: var(--color05);
}
}
.panel-container h2 {
color: var(--color11);
}
.panel-container .panel, .cp-main .pm {
background-color: var(--color04);
}
.cp-mini {
background-color: var(--color02);
}
dl.mini dt {
color: var(--color11);
}
.current {
color: var(--color11) !important;
}
.pmlist li.pm_message_reported_colour, .pm_message_reported_colour {
border-left-color: crimson;
border-right-color: crimson;
}
.pmlist li.pm_marked_colour, .pm_marked_colour {
border-color: coral;
}
.pmlist li.pm_replied_colour, .pm_replied_colour {
border-color: gray;
}
.pmlist li.pm_friend_colour, .pm_friend_colour {
border-color: royalblue;
}
.pmlist li.pm_foe_colour, .pm_foe_colour {
border-color: black;
}
.gallery label {
background: var(--color03);
border-color: var(--color04);
}
.gallery label:hover {
background: var(--color05);
border-color: var(--color06);
}
select, input {
background-color: var(--color04);
border-color: var(--color05);
color: var(--color13);
}
select:hover, input:hover {
background-color: var(--color05);
border-color: var(--color05);
}
select:hover option {
background-color: var(--color05);
border-color: var(--color05);
}
select>option:hover {
background-color: var(--color06);
}
label {
color: var(--color11);
}
option.disabled-option {
color: var(--color11);
}
option:hover, dd label {
color: var(--color13);
}
fieldset.fields1 {
background-color: transparent;
}
fieldset dl:hover dt label {
color: var(--color11);
}
fieldset.fields2 dl:hover dt label {
color: inherit;
}
fieldset.quick-login input.inputbox {
background-color: var(--color04);
color: var(--color11);
}
fieldset.quick-login input.inputbox:hover {
background-color: var(--color05);
color: var(--color11);
}
.message-box textarea {
color: var(--color11);
}
.message-box textarea.drag-n-drop {
outline-color: var(--color11);
}
.message-box textarea.drag-n-drop-highlight {
outline-color: var(--color06);
}
.inputbox {
background-color: var(--color04);
border-color: var(--color05);
color: var(--color11);
}
.inputbox:hover, .inputbox:focus {
background-color: var(--color05);
border-color: var(--color05);
color: var(--color11);
}
.inputbox::placeholder {
color: var(--color13);
}
a.button1, a.button2, input.button1, input.button2, input.button3 {
background-color: var(--color04);
background-image: none;
border-color: var(--color05);
box-shadow: none;
color: var(--color01);
}
a.button1, a.button2 {
color: var(--color11);
}
a.button1, input.button1 {
border-color: var(--color05);
}
input.button3 {
background-image: none;
}
a.button1:hover, a.button2:hover, input.button1:hover, input.button2:hover, input.button3:hover {
background-color: var(--color05);
background-image: none;
border-color: var(--color05);
color: var(--color12);
text-shadow: none;
}
input.button1:focus, input.button2:focus, input.button3:focus {
background-color: var(--color04);
background-image: none;
border-color: var(--color05);
text-shadow: none;
}
input.disabled {
color: var(--color09);
}
.phpbb_alert {
background-color: var(--color02);
border-color: var(--color03);
}
.darken {
background-color: var(--color13);
}
.loading_indicator {
background-color: var(--color04);
background-image: url("./images/loading.svg");
}
.dropdown-extended ul li {
border-top-color: var(--color05);
}
.dropdown-extended ul li:hover {
background-color: var(--color05);
color: var(--color11);
}
.dropdown-extended .header, .dropdown-extended .footer {
border-color: var(--color04);
color: var(--color11);
}
.dropdown-extended .header {
background-color: var(--color04);
background-image: none;
text-shadow: none;
}
.dropdown-extended .bg1, .dropdown-extended .bg2 {
background-color: var(--color04);
border-color: var(--color04);
}
.dropdown .pointer {
border-color: var(--color05) transparent;
}
.dropdown .pointer-inner, .dropdown-extended .pointer-inner {
border-color: var(--color04) transparent;
}
.dropdown .dropdown-contents {
background: var(--color04);
border-color: var(--color05);
}
.dropdown li, .dropdown li.separator, .dropdown li li {
border-color: var(--color05);
}
.dropdown li:hover {
background-color: var(--color05);
}
.dropdown li:hover.page-jump-form {
background-color: transparent;
}
.dropdown li.switch-item:hover {
background-color: transparent;
border-color: transparent;
}
.notification_list p.notification-time {
color: var(--color11);
}
li.notification-disapproved strong, li.notification-reported strong {
color: var(--color09);
}
.badge {
background-color: var(--color09);
color: var(--color15);
}
.switch-theme i:before {
content: var(--switch-light-dark);
}
#phpbb .cc-btn {
background-color: var(--color09);
border: 1px solid var(--color08);
color: var(--color11);
}
#phpbb .cc-btn:hover, #phpbb .cc-btn:focus {
background-color: var(--color08);
border: 1px solid var(--color08);
color: var(--color11);
}
#phpbb .cc-message, #phpbb .cc-link, #phpbb .cc-link:hover, #phpbb .cc-link:focus {
color: var(--color12);
}
/* Extension Board Annoucements 1.1.1 ( https://www.phpbb.com/customise/db/extension/boardannouncements/ ) */
.prosilver_fr .phpbb_announcement {
background-color: var(--color10);
}
.prosilver_fr .phpbb_announcement div {
color: var(--color12);
}
/* Extension Board Rules 2.1.3 ( https://www.phpbb.com/customise/db/extension/boardrules/ )*/
.prosilver_fr .boardrules-container .content {
background-color: var(--color03);
}
.prosilver_fr .boardrules-categories .mini-panel {
background-color: var(--color03);
}
.prosilver_fr .boardrules-categories .mini-panel h3 {
color: var(--color11);
}
.prosilver_fr .boardrules-menu {
border-top: 1px solid var(--color05);
}
.prosilver_fr .highlight {
background-color: var(--color10);
color: var(--color13);
}
/* Extension Collapsible Forum Categories 2.0.1 ( https://www.phpbb.com/customise/db/extension/collapsible_forum_categories/ ) */
.prosilver_fr .collapse-btn .fa-minus-square:before, .prosilver_fr .collapse-btn .fa-plus-square:before {
color: var(--color12);
}
.prosilver_fr .collapse-btn:hover .fa-minus-square:before, .prosilver_fr .collapse-btn:hover .fa-plus-square:before {
color: var(--color01);
}
/* ===== Custom Topic Title Colors ===== */
/* Sticky topics (épinglés) — JAUNE */
ul.topiclist.topics li.sticky dt a.topictitle {
color: #ffcc33 !important;
font-weight: bold;
}
/* Announcement & Global Announcement — ROUGE */
ul.topiclist.topics li.announce dt a.topictitle,
ul.topiclist.topics li.global-announce dt a.topictitle {
color: #ff4444 !important;
font-weight: bold;
}
/* ============================================================================
MERMAID – lignes et flèches : noir en clair, blanc en sombre
========================================================================== */
/* Couleur par défaut : thème clair */
:root {
--mermaid-stroke-color: #000000;
}
/* Override en thème sombre (data-theme="dark" posé sur ou ) */
[data-theme="dark"] {
--mermaid-stroke-color: #ffffff;
}
/* Lignes principales (edges) */
.mermaid svg path,
.mermaid svg line,
.mermaid svg polyline {
stroke: var(--mermaid-stroke-color) !important;
}
/* Éviter de remplir les tracés qui sont déjà définis comme "sans remplissage" */
.mermaid svg path[fill="none"],
.mermaid svg polyline[fill="none"] {
fill: none !important;
}
/* Pointes de flèches (markers) */
.mermaid svg marker path,
.mermaid svg marker polygon,
.mermaid svg .arrowheadPath,
.mermaid svg .marker {
stroke: var(--mermaid-stroke-color) !important;
fill: var(--mermaid-stroke-color) !important;
}
/* ============================================================================
BBCode TABLE – styles scientifiques (SCI-1 / SCI-2 / SCI-3)
========================================================================== */
.bbcode-table {
border-collapse: collapse;
margin: 1em 0;
max-width: 100%;
font-size: 0.95rem;
}
/* cellules de base */
.bbcode-table td,
.bbcode-table th {
padding: 6px 10px;
}
/* ===================== SCI-1 : grille propre ===================== */
.bbcode-table-sci1 td,
.bbcode-table-sci1 th {
border: 1px solid var(--color05);
}
.bbcode-table-sci1 th {
background: var(--color02);
font-weight: bold;
text-align: center;
}
/* Zébrage des lignes */
.bbcode-table-sci1 tr:nth-child(odd) td {
background: var(--color01);
}
/* Mode sombre – ajustement des contrastes */
@media (prefers-color-scheme: dark) {
.bbcode-table-sci1 td,
.bbcode-table-sci1 th {
border-color: var(--color07);
}
.bbcode-table-sci1 th {
background: var(--color03);
}
.bbcode-table-sci1 tr:nth-child(odd) td {
background: var(--color02);
}
}
/* ===================== SCI-2 : "booktabs" (horizontales only) ===================== */
.bbcode-table-sci2 {
border-collapse: collapse;
}
.bbcode-table-sci2 td,
.bbcode-table-sci2 th {
border: none;
padding: 6px 12px;
}
.bbcode-table-sci2 th {
font-weight: bold;
text-align: center;
}
/* lignes horizontales comme en articles scientifiques */
.bbcode-table-sci2 tr:first-child th {
border-bottom: 2px solid var(--color05);
}
.bbcode-table-sci2 tr:last-child td {
border-top: 1px solid var(--color05);
}
.bbcode-table-sci2 tr:nth-child(n+2):nth-last-child(n+2) td {
border-bottom: 1px solid var(--color04);
}
/* Mode sombre */
@media (prefers-color-scheme: dark) {
.bbcode-table-sci2 tr:first-child th {
border-bottom-color: var(--color07);
}
.bbcode-table-sci2 tr:last-child td {
border-top-color: var(--color07);
}
.bbcode-table-sci2 tr:nth-child(n+2):nth-last-child(n+2) td {
border-bottom-color: var(--color05);
}
}
/* ===================== SCI-3 : données compactes ===================== */
.bbcode-table-sci3 {
border-collapse: collapse;
font-family: "Consolas", "Courier New", monospace;
}
.bbcode-table-sci3 td,
.bbcode-table-sci3 th {
border: 1px solid var(--color05);
padding: 4px 8px;
white-space: nowrap;
}
.bbcode-table-sci3 th {
background: var(--color02);
font-weight: bold;
text-align: right;
}
/* aligner à droite par défaut (valeurs numériques) */
.bbcode-table-sci3 td {
text-align: right;
}
/* Mode sombre */
@media (prefers-color-scheme: dark) {
.bbcode-table-sci3 td,
.bbcode-table-sci3 th {
border-color: var(--color07);
}
.bbcode-table-sci3 th {
background: var(--color03);
}
}
/* ============================================================================
Police principale du forum (corps de texte)
========================================================================== */
body,
.postbody,
.content {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
}
/* On garde une police monospace pour le code */
.codebox code,
.codebox pre,
pre,
code {
font-family: "Consolas", "Courier New", monospace;
}
/* ============================================================================
Taille de police plus confortable dans les messages
========================================================================== */
.postbody,
.content {
font-size: 1.08rem !important; /* ≈ 17–18 px selon le navigateur */
line-height: 1.6; /* lignes plus aérées */
}
/* Les listes dans les messages suivent la même taille */
.postbody li,
.content li {
font-size: 1em !important;
margin-bottom: 0.4em;
}
.postbody ul,
.postbody ol,
.content ul,
.content ol {
margin-bottom: 0.4em;
}
/* ============================================================================
Réduction des titres dans les messages (après augmentation du texte)
========================================================================== */
.postbody h1,
.content h1 {
font-size: 1.80rem !important;
font-weight: 700;
}
.postbody h2,
.content h2 {
font-size: 1.50rem !important;
font-weight: 700;
}
.postbody h3,
.content h3 {
font-size: 1.30rem !important;
font-weight: 700;
}
.postbody h4,
.content h4 {
font-size: 1.15rem !important;
font-weight: 700;
}
.postbody h5,
.content h5 {
font-size: 1.00rem !important;
font-weight: 700;
}
/* ============================================================================
Citation moderne (quote) — style identique au viewer Astro
========================================================================== */
blockquote {
border: none;
border-left: 4px solid #FF9F0A;
background: var(--color02);
padding: 12px 18px;
margin: 1.2em 0;
border-radius: 4px;
color: inherit;
}
blockquote p {
margin: 0.4em 0;
}
/* Remove phpBB native quote icon */
blockquote cite:before,
.uncited:before {
content: none !important;
display: none !important;
}
/* Remove phpBB native left margin */
blockquote.uncited {
margin-left: 0;
}
/* ============================================================================
Bouton Math CKEditor — icône ∑
========================================================================== */
.cke_button__bbcodemath_icon {
background: none !important;
background-image: none !important;
width: 16px !important;
height: 16px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
}
.cke_button__bbcodemath_icon::before {
content: "∑";
font-family: "Times New Roman", serif;
font-size: 15px;
font-style: italic;
font-weight: bold;
line-height: 1;
display: block;
}
html[data-theme="light"] .cke_button__bbcodemath_icon::before {
color: #444;
}
html[data-theme="dark"] .cke_button__bbcodemath_icon::before {
color: #ccc;
}
/* ============================================================================
BBCode [spoiler] — Bloc repliable
========================================================================== */
.spoiler-block {
margin: 1em 0;
border: 1px solid var(--color05);
border-radius: 6px;
overflow: hidden;
}
/* Bouton d’en-tête du spoiler */
.spoiler-header {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
text-align: left;
padding: 8px 10px;
background: var(--color02);
cursor: pointer;
user-select: none;
font-weight: 600;
font-size: 0.95rem;
border: none;
color: var(--color01); /* texte + flèche en bleu */
transition: background 0.18s ease; /* hover doux */
}
/* Hover léger sur la barre */
.spoiler-header:hover {
background: var(--color03);
}
/* Supprimer la grosse bordure blanche de focus */
.spoiler-header:focus {
outline: none;
box-shadow: none;
}
/* Petit span pour la flèche animée (plus grosse) */
.spoiler-arrow {
display: inline-block;
font-size: 1.25rem; /* flèche plus grande */
line-height: 1;
transition: transform 0.2s ease;
}
/* Quand le spoiler est ouvert, on fait pivoter la flèche */
.spoiler-block.is-open .spoiler-arrow {
transform: rotate(90deg);
}
/* Contenu caché par défaut */
.spoiler-content {
max-height: 0;
overflow: hidden;
padding: 0 10px;
transition: max-height 0.28s ease, padding 0.28s ease;
}
/* Quand le spoiler est ouvert */
.spoiler-block.is-open .spoiler-content {
max-height: 2000px; /* largement suffisant */
padding: 10px;
}
/* Titre optionnel du spoiler */
.spoiler-title {
color: #555;
}
@media (prefers-color-scheme: dark) {
.spoiler-title {
color: #bbb;
}
}
/* Mode sombre */
@media (prefers-color-scheme: dark) {
.spoiler-header {
background: var(--color03);
}
.spoiler-header:hover {
background: var(--color04);
}
}
/* ============================================================================
TITRES DANS LES MESSAGES
========================================================================= */
.postbody h1,
.postbody h2,
.postbody h3,
.postbody h4,
.content h1,
.content h2,
.content h3,
.content h4 {
display: block !important; /* empêche h3/h4 inline */
clear: both; /* évite les effets de float */
margin: 0.9em 0 0.45em !important;
line-height: 1.25 !important;
text-align: left;
}
.postbody .bb-h,
.content .bb-h {
display: block; /* empêche "Titre2Titre3" collés */
margin: 0.9em 0 0.45em;
line-height: 1.25;
font-weight: 700;
}
.postbody .bb-h1, .content .bb-h1 { font-size: 1.80rem !important; font-weight: 700 !important; }
.postbody .bb-h2, .content .bb-h2 { font-size: 1.50rem !important; font-weight: 700 !important; }
.postbody .bb-h3, .content .bb-h3 { font-size: 1.30rem !important; font-weight: 700 !important; }
.postbody .bb-h4, .content .bb-h4 { font-size: 1.15rem !important; font-weight: 700 !important; }
.postbody .bb-h5, .content .bb-h5 { font-size: 1.00rem !important; font-weight: 700 !important; }
/* Si ton thème a un reset agressif, ceci neutralise */
.postbody h1.bb-h, .postbody h2.bb-h, .postbody h3.bb-h, .postbody h4.bb-h,
.content h1.bb-h, .content h2.bb-h, .content h3.bb-h, .content h4.bb-h {
text-align: left;
}
/* ==========================================================================
Messages — h2 (BBCode titres) : enlever le souligné pleine largeur
========================================================================== */
.postbody h2,
.content h2 {
border-bottom: none !important;
box-shadow: none !important;
background: none !important;
padding-bottom: 0 !important;
/* marges harmonisées (ajuste si tu veux) */
margin: 0.85em 0 0.45em !important;
/* évite certains styles de titre UI */
text-decoration: none !important;
}
.postbody h2,
.content h2 {
margin-top: 0.6em !important;
margin-bottom: 0.35em !important;
line-height: 1.25 !important;
}
.postbody h3,
.content h3{
margin-top: 0.6em !important;
margin-bottom: 0.35em !important;
line-height: 1.25 !important;
}
.postbody h1,
.postbody h2,
.postbody h3,
.postbody h4,
.content h1,
.content h2,
.content h3,
.content h4 {
line-height: 1.25;
}
/* ============================================================================
TABLES DANS LES MESSAGES — STYLE GITHUB STRICT (clair / sombre)
Pair / impair INVERSÉS
========================================================================= */
/* Base table */
.postbody table,
.content table {
width: 100%;
margin: 16px 0;
border-collapse: collapse;
background: var(--table-bg);
border: 1px solid var(--table-border);
color: var(--table-text);
font-size: 0.95rem;
}
/* Cellules */
.postbody table th,
.postbody table td,
.content table th,
.content table td {
padding: 8px 12px;
border: 1px solid var(--table-border);
text-align: left;
}
/* =========================================================
EN-TÊTE
========================================================= */
.postbody table thead th,
.content table thead th,
.postbody table tr:first-child > th,
.postbody table tr:first-child > td,
.content table tr:first-child > th,
.content table tr:first-child > td {
background: var(--table-header-bg);
color: var(--table-header-text);
font-weight: 600;
}
/* =========================================================
ZÉBRAGE — PAIR / IMPAIR INVERSÉS
========================================================= */
/* LIGNES IMPAIRES → couleur GitHub alternée */
.postbody table tbody tr:nth-child(odd),
.content table tbody tr:nth-child(odd),
.postbody table tr:nth-child(odd),
.content table tr:nth-child(odd) {
background: var(--table-row-alt);
}
/* LIGNES PAIRES → fond normal */
.postbody table tbody tr:nth-child(even),
.content table tbody tr:nth-child(even),
.postbody table tr:nth-child(even),
.content table tr:nth-child(even) {
background: var(--table-bg);
}
/* =========================================================
VARIABLES — TOKENS GITHUB STRICT
========================================================= */
/* MODE CLAIR — GitHub Light */
html[data-theme="light"] {
--table-bg: #ffffff;
--table-border: #d0d7de;
--table-text: #24292f;
--table-header-bg: #f6f8fa;
--table-header-text: #24292f;
--table-row-alt: #f6f8fa;
}
/* MODE SOMBRE — GitHub Dark */
html[data-theme="dark"] {
--table-bg: #0d1117;
--table-border: #30363d;
--table-text: #c9d1d9;
--table-header-bg: #161b22;
--table-header-text: #c9d1d9;
--table-row-alt: #161b22;
}
/* BBCode sub/sup — rendu final */
.postbody sup, .content sup,
.postbody sub, .content sub {
font-size: 0.75em;
line-height: 0;
}
/* ========================================================================
BOUTONS – style GitHub (bords fins, hover subtil)
===================================================================== */
.button,
.button1,
.button2,
.button3,
a.button1,
a.button2,
input.button1,
input.button2,
input.button3 {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 12px;
border-radius: 6px;
background-color: var(--btn-bg);
border: 1px solid var(--btn-border);
color: var(--btn-text);
font-weight: 500;
font-size: 0.95rem;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
text-shadow: none;
transition:
background-color 0.15s ease,
border-color 0.15s ease,
color 0.15s ease,
box-shadow 0.15s ease,
transform 0.05s ease;
}
.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-color: var(--btn-bg-hover);
border-color: var(--btn-border);
color: var(--btn-text);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
transform: translateY(-1px);
}
/* Variante "primaire" – par défaut phpBB utilise .button1 comme action principale */
a.button1,
input.button1 {
background-color: var(--btn-primary-bg);
border-color: var(--btn-primary-bg);
color: var(--btn-primary-text);
}
a.button1:hover,
input.button1:hover {
background-color: color-mix(in srgb, var(--btn-primary-bg) 92%, #ffffff 8%);
border-color: var(--btn-primary-bg);
color: var(--btn-primary-text);
}
/* Icône dans les boutons */
.button .icon,
.button1 .icon,
.button2 .icon {
margin-right: 4px;
}
/* ========================================================================
CODE BLOCKS – style GitHub (fond sombre, bordure fine, padding)
===================================================================== */
.codebox {
background-color: var(--code-bg);
border: 1px solid var(--code-border);
border-radius: 6px;
padding: 0;
overflow: hidden;
}
/* En-tête "Code:" */
.codebox p {
margin: 0;
padding: 6px 10px;
border-bottom: 1px solid var(--code-border);
background-color: rgba(240, 246, 252, 0.05); /* discret en clair & sombre */
color: var(--code-text);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Contenu code */
.codebox code,
.codebox pre,
pre code,
pre {
background: transparent;
color: var(--code-text);
font-family: "Consolas", "Courier New", monospace;
font-size: 0.9rem;
line-height: 1.5;
white-space: pre;
}
/* padding interne – on cible le 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;
}
/* ========================================================================
[bcode] – bloc de code custom (style identique au viewer Astro)
======================================================================== */
.bcodebox {
background: #0d1117;
border: 1px solid #30363d;
border-radius: 8px;
padding: 0;
margin: 14px 0;
position: relative;
display: flex;
flex-direction: column;
}
.bcodebox--lang {
max-height: 280px;
}
.bcodebox-header {
display: none;
}
.bcodebox--lang .bcodebox-header {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 10px;
min-height: 24px;
position: sticky;
top: 0;
z-index: 1;
background: #0d1117;
border-bottom: 1px solid rgba(48, 54, 61, 0.65);
}
.bcodebox-lang {
font-family: "Consolas", "Courier New", monospace;
font-size: 0.72rem;
color: #8b949e;
text-transform: lowercase;
letter-spacing: 0.03em;
pointer-events: none;
user-select: none;
flex: 0 0 auto;
}
.bcodebox-actions {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.bcodebox-btn {
background: transparent;
border: 1px solid #444c56;
border-radius: 4px;
color: #8b949e;
font-size: 0.72rem;
font-family: Arial, sans-serif;
padding: 2px 7px;
cursor: pointer;
transition: opacity 0.15s, color 0.15s, border-color 0.15s, background-color 0.15s;
user-select: none;
line-height: 1.4;
white-space: nowrap;
flex: 0 0 auto;
}
.bcodebox-copy {
opacity: 0;
}
.bcodebox--lang:hover .bcodebox-copy {
opacity: 1;
}
.bcodebox-btn:hover {
color: #e6edf3;
border-color: #8b949e;
}
.bcodebox-btn.active {
color: #e6edf3;
border-color: #e6edf3;
}
.bcodebox-copy.copied {
color: #3fb950;
border-color: #3fb950;
opacity: 1;
}
.bcodebox pre {
margin: 0;
padding: 14px 16px;
overflow-y: auto;
overflow-x: auto;
box-sizing: border-box;
flex: 1 1 auto;
min-height: 0;
}
.bcodebox pre code {
background: transparent;
color: #c9d1d9;
font-family: "Consolas", "Courier New", monospace;
font-size: 0.88rem;
line-height: 1.5;
padding: 0;
display: block;
white-space: pre !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
.bcodebox--lang.is-wrap pre code {
white-space: pre-wrap !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
min-width: 0 !important;
}
.bcodebox--lang.is-nowrap pre code,
.bcodebox--plain pre code {
white-space: pre !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
.bcodebox--lang.is-nowrap pre code {
min-width: max-content;
}
/* highlight.js inside bcodebox */
.bcodebox pre code.hljs {
background: transparent !important;
color: #c9d1d9;
padding: 0;
}
/* Scrollbars discrètes — uniquement avec langage */
.bcodebox--lang pre::-webkit-scrollbar {
width: 5px;
height: 10px;
}
.bcodebox--lang pre::-webkit-scrollbar-track {
background: transparent;
}
.bcodebox--lang pre::-webkit-scrollbar-thumb {
background: rgba(139, 148, 158, 0.3);
border-radius: 999px;
}
.bcodebox--lang pre::-webkit-scrollbar-thumb:hover {
background: rgba(139, 148, 158, 0.6);
}
.bcodebox--lang pre {
scrollbar-width: thin;
scrollbar-color: rgba(139, 148, 158, 0.3) transparent;
}
/* Scrollbars — mode clair */
html[data-theme="light"] .bcodebox--lang pre::-webkit-scrollbar-thumb {
background: rgba(80, 100, 120, 0.25);
}
html[data-theme="light"] .bcodebox--lang pre::-webkit-scrollbar-thumb:hover {
background: rgba(80, 100, 120, 0.5);
}
html[data-theme="light"] .bcodebox--lang pre {
scrollbar-color: rgba(80, 100, 120, 0.25) transparent;
}
/* ========================================================================
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;
}
/* Équations KaTeX trop longues : défilement horizontal au lieu de déborder */
.postbody .katex-display,
.content .katex-display,
#preview .katex-display {
display: block;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.postbody .katex-display > .katex,
.content .katex-display > .katex,
#preview .katex-display > .katex {
display: inline-block;
min-width: max-content;
}
/* ========================================================================
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);
}
/* Bouton "Ajouter des fichiers" : même style vert que les actions principales */
input#add_files.button2 {
background-color: var(--btn-primary-green);
border-color: var(--btn-primary-green);
color: #ffffff !important;
font-weight: 600;
}
input#add_files.button2:hover,
input#add_files.button2:focus {
background-color: var(--btn-primary-green-hover);
border-color: var(--btn-primary-green-hover);
color: #ffffff !important;
}
[data-theme="dark"] input#add_files.button2 {
background-color: var(--btn-primary-green-dark);
border-color: var(--btn-primary-green-dark);
}
[data-theme="dark"] input#add_files.button2:hover,
[data-theme="dark"] input#add_files.button2:focus {
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:not(.bcodebox code),
.content code:not(.bcodebox 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]/[bcode] */
.codebox code,
.bcodebox 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: 0;
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 : cacher le sprite CKEditor */
.message-box .cke_button__bbtable .cke_button_icon {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* Cacher le 2e span description générique */
.message-box .cke_button__bbtable .cke_button_label {
display: none !important;
width: 0 !important;
}
/* Afficher uniquement le 1er span (cke_button__bbtable_label) avec notre PNG */
.message-box .cke_button__bbtable .cke_button__bbtable_label {
display: inline-block !important;
width: 18px !important;
height: 18px !important;
font-size: 0 !important;
line-height: 0 !important;
overflow: hidden !important;
vertical-align: middle !important;
}
.message-box .cke_button__bbtable .cke_button__bbtable_label::before {
content: "" !important;
display: inline-block !important;
width: 16px !important;
height: 16px !important;
background: url("https://sylebel.net/forum/ext/dsr/ckeditor/styles/all/template/js/ckeditor/plugins/bbtable/icons/bbtable_table.png") no-repeat center center !important;
background-size: 16px 16px !important;
vertical-align: middle !important;
}
/* Luminosité selon thème */
html[data-theme="dark"] .message-box .cke_button__bbtable .cke_button__bbtable_label::before { filter: brightness(1.8); }
html[data-theme="light"] .message-box .cke_button__bbtable .cke_button__bbtable_label::before { filter: brightness(0.5); }
/* 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 Bloc repliable (icône ▼)
============================================================ */
.cke_button__spoiler .cke_button_icon {
background: none !important;
}
.cke_button__spoiler .cke_button_icon::before {
content: "▼"; /* triangle plein bas — spoiler repliable */
font-size: 11px;
line-height: 16px;
display: inline-block;
color: currentColor;
}
/* ============================================================
CKEditor — bouton Note à la modération (icône bouclier)
============================================================ */
.cke_button__bbcodemodnote .cke_button_icon {
background: none !important;
background-image: none !important;
width: 16px !important;
height: 16px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
}
.cke_button__bbcodemodnote .cke_button_icon::before {
content: "🛡";
font-size: 16px;
line-height: 1;
display: block;
}
html[data-theme="light"] .cke_button__bbcodemodnote .cke_button_icon::before {
filter: none;
opacity: 0.85;
}
html[data-theme="dark"] .cke_button__bbcodemodnote .cke_button_icon::before {
filter: none;
opacity: 1;
}
/* ── Bloc [modnote] WYSIWYG : stylesé dans phpbb_editor_contents.css ── */
/* ── Bloc [modnote] rendu sur le forum ── */
/* Masqué par défaut — visible seulement si body.is-mod (injecté par main_listener.php) */
.modnote-block {
display: none !important;
background: #fff8e1;
border-left: 4px solid #ff9800;
border-radius: 4px;
padding: 10px 14px;
margin: 8px 0;
font-style: italic;
color: #5d4037;
position: relative;
}
.modnote-block::before {
content: "🛡 Note à la modération";
display: block;
font-weight: bold;
font-style: normal;
font-size: 0.85em;
color: #e65100;
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Afficher pour mods/admins */
body.is-mod .modnote-block {
display: block !important;
}
body.is-mod [data-theme="dark"] .modnote-block,
[data-theme="dark"] body.is-mod .modnote-block {
background: #2d2000;
border-left-color: #ff9800;
color: #ffe0b2;
}
body.is-mod [data-theme="dark"] .modnote-block::before,
[data-theme="dark"] body.is-mod .modnote-block::before {
color: #ffb74d;
}
/* ============================================================
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{
padding: 0 !important;
}
#page-header .navbar-tabs > .inner{
position: relative;
padding: 4px 8px !important;
width: 100%;
max-width: 1150px;
margin: 0 auto;
box-sizing: border-box;
}
/* UL */
#page-header .navbar-tabs > .inner > ul.linklist{
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 18px;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
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: 21px !important;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
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: 16px !important;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
white-space: nowrap;
}
/* 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;
}
/* Form fields: full width on mobile */
fieldset dd,
fieldset.fields1 dd,
fieldset.fields2 dd {
margin-left: 0;
width: 100%;
}
input.inputbox,
textarea.inputbox,
select.inputbox {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
}
.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;
}
/* ================================
phpBB modals / confirmations
================================ */
#darkenwrapper {
z-index: 9998 !important;
}
#darken {
background: rgba(0, 0, 0, 0.65) !important;
backdrop-filter: blur(2px);
}
.phpbb_alert {
background: var(--color04, #1e1e1e) !important;
color: var(--color01, #ffffff) !important;
border: 1px solid var(--color05, #444) !important;
box-shadow: 0 10px 40px rgba(0,0,0,.6) !important;
z-index: 9999 !important;
opacity: 1 !important;
}
.phpbb_alert h3 {
color: var(--color01, #ffffff) !important;
}
.phpbb_alert p {
color: var(--color01, #eaeaea) !important;
}
.phpbb_alert .button1,
.phpbb_alert .button2,
.phpbb_alert input.button1,
.phpbb_alert input.button2 {
background: var(--color05, #3a3a3a) !important;
color: var(--color01, #ffffff) !important;
border: 1px solid var(--color06, #555) !important;
}
.phpbb_alert .button1:hover,
.phpbb_alert .button2:hover {
background: var(--color06, #555) !important;
}
/* ================================
phpBB moderation dialogs — RED
================================ */
#phpbb_confirm,
.phpbb_alert {
background: #8b0000 !important; /* rouge foncé */
color: #ffffff !important;
border: 2px solid #ff4d4d !important;
box-shadow: 0 20px 60px rgba(0,0,0,.85) !important;
}
/* Titre */
.phpbb_alert h3 {
color: #ffffff !important;
font-weight: 700;
letter-spacing: .03em;
}
/* Texte */
.phpbb_alert p {
color: #ffffff !important;
}
/* =====================================
phpBB confirm modal — force button colors
===================================== */
#phpbb_confirm .submit-buttons input.button2,
#phpbb_confirm .submit-buttons input.button1,
#phpbb_confirm .submit-buttons button,
#phpbb_confirm .submit-buttons a.button1,
#phpbb_confirm .submit-buttons a.button2 {
background: #b00000 !important;
background-image: none !important;
color: #ffffff !important;
border: 1px solid #ff8a8a !important;
box-shadow: none !important;
text-shadow: none !important;
appearance: none !important;
-webkit-appearance: none !important;
}
/* Hover */
#phpbb_confirm .submit-buttons input.button2:hover,
#phpbb_confirm .submit-buttons input.button1:hover {
background: #ff1a1a !important;
background-image: none !important;
color: #ffffff !important;
}
/* Focus (accessibilité) */
#phpbb_confirm .submit-buttons input.button2:focus,
#phpbb_confirm .submit-buttons input.button1:focus {
outline: 2px solid #ffffff !important;
outline-offset: 2px !important;
}
/* =====================================
phpBB modal centering
===================================== */
#phpbb_confirm,
#phpbb_alert {
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
max-width: 90vw;
width: 520px;
}
@media (max-width: 600px) {
#phpbb_confirm,
#phpbb_alert {
width: 92vw;
max-width: 92vw;
}
}
/* ==========================================================================
Post images — vertical spacing
========================================================================== */
.postbody img.postimage,
.content img.postimage,
.attach-image img.postimage,
div.inline-attachment img.postimage {
display: block;
margin: 12px auto;
max-width: 100%;
height: auto;
vertical-align: top;
}
.postbody .inline-attachment,
.content .inline-attachment,
.attach-image,
div.inline-attachment {
text-align: center;
}
/* Remove extra space after centered blocks */
.postbody [style*="text-align:center"],
.postbody [style*="text-align: center"],
.content [style*="text-align:center"],
.content [style*="text-align: center"] {
margin-bottom: 0;
padding-bottom: 0;
}
/* ==========================================================================
Responsive iframes (YouTube, etc.)
========================================================================== */
.postbody iframe[src*="youtube"],
.postbody iframe[data-youtube-id],
.content iframe[src*="youtube"],
.content iframe[data-youtube-id] {
max-width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9;
}
/* ==========================================================================
Post/Preview — supprimer les séparateurs vides entre
et –
========================================================================== */
/*
ou
vide immédiatement après
*/
.postbody hr + br,
.content hr + br {
display: none !important;
}
/*
ou vide immédiatement avant un titre */
@supports selector(:has(+ *)) {
.postbody br:has(+ h1), .postbody br:has(+ h2), .postbody br:has(+ h3),
.postbody br:has(+ h4), .postbody br:has(+ h5),
.content br:has(+ h1), .content br:has(+ h2), .content br:has(+ h3),
.content br:has(+ h4), .content br:has(+ h5) {
display: none !important;
}
}
/* Forcer margin-top: 0 sur les titres après
(direct ou après
masqué) */
.postbody hr ~ h1, .postbody hr ~ h2, .postbody hr ~ h3,
.postbody hr ~ h4, .postbody hr ~ h5,
.content hr ~ h1, .content hr ~ h2, .content hr ~ h3,
.content hr ~ h4, .content hr ~ h5 {
margin-top: 0.3rem !important;
padding-top: 0 !important;
}
/* Le
après
ne doit pas prendre de hauteur de ligne */
.postbody hr + br, .content hr + br {
line-height: 0 !important;
height: 0 !important;
}
/* CKEditor actif : masquer l'option "Désactiver les BBCodes" (sans objet avec l'éditeur visuel) */
#options-panel label[for="disable_bbcode"],
#options-panel #disable_bbcode {
display: none !important;
}
/* ── Références bibliographiques [ref] ──────────────────────────────── */
.cdr-ref-sup {
font-size: 0.75em;
vertical-align: baseline;
line-height: 1;
position: relative;
top: -0.4em;
}
.cdr-ref-sup a {
color: var(--color01);
text-decoration: none;
font-weight: 600;
padding: 0 1px;
}
.cdr-ref-sup a:hover {
text-decoration: underline;
}
.cdr-references {
margin-top: 1.5em;
padding-top: 0.75em;
border-top: 1px solid rgba(128,128,128,0.3);
font-size: 0.875rem;
}
.cdr-references-title {
font-weight: 700;
margin-bottom: 0.4em;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.7;
}
.cdr-references-list {
margin: 0;
padding-left: 1.5em;
line-height: 1.8;
opacity: 0.85;
}
.cdr-ref-url {
font-size: 0.85em;
opacity: 0.7;
}
.cdr-ref-url a {
color: var(--color01);
text-decoration: none;
word-break: break-all;
}
.cdr-ref-url a:hover {
text-decoration: underline;
}
/* Inversion des images de forum en mode sombre */
[data-theme="dark"] .forum-image img {
filter: invert(1) hue-rotate(180deg);
mix-blend-mode: screen;
background-color: color-mix(in srgb, var(--color01) 85%, white);
}
/* Inversion des images de forum en mode sombre */
[data-theme="light"] .forum-image img {
background-color: color-mix(in srgb, var(--color01) 90%, black);
}
/* Mode sombre */
[data-theme="dark"] img.avatar-group-default {
filter: invert(1) hue-rotate(180deg);
mix-blend-mode: screen;
background-color: color-mix(in srgb, var(--color01) 85%, white);
}
/* Mode clair */
[data-theme="light"] img.avatar-group-default {
background-color: color-mix(in srgb, var(--color01) 90%, black);
}
/* ── CdR Tags editor ── */
#cdr-tag-editor {
margin-top: 6px;
margin-bottom: 2px;
max-width: 905px;
box-sizing: border-box;
}
#cdr-tag-pills {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 4px;
}
.cdr-tag-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.82em;
border: 1px solid var(--color05);
background: var(--color04);
color: var(--color11);
}
.cdr-tag-pill--doc { background: #1a3a5c; border-color: #2a6aac; color: #7ec8e3; }
.cdr-tag-pill--concept { background: #1a3a1a; border-color: #2a6a2a; color: #7ec87e; }
.cdr-tag-pill--other { background: #3a2a1a; border-color: #6a4a2a; color: #c8a87e; }
.cdr-tag-pill__remove { cursor: pointer; opacity: 0.6; }
.cdr-tag-pill__remove:hover { opacity: 1; }
#cdr-tag-input-wrap {
position: relative;
width: 100%;
}
#cdr-tag-input {
width: 100%;
box-sizing: border-box;
}
#cdr-tag-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1000;
display: none;
background: var(--color04);
border: 1px solid var(--color05);
border-radius: 4px;
max-height: 220px;
overflow-y: auto;
}
.cdr-tag-suggestion {
padding: 5px 10px;
cursor: pointer;
font-size: 0.88em;
color: var(--color11);
}
.cdr-tag-suggestion:hover,
.cdr-tag-suggestion.active { background: var(--color05); }
.cdr-tag-suggestion__type {
font-size: 0.75em;
opacity: 0.6;
margin-left: 6px;
}
.cdr-tag-pill--free { background: #3a1a3a; border-color: #7a3a7a; color: #d87ed8; }
.cdr-tag-suggestion--create { font-style: italic; color: var(--color01); }
/* topictags - row-item-link positioning */
.topiclist.topics li.row { position: relative; }
/* topictags - row-item-link */
.topiclist.topics li.row dl.row-item dt { position: relative; }
/* topictags - position bouton topic */
#page-body .topiclist.topics dl.row-item a.row-item-link {
top: 50%;
margin-top: -15px;
}
/* topictags - centrage bouton topic */
.topiclist.topics dl.row-item a.row-item-link {
top: 0 !important;
margin-top: 0 !important;
height: 100% !important;
width: 40px !important;
}
/* topictags - bouton topic dans dt */
.topiclist.topics dl.row-item dt a.row-item-link {
top: 0 !important;
margin-top: 0 !important;
height: 100% !important;
}
/* topictags - position image topic */
.topiclist.topics dl.topic_read,
.topiclist.topics dl.topic_unread,
.topiclist.topics dl.topic_read_hot,
.topiclist.topics dl.topic_unread_hot {
background-position: 10px center !important;
}
/* topictags - hauteur minimum pour icône topic */
.topiclist.topics li.row dl.row-item {
min-height: 36px;
}
/* barre des préfixes */
.forumconfig-subject-prefixes{
display:inline-flex;
flex-wrap:wrap;
gap:4px;
align-items:center;
margin-left:8px;
vertical-align:middle;
}
/* boutons */
.forumconfig-subject-prefix-btn{
min-width:2em;
padding:2px 6px;
line-height:1.1;
text-align:center;
border-radius:4px;
cursor:pointer;
transition:all .12s ease;
}
/* hover */
.forumconfig-subject-prefix-btn:hover{
background:rgba(127,127,127,0.15);
}
/* bouton actif */
.forumconfig-subject-prefix-btn.is-active{
outline:2px solid var(--color01);
outline-offset:0;
box-shadow:inset 0 0 0 1px var(--color01);
font-weight:700;
}
/* accessibilité */
.forumconfig-subject-prefix-btn[aria-pressed="true"]{
outline:2px solid var(--color01);
}
.forumconfig-subject-prefix-btn.is-active{
background:color-mix(in srgb, var(--color01) 20%, transparent);
box-shadow:inset 0 0 0 1px var(--color01);
}
.group-description {
margin-bottom: 0.8em;
}
/* Fix overlap between post action buttons and post title */
.has-profile .postbody {
padding-top: 12px;
}
/* ============================================================================
TABLES DANS LES MESSAGES — EN-TÊTES EN MAJUSCULES
========================================================================== */
/*
Cible les tableaux BBCode et HTML affichés dans les messages.
La règle est volontairement forte parce que certains styles de tables
arrivent plus tard ou sont injectés avec des classes différentes.
*/
.postbody .content table thead th,
.postbody .content table thead td,
.postbody .content table tbody tr:first-child > th,
.postbody .content table tbody tr:first-child > td,
.postbody .content table tr:first-child > th,
.postbody .content table tr:first-child > td,
.postbody .content .bbcode-table thead th,
.postbody .content .bbcode-table thead td,
.postbody .content .bbcode-table tr:first-child > th,
.postbody .content .bbcode-table tr:first-child > td,
.postbody .content .bbtable thead th,
.postbody .content .bbtable thead td,
.postbody .content .bbtable tr:first-child > th,
.postbody .content .bbtable tr:first-child > td,
.content table thead th,
.content table thead td,
.content table tbody tr:first-child > th,
.content table tbody tr:first-child > td,
.content table tr:first-child > th,
.content table tr:first-child > td,
.content .bbcode-table thead th,
.content .bbcode-table thead td,
.content .bbcode-table tr:first-child > th,
.content .bbcode-table tr:first-child > td,
.content .bbtable thead th,
.content .bbtable thead td,
.content .bbtable tr:first-child > th,
.content .bbtable tr:first-child > td {
text-transform: uppercase !important;
letter-spacing: 0.03em !important;
}
/* Spoiler title */
.spoiler-header .spoiler-title {
flex: 1 1 auto;
text-align: center;
font-weight: 700;
font-size: 1.1rem;
line-height: 1.25;
color: inherit;
}
/* Message content: allow normal phrase wrapping, including links. */
.postbody .content,
.postbody .content p,
.postbody .content li,
.postbody .content dd {
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
.postbody .content a {
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
/* Only truly unbroken URLs/strings may break as a last resort. */
.postbody .content a[href^="http"],
.postbody .content a[href^="https"] {
overflow-wrap: anywhere !important;
}
/* Post links must remain inline so text can wrap naturally inside a sentence. */
.postbody .content a.postlink,
.postbody .content a.postlink:link,
.postbody .content a.postlink:visited,
.postbody .content a.postlink:hover,
.postbody .content a.postlink:active {
display: inline !important;
white-space: normal !important;
max-width: none !important;
min-width: 0 !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
/* Raw long URL labels may still break as a last resort. */
.postbody .content a.postlink[href^="http"]:not(:has(*)) {
overflow-wrap: anywhere !important;
}