You are here

Home » API reference » Image Hotspots 7.2

image_hotspots.css in Image Hotspots 7.2 

/* edit hotspots */
.image-hotspot-edit {
  clear: both;
}
.image-hotspot-img {
  float: left;
}
.image-hotspot-form {
  display: none;
}
.image-hotspot-data {
  float: left;
  border: 1px solid #ccc;
  width: 200px;
  margin-left: 10px;
  background-color: #eee;
  padding: 7px;
}
.image-hotspot-data label {
  font-size: 10px;
  font-weight: normal;
}
.image-hotspot-data input {
  width: 100%;
  box-sizing: border-box;
}
.image-hotspot-data-item {
  padding: 3px;
  border: 1px solid #ddd;
  margin-bottom: 3px;
}
.img-hotspot-data-title {
  cursor: pointer;
}

/* view hotspots */
.image-hotspot-wrapper {
  position: relative;
  clear: both;
}
.img-hotspot {
  width: 100%;
  height: 100%;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
}
.img-hotspot-title {
  font-size: 12px;
  line-height: 12px;
}
.img-hotspot-description {
  font-size: 10px;
  line-height: 10px;
  margin-top: 5px;
}
.hotspot-title {
  cursor: pointer;
}
.hotspot-title:hover {
  text-decoration: underline;
}
.hotspot-overlay {
  background: #000;
  opacity: 0.5;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 11;
}
.img-hotspot-highlight {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 12;
  width: 100%;
  height: 100%;
  display: none;
  background-repeat: no-repeat;
}
.form-managed-file div.image-widget-data {
  float: none;
}
.img-hotspot-box {
  position: absolute;
  z-index: 11;
}

File

themes/image_hotspots.css
View source 
  1. /* edit hotspots */

  2. .image-hotspot-edit {

  3.   clear: both;

  4. }

  5. .image-hotspot-img {

  6.   float: left;

  7. }

  8. .image-hotspot-form {

  9.   display: none;

  10. }

  11. .image-hotspot-data {

  12.   float: left;

  13.   border: 1px solid #ccc;

  14.   width: 200px;

  15.   margin-left: 10px;

  16.   background-color: #eee;

  17.   padding: 7px;

  18. }

  19. .image-hotspot-data label {

  20.   font-size: 10px;

  21.   font-weight: normal;

  22. }

  23. .image-hotspot-data input {

  24.   width: 100%;

  25.   box-sizing: border-box;

  26. }

  27. .image-hotspot-data-item {

  28.   padding: 3px;

  29.   border: 1px solid #ddd;

  30.   margin-bottom: 3px;

  31. }

  32. .img-hotspot-data-title {

  33.   cursor: pointer;

  34. }

  35. 

  36. /* view hotspots */

  37. .image-hotspot-wrapper {

  38.   position: relative;

  39.   clear: both;

  40. }

  41. .img-hotspot {

  42.   width: 100%;

  43.   height: 100%;

  44.   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);

  45. }

  46. .img-hotspot-title {

  47.   font-size: 12px;

  48.   line-height: 12px;

  49. }

  50. .img-hotspot-description {

  51.   font-size: 10px;

  52.   line-height: 10px;

  53.   margin-top: 5px;

  54. }

  55. .hotspot-title {

  56.   cursor: pointer;

  57. }

  58. .hotspot-title:hover {

  59.   text-decoration: underline;

  60. }

  61. .hotspot-overlay {

  62.   background: #000;

  63.   opacity: 0.5;

  64.   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

  65.   position: absolute;

  66.   top: 0;

  67.   left: 0;

  68.   display: none;

  69.   z-index: 11;

  70. }

  71. .img-hotspot-highlight {

  72.   position: absolute;

  73.   top: 0;

  74.   left: 0;

  75.   z-index: 12;

  76.   width: 100%;

  77.   height: 100%;

  78.   display: none;

  79.   background-repeat: no-repeat;

  80. }

  81. .form-managed-file div.image-widget-data {

  82.   float: none;

  83. }

  84. .img-hotspot-box {

  85.   position: absolute;

  86.   z-index: 11;

  87. }