/* drawingboard.js v0.4.6 - https://github.com/Leimi/drawingboard.js * Copyright (c) 2015 Emmanuel Pelletier * Licensed MIT */ .drawing-board, .drawing-board * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .drawing-board-utils-hidden, .drawing-board-controls-hidden { display: none !important; } .drawing-board { position: relative; display: block; } .drawing-board-canvas-wrapper { position: relative; margin: 0; border: 1px solid #ddd; } .drawing-board-canvas { position: absolute; top: 0; left: 0; z-index: 10; width: auto; } .drawing-board-canvas { cursor: crosshair; z-index: 20; } .drawing-board-cursor { position: absolute; top: 0; left: 0; pointer-events: none; border-radius: 50%; background: #ccc; background: rgba(0, 0, 0, 0.2); z-index: 30; } .drawing-board-control > button, .drawing-board-control-colors-rainbows, .drawing-board-control-size .drawing-board-control-inner, .drawing-board-control-size-dropdown { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden; border: none; background-color: #eee; padding: 2px 4px; border: 1px solid #ccc; box-shadow: 0 1px 3px -2px #121212, inset 0 2px 5px 0 rgba(255, 255, 255, 0.3); -webkit-box-shadow: 0 1px 3px -2px #121212, inset 0 2px 5px 0 rgba(255, 255, 255, 0.3); height: 28px; } .drawing-board-control > button { cursor: pointer; min-width: 28px; line-height: 14px; } .drawing-board-control > button:hover, .drawing-board-control > button:focus { background-color: #ddd; } .drawing-board-control > button:active, .drawing-board-control > button.active { box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2); background-color: #ddd; } .drawing-board-control > button[disabled] { color: gray; } .drawing-board-control > button[disabled]:hover, .drawing-board-control > button[disabled]:focus, .drawing-board-control > button[disabled]:active, .drawing-board-control > button[disabled].active { background-color: #eee; box-shadow: 0 1px 3px -2px #121212, inset 0 2px 5px 0 rgba(255, 255, 255, 0.3); -webkit-box-shadow: 0 1px 3px -2px #121212, inset 0 2px 5px 0 rgba(255, 255, 255, 0.3); cursor: default; } /*.drawing-board-controls { margin: 0 auto; text-align: center; font-size: 0; display: table; border-spacing: 9.33333px 0; position: relative; min-height: 28px; }*/ .drawing-board-controls { margin: 0 auto; text-align: center; font-size: 0; display: table; border-spacing: 4px 0; position: relative; min-height: 28px; } .drawing-board-controls[data-align="left"] { margin: 0; left: -9.33333px; } .drawing-board-controls[data-align="right"] { margin: 0 0 0 auto; right: -9.33333px; } .drawing-board-canvas-wrapper + .drawing-board-controls, .drawing-board-controls + .drawing-board-canvas-wrapper { margin-top: 5px; } .drawing-board-controls-hidden { height: 0; min-height: 0; padding: 0; margin: 0; border: 0; } .drawing-board-control { display: table-cell; border-collapse: separate; vertical-align: middle; font-size: 16px; height: 100%; } .drawing-board-control-inner { position: relative; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .drawing-board-control > button { margin: 0; vertical-align: middle; } .drawing-board-control-colors { font-size: 0; line-height: 0; } .drawing-board-control-colors-current { border: 1px solid #ccc; cursor: pointer; display: inline-block; width: 26px; height: 26px; } /*.drawing-board-control-colors-rainbows { display: inline-block; margin-left: 5px; position: absolute; left: 0; top: 33px; margin-left: 0; z-index: 100; width: 250px; height: auto; padding: 4px; }*/ .drawing-board-control-colors-rainbows { display: inline-block; margin-left: 5px; position: absolute; left: 0; top: 33px; margin-left: 0; z-index: 100; width: 180px; height: 42px; padding: 4px; } /*.drawing-board-control-colors-rainbow { height: 18px; }*/ .drawing-board-control-colors-rainbow { height: 42px; } /*.drawing-board-control-colors-picker:first-child { margin-right: 5px; }*/ /*.drawing-board-control-colors-picker { display: inline-block; width: 18px; height: 18px; cursor: pointer; }*/ .drawing-board-control-colors-picker { display: inline-block; width: 30px; height: 30px; cursor: pointer; } /*.drawing-board-control-colors-picker[data-color="rgba(255, 255, 255, 1)"] { width: 17px; height: 16px; border: 1px solid #ccc; border-bottom: none; }*/ /*.drawing-board-control-colors-picker:hover { width: 16px; height: 16px; border: 1px solid #555; }*/ .drawing-board-control-colors-picker:hover { width: 28px; height: 28px; border: 1px solid #555; } .drawing-board-control-drawingmode > button { margin-right: 2px; } .drawing-board-control-drawingmode > button:last-child { margin-right: 0; } .drawing-board-control-drawingmode-pencil-button { overflow: hidden; *text-indent: -9999px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAK5JREFUeNpiZCADREREOAApEN7AQobmBCA1H8ZnokQzEBxgokBz4ooVKw4wUqB5AYjBSIRmkMYEbJoJGkBIMwiw4NAoAHVyAJLwAnTNWF0A1bwfiA3QNCdis4yRCM0bgJoDcXkTPRrRNV8A+RtfODEi2ayAZIgAVLMj0PYP+AyAuaAAqhEEHInVjBwL8VBb90M1GhKbQlmgqQzk/AdAvBBKEw1YoBoSscUxMQAgwACOZ0Ns854p+gAAAABJRU5ErkJggg=='); background-position: 50% 50%; background-repeat: no-repeat; } .drawing-board-control-drawingmode-pencil-button:before { content: ""; display: block; width: 0; height: 100%; } .drawing-board-control-drawingmode-eraser-button { overflow: hidden; *text-indent: -9999px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMtJREFUeNqck8ENgzAMRZN0gQwSqYwAW+TWMlHVCaC3bMEKrZQFeuuREfpTxciEACmWvowcvQ92zEkUhLX2aowR3vtPeqZKYKQOGvBcpeeyEKYYocY599w1yMBZE/knvDCRB+CZiToIh9BQJRlch0mL8mjRQi8jrCMcPqsuhX97wOA7ig1yXwrTIt2gBxWR2w2TGUwGb+jMiysmC3jaA7TRMZDfyhBnkoWnf4FAMmJXquPCrM5FJm8kgxd0ifC4NVGV6Z1msguH+AowAL10YsD/SG0CAAAAAElFTkSuQmCC'); background-position: 50% 50%; background-repeat: no-repeat; } .drawing-board-control-drawingmode-eraser-button:before { content: ""; display: block; width: 0; height: 100%; } .drawing-board-control-drawingmode-filler-button { overflow: hidden; *text-indent: -9999px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAnNJREFUeNp0k0trE1EUx89MJpNJooYYXBgDNtCKdRPwlbqoCKUtaNVNA0Uo7UbMxoVPEARTXEi+QWfnwn6DEAlEkrSLttTGRiULEQlJ8yChmbzI++E50yTUJA78uMy953/u/557LmOz2WDEZ2m1WrckSRJSqdR2tVrdHQyYebwHtVoNuFHqTqczhQnWKaBYLDoKhcIuzgHDMKBSqeD20qd+LNdsNocSoFhRr9ctpVLJigl4xIIJQizLAmG4cAPa7bYcy9Iug5TL5UYikbD6/X7Rbre/IUcYe3WUW5ZsnQQzW9LpNOPz+UQc5aBM5mgdh7vI9FCCAesW2tnr9YqZTAby+bw8f3AQRP6853n+Ph5hemSCntjj8YjZbFYWx2IxeS2RSEMwuA87O79eqdXquVolK+GxnP0EPbHb7RZJSGABIR6PA11zJHKIR2MhHA5DIPDj7eH3j95KpfK60Wg8Yntil8slkqgnpioLghacTidoNDpEC3q9HnheCc3s1jZeLcW943pirPw/4lKpBkqlDubnl/riycnLsLy88EKj0fhzuRyZv8RFo1E6wpBYkiqy7Z54YmIcVlYeyOKC4mYwJ0nHRaQuM5vNT6hB/iceG7sIq6sPnwmC4MerDkby40AOCCoiddie1Wp92W7zQ2KTyQSLizNP8T0EsPLBbxEDnCj0GkM2qIEwyZRCobizsfH5A1ZXFhuN52F29vpz3HkL574mk8lj24Y5wsHkvjjoX0BOIWc5jruHzbK2ufmzEwpFO3jnDhQv4JoROYdoERVyGjEgZ8iBDlF3FzXo4go6utZ9lftY4N/dXisjR0i1G0ublv8KMAA0ZoUlicxrhwAAAABJRU5ErkJggg=='); background-position: 50% 50%; background-repeat: no-repeat; } .drawing-board-control-drawingmode-filler-button:before { content: ""; display: block; width: 0; height: 100%; } .drawing-board-control-navigation > button { font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; margin-right: 2px; } .drawing-board-control-navigation > button:last-child { margin-right: 0; } .drawing-board-control-size[data-drawing-board-type="range"] .drawing-board-control-inner { width: 75px; } .drawing-board-control-size[data-drawing-board-type="dropdown"] .drawing-board-control-inner { overflow: visible; } .drawing-board-control-size-range-input { position: relative; width: 100%; z-index: 100; margin: 0; padding: 0; border: 0; } .drawing-board-control-size-range-current, .drawing-board-control-size-dropdown-current span, .drawing-board-control-size-dropdown span { display: block; background: #333; opacity: .8; } .drawing-board-control-size-range-current { display: inline-block; opacity: .15; position: absolute; pointer-events: none; left: 50%; top: 50%; z-index: 50; } .drawing-board-control-size-dropdown-current { display: block; height: 100%; width: 40px; overflow: hidden; position: relative; } .drawing-board-control-size-dropdown-current span { position: absolute; left: 50%; top: 50%; } /*.drawing-board-control-size-dropdown { position: absolute; left: 0px; top: 33px; height: auto; list-style-type: none; margin: 0; padding: 0; z-index: 100; width: 40px;}*/ .drawing-board-control-size-dropdown { position: absolute; left: -6px; top: 33px; height: auto; list-style-type: none; margin: 0; padding: 0; z-index: 100; width: 60px;} .drawing-board-control-size-dropdown li { display: block; padding: 4px; margin: 3px 0; min-height: 16px; } .drawing-board-control-size-dropdown li:hover { background: #ccc; } .drawing-board-control-size-dropdown span { margin: auto; display: inline-block; vertical-align: middle;} .drawing-board-control-download-button { overflow: hidden; *text-indent: -9999px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJ1JREFUeNpiYMADIiIiGkAYnxomBvygHorJNoAgGI4GAEM9AYSJFWdEU2QApM5DuYlAPB8L23DFihUX4AZA4xkUVY5AiQNAPkhhAg4XLwCqSQSqcQCy9wNxI4YXQApACnFpJioQsRiCVTPeWIBqmADCuDSDAAu+KAJqLCQUjcgGGAADh9joN0A24AOU3U9GOvrAghRYAqRqBukFCDAAdsY3kbu0QI0AAAAASUVORK5CYII='); background-position: 50% 50%; background-repeat: no-repeat; } .drawing-board-control-download-button:before { content: ""; display: block; width: 0; height: 100%; }