mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-21 07:16:18 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor all missing html ids to kebap-case

Browse source
This commit is contained in:
schlagmichdoch 2023-03-01 10:44:57 +01:00
parent 4566528179
commit a3b348d9b6
6 changed files with 170 additions and 170 deletions
Download patch file Download diff file Expand all files Collapse all files

74
public/index.html
View file

@ -81,7 +81,7 @@
<div>Pair devices to be discoverable on other networks</div> <div>Pair devices to be discoverable on other networks</div>
</x-no-peers> </x-no-peers>
<x-instructions desktop="Click to send files or right click to send a message" mobile="Tap to send files or long tap to send a message"> <x-instructions desktop="Click to send files or right click to send a message" mobile="Tap to send files or long tap to send a message">
<p id="pasteFilename"></p> <p id="paste-filename"></p>
</x-instructions> </x-instructions>
</div> </div>
<!-- Footer --> <!-- Footer -->
@ -89,29 +89,29 @@
<svg class="icon logo"> <svg class="icon logo">
<use xlink:href="#wifi-tethering" /> <use xlink:href="#wifi-tethering" />
</svg> </svg>
<div id="displayName" placeholder="&nbsp;"></div> <div id="display-name" placeholder="&nbsp;"></div>
<div class="font-body2"> <div class="font-body2">
You can be discovered by everyone <span id="on-this-network">on&nbsp;this&nbsp;network</span> You can be discovered by everyone <span id="on-this-network">on&nbsp;this&nbsp;network</span>
<span id="and-by-paired-devices" hidden> and&nbsp;by&nbsp;<span id="paired-devices">paired&nbsp;devices</span></span> <span id="and-by-paired-devices" hidden> and&nbsp;by&nbsp;<span id="paired-devices">paired&nbsp;devices</span></span>
</div> </div>
</footer> </footer>
<!-- Pair Device Dialog --> <!-- Pair Device Dialog -->
<x-dialog id="pairDeviceDialog"> <x-dialog id="pair-device-dialog">
<form action="#"> <form action="#">
<x-background class="full center text-center"> <x-background class="full center text-center">
<x-paper shadow="2"> <x-paper shadow="2">
<h2 class="center">Pair Devices</h2> <h2 class="center">Pair Devices</h2>
<div class="center" id="roomKeyQrCode"></div> <div id="room-key-qr-code" class="center"></div>
<h1 class="center" id="roomKey">000 000</h1> <h1 id="room-key" class="center">000 000</h1>
<div id="pairInstructions" class="font-subheading center text-center">Input this key on another device<br>or scan the QR-Code.</div> <div id="pair-instructions" class="font-subheading center text-center">Input this key on another device<br>or scan the QR-Code.</div>
<hr> <hr>
<div id="keyInputContainer"> <div id="key-input-container">
<input type="tel" id="char0" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled> <input id="char0" type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
<input type="tel" id="char1" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled> <input id="char1" type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
<input type="tel" id="char2" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled> <input id="char2" type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
<input type="tel" id="char3" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled> <input id="char3" type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
<input type="tel" id="char4" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled> <input id="char4" type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
<input type="tel" id="char5" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled> <input id="char5" type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
</div> </div>
<div class="font-subheading center text-center">Enter key from another device to continue.</div> <div class="font-subheading center text-center">Enter key from another device to continue.</div>
<div class="row-reverse space-between"> <div class="row-reverse space-between">
@ -124,7 +124,7 @@
</form> </form>
</x-dialog> </x-dialog>
<!-- Clear Devices Dialog --> <!-- Clear Devices Dialog -->
<x-dialog id="clearDevicesDialog"> <x-dialog id="clear-devices-dialog">
<form action="#"> <form action="#">
<x-background class="full center text-center"> <x-background class="full center text-center">
<x-paper shadow="2"> <x-paper shadow="2">
@ -139,43 +139,43 @@
</form> </form>
</x-dialog> </x-dialog>
<!-- Receive Request Dialog --> <!-- Receive Request Dialog -->
<x-dialog id="receiveRequestDialog"> <x-dialog id="receive-request-dialog">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <x-paper shadow="2">
<h2 class="center">PairDrop</h2> <h2 class="center">PairDrop</h2>
<div class="text-center file-description"> <div class="text-center file-description">
<div> <div>
<span id="requestingPeerDisplayName"></span> <span id="requesting-peer-display-name"></span>
<span>would like to share</span> <span>would like to share</span>
</div> </div>
<div class="row" id="fileName"> <div id="file-name" class="row" >
<span id="fileStem"></span> <span id="file-stem"></span>
<span id="fileExtension"></span> <span id="file-extension"></span>
</div> </div>
<div class="row"> <div class="row">
<span id="fileOther"></span> <span id="file-other"></span>
</div> </div>
</div> </div>
<div class="font-body2 text-center file-size"></div> <div class="font-body2 text-center file-size"></div>
<div class="center file-preview"></div> <div class="center file-preview"></div>
<div class="row-reverse space-between"> <div class="row-reverse space-between">
<button class="button" id="acceptRequest" title="ENTER" autofocus>Accept</button> <button id="accept-request" class="button" title="ENTER" autofocus>Accept</button>
<div class="separator"></div> <div class="separator"></div>
<button class="button" id="declineRequest" title="ESCAPE">Decline</button> <button id="decline-request" class="button" title="ESCAPE">Decline</button>
</div> </div>
</x-paper> </x-paper>
</x-background> </x-background>
</x-dialog> </x-dialog>
<!-- Receive File Dialog --> <!-- Receive File Dialog -->
<x-dialog id="receiveFileDialog"> <x-dialog id="receive-file-dialog">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <x-paper shadow="2">
<h2 class="center" id="receiveTitle"></h2> <h2 id="receive-title" class="center"></h2>
<div class="text-center file-description"></div> <div class="text-center file-description"></div>
<div class="font-body2 text-center file-size"></div> <div class="font-body2 text-center file-size"></div>
<div class="center file-preview"></div> <div class="center file-preview"></div>
<div class="row-reverse space-between"> <div class="row-reverse space-between">
<a class="button" id="shareOrDownload" autofocus></a> <a id="share-or-download" class="button" autofocus></a>
<div class="separator"></div> <div class="separator"></div>
<button class="button" close>Close</button> <button class="button" close>Close</button>
</div> </div>
@ -183,16 +183,16 @@
</x-background> </x-background>
</x-dialog> </x-dialog>
<!-- Send Text Dialog --> <!-- Send Text Dialog -->
<x-dialog id="sendTextDialog"> <x-dialog id="send-text-dialog">
<form action="#"> <form action="#">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <x-paper shadow="2">
<h2 class="text-center">PairDrop</h2> <h2 class="text-center">PairDrop</h2>
<div class="text-center"> <div class="text-center">
<span>Send a Message to</span> <span>Send a Message to</span>
<span id="textSendPeerDisplayName"></span> <span id="text-send-peer-display-name"></span>
</div> </div>
<div id="textInput" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div> <div id="text-input" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
<div class="row-reverse"> <div class="row-reverse">
<button class="button" type="submit" title="STR + ENTER" disabled close>Send</button> <button class="button" type="submit" title="STR + ENTER" disabled close>Send</button>
<div class="separator"></div> <div class="separator"></div>
@ -203,36 +203,36 @@
</form> </form>
</x-dialog> </x-dialog>
<!-- Receive Text Dialog --> <!-- Receive Text Dialog -->
<x-dialog id="receiveTextDialog"> <x-dialog id="receive-text-dialog">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <x-paper shadow="2">
<h2>PairDrop - Message Received</h2> <h2>PairDrop - Message Received</h2>
<div id="receiveTextDescriptionContainer"> <div id="receive-text-description-container">
<span id="receiveTextPeerDisplayName"></span> <span id="receive-text-peer-display-name"></span>
<span>sent the following message:</span> <span>sent the following message:</span>
</div> </div>
<div class="row-separator"></div> <div class="row-separator"></div>
<div id="text"></div> <div id="text"></div>
<div class="row-reverse"> <div class="row-reverse">
<button class="button" id="copy" title="CTRL/⌘ + C">Copy</button> <button id="copy" class="button" title="CTRL/⌘ + C">Copy</button>
<div class="separator"></div> <div class="separator"></div>
<button class="button" id="close" title="ESCAPE">Close</button> <button id="close" class="button" title="ESCAPE">Close</button>
</div> </div>
</x-paper> </x-paper>
</x-background> </x-background>
</x-dialog> </x-dialog>
<!-- base64PasteDialog Dialog --> <!-- base64 Paste Dialog -->
<x-dialog id="base64PasteDialog"> <x-dialog id="base64-paste-dialog">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <x-paper shadow="2">
<button class="button center" id="base64PasteBtn" title="Paste">Tap here to paste files</button> <button class="button center" id="base64-paste-btn" title="Paste">Tap here to paste files</button>
<button class="button center" close>Close</button> <button class="button center" close>Close</button>
</x-paper> </x-paper>
</x-background> </x-background>
</x-dialog> </x-dialog>
<!-- Toast --> <!-- Toast -->
<div class="toast-container full center"> <div class="toast-container full center">
<x-toast class="row" shadow="1" id="toast"></x-toast> <x-toast id="toast" class="row" shadow="1"></x-toast>
</div> </div>
<!-- About Page --> <!-- About Page -->
<x-about id="about" class="full center column"> <x-about id="about" class="full center column">

