Reorganize file structure.

src/_h5ai/css/inc/colors.less

@@ -0,0 +1,46 @@
+@col-red-500: #f44336;
+@col-green-500: #4caf50;
+@col-blue-400: #42a5f5;
+@col-pink-a200: #ff4081;
+
+@col-white: #ffffff;
+@col-grey-50: #fafafa;
+@col-grey-100: #f5f5f5;
+@col-grey-300: #e0e0e0;
+@col-grey-700: #616161;
+@col-grey-900: #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-native-selection: @col-text-primary-white;
+@col-back-native-selection: @col-pink-a200;
+
+@col-text: @col-text-primary-black;
+@col-back: @col-grey-100;
+@col-back-paper: @col-white;
+@col-back-panel: @col-grey-50;
+@col-text-hover: @col-blue-400;
+@col-back-hover: rgba(0,0,0,0.03);
+@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-500;
+@col-error: @col-red-500;
+
+@col-link: @col-blue-400;
+@col-link-hover: @col-grey-900;
+
+@col-range-back: @col-grey-300;
+@col-range-thumb: @col-grey-700;

src/_h5ai/css/inc/ext/contextmenu.less

@@ -0,0 +1,73 @@
+#cm-overlay {
+    display: none;
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    z-index: 200;
+
+    .cm-panel {
+        .popup;
+        .rounded;
+        display: block;
+        position: absolute;
+        left: 100px;
+        top: 100px;
+        color: @col-text;
+        background: @col-back-paper;
+        z-index: 10;
+        overflow: auto;
+        min-width: 200px;
+
+        ul {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            text-align: left;
+        }
+    }
+
+    .cm-label {
+        padding: 8px 16px;
+        white-space: nowrap;
+        font-weight: bold;
+    }
+
+    .cm-entry {
+        padding: 8px 16px;
+        white-space: nowrap;
+        cursor: pointer;
+
+        &:hover {
+            color: @col-text-hover;
+            background: @col-back-hover;
+        }
+    }
+
+    .cm-icon {
+        position: relative;
+        top: -2px;
+
+        img {
+            width: 20px;
+            height: 20px;
+        }
+
+        &.no-icon {
+            opacity: 0;
+        }
+    }
+
+    .cm-text {
+        margin: 0 0 0 12px;
+    }
+
+    .cm-sep {
+        height: 1px;
+        margin: 8px 0;
+        padding: 0;
+        border-top: 1px solid rgba(0,0,0,0.08);
+    }
+}

src/_h5ai/css/inc/ext/crumb.less

@@ -0,0 +1,54 @@
+#crumbbar {
+    overflow: hidden;
+    height: 48px;
+    font-size: 16px;
+    padding: 0 8px;
+    // border-left: 1px solid rgba(0,0,0,0.05);
+
+    a, a:active, a:visited {
+        color: @col-text;
+        cursor: pointer;
+        text-decoration: none;
+
+        &.active {
+            font-weight: bold;
+        }
+        &:hover {
+            color: @col-text-hover;
+        }
+        &:focus {
+            outline: 0;
+        }
+    }
+    .crumb {
+        .eased-transition;
+        display: inline-block;
+    }
+    .sep {
+        width: 24px;
+        height: 24px;
+        padding: 12px 0;
+        line-height: 48px;
+        display: inline-block;
+        vertical-align: top;
+    }
+    .crumb:first-of-type .sep {
+        width: 0;
+    }
+    .label {
+        line-height: 48px;
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 8px;
+    }
+    .hint {
+        width: 20px;
+        height: 20px;
+        padding: 16px 0 0 0;
+        line-height: 48px;
+        display: inline-block;
+        vertical-align: top;
+        position: relative;
+        top: -2px;
+    }
+}

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

@@ -0,0 +1,19 @@
+#content-header, #content-footer {
+    margin: 16px;
+    padding: 8px;
+    color: @col-text;
+
+    a, a:active, a:visited {
+        color: @col-link;
+        text-decoration: none;
+        cursor: pointer;
+
+        &:hover {
+            color: @col-link-hover;
+        }
+    }
+
+    h1, h2, h3, h4, h5, h6, p {
+        margin: 0.1em 0;
+    }
+}

src/_h5ai/css/inc/ext/filter.less

@@ -0,0 +1,28 @@
+#filter {
+
+    input {
+        display: none;
+        border: none;
+        font-weight: lighter;
+        font-size: 16px;
+        color: @col-text;
+        background: transparent;
+        outline: 0;
+        width: 160px;
+        padding: 0 12px 0 4px;
+        line-height: 48px;
+        vertical-align: top;
+    }
+
+    &.active {
+        input {
+            display: inline-block;
+        }
+    }
+
+    &.pending {
+        input {
+            color: @col-text-disabled-black;
+        }
+    }
+}

src/_h5ai/css/inc/ext/info.less

