njpma/app/static/css/partials/_player.scss

79 lines
1.4 KiB
SCSS
Raw Normal View History

2021-11-22 08:47:48 +00:00
#player {
font-family: "noto_sans";
width: 100%;
color: #ddd;
h1 {
padding-left: var(--spacing-2);
padding-right: var(--spacing-2);
2021-11-24 09:03:30 +00:00
padding-top: 16px;
2021-11-22 08:47:48 +00:00
font-size: 20px;
letter-spacing: 1px;
font-weight: bold;
max-width: var(--container-width);
margin: auto;
2021-11-24 09:03:30 +00:00
a {
color: var(--color-link);
text-decoration: none;
}
2021-11-22 08:47:48 +00:00
}
h2 {
padding: 4px var(--spacing-2);
max-width: var(--container-width);
margin: auto;
}
.info {
margin-bottom: 16px;
2021-11-24 09:03:30 +00:00
h1 {
display: none;
}
2021-11-24 09:08:25 +00:00
@media screen and (max-width: 1100px) {
2021-11-24 09:03:30 +00:00
h1 {
display: block;
2022-01-27 14:42:48 +00:00
font-size: 16px;
2021-11-24 09:03:30 +00:00
}
}
2021-11-22 08:47:48 +00:00
}
2022-01-28 18:48:26 +00:00
.stage {
display: flex;
flex-direction: row;
margin: 8px;
@media (max-aspect-ratio: 4 / 3) {
margin-left: 0px;
margin-right: 0px;
flex-direction: column;
}
.vbox {
max-width: var(--container-width);
margin: auto;
margin-top: 0;
width: 100%;
.player {
width: 100%;
height: auto;
max-width: var(--container-width);
max-height: 80vh;
margin: auto;
}
}
.annotations {
width: 100%;
margin-top: auto;
@media (max-aspect-ratio: 4 / 3) {
max-width: 90%;
text-align: center;
}
height: 100%;
b {
font-weight: bold;
}
.annotation {
display: none;
margin: auto;
}
}
2021-11-22 08:47:48 +00:00
}
}