2012-09-05 01:48:02 +04:00
|
|
|
|
2013-06-12 16:53:47 +04:00
|
|
|
.tools-wrapper,
|
|
|
|
.options-wrapper,
|
|
|
|
.palette-wrapper {
|
2012-09-05 01:48:02 +04:00
|
|
|
float: left;
|
|
|
|
}
|
|
|
|
|
2013-06-12 16:53:47 +04:00
|
|
|
.tool-icon {
|
|
|
|
cursor : pointer;
|
|
|
|
width: 46px;
|
|
|
|
height: 46px;
|
|
|
|
margin: 1px;
|
2013-06-16 12:36:05 +04:00
|
|
|
background-color: #3a3a3a;
|
2013-06-12 16:53:47 +04:00
|
|
|
background-repeat: no-repeat;
|
2013-06-12 20:39:33 +04:00
|
|
|
background-position: 12px 12px;
|
|
|
|
background-size: 24px 24px;
|
2012-09-20 02:43:39 +04:00
|
|
|
}
|
|
|
|
|
2013-06-12 16:53:47 +04:00
|
|
|
.tool-icon.selected {
|
|
|
|
cursor: default;
|
|
|
|
background-color: #444;
|
2013-12-06 21:04:04 +04:00
|
|
|
border: 3px solid gold;
|
|
|
|
box-sizing: border-box;
|
|
|
|
-moz-box-sizing: border-box;
|
|
|
|
background-position: 9px 9px;
|
2013-04-07 23:14:37 +04:00
|
|
|
}
|
|
|
|
|
2013-06-12 16:53:47 +04:00
|
|
|
.tool-icon:hover {
|
|
|
|
background-color: #444;
|
2013-10-11 02:04:40 +04:00
|
|
|
}
|
2012-09-05 01:48:02 +04:00
|
|
|
|
2012-09-16 02:48:20 +04:00
|
|
|
/*
|
|
|
|
* Tool icons:
|
|
|
|
*/
|
2012-09-05 01:48:02 +04:00
|
|
|
.tool-icon.tool-pen {
|
2012-09-16 06:33:26 +04:00
|
|
|
background-image: url(../img/tools/pen.png);
|
2012-09-05 01:48:02 +04:00
|
|
|
}
|
|
|
|
|
2012-09-16 02:49:52 +04:00
|
|
|
.tool-icon.tool-vertical-mirror-pen {
|
2013-06-12 20:39:33 +04:00
|
|
|
background-image: url(../img/tools/mirror.png);
|
|
|
|
background-position: 0px 10px;
|
|
|
|
background-size: 38px 27px;
|
2012-09-16 02:49:52 +04:00
|
|
|
}
|
|
|
|
|
2012-09-05 01:48:02 +04:00
|
|
|
.tool-icon.tool-paint-bucket {
|
2013-06-12 16:53:47 +04:00
|
|
|
background-image: url(../img/tools/paintbucket.png);
|
2012-09-05 01:48:02 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
.tool-icon.tool-eraser {
|
2013-06-12 20:39:33 +04:00
|
|
|
background-image: url(../img/tools/eraser.png);
|
2012-09-05 01:48:02 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
.tool-icon.tool-stroke {
|
2013-06-12 20:39:33 +04:00
|
|
|
background-image: url(../img/tools/stroke.png);
|
2012-09-05 01:48:02 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
.tool-icon.tool-rectangle {
|
2013-06-12 20:39:33 +04:00
|
|
|
background-image: url(../img/tools/rectangle.png);
|
|
|
|
background-position: 12px 14px;
|
|
|
|
background-size: 24px 20px;
|
2012-09-05 01:48:02 +04:00
|
|
|
}
|
|
|
|
|
2012-09-15 00:20:00 +04:00
|
|
|
.tool-icon.tool-circle {
|
2012-09-16 06:33:26 +04:00
|
|
|
background-image: url(../img/tools/circle.png);
|
2012-09-15 00:20:00 +04:00
|
|
|
}
|
|
|
|
|
2012-09-07 03:08:25 +04:00
|
|
|
.tool-icon.tool-move {
|
2012-09-16 06:33:26 +04:00
|
|
|
background-image: url(../img/tools/hand.png);
|
2013-06-12 20:39:33 +04:00
|
|
|
background-size: 24px 24px;
|
2012-09-07 03:08:25 +04:00
|
|
|
}
|
|
|
|
|
2012-09-14 22:12:21 +04:00
|
|
|
.tool-icon.tool-rectangle-select {
|
2013-06-12 20:39:33 +04:00
|
|
|
background-image: url(../img/tools/rectangle_selection.png);
|
|
|
|
background-position: 12px 14px;
|
|
|
|
background-size: 24px 20px;
|
2012-09-14 00:57:32 +04:00
|
|
|
}
|
|
|
|
|
2013-12-06 21:04:04 +04:00
|
|
|
.tool-icon.tool-rectangle.selected, .tool-icon.tool-rectangle-select.selected {
|
|
|
|
background-position: 9px 11px;
|
|
|
|
}
|
|
|
|
|
2012-09-14 22:12:21 +04:00
|
|
|
.tool-icon.tool-shape-select {
|
2013-06-12 16:53:47 +04:00
|
|
|
background-image: url(../img/tools/magicwand.png);
|
2012-09-14 22:12:21 +04:00
|
|
|
}
|
|
|
|
|
2013-04-09 03:32:30 +04:00
|
|
|
.tool-icon.tool-colorpicker {
|
2013-06-12 16:53:47 +04:00
|
|
|
background-image: url(../img/tools/eyedropper.png);
|
2013-06-12 20:39:33 +04:00
|
|
|
background-size: 23px 23px;
|
2013-04-09 03:32:30 +04:00
|
|
|
}
|
|
|
|
|
2012-09-16 02:48:20 +04:00
|
|
|
/*
|
|
|
|
* Tool cursors:
|
|
|
|
*/
|
|
|
|
|
2012-09-05 01:48:02 +04:00
|
|
|
.tool-paint-bucket .drawing-canvas-container:hover {
|
2013-06-13 16:00:38 +04:00
|
|
|
cursor: url(../img/icons/paint-bucket.png) 12 12, pointer;
|
2012-09-05 01:48:02 +04:00
|
|
|
}
|
|
|
|
|
2012-09-16 02:49:52 +04:00
|
|
|
.tool-vertical-mirror-pen .drawing-canvas-container:hover {
|
2013-06-13 16:00:38 +04:00
|
|
|
cursor: url(../img/icons/vertical-mirror-pen.png) 5 15, pointer;
|
2012-09-16 02:49:52 +04:00
|
|
|
}
|
|
|
|
|
2012-09-05 01:48:02 +04:00
|
|
|
.tool-pen .drawing-canvas-container:hover {
|
2013-06-13 16:00:38 +04:00
|
|
|
cursor: url(../img/icons/pen.png) 0 15, pointer;
|
2012-09-05 01:48:02 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
.tool-eraser .drawing-canvas-container:hover {
|
2013-06-13 16:00:38 +04:00
|
|
|
cursor: url(../img/icons/eraser.png) 0 15, pointer;
|
2012-09-05 01:48:02 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
.tool-stroke .drawing-canvas-container:hover {
|
2013-06-13 16:00:38 +04:00
|
|
|
cursor: url(../img/icons/pen.png) 0 15, pointer;
|
2012-09-05 01:48:02 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
.tool-rectangle .drawing-canvas-container:hover {
|
2013-06-13 16:00:38 +04:00
|
|
|
cursor: url(../img/icons/rectangle.png) 0 15, pointer;
|
2012-09-05 01:48:02 +04:00
|
|
|
}
|
|
|
|
|
2012-09-15 00:20:00 +04:00
|
|
|
.tool-circle .drawing-canvas-container:hover {
|
2013-06-13 16:00:38 +04:00
|
|
|
cursor: url(../img/icons/circle.png) 2 15, pointer;
|
2012-09-15 00:20:00 +04:00
|
|
|
}
|
|
|
|
|
2012-09-07 03:14:51 +04:00
|
|
|
.tool-move .drawing-canvas-container:hover {
|
2013-06-13 16:00:38 +04:00
|
|
|
cursor: url(../img/icons/hand.png) 15 15, pointer;
|
2012-09-07 03:08:25 +04:00
|
|
|
}
|
|
|
|
|
2012-09-14 22:12:21 +04:00
|
|
|
.tool-rectangle-select .drawing-canvas-container:hover {
|
2013-06-13 16:00:38 +04:00
|
|
|
cursor: url(../img/icons/select.png) 15 15, pointer;
|
2012-09-14 00:57:32 +04:00
|
|
|
}
|
|
|
|
|
2012-09-14 22:12:21 +04:00
|
|
|
.tool-shape-select .drawing-canvas-container:hover {
|
2013-06-13 16:00:38 +04:00
|
|
|
cursor: url(../img/icons/wand.png) 15 15, pointer;
|
2012-09-14 22:12:21 +04:00
|
|
|
}
|
|
|
|
|
2013-04-09 03:32:30 +04:00
|
|
|
.tool-colorpicker .drawing-canvas-container:hover {
|
2013-06-13 16:00:38 +04:00
|
|
|
cursor: url(../img/icons/dropper.png) 0 15, pointer;
|
2012-09-07 00:37:19 +04:00
|
|
|
}
|
|
|
|
|
2014-02-20 21:26:35 +04:00
|
|
|
.tool-color-picker {
|
|
|
|
position:relative;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tool-color-picker:nth-child(1) {
|
|
|
|
z-index : 100;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tool-color-picker:nth-child(2) {
|
|
|
|
z-index : 90;
|
|
|
|
margin-top: 20px;
|
|
|
|
margin-left:-20px;
|
|
|
|
}
|
|
|
|
|
2012-09-05 01:48:02 +04:00
|
|
|
.tool-color-picker input {
|
2013-06-13 16:03:50 +04:00
|
|
|
width: 16px;
|
|
|
|
height: 16px;
|
|
|
|
text-indent: -10000px;
|
2012-09-05 01:48:02 +04:00
|
|
|
border: 1px solid black;
|
|
|
|
background: white;
|
|
|
|
cursor: pointer;
|
2012-09-07 00:37:19 +04:00
|
|
|
position : relative;
|
2013-06-13 16:03:50 +04:00
|
|
|
top: 10px;
|
|
|
|
margin-left: 2px;
|
2012-09-07 00:37:19 +04:00
|
|
|
}
|
|
|
|
|
2013-06-13 16:03:50 +04:00
|
|
|
.tool-color-picker .secondary-color-picker {
|
|
|
|
top : 18px;
|
|
|
|
margin-left: 0;
|
2012-09-05 01:48:02 +04:00
|
|
|
}
|
|
|
|
|
2013-11-28 02:43:59 +04:00
|
|
|
.palette-wrapper {
|
|
|
|
margin-top: 10px;
|
2014-02-20 21:26:35 +04:00
|
|
|
margin-left: 10px;
|
2013-11-28 02:43:59 +04:00
|
|
|
}
|
2012-09-05 01:48:02 +04:00
|
|
|
|
2013-09-22 23:02:43 +04:00
|
|
|
.palette-color[data-color=TRANSPARENT] {
|
2013-06-13 16:03:50 +04:00
|
|
|
position: relative;
|
|
|
|
top: 10px;
|
|
|
|
left: 10px;
|
2012-09-05 01:48:02 +04:00
|
|
|
background-color: white;
|
|
|
|
height : 16px;
|
|
|
|
width : 16px;
|
|
|
|
border: 2px solid #000;
|
2013-06-13 16:03:50 +04:00
|
|
|
background-size: 16px 16px;
|
|
|
|
background-position: 0 0;
|
2012-09-05 01:48:02 +04:00
|
|
|
background-image: -webkit-gradient(
|
|
|
|
linear,
|
|
|
|
left top,
|
|
|
|
right bottom,
|
|
|
|
color-stop(0, #fff),
|
|
|
|
color-stop(0.45, #fff),
|
|
|
|
color-stop(0.5, #ff0000),
|
|
|
|
color-stop(0.55, #fff),
|
|
|
|
color-stop(1, #fff)
|
|
|
|
);
|
|
|
|
background-image: -moz-linear-gradient(
|
|
|
|
left top,
|
|
|
|
#fff 0%,
|
|
|
|
#fff 45%,
|
|
|
|
#f00 50%,
|
|
|
|
#fff 55%,
|
|
|
|
#fff 100%
|
|
|
|
);
|
|
|
|
}
|
2013-06-12 16:53:47 +04:00
|
|
|
|
|
|
|
|