From e99f84106735033f55dcbe6462236c5f8eb338af Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Mon, 20 Nov 2023 05:23:21 +0100 Subject: [PATCH] Change button and dialog style and add soft gradients to make it more "airy" and give it overall a more modern look; Make dark mode real black; Add overflow shadow to ReceiveText, SendText and EditPairedDevices Dialog --- public/index.html | 108 ++++++------ public/lang/en.json | 4 +- public/scripts/ui.js | 53 ++++-- public/styles.css | 407 +++++++++++++++++++++++++------------------ 4 files changed, 340 insertions(+), 232 deletions(-) diff --git a/public/index.html b/public/index.html index 6511112..fe8dd8f 100644 --- a/public/index.html +++ b/public/index.html @@ -94,7 +94,7 @@ - +
@@ -112,7 +112,13 @@
@@ -127,9 +133,9 @@
- - - + + +
@@ -142,78 +148,78 @@

- - + - - - - - - - - - - - - -
- +
@@ -243,7 +249,7 @@
-
+
@@ -256,8 +262,8 @@
- - + +
@@ -280,7 +286,7 @@

- +
@@ -313,7 +319,7 @@
-
+
@@ -325,9 +331,9 @@
- - - + + +
@@ -342,10 +348,10 @@

-
+
- +
@@ -359,8 +365,8 @@
- - + +
@@ -374,10 +380,10 @@

-
+
- +
@@ -391,9 +397,9 @@
- - - + + +
@@ -408,22 +414,22 @@

-
+
- +
-
+
- - + +
@@ -436,20 +442,20 @@

-
+
- +
-
+
-
+
- - + +
@@ -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); +} +