v0.2.6-pre.014

crates/ksp-app-config-desk/frontend/sass/_app.scss

@@ -1,8 +1,9 @@
 // file: crates/ksp-app-config-desk/frontend/sass/_app.scss
-// version: 5
+// version: 6
 
 $app-header-height: 72px;
 $app-footer-height: 42px;
+$app-sidebar-width: 250px;
 
 html,
 body {
@@ -59,13 +60,19 @@ body {
     font-family: var(--bs-font-monospace);
 }
 
-.app-nav {
-    min-width: 0;
-    overflow-x: auto;
-    scrollbar-width: thin;
+.app-sidebar {
+    width: $app-sidebar-width;
+    min-width: $app-sidebar-width;
+    max-width: $app-sidebar-width;
 }
 
-.app-nav-button {
+.app-sidebar-scroll,
+.app-content {
+    height: 100%;
+    max-height: 100%;
+}
+
+.app-sidebar .nav-link {
     white-space: nowrap;
 }
 

crates/ksp-app-config-desk/frontend/sass/splash.scss

@@ -1,5 +1,5 @@
 // file: crates/ksp-app-config-desk/frontend/sass/splash.scss
-// version: 3
+// version: 4
 
 @font-face {
     font-family: "Dos Amazigh";
@@ -9,13 +9,23 @@
     font-display: swap;
 }
 
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html,
 body {
-    display: flex;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     margin: 0;
     padding: 0;
     overflow: hidden;
+}
+
+body {
+    display: flex;
     align-items: center;
     justify-content: center;
     background: transparent;
@@ -25,8 +35,12 @@ body {
 #splash-container {
     position: relative;
     width: 960px;
+    max-width: 100%;
     height: 637px;
+    max-height: 100%;
+    overflow: hidden;
     opacity: 0;
+    will-change: opacity;
 }
 
 #splash-image {
@@ -35,6 +49,11 @@ body {
     width: 100%;
     height: 100%;
     z-index: 1;
+    object-fit: contain;
+    user-select: none;
+    -webkit-user-select: none;
+    -webkit-user-drag: none;
+    pointer-events: none;
 }
 
 #app-name {
@@ -49,17 +68,70 @@ body {
     font-weight: bold;
     text-align: center;
     text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    white-space: nowrap;
+    user-select: none;
+    -webkit-user-select: none;
+    -webkit-user-drag: none;
+    pointer-events: none;
 }
 
-#splash-status {
+#debug-info {
     position: absolute;
-    right: 1rem;
-    bottom: 1rem;
-    left: 1rem;
+    top: 0;
+    left: 0;
     z-index: 3;
-    padding: 0.55rem 0.75rem;
+    width: 55%;
+    max-height: 30%;
+    overflow-y: auto;
+    padding: 8px;
     color: #fff;
-    background: rgba(0, 0, 0, 0.35);
+    background: rgba(0, 0, 0, 0.18);
     font-family: monospace;
-    font-size: 0.82rem;
+    font-size: 12px;
+    scrollbar-width: none;
+}
+
+#messages-container {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 3;
+    max-height: 30%;
+    overflow-y: auto;
+    padding: 10px 10px 36px;
+    background: rgba(0, 0, 0, 0.18);
+    font-family: Arial, sans-serif;
+    font-size: 14px;
+    scrollbar-width: none;
+}
+
+#debug-info::-webkit-scrollbar,
+#messages-container::-webkit-scrollbar {
+    display: none;
+}
+
+.splash-message {
+    margin-bottom: 8px;
+    padding: 6px 10px;
+    border-radius: 4px;
+    color: #fff;
+    font-weight: bold;
+    animation: splashMessageFadeIn 0.3s ease-in-out;
+}
+
+.splash-message.info { background: rgba(33, 150, 243, 0.22); }
+.splash-message.warning { background: rgba(255, 152, 0, 0.22); }
+.splash-message.error { background: rgba(244, 67, 54, 0.22); }
+.splash-message.success { background: rgba(76, 175, 80, 0.22); }
+
+@keyframes splashMessageFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }