You are here

jquery.Jcrop.css in Image javascript crop 7

/* jquery.Jcrop.css v0.9.10 - MIT License */

/*
  The outer-most container in a typical Jcrop instance
  If you are having difficulty with formatting related to styles
  on a parent element, place any fixes here or in a like selector

  You can also style this element if you want to add a border, etc
  A better method for styling can be seen below with .jcrop-light
  (Add a class to the holder and style elements for that extended class)
*/
.jcrop-holder {
  direction: ltr;
  text-align: left;
}

/* These styles define the border lines */
.jcrop-vline,.jcrop-hline{background:#FFF url(Jcrop.gif) top left repeat;font-size:0;position:absolute;}
.jcrop-vline{height:100%;width:1px!important;}
.jcrop-hline{height:1px!important;width:100%;}
.jcrop-vline.right{right:0;}
.jcrop-hline.bottom{bottom:0;}

/* Handle style - size is set by Jcrop handleSize option (currently) */
.jcrop-handle{background-color:#333;border:1px #eee solid;font-size:1px;}

/* This style is used for invisible click targets */
.jcrop-tracker
{
  height: 100%; 
  width: 100%;
  -webkit-tap-highlight-color: transparent; /* "turn off" link highlight */
  -webkit-touch-callout: none;              /* disable callout, image save panel */
  -webkit-user-select: none;                /* disable cut copy paste */
}

/* Positioning of handles and drag bars */
.jcrop-handle.ord-n{left:50%;margin-left:-4px;margin-top:-4px;top:0;}
.jcrop-handle.ord-s{bottom:0;left:50%;margin-bottom:-4px;margin-left:-4px;}
.jcrop-handle.ord-e{margin-right:-4px;margin-top:-4px;right:0;top:50%;}
.jcrop-handle.ord-w{left:0;margin-left:-4px;margin-top:-4px;top:50%;}
.jcrop-handle.ord-nw{left:0;margin-left:-4px;margin-top:-4px;top:0;}
.jcrop-handle.ord-ne{margin-right:-4px;margin-top:-4px;right:0;top:0;}
.jcrop-handle.ord-se{bottom:0;margin-bottom:-4px;margin-right:-4px;right:0;}
.jcrop-handle.ord-sw{bottom:0;left:0;margin-bottom:-4px;margin-left:-4px;}
.jcrop-dragbar.ord-n,.jcrop-dragbar.ord-s{height:7px;width:100%;}
.jcrop-dragbar.ord-e,.jcrop-dragbar.ord-w{height:100%;width:7px;}
.jcrop-dragbar.ord-n{margin-top:-4px;}
.jcrop-dragbar.ord-s{bottom:0;margin-bottom:-4px;}
.jcrop-dragbar.ord-e{margin-right:-4px;right:0;}
.jcrop-dragbar.ord-w{margin-left:-4px;}

/* The "jcrop-light" class/extension */
.jcrop-light .jcrop-vline,.jcrop-light .jcrop-hline
{
	background:#FFF;
	filter:Alpha(opacity=70)!important;
	opacity:.70!important;
}
.jcrop-light .jcrop-handle
{
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	background-color:#000;
	border-color:#FFF;
	border-radius:3px;
}

/* The "jcrop-dark" class/extension */
.jcrop-dark .jcrop-vline,.jcrop-dark .jcrop-hline
{
	background:#000;
	filter:Alpha(opacity=70)!important;
	opacity:.7!important;
}
.jcrop-dark .jcrop-handle
{
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	background-color:#FFF;
	border-color:#000;
	border-radius:3px;
}

/* Fix for twitter bootstrap et al. */
.jcrop-holder img,img.jcrop-preview{ max-width: none; }

File

css/jquery.Jcrop.css
View source
  1. /* jquery.Jcrop.css v0.9.10 - MIT License */
  2. /*
  3. The outer-most container in a typical Jcrop instance
  4. If you are having difficulty with formatting related to styles
  5. on a parent element, place any fixes here or in a like selector
  6. You can also style this element if you want to add a border, etc
  7. A better method for styling can be seen below with .jcrop-light
  8. (Add a class to the holder and style elements for that extended class)
  9. */
  10. .jcrop-holder {
  11. direction: ltr;
  12. text-align: left;
  13. }
  14. /* These styles define the border lines */
  15. .jcrop-vline,.jcrop-hline{background:#FFF url(Jcrop.gif) top left repeat;font-size:0;position:absolute;}
  16. .jcrop-vline{height:100%;width:1px!important;}
  17. .jcrop-hline{height:1px!important;width:100%;}
  18. .jcrop-vline.right{right:0;}
  19. .jcrop-hline.bottom{bottom:0;}
  20. /* Handle style - size is set by Jcrop handleSize option (currently) */
  21. .jcrop-handle{background-color:#333;border:1px #eee solid;font-size:1px;}
  22. /* This style is used for invisible click targets */
  23. .jcrop-tracker
  24. {
  25. height: 100%;
  26. width: 100%;
  27. -webkit-tap-highlight-color: transparent; /* "turn off" link highlight */
  28. -webkit-touch-callout: none; /* disable callout, image save panel */
  29. -webkit-user-select: none; /* disable cut copy paste */
  30. }
  31. /* Positioning of handles and drag bars */
  32. .jcrop-handle.ord-n{left:50%;margin-left:-4px;margin-top:-4px;top:0;}
  33. .jcrop-handle.ord-s{bottom:0;left:50%;margin-bottom:-4px;margin-left:-4px;}
  34. .jcrop-handle.ord-e{margin-right:-4px;margin-top:-4px;right:0;top:50%;}
  35. .jcrop-handle.ord-w{left:0;margin-left:-4px;margin-top:-4px;top:50%;}
  36. .jcrop-handle.ord-nw{left:0;margin-left:-4px;margin-top:-4px;top:0;}
  37. .jcrop-handle.ord-ne{margin-right:-4px;margin-top:-4px;right:0;top:0;}
  38. .jcrop-handle.ord-se{bottom:0;margin-bottom:-4px;margin-right:-4px;right:0;}
  39. .jcrop-handle.ord-sw{bottom:0;left:0;margin-bottom:-4px;margin-left:-4px;}
  40. .jcrop-dragbar.ord-n,.jcrop-dragbar.ord-s{height:7px;width:100%;}
  41. .jcrop-dragbar.ord-e,.jcrop-dragbar.ord-w{height:100%;width:7px;}
  42. .jcrop-dragbar.ord-n{margin-top:-4px;}
  43. .jcrop-dragbar.ord-s{bottom:0;margin-bottom:-4px;}
  44. .jcrop-dragbar.ord-e{margin-right:-4px;right:0;}
  45. .jcrop-dragbar.ord-w{margin-left:-4px;}
  46. /* The "jcrop-light" class/extension */
  47. .jcrop-light .jcrop-vline,.jcrop-light .jcrop-hline
  48. {
  49. background:#FFF;
  50. filter:Alpha(opacity=70)!important;
  51. opacity:.70!important;
  52. }
  53. .jcrop-light .jcrop-handle
  54. {
  55. -moz-border-radius:3px;
  56. -webkit-border-radius:3px;
  57. background-color:#000;
  58. border-color:#FFF;
  59. border-radius:3px;
  60. }
  61. /* The "jcrop-dark" class/extension */
  62. .jcrop-dark .jcrop-vline,.jcrop-dark .jcrop-hline
  63. {
  64. background:#000;
  65. filter:Alpha(opacity=70)!important;
  66. opacity:.7!important;
  67. }
  68. .jcrop-dark .jcrop-handle
  69. {
  70. -moz-border-radius:3px;
  71. -webkit-border-radius:3px;
  72. background-color:#FFF;
  73. border-color:#000;
  74. border-radius:3px;
  75. }
  76. /* Fix for twitter bootstrap et al. */
  77. .jcrop-holder img,img.jcrop-preview{ max-width: none; }