Skip to content

Commit f63d0e7

Browse files
alina-derkach-oazaalina-derkach-oaza
committed
Fix the dark mode
 modified: _resourcepdf/overrides/partials/rating.html modified: docs/css/extra.css new file: docs/css/rating.css modified: mkdocs-base.yml
1 parent 5781b81 commit f63d0e7

File tree

4 files changed

+197
-73
lines changed

4 files changed

+197
-73
lines changed

‎_resourcepdf/overrides/partials/rating.html‎

Lines changed: 138 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
1+
<!-- Feedback Widget -->
12
<div class="rating-widget" style="
2-
background: #fff;
3-
border: 1px solid #ddd;
3+
background: var(--md-default-bg-color);
4+
border: 0.05rem solid var(--md-default-fg-color--lightest);
45
padding: 10px 15px;
56
border-radius: 0.2rem;
67
margin-bottom: 16px;
78
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
8-
font-size: 15px;
9-
color: #000;
9+
font-size: 16px;
1010
text-align: center;
11+
transition: all 0.2s ease-out;
1112
">
12-
<div style="
13+
14+
<div class="rating-title" style="
1315
margin-bottom: 4px;
14-
font-weight: bold;
15-
color: #0E5FB5;
16-
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
1716
font-size: 15px;
17+
font-weight: bold;
18+
/* Removed inline color to use CSS */
1819
">
19-
Do you like Percona docs?
20+
Rate this page
2021
</div>
2122

2223
<div class="rating-stars" style="display: inline-block;">
@@ -25,37 +26,33 @@
2526
font-size: 24px;
2627
cursor: pointer;
2728
margin: 0 2px;
28-
color: #000;
2929
display: inline-block;
30-
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
3130
">☆</span>
3231
{% endfor %}
3332
</div>
3433

35-
<!-- Notification container -->
3634
<div id="feedback-notification" style="
3735
display: none;
3836
margin-top: 10px;
39-
color: green;
37+
color: var(--md-typeset-a-color);
4038
font-weight: 500;
41-
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
4239
font-size: 14px;
43-
">Thank you for your feedback</div>
40+
">Thanks for your feedback</div>
4441

4542
<div id="feedback-form" style="
4643
display: none;
4744
margin-top: 12px;
4845
text-align: left;
4946
position: relative;
50-
border: 1px solid #ccc;
47+
border: 0.05rem solid var(--md-default-fg-color--lightest);
5148
padding: 12px;
5249
border-radius: 6px;
53-
background: #f9f9f9;
50+
background: var(--md-default-bg-color);
5451
width: 100%;
5552
box-sizing: border-box;
56-
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
53+
transition: all 0.2s ease-out;
5754
">
58-
<button id="close-feedback" aria-label="Close feedback form" title="Close" style="
55+
<button id="close-feedback" title="Close" style="
5956
position: absolute;
6057
top: 8px;
6158
right: 8px;
@@ -64,12 +61,11 @@
6461
font-size: 20px;
6562
font-weight: bold;
6663
cursor: pointer;
67-
color: #999;
64+
color: var(--md-default-fg-color--light);
6865
line-height: 1;
69-
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
7066
">×</button>
7167

72-
<div style="margin-bottom: 10px; font-weight: normal; font-size: 15px;">
68+
<div style="margin-bottom: 10px; font-size: 15px;">
7369
Was this page helpful?
7470
</div>
7571

@@ -80,16 +76,17 @@
8076
margin-bottom: 12px;
8177
resize: vertical;
8278
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
79+
color: var(--md-default-fg-color);
80+
background: var(--md-default-bg-color);
81+
border: 0.05rem solid var(--md-default-fg-color--lightest);
8382
"></textarea>
8483

8584
<label for="feedback-email" style="
8685
display: block;
87-
font-weight: 500;
8886
font-size: 15px;
8987
margin-bottom: 4px;
90-
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
9188
">
92-
Email <span style="font-weight: normal; color: #666;">(optional)</span>
89+
Email <span style="color: var(--md-default-fg-color--light);">(optional)</span>
9390
</label>
9491

9592
<input type="email" id="feedback-email" placeholder="[email protected]" style="
@@ -98,29 +95,88 @@
9895
padding: 6px;
9996
margin-bottom: 12px;
10097
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
98+
color: var(--md-default-fg-color);
99+
background: var(--md-default-bg-color);
100+
border: 0.05rem solid var(--md-default-fg-color--lightest);
101101
" />
102102

