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

Style the file send view main page

Browse source
This commit is contained in:
N-Pex 2025-07-03 15:45:49 +02:00
parent e5bb2d7202
commit 1a08b38fdb
4 changed files with 126 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

97
src/assets/css/sendattachments.scss
View file

@ -1,8 +1,9 @@
@use "@/assets/css/variables" as *;
$background: #000000;
$backgroundSection: #181719;
$backgroundSection: #333333E5;
$backgroundHilite: #383739;
$backgroundDark: #242424;
$text: #ffffff;
$hiliteColor: #4642f1;
@ -15,13 +16,29 @@ $hiliteColor: #4642f1;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
background-color: $background;
color: $text;
overflow: hidden;
display: flex;
flex-direction: column;
text-align: center;
padding: 16px;
.title {
font-family: "Inter", sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 125%;
letter-spacing: 0.4px;
text-align: center;
vertical-align: bottom;
color: white;
flex: 0 0 50px;
background-color: $backgroundSection;
display: flex;
align-items: center;
justify-content: center;
}
.v-btn {
font-family: "Inter", sans-serif;
@ -45,24 +62,11 @@ $hiliteColor: #4642f1;
.back-button {
position: absolute;
top: 16px;
top: 8px;
left: 16px;
margin: 0;
z-index: 1;
}
.info-button {
position: absolute;
top: 16px;
right: 16px;
margin: 0;
z-index: 1;
}
.send-button {
position: absolute;
top: 4px;
right: 4px;
background-color: transparent !important;
}
textarea {
@ -73,7 +77,8 @@ $hiliteColor: #4642f1;
color: rgba($text, 80%) !important;
}
.send-attachments__selecting__current-item, .gallery-current-item {
.send-attachments__selecting__current-item,
.gallery-current-item {
width: 100%;
flex: 1 1 100%;
background-color: $backgroundSection;
@ -83,7 +88,7 @@ $hiliteColor: #4642f1;
background-color: $backgroundHilite;
}
border-radius: 19px;
//border-radius: 19px;
overflow: hidden;
.v-img {
@ -102,9 +107,11 @@ $hiliteColor: #4642f1;
}
}
.file-drop-thumbnail-container, .gallery-thumbnail-container {
.file-drop-thumbnail-container,
.gallery-thumbnail-container {
width: 100%;
padding: 13px 20px 15px 20px;
background-color: $backgroundSection;
padding: 16px 20px 24px 20px;
flex: 0 0 74px;
overflow-x: auto;
overflow-y: hidden;
@ -123,7 +130,7 @@ $hiliteColor: #4642f1;
/* Firefox */
.v-badge {
margin-right: 8px;
//margin-right: 8px;
}
.v-badge__badge {
@ -145,7 +152,7 @@ $hiliteColor: #4642f1;
height: 46px;
border-radius: 9px;
overflow: hidden;
background-color: #242424;
background-color: $backgroundDark;
border: 2px solid white;
display: inline-block;
position: relative;
@ -155,7 +162,7 @@ $hiliteColor: #4642f1;
}
&.noborder {
border: 2px solid transparent;
border: 2px solid $backgroundDark;
}
.v-img {
@ -195,21 +202,49 @@ $hiliteColor: #4642f1;
margin-top: 20px;
padding: 16px 18px;
background-color: $backgroundSection;
border-radius: 19px;
//border-radius: 19px;
}
.file-drop-input-container {
flex: 1 1 auto;
width: 100%;
position: relative;
padding: 0 16px 16px 16px;
display: flex;
flex-direction: row;
background-color: $backgroundSection;
.file-drop-input-container__input {
background-color: $backgroundDark;
border-radius: 22px;
flex: 1 1 auto;
position: relative;
margin-right: 15px;
height: 42px;
overflow: hidden;
}
.send-button {
margin: 0;
padding: 0;
position: absolute;
top: 3px;
right: 3px;
}
.info-button {
background-color: $backgroundDark !important;
margin: 0;
}
}
.file-drop-input-container,
.file-drop-sending-input-container,
.file-drop-sent-input-container {
position: relative;
width: 100%;
min-height: 100px;
background-color: $backgroundSection;
border-radius: 19px;
display: flex;
flex-direction: column;
@ -229,10 +264,15 @@ $hiliteColor: #4642f1;
flex: 0 0 auto;
width: 100%;
margin-bottom: 50px;
padding: 6px 8px;
//padding: 6px 8px;
font-family: "Inter", sans-serif;
font-weight: 300;
input {
color: white !important;
padding-right: 50px;
}
.v-field {
background-color: transparent !important;
}
@ -446,6 +486,7 @@ $hiliteColor: #4642f1;
.c2pa-badge {
overflow: hidden;
.v-icon {
width: 32px;
height: 32px;