edit: consstruction d'une structure responsive pour l'interface

v1-com-officielle/src/assets/style.css

@@ -1,15 +1,15 @@
 /*=============Gamme colorée*/
 
 :root[data-theme="dark"]{
-  --dark-color: #380052;
-  --light-color: #C303FF;
+  --back-color: black;
+  --main-color: white;
   --accent-color: #00FF76;
 }
 
 :root[data-theme="light"]{
-  --dark-color: #380052;
-  --light-color: #C303FF;
-  --accent-color: #00FF76;
+  --back-color: white;
+  --main-color: black;
+  --accent-color: #C303FF;
 }
 
 /*=============Typo*/
@@ -49,7 +49,7 @@ a{
 .referenceText{
   position:absolute;
   z-index: -33;
-  color: var(--light-color);
+  color: var(--dark-color);
 }
 
 /*=============Body & background*/
@@ -57,7 +57,7 @@ html, body{
   margin: 0;
   padding: 0;
   position: absolute;
-  background-color: #000000;
+  background-color: var(--dark-color);
   width: 100%;
   height:100%;
   position: fixed;
@@ -83,3 +83,34 @@ canvas {
   height: 0;
   overflow: hidden;
 }
+
+/*================= Mise en page:
+  => Mobile First : par défaut, moins de 500px
+  => Tablette et PC format haut : de 500 à 1000px
+  => PC large : à partir de 1000px
+*/
+
+/*+++++++++++++++++ COPYBOX
+    ================ PC HAUT/IPAD
+    @media(min-width:500px){}
+    ================ PC LARGE
+    @media(min-width:1000px){}
+*/
+
+/*=============Vue root app */
+
+#app{
+  position:absolute;
+  inset:0;
+  width:100%;
+  height: 100%;
+  overflow-y: scroll;
+}
+
+.uiStyle{
+  background-color: var(--back-color);
+  border-style: solid;
+  border-color: var(--main-color);
+  border-width: thin;
+  border-radius: 0;
+}