v0.1.0-pre.046

kb-app-demo-desktop/frontend/sass/splash.scss

@@ -1,5 +1,5 @@
-// file: kb-app-demo-desktop/frontend/sass/splash.scss
-// version: 2
+// file: kb_app_demo/frontend/sass/splash.scss
+// version: 3
 
 @font-face {
     font-family: 'Dos Amazigh';
@@ -7,36 +7,36 @@
     font-weight: normal;
     font-style: normal;
     font-display: swap;
+    /* Assure un bon rendu pendant le chargement de la police */
 }
 
-html,
 body {
-    width: 100%;
-    height: 100%;
     margin: 0;
     padding: 0;
     background-color: transparent;
-    overflow: hidden;
-}
-
-body {
     display: flex;
     justify-content: center;
     align-items: center;
+    height: 100vh;
+    overflow: hidden;
     font-family: Arial, sans-serif;
 }
 
 #splash-container {
     position: relative;
     width: 960px;
+    /* Largeur exacte de votre image */
     height: 637px;
+    /* Hauteur exacte de votre image */
     opacity: 0;
+    /* Sera animé par JavaScript. */
     will-change: opacity;
 }
 
 #splash-image {
     position: absolute;
-    inset: 0;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
@@ -48,34 +48,24 @@ body {
     left: 50%;
     transform: translate(-50%, -50%);
     font-family: 'Dos Amazigh', sans-serif;
+    /* Application de la police */
     font-size: 96px;
     font-weight: bold;
     color: #fff;
+    /* Blanc pour contraste */
     text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    /* Ombre pour meilleure lisibilité */
     z-index: 2;
     text-align: center;
 }
 
-#debug-info,
-#messages-container {
-    overflow-y: auto;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-}
-
-#debug-info::-webkit-scrollbar,
-#messages-container::-webkit-scrollbar {
-    display: none;
-    width: 0;
-    height: 0;
-}
-
 #debug-info {
     position: absolute;
     top: 0;
     left: 0;
     width: 50%;
     max-height: 30%;
+    overflow-y: auto;
     color: white;
     font-family: monospace;
     font-size: 12px;
@@ -91,6 +81,7 @@ body {
     left: 0;
     width: 100%;
     max-height: 30%;
+    overflow-y: auto;
     background-color: rgba(0, 0, 0, 0.1);
     padding: 10px 10px 40px;
     z-index: 2;
@@ -106,12 +97,30 @@ body {
     color: #fff;
 }
 
-.splash-message.info { background-color: rgba(33, 150, 243, 0.2); }
-.splash-message.warning { background-color: rgba(255, 152, 0, 0.2); }
-.splash-message.error { background-color: rgba(244, 67, 54, 0.2); }
-.splash-message.success { background-color: rgba(76, 175, 80, 0.2); }
-
 @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
+
+.splash-message.info {
+    background-color: rgba(33, 150, 243, 0.2);
+}
+
+.splash-message.warning {
+    background-color: rgba(255, 152, 0, 0.2);
+}
+
+.splash-message.error {
+    background-color: rgba(244, 67, 54, 0.2);
+}
+
+.splash-message.success {
+    background-color: rgba(76, 175, 80, 0.2);
+}