/* ========================================================================== Module : Éditeur & Formulaire de Création ========================================================================== */ /* --- Dark Mode (défaut) --- */ /* ========================================================================== Formulaire de Création de Sujet (msb_create_discussion_form shortcode) ========================================================================== */ .msb-lol-form { background-color: var(--clr-bg-container); padding: var(--space-lg); border: 1px solid var(--clr-border-accent); border-radius: var(--border-radius); } .msb-lol-form .msb-form-field { margin-bottom: var(--space-lg); } .msb-lol-form label { display: block; margin-bottom: var(--space-sm); color: var(--clr-text-heading); font-weight: bold; } .msb-lol-form input[type="text"], .msb-lol-form select, .msb-lol-form .wp-editor-wrap { width: 100%; background-color: var(--clr-bg-element); border: 1px solid var(--clr-border-secondary); border-radius: var(--border-radius); color: var(--clr-text-primary); box-sizing: border-box; /* Ajouté */ } .msb-lol-form input[type="text"], .msb-lol-form select { padding: var(--space-sm) var(--space-md); } .msb-lol-form .wp-editor-tools { background-color: var(--clr-bg-element) !important; padding: var(--space-xs) var(--space-sm) !important; border-bottom: 1px solid var(--clr-border-secondary) !important; } .msb-lol-form .wp-editor-tabs button.wp-switch-editor { background-color: var(--clr-bg-sidebar) !important; color: var(--clr-text-secondary) !important; border-color: var(--clr-border-primary) !important; height: auto !important; padding: var(--space-xs) var(--space-sm) !important; } .msb-lol-form .wp-editor-tabs button.wp-switch-editor.active { background-color: var(--clr-bg-element) !important; color: var(--clr-text-primary) !important; } .msb-lol-form textarea.wp-editor-area { /* Cible la textarea de l'éditeur */ background-color: var(--clr-bg-element) !important; /* Doit souvent être important */ color: var(--clr-text-primary) !important; padding: var(--space-sm) !important; border: none !important; border-radius: 0 0 var(--border-radius) var(--border-radius) !important; min-height: 200px !important; box-sizing: border-box !important; width: 100% !important; } /* ========================================================================== TinyMCE : Menus déroulants (formatselect, etc.) — Dark Mode Le panel TinyMCE est rendu hors du conteneur du formulaire, directement dans le . Il faut cibler les classes .mce-* au niveau global. ========================================================================== */ .mce-floatpanel, .mce-menu, .mce-panel.mce-menu { background-color: var(--clr-bg-element, #161B22) !important; border: 1px solid var(--clr-border-primary, #30363D) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important; } .mce-menu-item .mce-text, .mce-menu .mce-menu-item .mce-text, .mce-menu .mce-menu-item-normal .mce-text { color: var(--clr-text-secondary, #c9d1d9) !important; } .mce-menu-item:hover, .mce-menu-item.mce-selected, .mce-menu-item:focus { background-color: var(--clr-bg-element-hover, #202831) !important; } .mce-menu-item:hover .mce-text, .mce-menu-item.mce-selected .mce-text, .mce-menu-item:focus .mce-text { color: var(--clr-accent-gold, #CDA158) !important; } .mce-menu-item-sep { background-color: var(--clr-border-primary, #30363D) !important; } .mce-menu-item .mce-ico, .mce-menu-item .mce-caret { color: var(--clr-text-muted, #6e7681) !important; } /* Aperçu formaté dans le dropdown : supprimer les fonds parasites Cibler uniquement les éléments de contenu (h1-h6, p, pre, etc.) et non les éléments structurels (.mce-caret, .mce-ico). */ .mce-menu-item .mce-text h1, .mce-menu-item .mce-text h2, .mce-menu-item .mce-text h3, .mce-menu-item .mce-text h4, .mce-menu-item .mce-text h5, .mce-menu-item .mce-text h6, .mce-menu-item .mce-text p, .mce-menu-item .mce-text pre, .mce-menu-item .mce-text code, .mce-menu-item .mce-text blockquote, .mce-menu-item .mce-text div { background: none !important; background-color: transparent !important; color: inherit !important; margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; } /* Toolbar TinyMCE : fond et bordure cohérents */ .mce-toolbar-grp, .mce-toolbar, .mce-container.mce-toolbar-grp { background-color: var(--clr-bg-element, #161B22) !important; border-color: var(--clr-border-primary, #30363D) !important; } .mce-toolbar .mce-btn button, .mce-toolbar .mce-btn .mce-ico { color: var(--clr-text-secondary, #c9d1d9) !important; } .mce-toolbar .mce-btn:hover button, .mce-toolbar .mce-btn:hover .mce-ico, .mce-toolbar .mce-btn.mce-active .mce-ico { color: var(--clr-accent-gold, #CDA158) !important; } /* Listbox (dropdown formatselect) dans la toolbar */ .mce-listbox button { background-color: var(--clr-bg-element, #161B22) !important; color: var(--clr-text-secondary, #c9d1d9) !important; border-color: var(--clr-border-primary, #30363D) !important; } /* Light mode : dropdowns TinyMCE */ html.light-mode .mce-floatpanel, html.light-mode .mce-menu, html.light-mode .mce-panel.mce-menu { background-color: var(--color-background, #FAF0E6) !important; border-color: var(--clr-border-accent, #D4C0A5) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; } html.light-mode .mce-menu-item .mce-text { color: var(--color-text, #4A3B31) !important; } html.light-mode .mce-menu-item:hover, html.light-mode .mce-menu-item.mce-selected { background-color: var(--color-component-background, #EADDCA) !important; } html.light-mode .mce-menu-item:hover .mce-text, html.light-mode .mce-menu-item.mce-selected .mce-text { color: var(--clr-accent-gold) !important; } /* Light mode : toolbar TinyMCE */ html.light-mode .mce-toolbar-grp, html.light-mode .mce-toolbar, html.light-mode .mce-container.mce-toolbar-grp { background-color: var(--color-component-background, #EADDCA) !important; border-color: var(--clr-border-accent, #D4C0A5) !important; } html.light-mode .mce-toolbar .mce-btn button, html.light-mode .mce-toolbar .mce-btn .mce-ico { color: var(--color-text, #4A3B31) !important; } html.light-mode .mce-toolbar .mce-btn:hover button, html.light-mode .mce-toolbar .mce-btn:hover .mce-ico, html.light-mode .mce-toolbar .mce-btn.mce-active .mce-ico { color: var(--clr-accent-gold) !important; } html.light-mode .mce-listbox button { background-color: var(--color-component-background, #EADDCA) !important; color: var(--color-text, #4A3B31) !important; border-color: var(--clr-border-accent, #D4C0A5) !important; } .msb-lol-form .msb-form-submit input[type="submit"], .msb-lol-form .msb-form-submit button.msb-lol-submit-button { background-color: var(--clr-accent-gold); color: var(--clr-text-on-accent); padding: var(--space-md); text-align: center; font-weight: bold; text-transform: uppercase; border-radius: var(--border-radius); border: none; cursor: pointer; transition: background-color 0.2s ease; font-family: var(--font-base); font-size: var(--font-size-base); line-height: normal; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .msb-lol-form .msb-form-submit input[type="submit"]:hover, .msb-lol-form .msb-form-submit button.msb-lol-submit-button:hover { background-color: var(--clr-accent-gold-darker); } .msb-lol-form .msb-lol-error, .msb-lol-form .msb-lol-success, .msb-lol-form .msb-lol-info { padding: var(--space-sm); border-radius: var(--border-radius); margin-bottom: var(--space-md); } .msb-lol-form .msb-lol-error { background-color: rgba(205, 74, 74, 0.1); border: 1px solid #CD4A4A; } .msb-lol-form .msb-lol-error p { color: #CD4A4A; margin: var(--space-xs) 0; } .msb-lol-form .msb-lol-success { background-color: rgba(74, 205, 74, 0.1); border: 1px solid #4ACD4A; } .msb-lol-form .msb-lol-success p { color: #4ACD4A; margin: var(--space-xs) 0; } .msb-lol-form .msb-lol-info { background-color: rgba(var(--clr-accent-blue-highlight), 0.1); border: 1px solid var(--clr-accent-blue-highlight); } .msb-lol-form .msb-lol-info p { color: var(--clr-accent-blue-highlight); margin: var(--space-xs) 0; } main.site-main.msb-lol-create-discussion-page.site-main-empty-content, main.site-main.msb-lol-single-thread-page.site-main-empty-content, main.site-main.msb-lol-archive-thread-page.site-main-empty-content, main.site-main.site-main-empty-content:has(> .content-area.content-area-empty-content > .msb-lol-forum-wrapper) { margin-top: 0 !important; padding-top: 0 !important; margin-left: auto; margin-right: auto; margin-bottom: 0; } main.site-main.msb-lol-create-discussion-page.site-main-empty-content > .content-area.content-area-empty-content, main.site-main.msb-lol-single-thread-page.site-main-empty-content > .content-area.content-area-empty-content, main.site-main.msb-lol-archive-thread-page.site-main-empty-content > .content-area.content-area-empty-content, main.site-main.site-main-empty-content:has(> .content-area.content-area-empty-content > .msb-lol-forum-wrapper) > .content-area.content-area-empty-content { padding: 0 !important; } .msb-lol-forum-wrapper { margin-top: 0; padding-top: 0; width: 100%; max-width: var(--max-width-forum); margin-left: auto; margin-right: auto; } .msb-lol-content-wrapper-outer { margin: var(--space-md) auto var(--space-lg) auto; } /* --- Light Mode --- */ /* Formulaire de Création de Sujet */ html.light-mode .msb-lol-form { background-color: var(--color-component-background); /* Fond beige pour le formulaire */ border: 1px solid var(--clr-border-accent); /* Garde la bordure dorée */ } html.light-mode .msb-lol-form label { color: var(--color-text-heading, #4A3B31); } html.light-mode .msb-lol-form input[type="text"], html.light-mode .msb-lol-form select, html.light-mode .msb-lol-form .wp-editor-wrap { background-color: var(--color-background); /* Beige très clair pour les champs */ border: 1px solid var(--clr-border-secondary, #D4C0A5); color: var(--color-text); } html.light-mode .msb-lol-form .wp-editor-tools { background-color: var(--color-component-background) !important; border-bottom-color: var(--clr-border-secondary, #D4C0A5) !important; } html.light-mode .msb-lol-form .wp-editor-tabs button.wp-switch-editor { background-color: var(--color-header) !important; /* Beige header pour onglets inactifs */ color: var(--color-text) !important; border-color: var(--clr-border-primary, #E0D5C1) !important; } html.light-mode .msb-lol-form .wp-editor-tabs button.wp-switch-editor.active { background-color: var(--color-background) !important; /* Beige le plus clair pour onglet actif */ color: var(--color-text) !important; } html.light-mode .msb-lol-form textarea.wp-editor-area { background-color: var(--color-background) !important; color: var(--color-text) !important; } html.light-mode .msb-lol-form .msb-form-submit input[type="submit"] { background-color: var(--clr-accent-gold); color: var(--clr-text-on-accent, #FFFFFF); } html.light-mode .msb-lol-form .msb-form-submit input[type="submit"]:hover { background-color: var(--clr-accent-gold-darker); } /* Style identique pour le bouton