LogalDeveloper/owncast
0
Fork 0
Code Activity

start a video-only page; fix some styles

Browse Source
This commit is contained in:
Ginger Wong
2020-08-23 21:23:16 -07:00
parent a07ad8d693
commit 22e16b67d7
10 changed files with 681 additions and 687 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
webroot/styles/app.css
View File

@@ -7,7 +7,7 @@ Spefici styles for app layout
:root {
--header-height: 3.5em;
--right-col-width: 24em;
--video-container-height: 55vh;
--video-container-height: calc((9 / 16) * 100vw);
--header-bg-color: rgba(20,0,40,1);
--user-image-width: 10em;
}
@@ -70,6 +70,10 @@ header {
#video-container {
height: calc(var(--video-container-height));
margin-top: var(--header-height);
position: relative;
width: 100%;
/* height: calc((9 / 16) * 100vw); */
min-height: 480px;
background-size: 30%;
}
#video-container #video {

22
webroot/styles/standalone-chat.css
View File

@@ -1,37 +1,33 @@
/*
The styles in this file mostly ovveride those coming from chat.css
*/
.messages-only {
/* modify this px number if you want things to be relatively bigger or smaller 8*/
/* modify this px number if you want things to be relatively bigger or smaller */
#messages-only {
font-size: 16px;
}
.messages-only .message-content {
#messages-only .message-content {
text-shadow: 1px 1px 0px rgba(0,0,0,0.25);
}
.message-avatar {
#messages-only .message-avatar {
display: none;
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25);
}
.message-avatar img {
#messages-only .message-avatar img {
height: 1.8em;
width: 1.8em;
}
.messages-only .message {
#messages-only .message {
padding: .5em;
}
.messages-only .message-text {
#messages-only .message-text {
font-weight: 400;
color: white;
}
.messages-only .message-text a {
#messages-only .message-text a {
color: #fc0;
}
.messages-only .message-author {
#messages-only .message-author {
color: rgba(20,0,40,1);
}

30
webroot/styles/video-only.css Normal file
View File

@@ -0,0 +1,30 @@
/*
The styles in this file mostly ovveride those coming from chat.css
*/
/* modify this px number if you want things to be relatively bigger or smaller */
#video-only {
font-size: 16px;
position: relative;
}
#video-only #video-container {
background-size: 30%;
width: 100%;
height: calc((9 / 16) * 100vw);
}
#video-only #video-container #video {
transition: opacity .5s;
opacity: 0;
pointer-events: none;
}
#video-only .online #video-container #video {
opacity: 1;
pointer-events: auto;
}
#video-only #stream-info {
height: 3rem;
}