[mirotalksfu] - improve whiteboard

public/css/Room.css

@@ -669,6 +669,55 @@ progress {
     cursor: move;
 }
 
+.whiteboardColorPicker {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    padding: 0;
+    border: none;
+    width: 20px;
+    height: 20px;
+    margin-top: 10px;
+    margin-left: 10px;
+    margin-right: 15px;
+    border-radius: 50px;
+    border: solid 0.5px #afadad38;
+}
+.whiteboardColorPicker:hover {
+    transform: var(--btns-hover-scale);
+    transition: all 0.3s ease-in-out;
+}
+.whiteboardColorPicker::-webkit-color-swatch {
+    border: none;
+    border-radius: 20px;
+    padding: 0;
+}
+.whiteboardColorPicker::-webkit-color-swatch-wrapper {
+    border: none;
+    border-radius: 20px;
+    padding: 0;
+}
+.whiteboardColorPicker::-moz-color-swatch {
+    border: none;
+    border-radius: 20px;
+    padding: 0;
+}
+.whiteboardColorPicker::-moz-color-swatch-wrapper {
+    border: none;
+    border-radius: 20px;
+    padding: 0;
+}
+.whiteboardColorPicker::color-swatch {
+    border: none;
+    border-radius: 20px;
+    padding: 0;
+}
+.whiteboardColorPicker::color-swatch-wrapper {
+    border: none;
+    border-radius: 20px;
+    padding: 0;
+}
+
 /*--------------------------------------------------------------
 # Pulse class effect
 --------------------------------------------------------------*/

public/view/Room.html

@@ -153,14 +153,6 @@ access to use this app.
                     <p>Line width:</p>
                     <input id="wbDrawingLineWidthEl" type="range" value="3" min="1" max="15" />
                     <br />
-                    <i class="fas fa-palette"></i>
-                    <p>Line color:</p>
-                    <input id="wbDrawingColorEl" type="color" value="#FFFFFF" />
-                    <br />
-                    <i class="fas fa-palette"></i>
-                    <p>Background color:</p>
-                    <input id="wbBackgroundColorEl" type="color" value="#000000" />
-                    <br />
                 </div>
 
                 <div id="tabRoom" class="tabcontent">
@@ -295,6 +287,10 @@ access to use this app.
             <header id="whiteboardHeader" class="whiteboard-header">
                 <div id="whiteboardTitle" class="whiteboard-header-title"></div>
                 <div class="whiteboard-header-options">
+                    pencil
+                    <input id="wbDrawingColorEl" class="whiteboardColorPicker" type="color" value="#FFFFFF" />
+                    background
+                    <input id="wbBackgroundColorEl" class="whiteboardColorPicker" type="color" value="#000000" />
                     <button id="whiteboardPencilBtn" class="fas fa-pencil-alt"></button>
                     <button id="whiteboardObjectBtn" class="fas fa-mouse-pointer"></button>
                     <button id="whiteboardUndoBtn" class="fas fa-undo"></button>