jquery.filebrowser/css/jquery.filebrowser.css

jQuery File Browser is a plugin for creating OS like file browsers.

/*!
 *
 * jQuery File Browser - directory browser jQuery plugin version 0.8.4
 *
 * Copyright (c) 2016-2021 Jakub T. Jankiewicz <https://jcubic.pl/me>
 * Released under the MIT license
 *
 * Date: Sun, 09 May 2021 10:14:37 +0000
 */
.browser-widget.hidden, .browser-widget .hidden {
    visibility: hidden;
}
.browser-widget ul:not(.ui-menu) {
    list-style: none;
    margin: 0;
    padding: 0;
}
.browser-menu {
    float: left;
    position: absolute;
    z-index: 99999999;
}
.browser-widget li[draggable] {
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}
.browser-widget ul:not(.ui-menu) > li {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    padding-top: 32px;
    text-align: center;
    margin: 5px;
    word-break: break-word;
    vertical-align: top;
    width: 60px;
}
.browser-widget ul:not(.ui-menu) > li, .browser-widget.no-select * {
    -khtml-user-select: none;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}
.browser-widget {
    font-family: sans-serif;
    font-size: 12px;
}
.browser-widget .toolbar {
    background: #6b6b6b;
    background: -moz-linear-gradient(top, #6b6b6b 0%, #262626 100%);
    background: -webkit-linear-gradient(top, #6b6b6b 0%,#262626 100%);
    background: linear-gradient(to bottom, #6b6b6b 0%,#262626 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b6b6b', endColorstr='#262626',GradientType=0 );
    color: white;

}
.browser-widget .toolbar ul:not(.labels) li {
    text-indent: -99999px;
}
.browser-widget ul:not(.ui-menu) > li::before, .browser-widget .adress-bar button {
    background: transparent url(icons.svg) no-repeat;
}
.browser-widget .adress-bar button {
    text-indent: -99999px;
    width: 32px;
    height: 32px;
    border: none;
    background-position: -64px -128px;
    cursor: pointer;
    outline: none;
}
.browser-widget .adress-bar input {
    width: calc(100% - 32px - 10px);
    border: none;
    padding: 4px 2px;
    box-sizing: border-box;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.browser-widget .content {
    overflow: auto;
    height: calc(100% - 88px);
    position: relative;
}
.browser-widget .content .selection {
    border: 1px dotted #000;
    position: absolute;
}
.browser-widget .content ul:not(.ui-menu) li.selected::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: #0b93d5;
}
.browser-widget .content ul:not(.ui-menu) li {
    border: 1px solid transparent;
}
.browser-widget .content ul:not(.ui-menu) li span {
    cursor: text;
    overflow-wrap: break-word;
}
.browser-widget .content ul:not(.ui-menu) li textarea {
    width: 100%;
    resize: vertical;
    box-sizing: border-box;
    border: none;
    position: relative;
    top: 2px;
    outline: none;
    text-align: center;
    overflow: hidden;
    min-height: 55px;
}
.browser-widget .content ul:not(.ui-menu) li.rename span,
.browser-widget .content ul:not(.ui-menu) li.new span {
    display: none;
}
.browser-widget .content ul:not(.ui-menu) li.active {
    border: 1px dotted gray;
}
.browser-widget ul:not(.ui-menu) li::before {
    display: inline-block;
    width: 32px;
    height: 32px;
    text-align: center;
    background-clip: content-box;
    content: "";
    position: absolute;
    top: 0;
    margin: auto;
    left: 0;
    right: 0;
}
.browser-widget .toolbar li:not(.disabled):hover::before {
    background-color: #0b93d5;
    cursor: pointer;
}
.browser-widget .toolbar ul:not(.labels) li {
    padding-top: 20px;
}
.browser-widget ul.labels li.back::before {
    background-position: 0 -160px
}
.browser-widget ul.labels li.up::before {
    background-position: -32px -160px
}
.browser-widget ul.labels li.refresh::before {
    background-position: -96px -160px
}
.browser-widget .content ul:not(.ui-menu) .drive::before {
    background-position: 0 -128px;
}
.browser-widget .content ul:not(.ui-menu) .file::before {
    background-position: 0 -96px;
}
.browser-widget .content ul:not(.ui-menu) .svg::before {
    background-position: -64px 0;
}
.browser-widget .content ul:not(.ui-menu) .txt::before {
    background-position: -32px -64px;
}
.browser-widget .content ul:not(.ui-menu) .pdf::before {
    background-position: -96px -64px;
}
.browser-widget .content ul:not(.ui-menu) .php::before {
    background-position: -32px -32px;
}
.browser-widget .content ul:not(.ui-menu) .html::before {
    background-position: -64px -32px;
}
.browser-widget .content ul:not(.ui-menu) .js::before {
    background-position: -96px 0;
}
.browser-widget .content ul:not(.ui-menu) .json::before {
    background-position: -96px -32px;
}
.browser-widget .content ul:not(.ui-menu) .css::before {
    background-position: 0 -32px;
}
.browser-widget .content ul:not(.ui-menu) .doc::before,
.browser-widget .content ul:not(.ui-menu) .docx::before {
    background-position: -64px -64px;
}
.browser-widget .content ul:not(.ui-menu) .xls::before,
.browser-widget .content ul:not(.ui-menu) .xlsx::before {
    background-position: -32px -96px;
}
.browser-widget .content ul:not(.ui-menu) .ppt::before,
.browser-widget .content ul:not(.ui-menu) .pptx::before {
    background-position: -64px -96px;
}
.browser-widget .content ul:not(.ui-menu) .jpg::before,
.browser-widget .content ul:not(.ui-menu) .jpeg::before,
.browser-widget .content ul:not(.ui-menu) .gif::before,
.browser-widget .content ul:not(.ui-menu) .bmp::before,
.browser-widget .content ul:not(.ui-menu) .png::before {
    background-position: 0 -64px;
}
.browser-widget .content ul:not(.ui-menu) .md::before,
.browser-widget .content ul:not(.ui-menu) .markdown::before {
    background-position: -96px -96px;
}