@@ -0,0 +1,57 @@
+#info {
+    display: none;
+
+    overflow: auto;
+    flex: 0 0 auto;
+    order: 99;
+
+    padding: 16px;
+    border-left: 1px solid @col-border;
+    white-space: nowrap;
+    overflow-x: hidden;
+    width: 240px;
+
+    .icon {
+        width: 240px;
+        height: 180px;
+
+        img {
+            .rounded;
+            display: block;
+            overflow: hidden;
+            margin: 0 auto;
+            width: 180px;
+            height: 180px;
+        }
+
+        .thumb {
+            width: 240px;
+        }
+    }
+
+    .block {
+        border-top: 1px solid @col-border;
+        border-bottom: 1px solid @col-border;
+        margin: 0 0 24px 0;
+        padding: 24px 0;
+    }
+
+    .label {
+        font-size: 16px;
+        margin-bottom: 16px;
+    }
+
+    .time, .size, .content {
+        line-height: 20px;
+        height: 20px;
+    }
+
+    .qrcode {
+        margin: 0 auto;
+        width: 200px;
+
+        canvas {
+            display: block;
+        }
+    }
+}

src/_h5ai/css/inc/ext/preview-aud.less

@@ -0,0 +1,8 @@
+#pv-aud-audio {
+    .raised;
+
+    position: absolute;
+
+    max-width: 100%;
+    max-height: 100%;
+}

src/_h5ai/css/inc/ext/preview-img.less

@@ -0,0 +1,27 @@
+#pv-img-image {
+    .raised;
+
+    @check-white: #f8f8f8;
+    @check-black: #e8e8e8;
+
+    position: absolute;
+
+    max-width: 100%;
+    max-height: 100%;
+
+    background-color: @check-white;
+    background-image:
+        -webkit-linear-gradient(45deg, @check-black 25%, transparent 25%, transparent 75%, @check-black 75%, @check-black),
+        -webkit-linear-gradient(45deg, @check-black 25%, transparent 25%, transparent 75%, @check-black 75%, @check-black);
+    background-size: 60px 60px;
+    background-position: 0 0, 30px 30px;
+
+    &.loading {
+        opacity: 0.5;
+        margin-top: 32px;
+        width: 240px;
+        height: 240px;
+        border-radius: 1000px;
+        overflow: hidden;
+    }
+}

src/_h5ai/css/inc/ext/preview-txt.less

@@ -0,0 +1,110 @@
+#pv-txt-text {
+    .raised;
+
+    max-width: 960px;
+    text-align: left;
+    background: @col-back-paper;
+    margin: 0 auto;
+    padding: 8px;
+    overflow: auto;
+
+    &.highlighted {
+
+        code {
+            line-height: 1.2em;
+        }
+
+        a, a:active, a:visited {
+            color: #2080FF;
+            text-decoration: none;
+            cursor: pointer;
+
+            &:hover {
+                color: #68A9FF;
+            }
+        }
+
+        .token.comment,
+        .token.prolog,
+        .token.doctype,
+        .token.cdata {
+            color: #aaa;
+        }
+
+        .token.punctuation {
+            color: #999;
+        }
+
+        .namespace {
+            opacity: .7;
+        }
+
+        .token.property,
+        .token.tag,
+        .token.boolean,
+        .token.number,
+        .token.constant,
+        .token.symbol {
+            color: #905;
+        }
+
+        .token.selector,
+        .token.attr-name,
+        .token.string,
+        .token.builtin {
+            color: #690;
+        }
+
+        .token.operator,
+        .token.entity,
+        .token.url,
+        .language-css .token.string,
+        .style .token.string,
+        .token.variable {
+            color: #a67f59;
+            background: hsla(0,0%,100%,.5);
+        }
+
+        .token.atrule,
+        .token.attr-value,
+        .token.keyword {
+            color: #07a;
+        }
+
+        .token.function {
+            color: #DD4A68;
+        }
+
+        .token.regex,
+        .token.important {
+            color: #e90;
+        }
+
+        .token.important {
+            font-weight: bold;
+        }
+
+        .token.entity {
+            cursor: help;
+        }
+    }
+
+    &.markdown {
+        font-size: 1.1em;
+        padding: 8px 24px;
+
+        a, a:active, a:visited {
+            color: #2080FF;
+            text-decoration: none;
+            cursor: pointer;
+
+            &:hover {
+                color: #68A9FF;
+            }
+        }
+
+        code {
+            color: #008200;
+        }
+    }
+}

src/_h5ai/css/inc/ext/preview-vid.less

@@ -0,0 +1,13 @@
+#pv-vid-video {
+    .raised;
+
+    position: absolute;
+
+    max-width: 100%;
+    max-height: 100%;
+}
+
+#pv-vid-video:-webkit-full-screen {
+    top: auto !important;
+    left: auto !important;
+}

src/_h5ai/css/inc/ext/preview.less

