Lettertype bij knoppen en kleuren verder aangepast

Author: klascal

index.html

@@ -1331,13 +1331,8 @@ <h2 data-translate="settings">Instellingen</h2>
             </section>
           </div>
         </div>
-        <button
-          class="btn"
-          id="closeBtn"
-          onclick="closeDialog()"
-          data-translate="closeBtn"
-        >
-          Sluiten
+        <button class="btn" id="closeBtn" onclick="closeDialog()">
+          <span data-translate="closeBtn">Sluiten</span>
         </button>
       </dialog>
       <style id="styling"></style>

material.css

@@ -276,7 +276,7 @@ body[data-theme="pink monochrome"] {
     }
   }
   body[data-theme="red"] {
-    --primary-light: #ff8a8a;
+    --primary-light: #fda294;
     --primary-dark: #610f11;
     --primary-accent: #571a14;
     --primary-accent-faded: #5e423fb0;
@@ -312,8 +312,8 @@ body[data-theme="pink monochrome"] {
     --primary-background: #241d17;
   }
   body[data-theme="yellow"] {
-    --primary-light: #ffd574;
-    --primary-dark: #614d12;
+    --primary-light: #f1ca6d;
+    --primary-dark: #5f4201;
     --primary-accent: #462b13;
     --primary-accent-faded: #544630b0;
     --primary-foreground: #483214;
@@ -403,7 +403,7 @@ body[data-theme="pink monochrome"] {
   }
   body[data-theme="pink"] {
     --primary-light: #ff94b3;
-    --primary-dark: #730132;
+    --primary-dark: #71203e;
     --primary-accent: #730438;
     --primary-accent-faded: #5e3e45b0;
     --primary-foreground: #6c1934;

schedule.js

@@ -63,7 +63,7 @@ if (!schoolName && !accessToken) {
   document
     .querySelector("#dialog #closeBtn")
     .setAttribute("onclick", "resetAfterWelcomeScreen()");
-  document.querySelector("#dialog #closeBtn").innerHTML = "Volgende";
+  document.querySelector("#dialog #closeBtn span").innerHTML = "Volgende";
   showDialog();
 }
 setInterval(() => {
@@ -269,7 +269,7 @@ function show(id, title, hideBack) {
         document
           .querySelector("#dialog #closeBtn")
           .setAttribute("onclick", "closeDialog()");
-        document.querySelector("#dialog #closeBtn").innerHTML = "Sluiten";
+        document.querySelector("#dialog #closeBtn span").innerHTML = "Sluiten";
       }
     }
   });

style.css

@@ -558,6 +558,7 @@ section div br:not(:first-of-type) {
 #ltr span {
   vertical-align: text-top;
   font-family: Google Sans Flex, Inter, system-ui;
+  font-variation-settings: "opsz" 20, "ROND" 100;
 }
 #ltr svg {
   fill: var(--accent-text);
@@ -843,9 +844,11 @@ li {
   background-color: var(--primary-accent);
 }
 #dayBtn span,
-#weekBtn span {
+#weekBtn span,
+#closeBtn span {
   font-family: Google Sans Flex, Inter, system-ui;
   line-height: 1;
+  font-variation-settings: "opsz" 20, "ROND" 100;
 }
 #viewSelect {
   display: flex;