├── README.md ├── app.js ├── copy-sound.wav ├── index.html ├── screenshot1.png ├── screenshot2.png └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # WB Color Picker 2 | 3 | 100% vanilla JavaScript code to design and functioning this cute little color picker application. No third party code has been used, well structured and easy to understand code syntax. This could be one of the great project to understand JavaScript and DOM workflow together. 4 | 5 | [Live Demo](https://mrhm-dev.github.io/wb-color-picker/) 6 | 7 | ![Screenshot 1](./screenshot1.png) 8 | 9 | ![Screenshot 2](screenshot2.png) 10 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Date: 16-12-2021 3 | * Author: HM Nayem 4 | * Description: Color picker application with huge dom functionalities 5 | */ 6 | 7 | // Globals 8 | let toastContainer = null; 9 | const defaultColor = { 10 | red: 221, 11 | green: 222, 12 | blue: 238, 13 | }; 14 | const defaultPresetColors = [ 15 | '#ffcdd2', 16 | '#f8bbd0', 17 | '#e1bee7', 18 | '#ff8a80', 19 | '#ff80ab', 20 | '#ea80fc', 21 | '#b39ddb', 22 | '#9fa8da', 23 | '#90caf9', 24 | '#b388ff', 25 | '#8c9eff', 26 | '#82b1ff', 27 | '#03a9f4', 28 | '#00bcd4', 29 | '#009688', 30 | '#80d8ff', 31 | '#84ffff', 32 | '#a7ffeb', 33 | '#c8e6c9', 34 | '#dcedc8', 35 | '#f0f4c3', 36 | '#b9f6ca', 37 | '#ccff90', 38 | '#ffcc80', 39 | ]; 40 | let customColors = new Array(24); 41 | const copySound = new Audio('./copy-sound.wav'); 42 | 43 | // onload handler 44 | window.onload = () => { 45 | main(); 46 | updateColorCodeToDom(defaultColor); 47 | // display preset colors 48 | displayColorBoxes( 49 | document.getElementById('preset-colors'), 50 | defaultPresetColors 51 | ); 52 | const customColorsString = localStorage.getItem('custom-colors'); 53 | if (customColorsString) { 54 | customColors = JSON.parse(customColorsString); 55 | displayColorBoxes( 56 | document.getElementById('custom-colors'), 57 | customColors 58 | ); 59 | } 60 | }; 61 | 62 | // main or boot function, this function will take care of getting all the DOM references 63 | function main() { 64 | // dom references 65 | const generateRandomColorBtn = document.getElementById( 66 | 'generate-random-color' 67 | ); 68 | const colorModeHexInp = document.getElementById('input-hex'); 69 | const colorSliderRed = document.getElementById('color-slider-red'); 70 | const colorSliderGreen = document.getElementById('color-slider-green'); 71 | const colorSliderBlue = document.getElementById('color-slider-blue'); 72 | const copyToClipboardBtn = document.getElementById('copy-to-clipboard'); 73 | const saveToCustomBtn = document.getElementById('save-to-custom'); 74 | const presetColorsParent = document.getElementById('preset-colors'); 75 | const customColorsParent = document.getElementById('custom-colors'); 76 | const bgPreview = document.getElementById('bg-preview'); 77 | const bgFileInput = document.getElementById('bg-file-input'); 78 | const bgFileInputBtn = document.getElementById('bg-file-input-btn'); 79 | const bgFileDeleteBtn = document.getElementById('bg-file-delete-btn'); 80 | bgFileDeleteBtn.style.display = 'none'; 81 | const bgController = document.getElementById('bg-controller'); 82 | bgController.style.display = 'none'; 83 | 84 | // event listeners 85 | generateRandomColorBtn.addEventListener( 86 | 'click', 87 | handleGenerateRandomColorBtn 88 | ); 89 | colorModeHexInp.addEventListener('keyup', handleColorModeHexInp); 90 | colorSliderRed.addEventListener( 91 | 'change', 92 | handleColorSliders(colorSliderRed, colorSliderGreen, colorSliderBlue) 93 | ); 94 | colorSliderGreen.addEventListener( 95 | 'change', 96 | handleColorSliders(colorSliderRed, colorSliderGreen, colorSliderBlue) 97 | ); 98 | colorSliderBlue.addEventListener( 99 | 'change', 100 | handleColorSliders(colorSliderRed, colorSliderGreen, colorSliderBlue) 101 | ); 102 | copyToClipboardBtn.addEventListener('click', handleCopyToClipboard); 103 | presetColorsParent.addEventListener('click', handlePresetColorsParent); 104 | saveToCustomBtn.addEventListener( 105 | 'click', 106 | handleSaveToCustomBtn(customColorsParent, colorModeHexInp) 107 | ); 108 | 109 | bgFileInputBtn.addEventListener('click', function () { 110 | bgFileInput.click(); 111 | }); 112 | 113 | bgFileInput.addEventListener( 114 | 'change', 115 | handleBgFileInput(bgPreview, bgFileDeleteBtn, bgController) 116 | ); 117 | 118 | bgFileDeleteBtn.addEventListener( 119 | 'click', 120 | handleBgFileDeleteBtn( 121 | bgPreview, 122 | bgFileDeleteBtn, 123 | bgController, 124 | bgFileInput 125 | ) 126 | ); 127 | 128 | document 129 | .getElementById('bg-size') 130 | .addEventListener('change', changeBackgroundPreferences); 131 | document 132 | .getElementById('bg-repeat') 133 | .addEventListener('change', changeBackgroundPreferences); 134 | document 135 | .getElementById('bg-position') 136 | .addEventListener('change', changeBackgroundPreferences); 137 | document 138 | .getElementById('bg-attachment') 139 | .addEventListener('change', changeBackgroundPreferences); 140 | } 141 | 142 | // event handlers 143 | function handleGenerateRandomColorBtn() { 144 | const color = generateColorDecimal(); 145 | updateColorCodeToDom(color); 146 | } 147 | 148 | function handleColorModeHexInp(e) { 149 | const hexColor = e.target.value; 150 | if (hexColor) { 151 | this.value = hexColor.toUpperCase(); 152 | if (isValidHex(hexColor)) { 153 | const color = hexToDecimalColors(hexColor); 154 | updateColorCodeToDom(color); 155 | } 156 | } 157 | } 158 | 159 | function handleColorSliders(colorSliderRed, colorSliderGreen, colorSliderBlue) { 160 | return function () { 161 | const color = { 162 | red: parseInt(colorSliderRed.value), 163 | green: parseInt(colorSliderGreen.value), 164 | blue: parseInt(colorSliderBlue.value), 165 | }; 166 | updateColorCodeToDom(color); 167 | }; 168 | } 169 | 170 | function handleCopyToClipboard() { 171 | const colorModeRadios = document.getElementsByName('color-mode'); 172 | const mode = getCheckedValueFromRadios(colorModeRadios); 173 | if (mode === null) { 174 | throw new Error('Invalid Radio Input'); 175 | } 176 | 177 | if (toastContainer !== null) { 178 | toastContainer.remove(); 179 | toastContainer = null; 180 | } 181 | 182 | if (mode === 'hex') { 183 | const hexColor = document.getElementById('input-hex').value; 184 | if (hexColor && isValidHex(hexColor)) { 185 | navigator.clipboard.writeText(`#${hexColor}`); 186 | generateToastMessage(`#${hexColor} Copied`); 187 | } else { 188 | alert('Invalid Hex Code'); 189 | } 190 | } else { 191 | const rgbColor = document.getElementById('input-rgb').value; 192 | if (rgbColor) { 193 | navigator.clipboard.writeText(rgbColor); 194 | generateToastMessage(`${rgbColor} Copied`); 195 | } else { 196 | alert('Invalid RGB Color'); 197 | } 198 | } 199 | } 200 | 201 | function handlePresetColorsParent(event) { 202 | const child = event.target; 203 | if (child.className === 'color-box') { 204 | navigator.clipboard.writeText(child.getAttribute('data-color')); 205 | copySound.volume = 0.2; 206 | copySound.play(); 207 | } 208 | } 209 | 210 | function handleSaveToCustomBtn(customColorsParent, inputHex) { 211 | return function () { 212 | const color = `#${inputHex.value}`; 213 | if (customColors.includes(color)) { 214 | alert('Already Saved'); 215 | return; 216 | } 217 | customColors.unshift(color); 218 | if (customColors.length > 24) { 219 | customColors = customColors.slice(0, 24); 220 | } 221 | localStorage.setItem('custom-colors', JSON.stringify(customColors)); 222 | removeChildren(customColorsParent); 223 | displayColorBoxes(customColorsParent, customColors); 224 | }; 225 | } 226 | 227 | function handleBgFileInput(bgPreview, bgFileDeleteBtn, bgController) { 228 | return function (event) { 229 | const file = event.target.files[0]; 230 | const imgUrl = URL.createObjectURL(file); 231 | bgPreview.style.background = `url(${imgUrl})`; 232 | document.body.style.background = `url(${imgUrl})`; 233 | bgFileDeleteBtn.style.display = 'inline'; 234 | bgController.style.display = 'block'; 235 | }; 236 | } 237 | 238 | function handleBgFileDeleteBtn( 239 | bgPreview, 240 | bgFileDeleteBtn, 241 | bgController, 242 | bgFileInput 243 | ) { 244 | return function () { 245 | bgPreview.style.background = 'none'; 246 | bgPreview.style.backgroundColor = '#dddeee'; 247 | document.body.style.background = 'none'; 248 | document.body.style.backgroundColor = '#dddeee'; 249 | bgFileDeleteBtn.style.display = 'none'; 250 | bgController.style.display = 'none'; 251 | bgFileInput.value = null; 252 | }; 253 | } 254 | 255 | // DOM functions 256 | /** 257 | * Generate a dynamic DOM element to show a toast message 258 | * @param {string} msg 259 | */ 260 | function generateToastMessage(msg) { 261 | toastContainer = document.createElement('div'); 262 | toastContainer.innerText = msg; 263 | toastContainer.className = 'toast-message toast-message-slide-in'; 264 | 265 | toastContainer.addEventListener('click', function () { 266 | toastContainer.classList.remove('toast-message-slide-in'); 267 | toastContainer.classList.add('toast-message-slide-out'); 268 | 269 | toastContainer.addEventListener('animationend', function () { 270 | toastContainer.remove(); 271 | toastContainer = null; 272 | }); 273 | }); 274 | 275 | document.body.appendChild(toastContainer); 276 | } 277 | 278 | /** 279 | * find the checked elements from a list of radio buttons 280 | * @param {Array} nodes 281 | * @returns {string | null} 282 | */ 283 | function getCheckedValueFromRadios(nodes) { 284 | let checkedValue = null; 285 | for (let i = 0; i < nodes.length; i++) { 286 | if (nodes[i].checked) { 287 | checkedValue = nodes[i].value; 288 | break; 289 | } 290 | } 291 | return checkedValue; 292 | } 293 | 294 | /** 295 | * update dom elements with calculated color values 296 | * @param {object} color : ; 297 | */ 298 | function updateColorCodeToDom(color) { 299 | const hexColor = generateHexColor(color); 300 | const rgbColor = generateRGBColor(color); 301 | 302 | document.getElementById( 303 | 'color-display' 304 | ).style.backgroundColor = `#${hexColor}`; 305 | document.getElementById('input-hex').value = hexColor; 306 | document.getElementById('input-rgb').value = rgbColor; 307 | document.getElementById('color-slider-red').value = color.red; 308 | document.getElementById('color-slider-red-label').innerText = color.red; 309 | document.getElementById('color-slider-green').value = color.green; 310 | document.getElementById('color-slider-green-label').innerText = color.green; 311 | document.getElementById('color-slider-blue').value = color.blue; 312 | document.getElementById('color-slider-blue-label').innerText = color.blue; 313 | } 314 | 315 | /** 316 | * create a div element with class name color-box 317 | * @param {string} color : ; 318 | * @returns {object} 319 | */ 320 | function generateColorBox(color) { 321 | const div = document.createElement('div'); 322 | div.className = 'color-box'; 323 | div.style.backgroundColor = color; 324 | div.setAttribute('data-color', color); 325 | 326 | return div; 327 | } 328 | 329 | /** 330 | * this function will create and append new color boxes to it's parent 331 | * @param {object} parent 332 | * @param {Array} colors 333 | */ 334 | function displayColorBoxes(parent, colors) { 335 | colors.forEach((color) => { 336 | if (color && isValidHex(color.slice(1))) { 337 | const colorBox = generateColorBox(color); 338 | parent.appendChild(colorBox); 339 | } 340 | }); 341 | } 342 | 343 | /** 344 | * remove all children from parent 345 | * @param {object} parent 346 | */ 347 | function removeChildren(parent) { 348 | let child = parent.lastElementChild; 349 | while (child) { 350 | parent.removeChild(child); 351 | child = parent.lastElementChild; 352 | } 353 | } 354 | 355 | function changeBackgroundPreferences() { 356 | document.body.style.backgroundSize = 357 | document.getElementById('bg-size').value; 358 | document.body.style.backgroundRepeat = 359 | document.getElementById('bg-repeat').value; 360 | document.body.style.backgroundPosition = 361 | document.getElementById('bg-position').value; 362 | document.body.style.backgroundAttachment = 363 | document.getElementById('bg-attachment').value; 364 | } 365 | 366 | // Utils 367 | 368 | /** 369 | * generate and return an object of three color decimal values 370 | * @returns {object}} 371 | */ 372 | function generateColorDecimal() { 373 | const red = Math.floor(Math.random() * 255); 374 | const green = Math.floor(Math.random() * 255); 375 | const blue = Math.floor(Math.random() * 255); 376 | 377 | return { 378 | red, 379 | green, 380 | blue, 381 | }; 382 | } 383 | 384 | /** 385 | * take a color object of three decimal values and return a hexadecimal color code 386 | * @param {object} color 387 | * @returns {string} 388 | */ 389 | function generateHexColor({ red, green, blue }) { 390 | const getTwoCode = (value) => { 391 | const hex = value.toString(16); 392 | return hex.length === 1 ? `0${hex}` : hex; 393 | }; 394 | 395 | return `${getTwoCode(red)}${getTwoCode(green)}${getTwoCode( 396 | blue 397 | )}`.toUpperCase(); 398 | } 399 | 400 | /** 401 | * take a color object of three decimal values and return a rgb color code 402 | * @param {object} color 403 | * @returns {string} 404 | */ 405 | function generateRGBColor({ red, green, blue }) { 406 | return `rgb(${red}, ${green}, ${blue})`; 407 | } 408 | 409 | /** 410 | * convert hex color to decimal colors object 411 | * @param {string} hex 412 | * @returns {object} 413 | */ 414 | function hexToDecimalColors(hex) { 415 | const red = parseInt(hex.slice(0, 2), 16); 416 | const green = parseInt(hex.slice(2, 4), 16); 417 | const blue = parseInt(hex.slice(4), 16); 418 | 419 | return { 420 | red, 421 | green, 422 | blue, 423 | }; 424 | } 425 | 426 | /** 427 | * validate hex color code 428 | * @param {string} color; 429 | * @returns {boolean} 430 | */ 431 | function isValidHex(color) { 432 | if (color.length !== 6) return false; 433 | return /^[0-9A-Fa-f]{6}$/i.test(color); 434 | } 435 | -------------------------------------------------------------------------------- /copy-sound.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrhm-dev/wb-color-picker/a845f6cdb8204f66bdaf4b8b3eea3d3955522274/copy-sound.wav -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Color Picker Application 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 |
16 |

