@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; font-weight: 200 } body { display: flex; align-items: center; justify-content: flex-start; min-height: 100vh; flex-direction: column; padding-bottom: 40px; background: #121212 } .main { background: #121212; width: 100vw; display: flex; align-items: center; justify-content: center; flex-direction: column; max-height: 50%; } .main button{ width:auto; height: auto; cursor: pointer; border: none; border-radius: 50%; margin-bottom:0; background: transparent; color: rgb(142,142,142,1); margin-bottom: 10px; } .main img { margin: 30px; border-radius: 20px; max-height: 250px; } .main .controls .inputUrl { margin-bottom: 10px; outline: none; border: none; font-size: 1.3rem; text-align: center; width: 250px; background: transparent; cursor: pointer; color: #f2f2f2 } input[type="file"] { display: none; } .main .controls label { width: 250px; margin: 10px; font-size: 1.3rem; color: #f2f2f2; text-align: center; cursor: pointer; border: none; outline: none; background: transparent; } .main .controls { display: flex; flex-direction: column; align-items: center; justify-content: center; } .main .controls small { display: block; cursor: default; opacity: 1; color: #f2f2f2 } .main .controls .colorsNumber { width: 50px; margin: 10px; font-size: 1.3rem; border: none; outline: none; text-align: center; background: transparent; color: #f2f2f2 } .palette, .paletteMainColor { display: flex; align-items: center; flex-wrap: wrap; overflow: auto; background-color: #121212; justify-content: center; width: 90%; } .paletteMainColor{ width: 250px; } .paletteMainColor .mainColorDesc{ color: #f2f2f2; font-size: 1rem; text-decoration: underline; text-decoration-color: rgb(242,242,242,0.7); margin-bottom: 0; margin-top: 20px; } .palette .colorContainer, .paletteMainColor .colorContainer{ width: 230px; display: flex; align-items: center; justify-content: start; margin-left: 0; margin: 10px; border: solid 5px rgba(242,242,242,0.7); border-radius: 50px; margin-top: 0 } .paletteMainColor .colorContainer{ flex-direction: column; width: 100%; border-radius: 100px; border: none; text-align: center; } .palette .colorContainer .colorBox, .paletteMainColor .colorContainer .colorBox{ width: 50px; height: 50px; margin: 10px; border: solid 5px rgba(242,242,242,0.7); border-radius: 50%; cursor: pointer; } .paletteMainColor .colorContainer .colorBox{ width: 150px; border-radius: 100px; } .palette .colorContainer .colorDesc, .paletteMainColor .colorContainer .colorDesc{ display: block; cursor: grab; position: relative; color: #f2f2f2 } .palette .colorContainer .colorDesc:active, .palette .colorContainer .hexValue:active, .paletteMainColor .colorContainer .colorDesc:active, .paletteMainColor .colorContainer .hexValue:active{ cursor: grabbing; } .palette .colorContainer .hexValue, .paletteMainColor .colorContainer .hexValue { margin-right: 5px; cursor: grab; color: #f2f2f2 } .palette .colorContainer small, .paletteMainColor .colorContainer small{ color: #f2f2f2 } .divider{ border: solid 2px rgb(242,242,242,0.7); width: 90%;; border-radius: 50px; margin: 20px; } .copyMessage{ display: block; position: fixed; top: 10px; width: auto; height: auto; padding: 5px; background: #f2f2f2; color: #222; border-radius: 20px; opacity: 0; transition: 0.5s; } .copyMessage.active { opacity: 0.8 } or Send file Random Image Text copied
