mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
263 lines
5.1 KiB
CSS
263 lines
5.1 KiB
CSS
|
|
.tools-wrapper,
|
|
.options-wrapper,
|
|
.palette-wrapper {
|
|
float: left;
|
|
}
|
|
|
|
.tool-icon {
|
|
position : relative;
|
|
cursor : pointer;
|
|
width: 46px;
|
|
height: 46px;
|
|
margin: 1px;
|
|
background-color: #3a3a3a;
|
|
background-repeat: no-repeat;
|
|
background-position: 12px 12px;
|
|
background-size: 24px 24px;
|
|
}
|
|
|
|
.tool-icon.selected {
|
|
cursor: default;
|
|
background-color: #444;
|
|
}
|
|
|
|
.tool-icon.selected:before {
|
|
content:"";
|
|
position : absolute;
|
|
height : 100%;
|
|
width : 100%;
|
|
border: 3px solid gold;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
}
|
|
|
|
.tool-icon:hover {
|
|
background-color: #444;
|
|
}
|
|
|
|
/*
|
|
* Tool icons:
|
|
*/
|
|
.tool-icon.tool-pen {
|
|
background-image: url(../img/tools/pen.png);
|
|
}
|
|
|
|
.tool-icon.tool-vertical-mirror-pen {
|
|
background-image: url(../img/tools/mirror.png);
|
|
background-position: 0px 10px;
|
|
background-size: 38px 27px;
|
|
}
|
|
|
|
.tool-icon.tool-paint-bucket {
|
|
background-image: url(../img/tools/paintbucket.png);
|
|
}
|
|
|
|
.tool-icon.tool-eraser {
|
|
background-image: url(../img/tools/eraser.png);
|
|
}
|
|
|
|
.tool-icon.tool-stroke {
|
|
background-image: url(../img/tools/stroke.png);
|
|
}
|
|
|
|
.tool-icon.tool-rectangle {
|
|
background-image: url(../img/tools/rectangle.png);
|
|
background-position: 12px 14px;
|
|
background-size: 24px 20px;
|
|
}
|
|
|
|
.tool-icon.tool-circle {
|
|
background-image: url(../img/tools/circle.png);
|
|
}
|
|
|
|
.tool-icon.tool-move {
|
|
background-image: url(../img/tools/hand.png);
|
|
background-size: 24px 24px;
|
|
}
|
|
|
|
.tool-icon.tool-rectangle-select {
|
|
background-image: url(../img/tools/rectangle_selection.png);
|
|
background-position: 12px 14px;
|
|
background-size: 24px 20px;
|
|
}
|
|
|
|
.tool-icon.tool-shape-select {
|
|
background-image: url(../img/tools/magicwand.png);
|
|
}
|
|
|
|
.tool-icon.tool-lighten {
|
|
background-image: url(../img/tools/lighten.png);
|
|
background-size: 30px 30px;
|
|
background-position: 8px 8px;
|
|
}
|
|
|
|
.tool-icon.tool-colorpicker {
|
|
background-image: url(../img/tools/eyedropper.png);
|
|
background-size: 23px 23px;
|
|
}
|
|
|
|
.tool-icon.tool-colorswap {
|
|
background-image: url(../img/tools/swap-colors.png);
|
|
background-position: 6px 6px;
|
|
background-size: 36px 36px;
|
|
}
|
|
|
|
/*
|
|
* Tool cursors:
|
|
*/
|
|
|
|
.tool-paint-bucket .drawing-canvas-container:hover,
|
|
.tool-colorswap .drawing-canvas-container:hover {
|
|
cursor: url(../img/icons/paint-bucket.png) 12 12, pointer;
|
|
}
|
|
|
|
.tool-vertical-mirror-pen .drawing-canvas-container:hover {
|
|
cursor: url(../img/icons/vertical-mirror-pen.png) 5 15, pointer;
|
|
}
|
|
|
|
.tool-pen .drawing-canvas-container:hover,
|
|
.tool-lighten .drawing-canvas-container:hover {
|
|
cursor: url(../img/icons/pen.png) 0 15, pointer;
|
|
}
|
|
|
|
.tool-eraser .drawing-canvas-container:hover {
|
|
cursor: url(../img/icons/eraser.png) 0 15, pointer;
|
|
}
|
|
|
|
.tool-stroke .drawing-canvas-container:hover {
|
|
cursor: url(../img/icons/pen.png) 0 15, pointer;
|
|
}
|
|
|
|
.tool-rectangle .drawing-canvas-container:hover {
|
|
cursor: url(../img/icons/rectangle.png) 0 15, pointer;
|
|
}
|
|
|
|
.tool-circle .drawing-canvas-container:hover {
|
|
cursor: url(../img/icons/circle.png) 2 15, pointer;
|
|
}
|
|
|
|
.tool-move .drawing-canvas-container:hover {
|
|
cursor: url(../img/icons/hand.png) 15 15, pointer;
|
|
}
|
|
|
|
.tool-rectangle-select .drawing-canvas-container:hover {
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.tool-shape-select .drawing-canvas-container:hover {
|
|
cursor: url(../img/icons/wand.png) 15 15, pointer;
|
|
}
|
|
|
|
.tool-colorpicker .drawing-canvas-container:hover {
|
|
cursor: url(../img/icons/dropper.png) 0 15, pointer;
|
|
}
|
|
|
|
.swap-colors-icon {
|
|
background-image: url(../img/tools/swap-arrow-square-small-grey.png);
|
|
position: relative;
|
|
top: 50px;
|
|
left: 6px;
|
|
height: 18px;
|
|
width: 18px;
|
|
background-size: 18px;
|
|
opacity : 0.3;
|
|
cursor : pointer;
|
|
}
|
|
|
|
.swap-colors-icon:hover {
|
|
opacity : 1;
|
|
}
|
|
|
|
.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: 25px;
|
|
margin-left:-20px;
|
|
}
|
|
|
|
.tool-color-picker input {
|
|
width: 16px;
|
|
height: 16px;
|
|
text-indent: -10000px;
|
|
border: 1px solid black;
|
|
background: white;
|
|
cursor: pointer;
|
|
position : relative;
|
|
top: 10px;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.tool-color-picker .secondary-color-picker {
|
|
top : 18px;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.palette-wrapper {
|
|
margin-top: 10px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.palette-color[data-color=TRANSPARENT] {
|
|
position: relative;
|
|
top: 10px;
|
|
left: 10px;
|
|
background-color: white;
|
|
height : 16px;
|
|
width : 16px;
|
|
border: 2px solid #000;
|
|
background-size: 16px 16px;
|
|
background-position: 0 0;
|
|
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%
|
|
);
|
|
}
|
|
|
|
.tools-tooltip-container {
|
|
text-align: left;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.tools-tooltip-shortcut {
|
|
color:gold;
|
|
}
|
|
|
|
.tools-tooltip-descriptor {
|
|
color:#999;
|
|
}
|
|
|
|
.tools-tooltip-descriptor-button {
|
|
padding:2px;
|
|
border:1px Solid #999;
|
|
font-size:0.8em;
|
|
margin-right:5px;
|
|
width:35px;
|
|
text-align:center;
|
|
border-radius:3px;
|
|
display:inline-block;
|
|
line-height: 10px;
|
|
}
|
|
|