Locutus/locutus
2
1
Fork 0
Code Issues Pull Requests Projects Releases Activity

Refactored base structure

Browse Source
This commit is contained in:
Lorenz Stechauner
2021-05-24 00:58:17 +02:00
parent eacddc0667
commit 0601f52661
7 changed files with 486 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
www/res/styles/styles.css
View File

@ -24,17 +24,10 @@ body {
background-size: cover;
}
main {
max-width: 800px;
height: calc(100% - 2em);
padding: 1em;
box-sizing: border-box;
margin: 0 auto;
}
div#wrapper {
box-sizing: border-box;
width: 100%;
padding: 1em;
height: calc(100vh - var(--footer-height));
}
@ -59,23 +52,33 @@ div#windows {
left: 0;
}
div#windows > * {
div#windows > *,
main {
backdrop-filter: blur(32px);
border: 1px solid var(--bg-win);
background: var(--bg-win);
border-radius: 4px;
padding: 0.5em 1em;
box-sizing: border-box;
}
div#login-win,
div#welcome-win {
main {
max-width: 800px;
height: 100%;
margin: 0 auto;
}
div#windows > * {
padding: 0.5em 1em;
}
div.window-login,
div.window-welcome {
max-width: 650px;
margin: calc(max(25vh, 8em) - 8em) auto 1em auto;
}
div#login-win h1,
div#welcome-win h1 {
div.window-login h1,
div.window-welcome h1 {
text-align: center;
font-size: 1.5rem;
}
@ -186,3 +189,44 @@ form button:active,
a.button:active {
background-color: rgba(224, 224, 224, 0.75);
}
main .chat {
height: 100%;
box-sizing: border-box;
}
main .chat-history {
height: calc(100% - 3em);
overflow-y: scroll;
box-sizing: border-box;
}
main .chat-input-wrapper {
width: 100%;
height: 3em;
border-top: 1px solid var(--bg-win);
padding: 0.5em 1em;
box-sizing: border-box;
}
main .chat-input-wrapper input {
background-color: rgba(0,0,0,0);
border: 1px solid var(--bg-win);
border-radius: 4px;
width: 100%;
height: 100%;
box-sizing: border-box;
outline: none;
padding: 0.25em 1em;
}
main .chat .message {
margin: 1em;
border: 1px solid var(--bg-win);
border-radius: 4px;
padding: 0.5em 1em;
display: block;
width: fit-content;
width: -moz-fit-content;
background-color: var(--bg);
}