164 lines
3.3 KiB
CSS
164 lines
3.3 KiB
CSS
/* src/base.css */
|
|
#home-page {
|
|
--background-transparent: hsla(0, 0%, 100%, 40%);
|
|
--surface: hsla(0, 0%, 100%, 40%);
|
|
--surface-hover: hsla(0, 0%, 91%, 40%);
|
|
--surface-active: hsla(0, 0%, 78%, 40%);
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
#home-page {
|
|
--background-transparent: hsla(0, 0%, 5%, 30%);
|
|
--surface: hsla(0, 0%, 5%, 30%);
|
|
--surface-hover: hsla(0, 0%, 20%, 30%);
|
|
--surface-active: hsla(0, 0%, 44%, 30%);
|
|
}
|
|
}
|
|
#background {
|
|
position: fixed;
|
|
top: -120px;
|
|
left: -120px;
|
|
right: -120px;
|
|
bottom: -120px;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
filter: blur(60px);
|
|
opacity: 0.4;
|
|
}
|
|
#background::after,
|
|
#background::before {
|
|
content: "";
|
|
position: fixed;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
#background {
|
|
background-image:
|
|
linear-gradient(
|
|
120deg,
|
|
hsla(210, 100%, 50%, 25%),
|
|
hsla(210, 100%, 50%, 15%),
|
|
transparent 70%);
|
|
}
|
|
}
|
|
@media (prefers-color-scheme: light) {
|
|
#background {
|
|
background-image:
|
|
linear-gradient(
|
|
120deg,
|
|
hsla(210, 100%, 50%, 25%),
|
|
hsla(210, 100%, 50%, 15%));
|
|
}
|
|
#background::before {
|
|
top: -150%;
|
|
left: -50%;
|
|
right: -500%;
|
|
bottom: -50%;
|
|
background-image:
|
|
radial-gradient(
|
|
transparent 60%,
|
|
hsla(110, 100%, 40%, 20%) 60%,
|
|
hsla(110, 100%, 20%, 40%));
|
|
}
|
|
#background::after {
|
|
top: -300%;
|
|
left: -50%;
|
|
right: -400%;
|
|
bottom: -50%;
|
|
background-image:
|
|
radial-gradient(
|
|
transparent 70%,
|
|
hsla(110, 100%, 30%, 30%) 70%,
|
|
hsla(110, 100%, 30%, 40%));
|
|
}
|
|
}
|
|
|
|
/* src/View/chatPage.css */
|
|
#chat-page-wrapper {
|
|
display: none;
|
|
}
|
|
#chat-page-wrapper[open] {
|
|
display: flex;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
background-color: var(--background);
|
|
}
|
|
|
|
/* src/View/homePage.css */
|
|
#home-page > div {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: var(--large-gap);
|
|
scroll-snap-type: x mandatory;
|
|
scroll-behavior: smooth;
|
|
overflow: hidden;
|
|
overflow-x: scroll;
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
}
|
|
#home-page > div > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: start;
|
|
gap: var(--gap-between-tiles);
|
|
padding: var(--content-padding);
|
|
width: 100%;
|
|
min-width: 100%;
|
|
height: 100%;
|
|
overflow: scroll;
|
|
scroll-snap-align: center;
|
|
}
|
|
#home-page #chat-grid {
|
|
margin-top: var(--content-padding);
|
|
display: grid;
|
|
gap: var(--gap-between-tiles);
|
|
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
|
|
}
|
|
@media (min-width: 640px) {
|
|
#home-page #overview-section {
|
|
width: 20rem;
|
|
min-width: 20rem;
|
|
}
|
|
#home-page #chat-section {
|
|
flex: 1;
|
|
min-width: unset;
|
|
}
|
|
}
|
|
@media (min-width: 1200px) {
|
|
#home-page > div {
|
|
gap: 8rem;
|
|
}
|
|
#home-page #chat-grid {
|
|
margin-top: 3rem;
|
|
}
|
|
#home-page #overview-section {
|
|
width: var(--max-input-width);
|
|
min-width: var(--max-input-width);
|
|
}
|
|
}
|
|
|
|
/* src/View/Components/chatEntry.css */
|
|
.chat-entry {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-end !important;
|
|
justify-content: start;
|
|
height: 8rem;
|
|
overflow: hidden;
|
|
}
|
|
.chat-entry h2 {
|
|
margin: 0px;
|
|
}
|
|
.chat-entry .shadow {
|
|
position: absolute;
|
|
left: -15px;
|
|
bottom: -45px;
|
|
font-size: 6rem;
|
|
opacity: 0.1;
|
|
white-space: nowrap;
|
|
}
|