Lighten up

Author: Joshua Smith

index.html

@@ -267,6 +267,8 @@ <h1><span id="currentFileLocation" style="display:none;"></span><span id="curren
                 <li><button class="sticky icon-strikethrough" firetext-icon id="strikethrough" data-click="formatDoc" data-click-action="strikeThrough"></button></li>
                 <li><button class="icon-more" data-click="nav" data-click-location="format"></button></li>
               </ul>
+              <ul>
+              </ul>
             </div>
           </div>
         </li>
@@ -529,9 +531,6 @@ <h2>Cloud</h2>
               <aside class="icon-dropbox"></aside>
               <p>Use <b>Dropbox</b></p>
             </li>
-            <li class="noLink">
-              <p>More storage providers coming!</p>
-            </li>
           </ul>
           <h2>Editing</h2>
           <ul>

style/bb/drawer.css

@@ -210,18 +210,31 @@ section[data-type="sidebar"] > nav > h2 {
 }
 
 section[data-type="sidebar"] [role="toolbar"] {
-  position: fixed;
-  bottom: 0;
-  left: 0;
   width: 80%;
   right: auto;
+  background-color: #1d1d1d;
+  color: #6f6f6f
 }
 
 section[data-type="sidebar"][data-position="right"] [role="toolbar"] {
   left: auto;
   right: 0;
 }
 
+section[data-type="sidebar"] [role="toolbar"] button[class^="icon-"], 
+section[data-type="sidebar"] [role="toolbar"] [class*=" icon-"] {
+  color: #fff;
+}
+
+section[data-type="sidebar"] [role="toolbar"] button:active, 
+section[data-type="sidebar"] [role="toolbar"] button.active {
+  background-color: #111;
+}
+
+section[data-type="sidebar"] [role="toolbar"] .icon-setting {
+  padding-top: .3rem;
+}
+
 section[data-type="sidebar"] [role="toolbar"] + nav {
   max-height: calc(100% - 5rem - 4rem);
     max-height: -moz-calc(100% - 5rem - 4rem);

style/bb/status.css

@@ -2,7 +2,7 @@
  * Status
  * ---------------------------------- */
 section[role="status"] {
-  background: #1f1f1f;
+  background: #dfdfdf;
   background-size: auto auto, 100% 100%;
   overflow: hidden;
   position: absolute;
@@ -14,7 +14,7 @@ section[role="status"] {
   min-height: 6.2rem;
   white-space: nowrap;
   font-family: "MozTT", Sans-serif;
-  color: #fff;
+  color: #1f1f1f;
   text-align: center;
 }
 
@@ -40,4 +40,4 @@ section[role="status"] p strong {
   text-transform: uppercase;
   color: #0995b0;
   font-weight: normal;
-}
+}

style/bb/tabs.css

@@ -9,7 +9,7 @@
   width: 100%;
   height: 100%;
   font-family: "Open Sans", Sans-serif;
-  background: #C7C7C7;
+  background: #dfdfdf;
 }
 
 [role="tablist"] > [role="tab"] {
@@ -58,7 +58,6 @@
   text-align: center;
   float: left;
   width: 100%;
-  background: #C7C7C7;
   position: relative;
   color: #737373;
     -moz-transition: all .5s;
@@ -69,8 +68,8 @@
 }
 
 [role="tablist"] > [role="tab"] > a:active {
-  background-color: #6f6f6f;
-  color: #eee;
+  background-color: #afafaf;
+  color: #1f1f1f;
 }
 
 [role="tablist"] > [role="tab"][aria-disabled="true"] > a:active {

style/bb/toolbars.css

@@ -8,7 +8,7 @@
   position: fixed;
   bottom: 0;
   left: 0;
-  background-color: #1d1d1d;
+  background-color: #dfdfdf;
 }
 
 [role="toolbar"] ul {
@@ -41,13 +41,13 @@
 
 [role="toolbar"] button:active, 
 [role="toolbar"] button.active {
-  background-color: #444;
+  background-color: #afafaf;
 }
 
 [role="toolbar"] button[class^="icon-"], 
 [role="toolbar"] [class*=" icon-"] {
   font-size: 3rem;
-  color: #fff;
+  color: #1f1f1f;
   text-shadow: none;
   padding: 0 1rem;
     -moz-box-sizing: border-box;

style/desktop.css

@@ -8,7 +8,6 @@
     right: 20%;
     bottom: 20%;
     box-shadow: 0 0 20px black;
-    padding: 5px;
       -webkit-transform: translateY(150%);
       -moz-transform: translateY(150%);
       -o-transform: translateY(150%);

style/headers.css

@@ -9,7 +9,7 @@ section > header:first-child {
   box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
-  border-bottom: .2rem solid #aeaeae;
+  border-bottom: none;
 }
 
 section > header:first-child h1 {
@@ -21,7 +21,10 @@ section > header:first-child h1 {
   display: block;
   overflow: hidden;
   margin: 0 0 0 4rem;
-  height: 100%
+  height: 100%;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 section > header:first-child h1 em {

style/main.css

@@ -81,7 +81,7 @@ form[role=dialog].current {
 
 [data-type="list"] h2,
 [data-type="edit"] h2 {
-  background: #CACACA;
+  background: #dfdfdf;
   padding: 5px 20px;
   color: #2C2C2C;
   margin: 0 0;
@@ -126,7 +126,7 @@ form[role=dialog].current {
 }
 
 [data-type="list"] li.fileListItem .fileItemDescription {
-  background: #dfdfdf;
+  background: #bbb;
   font-size: 1.2rem;
   max-height: 5rem;
   overflow: hidden;

style/night.css

@@ -151,7 +151,8 @@
 }
 
 .night [role="tablist"] > [role="tab"] > a:active {
-  background-color: #2c2c2c;
+  background-color: #444;
+  color: #cacaca;
 }
 
 .night [role="tablist"] > [role="tab"].selected > a {
@@ -173,14 +174,36 @@
 
 
 /* Toolbar */
+.night [role="toolbar"] {
+  background-color: #222;
+}
+
+.night [role="toolbar"] button:active, 
+.night [role="toolbar"] button.active {
+  background-color: #444;
+}
+
+.night [role="toolbar"] button[class^="icon-"], 
+.night [role="toolbar"] [class*=" icon-"] {
+  color: #dfdfdf;   
+}
+
 
+/* Tab Toolbar */
 .night .tabToolbar button,
 .night .tabToolbar .button,
 .night .tabToolbar input[type="button"] {
   color: #dfdfdf;
 }
 
 
+/* Status */
+.night section[role="status"] {
+  background: #222;
+  color: #dfdfdf;
+}
+
+
 /* Google Code Prettify */
 /* Tomorrow Night Bright Theme */
 .night .pln {