butter/keanu-weblite
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Support chat backgrounds

Browse source
This commit is contained in:
N Pex 2023-10-18 15:05:50 +00:00
parent ea8522d8a3
commit 4e9aecc304
4 changed files with 97 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

80
src/assets/css/chat.scss
View file

@ -8,7 +8,7 @@ $admin-fg: white;
body {
--v-app-background: $app-background;
--v-background-color: white;
--v-background-color: rgba(255, 255, 255, 0.8);
--v-foreground-color: black;
--v-secondary-color: #242424;
--v-divider-color: #eeeeee;
@ -233,20 +233,15 @@ body {
}
}
.input-area {
background-color: #e2e2e2;
margin: 0;
padding-left: $chat-standard-padding-s;
padding-right: $chat-standard-padding-s;
}
.input-area-outer {
position: relative;
background-color: #ffffff;
background-color: var(--v-background-color);
margin: 0;
margin-bottom: -10px;
padding-left: 2 * $chat-standard-padding-s;
padding-right: 2 * $chat-standard-padding-s;
padding-top: 0;
padding-bottom: 10px;
&.reply-to {
padding: 0;
@ -283,9 +278,9 @@ body {
background-color: white;
border: 1px solid #d4d4d4;
border-radius: 32px;
margin-bottom: 10px;
@media #{map-get($display-breakpoints, 'sm-and-down')} {
margin-bottom: 2px;
margin-bottom: 12px;
}
}
.input-area-button {
@ -423,7 +418,7 @@ body {
}
position: relative;
.bubble {
background-color: #ededed;
background-color: rgba(#ededed,0.8);
border-radius: 0px 10px 10px 10px;
[dir="rtl"] & {
border-radius: 10px 0px 10px 0px;
@ -437,7 +432,7 @@ body {
max-width: 70%;
}
&.from-admin .bubble {
background-color: $admin-bg;
background-color: rgba($admin-bg,0.8);
}
.audio-bubble {
width: 70%;
@ -516,7 +511,7 @@ body {
}
position: relative;
.bubble {
background-color: #e5e5e5;
background-color: rgba(#e5e5e5,0.8);
border-radius: 10px 10px 0 10px;
[dir="rtl"] & {
border-radius: 10px 10px 10px 0px;
@ -527,7 +522,7 @@ body {
max-width: 70%;
}
.audio-bubble {
background-color: #e5e5e5;
background-color: rgba(#e5e5e5,0.8);
border-radius: 10px 10px 0 10px;
[dir="rtl"] & {
border-radius: 10px 10px 10px 0px;
@ -539,13 +534,6 @@ body {
width: 70%;
height: 50px;
}
.video2-bubble {
background-color: #e5e5e5;
border-radius: 10px 10px 0 10px;
[dir="rtl"] & {
border-radius: 10px 10px 10px 0px;
}
}
.bubble.image-bubble {
padding: 0px;
display: inline-block;
@ -824,11 +812,8 @@ body {
.read-marker {
margin-left: 20px;
margin-right: 20px;
height: 1px;
width: calc(100% - 40px);
line-height: var(--v-theme-title-featured-line-height);
position: absolute;
bottom: 0;
font-family: sans-serif;
font-style: normal;
font-weight: normal;
@ -837,19 +822,18 @@ body {
/* identical to box height, or 14px */
letter-spacing: 0.29px;
color: #c0c0c0;
background-color: #c0c0c0;
text-align: center;
&::after {
position: absolute;
top: -4px;
background: white;
transform: translate(-50%, 0);
[dir="rtl"] & {
transform: translate(50%, 0);
}
padding-left: 4px;
padding-right: 4px;
content: attr(title);
display: flex;
align-items: center;
& div.text {
flex: 0 0 auto;
padding-left: 10px;
padding-right: 10px;
}
& div.line {
background: #c0c0c0;
height: 1px;
flex: 1 1 auto;
}
}
@ -858,7 +842,6 @@ body {
margin-right: 20px;
margin-top: 20px;
margin-bottom: 20px;
height: 1px;
line-height: var(--v-theme-title-featured-line-height);
font-family: sans-serif;
font-style: normal;
@ -868,20 +851,17 @@ body {
/* identical to box height, or 14px */
letter-spacing: 0.29px;
color: black;
background-color: black;
text-align: center;
position: relative;
&::after {
position: absolute;
top: -8px;
background: white;
transform: translate(-50%, 0);
[dir="rtl"] & {
transform: translate(50%, 0);
}
display: flex;
align-items: center;
& div.text {
flex: 0 0 auto;
padding-left: 10px;
padding-right: 10px;
content: attr(title);
}
& div.line {
background: black;
height: 1px;
flex: 1 1 auto;
}
}