77 lines
1.3 KiB
CSS
77 lines
1.3 KiB
CSS
@import "tailwindcss";
|
|
|
|
* {
|
|
@apply box-border m-0 p-0;
|
|
}
|
|
|
|
body {
|
|
@apply bg-(--col0) text-white flex justify-center items-center h-screen text-center select-none;
|
|
font-family: "Lexend", sans-serif;
|
|
|
|
--col0: rgb(8, 8, 8);
|
|
--col1: rgb(16, 16, 16);
|
|
--col2: rgb(32, 32, 32);
|
|
--col3: rgb(48, 48, 48);
|
|
--col4: rgb(64, 64, 64);
|
|
--col5: rgb(80, 80, 80);
|
|
--col6: rgb(96, 96, 96);
|
|
--col7: rgb(112, 112, 112);
|
|
--col8: rgb(128, 128, 128);
|
|
}
|
|
|
|
.container {
|
|
@apply w-[90vw] h-[90vh] bg-(--col1) border border-(--col3) p-4 rounded-lg;
|
|
}
|
|
|
|
h1 {
|
|
@apply mb-2;
|
|
}
|
|
|
|
p {
|
|
@apply text-base mb-4;
|
|
}
|
|
|
|
.form {
|
|
@apply flex flex-col items-center gap-2;
|
|
}
|
|
|
|
.slider-section {
|
|
@apply flex flex-col items-center w-full;
|
|
}
|
|
|
|
#password-length {
|
|
@apply w-[80vw] select-text;
|
|
}
|
|
|
|
button {
|
|
@apply bg-(--col3) hover:bg-(--col5) border border-(--col5) hover:border-(--col7) rounded-lg cursor-pointer transition-colors;
|
|
}
|
|
|
|
.preset-buttons {
|
|
@apply flex gap-2 flex-wrap justify-center;
|
|
}
|
|
|
|
.preset-btn {
|
|
@apply px-2 py-1;
|
|
}
|
|
|
|
.generate-btn {
|
|
@apply px-4 py-2;
|
|
}
|
|
|
|
.result-section {
|
|
@apply flex flex-col items-center justify-center mt-2;
|
|
}
|
|
|
|
.password-display {
|
|
@apply w-[80vw] mb-2 p-2 bg-(--col3) border border-(--col5) rounded-lg wrap-break-word;
|
|
}
|
|
|
|
.result-buttons {
|
|
@apply flex flex-row gap-2.5 justify-center items-center;
|
|
}
|
|
|
|
.copy-btn {
|
|
@apply px-4 py-2;
|
|
}
|