50
public/scripts/ui.js
View file

@ -10,7 +10,7 @@ window.pasteMode.activated = false;
// set display name // set display name
Events.on('display-name', e => { Events.on('display-name', e => {
const me = e.detail.message; const me = e.detail.message;
const $displayName = $('displayName') const $displayName = $('display-name')
$displayName.textContent = 'You are known as ' + me.displayName; $displayName.textContent = 'You are known as ' + me.displayName;
$displayName.title = me.deviceName; $displayName.title = me.deviceName;
}); });
@ -497,10 +497,10 @@ class ReceiveDialog extends Dialog {
class ReceiveFileDialog extends ReceiveDialog { class ReceiveFileDialog extends ReceiveDialog {
constructor() { constructor() {
super('receiveFileDialog'); super('receive-file-dialog');
this.$shareOrDownloadBtn = this.$el.querySelector('#shareOrDownload'); this.$shareOrDownloadBtn = this.$el.querySelector('#share-or-download');
this.$receiveTitleNode = this.$el.querySelector('#receiveTitle') this.$receiveTitleNode = this.$el.querySelector('#receive-title')
Events.on('files-received', e => this._onFilesReceived(e.detail.sender, e.detail.files, e.detail.request)); Events.on('files-received', e => this._onFilesReceived(e.detail.sender, e.detail.files, e.detail.request));
this._filesQueue = []; this._filesQueue = [];
@ -659,15 +659,15 @@ class ReceiveFileDialog extends ReceiveDialog {
class ReceiveRequestDialog extends ReceiveDialog { class ReceiveRequestDialog extends ReceiveDialog {
constructor() { constructor() {
super('receiveRequestDialog'); super('receive-request-dialog');
this.$requestingPeerDisplayNameNode = this.$el.querySelector('#requestingPeerDisplayName'); this.$requestingPeerDisplayNameNode = this.$el.querySelector('#requesting-peer-display-name');
this.$fileStemNode = this.$el.querySelector('#fileStem'); this.$fileStemNode = this.$el.querySelector('#file-stem');
this.$fileExtensionNode = this.$el.querySelector('#fileExtension'); this.$fileExtensionNode = this.$el.querySelector('#file-extension');
this.$fileOtherNode = this.$el.querySelector('#fileOther'); this.$fileOtherNode = this.$el.querySelector('#file-other');
this.$acceptRequestBtn = this.$el.querySelector('#acceptRequest'); this.$acceptRequestBtn = this.$el.querySelector('#accept-request');
this.$declineRequestBtn = this.$el.querySelector('#declineRequest'); this.$declineRequestBtn = this.$el.querySelector('#decline-request');
this.$acceptRequestBtn.addEventListener('click', _ => this._respondToFileTransferRequest(true)); this.$acceptRequestBtn.addEventListener('click', _ => this._respondToFileTransferRequest(true));
this.$declineRequestBtn.addEventListener('click', _ => this._respondToFileTransferRequest(false)); this.$declineRequestBtn.addEventListener('click', _ => this._respondToFileTransferRequest(false));
@ -748,12 +748,12 @@ class ReceiveRequestDialog extends ReceiveDialog {
class PairDeviceDialog extends Dialog { class PairDeviceDialog extends Dialog {
constructor() { constructor() {
super('pairDeviceDialog'); super('pair-device-dialog');
$('pair-device').addEventListener('click', _ => this._pairDeviceInitiate()); $('pair-device').addEventListener('click', _ => this._pairDeviceInitiate());
this.$inputRoomKeyChars = this.$el.querySelectorAll('#keyInputContainer>input'); this.$inputRoomKeyChars = this.$el.querySelectorAll('#key-input-container>input');
this.$submitBtn = this.$el.querySelector('button[type="submit"]'); this.$submitBtn = this.$el.querySelector('button[type="submit"]');
this.$roomKey = this.$el.querySelector('#roomKey'); this.$roomKey = this.$el.querySelector('#room-key');
this.$qrCode = this.$el.querySelector('#roomKeyQrCode'); this.$qrCode = this.$el.querySelector('#room-key-qr-code');
this.$clearSecretsBtn = $('clear-pair-devices'); this.$clearSecretsBtn = $('clear-pair-devices');
this.$footerInstructionsPairedDevices = $('and-by-paired-devices'); this.$footerInstructionsPairedDevices = $('and-by-paired-devices');
let createJoinForm = this.$el.querySelector('form'); let createJoinForm = this.$el.querySelector('form');
@ -827,7 +827,7 @@ class PairDeviceDialog extends Dialog {
} }
evaluateRoomKeyChars() { evaluateRoomKeyChars() {
if (this.$el.querySelectorAll('#keyInputContainer>input:placeholder-shown').length > 0) { if (this.$el.querySelectorAll('#key-input-container>input:placeholder-shown').length > 0) {
this.$submitBtn.setAttribute("disabled", ""); this.$submitBtn.setAttribute("disabled", "");
} else { } else {
this.inputRoomKey = ""; this.inputRoomKey = "";
@ -970,7 +970,7 @@ class PairDeviceDialog extends Dialog {
class ClearDevicesDialog extends Dialog { class ClearDevicesDialog extends Dialog {
constructor() { constructor() {
super('clearDevicesDialog'); super('clear-devices-dialog');
$('clear-pair-devices').addEventListener('click', _ => this._onClearPairDevices()); $('clear-pair-devices').addEventListener('click', _ => this._onClearPairDevices());
let clearDevicesForm = this.$el.querySelector('form'); let clearDevicesForm = this.$el.querySelector('form');
clearDevicesForm.addEventListener('submit', _ => this._onSubmit()); clearDevicesForm.addEventListener('submit', _ => this._onSubmit());
@ -988,10 +988,10 @@ class ClearDevicesDialog extends Dialog {
class SendTextDialog extends Dialog { class SendTextDialog extends Dialog {
constructor() { constructor() {
super('sendTextDialog'); super('send-text-dialog');
Events.on('text-recipient', e => this._onRecipient(e.detail.peerId, e.detail.deviceName)); Events.on('text-recipient', e => this._onRecipient(e.detail.peerId, e.detail.deviceName));
this.$text = this.$el.querySelector('#textInput'); this.$text = this.$el.querySelector('#text-input');
this.$peerDisplayName = this.$el.querySelector('#textSendPeerDisplayName'); this.$peerDisplayName = this.$el.querySelector('#text-send-peer-display-name');
this.$form = this.$el.querySelector('form'); this.$form = this.$el.querySelector('form');
this.$submit = this.$el.querySelector('button[type="submit"]'); this.$submit = this.$el.querySelector('button[type="submit"]');
this.$form.addEventListener('submit', _ => this._send()); this.$form.addEventListener('submit', _ => this._send());
@ -1048,7 +1048,7 @@ class SendTextDialog extends Dialog {
class ReceiveTextDialog extends Dialog { class ReceiveTextDialog extends Dialog {
constructor() { constructor() {
super('receiveTextDialog'); super('receive-text-dialog');
Events.on('text-received', e => this._onText(e.detail.text, e.detail.peerId)); Events.on('text-received', e => this._onText(e.detail.text, e.detail.peerId));
this.$text = this.$el.querySelector('#text'); this.$text = this.$el.querySelector('#text');
this.$copy = this.$el.querySelector('#copy'); this.$copy = this.$el.querySelector('#copy');
@ -1059,7 +1059,7 @@ class ReceiveTextDialog extends Dialog {
Events.on("keydown", e => this._onKeyDown(e)); Events.on("keydown", e => this._onKeyDown(e));
this.$receiveTextPeerDisplayNameNode = this.$el.querySelector('#receiveTextPeerDisplayName'); this.$receiveTextPeerDisplayNameNode = this.$el.querySelector('#receive-text-peer-display-name');
this._receiveTextQueue = []; this._receiveTextQueue = [];
} }
@ -1120,13 +1120,13 @@ class ReceiveTextDialog extends Dialog {
class Base64ZipDialog extends Dialog { class Base64ZipDialog extends Dialog {
constructor() { constructor() {
super('base64PasteDialog'); super('base64-paste-dialog');
const urlParams = new URL(window.location).searchParams; const urlParams = new URL(window.location).searchParams;
const base64Text = urlParams.get('base64text'); const base64Text = urlParams.get('base64text');
const base64Zip = urlParams.get('base64zip'); const base64Zip = urlParams.get('base64zip');
const base64Hash = window.location.hash.substring(1); const base64Hash = window.location.hash.substring(1);
this.$pasteBtn = this.$el.querySelector('#base64PasteBtn'); this.$pasteBtn = this.$el.querySelector('#base64-paste-btn');
if (base64Text) { if (base64Text) {
this.show(); this.show();
@ -1353,7 +1353,7 @@ class Notifications {
} }
_download(notification) { _download(notification) {
$('shareOrDownload').click(); $('share-or-download').click();
notification.close(); notification.close();
} }

46
public/styles.css
View file

@ -580,7 +580,7 @@ x-dialog x-paper {
will-change: transform; will-change: transform;
} }
#pairDeviceDialog x-paper { #pair-device-dialog x-paper {
position: absolute; position: absolute;
top: max(50%, 350px); top: max(50%, 350px);
height: 650px; height: 650px;
@ -619,13 +619,13 @@ x-dialog .font-subheading {
/* PairDevicesDialog */ /* PairDevicesDialog */
#keyInputContainer { #key-input-container {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
#keyInputContainer>input { #key-input-container>input {
width: 45px; width: 45px;
height: 45px; height: 45px;
font-size: 30px; font-size: 30px;
@ -641,15 +641,15 @@ x-dialog .font-subheading {
justify-content: center; justify-content: center;
} }
#keyInputContainer>input + * { #key-input-container>input + * {
margin-left: 6px; margin-left: 6px;
} }
#keyInputContainer>input:nth-of-type(4) { #key-input-container>input:nth-of-type(4) {
margin-left: 18px; margin-left: 18px;
} }
#roomKey { #room-key {
font-size: 50px; font-size: 50px;
letter-spacing: min(calc((100vw - 80px - 99px) / 100 * 7), 23px); letter-spacing: min(calc((100vw - 80px - 99px) / 100 * 7), 23px);
display: inline-block; display: inline-block;
@ -657,20 +657,20 @@ x-dialog .font-subheading {
margin: 15px -15px; margin: 15px -15px;
} }
#roomKeyQrCode { #room-key-qr-code {
padding: inherit; padding: inherit;
margin: auto; margin: auto;
width: 150px; width: 150px;
height: 150px; height: 150px;
} }
#pairDeviceDialog hr { #pair-device-dialog hr {
margin-top: 40px; margin-top: 40px;
margin-bottom: 40px; margin-bottom: 40px;
width: 100%; width: 100%;
} }
#pairDeviceDialog x-background { #pair-device-dialog x-background {
padding: 16px!important; padding: 16px!important;
} }
@ -685,8 +685,8 @@ x-dialog h2 {
margin-top: 1rem; margin-top: 1rem;
} }
#receiveRequestDialog h2, #receive-request-dialog h2,
#receiveFileDialog h2 { #receive-file-dialog h2 {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@ -715,11 +715,11 @@ x-dialog .row-reverse {
word-break: normal; word-break: normal;
} }
#fileName { #file-name {
font-style: italic; font-style: italic;
} }
#fileStem { #file-stem {
max-width: 80%; max-width: 80%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -733,13 +733,13 @@ x-dialog .row-reverse {
/* Send Text Dialog */ /* Send Text Dialog */
#textInput { #text-input {
min-height: 120px; min-height: 120px;
} }
/* Receive Text Dialog */ /* Receive Text Dialog */
#receiveTextDialog #text { #receive-text-dialog #text {
width: 100%; width: 100%;
word-break: break-all; word-break: break-all;
max-height: 300px; max-height: 300px;
@ -752,15 +752,15 @@ x-dialog .row-reverse {
margin-top:36px; margin-top:36px;
} }
#receiveTextDialog #text a { #receive-text-dialog #text a {
cursor: pointer; cursor: pointer;
} }
#receiveTextDialog #text a:hover { #receive-text-dialog #text a:hover {
text-decoration: underline; text-decoration: underline;
} }
#receiveTextDialog h3 { #receive-text-dialog h3 {
/* Select the received text when double-clicking the dialog */ /* Select the received text when double-clicking the dialog */
user-select: none; user-select: none;
pointer-events: none; pointer-events: none;
@ -771,26 +771,26 @@ x-dialog .row-reverse {
margin: auto -25px; margin: auto -25px;
} }
#receiveTextDescriptionContainer { #receive-text-description-container {
margin-bottom: 25px; margin-bottom: 25px;
} }
#base64PasteBtn { #base64-paste-btn {
width: 100%; width: 100%;
height: 40vh; height: 40vh;
border: solid 12px #438cff; border: solid 12px #438cff;
} }
#base64PasteDialog button { #base64-paste-dialog button {
margin: auto; margin: auto;
border-radius: 8px; border-radius: 8px;
} }
#base64PasteDialog button[close] { #base64-paste-dialog button[close] {
margin-top: 20px; margin-top: 20px;
} }
#base64PasteDialog button[close]:before { #base64-paste-dialog button[close]:before {
border-radius: 8px; border-radius: 8px;
} }

74
public_included_ws_fallback/index.html
View file

@ -81,7 +81,7 @@
<div>Pair devices to be discoverable on other networks</div> <div>Pair devices to be discoverable on other networks</div>
</x-no-peers> </x-no-peers>
<x-instructions desktop="Click to send files or right click to send a message" mobile="Tap to send files or long tap to send a message"> <x-instructions desktop="Click to send files or right click to send a message" mobile="Tap to send files or long tap to send a message">
<p id="pasteFilename"></p> <p id="paste-filename"></p>
</x-instructions> </x-instructions>
</div> </div>
<!-- Footer --> <!-- Footer -->
@ -89,7 +89,7 @@
<svg class="icon logo"> <svg class="icon logo">
<use xlink:href="#wifi-tethering" /> <use xlink:href="#wifi-tethering" />
</svg> </svg>
<div id="displayName" placeholder="&nbsp;"></div> <div id="display-name" placeholder="&nbsp;"></div>
<div class="font-body2"> <div class="font-body2">
You can be discovered by everyone <span id="on-this-network">on&nbsp;this&nbsp;network</span> You can be discovered by everyone <span id="on-this-network">on&nbsp;this&nbsp;network</span>
<span id="and-by-paired-devices" hidden> and&nbsp;by&nbsp;<span id="paired-devices">paired&nbsp;devices</span></span> <span id="and-by-paired-devices" hidden> and&nbsp;by&nbsp;<span id="paired-devices">paired&nbsp;devices</span></span>
@ -99,22 +99,22 @@
</div> </div>
</footer> </footer>
<!-- Pair Device Dialog --> <!-- Pair Device Dialog -->
<x-dialog id="pairDeviceDialog"> <x-dialog id="pair-device-dialog">
<form action="#"> <form action="#">
<x-background class="full center text-center"> <x-background class="full center text-center">
<x-paper shadow="2"> <x-paper shadow="2">
<h2 class="center">Pair Devices</h2> <h2 class="center">Pair Devices</h2>
<div class="center" id="roomKeyQrCode"></div> <div id="room-key-qr-code" class="center"></div>
<h1 class="center" id="roomKey">000 000</h1> <h1 id="room-key" class="center">000 000</h1>
<div id="pairInstructions" class="font-subheading center text-center">Input this key on another device<br>or scan the QR-Code.</div> <div id="pair-instructions" class="font-subheading center text-center">Input this key on another device<br>or scan the QR-Code.</div>
<hr> <hr>
<div id="keyInputContainer"> <div id="key-input-container">
<input type="tel" id="char0" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled> <input id="char0" type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
<input type="tel" id="char1" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled> <input id="char1" type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
<input type="tel" id="char2" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled> <input id="char2" type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
<input type="tel" id="char3" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled> <input id="char3" type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
<input type="tel" id="char4" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled> <input id="char4" type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
<input type="tel" id="char5" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled> <input id="char5" type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
</div> </div>
<div class="font-subheading center text-center">Enter key from another device to continue.</div> <div class="font-subheading center text-center">Enter key from another device to continue.</div>
<div class="row-reverse space-between"> <div class="row-reverse space-between">
@ -127,7 +127,7 @@
</form> </form>
</x-dialog> </x-dialog>
<!-- Clear Devices Dialog --> <!-- Clear Devices Dialog -->
<x-dialog id="clearDevicesDialog"> <x-dialog id="clear-devices-dialog">
<form action="#"> <form action="#">
<x-background class="full center text-center"> <x-background class="full center text-center">
<x-paper shadow="2"> <x-paper shadow="2">
@ -142,43 +142,43 @@
</form> </form>
</x-dialog> </x-dialog>
<!-- Receive Request Dialog --> <!-- Receive Request Dialog -->
<x-dialog id="receiveRequestDialog"> <x-dialog id="receive-request-dialog">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <x-paper shadow="2">
<h2 class="center">PairDrop</h2> <h2 class="center">PairDrop</h2>
<div class="text-center file-description"> <div class="text-center file-description">
<div> <div>
<span id="requestingPeerDisplayName"></span> <span id="requesting-peer-display-name"></span>
<span>would like to share</span> <span>would like to share</span>
</div> </div>
<div class="row" id="fileName"> <div id="file-name" class="row" >
<span id="fileStem"></span> <span id="file-stem"></span>
<span id="fileExtension"></span> <span id="file-extension"></span>
</div> </div>
<div class="row"> <div class="row">
<span id="fileOther"></span> <span id="file-other"></span>
</div> </div>
</div> </div>
<div class="font-body2 text-center file-size"></div> <div class="font-body2 text-center file-size"></div>
<div class="center file-preview"></div> <div class="center file-preview"></div>
<div class="row-reverse space-between"> <div class="row-reverse space-between">
<button class="button" id="acceptRequest" title="ENTER" autofocus>Accept</button> <button id="accept-request" class="button" title="ENTER" autofocus>Accept</button>
<div class="separator"></div> <div class="separator"></div>
<button class="button" id="declineRequest" title="ESCAPE">Decline</button> <button id="decline-request" class="button" title="ESCAPE">Decline</button>
</div> </div>
</x-paper> </x-paper>
</x-background> </x-background>
</x-dialog> </x-dialog>
<!-- Receive File Dialog --> <!-- Receive File Dialog -->
<x-dialog id="receiveFileDialog"> <x-dialog id="receive-file-dialog">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <x-paper shadow="2">
<h2 class="center" id="receiveTitle"></h2> <h2 id="receive-title" class="center"></h2>
<div class="text-center file-description"></div> <div class="text-center file-description"></div>
<div class="font-body2 text-center file-size"></div> <div class="font-body2 text-center file-size"></div>
<div class="center file-preview"></div> <div class="center file-preview"></div>
<div class="row-reverse space-between"> <div class="row-reverse space-between">
<a class="button" id="shareOrDownload" autofocus></a> <a id="share-or-download" class="button" autofocus></a>
<div class="separator"></div> <div class="separator"></div>
<button class="button" close>Close</button> <button class="button" close>Close</button>
</div> </div>
@ -186,16 +186,16 @@
</x-background> </x-background>
</x-dialog> </x-dialog>
<!-- Send Text Dialog --> <!-- Send Text Dialog -->
<x-dialog id="sendTextDialog"> <x-dialog id="send-text-dialog">
<form action="#"> <form action="#">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <x-paper shadow="2">
<h2 class="text-center">PairDrop</h2> <h2 class="text-center">PairDrop</h2>
<div class="text-center"> <div class="text-center">
<span>Send a Message to</span> <span>Send a Message to</span>
<span id="textSendPeerDisplayName"></span> <span id="text-send-peer-display-name"></span>
</div> </div>
<div id="textInput" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div> <div id="text-input" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
<div class="row-reverse"> <div class="row-reverse">
<button class="button" type="submit" title="STR + ENTER" disabled close>Send</button> <button class="button" type="submit" title="STR + ENTER" disabled close>Send</button>
<div class="separator"></div> <div class="separator"></div>
@ -206,36 +206,36 @@
</form> </form>
</x-dialog> </x-dialog>
<!-- Receive Text Dialog --> <!-- Receive Text Dialog -->
<x-dialog id="receiveTextDialog"> <x-dialog id="receive-text-dialog">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <x-paper shadow="2">
<h2>PairDrop - Message Received</h2> <h2>PairDrop - Message Received</h2>
<div id="receiveTextDescriptionContainer"> <div id="receive-text-description-container">
<span id="receiveTextPeerDisplayName"></span> <span id="receive-text-peer-display-name"></span>
<span>sent the following message:</span> <span>sent the following message:</span>
</div> </div>
<div class="row-separator"></div> <div class="row-separator"></div>
<div id="text"></div> <div id="text"></div>
<div class="row-reverse"> <div class="row-reverse">
<button class="button" id="copy" title="CTRL/⌘ + C">Copy</button> <button id="copy" class="button" title="CTRL/⌘ + C">Copy</button>
<div class="separator"></div> <div class="separator"></div>
<button class="button" id="close" title="ESCAPE">Close</button> <button id="close" class="button" title="ESCAPE">Close</button>
</div> </div>
</x-paper> </x-paper>
</x-background> </x-background>
</x-dialog> </x-dialog>
<!-- base64PasteDialog Dialog --> <!-- base64 Paste Dialog -->
<x-dialog id="base64PasteDialog"> <x-dialog id="base64-paste-dialog">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <x-paper shadow="2">
<button class="button center" id="base64PasteBtn" title="Paste">Tap here to paste files</button> <button class="button center" id="base64-paste-btn" title="Paste">Tap here to paste files</button>
<button class="button center" close>Close</button> <button class="button center" close>Close</button>
</x-paper> </x-paper>
</x-background> </x-background>
</x-dialog> </x-dialog>
<!-- Toast --> <!-- Toast -->
<div class="toast-container full center"> <div class="toast-container full center">
<x-toast class="row" shadow="1" id="toast"></x-toast> <x-toast id="toast" class="row" shadow="1"></x-toast>
</div> </div>
<!-- About Page --> <!-- About Page -->
<x-about id="about" class="full center column"> <x-about id="about" class="full center column">

50
public_included_ws_fallback/scripts/ui.js
View file

@ -10,7 +10,7 @@ window.pasteMode.activated = false;
// set display name // set display name
Events.on('display-name', e => { Events.on('display-name', e => {
const me = e.detail.message; const me = e.detail.message;
const $displayName = $('displayName') const $displayName = $('display-name')
$displayName.textContent = 'You are known as ' + me.displayName; $displayName.textContent = 'You are known as ' + me.displayName;
$displayName.title = me.deviceName; $displayName.title = me.deviceName;
}); });
@ -498,10 +498,10 @@ class ReceiveDialog extends Dialog {
class ReceiveFileDialog extends ReceiveDialog { class ReceiveFileDialog extends ReceiveDialog {
constructor() { constructor() {
super('receiveFileDialog'); super('receive-file-dialog');
this.$shareOrDownloadBtn = this.$el.querySelector('#shareOrDownload'); this.$shareOrDownloadBtn = this.$el.querySelector('#share-or-download');
this.$receiveTitleNode = this.$el.querySelector('#receiveTitle') this.$receiveTitleNode = this.$el.querySelector('#receive-title')
Events.on('files-received', e => this._onFilesReceived(e.detail.sender, e.detail.files, e.detail.request)); Events.on('files-received', e => this._onFilesReceived(e.detail.sender, e.detail.files, e.detail.request));
this._filesQueue = []; this._filesQueue = [];
@ -660,15 +660,15 @@ class ReceiveFileDialog extends ReceiveDialog {
class ReceiveRequestDialog extends ReceiveDialog { class ReceiveRequestDialog extends ReceiveDialog {
constructor() { constructor() {
super('receiveRequestDialog'); super('receive-request-dialog');
this.$requestingPeerDisplayNameNode = this.$el.querySelector('#requestingPeerDisplayName'); this.$requestingPeerDisplayNameNode = this.$el.querySelector('#requesting-peer-display-name');
this.$fileStemNode = this.$el.querySelector('#fileStem'); this.$fileStemNode = this.$el.querySelector('#file-stem');
this.$fileExtensionNode = this.$el.querySelector('#fileExtension'); this.$fileExtensionNode = this.$el.querySelector('#file-extension');
this.$fileOtherNode = this.$el.querySelector('#fileOther'); this.$fileOtherNode = this.$el.querySelector('#file-other');
this.$acceptRequestBtn = this.$el.querySelector('#acceptRequest'); this.$acceptRequestBtn = this.$el.querySelector('#accept-request');
this.$declineRequestBtn = this.$el.querySelector('#declineRequest'); this.$declineRequestBtn = this.$el.querySelector('#decline-request');
this.$acceptRequestBtn.addEventListener('click', _ => this._respondToFileTransferRequest(true)); this.$acceptRequestBtn.addEventListener('click', _ => this._respondToFileTransferRequest(true));
this.$declineRequestBtn.addEventListener('click', _ => this._respondToFileTransferRequest(false)); this.$declineRequestBtn.addEventListener('click', _ => this._respondToFileTransferRequest(false));
@ -749,12 +749,12 @@ class ReceiveRequestDialog extends ReceiveDialog {
class PairDeviceDialog extends Dialog { class PairDeviceDialog extends Dialog {
constructor() { constructor() {
super('pairDeviceDialog'); super('pair-device-dialog');
$('pair-device').addEventListener('click', _ => this._pairDeviceInitiate()); $('pair-device').addEventListener('click', _ => this._pairDeviceInitiate());
this.$inputRoomKeyChars = this.$el.querySelectorAll('#keyInputContainer>input'); this.$inputRoomKeyChars = this.$el.querySelectorAll('#key-input-container>input');
this.$submitBtn = this.$el.querySelector('button[type="submit"]'); this.$submitBtn = this.$el.querySelector('button[type="submit"]');
this.$roomKey = this.$el.querySelector('#roomKey'); this.$roomKey = this.$el.querySelector('#room-key');
this.$qrCode = this.$el.querySelector('#roomKeyQrCode'); this.$qrCode = this.$el.querySelector('#room-key-qr-code');
this.$clearSecretsBtn = $('clear-pair-devices'); this.$clearSecretsBtn = $('clear-pair-devices');
this.$footerInstructionsPairedDevices = $('and-by-paired-devices'); this.$footerInstructionsPairedDevices = $('and-by-paired-devices');
let createJoinForm = this.$el.querySelector('form'); let createJoinForm = this.$el.querySelector('form');
@ -828,7 +828,7 @@ class PairDeviceDialog extends Dialog {
} }
evaluateRoomKeyChars() { evaluateRoomKeyChars() {
if (this.$el.querySelectorAll('#keyInputContainer>input:placeholder-shown').length > 0) { if (this.$el.querySelectorAll('#key-input-container>input:placeholder-shown').length > 0) {
this.$submitBtn.setAttribute("disabled", ""); this.$submitBtn.setAttribute("disabled", "");
} else { } else {
this.inputRoomKey = ""; this.inputRoomKey = "";
@ -971,7 +971,7 @@ class PairDeviceDialog extends Dialog {
class ClearDevicesDialog extends Dialog { class ClearDevicesDialog extends Dialog {
constructor() { constructor() {
super('clearDevicesDialog'); super('clear-devices-dialog');
$('clear-pair-devices').addEventListener('click', _ => this._onClearPairDevices()); $('clear-pair-devices').addEventListener('click', _ => this._onClearPairDevices());
let clearDevicesForm = this.$el.querySelector('form'); let clearDevicesForm = this.$el.querySelector('form');
clearDevicesForm.addEventListener('submit', _ => this._onSubmit()); clearDevicesForm.addEventListener('submit', _ => this._onSubmit());
@ -989,10 +989,10 @@ class ClearDevicesDialog extends Dialog {
class SendTextDialog extends Dialog { class SendTextDialog extends Dialog {
constructor() { constructor() {
super('sendTextDialog'); super('send-text-dialog');
Events.on('text-recipient', e => this._onRecipient(e.detail.peerId, e.detail.deviceName)); Events.on('text-recipient', e => this._onRecipient(e.detail.peerId, e.detail.deviceName));
this.$text = this.$el.querySelector('#textInput'); this.$text = this.$el.querySelector('#text-input');
this.$peerDisplayName = this.$el.querySelector('#textSendPeerDisplayName'); this.$peerDisplayName = this.$el.querySelector('#text-send-peer-display-name');
this.$form = this.$el.querySelector('form'); this.$form = this.$el.querySelector('form');
this.$submit = this.$el.querySelector('button[type="submit"]'); this.$submit = this.$el.querySelector('button[type="submit"]');
this.$form.addEventListener('submit', _ => this._send()); this.$form.addEventListener('submit', _ => this._send());
@ -1049,7 +1049,7 @@ class SendTextDialog extends Dialog {
class ReceiveTextDialog extends Dialog { class ReceiveTextDialog extends Dialog {
constructor() { constructor() {
super('receiveTextDialog'); super('receive-text-dialog');
Events.on('text-received', e => this._onText(e.detail.text, e.detail.peerId)); Events.on('text-received', e => this._onText(e.detail.text, e.detail.peerId));
this.$text = this.$el.querySelector('#text'); this.$text = this.$el.querySelector('#text');
this.$copy = this.$el.querySelector('#copy'); this.$copy = this.$el.querySelector('#copy');
@ -1060,7 +1060,7 @@ class ReceiveTextDialog extends Dialog {
Events.on("keydown", e => this._onKeyDown(e)); Events.on("keydown", e => this._onKeyDown(e));
this.$receiveTextPeerDisplayNameNode = this.$el.querySelector('#receiveTextPeerDisplayName'); this.$receiveTextPeerDisplayNameNode = this.$el.querySelector('#receive-text-peer-display-name');
this._receiveTextQueue = []; this._receiveTextQueue = [];
} }
@ -1121,13 +1121,13 @@ class ReceiveTextDialog extends Dialog {
class Base64ZipDialog extends Dialog { class Base64ZipDialog extends Dialog {
constructor() { constructor() {
super('base64PasteDialog'); super('base64-paste-dialog');
const urlParams = new URL(window.location).searchParams; const urlParams = new URL(window.location).searchParams;
const base64Text = urlParams.get('base64text'); const base64Text = urlParams.get('base64text');
const base64Zip = urlParams.get('base64zip'); const base64Zip = urlParams.get('base64zip');
const base64Hash = window.location.hash.substring(1); const base64Hash = window.location.hash.substring(1);
this.$pasteBtn = this.$el.querySelector('#base64PasteBtn'); this.$pasteBtn = this.$el.querySelector('#base64-paste-btn');
if (base64Text) { if (base64Text) {
this.show(); this.show();
@ -1354,7 +1354,7 @@ class Notifications {
} }
_download(notification) { _download(notification) {
$('shareOrDownload').click(); $('share-or-download').click();
notification.close(); notification.close();
} }

46
public_included_ws_fallback/styles.css
View file

@ -606,7 +606,7 @@ x-dialog x-paper {
will-change: transform; will-change: transform;
} }
#pairDeviceDialog x-paper { #pair-device-dialog x-paper {
position: absolute; position: absolute;
top: max(50%, 350px); top: max(50%, 350px);
height: 650px; height: 650px;
@ -645,13 +645,13 @@ x-dialog .font-subheading {
/* PairDevicesDialog */ /* PairDevicesDialog */
#keyInputContainer { #key-input-container {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
#keyInputContainer>input { #key-input-container>input {
width: 45px; width: 45px;
height: 45px; height: 45px;
font-size: 30px; font-size: 30px;
@ -667,15 +667,15 @@ x-dialog .font-subheading {
justify-content: center; justify-content: center;
} }
#keyInputContainer>input + * { #key-input-container>input + * {
margin-left: 6px; margin-left: 6px;
} }
#keyInputContainer>input:nth-of-type(4) { #key-input-container>input:nth-of-type(4) {
margin-left: 18px; margin-left: 18px;
} }
#roomKey { #room-key {
font-size: 50px; font-size: 50px;
letter-spacing: min(calc((100vw - 80px - 99px) / 100 * 7), 23px); letter-spacing: min(calc((100vw - 80px - 99px) / 100 * 7), 23px);
display: inline-block; display: inline-block;
@ -683,20 +683,20 @@ x-dialog .font-subheading {
margin: 15px -15px; margin: 15px -15px;
} }
#roomKeyQrCode { #room-key-qr-code {
padding: inherit; padding: inherit;
margin: auto; margin: auto;
width: 150px; width: 150px;
height: 150px; height: 150px;
} }
#pairDeviceDialog hr { #pair-device-dialog hr {
margin-top: 40px; margin-top: 40px;
margin-bottom: 40px; margin-bottom: 40px;
width: 100%; width: 100%;
} }
#pairDeviceDialog x-background { #pair-device-dialog x-background {
padding: 16px!important; padding: 16px!important;
} }
@ -711,8 +711,8 @@ x-dialog h2 {
margin-top: 1rem; margin-top: 1rem;
} }
#receiveRequestDialog h2, #receive-request-dialog h2,
#receiveFileDialog h2 { #receive-file-dialog h2 {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@ -741,11 +741,11 @@ x-dialog .row-reverse {
word-break: normal; word-break: normal;
} }
#fileName { #file-name {
font-style: italic; font-style: italic;
} }
#fileStem { #file-stem {
max-width: 80%; max-width: 80%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -759,13 +759,13 @@ x-dialog .row-reverse {
/* Send Text Dialog */ /* Send Text Dialog */
#textInput { #text-input {
min-height: 120px; min-height: 120px;
} }
/* Receive Text Dialog */ /* Receive Text Dialog */
#receiveTextDialog #text { #receive-text-dialog #text {
width: 100%; width: 100%;
word-break: break-all; word-break: break-all;
max-height: 300px; max-height: 300px;
@ -778,15 +778,15 @@ x-dialog .row-reverse {
margin-top:36px; margin-top:36px;
} }
#receiveTextDialog #text a { #receive-text-dialog #text a {
cursor: pointer; cursor: pointer;
} }
#receiveTextDialog #text a:hover { #receive-text-dialog #text a:hover {
text-decoration: underline; text-decoration: underline;
} }
#receiveTextDialog h3 { #receive-text-dialog h3 {
/* Select the received text when double-clicking the dialog */ /* Select the received text when double-clicking the dialog */
user-select: none; user-select: none;
pointer-events: none; pointer-events: none;
@ -797,26 +797,26 @@ x-dialog .row-reverse {
margin: auto -25px; margin: auto -25px;
} }
#receiveTextDescriptionContainer { #receive-text-description-container {
margin-bottom: 25px; margin-bottom: 25px;
} }
#base64PasteBtn { #base64-paste-btn {
width: 100%; width: 100%;
height: 40vh; height: 40vh;
border: solid 12px #438cff; border: solid 12px #438cff;
} }
#base64PasteDialog button { #base64-paste-dialog button {
margin: auto; margin: auto;
border-radius: 8px; border-radius: 8px;
} }
#base64PasteDialog button[close] { #base64-paste-dialog button[close] {
margin-top: 20px; margin-top: 20px;
} }
#base64PasteDialog button[close]:before { #base64-paste-dialog button[close]:before {
border-radius: 8px; border-radius: 8px;
} }