annotorious/css/theme-dark/annotorious-dark.css

This is an image annotation tool that can also be used for openseadragon comments.

.annotorious-hint-msg {
  background-color:rgba(0,0,0,0.6);
  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 {
  position:absolute;
  top:6px;
  left:5px;
  background:url(feather_icon.png);
  background-repeat:no-repeat;
  width:19px;
  height:22px;
  margin:2px 4px 0 6px;
}

.annotorious-opacity-fade {
  -moz-transition-property:opacity;
  -moz-transition-duration:.5s;
  -moz-transition-delay:0;
  -webkit-transition-property:opacity;
  -webkit-transition-duration:.5s;
  -webkit-transition-delay:0;
  -o-transition-property:opacity;
  -o-transition-duration:.5s;
  -o-transition-delay:0;
  transition-property:opacity;
  transition-duration:.5s;
  transition-delay:0;
}

.annotorious-item-focus {
  opacity:1.0;
}

.annotorious-item-unfocus {
  opacity:0.4;
}

.annotorious-popup {
  position:absolute;
  top:0;
  left:0;
  width:220px;
  min-height:26px;
  margin-top:12px;
  background-color:#383838;
  border:1px solid #000;
  outline:none;
  padding:5px;
  -moz-transition-property:opacity;
  -moz-transition-duration:.5s;
  -moz-transition-delay:0;
  -ms-transition-property:opacity;
  -ms-transition-duration:.5s;
  -ms-transition-delay:0;
  -webkit-transition-property:opacity;
  -webkit-transition-duration:.5s;
  -webkit-transition-delay:0;
  -o-transition-property:opacity;
  -o-transition-duration:.5s;
  -o-transition-delay:0;
  transition-property:opacity;
  transition-duration:.5s;
  transition-delay:0;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  -khtml-border-radius:8px;
   border-radius:8px;
  -o-box-shadow:0 5px 5px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);
  -ms-box-shadow:0 5px 5px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);
  -moz-box-shadow:0 5px 5px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);
  -webkit-box-shadow:0 5px 5px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);
  box-shadow:0 5px 53px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);
}

.annotorious-popup-text {
  display:block;
  padding:5px;
  font-family:Verdana,Arial;
  font-size:12px;
  color:#eee;
  text-shadow:none;
  line-height:150%;
}

.annotorious-popup-text a {
  text-decoration:underline;
  color:#eee;
  background-color:transparent;
}

.top-left:after, .annotorious-editor:after {
  content:url(Indicator.png);
  position:absolute;
  left:15px;
  top:-14px;
  height:18px;
  width:19px;
  display:block;
}

.top-right:after {
  content:url(Indicator.png);
  position:absolute;
  right:15px;
  top:-14px;
  height:18px;
  width:19px;
  display:block;  
}


.annotorious-popup-buttons {
  float:right;
  height:26px;
  width:56px;
  display:block;
  white-space:nowrap;
  padding-left:4px;
  -moz-transition-property:opacity;
  -moz-transition-duration:1s;
  -moz-transition-delay:0;
  -webkit-transition-property:opacity;
  -webkit-transition-duration:1s;
  -webkit-transition-delay:0;
  -o-transition-property:opacity;
  -o-transition-duration:1s;
  -o-transition-delay:0;
  transition-property:opacity;
  transition-duration:1s;
  transition-delay:0;
}

.annotorious-popup-button {
  font-size:10px;
  text-decoration:none;
  display:inline-block;
  color:#000;
  font-weight:700;
  width:26px;
  height:26px;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  -moz-transition-property:opacity;
  -moz-transition-duration:1s;
  -moz-transition-delay:0;
  -webkit-transition-property:opacity;
  -webkit-transition-duration:1s;
  -webkit-transition-delay:0;
  -ms-transition-property:opacity;
  -ms-transition-duration:1s;
  -ms-transition-delay:0;
  -o-transition-property:opacity;
  -o-transition-duration:1s;
  -o-transition-delay:0;
  transition-property:opacity;
  transition-duration:1s;
  transition-delay:0;
}

.annotorious-popup-button-delete:hover {
  background-color:transparent;
  background:url(DarkSprite.png) no-repeat;
  background-position:0 -40px;
}

.annotorious-popup-button-delete {
  background:url(DarkSprite.png) no-repeat;
  background-position:0 -8px;
  outline:none;
}

.annotorious-popup-button-edit {
  background:url(DarkSprite.png) no-repeat;
  background-position:0 -70px;
  outline:none;
}

.annotorious-popup-button-edit:hover {
  background-color:transparent;
  background:url(DarkSprite.png) no-repeat;
  background-position:0 -99px;
}

.annotorious-popup-field {
  margin:0px;
  padding:6px;
  font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
  font-size:12px;
}

.annotorious-editor {
  position:absolute;
  top:0;
  left:0;
  margin-top:12px;
  background-color:#383838;
  color:#F2F2F2;
  border:1px solid #000;
  border-radius:8px;
  -o-border-radius:8px;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  -khtml-border-radius:8px;
  -o-box-shadow:0 5px 5px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);
  -ms-box-shadow:0 5px 5px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);
  -moz-box-shadow:0 5px 5px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);
  -webkit-box-shadow:0 5px 5px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);
  box-shadow:0 5px 53px rgba(0,0,0,0.7),inset 0 1px 1px rgba(255,255,255,0.25);
  z-index:2;
}

.annotorious-editor-button-container {
  background:url(DarkSprite.png);
  background-position:0 -1px;
  margin:0 10px 10px;
  background-repeat:repeat-x;
  height:2px;
  display:block;
}

.annotorious-editor-text {
  border:none;
  background-color:#383838;
  line-height:150%;
  margin:10px 0px 4px 0px;
  padding:0px 10px;
  min-height:50px;
  width:100%;
  min-width:200px;
  outline:none;
  font-family:Verdana,Arial;
  font-weight:400;
  font-size:12px;
  color:#eee;
  text-shadow:none;
  overflow-y:auto;
  display:block;
  resize:none;
}

.annotorious-editor-text a:hover {
  color:#eee;
  background-color:transparent;
}

.annotorious-editor-button {
  float:right;
  line-height:normal;
  display:inline-block;
  text-align:center;
  text-decoration:none;
  font-family:Verdana,Arial;
  font-size:.625em;
  border:1px solid #000;
  color:#f2f2f2;
  padding-top:5px;
  padding-bottom:5px;
  margin:7px 2px 10px 0px;
  cursor:pointer;
  width:60px;
  -moz-box-shadow:inset 0 1px 1px rgba(255,255,255,0.25),0 1px 1px rgba(255,255,255,0.25);
  -webkit-box-shadow:inset 0 1px 1px rgba(255,255,255,0.25),0 1px 1px rgba(255,255,255,0.25);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.25),0 1px 1px rgba(255,255,255,0.25);
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  -khtml-border-radius:3px;
  border-radius:3px;
  opacity:1;
}

.annotorious-editor-button-save {
  margin-left:5px;
  background:-webkit-gradient(linear,left top,left bottom,from(#FFA52C),to(#FB7B28));
  background:-moz-linear-gradient(top,#FFA52C,#FB7B28);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFA52C',endColorstr='#FB7B28');
}

.annotorious-editor-button-cancel {
  background:-webkit-gradient(linear,left top,left bottom,from(#656565),to(#2C2C2C));
  background:-moz-linear-gradient(top,#656565,#2C2C2C);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#656565',endColorstr='#2C2C2C');
}

.annotorious-editor-button:hover {
  color:rgba(242,2423,242,1);
  text-shadow:0 0 6px rgba(242,242,242,0.6);
  -o-text-shadow:0 0 6px rgba(242,242,242,0.6);
  -moz-text-shadow:0 0 6px rgba(242,242,242,0.6);
  -webkit-text-shadow:0 0 6px rgba(242,242,242,0.6);
}

.annotorious-editor-button:active {
  -moz-box-shadow:inset 0 3px 3px rgba(0,0,0,0.7),0 1px 1px rgba(255,255,255,0.25);
  -webkit-box-shadow:inset 0 3px 3px rgba(0,0,0,0.7),0 1px 1px rgba(255,255,255,0.25);
  box-shadow:inset 0 3px 3px rgba(0,0,0,0.7),0 1px 1px rgba(255,255,255,0.25);
}

.annotorious-editor-field {
  margin:0px;
  padding:6px 0px;
  font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
  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:#fff;
  background-color:rgba(0,0,0,0.7);
  margin:0px;
  padding:9px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
}