Update news with new theme

content/assets/zyneon/css/themes/default/shared.css

@@ -3,13 +3,17 @@
     --background2: #101010;
     --background3: #1a1a1a;
     --background4: #080808;
+    --background5: #202020;
+    --background6: #2c2c2c;
     --background-accent: #000;
     --highlight: #fff;
     --color: #fff;
     --color-dim: #ffffff60;
     --color-dim-less: #ffffff90;
     --inverted: #000;
     --accent: #7f34f8;
+    --border: #303030;
+    --border2: #4a4a4a;
 }
 
 @keyframes wiggle {

content/assets/zyneon/js/functions.js

@@ -132,12 +132,16 @@ function setTheme(newTheme) {
         root.style.setProperty('--background2', '#e0e0e0');
         root.style.setProperty('--background3', '#d3d3d3');
         root.style.setProperty("--background4", "#f6f6f6");
+        root.style.setProperty("--background5", "#cccccc");
+        root.style.setProperty("--background6", "#dddddd");
         root.style.setProperty("--background-accent", "#fff");
         root.style.setProperty("--highlight", "#000");
         root.style.setProperty("--color", "#000");
         root.style.setProperty("--color-dim", "#00000085");
         root.style.setProperty("--color-dim-less", "#00000099");
         root.style.setProperty("--inverted", "#fff");
+        root.style.setProperty("--border", "#ffffff90");
+        root.style.setProperty("--border2", "#ffffff");
         localStorage.setItem('theme', theme);
         callJavaMethod('button.theme.' + theme);
     } else if (newTheme === "default.zyneon") {
@@ -147,7 +151,11 @@ function setTheme(newTheme) {
         root.style.setProperty('--background2', '#0d061c');
         root.style.setProperty('--background3', '#120925');
         root.style.setProperty('--background4', '#060112');
+        root.style.setProperty('--background5', '#100817');
+        root.style.setProperty('--background6', '#1c0d27');
         root.style.setProperty('--background-accent', '#050113');
+        root.style.setProperty("--border", "#2d2237");
+        root.style.setProperty("--border2", "#331a40");
         localStorage.setItem('theme', theme);
         callJavaMethod('button.theme.' + theme);
     } else if (newTheme === "default.dark") {
@@ -156,12 +164,16 @@ function setTheme(newTheme) {
         root.style.setProperty('--background2', '#101010');
         root.style.setProperty('--background3', '#1a1a1a');
         root.style.setProperty('--background4', '#080808');
+        root.style.setProperty('--background5', '#202020');
+        root.style.setProperty('--background6', '#2c2c2c');
         root.style.setProperty('--background-accent', '#000');
         root.style.setProperty("--highlight", "#fff");
         root.style.setProperty("--color", "#fff");
         root.style.setProperty("--color-dim", "#ffffff60");
         root.style.setProperty("--color-dim-less", "#ffffff90");
         root.style.setProperty("--inverted", "#000");
+        root.style.setProperty("--border", "#303030");
+        root.style.setProperty("--border2", "#4a4a4a");
         localStorage.setItem('theme', theme);
         callJavaMethod('button.theme.' + theme);
     } else if (newTheme === "custom") {

news/cards.css

@@ -0,0 +1,16 @@
+.cnt {
+    .card {
+        transition: all 0.25s ease;
+        background: var(--background5) !important;
+        border: 2px solid var(--border) !important;
+
+        * {
+            background: transparent !important;
+        }
+    }
+
+    .card:hover {
+        border-color: var(--border2) !important;
+        background: var(--background6) !important;
+    }
+}

news/news.html

@@ -7,6 +7,7 @@
         <link id="shared-css" rel="stylesheet" href="../content/assets/zyneon/css/themes/default/shared.css">
         <link id="page-css" rel="stylesheet" href="../content/assets/zyneon/css/themes/default/sub/news.css">
         <link id="new-css" rel="stylesheet" href="news.css">
+        <link id="card-css" rel="stylesheet">
         <link id="icons-css" rel='stylesheet' href='../content/assets/boxicons/css/boxicons.min.css'>
         <script>syncTheme();</script>
     </head>

news/news.js

@@ -7,6 +7,7 @@ addEventListener("DOMContentLoaded", () => {
         if(urlParams.get("type")==="new") {
             const newContent = document.getElementById("new-changelog");
             newContent.classList.add("active");
+            document.getElementById("card-css").href = "cards.css";
             document.getElementById("neco").classList.add("active");
             document.getElementById("neme").classList.add("active");
             appType = "new";