Add colors

1 files changed, 31 insertions, 31 deletions

diff --git a/docs/dist/spectre-exp.css b/docs/dist/spectre-exp.css
index 58c23cd..1b83c86 100644
--- a/docs/dist/spectre-exp.css
+++ b/docs/dist/spectre-exp.css
@@ -51,7 +51,7 @@
 }
 
 .calendar {
-  border: .05rem solid #dadee4;
+  border: .05rem solid #a6a6a6;
   border-radius: .1rem;
   display: block;
   min-width: 280px;
@@ -59,7 +59,7 @@
 
 .calendar .calendar-nav {
   align-items: center;
-  background: #f7f8f9;
+  background: #0d0d0d;
   border-top-left-radius: .1rem;
   border-top-right-radius: .1rem;
   display: -ms-flexbox;
@@ -88,15 +88,15 @@
 }
 
 .calendar .calendar-header {
-  background: #f7f8f9;
-  border-bottom: .05rem solid #dadee4;
-  color: #bcc3ce;
+  background: #0d0d0d;
+  border-bottom: .05rem solid #a6a6a6;
+  color: #8c8c8c;
   font-size: .7rem;
   text-align: center;
 }
 
 .calendar .calendar-body {
-  color: #66758c;
+  color: #404040;
 }
 
 .calendar .calendar-date {
@@ -111,7 +111,7 @@
   background: transparent;
   border: .05rem solid transparent;
   border-radius: 50%;
-  color: #66758c;
+  color: #404040;
   cursor: pointer;
   font-size: .7rem;
   height: 1.4rem;
@@ -213,8 +213,8 @@
 }
 
 .calendar.calendar-lg .calendar-body .calendar-date {
-  border-bottom: .05rem solid #dadee4;
-  border-right: .05rem solid #dadee4;
+  border-bottom: .05rem solid #a6a6a6;
+  border-right: .05rem solid #a6a6a6;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: column;
@@ -292,11 +292,11 @@
 .carousel .carousel-locator:nth-of-type(6):checked ~ .carousel-nav .nav-item:nth-of-type(6),
 .carousel .carousel-locator:nth-of-type(7):checked ~ .carousel-nav .nav-item:nth-of-type(7),
 .carousel .carousel-locator:nth-of-type(8):checked ~ .carousel-nav .nav-item:nth-of-type(8) {
-  color: #f7f8f9;
+  color: #bfbfbf;
 }
 
 .carousel {
-  background: #f7f8f9;
+  background: #0d0d0d;
   display: block;
   overflow: hidden;
   -webkit-overflow-scrolling: touch;
@@ -335,9 +335,9 @@
 
 .carousel .carousel-container .item-prev,
 .carousel .carousel-container .item-next {
-  background: rgba(247, 248, 249, .25);
-  border-color: rgba(247, 248, 249, .5);
-  color: #f7f8f9;
+  background: rgba(191, 191, 191, .25);
+  border-color: rgba(191, 191, 191, .5);
+  color: #bfbfbf;
   opacity: 0;
   position: absolute;
   top: 50%;
@@ -368,7 +368,7 @@
 }
 
 .carousel .carousel-nav .nav-item {
-  color: rgba(247, 248, 249, .5);
+  color: rgba(191, 191, 191, .5);
   display: block;
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;
@@ -497,7 +497,7 @@
 }
 
 .comparison-slider .comparison-label {
-  background: rgba(48, 55, 66, .5);
+  background: rgba(0, 0, 0, .5);
   bottom: .8rem;
   color: #000;
   padding: .2rem .4rem;
@@ -565,7 +565,7 @@
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  background: #f7f8f9;
+  background: #0d0d0d;
   border: 0;
   border-radius: .1rem;
   display: block;
@@ -585,7 +585,7 @@
 }
 
 .meter::-webkit-meter-bar {
-  background: #f7f8f9;
+  background: #0d0d0d;
 }
 
 .meter::-webkit-meter-optimum-value {
@@ -639,7 +639,7 @@
 }
 
 .off-canvas .off-canvas-sidebar {
-  background: #f7f8f9;
+  background: #0d0d0d;
   bottom: 0;
   left: 0;
   min-width: 10rem;
@@ -659,7 +659,7 @@
 }
 
 .off-canvas .off-canvas-overlay {
-  background: rgba(48, 55, 66, .1);
+  background: rgba(0, 0, 0, .1);
   border-color: transparent;
   border-radius: 0;
   bottom: 0;
@@ -706,7 +706,7 @@
 }
 
 .parallax .parallax-content {
-  box-shadow: 0 1rem 2.1rem rgba(48, 55, 66, .3);
+  box-shadow: 0 1rem 2.1rem rgba(0, 0, 0, .3);
   height: auto;
   transform: perspective(1000px);
   transform-style: preserve-3d;
@@ -736,7 +736,7 @@
   left: 0;
   position: absolute;
   text-align: center;
-  text-shadow: 0 0 20px rgba(48, 55, 66, .75);
+  text-shadow: 0 0 20px rgba(0, 0, 0, .75);
   top: 0;
   transform: translateZ(50px) scale(.95);
   transition: transform .4s;
@@ -848,7 +848,7 @@
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  background: #eef0f3;
+  background: #050505;
   border: 0;
   border-radius: .1rem;
   color: #5755d9;
@@ -874,7 +874,7 @@
 
 .progress:indeterminate {
   animation: progress-indeterminate 1.5s linear infinite;
-  background: #eef0f3 linear-gradient(to right, #5755d9 30%, #eef0f3 30%) top left/150% 150% no-repeat;
+  background: #050505 linear-gradient(to right, #5755d9 30%, #050505 30%) top left/150% 150% no-repeat;
 }
 
 .progress:indeterminate::-moz-progress-bar {
@@ -955,38 +955,38 @@
 
 .slider:disabled::-webkit-slider-thumb,
 .slider.disabled::-webkit-slider-thumb {
-  background: #f7f8f9;
+  background: #bfbfbf;
   transform: scale(1);
 }
 
 .slider:disabled::-moz-range-thumb,
 .slider.disabled::-moz-range-thumb {
-  background: #f7f8f9;
+  background: #bfbfbf;
   transform: scale(1);
 }
 
 .slider:disabled::-ms-thumb,
 .slider.disabled::-ms-thumb {
-  background: #f7f8f9;
+  background: #bfbfbf;
   transform: scale(1);
 }
 
 .slider::-webkit-slider-runnable-track {
-  background: #eef0f3;
+  background: #050505;
   border-radius: .1rem;
   height: .1rem;
   width: 100%;
 }
 
 .slider::-moz-range-track {
-  background: #eef0f3;
+  background: #050505;
   border-radius: .1rem;
   height: .1rem;
   width: 100%;
 }
 
 .slider::-ms-track {
-  background: #eef0f3;
+  background: #050505;
   border-radius: .1rem;
   height: .1rem;
   width: 100%;
@@ -1004,7 +1004,7 @@
 }
 
 .timeline .timeline-item::before {
-  background: #dadee4;
+  background: #a6a6a6;
   content: "";
   height: 100%;
   left: 11px;