UNPKG

jquery.filebrowser

Version:

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

210 lines (208 loc) 5.98 kB
/*! * * 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; }