watch-party/frontend/styles.css

223 lines
3.6 KiB
CSS
Raw Normal View History

2021-10-24 22:48:10 +00:00
:root {
--bg: rgb(28, 23, 36);
--fg: rgb(234, 234, 248);
--accent: hsl(275, 57%, 68%);
}
html {
background-color: var(--bg);
color: var(--fg);
font-size: 1.125rem;
font-family: sans-serif;
2021-10-25 01:59:52 +00:00
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}
::-webkit-scrollbar {
width: 0;
background: transparent;
2021-10-24 22:48:10 +00:00
}
html,
body {
margin: 0;
}
video {
2021-10-25 01:59:52 +00:00
display: block;
2021-10-24 22:48:10 +00:00
width: 100vw;
height: auto;
2021-10-25 01:59:52 +00:00
max-width: auto;
max-height: 100vh;
2021-10-24 22:48:10 +00:00
}
a {
color: var(--accent);
}
label {
display: block;
}
input[type="url"],
input[type="text"] {
box-sizing: border-box;
background: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 6px;
color: rgba(0, 0, 0, 0.8);
display: block;
margin: 0.5em 0;
padding: 0.5em 1em;
line-height: 1.5;
font-family: sans-serif;
font-size: 1em;
width: 500px;
max-width: 100%;
2021-10-24 22:48:10 +00:00
resize: none;
overflow-x: wrap;
overflow-y: scroll;
}
button {
background-color: var(--accent);
border: var(--accent);
border-radius: 6px;
color: #fff;
padding: 0.5em 1em;
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
font-family: sans-serif;
font-size: 1em;
width: 500px;
max-width: 100%;
2021-10-24 22:48:10 +00:00
user-select: none;
border: 1px solid rgba(0, 0, 0, 0);
line-height: 1.5;
}
button.small-button {
font-size: 0.75em;
padding-top: 0;
padding-bottom: 0;
}
.subtitle-track-group {
display: flex;
}
.subtitle-track-group > * {
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-right: 1ch !important;
}
2021-11-11 17:26:30 +00:00
#pre-join-controls,
#create-controls {
2021-10-24 22:48:10 +00:00
width: 60%;
margin: 0 auto;
margin-top: 4em;
}
2021-11-11 17:26:30 +00:00
#join-session-form,
#create-session-form {
2021-10-24 22:48:10 +00:00
margin-bottom: 4em;
}
2021-10-25 01:59:52 +00:00
2021-11-11 17:26:30 +00:00
#post-create-message {
display: none;
width: 500px;
max-width: 100%;
font-size: 0.85em;
}
2021-10-25 01:59:52 +00:00
#chatbox-container {
display: none;
}
2021-11-05 13:07:21 +00:00
2021-11-23 00:48:53 +00:00
.chat-message {
overflow-wrap: break-word;
}
.chat-message > strong {
color: rgb(126, 208, 255);
}
.chat-message.user-join,
.chat-message.user-leave,
.chat-message.ping {
2021-11-05 13:07:21 +00:00
font-style: italic;
}
.chat-message.set-time,
.chat-message.set-playing {
font-style: italic;
text-align: right;
font-size: 0.85em;
}
.chat-message.command-message{
font-size: 0.85em;
}
.chat-message.set-time > strong,
.chat-message.set-playing > strong {
color: unset !important;
2021-11-05 13:07:21 +00:00
}
.emoji {
width: 2ch;
height: 2ch;
object-fit: contain;
margin-bottom: -0.35ch;
}
2021-11-05 13:07:21 +00:00
#chatbox {
padding: 0.5em 2em;
min-height: 8em;
overflow-y: scroll;
}
2022-02-13 17:23:20 +00:00
#viewer-list {
padding: 0.5em 2em;
/* TODO: turn this into max-height instead of fixed height without breaking the chatbox height */
height: 4em;
overflow-y: scroll;
color: rgb(126, 208, 255);
border-bottom: var(--fg);
border-bottom-style: solid;
}
2021-11-05 13:07:21 +00:00
#chatbox-container {
background-color: #222;
}
#chatbox-send {
padding: 0 2em;
padding-bottom: 0.5em;
}
#chatbox-send > input {
font-size: 0.75em;
width: 100%;
}
@media (min-aspect-ratio: 4/3) {
#video-container video {
width: calc(100vw - 400px);
position: absolute;
height: 100vh;
background-color: black;
}
#video-container {
float: left;
height: 100vh;
position: relative;
}
#chatbox-container {
float: right;
width: 400px;
height: 100vh !important;
}
#chatbox {
2022-02-13 17:23:20 +00:00
height: calc(100vh - 5em - 4em) !important;
}
2021-11-05 13:07:21 +00:00
}