ru-se.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

cropper.css (2949B)

      1 .imgCrop_wrap {
      2 	/* width: 500px;   @done_in_js */
      3 	/* height: 375px;  @done_in_js */
      4 	position: relative;
      5 	cursor: crosshair;
      6 }
      7 
      8 /* an extra classname is applied for Opera < 9.0 to fix its lack of opacity support */
      9 .imgCrop_wrap.opera8 .imgCrop_overlay,
     10 .imgCrop_wrap.opera8 .imgCrop_clickArea { 
     11 	background-color: transparent;
     12 }
     13 
     14 /* fix for IE displaying all boxes at line-height by default, although they are still 1 pixel high until we combine them with the pointless span */
     15 .imgCrop_wrap,
     16 .imgCrop_wrap * {
     17 	font-size: 0;
     18 }
     19 
     20 .imgCrop_overlay {
     21 	background-color: #000;
     22 	opacity: 0.5;
     23 	filter:alpha(opacity=50);
     24 	position: absolute;
     25 	width: 100%;
     26 	height: 100%;
     27 }
     28 
     29 .imgCrop_selArea {
     30 	position: absolute;
     31 	/* @done_in_js 
     32 	top: 20px;
     33 	left: 20px;
     34 	width: 200px;
     35 	height: 200px;
     36 	background: transparent url(castle.jpg) no-repeat  -210px -110px;
     37 	*/
     38 	cursor: move;
     39 	z-index: 2;
     40 }
     41 
     42 /* clickArea is all a fix for IE 5.5 & 6 to allow the user to click on the given area */
     43 .imgCrop_clickArea {
     44 	width: 100%;
     45 	height: 100%;
     46 	background-color: #FFF;
     47 	opacity: 0.01;
     48 	filter:alpha(opacity=01);
     49 }
     50 
     51 .imgCrop_marqueeHoriz {
     52 	position: absolute;
     53 	width: 100%;
     54 	height: 1px;
     55 	background: transparent url(marqueeHoriz.gif) repeat-x 0 0;
     56 	z-index: 3;
     57 }
     58 
     59 .imgCrop_marqueeVert {
     60 	position: absolute;
     61 	height: 100%;
     62 	width: 1px;
     63 	background: transparent url(marqueeVert.gif) repeat-y 0 0;
     64 	z-index: 3;
     65 }
     66 
     67 .imgCrop_marqueeNorth { top: 0; left: 0; }
     68 .imgCrop_marqueeEast  { top: 0; right: 0; }
     69 .imgCrop_marqueeSouth { bottom: 0px; left: 0; }
     70 .imgCrop_marqueeWest  { top: 0; left: 0; }
     71 
     72 
     73 .imgCrop_handle {
     74 	position: absolute;
     75 	border: 1px solid #333;
     76 	width: 6px;
     77 	height: 6px;
     78 	background: #FFF;
     79 	opacity: 0.5;
     80 	filter:alpha(opacity=50);
     81 	z-index: 4;
     82 }
     83 
     84 /* fix IE 5 box model */
     85 * html .imgCrop_handle {
     86 	width: 8px;
     87 	height: 8px;
     88 	wid\th: 6px;
     89 	hei\ght: 6px;
     90 }
     91 
     92 .imgCrop_handleN {
     93 	top: -3px;
     94 	left: 0;
     95 	/* margin-left: 49%;    @done_in_js */
     96 	cursor: n-resize;
     97 }
     98 
     99 .imgCrop_handleNE { 
    100 	top: -3px;
    101 	right: -3px;
    102 	cursor: ne-resize;
    103 }
    104 
    105 .imgCrop_handleE {
    106 	top: 0;
    107 	right: -3px;
    108 	/* margin-top: 49%;    @done_in_js */
    109 	cursor: e-resize;
    110 }
    111 
    112 .imgCrop_handleSE {
    113 	right: -3px;
    114 	bottom: -3px;
    115 	cursor: se-resize;
    116 }
    117 
    118 .imgCrop_handleS {
    119 	right: 0;
    120 	bottom: -3px;
    121 	/* margin-right: 49%; @done_in_js */
    122 	cursor: s-resize;
    123 }
    124 
    125 .imgCrop_handleSW {
    126 	left: -3px;
    127 	bottom: -3px;
    128 	cursor: sw-resize;
    129 }
    130 
    131 .imgCrop_handleW {
    132 	top: 0;
    133 	left: -3px;
    134 	/* margin-top: 49%;  @done_in_js */
    135 	cursor: e-resize;
    136 }
    137 
    138 .imgCrop_handleNW {
    139 	top: -3px;
    140 	left: -3px;
    141 	cursor: nw-resize;
    142 }
    143 
    144 /**
    145  * Create an area to click & drag around on as the default browser behaviour is to let you drag the image 
    146  */
    147 .imgCrop_dragArea {
    148 	width: 100%;
    149 	height: 100%;
    150 	z-index: 200;
    151 	position: absolute;
    152 	top: 0;
    153 	left: 0;
    154 }
    155 
    156 .imgCrop_previewWrap {
    157 	/* width: 200px;  @done_in_js */
    158 	/* height: 200px; @done_in_js */
    159 	overflow: hidden;
    160 	position: relative;
    161 }
    162 
    163 .imgCrop_previewWrap img {
    164 	position: absolute;
    165 }