0x2620-jpg/css/jpg.css

286 lines
6.3 KiB
CSS

a {
color: rgb(255, 255, 255);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
body {
margin: 0;
background: rgb(64, 64, 64);
font-family: Lucida Grande;
font-size: 10px;
text-align: center;
}
div, img {
-webkit-user-select: none;
}
div.button {
float: left;
width: 18px;
height: 18px;
border: 3px solid rgba(255, 255, 255, 1);
margin: 4px;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
-moz-border-radius: 12px;
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 1);
-webkit-border-radius: 12px;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 1);
}
div.button:hover {
background: rgba(0, 0, 0, 0.75);
}
div.background {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.25);
opacity: 0;
z-index: 1500;
}
div.dialog {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 135px;
margin: auto;
width: 405px;
height: 170px;
opacity: 0;
-moz-border-radius: 8px;
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 1);
-webkit-border-radius: 8px;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 1);
}
div.dialog > .title {
width: 389px;
height: 14px;
padding: 5px 8px 5px 8px;
background: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48));
background: -webkit-gradient(linear, left top, left bottom, from(rgb(80, 80, 80)), to(rgb(48, 48, 48)));
font-family: Lucida Grande, Verdana, Calibri, Arial;
font-weight: bold;
font-size: 10px;
text-align: left;
color: rgb(192, 192, 192);
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
}
div.dialog > .text {
width: 373px;
height: 90px;
padding: 16px;
background: rgb(64, 64, 64);
font-family: Lucida Grande, Verdana, Calibri, Arial;
font-weight: bold;
font-size: 10px;
text-align: left;
color: rgb(192, 192, 192);
}
div.dialog > .buttons {
width: 397px;
height: 24px;
padding: 0 4px 0 4px;
background: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48));
background: -webkit-gradient(linear, left top, left bottom, from(rgb(80, 80, 80)), to(rgb(48, 48, 48)));
-moz-border-radius-bottomleft: 8px;
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
}
div.map {
position: fixed;
right: 8px;
bottom: 32px;
height: 90px;
border: 2px solid rgba(255, 255, 255, 1);
z-index: 500;
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 1);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 1);
}
div.map > .box {
position: absolute;
left: 0;
top: 0;
border: 2px solid rgba(255, 255, 255, 1);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 1);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 1);
cursor: move;
}
div.map > .interface {
position: fixed;
right: 8px;
bottom: 32px;
height: 90px;
cursor: pointer;
}
div.input {
font-family: Lucida Grande, Verdana, Calibri, Arial;
font-weight: bold;
font-size: 10px;
color: rgb(192, 192, 192);
text-align: center;
}
div.input, div.select {
float: left;
width: 117px;
height: 12px;
padding: 1px 8px 1px 8px;
border: 1px solid rgb(128, 128, 128);
margin: 4px;
background: rgba(0, 0, 0, 0.25);
cursor: pointer;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 1);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 1);
}
div.input:hover, div.select:hover {
background: rgba(0, 0, 0, 0.5);
}
.buttons > div.input {
float: right;
width: 27px;
}
div.select > div {
width: 117px;
font-family: Lucida Grande, Verdana, Calibri, Arial;
font-weight: bold;
font-size: 10px;
text-align: left;
color: rgb(192, 192, 192);
}
img.button {
width: 12px;
height: 12px;
margin: 3px;
}
img.map {
height: 90px;
}
select {
position: relative;
left: -9px;
top: -17px;
width: 135px;
cursor: pointer;
opacity: 0;
}
.original {
position: fixed;
}
.photo {
background: rgb(128, 128, 128);
position: fixed;
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 1);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 1);
}
div.spinner {
position: fixed;
width: 24px;
height: 24px;
background: rgba(0, 0, 0, 0.25);
opacity: 0;
z-index: 250;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
}
img.spinner {
width: 18px;
height: 18px;
margin: 3px;
}
.thumbnail {
float: left;
//width: 135px;
height: 90px;
margin: 16px;
cursor: pointer;
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 1);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 1);
}
.thumbnail.loading {
background: rgb(128, 128, 128);
}
.tooltip {
position: fixed;
width: 135px;
bottom: 6px;
font-family: Lucida Grande, Verdana, Calibri, Arial;
font-weight: bold;
font-size: 10px;
color: rgb(192, 192, 192);
text-align: center;
text-shadow: rgb(0, 0, 0) 1px 1px 2px;
opacity: 0;
z-index: 1000;
}
#album {
//position: absolute;
//top: 0;
//width: auto;
//margin: 0 auto 36px auto;
padding: 12px;
display: table-cell;
}
#buttons {
position: fixed;
left: 0;
right: 0;
width: 160px;
height: 32px;
bottom: 24px;
padding: 4px;
margin: 0px auto 0px auto;
opacity: 0;
z-index: 1000;
//background: red;
}
#interface {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 24px;
cursor: move;
display: none;
opacity: 0;
z-index: 500;
}
#layer {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 24px;
background: rgb(64, 64, 64);
display: none;
opacity: 0;
}
#menu {
position: fixed;
left: 0;
bottom: 0;
right: 0;
height: 24px;
background: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48));
background: -webkit-gradient(linear, left top, left bottom, from(rgb(80, 80, 80)), to(rgb(48, 48, 48)));
//opacity: 0.9;
z-index: 500;
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 1);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 1);
}
#left {
position: fixed;
left: 4px;
}
#right {
position: fixed;
right: 4px;
}