@@ -0,0 +1,149 @@
+#pv-overlay {
+    display: none;
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 100;
+
+    background: rgba(0,0,0,0.5);
+    transition: background-color 0.3s ease-in-out;
+
+    text-align: center;
+}
+
+#pv-overlay.fullscreen {
+    background: @col-grey-900;
+}
+
+#pv-content {
+    position: absolute;
+}
+
+#pv-spinner {
+    position: absolute;
+
+    .back {
+        width: 240px;
+        height: 240px;
+        margin: -120px -120px;
+        border-radius: 120px;
+        opacity: 0.5;
+        overflow: hidden;
+    }
+    .spinner {
+        width: 100px;
+        height: 100px;
+        margin: -50px -50px;
+    }
+}
+
+#pv-prev-area, #pv-next-area {
+    position: absolute;
+    top: 50%;
+    cursor: pointer;
+
+    img {
+        .eased-transition;
+        display: block;
+        width: 48px;
+        height: 48px;
+        margin: -36px 0;
+        padding: 12px;
+        opacity: 0.5;
+    }
+
+    &:hover {
+        img {
+            .raised;
+            opacity: 1;
+            background: rgba(27,27,27,0.8);
+        }
+    }
+}
+
+#pv-prev-area {
+    left: 0;
+    img {
+        border-radius: 0 8px 8px 0;
+        padding-left: 48px;
+    }
+}
+
+#pv-next-area {
+    right: 0;
+    img {
+        border-radius: 8px 0 0 8px;
+        padding-right: 48px;
+    }
+}
+
+#pv-buttons {
+    list-style: none;
+    list-style-image: none;
+    margin: 0;
+    padding: 0;
+
+    img {
+        position: relative;
+        width: 24px;
+        height: 24px;
+        padding: 12px
+    }
+
+    .bar-label {
+        .eased-transition;
+        display: block;
+        color: @col-text-primary-white;
+        height: 48px;
+        line-height: 48px;
+        padding: 0 12px;
+        opacity: 0.7;
+    }
+
+    .bar-button {
+        .eased-transition;
+        display: block;
+        line-height: 48px;
+        opacity: 0.7;
+        cursor: pointer;
+
+        &:hover {
+            opacity: 1.0;
+            background: rgba(255,255,255,0.1);
+        }
+    }
+
+    .bar-left {
+        float: left;
+    }
+
+    .bar-right {
+        float: right;
+    }
+}
+
+#pv-bottombar {
+    .raised;
+    position: fixed;
+    z-index: 5;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgb(27,27,27);
+    height: 48px;
+}
+
+#pv-overlay.fullscreen {
+
+    #pv-bottombar {
+        opacity: 0.5;
+    }
+}
+
+@media only screen and (max-width: 700px) {
+    #pv-prev-area, #pv-next-area {
+        display: none !important;
+    }
+}

src/_h5ai/css/inc/ext/search.less

@@ -0,0 +1,28 @@
+#search {
+
+    input {
+        display: none;
+        border: none;
+        font-weight: lighter;
+        font-size: 16px;
+        color: @col-text;
+        background: transparent;
+        outline: 0;
+        width: 160px;
+        padding: 0 12px 0 4px;
+        line-height: 48px;
+        vertical-align: top;
+    }
+
+    &.active {
+        input {
+            display: inline-block;
+        }
+    }
+
+    &.pending {
+        input {
+            color: @col-text-disabled-black;
+        }
+    }
+}

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

@@ -0,0 +1,76 @@
+#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;
+
+    #view .item:hover {
+        box-shadow: none !important;
+    }
+}
+
+#view {
+
+    .selector {
+        display: none;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 22px;
+        height: 22px;
+        background: @col-back-selected;
+        cursor: pointer;
+        border-radius: 0 0 2px 0;
+        opacity: 0.6;
+
+        &:hover {
+            opacity: 0.8;
+        }
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .item:hover .selector {
+        display: block;
+    }
+
+    .item.selected:not(.selecting),
+    .item.selecting:not(.selected) {
+        color: @col-text-selected;
+        background: @col-back-selected;
+
+        .selector {
+            display: block;
+            opacity: 1;
+        }
+        &:hover {
+            color: @col-text-selected;
+            background: @col-back-selected;
+        }
+    }
+
+    .no-match {
+        display: none;
+        margin-top: 36px;
+        text-align: center;
+        color: @col-border;
+        font-size: 5em;
+        font-weight: bold;
+    }
+}

src/_h5ai/css/inc/ext/tree.less

