piskel/css/tools.css

.tools-wrapper,
.options-wrapper,
.palette-wrapper {
  float: left;
}

.tool-icon {
  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;
  border: 3px solid gold;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  background-position: 9px 9px;
}

.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-vertical-mirror-pen.selected {
  background-position: -3px 7px;
}

.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-rectangle.selected,
.tool-icon.tool-rectangle-select.selected {
  background-position: 9px 11px;
}

.tool-icon.tool-shape-select {
  background-image: url(../img/tools/magicwand.png);
}

.tool-icon.tool-colorpicker {
  background-image: url(../img/tools/eyedropper.png);
  background-size: 23px 23px;
}

/*
 * Tool cursors:
 */

.tool-paint-bucket .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 {
  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: url(../img/icons/select.png) 15 15, pointer;
}

.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: 20px;
  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%
  );
}