colors on label

src/components/editor/EditorPanel.vue

@@ -70,7 +70,7 @@ const activeTab = inject('activeTab');
   position: fixed;
   top: 0;
   left: 0;
-  width: 38rem;
+  width: var(--panel-w);
   height: 100vh;
   display: flex;
   flex-direction: column;
@@ -79,7 +79,7 @@ const activeTab = inject('activeTab');
 
 nav {
   position: absolute;
-  margin: 1rem 0 0 1rem;
+  margin: 1.5rem 0 0 2rem;
 
   display: flex;
   gap: 0.5rem;
@@ -88,7 +88,7 @@ nav {
 
 .close-button {
   position: absolute;
-  top: 1rem;
+  top: 1.5rem;
   right: 1rem;
   z-index: 2;
 
@@ -117,7 +117,7 @@ nav {
   flex: 1;
   overflow: hidden;
   position: relative;
-  left: -35rem;
+  left: calc(var(--panel-w)*-1);
 
   padding: 4rem 0;
 
@@ -134,8 +134,8 @@ nav {
 .tab-panel {
   height: 100%;
   overflow-y: auto;
-  overflow-x:hidden;
-  padding-right: 2em;
-  padding-left: 1em;
+  overflow-x: hidden;
+  padding: 0 2em;
+  // padding-left: 1em;
 }
 </style>

src/components/editor/PageSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="settings-section" id="settings-section_page">
+  <section class="settings-section" id="settings-section_page" data-color-type="page">
     <h2>Réglage des pages</h2>
     <div class="container"> 
   

src/components/editor/TextSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="settings-section" id="settings-section_text">
+  <section class="settings-section" id="settings-section_elem" data-color-type="elem">
     <h2>Réglage du texte</h2>
     <div class="container"> 
   

src/style.css

@@ -1 +1 @@
-@import url('/assets/css/style.css');
+@import '../public/assets/css/style.scss';