| overflow: hidden; | overflow: hidden; | ||||
| } | } | ||||
| .simple-padding{ | |||||
| padding-top: 4px; | |||||
| .simple-padding-left, .simple-padding-h, .simple-padding{ | |||||
| padding-left: 8px; | padding-left: 8px; | ||||
| } | |||||
| .simple-padding-right, .simple-padding-h, .simple-padding{ | |||||
| padding-right: 8px; | padding-right: 8px; | ||||
| } | } | ||||
| .simple-padding-top, .simple-padding-v, .simple-padding{ | |||||
| padding-top: 4px; | |||||
| } | |||||
| .text-align-right{ | .text-align-right{ | ||||
| text-align: right; | text-align: right; | ||||
| } | } | ||||
| .text-align-center{ | |||||
| text-align: center; | |||||
| } | |||||
| .full-height{ | .full-height{ | ||||
| height: 100%; | height: 100%; | ||||
| } | } |
| background-color: $menu-item-bg-hover; | background-color: $menu-item-bg-hover; | ||||
| color: $menu-item-text; | color: $menu-item-text; | ||||
| } | } | ||||
| .pure-form .pure-input-1-8{ | |||||
| width:12.5%; | |||||
| } | |||||
| .pure-form legend{ | |||||
| color: $color-mid; | |||||
| font-weight: bold; | |||||
| } |
| <div class="pure-g pure-g-nw"> | |||||
| <div class="pure-u-1-3 simple-padding"> | |||||
| <label for="painter_scale"> | |||||
| Scale : | |||||
| </label> | |||||
| <input id="painter_scale" class="input-u-1-6" type="number" min="0.5" max="1000" step="0.1" value ="1"/> | |||||
| <div class="pure-g pure-g-nw"> | |||||
| <div class="pure-u-1 simple-padding text-align-center"> | |||||
| <form class="pure-form"> | |||||
| <label for="painter_scale"> | |||||
| Scale : | |||||
| </label> | |||||
| <input id="painter_scale" class="pure-input-1-8" type="number" min="0.5" max="1000" step="0.1" value ="1"/> | |||||
| <button emit="painter-fit-to-canvas" class="pure-button"> | |||||
| <i class="fa fa-expand-arrows-alt"></i> | |||||
| </button> | |||||
| </div> | |||||
| <button emit="painter-fit-to-canvas" title="Fit to Window" class="pure-button"> | |||||
| <i class="fa fa-expand-arrows-alt"></i> | |||||
| </button> | |||||
| <div class="pure-u-1-3 simple-padding"> | |||||
| <button emit="painter-togglegrid" emit-args='{"show":true}' class="pure-button"> | |||||
| <i class="fa fa-th"></i> | |||||
| </button> | |||||
| <button emit="painter-colormode" emit-args='{"onePaletteMode":false}' class="pure-button"> | |||||
| <i class="fa fa-palette"></i> | |||||
| </button> | |||||
| </div> | |||||
| <div class="pure-u-1-3 simple-padding"> | |||||
| <%- include('ctrlpainter_bank.html'); %> | |||||
| </div> | |||||
| </div> | |||||
| <button emit="painter-togglegrid" title="Toggle Grid" emit-args='{"show":true}' class="pure-button"> | |||||
| <i class="fa fa-th"></i> | |||||
| </button> | |||||
| <button emit="painter-colormode" title="Toggle Color Mode" emit-args='{"onePaletteMode":false}' class="pure-button"> | |||||
| <i class="fa fa-palette"></i> | |||||
| </button> | |||||
| </form> | |||||
| </div> | |||||
| </div> | |||||
| <div class="painter-bank-controls hidden"> | |||||
| <button class="pure-button" emit="bank_remove_duplicates"><i class="fa fa-eraser"></i></button> | |||||
| <label for="mode-select"> | |||||
| Bank Size: | |||||
| <select id="mode-select" class="painter-bank-mode"> | |||||
| <option value="8K">8K</option> | |||||
| <option value="4K">4K</option> | |||||
| <option value="2K">2K</option> | |||||
| <option value="1K">1K</option> | |||||
| <option value="2T">Tile (8x16)</option> | |||||
| <option value="1T">Tile (8x8)</option> | |||||
| </select> | |||||
| </label> | |||||
| <div class="painter-bank-controls hidden"> | |||||
| <form class="pure-form"> | |||||
| <legend>Bank Tools</legend> | |||||
| <button class="pure-button" title="Remove Duplicates/Compress" emit="bank_remove_duplicates"><i class="fa fa-eraser"></i></button> | |||||
| <div class="pure-control-group simple-padding-top"> | |||||
| <label for="mode-select"> | |||||
| Bank Size: | |||||
| <select id="mode-select" class="painter-bank-mode"> | |||||
| <option value="8K">8K</option> | |||||
| <option value="4K">4K</option> | |||||
| <option value="2K">2K</option> | |||||
| <option value="1K">1K</option> | |||||
| <option value="2T">Tile (8x16)</option> | |||||
| <option value="1T">Tile (8x8)</option> | |||||
| </select> | |||||
| </label> | |||||
| </div> | |||||
| <label for="offset-select" class="painter-bank-offset hidden"> | |||||
| Offset: | |||||
| <input id="offset-select" class="input-u-1-6" type="number" min="0" max="7" step="1" value="0" /> | |||||
| </label> | |||||
| <div class="pure-control-group simple-padding-top painter-bank-offset hidden"> | |||||
| <label for="offset-select"> | |||||
| Offset: | |||||
| </label> | |||||
| <input id="offset-select" class="pure-input-1-2" type="number" min="0" max="7" step="1" value="0" /> | |||||
| </div> | |||||
| </form> | |||||
| </div> | </div> |
| <div class="pure-g pure-g-nw"> | <div class="pure-g pure-g-nw"> | ||||
| <div class="pure-u-2-24 simple-padding"> | <div class="pure-u-2-24 simple-padding"> | ||||
| <%- include('tools.html', { | |||||
| toolbtns:[ | |||||
| {emitargs:'{"id":"Welcome"}', faicon:"fa-brush"}, | |||||
| {emitargs:'{"id":"Welcome"}', faicon:"fa-eraser"}, | |||||
| {emitargs:'{"id":"Welcome"}', faicon:"fa-eye-dropper"} | |||||
| ] | |||||
| }); %> | |||||
| <%- include("ctrlpainter_bank.html"); %> | |||||
| </div> | </div> | ||||
| <div class="pure-u-16-24"> | <div class="pure-u-16-24"> | ||||
| <%- include('workspace.html'); %> | <%- include('workspace.html'); %> |
| <div class="pure-button-group" role="group" aria-label="..."> | |||||
| <% toolbtns.forEach((btn) => { %> | |||||
| <button emit="modal-open" emit-args="<%= btn.emitargs %>" class="pure-button"> | |||||
| <i class="fa <%= btn.faicon %>"></i> | |||||
| </button> | |||||
| <% }); %> | |||||
| </div> |