piskel/dev/css/icons.css

/*
Icon classes can be used entirely standalone. They are named after their original file names.

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/
.icon-common-keyboard-gold {
  background-image: url(../img/icons.png);
  background-position: 0px -230px;
  width: 36px;
  height: 21px;
}
.icon-common-swapcolors-arrow-grey {
  background-image: url(../img/icons.png);
  background-position: -230px -137px;
  width: 18px;
  height: 18px;
}
.icon-common-warning-red {
  background-image: url(../img/icons.png);
  background-position: -230px -116px;
  width: 21px;
  height: 21px;
}
.icon-frame-dragndrop-white {
  background-image: url(../img/icons.png);
  background-position: -230px -60px;
  width: 30px;
  height: 30px;
}
.icon-frame-duplicate-white {
  background-image: url(../img/icons.png);
  background-position: -230px -30px;
  width: 30px;
  height: 30px;
}
.icon-frame-plus-white {
  background-image: url(../img/icons.png);
  background-position: -230px -90px;
  width: 26px;
  height: 26px;
}
.icon-frame-recyclebin-white {
  background-image: url(../img/icons.png);
  background-position: -230px 0px;
  width: 30px;
  height: 30px;
}
.icon-minimap-popup-preview-arrow-gold {
  background-image: url(../img/icons.png);
  background-position: -230px -173px;
  width: 18px;
  height: 18px;
}
.icon-minimap-popup-preview-arrow-white {
  background-image: url(../img/icons.png);
  background-position: -230px -155px;
  width: 18px;
  height: 18px;
}
.icon-settings-export-white {
  background-image: url(../img/icons.png);
  background-position: -138px 0px;
  width: 46px;
  height: 46px;
}
.icon-settings-gear-white {
  background-image: url(../img/icons.png);
  background-position: -138px -46px;
  width: 46px;
  height: 46px;
}
.icon-settings-open-folder-white {
  background-image: url(../img/icons.png);
  background-position: -138px -92px;
  width: 46px;
  height: 46px;
}
.icon-settings-resize-white {
  background-image: url(../img/icons.png);
  background-position: 0px -138px;
  width: 46px;
  height: 46px;
}
.icon-settings-save-white {
  background-image: url(../img/icons.png);
  background-position: -46px -138px;
  width: 46px;
  height: 46px;
}
.icon-tool-circle {
  background-image: url(../img/icons.png);
  background-position: -92px -138px;
  width: 46px;
  height: 46px;
}
.icon-tool-colorpicker {
  background-image: url(../img/icons.png);
  background-position: -138px -138px;
  width: 46px;
  height: 46px;
}
.icon-tool-colorswap {
  background-image: url(../img/icons.png);
  background-position: -184px 0px;
  width: 46px;
  height: 46px;
}
.icon-tool-dithering {
  background-image: url(../img/icons.png);
  background-position: 0px 0px;
  width: 46px;
  height: 46px;
}
.icon-tool-eraser {
  background-image: url(../img/icons.png);
  background-position: -184px -92px;
  width: 46px;
  height: 46px;
}
.icon-tool-lasso-select {
  background-image: url(../img/icons.png);
  background-position: -184px -138px;
  width: 46px;
  height: 46px;
}
.icon-tool-lighten {
  background-image: url(../img/icons.png);
  background-position: 0px -184px;
  width: 46px;
  height: 46px;
}
.icon-tool-move {
  background-image: url(../img/icons.png);
  background-position: -46px -184px;
  width: 46px;
  height: 46px;
}
.icon-tool-paint-bucket {
  background-image: url(../img/icons.png);
  background-position: -92px -184px;
  width: 46px;
  height: 46px;
}
.icon-tool-pen {
  background-image: url(../img/icons.png);
  background-position: -138px -184px;
  width: 46px;
  height: 46px;
}
.icon-tool-rectangle-select {
  background-image: url(../img/icons.png);
  background-position: -184px -184px;
  width: 46px;
  height: 46px;
}
.icon-tool-rectangle {
  background-image: url(../img/icons.png);
  background-position: -184px -46px;
  width: 46px;
  height: 46px;
}
.icon-tool-shape-select {
  background-image: url(../img/icons.png);
  background-position: -92px -92px;
  width: 46px;
  height: 46px;
}
.icon-tool-stroke {
  background-image: url(../img/icons.png);
  background-position: -46px -92px;
  width: 46px;
  height: 46px;
}
.icon-tool-vertical-mirror-pen {
  background-image: url(../img/icons.png);
  background-position: 0px -92px;
  width: 46px;
  height: 46px;
}
.icon-tool-center {
  background-image: url(../img/icons.png);
  background-position: -92px -46px;
  width: 46px;
  height: 46px;
}
.icon-tool-clone {
  background-image: url(../img/icons.png);
  background-position: -92px 0px;
  width: 46px;
  height: 46px;
}
.icon-tool-crop {
  background-image: url(../img/icons.png);
  background-position: -46px -46px;
  width: 46px;
  height: 46px;
}
.icon-tool-flip {
  background-image: url(../img/icons.png);
  background-position: 0px -46px;
  width: 46px;
  height: 46px;
}
.icon-tool-rotate {
  background-image: url(../img/icons.png);
  background-position: -46px 0px;
  width: 46px;
  height: 46px;
}

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  .icon-common-keyboard-gold {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-common-swapcolors-arrow-grey {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-common-warning-red {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-frame-dragndrop-white {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-frame-duplicate-white {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-frame-plus-white {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-frame-recyclebin-white {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-minimap-popup-preview-arrow-gold {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-minimap-popup-preview-arrow-white {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-settings-export-white {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-settings-gear-white {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-settings-open-folder-white {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-settings-resize-white {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-settings-save-white {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-tool-circle {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-tool-colorpicker {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-tool-colorswap {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-tool-dithering {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-tool-eraser {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-tool-lasso-select {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-tool-lighten {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-tool-move {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-tool-paint-bucket {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-tool-pen {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-tool-rectangle-select {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-tool-rectangle {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-tool-shape-select {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-tool-stroke {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-tool-vertical-mirror-pen {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-tool-center {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-tool-clone {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-tool-crop {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-tool-flip {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
  .icon-tool-rotate {
    background-image: url(../img/icons@2x.png);
    background-size: 260px 251px;
  }
}