mirror of
https://github.com/schlagmichdoch/PairDrop.git
synced 2025-04-27 10:16:16 -04:00
implement temporary public rooms, tidy up index.js, rework UI dialogs and change colors slightly
This commit is contained in:
schlagmichdoch
parent
bd7b3c6d28
commit
8d2584fa69
6 changed files with 1237 additions and 496 deletions
|
|
@ -4,6 +4,8 @@
|
|||
--icon-size: 24px;
|
||||
--primary-color: #4285f4;
|
||||
--paired-device-color: #00a69c;
|
||||
--public-room-color: #db8500;
|
||||
--accent-color: var(--primary-color);
|
||||
--peer-width: 120px;
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
|
@ -56,7 +58,6 @@ html {
|
|||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
|
|
@ -83,6 +84,10 @@ html {
|
|||
bottom: 0;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
header {
|
||||
position: absolute;
|
||||
align-items: baseline;
|
||||
|
|
@ -220,10 +225,6 @@ a,
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
hr {
|
||||
color: white;
|
||||
}
|
||||
|
||||
input {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -289,11 +290,6 @@ x-noscript {
|
|||
overscroll-behavior-x: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 425px) {
|
||||
header:has(#edit-pair-devices:not([hidden]))~#center {
|
||||
--footer-height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Peers List */
|
||||
|
||||
|
|
@ -466,7 +462,6 @@ x-peer {
|
|||
|
||||
x-peer label {
|
||||
width: var(--peer-width);
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
|
|
@ -495,10 +490,14 @@ x-peer .icon-wrapper {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
x-peer:not(.type-ip).type-secret .icon-wrapper {
|
||||
x-peer.type-secret .icon-wrapper {
|
||||
background: var(--paired-device-color);
|
||||
}
|
||||
|
||||
x-peer:not(.type-ip):not(.type-secret).type-public-id .icon-wrapper {
|
||||
background: var(--public-room-color);
|
||||
}
|
||||
|
||||
x-peer x-icon > .highlight-wrapper {
|
||||
align-self: center;
|
||||
align-items: center;
|
||||
|
|
@ -507,17 +506,29 @@ x-peer x-icon > .highlight-wrapper {
|
|||
}
|
||||
|
||||
x-peer x-icon > .highlight-wrapper > .highlight {
|
||||
width: 6px;
|
||||
width: 15px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
border-radius: 4px;
|
||||
margin-left: 1px;
|
||||
margin-right: 1px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
x-peer.type-secret x-icon > .highlight-wrapper > .highlight {
|
||||
x-peer.type-ip x-icon > .highlight-wrapper > .highlight.highlight-room-ip {
|
||||
background-color: var(--primary-color);
|
||||
display: inline;
|
||||
}
|
||||
|
||||
x-peer.type-secret x-icon > .highlight-wrapper > .highlight.highlight-room-secret {
|
||||
background-color: var(--paired-device-color);
|
||||
display: inline;
|
||||
}
|
||||
|
||||
x-peer.type-public-id x-icon > .highlight-wrapper > .highlight.highlight-room-public-id {
|
||||
background-color: var(--public-room-color);
|
||||
display: inline;
|
||||
}
|
||||
|
||||
x-peer:not([status]):hover x-icon,
|
||||
x-peer:not([status]):focus x-icon {
|
||||
transform: scale(1.05);
|
||||
|
|
@ -591,12 +602,11 @@ x-peer[drop] x-icon {
|
|||
|
||||
footer {
|
||||
position: relative;
|
||||
margin-top: auto;
|
||||
z-index: 2;
|
||||
align-items: center;
|
||||
padding: 0 0 16px 0;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
margin: auto 5px 5px;
|
||||
}
|
||||
|
||||
footer .logo {
|
||||
|
|
@ -606,45 +616,72 @@ footer .logo {
|
|||
margin-top: -10px;
|
||||
}
|
||||
|
||||
footer .font-body2 {
|
||||
color: var(--primary-color);
|
||||
margin: auto 18px;
|
||||
.discovery-wrapper {
|
||||
font-size: 12px;
|
||||
max-width: 350px;
|
||||
margin: 10px auto auto;
|
||||
border: 3px solid var(--border-color);
|
||||
border-radius: 0.5rem;
|
||||
padding: 2px;
|
||||
background-color: rgb(var(--bg-color));
|
||||
transition: background-color 0.5s ease;
|
||||
}
|
||||
|
||||
#on-this-network {
|
||||
border-bottom: solid 4px var(--primary-color);
|
||||
padding-bottom: 1px;
|
||||
word-break: keep-all;
|
||||
/*You can be discovered wrapper*/
|
||||
.discovery-wrapper > div:first-of-type {
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
#paired-devices {
|
||||
border-bottom: solid 4px var(--paired-device-color);
|
||||
padding-bottom: 1px;
|
||||
|
||||
.discovery-wrapper .badge {
|
||||
word-break: keep-all;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
border-radius: 0.3rem/0.3rem;
|
||||
padding-right: 0.3rem;
|
||||
padding-left: 0.3em;
|
||||
background-color: var(--badge-color);
|
||||
color: white;
|
||||
transition: background-color 0.5s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.badge-room-ip {
|
||||
background-color: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.badge-room-secret {
|
||||
background-color: var(--paired-device-color);
|
||||
border-color: var(--paired-device-color);
|
||||
}
|
||||
|
||||
.badge-room-public-id {
|
||||
background-color: var(--public-room-color);
|
||||
border-color: var(--public-room-color);
|
||||
}
|
||||
|
||||
#display-name {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
border: none;
|
||||
outline: none;
|
||||
max-width: 15em;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: text;
|
||||
margin-left: -1rem;
|
||||
margin-bottom: -6px;
|
||||
padding-right: 0.3rem;
|
||||
padding-left: 0.3em;
|
||||
padding-bottom: 0.1rem;
|
||||
border-radius: 1.3rem/30%;
|
||||
border-right: solid 1rem transparent;
|
||||
border-left: solid 1rem transparent;
|
||||
background-clip: padding-box;
|
||||
background-color: rgba(var(--text-color), 43%);
|
||||
color: white;
|
||||
transition: background-color 0.5s ease;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#edit-pen {
|
||||
|
|
@ -653,7 +690,6 @@ footer .font-body2 {
|
|||
margin-left: -1rem;
|
||||
margin-bottom: -2px;
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Dialog */
|
||||
|
|
@ -671,7 +707,6 @@ x-dialog x-paper {
|
|||
z-index: 3;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px 24px;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
overflow: hidden;
|
||||
|
|
@ -680,7 +715,27 @@ x-dialog x-paper {
|
|||
will-change: transform;
|
||||
}
|
||||
|
||||
#pair-device-dialog x-paper {
|
||||
x-paper > .row:first-of-type {
|
||||
background-color: var(--accent-color);
|
||||
border-bottom: solid 4px var(--border-color);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
x-paper > .row:first-of-type h2 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#pair-device-dialog,
|
||||
#edit-paired-devices-dialog {
|
||||
--accent-color: var(--paired-device-color);
|
||||
}
|
||||
|
||||
#public-room-dialog {
|
||||
--accent-color: var(--public-room-color);
|
||||
}
|
||||
|
||||
#pair-device-dialog x-paper,
|
||||
#public-room-dialog x-paper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
|
|
@ -695,6 +750,12 @@ x-dialog x-paper {
|
|||
background: var(--paired-device-color);
|
||||
}
|
||||
|
||||
#public-room-dialog ::-moz-selection,
|
||||
#public-room-dialog ::selection {
|
||||
color: black;
|
||||
background: var(--public-room-color);
|
||||
}
|
||||
|
||||
x-dialog:not([show]) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -714,18 +775,19 @@ x-dialog a {
|
|||
|
||||
/* Pair Devices Dialog */
|
||||
|
||||
#key-input-container {
|
||||
.input-key-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#key-input-container > input {
|
||||
.input-key-container > input {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
font-size: 30px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
display: -webkit-box !important;
|
||||
display: -webkit-flex !important;
|
||||
display: -moz-flex !important;
|
||||
|
|
@ -736,15 +798,15 @@ x-dialog a {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
#key-input-container > input + * {
|
||||
.input-key-container > input + * {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
#key-input-container > input:nth-of-type(4) {
|
||||
.input-key-container.six-chars > input:nth-of-type(4) {
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
#room-key {
|
||||
.key {
|
||||
-webkit-user-select: text;
|
||||
-moz-user-select: text;
|
||||
user-select: text;
|
||||
|
|
@ -755,17 +817,48 @@ x-dialog a {
|
|||
margin: 15px -15px;
|
||||
}
|
||||
|
||||
#room-key-qr-code {
|
||||
.key-qr-code {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
#pair-instructions {
|
||||
.key-instructions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
x-dialog h2 {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
x-dialog hr {
|
||||
margin: 20px -24px 20px -24px;
|
||||
border: solid 1.25px var(--border-color);
|
||||
height: 3px;
|
||||
border: none;
|
||||
width: 100%;
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
|
||||
.hr-note {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.hr-note hr {
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
.hr-note > div {
|
||||
height: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
|
||||
.hr-note > div > span {
|
||||
padding: 3px 10px;
|
||||
border-radius: 10px;
|
||||
color: rgb(var(--text-color));
|
||||
background-color: rgb(var(--bg-color));
|
||||
border: var(--border-color) solid 3px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#pair-device-dialog x-background {
|
||||
|
|
@ -859,22 +952,17 @@ x-dialog hr {
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.paired-device > .auto-accept {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Receive Dialog */
|
||||
|
||||
x-dialog .row {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 8px;
|
||||
x-paper > .row {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* button row*/
|
||||
x-paper > .button-row {
|
||||
margin: 25px -24px -15px;
|
||||
border-top: solid 2.5px var(--border-color);
|
||||
border-top: solid 3px var(--border-color);
|
||||
height: 50px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
x-paper > .button-row > .button {
|
||||
|
|
@ -882,16 +970,16 @@ x-paper > .button-row > .button {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
x-paper > .button-row > .button:not(:first-child) {
|
||||
border-right: solid 1.5px var(--border-color);
|
||||
}
|
||||
|
||||
x-paper > .button-row > .button:not(:last-child) {
|
||||
border-left: solid 2.5px var(--border-color);
|
||||
border-left: solid 1.5px var(--border-color);
|
||||
}
|
||||
|
||||
.file-description {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.file-description .row {
|
||||
margin: 0
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.file-description span {
|
||||
|
|
@ -902,23 +990,29 @@ x-paper > .button-row > .button:not(:last-child) {
|
|||
.file-name {
|
||||
font-style: italic;
|
||||
max-width: 100%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.file-stem {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-right: 1px;
|
||||
}
|
||||
|
||||
/* Send Text Dialog */
|
||||
/* Todo: add pair underline to send / receive dialogs displayName */
|
||||
x-dialog .dialog-subheader {
|
||||
margin-bottom: 25px;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
#send-text-dialog .display-name-wrapper {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
#text-input {
|
||||
min-height: 200px;
|
||||
margin: 14px auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Receive Text Dialog */
|
||||
|
|
@ -933,7 +1027,6 @@ x-dialog .dialog-subheader {
|
|||
-moz-user-select: text;
|
||||
user-select: text;
|
||||
white-space: pre-wrap;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
#receive-text-dialog #text a {
|
||||
|
|
@ -1008,12 +1101,13 @@ x-dialog .dialog-subheader {
|
|||
cursor: pointer;
|
||||
user-select: none;
|
||||
background: inherit;
|
||||
color: var(--primary-color);
|
||||
color: var(--accent-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.button[disabled] {
|
||||
color: #5B5B66;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1094,8 +1188,7 @@ button::-moz-focus-inner {
|
|||
border: none;
|
||||
outline: none;
|
||||
padding: 16px 24px;
|
||||
border-radius: 16px;
|
||||
margin: 10px 0;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
background: #f1f3f4;
|
||||
|
|
@ -1305,14 +1398,6 @@ x-peers:empty~x-instructions {
|
|||
}
|
||||
|
||||
/* Responsive Styles */
|
||||
@media screen and (max-width: 360px) {
|
||||
x-dialog x-paper {
|
||||
padding: 15px;
|
||||
}
|
||||
x-paper > .button-row {
|
||||
margin: auto -15px -15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-height: 800px) {
|
||||
footer {
|
||||
|
|
@ -1335,8 +1420,9 @@ body {
|
|||
--text-color: 51,51,51;
|
||||
--bg-color: 250,250,250; /*rgb code*/
|
||||
--bg-color-test: 18,18,18;
|
||||
--bg-color-secondary: #f1f3f4;
|
||||
--border-color: #e7e8e8;
|
||||
--bg-color-secondary: #e4e4e4;
|
||||
--border-color: rgb(169, 169, 169);
|
||||
--badge-color: #a5a5a5;
|
||||
}
|
||||
|
||||
/* Dark theme colors */
|
||||
|
|
@ -1344,7 +1430,8 @@ body.dark-theme {
|
|||
--text-color: 238,238,238;
|
||||
--bg-color: 18,18,18; /*rgb code*/
|
||||
--bg-color-secondary: #333;
|
||||
--border-color: #252525;
|
||||
--border-color: rgb(238,238,238);
|
||||
--badge-color: #717171;
|
||||
}
|
||||
|
||||
/* Colored Elements */
|
||||
|
|
@ -1378,7 +1465,7 @@ x-dialog x-paper {
|
|||
|
||||
/* Image/Video/Audio Preview */
|
||||
.file-preview {
|
||||
margin: 10px -24px 40px -24px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.file-preview:empty {
|
||||
|
|
@ -1402,15 +1489,17 @@ x-dialog x-paper {
|
|||
--text-color: 238,238,238;
|
||||
--bg-color: 18,18,18; /*rgb code*/
|
||||
--bg-color-secondary: #333;
|
||||
--border-color: #252525;
|
||||
--border-color: rgb(238,238,238);
|
||||
--badge-color: #717171;
|
||||
}
|
||||
|
||||
/* Override dark mode with light mode styles if the user decides to swap */
|
||||
body.light-theme {
|
||||
--text-color: 51,51,51;
|
||||
--bg-color: 250,250,250; /*rgb code*/
|
||||
--bg-color-secondary: #f1f3f4;
|
||||
--border-color: #e7e8e8;
|
||||
--bg-color-secondary: #e4e4e4;
|
||||
--border-color: rgb(169, 169, 169);
|
||||
--badge-color: #a5a5a5;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue