You are here

imagecrop.css in Image javascript crop 6

Same filename and directory in other branches
  1. 5 imagecrop.css
/* add important to override folks using admin_menu */
body { margin: 0 !important; padding: 0; background: none !important; }

/* default colors and divs */
#imagecrop_presettabs {
  padding: 3px;
  color: #fff;
  font-weight: bold;
  background-color: orange;
}

#preset-tabs li {
  padding: 1px;
  margin-right: 3px;
  border: 1px solid black;
  font-size: 14px;
  float: left;
  background: none;
  list-style: none;
}

#preset-tabs li.preset-label {
  border: none;
}

#imagecrop_presettabs a {
  color: #fff;
  font-weight: bold;
}

#preset-tabs li.active {
  background-color: silver;
}

#imagecrop_info  {
  color: #fff;
  font-weight: bold;
  padding: 3px;
  height: 20px;
}

.imagecrop_error {
  background-color: red;
}

.white {
  color: #fff;
}

.imagecrop_warning {
  background-color: orange;
}

#imagecrop_help {
  padding: 3px;
  width: auto;
  background-color: silver;
  clear: both;
}

#imagecrop_help a {
  color: #fff;
  font-weight: bold;
  display: block;
}

#imageoffsets .form-button , #imageoffsets .form-submit {
  margin: 2px;
}

#imagecrop_table_actions {
  width: 250px;
  margin: 0;
}
#imagecrop_table_actions tbody {
  border: none;
}

#imagecrop_table_actions td {
  padding: 0;
}

#imagecrop-throbber div {
  padding-left:18px;
  background:url(../../../../misc/throbber.gif) no-repeat -18px -18px;
  width:18px;
}

#imagecrop-throbber.show div { background-position: 0px -18px; }

#imagecrop_table_actions .form-item,
#imagecrop_table_actions .form-submit {
  margin: 0.5em 0;
}

/* Classes and divs to create the crop area */
.imagefield-crop-wrapper { 
  background-color: #ccc;)
  position: absolute;
}

#image-crop-container {
  position: relative;
  background-color: #ccc;
  background-repeat: no-repeat;
  opacity:.2;
  filter: alpha(opacity=20);-moz-opacity: 0.2;
}


#resizeMe{
  position: absolute;
  cursor: move;
  background-position: 0 0;
  background-repeat: no-repeat;
  border: 1px dashed black;
}

.ui-resizable-handle {
  width: 8px;
  height: 8px;
  border: 1px solid #808080;
  background-color:#F2F2F2;
  position: absolute;
}

.ui-resizable-n, .ui-resizable-s {
  left: 45%;
  cursor: n-resize;
}

.ui-resizable-e, .ui-resizable-w {
  top: 45%;
  cursor: e-resize;
}

.ui-resizable-n,
.ui-resizable-ne,
.ui-resizable-nw {
  top: -5px;
}

.ui-resizable-ne,
.ui-resizable-se,
.ui-resizable-e {
  right: -5px;
}

.ui-resizable-se,
.ui-resizable-sw,
.ui-resizable-s {
  bottom: -5px;
}

.ui-resizable-nw,
.ui-resizable-w,
.ui-resizable-sw {
  left: -5px;
}

.ui-resizable-se,
.ui-resizable-nw {
  cursor: nw-resize;
}

.ui-resizable-ne,
.ui-resizable-sw {
  cursor: ne-resize;
}

#imagefield-crop-wrapper .boxwarning {
  border: 1px solid red;
}

File

