pages/color/style.css
2025-06-12 11:05:12 +02:00

101 lines
1.6 KiB
CSS

@import url(/global.css);
html {
height: 100%;
}
button {
padding: 10px;
font-size: 1em;
background-color: var(--mauve);
border-radius: 10px;
border: 1px solid #d0aaff;
color: var(--mantle);
cursor: pointer;
}
.cards {
text-align: center;
}
input {
padding: 10px;
font-size: 1em;
background-color: var(--mauve);
border-radius: 10px;
border: 1px solid #644f84;
color: var(--mantle);
cursor: text;
outline: none;
transition: background-color 0.25s, border 0.25s;
}
input::placeholder {
color: var(--surface1);
}
p:not(.hint) {
margin-bottom: 15px;
}
button:hover {
background-color: #cdadff;
border: 1px solid rgb(201, 161, 250);
}
button:active {
scale: 0.98;
}
.main {
padding: 150px 225px;
background-color: var(--surface0);
border-radius: 10px;
border: 1px solid #3f3f3f;
max-width: 450px;
max-height: 300px;
display: flex;
cursor: copy;
justify-content: center;
}
#offscreenalert {
position: absolute;
padding: 20px;
background-color: var(--surface0);
border: 1px solid var(--surface1);
border-radius: 4px;
top: -70px;
transition: 0.4s cubic-bezier(.68,-0.55,.27,1.55);
}
#fullColor {
cursor: copy;
height: fit-content;
width: fit-content;
}
.colors {
margin-bottom: 10px;
}
@media (max-width: 768px) {
.main {
padding: 75px 70.5px;
}
p {
font-size: 0.9rem;
}
button, input {
padding: 5px;
}
}
@media (max-width: 480px) {
.main {
padding: 75px 10.5px;
}
}