Refactor styles.

src/_h5ai/client/css/inc/colors.less

@@ -0,0 +1,58 @@
+@col-blue-200: #90caf9;
+@col-blue-400: #42a5f5;
+@col-blue-500: #2196F3;
+@col-blue-700: #1976D2;
+@col-blue-900: #0D47A1;
+@col-green: #4caf50;
+@col-red: #f44336;
+@col-pink-a200: #ff4081;
+
+@col-light: #ffffff;
+@col-lightgray: #fafafa;
+// @col-darkgray: #eeeeee;
+@col-darkgray: #f3f3f3;
+// @col-dark: #333;
+@col-dark: #212121;
+
+@col-text-primary-black: rgba(0,0,0,0.87);
+@col-text-secondary-black: rgba(0,0,0,0.54);
+@col-text-disabled-black: rgba(0,0,0,0.26);
+@col-divider-black: rgba(0,0,0,0.12);
+
+@col-text-primary-white: rgba(255,255,255,1.0);
+@col-text-secondary-white: rgba(255,255,255,0.7);
+@col-text-disabled-white: rgba(255,255,255,0.3);
+@col-divider-white: rgba(255,255,255,0.12);
+
+@col-text-selected: @col-text-primary-white;
+@col-back-selected: @col-blue-400;
+
+@col-text-highlight: #111111;
+
+@col-font-light: @col-light;
+@col-font-dark: @col-dark;
+
+@col-back-light: @col-lightgray;
+@col-back-dark: @col-darkgray;
+
+@col: @col-text-primary-black;
+@col-back: @col-back-dark;
+@col-hover: @col-blue-400;
+@col-border: rgba(0,0,0,0.05);
+@col-border-strong: rgba(0,0,0,0.15);
+@col-border-stronger: rgba(0,0,0,0.3);
+
+@col-okay: @col-green;
+@col-error: @col-red;
+
+@col-link: @col-blue-400;
+@col-link-hover: @col-blue-400;
+
+@col-widget-back: rgb(245,245,245);
+@col-widget-back-highlight: rgba(255,255,255,0.8);
+@col-widget-back-hover: rgba(255,255,255,0.8);
+@col-widget-back-sel: rgba(255,255,255,0.8);
+@col-widget-sep: @col-border;
+
+@col-range-back: rgb(224,224,224);
+@col-range-thumb: #555;

src/_h5ai/client/css/inc/core/content.less

@@ -0,0 +1,5 @@
+#content {
+    overflow: auto;
+    flex: 1 1 auto;
+    order: 50;
+}

src/_h5ai/client/css/inc/core/fallback.less

@@ -90,7 +90,7 @@
 
 html.no-js, html.no-browser {
 
-    body {
+    #root {
         position: static;
         background: #fff;
     }
@@ -99,3 +99,11 @@ html.no-js, html.no-browser {
         display: block;
     }
 }
+
+html.js .noJsMsg {
+    display: none;
+}
+
+html.browser .noBrowserMsg {
+    display: none;
+}

src/_h5ai/client/css/inc/core/mainrow.less

@@ -0,0 +1,13 @@
+#main-row {
+    flex: 1 1 auto;
+    order: 50;
+
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    align-items: stretch;
+
+    height: 0; // non-webkit fix;
+}

src/_h5ai/client/css/inc/core/root-info.less

@@ -1,4 +1,4 @@
-#h5ai-info {
+#root.info {
 
     #content {
         flex: 1 1 auto;
@@ -14,7 +14,7 @@
         font-family: @font-family-mono;
         letter-spacing: 0.05em;
         background-color: @col-widget-back;
-        border: @border-widget;
+        border: 1px solid @col-border;
         font-size: 0.9em;
     }
 
@@ -36,7 +36,7 @@
         padding: 6px 18px;
         width: 210px;
         background: #fafafa;
-        border: @border-widget;
+        border: 1px solid @col-border;
         border-radius: 4px;
 
         .paypal {

src/_h5ai/client/css/inc/core/root.less

@@ -0,0 +1,20 @@
+#root {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    font-family: @font-family;
+    font-size: @font-size;
+    font-weight: @font-weight;
+    color: @col-text-primary-black;
+    background: @col-back;
+
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    align-items: stretch;
+}

src/_h5ai/client/css/inc/core/view.less

@@ -1,25 +1,6 @@
-html.drag-select, html.drag-select * {
-    cursor: move !important;
-
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-#selection-rect {
-    display: none;
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 2;
-    border: 1px dashed @col-border-strong;
-    background: rgba(0,0,0,0.1);
-}
-
 #view {