@@ -0,0 +1,78 @@
+#tree {
+    display: none;
+
+    overflow: auto;
+    flex: 0 0 auto;
+    order: 1;
+
+    padding: 16px 16px 16px 8px;
+    border-right: 1px solid @col-border;
+    white-space: nowrap;
+    max-width: 250px;
+    overflow-x: hidden;
+    font-weight: lighter;
+
+    a, a:active, a.visited {
+        display: block;
+        margin-left: 20px;
+        padding: 3px 0;
+        text-decoration: none;
+        color: @col-text;
+
+        &:hover {
+            color: @col-text-hover;
+        }
+    }
+
+    .active > a {
+        font-weight: bold;
+    }
+
+    .indicator {
+        display: block;
+        float: left;
+        padding: 3px 0;
+        position: relative;
+        top: -2px;
+        cursor: pointer;
+
+        img {
+            .eased-transition;
+            width: 20px;
+            height: 20px;
+        }
+        &.open {
+            img {
+                transform: rotate(90deg);
+                zoom: 1;
+            }
+        }
+        &.unknown {
+            opacity: 0.3;
+        }
+        &.none {
+            opacity: 0;
+            cursor: inherit;
+        }
+    }
+
+    .icon {
+        position: relative;
+        top: -2px;
+
+        img {
+            width: 20px;
+            height: 20px;
+        }
+    }
+
+    .label {
+        margin: 0 0 0 4px;
+    }
+
+    .content {
+        list-style: none;
+        margin: 0;
+        padding: 0 0 0 20px;
+    }
+}

src/_h5ai/css/inc/fonts.less

@@ -0,0 +1,4 @@
+@font-family: "Ubuntu", "Roboto", "Helvetica", "Arial", "sans-serif";
+@font-weight: normal;
+@font-size: 13px;
+@font-family-mono: "Ubuntu Mono", "Monaco", "Lucida Sans Typewriter", "monospace";

src/_h5ai/css/inc/main/info.less

@@ -0,0 +1,110 @@
+#root.info {
+
+    #content {
+        flex: 1 1 auto;
+        order: 50;
+        color: @col-text;
+        text-align: center;
+        font-weight: lighter;
+    }
+
+    code {
+        margin: 0 0.2em;
+        padding: 2px 4px;
+        border-radius: 4px;
+        letter-spacing: 0.05em;
+        background: @col-back-panel;
+        border: 1px solid @col-border;
+        font-size: 0.9em;
+    }
+
+    #header a {
+        .eased-transition;
+        font-size: 4em;
+        font-weight: 300;
+        margin: 0.8em 0 0 0;
+        color: @col-text;
+        text-decoration: none;
+
+        &:hover {
+            color: @col-text-hover;
+        }
+    }
+
+    #support {
+        margin: 24px auto;
+        padding: 18px 0 6px 0;
+        width: 292px;
+        background: @col-back-panel;
+        border: 1px solid @col-border;
+        border-radius: 4px;
+
+        input[type="image"] {
+            border: 0;
+            width: 100px;
+            padding: 12px 48px;
+        }
+    }
+
+    #pass {
+        .el-input;
+        display: inline-block;
+        margin: 8px;
+        padding: 0 12px;
+        line-height: 28px;
+        width: 200px;
+        vertical-align: top;
+    }
+
+    #login, #logout {
+        .el-button;
+        display: inline-block;
+        margin: 8px;
+        padding: 0 12px;
+        line-height: 28px;
+        vertical-align: top;
+    }
+
+    #hint {
+        margin: 12px auto;
+        width: 300px;
+    }
+
+    #tests {
+        display: inline-block;
+        text-align: left;
+        list-style-type: none;
+        margin: 48px 0;
+        padding: 0;
+
+        .test {
+            .card;
+            .rounded;
+            background: @col-back-paper;
+            margin: 12px 0 0 0;
+            padding: 8px 12px 12px 12px;
+        }
+        .label {
+            display: inline-block;
+            width: 250px;
+            font-size: 1.4em;
+        }
+        .result {
+            display: inline-block;
+            width: 250px;
+            text-align: right;
+            font-size: 1.4em;
+            font-weight: bold;
+
+            &.passed {
+                color: @col-okay;
+            }
+            &.failed {
+                color: @col-error;
+            }
+        }
+        .info {
+            margin: 4px 0 0 0;
+        }
+    }
+}

src/_h5ai/css/inc/misc.less

@@ -0,0 +1,14 @@
+::-moz-selection {
+    color: @col-text-native-selection;
+    background: @col-back-native-selection;
+    text-shadow: none;
+}
+::selection {
+    color: @col-text-native-selection;
+    background: @col-back-native-selection;
+    text-shadow: none;
+}
+
+*:focus {
+    outline: none;
+}

src/_h5ai/css/inc/mixins.less

@@ -0,0 +1,66 @@
+.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;
+}
+
+.clear-appearance {
+    -moz-appearance: none;
+    -ms-appearance: none;
+    -webkit-appearance: none;
+}
+
+.eased-transition {
+    transition: all 0.2s ease-in-out;
+}
+
+.flex-base {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    align-items: stretch;
+}
+
+.flex-column {
+    .flex-base;
+    flex-direction: column;
+}
+
+.flex-row {
+    .flex-base;
+    flex-direction: row;
+}
+
+.el-button {
+    .card;
+    .rounded;
+    .eased-transition;
+    color: @col-text-primary-white;
+    background: @col-blue-400;
+    cursor: pointer;
+    text-decoration: none;
+
+    &:hover {
+        .raised;
+    }
+}
+
+.el-input {
+    .card;
+    .rounded;
+    .clear-appearance;
+    background: @col-back-paper;
+    border: none;
+    outline: none;
+}