Display Color

17 | 23 |
24 |
25 |
26 |
27 | 28 | 29 |
30 |
31 |

Change & Copy Color

32 |
33 | 39 | 45 |
46 |
47 |
48 |
49 |

Select Copy Mode

50 |
51 |
52 | 59 | 60 |
61 |
62 | 68 | 69 |
70 |
71 |
72 |
73 |
74 | 75 | 81 |
#
82 |
83 |
84 | 85 | 92 |
93 |
94 |
95 |

Adjust RGB Colors

96 |
97 |
98 |
99 |

Red

100 |

221

101 |
102 | 110 |
111 |
112 |
113 |

Green

114 |

222

115 |
116 | 124 |
125 |
126 |
127 |

Blue

128 |

238

129 |
130 | 138 |
139 |
140 |
141 |
142 | 143 | 144 |
145 |
146 |

Preset Colors

147 |
148 |
149 |
150 |
151 | 152 | 153 |
154 |
155 |

Custom Colors

156 |
157 |
158 |
159 |
160 | 161 | 162 |
163 |
164 |

Background Preferences

165 |
166 |
167 |
168 |
169 |

Background Preview

170 |
171 |
172 | 178 | 184 | 190 |
191 |
192 |
193 |
194 |
195 | 198 | 208 |
209 |
210 | 213 | 221 |
222 |
223 | 226 | 255 |
256 |
257 | 260 | 271 |
272 |
273 |
274 |
275 |
276 |
277 | 278 | 279 | -------------------------------------------------------------------------------- /screenshot1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrhm-dev/wb-color-picker/a845f6cdb8204f66bdaf4b8b3eea3d3955522274/screenshot1.png -------------------------------------------------------------------------------- /screenshot2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrhm-dev/wb-color-picker/a845f6cdb8204f66bdaf4b8b3eea3d3955522274/screenshot2.png -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 11 | 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 12 | font-size: 16px; 13 | background-color: #dddeee; 14 | max-width: 100vw; 15 | min-height: 100vh; 16 | } 17 | 18 | .container { 19 | width: 600px; 20 | margin: 2rem auto; 21 | padding: 2rem; 22 | border-radius: 0.25rem; 23 | background-color: #fff; 24 | box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1); 25 | } 26 | 27 | /* section */ 28 | .section { 29 | margin-bottom: 2rem; 30 | } 31 | 32 | .section-header { 33 | display: flex; 34 | align-items: center; 35 | justify-content: space-between; 36 | } 37 | 38 | .section-header-action { 39 | display: inline-block; 40 | border: none; 41 | border-radius: 0.15rem; 42 | background: transparent; 43 | color: #ff6733; 44 | font-family: Arial, Helvetica, sans-serif; 45 | font-size: 0.9rem; 46 | font-weight: 600; 47 | cursor: pointer; 48 | } 49 | 50 | .section-header-action-group { 51 | display: flex; 52 | gap: 1rem; 53 | } 54 | 55 | .section-title { 56 | font-size: 18px; 57 | font-weight: 600; 58 | color: #333333; 59 | } 60 | 61 | .divider { 62 | width: 100%; 63 | height: 1px; 64 | margin-top: 0.3rem; 65 | background-color: #dddeee; 66 | } 67 | 68 | /* color display */ 69 | .color-display { 70 | width: 100%; 71 | height: 8rem; 72 | margin-top: 1rem; 73 | border: 1px solid #dddeee; 74 | border-radius: 0.15rem; 75 | background-color: #dddeee; 76 | } 77 | 78 | /* select copy mode section */ 79 | .select-copy-mode { 80 | display: flex; 81 | align-items: center; 82 | justify-content: space-between; 83 | margin-top: 1rem; 84 | gap: 1rem; 85 | } 86 | 87 | .mode-radio-group { 88 | display: flex; 89 | gap: 1rem; 90 | } 91 | 92 | /* selected color code */ 93 | .selected-color-code { 94 | display: grid; 95 | grid-template-columns: 1fr 1fr; 96 | gap: 1rem; 97 | margin-top: 1rem; 98 | } 99 | 100 | /* color sliders */ 101 | .color-sliders { 102 | margin-top: 2rem; 103 | } 104 | 105 | .hex-input-group { 106 | position: relative; 107 | } 108 | 109 | .hex-icon { 110 | position: absolute; 111 | top: 47%; 112 | left: 1px; 113 | background-color: #dddeee; 114 | padding: 0.18rem 1rem; 115 | border-top-left-radius: 0.15rem; 116 | border-bottom-left-radius: 0.15rem; 117 | } 118 | 119 | .hex-input { 120 | padding-left: 3rem !important; 121 | } 122 | 123 | /* color sliders */ 124 | .color-sliders-group { 125 | margin-top: 0.5rem; 126 | display: grid; 127 | grid-template-columns: 1fr 1fr 1fr; 128 | gap: 1rem; 129 | } 130 | 131 | .color-slider { 132 | width: 100%; 133 | height: 25px; 134 | border-radius: 0.25rem; 135 | opacity: 0.7; 136 | -webkit-transition: 0.2s; 137 | transition: opacity 0.2s; 138 | } 139 | 140 | .slider-label-group { 141 | display: flex; 142 | justify-content: space-between; 143 | align-items: center; 144 | gap: 1rem; 145 | font-size: 0.8rem; 146 | color: #555555; 147 | margin-top: 1rem; 148 | } 149 | 150 | /* text-input */ 151 | .text-input, 152 | .text-input:disabled { 153 | width: 100%; 154 | background: transparent; 155 | outline: none; 156 | border: 1px solid #dddeee; 157 | border-radius: 0.15rem; 158 | padding: 0.5rem 1rem; 159 | margin-top: 0.25rem; 160 | } 161 | 162 | .text-input:focus { 163 | border: 1px solid #ff6733; 164 | } 165 | 166 | .lead { 167 | font-weight: 600; 168 | font-size: 0.9rem; 169 | color: #333333; 170 | display: block; 171 | user-select: none; 172 | } 173 | 174 | label { 175 | user-select: none; 176 | } 177 | 178 | .toast-message { 179 | position: fixed; 180 | z-index: 999; 181 | top: 2rem; 182 | right: 2rem; 183 | background-color: rgb(19, 201, 110); 184 | color: #fff; 185 | border: 1px solid #fff; 186 | border-radius: 0.25rem; 187 | padding: 1rem 2rem; 188 | cursor: pointer; 189 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 190 | } 191 | 192 | .toast-message-slide-in { 193 | animation: toast-animation-in 0.5s ease-in; 194 | } 195 | 196 | .toast-message-slide-out { 197 | animation: toast-animation-out 0.5s ease-in; 198 | } 199 | 200 | @keyframes toast-animation-in { 201 | from { 202 | transform: translateX(200px); 203 | opacity: 0; 204 | } 205 | to { 206 | transform: translateX(0px); 207 | opacity: 1; 208 | } 209 | } 210 | 211 | @keyframes toast-animation-out { 212 | from { 213 | transform: translateX(0px); 214 | opacity: 1; 215 | } 216 | to { 217 | transform: translateX(200px); 218 | opacity: 0; 219 | } 220 | } 221 | 222 | /* color boxes */ 223 | .preset-colors { 224 | display: flex; 225 | flex-wrap: wrap; 226 | gap: 1rem; 227 | justify-content: flex-start; 228 | padding: 1rem 0; 229 | } 230 | 231 | .color-box { 232 | width: 75px; 233 | height: 30px; 234 | border-radius: 0.15rem; 235 | cursor: pointer; 236 | transition: all 0.2s; 237 | } 238 | 239 | .color-box:hover { 240 | opacity: 0.9; 241 | box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.2); 242 | } 243 | 244 | /* background preferences */ 245 | .background-preferences { 246 | display: grid; 247 | grid-template-columns: 1fr 1fr; 248 | gap: 1rem; 249 | } 250 | 251 | .background-left-panel { 252 | padding: 1rem; 253 | width: 100%; 254 | } 255 | 256 | .background-image { 257 | width: 100%; 258 | padding-top: 56.25%; 259 | border-radius: 0.25rem; 260 | background-color: #dddeee; 261 | margin-top: 0.5rem; 262 | background-repeat: no-repeat !important; 263 | background-size: 100% 100% !important; 264 | background-position: bottom !important; 265 | } 266 | 267 | .background-control { 268 | margin-top: 1rem; 269 | display: flex; 270 | gap: 0.5rem; 271 | } 272 | 273 | .file-input { 274 | display: none; 275 | } 276 | 277 | .background-control-btn { 278 | padding: 0.5rem 1rem; 279 | border: none; 280 | outline: none; 281 | cursor: pointer; 282 | } 283 | 284 | .background-right-panel { 285 | padding: 1rem; 286 | width: 100%; 287 | } 288 | 289 | .select-group { 290 | margin-bottom: 1rem; 291 | } 292 | --------------------------------------------------------------------------------