diff --git a/static/base.html b/static/base.html index 8bc8225..a2b2251 100644 --- a/static/base.html +++ b/static/base.html @@ -15,9 +15,7 @@
-
- {{template "body" .}} -
+ {{template "body" .}} - \ No newline at end of file + diff --git a/static/css/site.css b/static/css/site.css index 47f8193..bf966ef 100644 --- a/static/css/site.css +++ b/static/css/site.css @@ -56,12 +56,13 @@ input[type=text] { font-weight: bold; } -.root { - max-width: var(--var-max-width); - max-height: var(--var-max-height); - height: var(--var-max-height); - width: var(--var-max-width); - margin: 0px 1vw; +.grid-root { + display: grid; + height: var(--var-max-height); + margin: 0px 1vw; + max-height: var(--var-max-height); + max-width: var(--var-max-width); + width: var(--var-max-width); } .pretty-button { @@ -200,7 +201,7 @@ input[type=text] { height: 100%; width: 100%; position: absolute; - background-color: rgb(0, 0, 0, 0.75); + background-color: rgba(0, 0, 0, 0.75); z-index: 3; text-align: center; vertical-align: middle; @@ -400,3 +401,21 @@ input[type=text] { z-index: 99; color: var(--var-contrast-color); } + +/* ------------------- */ +/* CONDITIONAL CLASSES */ +/* ------------------- */ + +/* ------------- */ +/* COMBINED MODE */ +/* ------------- */ +.combined { + grid-template-columns: 5fr 1fr; +} + +/* --------------- */ +/* VIDEO ONLY MODE */ +/* --------------- */ +.video-only #videoElement { + height: 99vh; +} diff --git a/static/help.html b/static/help.html index 83ecb99..92ac6de 100644 --- a/static/help.html +++ b/static/help.html @@ -29,4 +29,4 @@ {{end}} -{{end}} \ No newline at end of file +{{end}} diff --git a/static/main.html b/static/main.html index b2cd83f..ac16236 100644 --- a/static/main.html +++ b/static/main.html @@ -6,35 +6,26 @@ - {{end}} {{if .Video}} -{{if not .Chat}} - -{{end}} {{end}} -{{if and .Video .Chat}} - -{{end}} +{{/* end define header */}} {{end}} {{define "body"}} + +{{ if and .Chat .Video }} +
+{{ else if .Video }} +
+{{ else }} +
+{{ end }} + {{if .Video}}