docs: updated

docs/index.html

@@ -192,6 +192,8 @@
           <a href="https://lgtm.com/projects/g/sebhildebrandt/systeminformation/alerts" rel="nofollow"><img src="https://camo.githubusercontent.com/66428127fdde80fc8247a0c1df4c651f3a6b1c0a/68747470733a2f2f696d672e736869656c64732e696f2f6c67746d2f616c657274732f672f73656268696c64656272616e64742f73797374656d696e666f726d6174696f6e2e7376673f7374796c653d666c61742d737175617265" alt="Total alerts" data-canonical-src="https://img.shields.io/lgtm/alerts/g/sebhildebrandt/systeminformation.svg?style=flat-square" style="max-width:100%;"></a>
           <a href="https://github.com/sebhildebrandt/systeminformation/blob/master/LICENSE"><img src="https://camo.githubusercontent.com/4b5966a2a252ee0f241a1e03b13417178eb4964f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e7376673f7374796c653d666c61742d737175617265" alt="MIT license" data-canonical-src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" style="max-width:100%;"></a>
         </div>
+        <div class="text larger"><span class="warning">Security issues:</span> Please have a look at our <a href="../security.html">security advisories</a>.</div>
+
       </div>
     </div>
     <div class="row justify-content-center sectionheader index">
@@ -345,7 +347,7 @@
     <div class="row">
       <div class="col-12 sectionheader index">
         <div class="title-small">Issues</div>
-        <div class="text"><span class="bold">Security issues</span>: Please have a look at our <a href="security.html">security advisories</a></div>
+        <div class="text"><span class="warning">Security issues:</span> We highly recomment to have a look at our <a href="security.html">security advisories</a></div>
         <div class="text"><span class="bold">Having an issue</span>: If you run into problems, please check out <a href="issues.html">known issues page</a> first.<br>If you still have problems, please feel free to open an issue on our <a href="https://github.com/sebhildebrandt/systeminformation/issues">github page</a></div>
       </div>
     </div>

docs/security.html

@@ -44,7 +44,9 @@
             <div class="title">Security Advisories</div>
             <div class="text">
               <h2>Passing User Paramters to Systeminformation</h2>
-              <p><span class="bold">Be aware</span> to not use <span class="code">inetLatency()</span>, <span class="code">inetChecksite()</span>, <span class="code">services()</span>, <span class="code">processLoad()</span> with arbitrary untrusted user input! We are doing a lot of input sanitation for those functions in this package but we cannot handle all cases!</p>
+              <p>For most of the applications that are using <span class="code">systeminformation</span>, there is no reason to worry. <span class="bold">But be aware!</span> If you are using <span class="code">inetLatency()</span>, <span class="code">inetChecksite()</span>, <span class="code">services()</span>, <span class="code">processLoad()</span> with arbitrary untrusted user input, you should pay extra attention! We are doing a lot of input sanitation for those functions inside this package but we cannot handle all cases!</p>
+              <p class="warning">This can lead to serious impact on your servers!</p>
+              <p>We highly recommend to always upgrade to the latest version of our package. We maintain security updates for version 5 AND also version 4. For version 4 you can install latest version by placing <span class="code">"systeminformation": "^4"</span> in your package.json (dependencies) and run <span class="code">npm install</span></p>
 
               <h2>Command Injection Vulnerability</h2>
               <p><span class="bold">Affected versions:</span>

docs/styles.css

@@ -1,11 +1,11 @@
 body {
-  font-family: 'Roboto', 'HelveticaNeue-Light','Helvetica Neue Light','Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-family: "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 300;
   min-height: 100%;
 }
 
 h1, h2, h3, h4 {
-  font-family: 'Roboto', 'HelveticaNeue-Light','Helvetica Neue Light','Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-family: "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 500;
   color: #3d5cb3;
 }
@@ -18,6 +18,16 @@ h1, h2, h3, h4 {
   font-weight: 500;
 }
 
+.warning {
+  font-weight: 500;
+  color: #9c0101;
+}
+
+.larger {
+  margin-top: 10px;
+  font-size: 1.5rem !important;
+}
+
 .medium {
   font-weight: 500;
 }
