OpenSmarts

From 875dda51134d3e10c03e5fabd621d7ae4afb2c15 Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Sat, 9 Nov 2024 03:55:01 -0500 Subject: A few widgets --- index.html | 22 +++-- scripts/gui-common/widgets.js | 0 styles/main.css | 9 ++ styles/widgets.css | 187 +++++++++++++++++++++++++++++++++++++++++- 4 files changed, 209 insertions(+), 9 deletions(-) create mode 100644 scripts/gui-common/widgets.js diff --git a/index.html b/index.html index 88ee401..6c35e91 100644 --- a/index.html +++ b/index.html @@ -5,20 +5,30 @@ OpenSmarts + -

+ +

+ + + + + + + + \ No newline at end of file diff --git a/scripts/gui-common/widgets.js b/scripts/gui-common/widgets.js new file mode 100644 index 0000000..e69de29 diff --git a/styles/main.css b/styles/main.css index bddd9c2..0472fab 100644 --- a/styles/main.css +++ b/styles/main.css @@ -6,6 +6,7 @@ html, body { body { min-height: 100vh; margin:0; + background-color: #eee; } user { @@ -51,4 +52,12 @@ nav .nav-el { nav .nav-el:hover { color: white; +} + +content { + display: block; + margin-top: 100px; + margin-left: 50px; + margin-right: 50px; + margin-bottom:50px; } \ No newline at end of file diff --git a/styles/widgets.css b/styles/widgets.css index a8310e3..bea8084 100644 --- a/styles/widgets.css +++ b/styles/widgets.css @@ -1,8 +1,189 @@ .widget { - background-color: #ddd; + display:inline-block; + + background-color: var(--top-color); + box-shadow: 1px 1px var(--side-color), 3px 3px var(--side-color), 5px 5px var(--side-color); + + padding:20px; + margin: 10px 15px 15px 10px; border-radius: 10px; + box-sizing: border-box; + + transition-duration: 0.15s; + + overflow: hidden; + + --base-unit: 50px; + + min-width: var(--base-unit); + min-height: var(--base-unit); + + cursor:pointer; +} + +.widget:hover { + background-color: var(--top-color-hover); +} + +.widget:active { + background-color: var(--top-color-active); +} + +/** + Button widget that a lot of other widgets build from +*/ + +.button { + align-content: center; + text-align: center; + + user-select: none; + -webkit-user-select: none; } +.button:active { + transform:translate(5px, 5px); + box-shadow: none; + border:none; +} + +/** + Toggle widget for things like power buttons +*/ + .toggle { - background-color: gray; -} \ No newline at end of file + width: calc(3 * var(--base-unit)); + height: calc(3 * var(--base-unit)); + --top-color: #888; + --top-color-hover: #aaa; + --top-color-active: #aaa; + --side-color: #444; + color: #222; + font-weight: bold; +} + +.toggle.active { + --top-color: #dd3; + --top-color-hover: #ee7; + --top-color-active: #ee7; + color: rgb(255, 128, 0); + --side-color: rgb(255, 128, 0); +} + +/** + Slider widget (add h class for horizontal) +*/ + +.slider { + --top-color: #888; + --top-color-hover: #aaa; + --top-color-active: #ccc; + --side-color: #444; + width: var(--base-unit); + height: calc(3 * var(--base-unit)); + position: relative; +} + +.slider.h { + height: var(--base-unit); + width: calc(3 * var(--base-unit)); +} + +.slider::before { + border-radius: 10px; + position:absolute; + bottom: 0; + left: 0; + height: calc(100% * var(--fill-percent)); + width: 100%; + background-color: #0084ff; + + transition-duration: 0.15s; + + content: ''; +} + +.slider.h::before { + width: calc(100% * var(--fill-percent)); + height: 100%; +} + +.slider:hover::before { + background-color: #2696ff; +} + +.slider:active::before { + background-color: #3ea2ff; +} + +.slider::after { + position:absolute; + top: 10px; + left: calc(50% - 2px); + height: calc(100% - 20px); + width: 0; + border-right: 4px dotted rgba(255, 255, 255, 0.7); + + content: ''; +} + +.slider.h::after { + top: calc(50% - 2px); + left: 10px; + width: calc(100% - 20px); + height: 0; + + border-right: none; + border-top: 4px dotted rgba(255, 255, 255, 0.7); +} + +/** + Checkbox widget +*/ + +.checkbox { + --top-color: #888; + --top-color-hover: #aaa; + --top-color-active: #aaa; + --side-color: #444; + position: relative; +} + +.checkbox::after +{ + height: 24px; + width: 13px; + + box-sizing: border-box; + + position: absolute; + + display: block; + + border-color: white; + border-style: solid; + border-width: 0px 0px 0px 0px; + + top: calc(50% - 13px); + left: calc(50% - 6px); + + transform-origin: center; + transform: rotate(45deg); + + content: ''; +} + +.checkbox.active { + --top-color: green; + --top-color-hover: lightgreen; + --top-color-active: lightgreen; +} + +.checkbox.active::after +{ + border-width: 0px 5px 5px 0px; +} + +/** + Color widget +*/ \ No newline at end of file -- cgit v1.2.3