+    @max-icon-size: 32px;
+
     display: none;
 
     a, a:active, a:visited {

src/_h5ai/client/css/inc/ext/custom.less

@@ -1,15 +1,6 @@
-#content {
-    overflow: auto;
-    flex: 1 1 auto;
-    order: 50;
-}
-
 #content-header, #content-footer {
     margin: 16px;
     color: @col;
-    // box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
-    // background: #fafafa;
-    // padding: 16px;
     padding: 8px;
 
     a, a:active, a:visited {

src/_h5ai/client/css/inc/ext/select.less

@@ -0,0 +1,20 @@
+#selection-rect {
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 2;
+    border: 1px dashed @col-border-strong;
+    background: rgba(0,0,0,0.1);
+}
+
+html.drag-select, html.drag-select * {
+    cursor: move !important;
+
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}

src/_h5ai/client/css/inc/fonts.less

@@ -0,0 +1,6 @@
+@import url(//fonts.googleapis.com/css?family=Roboto:300,400,700);
+
+@font-family: Roboto, Helvetica, Arial, sans-serif;
+@font-weight: normal;
+@font-size: 13px;
+@font-family-mono: monospace;

src/_h5ai/client/css/inc/general.less

@@ -1,179 +0,0 @@
-@col-blue-200: #90caf9;
-@col-blue-400: #42a5f5;
-@col-blue-500: #2196F3;
-@col-blue-700: #1976D2;
-@col-blue-900: #0D47A1;
-@col-green: #4caf50;
-@col-red: #f44336;
-@col-pink-a200: #ff4081;
-
-@col-light: #ffffff;
-@col-lightgray: #fafafa;
-// @col-darkgray: #eeeeee;
-@col-darkgray: #f3f3f3;
-// @col-dark: #333;
-@col-dark: #212121;
-
-@col-text-primary-black: rgba(0,0,0,0.87);
-@col-text-secondary-black: rgba(0,0,0,0.54);
-@col-text-disabled-black: rgba(0,0,0,0.26);
-@col-divider-black: rgba(0,0,0,0.12);
-
-@col-text-primary-white: rgba(255,255,255,1.0);
-@col-text-secondary-white: rgba(255,255,255,0.7);
-@col-text-disabled-white: rgba(255,255,255,0.3);
-@col-divider-white: rgba(255,255,255,0.12);
-
-@col-text-selected: @col-text-primary-white;
-@col-back-selected: @col-blue-400;
-
-@col-text-highlight: #111111;
-
-@col-font-light: @col-light;
-@col-font-dark: @col-dark;
-
-@col-back-light: @col-lightgray;
-@col-back-dark: @col-darkgray;
-
-@col: @col-text-primary-black;
-@col-back: @col-back-dark;
-@col-hover: @col-blue-400;
-@col-border: rgba(0,0,0,0.05);
-@col-border-strong: rgba(0,0,0,0.15);
-@col-border-stronger: rgba(0,0,0,0.3);
-
-@col-okay: @col-green;
-@col-error: @col-red;
-
-@col-link: @col-blue-400;
-@col-link-hover: @col-blue-400;
-
-@col-widget-back: rgb(245,245,245);
-@col-widget-back-highlight: rgba(255,255,255,0.8);
-@col-widget-back-hover: rgba(255,255,255,0.8);
-@col-widget-back-sel: rgba(255,255,255,0.8);
-@col-widget-sep: @col-border;
-
-@col-sb-back: rgba(0,0,0,0.08);
-@col-sb-thumb: rgba(0,0,0,0.15);
-@col-sb-thumb-active: rgba(0,0,0,0.25);
-
-@col-range-back: rgb(224,224,224);
-@col-range-thumb: #555;
-
-@border-widget: 1px solid @col-border;
-@border-widget-sep: 1px solid @col-widget-sep;
-
-@font-family: Roboto, Helvetica, Arial, sans-serif;
-@font-weight: normal;
-@font-size: 13px;
-@font-family-mono: monospace;
-
-// @max-icon-size: 24px;
-@max-icon-size: 32px;
-// @max-icon-size: 48px;
-
-
-::-moz-selection { background: @col-pink-a200; color: @col-text-primary-white; text-shadow: none; }
-::selection { background: @col-pink-a200; color: @col-text-primary-white; text-shadow: none; }
-
-
-.card() {
-    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
-}
-
-.raised() {
-    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.5);
-}
-
-.popup() {
-    box-shadow: 0 1px 20px 0 rgba(0,0,0,0.5);
-}
-
-.rounded() {
-    // overflow: hidden;
-    border-radius: 2px;
-}
-
-.el-button() {
-    .card();
-    .rounded();
-    transition: all 0.2s ease-in-out;
-    color: @col-text-primary-white;
-    background: @col-blue-400;
-    border-radius: 2px;
-    cursor: pointer;
-    text-decoration: none;
-
-    &:hover {
-        .raised();
-    }
-}
-
-.el-input() {
-    .card();
-    .rounded();
-    -moz-appearance: none;
-    -ms-appearance: none;
-    -webkit-appearance: none;
-    font-family: @font-family;
-    font-weight: @font-weight;
-    color: @col-text-primary-black;
-    background: @col-light;
-    border: none;
-    outline: none;
-}
-
-
-html {
-    min-height: 100%;
-    overflow: auto;
-
-    &.js .noJsMsg {
-        display: none;
-    }
-    &.browser .noBrowserMsg {
-        display: none;
-    }
-}
-
-body {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-
-    font-family: @font-family;
-    font-size: @font-size;
-    font-weight: @font-weight;
-    color: @col-text-primary-black;
-    background: @col-back;
-
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-content: flex-start;
-    align-items: stretch;
-}
-
-#main-row {
-    flex: 1 1 auto;
-    order: 50;
-
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-content: flex-start;
-    align-items: stretch;
-
-    // non-webkit fix;
-    height: 0;
-}
-
-*:focus {
-    // outline: 1px solid @col-pink-a200;
-    outline: none;
-}

