From 862ef88d4433121a6ab03de629308e1347389087 Mon Sep 17 00:00:00 2001
From: Cyrille Rossant <rossant@users.noreply.github.com>
Date: Tue, 12 Mar 2024 13:56:45 +0100
Subject: [PATCH] Update styles

---
 index.html        |  2 +-
 styles/styles.css | 51 ++++++++++++++++++++++++-----------------------
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index 3e30efb..f6a0c71 100644
--- a/index.html
+++ b/index.html
@@ -47,7 +47,7 @@
                 <a href="#" id="emoji-button">Emoji</a> —
 
                 <!-- COLOR PICKER BUTTON -->
-                Color
+                Color picker
                 <input type="text" data-coloris id="color-button" value="rgb(0,0,0)">
 
                 <emoji-picker id="emoji-picker" class="light"></emoji-picker>
diff --git a/styles/styles.css b/styles/styles.css
index 423d3f0..4694b43 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -69,6 +69,32 @@ html {
 }
 
 
+/*************************************************************************************************/
+/* Top buttons                                                                                   */
+/*************************************************************************************************/
+
+#buttons-bar {
+    position: relative;
+    margin-bottom: 10px;
+}
+
+emoji-picker {
+    display: none;
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 100;
+}
+
+emoji-picker.visible {
+    display: block;
+}
+
+#color-button {
+    width: 100px;
+}
+
+
 /*************************************************************************************************/
 /* Selector                                                                                      */
 /*************************************************************************************************/
@@ -114,31 +140,6 @@ html {
 }
 
 
-/*************************************************************************************************/
-/* Top buttons                                                                                   */
-/*************************************************************************************************/
-
-#buttons-bar {
-    position: relative;
-}
-
-emoji-picker {
-    display: none;
-    position: absolute;
-    left: 0;
-    right: 0;
-    z-index: 100;
-}
-
-emoji-picker.visible {
-    display: block;
-}
-
-#color-button {
-    width: 100px;
-}
-
-
 /*************************************************************************************************/
 /* Code editor                                                                                   */
 /*************************************************************************************************/