@@ -40,45 +50,24 @@ h1, h2, h3, h4 {
   height: 100vh;
   height: calc(var(--vh, 1vh) * 100);
   opacity: 0.95;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
+  justify-content: center;
-      -ms-flex-pack: center;
-          justify-content: center;
   text-align: center;
   width: 100% !important;
-  -webkit-box-orient: vertical;
+  flex-direction: column;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
 }
-
 .bg-image-full .top-container {
   text-align: center;
-  -ms-flex-item-align: center;
+  align-self: center;
-      align-self: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
+  justify-content: center;
-      -ms-flex-pack: center;
+  flex-direction: column;
-          justify-content: center;
+  align-items: center;
-  -webkit-box-orient: vertical;
+  flex-grow: 1;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
   overflow: hidden;
   position: relative;
   width: 100% !important;
 }
-
 .bg-image-full .recommendation {
   position: absolute;
   top: 30px;
@@ -88,20 +77,17 @@ h1, h2, h3, h4 {
   display: inline-block;
   width: 280px;
   text-align: center;
-  padding: .25em 0;
+  padding: 0.25em 0;
   color: white;
-  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
-          transform: rotate(45deg);
   background: #971d1d;
   font-size: 0.9rem;
 }
-
 @media only screen and (min-width: 420px) {
   .bg-image-full .recommendation {
-    font-size: 1.0rem;
+    font-size: 1rem;
   }
 }
-
 @media only screen and (min-width: 767px) {
   .bg-image-full .recommendation {
     font-size: 1.1rem;
@@ -110,7 +96,6 @@ h1, h2, h3, h4 {
     width: 330px;
   }
 }
-
 @media only screen and (min-width: 1024px) {
   .bg-image-full .recommendation {
     width: 330px;
@@ -120,11 +105,9 @@ h1, h2, h3, h4 {
     font-size: 1.2rem;
   }
 }
-
 .bg-image-full .recommendation:hover {
   text-decoration: none;
 }
-
 .bg-image-full .title {
   color: #fff;
   padding-top: 10px;
@@ -132,197 +115,164 @@ h1, h2, h3, h4 {
   margin-bottom: 10px;
   font-weight: 500;
 }
-
 @media only screen and (min-width: 374px) {
   .bg-image-full .title {
     font-size: 2.1rem;
   }
 }
-
 @media only screen and (min-width: 420px) {
   .bg-image-full .title {
     font-size: 2.4rem;
   }
 }
-
 @media only screen and (min-width: 767px) {
   .bg-image-full .title {
     font-size: 3.5rem;
   }
 }
-
 @media only screen and (min-width: 1024px) {
   .bg-image-full .title {
     font-size: 4rem;
   }
 }
-
 @media only screen and (min-width: 1200px) {
   .bg-image-full .title {
     font-size: 5rem;
   }
 }
-
 @media only screen and (min-width: 1900px) {
   .bg-image-full .title {
     font-size: 6rem;
   }
 }
-
 .bg-image-full .logo {
   width: 100px;
 }
-
 @media only screen and (min-width: 420px) {
   .bg-image-full .logo {
     width: 120px;
   }
 }
-
 @media only screen and (min-width: 767px) {
   .bg-image-full .logo {
     width: 160px;
   }
 }
-
 @media only screen and (min-width: 1024px) {
   .bg-image-full .logo {
     width: 200px;
   }
 }
-
 @media only screen and (min-width: 1900px) {
   .bg-image-full .logo {
     width: 250px;
   }
 }
-
 .bg-image-full .subtitle {
   text-align: center;
   color: #bbb;
   font-size: 0.78rem;
 }
-
 @media only screen and (min-width: 375px) {
   .bg-image-full .subtitle {
     font-size: 0.9rem;
   }
 }
-
 @media only screen and (min-width: 420px) {
   .bg-image-full .subtitle {
     font-size: 1rem;
   }
 }
-
 @media only screen and (min-width: 767px) {
   .bg-image-full .subtitle {
     font-size: 1.1rem;
   }
 }
-
 @media only screen and (min-width: 1024px) {
   .bg-image-full .subtitle {
     font-size: 1.3rem;
   }
 }
-
 @media only screen and (min-width: 1200px) {
   .bg-image-full .subtitle {
     font-size: 1.4rem;
   }
 }
-
 @media only screen and (min-width: 1900px) {
   .bg-image-full .subtitle {
     font-size: 1.6rem;
   }
 }
-
 .bg-image-full .text > a {
   text-align: center;
   color: #fff;
   font-size: 0.9rem;
 }
-
 .bg-image-full .text > a:hover {
   color: #aaa;
   text-decoration: none;
 }
-
 @media only screen and (min-width: 375px) {
   .bg-image-full .text > a {
     font-size: 0.9rem;
   }
 }
-
 @media only screen and (min-width: 420px) {
   .bg-image-full .text > a {
     font-size: 1rem;
   }
 }
-
 @media only screen and (min-width: 767px) {
   .bg-image-full .text > a {
     font-size: 1rem;
   }
 }
-
 @media only screen and (min-width: 1024px) {
   .bg-image-full .text > a {
     font-size: 1.1rem;
   }
 }
-
 @media only screen and (min-width: 1200px) {
   .bg-image-full .text > a {
     font-size: 1.2rem;
   }
 }
-
 @media only screen and (min-width: 1900px) {
   .bg-image-full .text > a {
     font-size: 1.5rem;
   }
 }
-
 .bg-image-full .version {
   text-align: center;
   margin-bottom: 10px;
   color: #fff;
-  font-size: .9rem;
+  font-size: 0.9rem;
 }
-
 @media only screen and (min-width: 420px) {
   .bg-image-full .version {
-    font-size: .9rem;
+    font-size: 0.9rem;
   }
 }
-
 @media only screen and (min-width: 768px) {
   .bg-image-full .version {
     font-size: 1rem;
   }
 }
-
 @media only screen and (min-width: 1024px) {
   .bg-image-full .version {
     font-size: 1.1rem;
   }
 }
-
 @media only screen and (min-width: 1200px) {
   .bg-image-full .version {
     font-size: 1.2rem;
   }
 }
-
 @media only screen and (min-width: 1900px) {
   .bg-image-full .version {
     font-size: 1.5rem;
   }
 }
-
 .bg-image-full .down {
   text-align: center;
   color: #fff;
@@ -331,7 +281,6 @@ h1, h2, h3, h4 {
   margin-bottom: 15px;
   cursor: pointer;
 }
-
 .bg-image-full .down .caret {
   font-size: 3rem;
 }
@@ -347,12 +296,10 @@ h1, h2, h3, h4 {
   height: 65px;
   position: relative;
 }
-
 .nav .logo {
   width: 60px;
   margin-top: 12px;
 }
-
 .nav .title {
   display: none;
   color: #fff;
@@ -361,55 +308,45 @@ h1, h2, h3, h4 {
   margin-top: 15px;
   font-weight: 500;
 }
-
 @media only screen and (min-width: 767px) {
   .nav .title {
     display: inline-block;
   }
 }
-
 @media only screen and (min-width: 1024px) {
   .nav .title {
     font-size: 1.5rem;
   }
 }
-
 .nav .text {
   margin-top: 18px;
 }
-
 .nav .text a {
   color: #fff;
   margin-top: 12px;
-  font-size: 1.0rem;
+  font-size: 1rem;
 }
-
 @media only screen and (min-width: 1023px) {
   .nav .text a {
     margin-top: 10px;
     font-size: 1.2rem;
   }
 }
-
 .nav .text a:hover {
   color: #aaa;
   text-decoration: none;
 }
-
 .nav .github {
   display: none;
 }
-
 @media only screen and (min-width: 768px) {
   .nav .github {
     display: inline-block;
   }
 }
-
 .nav .todocs {
   display: inline-block;
 }
-
 @media only screen and (min-width: 768px) {
   .nav .todocs {
     display: none;
@@ -420,51 +357,42 @@ h1, h2, h3, h4 {
   text-align: center;
   color: #333;
 }
-
 .features .inner {
   padding: 10px 0px;
 }
-
 @media only screen and (min-width: 768px) {
   .features .inner {
     padding: 15px 20px;
   }
 }
-
 .features .inner .icons {
   display: block;
   font-size: 3rem;
   line-height: 1.3;
   color: #bbb;
 }
-
 @media only screen and (min-width: 420px) {
   .features .inner .icons {
     font-size: 3.5rem;
   }
 }
-
 @media only screen and (min-width: 768px) {
   .features .inner .icons {
     font-size: 4rem;
   }
 }
-
 @media only screen and (min-width: 1024px) {
   .features .inner .icons {
     font-size: 5rem;
   }
 }
-
 .features .inner .icontitle {
   font-size: 1.2rem;
 }
-
 .features .inner:hover {
   background: #f4f4f4;
   color: #567adf;
 }
-
 .features .inner:hover .icons {
   color: #567adf;
 }
@@ -476,13 +404,11 @@ h1, h2, h3, h4 {
   font-weight: 500;
   color: #3d5cb3;
 }
-
 @media only screen and (min-width: 420px) {
   .sectionheader .title {
     font-size: 2.3rem;
   }
 }
-
 @media only screen and (min-width: 768px) {
   .sectionheader .title {
     text-align: left;
@@ -490,27 +416,23 @@ h1, h2, h3, h4 {
     font-size: 2.6rem;
   }
 }
-
 @media only screen and (min-width: 1024px) {
   .sectionheader .title {
     padding-top: 40px;
     font-size: 3rem;
   }
 }
-
 .sectionheader .title-small {
   text-align: center;
   font-size: 1.4rem;
   font-weight: 500;
   color: #3d5cb3;
 }
-
 @media only screen and (min-width: 420px) {
   .sectionheader .title-small {
     font-size: 1.6rem;
   }
 }
-
 @media only screen and (min-width: 768px) {
   .sectionheader .title-small {
     text-align: left;
@@ -518,53 +440,44 @@ h1, h2, h3, h4 {
     font-size: 1.8rem;
   }
 }
-
 @media only screen and (min-width: 1024px) {
   .sectionheader .title-small {
     padding-top: 30px;
     font-size: 2rem;
   }
 }
-
 .sectionheader .subtitle {
   text-align: center;
-  font-size: .9rem;
+  font-size: 0.9rem;
 }
-
 @media only screen and (min-width: 420px) {
   .sectionheader .subtitle {
     font-size: 1rem;
   }
 }
-
 @media only screen and (min-width: 768px) {
   .sectionheader .subtitle {
     text-align: left;
     font-size: 1.1rem;
   }
 }
-
 @media only screen and (min-width: 1024px) {
   .sectionheader .subtitle {
     font-size: 1.3rem;
   }
 }
-
 .sectionheader .npmicons {
   text-align: center;
 }
-
 .sectionheader .text {
   text-align: center;
   padding-top: 10px;
 }
-
 @media only screen and (min-width: 768px) {
   .sectionheader .text {
     text-align: left;
   }
 }
-
 .sectionheader hr {
   margin-top: 40px;
   margin-bottom: 0px;
@@ -574,19 +487,15 @@ h1, h2, h3, h4 {
 .index {
   margin: 0 0 10px 0;
 }
-
 .index .text, .index .subtitle, .index .title, .index .title-small, .index .npmicons {
   text-align: center;
 }
-
 .index .larger {
   font-size: 1.2rem;
 }
-
 .index a {
   text-decoration: none;
 }
-
 .index a:hover {
   text-decoration: none;
   color: #567adf;
@@ -608,34 +517,28 @@ ul {
   margin-top: 40px;
   text-align: center;
 }
-
 .number-section .numbers {
   font-size: 2rem;
 }
-
 @media only screen and (min-width: 420px) {
   .number-section .numbers {
     font-size: 2.4rem;
   }
 }
-
 @media only screen and (min-width: 768px) {
   .number-section .numbers {
     font-size: 2.8rem;
   }
 }
-
 .number-section .title {
   color: #999;
   font-size: 1rem;
 }
-
 @media only screen and (min-width: 420px) {
   .number-section .title {
     font-size: 1.1rem;
   }
 }
-
 @media only screen and (min-width: 768px) {
   .number-section .title {
     font-size: 1.2rem;
@@ -645,60 +548,49 @@ ul {
 .menu {
   display: none;
 }
-
 @media only screen and (min-width: 768px) {
   .menu {
     margin-top: 30px;
     display: inline-block;
   }
 }
-
 .menu .title {
   margin: 25px 0 5px 0;
   color: #000;
 }
-
 .menu .title a {
   width: 100%;
   color: #000;
   text-decoration: none;
 }
-
 .menu .title a:hover {
   color: #567adf;
 }
-
 .menu .title .navtitle {
   font-size: 1.3rem;
   margin-bottom: 5px;
   display: inline-block;
   color: #3d5cb3;
 }
-
 .menu hr {
   margin: 5px 0;
 }
-
 .menu ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
-
 .menu ul li {
   padding: 2px 0 1px 0;
 }
-
 .menu ul li a {
   width: 100%;
   color: #666;
   text-decoration: none;
 }
-
 .menu ul li a:hover {
   color: #567adf;
 }
-
 .menu ul li.active > a {
   color: #567adf;
   font-weight: 500;
@@ -734,20 +626,16 @@ pre {
 .example td:first-child {
   background-color: #fff !important;
 }
-
 .example td:last-child {
   background-color: #f8faff !important;
 }
-
 .example h5 {
   padding-top: 5px;
   padding-left: 10px;
 }
-
 .example pre {
   background-color: unset;
 }
-
 .example pre .js {
   background-color: #f0f0f4;
 }
@@ -759,22 +647,17 @@ footer {
   padding-bottom: 30px;
   position: relative;
 }
-
 footer .home {
   color: #3d5cb3;
   font-size: 1.1rem;
 }
-
 footer a {
   color: #000;
 }
-
 footer a:hover {
   text-decoration: none;
 }
-
 footer .badge {
   color: #fff;
   font-size: 0.9rem;
-}
+}/*# sourceMappingURL=styles.css.map */
-/*# sourceMappingURL=styles.css.map */

docs/styles.scss

@@ -14,6 +14,14 @@ h1, h2, h3, h4 {
 .bold {
     font-weight: 500;
 }
+.warning {
+    font-weight: 500;
+    color: rgb(156, 1, 1);
+}
+.larger {
+  margin-top: 10px;
+  font-size: 1.5rem !important;
+}
 .medium {
     font-weight: 500;
 }

docs/v4/index.html

@@ -320,7 +320,7 @@
     <div class="row">
       <div class="col-12 sectionheader index">
         <div class="title-small">Issues</div>
-        <div class="text"><span class="bold">Security issues</span>: Please have a look at our <a href="security.html">security advisories</a></div>
+        <div class="text"><span class="warning">Security issues</span>: Please have a look at our <a href="security.html">security advisories</a></div>
         <div class="text">If you run into problems, please check out <a href="issues.html">known issues page</a> first. If you still have problems, please feel free to open an issue on our <a href="https://github.com/sebhildebrandt/systeminformation/issues">github page</a></div>
       </div>
     </div>

docs/v4/security.html

@@ -43,7 +43,9 @@
             <div class="title">Security Advisories</div>
             <div class="text">
               <h2>Passing User Paramters to Systeminformation</h2>
-              <p><span class="bold">Be aware</span> to not use <span class="code">inetLatency()</span>, <span class="code">inetChecksite()</span>, <span class="code">services()</span>, <span class="code">processLoad()</span> with arbitrary untrusted user input! We are doing a lot of input sanitation for those functions in this package but we cannot handle all cases!</p>
+              <p>For most of the applications that are using <span class="code">systeminformation</span>, there is no reason to worry. <span class="bold">But be aware!</span> If you are using <span class="code">inetLatency()</span>, <span class="code">inetChecksite()</span>, <span class="code">services()</span>, <span class="code">processLoad()</span> with arbitrary untrusted user input, you should pay extra attention! We are doing a lot of input sanitation for those functions inside this package but we cannot handle all cases!</p>
+              <p class="warning">This can lead to serious impact on your servers!</p>
+              <p>We highly recommend to always upgrade to the latest version of our package. We maintain security updates for version 5 AND also version 4. For version 4 you can install latest version by placing <span class="code">"systeminformation": "^4"</span> in your package.json (dependencies) and run <span class="code">npm install</span></p>
 
               <h2>Command Injection Vulnerability</h2>
               <p><span class="bold">Affected versions:</span>

docs/v4/styles.css

@@ -17,6 +17,11 @@ h1, h2, h3, h4 {
   font-weight: 700;
 }
 
+.warning {
+  font-weight: 500;
+  color: #9c0101;
+}
+
 .bg-image-full {
   background: no-repeat center center scroll;
   background-color: #4b2313;
@@ -28,41 +33,20 @@ h1, h2, h3, h4 {
   height: 100vh;
   height: calc(var(--vh, 1vh) * 100);
   opacity: 0.95;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
+  justify-content: center;
-      -ms-flex-pack: center;
-          justify-content: center;
   text-align: center;
-  -webkit-box-orient: vertical;
+  flex-direction: column;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
 }
-
 .bg-image-full .container {
   text-align: center;
-  -ms-flex-item-align: center;
+  align-self: center;
-      align-self: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
+  justify-content: center;
-      -ms-flex-pack: center;
+  flex-direction: column;
-          justify-content: center;
+  align-items: center;
-  -webkit-box-orient: vertical;
+  flex-grow: 1;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
 }
-
 .bg-image-full .recommendation {
   position: absolute;
   top: 40px;
@@ -71,26 +55,22 @@ h1, h2, h3, h4 {
   display: inline-block;
   width: 330px;
   text-align: center;
-  padding: .25em 0;
+  padding: 0.25em 0;
   color: white;
-  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
-          transform: rotate(45deg);
   background: #971d1d;
   font-size: 0.9rem;
 }
-
 @media only screen and (min-width: 420px) {
   .bg-image-full .recommendation {
-    font-size: 1.0rem;
+    font-size: 1rem;
   }
 }
-
 @media only screen and (min-width: 768px) {
   .bg-image-full .recommendation {
     font-size: 1.1rem;
   }
 }
-
 @media only screen and (min-width: 1024px) {
   .bg-image-full .recommendation {
     top: 50px;
@@ -98,148 +78,123 @@ h1, h2, h3, h4 {
     font-size: 1.2rem;
   }
 }
-
 .bg-image-full .recommendation:hover {
   text-decoration: none;
 }
-
 .bg-image-full .title {
   color: #fff;
   padding-top: 10px;
   font-size: 1.8rem;
   margin-bottom: 10px;
 }
-
 @media only screen and (min-width: 420px) {
   .bg-image-full .title {
     font-size: 2.4rem;
   }
 }
-
 @media only screen and (min-width: 768px) {
   .bg-image-full .title {
     font-size: 3.2rem;
   }
 }
-
 @media only screen and (min-width: 1024px) {
   .bg-image-full .title {
     font-size: 4rem;
   }
 }
-
 .bg-image-full .logo {
   width: 100px;
 }
-
 @media only screen and (min-width: 420px) {
   .bg-image-full .logo {
     width: 120px;
   }
 }
-
 @media only screen and (min-width: 768px) {
   .bg-image-full .logo {
     width: 160px;
   }
 }
-
 @media only screen and (min-width: 1024px) {
   .bg-image-full .logo {
     width: 200px;
   }
 }
-
 .bg-image-full .subtitle {
   text-align: center;
   color: #bbb;
   font-size: 0.78rem;
 }
-
 @media only screen and (min-width: 375px) {
   .bg-image-full .subtitle {
     font-size: 0.9rem;
   }
 }
-
 @media only screen and (min-width: 420px) {
   .bg-image-full .subtitle {
     font-size: 1rem;
   }
 }
-
 @media only screen and (min-width: 768px) {
   .bg-image-full .subtitle {
     font-size: 1.1rem;
   }
 }
-
 @media only screen and (min-width: 1024px) {
   .bg-image-full .subtitle {
     font-size: 1.3rem;
   }
 }
-
 .bg-image-full .text > a {
   text-align: center;
   color: #fff;
   font-size: 0.9rem;
 }
-
 .bg-image-full .text > a:hover {
   color: #aaa;
   text-decoration: none;
 }
-
 @media only screen and (min-width: 375px) {
   .bg-image-full .text > a {
     font-size: 0.9rem;
   }
 }
-
 @media only screen and (min-width: 420px) {
   .bg-image-full .text > a {
     font-size: 1rem;
   }
 }
-
 @media only screen and (min-width: 768px) {
   .bg-image-full .text > a {
     font-size: 1rem;
   }
 }
-
 @media only screen and (min-width: 1024px) {
   .bg-image-full .text > a {
     font-size: 1.1rem;
   }
 }
-
 .bg-image-full .version {
   text-align: center;
   margin-bottom: 10px;
   color: #fff;
-  font-size: .9rem;
+  font-size: 0.9rem;
 }
-
 @media only screen and (min-width: 420px) {
   .bg-image-full .version {
-    font-size: .9rem;
+    font-size: 0.9rem;
   }
 }
-
 @media only screen and (min-width: 768px) {
   .bg-image-full .version {
     font-size: 1rem;
   }
 }
-
 @media only screen and (min-width: 1024px) {
   .bg-image-full .version {
     font-size: 1.1rem;
   }
 }
-
 .bg-image-full .down {
   text-align: center;
   color: #fff;
@@ -248,7 +203,6 @@ h1, h2, h3, h4 {
   margin-bottom: 15px;
   cursor: pointer;
 }
-
 .bg-image-full .down .caret {
   font-size: 3rem;
 }
@@ -264,12 +218,10 @@ h1, h2, h3, h4 {
   height: 65px;
   position: relative;
 }
-
 .nav .logo {
   width: 60px;
   margin-top: 12px;
 }
-
 .nav .title {
   display: none;
   color: #fff;
@@ -277,55 +229,45 @@ h1, h2, h3, h4 {
   margin-left: 15px;
   margin-top: 18px;
 }
-
 @media only screen and (min-width: 768px) {
   .nav .title {
     display: inline-block;
   }
 }
-
 @media only screen and (min-width: 1024px) {
   .nav .title {
     font-size: 1.2rem;
   }
 }
-
 .nav .text {
   margin-top: 18px;
 }
-
 .nav .text a {
   color: #fff;
   margin-top: 12px;
-  font-size: 1.0rem;
+  font-size: 1rem;
 }
-
 @media only screen and (min-width: 1023px) {
   .nav .text a {
     margin-top: 10px;
     font-size: 1.2rem;
   }
 }
-
 .nav .text a:hover {
   color: #aaa;
   text-decoration: none;
 }
-
 .nav .github {
   display: none;
 }
-
 @media only screen and (min-width: 768px) {
   .nav .github {
     display: inline-block;
   }
 }
-
 .nav .todocs {
   display: inline-block;
 }
-
 @media only screen and (min-width: 768px) {
   .nav .todocs {
     display: none;
@@ -336,50 +278,41 @@ h1, h2, h3, h4 {
   text-align: center;
   color: #333;
 }
-
 .features .inner {
   padding: 10px 0px;
 }
-
 @media only screen and (min-width: 768px) {
   .features .inner {
     padding: 15px 20px;
   }
 }
-
 .features .inner .icons {
   display: block;
   font-size: 3rem;
   color: #bbb;
 }
-
 @media only screen and (min-width: 420px) {
   .features .inner .icons {
     font-size: 3.5rem;
   }
 }
-
 @media only screen and (min-width: 768px) {
   .features .inner .icons {
     font-size: 4rem;
   }
 }
-
 @media only screen and (min-width: 1024px) {
   .features .inner .icons {
     font-size: 5rem;
   }
 }
-
 .features .inner .icontitle {
   font-size: 1.2rem;
 }
-
 .features .inner:hover {
   background: #f4f4f4;
   color: #567adf;
 }
-
 .features .inner:hover .icons {
   color: #567adf;
 }
@@ -389,13 +322,11 @@ h1, h2, h3, h4 {
   padding-top: 20px;
   font-size: 2rem;
 }
-
 @media only screen and (min-width: 420px) {
   .sectionheader .title {
     font-size: 2.3rem;
   }
 }
-
 @media only screen and (min-width: 768px) {
   .sectionheader .title {
     text-align: left;
@@ -403,25 +334,21 @@ h1, h2, h3, h4 {
     font-size: 2.6rem;
   }
 }
-
 @media only screen and (min-width: 1024px) {
   .sectionheader .title {
     padding-top: 30px;
     font-size: 3rem;
   }
 }
-
 .sectionheader .title-small {
   text-align: center;
   font-size: 1.4rem;
 }
-
 @media only screen and (min-width: 420px) {
   .sectionheader .title-small {
     font-size: 1.6rem;
   }
 }
-
 @media only screen and (min-width: 768px) {
   .sectionheader .title-small {
     text-align: left;
@@ -429,53 +356,44 @@ h1, h2, h3, h4 {
     font-size: 1.8rem;
   }
 }
-
 @media only screen and (min-width: 1024px) {
   .sectionheader .title-small {
     padding-top: 30px;
     font-size: 2rem;
   }
 }
-
 .sectionheader .subtitle {
   text-align: center;
-  font-size: .9rem;
+  font-size: 0.9rem;
 }
-
 @media only screen and (min-width: 420px) {
   .sectionheader .subtitle {
     font-size: 1rem;
   }
 }
-
 @media only screen and (min-width: 768px) {
   .sectionheader .subtitle {
     text-align: left;
     font-size: 1.1rem;
   }
 }
-
 @media only screen and (min-width: 1024px) {
   .sectionheader .subtitle {
     font-size: 1.3rem;
   }
 }
-
 .sectionheader .npmicons {
   text-align: center;
 }
-
 .sectionheader .text {
   text-align: center;
   padding-top: 10px;
 }
-
 @media only screen and (min-width: 768px) {
   .sectionheader .text {
     text-align: left;
   }
 }
-
 .sectionheader hr {
   margin-top: 40px;
   margin-bottom: 0px;
@@ -485,15 +403,12 @@ h1, h2, h3, h4 {
 .index {
   margin: 0 0 10px 0;
 }
-
 .index .text, .index .subtitle, .index .title, .index .title-small, .index .npmicons {
   text-align: center;
 }
-
 .index a {
   text-decoration: none;
 }
-
 .index a:hover {
   text-decoration: none;
   color: #567adf;
@@ -515,34 +430,28 @@ ul {
   margin-top: 40px;
   text-align: center;
 }
-
 .number-section .numbers {
   font-size: 2rem;
 }
-
 @media only screen and (min-width: 420px) {
   .number-section .numbers {
     font-size: 2.4rem;
   }
 }
-
 @media only screen and (min-width: 768px) {
   .number-section .numbers {
     font-size: 2.8rem;
   }
 }
-
 .number-section .title {
   color: #999;
   font-size: 1rem;
 }
-
 @media only screen and (min-width: 420px) {
   .number-section .title {
     font-size: 1.1rem;
   }
 }
-
 @media only screen and (min-width: 768px) {
   .number-section .title {
     font-size: 1.2rem;
@@ -552,53 +461,43 @@ ul {
 .menu {
   display: none;
 }
-
 @media only screen and (min-width: 768px) {
   .menu {
     margin-top: 30px;
     display: inline-block;
   }
 }
-
 .menu .title {
   margin: 25px 0 5px 0;
   color: #000;
 }
-
 .menu .title a {
   width: 100%;
   color: #000;
   text-decoration: none;
 }
-
 .menu .title a:hover {
   color: #567adf;
 }
-
 .menu hr {
   margin: 5px 0;
 }
-
 .menu ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
-
 .menu ul li {
   padding: 2px 0;
 }
-
 .menu ul li a {
   width: 100%;
   color: #666;
   text-decoration: none;
 }
-
 .menu ul li a:hover {
   color: #567adf;
 }
-
 .menu ul li.active > a {
   color: #567adf;
 }
@@ -633,20 +532,16 @@ pre {
 .example td:first-child {
   background-color: #fff !important;
 }
-
 .example td:last-child {
   background-color: #f8faff !important;
 }
-
 .example h5 {
   padding-top: 5px;
   padding-left: 10px;
 }
-
 .example pre {
   background-color: unset;
 }
-
 .example pre .js {
   background-color: #f0f0f4;
 }
@@ -658,11 +553,9 @@ footer {
   padding-bottom: 30px;
   position: relative;
 }
-
 footer a {
   color: #000;
 }
-
 footer .badge {
   color: #fff;
   font-size: 0.9rem;
@@ -675,5 +568,4 @@ footer .badge {
 
 .v5 {
   color: #567adf;
-}
+}/*# sourceMappingURL=styles.css.map */
-/*# sourceMappingURL=styles.css.map */

docs/v4/styles.scss

@@ -13,6 +13,10 @@ h1, h2, h3, h4 {
 .bold {
     font-weight: 700;
 }
+.warning {
+    font-weight: 500;
+    color: rgb(156, 1, 1);
+}
 .bg-image-full {
     background: no-repeat center center scroll;
     background-color: #4b2313; /* For browsers that do not support gradients */