src/_h5ai/client/css/inc/misc.less

@@ -0,0 +1,12 @@
+html {
+    min-height: 100%;
+    overflow: auto;
+}
+
+::-moz-selection { background: @col-pink-a200; color: @col-text-primary-white; text-shadow: none; }
+::selection { background: @col-pink-a200; color: @col-text-primary-white; text-shadow: none; }
+
+*:focus {
+    // outline: 1px solid @col-pink-a200;
+    outline: none;
+}

src/_h5ai/client/css/inc/mixins.less

@@ -0,0 +1,44 @@
+.card() {
+    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
+}
+
+.raised() {
+    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.5);
+}
+
+.popup() {
+    box-shadow: 0 1px 20px 0 rgba(0,0,0,0.5);
+}
+
+.rounded() {
+    border-radius: 2px;
+}
+
+.el-button() {
+    .card();
+    .rounded();
+    transition: all 0.2s ease-in-out;
+    color: @col-text-primary-white;
+    background: @col-blue-400;
+    border-radius: 2px;
+    cursor: pointer;
+    text-decoration: none;
+
+    &:hover {
+        .raised();
+    }
+}
+
+.el-input() {
+    .card();
+    .rounded();
+    -moz-appearance: none;
+    -ms-appearance: none;
+    -webkit-appearance: none;
+    font-family: @font-family;
+    font-weight: @font-weight;
+    color: @col-text-primary-black;
+    background: @col-light;
+    border: none;
+    outline: none;
+}

src/_h5ai/client/css/styles.less

@@ -1,33 +1,14 @@
-@import "lib/h5bp-normalize";
-@import "lib/h5bp-main-header";
+// @include "lib/h5bp-normalize.less"
+// @include "lib/h5bp-main-header.less"
 
-@import "inc/general";
-@import "inc/topbar";
-@import "inc/crumb";
-@import "inc/sidebar";
-@import "inc/download";
-@import "inc/filter";
-@import "inc/tree";
-@import "inc/info";
-@import "inc/preview";
-@import "inc/preview-aud";
-@import "inc/preview-img";
-@import "inc/preview-txt";
-@import "inc/preview-vid";
-@import "inc/notify";
+// @include "inc/colors.less"
+// @include "inc/fonts.less"
+// @include "inc/misc.less"
+// @include "inc/mixins.less"
 
-@import "inc/content";
-@import "inc/view";
-@import "inc/view-details";
-@import "inc/view-icons";
-@import "inc/view-grid";
-@import "inc/contextmenu";
-@import "inc/fallback";
+// @include "inc/core/*.less"
+// @include "inc/ext/*.less"
 
-@import "inc/responsive";
+// @include "inc/responsive.less"
 
-@import "inc/h5ai-info";
-
-@import "lib/h5bp-main-footer";
-
-@import url(//fonts.googleapis.com/css?family=Roboto:300,400,700);
+// @include "lib/h5bp-main-footer.less"

src/_h5ai/index.html.jade

@@ -13,7 +13,7 @@ head
     link( rel="stylesheet", href="client/css/styles.css" )
     script( src="client/js/scripts.js", data-module="info" )
 
-body#h5ai-info
+body#root.info
 
     div#fallback-hints
         span.noJsMsg

src/_h5ai/server/php/inc/page.php.jade

@@ -18,7 +18,7 @@ head
     link( rel="stylesheet", href!="#{app_href}client/css/styles.css" )
     script( src!="#{app_href}client/js/scripts.js", data-module="index" )
 
-body
+body#root
 
     div#fallback-hints
         span.noJsMsg