diff --git a/wled00/data/pxmagic/pxmagic.htm b/wled00/data/pxmagic/pxmagic.htm index 1019e9ad..d59f924c 100644 --- a/wled00/data/pxmagic/pxmagic.htm +++ b/wled00/data/pxmagic/pxmagic.htm @@ -61,6 +61,7 @@ } body { + margin: 0; display: flex; justify-content: center; align-items: center; @@ -72,29 +73,24 @@ width: 100%; } - form { - margin-bottom: 20px; - } - small { display: block; font-weight: 400; margin: 2px 0 5px; color: var(--gray-light); - font-size: 12px; + font-size: 0.75rem; } footer { - width: 100%; - margin: 0 auto 20px; - display: block; - text-align: center; + display: flex; + justify-content: center; + margin-block: 20px; } a { text-decoration: none; color: var(--blue-light); - font-size: 12px; + font-size: 0.75rem; font-weight: 600; } @@ -103,26 +99,13 @@ } #wledEdit { - padding: 4px 8px; + padding: 1.5px 8px; background: var(--blue-light); margin-left: 6px; - display: inline-block; border-radius: 4px; color: var(--gray-light); } - .m-zero { - margin: 0 !important; - } - - .m-bottom { - margin-bottom: 10px !important; - } - - .m-top { - margin-top: 10px !important; - } - .container { width: 100%; display: flex; @@ -133,7 +116,7 @@ .content { width: min(768px, calc(100% - 40px)); - margin: 20px; + margin-inline: 20px; } .row { @@ -143,32 +126,61 @@ margin-top: 20px; } - .column { + .col { flex-basis: calc(50% - 10px); position: relative; padding-inline: 5px; } - .column-full { + .col-full { flex-basis: 100%; position: relative; padding-inline: 5px; } + .col-small { + flex-basis: 33.3333%; + position: relative; + padding-inline: 5px; + } + .header { display: flex; flex-direction: column; - align-items: center; - padding-bottom: 20px; + padding-block: 20px; } - .header .brand { - width: 100%; - max-width: 200px; - height: 100%; - display: block; - outline: none; - border: 0; + .header .title { + font-size: 2.5rem; + line-height: 2.5rem; + font-weight: 800; + color: var(--gray-light); + padding-bottom: 5px; + } + + .header .subtitle { + font-size: 0.75rem; + color: var(--text); + } + + .header .rainbow { + background: linear-gradient( + to right, + #ef5350, + #f48fb1, + #7e57c2, + #2196f3, + #26c6da, + #43a047, + #eeff41, + #f9a825, + #ff5722 + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-size: 200% 200%; + animation: rainbow 5s linear infinite; + transition: background-position 0.5s ease; } label { @@ -190,15 +202,7 @@ border: 1px solid var(--gray-medium); outline: none; color: var(--gray-light); - font-size: 14px; - } - - input[type="color"] { - width: 32px; - height: 32px; - cursor: pointer; - padding-inline: 1px; - outline: none; + font-size: 0.875rem; } .input-group { @@ -208,7 +212,7 @@ } .input-group input:not([type="range"]) { - border-radius: 8px 0 0 8px; + border-radius: 50px 0 0 50px; } .input-group .input-description { @@ -220,15 +224,15 @@ align-items: center; color: var(--gray-dark); background: var(--gray-light); - border-radius: 0px 8px 8px 0; + border-radius: 0px 50px 50px 0; border: 1px solid var(--gray-light); border-left: 0; - font-size: 14px; - line-height: 16px; + font-size: 0.875rem; + line-height: 1rem; } .input-group .square { - border-radius: 8px !important; + border-radius: 50px !important; margin-left: 10px; } @@ -242,13 +246,7 @@ textarea { resize: none; - min-height: 200px; border-radius: 8px; - overflow-x: hidden; - } - - .custom-select { - position: relative; } .custom-select select { @@ -256,7 +254,7 @@ -webkit-appearance: none; -moz-appearance: none; background-image: none; - padding-right: 20px; + padding-right: 39px; cursor: pointer; } @@ -264,7 +262,7 @@ content: ""; position: absolute; top: calc(50% + 6px); - right: 16px; + right: 21px; transform: rotate(135deg); width: 6px; height: 6px; @@ -456,7 +454,7 @@ background: var(--gray-medium); border: 1px solid var(--gray-dark); transition: all 0.5s ease-in-out; - font-size: 14px; + font-size: 0.875rem; font-weight: 600; } @@ -512,7 +510,7 @@ color: var(--error-dark); padding-block: 4px; font-weight: 600; - font-size: 12px; + font-size: 0.75rem; } @media (max-width: 767px) { @@ -522,8 +520,9 @@ margin: 0; } - .column, - .column-full { + .col, + .col-full, + .col-small { flex-basis: 100%; margin-top: 20px; padding: 0; @@ -554,6 +553,15 @@ transform: translateY(0); } } + + @keyframes rainbow { + 0% { + background-position: 0% 0; + } + 100% { + background-position: 200% 0; + } + } @@ -561,15 +569,21 @@
- Pixel Magic Tool - + PIXEL MAGIC TOOL + It is a tool that converts any image into code in + JSON WLED format for + 2D Matrix panels
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+