From bdc75175f1b01a47b0daf5ac8025381eb161d2fd Mon Sep 17 00:00:00 2001 From: Denis Seleznev Date: Thu, 31 Oct 2024 20:06:18 +0300 Subject: [PATCH] Update CSS for constructor --- examples/constructor/dist/index.css | 6 +++--- examples/constructor/dist/index.js | 5 ++++- examples/constructor/index.html | 6 +++--- examples/constructor/src/code.css | 6 ++++-- examples/constructor/src/form.css | 24 +++++++++++++++++++----- examples/constructor/src/form.ts | 6 +++++- examples/constructor/src/index.css | 23 ++++++++++++++--------- 7 files changed, 52 insertions(+), 24 deletions(-) diff --git a/examples/constructor/dist/index.css b/examples/constructor/dist/index.css index e521da3..994f3e0 100644 --- a/examples/constructor/dist/index.css +++ b/examples/constructor/dist/index.css @@ -1,3 +1,3 @@ -.code{bottom:0;height:180px;left:15px;position:fixed;right:15px}.code__label{font-size:14px;line-height:20px}.code__copy{font-size:16px;margin-top:4px}.code__textarea{box-sizing:border-box;font-size:12px;height:120px;margin:0;padding:5px;width:100%}.code__copy,.code__textarea{font-family:Arial,sans-serif}.body_bg_black .code__textarea{background:#000;color:#fff}.body_bg_black .code__label{color:#fff} -.form__panel{background:hsla(0,0%,100%,.8);border:1px solid #f0f0f0;border-radius:4px;border-radius:10px;line-height:1.6;position:absolute;right:15px;top:15px;transition:border-color .5s ease;white-space:nowrap;z-index:20}.form__field{margin-left:10px}.form__label{display:inline-block;width:80px}.form__label_radio{margin-right:1em}.form__group{padding:3px}.form__group input[type=number]{width:60px}.form__color{height:20px;width:60px}.form__group:hover{background-color:#f0f0f0}.form__title{border-bottom:1px solid #f0f0f0;font-weight:700;padding:3px;text-align:center}.form__body{padding:5px}.form__bottom{background:#eee;border-radius:0 0 10px 10px;padding:5px;text-align:center}.form__layer{border:1px solid hsla(0,0%,78%,.5);border-radius:10px;bottom:25%;display:none;height:50%;left:25%;overflow:hidden;position:fixed;right:25%;top:25%;width:50%;z-index:10}.form__layer_visible{display:block}.form__button{margin-left:5px} -body,html{border:0;margin:0;padding:0;transition:background-color .5s ease}body.debug .snowflake{border:1px solid red}.body_bg_black{background:#000}body,input,textarea{font-family:Arial,sans-serif;font-size:12px}input{margin-left:0}label{margin-right:5px}.github{border:1px solid #aaa;border-radius:5px;color:#aaa;display:inline-block;font-size:12px;padding:3px 5px;text-decoration:none}.header{color:#222;font-size:18px;font-weight:400;left:15px;margin:0;padding:0;position:absolute;top:15px}.body_bg_black .header{color:#ddd}.no-support{border:2px dotted red;display:none;font-size:18px;font-weight:700;left:20px;padding:5px;position:absolute;top:50px}.no-support_visible{display:block} \ No newline at end of file +.code{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);bottom:0;height:180px;left:15px;position:fixed;right:15px}.code__label{font-size:14px;line-height:20px}.code__copy{margin-top:4px}.code__textarea{box-sizing:border-box;font-size:12px;height:120px;margin:0;max-width:270px;padding:5px;width:100%}.code__copy,.code__textarea{font-family:Arial,sans-serif}.body_bg_black .code__textarea{background:#333;border:1px solid #555;color:#fff}.body_bg_black .code__label{color:#fff} +.form__panel{background:#fff;border:1px solid #f0f0f0;border-radius:4px;border-radius:10px;color:#000;left:15px;line-height:1.6;position:absolute;top:70px;transition:border-color .5s ease;white-space:nowrap;z-index:20}.body_bg_black .form__panel{background:#333;border-color:#555;color:#fff}.form__field{margin-left:10px}.form__label{display:inline-block;width:80px}.form__label_radio{margin-right:1em}.form__group{padding:3px}.form__group input[type=number]{width:60px}.form__color{height:20px;width:60px}.form__group:hover{background-color:#f0f0f0}.body_bg_black .form__group:hover{background-color:#555}.form__title{background:#5ecdef50;font-weight:700;padding:3px;text-align:center}.form__body{padding:5px}.form__bottom{background:#eee;border-radius:0 0 10px 10px;padding:5px;text-align:center}.body_bg_black .form__bottom{background:#555}.form__layer{border:1px solid hsla(0,0%,78%,.5);border-radius:10px;bottom:25%;display:none;height:50%;left:25%;overflow:hidden;position:fixed;right:25%;top:25%;width:50%;z-index:10}.form__layer_visible{display:block}.form__button{margin-left:5px} +body,html{border:0;margin:0;padding:0}body.animation{transition:background-color .5s ease}body.debug .snowflake{border:1px solid red}.body_bg_black{background:#000}body,input,textarea{font-family:Arial,sans-serif;font-size:12px}input{margin-left:0}label{margin-right:5px}.github{border:1px solid #aaa;border-radius:5px;color:#aaa;display:inline-block;font-size:12px;padding:3px 5px;text-decoration:none;vertical-align:middle}.header{-webkit-background-clip:text;background-clip:text;background-color:#fff;background-image:linear-gradient(90deg,#3980db,#b69ee2);color:#222;color:transparent;font-size:30px;left:50%;margin:0;padding:0;top:20px;transform:translateX(-50%);white-space:nowrap}.header,.no-support{font-weight:700;position:absolute}.no-support{border:2px dotted red;display:none;font-size:18px;left:20px;padding:5px;top:50px}.no-support_visible{display:block} \ No newline at end of file diff --git a/examples/constructor/dist/index.js b/examples/constructor/dist/index.js index 4bca12a..951a196 100644 --- a/examples/constructor/dist/index.js +++ b/examples/constructor/dist/index.js @@ -605,7 +605,7 @@ this.handleDefault = function () { setRadioValue(_this.elems.area, 'fullscreen'); _this.handleArea(); - setRadioValue(_this.elems.backgroundColor, 'white'); + setRadioValue(_this.elems.backgroundColor, 'black'); _this.handleBackgroundColor(); _this.elems.debug.checked = false; _this.handleDebug(); @@ -686,6 +686,9 @@ bindRadioClick(this.elems.area, this.handleArea); bindRadioClick(this.elems.backgroundColor, this.handleBackgroundColor); this.handleDefault(); + setTimeout(function () { + document.body.classList.add('animation'); + }, 10); } Form.prototype.updateSnowflakes = function () { var params = __assign({}, this.params); diff --git a/examples/constructor/index.html b/examples/constructor/index.html index edc45f8..55bcd17 100644 --- a/examples/constructor/index.html +++ b/examples/constructor/index.html @@ -14,7 +14,7 @@

Falling snowflakes
Code:
- +
@@ -31,8 +31,8 @@

Falling snowflakes - - + +
diff --git a/examples/constructor/src/code.css b/examples/constructor/src/code.css index 07d0b05..172babf 100644 --- a/examples/constructor/src/code.css +++ b/examples/constructor/src/code.css @@ -4,6 +4,7 @@ right: 15px; bottom: 0; height: 180px; + backdrop-filter: blur(10px); } .code__label { @@ -13,7 +14,6 @@ .code__copy { margin-top: 4px; - font-size: 16px; } .code__textarea { @@ -23,6 +23,7 @@ height: 120px; font-size: 12px; padding: 5px; + max-width: 270px; } .code__copy, @@ -31,8 +32,9 @@ } .body_bg_black .code__textarea { - background: black; + background: #333; color: white; + border: 1px solid #555; } .body_bg_black .code__label { diff --git a/examples/constructor/src/form.css b/examples/constructor/src/form.css index 1ff3b36..6bc10f5 100644 --- a/examples/constructor/src/form.css +++ b/examples/constructor/src/form.css @@ -1,18 +1,24 @@ .form__panel { position: absolute; z-index: 20; - right: 15px; - top: 15px; - background: rgba(255, 255, 255, .8); + left: 15px; + top: 70px; + background: white; border: 1px solid #f0f0f0; border-radius: 4px; line-height: 1.6; white-space: nowrap; - + color: black; transition: .5s border-color ease; border-radius: 10px; } +.body_bg_black .form__panel { + color: white; + background: #333; + border-color: #555; +} + .form__field { margin-left: 10px; } @@ -43,11 +49,15 @@ background-color: #f0f0f0; } +.body_bg_black .form__group:hover { + background-color: #555; +} + .form__title { font-weight: bold; text-align: center; padding: 3px; - border-bottom: 1px solid #f0f0f0; + background: #5ECDEF50; } .form__body { @@ -61,6 +71,10 @@ border-radius: 0 0 10px 10px; } +.body_bg_black .form__bottom { + background: #555; +} + .form__layer { display: none; position: fixed; diff --git a/examples/constructor/src/form.ts b/examples/constructor/src/form.ts index af9f8f2..6c19f0d 100644 --- a/examples/constructor/src/form.ts +++ b/examples/constructor/src/form.ts @@ -71,6 +71,10 @@ export class Form { bindRadioClick(this.elems.backgroundColor, this.handleBackgroundColor); this.handleDefault(); + + setTimeout(() => { + document.body.classList.add('animation'); + }, 10); } private updateSnowflakes() { @@ -148,7 +152,7 @@ export class Form { setRadioValue(this.elems.area, 'fullscreen'); this.handleArea(); - setRadioValue(this.elems.backgroundColor, 'white'); + setRadioValue(this.elems.backgroundColor, 'black'); this.handleBackgroundColor(); this.elems.debug.checked = false; diff --git a/examples/constructor/src/index.css b/examples/constructor/src/index.css index 717e17f..fb13439 100644 --- a/examples/constructor/src/index.css +++ b/examples/constructor/src/index.css @@ -2,7 +2,9 @@ html, body { padding: 0; margin: 0; border: 0; +} +body.animation { transition: .5s background-color ease; } @@ -37,21 +39,24 @@ label { color: #aaa; font-size: 12px; border-radius: 5px; + vertical-align: middle; } .header { - font-size: 18px; + position: absolute; + left: 50%; + top: 20px; + font-size: 30px; + font-weight: bold; margin: 0; padding: 0; - position: absolute; - left: 15px; - top: 15px; color: #222; - font-weight: normal; -} - -.body_bg_black .header { - color: #ddd; + background-color: white; + background-image: linear-gradient(to right, #3980DB, #B69EE2); + color: transparent; + background-clip: text; + transform: translateX(-50%); + white-space: nowrap; } .no-support {