You are here

Home » API reference » Image javascript crop 5

imagecrop.css in Image javascript crop 5

Same filename and directory in other branches
  1. 6 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;
}
.imagecrop_tab {
  padding: 1px;
  margin-right: 3px;
  border: 1px solid black;
  font-size: 14px;
}
#imagecrop_presettabs a {
  color: #fff;
  font-weight: bold;
}
.imagecrop_highlight, .imagecrop_highlight {
  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;
}
#imagecrop_help a {
  color: #fff;
  font-weight: bold;
  display: block;
}
#imageoffsets .form-button , #imageoffsets .form-submit {
  margin: 2px;
}
#imagecrop_table_actions tbody {
  border: none;
}
#imagecrop_table_actions td {
  padding: 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;
}

#resizeSE,
#resizeE,
#resizeNE,
#resizeN,
#resizeNW,
#resizeW,
#resizeSW,
#resizeS { 
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #333;
  border: 1px solid #fff;
  overflow: hidden;
}
    #resizeSE{bottom: -10px;right: -10px;cursor: se-resize;}
    #resizeE {top: 50%;right: -10px;margin-top: -5px;cursor: e-resize;}
    #resizeNE{top: -10px;right: -10px;cursor: ne-resize;}
    #resizeN {top: -10px;left: 50%;margin-left: -5px;cursor: n-resize;}
    #resizeNW{top: -10px;left: -10px;cursor: nw-resize;}
    #resizeW {top: 50%;left: -10px;margin-top: -5px;cursor: w-resize;}
    #resizeSW{left: -10px;bottom: -10px;cursor: sw-resize;}
    #resizeS{bottom: -10px;left: 50%;margin-left: -5px;cursor: s-resize;}

File

imagecrop.css
View source 
  1. 

  2. /* add important to override folks using admin_menu */

  3. body { margin: 0 !important; padding: 0; background: none !important; }

  4. 

  5. /* default colors and divs */

  6. #imagecrop_presettabs {

  7.   padding: 3px;

  8.   color: #fff;

  9.   font-weight: bold;

  10.   background-color: orange;

  11. }

  12. .imagecrop_tab {

  13.   padding: 1px;

  14.   margin-right: 3px;

  15.   border: 1px solid black;

  16.   font-size: 14px;

  17. }

  18. #imagecrop_presettabs a {

  19.   color: #fff;

  20.   font-weight: bold;

  21. }

  22. .imagecrop_highlight, .imagecrop_highlight {

  23.   background-color: silver;

  24. }

  25. 

  26. #imagecrop_info  {

  27.   color: #fff;

  28.   font-weight: bold;

  29.   padding: 3px;

  30.   height: 20px;

  31. }

  32. .imagecrop_error {

  33.   background-color: red;

  34. }

  35. .white {

  36.   color: #fff;

  37. }

  38. .imagecrop_warning {

  39.   background-color: orange;

  40. }

  41. #imagecrop_help {

  42.   padding: 3px;

  43.   width: auto;

  44.   background-color: silver;

  45. }

  46. #imagecrop_help a {

  47.   color: #fff;

  48.   font-weight: bold;

  49.   display: block;

  50. }

  51. #imageoffsets .form-button , #imageoffsets .form-submit {

  52.   margin: 2px;

  53. }

  54. #imagecrop_table_actions tbody {

  55.   border: none;

  56. }

  57. #imagecrop_table_actions td {

  58.   padding: 0;

  59. }

  60. 

  61. /* Classes and divs to create the crop area */

  62. .imagefield-crop-wrapper { 

  63.   background-color: #ccc;)

  64.   position: absolute;

  65. }

  66. 

  67. #image-crop-container {

  68.   position: relative;

  69.   background-color: #ccc;

  70.   background-repeat: no-repeat;

  71.   opacity:.2;

  72.   filter: alpha(opacity=20);-moz-opacity: 0.2;

  73. }

  74. 

  75. 

  76. #resizeMe{

  77.   position: absolute;

  78.   cursor: move;

  79.   background-position: 0 0;

  80.   background-repeat: no-repeat;

  81.   border: 1px dashed black;

  82. }

  83. 

  84. #resizeSE,

  85. #resizeE,

  86. #resizeNE,

  87. #resizeN,

  88. #resizeNW,

  89. #resizeW,

  90. #resizeSW,

  91. #resizeS { 

  92.   position: absolute;

  93.   width: 8px;

  94.   height: 8px;

  95.   background-color: #333;

  96.   border: 1px solid #fff;

  97.   overflow: hidden;

  98. }

  99.     #resizeSE{bottom: -10px;right: -10px;cursor: se-resize;}

  100.     #resizeE {top: 50%;right: -10px;margin-top: -5px;cursor: e-resize;}

  101.     #resizeNE{top: -10px;right: -10px;cursor: ne-resize;}

  102.     #resizeN {top: -10px;left: 50%;margin-left: -5px;cursor: n-resize;}

  103.     #resizeNW{top: -10px;left: -10px;cursor: nw-resize;}

  104.     #resizeW {top: 50%;left: -10px;margin-top: -5px;cursor: w-resize;}

  105.     #resizeSW{left: -10px;bottom: -10px;cursor: sw-resize;}

  106.     #resizeS{bottom: -10px;left: 50%;margin-left: -5px;cursor: s-resize;}

  107.