piskel/css/tools.css

223 lines
4.5 KiB
CSS
Raw Normal View History

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;
background-color: #3a3a3a;
2013-06-12 16:53:47 +04:00
background-repeat: no-repeat;
background-position: 12px 12px;
background-size: 24px 24px;
}
2013-06-12 16:53:47 +04:00
.tool-icon.selected {
cursor: default;
background-color: #444;
border: 1px gold solid;
margin: 0;
2013-04-07 23:14:37 +04:00
}
2013-06-12 16:53:47 +04:00
.tool-icon:hover {
background-color: #444;
}
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
}
.tool-icon.tool-vertical-mirror-pen {
background-image: url(../img/tools/mirror.png);
background-position: 0px 10px;
background-size: 38px 27px;
}
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 {
background-image: url(../img/tools/eraser.png);
2012-09-05 01:48:02 +04:00
}
.tool-icon.tool-stroke {
background-image: url(../img/tools/stroke.png);
2012-09-05 01:48:02 +04:00
}
.tool-icon.tool-rectangle {
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);
background-position: 12px 12px;
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 {
background-image: url(../img/tools/rectangle_selection.png);
background-position: 12px 14px;
background-size: 24px 20px;
2012-09-14 00:57:32 +04:00
}
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
}
.tool-icon.tool-colorpicker {
2013-06-12 16:53:47 +04:00
background-image: url(../img/tools/eyedropper.png);
background-position: 12px 12px;
background-size: 23px 23px;
}
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 {
cursor: url(../img/icons/paint-bucket.png) 12 12, pointer;
2012-09-05 01:48:02 +04:00
}
.tool-vertical-mirror-pen .drawing-canvas-container:hover {
cursor: url(../img/icons/vertical-mirror-pen.png) 5 15, pointer;
}
2012-09-05 01:48:02 +04:00
.tool-pen .drawing-canvas-container:hover {
cursor: url(../img/icons/pen.png) 0 15, pointer;
2012-09-05 01:48:02 +04:00
}
.tool-eraser .drawing-canvas-container:hover {
cursor: url(../img/icons/eraser.png) 0 15, pointer;
2012-09-05 01:48:02 +04:00
}
.tool-stroke .drawing-canvas-container:hover {
cursor: url(../img/icons/pen.png) 0 15, pointer;
2012-09-05 01:48:02 +04:00
}
.tool-rectangle .drawing-canvas-container:hover {
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 {
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 {
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 {
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 {
cursor: url(../img/icons/wand.png) 15 15, pointer;
2012-09-14 22:12:21 +04:00
}
.tool-colorpicker .drawing-canvas-container:hover {
cursor: url(../img/icons/dropper.png) 0 15, pointer;
}
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;
position : relative;
2013-06-13 16:03:50 +04:00
top: 10px;
margin-left: 2px;
}
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
}
.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
/*
* Framesheet level actions:
*/
2013-06-14 15:17:53 +04:00
.tool-icon.gallery-icon {
background-image: url(../img/gallery.png);
background-position: 3px 3px;
background-size: 39px 39px;
}
.tool-icon.save-icon {
background-image: url(../img/save.png);
background-position: 6px 6px;
background-size: 36px 36px;
2013-06-12 16:53:47 +04:00
}
2013-06-15 20:20:25 +04:00
.tool-icon.gear-icon {
background-image: url(../img/gear.png);
background-position: 6px 7px;
background-size: 32px 32px;
}
.tool-icon.upload-cloud-icon {
background-image: url(../img/cloud_export.png);
background-position: 4px 0px;
background-size: 36px 36px;
position: relative;
2013-06-12 16:53:47 +04:00
}
.upload-cloud-icon .label {
position: absolute;
left: 0;
bottom: 4px;
right: 0;
font-size: 11px;
text-transform: uppercase;
color: #fff;
text-align: center;
2013-06-12 16:53:47 +04:00
}