199 lines
3.5 KiB
CSS
199 lines
3.5 KiB
CSS
.preview {
|
|
position: relative;
|
|
display: block;
|
|
margin: auto;
|
|
}
|
|
.thumb {
|
|
border: 1px solid #ccc;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.thumb div {
|
|
position: relative;
|
|
margin: -50px;
|
|
left: -50%;
|
|
top: -50%;
|
|
zoom: 1;
|
|
}
|
|
.cropaera * {
|
|
background: none;
|
|
float: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.cropaera {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
display: inline-block;
|
|
position: relative;
|
|
user-select: none;
|
|
margin: auto;
|
|
}
|
|
.cropmask {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
width: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
.cropmask .mask_top,
|
|
.cropmask .mask_left,
|
|
.cropmask .mask_right,
|
|
.cropmask .mask_bottom {
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#66000000,endColorStr=#66000000);
|
|
background: rgba(0,0,0,.4);
|
|
overflow: hidden;
|
|
}
|
|
.cropmask .mask_top {
|
|
height: 25%;
|
|
}
|
|
.cropmask .mask_middle {
|
|
height: 50%;
|
|
}
|
|
.cropmask .mask_middle {
|
|
display: table;
|
|
width: 100%;
|
|
}
|
|
.cropmask .mask_middle .mask_left,
|
|
.cropmask .mask_middle .mask_right {
|
|
width: 25%;
|
|
}
|
|
.cropmask .mask_middle .mask_left,
|
|
.cropmask .mask_middle .mask_right,
|
|
.cropmask .mask_middle .mask_center {
|
|
display: table-cell;
|
|
}
|
|
.cropmask .mask_center {
|
|
height: 100%;
|
|
}
|
|
.cropmask .mask_bottom {
|
|
height: 100%;
|
|
clear: both;
|
|
}
|
|
.cropmask .viewport {
|
|
border: 1px dashed #ccc;
|
|
position: relative;
|
|
cursor: move;
|
|
margin: -1px;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.cropmask .resize_n,
|
|
.cropmask .resize_e,
|
|
.cropmask .resize_s,
|
|
.cropmask .resize_w {
|
|
position: absolute;
|
|
height: 5px;
|
|
width: 5px;
|
|
}
|
|
.cropmask .resize_e,
|
|
.cropmask .resize_w {
|
|
margin: 0 -3px;
|
|
height: 100%;
|
|
top: 0;
|
|
}
|
|
.cropmask .resize_n,
|
|
.cropmask .resize_s {
|
|
margin: -3px 0;
|
|
width: 100%;
|
|
left: 0;
|
|
}
|
|
.cropmask .resize_n {
|
|
cursor: n-resize;
|
|
top: 0;
|
|
}
|
|
.cropmask .resize_e {
|
|
cursor: e-resize;
|
|
right: 0;
|
|
}
|
|
.cropmask .resize_s {
|
|
cursor: s-resize;
|
|
bottom: 0;
|
|
}
|
|
.cropmask .resize_w {
|
|
cursor: w-resize;
|
|
left: 0;
|
|
}
|
|
.cropmask .point {
|
|
border: 1px solid #fff;
|
|
position: absolute;
|
|
background: #000;
|
|
overflow: hidden;
|
|
margin: -4px;
|
|
opacity: .4;
|
|
height: 7px;
|
|
width: 7px;
|
|
filter: Alpha(Opacity=40);
|
|
}
|
|
.cropmask .resize .point {
|
|
left: 50%;
|
|
top: 50%;
|
|
}
|
|
.cropmask .point_ne {
|
|
cursor: ne-resize;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
.cropmask .point_nw {
|
|
cursor: nw-resize;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
.cropmask .point_se {
|
|
cursor: se-resize;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
.cropmask .point_sw {
|
|
cursor: sw-resize;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
.cropaera .ondrag .point,
|
|
.cropaera .ondrag .resize,
|
|
.cropaera .ondrag .viewport {
|
|
cursor: inherit;
|
|
}
|
|
.cropaera .low .resize_e .point,
|
|
.cropaera .low .resize_w .point,
|
|
.cropaera .narrow .resize_n .point,
|
|
.cropaera .narrow .resize_s .point {
|
|
display: none;
|
|
}
|
|
:root .cropmask .mask_top,
|
|
:root .cropmask .mask_left,
|
|
:root .cropmask .mask_right,
|
|
:root .cropmask .mask_bottom,
|
|
:root .cropmask .viewport .point {
|
|
filter: none;
|
|
}
|
|
.cropaera {
|
|
*height: expression(firstChild.offsetHeight);
|
|
*width: expression(firstChild.offsetWidth);
|
|
*display: inline;
|
|
*zoom: 1;
|
|
}
|
|
.cropmask {
|
|
*height: expression(offsetParent.clientHeight);
|
|
*width: expression(offsetParent.clientWidth);
|
|
}
|
|
.cropmask .mask_middle {
|
|
*overflow: hidden;
|
|
}
|
|
.cropmask .mask_left {
|
|
*float: left;
|
|
_margin-right: -3px;
|
|
}
|
|
.cropmask .mask_right {
|
|
*float: right;
|
|
_margin-left: -3px;
|
|
}
|
|
.cropmask .mask_left,
|
|
.cropmask .mask_right {
|
|
*padding-bottom: 999em;
|
|
*margin-bottom: -999em;
|
|
}
|
|
.cropmask .mask_center {
|
|
*zoom: 1;
|
|
} |