You are here

Home » API reference » Image Hotspots 8

image_hotspots.edit.css in Image Hotspots 8 

/* Jcrop styling */
.jcrop-holder {
  line-height: 0;
  margin-bottom: 15px;
  display: none;
}
.image-hotspots-wrapper .jcrop-hline,
.image-hotspots-wrapper .jcrop-vline {
  background: #24aa98;
}
.image-hotspots-wrapper .jcrop-handle {
  background-color: #ffffff;
  border-color: #24aa98;
}
.toolbar #toolbar-bar {
  z-index: 1000;
}
/* Edit form */
.image-hotspots-wrapper .edit-form-wrapper {
  display: none;
  position: absolute;
  z-index: 50;
  border: 2px solid #959ea7;
  border-radius: 6px;
  padding: 5px;
  background-color: #f2f5f8;
}
.image-hotspots-wrapper .edit-form-wrapper .close-button {
  display: block;
  cursor: default;
  max-width: 200px;
  height: 12px;
  background: url(images/cross.png) no-repeat 100%;
  margin: 12px;
}
.image-hotspots-wrapper .edit-form-wrapper .edit-form {
  margin: 14px 22px;
}
.image-hotspots-wrapper .edit-form-wrapper .form-messages {
  max-width: 200px;
  color: #b83d4b;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: normal;
}
.image-hotspots-wrapper .edit-form-wrapper input,
.image-hotspots-wrapper .edit-form-wrapper textarea,
.image-hotspots-wrapper .edit-form-wrapper button {
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: normal;
  display: block;
}
.image-hotspots-wrapper .edit-form-wrapper input[name = "hotspots-target"],
.image-hotspots-wrapper .edit-form-wrapper label {
  display: inline-block;
  font-size: 16px;
  padding-left: 8px;
  font-weight: 200;
}
.image-hotspots-wrapper .edit-form-wrapper input,
.image-hotspots-wrapper .edit-form-wrapper textarea {
  max-width: 200px;
  background-color: #ffffff;
  border: 2px solid #ACB4BC;
  border-radius: 6px;
  margin-bottom: 10px;
}
.image-hotspots-wrapper .edit-form-wrapper input {
  height: 32px;
}
.image-hotspots-wrapper .edit-form-wrapper textarea {
  width: 100%;
}
.image-hotspots-wrapper .edit-form-wrapper input::-webkit-input-placeholder,
.image-hotspots-wrapper .edit-form-wrapper input::-moz-placeholder,
.image-hotspots-wrapper .edit-form-wrapper input:-moz-placeholder,
.image-hotspots-wrapper .edit-form-wrapper input:-ms-input-placeholder {
  color: #acb4bc;
}
.image-hotspots-wrapper .edit-form-wrapper button {
  color: #ffffff;
  background-color: #24aa98;
  padding: 9px 20px;
  border: none;
  border-radius: 6px;
  display: inline-block;
}
/* Action lables */
.image-hotspots-wrapper .labels .label-editor {
  display: inline-block;
}
.image-hotspots-wrapper .action {
  color: #65abd0;
  background-color: #ffffff;
  border: 2px solid #65abd0;
  border-radius: 6px;
  margin-bottom: 5px;
  padding: 9px 20px;
  display: inline-block;
  cursor: default;
}
.image-hotspots-wrapper .action.edit {
  margin-right: 10px;
}
.image-hotspots-wrapper .action.selected {
  color: #ffffff;
  background-color: #65abd0;
}
.image-hotspots-wrapper .add-button {
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: normal;
  color: #ffffff;
  background-color: #24aa98;
  border: none;
  border-radius: 6px;
  margin-bottom: 15px;
  display: inline-block;
  cursor: default;
}
.ajax-progress-throbber {
  margin-left: 10px;
  display: inline-block;
}
.ajax-progress-throbber .throbber {
  font-size: 14px;
  padding: 1px 8px 2px;
}

File

