theme improvements

Author: bitrequest

assets_js_bitrequest_core.js

@@ -581,7 +581,8 @@ function set_theme() {
         if (filename === "default.css") {
             return
         }
-        $("link#theme").attr("href", d_proxy() + "/proxy/v1/themes/" + filename);
+        const version = $("#ua").attr("data-version");
+        $("link#theme").attr("href", d_proxy() + "/proxy/v1/themes/" + filename + "?v=" + version);
     }
 }
 

assets_js_bitrequest_settings.js

@@ -579,20 +579,22 @@ function select_theme() {
             theme_not_found();
             return
         }
-        $("link#theme").attr("href", d_proxy() + "/proxy/v1/themes/" + filename);
+        const version = $("#ua").attr("data-version");
+        $("link#theme").attr("href", d_proxy() + "/proxy/v1/themes/" + filename + "?v=" + version);
     })
 }
 
 function cancel_theme() {
     $(document).on("click", "#canceltheme", function() {
-        $("link#theme").attr("href", d_proxy() + "/proxy/v1/themes/" + $("#themesettings").data("selected"));
+        const version = $("#ua").attr("data-version");
+        $("link#theme").attr("href", d_proxy() + "/proxy/v1/themes/" + $("#themesettings").data("selected") + "?v=" + version);
         canceldialog();
     })
 }
 
 function submit_theme() {
     $(document).on("click touch", "#submittheme", function() {
-        var thisvalue = $("#themeformbox").find("input:first").val();
+        const thisvalue = $("#themeformbox").find("input:first").val();
         $("#themesettings").data("selected", thisvalue).find("p").html(thisvalue);
         canceldialog();
         notify("Data saved");
@@ -601,7 +603,8 @@ function submit_theme() {
 }
 
 function theme_not_found() {
-    $("link#theme").attr("href", "assets_styles_themes_default.css");
+    const version = $("#ua").attr("data-version");
+    $("link#theme").attr("href", "assets_styles_themes_default.css?v=" + version);
 }
 
 // ** SECURITY: **

assets_styles_styles.css

@@ -1747,7 +1747,7 @@ li[data-checked="false"] .checkbox:before,
 }
 
 #actions {
-    float: left;
+    float: right;
     width: 100%;
     padding: 0;
     font-size: 140%;
@@ -1756,6 +1756,7 @@ li[data-checked="false"] .checkbox:before,
 
 #actions.custom {
     opacity: 0;
+    pointer-events:none;
 }
 
 #actions div {

assets_styles_themes_default.css

@@ -1,3 +1,8 @@
+/*
+ * Default theme
+ * Use this stylesheet as a basis for new themes.
+ */
+
 /* Body and base background */
 body,
 .requestlist>li.rqli,

proxy/v1/themes/aurora.css

@@ -1,28 +1,18 @@
 /*
- *  Aurora iOS Theme (Mint Edition)
- *
+ *  Aurora iOS Theme
  *  A bright, modern, and tactile interface inspired by soft materials and pastel gradients.
- *  Key principles:
- *  1.  Light & Airy Background: A soft, multi-tone pastel gradient creates a serene backdrop.
- *  2.  Claymorphism & Depth: UI elements use layered, soft shadows to appear as if they are
- *      extruded from the background, creating a tactile "clay" effect.
- *  3.  Vibrant Accents: A lively mint-to-teal gradient for interactive elements makes the UI pop.
- *  4.  Clarity & Readability: Crisp, dark text and rounded, friendly shapes ensure ease of use.
  */
 
 /* Body and base background */
 body {
-    /* A beautiful, subtle gradient that evokes a sunrise or aurora */
-    background: linear-gradient(135deg, #E6E6FA, #E0FFFF, #FFF0F5);
+    background: linear-gradient(135deg, #d9d9f5, #d1fafa, #ffe8f0);
     background-attachment: fixed;
-    color: #3D4451;
-    /* A soft, dark slate color for primary text */
+    color: #525b6a;
 }
 
 .requestlist>li.rqli,
 .requestlist>li .brmarker,
 .requestlist>li .brstatuspanel {
-    /* Base background for list items, this will be styled more specifically below */
     background-color: transparent;
 }
 
@@ -40,7 +30,6 @@ header,
     background-color: rgba(255, 255, 255, 0.6);
     -webkit-backdrop-filter: blur(18px);
     backdrop-filter: blur(18px);
-    /* A soft shadow to "lift" the header off the page */
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
     border-bottom: 1px solid rgba(255, 255, 255, 0.7);
 }
@@ -49,15 +38,13 @@ header,
 .heading {
     padding-bottom: 1.3em;
     color: #2c333a;
-    /* Darker heading for more emphasis */
 }
 
 /* Request list item backgrounds - The "Claymorphic" elements */
 .requestlist>li.rqli {
     background-color: #f7f7f7;
     border-radius: 15px;
     margin-bottom: 12px;
-    /* Key for the clay effect: a combination of a soft outer shadow and a subtle inner highlight */
     box-shadow: 5px 5px 10px rgba(180, 190, 200, 0.4),
         inset 2px 2px 4px rgba(255, 255, 255, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.9);
@@ -71,22 +58,19 @@ header,
 }
 
 .requestlist>li.rqli:nth-child(odd) {
-    /* Keeping the background consistent for a cleaner look in this theme */
     background-color: #f7f7f7;
 }
 
 .requestlist>li.requestoutgoing.visible_request,
 .requestlist>li.requestoutgoing.visible_request .brstatuspanel,
 .requestlist>li.requestoutgoing .brmarker {
     background-color: rgba(230, 240, 230, 0.8);
-    /* A very subtle green tint */
 }
 
 .requestlist>li.requestlocal.visible_request,
 .requestlist>li.requestlocal.visible_request .brstatuspanel,
 .requestlist>li.requestlocal .brmarker {
     background-color: rgba(230, 235, 245, 0.8);
-    /* A very subtle blue tint */
 }
 
 /* Link and interactive element colors */
@@ -102,12 +86,10 @@ header,
 .qrscanner,
 .ref {
     color: #1ABC9C;
-    /* A vibrant, friendly teal for links and icons */
 }
 
 .button,
 .alias {
-    /* A fresh pastel green gradient for the main call-to-action buttons */
     background: linear-gradient(45deg, #A9DFBF, #48C9B0);
     border: none;
     border-radius: 12px;

proxy/v1/themes/forest_canopy.css

@@ -5,7 +5,6 @@
 
 /* Body and base background */
 body {
-    /* A subtle gradient from deep forest green to a dark, earthy floor */
     background: linear-gradient(to bottom, #2d4f3f, #1a1a1c);
     background-attachment: fixed;
     color: #EAEAEA;
@@ -27,8 +26,7 @@ body {
 /* Header and navigation background */
 header,
 #fixednav {
-    /* A semi-transparent deep green glass */
-    background-color: rgba(45, 79, 63, 0.65);
+    background-color: rgba(32, 40, 36, 0.65);
     -webkit-backdrop-filter: blur(15px);
     backdrop-filter: blur(15px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
@@ -79,7 +77,6 @@ header,
 .qrscanner,
 .ref {
     color: #009788;
-    /* A bright, minty green */
 }
 
 .button,

proxy/v1/themes/malignant_glare.css

@@ -1,54 +1,72 @@
 /*
  *  Malignant Glare
- *
- *  An aggressive, malware-inspired cyberpunk interface.
- *  Key principles:
- *  1.  Corrupted Grid: A dark, deep-space background with a hex grid and animated scanlines.
- *  2.  Menacing Neon: A vibrant, dangerous magenta is the primary accent, offset by electric cyan.
- *  3.  Damaged & Angular UI: Elements are "chipped" and broken using clip-path for a corrupted feel.
- *  4.  Flickering & Unstable: Animations on headings and borders create a sense of system instability.
+ *  An aggressive, cyberpunk-inspired interface.
  */
 
-/* --- Keyframe Animations --- */
-/* CORRECTED: This animation now scrolls the original texture the full height of the screen */
+
+/* Keyframe Animations */
 @keyframes scanline {
     0% {
         transform: translateY(0);
     }
 
     100% {
         transform: translateY(100%);
-        /* Moves down by half its own height (100% of the screen) */
     }
 }
 
-@keyframes text-flicker {
-    0% {
-        text-shadow: 0 0 10px #ff00c1, 0 0 5px #00ffff, 0 0 2px #ffffff;
+@keyframes cyber-flicker {
+
+    0%,
+    75%,
+    100% {
+        text-shadow: 0 0 5px #ff00c1, 0 0 10px #ff00c1;
+        transform: translate(0, 0) skewX(0);
+    }
+
+    76% {
+        text-shadow: 0 0 5px #ff00c1, 0 0 10px #ff00c1, -1px 0 2px #00ffff;
+    }
+
+    77% {
+        text-shadow: 0 0 5px #ff00c1, 0 0 10px #ff00c1, -2px 1px 3px #00ffff, 2px -1px 3px #e81c67;
+        transform: translate(1px, -2px) skewX(-5deg);
     }
 
-    15% {
-        text-shadow: 0 0 12px #ff00c1, 0 0 7px #00ffff, 0 0 3px #ffffff;
+    78% {
+        text-shadow: 0 0 5px #ff00c1, 0 0 10px #ff00c1, 1px -1px 3px #00ffff, -1px 1px 3px #e81c67;
+        transform: translate(-1px, 1px) skewX(5deg);
     }
 
-    30% {
-        text-shadow: 0 0 8px #ff00c1, 0 0 4px #00ffff, 0 0 2px #ffffff;
+    79% {
+        text-shadow: 0 0 5px #ff00c1, 0 0 10px #ff00c1;
+        transform: translate(0, 0) skewX(0);
+    }
+}
+
+@keyframes glitch-skew {
+    0% {
+        transform: skewX(0);
+    }
+
+    25% {
+        transform: skewX(-4deg);
     }
 
     50% {
-        text-shadow: none;
+        transform: skewX(4deg);
     }
 
-    51% {
-        text-shadow: 0 0 10px #ff00c1, 0 0 5px #00ffff, 0 0 2px #ffffff;
+    75% {
+        transform: skewX(-2deg);
     }
 
     100% {
-        text-shadow: 0 0 10px #ff00c1, 0 0 5px #00ffff, 0 0 2px #ffffff;
+        transform: skewX(0);
     }
 }
 
-/* --- Body and Background --- */
+/* Body and base background */
 body {
     background-color: #0d011a;
     color: #b3b3b3;
@@ -70,10 +88,8 @@ body::after {
             rgba(255, 255, 255, 0.05) 1px,
             transparent 1px,
             transparent 4px);
-    /* Apply corrected animation with a slower, more deliberate speed */
     animation: scanline 8s infinite linear;
     pointer-events: none;
-    /* Max z-index to ensure it overlays everything */
     z-index: 2147483647;
 }
 
@@ -85,7 +101,7 @@ body::after {
     box-shadow: inset 0 0 15px rgba(255, 0, 193, 0.3), 0 0 15px rgba(255, 0, 193, 0.3);
 }
 
-/* --- Header & Nav --- */
+/* Header and navigation background */
 header,
 #fixednav {
     font-family: 'Courier New', Courier, monospace;
@@ -94,15 +110,15 @@ header,
     box-shadow: 0 0 20px rgba(255, 0, 193, 0.5);
 }
 
-/* --- Heading Styles --- */
+/* Heading styles */
 .heading {
     font-family: 'Courier New', Courier, monospace;
     padding-bottom: 1.3em;
     color: #ffffff;
-    animation: text-flicker 3s infinite linear;
+    animation: cyber-flicker 4s infinite linear;
 }
 
-/* --- List Items --- */
+/* Request list item backgrounds */
 .requestlist>li.rqli {
     background-color: rgba(29, 9, 48, 0.4);
     margin-bottom: 2px;
@@ -131,7 +147,7 @@ header,
     color: #b3b3b3;
 }
 
-/* --- Links & Buttons --- */
+/* Link and interactive element colors */
 #dialogbody h2:before,
 #toseed,
 #actions div,
@@ -149,6 +165,7 @@ header,
 .button,
 .alias {
     background-color: #ff00c1;
+    border: 1px solid #ff00c1;
     border: none;
     font-weight: bold;
     text-transform: uppercase;
@@ -162,9 +179,11 @@ header,
     background-color: #ffffff;
     color: #ff00c1;
     box-shadow: 0 0 25px rgba(255, 255, 255, 0.8);
+    animation: glitch-skew 0.35s ease-in-out both;
+    border: 1px solid #ff00c1;
 }
 
-/* --- Icon Filter --- */
+/* Icon Filter */
 .currencylist .cmc_icon {
     filter: grayscale(1) sepia(1) hue-rotate(240deg) saturate(8) brightness(0.9);
 }

proxy/v1/themes/oceanic_depth.css

@@ -5,7 +5,6 @@
 
 /* Body and base background */
 body {
-    /* A subtle gradient from deep sea blue to a dark abyss */
     background: linear-gradient(to bottom, #1d3b5f, #1a1a1c);
     background-attachment: fixed;
     color: #EAEAEA;
@@ -27,8 +26,7 @@ body {
 /* Header and navigation background */
 header,
 #fixednav {
-    /* A semi-transparent deep blue glass */
-    background-color: rgba(29, 59, 95, 0.65);
+    background-color: rgba(20, 29, 41, 0.65);
     -webkit-backdrop-filter: blur(15px);
     backdrop-filter: blur(15px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
@@ -78,14 +76,12 @@ header,
 .selectarrows,
 .qrscanner,
 .ref {
-    color: #63e2b7;
-    /* A vibrant, light teal */
+    color: #009788;
 }
 
 .button,
 .alias {
-    background-color: rgba(99, 226, 183, 0.8);
-    /* Semi-transparent teal */
+    background-color: #009788;
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 10px;
     -webkit-backdrop-filter: blur(5px);