Overte-community-apps-Alezi.../applications/armored-chat/index.scss
Armored Dragon 12d0f4e78b
Erase history + Set maximum history length
Signed-off-by: Armored Dragon <publicmail@armoreddragon.com>
2024-03-17 04:03:22 -05:00

258 lines
4.2 KiB
SCSS

body {
background-color: black;
color: white;
margin: 0;
height: 100vh;
width: 100vw;
font-family: Verdana, Geneva, Tahoma, sans-serif;
display: flex;
flex-direction: column;
.header {
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
button {
width: 60px;
height: 100%;
border-radius: 0;
border: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
transition: width ease-in-out 0.2s;
}
button.active {
background-color: #6667ab;
color: white;
width: 100px;
}
.left {
margin: 0 auto 0 0;
}
.right {
margin: 0 0 0 auto;
}
}
.page {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow-y: auto;
width: 100%;
.content {
width: 100%;
background-color: #111;
flex-grow: 1;
}
.content.message-list {
overflow-y: auto;
overflow-x: hidden;
width: 100%;
.message:nth-child(even) {
background-color: #1a1a1a;
}
.message {
display: grid;
box-sizing: border-box;
grid-template-columns: 80px 5fr;
grid-gap: 0.75rem;
padding: 0.8rem 0.15rem;
width: 100%;
overflow-y: auto;
.pfp {
height: 30px;
width: auto;
display: flex;
img {
height: 100%;
width: auto;
margin: auto;
border-radius: 50px;
background-color: black;
}
}
.name {
font-size: 1.15rem;
color: #dbdbdb;
}
.body {
width: 100%;
word-wrap: anywhere;
overflow-x: hidden;
a {
color: white;
}
.image-container {
width: 100%;
max-width: 400px;
max-height: 300px;
img {
width: auto;
height: 100%;
}
}
}
.embeds {
width: 100%;
word-wrap: anywhere;
overflow-x: hidden;
overflow-x: hidden;
a {
color: white;
}
.image-container {
width: 100%;
max-width: 400px;
max-height: 300px;
img {
max-width: 400px;
max-height: 300px;
}
}
}
.timestamp {
text-align: center;
color: #dbdbdb;
}
}
}
.content.settings {
.setting {
width: 100%;
display: flex;
padding: 0.5rem 0.25rem;
box-sizing: border-box;
input{
margin: auto 0 auto auto;
height: 20px;
}
}
.setting-button{
input {
width: 100px;
}
}
.setting-value{
input {
width: 70px;
}
}
.setting-toggle {
input {
width: 20px;
}
}
.setting:nth-child(even) {
background-color: #1a1a1a;
}
}
}
.footer {
width: 100%;
height: 40px;
}
.footer.text-entry {
display: Flex;
flex-direction: row;
input {
flex-grow: 1;
margin-right: 0;
border: 0;
font-size: 1.3rem;
min-width: 0;
}
button {
width: 75px;
border: 0;
border-radius: 0;
}
}
.hidden {
display: none !important;
}
}
button {
width: 100px;
height: 100%;
background-color: white;
border-radius: 2px;
border: 0;
cursor: pointer;
outline: none;
span {
width: 100%;
height: 100%;
img {
max-height: 70%;
width: auto;
user-select: none;
-webkit-user-drag: none;
}
}
}
button:focus {
filter: brightness(50%);
}
input {
outline: none;
}
input:focus {
background-color: lightgray;
}
@media screen and (max-width: 400px) {
body {
.header {
height: 30px;
button {
width: 50px;
}
}
.page {
.content.message-list {
.message {
grid-template-columns: 80px 5fr;
grid-gap: 0.75rem;
padding: 0.8rem 0.15rem;
.pfp {
height: 30px;
}
}
}
}
}
}