summaryrefslogtreecommitdiff
path: root/client-web
diff options
context:
space:
mode:
Diffstat (limited to 'client-web')
-rw-r--r--client-web/public/assets/style/master.css180
-rw-r--r--client-web/public/assets/style/menu.css37
-rw-r--r--client-web/public/assets/style/room.css78
3 files changed, 295 insertions, 0 deletions
diff --git a/client-web/public/assets/style/master.css b/client-web/public/assets/style/master.css
new file mode 100644
index 0000000..e08e8c2
--- /dev/null
+++ b/client-web/public/assets/style/master.css
@@ -0,0 +1,180 @@
+/*
+ This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
+ which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+ Copyright (C) 2022 metamuffin <metamuffin@disroot.org>
+*/
+@import url("../font/include.css");
+@import url("./logger.css");
+@import url("./chat.css");
+@import url("./room.css");
+@import url("./prefs.css");
+@import url("./menu.css");
+@import url("/overrides.css");
+
+* {
+ font-family: "Ubuntu", sans-serif;
+ color: white;
+ margin: 0px;
+ padding: 0px;
+}
+
+body.start {
+ background-image: linear-gradient(var(--ac-dark-transparent), black 150%),
+ url("./tile-backdrop.svg");
+ background-attachment: fixed;
+ background-size: cover, 750px;
+ background-color: var(--ac-dark);
+ position: absolute;
+ inset: 0;
+ display: flex;
+ place-content: center;
+ align-items: center;
+ overflow: hidden;
+}
+
+body {
+ font-weight: 300;
+ background-color: var(--bg-dark);
+}
+
+h1 {
+ text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75);
+ font-size: 5em;
+ font-weight: 700;
+ text-align: center;
+ margin-bottom: 0.1em;
+}
+
+input[type="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,
+.side-ui-control:hover {
+ filter: brightness(130%);
+}
+
+input[type="button"].active,
+button.active,
+.side-ui-control:active {
+ filter: hue-rotate(20deg);
+}
+
+input[type="text"],
+select,
+input[type="number"] {
+ background-color: var(--bg-dark);
+ border: 1px solid var(--ac-light);
+}
+
+input:disabled,
+button:disabled,
+.side-ui-control:disabled {
+ filter: sepia(90%);
+}
+
+.side-ui-control input {
+ display: none;
+}
+
+.start-box {
+ text-align: center;
+ position: absolute;
+ max-width: 64em;
+}
+
+.instructions {
+ margin-bottom: 0.5em;
+ font-size: x-large;
+ color: #c5c5c5;
+ text-align: left;
+}
+
+.start-box input[type="text"] {
+ margin: 2em 0 1em 0;
+ 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: 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;
+}
+
+.main {
+ height: calc(100vh - 64px);
+ display: flex;
+}
+
+#room-id-input {
+ padding: 0.5em;
+ font-size: x-large;
+}
+
+@media (max-width: 1100px) {
+ .start-box {
+ max-width: 90%;
+ }
+ .start-box input[type="text"] {
+ width: 90%;
+ }
+}
+
+@media (max-width: 900px) and (max-height: 700px), (max-height: 550px) {
+ h1 {
+ font-size: 3em;
+ font-weight: 700;
+ text-align: center;
+ }
+ .instructions {
+ font-size: large;
+ }
+ .start-box .description {
+ font-size: large;
+ }
+ #room-id-input {
+ padding: 0.5em;
+ font-size: large;
+ }
+ .start-box input[type="button"] {
+ font-size: large;
+ }
+}
diff --git a/client-web/public/assets/style/menu.css b/client-web/public/assets/style/menu.css
new file mode 100644
index 0000000..6f67af0
--- /dev/null
+++ b/client-web/public/assets/style/menu.css
@@ -0,0 +1,37 @@
+/*
+ This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
+ which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+ Copyright (C) 2022 metamuffin <metamuffin@disroot.org>
+*/
+
+.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;
+}
+
+.menu-br {
+ position: fixed;
+ bottom: 0px;
+ right: 0px;
+ display: block;
+ text-align: right;
+}
+.menu-br .version {
+ font-size: medium;
+ font-weight: bold;
+ 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
diff --git a/client-web/public/assets/style/room.css b/client-web/public/assets/style/room.css
new file mode 100644
index 0000000..1a82f0c
--- /dev/null
+++ b/client-web/public/assets/style/room.css
@@ -0,0 +1,78 @@
+/*
+ This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
+ which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+ Copyright (C) 2022 metamuffin <metamuffin@disroot.org>
+*/
+.room {
+ overflow-y: scroll;
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.user {
+ background-color: var(--bg);
+ border: 0px solid transparent;
+ border-radius: 5px;
+ padding: 1em;
+ margin: 0.5em;
+ vertical-align: top;
+ min-width: fit-content;
+ height: 13em;
+ display: inline-block;
+ position: relative;
+}
+
+.user .info .name {
+ font-weight: 400;
+}
+
+.user.local .info .name {
+ text-decoration: underline;
+}
+
+.user .info {
+ margin-bottom: 1em;
+}
+
+.user .resource {
+ display: inline-block;
+ vertical-align: top;
+}
+
+.media {
+ max-height: 9em;
+ border: 0px solid transparent;
+ border-radius: 5px;
+}
+
+.local-controls {
+ display: inline;
+}
+
+.local-controls::before {
+ content: "|";
+}
+
+.transfer-status {
+ background-color: #00000040;
+}
+
+.progress-bar {
+ z-index: -1;
+ padding: 0px;
+ margin: 0px;
+ height: 6px;
+ border-radius: 3px;
+ background-color: var(--ac-light);
+}
+
+
+.resource-track>div {
+ border: 2px solid transparent;
+ border-radius: 4px;
+}
+
+.resource-track>div.audio-active {
+ border: 2px solid var(--ac-light);
+}
generated by cgit v1.2.3-70-g09d2 (git 2.51.1) at 2025-10-31 06:18:11 +0000