Browse Source
* web-layout: Show max viewers Move to videojs and point to remote video on goth.land form functionailties progress. implement chat toggling fix msg container use app file from web-layout style message items Guard against the infinite that can take place when the ws server goes unavailable use css vars initial chat form layout mobile considerations add file initial layout Support local development of index.htmlpull/5/head
Gabe Kangas
5 years ago
5 changed files with 568 additions and 105 deletions
@ -0,0 +1,309 @@
@@ -0,0 +1,309 @@
|
||||
/* variables */ |
||||
:root { |
||||
--header-height: 3em; |
||||
--right-col-width: 24em; |
||||
|
||||
--chat-bg-color: rgba(11,0,33,.95); |
||||
--header-bg-color: rgba(20,0,40,1); |
||||
} |
||||
|
||||
|
||||
body { |
||||
font-size: 14px; |
||||
background-color: #666; |
||||
} |
||||
::-webkit-scrollbar { |
||||
width: 0px; |
||||
background: transparent; |
||||
} |
||||
|
||||
#app-container { |
||||
width: 100%; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
position: relative; |
||||
|
||||
color: white; |
||||
} |
||||
|
||||
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; |
||||
} |
||||
|
||||
header h1 { |
||||
font-size: 1.25em; |
||||
font-weight: 100; |
||||
letter-spacing: 1.2; |
||||
text-transform: uppercase; |
||||
color: #ddd; |
||||
padding: .5em; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
#chat-toggle { |
||||
cursor: pointer; |
||||
background-color: #555; |
||||
text-align: center; |
||||
height: 100%; |
||||
width: 3em; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
#chat-toggle:hover { |
||||
background-color: #666; |
||||
} |
||||
|
||||
/* ************************************************8 */ |
||||
|
||||
#user-options-container { |
||||
flex-direction: row; |
||||
justify-content: flex-end; |
||||
align-items: center; |
||||
} |
||||
|
||||
#user-info-display { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
align-items: center; |
||||
cursor: pointer; |
||||
padding: .5em 1em; |
||||
} |
||||
|
||||
#username-avatar { |
||||
height: 1.75em; |
||||
width: 1.75em; |
||||
margin-right: .5em; |
||||
border: 1px solid rgba(255,255,255,.25) |
||||
} |
||||
#username-display { |
||||
font-weight: bold; |
||||
font-size: .75em; |
||||
color: #516FEB |
||||
|
||||
} |
||||
#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 { |
||||
color: rgba(255,255,255,.5); |
||||
cursor: pointer; |
||||
height: 2.5em; |
||||
font-size: .65em; |
||||
} |
||||
.user-btn { |
||||
margin: 0 .25em; |
||||
} |
||||
|
||||
/* ************************************************8 */ |
||||
|
||||
#main-content-container { |
||||
width: 100%; |
||||
flex-direction: row; |
||||
position: relative; |
||||
margin-top: var(--header-height); |
||||
} |
||||
|
||||
.main-cols { |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
position: relative; |
||||
} |
||||
|
||||
.left-col { |
||||
width: calc(100vw - var(--right-col-width)); |
||||
} |
||||
|
||||
/* ************************************************8 */ |
||||
|
||||
#video-container { |
||||
width: 100%; |
||||
height: auto; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
align-items: center; |
||||
} |
||||
#video-container video { |
||||
width: 100%; |
||||
display: block; |
||||
} |
||||
|
||||
#stream-info { |
||||
padding: .5em; |
||||
text-align: center; |
||||
font-family: monospace; |
||||
font-size: .75em; |
||||
background-color: rgba(0,0,0,.5); |
||||
border-bottom: 1px solid black; |
||||
} |
||||
|
||||
/* ************************************************8 */ |
||||
|
||||
|
||||
#chat-container { |
||||
position: fixed; |
||||
z-index: 9; |
||||
right: 0; |
||||
height: 100%; |
||||
width: var(--right-col-width); |
||||
background-color: var(--chat-bg-color); |
||||
height: calc(100vh - var(--header-height)); |
||||
overflow: hidden; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: flex-end; |
||||
} |
||||
|
||||
#messages-container { |
||||
overflow: auto; |
||||
padding: 1em 0; |
||||
} |
||||
#message-input-container { |
||||
width: 100%; |
||||
border-top: 1px solid #eee; |
||||
padding: 1em; |
||||
background-color: #334; |
||||
} |
||||
|
||||
#message-form { |
||||
flex-direction: column; |
||||
align-items: flex-end; |
||||
margin-bottom: 0; |
||||
} |
||||
#message-form-actions { |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: 100%; |
||||
} |
||||
#message-form-warning { |
||||
font-size: .75em; |
||||
color: red; |
||||
} |
||||
|
||||
/* ************************************************8 */ |
||||
|
||||
.message { |
||||
padding: .85em; |
||||
align-items: flex-start; |
||||
} |
||||
.message-avatar { |
||||
height: 2.5em; |
||||
width: 2.5em; |
||||
margin-right: .75em; |
||||
background-color: rgba(0,0,0, .75); |
||||
} |
||||
.message-content { |
||||
font-size: .85em; |
||||
} |
||||
.message-content a { |
||||
color: #6699cc; |
||||
} |
||||
.message-content a:hover { |
||||
text-decoration: underline; |
||||
} |
||||
.message-author { |
||||
font-weight: 600; |
||||
} |
||||
.message-text { |
||||
color: #ccc; |
||||
font-weight: 100; |
||||
} |
||||
/* ************************************************8 */ |
||||
|
||||
|
||||
.no-chat .left-col { |
||||
width: 100vw; |
||||
} |
||||
.no-chat .right-col { |
||||
display: none; |
||||
} |
||||
|
||||
.no-chat #chat-toggle { |
||||
opacity: .5; |
||||
} |
||||
|
||||
/* ************************************************8 */ |
||||
|
||||
@media screen and (max-width: 860px) { |
||||
:root { |
||||
--right-col-width: 20em; |
||||
} |
||||
|
||||
#chat-container { |
||||
width: var(--right-col-width); |
||||
} |
||||
.left-col { |
||||
width: calc(100vw - var(--right-col-width)); |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width: 640px ) and (orientation: portrait) { |
||||
#main-content-container { |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
height: calc(100vh - var(--header-height)); |
||||
} |
||||
|
||||
.main-cols { |
||||
width: 100vw; |
||||
} |
||||
.left-col { |
||||
flex-direction: column; |
||||
justify-content: stretch; |
||||
} |
||||
.right-col { |
||||
overflow: hidden; |
||||
} |
||||
|
||||
|
||||
#info { |
||||
display: none; |
||||
overflow: auto; |
||||
height: auto; |
||||
} |
||||
|
||||
#chat-container { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: relative; |
||||
height: auto; |
||||
} |
||||
|
||||
.no-chat .left-col { |
||||
height: 100%; |
||||
} |
||||
.no-chat .right-col { |
||||
display: none; |
||||
} |
||||
.no-chat #info { |
||||
display: block; |
||||
} |
||||
|
||||
} |
||||
Loading…
Reference in new issue