odin-sign-up-form/style.css

147 lines
3.7 KiB
CSS
Raw Permalink Normal View History

2024-01-25 20:55:57 +00:00
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@font-face {
font-family: Norse-Bold;
src: url(assets/Norse-Bold.otf);
}
:root {
font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
em {
font-style: italic;
}
#flexbox {
display: flex;
min-height: 100svh;
}
#image {
flex: 3;
background: url('assets/bg.jpg') 25% / auto 100%;
position: relative;
color: #fff;
#odin {
position: absolute;
top: 12%;
padding: 0.1em 0 0.2em 0;
font-size: 5rem;
text-align: center;
background: #000000aa;
width: 100%;
font-family: Norse-Bold;
text-transform: uppercase;
span {
display: inline-block;
}
img {
filter: invert(1);
height: 5rem;
position: relative;
top: 10px;
}
}
#adnotation {
width: 100%;
position: absolute;
bottom: 0.5em;
text-align: center;
font-size: 0.9rem;
}
}
h2 {
margin: 0 0 1rem 0;
font-weight: 700;
font-size: 1.4rem;
}
#interface {
flex: 5;
display: flex;
flex-direction: column;
justify-content: center;
background: #eaeaea;
& > div, & > form > div {
padding: 0 2.5rem;
}
#encouragement {
margin: 2rem 0;
width: fit-content;
font-size: 1.5em;
}
#enter {
box-sizing: border-box;
padding-top: 2em;
padding-bottom: 2em;
background-color: #fff;
box-shadow: #000 0 0 8px -5px;
#form-grid {
display: grid;
width: 520px;
grid-template-columns: 1fr 1fr;
gap: 1.3em 3em;
.element {
display: flex;
flex-direction: column;
label {
margin: 0.2em 0;
text-transform: uppercase;
font-size: 0.85rem;
color: #252525;
font-weight: bold;
letter-spacing: 0.1em;
}
input {
display: block;
padding: 0.3em 0.5em;
font-size: 1rem;
border-radius: 5px;
border: 1px solid #ddd;
outline: none;
transition: 0.05s ease-in-out border;
&:focus {
box-shadow: #000 0 0 8px -5px;
border: 1px solid #22d;
}
2024-01-25 21:17:05 +00:00
&.psk-no-match {
border: 1px solid #d22;
}
&::after {
display: block;
font-size: 2rem;
position: absolute;
top: 20px;
content: 'Passwords';
}
}
span.psk-no-match {
color: #d22;
font-size: 0.9rem;
margin-top: 0.4em;
2024-01-25 20:55:57 +00:00
}
}
}
}
button[type="submit"] {
display: block;
padding: 0.8em 2.5em;
margin: 2rem 0;
font-size: 1rem;
border-radius: 6px;
border: none;
outline: none;
background: #415214;
color: #fff;
font-weight: bold;
cursor: pointer;
transition: 0.1s ease-in-out background-color;
&:hover {
box-shadow: #000 0 0 8px -5px;
background: #52661b;
}
}
}