imagecrop.css
View source
  1. /* add important to override folks using admin_menu */
  2. body { margin: 0 !important; padding: 0; background: none !important; }
  3. /* default colors and divs */
  4. #imagecrop_presettabs {
  5. padding: 3px;
  6. color: #fff;
  7. font-weight: bold;
  8. background-color: orange;
  9. }
  10. #preset-tabs li {
  11. padding: 1px;
  12. margin-right: 3px;
  13. border: 1px solid black;
  14. font-size: 14px;
  15. float: left;
  16. background: none;
  17. list-style: none;
  18. }
  19. #preset-tabs li.preset-label {
  20. border: none;
  21. }
  22. #imagecrop_presettabs a {
  23. color: #fff;
  24. font-weight: bold;
  25. }
  26. #preset-tabs li.active {
  27. background-color: silver;
  28. }
  29. #imagecrop_info {
  30. color: #fff;
  31. font-weight: bold;
  32. padding: 3px;
  33. height: 20px;
  34. }
  35. .imagecrop_error {
  36. background-color: red;
  37. }
  38. .white {
  39. color: #fff;
  40. }
  41. .imagecrop_warning {
  42. background-color: orange;
  43. }
  44. #imagecrop_help {
  45. padding: 3px;
  46. width: auto;
  47. background-color: silver;
  48. clear: both;
  49. }
  50. #imagecrop_help a {
  51. color: #fff;
  52. font-weight: bold;
  53. display: block;
  54. }
  55. #imageoffsets .form-button , #imageoffsets .form-submit {
  56. margin: 2px;
  57. }
  58. #imagecrop_table_actions {
  59. width: 250px;
  60. margin: 0;
  61. }
  62. #imagecrop_table_actions tbody {
  63. border: none;
  64. }
  65. #imagecrop_table_actions td {
  66. padding: 0;
  67. }
  68. #imagecrop-throbber div {
  69. padding-left:18px;
  70. background:url(../../../../misc/throbber.gif) no-repeat -18px -18px;
  71. width:18px;
  72. }
  73. #imagecrop-throbber.show div { background-position: 0px -18px; }
  74. #imagecrop_table_actions .form-item,
  75. #imagecrop_table_actions .form-submit {
  76. margin: 0.5em 0;
  77. }
  78. /* Classes and divs to create the crop area */
  79. .imagefield-crop-wrapper {
  80. background-color: #ccc;)
  81. position: absolute;
  82. }
  83. #image-crop-container {
  84. position: relative;
  85. background-color: #ccc;
  86. background-repeat: no-repeat;
  87. opacity:.2;
  88. filter: alpha(opacity=20);-moz-opacity: 0.2;
  89. }
  90. #resizeMe{
  91. position: absolute;
  92. cursor: move;
  93. background-position: 0 0;
  94. background-repeat: no-repeat;
  95. border: 1px dashed black;
  96. }
  97. .ui-resizable-handle {
  98. width: 8px;
  99. height: 8px;
  100. border: 1px solid #808080;
  101. background-color:#F2F2F2;
  102. position: absolute;
  103. }
  104. .ui-resizable-n, .ui-resizable-s {
  105. left: 45%;
  106. cursor: n-resize;
  107. }
  108. .ui-resizable-e, .ui-resizable-w {
  109. top: 45%;
  110. cursor: e-resize;
  111. }
  112. .ui-resizable-n,
  113. .ui-resizable-ne,
  114. .ui-resizable-nw {
  115. top: -5px;
  116. }
  117. .ui-resizable-ne,
  118. .ui-resizable-se,
  119. .ui-resizable-e {
  120. right: -5px;
  121. }
  122. .ui-resizable-se,
  123. .ui-resizable-sw,
  124. .ui-resizable-s {
  125. bottom: -5px;
  126. }
  127. .ui-resizable-nw,
  128. .ui-resizable-w,
  129. .ui-resizable-sw {
  130. left: -5px;
  131. }
  132. .ui-resizable-se,
  133. .ui-resizable-nw {
  134. cursor: nw-resize;
  135. }
  136. .ui-resizable-ne,
  137. .ui-resizable-sw {
  138. cursor: ne-resize;
  139. }
  140. #imagefield-crop-wrapper .boxwarning {
  141. border: 1px solid red;
  142. }