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

Rework media queries for background image

Browse Source
This commit is contained in:
Lorenz Stechauner
2022-08-28 12:31:19 +02:00
parent 753ecec0b6
commit 7eb6d6a75f
1 changed files with 41 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,31 +18,21 @@ noscript {
body { body {
margin: 0; margin: 0;
min-height: calc(var(--vh, 1vh) * 100); min-height: calc(var(--vh, 1vh) * 100);
background-image: url("/res/images/background.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
} }
div#wrapper { #wrapper {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
padding: 1em; padding: 1em;
height: calc(var(--vh, 1vh) * 100 - var(--footer-height)); height: calc(var(--vh, 1vh) * 100 - var(--footer-height));
} }
@media screen and (max-width: 600px) {
div#wrapper {
height: calc(var(--vh, 1vh) * 100);
}
}
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: #000000; color: #000000;
font-weight: normal; font-weight: normal;
} }
div#windows { #windows {
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -52,7 +42,7 @@ div#windows {
left: 0; left: 0;
} }
div#windows > *, #windows > *,
main { main {
border: 1px solid var(--bg-win); border: 1px solid var(--bg-win);
background: var(--bg-win); background: var(--bg-win);
@ -66,8 +56,7 @@ main {
margin: 0 auto; margin: 0 auto;
} }
div#windows > * { #windows > * {
backdrop-filter: blur(32px);
padding: 0.5em 1em; padding: 0.5em 1em;
} }
@ -88,22 +77,12 @@ footer {
border-top: 1px solid var(--bg-win); border-top: 1px solid var(--bg-win);
background: var(--bg-win); background: var(--bg-win);
height: var(--footer-height); height: var(--footer-height);
backdrop-filter: blur(32px);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
} }
@media screen and (max-width: 600px) {
footer {
flex-direction: column;
}
html {
--footer-height: 4em;
}
}
footer div { footer div {
font-size: 0.75em; font-size: 0.75em;
display: inline; display: inline;
@ -199,7 +178,6 @@ main .chat-history {
height: calc(100% - 3em); height: calc(100% - 3em);
overflow-y: scroll; overflow-y: scroll;
box-sizing: border-box; box-sizing: border-box;
backdrop-filter: blur(4px);
} }
main .chat-input-wrapper { main .chat-input-wrapper {
@ -208,7 +186,6 @@ main .chat-input-wrapper {
border-top: 1px solid var(--bg-win); border-top: 1px solid var(--bg-win);
padding: 0.5em 1em; padding: 0.5em 1em;
box-sizing: border-box; box-sizing: border-box;
backdrop-filter: blur(32px);
} }
main .chat-input-wrapper input { main .chat-input-wrapper input {
@ -254,3 +231,40 @@ main .chat ::-webkit-scrollbar-thumb {
main .chat ::-webkit-scrollbar-thumb:hover { main .chat ::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.75); background-color: rgba(255, 255, 255, 0.75);
} }
@media screen and (min-width: 100px) {
body {
background-image: url("/res/images/background.jpg");
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
#windows > * {
backdrop-filter: blur(32px);
}
footer {
backdrop-filter: blur(32px);
}
main .chat-input-wrapper {
backdrop-filter: blur(32px);
}
main .chat-history {
backdrop-filter: blur(4px);
}
}
@media screen and (max-width: 600px) {
#wrapper {
height: calc(var(--vh, 1vh) * 100);
padding: 0;
}
#windows {
padding: 0;
}
footer {
flex-direction: column;
}
html {
--footer-height: 4em;
}
}