redesign x-dialogs and buttons to be closer to the Airdrop design
This commit is contained in:
schlagmichdoch
parent
785db26882
commit
bab3d79ab2
2 changed files with 48 additions and 16 deletions
|
|
@ -107,6 +107,7 @@
|
|||
<div class="font-subheading center text-center">Enter key from another device to continue.</div>
|
||||
<div class="row-reverse space-between">
|
||||
<button class="button" type="submit" disabled>Pair</button>
|
||||
<div class="separator"></div>
|
||||
<a class="button" close>Cancel</a>
|
||||
</div>
|
||||
</x-paper>
|
||||
|
|
@ -137,6 +138,7 @@
|
|||
<div class="center file-preview"></div>
|
||||
<div class="row-reverse space-between">
|
||||
<a class="button" id="shareOrDownload" autofocus></a>
|
||||
<div class="separator"></div>
|
||||
<button class="button" close>Close</button>
|
||||
</div>
|
||||
</x-paper>
|
||||
|
|
@ -152,6 +154,7 @@
|
|||
<div class="center file-preview"></div>
|
||||
<div class="row-reverse space-between">
|
||||
<button class="button" id="acceptRequest" title="Accept Request" close autofocus>Accept</button>
|
||||
<div class="separator"></div>
|
||||
<button class="button" id="declineRequest" title="Decline Request" close>Decline</button>
|
||||
</div>
|
||||
</x-paper>
|
||||
|
|
@ -162,10 +165,11 @@
|
|||
<form action="#">
|
||||
<x-background class="full center">
|
||||
<x-paper shadow="2">
|
||||
<h3>Send a Message</h3>
|
||||
<h2 class="center text-center">Send a Message</h2>
|
||||
<div id="textInput" class="textarea" role="textbox" placeholder="Send a message" autocomplete="off" autofocus contenteditable></div>
|
||||
<div class="row-reverse">
|
||||
<button class="button" type="submit" close>Send</button>
|
||||
<div class="separator"></div>
|
||||
<a class="button" close>Cancel</a>
|
||||
</div>
|
||||
</x-paper>
|
||||
|
|
@ -176,10 +180,11 @@
|
|||
<x-dialog id="receiveTextDialog">
|
||||
<x-background class="full center">
|
||||
<x-paper shadow="2">
|
||||
<h3>Message Received</h3>
|
||||
<h2>Message Received</h2>
|
||||
<div class="font-subheading" id="text"></div>
|
||||
<div class="row-reverse">
|
||||
<button class="button" id="copy" close autofocus>Copy</button>
|
||||
<div class="separator"></div>
|
||||
<button class="button" close>Close</button>
|
||||
</div>
|
||||
</x-paper>
|
||||
|
|
|
|||
|
|
@ -362,7 +362,7 @@ x-dialog x-background {
|
|||
z-index: 10;
|
||||
transition: opacity 300ms;
|
||||
will-change: opacity;
|
||||
padding: 16px;
|
||||
padding: 35px;
|
||||
}
|
||||
|
||||
x-dialog x-paper {
|
||||
|
|
@ -390,8 +390,10 @@ x-dialog:not([show]) x-background {
|
|||
}
|
||||
|
||||
x-dialog .row-reverse>.button {
|
||||
margin-top: 10px;
|
||||
margin-left: 8px;
|
||||
margin-top: 0;
|
||||
margin-bottom: -16px;
|
||||
width: 50%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
x-dialog a {
|
||||
|
|
@ -454,18 +456,39 @@ x-dialog .font-subheading {
|
|||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
#pairDeviceDialog x-background {
|
||||
padding: 16px!important;
|
||||
}
|
||||
|
||||
/* Receive Dialog */
|
||||
|
||||
#receiveDialog .row {
|
||||
x-dialog .row {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#fileName{
|
||||
word-break: break-all;
|
||||
x-dialog h2 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#fileSize{
|
||||
x-dialog .row-reverse {
|
||||
margin: auto -24px;
|
||||
margin-top: 40px;
|
||||
border-top: solid 2.5px var(--border-color);
|
||||
}
|
||||
|
||||
.separator {
|
||||
border: solid 1.25px var(--border-color);
|
||||
margin-bottom: -16px;
|
||||
}
|
||||
|
||||
.file-description {
|
||||
word-break: break-word;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.file-size{
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
|
|
@ -557,10 +580,6 @@ x-dialog .font-subheading {
|
|||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.button:before {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.button:focus:before,
|
||||
.icon-button:focus:before {
|
||||
opacity: 0.2;
|
||||
|
|
@ -801,6 +820,7 @@ body {
|
|||
--text-color: #333;
|
||||
--bg-color: #fff;
|
||||
--bg-color-secondary: #f1f3f4;
|
||||
--border-color: #e7e8e8;
|
||||
}
|
||||
|
||||
/* Dark theme colors */
|
||||
|
|
@ -808,6 +828,7 @@ body.dark-theme {
|
|||
--text-color: #eee;
|
||||
--bg-color: #121212;
|
||||
--bg-color-secondary: #333;
|
||||
--border-color: #252525;
|
||||
}
|
||||
|
||||
/* Colored Elements */
|
||||
|
|
@ -825,15 +846,19 @@ x-dialog x-paper {
|
|||
color: var(--text-color);
|
||||
background-color: var(--bg-color-secondary);
|
||||
}
|
||||
|
||||
/* Image/Video/Audio Preview */
|
||||
.file-preview {
|
||||
margin: 10px -24px 40px -24px;
|
||||
}
|
||||
|
||||
.element-preview {
|
||||
max-width: 100%;
|
||||
max-height: 50vh;
|
||||
max-height: 40vh;
|
||||
margin: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/* Styles for users who prefer dark mode at the OS level */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
|
|
@ -842,6 +867,7 @@ x-dialog x-paper {
|
|||
--text-color: #eee;
|
||||
--bg-color: #121212;
|
||||
--bg-color-secondary: #333;
|
||||
--border-color: #252525;
|
||||
}
|
||||
|
||||
/* Override dark mode with light mode styles if the user decides to swap */
|
||||
|
|
@ -849,7 +875,8 @@ x-dialog x-paper {
|
|||
--text-color: #333;
|
||||
--bg-color: #fafafa;
|
||||
--bg-color-secondary: #f1f3f4;
|
||||
}
|
||||
--border-color: #e7e8e8;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue