From e554ae15844dfafa589dad979e994b2db21164f9 Mon Sep 17 00:00:00 2001 From: tpart Date: Sat, 24 Jun 2023 20:43:57 +0200 Subject: Improve start page style --- client-web/public/assets/style/master.css | 85 +++++++++++++++++++++---------- client-web/public/start.html | 6 +-- 2 files changed, 62 insertions(+), 29 deletions(-) (limited to 'client-web/public') 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 @@
-

keks-meet

+

keks-meet

A simple secure conferencing application using webrtc


-

+

To get started, click 'Join' and share the URL with your partner. You can also optionally customize the URL by entering a secure/unguessable(!!!) identifier below.

-

+

keks-meet is free software! It is licenced under the terms of the third version of the GNU Affero General Public Licence only.

-- cgit v1.2.3-70-g09d2 From 6a324f996721a756e329e1b7406dc2db69e99fdb Mon Sep 17 00:00:00 2001 From: tpart Date: Sat, 24 Jun 2023 21:10:00 +0200 Subject: New nav bar --- client-web/public/assets/style/menu.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) (limited to 'client-web/public') diff --git a/client-web/public/assets/style/menu.css b/client-web/public/assets/style/menu.css index 73f7125..4f5e786 100644 --- a/client-web/public/assets/style/menu.css +++ b/client-web/public/assets/style/menu.css @@ -9,11 +9,12 @@ background-color: var(--bg); padding: 0.5em; position: fixed; - bottom: 0.5em; + bottom: 0; border: 0px solid transparent; - border-radius: 5px; - left: 50%; - transform: translateX(-50%); + display: flex; + align-items: center; + justify-content: center; + width: 100%; z-index: 100; } -- cgit v1.2.3-70-g09d2 From 57eba53182e09459eacf782b383523c94b78c0fe Mon Sep 17 00:00:00 2001 From: tpart Date: Sat, 24 Jun 2023 22:54:04 +0200 Subject: Fix main app styling --- client-web/public/assets/style/master.css | 27 +++++++++++++++++++++++---- client-web/public/assets/style/menu.css | 16 ++++++++++------ 2 files changed, 33 insertions(+), 10 deletions(-) (limited to 'client-web/public') diff --git a/client-web/public/assets/style/master.css b/client-web/public/assets/style/master.css index d4cdac8..074f39a 100644 --- a/client-web/public/assets/style/master.css +++ b/client-web/public/assets/style/master.css @@ -49,21 +49,26 @@ h1 { } input[type="button"], -button { +button, +.side-ui-control { padding: 0.5em; margin: 0.25em; background-color: var(--ac); border: 0px solid transparent; border-radius: 3px; + font-size: small; + font-weight: 400; } input[type="button"]:hover, -button:hover { +button:hover, +.side-ui-control:hover { filter: brightness(130%); } input[type="button"].active, -button.active { +button.active, +.side-ui-control:active { filter: hue-rotate(20deg); } @@ -75,10 +80,15 @@ input[type="number"] { } input:disabled, -button:disabled { +button:disabled, +.side-ui-control:disabled { filter: sepia(90%); } +.side-ui-control input { + display: none; +} + .start-box { text-align: center; position: absolute; @@ -132,6 +142,15 @@ button:disabled { text-align: center; } +.main { + height: calc(100vh - 64px); + display: flex; +} + +.room { + width: 100%; +} + #room-id-input { padding: 0.5em; font-size: x-large; diff --git a/client-web/public/assets/style/menu.css b/client-web/public/assets/style/menu.css index 4f5e786..6f67af0 100644 --- a/client-web/public/assets/style/menu.css +++ b/client-web/public/assets/style/menu.css @@ -4,17 +4,14 @@ Copyright (C) 2022 metamuffin */ - -.bottom-menu { - background-color: var(--bg); - padding: 0.5em; - position: fixed; - bottom: 0; +.control-bar { + background-color: var(--bg); border: 0px solid transparent; display: flex; align-items: center; justify-content: center; width: 100%; + height: 64px; z-index: 100; } @@ -31,3 +28,10 @@ color: var(--ac-light); padding: 0.5em; } + +.info-br { + position: absolute; + right: 0.5em; + bottom: calc(64px + 0.5em); + text-align: right; +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 8a3ce39893022a862f5faa4e893badbef9e7125b Mon Sep 17 00:00:00 2001 From: tpart Date: Sat, 24 Jun 2023 23:08:28 +0200 Subject: Improve CSS --- client-web/public/assets/style/master.css | 7 ------- client-web/public/assets/style/room.css | 3 +++ 2 files changed, 3 insertions(+), 7 deletions(-) (limited to 'client-web/public') diff --git a/client-web/public/assets/style/master.css b/client-web/public/assets/style/master.css index 074f39a..e08e8c2 100644 --- a/client-web/public/assets/style/master.css +++ b/client-web/public/assets/style/master.css @@ -35,9 +35,6 @@ body.start { body { font-weight: 300; background-color: var(--bg-dark); - height: 100vh; - width: 100vw; - justify-content: left; } h1 { @@ -147,10 +144,6 @@ button:disabled, display: flex; } -.room { - width: 100%; -} - #room-id-input { padding: 0.5em; font-size: x-large; diff --git a/client-web/public/assets/style/room.css b/client-web/public/assets/style/room.css index ad84325..1a82f0c 100644 --- a/client-web/public/assets/style/room.css +++ b/client-web/public/assets/style/room.css @@ -5,6 +5,9 @@ */ .room { overflow-y: scroll; + width: 100%; + display: flex; + flex-wrap: wrap; } .user { -- cgit v1.2.3-70-g09d2