From 955c9c04d4e0db586ccccd50f1a09e95a9cd3946 Mon Sep 17 00:00:00 2001 From: Izzy <360964+izzy@users.noreply.github.com> Date: Fri, 21 Oct 2022 01:57:11 +0200 Subject: [PATCH 1/4] Added light/dark mode to inject + style fixes --- js/contentWorker.js | 5 ++- styles/content.css | 91 +++++++++++++++++++++++++++++++++++---------- 2 files changed, 76 insertions(+), 20 deletions(-) diff --git a/js/contentWorker.js b/js/contentWorker.js index c693d06..599181a 100644 --- a/js/contentWorker.js +++ b/js/contentWorker.js @@ -35,11 +35,13 @@ D3content = { closeElem.id = 'D3-inject-close'; closeElem.innerText = 'CLOSE [X]'; - document.body.appendChild(resizeHandle); document.body.appendChild(infoDiv); + document.getElementById('D3-inject').appendChild(resizeHandle); document.getElementById('D3-inject').appendChild(closeElem); document.getElementById('D3-inject').appendChild(heading); document.getElementById('D3-inject').appendChild(hr); + + document.body.style.marginBottom = document.defaultView.getComputedStyle(document.getElementById('D3-inject')).height; document.getElementById('D3-inject-close').addEventListener('click', function(){ document.getElementById('D3-inject_handle').parentNode.removeChild(document.getElementById('D3-inject_handle')); @@ -62,6 +64,7 @@ D3content = { y + 'px'; document.getElementById('D3-inject_handle').style.bottom = y + 'px'; + document.body.style.marginBottom = y + 'px'; } function stopDrag(e) { diff --git a/styles/content.css b/styles/content.css index 99c9dbe..08bcd65 100644 --- a/styles/content.css +++ b/styles/content.css @@ -1,3 +1,61 @@ +@media (prefers-color-scheme: dark) { + + #D3-inject, + #D3-inject-heading, + #D3-inject-close, + .D3-inject-heading { + color: #DDD !important; + } + + #D3-inject { + background: #202124; + /* border-top: 1px solid #DDD; */ + } + + .D3-inject-text { + background-color: #444; + border: 1px solid #999; + color: #CCC; + } + + #D3-inject > hr { + border-bottom: 1px solid #999; + } + + #D3-inject_handle { + background: #333; + } + +} + +@media (prefers-color-scheme: light) { + + #D3-inject, + #D3-inject-heading, + #D3-inject-close, + .D3-inject-heading { + color: #010409 !important; + } + + #D3-inject { + background: #CCC; + /* border-top: 1px solid grey; */ + } + + .D3-inject-text { + background-color: #CCC; + border: 1px solid #999; + } + + #D3-inject > hr { + border-bottom: 1px solid #444; + } + + #D3-inject_handle { + background: #888; + } +} + #D3-inject { z-index: 1000; position: fixed; @@ -5,13 +63,15 @@ height: 200px; bottom: 0; left: 0; - background: lightgrey; - border-top: 1px solid grey; overflow: auto; - -webkit-box-shadow: 0px 0px 30px #000; + box-shadow: 0px 0px 30px #000; text-align: left !important; } +#D3-inject > hr { + margin: 0.3rem; +} + #D3-inject-close { z-index: 1100; float: right; @@ -31,36 +91,29 @@ #D3-inject-heading, #D3-inject-close, .D3-inject-heading { - color: black !important; margin: 0; padding: .5rem; } .D3-inject-text { - word-wrap: break-word; - background-color: #CCC; - border: 1px solid #999; - border-radius: 2px; + white-space: break-spaces; + border-radius: 0.2rem; margin: .3rem .5rem .5rem; + padding: 0.4rem; + width: 96%; + overflow: auto; } -div.handle { - background: #333; +#D3-inject_handle { z-index: 2; + bottom: 200px; + z-index: 1002; position: absolute; -} - -div.handle.vertical { width: 100%; height: 9px; cursor: row-resize; z-index: 1; background-position: center -19px; left: 0; -} - -#D3-inject_handle { - bottom: 200px; - z-index: 1002; - position: fixed; + top: 0; } \ No newline at end of file From 5c4c11aa3bc686d8871a4f2bdb4cd06773efc09a Mon Sep 17 00:00:00 2001 From: Izzy <360964+izzy@users.noreply.github.com> Date: Fri, 21 Oct 2022 20:51:27 +0200 Subject: [PATCH 2/4] Removed commented out code --- styles/content.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/styles/content.css b/styles/content.css index 08bcd65..87930f4 100644 --- a/styles/content.css +++ b/styles/content.css @@ -9,7 +9,6 @@ #D3-inject { background: #202124; - /* border-top: 1px solid #DDD; */ } .D3-inject-text { @@ -39,7 +38,6 @@ #D3-inject { background: #CCC; - /* border-top: 1px solid grey; */ } .D3-inject-text { From 24fa16fb9c88e910d2103d84edc0e412134b575b Mon Sep 17 00:00:00 2001 From: Izzy <360964+izzy@users.noreply.github.com> Date: Fri, 21 Oct 2022 23:27:37 +0200 Subject: [PATCH 3/4] Added light/dark mode to injected div --- images/clipboard.png | Bin 1154 -> 0 bytes images/cross.png | Bin 655 -> 0 bytes images/grid.png | Bin 195 -> 0 bytes images/key.png | Bin 455 -> 0 bytes images/popup_menu_background.png | Bin 3170 -> 0 bytes images/tick.png | Bin 537 -> 0 bytes js/contentWorker.js | 61 ++++++++++++++----------------- styles/content.css | 39 +++++++++++++++----- 8 files changed, 57 insertions(+), 43 deletions(-) delete mode 100644 images/clipboard.png delete mode 100644 images/cross.png delete mode 100644 images/grid.png delete mode 100644 images/key.png delete mode 100644 images/popup_menu_background.png delete mode 100644 images/tick.png diff --git a/images/clipboard.png b/images/clipboard.png deleted file mode 100644 index 8815d917b32b5ae6ca1c8e4984665d764dba1fd2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1154 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 diff --git a/images/tick.png b/images/tick.png deleted file mode 100644 index a9925a06ab02db30c1e7ead9c701c15bc63145cb..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 537 zcmV+!0_OdRP)Hs{AQG2a)rMyf zFQK~pm1x3+7!nu%-M`k}``c>^00{o_1pjWJUTfl8mg=3qGEl8H@}^@w`VUx0_$uy4 z2FhRqKX}xI*?Tv1DJd8z#F#0c%*~rM30HE1@2o5m~}ZyoWhqv>ql{V z1ZGE0lgcoK^lx+eqc*rAX1Ky;Xx3U%u#zG!m-;eD1Qsn@kf3|F9qz~|95=&g3(7!X zB}JAT>RU;a%vaNOGnJ%e1=K6eAh43c(QN8RQ6~GP%O}Jju$~Ld*%`mO1p hr { @@ -50,11 +50,12 @@ } #D3-inject_handle { - background: #888; + background: #575757; } } #D3-inject { + box-sizing: border-box; z-index: 1000; position: fixed; width: 100%; @@ -88,7 +89,8 @@ #D3-inject, #D3-inject-heading, #D3-inject-close, -.D3-inject-heading { +.D3-inject-heading, +.D3-inject-text { margin: 0; padding: .5rem; } @@ -97,21 +99,38 @@ white-space: break-spaces; border-radius: 0.2rem; margin: .3rem .5rem .5rem; - padding: 0.4rem; - width: 96%; overflow: auto; + width: fit-content; + max-width: calc(100% - 3rem); + margin-right: 0; } #D3-inject_handle { - z-index: 2; bottom: 200px; z-index: 1002; - position: absolute; + position: fixed; width: 100%; height: 9px; cursor: row-resize; z-index: 1; background-position: center -19px; left: 0; - top: 0; +} + +#D3-inject ::-webkit-scrollbar { + width: .4rem; + height: .4rem; + border-radius: 0.4rem; +} + +#D3-inject ::-webkit-scrollbar-track { + background: #f1f1f1; +} + +#D3-inject ::-webkit-scrollbar-thumb { + background: #888; +} + +#D3-inject ::-webkit-scrollbar-thumb:hover { + background: #555; } \ No newline at end of file From c067cc22056cb82820dae51d50cbc72d31582b13 Mon Sep 17 00:00:00 2001 From: Izzy <360964+izzy@users.noreply.github.com> Date: Fri, 21 Oct 2022 23:29:30 +0200 Subject: [PATCH 4/4] Updated version number --- CHANGELOG.md | 2 ++ manifest.json | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cbf8d09..24c7ac1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,7 @@ CHANGELOG ============================= +* 5.0.1 + * Added light/dark mode style to injected div * 5.0.0 * Upgrade to Extension Manifest v3 * 4.9.0 diff --git a/manifest.json b/manifest.json index 79d1a68..4afe358 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 3, "name": "__MSG_extName__", - "version": "5.0.0", + "version": "5.0.1", "description": "__MSG_extDescription__", "options_ui": { "page": "html/menu_ui.html",