commit 7a4e6b17e3ef0d4876832b3cf7c86be31b77e464 Author: DarkCat09 Date: Wed Jun 29 14:31:04 2022 +0400 First commit diff --git a/devtools.png b/devtools.png new file mode 100644 index 0000000..91addea Binary files /dev/null and b/devtools.png differ 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; +}