You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

681 lines
12 KiB
CSS

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

@charset "utf-8";
/*-------------------------
Simple reset
--------------------------*/
*{
margin:0;
padding:0;
font-family: system-ui;
}
html {
/* Full height */
height: 100%;
/* The image used */
background-image: url("../../images/background.jpg");
background-color: #373743;
/* Center and scale the image nicely */
background-position: center center;
background-size: cover;
font: 14px normal Arial, Helvetica, sans-serif;
z-index: -4;
overflow-y: scroll;
}
/*-------------------------
File manager
-------------------------*/
.filemanager {
width: 95%;
max-width:1340px;
position: relative;
margin: 30px auto 50px;
}
@media all and (max-width: 965px) {
.filemanager {
margin: 30px auto 0;
padding: 1px;
}
}
.filemanager .header {
font-size: large;
height: 30px;
background-color: beige;
text-align: center;
padding-top: 5px;
}
#nowWatched {
display: none;
}
.fancybox-slide {
padding: 20px 50px !important;
}
/*-------------------------
Breadcrumps
-------------------------*/
.filemanager .breadcrumbs {
color: #ffffff;
margin-left:20px;
font-size: 13px;
font-weight: 700;
line-height: 35px;
}
.filemanager .breadcrumbs a:link, .breadcrumbs a:visited {
color: #ffffff;
text-decoration: none;
}
.filemanager .breadcrumbs a:hover {
text-decoration: underline;
}
.filemanager .breadcrumbs .arrow {
color: #6a6a72;
font-size: 13px;
font-weight: 700;
line-height: 20px;
}
/*-------------------------
Search box
-------------------------*/
.filemanager .search {
position: absolute;
padding-right: 30px;
cursor: pointer;
right: 0;
font-size: 17px;
color: #ffffff;
display: block;
width: 40px;
height: 40px;
margin-top: 6px;
}
.filemanager .search:before {
content: '';
position: absolute;
margin-top:12px;
width: 10px;
height: 11px;
border-radius: 50%;
border: 2px solid #ffffff;
right: 8px;
}
.filemanager .search:after {
content: '';
width: 3px;
height: 10px;
background-color: #ffffff;
border-radius: 2px;
position: absolute;
top: 23px;
right: 6px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.filemanager .search input[type=search] {
border-radius: 2px;
color: #4D535E;
background-color: #FFF;
width: 250px;
height: 44px;
margin-left: -215px;
padding-left: 20px;
text-decoration-color: #4d535e;
font-size: 16px;
font-weight: 400;
line-height: 20px;
display: none;
outline: none;
border: none;
padding-right: 10px;
-webkit-appearance: none;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: #4d535e;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #4d535e;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #4d535e;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #4d535e;
}
/*-------------------------
Content area
-------------------------*/
.filemanager .data {
margin-top: 35px;
z-index: -3;
}
.filemanager .data.animated {
-webkit-animation: showSlowlyElement 700ms; /* Chrome, Safari, Opera */
animation: showSlowlyElement 700ms; /* Standard syntax */
}
.filemanager .data li {
border-radius: 3px;
background-color: #373743;
width: 307px;
height: 118px;
list-style-type: none;
margin: 10px;
display: inline-block;
position: relative;
overflow: hidden;
padding: 0.3em;
z-index: 1;
cursor: pointer;
box-sizing: border-box;
transition: 0.3s background-color;
}
.filemanager .data li:hover {
background-color: #42424E;
}
.filemanager .data li a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.filemanager .data li .name {
color: #ffffff;
font-size: 15px;
font-weight: 700;
line-height: 20px;
width: 150px;
white-space: nowrap;
display: inline-block;
position: absolute;
overflow: hidden;
text-overflow: ellipsis;
top: 40px;
}
.filemanager .data li .details {
color: #b6c1c9;
font-size: 13px;
font-weight: 400;
width: 55px;
/*height: 10px;*/
top: 75%;
white-space: nowrap;
position: absolute;
display: inline-block;
margin: 0.3em 2em 0em -5.7em;
}
.filemanager .data li .watchStatus {
width: 55px;
top: 75%;
white-space: nowrap;
position: absolute;
display: inline-block;
margin-left: 180px;
}
.filemanager .nothingfound {
background-color: #373743;
border-radius: 10px;
width: 23em;
height: 21em;
margin: 0 auto;
display: none;
font-family: Arial;
-webkit-animation: showSlowlyElement 700ms; /* Chrome, Safari, Opera */
animation: showSlowlyElement 700ms; /* Standard syntax */
}
.filemanager .nothingfound .nofiles {
margin: 30px auto;
top: 3em;
border-radius: 50%;
position:relative;
background-color: #d72f6e;
width: 11em;
height: 11em;
line-height: 11.4em;
}
.filemanager .nothingfound .nofiles:after {
content: '×';
position: absolute;
color: #ffffff;
font-size: 14em;
margin: -24px 9px;
right: 0;
}
.filemanager .nothingfound span {
margin: 0 auto auto 5em;
color: #ffffff;
font-size: 16px;
font-weight: 700;
line-height: 20px;
height: 13px;
position: relative;
top: 2em;
}
@media all and (max-width:965px) {
.filemanager .data li {
width: 100%;
margin: 5px 0;
}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes showSlowlyElement {
100% { transform: scale(1); opacity: 1; }
0% { transform: scale(1.2); opacity: 0; }
}
/* Standard syntax */
@keyframes showSlowlyElement {
100% { transform: scale(1); opacity: 1; }
0% { transform: scale(1.2); opacity: 0; }
}
/*-------------------------
Icons
-------------------------*/
.icon {
font-size: 23px;
}
.icon.folder {
display: inline-block;
margin: 1em 0.3em 0em 1em;
background-color: transparent;
overflow: hidden;
}
.icon.folder:before {
content: '';
float: left;
background-color: #7ba1ad;
width: 1.5em;
height: 0.45em;
margin-left: 0.07em;
margin-bottom: -0.07em;
border-top-left-radius: 0.1em;
border-top-right-radius: 0.1em;
box-shadow: 1.25em 0.25em 0 0em #7ba1ad;
}
.icon.folder:after {
content: '';
float: left;
clear: left;
background-color: #a0d4e4;
width: 3em;
height: 2.25em;
border-radius: 0.1em;
}
.icon.folder.full:before {
height: 0.55em;
}
.icon.folder.full:after {
height: 2.15em;
box-shadow: 0 -0.12em 0 0 #ffffff;
}
.icon.file {
width: 2.5em;
height: 3em;
line-height: 3em;
text-align: center;
border-radius: 0.25em;
color: #FFF;
display: inline-block;
margin: 0.9em 1.2em 0.8em 1.3em;
position: relative;
overflow: hidden;
box-shadow: 1.74em -2.1em 0 0 #A4A7AC inset;
}
.icon.file:first-line {
font-size: 13px;
font-weight: 700;
}
.icon.file:after {
content: '';
position: absolute;
z-index: -1;
border-width: 0;
border-bottom: 2.6em solid #DADDE1;
border-right: 2.22em solid rgba(0, 0, 0, 0);
top: -34.5px;
right: -4px;
}
.icon.file.f-avi,
.icon.file.f-flv,
.icon.file.f-mkv,
.icon.file.f-mov,
.icon.file.f-mpeg,
.icon.file.f-mpg,
.icon.file.f-mp4,
.icon.file.f-m4v,
.icon.file.f-wmv {
box-shadow: 1.74em -2.1em 0 0 #7e70ee inset;
}
.icon.file.f-avi:after,
.icon.file.f-flv:after,
.icon.file.f-mkv:after,
.icon.file.f-mov:after,
.icon.file.f-mpeg:after,
.icon.file.f-mpg:after,
.icon.file.f-mp4:after,
.icon.file.f-m4v:after,
.icon.file.f-wmv:after {
border-bottom-color: #5649c1;
}
.icon.file.f-mp2,
.icon.file.f-mp3,
.icon.file.f-m3u,
.icon.file.f-wma,
.icon.file.f-xls,
.icon.file.f-xlsx {
box-shadow: 1.74em -2.1em 0 0 #5bab6e inset;
}
.icon.file.f-mp2:after,
.icon.file.f-mp3:after,
.icon.file.f-m3u:after,
.icon.file.f-wma:after,
.icon.file.f-xls:after,
.icon.file.f-xlsx:after {
border-bottom-color: #448353;
}
.icon.file.f-doc,
.icon.file.f-docx,
.icon.file.f-psd{
box-shadow: 1.74em -2.1em 0 0 #03689b inset;
}
.icon.file.f-doc:after,
.icon.file.f-docx:after,
.icon.file.f-psd:after {
border-bottom-color: #2980b9;
}
.icon.file.f-gif,
.icon.file.f-jpg,
.icon.file.f-jpeg,
.icon.file.f-pdf,
.icon.file.f-png {
box-shadow: 1.74em -2.1em 0 0 #e15955 inset;
}
.icon.file.f-gif:after,
.icon.file.f-jpg:after,
.icon.file.f-jpeg:after,
.icon.file.f-pdf:after,
.icon.file.f-png:after {
border-bottom-color: #c6393f;
}
.icon.file.f-deb,
.icon.file.f-dmg,
.icon.file.f-gz,
.icon.file.f-rar,
.icon.file.f-zip,
.icon.file.f-7z {
box-shadow: 1.74em -2.1em 0 0 #867c75 inset;
}
.icon.file.f-deb:after,
.icon.file.f-dmg:after,
.icon.file.f-gz:after,
.icon.file.f-rar:after,
.icon.file.f-zip:after,
.icon.file.f-7z:after {
border-bottom-color: #685f58;
}
.icon.file.f-html,
.icon.file.f-rtf,
.icon.file.f-xml,
.icon.file.f-xhtml {
box-shadow: 1.74em -2.1em 0 0 #a94bb7 inset;
}
.icon.file.f-html:after,
.icon.file.f-rtf:after,
.icon.file.f-xml:after,
.icon.file.f-xhtml:after {
border-bottom-color: #d65de8;
}
.icon.file.f-js {
box-shadow: 1.74em -2.1em 0 0 #d0c54d inset;
}
.icon.file.f-js:after {
border-bottom-color: #a69f4e;
}
.icon.file.f-css,
.icon.file.f-saas,
.icon.file.f-scss {
box-shadow: 1.74em -2.1em 0 0 #44afa6 inset;
}
.icon.file.f-css:after,
.icon.file.f-saas:after,
.icon.file.f-scss:after {
border-bottom-color: #30837c;
}
/*----------------------------
The Demo Footer
-----------------------------*/
footer {
width: 770px;
font: normal 16px Arial, Helvetica, sans-serif;
padding: 15px 35px;
position: fixed;
bottom: 0;
left: 50%;
margin-left: -420px;
background-color:#1f1f1f;
background-image:linear-gradient(to bottom, #1f1f1f, #101010);
border-radius:2px 2px 0 0;
box-shadow: 0 -1px 4px rgba(0,0,0,0.4);
z-index:1;
}
footer a.tz{
font-weight:normal;
font-size:16px !important;
text-decoration:none !important;
display:block;
margin-right: 300px;
text-overflow:ellipsis;
white-space: nowrap;
color:#bfbfbf !important;
z-index:1;
}
footer a.tz:before{
content: '';
width: 138px;
height: 20px;
display: inline-block;
position: relative;
bottom: -3px;
}
footer .close{
position: absolute;
cursor: pointer;
width: 8px;
height: 8px;
top:10px;
right:10px;
z-index: 3;
}
footer #tzine-actions{
position: absolute;
top: 8px;
width: 500px;
right: 50%;
margin-right: -650px;
text-align: right;
z-index: 2;
}
footer #tzine-actions iframe{
display: inline-block;
height: 21px;
width: 95px;
position: relative;
float: left;
margin-top: 11px;
}
@media (max-width: 1024px) {
#bsaHolder, footer{ display:none;}
}
/* Popup Test */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
.button {
background-color: #373743;
border: none;
color: white;
padding: 15px 32px;
margin-left: 10px;
margin-top:40px;
text-align: center;
text-decoration: none;
display: inline-block;
width: 200px;
font-size: 16px;
cursor: pointer;
border-radius: 3px;
cursor: pointer;
box-sizing: border-box;
transition: 0.3s background-color;
}
.button:hover {
background-color: #42424E;
}
.fancybox-content {
min-height: 700px;
}
/* michu naming fixes:*/
.filemanager .data li .name {
width: 194px;
top: 22px;
white-space: inherit;
margin-left: 12px;
}
.icon.file {
margin: 0.9em 0.6em 0.8em 0.6em;
/*margin: 5px 0px 0px -60px;*/
}