iframework.css

/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* no select */
canvas {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
}   

html, body {
  font-family: Verdana;
  margin:0;
  padding:0;
  width: 100%;
  height: 100%;
}

button,
.button {
  padding: 1px;
  margin: 0px 1px;
  color: #555555;
  background-color: #E6E6E6;
  border: 1px #D3D3D3 solid;
  border-radius: 3px;
  text-decoration: none;
  display: inline-block;
}
  button:hover, button:focus,
  .button:hover, .button:focus {
    color: #212121;
    background-color: #DADADA;
    border-color: #999999;
  }
  button:active, button.active,
  .button:active, .button.active {
    color: #212121;
    background-color: #ffffff;
    border-color: #AAAAAA;
  }
  button:disabled,
  .button:disabled {
    color: #555555;
    background-color: #E6E6E6;
    border-color: #D3D3D3;
    opacity: 0.35;
  }

.graph {
  background: #EEE url(img/meemoo-bg-graph.png) scroll repeat;
  background-attachment: local;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow: auto;
  border-right: 1px dotted #666;
}
  .edges {
    z-index: 1;
  }
  .nodes {
    z-index: 2;
  }
  .iframework-graph-nav {
    z-index: 3;
    position: fixed;
    top: 15px;
    left: 0px;
  }

.alpha-bg {
  background-image: url(img/alphabg.png);
}
  
div.edge-edit {
  position: absolute;
  left: 0px;
  top: 15px;
  z-index: 1000;
  padding: 10px;
  font-size: 11px;
  width: 200px;
  text-align: left;
}
  div.edge-edit h2 {
    font-size: 110%;
    margin: 0;
    padding: 0;
  }
  div.edge-edit button {
    margin-left: 5px;
    width: 25px;
    height: 25px;
  }
  div.edge-edit button.publish-port {
    margin-left: auto;
    width: auto;
    height: auto;
  }
  div.edge-edit form input,
  div.edge-edit form label,
  div.edge-edit form button {
    vertical-align: middle;
  }
  div.edge-edit form input[type='text'],
  div.edge-edit form input[type='number'] {
    width: 75%;    
  }
  div.edge-edit button.close {
    position: absolute;
    top: 5px;
    right: 5px;
  }
    div.edge-edit form button.send span.ui-button-icon-primary,
    div.edge-edit button.close span.ui-button-icon-primary {
      margin-top: -8px;
    }
  span.wiresymbol {
    position: relative;
    top: .11em;
    font-size: 250%;
    font-weight: bold;
    text-shadow: 0 1px 1px #AAA;
    padding: 0 3px;
  }

/* boxes */

div.edge-edit,
div.drag-image,
div.module,
div.ports div.portshown,
div.showpanel {
  border: 1px #AAA solid;
  background-color: rgba(255, 255, 255, 0.85);
}

div.drag-image {
  z-index: 1000;
  font-size: 11px;
  padding: 10px;  
}
  div.drag-image h2 {
    font-size: 110%;
    margin: 0;
    padding: 0;
  }
  div.drag-image canvas,
  div.drag-image img {
    max-width: 125px;
  }

div.node {
  position: absolute;
  left: 0px;
  top: 0px;
}

