You are here

Home » API reference » Image javascript crop 7

imagecrop.css in Image javascript crop 7 

/** Basic layout **/

body.page-imagecrop {
  background: #fff;
  height: 100%;
  color: #333;
  padding: 0 !important;
}

.page-imagecrop a {
  color: #0074BD;  
}

.page-imagecrop .content {
  margin-top: 0;
}

#imagecrop-selection {
  border: 1px solid #ccc;
  padding: 10px 0 0 12px;
}

.page-imagecrop label {
  display: inline;
  padding-right: 10px;
  color: #333;
  font-weight: bold;
}

.page-imagecrop .form-item {
  padding: 0; 
  border: none;
}

.page-imagecrop .form-item label {
	display: inline;
}

.page-imagecrop .form-item-styles label,
.page-imagecrop .form-item-scaling label {
  padding-right: 10px;
}

#imagecrop-style-selection-form {
  float: left;
}

.page-imagecrop .imagecrop-form-link {
  padding: 0 4px 4px;
  margin-left: 20px;
  float: left;
}

#imagecrop-forms,
#imagecrop-help {
  padding: 8px 12px;
}

#imagecrop-preview,
#imagecrop-crop-container {
  margin: 0 12px;
}

#imagecrop-crop-container img {
   width: auto !important;
}

#cancel-crop {
  position: absolute;
  right: 20px;
  top: 12px;
}

.page-imagecrop .messages {
  margin: 10px;
}

/** Normal Imagecrop crop UI **/
#imagecrop-ui #imagecrop-crop-settings-form,
#imagecrop-ui #imagecrop-rotation-settings-form {
  float: left;
}

#imagecrop-ui #imagecrop-rotation-settings-form,
#imagecrop-crop-settings-form {
  float: left;
  margin-right: 15px;
}

#imagecrop-scale-settings-form {
  float: left;
}

/** Advanced imagecrop UI **/
#imagecrop-left-controls {
  float: left;
  width: 215px;
  border: 1px solid #ccc;
  border-top: none;
}

#imagecrop-right {
  float: left;
}

#imagecrop-left-controls .form-text {
  width: 40px;
}

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

File

css/imagecrop.css
View source 
  1. /** Basic layout **/

  2. 

  3. body.page-imagecrop {

  4.   background: #fff;

  5.   height: 100%;

  6.   color: #333;

  7.   padding: 0 !important;

  8. }

  9. 

  10. .page-imagecrop a {

  11.   color: #0074BD;  

  12. }

  13. 

  14. .page-imagecrop .content {

  15.   margin-top: 0;

  16. }

  17. 

  18. #imagecrop-selection {

  19.   border: 1px solid #ccc;

  20.   padding: 10px 0 0 12px;

  21. }

  22. 

  23. .page-imagecrop label {

  24.   display: inline;

  25.   padding-right: 10px;

  26.   color: #333;

  27.   font-weight: bold;

  28. }

  29. 

  30. .page-imagecrop .form-item {

  31.   padding: 0; 

  32.   border: none;

  33. }

  34. 

  35. .page-imagecrop .form-item label {

  36. 	display: inline;

  37. }

  38. 

  39. .page-imagecrop .form-item-styles label,

  40. .page-imagecrop .form-item-scaling label {

  41.   padding-right: 10px;

  42. }

  43. 

  44. #imagecrop-style-selection-form {

  45.   float: left;

  46. }

  47. 

  48. .page-imagecrop .imagecrop-form-link {

  49.   padding: 0 4px 4px;

  50.   margin-left: 20px;

  51.   float: left;

  52. }

  53. 

  54. #imagecrop-forms,

  55. #imagecrop-help {

  56.   padding: 8px 12px;

  57. }

  58. 

  59. #imagecrop-preview,

  60. #imagecrop-crop-container {

  61.   margin: 0 12px;

  62. }

  63. 

  64. #imagecrop-crop-container img {

  65.    width: auto !important;

  66. }

  67. 

  68. #cancel-crop {

  69.   position: absolute;

  70.   right: 20px;

  71.   top: 12px;

  72. }

  73. 

  74. .page-imagecrop .messages {

  75.   margin: 10px;

  76. }

  77. 

  78. /** Normal Imagecrop crop UI **/

  79. #imagecrop-ui #imagecrop-crop-settings-form,

  80. #imagecrop-ui #imagecrop-rotation-settings-form {

  81.   float: left;

  82. }

  83. 

  84. #imagecrop-ui #imagecrop-rotation-settings-form,

  85. #imagecrop-crop-settings-form {

  86.   float: left;

  87.   margin-right: 15px;

  88. }

  89. 

  90. #imagecrop-scale-settings-form {

  91.   float: left;

  92. }

  93. 

  94. /** Advanced imagecrop UI **/

  95. #imagecrop-left-controls {

  96.   float: left;

  97.   width: 215px;

  98.   border: 1px solid #ccc;

  99.   border-top: none;

  100. }

  101. 

  102. #imagecrop-right {

  103.   float: left;

  104. }

  105. 

  106. #imagecrop-left-controls .form-text {

  107.   width: 40px;

  108. }

  109. 

  110. #imagecrop-crop-wrapper .boxwarning {

  111.   border: 1px solid red;

  112. }