diff options
| author | metamuffin <metamuffin@disroot.org> | 2023-06-24 23:20:47 +0200 | 
|---|---|---|
| committer | metamuffin <metamuffin@disroot.org> | 2023-06-24 23:20:47 +0200 | 
| commit | 1a0e378ab04fb0b0a88dc3d2d91487117904ff1e (patch) | |
| tree | a276f669f0ce42407729f5904d9ad09705892ac1 /client-web/public | |
| parent | 2c5e565a613e5d235113b39647a54a6b90388136 (diff) | |
| download | keks-meet-1a0e378ab04fb0b0a88dc3d2d91487117904ff1e.tar keks-meet-1a0e378ab04fb0b0a88dc3d2d91487117904ff1e.tar.bz2 keks-meet-1a0e378ab04fb0b0a88dc3d2d91487117904ff1e.tar.zst | |
sass
Diffstat (limited to 'client-web/public')
| -rw-r--r-- | client-web/public/app.html | 2 | ||||
| -rw-r--r-- | client-web/public/assets/style/chat.css | 46 | ||||
| -rw-r--r-- | client-web/public/assets/style/logger.css | 61 | ||||
| -rw-r--r-- | client-web/public/assets/style/master.css | 168 | ||||
| -rw-r--r-- | client-web/public/assets/style/menu.css | 32 | ||||
| -rw-r--r-- | client-web/public/assets/style/prefs.css | 21 | ||||
| -rw-r--r-- | client-web/public/assets/style/room.css | 75 | ||||
| -rw-r--r-- | client-web/public/assets/tile-backdrop.svg (renamed from client-web/public/assets/style/tile-backdrop.svg) | 0 | ||||
| -rw-r--r-- | client-web/public/start.html | 19 | 
9 files changed, 14 insertions, 410 deletions
| diff --git a/client-web/public/app.html b/client-web/public/app.html index 66062d9..a6dc852 100644 --- a/client-web/public/app.html +++ b/client-web/public/app.html @@ -8,7 +8,7 @@              content="A simple secure web conferencing application using webrtc"          />          <script async type="module" src="/assets/bundle.js"></script> -        <link rel="stylesheet" href="/assets/style/master.css" /> +        <link rel="stylesheet" href="/style.css" />          <title>keks-meet</title>      </head>      <body> diff --git a/client-web/public/assets/style/chat.css b/client-web/public/assets/style/chat.css deleted file mode 100644 index b4e1dbf..0000000 --- a/client-web/public/assets/style/chat.css +++ /dev/null @@ -1,46 +0,0 @@ -/* -    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> -*/ -.chat { -    position: fixed; -    z-index: 70; - -    right: 1em; -    bottom: 5em; - -    width: min(30em, 50vw); -    height: min(50em, 70vh); - -    background-color: var(--bg); -    border-radius: 1em; -    padding: 2em; -} - -.chat .message { -    margin: 0.2em; -} -.chat .author { -    font-weight: bold; -} -.chat .text { -    color: white; -} -.chat .image { -    width: min(20em, 30vw); -    max-height: 50em; /* TODO squishes the image if too high */ -} - -.chat .messages { -    height: calc(100% - 3em); -    width: 100%; -    overflow: scroll; -} -.chat .controls { -    padding: 1em; -} -.chat input { -    font-size: x-large; -    width: 100%; -} diff --git a/client-web/public/assets/style/logger.css b/client-web/public/assets/style/logger.css deleted file mode 100644 index 5e08ec9..0000000 --- a/client-web/public/assets/style/logger.css +++ /dev/null @@ -1,61 +0,0 @@ -/* -    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> -*/ -.logger-container { -    position: absolute; -    top: 0px; -    right: 0px; -    transition: width 1s; - -    background-color: rgba(0, 0, 0, 0.376); -    border-radius: 0.2em; -    border: 0px solid transparent; -    padding: 0.2em; -} - -.logger-error { -    font-size: 1.5em !important; -    color: red; -} -.logger-warn { -    font-size: 1.5em !important; -    color: yellow; -} - -.logger-line { -    font-size: 1em; -    height: 1.2em; -    font-family: monospace; -    animation-name: appear; -    animation-timing-function: linear; -    animation-duration: 0.3s; -    animation-fill-mode: forwards; -} -.logger-line-disappear { -    animation-name: disappear; -    animation-timing-function: linear; -    animation-duration: 1s; -    animation-fill-mode: forwards; -} - -@keyframes appear { -    from { -        margin-top: -1.2em; -        opacity: 0; -    } -    to { -        opacity: 1; -    } -} - -@keyframes disappear { -    from { -        opacity: 1; -    } -    to { -        margin-top: -1.2em; -        opacity: 0; -    } -} diff --git a/client-web/public/assets/style/master.css b/client-web/public/assets/style/master.css deleted file mode 100644 index d4cdac8..0000000 --- a/client-web/public/assets/style/master.css +++ /dev/null @@ -1,168 +0,0 @@ -/* -    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); -    height: 100vh; -    width: 100vw; -    justify-content: left; -} - -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 { -    padding: 0.5em; -    margin: 0.25em; -    background-color: var(--ac); -    border: 0px solid transparent; -    border-radius: 3px; -} - -input[type="button"]:hover, -button:hover { -    filter: brightness(130%); -} - -input[type="button"].active, -button.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 { -    filter: sepia(90%); -} - -.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; -} - -#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 deleted file mode 100644 index 73f7125..0000000 --- a/client-web/public/assets/style/menu.css +++ /dev/null @@ -1,32 +0,0 @@ -/* -    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> -*/ - - -.bottom-menu { -    background-color: var(--bg); -    padding: 0.5em; -    position: fixed; -    bottom: 0.5em; -    border: 0px solid transparent; -    border-radius: 5px; -    left: 50%; -    transform: translateX(-50%); -    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; -} diff --git a/client-web/public/assets/style/prefs.css b/client-web/public/assets/style/prefs.css deleted file mode 100644 index f31c4ca..0000000 --- a/client-web/public/assets/style/prefs.css +++ /dev/null @@ -1,21 +0,0 @@ -/* -    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> -*/ -.prefs-overlay { -    position: fixed; -    z-index: 80; - -    left: 50%; -    bottom: 5em; -    transform: translateX(-50%); - -    width: min(50em, 80vw); -    height: min(40em, 60vh); - -    background-color: var(--bg); -    border-radius: 1em; -    padding: 2em; -    overflow-y: auto; -} diff --git a/client-web/public/assets/style/room.css b/client-web/public/assets/style/room.css deleted file mode 100644 index ad84325..0000000 --- a/client-web/public/assets/style/room.css +++ /dev/null @@ -1,75 +0,0 @@ -/* -    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; -} - -.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); -} diff --git a/client-web/public/assets/style/tile-backdrop.svg b/client-web/public/assets/tile-backdrop.svg index 15ea791..15ea791 100644 --- a/client-web/public/assets/style/tile-backdrop.svg +++ b/client-web/public/assets/tile-backdrop.svg diff --git a/client-web/public/start.html b/client-web/public/start.html index 42c8799..e15fc47 100644 --- a/client-web/public/start.html +++ b/client-web/public/start.html @@ -3,15 +3,20 @@      <head>          <meta charset="UTF-8" />          <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -        <meta name="description" content="A simple secure web conferencing application using webrtc"> -        <link rel="stylesheet" href="/assets/style/master.css" /> +        <meta +            name="description" +            content="A simple secure web conferencing application using webrtc" +        /> +        <link rel="stylesheet" href="/style.css" />          <title>keks-meet</title>      </head>      <body class="start">          <div class="start-box">              <h1>keks-meet</h1> -            <p class="description">A simple secure conferencing application using webrtc</p> -            <br> +            <p class="description"> +                A simple secure conferencing application using webrtc +            </p> +            <br />              <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 @@ -28,7 +33,9 @@              </noscript>              <script>                  function random_room() { -                    const random = window.crypto.getRandomValues(new Uint8Array(32)); +                    const random = window.crypto.getRandomValues( +                        new Uint8Array(32) +                    );                      return Array.from(random)                          .map((b) => b.toString(16).padStart(2, "0"))                          .join(""); @@ -38,7 +45,7 @@                  room_input.type = "text";                  room_input.id = "room-id-input";                  room_input.placeholder = `Override room name: ${random_room()}`; -                room_input.ariaLabel = "Room Secret" +                room_input.ariaLabel = "Room Secret";                  const submit = document.createElement("input");                  submit.type = "button"; | 
