espruino-web-ide/css/icons.css

A Terminal and Graphical code Editor for Espruino JavaScript Microcontrollers

/*
    ===================================================
    Icons
    ===================================================
 */

[class*="icon-"]
{
    display: inline-block;
    position: relative;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

[class*="icon-"]:before
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: transparent url(../img/icons.png) left top;
}

a[class*="icon-"]
{
    cursor: pointer;
}

a[class*="icon-"]:hover
{
    background-color: rgba(0,0,0,.15);
}

a.icon-connect { background-color: #f1c40f; }
a.icon-disconnect { background-color: #2ecc71; }
a.icon-connect:hover { background-color: #f39c12; }
a.icon-disconnect:hover { background-color: #27ae60; }

a.icon-alert { background-color: #f1c40f; }
a.icon-alert:hover { background-color: #f39c12; }

[class*="icon-"].lrg,
[class*="icon-"].lrg:before
{
    width: 60px;
    height: 60px;
}

[class*="icon-"].sml,
[class*="icon-"].sml:before,
.compact [class*="icon-"].lrg,
.compact [class*="icon-"].lrg:before
{
    width: 30px;
    height: 30px;
}

[class*="icon-"].lrg.icon--hasinfo
{
    width: 60px;
    height: 68px;
}
.compact [class*="icon-"].lrg.icon--hasinfo
{
    width: 30px;
    height: 48px;
}

a span.icon__info {
  color : #888;
  padding : 1px;
  font-size : 12px;
  font-weight:bold;
  position : absolute;
  left : 0px;
  bottom : 0px;
}
a span.icon__more {
  color : white;
  position : absolute;
  right : 0px;
  bottom : 0px;
  padding-left:10px;
  padding-top: 10px;/* make it easier to click*/
}
.compact a .icon__info {
  left : 50%;
  bottom : 12px;
  transform: translate(-50%,0%);
  font-weight:inherit;
  font-size : 7px;
}
.compact a span.icon__more {
  left : 50%;
  transform: translate(-50%,0%);
  font-size : 12px;
  padding-left:0px;padding-right:0px;
}

a .icon__more:hover {
  color : #2ecc71;
}

.icon--divide-right { border-right: solid 1px rgba(255,255,255,0.3); }
.icon--divide-left { border-left: solid 1px rgba(255,255,255,0.3); }
.icon--divide-bottom { border-bottom: solid 1px rgba(255,255,255,0.3); }
.icon--divide-top { border-top: solid 1px rgba(255,255,255,0.3); }
/* auto-generated by extras/make_icons.sh */
.icon-cross.lrg:before { background-position: 0 -0px }
.compact .icon-cross.lrg:before,
.icon-cross.sml:before { background-position: -60px -0px }

.icon-window.lrg:before { background-position: 0 -60px }
.compact .icon-window.lrg:before,
.icon-window.sml:before { background-position: -60px -60px }

.icon-minus.lrg:before { background-position: 0 -120px }
.compact .icon-minus.lrg:before,
.icon-minus.sml:before { background-position: -60px -120px }

.icon-plus.lrg:before { background-position: 0 -180px }
.compact .icon-plus.lrg:before,
.icon-plus.sml:before { background-position: -60px -180px }

.icon-back.lrg:before { background-position: 0 -240px }
.compact .icon-back.lrg:before,
.icon-back.sml:before { background-position: -60px -240px }

.icon-forward.lrg:before { background-position: 0 -300px }
.compact .icon-forward.lrg:before,
.icon-forward.sml:before { background-position: -60px -300px }

.icon-down.lrg:before { background-position: 0 -360px }
.compact .icon-down.lrg:before,
.icon-down.sml:before { background-position: -60px -360px }

.icon-up.lrg:before { background-position: 0 -420px }
.compact .icon-up.lrg:before,
.icon-up.sml:before { background-position: -60px -420px }

.icon-settings.lrg:before { background-position: 0 -480px }
.compact .icon-settings.lrg:before,
.icon-settings.sml:before { background-position: -60px -480px }

.icon-alert.lrg:before { background-position: 0 -540px }
.compact .icon-alert.lrg:before,
.icon-alert.sml:before { background-position: -60px -540px }

.icon-connect.lrg:before { background-position: 0 -600px }
.compact .icon-connect.lrg:before,
.icon-connect.sml:before { background-position: -60px -600px }

.icon-disconnect.lrg:before { background-position: 0 -660px }
.compact .icon-disconnect.lrg:before,
.icon-disconnect.sml:before { background-position: -60px -660px }

.icon-split-vertical.lrg:before { background-position: 0 -720px }
.compact .icon-split-vertical.lrg:before,
.icon-split-vertical.sml:before { background-position: -60px -720px }

.icon-split-horizontal.lrg:before { background-position: 0 -780px }
.compact .icon-split-horizontal.lrg:before,
.icon-split-horizontal.sml:before { background-position: -60px -780px }

.icon-folder.lrg:before { background-position: 0 -840px }
.compact .icon-folder.lrg:before,
.icon-folder.sml:before { background-position: -60px -840px }

.icon-folder-open.lrg:before { background-position: 0 -900px }
.compact .icon-folder-open.lrg:before,
.icon-folder-open.sml:before { background-position: -60px -900px }

.icon-save.lrg:before { background-position: 0 -960px }
.compact .icon-save.lrg:before,
.icon-save.sml:before { background-position: -60px -960px }

.icon-deploy.lrg:before { background-position: 0 -1020px }
.compact .icon-deploy.lrg:before,
.icon-deploy.sml:before { background-position: -60px -1020px }

.icon-code.lrg:before { background-position: 0 -1080px }
.compact .icon-code.lrg:before,
.icon-code.sml:before { background-position: -60px -1080px }

.icon-clear.lrg:before { background-position: 0 -1140px }
.compact .icon-clear.lrg:before,
.icon-clear.sml:before { background-position: -60px -1140px }

.icon-eye.lrg:before { background-position: 0 -1200px }
.compact .icon-eye.lrg:before,
.icon-eye.sml:before { background-position: -60px -1200px }

.icon-webcam.lrg:before { background-position: 0 -1260px }
.compact .icon-webcam.lrg:before,
.icon-webcam.sml:before { background-position: -60px -1260px }

.icon-block.lrg:before { background-position: 0 -1320px }
.compact .icon-block.lrg:before,
.icon-block.sml:before { background-position: -60px -1320px }

.icon-bin.lrg:before { background-position: 0 -1380px }
.compact .icon-bin.lrg:before,
.icon-bin.sml:before { background-position: -60px -1380px }

.icon-star.lrg:before { background-position: 0 -1440px }
.compact .icon-star.lrg:before,
.icon-star.sml:before { background-position: -60px -1440px }

.icon-heart.lrg:before { background-position: 0 -1500px }
.compact .icon-heart.lrg:before,
.icon-heart.sml:before { background-position: -60px -1500px }

.icon-lightning.lrg:before { background-position: 0 -1560px }
.compact .icon-lightning.lrg:before,
.icon-lightning.sml:before { background-position: -60px -1560px }

.icon-tick.lrg:before { background-position: 0 -1620px }
.compact .icon-tick.lrg:before,
.icon-tick.sml:before { background-position: -60px -1620px }

.icon-cloud.lrg:before { background-position: 0 -1680px }
.compact .icon-cloud.lrg:before,
.icon-cloud.sml:before { background-position: -60px -1680px }

.icon-usb.lrg:before { background-position: 0 -1740px }
.compact .icon-usb.lrg:before,
.icon-usb.sml:before { background-position: -60px -1740px }

.icon-help.lrg:before { background-position: 0 -1800px }
.compact .icon-help.lrg:before,
.icon-help.sml:before { background-position: -60px -1800px }

.icon-compass.lrg:before { background-position: 0 -1860px }
.compact .icon-compass.lrg:before,
.icon-compass.sml:before { background-position: -60px -1860px }

.icon-refresh.lrg:before { background-position: 0 -1920px }
.compact .icon-refresh.lrg:before,
.icon-refresh.sml:before { background-position: -60px -1920px }

.icon-snippets.lrg:before { background-position: 0 -1980px }
.compact .icon-snippets.lrg:before,
.icon-snippets.sml:before { background-position: -60px -1980px }

.icon-debug-go.lrg:before { background-position: 0 -2040px }
.compact .icon-debug-go.lrg:before,
.icon-debug-go.sml:before { background-position: -60px -2040px }

.icon-debug-stop.lrg:before { background-position: 0 -2100px }
.compact .icon-debug-stop.lrg:before,
.icon-debug-stop.sml:before { background-position: -60px -2100px }

.icon-debug-into.lrg:before { background-position: 0 -2160px }
.compact .icon-debug-into.lrg:before,
.icon-debug-into.sml:before { background-position: -60px -2160px }

.icon-debug-out.lrg:before { background-position: 0 -2220px }
.compact .icon-debug-out.lrg:before,
.icon-debug-out.sml:before { background-position: -60px -2220px }

.icon-debug-over.lrg:before { background-position: 0 -2280px }
.compact .icon-debug-over.lrg:before,
.icon-debug-over.sml:before { background-position: -60px -2280px }

.icon-book.lrg:before { background-position: 0 -2340px }
.compact .icon-book.lrg:before,
.icon-book.sml:before { background-position: -60px -2340px }

.icon-chat.lrg:before { background-position: 0 -2400px }
.compact .icon-chat.lrg:before,
.icon-chat.sml:before { background-position: -60px -2400px }

.icon-bluetooth.lrg:before { background-position: 0 -2460px }
.compact .icon-bluetooth.lrg:before,
.icon-bluetooth.sml:before { background-position: -60px -2460px }

.icon-headphone.lrg:before { background-position: 0 -2520px }
.compact .icon-headphone.lrg:before,
.icon-headphone.sml:before { background-position: -60px -2520px }

.icon-network.lrg:before { background-position: 0 -2580px }
.compact .icon-network.lrg:before,
.icon-network.sml:before { background-position: -60px -2580px }

.icon-storage.lrg:before { background-position: 0 -2640px }
.compact .icon-storage.lrg:before,
.icon-storage.sml:before { background-position: -60px -2640px }