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

Join page new design implemented

Browse source
This commit is contained in:
Tenzin Passang 2021-12-19 16:04:19 +02:00 • committed by N-Pex
parent 70270f450c
commit 7224b20cab
18 changed files with 403 additions and 254 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/assets/css/_variables.scss
View file

@ -1,12 +1,13 @@
$font-family: "Poppins";
$background: #ffffff;
$app-background: #f6f6f6;
$main-desktop-width: 900px;
$dialog-desktop-width: 940px;
$very-very-purple: #536dfe;
$chat-background: $background;
$chat-standard-padding: 32px;
$chat-standard-padding-s: 16px;
$chat-standard-padding-xs: 8px;
$chat-text-size: 1.0px;
$chat-text-size: 1px;
$chat-button-height: 50px;

192
src/assets/css/join.scss
View file

@ -1,3 +1,4 @@
@import "~vuetify/src/styles/settings/_variables.scss";
@import "@/assets/css/main.scss";
.v-btn.btn-light {
@ -28,94 +29,127 @@
margin-bottom: $chat-standard-padding-xs;
}
.join-root {
margin-top: 10%;
padding: 40px;
.join-room {
.join-enter-room {
margin-top: 10px;
padding: 40px;
border-radius: 18px;
background: white;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
.btn-login {
position: absolute;
top: 0;
right: 0;
margin: 20px;
.join-user-info {
display: flex;
flex-wrap: nowrap;
max-width: 500px;
}
@media #{map-get($display-breakpoints, 'sm-and-down')} {
padding: 20px;
}
}
.join-user-info {
display: flex;
flex-wrap: nowrap;
max-width: 500px;
.join-lang {
text-align: center;
margin-top: 2%;
padding: 20px;
border-radius: 18px;
background: white;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
.active {
color: $very-very-purple;
font-weight: bold;
}
.language-more {
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
border-radius: 18px;
border: 1px solid black;
padding: 0px 5px !important;
box-shadow: 0px 4px 4px 0px #00000040;
background-color: #FFFFFF !important;
&:hover {
background-color: black !important;
color: white;
}
}
}
}
.join-avatar {
background-color: #ededed;
width: 100px !important;
height: 100px !important;
margin-bottom: 40px;
}
.join-avatar {
background-color: #ededed;
width: 100px !important;
height: 100px !important;
margin-bottom: 40px;
}
.join-title {
font-family: "Poppins", sans-serif;
font-style: normal;
font-weight: 800;
font-size: 40 * $chat-text-size;
line-height: 108.5%;
/* or 43px */
text-align: center;
letter-spacing: -0.8px;
.join-welcome {
text-transform: uppercase;
font-size: 12px;
}
color: #000000;
overflow-wrap: break-word;
}
.join-line {
border: 1px solid #ECECEC;
}
.join-message {
font-family: sans-serif;
font-weight: 400;
font-size: 16 * $chat-text-size;
color: black;
margin-top: 20px;
margin-bottom: 20px;
}
.join-title {
font-family: "Poppins", sans-serif;
font-style: normal;
font-weight: 800;
font-size: 28px;
line-height: 108.5%;
/* or 43px */
text-align: center;
letter-spacing: -0.8px;
.join-privacy {
font-family: sans-serif;
font-weight: 400;
font-size: 12 * $chat-text-size;
color: #464646;
margin-top: 20px;
margin-bottom: 20px;
a {
color: #000000;
overflow-wrap: break-word;
}
.join-privacy {
font-family: sans-serif;
font-weight: 400;
font-size: 12 * $chat-text-size;
color: #464646;
}
}
.join-or-divider {
display: block;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
height: 20px;
color: #666666;
text-align: center;
line-height: var(--v-theme-title-featured-line-height);
position: relative;
font-family: sans-serif;
font-style: normal;
font-weight: bold;
font-size: 9.88014 * $chat-text-size;
line-height: 140%;
/* identical to box height, or 14px */
letter-spacing: 0.29px;
color: #9C9CAE;
&::before {
position: absolute;
width: 100%;
left: 0;
right: 0;
top: 5px;
height: 1px;
background: #9C9CAE;
content: " ";
margin-top: 20px;
margin-bottom: 20px;
a {
color: #464646;
}
}
.join-or-divider {
display: block;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
height: 20px;
color: #666666;
text-align: center;
line-height: var(--v-theme-title-featured-line-height);
position: relative;
font-family: sans-serif;
font-style: normal;
font-weight: bold;
font-size: 9.88014 * $chat-text-size;
line-height: 140%;
/* identical to box height, or 14px */
letter-spacing: 0.29px;
color: #9C9CAE;
&::before {
position: absolute;
width: 100%;
left: 0;
right: 0;
top: 5px;
height: 1px;
background: #9C9CAE;
content: " ";
}
}
@media #{map-get($display-breakpoints, 'sm-and-down')} {
margin: 10px;
}
}