Update to Bismuth 17

Author: Gurasuraisu

assets/img/ver/17.png

@@ -421,7 +421,8 @@ body:not(.reduce-animations)::before,
 	opacity: 0;
     transition: background-color 0.3s, color 0.3s, background-image 0.5s, filter 1s !important;
 	/* Match the main background transform for animations */
-	transform: scale(var(--bg-transform-scale, 1.05));
+	transform: scale(var(--bg-transform-scale));
+	filter: var(--wallpaper-filter, none); /* Use the CSS custom property */
 }
 
 #time-of-day-overlay {
@@ -645,7 +646,7 @@ input[type="color"]::-moz-color-swatch {
     border-radius: 5px;
     opacity: 1;
     outline: 1px solid var(--glass-border);
-	backdrop-filter: invert(1) hue-rotate(180deg) contrast(2) saturate(1) blur(10px) opacity(0.5);
+	backdrop-filter: invert(0.8) hue-rotate(180deg) contrast(1) saturate(2) blur(10px);
 }
 
 /* One Button Navigation Handle */
@@ -808,7 +809,7 @@ body.one-button-nav-active .dock.show {
     width: 6px;
     height: 6px;
     border-radius: 50%;
-    backdrop-filter: invert(1) hue-rotate(180deg) contrast(2) saturate(1) blur(10px) opacity(0.5);
+    backdrop-filter: invert(0.8) hue-rotate(180deg) contrast(1) saturate(2) blur(10px);
 }
 
 #status-indicator .material-symbols-rounded {
@@ -863,7 +864,7 @@ body.one-button-nav-active .dock.show {
 	    -webkit-mask-composite: source-in;
 	    mask-image: linear-gradient(black, black);
 	    mask-composite: source-in;
-	    backdrop-filter: invert(1) hue-rotate(180deg) contrast(2) saturate(1) blur(10px) opacity(0.5);
+	    backdrop-filter: invert(0.8) hue-rotate(180deg) contrast(1) saturate(2) blur(10px);
 	}
 }
 
@@ -2544,7 +2545,7 @@ input[type="radio"]:checked::before {
 		width: 12px;
 		height: 12px;
 		background-color: transparent;
-		backdrop-filter: invert(1) hue-rotate(180deg) contrast(2) saturate(1) blur(10px) opacity(0.5);
+		backdrop-filter: invert(0.8) hue-rotate(180deg) contrast(1) saturate(2) blur(10px);
 		opacity: 0.25;
 	}
 
