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

merged branch main into '133-header-hides-and-gets-stuck' and conflit fixes

Browse source
This commit is contained in:
Tenzin Passang 2021-11-21 21:39:08 +02:00
commit fdc61ac798
76 changed files with 8163 additions and 19011 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,6 +3,27 @@
$admin-bg: black;
$admin-fg: white;
.home {
.v-card {
background-color: white;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25) !important;
border-radius: 18px;
padding-bottom: 10px;
.v-item-group > div:not(:last-of-type):after {
/* divider */
position: absolute;
content: " ";
display: block;
bottom: 0px;
height: 1px;
left: 0px;
right: 0px;
min-height: 1px;
background-color: #e1e1e1;
}
}
}
.chat-header {
margin: 0;
padding: 0;
@ -52,6 +73,7 @@ $admin-fg: white;
position: absolute;
top: 10px;
left: 40px;
right: initial;
color: white;
background-color: black;
font-size: 10px;
@ -62,6 +84,10 @@ $admin-fg: white;
text-align: center;
padding-left: 4px;
padding-right: 4px;
[dir="rtl"] & {
right: 40px;
left: initial;
}
}
.chat-root {
@ -140,6 +166,9 @@ $admin-fg: white;
overflow-x: hidden;
overflow-y: auto;
padding: 0 0 0px 20px;
[dir="rtl"] & {
padding: 0 20px 0px 0px;
}
margin: 6px 0;
font-family: "Inter", sans-serif;
font-weight: 300;
@ -183,14 +212,20 @@ $admin-fg: white;
.messageIn {
margin: 8px;
text-align: left;
[dir="rtl"] & {
text-align: right;
}
position: relative;
.bubble {
background-color: #eeeeee;
background-color: #ededed;
border-radius: 0px 10px 10px 10px;
[dir="rtl"] & {
border-radius: 10px 0px 10px 0px;
}
padding: 8px;
border-width: 1px !important;
border-style: solid !important;
border-color: #eeeeee !important;
border-color: #ededed !important;
display: inline-block;
position: relative;
max-width: 70%;
@ -222,6 +257,10 @@ $admin-fg: white;
display: inline-block;
vertical-align: top !important;
margin-right: 10px;
[dir="rtl"] & {
margin-right: initial;
margin-left: 10px;
}
top: 0;
border: 2px solid white;
}
@ -236,6 +275,10 @@ $admin-fg: white;
color: rgba(#000000, 0.6);
margin-left: 40px;
margin-right: 8px;
[dir="rtl"] & {
margin-left: 8px;
margin-right: 40px;
}
display: inline-block;
}
.time {
@ -254,10 +297,16 @@ $admin-fg: white;
.messageOut {
margin: 8px;
text-align: right;
[dir="rtl"] & {
text-align: left;
}
position: relative;
.bubble {
background-color: #e5e5e5;
border-radius: 10px 10px 0 10px;
[dir="rtl"] & {
border-radius: 10px 10px 10px 0px;
}
padding: 8px;
display: inline-block;
position: relative;
@ -266,6 +315,9 @@ $admin-fg: white;
.audio-bubble {
background-color: #e5e5e5;
border-radius: 10px 10px 0 10px;
[dir="rtl"] & {
border-radius: 10px 10px 10px 0px;
}
padding: 8px;
display: inline-block;
position: relative;
@ -276,6 +328,9 @@ $admin-fg: white;
.video2-bubble {
background-color: #e5e5e5;
border-radius: 10px 10px 0 10px;
[dir="rtl"] & {
border-radius: 10px 10px 10px 0px;
}
}
.bubble.image-bubble {
padding: 0px;
@ -285,6 +340,9 @@ $admin-fg: white;
.v-image,
video {
border-radius: 10px 10px 0 10px;
[dir="rtl"] & {
border-radius: 10px 10px 10px 0px;
}
}
}
.bubble.sticker-bubble {
@ -298,6 +356,10 @@ $admin-fg: white;
display: inline-block;
vertical-align: bottom !important;
margin-left: 10px;
[dir="rtl"] & {
margin-left: initial;
margin-right: 10px;
}
bottom: 0;
border: 2px solid white;
}
@ -313,6 +375,10 @@ $admin-fg: white;
display: inline-block;
margin-left: 40px;
margin-right: 8px;
[dir="rtl"] & {
margin-left: 8px;
margin-right: 40px;
}
}
.time {
font-family: "Inter", sans-serif;
@ -402,6 +468,19 @@ $admin-fg: white;
user-select: text;
}
.notice {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 15 * $chat-text-size;
background-color: #090909;
color: white;
text-align: start;
margin: 20px;
user-select: text;
padding: 16px;
border-radius: 20px;
}
.audio-player {
width: 100%;
position: absolute;
@ -440,6 +519,7 @@ $admin-fg: white;
.avatar-operations-strut {
position: relative;
height: 0px;
z-index: 1;
}
@ -447,9 +527,9 @@ $admin-fg: white;
position: absolute;
width: fit-content;
background-color: white;
height: 40px;
border-radius: 20px;
box-shadow: 4px 4px 8px #888888;
height: 44px;
border-radius: 22px;
box-shadow: 4px 4px 8px rgba(0,0,0,0.15);
// &.incoming {
// right: 30%;
// }
@ -466,7 +546,7 @@ $admin-fg: white;
height: 40px;
border-radius: 20px;
padding: 0px 20px;
box-shadow: 4px 4px 8px #888888;
box-shadow: 4px 4px 8px rgba(0,0,0,0.15);
}
.message-operations-picker {
@ -476,19 +556,19 @@ $admin-fg: white;
.quick-reaction-container {
display: inline-block;
position: absolute;
top: -12px;
left: 50px;
position: relative;
vertical-align: bottom;
transform: translateX(-20px) translateX(-100%);
top: 18px;
z-index: 2;
background-color: #000000;
border: 2px solid white;
background-color: #f7f7f7;
border: 1px solid rgba(white, 0.9);
border-radius: 13px;
height: 26px;
width: max-content;
padding: 0px 6px;
.messageOut & {
left: unset;
right: 50px;
transform: translateX(20px) translateX(100%);
}
.quick-reaction {
position: relative;
@ -497,7 +577,7 @@ $admin-fg: white;
padding: 1px;
font-size: 10px;
&:hover {
border: 1px solid #888888;
//border: 1px solid #888888;
background-color: #e2e2e2;
}
.quick-reaction-count {
@ -506,7 +586,7 @@ $admin-fg: white;
}
}
.sent .quick-reaction-count {
color: white;
color: black;
font-weight: 700;
// background-color: palegreen;
}
@ -568,6 +648,9 @@ $admin-fg: white;
top: -4px;
background: white;
transform: translate(-50%, 0);
[dir="rtl"] & {
transform: translate(50%, 0);
}
padding-left: 4px;
padding-right: 4px;
content: attr(title);
@ -597,6 +680,9 @@ $admin-fg: white;
top: -8px;
background: white;
transform: translate(-50%, 0);
[dir="rtl"] & {
transform: translate(50%, 0);
}
padding-left: 10px;
padding-right: 10px;
content: attr(title);
@ -604,7 +690,7 @@ $admin-fg: white;
}
.room-info {
background-color: #e0e0e0;
background-color: #e8e8e8;
height: 100%;
.chat-header {
background-color: transparent;
@ -686,6 +772,11 @@ $admin-fg: white;
font-size: 14 * $chat-text-size;
font-weight: bold;
margin-left: 10px;
[dir="rtl"] & {
margin-left: initial;
margin-right: 10px;
}
text-decoration: underline;
}
}
@ -697,12 +788,24 @@ $admin-fg: white;
margin: 10px 0px;
font-weight: bold;
font-size: 12 * $chat-text-size;
[dir="rtl"] & {
right: 0px;
left: unset;
.v-icon {
// Mirror the icon
transform: scale(-1, 1);
}
}
}
.header-button-right {
position: absolute;
top: 0px;
right: 0px;
[dir="rtl"] & {
left: 0px;
right: unset;
}
margin: 10px 0px;
font-weight: bold;
font-size: 12 * $chat-text-size;
@ -731,6 +834,10 @@ $admin-fg: white;
font-size: 14 * $chat-text-size;
font-weight: bold;
margin-left: 10px;
[dir="rtl"] & {
margin-left: initial;
margin-right: 10px;
}
}
}
@ -871,7 +978,7 @@ $admin-fg: white;
}
.created-room-welcome-header {
background-color: #e0e0e0;
background-color: #f5f5f5;
border-radius: 25px;
margin: 20px;
padding: 20px;
@ -883,7 +990,7 @@ $admin-fg: white;
left: 20%;
right: 20%;
background-color: #888888;
height: 50px;
height: 40px;
border-radius: 25px;
color: white;
text-align: center;
@ -891,12 +998,40 @@ $admin-fg: white;
padding-top: 10px;
}
.avatar-22 {
font-size: 14 * $chat-text-size !important;
}
.avatar-32 {
font-size: 18 * $chat-text-size !important;
&.clickable {
cursor: pointer;
&:hover {
opacity: 0.7;
}
}
.avatar-48 {
font-size: 27 * $chat-text-size !important;
}
.avatar-32.clickable,
.avatar-48.clickable,
.clickable {
cursor: pointer;
&:hover {
opacity: 0.7;
}
}
}
.new-room {
font-family: "Inter", sans-serif;
font-size: 16px !important;
font-weight: 600 !important;
text-decoration: underline;
color: black;
&::after {
content: "\00a0\00a0>";
display: inline-block;
text-decoration: none !important;
}
}
.recent-emoji {
color: black;
}

54
src/assets/css/main.scss
View file

@ -1,7 +1,54 @@
$background: #ffffff;
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
@font-face {
font-family: "Inter";
src: url("~@/assets/fonts/inter/Inter-Light.ttf") format("truetype");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "Inter";
src: url("~@/assets/fonts/inter/Inter-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Inter";
src: url("~@/assets/fonts/inter/Inter-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Poppins";
src: url("~@/assets/fonts/poppins/Poppins-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Poppins";
src: url("~@/assets/fonts/poppins/Poppins-SemiBold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "Poppins";
src: url("~@/assets/fonts/poppins/Poppins-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Poppins";
src: url("~@/assets/fonts/poppins/Poppins-ExtraBold.ttf") format("truetype");
font-weight: 800;
font-style: normal;
}
$chat-background: $background;
$chat-standard-padding: 32px;
@ -78,7 +125,8 @@ body { position:absolute; top:0; bottom:0; right:0; left:0; }
color: white;
border: none;
border-radius: $chat-standard-padding / 2;
height: $chat-standard-padding;
height: $chat-standard-padding !important;
min-height: $chat-standard-padding !important;
margin-top: $chat-standard-padding-xs;
margin-bottom: $chat-standard-padding-xs;
}