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

Updated New Room Page

Browse source
This commit is contained in:
N Pex 2025-01-14 11:14:11 +00:00
parent 5294069b20
commit a700e19990
30 changed files with 1263 additions and 763 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,6 +4,7 @@ $app-background: #f6f6f6;
$main-desktop-width: 900px;
$dialog-desktop-width: 940px;
$very-very-purple: #536dfe;
$light-purple: #8E9FF8;
$lighter-gray: #FDFBF9;
$chat-background: $background;

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

@ -1066,7 +1066,7 @@ body {
.option-text {
font-size: 13 * $chat-text-size;
border-top: 1px solid #e1e1e1;
// border-top: 1px solid #e1e1e1;
padding-top: 8px;
}
@ -1075,6 +1075,17 @@ body {
font-size: 16 * $chat-text-size;
}
.back-button {
font-weight: bold;
font-size: 12 * $chat-text-size;
[dir="rtl"] & {
.v-icon {
// Mirror the icon
transform: scale(-1, 1);
}
}
}
.header-button-left {
position: absolute;
top: 0px;
@ -1281,57 +1292,6 @@ body {
}
}
.create-room {
background-color: $background;
.v-avatar {
border: 1px solid #808080 !important;
}
.section {
background-color: white;
border-radius: 20px;
padding: 20px;
border: 1px solid #808080 !important;
position: relative;
}
.options {
display: flex;
width: 100%;
justify-content: flex-end;
color: black;
font-size: 14 * $chat-text-size;
font-weight: bold;
margin-left: 10px;
[dir="rtl"] & {
margin-left: initial;
margin-right: 10px;
}
text-transform: none !important;
}
.room-option {
.v-input {
margin: 0px;
}
}
.option-warning {
background: linear-gradient(0deg, #FFF3F3, #FFF3F3), #FFFBED;
border-radius: 8px;
padding: 18px;
font-family: 'Inter', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 17px;
.v-icon {
margin-right: 16px;
}
}
}
.room-link .v-input__slot::before {
/* Remove text underline */
border-style: none !important;

71
src/assets/css/create.scss
View file

@ -1,8 +1,64 @@
@import "@/assets/css/main.scss";
.create-root {
background-color: $background;
user-select: none;
.v-avatar {
border: 1px solid #808080 !important;
}
.section {
background-color: white;
border-radius: 20px;
padding: 20px;
border: 1px solid #808080 !important;
position: relative;
}
.options {
display: flex;
width: 100%;
justify-content: flex-end;
color: black;
font-size: 14 * $chat-text-size;
font-weight: bold;
margin-left: 10px;
[dir="rtl"] & {
margin-left: initial;
margin-right: 10px;
}
text-transform: none !important;
}
.room-option {
.v-input {
margin: 0px;
}
}
.option-warning {
background: linear-gradient(0deg, #FFF3F3, #FFF3F3), #FFFBED;
border-radius: 8px;
padding: 18px;
font-family: 'Inter', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 17px;
.v-icon {
margin-right: 16px;
}
}
/* Make secondary inputs (e.g. topic) */
.v-input.v-text-field--filled.v-text-field--rounded .v-input__slot {
background-color: #f5f5f5;
border-radius: 4px;
}
.create-loggedin {
text-align: center;
button {
@ -34,15 +90,12 @@
.create-title {
color: #000;
text-align: center;
font-family: "Poppins";
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: 108.5%; /* 30.38px */
letter-spacing: -0.8px;
white-space: pre-line;
margin-top: 50px;
&.no-icon {
margin-top: 122px;
}
}
.create-info {
@ -135,4 +188,10 @@
flex-direction: column;
margin-top: -20px;
}
.v-btn:not(.back-button) {
border-radius: 24px;
min-height: 48px !important;
min-width: 200px !important;
}
}

76
src/assets/css/typography.scss Normal file
View file

@ -0,0 +1,76 @@
@import "@/assets/css/main.scss";
.h3-bold {
font-family: "Poppins";
font-style: normal;
font-size: 24 * $chat-text-size;
font-weight: 700;
line-height: 28.8 * $chat-text-size;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
.paragraph {
font-family: "Inter";
font-size: 16 * $chat-text-size;
font-weight: 400;
line-height: 18.72 * $chat-text-size;
letter-spacing: 0.40 * $chat-text-size;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: rgba(0,0,0, 0.7);
&.paragraph-button {
color: $very-very-purple;
}
}
.paragraph-bold {
font-family: "Inter";
font-size: 16 * $chat-text-size;
font-weight: 600;
line-height: 18.72 * $chat-text-size;
letter-spacing: 0.40 * $chat-text-size;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: rgba(0,0,0);
margin-bottom: 3 * $chat-text-size;
}
.caption-1 {
font-family: "Inter";
font-size: 14 * $chat-text-size;
font-weight: 400;
line-height: 16.38 * $chat-text-size;
letter-spacing: 0.40 * $chat-text-size;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: rgba(0,0,0,0.65);
}
.caption-1-gray {
font-family: "Inter";
font-size: 14 * $chat-text-size;
font-weight: 400;
line-height: 16.38 * $chat-text-size;
letter-spacing: 0.40 * $chat-text-size;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: rgba(0,0,0,0.65);
}
.caption-2 {
font-family: "Inter";
font-size: 10 * $chat-text-size;
font-weight: 400;
line-height: 11.7 * $chat-text-size;
letter-spacing: 0.40 * $chat-text-size;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: rgba(0,0,0,0.60);
}