src/_h5ai/css/inc/responsive.less

@@ -0,0 +1,30 @@
+@media only screen and (max-width: 700px) {
+    #crumbbar {
+        .crumb:not(.active) {
+            display: none;
+        }
+        .crumb.active .sep {
+            width: 0;
+        }
+    }
+    #view.view-details {
+        .header .label, .item .label {
+            margin-right: 80px !important;
+        }
+        .header .date, .item .date {
+            display: none;
+        }
+    }
+    #tree, #info {
+        display: none !important;
+    }
+}
+
+@media print {
+    a[href]:after {
+        content: "" !important;
+    }
+    #toolbar, #sidebar, #tree, #info {
+        display: none !important;
+    }
+}

src/_h5ai/css/inc/view/content.less

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

src/_h5ai/css/inc/view/fallback.less

@@ -0,0 +1,117 @@
+#fallback {
+    display: none;
+    max-width: 960px;
+    margin: 16px auto;
+    padding: 32px 16px;
+
+    table {
+        .card;
+        display: block;
+        width: 100%;
+        border-collapse: collapse;
+        background: @col-back-paper;
+    }
+    th, td {
+        padding: 6px;
+        text-align: left;
+        border: none;
+        border-bottom: 1px solid #eee;
+    }
+    th {
+        color: #aaa;
+        font-weight: lighter;
+        line-height: 36px;
+        background: @col-back-panel;
+    }
+    td {
+        overflow: hidden;
+        white-space: nowrap;
+    }
+    a, a:active, a:visited {
+        display: block;
+        color: inherit;
+        text-decoration: none;
+        cursor: pointer;
+
+        &:hover {
+            color: @col-text-hover;
+        }
+    }
+    .fb-i {
+        width: 20px;
+        padding-left: 12px;
+
+        img {
+            width: 20px;
+            height: 20px;
+            position: relative;
+            top: -1px;
+        }
+    }
+    .fb-n {
+        width: 682px;
+        max-width: 682px;
+    }
+    .fb-d {
+        text-align: right;
+        width: 160px;
+        min-width: 160px;
+    }
+    .fb-s {
+        text-align: right;
+        width: 70px;
+        min-width: 70px;
+        padding-right: 12px;
+    }
+}
+
+#fallback-hints {
+    display: none;
+    overflow: hidden;
+    text-align: right;
+    background: @col-back-panel;
+    box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
+
+    a, a:active, a:visited {
+        .eased-transition;
+        display: inline-block;
+        line-height: 48px;
+        color: @col-text-secondary-black;
+        text-decoration: none;
+        outline: 0;
+
+        &:hover {
+            color: @col-text-hover;
+        }
+    }
+
+    .backlink {
+        margin: 0 16px;
+    }
+
+    .noJsMsg, .noBrowserMsg {
+        display: none;
+        margin: 0 16px;
+        color: @col-error;
+    }
+}
+
+html.no-js, html.no-browser {
+
+    #root {
+        position: static;
+        overflow: auto;
+    }
+
+    #fallback, #fallback-hints {
+        display: block;
+    }
+}
+
+html.no-js .noJsMsg {
+    display: inline !important;
+}
+
+html.no-browser .noBrowserMsg {
+    display: inline !important;
+}

src/_h5ai/css/inc/view/mainrow.less

@@ -0,0 +1,7 @@
+#mainrow {
+    .flex-row;
+    flex: 1 1 auto;
+    order: 50;
+
+    height: 0; // non-webkit fix;
+}

src/_h5ai/css/inc/view/notification.less

@@ -0,0 +1,13 @@
+#notification {
+    position: fixed;
+    left: 50%;
+    width: 200px;
+    margin-left: -100px;
+    z-index: 100;
+    padding: 3px 6px 6px 6px;
+    color: @col-text-primary-white;
+    background: rgba(0,0,0,0.2);
+    border-radius: 0 0 4px 4px;
+    text-align: center;
+    overflow: hidden;
+}

src/_h5ai/css/inc/view/root.less

@@ -0,0 +1,24 @@
+#root {
+    .flex-column;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    background: @col-back;
+}
+
+#root, input, select {
+    font-family: @font-family;
+    font-size: @font-size;
+    font-weight: @font-weight;
+    color: @col-text;
+}
+
+pre, code {
+    font-family: @font-family-mono;
+    font-size: @font-size;
+    font-weight: @font-weight;
+    color: @col-text;
+}

src/_h5ai/css/inc/view/sidebar.less

