Yuma2/Annotorious GUI elements - sample page early version

gistfile1.txt

.yuma-hint {
  line-height: normal;
  font-family:Arial, Verdana, Sans;
  font-size:11px;
  color:#000;
  background-color:#fff;
  margin:0px;
  padding:5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;

  /* Firefox */
  -moz-transition-property: opacity;
  -moz-transition-duration: 0.5s;
  -moz-transition-delay: 0s;
  /* WebKit */
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-delay: 0s;
  /* Opera */
  -o-transition-property: opacity;
  -o-transition-duration: 0.5s;
  -o-transition-delay: 0s;
  /* Standard */
  transition-property: opacity;
  transition-duration: 0.5s;
  transition-delay: 0s;
}

.yuma-canvas {
  /* Firefox */
  -moz-transition-property: opacity;
  -moz-transition-duration: 0.5s;
  -moz-transition-delay: 0s;
  /* WebKit */
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-delay: 0s;
  /* Opera */
  -o-transition-property: opacity;
  -o-transition-duration: 0.5s;
  -o-transition-delay: 0s;
  /* Standard */
  transition-property: opacity;
  transition-duration: 0.5s;
  transition-delay: 0s;
}

.yuma-popup {

  line-height: 150%;
  background-color: #232323;
  word-wrap:break-word;
  width: 200px;
  outline:none;
  padding: 6px 8px;
  font-family:Verdana, Arial;
  font-size:11px;
  color:#fff;
  text-shadow:none;
  overflow-y:auto;
  display:block;
  opacity:0.925;
  
  -moz-box-shadow:0px 5px 5px rgba(0,0,0,0.7), inset 0px 1px 1px rgba(255,255,255,0.25);  
  -webkit-box-shadow:0px 5px 5px rgba(0,0,0,0.7), inset 0px 1px 1px rgba(255,255,255,0.25);  
  box-shadow:0px 5px 53px rgba(0,0,0,0.7), inset 0px 1px 1px rgba(255,255,255,0.25);
  
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;

   /* Firefox */
  -moz-transition-property: opacity;
  -moz-transition-duration: 0.5s;
  -moz-transition-delay: 0s;
  /* WebKit */
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-delay: 0s;
  /* Opera */
  -o-transition-property: opacity;
  -o-transition-duration: 0.5s;
  -o-transition-delay: 0s;
  /* Standard */
  transition-property: opacity;
  transition-duration: 0.5s;
  transition-delay: 0s;
}

.yuma-popup-action {
  font-size:10px;
  text-decoration:none;
  display:inline-block;
  color:#000;
  font-weight:bold;
  margin:0px 0px 0px 10px;
  
  /* Firefox */
  -moz-transition-property: opacity;
  -moz-transition-duration: 1s;
  -moz-transition-delay: 0s;
  /* WebKit */
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 1s;
  -webkit-transition-delay: 0s;
  /* Opera */
  -o-transition-property: opacity;
  -o-transition-duration: 1s;
  -o-transition-delay: 0s;
  /* Standard */
  transition-property: opacity;
  transition-duration: 1s;
  transition-delay: 0s;
}

.yuma-popup-action:hover {
  background-color:transparent;
}

.yuma-popup-action-delete {
  background:url(delete.png);
  width:16px;
  height:16px;
  text-indent:100px;
  overflow:hidden;
  float:right;
}

.yuma-editform {
  line-height: 140%;
  padding:0px 0px 2px 0px;
  background-color:#3D3D3D;
  color:#000;
  opacity:0.925;
  border:1px solid #000;
  
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  
  -moz-box-shadow:0px 5px 5px rgba(0,0,0,0.7), inset 0px 1px 1px rgba(255,255,255,0.25);  
  -webkit-box-shadow:0px 5px 5px rgba(0,0,0,0.7), inset 0px 1px 1px rgba(255,255,255,0.25);  
  box-shadow:0px 5px 53px rgba(0,0,0,0.7), inset 0px 1px 1px rgba(255,255,255,0.25);  
}

.annotation-text {
  /*border-width:0px 0px 1px 0px;
  border-style:solid;
  border-color:#ccc; */
  border: 1px solid #000;
  margin: 10px 10px 10px 10px;
  
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  
  -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.25), inset 0px 1px 1px rgba(0,0,0,0.7);  
  -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.25), inset 0px 1px 1px rgba(0,0,0,0.7);  
  box-shadow:0px 1px 1px rgba(255,255,255,0.25), inset 0px 1px 1px rgba(0,0,0,0.7); 
  
  line-height: 150%;
  background-color: #232323;
  width:200px;
  height:50px;
  outline:none;
  font-family:Verdana, Arial;
  font-size:11px;
  padding:4px; 
  color:#fff;
  text-shadow:none;
  overflow-y:auto;
  display:block;
}

.yuma-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 #000;
  color: #fff;
  padding-top:5px;
  padding-bottom: 5px;
  margin: 1px 10px 5px 1px;
  cursor:pointer;
  cursor:hand;
  width: 70px;
  
  -moz-box-shadow: inset 0px 1px 1px rgba(255,255,255,0.25), 0px 1px 1px rgba(255,255,255,0.25);  
  -webkit-box-shadow: inset 0px 1px 1px rgba(255,255,255,0.25), 0px 1px 1px rgba(255,255,255,0.25);  
  box-shadow: inset 0px 1px 1px rgba(255,255,255,0.25), 0px 1px 1px rgba(255,255,255,0.25); 
  
  background:-webkit-gradient(linear, left top, left bottom, from(#686868), to(#383838));
  background:-moz-linear-gradient(top,  #686868,  #383838);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#686868', endColorstr='#383838');
  
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  -khtml-border-radius:3px;
  border-radius:3px;
}

.yuma-button.annotation-save:hover {
  color: rgba(182,253,182,1);
  text-shadow: 0px 0px 5px rgba(182,253,182,0.5);
}

.yuma-button.annotation-cancel:hover {
  color: rgba(252,141,141,1);
  text-shadow: 0px 0px 5px rgba(252,141,141,0.5);
}

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