admin/body

gistfile1.txt · 16 KiB · Text Raw

<style>

/* ============================================================
   GLOBAL ROOT OVERRIDES
   ============================================================ */
html.dark-mode,
body.dark-mode {
    --body-bg: #121212 !important;
    --body-color: #e0e0e0 !important;

--100: #1e1e1e !important;
    --200: #2a2a2a !important;
    --300: #333333 !important;
    --400: #3d3d3d !important;
    --500: #555555 !important;
    --600: #777777 !important;
    --700: #aaaaaa !important;
    --800: #cccccc !important;
    --900: #e0e0e0 !important;

--bg-light: #1e1e1e !important;
    --color-light: #e0e0e0 !important;

--navbar-color: #e0e0e0 !important;
    --navbar-hover-color: #ffffff !important;
    --navbar-brand-color: #e0e0e0 !important;
    --navbar-brand-hover-color: #ffffff !important;

--btn-primary: #4a90e2 !important;
    --btn-primary-text: #ffffff !important;
    --btn-primary-border: #4a90e2 !important;

--btn-secondary: #2a2a2a !important;
    --btn-secondary-text: #e0e0e0 !important;
    --btn-secondary-border: #3a3a3a !important;

--dropdown-bg: #1e1e1e !important;
    --dropdown-link-color: #e0e0e0 !important;
    --dropdown-link-hover-color: #ffffff !important;
    --dropdown-border-color: #3a3a3a !important;
}

/* ============================================================
   SAFE GLOBAL TEXT COLOR (NO BADGES / INPUTS / SEARCH / QUIZ)
   ============================================================ */
html.dark-mode body *:not(.badge):not(.o_filter_tag):not(.form-control):not(.form-select):not(.o-autocomplete--dropdown-item):not(.o_dropdown_menu):not(i.fa-circle):not(i.fa-check-circle-o):not(button):not(.btn):not(.navbar a):not(.nav-link),
body.dark-mode body *:not(.badge):not(.o_filter_tag):not(.form-control):not(.form-select):not(.o-autocomplete--dropdown-item):not(.o_dropdown_menu):not(i.fa-circle):not(i.fa-check-circle-o):not(button):not(.btn):not(.navbar a):not(.nav-link) {
    color: var(--body-color) !important;
}

/* ============================================================
   BADGES / FILTER TAGS
   ============================================================ */
html.dark-mode .badge,
body.dark-mode .badge,
html.dark-mode .o_filter_tag,
body.dark-mode .o_filter_tag {
    background: var(--bg-light) !important;
    color: var(--color-light) !important;
    border-color: var(--bg-solid, #555) !important;
}

/* ============================================================
   QUIZ ICON FIX
   ============================================================ */
html.dark-mode .o_wslides_js_lesson_quiz_question .list-group-item input:checked + i.fa-circle,
body.dark-mode .o_wslides_js_lesson_quiz_question .list-group-item input:checked + i.fa-circle {
    color: #6A3DFF !important;
}

/* ============================================================
   GLOBAL BACKGROUND FIX
   ============================================================ */
html.dark-mode,
body.dark-mode,
html.dark-mode #wrapwrap,
body.dark-mode #wrapwrap,
html.dark-mode #wrapwrap > main,
body.dark-mode #wrapwrap > main {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

/* ============================================================
   FIX .bg-white OVERRIDES
   ============================================================ */
html.dark-mode .bg-white,
body.dark-mode .bg-white,
html.dark-mode .bg-100,
body.dark-mode .bg-100,
html.dark-mode .bg-200,
body-dark-mode .bg-200,
html.dark-mode .bg-300,
body-dark-mode .bg-300,
html.dark-mode .bg-400,
body-dark-mode .bg-400,
html.dark-mode .bg-500,
body-dark-mode .bg-500,
html.dark-mode .bg-600,
body-dark-mode .bg-600,
html.dark-mode .bg-700,
body-dark-mode .bg-700,
html.dark-mode .bg-800,
body-dark-mode .bg-800,
html.dark-mode .bg-900,
body-dark-mode .bg-900 {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

/* ============================================================
   SLIDES / COURSE CONTENT
   ============================================================ */
html.dark-mode .o_wslides_body,
body-dark-mode .o_wslides_body,
html.dark-mode .o_wslides_body > #wrapwrap > main,
body-dark-mode .o_wslides_body > #wrapwrap > main,
html.dark-mode .o_wslides_course_main,
body-dark-mode .o_wslides_course_main,
html.dark-mode .o_wslides_course_main *,
body-dark-mode .o_wslides_course_main *,
html.dark-mode .o_wslides_course_sidebar,
body-dark-mode .o_wslides_course_sidebar,
html.dark-mode .o_wslides_course_sidebar *,
body-dark-mode .o_wslides_course_sidebar *,
html.dark-mode .o_wslides_lesson_content,
body-dark-mode .o_wslides_lesson_content,
html.dark-mode .o_wslides_lesson_content *,
body-dark-mode .o_wslides_lesson_content *,
html.dark-mode .o_wslides_quiz,
body-dark-mode .o_wslides_quiz,
html.dark-mode .o_wslides_quiz *,
body-dark-mode .o_wslides_quiz * {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

/* ============================================================
   SECTIONS / SNIPPETS
   ============================================================ */
html.dark-mode section,
body-dark-mode section,
html.dark-mode .s_block,
body-dark-mode .s_block,
html.dark-mode .s_text_block,
body-dark-mode .s_text_block,
html.dark-mode .s_cover,
body-dark-mode .s_cover,
html.dark-mode .s_banner,
body-dark-mode .s_banner,
html.dark-mode .s_features,
body-dark-mode .s_features,
html.dark-mode .s_call_to_action,
body-dark-mode .s_call_to_action,
html.dark-mode .o_panel,
body-dark-mode .o_panel,
html.dark-mode .o_cc1,
body-dark-mode .o_cc1,
html.dark-mode .o_cc2,
body-dark-mode .o_cc2,
html.dark-mode .o_cc3,
body-dark-mode .o_cc3,
html.dark-mode .o_cc4,
body-dark-mode .o_cc4,
html.dark-mode .o_cc5,
body-dark-mode .o_cc5 {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

/* ============================================================
   CONTAINERS / CARDS
   ============================================================ */
html.dark-mode .container,
body-dark-mode .container,
html.dark-mode .row,
body-dark-mode .row,
html.dark-mode .card,
body-dark-mode .card,
html.dark-mode .card-body,
body-dark-mode .card-body,
html.dark-mode .o_panel,
body-dark-mode .o_panel {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

/* ============================================================
   INPUTS / FORM CONTROLS
   ============================================================ */
html.dark-mode input,
body-dark-mode input,
html.dark-mode textarea,
body-dark-mode textarea,
html.dark-mode select,
body-dark-mode select,
html.dark-mode .form-control,
body-dark-mode .form-control,
html.dark-mode .form-select,
body-dark-mode .form-select {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #3a3a3a !important;
}

/* ============================================================
   SEARCHBAR RESULTS / AUTOCOMPLETE
   ============================================================ */
html.dark-mode .o-autocomplete--dropdown-menu,
body-dark-mode .o-autocomplete--dropdown-menu,
html.dark-mode .o_dropdown_menu,
body-dark-mode .o_dropdown_menu {
    background-color: #1e1e1e !important;
    border-color: #3a3a3a !important;
}

html.dark-mode .o-autocomplete--dropdown-item,
body-dark-mode .o-autocomplete--dropdown-item,
html.dark-mode .o_dropdown_menu .dropdown-item,
body-dark-mode .o_dropdown_menu .dropdown-item {
    color: #e0e0e0 !important;
    background-color: transparent !important;
}

html.dark-mode .o-autocomplete--dropdown-item:hover,
body-dark-mode .o-autocomplete--dropdown-item:hover,
html.dark-mode .o_dropdown_menu .dropdown-item:hover,
body-dark-mode .o_dropdown_menu .dropdown-item:hover {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

html.dark-mode .o-autocomplete--dropdown-item *,
body-dark-mode .o-autocomplete--dropdown-item *,
html.dark-mode .o_dropdown_menu .dropdown-item *,
body-dark-mode .o_dropdown_menu .dropdown-item * {
    color: inherit !important;
}

/* ============================================================
   DESKTOP NAVBAR
   ============================================================ */
html.dark-mode header,
body-dark-mode header,
html.dark-mode .navbar,
body-dark-mode .navbar,
html.dark-mode .navbar-light,
body-dark-mode .navbar-light {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

html.dark-mode .navbar a,
body-dark-mode .navbar a,
html.dark-mode .navbar-nav .nav-link,
body-dark-mode .navbar-nav .nav-link {
    color: #e0e0e0 !important;
}

html.dark-mode .navbar-nav .nav-link:hover,
body-dark-mode .navbar-nav .nav-link:hover {
    color: #ffffff !important;
}

/* ============================================================
   MOBILE NAVBAR
   ============================================================ */
html.dark-mode .o_navbar_mobile,
body-dark-mode .o_navbar_mobile {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

html.dark-mode .o_menu_toggle,
body-dark-mode .o_menu_toggle {
    color: #e0e0e0 !important;
    filter: invert(1) brightness(2);
}

html.dark-mode .o_menu_drawer,
body-dark-mode .o_menu_drawer {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    backdrop-filter: none !important;
}

html.dark-mode .o_menu_sections,
body-dark-mode .o_menu_sections {
    background-color: #1e1e1e !important;
}

html.dark-mode .o_nav_entry,
body-dark-mode .o_nav_entry,
html.dark-mode .o_menu_item,
body-dark-mode .o_menu_item {
    color: #e0e0e0 !important;
}

html.dark-mode .o_nav_entry:hover,
body-dark-mode .o_nav_entry:hover,
html.dark-mode .o_menu_item:hover,
body-dark-mode .o_menu_item:hover {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

html.dark-mode .o_nav_entry.active,
body-dark-mode .o_nav_entry.active,
html.dark-mode .o_menu_item.active,
body-dark-mode .o_menu_item.active {
    background-color: #4a90e2 !important;
    color: #ffffff !important;
}

/* ============================================================
   DARK MODE MENU LINK
   ============================================================ */
a[href="#darkmode"] {
    display: inline-block !important;
    padding: .5rem 1rem !important;
    color: inherit !important;
}

html.dark-mode a[href="#darkmode"]:hover,
body-dark-mode a[href="#darkmode"]:hover {
    color: #ffffff !important;
}

/* ============================================================
   HAMBURGER ICON
   ============================================================ */
html.dark-mode .navbar-toggler-icon,
body-dark-mode .navbar-toggler-icon {
    filter: invert(1) brightness(2);
}

/* ============================================================
   FOOTER
   ============================================================ */
html.dark-mode footer,
body-dark-mode footer {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}
/* ============================================
   FINAL OVERRIDE — FIX WHITE DROPDOWN BACKGROUND
   ============================================ */

html.dark-mode:root,
body.dark-mode:root {
    --dropdown-bg: #000000 !important;
    --dropdown-link-color: #e0e0e0 !important;
    --dropdown-link-hover-bg: #2a2a2a !important;
    --dropdown-link-hover-color: #ffffff !important;
}
html.dark-mode .dropdown-menu,
body.dark-mode .dropdown-menu,
html.dark-mode .o_dropdown_menu,
body.dark-mode .o_dropdown_menu {
    background-color: #000000 !important;
}
/* ============================================
   PORTAL CHATTER — JS-INJECTED STYLE OVERRIDE
   ============================================ */

html.dark-mode .o-mail-Chatter-top,
html.dark-mode .o-portal-Chatter .o-mail-Chatter-top,
html.dark-mode .o-mail-Chatter-top.o-mail-Chatter-top,
html.dark-mode .o-mail-Chatter-top[class],
html.dark-mode .o-mail-Chatter-top:not([style]) {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}
/* ============================================================
   BOOTSTRAP 5.3 POPOVER + TOOLTIP DARK-MODE FIX
   ============================================================ */

html.dark-mode,
body.dark-mode {
    /* Core BS popover tokens */
    --bs-popover-bg: #1e1e1e !important;
    --bs-popover-border-color: #3a3a3a !important;
    --bs-popover-header-bg: #2a2a2a !important;
    --bs-popover-header-color: #e0e0e0 !important;
    --bs-popover-body-color: #e0e0e0 !important;
    --bs-popover-box-shadow: 0px 4px 16px rgba(0,0,0,0.45) !important;

/* Tooltip tokens */
    --bs-tooltip-bg: #2a2a2a !important;
    --bs-tooltip-color: #e0e0e0 !important;
}

/* Hard element overrides (Bootstrap injects these dynamically) */
html.dark-mode .popover,
body.dark-mode .popover {
    background-color: var(--bs-popover-bg) !important;
    border-color: var(--bs-popover-border-color) !important;
    color: var(--bs-popover-body-color) !important;
}

html.dark-mode .popover-header,
body.dark-mode .popover-header {
    background-color: var(--bs-popover-header-bg) !important;
    color: var(--bs-popover-header-color) !important;
    border-bottom-color: var(--bs-popover-border-color) !important;
}

html.dark-mode .popover-body,
body.dark-mode .popover-body {
    color: var(--bs-popover-body-color) !important;
}

/* Tooltip hard override */
html.dark-mode .tooltip-inner,
body.dark-mode .tooltip-inner {
    background-color: var(--bs-tooltip-bg) !important;
    color: var(--bs-tooltip-color) !important;
}

/* ============================================================
   DARK MODE ALERT FIX — CORRECT COLORS
   ============================================================ */

html.dark-mode .alert,
body.dark-mode .alert {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #3a3a3a !important;
}

/* Danger */
html.dark-mode .alert-danger,
body.dark-mode .alert-danger {
    --alert-bg: #2a1a1a !important;
    --alert-border-color: #5a2a2a !important;
    --alert-color: #ffb3b3 !important;
}

/* Warning */
html.dark-mode .alert-warning,
body.dark-mode .alert-warning {
    --alert-bg: #3a3200 !important;
    --alert-border-color: #5a4a00 !important;
    --alert-color: #ffe9a6 !important;
}

/* Success */
html.dark-mode .alert-success,
body.dark-mode .alert-success {
    --alert-bg: #0f2a1a !important;
    --alert-border-color: #1f4a2a !important;
    --alert-color: #b3ffd1 !important;
}

/* Info */
html.dark-mode .alert-info,
body.dark-mode .alert-info {
    --alert-bg: #0a2a33 !important;
    --alert-border-color: #0f3a4a !important;
    --alert-color: #b3ecff !important;
}
html.dark-mode .o_wslides_body a.o_wslides_js_quiz_is_correct input:checked + i.fa-check-circle-o,
body.dark-mode .o_wslides_body a.o_wslides_js_quiz_is_correct input:checked + i.fa-check-circle-o {
    color: #6A3DFF !important;
}
/* ============================================================
   DARK MODE QUIZ LIST-GROUP — HARD OVERRIDE
   ============================================================ */

/* Force background + text for quiz answer blocks */
html.dark-mode .o_wslides_js_lesson_quiz_question .list-group,
body.dark-mode .o_wslides_js_lesson_quiz_question .list-group {
    background-color: #232323 !important;
}
/* Actual answer rows */
html.dark-mode .o_wslides_js_lesson_quiz_question .list-group-item,
body-dark-mode .o_wslides_js_lesson_quiz_question .list-group-item {
    background-color: #121212 !important;
    color: #f5f5f5 !important;
    border-color: #1e1e1e !important;
}

</style>

1	<script>
2	(function() {
3	if (localStorage.getItem("dark_mode") === "on") {
4	document.documentElement.classList.add("dark-mode");
5	document.body.classList.add("dark-mode");
6	document.documentElement.style.background = "#121212";
7	document.body.style.background = "#121212";
8	}
9	})();
10	</script>
11
12	<style>
13
14	/* ============================================================
15	GLOBAL ROOT OVERRIDES
16	============================================================ */
17	html.dark-mode,
18	body.dark-mode {
19	--body-bg: #121212 !important;
20	--body-color: #e0e0e0 !important;
21
22	--100: #1e1e1e !important;
23	--200: #2a2a2a !important;
24	--300: #333333 !important;
25	--400: #3d3d3d !important;
26	--500: #555555 !important;
27	--600: #777777 !important;
28	--700: #aaaaaa !important;
29	--800: #cccccc !important;
30	--900: #e0e0e0 !important;
31
32	--bg-light: #1e1e1e !important;
33	--color-light: #e0e0e0 !important;
34
35	--navbar-color: #e0e0e0 !important;
36	--navbar-hover-color: #ffffff !important;
37	--navbar-brand-color: #e0e0e0 !important;
38	--navbar-brand-hover-color: #ffffff !important;
39
40	--btn-primary: #4a90e2 !important;
41	--btn-primary-text: #ffffff !important;
42	--btn-primary-border: #4a90e2 !important;
43
44	--btn-secondary: #2a2a2a !important;
45	--btn-secondary-text: #e0e0e0 !important;
46	--btn-secondary-border: #3a3a3a !important;
47
48	--dropdown-bg: #1e1e1e !important;
49	--dropdown-link-color: #e0e0e0 !important;
50	--dropdown-link-hover-color: #ffffff !important;
51	--dropdown-border-color: #3a3a3a !important;
52	}
53
54	/* ============================================================
55	SAFE GLOBAL TEXT COLOR (NO BADGES / INPUTS / SEARCH / QUIZ)
56	============================================================ */
57	html.dark-mode body *:not(.badge):not(.o_filter_tag):not(.form-control):not(.form-select):not(.o-autocomplete--dropdown-item):not(.o_dropdown_menu):not(i.fa-circle):not(i.fa-check-circle-o):not(button):not(.btn):not(.navbar a):not(.nav-link),
58	body.dark-mode body *:not(.badge):not(.o_filter_tag):not(.form-control):not(.form-select):not(.o-autocomplete--dropdown-item):not(.o_dropdown_menu):not(i.fa-circle):not(i.fa-check-circle-o):not(button):not(.btn):not(.navbar a):not(.nav-link) {
59	color: var(--body-color) !important;
60	}
61
62	/* ============================================================
63	BADGES / FILTER TAGS
64	============================================================ */
65	html.dark-mode .badge,
66	body.dark-mode .badge,
67	html.dark-mode .o_filter_tag,
68	body.dark-mode .o_filter_tag {
69	background: var(--bg-light) !important;
70	color: var(--color-light) !important;
71	border-color: var(--bg-solid, #555) !important;
72	}
73
74	/* ============================================================
75	QUIZ ICON FIX
76	============================================================ */
77	html.dark-mode .o_wslides_js_lesson_quiz_question .list-group-item input:checked + i.fa-circle,
78	body.dark-mode .o_wslides_js_lesson_quiz_question .list-group-item input:checked + i.fa-circle {
79	color: #6A3DFF !important;
80	}
81
82	/* ============================================================
83	GLOBAL BACKGROUND FIX
84	============================================================ */
85	html.dark-mode,
86	body.dark-mode,
87	html.dark-mode #wrapwrap,
88	body.dark-mode #wrapwrap,
89	html.dark-mode #wrapwrap > main,
90	body.dark-mode #wrapwrap > main {
91	background-color: #121212 !important;
92	color: #e0e0e0 !important;
93	}
94
95	/* ============================================================
96	FIX .bg-white OVERRIDES
97	============================================================ */
98	html.dark-mode .bg-white,
99	body.dark-mode .bg-white,
100	html.dark-mode .bg-100,
101	body.dark-mode .bg-100,
102	html.dark-mode .bg-200,
103	body-dark-mode .bg-200,
104	html.dark-mode .bg-300,
105	body-dark-mode .bg-300,
106	html.dark-mode .bg-400,
107	body-dark-mode .bg-400,
108	html.dark-mode .bg-500,
109	body-dark-mode .bg-500,
110	html.dark-mode .bg-600,
111	body-dark-mode .bg-600,
112	html.dark-mode .bg-700,
113	body-dark-mode .bg-700,
114	html.dark-mode .bg-800,
115	body-dark-mode .bg-800,
116	html.dark-mode .bg-900,
117	body-dark-mode .bg-900 {
118	background-color: #1e1e1e !important;
119	color: #e0e0e0 !important;
120	}
121
122	/* ============================================================
123	SLIDES / COURSE CONTENT
124	============================================================ */
125	html.dark-mode .o_wslides_body,
126	body-dark-mode .o_wslides_body,
127	html.dark-mode .o_wslides_body > #wrapwrap > main,
128	body-dark-mode .o_wslides_body > #wrapwrap > main,
129	html.dark-mode .o_wslides_course_main,
130	body-dark-mode .o_wslides_course_main,
131	html.dark-mode .o_wslides_course_main *,
132	body-dark-mode .o_wslides_course_main *,
133	html.dark-mode .o_wslides_course_sidebar,
134	body-dark-mode .o_wslides_course_sidebar,
135	html.dark-mode .o_wslides_course_sidebar *,
136	body-dark-mode .o_wslides_course_sidebar *,
137	html.dark-mode .o_wslides_lesson_content,
138	body-dark-mode .o_wslides_lesson_content,
139	html.dark-mode .o_wslides_lesson_content *,
140	body-dark-mode .o_wslides_lesson_content *,
141	html.dark-mode .o_wslides_quiz,
142	body-dark-mode .o_wslides_quiz,
143	html.dark-mode .o_wslides_quiz *,
144	body-dark-mode .o_wslides_quiz * {
145	background-color: #121212 !important;
146	color: #e0e0e0 !important;
147	}
148
149	/* ============================================================
150	SECTIONS / SNIPPETS
151	============================================================ */
152	html.dark-mode section,
153	body-dark-mode section,
154	html.dark-mode .s_block,
155	body-dark-mode .s_block,
156	html.dark-mode .s_text_block,
157	body-dark-mode .s_text_block,
158	html.dark-mode .s_cover,
159	body-dark-mode .s_cover,
160	html.dark-mode .s_banner,
161	body-dark-mode .s_banner,
162	html.dark-mode .s_features,
163	body-dark-mode .s_features,
164	html.dark-mode .s_call_to_action,
165	body-dark-mode .s_call_to_action,
166	html.dark-mode .o_panel,
167	body-dark-mode .o_panel,
168	html.dark-mode .o_cc1,
169	body-dark-mode .o_cc1,
170	html.dark-mode .o_cc2,
171	body-dark-mode .o_cc2,
172	html.dark-mode .o_cc3,
173	body-dark-mode .o_cc3,
174	html.dark-mode .o_cc4,
175	body-dark-mode .o_cc4,
176	html.dark-mode .o_cc5,
177	body-dark-mode .o_cc5 {
178	background-color: #1e1e1e !important;
179	color: #e0e0e0 !important;
180	}
181
182	/* ============================================================
183	CONTAINERS / CARDS
184	============================================================ */
185	html.dark-mode .container,
186	body-dark-mode .container,
187	html.dark-mode .row,
188	body-dark-mode .row,
189	html.dark-mode .card,
190	body-dark-mode .card,
191	html.dark-mode .card-body,
192	body-dark-mode .card-body,
193	html.dark-mode .o_panel,
194	body-dark-mode .o_panel {
195	background-color: #1e1e1e !important;
196	color: #e0e0e0 !important;
197	}
198
199	/* ============================================================
200	INPUTS / FORM CONTROLS
201	============================================================ */
202	html.dark-mode input,
203	body-dark-mode input,
204	html.dark-mode textarea,
205	body-dark-mode textarea,
206	html.dark-mode select,
207	body-dark-mode select,
208	html.dark-mode .form-control,
209	body-dark-mode .form-control,
210	html.dark-mode .form-select,
211	body-dark-mode .form-select {
212	background-color: #2a2a2a !important;
213	color: #e0e0e0 !important;
214	border-color: #3a3a3a !important;
215	}
216
217	/* ============================================================
218	SEARCHBAR RESULTS / AUTOCOMPLETE
219	============================================================ */
220	html.dark-mode .o-autocomplete--dropdown-menu,
221	body-dark-mode .o-autocomplete--dropdown-menu,
222	html.dark-mode .o_dropdown_menu,
223	body-dark-mode .o_dropdown_menu {
224	background-color: #1e1e1e !important;
225	border-color: #3a3a3a !important;
226	}
227
228	html.dark-mode .o-autocomplete--dropdown-item,
229	body-dark-mode .o-autocomplete--dropdown-item,
230	html.dark-mode .o_dropdown_menu .dropdown-item,
231	body-dark-mode .o_dropdown_menu .dropdown-item {
232	color: #e0e0e0 !important;
233	background-color: transparent !important;
234	}
235
236	html.dark-mode .o-autocomplete--dropdown-item:hover,
237	body-dark-mode .o-autocomplete--dropdown-item:hover,
238	html.dark-mode .o_dropdown_menu .dropdown-item:hover,
239	body-dark-mode .o_dropdown_menu .dropdown-item:hover {
240	background-color: #2a2a2a !important;
241	color: #ffffff !important;
242	}
243
244	html.dark-mode .o-autocomplete--dropdown-item *,
245	body-dark-mode .o-autocomplete--dropdown-item *,
246	html.dark-mode .o_dropdown_menu .dropdown-item *,
247	body-dark-mode .o_dropdown_menu .dropdown-item * {
248	color: inherit !important;
249	}
250
251	/* ============================================================
252	DESKTOP NAVBAR
253	============================================================ */
254	html.dark-mode header,
255	body-dark-mode header,
256	html.dark-mode .navbar,
257	body-dark-mode .navbar,
258	html.dark-mode .navbar-light,
259	body-dark-mode .navbar-light {
260	background-color: #1e1e1e !important;
261	color: #e0e0e0 !important;
262	}
263
264	html.dark-mode .navbar a,
265	body-dark-mode .navbar a,
266	html.dark-mode .navbar-nav .nav-link,
267	body-dark-mode .navbar-nav .nav-link {
268	color: #e0e0e0 !important;
269	}
270
271	html.dark-mode .navbar-nav .nav-link:hover,
272	body-dark-mode .navbar-nav .nav-link:hover {
273	color: #ffffff !important;
274	}
275
276	/* ============================================================
277	MOBILE NAVBAR
278	============================================================ */
279	html.dark-mode .o_navbar_mobile,
280	body-dark-mode .o_navbar_mobile {
281	background-color: #1e1e1e !important;
282	color: #e0e0e0 !important;
283	}
284
285	html.dark-mode .o_menu_toggle,
286	body-dark-mode .o_menu_toggle {
287	color: #e0e0e0 !important;
288	filter: invert(1) brightness(2);
289	}
290
291	html.dark-mode .o_menu_drawer,
292	body-dark-mode .o_menu_drawer {
293	background-color: #1e1e1e !important;
294	color: #e0e0e0 !important;
295	backdrop-filter: none !important;
296	}
297
298	html.dark-mode .o_menu_sections,
299	body-dark-mode .o_menu_sections {
300	background-color: #1e1e1e !important;
301	}
302
303	html.dark-mode .o_nav_entry,
304	body-dark-mode .o_nav_entry,
305	html.dark-mode .o_menu_item,
306	body-dark-mode .o_menu_item {
307	color: #e0e0e0 !important;
308	}
309
310	html.dark-mode .o_nav_entry:hover,
311	body-dark-mode .o_nav_entry:hover,
312	html.dark-mode .o_menu_item:hover,
313	body-dark-mode .o_menu_item:hover {
314	background-color: #2a2a2a !important;
315	color: #ffffff !important;
316	}
317
318	html.dark-mode .o_nav_entry.active,
319	body-dark-mode .o_nav_entry.active,
320	html.dark-mode .o_menu_item.active,
321	body-dark-mode .o_menu_item.active {
322	background-color: #4a90e2 !important;
323	color: #ffffff !important;
324	}
325
326	/* ============================================================
327	DARK MODE MENU LINK
328	============================================================ */
329	a[href="#darkmode"] {
330	display: inline-block !important;
331	padding: .5rem 1rem !important;
332	color: inherit !important;
333	}
334
335	html.dark-mode a[href="#darkmode"]:hover,
336	body-dark-mode a[href="#darkmode"]:hover {
337	color: #ffffff !important;
338	}
339
340	/* ============================================================
341	HAMBURGER ICON
342	============================================================ */
343	html.dark-mode .navbar-toggler-icon,
344	body-dark-mode .navbar-toggler-icon {
345	filter: invert(1) brightness(2);
346	}
347
348	/* ============================================================
349	FOOTER
350	============================================================ */
351	html.dark-mode footer,
352	body-dark-mode footer {
353	background-color: #1e1e1e !important;
354	color: #e0e0e0 !important;
355	}
356	/* ============================================
357	FINAL OVERRIDE — FIX WHITE DROPDOWN BACKGROUND
358	============================================ */
359
360	html.dark-mode:root,
361	body.dark-mode:root {
362	--dropdown-bg: #000000 !important;
363	--dropdown-link-color: #e0e0e0 !important;
364	--dropdown-link-hover-bg: #2a2a2a !important;
365	--dropdown-link-hover-color: #ffffff !important;
366	}
367	html.dark-mode .dropdown-menu,
368	body.dark-mode .dropdown-menu,
369	html.dark-mode .o_dropdown_menu,
370	body.dark-mode .o_dropdown_menu {
371	background-color: #000000 !important;
372	}
373	/* ============================================
374	PORTAL CHATTER — JS-INJECTED STYLE OVERRIDE
375	============================================ */
376
377	html.dark-mode .o-mail-Chatter-top,
378	html.dark-mode .o-portal-Chatter .o-mail-Chatter-top,
379	html.dark-mode .o-mail-Chatter-top.o-mail-Chatter-top,
380	html.dark-mode .o-mail-Chatter-top[class],
381	html.dark-mode .o-mail-Chatter-top:not([style]) {
382	background-color: #1e1e1e !important;
383	color: #e0e0e0 !important;
384	}
385	/* ============================================================
386	BOOTSTRAP 5.3 POPOVER + TOOLTIP DARK-MODE FIX
387	============================================================ */
388
389	html.dark-mode,
390	body.dark-mode {
391	/* Core BS popover tokens */
392	--bs-popover-bg: #1e1e1e !important;
393	--bs-popover-border-color: #3a3a3a !important;
394	--bs-popover-header-bg: #2a2a2a !important;
395	--bs-popover-header-color: #e0e0e0 !important;
396	--bs-popover-body-color: #e0e0e0 !important;
397	--bs-popover-box-shadow: 0px 4px 16px rgba(0,0,0,0.45) !important;
398
399	/* Tooltip tokens */
400	--bs-tooltip-bg: #2a2a2a !important;
401	--bs-tooltip-color: #e0e0e0 !important;
402	}
403
404	/* Hard element overrides (Bootstrap injects these dynamically) */
405	html.dark-mode .popover,
406	body.dark-mode .popover {
407	background-color: var(--bs-popover-bg) !important;
408	border-color: var(--bs-popover-border-color) !important;
409	color: var(--bs-popover-body-color) !important;
410	}
411
412	html.dark-mode .popover-header,
413	body.dark-mode .popover-header {
414	background-color: var(--bs-popover-header-bg) !important;
415	color: var(--bs-popover-header-color) !important;
416	border-bottom-color: var(--bs-popover-border-color) !important;
417	}
418
419	html.dark-mode .popover-body,
420	body.dark-mode .popover-body {
421	color: var(--bs-popover-body-color) !important;
422	}
423
424	/* Tooltip hard override */
425	html.dark-mode .tooltip-inner,
426	body.dark-mode .tooltip-inner {
427	background-color: var(--bs-tooltip-bg) !important;
428	color: var(--bs-tooltip-color) !important;
429	}
430
431	/* ============================================================
432	DARK MODE ALERT FIX — CORRECT COLORS
433	============================================================ */
434
435	html.dark-mode .alert,
436	body.dark-mode .alert {
437	background-color: #1e1e1e !important;
438	color: #e0e0e0 !important;
439	border-color: #3a3a3a !important;
440	}
441
442	/* Danger */
443	html.dark-mode .alert-danger,
444	body.dark-mode .alert-danger {
445	--alert-bg: #2a1a1a !important;
446	--alert-border-color: #5a2a2a !important;
447	--alert-color: #ffb3b3 !important;
448	}
449
450	/* Warning */
451	html.dark-mode .alert-warning,
452	body.dark-mode .alert-warning {
453	--alert-bg: #3a3200 !important;
454	--alert-border-color: #5a4a00 !important;
455	--alert-color: #ffe9a6 !important;
456	}
457
458	/* Success */
459	html.dark-mode .alert-success,
460	body.dark-mode .alert-success {
461	--alert-bg: #0f2a1a !important;
462	--alert-border-color: #1f4a2a !important;
463	--alert-color: #b3ffd1 !important;
464	}
465
466	/* Info */
467	html.dark-mode .alert-info,
468	body.dark-mode .alert-info {
469	--alert-bg: #0a2a33 !important;
470	--alert-border-color: #0f3a4a !important;
471	--alert-color: #b3ecff !important;
472	}
473	html.dark-mode .o_wslides_body a.o_wslides_js_quiz_is_correct input:checked + i.fa-check-circle-o,
474	body.dark-mode .o_wslides_body a.o_wslides_js_quiz_is_correct input:checked + i.fa-check-circle-o {
475	color: #6A3DFF !important;
476	}
477	/* ============================================================
478	DARK MODE QUIZ LIST-GROUP — HARD OVERRIDE
479	============================================================ */
480
481	/* Force background + text for quiz answer blocks */
482	html.dark-mode .o_wslides_js_lesson_quiz_question .list-group,
483	body.dark-mode .o_wslides_js_lesson_quiz_question .list-group {
484	background-color: #232323 !important;
485	}
486	/* Actual answer rows */
487	html.dark-mode .o_wslides_js_lesson_quiz_question .list-group-item,
488	body-dark-mode .o_wslides_js_lesson_quiz_question .list-group-item {
489	background-color: #121212 !important;
490	color: #f5f5f5 !important;
491	border-color: #1e1e1e !important;
492	}
493
494
495
496	</style>
497