diff options
Diffstat (limited to 'client-web/public')
| -rw-r--r-- | client-web/public/assets/style/master.css | 85 | ||||
| -rw-r--r-- | client-web/public/start.html | 6 |
2 files changed, 62 insertions, 29 deletions
diff --git a/client-web/public/assets/style/master.css b/client-web/public/assets/style/master.css index 8d77ca1..d4cdac8 100644 --- a/client-web/public/assets/style/master.css +++ b/client-web/public/assets/style/master.css @@ -22,8 +22,14 @@ body.start { background-image: linear-gradient(var(--ac-dark-transparent), black 150%), url("./tile-backdrop.svg"); background-attachment: fixed; - background-size: cover, 40vw; + background-size: cover, 750px; background-color: var(--ac-dark); + position: absolute; + inset: 0; + display: flex; + place-content: center; + align-items: center; + overflow: hidden; } body { @@ -74,62 +80,89 @@ button:disabled { } .start-box { + text-align: center; position: absolute; - top: 50vh; - left: 50vw; - transform: translate(-50%, -50%); + max-width: 64em; } -.start-box p { +.instructions { margin-bottom: 0.5em; font-size: x-large; + color: #c5c5c5; + text-align: left; } .start-box input[type="text"] { margin: 2em 0 1em 0; - font-size: xx-large; + width: 25em; + font-weight: 500; + color: whitesmoke; + border: 0.15em solid var(--ac); + background-color: rgba(0, 0, 0, 0.3); + backdrop-filter: blur(5px); + border-radius: 0.5em; + outline: none; +} + +.start-box input[type="text"]:focus { + transition: 0.1s ease-out; + background-color: rgba(0, 0, 0, 0.5); + border-color: lightgray !important; } .start-box input[type="button"] { margin: 1em 0 1em 0; + border-radius: 0.5em; font-size: x-large; - width: 100%; + width: 12em; + padding: 0.5em; + font-weight: 500; + color: white; + background-color: var(--ac); + backdrop-filter: blur(5px); + border: 0; + cursor: pointer; + border: 0.15em solid var(--ac); } .start-box .description { margin-bottom: 1.5em; + font-size: x-large; + font-weight: bold; text-align: center; } #room-id-input { padding: 0.5em; font-size: x-large; - width: calc(100% - 1em); } -@media (max-width: 800px), (max-height: 700px) { - h1 { - font-size: xxx-large; - } +@media (max-width: 1100px) { .start-box { - position: relative; - top: 0; - left: 0; - transform: none; + max-width: 90%; + } + .start-box input[type="text"] { width: 90%; - margin: 0 auto; - margin-top: 1em; } - .start-box p { - margin-bottom: 0.5em; - font-size: large !important; +} + +@media (max-width: 900px) and (max-height: 700px), (max-height: 550px) { + h1 { + font-size: 3em; + font-weight: 700; + text-align: center; } - .start-box input[type="text"] { - margin: 1em 0 0.5em 0; - font-size: large !important; + .instructions { + font-size: large; + } + .start-box .description { + font-size: large; + } + #room-id-input { + padding: 0.5em; + font-size: large; } .start-box input[type="button"] { - margin: 0.5em 0 0.5em 0; - font-size: large !important; + font-size: large; } } diff --git a/client-web/public/start.html b/client-web/public/start.html index 68ede54..42c8799 100644 --- a/client-web/public/start.html +++ b/client-web/public/start.html @@ -9,15 +9,15 @@ </head> <body class="start"> <div class="start-box"> - <h1>keks-meet</h2> + <h1>keks-meet</h1> <p class="description">A simple secure conferencing application using webrtc</p> <br> - <p> + <p class="instructions"> To get started, click 'Join' and share the URL with your partner. You can also optionally customize the URL by entering a <b>secure/unguessable(!!!)</b> identifier below. </p> - <p> + <p class="instructions"> keks-meet is free software! It is licenced under the terms of the third version of the GNU Affero General Public Licence only. </p> |