hanyuu/public/assets/hanyuu.css
2023-10-18 10:34:30 +00:00

163 lines
2.8 KiB
CSS

* {
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
html, body {
width: 100%;
height: 100%;
}
body {
background-color: #111;
color: #fff;
font: 12px/20px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
@media (prefers-color-scheme: light) {
body {
background-color: #ddd;
color: #000;
}
}
[hidden],
.hidden {
display: none !important;
}
.http-err {
padding: 40px 60px;
}
.http-err-title {
font-size: 3em;
line-height: 1.5em;
font-weight: 700;
}
.http-err-paragraph {
font-size: 1.2em;
line-height: 1.5em;
}
.auth {
margin: 0 auto;
padding: 10px;
padding-top: 10vh;
box-sizing: content-box;
}
.auth-header {
font-size: 5em;
line-height: 1.5em;
color: #a77bca;
text-shadow: 0 1px 5px #a77bca;
text-align: center;
padding: 10px 0;
}
.auth-avatar {
text-align: center;
margin: 10px 0;
}
.auth-avatar-image {
width: 100px;
height: 100px;
overflow: hidden;
border-radius: 5%;
display: inline-block;
}
.auth-avatar img {
vertical-align: middle;
width: 100%;
height: 100%;
}
.auth-login {
max-width: 400px;
width: 100%;
margin: 0 auto;
}
.auth-fields {
max-width: 300px;
width: 100%;
margin: 0 auto;
margin-bottom: 10px;
}
.auth-input {
display: block;
width: 100%;
border-left: 5px solid #aaa;
margin: 10px 0;
padding: 2px 7px;
padding-right: 12px;
transition: border-color .2s;
}
.auth-input:focus-within {
border-color: #a77bca;
}
.auth-input-title {
display: block;
font-size: 1.2em;
line-height: 1.5em;
}
.auth-input-value {
display: block;
}
.auth-input-value input {
display: block;
width: 100%;
border-width: 0;
background-color: inherit;
outline-style: none !important;
font-size: 1.2em;
line-height: 1.5em;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.auth-buttons {
max-width: 200px;
width: 100%;
margin: 0 auto;
}
.auth-button {
display: block;
width: 100%;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5em;
background-color: #bbb;
border-width: 0;
border-radius: 5px;
margin: 5px 0;
padding: 5px;
color: #222;
text-align: center;
text-decoration: none;
cursor: default;
transition: background-color .2s;
}
.auth-button:hover,
.auth-button:focus {
background-color: #ccc;
}
.auth-button:active {
background-color: #aaa;
}
.auth-button-primary {
font-size: 1.3em;
background-color: #a77bca;
color: #fff;
}
.auth-button-primary:hover,
.auth-button-primary:focus {
background-color: #b28bd1;
}
.auth-button-primary:active {
background-color: #925bbd;
}