@@ -0,0 +1,116 @@
+#sidebar {
+    display: none;
+    overflow-x: hidden;
+    overflow-y: auto;
+    flex: 0 0 auto;
+    order: 0;
+    background: @col-back-panel;
+    border-right: 1px solid rgba(0,0,0,0.08);
+    padding: 16px;
+
+    .block {
+        display: block;
+        margin: 0 0 24px 0;
+        width: 168px;
+
+        h1 {
+            font-size: 1em;
+            margin: 2px 0 6px 0;
+        }
+    }
+
+    .button {
+        .rounded;
+        .eased-transition;
+        display: inline-block;
+        margin: 4px;
+        color: @col-text;
+        cursor: pointer;
+
+        &:hover {
+            background: @col-back-hover;
+        }
+
+        &.active {
+            background: rgba(0,0,0,0.03);
+            box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4);
+        }
+
+        img {
+            width: 24px;
+            height: 24px;
+            padding: 12px;
+        }
+    }
+
+    .select {
+        .rounded;
+        background: transparent;
+        overflow: hidden;
+        outline: 0;
+        width: 160px;
+        margin: 4px;
+        line-height: 48px;
+    }
+
+    input, select {
+        .clear-appearance;
+        background: transparent;
+        width: 100%;
+        border: 0 solid #000;
+        cursor: pointer;
+        outline: 0;
+
+        &:hover {
+            background: @col-back-hover;
+        }
+    }
+
+    select {
+        width: 187px;
+        padding: 0 8px;
+        height: 48px;
+        line-height: 48px;
+    }
+
+    input[type='range'] {
+        .rounded;
+        width: 144px;
+        margin: 4px;
+        padding: 8px;
+        vertical-align: middle;
+        height: 32px;
+        line-height: 32px;
+    }
+
+    .range-track {
+        .clear-appearance;
+        border-width: 0;
+        border-radius: 20px;
+        background: @col-range-back;
+        height: 6px;
+    }
+
+    .range-thumb {
+        .clear-appearance;
+        border-width: 0;
+        border-radius: 20px;
+        background: @col-range-thumb;
+        width: 16px;
+        height: 16px;
+    }
+
+    input[type='range']::-webkit-slider-runnable-track { .range-track; }
+    input[type='range']::-moz-range-track { .range-track; }
+    input[type='range']::-ms-track { .range-track; }
+    input[type='range']::-ms-fill-lower { .range-track; }
+    input[type='range']::-ms-fill-upper { .range-track; }
+
+    input[type='range']::-webkit-slider-thumb { .range-thumb; margin-top: -5px; }
+    input[type='range']::-moz-range-thumb { .range-thumb; }
+    input[type='range']::-ms-thumb { .range-thumb; }
+
+    #view-size {
+        display: block;
+    }
+}

src/_h5ai/css/inc/view/topbar.less

@@ -0,0 +1,71 @@
+#topbar {
+    .flex-row;
+    overflow: hidden;
+    flex: 0 0 auto;
+    order: 1;
+
+    background: @col-back-panel;
+    box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+#toolbar {
+    overflow: hidden;
+    flex: 0 0 auto;
+    order: 1;
+    height: 48px;
+
+    .tool {
+        .eased-transition;
+        display: inline-block;
+        cursor: pointer;
+
+        img {
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+            padding: 12px;
+        }
+
+        &:hover {
+            background: @col-back-hover;
+        }
+    }
+}
+
+#flowbar {
+    overflow: hidden;
+    flex: 1 1 auto;
+    order: 2;
+    height: 48px;
+}
+
+#backlink {
+    .eased-transition;
+    display: block;
+    overflow: hidden;
+    flex: 0 0 auto;
+    order: 99;
+    text-align: center;
+    padding: 6px 12px;
+    overflow: hidden;
+    height: 36px;
+
+    &, &:active, &:visited {
+        color: @col-text-disabled-black;
+        cursor: pointer;
+        text-decoration: none;
+    }
+    &:hover {
+        color: @col-text-hover;
+        background: @col-back-hover;
+    }
+    &:focus {
+        outline: 0;
+    }
+
+    div {
+        line-height: 18px;
+        white-space: nowrap;
+    }
+}

src/_h5ai/css/inc/view/view-details.less

@@ -0,0 +1,117 @@
+#view.view-details {
+
+    .view-details-sized(@size) {
+
+        .item {
+            .label, .date, .size {
+                line-height: @size + 14px;
+            }
+        }
+
+        .square {
+            width: @size;
+            height: @size;
+
+            img {
+                width: @size;
+                height: @size;
+            }
+        }
+
+        .label {
+            margin: 0 246px 0 (@size + 32px);
+        }
+    }
+
+    margin: 16px;
+
+    #items {
+        .rounded;
+        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
+    }
+
+    .header {
+        position: relative;
+        white-space: nowrap;
+        display: list-item;
+        background: @col-back-panel;
+        border-bottom: 1px solid rgba(0,0,0,0.07);
+        border-radius: 2px 2px 0 0;
+
+        .label, .date, .size {
+            .eased-transition;
+            line-height: 46px;
+            opacity: 0.4;
+            outline: 0;
+
+            &:hover {
+                opacity: 1;
+                color: @col-text-hover;
+            }
+        }
+
+        .sort {
+            display: none;
+            position: relative;
+            top: -2px;
+            width: 20px;
+            height: 20px;
+            padding: 0 4px;
+        }
+
+        .ascending .sort {
+            display: inline;
+        }
+
+        .descending .sort {
+            display: inline;
+            transform: rotate(180deg);
+            zoom: 1;
+        }
+    }
+
+    .item {
+        overflow: hidden;
+        border-bottom: 1px solid rgba(0,0,0,0.07);
+
+        &:hover {
+            .raised;
+            z-index: 1;
+        }
+
+        &:last-child {
+            border-radius: 0 0 2px 2px;
+        }
+    }
+
+    .square {
+        display: inline-block;
+        position: absolute;
+        left: 16px;
+        top: -1px;
+        padding: 8px;
+
+        .thumb {
+            .rounded;
+            box-shadow: 0 0 1px 0 rgba(0,0,0,0.2);
+        }
+    }
+
+    .label, .date, .size {
+        padding: 0 8px;
+    }
+
+    .date {
+        position: absolute;
+        right: 116px;
+        top: 0;
+    }
+
+    .size {
+        position: absolute;
+        right: 16px;
+        top: 0;
+    }
+
+    .view-details-sized(16px)
+}

