jquery.filebrowser
Version:
jQuery File Browser is a plugin for creating OS like file browsers.
210 lines (208 loc) • 5.98 kB
CSS
/*!
*
* 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;
}