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-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;
}

.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;
}

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

/*
 * Framesheet level actions:
 */

.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;
}

.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;
}

.tool-icon.import-icon {
  background-image: url(../img/import-icon.png);
  background-position: 10px 5px;
  background-size: 26px;
  position: relative;
}

.upload-cloud-icon .label {
  position: absolute;
  left: 0;
  bottom: 4px;
  right: 0;
  font-size: 11px;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
}