src/_h5ai/css/inc/view/view-grid.less

@@ -0,0 +1,52 @@
+#view.view-grid {
+
+    .view-grid-sized(@size) {
+
+        .label {
+            line-height: @size;
+        }
+
+        .square {
+            width: @size;
+            height: @size;
+
+            img {
+                width: @size;
+                height: @size;
+            }
+        }
+    }
+
+    margin: 8px;
+
+    .item {
+        .card;
+        .rounded;
+        overflow: hidden;
+        float: left;
+        margin: 8px;
+
+        &:hover {
+            .raised;
+        }
+    }
+
+    .square {
+        display: inline-block;
+        vertical-align: top;
+        background: @col-back-panel;
+    }
+
+    .label {
+        display: inline-block;
+        vertical-align: top;
+        width: 180px;
+        padding: 0 8px;
+    }
+
+    .date, .size {
+        display: none;
+    }
+
+    .view-grid-sized(48px);
+}

src/_h5ai/css/inc/view/view-icons.less

@@ -0,0 +1,53 @@
+#view.view-icons {
+
+    .view-icons-sized(@size) {
+
+        .item {
+            width: @size * 4/3;
+        }
+
+        .landscape {
+            width: @size * 4/3;
+            height: @size;
+
+            img {
+                width: @size;
+                height: @size;
+            }
+
+            .thumb {
+                width: @size * 4/3;
+            }
+        }
+    }
+
+    margin: 8px;
+
+    .item {
+        .card;
+        .rounded;
+        overflow: hidden;
+        float: left;
+        margin: 8px;
+
+        &:hover {
+            .raised;
+        }
+    }
+
+    .landscape {
+        display: block;
+        background: @col-back-panel;
+    }
+
+    .label {
+        padding: 0 6px;
+        line-height: 24px;
+    }
+
+    .date, .size {
+        display: none;
+    }
+
+    .view-icons-sized(96px);
+}

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

@@ -0,0 +1,79 @@
+#view {
+
+    a, a:active, a:visited {
+        display: block;
+        color: inherit;
+        cursor: pointer;
+        text-decoration: none;
+    }
+
+    ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .header {
+        display: none;
+    }
+
+    .item {
+        position: relative;
+        white-space: nowrap;
+        background: @col-back-paper;
+
+        &:hover {
+            color: @col-text-hover;
+            background: @col-back-panel;
+        }
+    }
+
+    .folder-parent {
+
+        .date, .size {
+            display: none;
+        }
+    }
+
+    .icon {
+        display: none;
+        text-align: center;
+
+        img {
+            position: relative;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        .thumb {
+            max-width: none;
+            max-height: none;
+        }
+    }
+
+    .label {
+        display: block;
+        overflow: hidden;
+        text-align: left;
+        text-overflow: ellipsis;
+    }
+
+    .date {
+        text-align: right;
+        width: 130px;
+    }
+
+    .size {
+        text-align: right;
+        width: 80px;
+    }
+
+    #view-hint {
+        display: block;
+        margin-top: 36px;
+        text-align: center;
+        color: @col-border;
+        font-size: 5em;
+        font-weight: bold;
+    }
+}

src/_h5ai/css/lib/h5bp-main-footer.less