css/image_hotspots.edit.css
View source 
  1. /* Jcrop styling */

  2. .jcrop-holder {

  3.   line-height: 0;

  4.   margin-bottom: 15px;

  5.   display: none;

  6. }

  7. .image-hotspots-wrapper .jcrop-hline,

  8. .image-hotspots-wrapper .jcrop-vline {

  9.   background: #24aa98;

  10. }

  11. .image-hotspots-wrapper .jcrop-handle {

  12.   background-color: #ffffff;

  13.   border-color: #24aa98;

  14. }

  15. .toolbar #toolbar-bar {

  16.   z-index: 1000;

  17. }

  18. /* Edit form */

  19. .image-hotspots-wrapper .edit-form-wrapper {

  20.   display: none;

  21.   position: absolute;

  22.   z-index: 50;

  23.   border: 2px solid #959ea7;

  24.   border-radius: 6px;

  25.   padding: 5px;

  26.   background-color: #f2f5f8;

  27. }

  28. .image-hotspots-wrapper .edit-form-wrapper .close-button {

  29.   display: block;

  30.   cursor: default;

  31.   max-width: 200px;

  32.   height: 12px;

  33.   background: url(images/cross.png) no-repeat 100%;

  34.   margin: 12px;

  35. }

  36. .image-hotspots-wrapper .edit-form-wrapper .edit-form {

  37.   margin: 14px 22px;

  38. }

  39. .image-hotspots-wrapper .edit-form-wrapper .form-messages {

  40.   max-width: 200px;

  41.   color: #b83d4b;

  42.   font-family: Roboto, sans-serif;

  43.   font-size: 14px;

  44.   font-weight: normal;

  45. }

  46. .image-hotspots-wrapper .edit-form-wrapper input,

  47. .image-hotspots-wrapper .edit-form-wrapper textarea,

  48. .image-hotspots-wrapper .edit-form-wrapper button {

  49.   font-family: Roboto, sans-serif;

  50.   font-size: 14px;

  51.   font-weight: normal;

  52.   display: block;

  53. }

  54. .image-hotspots-wrapper .edit-form-wrapper input[name = "hotspots-target"],

  55. .image-hotspots-wrapper .edit-form-wrapper label {

  56.   display: inline-block;

  57.   font-size: 16px;

  58.   padding-left: 8px;

  59.   font-weight: 200;

  60. }

  61. .image-hotspots-wrapper .edit-form-wrapper input,

  62. .image-hotspots-wrapper .edit-form-wrapper textarea {

  63.   max-width: 200px;

  64.   background-color: #ffffff;

  65.   border: 2px solid #ACB4BC;

  66.   border-radius: 6px;

  67.   margin-bottom: 10px;

  68. }

  69. .image-hotspots-wrapper .edit-form-wrapper input {

  70.   height: 32px;

  71. }

  72. .image-hotspots-wrapper .edit-form-wrapper textarea {

  73.   width: 100%;

  74. }

  75. .image-hotspots-wrapper .edit-form-wrapper input::-webkit-input-placeholder,

  76. .image-hotspots-wrapper .edit-form-wrapper input::-moz-placeholder,

  77. .image-hotspots-wrapper .edit-form-wrapper input:-moz-placeholder,

  78. .image-hotspots-wrapper .edit-form-wrapper input:-ms-input-placeholder {

  79.   color: #acb4bc;

  80. }

  81. .image-hotspots-wrapper .edit-form-wrapper button {

  82.   color: #ffffff;

  83.   background-color: #24aa98;

  84.   padding: 9px 20px;

  85.   border: none;

  86.   border-radius: 6px;

  87.   display: inline-block;

  88. }

  89. /* Action lables */

  90. .image-hotspots-wrapper .labels .label-editor {

  91.   display: inline-block;

  92. }

  93. .image-hotspots-wrapper .action {

  94.   color: #65abd0;

  95.   background-color: #ffffff;

  96.   border: 2px solid #65abd0;

  97.   border-radius: 6px;

  98.   margin-bottom: 5px;

  99.   padding: 9px 20px;

  100.   display: inline-block;

  101.   cursor: default;

  102. }

  103. .image-hotspots-wrapper .action.edit {

  104.   margin-right: 10px;

  105. }

  106. .image-hotspots-wrapper .action.selected {

  107.   color: #ffffff;

  108.   background-color: #65abd0;

  109. }

  110. .image-hotspots-wrapper .add-button {

  111.   font-family: Roboto, sans-serif;

  112.   font-size: 14px;

  113.   font-weight: normal;

  114.   color: #ffffff;

  115.   background-color: #24aa98;

  116.   border: none;

  117.   border-radius: 6px;

  118.   margin-bottom: 15px;

  119.   display: inline-block;

  120.   cursor: default;

  121. }

  122. .ajax-progress-throbber {

  123.   margin-left: 10px;

  124.   display: inline-block;

  125. }

  126. .ajax-progress-throbber .throbber {

  127.   font-size: 14px;

  128.   padding: 1px 8px 2px;

  129. }