div.module {
  border-top-right-radius: 3px; 
  border-bottom-left-radius: 3px; 
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  z-index:2;

  cursor: default;
}
  div.module.ui-selected {
    border: 1px #333 solid;
  }
    div.module.ui-selected .outer {
      outline: 3px #999 solid;
    }
  div.module.ui-selecting {
    border: 1px #333 solid;
    background-color: #FFFFE9;
  }
  div.module h1.title {
    font-family: 'Noto Sans', Monaco, sans-serif;
    font-weight: 400;
    color: #808080;
    font-size: 14px;
    cursor: pointer;
    
    position: absolute;
    top: 0px;
    left: 5px;
    right: 25px;

    white-space: nowrap;
    overflow: hidden;
    
    margin: 0;
    padding: 5px 0;
  }
    div.module.ui-selected h1.title,
    div.module.ui-selecting h1.title {
      color: #333;
    }
  .node-box-title-name {
    vertical-align: 40%;
  }
  div.module button.showcontrols,
  div.module div.controls {
    /*/*display: none;*/
    position: absolute;
    top: 5px;
    right: 5px;
  }
    div.module button.showcontrols .ui-icon,
    div.module div.controls .ui-icon {
      font-size: 10px;
    }
  div.module div.controls {
    display: none;
    text-align: right;
  }
    div.module button.showcontrols,
    div.module div.controls button,
    div.module div.controls .button {
      width: 20px;
      height: 20px;
      font-size: 10px;
    }
  div.module .outer {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
  }
  div.module .inner {
    border: 1px #AAA solid;
    position: absolute;
    top: 30px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    overflow: auto;

    font-size: 12px;
  }
    div.module .inner.iframe-type {
      overflow: hidden;
    }
    div.module .inner.iframe-type iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
  div.nativenode {
    position: absolute;
    top:0;right:0;bottom:0;left:0;
  }
    div.nativenode.drop-hover {
      background-color: #FFFFE9;
    }

/* Droppable */
.drop-indicator {
  border: #AAA 3px dashed;
}
.inner .drop-indicator {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
  .drop-indicator p {
    display: none;
    font-size: 150%;
    background-color: white;
    text-align: center;
    margin: 20% 10%;
    padding: 10px;
    border-radius: 10px;
    color: #333;
  }
.drop-active .drop-indicator,
.drop-hover .drop-indicator {
  display: block;
}
.drop-hover .drop-indicator {
  background-color: rgba(255,255,220,0.5);
  border-color: #666;
}
  .drop-hover .drop-indicator p {
    display: block;
  }

  div.module div.iframemask {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
  }
  div.module div.ports {
    cursor: default;
    width: 99px;
  }
    div.port {
      position: relative;
      width: 99px;
      margin-top: -1px;
    }
    div.module.ui-selected div.portshown {
      border-color: #666;
    }
  div.module div.ports-in {
    position: absolute;
    left: -99px;
    top: 0;
  }
    div.port-in div.portshown-in {
      position: relative;
      right: -20px;

      border-top-left-radius: 3px; 
      border-bottom-left-radius: 3px; 
      border-right: none;
      width: 78px;
      height: 19px;
      padding: 1px 0 0 1px;
    }
      div.portshown-in .hole{
        position: absolute;
        top: -2px;
        left: 1px;
      }
      div.portshown-in .label{
        position: absolute;
        top: 3px;
        left: 18px;
      }
      div.portshown-in div.edge-edit{
        left: 2px;
        top: 15px;
      }
  div.module div.ports-out {
    position: absolute;
    right: -100px;
    bottom: -1px;
  }
    div.ports-out div.portshown-out {
      position: relative;
      text-align: right;
      border-top-right-radius: 3px; 
      border-bottom-right-radius: 3px; 
      border-left: none;
      width: 78px;
      height: 19px;
      padding: 1px 0 0 0;
      margin-top: -1px;
      margin-right: 20px;
    }
      div.portshown-out .hole{
        position: absolute;
        top: -2px;
        right: 0px;
      }
      div.portshown-out .label{
        position: absolute;
        top: 3px;
        right: 15px;
      }
      div.portshown-out div.edge-edit{
        left: 59px;
        top: 15px;
      }
  
  span.hole:before {
    font-size: 14px;
    color: #666;
  }
  div.port span.hole,
  span.holehelper {
    display: inline-block;
    width: 14px;
    height: 14px;
  }
  div.port span.fade.hole:before {
    color: #CCC;
  }
  div.port span.highlight.hole:before {
    color: #090;
  }
  div.port.drophover span.hole:before {
    color: #060;
  }
  span.plugend,
  span.plugendhelper,
  span.holehelper {
    display: block;
    width: 19px;
    height: 13px;
    background: url("img/plugs.png") no-repeat;
    position: absolute;
  }
    span.plugend-in,
    span.plugendhelper-in,
    span.holehelper-in {
      background-position: 0px 0px;
    }
    span.plugend-in {
      top: 3px;
      left: 2px;
    }
    span.plugend-out,
    span.plugendhelper-out,
    span.holehelper-out {
      background-position: 0px -13px;
    }
    span.plugend-out {
      top: 3px;
      right: 3px;
    }
    span.plugend.highlight {
      background-color: #FFE87C;
      border-color: #FFE87C;
      border-style: solid;
      border-width: 2px 0px;
      margin-top: -2px;
    }
  div.port span.label {
    font-family: 'Noto Sans', Monaco, sans-serif;
    color: #666;
    font-size: 10px;
    overflow: hidden;
    width: 58px;
    display: inline-block;
  }
    div.port-in span.label {

    }
    div.port-out span.label {
    }
  
/*  Data Types  */

.port .data {
}
  
  
div.ui-resizable-helper {
  position: absolute;
  display: inline-block;
  border: 1px black dotted;
  z-index: 9999;
}

div.ui-draggable-helper {
  position: absolute;
  display: inline-block;
  border: 1px black dotted;
  z-index: 9999;
}

div.edges {
  position:absolute;
  top:0;
  left:0;
  z-index:1;
}
  div.edges svg {
    position:absolute;
    top:0;
    left:0;
    z-index:0;
  }
    path.wire,
    path.wire-shadow {
      fill: none;
      stroke-linecap: square;
      stroke-width: 9;
    }
    path.wire-shadow {
      stroke: #AAA;
    }

    path.wire-shadow.highlight {
      stroke-width: 13;
      stroke: #FFE87C;
    }

#edgesSvg {
  position:absolute;
  top:0;
  left:0;
  z-index:0;
}
  
