web-learning-manager/assets/css/styles.css
2023-01-13 13:37:46 +01:00

769 lines
14 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@charset "utf-8";
/*-------------------------
Simple reset
--------------------------*/
* {
margin: 0;
padding: 0;
font-family: system-ui;
}
html {
/* Full height */
height: 100%;
/* The image used */
background-image: url("../../assets/images/MITbg.jpg");
background-color: #1e1e1e;
/* 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;
/*Fix for moving page because of scrole baar*/
}
.mit-logo {
background-image: url("../../assets/images/michu-it_logo_weiss.png");
width: 132px;
height: 60px;
float: right;
background-size: contain;
margin-top: 46px;
background-repeat: no-repeat;
margin-right: 8px;
}
.compensate-for-scrollbar {
margin-right: inherit !important;
}
/*-------------------------
File manager
-------------------------*/
.filemanager {
width: 95%;
max-width: 1340px;
min-height: 500px;
position: relative;
margin: 30px auto 50px;
background-color: rgb(0 0 0 / 66%);
}
@media all and (max-width: 965px) {
.filemanager {
margin: 30px auto 0;
padding: 1px;
}
}
.filemanager .header {
font-size: large;
height: 30px;
background-color: #002751!important;
text-align: center;
padding-top: 5px;
color: white;
font-weight: 700;
}
#nowWatched {
display: none;
}
.fancybox-slide {
padding: 20px 50px !important;
}
/*-------------------------
Page loader
-------------------------*/
.loader,
.loader:before,
.loader:after {
background: #ffffff;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader {
color: #ffffff;
text-indent: -9999em;
margin: 88px auto;
position: relative;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 1.5em;
}
@-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
/*-------------------------
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;
margin-right: 15px;
}
.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: #3e3e3e;
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: #002751!important;
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 #002751!important;
}
.icon.folder:after {
content: '';
float: left;
clear: left;
background-color: #01356d!important;
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;
}
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: #002751;
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;
}
/* 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;*/
}
.fancybox-slide > div:nth-child(2) {
display: block !important;
}
.fancybox-is-sliding .fancybox-slide, .fancybox-slide--current, .fancybox-slide--next, .fancybox-slide--previous {
display: flex !important;
}
.speedControl {
width: 2em !important;
padding: 2px !important;
border: 1px inset silver !important;
box-sizing: border-box !important;
background: black !important;
align-self: stretch !important;
margin: 0 0 0 0.5em !important;
border-radius: 4px !important;
overflow: hidden !important;
}
.indicator {
user-select: none;
color: white;
height: 25%;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient( to left top, #002751, #b3b3b3);
font-size: 0.7em;
font-family: sans-serif;
}