Merge branch 'master' into bugfix/custom-boxes

dist/dark-legacy.standalone.css

@@ -154,7 +154,11 @@ button,
 input[type='submit'],
 input[type='button'],
 input[type='checkbox'],
+<<<<<<< HEAD
 input[type='radio'] {
+=======
+input[type='range'] {
+>>>>>>> master
   cursor: pointer;
 }
 
@@ -179,22 +183,6 @@ input {
   outline: none;
 }
 
-select {
-  color: #ffffff;
-  background-color: #161f27;
-
-  font-family: inherit;
-  font-size: inherit;
-
-  margin-right: 6px;
-  margin-bottom: 6px;
-  padding: 10px;
-
-  border: none;
-  border-radius: 6px;
-  outline: none;
-}
-
 button {
   color: #ffffff;
   background-color: #161f27;
@@ -227,7 +215,12 @@ textarea {
   outline: none;
 }
 
+<<<<<<< HEAD
 input,
+=======
+input:not([type='checkbox']):not([type='radio']),
+input[type='range'],
+>>>>>>> master
 select,
 button,
 textarea {
@@ -318,6 +311,7 @@ input[type='checkbox']:active,
 input[type='radio']:active,
 input[type='submit']:active,
 input[type='button']:active,
+input[type='range']:active,
 button:active {
   transform: translateY(2px);
 }
@@ -346,6 +340,94 @@ textarea:disabled {
   color: #a9a9a9;
 }
 
+input[type='range'] {
+  margin: 10px 0;
+  padding: 10px 0;
+  background: transparent;
+}
+
+input[type='range']:focus {
+  outline: none;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 9.5px;
+  transition: 0.2s;
+  background: #161f27;
+  border-radius: 3px;
+}
+
+input[type='range']::-webkit-slider-thumb {
+  box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #dbdbdb;
+  -webkit-appearance: none;
+  margin-top: -7px;
+}
+
+input[type='range']:focus::-webkit-slider-runnable-track {
+  background: #161f27;
+}
+
+input[type='range']::-moz-range-track {
+  width: 100%;
+  height: 9.5px;
+  transition: 0.2s;
+  background: #161f27;
+  border-radius: 3px;
+}
+
+input[type='range']::-moz-range-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #dbdbdb;
+}
+
+input[type='range']::-ms-track {
+  width: 100%;
+  height: 9.5px;
+  background: transparent;
+  border-color: transparent;
+  border-width: 16px 0;
+  color: transparent;
+}
+
+input[type='range']::-ms-fill-lower {
+  background: #161f27;
+  border: 0.2px solid #010101;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+
+input[type='range']::-ms-fill-upper {
+  background: #161f27;
+  border: 0.2px solid #010101;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+
+input[type='range']::-ms-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #dbdbdb;
+}
+
+input[type='range']:focus::-ms-fill-lower {
+  background: #161f27;
+}
+
+input[type='range']:focus::-ms-fill-upper {
+  background: #161f27;
+}
+
 a {
   text-decoration: none;
   color: #41adff;

dist/dark-legacy.standalone.min.css

@@ -1,2 +1,6 @@
+<<<<<<< HEAD
 body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#dbdbdb;background:#202b38;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#fff}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}q:after,q:before{content:none}blockquote,q{border-left:4px solid rgba(0,150,191,.67);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}mark{background-color:#efdb43;border-radius:2px;padding:0 2px;color:#000}button,input[type=button],input[type=checkbox],input[type=radio],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:#fff;background-color:#161f27;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input,select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#324759}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}input[type=checkbox],input[type=radio]{position:relative;width:14px;height:14px;display:inline-block;vertical-align:middle;margin:0 2px 0 0}input[type=radio]{border-radius:50%}input[type=checkbox]:checked,input[type=radio]:checked{background:#324759}input[type=checkbox]:checked:before,input[type=radio]:checked:before{content:"•";display:block;position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%)}input[type=checkbox]:checked:before{content:"✔";transform:translateY(-50%) translateY(.5px) translateX(-6px)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#a9a9a9}:-ms-input-placeholder{color:#a9a9a9}::-ms-input-placeholder{color:#a9a9a9}::placeholder{color:#a9a9a9}a{text-decoration:none;color:#41adff}a:hover{text-decoration:underline}code,samp,time{background:#161f27;color:#ffbe85;padding:2.5px 5px;border-radius:6px;font-size:1em}pre>code{padding:10px;display:block;overflow-x:auto}var{color:#d941e2;font-style:normal;font-family:monospace}kbd{background:#161f27;border:1px solid #dbdbdb;border-radius:2px;color:#dbdbdb;padding:2px 4px}img{max-width:100%;height:auto}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#1a242f}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#161f27;border-radius:6px}::-webkit-scrollbar-thumb{background:#324759;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#415c73}::-moz-selection{background-color:#161f27}::selection{background-color:#161f27}
+=======
+body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#dbdbdb;background:#202b38;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#fff}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}q:after,q:before{content:none}blockquote,q{border-left:4px solid rgba(0,150,191,.67);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}mark{background-color:#efdb43;border-radius:2px;padding:0 2px;color:#000}button,input[type=button],input[type=checkbox],input[type=range],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,textarea{color:#fff;background-color:#161f27;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),input[type=range],select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#324759}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=range]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#a9a9a9}:-ms-input-placeholder{color:#a9a9a9}::-ms-input-placeholder{color:#a9a9a9}::placeholder{color:#a9a9a9}input[type=range]{margin:10px 0;padding:10px 0;background:transparent}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:9.5px;transition:.2s;background:#161f27;border-radius:3px}input[type=range]::-webkit-slider-thumb{box-shadow:0 1px 1px #000,0 0 1px #0d0d0d;height:20px;width:20px;border-radius:50%;background:#dbdbdb;-webkit-appearance:none;margin-top:-7px}input[type=range]:focus::-webkit-slider-runnable-track{background:#161f27}input[type=range]::-moz-range-track{width:100%;height:9.5px;transition:.2s;background:#161f27;border-radius:3px}input[type=range]::-moz-range-thumb{box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d;height:20px;width:20px;border-radius:50%;background:#dbdbdb}input[type=range]::-ms-track{width:100%;height:9.5px;background:transparent;border-color:transparent;border-width:16px 0;color:transparent}input[type=range]::-ms-fill-lower,input[type=range]::-ms-fill-upper{background:#161f27;border:.2px solid #010101;border-radius:3px;box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d}input[type=range]::-ms-thumb{box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d;border:1px solid #000;height:20px;width:20px;border-radius:50%;background:#dbdbdb}input[type=range]:focus::-ms-fill-lower,input[type=range]:focus::-ms-fill-upper{background:#161f27}a{text-decoration:none;color:#41adff}a:hover{text-decoration:underline}code,samp,time{background:#161f27;color:#ffbe85;padding:2.5px 5px;border-radius:6px;font-size:1em}pre>code{padding:10px;display:block;overflow-x:auto}var{color:#d941e2;font-style:normal;font-family:monospace}kbd{background:#161f27;border:1px solid #dbdbdb;border-radius:2px;color:#dbdbdb;padding:2px 4px}img{max-width:100%;height:auto}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#1a242f}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#161f27;border-radius:6px}::-webkit-scrollbar-thumb{background:#324759;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#415c73}::-moz-selection{background-color:#161f27}::selection{background-color:#161f27}
+>>>>>>> master
 /*# sourceMappingURL=dark-legacy.standalone.min.css.map */

dist/dark.css

@@ -174,7 +174,11 @@ button,
 input[type='submit'],
 input[type='button'],
 input[type='checkbox'],
+<<<<<<< HEAD
 input[type='radio'] {
+=======
+input[type='range'] {
+>>>>>>> master
   cursor: pointer;
 }
 
@@ -184,7 +188,6 @@ select {
 }
 
 input,
-select,
 button,
 textarea {
   color: var(--form-text);
@@ -202,7 +205,12 @@ textarea {
   outline: none;
 }
 
+<<<<<<< HEAD
 input,
+=======
+input:not([type='checkbox']):not([type='radio']),
+input[type='range'],
+>>>>>>> master
 select,
 button,
 textarea {
@@ -275,6 +283,7 @@ input[type='checkbox']:active,
 input[type='radio']:active,
 input[type='submit']:active,
 input[type='button']:active,
+input[type='range']:active,
 button:active {
   transform: translateY(2px);
 }
@@ -303,6 +312,94 @@ textarea:disabled {
   color: var(--form-placeholder);
 }
 
+input[type='range'] {
+  margin: 10px 0;
+  padding: 10px 0;
+  background: transparent;
+}
+
+input[type='range']:focus {
+  outline: none;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 9.5px;
+  transition: 0.2s;
+  background: var(--background);
+  border-radius: 3px;
+}
+
+input[type='range']::-webkit-slider-thumb {
+  box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: var(--border);
+  -webkit-appearance: none;
+  margin-top: -7px;
+}
+
+input[type='range']:focus::-webkit-slider-runnable-track {
+  background: var(--background);
+}
+
+input[type='range']::-moz-range-track {
+  width: 100%;
+  height: 9.5px;
+  transition: 0.2s;
+  background: var(--background);
+  border-radius: 3px;
+}
+
+input[type='range']::-moz-range-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: var(--border);
+}
+
+input[type='range']::-ms-track {
+  width: 100%;
+  height: 9.5px;
+  background: transparent;
+  border-color: transparent;
+  border-width: 16px 0;
+  color: transparent;
+}
+
+input[type='range']::-ms-fill-lower {
+  background: var(--background);
+  border: 0.2px solid #010101;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+
+input[type='range']::-ms-fill-upper {
+  background: var(--background);
+  border: 0.2px solid #010101;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+
+input[type='range']::-ms-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: var(--border);
+}
+
+input[type='range']:focus::-ms-fill-lower {
+  background: var(--background);
+}
+
+input[type='range']:focus::-ms-fill-upper {
+  background: var(--background);
+}
+
 a {
   text-decoration: none;
   color: var(--links);

dist/dark.standalone.css

@@ -141,7 +141,11 @@ button,
 input[type='submit'],
 input[type='button'],
 input[type='checkbox'],
+<<<<<<< HEAD
 input[type='radio'] {
+=======
+input[type='range'] {
+>>>>>>> master
   cursor: pointer;
 }
 
@@ -151,7 +155,6 @@ select {
 }
 
 input,
-select,
 button,
 textarea {
   color: var(--form-text);
@@ -169,7 +172,12 @@ textarea {
   outline: none;
 }
 
+<<<<<<< HEAD
 input,
+=======
+input:not([type='checkbox']):not([type='radio']),
+input[type='range'],
+>>>>>>> master
 select,
 button,
 textarea {
@@ -242,6 +250,7 @@ input[type='checkbox']:active,
 input[type='radio']:active,
 input[type='submit']:active,
 input[type='button']:active,
+input[type='range']:active,
 button:active {
   transform: translateY(2px);
 }
@@ -270,6 +279,94 @@ textarea:disabled {
   color: var(--form-placeholder);
 }
 
+input[type='range'] {
+  margin: 10px 0;
+  padding: 10px 0;
+  background: transparent;
+}
+
+input[type='range']:focus {
+  outline: none;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 9.5px;
+  transition: 0.2s;
+  background: var(--background);
+  border-radius: 3px;
+}
+
+input[type='range']::-webkit-slider-thumb {
+  box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: var(--border);
+  -webkit-appearance: none;
+  margin-top: -7px;
+}
+
+input[type='range']:focus::-webkit-slider-runnable-track {
+  background: var(--background);
+}
+
+input[type='range']::-moz-range-track {
+  width: 100%;
+  height: 9.5px;
+  transition: 0.2s;
+  background: var(--background);
+  border-radius: 3px;
+}
+
+input[type='range']::-moz-range-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: var(--border);
+}
+
+input[type='range']::-ms-track {
+  width: 100%;
+  height: 9.5px;
+  background: transparent;
+  border-color: transparent;
+  border-width: 16px 0;
+  color: transparent;
+}
+
+input[type='range']::-ms-fill-lower {
+  background: var(--background);
+  border: 0.2px solid #010101;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+
+input[type='range']::-ms-fill-upper {
+  background: var(--background);
+  border: 0.2px solid #010101;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+
+input[type='range']::-ms-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: var(--border);
+}
+
+input[type='range']:focus::-ms-fill-lower {
+  background: var(--background);
+}
+
+input[type='range']:focus::-ms-fill-upper {
+  background: var(--background);
+}
+
 a {
   text-decoration: none;
   color: var(--links);

dist/light-legacy.standalone.css

@@ -154,7 +154,11 @@ button,
 input[type='submit'],
 input[type='button'],
 input[type='checkbox'],
+<<<<<<< HEAD
 input[type='radio'] {
+=======
+input[type='range'] {
+>>>>>>> master
   cursor: pointer;
 }
 
@@ -179,22 +183,6 @@ input {
   outline: none;
 }
 
-select {
-  color: #000000;
-  background-color: #efefef;
-
-  font-family: inherit;
-  font-size: inherit;
-
-  margin-right: 6px;
-  margin-bottom: 6px;
-  padding: 10px;
-
-  border: none;
-  border-radius: 6px;
-  outline: none;
-}
-
 button {
   color: #000000;
   background-color: #efefef;
@@ -227,7 +215,12 @@ textarea {
   outline: none;
 }
 
+<<<<<<< HEAD
 input,
+=======
+input:not([type='checkbox']):not([type='radio']),
+input[type='range'],
+>>>>>>> master
 select,
 button,
 textarea {
@@ -318,6 +311,7 @@ input[type='checkbox']:active,
 input[type='radio']:active,
 input[type='submit']:active,
 input[type='button']:active,
+input[type='range']:active,
 button:active {
   transform: translateY(2px);
 }
@@ -346,6 +340,94 @@ textarea:disabled {
   color: #949494;
 }
 
+input[type='range'] {
+  margin: 10px 0;
+  padding: 10px 0;
+  background: transparent;
+}
+
+input[type='range']:focus {
+  outline: none;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 9.5px;
+  transition: 0.2s;
+  background: #efefef;
+  border-radius: 3px;
+}
+
+input[type='range']::-webkit-slider-thumb {
+  box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #dbdbdb;
+  -webkit-appearance: none;
+  margin-top: -7px;
+}
+
+input[type='range']:focus::-webkit-slider-runnable-track {
+  background: #efefef;
+}
+
+input[type='range']::-moz-range-track {
+  width: 100%;
+  height: 9.5px;
+  transition: 0.2s;
+  background: #efefef;
+  border-radius: 3px;
+}
+
+input[type='range']::-moz-range-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #dbdbdb;
+}
+
+input[type='range']::-ms-track {
+  width: 100%;
+  height: 9.5px;
+  background: transparent;
+  border-color: transparent;
+  border-width: 16px 0;
+  color: transparent;
+}
+
+input[type='range']::-ms-fill-lower {
+  background: #efefef;
+  border: 0.2px solid #010101;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+
+input[type='range']::-ms-fill-upper {
+  background: #efefef;
+  border: 0.2px solid #010101;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+
+input[type='range']::-ms-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #dbdbdb;
+}
+
+input[type='range']:focus::-ms-fill-lower {
+  background: #efefef;
+}
+
+input[type='range']:focus::-ms-fill-upper {
+  background: #efefef;
+}
+
 a {
   text-decoration: none;
   color: #0076d1;

dist/light-legacy.standalone.min.css

@@ -1,2 +1,6 @@
+<<<<<<< HEAD
 body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#363636;background:#fff;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#000}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}q:after,q:before{content:none}blockquote,q{border-left:4px solid rgba(0,150,191,.67);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}mark{background-color:#ff0;border-radius:2px;padding:0 2px;color:#000}button,input[type=button],input[type=checkbox],input[type=radio],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:#000;background-color:#efefef;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input,select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#ddd}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}input[type=checkbox],input[type=radio]{position:relative;width:14px;height:14px;display:inline-block;vertical-align:middle;margin:0 2px 0 0}input[type=radio]{border-radius:50%}input[type=checkbox]:checked,input[type=radio]:checked{background:#ddd}input[type=checkbox]:checked:before,input[type=radio]:checked:before{content:"•";display:block;position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%)}input[type=checkbox]:checked:before{content:"✔";transform:translateY(-50%) translateY(.5px) translateX(-6px)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#949494}:-ms-input-placeholder{color:#949494}::-ms-input-placeholder{color:#949494}::placeholder{color:#949494}a{text-decoration:none;color:#0076d1}a:hover{text-decoration:underline}code,samp,time{background:#efefef;color:#000;padding:2.5px 5px;border-radius:6px;font-size:1em}pre>code{padding:10px;display:block;overflow-x:auto}var{color:#39a33c;font-style:normal;font-family:monospace}kbd{background:#efefef;border:1px solid #dbdbdb;border-radius:2px;color:#363636;padding:2px 4px}img{max-width:100%;height:auto}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#f7f7f7}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#efefef;border-radius:6px}::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#c4c4c4}::-moz-selection{background-color:#9e9e9e}::selection{background-color:#9e9e9e}
+=======
+body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#363636;background:#fff;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#000}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}q:after,q:before{content:none}blockquote,q{border-left:4px solid rgba(0,150,191,.67);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}mark{background-color:#ff0;border-radius:2px;padding:0 2px;color:#000}button,input[type=button],input[type=checkbox],input[type=range],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,textarea{color:#000;background-color:#efefef;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),input[type=range],select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#ddd}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=range]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#949494}:-ms-input-placeholder{color:#949494}::-ms-input-placeholder{color:#949494}::placeholder{color:#949494}input[type=range]{margin:10px 0;padding:10px 0;background:transparent}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:9.5px;transition:.2s;background:#efefef;border-radius:3px}input[type=range]::-webkit-slider-thumb{box-shadow:0 1px 1px #000,0 0 1px #0d0d0d;height:20px;width:20px;border-radius:50%;background:#dbdbdb;-webkit-appearance:none;margin-top:-7px}input[type=range]:focus::-webkit-slider-runnable-track{background:#efefef}input[type=range]::-moz-range-track{width:100%;height:9.5px;transition:.2s;background:#efefef;border-radius:3px}input[type=range]::-moz-range-thumb{box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d;height:20px;width:20px;border-radius:50%;background:#dbdbdb}input[type=range]::-ms-track{width:100%;height:9.5px;background:transparent;border-color:transparent;border-width:16px 0;color:transparent}input[type=range]::-ms-fill-lower,input[type=range]::-ms-fill-upper{background:#efefef;border:.2px solid #010101;border-radius:3px;box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d}input[type=range]::-ms-thumb{box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d;border:1px solid #000;height:20px;width:20px;border-radius:50%;background:#dbdbdb}input[type=range]:focus::-ms-fill-lower,input[type=range]:focus::-ms-fill-upper{background:#efefef}a{text-decoration:none;color:#0076d1}a:hover{text-decoration:underline}code,samp,time{background:#efefef;color:#000;padding:2.5px 5px;border-radius:6px;font-size:1em}pre>code{padding:10px;display:block;overflow-x:auto}var{color:#39a33c;font-style:normal;font-family:monospace}kbd{background:#efefef;border:1px solid #dbdbdb;border-radius:2px;color:#363636;padding:2px 4px}img{max-width:100%;height:auto}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#f7f7f7}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#efefef;border-radius:6px}::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#c4c4c4}::-moz-selection{background-color:#9e9e9e}::selection{background-color:#9e9e9e}
+>>>>>>> master
 /*# sourceMappingURL=light-legacy.standalone.min.css.map */

dist/light.css

@@ -174,7 +174,11 @@ button,
 input[type='submit'],
 input[type='button'],
 input[type='checkbox'],
+<<<<<<< HEAD
 input[type='radio'] {
+=======
+input[type='range'] {
+>>>>>>> master
   cursor: pointer;
 }
 
@@ -184,7 +188,6 @@ select {
 }
 
 input,
-select,
 button,
 textarea {
   color: var(--form-text);
@@ -202,7 +205,12 @@ textarea {
   outline: none;
 }
 
+<<<<<<< HEAD
 input,
+=======
+input:not([type='checkbox']):not([type='radio']),
+input[type='range'],
+>>>>>>> master
 select,
 button,
 textarea {
@@ -275,6 +283,7 @@ input[type='checkbox']:active,
 input[type='radio']:active,
 input[type='submit']:active,
 input[type='button']:active,
+input[type='range']:active,
 button:active {
   transform: translateY(2px);
 }
@@ -303,6 +312,94 @@ textarea:disabled {
   color: var(--form-placeholder);
 }
 
+input[type='range'] {
+  margin: 10px 0;
+  padding: 10px 0;
+  background: transparent;
+}
+
+input[type='range']:focus {
+  outline: none;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 9.5px;
+  transition: 0.2s;
+  background: var(--background);
+  border-radius: 3px;
+}
+
+input[type='range']::-webkit-slider-thumb {
+  box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: var(--border);
+  -webkit-appearance: none;
+  margin-top: -7px;
+}
+
+input[type='range']:focus::-webkit-slider-runnable-track {
+  background: var(--background);
+}
+
+input[type='range']::-moz-range-track {
+  width: 100%;
+  height: 9.5px;
+  transition: 0.2s;
+  background: var(--background);
+  border-radius: 3px;
+}
+
+input[type='range']::-moz-range-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: var(--border);
+}
+
+input[type='range']::-ms-track {
+  width: 100%;
+  height: 9.5px;
+  background: transparent;
+  border-color: transparent;
+  border-width: 16px 0;
+  color: transparent;
+}
+
+input[type='range']::-ms-fill-lower {
+  background: var(--background);
+  border: 0.2px solid #010101;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+
+input[type='range']::-ms-fill-upper {
+  background: var(--background);
+  border: 0.2px solid #010101;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+
+input[type='range']::-ms-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: var(--border);
+}
+
+input[type='range']:focus::-ms-fill-lower {
+  background: var(--background);
+}
+
+input[type='range']:focus::-ms-fill-upper {
+  background: var(--background);
+}
+
 a {
   text-decoration: none;
   color: var(--links);

dist/light.standalone.css

@@ -141,7 +141,11 @@ button,
 input[type='submit'],
 input[type='button'],
 input[type='checkbox'],
+<<<<<<< HEAD
 input[type='radio'] {
+=======
+input[type='range'] {
+>>>>>>> master
   cursor: pointer;
 }
 
@@ -151,7 +155,6 @@ select {
 }
 
 input,
-select,
 button,
 textarea {
   color: var(--form-text);
@@ -169,7 +172,12 @@ textarea {
   outline: none;
 }
 
+<<<<<<< HEAD
 input,
+=======
+input:not([type='checkbox']):not([type='radio']),
+input[type='range'],
+>>>>>>> master
 select,
 button,
 textarea {
@@ -242,6 +250,7 @@ input[type='checkbox']:active,
 input[type='radio']:active,
 input[type='submit']:active,
 input[type='button']:active,
+input[type='range']:active,
 button:active {
   transform: translateY(2px);
 }
@@ -270,6 +279,94 @@ textarea:disabled {
   color: var(--form-placeholder);
 }
 
+input[type='range'] {
+  margin: 10px 0;
+  padding: 10px 0;
+  background: transparent;
+}
+
+input[type='range']:focus {
+  outline: none;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 9.5px;
+  transition: 0.2s;
+  background: var(--background);
+  border-radius: 3px;
+}
+
+input[type='range']::-webkit-slider-thumb {
+  box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: var(--border);
+  -webkit-appearance: none;
+  margin-top: -7px;
+}
+
+input[type='range']:focus::-webkit-slider-runnable-track {
+  background: var(--background);
+}
+
+input[type='range']::-moz-range-track {
+  width: 100%;
+  height: 9.5px;
+  transition: 0.2s;
+  background: var(--background);
+  border-radius: 3px;
+}
+
+input[type='range']::-moz-range-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: var(--border);
+}
+
+input[type='range']::-ms-track {
+  width: 100%;
+  height: 9.5px;
+  background: transparent;
+  border-color: transparent;
+  border-width: 16px 0;
+  color: transparent;
+}
+
+input[type='range']::-ms-fill-lower {
+  background: var(--background);
+  border: 0.2px solid #010101;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+
+input[type='range']::-ms-fill-upper {
+  background: var(--background);
+  border: 0.2px solid #010101;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+
+input[type='range']::-ms-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: var(--border);
+}
+
+input[type='range']:focus::-ms-fill-lower {
+  background: var(--background);
+}
+
+input[type='range']:focus::-ms-fill-upper {
+  background: var(--background);
+}
+
 a {
   text-decoration: none;
   color: var(--links);

index.html

@@ -1,48 +1,72 @@
 <!DOCTYPE html>
 <html lang='en'>
-
   <head>
     <title>Water.css</title>
-    <link id='stylesheet' rel='stylesheet' href='../dist/dark.css'>
+    <link id='stylesheet' rel='stylesheet' href='../dist/dark.css' />
-    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
     <!-- Icons generated with https://realfavicongenerator.net -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
+    <link
-    <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png" />
+      rel='apple-touch-icon'
-    <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" />
+      sizes='180x180'
-    <link rel="manifest" href="/icons/site.webmanifest" />
+      href='/icons/apple-touch-icon.png'
-    <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5" />
+    />
-    <link rel="shortcut icon" href="/icons/favicon.ico" />
+    <link
-    <meta name="apple-mobile-web-app-title" content="Water.css" />
+      rel='icon'
-    <meta name="application-name" content="Water.css" />
+      type='image/png'
-    <meta name="msapplication-TileColor" content="#00aba9" />
+      sizes='32x32'
-    <meta name="msapplication-config" content="/icons/browserconfig.xml" />
+      href='/icons/favicon-32x32.png'
-    <meta name="theme-color" content="#ffffff" />
+    />
+    <link
+      rel='icon'
+      type='image/png'
+      sizes='16x16'
+      href='/icons/favicon-16x16.png'
+    />
+    <link rel='manifest' href='/icons/site.webmanifest' />
+    <link rel='mask-icon' href='/icons/safari-pinned-tab.svg' color='#5bbad5' />
+    <link rel='shortcut icon' href='/icons/favicon.ico' />
+    <meta name='apple-mobile-web-app-title' content='Water.css' />
+    <meta name='application-name' content='Water.css' />
+    <meta name='msapplication-TileColor' content='#00aba9' />
+    <meta name='msapplication-config' content='/icons/browserconfig.xml' />
+    <meta name='theme-color' content='#ffffff' />
 
-    <script async src='https://www.googletagmanager.com/gtag/js?id=UA-116663597-6'></script>
+    <script
+      async
+      src='https://www.googletagmanager.com/gtag/js?id=UA-116663597-6'
+    ></script>
     <script>
-      window.dataLayer = window.dataLayer || []
+      window.dataLayer = window.dataLayer || [];
-      function gtag() { dataLayer.push(arguments) }
+      function gtag() {
-      gtag('js', new Date())
+        dataLayer.push(arguments);
-      gtag('config', 'UA-116663597-6')
+      }
+      gtag('js', new Date());
+      gtag('config', 'UA-116663597-6');
     </script>
   </head>
 
   <body>
     <h1>Water.css</h1>
     <p>
-      Water.css is a just-add-css collection of styles to make simple websites like this just a
+      Water.css is a just-add-css collection of styles to make simple websites
-      little bit nicer.
+      like this just a little bit nicer.
       <a href='https://github.com/kognise/water.css'>Get it already!</a>
     </p>
     <p>
-      Now you can write your simple static site with nice semantic html, and Water.css will manage
+      Now you can write your simple static site with nice semantic html, and
-      the styling for you.
+      Water.css will manage the styling for you.
     </p>
-    <a href='https://www.producthunt.com/posts/water-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-water-css'
+    <a
-      target='_blank'><img id='ph'
+      href='https://www.producthunt.com/posts/water-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-water-css'
+      target='_blank'
+      ><img
+        id='ph'
         src='https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=150490&theme=dark&period=daily'
         alt='Water.css - Make your tiny website just a little nicer | Product Hunt Embed'
-        style='width: 250px; height: 54px;' width='250px' height='54px' /></a>
+        style='width: 250px; height: 54px;'
+        width='250px'
+        height='54px'
+    /></a>
 
     <h2>Goals</h2>
     <ul>
@@ -56,16 +80,18 @@
 
     <h2>Is it responsive?</h2>
     <p>
-      <strong>Heck yeah!</strong> It doesn't include any fancy styles so it's easily mobile
+      <strong>Heck yeah!</strong> It doesn't include any fancy styles so it's
-      responsive.
+      easily mobile responsive. Just add the famous
-      Just add the famous <a href='https://www.w3schools.com/css/css_rwd_viewport.asp'>responsive
+      <a href='https://www.w3schools.com/css/css_rwd_viewport.asp'
-        viewport tag</a> and you'll be good to go!
+        >responsive viewport tag</a
+      >
+      and you'll be good to go!
     </p>
     <p>
-      In fact, try resizing this page. Everything flows super nicely as you'll see.
+      In fact, try resizing this page. Everything flows super nicely as you'll
+      see.
     </p>
-    <button type="button" id='switch'>Switch theme</button>
+    <button type='button' id='switch'>Switch theme</button>
-
     <h2>Element demos</h2>
     <p>
       This is supposed to be a demo page so we need more elements!
@@ -74,16 +100,30 @@
     <h3>Form elements</h3>
     <form>
       <label for='email'>Email</label>
-      <input type='email' name='email' id='email' placeholder='john.doe@gmail.com'>
+      <input
+        type='email'
+        name='email'
+        id='email'
+        placeholder='john.doe@gmail.com'
+      />
 
       <label for='id'>User id (read only)</label>
-      <input readonly name='id' id='id' value='04D6H89Z'>
+      <input readonly name='id' id='id' value='04D6H89Z' />
 
       <label for='disabled'>Random disabled input</label>
-      <input disabled name='disabled' id='disabled' placeholder='Because why not?'>
+      <input
+        disabled
+        name='disabled'
+        id='disabled'
+        placeholder='Because why not?'
+      />
 
       <label for='about'>About me</label>
-      <textarea name='about' id='about' placeholder='I am a textarea...'></textarea>
+      <textarea
+        name='about'
+        id='about'
+        placeholder='I am a textarea...'
+      ></textarea>
 
       <label>Choose a Doe:</label>
       <div>
@@ -103,28 +143,40 @@
         <label for='doe'>An actual doe</label>
       </div>
 
-      <br>
+      <br />
 
-      <input type='checkbox' name='remember' id='remember' checked>
+      <div>
+        <label for='volume'>Volume</label>
+        <input type='range' id='start' name='volume' id='volume' min='0' max='11' />
+      </div>
+
+      <input type='checkbox' name='remember' id='remember' checked />
       <label for='remember'>Remember me</label>
 
-      <input type='submit'>
+      <input type='submit' />
     </form>
 
     <h3>Code</h3>
     <p>
-      Below is some code, with a variable, you can copy it with <kbd>Ctrl-C</kbd>.
+      Below is some code, with a variable, you can copy it with
-      Did you know, <code>alert(1)</code> can show an alert in JavaScript!
+      <kbd>Ctrl-C</kbd>. Did you know, <code>alert(1)</code> can show an alert
+      in JavaScript!
     </p>
     <code>var <var>myNumber</var> = 0;</code>
     <pre><code>// This logs a message to the console and check out the scrollbar.<br>console.log('Hello, world!')</code></pre>
 
     <p>Here are some more keyboard buttons</p>
-    <p>Press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Print Screen</kbd> to take a selected area screenshot on Linux.</p>
+    <p>
+      Press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Print Screen</kbd> to take
+      a selected area screenshot on Linux.
+    </p>
     <h3>Other</h3>
-    <p>Here's a horizontal rule and image because I don't know where else to put them.</p>
+    <p>
-    <img src='https://placekitten.com/408/287' alt='Example kitten'>
+      Here's a horizontal rule and image because I don't know where else to put
-    <hr>
+      them.
+    </p>
+    <img src='https://placekitten.com/408/287' alt='Example kitten' />
+    <hr />
 
     <p>And here's a nicely marked up table!</p>
     <table>
@@ -156,29 +208,37 @@
 
     <h3>Typography</h3>
     <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum
-      ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis
+      hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus,
-      ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius
+      sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin
-      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu
+      maximus lacus interdum leo molestie convallis. Orci varius natoque
-      felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui
+      penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut
-      aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora
+      iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum,
-      torquent per conubia nostra, per inceptos himenaeos.
+      nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit
-      <strong>This is strong,</strong> this is normal, <b>this is just bold,</b> <em>and this is
+      lectus ac quam. Class aptent taciti sociosqu ad litora torquent per
-        emphasized!</em> And heck, <a href='/'>here</a>'s a link.
+      conubia nostra, per inceptos himenaeos.
+      <strong>This is strong,</strong> this is normal,
+      <b>this is just bold,</b> <em>and this is emphasized!</em> And heck,
+      <a href='/'>here</a>'s a link.
     </p>
 
-    <blockquote cite='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote'>
+    <blockquote
-      "The HTML blockquote Element (or HTML Block Quotation Element) indicates
+      cite='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote'
-      that the enclosed text is an extended quotation. Usually, this is
+    >
-      rendered visually by indentation (see
+      'The HTML blockquote Element (or HTML Block Quotation Element) indicates
+      that the enclosed text is an extended quotation. Usually, this is rendered
+      visually by indentation (see
       <a
-        href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#Usage_notes'>Notes</a>
+        href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#Usage_notes'
-      for how to change it). A URL for the source of the quotation may be given using the
+        >Notes</a
-      <code>cite</code> attribute, while a text representation of the source
+      >
-      can be given using the <code>&ltcite&gt</code> cite element."
+      for how to change it). A URL for the source of the quotation may be given
+      using the
+      <code>cite</code> attribute, while a text representation of the source can
+      be given using the <code>&ltcite&gt</code> cite element.'
 
       <footer>
-        <cite>MDN, "The Block Quotation element"</cite>
+        <cite>MDN, 'The Block Quotation element'</cite>
       </footer>
     </blockquote>
 
@@ -197,9 +257,7 @@
       <li>Ordered list item 3</li>
     </ol>
 
-    <p>
+    <p>Addresses are also styled to be <strong>awesome</strong>!</p>
-      Addresses are also styled to be <strong>awesome</strong>!
-    </p>
     <address>
       <a href='mailto:john.doe@example.com'>john.doe@example.com</a><br />
       <a href='tel:778-330-2389'>778-330-2389</a><br />
@@ -213,8 +271,7 @@
     <h5>Heading 5</h5>
     <h6>Heading 6</h6>
 
-    <script src="https://unpkg.com/favicon-mode-switcher@^1.0.0" defer></script>
+    <script src='https://unpkg.com/favicon-mode-switcher@^1.0.0' defer></script>
-    <script src="script.js" defer></script>
+    <script src='script.js' defer></script>
   </body>
-
 </html>

src/parts/_core.css

@@ -1,6 +1,7 @@
 @import '_base.css';
 @import '_typography.css';
 @import '_forms.css';
+@import '_range.css';
 @import '_links.css';
 @import '_code.css';
 @import '_misc.css';

src/parts/_forms.css

@@ -2,6 +2,7 @@ button,
 input[type='submit'],
 input[type='button'],
 input[type='checkbox'],
+input[type='range'],
 input[type='radio'] {
   cursor: pointer;
 }
@@ -12,7 +13,6 @@ select {
 }
 
 input,
-select,
 button,
 textarea {
   color: var(--form-text);
@@ -103,6 +103,7 @@ input[type='checkbox']:active,
 input[type='radio']:active,
 input[type='submit']:active,
 input[type='button']:active,
+input[type='range']:active,
 button:active {
   transform: translateY(2px);
 }

src/parts/_range.css

@@ -0,0 +1,87 @@
+input[type='range'] {
+  margin: 10px 0;
+  padding: 10px 0;
+  background: transparent;
+}
+
+input[type='range']:focus {
+  outline: none;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 9.5px;
+  transition: 0.2s;
+  background: var(--background);
+  border-radius: 3px;
+}
+
+input[type='range']::-webkit-slider-thumb {
+  box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: var(--border);
+  -webkit-appearance: none;
+  margin-top: -7px;
+}
+
+input[type='range']:focus::-webkit-slider-runnable-track {
+  background: var(--background);
+}
+
+input[type='range']::-moz-range-track {
+  width: 100%;
+  height: 9.5px;
+  transition: 0.2s;
+  background: var(--background);
+  border-radius: 3px;
+}
+
+input[type='range']::-moz-range-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: var(--border);
+}
+
+input[type='range']::-ms-track {
+  width: 100%;
+  height: 9.5px;
+  background: transparent;
+  border-color: transparent;
+  border-width: 16px 0;
+  color: transparent;
+}
+
+input[type='range']::-ms-fill-lower {
+  background: var(--background);
+  border: 0.2px solid #010101;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+
+input[type='range']::-ms-fill-upper {
+  background: var(--background);
+  border: 0.2px solid #010101;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+
+input[type='range']::-ms-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: var(--border);
+}
+
+input[type='range']:focus::-ms-fill-lower {
+  background: var(--background);
+}
+
+input[type='range']:focus::-ms-fill-upper {
+  background: var(--background);
+}