@@ -3164,33 +3165,23 @@ input[type="radio"]:checked::before {
 /* App Drawer Styles */
 .app-drawer {
     position: fixed;
-    bottom: -100%;
+	opacity: 0;
+    bottom: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: transparent;
-    transition: bottom 0.3s ease;
+	background-color: var(--background-color-tr);
+	backdrop-filter: blur(5px);
     z-index: 1001;
     overflow: hidden;
     touch-action: none;
     user-select: none;
-    backdrop-filter: var(--edge-refraction-filter) blur(2.5px);
     touch-action: none;
     user-select: none;
-    opacity: 0;
-    border-top: 1px solid var(--glass-border);
-    border-radius: 50px 50px 0 0;
-    corner-shape: superellipse(1.5);
     content-visibility: hidden;
     pointer-events: none;
-    border: 1px solid var(--glass-border);
-    box-shadow: var(--sun-shadow-strong), 0 0 50px rgba(0, 0, 0, 0.2);
-}
-
-#app-drawer {
     transform-origin: bottom;
-    will-change: transform, opacity, bottom;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    will-change: transform, opacity, bottom, content-visibility;
 }
 
 .drawer-action-btn {
@@ -3214,14 +3205,8 @@ input[type="radio"]:checked::before {
 			bottom: 0;
 		    opacity: 1;
 		    transform: none;
-		    filter: none;
 		    content-visibility: auto;
 		    pointer-events: auto;
-		    background-color: var(--background-color-tr);
-			backdrop-filter: blur(5px);
-		    border-radius: 0;
-		    border: none;
-		    box-shadow: none;
         }
 
         .app-drawer-handle {
@@ -4225,12 +4210,6 @@ input[type="radio"]:checked::before {
 	}
 }
 
-@media (min-width: 800px) {
-    .app-drawer {
-        transform: scale(0.9);
-    }
-}
-
 @media (max-width: 520px) {
 	.app-drawer-grid {
 		grid-template-columns: repeat(3, 1fr);
@@ -4264,4 +4243,4 @@ input[type="radio"]:checked::before {
 	.app-drawer-grid {
 		grid-template-columns: repeat(1, 1fr);
 	}
-}
+}

css/styles.css

@@ -387,6 +387,9 @@ <h3 style="margin: 0;">LANG_CONTROLS</h3>
                     <button id="fullscreen-btn" class="btn-qc" onclick="goFullscreen()">
                         <span class="material-symbols-rounded" style="font-size: 18px;">expand_content</span>
                     </button>
+                    <button id="blackout-btn" class="btn-qc" style="background-color: var(--tonal);">
+                        <span class="material-symbols-rounded" style="font-size: 18px; color: var(--background-color);">power_settings_new</span>
+                    </button>
                 </div>
             </div>
             <div class="qc-sliders">
@@ -396,9 +399,6 @@ <h3 style="margin: 0;">LANG_CONTROLS</h3>
                     </label>
                     <input type="range" min="20" max="100" value="100" class="brightness-slider" id="brightness-control">
                 </div>
-                <button id="blackout-btn" class="btn-qc" style="width: 38px; height: 38px; background-color: var(--tonal);">
-                    <span class="material-symbols-rounded" style="font-size: 20px; color: var(--background-color);">power_settings_new</span>
-                </button>
             </div>
             <div class="quick-controls">
                 <div class="qcontrol-item" id="silent_switch_qc">
@@ -636,7 +636,7 @@ <h4 style="margin: 10px;">Atmosphere</h4>
             </div>
             <div class="version-info">
                 <label class="cust-label" for="version-details">
-                    <img src="/assets/img/ver/16.png" alt="Polygol 16" style="width: 24px; height: 24px; scale: 1.5;">
+                    <img src="/assets/img/ver/17.png" style="width: 24px; height: 24px; scale: 1.5;">
                     <span style="margin-left: 4px;">version information</span>
                 </label>
                 <button id="versionButton">LANG_DETAIL_VERS</button>
@@ -948,7 +948,41 @@ <h4 style="margin: 0 0 10px 0; text-align: center;">New Sticker</h4>
         </div>
     </div>
 
+    <!-- JAVASCRIPT -->
+    <!-- Core Utilities -->
+    <script src="js/core/storage.js"></script>
+    <script src="js/core/audio.js"></script>
+    <script src="js/core/a11y.js"></script>
+    <script src="js/core/performance.js"></script>
+    <script src="js/core/system.js"></script>
+    <script src="js/core/dialogs.js"></script>
+    <script src="js/core/files.js"></script>
+    <script src="js/core/power.js"></script>
+    <script src="js/core/first-setup.js"></script>
+    <script src="js/core/sys-connect-waves.js"></script>
+    <!-- UI Components -->
+    <script src="js/ui/theme.js"></script>
+    <script src="js/ui/modes.js"></script>
+    <script src="js/ui/notifications.js"></script>
+    <script src="js/ui/clock-weather.js"></script>
+    <script src="js/ui/environment.js"></script>
+    <script src="js/ui/wallpaper.js"></script>
+    <script src="js/ui/widgets.js"></script>
+    <script src="js/ui/dock-drawer.js"></script>
+    <script src="js/ui/settings.js"></script>
+    <script src="js/ui/physical-keyboard.js"></script>
+    <script src="js/ui/browser-chrome.js"></script>
+    <script src="js/ui/donburi.js"></script>
+    <script src="js/ui/main-ui.js"></script>
+    <!-- App & Window Management -->
+    <script src="js/apps/app-switcher.js"></script>
+    <script src="js/apps/window-manager.js"></script>
+    <script src="js/apps/media-session.js"></script>
+    <script src="js/apps/live-activities.js"></script>
+    <script src="js/apps/api.js"></script>
+    <!-- Boot + Other -->
     <script src="js/index.js"></script>
+    <script src="js/core/boot.js"></script>
     <script src="js/kirbservices.js"></script>
 </body>
-</html>
+</html>