app/assets/stylesheets/_annotorious.scss
/** Global item styles **/
@media screen and (min-width: 0em){
body{
.hidden{
display: none !important;
}
.annotatable{
max-width: 100%;
}
.wrapper{
article.project{
section.album{
div{
.annotorious-opacity-fade {
-moz-transition-property: opacity;
-moz-transition-duration: 0.5s;
-moz-transition-delay: 0s;
-webkit-transition-property: opacity;
-webkit-transition-duration: 0.5s;
-webkit-transition-delay: 0s;
-o-transition-property: opacity;
-o-transition-duration: 0.5s;
-o-transition-delay: 0s;
transition-property: opacity;
transition-duration: 0.5s;
transition-delay: 0s;
}
.annotorious-item-focus {
opacity:1.0;
}
.annotorious-item-unfocus {
opacity:0.4;
}
/** Hint/help popup **/
.annotorious-hint {
background-color: transparent;
box-shadow: none;
}
.annotorious-hint-msg {
background-color: transparent;
box-shadow: none;
margin:4px;
padding:8px 15px 8px 30px;
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
line-height: normal;
font-size:12px;
color:#fff;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
}
.annotorious-hint-icon {
background-color: rgba(0,0,0,0);
box-shadow: none;
position:absolute;
top: 6px;
left: 5px;
background:image-url('feather_icon.png');
background-repeat:no-repeat;
width:19px !important;
height:22px;
margin:2px 4px 0px 6px;
}
/** Popup **/
.annotorious-popup {
line-height:135%;
font-family:Arial, Verdana, Sans;
font-size:12px;
color:#000;
background-color:#fff;
border:1px solid #ccc;
padding:9px 8px;
word-wrap:break-word;
width:180px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
-moz-box-shadow:0px 5px 15px #111;
-webkit-box-shadow:0px 5px 15px #111;
box-shadow:0px 5px 15px #111;
-moz-transition-property: opacity;
-moz-transition-duration: 0.5s;
-moz-transition-delay: 0s;
-webkit-transition-property: opacity;
-webkit-transition-duration: 0.5s;
-webkit-transition-delay: 0s;
-o-transition-property: opacity;
-o-transition-duration: 0.5s;
-o-transition-delay: 0s;
transition-property: opacity;
transition-duration: 0.5s;
transition-delay: 0s;
}
.annotorious-popup-empty {
color:#999;
font-style:italic;
}
.annotorious-popup-buttons {
float:right;
margin:0px 0px 1px 10px;
height:16px;
-moz-transition-property: opacity;
-moz-transition-duration: 1s;
-moz-transition-delay: 0s;
-webkit-transition-property: opacity;
-webkit-transition-duration: 1s;
-webkit-transition-delay: 0s;
-o-transition-property: opacity;
-o-transition-duration: 1s;
-o-transition-delay: 0s;
transition-property: opacity;
transition-duration: 1s;
transition-delay: 0s;
}
.annotorious-popup-button {
font-size:10px;
text-decoration:none;
display:inline-block;
color:#000;
font-weight:bold;
margin-left:5px;
opacity:0.4;
-moz-transition-property: opacity;
-moz-transition-duration: 0.5s;
-moz-transition-delay: 0s;
-webkit-transition-property: opacity;
-webkit-transition-duration: 0.5s;
-webkit-transition-delay: 0s;
-o-transition-property: opacity;
-o-transition-duration: 0.5s;
-o-transition-delay: 0s;
transition-property: opacity;
transition-duration: 0.5s;
transition-delay: 0s;
}
.annotorious-popup-button:hover {
background-color:transparent;
}
.annotorious-popup-button-active {
opacity:0.9;
}
.annotorious-popup-button-edit {
background:image-url('pencil.png');
width:16px;
height:16px;
text-indent:100px;
overflow:hidden;
}
.annotorious-popup-button-delete {
background:image-url('delete.png');
width:16px;
height:16px;
text-indent:100px;
overflow:hidden;
float:right;
}
.annotorious-popup-field {
border-top:1px solid #ccc;
margin:6px 0px 0px 0px;
padding-top:2px;
}
/** Editor **/
.annotorious-editor {
form{
padding-top: 0;
}
line-height: normal;
padding:0px 0px 2px 0px;
background-color:#f2f2f2;
color:#000;
opacity:0.97;
border:1px solid #ccc;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
-moz-box-shadow:0px 5px 15px #111;
-webkit-box-shadow:0px 5px 15px #111;
box-shadow:0px 5px 15px #111;
}
.annotorious-editor-text {
border-width:0px 0px 1px 0px;
border-style:solid;
border-color:#ccc;
line-height: normal;
background-color:#fff;
width:240px;
height:50px !important;
outline:none;
font-family:Verdana, Arial;
font-size:11px;
padding:4px;
margin:0px;
color:#000;
text-shadow:none;
overflow-y:auto;
display:block;
}
.annotorious-editor-button-container {
padding-top:2px;
}
.annotorious-editor-button {
float:right;
line-height: normal;
display:inline-block;
text-align:center;
text-decoration:none;
font-family:Verdana, Arial;
font-size:10px;
border:1px solid #777;
color:#ddd;
padding:3px 8px;
margin:1px 2px 0px 1px;
cursor:pointer;
cursor:hand;
background:-webkit-gradient(linear, left top, left bottom, from(#888), to(#555));
background:-moz-linear-gradient(top, #888, #555);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#555555');
-moz-border-radius:2px;
-webkit-border-radius:2px;
-khtml-border-radius:2px;
border-radius:2px;
}
.annotorious-editor-button:hover {
background:#999;
}
.annotorious-editor-field {
border-bottom:1px solid #ccc;
margin:0px;
background-color:#fff;
padding:3px;
font-family:Verdana, Arial;
font-size:12px;
}
/** OpenLayers module **/
.annotorious-ol-boxmarker-outer {
border:1px solid #000;
}
.annotorious-ol-boxmarker-inner {
border:1px solid #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.annotorious-ol-hint {
line-height: normal;
font-family:Arial, Verdana, Sans;
font-size:16px;
color:#000;
background-color:#fff;
margin:0px;
padding:9px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}
.annotorious-ol-hint-secondary {
background-color:#fff000;
}
canvas {
z-index: 2;
}
canvas.hidden {
z-index: -1;
visibility: hidden;
}
html.hasTouch .annotator-viewer li .annotator-controls,
html.hasTouch .annotator-viewer li .annotator-controls {
opacity: 1;
}
}
}
}
}
}
}