diff --git a/wled00/data/pxmagic/pxmagic.htm b/wled00/data/pxmagic/pxmagic.htm index 4ac6d1e2..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 { @@ -164,17 +147,19 @@ .header { display: flex; flex-direction: column; - padding-bottom: 20px; + padding-block: 20px; } .header .title { - font-size: 36px; - font-weight: 600; + font-size: 2.5rem; + line-height: 2.5rem; + font-weight: 800; color: var(--gray-light); + padding-bottom: 5px; } .header .subtitle { - font-size: 12px; + font-size: 0.75rem; color: var(--text); } @@ -217,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 { @@ -235,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 { @@ -247,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; } @@ -269,13 +246,7 @@ textarea { resize: none; - min-height: 200px; border-radius: 8px; - overflow-x: hidden; - } - - .custom-select { - position: relative; } .custom-select select { @@ -283,7 +254,7 @@ -webkit-appearance: none; -moz-appearance: none; background-image: none; - padding-right: 20px; + padding-right: 39px; cursor: pointer; } @@ -291,7 +262,7 @@ content: ""; position: absolute; top: calc(50% + 6px); - right: 16px; + right: 21px; transform: rotate(135deg); width: 6px; height: 6px; @@ -483,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; } @@ -539,7 +510,7 @@ color: var(--error-dark); padding-block: 4px; font-weight: 600; - font-size: 12px; + font-size: 0.75rem; } @media (max-width: 767px) { @@ -550,7 +521,8 @@ } .col, - .col-full { + .col-full, + .col-small { flex-basis: 100%; margin-top: 20px; padding: 0; @@ -626,7 +598,6 @@
- @@ -837,7 +807,7 @@