photofloat/web/css/000-controls.css

219 lines
3.8 KiB
CSS

body {
margin: 0;
padding: 0;
background-color: #222222;
font-family: "LM Roman", "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", "Times", serif;
color: #FFFFFF;
}
a {
color: #84AAC2;
text-decoration: none;
}
a:hover {
color: #FFAD27;
}
#title {
position: absolute;
top: 0;
padding: 0.4em;
font-weight: bold;
font-size: 1.15em;
}
#loading {
display: none;
}
#album-view {
position: absolute;
top: 2.5em;
padding: 1em;
}
#thumbs {
clear: both;
line-height: 0;
}
#thumbs img {
border: 0;
margin: 0;
padding: 0;
}
.current-thumb {
border-top: 4px solid #FFAD27 !important;
}
#subalbums {
padding-top: 1.5em;
}
.album-button {
float: left;
display: block;
width: 150px;
height: 60px;
text-align: center;
font-style: italic;
font-size: 12px;
background-repeat: no-repeat;
background-position: top;
padding-top: 150px;
background-image: url(../img/image-placeholder.png);
}
#next, #back {
position: absolute;
width: auto;
font-size: 12em;
line-height: 0;
top: 40%;
font-weight: bold;
opacity: 0.35;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
filter: alpha(opacity=35);
}
#back {
left: 0.1em;
}
#next {
right: 0.1em;
}
#photo {
border: 0;
left: 0;
}
#photo-view {
position: absolute;
bottom: 150px;
top: 2.5em;
overflow: hidden;
left: 0;
right: 0;
text-align: center;
}
#photo-box, #video-box {
display: inline;
}
#video-box-inner {
position: absolute;
top: 50%;
width: 100%;
}
#photo-links {
background-color: #000000;
font-weight: bold;
height: 12px;
font-size: 12px;
line-height: 10px;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 10px;
padding-left: 10px;
display: none;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
-moz-border-top-right-radius: 5px;
-moz-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
}
#metadata {
background-color: #000000;
width: 340px;
font-size: 12px;
line-height: 12px;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 10px;
padding-left: 10px;
display: none;
margin: 0 auto;
margin-top: 1px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
-moz-border-top-right-radius: 5px;
-moz-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
opacity: 0.5;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
overflow: auto;
}
#metadata table {
margin: auto auto;
text-align: left;
}
#metadata tr {
height: 14px;
}
#photo-bar {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
#fullscreen, #fullscreen-divider {
display: none;
}
.photo-view-container {
position: absolute;
height: 150px;
width: 100%;
bottom: 0;
top: auto !important;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
padding: 0 !important;
text-align: center;
background-color: #999999;
}
#powered-by {
clear: both;
text-align: center;
font-size: 0.85em;
font-style: italic;
font-weight: bold;
text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
color: #FFAD27;
}
#error-overlay, #error-text, #auth-text {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
#error-overlay {
background-color: #000000;
}
#error-text, #auth-text {
position: fixed;
padding-top: 20%;
text-align: center;
}
#error-text {
font-size: 4em;
font-weight: bold;
font-style: italic;
}
#video-unsupported {
background-image: url(../img/video-unsupported.png);
background-position: top center;
background-repeat: no-repeat;
padding-top: 96px;
}
#auth-text input {
color: rgb(0, 0, 0);
background-color: rgb(200, 200, 200);
border: 0;
font-family: inherit;
font-size: 2em;
font-weight: bold;
font-style: italic;
}