Breaking changes.

src/_h5ai/public/css/lib/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/public/css/lib/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/public/css/lib/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/public/css/lib/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/public/css/lib/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/public/css/lib/ext/preview-aud.less

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

src/_h5ai/public/css/lib/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/public/css/lib/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/public/css/lib/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/public/css/lib/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/public/css/lib/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/public/css/lib/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/public/css/lib/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;
+    }
+}