@@ -0,0 +1,166 @@
+/* ==========================================================================
+   Helper classes
+   ========================================================================== */
+
+/*
+ * Hide visually and from screen readers:
+ */
+
+.hidden {
+    display: none !important;
+}
+
+/*
+ * Hide only visually, but have it available for screen readers:
+ * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+ */
+
+.visuallyhidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+/*
+ * Extends the .visuallyhidden class to allow the element
+ * to be focusable when navigated to via the keyboard:
+ * https://www.drupal.org/node/897638
+ */
+
+.visuallyhidden.focusable:active,
+.visuallyhidden.focusable:focus {
+    clip: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    position: static;
+    width: auto;
+}
+
+/*
+ * Hide visually and from screen readers, but maintain layout
+ */
+
+.invisible {
+    visibility: hidden;
+}
+
+/*
+ * Clearfix: contain floats
+ *
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ *    `contenteditable` attribute is included anywhere else in the document.
+ *    Otherwise it causes space to appear at the top and bottom of elements
+ *    that receive the `clearfix` class.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ *    `:before` to contain the top-margins of child elements.
+ */
+
+.clearfix:before,
+.clearfix:after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+}
+
+.clearfix:after {
+    clear: both;
+}
+
+/* ==========================================================================
+   EXAMPLE Media Queries for Responsive Design.
+   These examples override the primary ('mobile first') styles.
+   Modify as content requires.
+   ========================================================================== */
+
+// @media only screen and (min-width: 35em) {
+//     /* Style adjustments for viewports that meet the condition */
+// }
+
+// @media print,
+//        (-webkit-min-device-pixel-ratio: 1.25),
+//        (min-resolution: 120dpi) {
+//     /* Style adjustments for high resolution devices */
+// }
+
+/* ==========================================================================
+   Print styles.
+   Inlined to avoid the additional HTTP request:
+   http://www.phpied.com/delay-loading-your-print-css/
+   ========================================================================== */
+
+@media print {
+    *,
+    *:before,
+    *:after {
+        background: transparent !important;
+        color: #000 !important; /* Black prints faster:
+                                   http://www.sanbeiji.com/archives/953 */
+        box-shadow: none !important;
+        text-shadow: none !important;
+    }
+
+    a,
+    a:visited {
+        text-decoration: underline;
+    }
+
+    a[href]:after {
+        content: " (" attr(href) ")";
+    }
+
+    abbr[title]:after {
+        content: " (" attr(title) ")";
+    }
+
+    /*
+     * Don't show links that are fragment identifiers,
+     * or use the `javascript:` pseudo protocol
+     */
+
+    a[href^="#"]:after,
+    a[href^="javascript:"]:after {
+        content: "";
+    }
+
+    pre,
+    blockquote {
+        border: 1px solid #999;
+        page-break-inside: avoid;
+    }
+
+    /*
+     * Printing Tables:
+     * http://css-discuss.incutio.com/wiki/Printing_Tables
+     */
+
+    thead {
+        display: table-header-group;
+    }
+
+    tr,
+    img {
+        page-break-inside: avoid;
+    }
+
+    img {
+        max-width: 100% !important;
+    }
+
+    p,
+    h2,
+    h3 {
+        orphans: 3;
+        widows: 3;
+    }
+
+    h2,
+    h3 {
+        page-break-after: avoid;
+    }
+}

src/_h5ai/css/lib/h5bp-main-header.less

@@ -0,0 +1,96 @@
+/*! HTML5 Boilerplate v5.1.0 | MIT License | https://html5boilerplate.com/ */
+
+/*
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ */
+
+/* ==========================================================================
+   Base styles: opinionated defaults
+   ========================================================================== */
+
+html {
+    color: #222;
+    font-size: 1em;
+    line-height: 1.4;
+}
+
+/*
+ * Remove text-shadow in selection highlight:
+ * https://twitter.com/miketaylr/status/12228805301
+ *
+ * These selection rule sets have to be separate.
+ * Customize the background color to match your design.
+ */
+
+::-moz-selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+::selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+/*
+ * A better looking default horizontal rule
+ */
+
+hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #ccc;
+    margin: 1em 0;
+    padding: 0;
+}
+
+/*
+ * Remove the gap between audio, canvas, iframes,
+ * images, videos and the bottom of their containers:
+ * https://github.com/h5bp/html5-boilerplate/issues/440
+ */
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+    vertical-align: middle;
+}
+
+/*
+ * Remove default fieldset styles.
+ */
+
+fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+/*
+ * Allow only vertical resizing of textareas.
+ */
+
+textarea {
+    resize: vertical;
+}
+
+/* ==========================================================================
+   Browser Upgrade Prompt
+   ========================================================================== */
+
+.browserupgrade {
+    margin: 0.2em 0;
+    background: #ccc;
+    color: #000;
+    padding: 0.2em 0;
+}
+
+/* ==========================================================================
+   Author's custom styles
+   ========================================================================== */

src/_h5ai/css/lib/h5bp-normalize.less

@@ -0,0 +1,424 @@
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS and IE text size adjust after device orientation change,
+ *    without disabling user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability of focused elements when they are also in an
+ * active/hover state.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  box-sizing: content-box; /* 2 */
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}

src/_h5ai/css/styles.less

@@ -0,0 +1,15 @@
+@charset "utf-8";
+
+// @include "lib/h5bp-normalize.less"
+// @include "lib/h5bp-main-header.less"
+
+// @include "inc/colors.less"
+// @include "inc/fonts.less"
+// @include "inc/misc.less"
+// @include "inc/mixins.less"
+
+// @include "inc/*/*.less"
+
+// @include "inc/responsive.less"
+
+// @include "lib/h5bp-main-footer.less"