Update CSS for constructor

hcodes · Oct 31, 2024 · bdc7517 · bdc7517
1 parent b1f9deb
commit bdc7517
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 24 deletions.
diff --git a/examples/constructor/dist/index.css b/examples/constructor/dist/index.css
diff --git 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
@@ -14,7 +14,7 @@ <h1 class="header">Falling snowflakes <a href="https://github.com/hcodes/snowfla
 
     <div class="code">
         <div class="code__label">Code:</div>
-        <textarea class="code__textarea"></textarea>
+        <textarea class="code__textarea"></textarea><br />
         <input class="code__copy" type="button" value="Copy" />
     </div>
 
@@ -31,8 +31,8 @@ <h1 class="header">Falling snowflakes <a href="https://github.com/hcodes/snowfla
 
                 <div class="form__group">
                     <label class="form__label">background:</label>
-                    <label class="form__label_radio"><input class="form__background-color" name="bg" type="radio" value="white" checked /> White</label>
-                    <label class="form__label_radio"><input class="form__background-color" name="bg" type="radio" value="black" /> Black</label>
+                    <label class="form__label_radio"><input class="form__background-color" name="bg" type="radio" value="black" checked /> Black</label>
+                    <label class="form__label_radio"><input class="form__background-color" name="bg" type="radio" value="white" /> White</label>
                 </div>
 
                 <div class="form__group">

diff --git 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
@@ -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
@@ -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
@@ -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 {