finally clean up the custom block menu

Author: JeremyGamer13

src/components/custom-procedures/custom-procedures.css

@@ -20,50 +20,119 @@
     margin: 3px;
 }
 
+.color-picker-area {
+    width: 100%;
+    padding: 8px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.color-picker-area > div:nth-child(1),
+.color-picker-area > div:nth-child(2) {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
+/* .color-picker-area div:nth-child(1) {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+}
+[theme="dark"] .color-picker-area div:nth-child(1) {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+} */
+
 /* Color inputs & color swatch */
 .body input[type="color"] {
     appearance: none;
     -moz-appearance: none;
     -webkit-appearance: none;
     background: none;
-    border: 1px solid #333;
     padding: 0;
+    border: 0 !important;
     cursor: pointer;
-    border-radius: 2400px;
-    height: 15px;
-}
-[theme="dark"] .body input[type="color"] {
-    border: 1px solid #ddd;
 }
 ::-webkit-color-swatch-wrapper {
+    margin: 0;
     padding: 0;
 }
 
 ::-webkit-color-swatch {
-    border: 0;
-    border-radius: 2400px;
+    margin: 0;
+    border-radius: 100%;
+    border: 2px solid rgba(0, 0, 0, 0.2);
+    overflow: none;
+    padding: 0;
+}
+::-moz-color-swatch {
+    margin: 0;
+    border-radius: 100%;
+    border: 2px solid rgba(0, 0, 0, 0.2);
+    overflow: none;
+    padding: 0;
+}
+[theme="dark"] ::-webkit-color-swatch {
+    border-color: white;
+}
+[theme="dark"] ::-moz-color-swatch {
+    border-color: white;
 }
 
-::-moz-color-swatch,
 ::-moz-focus-inner {
+    margin: 0;
     border: 0;
 }
 
 ::-moz-focus-inner {
+    margin: 0;
     padding: 0;
 }
 
 /* Preset color options */
 .preset-color {
-    border: 1px solid #333;
+    border: 2px solid rgba(0, 0, 0, 0.2);
     margin: 4px;
-    margin-left: 0px;
-    border-radius: 4px;
-    width: 1em;
-    height: 1em;
+    border-radius: 100%;
+    width: 2.5em;
+    height: 2.5em;
 }
+/* prevent soft-looking colors */
 [theme="dark"] .preset-color {
-    border: 1px solid #ddd;
+    border-color: white;
+}
+
+.parent-custom {
+    margin: 4px;
+    width: 2.5em;
+    height: 2.5em;
+    position: relative;
+}
+.parent-custom > .preset-color {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.custom-plus {
+    position: absolute;
+    left: 4px;
+    top: 4px;
+    width: calc(100% - 8px);
+    height: calc(100% - 8px);
+    z-index: 500;
+    pointer-events: none;
+}
+
+.preset-color:active {
+    transform: scale(0.7);
+    transition-duration: 0.1s;
+    transition-timing-function: ease-out;
+    transition-property: transform;
+}
+.preset-color {
+    transition-duration: 0.3s;
+    transition-timing-function: cubic-bezier(0, 0, 0.24, 1.83);
+    transition-property: transform;
 }
 
 /* Blocks workspace for custom procedure declaration editor */
@@ -124,9 +193,9 @@
 }
 
 /* "Run without screen refresh" row */
-.checkbox-row {
+/* .checkbox-row {
     margin-top: 1rem;
-}
+} */
 
 /* Confirmation buttons at the bottom of the modal */
 .button-row {