div.showpanel {
  position: fixed;
  z-index: 1000;
  top: 0px;
  right: 16px;
  font-size: 10px;
  text-align: right;
  border-width: 0 1px 1px 1px;

  padding: 5px;
}
div.panel {
  top: 0;
  bottom: 0;
  right: 0;
  width: 350px;
  overflow: auto;

  font-size: 10px;

  position: fixed;
  display: none;
}
  div.choosepanel {
    text-align: right;
    padding: 5px;
    white-space: nowrap;
  }

  div.panel .menu {
    padding: 5px 10px;
  }

  .menu-source .sourceedit {
    background-color: white;

    position: absolute;
    top: 40px;
    right: 15px;
    left: 10px;
    bottom: 50px;

  }

  .menu-source textarea {
    background-color: white;
    width: 100%;
    height: 100%;
/*    white-space: pre;
    overflow: auto;
*/    font-size: 11px;
    font-family: Monaco, monospace;
  }

    .menu-source .controls {
      position: absolute;
      bottom: 10px;
    }

  .menu-library {
    text-align: left;
  }
    .panel .listing {
      position: absolute;
      top: 75px;
      right: 5px;
      left: 5px;
      bottom: 5px;
      padding: 5px;
      overflow: auto;
      border: 1px #D3D3D3 solid;
    }
      .menu-images .listing {
        top: 40px;
      }
    .panel form {
      margin-bottom: 10px;
    }

    .panel form input {
      width: 255px;
      height: 25px;
    }

    .panel form button {
      float: right;
    }

    ul.ui-autocomplete {
      font-size: 10px;
    }
    ul.ui-autocomplete li .autocomplete-title {
      font-size: 14px;
    }

.menu-load .editable {
  margin: 0 0 5px 0;
}
.editable {
  border: 1px solid transparent;
  border-width: 1px 0px;
}
.editable:hover {
  border-style: dotted;
  border-color: #AAA;
  background-color: #FFFFD3;
}
.menu-load .deletelocal {
  float: right;
  margin-right: 5px;
}

