now.flash.moe/public/now.css

194 lines
3.1 KiB
CSS
Raw Normal View History

2021-05-20 15:38:25 +00:00
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
}
body {
overflow: hidden;
}
2021-05-20 15:38:25 +00:00
a {
color: inherit;
text-decoration: none;
}
a:hover,
a:focus {
text-decoration: underline;
}
2021-05-20 15:38:25 +00:00
.hidden {
display: none !important;
}
.container {
background: url('resources/grid.png') transparent;
height: 100%;
width: 100%;
color: #fff;
font: 12px/20px Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
2021-05-20 15:38:25 +00:00
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 600px) {
.container__index,
.container__user {
width: 100%;
height: 100%;
}
}
.container__loading {
text-align: center;
background: rgba(17, 17, 17, 0.8);
box-shadow: 0 1px 4px #111;
padding: 10px;
}
2021-05-20 15:38:25 +00:00
.container__index {
text-align: center;
background: rgba(17, 17, 17, 0.8);
box-shadow: 0 1px 4px #111;
padding: 6px 10px;
display: flex;
flex-flow: column;
justify-content: center;
}
.container__user {
display: flex;
flex-flow: row;
box-shadow: 0 1px 4px #111;
}
.background {
background: none no-repeat center / cover #000;
z-index: -1;
position: absolute;
height: 100%;
width: 100%;
transition: background-color 2.1s;
filter: blur(10px);
transform: scale(1.2);
2021-05-20 15:38:25 +00:00
}
.index__title {
font-weight: 200;
font-size: 3em;
line-height: 1.5em;
font-family: 'Electrolize', Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif;
2021-05-20 15:38:25 +00:00
}
.index__form {
margin: 5px;
display: flex;
justify-content: center;
box-shadow: 0 1px 4px #111;
}
.index__username,
.index__submit {
border: 1px solid #111;
color: #fff;
padding: 2px;
font-size: 1.5em;
height: 30px;
}
.index__username {
background: rgba(17, 17, 17, 0.5);
border-right: 0;
font-family: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
2021-05-20 15:38:25 +00:00
width: 100%;
}
.index__submit {
border-left: 0;
background: #111;
width: 30px;
}
.index__dev {
font-size: 1.1em;
font-weight: 200;
}
.cover {
flex-shrink: 0;
flex-grow: 0;
}
@media (max-width: 600px) {
.cover {
display: none;
}
}
.cover__image {
background: none no-repeat center / cover rgba(17, 17, 17, 0.8);
width: 300px;
height: 300px;
}
.info {
flex-grow: 1;
flex-shrink: 0;
background: rgba(17, 17, 17, 0.8);
padding: 6px 8px;
display: flex;
flex-flow: column;
}
@media (min-width: 601px) {
.info {
width: 300px;
height: 300px;
}
}
.info__title {
font-size: 3em;
line-height: 1.2em;
font-family: 'Electrolize', Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif;
2021-05-20 15:38:25 +00:00
font-weight: 200;
}
.info__artist {
font-size: 1.5em;
line-height: 1.2em;
font-weight: 200;
}
.info__flags {
line-height: 1.5em;
font-size: 2em;
flex-grow: 1;
}
.info__user {
align-self: end;
display: inline-flex;
width: 100%;
}
.info__user-back {
cursor: pointer;
}
.info__user-name {
flex-grow: 1;
text-align: right;
}