You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
418 lines
6.9 KiB
418 lines
6.9 KiB
/* variables */ |
|
:root { |
|
--header-height: 3em; |
|
--right-col-width: 24em; |
|
--video-container-height: 50vh; |
|
--header-bg-color: rgba(20,0,40,1); |
|
} |
|
|
|
body { |
|
font-size: 14px; |
|
} |
|
::-webkit-scrollbar { |
|
width: 0px; |
|
background: transparent; |
|
} |
|
|
|
#app-container { |
|
width: 100%; |
|
flex-direction: column; |
|
justify-content: flex-start; |
|
position: relative; |
|
} |
|
|
|
header { |
|
position: fixed; |
|
width: 100%; |
|
height: var(--header-height); |
|
top: 0; |
|
left: 0; |
|
background-color: var(--header-bg-color); |
|
z-index: 10; |
|
flex-direction: row; |
|
justify-content: space-between; |
|
flex-wrap: nowrap; |
|
} |
|
|
|
header h1 { |
|
font-size: 1.25em; |
|
font-weight: 100; |
|
letter-spacing: 1.2; |
|
text-transform: uppercase; |
|
padding: .5em; |
|
white-space: nowrap; |
|
width: 20em; |
|
} |
|
|
|
#chat-toggle { |
|
cursor: pointer; |
|
text-align: center; |
|
height: 100%; |
|
min-width: 3em; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
|
|
|
|
/* ************************************************8 */ |
|
|
|
#stream-info { |
|
padding: .5em 2em; |
|
text-align: center; |
|
width: 100%; |
|
|
|
flex-direction: row; |
|
justify-content: space-between; |
|
|
|
} |
|
#stream-info span { |
|
font-size: .7em; |
|
} |
|
.user-content { |
|
padding: 2em; |
|
} |
|
#user-content { |
|
display: block; |
|
} |
|
#user-content-touch { |
|
display: none; |
|
} |
|
/* ************************************************8 */ |
|
|
|
#user-options-container { |
|
flex-direction: row; |
|
justify-content: flex-end; |
|
align-items: center; |
|
flex-wrap: nowrap; |
|
} |
|
|
|
#user-info-display { |
|
display: flex; |
|
flex-direction: row; |
|
justify-content: flex-end; |
|
align-items: center; |
|
cursor: pointer; |
|
padding: .5em 1em; |
|
overflow: hidden; |
|
width: 100%; |
|
} |
|
|
|
#username-avatar { |
|
height: 1.75em; |
|
width: 1.75em; |
|
margin-right: .5em; |
|
} |
|
#username-display { |
|
font-weight: 600; |
|
font-size: .75em; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
overflow: hidden; |
|
} |
|
#user-info-display:hover { |
|
transition: opacity .2s; |
|
opacity: .75; |
|
} |
|
|
|
|
|
#user-info-change { |
|
display: none; |
|
justify-content: flex-end; |
|
align-items: center; |
|
padding: .25em; |
|
} |
|
#username-change-input { |
|
font-size: .75em; |
|
} |
|
#button-update-username { |
|
font-size: .65em; |
|
text-transform: uppercase; |
|
height: 2.5em; |
|
} |
|
#button-cancel-change { |
|
cursor: pointer; |
|
height: 2.5em; |
|
font-size: .65em; |
|
} |
|
.user-btn { |
|
margin: 0 .25em; |
|
} |
|
|
|
/* ************************************************8 */ |
|
|
|
|
|
#video-container { |
|
height: calc(var(--video-container-height)); |
|
width: 100%; |
|
margin-top: var(--header-height); |
|
} |
|
|
|
.owncast-video-container { |
|
height: auto; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: flex-start; |
|
align-items: center; |
|
} |
|
.owncast-video-container .video-js { |
|
width: 100%; |
|
height: 100%; |
|
display: block; |
|
} |
|
.owncast-video-container video { |
|
width: 100%; |
|
display: block; |
|
min-height: 100% |
|
} |
|
|
|
.video-js .vjs-big-play-button { |
|
left: 50%; |
|
top: 50%; |
|
margin-left: -1.5em; |
|
margin-top: -0.75em; |
|
} |
|
.vjs-airplay .vjs-icon-placeholder::before { |
|
content: 'AP'; |
|
} |
|
|
|
|
|
|
|
|
|
/* ************************************************8 */ |
|
|
|
|
|
.no-chat #chat-container-wrap { |
|
display: none; |
|
} |
|
.chat #chat-container-wrap { |
|
display: block; |
|
} |
|
|
|
.chat #video-container, |
|
.chat #stream-info, |
|
.chat #user-content { |
|
width: calc(100% - var(--right-col-width)); |
|
} |
|
|
|
|
|
#chat-container { |
|
position: fixed; |
|
z-index: 9; |
|
top: var(--header-height); |
|
right: 0; |
|
width: var(--right-col-width); |
|
|
|
height: calc(100vh - var(--header-height)); |
|
|
|
overflow: hidden; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: flex-end; |
|
} |
|
|
|
#messages-container { |
|
overflow: auto; |
|
padding: 1em 0; |
|
min-height: 50vh; |
|
} |
|
#message-input-container { |
|
width: 100%; |
|
padding: 1em; |
|
} |
|
|
|
#message-form { |
|
flex-direction: column; |
|
align-items: flex-end; |
|
margin-bottom: 0; |
|
} |
|
#message-body-form { |
|
font-size: 1em; |
|
} |
|
#message-form-actions { |
|
flex-direction: row; |
|
justify-content: space-between; |
|
align-items: center; |
|
width: 100%; |
|
} |
|
|
|
|
|
/* ************************************************8 */ |
|
|
|
.message { |
|
padding: .85em; |
|
align-items: flex-start; |
|
} |
|
.message-avatar { |
|
height: 2.5em; |
|
width: 2.5em; |
|
margin-right: .75em; |
|
} |
|
.message-content { |
|
font-size: .85em; |
|
} |
|
.message-content a { |
|
color: #7F9CF5; /* indigo-400 */ |
|
} |
|
.message-content a:hover { |
|
text-decoration: underline; |
|
} |
|
|
|
|
|
/* ************************************************8 */ |
|
|
|
|
|
.no-chat #chat-toggle { |
|
opacity: .75; |
|
} |
|
|
|
/* ************************************************8 */ |
|
|
|
.landscape #chat-toggle { |
|
display: none; |
|
} |
|
|
|
/* ************************************************8 */ |
|
|
|
@media screen and (max-width: 860px) { |
|
:root { |
|
--right-col-width: 20em; |
|
} |
|
|
|
#chat-container { |
|
width: var(--right-col-width); |
|
} |
|
|
|
} |
|
|
|
@media screen and (max-width: 640px ) { |
|
.desktop { |
|
--video-container-height: 50vh; |
|
} |
|
.desktop #chat-container { |
|
height: auto; |
|
position: relative; |
|
right: unset; |
|
top: unset; |
|
width: 100%; |
|
z-index: 1; |
|
} |
|
.desktop.chat #video-container, |
|
.desktop.chat #stream-info, |
|
.desktop.chat #user-content { |
|
width: 100%; |
|
} |
|
.desktop.chat #user-content{ |
|
display: none; |
|
} |
|
|
|
} |
|
|
|
/* ************************************************8 */ |
|
/* ************************************************8 */ |
|
|
|
.touch-screen header { |
|
position: relative; |
|
} |
|
.touch-screen #top-content { |
|
position: fixed; |
|
left: 0; |
|
top: 0; |
|
width: 100%; |
|
z-index: 10; |
|
} |
|
|
|
|
|
|
|
.touch-screen #user-content { |
|
display: none; |
|
} |
|
.touch-screen #user-content-touch { |
|
display: block; |
|
} |
|
|
|
.touch-screen #stream-info { |
|
height: 2.5em; |
|
overflow: hidden; |
|
} |
|
|
|
.touch-screen #chat-container-wrap { |
|
display: flex; |
|
align-items: flex-end; |
|
width: 100%; |
|
height: auto; |
|
flex-direction: column; |
|
margin-top: calc(var(--header-height) + var(--video-container-height) + 2.5em); |
|
} |
|
.touch-screen #chat-container { |
|
height: auto; |
|
position: relative; |
|
right: unset; |
|
top: unset; |
|
width: 100%; |
|
z-index: 1; |
|
} |
|
.touch-screen.chat #video-container, |
|
.touch-screen.chat #stream-info, |
|
.touch-screen.chat #user-content { |
|
width: 100%; |
|
} |
|
|
|
|
|
.touch-screen #video-container { |
|
margin-top: 0; |
|
} |
|
.touch-screen .owncast-video-container { |
|
height: 100%; |
|
} |
|
|
|
.touch-screen #user-content-touch { |
|
display: none; |
|
} |
|
.touch-screen #chat-container { |
|
display: block; |
|
} |
|
.touch-screen.no-chat #user-content-touch { |
|
display: block; |
|
} |
|
.touch-screen.no-chat #chat-container { |
|
display: none; |
|
} |
|
|
|
@media screen and (max-width: 640px ) { |
|
:root { |
|
--video-container-height: 36vh; |
|
} |
|
} |
|
|
|
@media screen and (orientation: landscape) and (min-width: 1024px) { |
|
:root { |
|
--video-container-height: 65vh; |
|
} |
|
} |
|
|
|
@media screen and (orientation: landscape) and (max-width: 1024px) { |
|
:root { |
|
--video-container-height: 75vh; |
|
} |
|
#main-mobile-container { |
|
margin-top: calc(var(--header-height) + var(--video-container-height)); |
|
} |
|
.touch-screen .user-content { |
|
display: block; |
|
} |
|
.touch-screen #chat-container { |
|
display: none; |
|
} |
|
.touch-screen #chat-toggle { |
|
display: none; |
|
} |
|
} |
|
|
|
/* Tailwind sets list styles to none. I don't know why. */ |
|
ol { |
|
list-style: decimal; |
|
} |
|
|
|
ul { |
|
list-style: unset; |
|
}
|
|
|