WebFM/resources/css/main.css

207 lines
3.4 KiB
CSS
Raw Normal View History

2018-04-16 01:59:09 +00:00
/* IDs */
#DIRPATHUL {
display: none;
width: 1px;
height: 1px;
}
#bg {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
z-index: -999;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: -999;
}
#fullPathHeader, #dynDiv,
.errorStyling, .dirStyle, .movieStyle, .fileStyle {
display: block;
width: 100%;
height: auto;
overflow: auto;
padding-bottom: 0.5em;
color: #ffffff;
text-align: center;
font-size: 1.2em;
background-color: rgba(0,0,0,0.64);
}
#fullPathHeader {
display: block;
position: fixed;
top: 0.5em;
}
#dynDiv {
margin-top: 5em;
2018-04-16 01:59:09 +00:00
}
#imgView, #imgArea, #fileView {
width: 800px;
height: 600px;
}
#imgView, #fileView {
position: fixed;
bottom: 0em;
z-index: 100;
border-style: solid;
border-color: rgb(114,184,199);
}
#fileView {
display: block;
overflow: auto;
}
#fileViewInner {
position: sticky;
display: inline;
width: 100%;
height: 500px;
}
#imgArea {
width: 800px;
height: 600px;
overflow-y: scroll;
}
#imgView { overflow: hidden; left: 15em; }
#NewItem {
background-color: #ffffff;
color: #000000;
text-align: center;
}
2018-04-16 01:59:09 +00:00
#popOutControls {
2018-05-10 07:42:39 +00:00
position: fixed;
top: 15%;
width: 99%;
height: 15em;
padding-top: 6em;
2018-05-10 07:42:39 +00:00
opacity: 0.94;
background: radial-gradient(circle,#3f3f3f,#000000);
color: #ffffff;
text-align: center;
}
2018-04-16 01:59:09 +00:00
/* Classes */
.imgViewImg {
width: inherit;
height: auto;
}
.dirStyle { background-color: rgba(0, 0, 0, 0.56); }
.movieStyle, .fileStyle { background-color: rgba(101, 101, 101, 0.56); }
.movieStyle {
float: left;
width: 15em;
height: 8.5em;
2018-04-16 01:59:09 +00:00
overflow: hidden;
margin: 0.5em;
padding: 0.5em;
}
2018-05-10 07:42:39 +00:00
.dirStyle:hover, .movieStyle:hover, .fileStyle:hover {
background-color: rgba(0, 141, 166, 0.56);
cursor: pointer;
}
.movieStyle:focus, .fileStyle:focus, .fileStyle:focus {
background-color: rgb(114,184,199);
}
.dirTitle, .fileTitle, .movieTitle {
2018-04-16 01:59:09 +00:00
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
2018-04-16 01:59:09 +00:00
overflow: hidden;
border-style: none;
font-size: 75%;
}
.dirTitle, .fileTitle {
width: auto;
background-color: #00000000;
color: #ffffff;
}
.movieTitle {
width: 18em;
background-color: #ffffff00;
color: #ffffff;
}
.thumbnail {
width: 12em;
height: 6.5em;
}
.systemIcon {
width: 2em;
height: auto;
2018-04-16 01:59:09 +00:00
}
.iconImg {
width: 12em;
height: 8em;
margin: 1em;
}
.popOutBttn, .closeBttn {
float: right;
z-index: 2;
width: 4em;
height: 4em;
text-align: center;
vertical-align: middle;
line-height: 4em; /* the same as your div height */
background-color: rgba(0,0,0, 0.85);
color: rgb(255,255,255);
border-style:solid;
border-color: rgb(255,255,255);
}
/* Hover events */
.dirTitle:hover,
.iconImg:hover,
.closeBttn:hover,
.popOutBttn:hover {
2018-04-16 01:59:09 +00:00
cursor: pointer;
}
.closeBttn:hover, .popOutBttn:hover {
background-color: rgba(255,255,255, 0.85);
color: #000000;
border-color: #000000;
}
/* Messages coloring */
2018-04-16 01:59:09 +00:00
.error, .warnning, .success {
float: left;
clear: both;
}
.error { color: rgb(255, 0, 0); }
.warnning { color: rgb(255, 168, 0); }
.success { color: rgb(136, 204, 39); }