ghostream/web/static/css/style.css

118 lines
1.7 KiB
CSS

body, html {
height: 100%;
margin: 0;
}
body {
background-color: #3b4b5b;
font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #bbb;
text-align: justify;
user-select: none;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
code {
font-size: 87.5%;
word-break: break-word;
user-select: text;
}
svg {
overflow: hidden;
vertical-align: middle;
}
a {
text-decoration: underline;
text-decoration-style: dotted;
color: inherit;
}
img {
max-width: 100%;
}
h1, h2, h3, h4 {
color: #ddd;
}
.container {
height: 100%;
width: 100%;
display: flex;
flex-wrap: wrap;
height: 100%;
}
.col-video {
padding: 1rem;
flex-basis: 0;
flex-grow: 1;
text-align: right;
/* Limit max width to limit video size */
margin: auto;
max-width: 1200px;
}
.video-responsive {
position: relative;
padding-top: 56.25%; /* 16/9 */
}
.video-responsive video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
max-height: 90vh;
/* Black borders when video is not 16/9 */
background-color: #000;
}
.col-chat {
position: relative;
width: 100%;
height: 100%;
box-shadow: 0 1rem 3rem rgba(0,0,0,0.175);
}
.col-chat iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Hide chat toggler on small screen */
#sideWidgetToggle {
margin-left: 0.5rem;
display: none;
}
/* On large screen, put chat on left */
@media(min-width:1000px){
.col-chat {
width: 33.33333%;
flex: 0 0 33.33333%;
}
#sideWidgetToggle {
display: inline;
}
}