.menu-load .permalink {
  margin-top: 10px;
  line-height: 18px;
}
  .menu-load .permalink .share {
    color: #999;
    opacity: 0.5;
    text-decoration: none;
  }
  .menu-load .permalink:hover .share {
    opacity: 1;
  }
  .menu-load .permalink:hover .share:hover {
    color: #666;
  }

.menu-load .newblank {
  float: right;
  margin: 10px 5px 10px 10px;
}

.addnode-drag-helper {
  width: 100px; 
  height: 100px; 
  z-index:1000; 
  background-color:rgba(0,0,0,0.1);
  border: 1px solid rgba(0,0,0,0.2);
  font-size: 10px;
}








/* Library menu */

.library-module {
  float: left;
  margin-bottom: 10px;
  width: 70px;
  text-align: center;
  overflow: hidden;
}

.menu-library h2,
.menu-library p {
  margin: 0;
  padding: 0;
}
.menu-library h2 {
  font-weight: normal;
  font-size: 11px;
  line-height: 13px;
}
.menu-library .addnode {
}

.module-icon {
  background-image: url("img/library-icons-by-soulfulsock.png");
  background-position: -50px -1700px;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  overflow: hidden;
}

.module-icon-small {
  display: inline-block;
  margin: -2px -23px -25px 0;
/*  position: absolute;
  top: 1px;
  left: 0;
*/  transform-origin: top left;
  -moz-transform-origin: top left;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  -o-transform-origin: top left;
  transform: scale(0.5);
  -moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
}

/* image */
.module-icon-image-cam       { background-position: 0      0; }
.module-icon-image-paint     { background-position: -50px  0; }
.module-icon-image-transform { background-position: -100px 0; }
.module-icon-image-fit       { background-position: -150px 0; }
.module-icon-image-crop      { background-position: 0      -50px; }
.module-icon-image-rectangle { background-position: -50px  -50px; }
.module-icon-image-circle    { background-position: -100px -50px; }
.module-icon-image-triangle  { background-position: -150px -50px; }
.module-icon-image-text      { background-position: 0      -100px; }
.module-icon-video-player    { background-position: -50px  -100px; }
.module-icon-image-in        { background-position: -100px -100px; }
.module-icon-image-layers    { background-position: -150px -100px; }
.module-icon-image-mapper    { background-position: 0      -150px; }
.module-icon-variable-animation { background-position: -50px -150px; }
/* effects */
.module-icon-image-chromakey { background-position: 0      -350px; }
.module-icon-image-lumakey   { background-position: -50px  -350px; }
.module-icon-image-grid      { background-position: -100px -350px; }
.module-icon-image-interlace { background-position: -150px -350px; }
.module-icon-image-slitscan  { background-position: 0      -400px; }
.module-icon-image-tile      { background-position: -50px  -400px; }
.module-icon-image-particles { background-position: -100px -400px; }
.module-icon-image-trails    { background-position: -150px -400px; }
.module-icon-image-monochrome { background-position: 0     -450px; }
.module-icon-image-ascii     { background-position: -50px  -450px; }
/* util */
.module-icon-util-stats      { background-position: 0      -650px; }
.module-icon-image-palette   { background-position: -50px  -650px; }
.module-icon-util-color-hsla { background-position: -100px -650px; }
.module-icon-util-math       { background-position: -150px -650px; }
.module-icon-util-logic      { background-position: 0      -700px; }
.module-icon-file-webm       { background-position: -50px  -700px; }
/* subgraph */
.module-icon-subgraph-subgraph { background-position: -100px -700px; }
.module-icon-subgraph-input  { background-position: -150px -700px; }
.module-icon-subgraph-output { background-position: 0      -750px; }
/* flow */
.module-icon-util-gate       { background-position: 0      -950px; }
.module-icon-time-throttle   { background-position: -50px  -950px; }
.module-icon-time-delay      { background-position: -100px -950px; }
.module-icon-util-count      { background-position: -150px -950px; }
/* time */
.module-icon-time-tween      { background-position: 0      -1150px; }
.module-icon-time-countdown  { background-position: -50px  -1150px; }
.module-icon-time-metronome  { background-position: -100px -1150px; }
/* ui */
.module-icon-ui-button       { background-position: 0      -1350px; }
.module-icon-ui-hslider      { background-position: -50px  -1350px; }
.module-icon-ui-vslider      { background-position: -100px -1350px; }
.module-icon-ui-number       { background-position: -150px -1350px; }
.module-icon-ui-text         { background-position: 0      -1400px; }
.module-icon-ui-textarea     { background-position: -50px  -1400px; }
.module-icon-ui-checkbox     { background-position: -100px -1400px; }
.module-icon-ui-xy           { background-position: -150px -1400px; }
.module-icon-ui-mouse        { background-position: 0      -1450px; }
.module-icon-ui-motion       { background-position: -50px  -1450px; }
.module-icon-ui-leap         { background-position: -100px -1450px; }
.module-icon-ui-facetracker  { background-position: -150px -1450px; }
.module-icon-ui-makeymakey   { background-position: 0      -1500px; }
/*.module-icon-ui-smartphone   { background-position: -50px -1500px; }*/









/* jQuery UI overrides */

.ui-draggable {
  cursor: pointer;
}

.ui-resizable-e {
  height: auto;
  bottom: 15px;
}
.ui-resizable-s {
  width: auto;
  right: 15px;
}
.ui-resizable-se {
  bottom: -5px;
  cursor: se-resize;
  height: 18px;
  right: -5px;
  width: 18px;
}
.ui-accordion .ui-accordion-content {
  padding: 10px 5px 5px 5px;
}

.ui-button [class^="icon-"],
.ui-button [class*=" icon-"] {
  /* to override jqueryui icons for font icons */
  background: none !important;
  background-image: none !important;
  text-indent: 0 !important;
  /*padding: .2em 0 0 .2em !important;*/
}





/* Color picker */

.sp-input-container {
  width: 150px;
}
.sp-initial {
  width: 150px;
}
.sp-initial span {
  width: 74px;
}


/* Plugins */

.meemoo-plugin-images-thumbnail {
  display: inline-block;
  vertical-align: bottom;
  padding: 0px;
  margin: 0 3px 0 0;
  min-width: 75px;
  min-height: 75px;
  /*border: 1px solid #D3D3D3;*/
}

.meemoo-plugin-images-thumbnail img,
.meemoo-plugin-images-thumbnail canvas {
  max-width: 100px;
  max-height: 100px;
}

.meemoo-plugin-images .image-drop {
}

.meemoo-plugin-images .image-drop .drop-indicator {
  display: none;
  width: 100%;
  height: 100px;
}

  .meemoo-plugin-images .image-drop .drop-indicator p {
    display: block;
    margin-top: 10px;
  }

.meemoo-plugin-images .image-drop.drop-active .drop-indicator {
  display: block;
}

.meemoo-plugin-images-thumbnail .controls {
  position: relative;
  top: -10px;
  text-align: center;
  opacity: 0.75;
}

  .meemoo-plugin-images .meemoo-plugin-images-thumbnail:hover .controls {
    opacity: 1.0;
  }

  .meemoo-plugin-images-thumbnail .controls button {
    font-size: 95%;
    padding:1px;
  }

.meemoo-plugin-images .thumbnails {
  padding-top: 5px;
}





/* image/layers */

.list-item {
  border-width: 1px;
  border-bottom: 1px #AAA dotted; 
  background-color:rgba(255,255,255,0.5); 
  padding-top: 5px;
}
.list-item.selected {
  border-style: dotted;
  border-color: #AAA;
  background-color: #FFFFD3;
}
  .list-item-visible {
    background-image: url(img/alphabg.png);
  }
  .list-item-preview {
    background-image: url(img/alphabg.png);
    vertical-align: middle;
  }
  .list-item-delete {
    padding: 1px 0;
    font-size: 80%;
  }
  .list-item-info {
    color: red;
  }

  .list-item-controls,
  .list-item-delete {
    display: none;
  }
  .list-item.selected .list-item-controls,
  .list-item.selected .list-item-delete {
    display: inline;
  }

.layers .control-point { 
  position: absolute; 
  background-color: white; 
  border: 1px red solid; 
  border-radius: 15px; 
  padding: 10px; 
  margin: -15px 0 0 -15px; 
  opacity: 0.25; 
}
.layers .control-point:hover, 
.layers .control-point.selected { 
  opacity: 0.5; 
}
.control-point.tl:before { content: "⌜" }
.control-point.tr:before { content: "⌝" }
.control-point.bl:before { content: "⌞" }
.control-point.br:before { content: "⌟" }




/*
  icons thanks to http://fontello.com/ and the included icon sets 
  http://meemoo.org/iframework/icons/LICENSE.txt
*/


@charset "UTF-8";

@font-face {
  font-family: 'meemoo-icons';
  src: url("icons/font/meemoo-icons.eot");
  src: url("icons/font/meemoo-icons.eot#iefix") format('embedded-opentype'), url("icons/font/meemoo-icons.woff") format('woff'), url("icons/font/meemoo-icons.ttf") format('truetype'), url("icons/font/meemoo-icons.svg#meemoo-icons") format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: 'meemoo-icons';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  padding: 2px;
  opacity: 0.7;
  /* fix buttons height */
  line-height: 1em;
  font-size: 140%; 
}
[class^="no-label icon-"]:before,
[class*=" no-label icon-"]:before {
  width: auto;
  padding: 2px;
  margin: 0;
}

.icon-plus:before { content: '\2b'; } /* '+' */
.icon-split:before { content: '\2387'; } /* '⎇' */
.icon-cog:before { content: '\2699'; } /* '⚙' */
.icon-scissors:before { content: '\2702'; } /* '✂' */
.icon-ok:before { content: '\2713'; } /* '✓' */
.icon-cancel:before { content: '\2715'; } /* '✕' */
.icon-cw:before { content: '\27f3'; } /* '⟳' */
.icon-export:before { content: '\e715'; } /* '' */
.icon-trash:before { content: '\e729'; } /* '' */
.icon-doc:before { content: '\e730'; } /* '' */
.icon-login:before { content: '\e740'; } /* '' */
.icon-logout:before { content: '\e741'; } /* '' */
.icon-popup:before { content: '\e74c'; } /* '' */
.icon-window:before { content: '\e74e'; } /* '' */
.icon-down-open:before { content: '\e75c'; } /* '' */
.icon-left-open:before { content: '\e75d'; } /* '' */
.icon-right-open:before { content: '\e75e'; } /* '' */
.icon-up-open:before { content: '\e75f'; } /* '' */
.icon-install:before { content: '\e778'; } /* '' */
.icon-bag:before { content: '\e78a'; } /* '' */
.icon-facebook-rect:before { content: '\f301'; } /* '' */
.icon-twitter-bird:before { content: '\f303'; } /* '' */
.icon-github:before { content: '\f308'; } /* '' */
.icon-tumblr:before { content: '\f311'; } /* '' */
.icon-picture:before { content: '🌄'; } /* '\1f304' */
.icon-globe-1:before { content: '🌍'; } /* '\1f30d' */
.icon-folder-open:before { content: '📂'; } /* '\1f4c2' */
.icon-camera:before { content: '📷'; } /* '\1f4f7' */
.icon-link:before { content: '🔗'; } /* '\1f517' */





footer {
  position: fixed;
  background-color: rgba(255,255,255,.75);
  padding: 0 5px 2px 2px;
  top: 0px;
  left: 0px;
  font-family: Monaco, monospace;
  font-size: 10px;
  z-index: 1000;
}