<link rel="import" href="resource-display.html">

<!-- see light9/editchoice.py for gtk version -->

<dom-module id="edit-choice">

  <template>

    <style>

     #box {

         display: inline-block;

         background: #141448;

         min-width: 10em;

     }

     #box.dragging {

         background: rgba(126, 52, 245, 0.0784313725490196);

         box-shadow: 0 0 20px #ffff00;

     }

     a {

         color: #8e8eff;

         padding: 3px;

         display: inline-block;

         font-size: 145%;

     }

    </style>

    <div id="box">

      <resource-display graph="{{graph}}" uri="{{uri}}" rename></resource-display>

      <button on-click="unlink">Unlink</button>

    </div>

  </template>

  <script src="edit-choice.js"></script>

</dom-module>

    .num {

        font-size: initial;

        padding: initial;

    }

    .commands button {

        padding: 5px;

    }

}

/* subserver */

.vari {

    color: white;

}

a.resource {

    color: inherit;

    text-decoration: none;

}

.resource {

    border: 1px solid #545454;

    border-radius: 5px;

    padding: 1px;

    margin: 2px;

    background: rgb(49, 49, 49);

    text-shadow: 1px 1px 2px black;

}

.resource.minor {

    background: none;

    border: none;

}

.resource a {

    color: rgb(150, 150, 255);

    padding: 1px;

    display: inline-block;

}

.resource.minor a {

    text-decoration: none;

    color: rgb(155, 155, 193);

    padding: 0

}

.sub {

    display: inline-block;

    vertical-align: top;

}

.sub.local {

    background: rgb(44, 44, 44);

}

.sub img {

<!-- All the adjusters you can edit or select. Tells a light9-adjusters-canvas how to draw them. Probabaly doesn't need to be an element.

     This element manages their layout and suppresion.

     Owns the selection.

     Maybe includes selecting things that don't even have adjusters.

     Maybe manages the layout of other labels and text too, to avoid overlaps.

   -->

<dom-module id="light9-timeline-adjusters">

  <template>

    <style>

     :host {

         pointer-events: none; /* restored on the individual adjusters */

     }

    </style>

  </template>

</dom-module>

<!-- sometimes we draw attrs within the shape of a note. -->

<dom-module id="light9-timeline-note-inline-attrs">

  <template>

    <style>

     #top {

         position: absolute;

         overflow: hidden;

         border-radius: 6px;

         border: 1px solid #313131;

         padding: 3px;

         z-index: 2;

     }

    </style>

    <div id="top" style$="left: [[rect.left]]px; top: [[rect.top]]px; width: [[rect.width]]px; height: [[rect.height]]px; display: [[rect.display]]">

      <div>note [[noteLabel]] <button on-click="onDel">del</button></div>

      <table>

        <tr><th>effect:</th><td><edit-choice graph="{{graph}}" uri="{{effect}}"></edit-choice></td></tr>

        <tr><th>colorScale:</th><td>

          <light9-color-picker color="{{colorScale}}"></light9-color-picker>

        </td></tr>

      </table>

    </div>

  </template>

</dom-module>

<script src="/lib/sylvester/sylvester.js"></script>

<script src="/lib/d3/build/d3.min.js"></script>

<!-- version with https://github.com/RubenVerborgh/N3.js/pull/61 -->

<script src="/lib/N3.js-pull61/browser/n3-browser.js"></script>

<!-- master version -->