You are here

Home » API reference » Manual Crop 7

manualcrop.css in Manual Crop 7 

/* Overlay */
.manualcrop-overlay {
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 10003;
}
.manualcrop-overlay-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 10004;
  opacity: 0.90;
  filter: alpha(opacity=90);
  -ms-filter: "alpha(opacity=90)";
  -khtml-opacity: 0.90;
  -moz-opacity: 0.90;
  background-color: #000000;
}
/* Croptool: image */
.manualcrop-overlay .manualcrop-image-holder {
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 10005;
}
.manualcrop-inline .manualcrop-image-holder {
  position: relative;
}
.manualcrop-image {
  max-width: none;
  max-height: none;
  cursor: crosshair;
}
.manualcrop-overlay .manualcrop-image {
  margin: 2em 2em 4.2em 2em;
}
.manualcrop-inline .manualcrop-image {
  margin: 1em 0em 1em 0em;
}
/* Croptool instant preview */
.manualcrop-instantpreview {
  position: relative;
  overflow: hidden;
}
.manualcrop-instantpreview img {
  max-width: none;
}
.manualcrop-overlay .manualcrop-instantpreview {
  width: 150px;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10005;
}
.toolbar .manualcrop-overlay .manualcrop-instantpreview {
  top: 35px;
}
.toolbar-drawer .manualcrop-overlay .manualcrop-instantpreview {
  top: 70px;
}
.manualcrop-inline .manualcrop-instantpreview {
  margin-right: 1em;
  width: 30%;
  float: left;
}
/* Croptool: selection info */
.manualcrop-selection-info {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  opacity: 0.70;
}
.manualcrop-selection-label {
  height: 1em;
  display: inline-block;
}
.manualcrop-selection-label-content {
  padding: 1px 5px 2px 5px;
  color: #FFFFFF;
  font-size: 0.7em;
  line-height: normal;
  text-align: center;
  background-color: #333333;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}
.manualcrop-selection-xy {
  position: absolute;
  top: -3px;
  left: 0px;
}
.manualcrop-selection-xy .manualcrop-selection-label-content {
  position: relative;
  top: -100%;
  left: -50%;
}
.manualcrop-selection-width {
  position: absolute;
  top: 100%;
  left: 50%;
}
.manualcrop-selection-width .manualcrop-selection-label-content {
  margin-top: 3px;
  position: relative;
  left: -50%;
}
.manualcrop-selection-height {
  position: absolute;
  top: 50%;
  left: -3px;
}
.manualcrop-selection-height .manualcrop-selection-label-content {
  position: relative;
  top: -50%;
  left: -100%;
}
/* Croptool: style info */
.manualcrop-style-info {
  font-weight: bold;
}
.manualcrop-overlay .manualcrop-style-info {
  position: absolute;
  left: 0.8em;
  bottom: 0.8em;
  z-index: 10003;
  color: #FFFFFF;
}
.manualcrop-inline .manualcrop-style-info {
  margin-right: 1em;
  padding-bottom: 1em;
  width: 33%;
  float: left;
}
.manualcrop-style-info span {
  font-weight: normal;
  font-style: italic;
}
/* Croptool: buttons */
.manualcrop-overlay .manualcrop-buttons {
  position: absolute;
  bottom: 0.8em;
  right: 0em;
  z-index: 10007;
}
.manualcrop-inline .manualcrop-buttons {
  padding-bottom: 1em;
  width: 33%;
  float: left;
  font-weight: bold;
}
.manualcrop-overlay .manualcrop-button, .manualcrop-overlay .manualcrop-button:hover, .manualcrop-overlay .manualcrop-button:focus {
  margin-right: 0.8em;
  padding: 0.1em 0.3em 0.1em 0.3em;
  display: block;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  float: right;
  background-color: #000000;
  border: 1px solid #545454;
}
.manualcrop-overlay .manualcrop-button:hover {
  color: #000000;
  background-color: #FFFFFF;
}
.manualcrop-buttons .manualcrop-button.manualcrop-clear, .manualcrop-buttons .manualcrop-button.manualcrop-reset {
  display: none;
}
.manualcrop-inline .manualcrop-button.form-submit {
  margin-bottom: 0.5em;
}
/* Style selection list/button */
.manualcrop-style-button-holder {
  padding-top: 1em;
}
.manualcrop-style-required {
  color: #FF0000;
}
.manualcrop-style-cropped {
  color: #96CB00;
}
/* Crop preview */
.manualcrop-preview-cropped {
  display: block;
  overflow: hidden;
}
.manualcrop-preview .manualcrop-preview-cropped img {
  margin: 0px;
  max-width: none;
  display: block;
}
/* Thumbnail list */
.manualcrop-thumblist {
  margin-top: 0.5em;
  padding-bottom: 0.2em;
  overflow: scroll;
  overflow-x: scroll;
  overflow-y: hidden;
}
.manualcrop-style-thumb, .manualcrop-style-thumb:hover, .manualcrop-style-thumb:focus {
  margin-right: 1.5em;
  float: left;
  display: block;
  text-align: center;
  text-decoration: none;
  border: none;
}
.manualcrop-style-thumb strong {
  margin-bottom: 0.2em;
  width: 100px;
  display: block;
}
.manualcrop-style-thumb .manualcrop-preview img {
  margin: 0px;
  max-width: 100px;
  height: auto;
}
.manualcrop-style-thumb .manualcrop-preview-cropped img {
  max-width: none;
  max-height: none;
}

File

manualcrop.css
View source 
  1. /* Overlay */

  2. .manualcrop-overlay {

  3.   position: fixed;

  4.   left: 0px;

  5.   top: 0px;

  6.   z-index: 10003;

  7. }

  8. .manualcrop-overlay-bg {

  9.   width: 100%;

  10.   height: 100%;

  11.   position: absolute;

  12.   z-index: 10004;

  13.   opacity: 0.90;

  14.   filter: alpha(opacity=90);

  15.   -ms-filter: "alpha(opacity=90)";

  16.   -khtml-opacity: 0.90;

  17.   -moz-opacity: 0.90;

  18.   background-color: #000000;

  19. }

  20. /* Croptool: image */

  21. .manualcrop-overlay .manualcrop-image-holder {

  22.   width: 100%;

  23.   height: 100%;

  24.   text-align: center;

  25.   position: absolute;

  26.   left: 0px;

  27.   top: 0px;

  28.   z-index: 10005;

  29. }

  30. .manualcrop-inline .manualcrop-image-holder {

  31.   position: relative;

  32. }

  33. .manualcrop-image {

  34.   max-width: none;

  35.   max-height: none;

  36.   cursor: crosshair;

  37. }

  38. .manualcrop-overlay .manualcrop-image {

  39.   margin: 2em 2em 4.2em 2em;

  40. }

  41. .manualcrop-inline .manualcrop-image {

  42.   margin: 1em 0em 1em 0em;

  43. }

  44. /* Croptool instant preview */

  45. .manualcrop-instantpreview {

  46.   position: relative;

  47.   overflow: hidden;

  48. }

  49. .manualcrop-instantpreview img {

  50.   max-width: none;

  51. }

  52. .manualcrop-overlay .manualcrop-instantpreview {

  53.   width: 150px;

  54.   position: absolute;

  55.   top: 5px;

  56.   left: 5px;

  57.   z-index: 10005;

  58. }

  59. .toolbar .manualcrop-overlay .manualcrop-instantpreview {

  60.   top: 35px;

  61. }

  62. .toolbar-drawer .manualcrop-overlay .manualcrop-instantpreview {

  63.   top: 70px;

  64. }

  65. .manualcrop-inline .manualcrop-instantpreview {

  66.   margin-right: 1em;

  67.   width: 30%;

  68.   float: left;

  69. }

  70. /* Croptool: selection info */

  71. .manualcrop-selection-info {

  72.   width: 100%;

  73.   height: 100%;

  74.   position: absolute;

  75.   top: 0px;

  76.   left: 0px;

  77.   z-index: 1;

  78.   opacity: 0.70;

  79. }

  80. .manualcrop-selection-label {

  81.   height: 1em;

  82.   display: inline-block;

  83. }

  84. .manualcrop-selection-label-content {

  85.   padding: 1px 5px 2px 5px;

  86.   color: #FFFFFF;

  87.   font-size: 0.7em;

  88.   line-height: normal;

  89.   text-align: center;

  90.   background-color: #333333;

  91.   -webkit-border-radius: 5px;

  92.   -moz-border-radius: 5px;

  93.   -ms-border-radius: 5px;

  94.   border-radius: 5px;

  95. }

  96. .manualcrop-selection-xy {

  97.   position: absolute;

  98.   top: -3px;

  99.   left: 0px;

  100. }

  101. .manualcrop-selection-xy .manualcrop-selection-label-content {

  102.   position: relative;

  103.   top: -100%;

  104.   left: -50%;

  105. }

  106. .manualcrop-selection-width {

  107.   position: absolute;

  108.   top: 100%;

  109.   left: 50%;

  110. }

  111. .manualcrop-selection-width .manualcrop-selection-label-content {

  112.   margin-top: 3px;

  113.   position: relative;

  114.   left: -50%;

  115. }

  116. .manualcrop-selection-height {

  117.   position: absolute;

  118.   top: 50%;

  119.   left: -3px;

  120. }

  121. .manualcrop-selection-height .manualcrop-selection-label-content {

  122.   position: relative;

  123.   top: -50%;

  124.   left: -100%;

  125. }

  126. /* Croptool: style info */

  127. .manualcrop-style-info {

  128.   font-weight: bold;

  129. }

  130. .manualcrop-overlay .manualcrop-style-info {

  131.   position: absolute;

  132.   left: 0.8em;

  133.   bottom: 0.8em;

  134.   z-index: 10003;

  135.   color: #FFFFFF;

  136. }

  137. .manualcrop-inline .manualcrop-style-info {

  138.   margin-right: 1em;

  139.   padding-bottom: 1em;

  140.   width: 33%;

  141.   float: left;

  142. }

  143. .manualcrop-style-info span {

  144.   font-weight: normal;

  145.   font-style: italic;

  146. }

  147. /* Croptool: buttons */

  148. .manualcrop-overlay .manualcrop-buttons {

  149.   position: absolute;

  150.   bottom: 0.8em;

  151.   right: 0em;

  152.   z-index: 10007;

  153. }

  154. .manualcrop-inline .manualcrop-buttons {

  155.   padding-bottom: 1em;

  156.   width: 33%;

  157.   float: left;

  158.   font-weight: bold;

  159. }

  160. .manualcrop-overlay .manualcrop-button, .manualcrop-overlay .manualcrop-button:hover, .manualcrop-overlay .manualcrop-button:focus {

  161.   margin-right: 0.8em;

  162.   padding: 0.1em 0.3em 0.1em 0.3em;

  163.   display: block;

  164.   color: #FFFFFF;

  165.   text-align: center;

  166.   text-decoration: none;

  167.   float: right;

  168.   background-color: #000000;

  169.   border: 1px solid #545454;

  170. }

  171. .manualcrop-overlay .manualcrop-button:hover {

  172.   color: #000000;

  173.   background-color: #FFFFFF;

  174. }

  175. .manualcrop-buttons .manualcrop-button.manualcrop-clear, .manualcrop-buttons .manualcrop-button.manualcrop-reset {

  176.   display: none;

  177. }

  178. .manualcrop-inline .manualcrop-button.form-submit {

  179.   margin-bottom: 0.5em;

  180. }

  181. /* Style selection list/button */

  182. .manualcrop-style-button-holder {

  183.   padding-top: 1em;

  184. }

  185. .manualcrop-style-required {

  186.   color: #FF0000;

  187. }

  188. .manualcrop-style-cropped {

  189.   color: #96CB00;

  190. }

  191. /* Crop preview */

  192. .manualcrop-preview-cropped {

  193.   display: block;

  194.   overflow: hidden;

  195. }

  196. .manualcrop-preview .manualcrop-preview-cropped img {

  197.   margin: 0px;

  198.   max-width: none;

  199.   display: block;

  200. }

  201. /* Thumbnail list */

  202. .manualcrop-thumblist {

  203.   margin-top: 0.5em;

  204.   padding-bottom: 0.2em;

  205.   overflow: scroll;

  206.   overflow-x: scroll;

  207.   overflow-y: hidden;

  208. }

  209. .manualcrop-style-thumb, .manualcrop-style-thumb:hover, .manualcrop-style-thumb:focus {

  210.   margin-right: 1.5em;

  211.   float: left;

  212.   display: block;

  213.   text-align: center;

  214.   text-decoration: none;

  215.   border: none;

  216. }

  217. .manualcrop-style-thumb strong {

  218.   margin-bottom: 0.2em;

  219.   width: 100px;

  220.   display: block;

  221. }

  222. .manualcrop-style-thumb .manualcrop-preview img {

  223.   margin: 0px;

  224.   max-width: 100px;

  225.   height: auto;

  226. }

  227. .manualcrop-style-thumb .manualcrop-preview-cropped img {

  228.   max-width: none;

  229.   max-height: none;

  230. }