103-
<button id="submit-feedback" style="
104-
padding: 5px 10px;
105-
font-size: 14px;
106-
background-color: #0E5FB5;
107-
color: white;
108-
border: none;
109-
border-radius: 3px;
110-
cursor: pointer;
111-
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
112-
">
113-
Send
114-
</button>
103+
<button id="submit-feedback" style="
104+
padding: 5px 10px;
105+
font-size: 14px;
106+
background-color: var(--md-typeset-a-color);
107+
border: none;
108+
border-radius: 3px;
109+
cursor: pointer;
110+
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
111+
">
112+
Send
113+
</button>
115114

116115
<div id="feedback-status" style="
117116
margin-top: 8px;
118117
font-size: 13px;
119-
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
120118
"></div>
121119
</div>
122120
</div>
123121

122+
<style>
123+
/* Hover shadow like data-banner */
124+
.rating-widget:hover,
125+
#feedback-form:hover {
126+
box-shadow:
127+
0px 1px 10px 0px rgba(0, 0, 0, 0.12),
128+
0px 4px 5px 0px rgba(0, 0, 0, 0.14),
129+
0px 2px 4px -1px rgba(0, 0, 0, 0.20);
130+
}
131+
132+
/* Default star colors */
133+
.rating-stars .star {
134+
color: var(--md-default-fg-color);
135+
transition: color 0.2s ease-out;
136+
}
137+
138+
/* Active/hovered stars */
139+
.rating-stars .star.active,
140+
.rating-stars .star.hovered {
141+
color: var(--md-typeset-a-color, #0E5FB5);
142+
}
143+
144+
/* Rate this page text color matches stars in light mode */
145+
.rating-widget .rating-title {
146+
color: var(--md-typeset-a-color, #0E5FB5);
147+
}
148+
149+
/* Dark mode */
150+
@media (prefers-color-scheme: dark) {
151+
/* Rate this page text */
152+
.rating-widget .rating-title {
153+
color: var(--md-typeset-a-color, #93C7FF) !important;
154+
}
155+
/* Stars active and hovered fill color */
156+
.rating-stars .star.active,
157+
.rating-stars .star.hovered {
158+
color: var(--md-typeset-a-color, #93C7FF) !important;
159+
}
160+
161+
/* Feedback form text */
162+
#feedback-form,
163+
#feedback-form textarea,
164+
#feedback-form input,
165+
#feedback-form label,
166+
#feedback-form button,
167+
#feedback-form div {
168+
color: var(--md-typeset-a-color, #93C7FF) !important;
169+
border-color: #666 !important;
170+
background: var(--md-default-bg-color) !important;
171+
}
172+
173+
/* Close button color */
174+
#close-feedback {
175+
color: var(--md-typeset-a-color, #93C7FF) !important;
176+
}
177+
}
178+
</style>
179+
124180
<script>
125181
function initFeedbackWidget() {
126182
const stars = document.querySelectorAll(".rating-stars .star");
@@ -135,7 +191,6 @@
135191
if (!stars.length || !feedbackForm) return;
136192

137193
const formURL = "https://docs.google.com/forms/d/e/1FAIpQLSfhscELpzoXB4uyh9pXNmXSeqKc10IH_DxmAoaVGID85sO0Aw/formResponse";
138-
139194
const fieldIds = {
140195
rating: "entry.303027158",
141196
pageUrl: "entry.295622433",
@@ -146,6 +201,15 @@
146201
let selectedRating = 0;
147202
let notificationTimeout;
148203

204+
function showNotification(msg) {
205+
notification.textContent = msg;
206+
notification.style.display = "block";
207+
clearTimeout(notificationTimeout);
208+
notificationTimeout = setTimeout(() => {
209+
notification.style.display = "none";
210+
}, 3000);
211+
}
212+
149213
function sendRatingOnly(rating) {
150214
const formData = new FormData();
151215
formData.append(fieldIds.rating, rating);
@@ -160,15 +224,6 @@
160224
});
161225
}
162226

163-
function showNotification(msg) {
164-
notification.textContent = msg;
165-
notification.style.display = "block";
166-
clearTimeout(notificationTimeout);
167-
notificationTimeout = setTimeout(() => {
168-
notification.style.display = "none";
169-
}, 3000);
170-
}
171-
172227
function submitFeedback(rating, feedbackText = "", email = "") {
173228
const formData = new FormData();
174229
formData.append(fieldIds.rating, rating);
@@ -181,19 +236,20 @@
181236
mode: "no-cors",
182237
body: formData
183238
}).then(() => {
184-
statusDiv.style.color = "green";
239+
statusDiv.style.color = "";
185240
statusDiv.textContent = "Thanks for your feedback!";
186241
feedbackTextarea.value = "";
187242
emailInput.value = "";
188243
feedbackForm.style.display = "none";
189244
selectedRating = 0;
190245

191246
stars.forEach((s) => {
192-
s.innerHTML = "☆";
193-
s.style.color = "#000";
247+
s.textContent = "☆";
248+
s.classList.remove("active");
249+
s.classList.remove("hovered");
194250
});
195251
}).catch(() => {
196-
statusDiv.style.color = "red";
252+
statusDiv.style.color = "";
197253
statusDiv.textContent = "Error sending feedback.";
198254
});
199255
}
@@ -203,42 +259,57 @@
203259

204260
star.addEventListener("mouseover", () => {
205261
stars.forEach((s, index) => {
206-
s.innerHTML = index < rating ? "★" : "☆";
207-
s.style.color = index < rating ? "#0E5FB5" : "#000";
262+
s.textContent = index < rating ? "★" : "☆";
263+
if(index < rating) {
264+
s.classList.add("hovered");
265+
s.classList.remove("active");
266+
} else {
267+
s.classList.remove("hovered");
268+
s.classList.remove("active");
269+
}
208270
});
209271
});
210272

211273
star.addEventListener("mouseleave", () => {
212274
stars.forEach((s, index) => {
213-
s.innerHTML = index < selectedRating ? "★" : "☆";
214-
s.style.color = index < selectedRating ? "#0E5FB5" : "#000";
275+
s.textContent = index < selectedRating ? "★" : "☆";
276+
if(index < selectedRating) {
277+
s.classList.add("active");
278+
} else {
279+
s.classList.remove("active");
280+
}
281+
s.classList.remove("hovered");
215282
});
216283
});
217284

218285
star.addEventListener("click", () => {
219286
selectedRating = rating;
220287

221288
stars.forEach((s, index) => {
222-
s.innerHTML = index < rating ? "★" : "☆";
223-
s.style.color = index < rating ? "#0E5FB5" : "#000";
289+
s.textContent = index < rating ? "★" : "☆";
290+
if(index < rating) {
291+
s.classList.add("active");
292+
} else {
293+
s.classList.remove("active");
294+
}
295+
s.classList.remove("hovered");
224296
});
225297

226298
sendRatingOnly(rating);
227-
showNotification("Thank you for your feedback");
299+
showNotification("Thanks for your feedback");
228300
feedbackForm.style.display = "block";
229301
statusDiv.textContent = "";
230302
});
231303
});
232304

