Browse Source

Replace Bootstrap blue with the page slate; schedule is one line per day

Every blue accent on the page now uses #484c57, the same colour as the page
background, header and footer:

  - Player tab icons (fire/cd/user/calendar/time) were inheriting Bootstrap's
    link blue. The active tab keeps its #555 -- Bootstrap's own
    `.nav-tabs > li.active > a` is more specific than the new rule, so the
    selected tab still reads as selected instead of going flat.
  - Volume slider track, across every vendor prefix (webkit runnable-track, moz
    range-track, ms fill-lower/fill-upper) and their :focus shades. Scoped to
    the input[type=range] block so .progress-bar keeps its own colour.
  - Post button was already done.

Verified: no Bootstrap blue (#337ab7 and its focus/active shades) remains on any
visible element.

Left white on purpose: the footer-nav icons sit on a rgba(0,0,0,.5) panel and
the Post bullhorn sits on the now-slate button. Those were never blue, and
recolouring them to the background would have made them illegible or invisible.

Schedule: seven lines, one per day, each "Daveo Radio 24/7". Replaces ten
placeholder entries for made-up shows on 2016 dates.
windhamdavid 1 day ago
parent
commit
2136809609
2 changed files with 24 additions and 17 deletions
  1. 15 7
      src/css/main.css
  2. 9 10
      src/index.html

+ 15 - 7
src/css/main.css

@@ -114,6 +114,14 @@ body {
 
 }
 
+/* Player tab icons in the page's slate instead of Bootstrap's link blue. These
+   sit on the white player panel, so a dark colour reads fine.
+   Bootstrap's own `.nav-tabs > li.active > a` is more specific, so the active
+   tab keeps its #555 and still stands out from the rest. */
+.scrollable-list-footer > li > a {
+  color: #484c57;
+}
+
 div#player{
 	width: 100%;
 	color: #555555;
@@ -150,7 +158,7 @@ input[type=range]::-webkit-slider-runnable-track {
   cursor: pointer;
   animate: 0.2s;
   box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
-  background: #337ab7;
+  background: #484c57;
   border-radius: 1.3px;
   border: 0.2px solid #010101;
 }
@@ -167,7 +175,7 @@ input[type=range]::-webkit-slider-thumb {
   margin-top: -8px;
 }
 input[type=range]:focus::-webkit-slider-runnable-track {
-  background: #367ebd;
+  background: #3a3d46;
 }
 input[type=range]::-moz-range-track {
   width: 100%;
@@ -175,7 +183,7 @@ input[type=range]::-moz-range-track {
   cursor: pointer;
   animate: 0.2s;
   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-  background: #337ab7;
+  background: #484c57;
   border-radius: 1.3px;
   border: 0.2px solid #010101;
 }
@@ -199,13 +207,13 @@ input[type=range]::-ms-track {
   color: transparent;
 }
 input[type=range]::-ms-fill-lower {
-  background: #2a6495;
+  background: #3a3d46;
   border: 0.2px solid #010101;
   border-radius: 2.6px;
   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
 }
 input[type=range]::-ms-fill-upper {
-  background: #337ab7;
+  background: #484c57;
   border: 0.2px solid #010101;
   border-radius: 2.6px;
   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
@@ -220,10 +228,10 @@ input[type=range]::-ms-thumb {
   cursor: pointer;
 }
 input[type=range]:focus::-ms-fill-lower {
-  background: #3071a9;
+  background: #3a3d46;
 }
 input[type=range]:focus::-ms-fill-upper {
-  background: #367ebd;
+  background: #3a3d46;
 }
 output.volume {
   position: absolute;

+ 9 - 10
src/index.html

@@ -87,18 +87,17 @@
                            <button id="play" class="list-group-item"><span class="glyphicon glyphicon-play" aria-hidden="true"></span> <b>12/1/15</b>: Monologue "On This and That" <span class="badge">7:42</span></button>
                         </ul>
                      </div>
+                     <!-- One line per day. Replaces the old placeholder listing
+                          of made-up shows and dates from 2016. -->
                      <div class="tab-pane" id="schedule">
                         <ul class="list-group">
-                           <li class="list-group-item list-group-item-info"><b>Dec 12th 2-4pm</b>: Example Show</li>
-                           <li class="list-group-item"><b>Dec 13th 2-4pm</b>: Guest Show</li>
-                           <li class="list-group-item list-group-item-success"><b>Dec 14th 8-10am</b>: Daveo Radio</li>
-                           <li class="list-group-item list-group-item-success"><b>2-4pm</b>: Daveo Radio</li>
-                           <li class="list-group-item"><b>Dec 22th 2-4pm</b>: Daveo Radio</li>
-                           <li class="list-group-item list-group-item-warning"><b>Dec 23th 2-4pm</b>: Something Else</li>
-                           <li class="list-group-item list-group-item-danger"><b>Dec 24-28th</b>: Example</li>
-                           <li class="list-group-item"><b>Dec 31st 8-12pm</b>: Guest Person</li>
-                           <li class="list-group-item list-group-item-info"><b>Jan 4th 10am</b>: Example Show</li>
-                           <li class="list-group-item list-group-item-info"><b>2-4pm</b>: Something Show</li>
+                           <li class="list-group-item"><b>Monday</b>: Daveo Radio 24/7</li>
+                           <li class="list-group-item"><b>Tuesday</b>: Daveo Radio 24/7</li>
+                           <li class="list-group-item"><b>Wednesday</b>: Daveo Radio 24/7</li>
+                           <li class="list-group-item"><b>Thursday</b>: Daveo Radio 24/7</li>
+                           <li class="list-group-item"><b>Friday</b>: Daveo Radio 24/7</li>
+                           <li class="list-group-item"><b>Saturday</b>: Daveo Radio 24/7</li>
+                           <li class="list-group-item"><b>Sunday</b>: Daveo Radio 24/7</li>
                         </ul>
                      </div>
                   </div>