From 7a4e6b17e3ef0d4876832b3cf7c86be31b77e464 Mon Sep 17 00:00:00 2001 From: DarkCat09 Date: Wed, 29 Jun 2022 14:31:04 +0400 Subject: [PATCH] First commit --- devtools.png | Bin 0 -> 17042 bytes index.html | 140 ++++++++++++++++++++++++++++++++++ script.js | 72 ++++++++++++++++++ style.css | 208 +++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 420 insertions(+) create mode 100644 devtools.png create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/devtools.png b/devtools.png new file mode 100644 index 0000000000000000000000000000000000000000..91addeac00bedc5391cf5d0e0a55e944eca8dcba GIT binary patch literal 17042 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 literal 0 HcmV?d00001 diff --git a/index.html b/index.html new file mode 100644 index 0000000..64e5e57 --- /dev/null +++ b/index.html @@ -0,0 +1,140 @@ + + + + + + CSS Element Offsets + + + +
+
+
+ margin + 10 +
+ 10 +
+ border + 2 +
+ 2 +
+ padding + 5 +
+ 5 +
+
+ 130 + x + 50 +
+
+ 5 +
+ 5 +
+ 2 +
+ 2 +
+ 10 +
+ 10 +
+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..7d77fc3 --- /dev/null +++ b/script.js @@ -0,0 +1,72 @@ +var body = document.body; +var wrapper = document.querySelector('.example-wrapper'); +var elem = document.querySelector('.element'); +var content = document.querySelector('.content'); +var hint = document.querySelector('.hint'); +var textarea = document.querySelector('.css-code'); + +const props = ['margin','border','padding']; +const sides = ['top','right','bottom','left']; + +var inputs = document.querySelectorAll('input[type=range]'); +inputs.forEach(elem => elem.addEventListener('input', valueChanged)); + +document.querySelector('input#dark-mode').addEventListener( + 'input', (ev) => checkbox(ev, body, 'dark') +); + +document.querySelector('input#show-element').addEventListener( + 'input', (ev) => checkbox(ev, wrapper, 'hidden') +); + +document.querySelector('input#show-css').addEventListener( + 'input', (ev) => checkbox( + ev, textarea, 'show', + printCss + ) +); + +if (window.matchMedia && + window.matchMedia('(prefers-color-scheme: dark)').matches) +{ + checkbox({target: {checked: true}}, body, 'dark'); +} + +function valueChanged(event) { + let el = event.target; + let id = el.id; + let span = `span[data-for=${id}]`; + document.querySelector(span).innerText = el.value; + + let val = el.value + 'px'; + body.style.setProperty(`--${id}`, val); +} + +function printCss() { + let css = document.defaultView.getComputedStyle(body); + let styles = []; + for (let prop of props) { + let txt = prop + ':'; + for (let side of sides) { + let variable = `--${prop}-${side}`; + console.log(variable); + let val = css.getPropertyValue(variable); + txt += (' ' + val.trim()); + } + txt += ';' + styles.push(txt); + } + let width = css.getPropertyValue(`--width`); + let height = css.getPropertyValue(`--height`); + styles.push(`width: ${width.trim()};`); + styles.push(`height: ${height.trim()};`); + textarea.value = styles.join('\n'); + elem.getComputedStyles(); +} + +function checkbox(ev, el, cls, cb) { + cb = cb || function(){}; + ev.target.checked ? + el.classList.add(cls) & cb() : + el.classList.remove(cls); +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..f3bf97b --- /dev/null +++ b/style.css @@ -0,0 +1,208 @@ +body { + --bg: #fff; + --fg: #000; + --margin-color: #ad8052; + --border-color: #e3c381; + --padding-color: #b7c47f; + --element-color: #87b2bc; +} +body.dark { + --bg: #2b2a33; + --fg: #eee; + --margin-color: #926538; + --border-color: #b39355; + --padding-color: #7b8653; + --element-color: #709aa3; +} + +:root { + width: 100%; + height: 100%; +} + +body { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + font-family: sans-serif; + + --accent-color: #4a93d1; + + --width: 130px; + --height: 50px; + + --margin-top: 10px; + --margin-left: 10px; + --margin-right: 10px; + --margin-bottom: 10px; + + --border-top: 2px; + --border-left: 2px; + --border-right: 2px; + --border-bottom: 2px; + + --padding-top: 5px; + --padding-left: 5px; + --padding-right: 5px; + --padding-bottom: 5px; + + background-color: var(--bg); + color: var(--fg); + transition: + color 0.4s ease 0s, + background-color 0.4s ease 0s; +} + +.example-wrapper { + margin: 5px; + flex-grow: 1; + display: flex; + justify-content: center; + align-items: center; +} + +.margin { background: var(--margin-color); } +.border { background: var(--border-color); } +.padding { background: var(--padding-color); } +.element { background: var(--element-color); } + +.description { + position: absolute; + top: 0; + left: 5px; + font-size: 0.8rem; +} + +.offsets-vert { + position: relative; + display: flex; + flex-direction: column; + align-items: center; +} +.offsets-vert > span { + padding: 5px 0; +} + +.offsets-horiz { + display: flex; + flex-direction: row; + align-items: center; +} +.offsets-horiz > span { + padding: 0 8px; +} + +.example.wrapper:not(.hidden) .margin, +.example-wrapper:not(.hidden) .padding { border: 1px dashed var(--fg); } +.example-wrapper:not(.hidden) .border, +.example-wrapper:not(.hidden) .element { border: 1px solid var(--fg); } + +.example-wrapper.hidden .offsets-vert > span, +.example-wrapper.hidden .offsets-horiz > span { + display: none; +} + +.example-wrapper.hidden .padding { + background: var(--margin-color); +} + +.example-wrapper.hidden .element { + margin-top: var(--margin-top); + margin-left: var(--margin-left); + margin-right: var(--margin-right); + margin-bottom: var(--margin-bottom); + + border-color: var(--border-color); + border-style: solid; + border-top-width: var(--border-top); + border-left-width: var(--border-left); + border-right-width: var(--border-right); + border-bottom-width: var(--border-bottom); + + padding-top: var(--padding-top); + padding-left: var(--padding-left); + padding-right: var(--padding-right); + padding-bottom: var(--padding-bottom); +} + +.element { + width: var(--width); + height: var(--height); + display: flex; + justify-content: center; + align-items: center; +} + +.controls-wrapper { + display: flex; + flex-direction: column; + margin: 5px; +} + +.controls { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + margin-top: 5px; +} + +.controls-column { + display: flex; + flex-direction: column; +} + +.control { + display: grid; + grid-template-columns: 1fr 2fr; +} + +.switches { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +input[type=range] { + width: 10rem; +} + +input[type=checkbox] { + display: none; +} +input[type=checkbox] ~ label { + display: flex; + flex-direction: row; + cursor: pointer; +} +input[type=checkbox] ~ label > span { + margin-left: 5px; +} +input[type=checkbox] ~ label::before { + content: ''; + width: 2rem; + height: 1rem; + border-radius: 5px; + background: -moz-linear-gradient(90deg, #777 50%, #bbb 51%); + background: -webkit-linear-gradient(90deg, #777 50%, #bbb 51%); + background: linear-gradient(90deg, #777 50%, #bbb 51%); +} +input[type=checkbox]:checked ~ label::before { + content: ''; + width: 2rem; + height: 1rem; + border-radius: 5px; + background: -moz-linear-gradient(270deg, var(--accent-color) 50%, #bbb 51%); + background: -webkit-linear-gradient(270deg, var(--accent-color) 50%, #bbb 51%); + background: linear-gradient(270deg, var(--accent-color) 50%, #bbb 51%); +} + +textarea { + display: none; +} +textarea.show { + display: block; +}