jakob/PairDrop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Adds new HTML contenteditable div and relative CSS

Browse source
This commit is contained in:
montelale 2020-12-22 21:08:39 +01:00
parent 68f11f99cf
commit 5467087600
2 changed files with 29 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
client/index.html
View file

@ -79,7 +79,7 @@
<div class="font-body2" id="fileSize"></div>
<div class="row">
<label for="autoDownload" class="grow">Ask to save each file before downloading</label>
<input type="checkbox" id="autoDownload" checked="">
<input type="checkbox" id="autoDownload" checked="">
</div>
<div class="row-reverse">
<a class="button" close id="download" title="Download File" autofocus>Save</a>
@ -94,7 +94,8 @@
<x-background class="full center">
<x-paper shadow="2">
<h3>Send a Message</h3>
<textarea id="textInput" placeholder="Send a message" autocomplete="off" autofocus></textarea>
<!-- <textarea id="textInput" placeholder="Send a message" autocomplete="off" autofocus></textarea> -->
<div id="textInput" class="textareaElement" role="textbox" placeholder="Send a message" autocomplete="off" autofocus contenteditable></div>
<div class="row-reverse">
<button class="button" type="submit" close>Send</button>
<a class="button" close>Cancel</a>

29
client/styles.css
View file

@ -496,6 +496,24 @@ textarea {
background: #f1f3f4;
}
.textareaElement {
box-sizing: border-box;
border: none;
outline: none;
padding: 16px 24px;
border-radius: 16px;
margin: 8px 0;
font-size: 14px;
font-family: inherit;
background: #f1f3f4;
display: block;
overflow: auto;
resize: none;
min-height: 40px;
line-height: 16px;
max-height: 300px;
}
/* Info Animation */
@ -679,8 +697,8 @@ screen and (min-width: 1100px) {
}
}
/*
Color Themes
/*
Color Themes
*/
/* Default colors */
@ -704,6 +722,11 @@ textarea {
background-color: var(--input-bg-color);
}
.textareaElement {
color: var(--text-color);
background-color: var(--input-bg-color);
}
/* Dark theme colors */
body.dark-theme {
--text-color: #eee;
@ -727,4 +750,4 @@ body.dark-theme {
--bg-color: #fafafa;
--input-bg-color: #f1f3f4;
}
}
}