+
-
+
-
-
+
+
@@ -458,10 +464,10 @@
-
+
-
+
diff --git a/public/lang/en.json b/public/lang/en.json
index 3315a89..f7a3c44 100644
--- a/public/lang/en.json
+++ b/public/lang/en.json
@@ -69,9 +69,9 @@
"share": "Share",
"download": "Download",
"send-message-title": "Send Message",
- "send-message-to": "Send a Message to",
+ "send-message-to": "To:",
"message_title": "Insert message to send",
- "message_placeholder": "Message",
+ "message_placeholder": "Text",
"send": "Send",
"receive-text-title": "Message Received",
"copy": "Copy",
diff --git a/public/scripts/ui.js b/public/scripts/ui.js
index 932d9de..ad2bfde 100644
--- a/public/scripts/ui.js
+++ b/public/scripts/ui.js
@@ -392,6 +392,8 @@ class PeersUI {
class PeerUI {
+ static _badgeClassNames = ["badge-room-ip", "badge-room-secret", "badge-room-public-id"];
+
constructor(peer, connectionHash) {
this._peer = peer;
this._connectionHash =
@@ -1266,8 +1268,8 @@ class PairDeviceDialog extends Dialog {
// Display the QR code for the url
const qr = new QRCode({
content: this._getPairUrl(),
- width: 150,
- height: 150,
+ width: 130,
+ height: 130,
padding: 1,
background: 'rgb(250,250,250)',
color: 'rgb(18, 18, 18)',
@@ -1466,7 +1468,7 @@ class EditPairedDevicesDialog extends Dialog {
-
+
`
$pairedDevice.querySelector('input[type="checkbox"]').addEventListener('click', e => {
@@ -1500,7 +1502,19 @@ class EditPairedDevicesDialog extends Dialog {
}
_onEditPairedDevices() {
- this._initDOM().then(_ => this.show());
+ this._initDOM()
+ .then(_ => {
+ this._evaluateOverflowing();
+ this.show();
+ });
+ }
+
+ _evaluateOverflowing() {
+ if (this.$pairedDevicesWrapper.clientHeight < this.$pairedDevicesWrapper.scrollHeight) {
+ this.$pairedDevicesWrapper.classList.add('overflowing');
+ } else {
+ this.$pairedDevicesWrapper.classList.remove('overflowing');
+ }
}
_clearRoomSecrets() {
@@ -1617,8 +1631,8 @@ class PublicRoomDialog extends Dialog {
// Display the QR code for the url
const qr = new QRCode({
content: this._getShareRoomUrl(),
- width: 150,
- height: 150,
+ width: 130,
+ height: 130,
padding: 1,
background: 'rgb(250,250,250)',
color: 'rgb(18, 18, 18)',
@@ -1801,12 +1815,21 @@ class SendTextDialog extends Dialog {
} else {
this.$submit.removeAttribute('disabled');
}
+ this._evaluateOverflowing();
+ }
+
+ _evaluateOverflowing() {
+ if (this.$text.clientHeight < this.$text.scrollHeight) {
+ this.$text.classList.add('overflowing');
+ } else {
+ this.$text.classList.remove('overflowing');
+ }
}
_onRecipient(peerId, deviceName) {
this.correspondingPeerId = peerId;
this.$peerDisplayName.innerText = deviceName;
- this.$peerDisplayName.classList.remove("badge-room-ip", "badge-room-secret", "badge-room-public-id");
+ this.$peerDisplayName.classList.remove(...PeerUI._badgeClassNames);
this.$peerDisplayName.classList.add($(peerId).ui._badgeClassName());
this.show();
@@ -1878,7 +1901,7 @@ class ReceiveTextDialog extends Dialog {
_showReceiveTextDialog(text, peerId) {
this.$displayName.innerText = $(peerId).ui._displayName();
- this.$displayName.classList.remove("badge-room-ip", "badge-room-secret", "badge-room-public-id");
+ this.$displayName.classList.remove(...PeerUI._badgeClassNames);
this.$displayName.classList.add($(peerId).ui._badgeClassName());
this.$text.innerText = text;
@@ -1892,12 +1915,22 @@ class ReceiveTextDialog extends Dialog {
});
}
+ this._evaluateOverflowing();
+
this._setDocumentTitleMessages();
changeFavicon("images/favicon-96x96-notification.png");
this.show();
}
+ _evaluateOverflowing() {
+ if (this.$text.clientHeight < this.$text.scrollHeight) {
+ this.$text.classList.add('overflowing');
+ } else {
+ this.$text.classList.remove('overflowing');
+ }
+ }
+
_setDocumentTitleMessages() {
document.title = !this._receiveTextQueue.length
? `${ Localization.getTranslation("document-titles.message-received") } - PairDrop`
@@ -2774,8 +2807,8 @@ class BackgroundCanvas {
drawCircle(ctx, radius) {
ctx.beginPath();
ctx.lineWidth = 2;
- let opacity = Math.max(0, 0.3 * (1 - 1 * radius / Math.max(this.w, this.h)));
- ctx.strokeStyle = `rgba(128, 128, 128, ${opacity})`;
+ let opacity = Math.max(0, 0.3 * (1 - 1.2 * radius / Math.max(this.w, this.h)));
+ ctx.strokeStyle = `rgba(165,165,165, ${opacity})`;
ctx.arc(this.x0, this.y0, radius, 0, 2 * Math.PI);
ctx.stroke();
}
diff --git a/public/styles.css b/public/styles.css
index cfed5db..4d5d777 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -1,15 +1,3 @@
-/* Constants */
-
-:root {
- --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;
-}
-
/* Layout */
html,
@@ -47,6 +35,10 @@ html {
width: 100%;
}
+.p1 {
+ padding: 10px;
+}
+
.row-reverse {
display: flex;
flex-direction: row-reverse;
@@ -94,7 +86,7 @@ header {
padding: 8px 12px;
box-sizing: border-box;
width: 100vw;
- z-index: 2;
+ z-index: 20;
top: 0;
right: 0;
}
@@ -308,7 +300,7 @@ x-peers {
justify-content: center;
z-index: 2;
- transition: --bg-color 0.5s ease;
+ transition: background-color 0.5s ease;
overflow-y: scroll;
overflow-x: hidden;
overscroll-behavior-x: none;
@@ -321,16 +313,17 @@ x-peers {
margin-left: 20px;
}
-x-peers.overflowing {
- background: /* Shadow covers */ linear-gradient(rgb(var(--bg-color)) 30%, rgba(var(--bg-color), 0)),
- linear-gradient(rgba(var(--bg-color), 0), rgb(var(--bg-color)) 70%) 0 100%,
- /* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(var(--text-color), .2), rgba(var(--text-color), 0)),
- radial-gradient(farthest-side at 50% 100%, rgba(var(--text-color), .2), rgba(var(--text-color), 0)) 0 100%;
-
+.overflowing {
+ background:
+ /* Shadow covers */
+ linear-gradient(rgb(var(--shadow-color-cover-rgb)) 30%, rgba(var(--shadow-color-cover-rgb), 0)),
+ linear-gradient(rgba(var(--shadow-color-cover-rgb), 0), rgb(var(--shadow-color-cover-rgb)) 70%) 0 100%,
+ /* Shadows */
+ radial-gradient(farthest-side at 50% 0, rgba(var(--shadow-color-rgb), .2), rgba(var(--shadow-color-rgb), 0)),
+ radial-gradient(farthest-side at 50% 100%, rgba(var(--shadow-color-rgb), .2), rgba(var(--shadow-color-rgb), 0))
+ 0 100%;
background-repeat: no-repeat;
- background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
-
- /* Opera doesn't support this in the shorthand */
+ background-size: 100% 60px, 100% 60px, 100% 24px, 100% 24px;
background-attachment: local, local, scroll, scroll;
}
@@ -483,48 +476,61 @@ x-peer .icon-wrapper {
width: var(--icon-size);
padding: 12px;
border-radius: 50%;
- background: var(--primary-color);
+ background: var(--accent-color);
+ background-image: linear-gradient(45deg, var(--accent-color) 40%, color-mix(in srgb, var(--accent-color) 70%, white) 100%);
color: white;
display: flex;
}
x-peer.type-secret .icon-wrapper {
- background: var(--paired-device-color);
+ --accent-color: var(--paired-device-color);
}
x-peer:not(.type-ip):not(.type-secret).type-public-id .icon-wrapper {
- background: var(--public-room-color);
+ --accent-color: var(--public-room-color);
}
-x-peer x-icon > .highlight-wrapper {
+.highlight-wrapper {
align-self: center;
align-items: center;
margin: 7px auto 0;
height: 6px;
}
-x-peer x-icon > .highlight-wrapper > .highlight {
+.highlight {
width: 15px;
height: 6px;
border-radius: 4px;
margin-left: 1px;
margin-right: 1px;
+ --highlight-color: var(--badge-color);
+ background-color: var(--highlight-color);
+ background-image: linear-gradient(180deg, color-mix(in srgb, var(--highlight-color) 80%, white) 0%, var(--highlight-color) 50%);
+ background-image: linear-gradient(180deg, var(--highlight-color) 0%, color-mix(in srgb, var(--highlight-color) 90%, black));
+}
+
+.highlight-room-ip {
+ --highlight-color: var(--primary-color);
+}
+
+.highlight-room-secret {
+ --highlight-color: var(--paired-device-color);
+}
+
+.highlight-room-public-id {
+ --highlight-color: var(--public-room-color);
+}
+
+x-peer:not(.type-ip) .highlight-room-ip {
display: none;
}
-x-peer.type-ip x-icon > .highlight-wrapper > .highlight.highlight-room-ip {
- background-color: var(--primary-color);
- display: inline;
+x-peer:not(.type-secret) .highlight-room-secret {
+ display: none;
}
-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(.type-public-id) .highlight-room-public-id {
+ display: none;
}
x-peer:not([status]):hover x-icon,
@@ -614,15 +620,22 @@ footer .logo {
.discovery-wrapper {
font-size: 14px;
- margin: 10px auto auto;
- border: 3px solid var(--border-color);
- border-radius: 0.5rem;
+ margin: 15px auto auto;
+ border: 2px solid var(--border-color);
padding: 2px;
background-color: rgb(var(--bg-color));
transition: background-color 0.5s ease;
min-height: 24px;
}
+.discovery-wrapper.column {
+ border-radius: 16px;
+}
+
+.discovery-wrapper.row {
+ border-radius: 12px;
+}
+
/*You can be discovered wrapper*/
.discovery-wrapper > div:first-of-type {
padding-left: 4px;
@@ -636,28 +649,28 @@ footer .logo {
}
.badge {
- border-radius: 0.3rem/0.3rem;
+ border-radius: 0.4rem;
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-gradient {
+ background-image: linear-gradient(180deg, color-mix(in srgb, var(--badge-color) 80%, white) 0%, var(--badge-color) 50%);
+}
+
.badge-room-ip {
- background-color: var(--primary-color);
- border-color: var(--primary-color);
+ --badge-color: var(--primary-color);
}
.badge-room-secret {
- background-color: var(--paired-device-color);
- border-color: var(--paired-device-color);
+ --badge-color: var(--paired-device-color);
}
.badge-room-public-id {
- background-color: var(--public-room-color);
- border-color: var(--public-room-color);
+ --badge-color: var(--public-room-color);
}
.known-as-wrapper {
@@ -707,11 +720,10 @@ html[dir="rtl"] #edit-pen {
/* Dialog */
x-dialog x-background {
- background: rgba(0, 0, 0, 0.61);
- z-index: 10;
+ background: rgba(0, 0, 0, 0.8);
+ z-index: 30;
transition: opacity 300ms;
will-change: opacity;
- padding: 15px;
overflow: overlay;
}
@@ -720,8 +732,7 @@ x-dialog x-paper {
flex-direction: column;
width: calc(100vw - 10px);
z-index: 3;
- background: white;
- border-radius: 8px;
+ border-radius: 30px;
max-width: 400px;
overflow: hidden;
box-sizing: border-box;
@@ -740,8 +751,8 @@ x-dialog x-paper {
x-paper > .row:first-of-type {
background-color: var(--accent-color);
- border-bottom: solid 4px var(--border-color);
- margin-bottom: 10px;
+ padding: 10px;
+ margin-bottom: 5px;
}
x-paper > .row:first-of-type h2 {
@@ -792,7 +803,6 @@ x-dialog a {
width: 100%;
display: flex;
justify-content: center;
- margin-top: 10px;
}
.input-key-container > input {
@@ -825,20 +835,22 @@ x-dialog a {
-moz-user-select: text;
user-select: text;
display: inline-block;
- font-size: 50px;
+ font-size: 45px;
letter-spacing: min(calc((100vw - 80px - 99px) / 100 * 7), 20px);
text-indent: calc(0.5 * (11px + min(calc((100vw - 80px - 99px) / 100 * 6), 28px)));
- margin: 25px 0;
+ margin: 10px 0;
}
.key-qr-code {
- margin: 16px;
width: fit-content;
align-self: center;
+ margin-top: 15px;
+ margin-bottom: 10px;
}
.key-instructions {
flex-direction: column;
+ margin: 0;
}
x-dialog h2 {
@@ -847,19 +859,19 @@ x-dialog h2 {
}
x-dialog hr {
- height: 3px;
+ height: 1px;
border: none;
width: 100%;
background-color: var(--border-color);
}
.hr-note {
- margin-top: 10px;
- margin-bottom: 20px;
+ margin-top: 23px;
+ margin-bottom: 31px;
}
.hr-note hr {
- margin-bottom: -2px;
+ margin-bottom: -1px;
}
.hr-note > div {
@@ -870,9 +882,9 @@ x-dialog hr {
.hr-note > div > span {
padding: 3px 10px;
- border-radius: 10px;
+ border-radius: 20px;
color: rgb(var(--text-color));
- background-color: rgb(var(--bg-color));
+ background-color: var(--dialog-bg-color);
border: var(--border-color) solid 3px;
text-transform: uppercase;
}
@@ -891,20 +903,10 @@ x-dialog hr {
}
.paired-devices-wrapper {
- border-top: solid 4px var(--paired-device-color);
+ margin-top: -5px;
border-bottom: solid 4px var(--paired-device-color);
max-height: 65vh;
overflow: scroll;
- background: /* Shadow covers */ linear-gradient(rgb(var(--bg-color)) 30%, rgba(var(--bg-color), 0)),
- linear-gradient(rgba(var(--bg-color), 0), rgb(var(--bg-color)) 70%) 0 100%,
- /* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(var(--text-color), .3), rgba(var(--text-color), 0)),
- radial-gradient(farthest-side at 50% 100%, rgba(var(--text-color), .3), rgba(var(--text-color), 0)) 0 100%;
-
- background-repeat: no-repeat;
- background-size: 100% 80px, 100% 80px, 100% 24px, 100% 24px;
-
- /* Opera doesn't support this in the shorthand */
- background-attachment: local, local, scroll, scroll;
}
.paired-device {
@@ -968,44 +970,41 @@ x-dialog hr {
text-overflow: ellipsis;
}
-/* Receive Dialog */
-
-x-paper > .row {
- padding: 10px;
-}
-
/* button row*/
x-paper > .button-row {
- border-top: solid 3px var(--border-color);
height: 50px;
- margin-top: 10px;
+ margin: 5px 10px 10px;
}
-x-paper > .button-row > .button {
+x-paper > .button-row > .btn {
height: 100%;
width: 100%;
}
-html:not([dir="rtl"]) x-paper > .button-row > .button:not(:first-child) {
- border-right: solid 1.5px var(--border-color);
+html:not([dir="rtl"]) x-paper > .button-row > .btn:not(:first-child) {
+ margin-right: 5px;
}
-html:not([dir="rtl"]) x-paper > .button-row > .button:not(:last-child) {
- border-left: solid 1.5px var(--border-color);
+html:not([dir="rtl"]) x-paper > .button-row > .btn:not(:last-child) {
+ margin-left: 5px;
}
-html[dir="rtl"] x-paper > .button-row > .button:not(:first-child) {
- border-left: solid 1.5px var(--border-color);
+html[dir="rtl"] x-paper > .button-row > .btn:not(:first-child) {
+ margin-right: 5px;
}
-html[dir="rtl"] x-paper > .button-row > .button:not(:last-child) {
- border-right: solid 1.5px var(--border-color);
+html[dir="rtl"] x-paper > .button-row > .btn:not(:last-child) {
+ margin-left: 5px;
}
.language-buttons > button > span {
margin: 0 0.3em;
}
+.language-buttons > button {
+ min-height: 36px;
+}
+
.file-description {
max-width: 100%;
}
@@ -1034,13 +1033,20 @@ x-dialog .dialog-subheader {
padding-bottom: 16px;
}
-#send-text-dialog .display-name-wrapper {
+.display-name-wrapper {
padding-bottom: 0;
}
#send-text-dialog,
#receive-text-dialog {
font-size: 16px; /* prevents auto-zoom on edit */
+ --shadow-color-rgb: var(--shadow-color-secondary-rgb);
+ --shadow-color-cover-rgb: var(--shadow-color-secondary-cover-rgb);
+}
+
+#edit-paired-devices-dialog {
+ --shadow-color-rgb: var(--shadow-color-dialog-rgb);
+ --shadow-color-cover-rgb: var(--shadow-color-dialog-cover-rgb);
}
#text-input:before {
@@ -1052,6 +1058,7 @@ x-dialog .dialog-subheader {
#receive-text-dialog #text {
word-break: break-all;
max-height: 400px;
+ padding: 10px;
overflow-x: hidden;
overflow-y: scroll;
-webkit-user-select: text;
@@ -1073,17 +1080,12 @@ x-dialog .dialog-subheader {
pointer-events: none;
}
-.row-separator {
- border-bottom: solid 2.5px var(--border-color);
- margin: auto -24px;
-}
-
#base64-paste-btn,
#base64-paste-dialog .textarea {
width: 100%;
height: 40vh;
border: solid 12px #438cff;
- border-radius: 8px;
+ border-radius: 20px;
}
#base64-paste-dialog .textarea {
@@ -1105,10 +1107,9 @@ x-dialog .dialog-subheader {
/* Button */
-.button {
+.btn {
padding: 2px 16px 0;
box-sizing: border-box;
- min-height: 36px;
font-size: 14px;
line-height: 24px;
font-weight: 700;
@@ -1122,13 +1123,13 @@ x-dialog .dialog-subheader {
overflow: hidden;
}
-.button[disabled] {
- color: #5B5B66;
+.btn[disabled] {
+ color: var(--btn-disabled-color);
cursor: not-allowed;
}
-.button,
+.btn,
.icon-button {
position: relative;
display: flex;
@@ -1140,7 +1141,7 @@ x-dialog .dialog-subheader {
outline: none;
}
-.button:before,
+.btn:before,
.icon-button:before {
content: '';
position: absolute;
@@ -1148,41 +1149,33 @@ x-dialog .dialog-subheader {
left: 0;
right: 0;
bottom: 0;
- background: currentColor;
opacity: 0;
+ background-color: var(--accent-color);
transition: opacity 300ms;
}
-.button:not([disabled]):hover:before,
+.btn:not([disabled]):hover:before,
.icon-button:hover:before {
opacity: 0.1;
}
-.button[selected],
+.btn[selected],
.icon-button[selected] {
opacity: 0.1;
}
-#cancel-paste-mode {
- z-index: 2;
- margin: 0;
- padding: 0;
- position: absolute;
- top: 0;
- right: 0;
- left: 0;
- width: 100vw;
- height: 56px;
- background-color: var(--primary-color);
- color: rgb(238, 238, 238);
-}
-
-.button:focus:before,
+.btn:focus:before,
.icon-button:focus:before {
opacity: 0.2;
}
+.btn-rounded {
+ border-radius: 12px;
+}
+.btn-grey {
+ background-color: var(--bg-color-secondary);
+}
button::-moz-focus-inner {
border: 0;
@@ -1199,22 +1192,37 @@ button::-moz-focus-inner {
border-radius: 50%;
}
+/* Paste mode */
+#cancel-paste-mode {
+ z-index: 21;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ width: 100vw;
+ height: 56px;
+ background-color: var(--primary-color);
+ color: rgb(238, 238, 238);
+}
+
/* Text Input */
.textarea {
box-sizing: border-box;
border: none;
outline: none;
padding: 16px 24px;
- border-radius: 8px;
+ border-radius: 12px;
font-size: inherit;
font-family: inherit;
- background: #f1f3f4;
display: block;
overflow: auto;
resize: none;
line-height: 16px;
- max-height: calc(100vh - 254px);
- white-space: pre;
+ max-height: 300px;
+ word-break: break-word;
+ word-wrap: anywhere;
}
@@ -1222,7 +1230,7 @@ button::-moz-focus-inner {
#about {
color: white;
- z-index: 11;
+ z-index: 32;
overflow: hidden;
pointer-events: none;
text-align: center;
@@ -1273,10 +1281,11 @@ button::-moz-focus-inner {
top: calc(28px - var(--size-half));
width: var(--size);
height: var(--size);
- border-radius: 50%;
- background: var(--primary-color);
- transform: scale(0);
z-index: -1;
+ background: var(--primary-color);
+ background-image: radial-gradient(circle at calc(50% - 36px), var(--accent-color) 0%, color-mix(in srgb, var(--accent-color) 40%, black) 80%);
+ --crop-size: 0px;
+ clip-path: circle(var(--crop-size));
}
html:not([dir="rtl"]) #about x-background {
@@ -1290,12 +1299,12 @@ html[dir="rtl"] #about x-background {
/* Hack such that initial scale(0) isn't animated */
#about x-background {
- will-change: transform;
- transition: transform 800ms cubic-bezier(0.77, 0, 0.175, 1);
+ will-change: clip-path;
+ transition: clip-path 800ms cubic-bezier(0.77, 0, 0.175, 1);
}
#about:target x-background {
- transform: scale(1);
+ --crop-size: var(--size);
}
#about .row a {
@@ -1366,15 +1375,15 @@ x-toast {
width: 100%;
max-width: 344px;
background-color: rgb(var(--text-color));
- color: rgb(var(--bg-color));
+ color: var(--dialog-bg-color);
align-items: center;
box-sizing: border-box;
padding: 8px 24px;
- z-index: 20;
+ z-index: 40;
transition: opacity 200ms, transform 300ms ease-out;
cursor: default;
line-height: 24px;
- border-radius: 8px;
+ border-radius: 12px;
pointer-events: all;
}
@@ -1454,27 +1463,93 @@ x-peers:empty~x-instructions {
}
}
+/* Constants */
+
+:root {
+ --icon-size: 24px;
+ --peer-width: 120px;
+ color-scheme: light dark;
+}
+
/*
Color Themes
*/
/* Default colors */
body {
+ /* Constant colors */
+ --primary-color: #4285f4;
+ --paired-device-color: #00a69c;
+ --public-room-color: #db8500;
+ --accent-color: var(--primary-color);
+ --btn-disabled-color: #5B5B66;
+
+ /* Light theme colors */
--text-color: 51,51,51;
- --bg-color: 250,250,250; /*rgb code*/
- --bg-color-test: 18,18,18;
- --bg-color-secondary: #e4e4e4;
+ --dialog-bg-color: #fff;
+ --bg-color: 255,255,255;
+ --bg-color-secondary: rgba(128, 128, 128, 0.1);
--border-color: rgb(169, 169, 169);
--badge-color: #a5a5a5;
+ --bg-color-secondary: #f2f2f2;
+
+ /* shadows */
+ --shadow-color-rgb: var(--text-color);
+ --shadow-color-cover-rgb: var(--bg-color);
+ --shadow-color-secondary-rgb: 0,0,0;
+ --shadow-color-secondary-cover-rgb: 242,242,242;
+ --shadow-color-dialog-rgb: 0,0,0;
+ --shadow-color-dialog-cover-rgb: 242,242,242;
}
/* Dark theme colors */
body.dark-theme {
--text-color: 238,238,238;
- --bg-color: 18,18,18; /*rgb code*/
- --bg-color-secondary: #333;
- --border-color: rgb(238,238,238);
+ --dialog-bg-color: #121212;
+ --bg-color: 0,0,0;
+ --bg-color-secondary: #262628;
+ --border-color: rgb(91, 91, 91);
--badge-color: #717171;
+
+ --shadow-color-secondary-rgb: 255,255,255;
+ --shadow-color-secondary-cover-rgb: 38,38,38;
+ --shadow-color-dialog-rgb: 255,255,255;
+ --shadow-color-dialog-cover-rgb: 38,38,38;
+}
+
+/* Styles for users who prefer dark mode at the OS level */
+@media (prefers-color-scheme: dark) {
+
+ /* defaults to dark theme */
+ body {
+ --text-color: 238,238,238;
+ --dialog-bg-color: #121212;
+ --bg-color-secondary: #262628;
+ --bg-color: 0,0,0;
+ --border-color: rgb(91, 91, 91);
+ --badge-color: #717171;
+
+ --shadow-color-secondary-rgb: 255,255,255;
+ --shadow-color-secondary-cover-rgb: 38,38,38;
+ --shadow-color-dialog-rgb: 255,255,255;
+ --shadow-color-dialog-cover-rgb: 38,38,38;
+ }
+
+
+ /* Override dark mode with light mode styles if the user decides to swap */
+ body.light-theme {
+ --text-color: 51,51,51;
+ --dialog-bg-color: #fff;
+ --bg-color: 255,255,255;
+ --bg-color-secondary: #f2f2f2;
+ --border-color: rgb(169, 169, 169);
+ --badge-color: #a5a5a5;
+
+ --shadow-color-secondary-rgb: 0,0,0;
+ --shadow-color-secondary-cover-rgb: 242,242,242;
+ --shadow-color-dialog-rgb: 0,0,0;
+ --shadow-color-dialog-cover-rgb: 242,242,242;
+ }
}
/* Colored Elements */
@@ -1485,7 +1560,7 @@ body {
}
x-dialog x-paper {
- background-color: rgb(var(--bg-color));
+ background-color: var(--dialog-bg-color);
}
.textarea {
@@ -1524,28 +1599,6 @@ x-dialog x-paper {
display: block;
}
-/* Styles for users who prefer dark mode at the OS level */
-@media (prefers-color-scheme: dark) {
-
- /* defaults to dark theme */
- body {
- --text-color: 238,238,238;
- --bg-color: 18,18,18; /*rgb code*/
- --bg-color-secondary: #333;
- --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: #e4e4e4;
- --border-color: rgb(169, 169, 169);
- --badge-color: #a5a5a5;
- }
-}
-
/*
Edge specific styles
@@ -1591,3 +1644,19 @@ See note here: https://developer.mozilla.org/en-US/docs/Web/CSS/user-select */
-webkit-user-select: text;
user-select: text;
}
+
+/* Gradient for wifi-tether icon */
+#primaryGradient .start-color {
+ stop-color: var(--primary-color);
+}
+
+@supports (stop-color: color-mix(in srgb, blue 50%, black)) {
+ #primaryGradient .start-color {
+ stop-color: color-mix(in srgb, var(--primary-color) 80%, white);
+ }
+}
+
+#primaryGradient .stop-color {
+ stop-color: var(--primary-color);
+}
+