233305
submitButton.addEventListener("click", () => {
234306
if (!selectedRating) return;
235-
236307
const feedbackText = feedbackTextarea.value.trim();
237308
const email = emailInput.value.trim();
238309

239310
if (selectedRating < 5 && !feedbackText) {
240-
statusDiv.style.color = "red";
241-
statusDiv.textContent = "Please enter feedback before sending.";
311+
statusDiv.style.color = "";
312+
statusDiv.textContent = "Write feedback before sending.";
242313
return;
243314
}
244315

@@ -253,16 +324,17 @@
253324
selectedRating = 0;
254325

255326
stars.forEach((s) => {
256-
s.innerHTML = "☆";
257-
s.style.color = "#000";
327+
s.textContent = "☆";
328+
s.classList.remove("active");
329+
s.classList.remove("hovered");
258330
});
259331
});
260332
}
261333

262-
// Run on full page load
334+
// Init on load
263335
document.addEventListener("DOMContentLoaded", initFeedbackWidget);
264336

265-
// Run on every page change in MkDocs Material
337+
// Re-init on page change (MkDocs Material support)
266338
if (typeof document$ !== 'undefined') {
267339
document$.subscribe(() => {
268340
initFeedbackWidget();

‎docs/css/extra.css‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,3 @@
2828
fill: currentColor;
2929
vertical-align: middle;
3030
}
31-
32-
.rating-widget:hover {
33-
box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
34-
0px 4px 5px 0px rgba(0, 0, 0, 0.14),
35-
0px 2px 4px -1px rgba(0, 0, 0, 0.20);
36-
transition: all 0.2s ease-out;
37-
}

0 commit comments

Comments
 (0)