[+] Color display

src/views/NewHome.vue

@@ -3,8 +3,22 @@
         <canvas id="three"></canvas>
 
         <!-- Editor controls -->
-        <div id="editor-controls" class="fbox-vcenter">
+        <div id="editor-controls">
-            <span>Editor</span>
+            <div>Editor</div>
+
+            <div class="separator"/>
+
+            <div>New</div>
+            <div>Save</div>
+
+            <div class="separator"/>
+
+            <div id="colors" class="fbox-h">
+                <span class="colors-text">Colors</span>
+                <div class="color" v-for="(c, i) in colors" :key="i" :style="{'background-color': c}">
+                    <div>{{i + 1}}</div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -19,6 +33,18 @@ export default class NewHome extends Vue
 {
     editMode = config.editMode
 
+    colors = [
+        '#ffa8a8',
+        '#ffa8a8',
+        '#ffa8a8',
+        '#ffa8a8',
+        '#ffa8a8',
+        '#ffa8a8',
+        '#ffa8a8',
+        '#ffa8a8',
+        '#ffa8a8',
+    ]
+
     mounted(): void
     {
         start('three')
@@ -38,15 +64,47 @@ export default class NewHome extends Vue
 
 #editor-controls
     position: absolute
-    top: 20px
-    left: 0
     z-index: 2
 
+    // Positioning
+    top: 20px
+    left: 50px
     height: 50px
-    width: calc(100vw - 100px)
+    width: calc(100vw - 100px - 40px)
-    margin-left: 50px
+    padding: 0 20px
     border-radius: 50px
 
+    // Flex center
+    display: flex
+    align-items: center
+
+    // Colors
     color: #ffeedb
     background-image: linear-gradient(180deg, #000000 0%, #434343 100%)
+
+    // Separator
+    .separator
+        width: 1px
+        height: 50%
+        border-radius: 100px
+        background-color: rgba(255, 238, 219, 0.37)
+
+    #colors
+        align-items: center
+        .colors-text
+            margin-right: 5px
+
+        .color
+            width: 12px
+            height: 12px
+            margin-left: 5px
+
+            div
+                margin-top: -10px
+                font-size: 8px
+                color: #8f8f8f
+
+#editor-controls > *
+    margin-right: 10px
+
 </style>