lunaisnotaboy
/
watch-party
forked from lavender/watch-party
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Style tweaks: Chatbox contrast ratio, chatbox width 

This makes reading the chat a little more comfortable
main
Charlotte Som 2022-02-16 06:09:56 +00:00
parent ba24dbd0f7
commit 35329a9fbd
1 changed files with 5 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/styles.css
View File

@ -10,7 +10,7 @@
--bg: rgb(var(--bg-rgb)); --bg: rgb(var(--bg-rgb));
--default-user-color: rgb(126, 208, 255); --default-user-color: rgb(126, 208, 255);
--accent: rgb(var(--accent-rgb)); --accent: rgb(var(--accent-rgb));
--fg-transparent: rgba(var(--fg-rgb), 0.125); --fg-transparent: rgba(var(--fg-rgb), 0.033);
--bg-transparent: rgba(var(--bg-rgb), 0.125); --bg-transparent: rgba(var(--bg-rgb), 0.125);
--chat-bg: linear-gradient(var(--fg-transparent), var(--fg-transparent)), --chat-bg: linear-gradient(var(--fg-transparent), var(--fg-transparent)),
linear-gradient(var(--bg), var(--bg)); linear-gradient(var(--bg), var(--bg));
@ -217,14 +217,14 @@ button.small-button {
} }
#chatbox { #chatbox {
padding: 0.5em 0.5em; padding: 0.5em 1em;
overflow-y: scroll; overflow-y: scroll;
flex-shrink: 1; flex-shrink: 1;
flex-grow: 1; flex-grow: 1;
} }
#viewer-list { #viewer-list {
padding: 0.5em 0.5em; padding: 0.5em 1em;
/* TODO: turn this into max-height instead of fixed height without breaking the chatbox height */ /* TODO: turn this into max-height instead of fixed height without breaking the chatbox height */
overflow-y: scroll; overflow-y: scroll;
border-bottom: var(--fg); border-bottom: var(--fg);
@ -238,12 +238,12 @@ button.small-button {
flex-direction: column; flex-direction: column;
flex-grow: 0; flex-grow: 0;
flex-shrink: 1; flex-shrink: 1;
flex-basis: 400px; flex-basis: 55ch;
overflow: hidden; overflow: hidden;
} }
#chatbox-send { #chatbox-send {
padding: 0 0.5em; padding: 0 1em;
padding-bottom: 0.5em; padding-bottom: 0.5em;
position: relative; position: relative;
} }
@ -326,7 +326,6 @@ input[type="color"]::-webkit-color-swatch-wrapper {
} }
#chatbox-container { #chatbox-container {
width: 400px;
height: 100vh !important; height: 100vh !important;
} }