/*! * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ /* * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ /* * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ .imglykit { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); position: absolute; width: 100%; height: 100%; background: #1E1E1E; overflow: hidden; text-align: left; } .imglykit div, .imglykit span, .imglykit applet, .imglykit object, .imglykit iframe, .imglykit h1, .imglykit h2, .imglykit h3, .imglykit h4, .imglykit h5, .imglykit h6, .imglykit p, .imglykit blockquote, .imglykit pre, .imglykit a, .imglykit abbr, .imglykit acronym, .imglykit address, .imglykit big, .imglykit cite, .imglykit code, .imglykit del, .imglykit dfn, .imglykit em, .imglykit img, .imglykit ins, .imglykit kbd, .imglykit q, .imglykit s, .imglykit samp, .imglykit small, .imglykit strike, .imglykit strong, .imglykit sub, .imglykit sup, .imglykit tt, .imglykit var, .imglykit b, .imglykit u, .imglykit i, .imglykit center, .imglykit dl, .imglykit dt, .imglykit dd, .imglykit ol, .imglykit ul, .imglykit li, .imglykit fieldset, .imglykit form, .imglykit label, .imglykit legend, .imglykit table, .imglykit caption, .imglykit tbody, .imglykit tfoot, .imglykit thead, .imglykit tr, .imglykit th, .imglykit td, .imglykit article, .imglykit aside, .imglykit canvas, .imglykit details, .imglykit embed, .imglykit figure, .imglykit figcaption, .imglykit footer, .imglykit header, .imglykit hgroup, .imglykit menu, .imglykit nav, .imglykit output, .imglykit ruby, .imglykit section, .imglykit summary, .imglykit time, .imglykit mark, .imglykit audio, .imglykit video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } .imglykit table { border-collapse: collapse; border-spacing: 0; } .imglykit caption, .imglykit th, .imglykit td { text-align: left; font-weight: normal; vertical-align: middle; } .imglykit q, .imglykit blockquote { quotes: none; } .imglykit q:before, .imglykit q:after, .imglykit blockquote:before, .imglykit blockquote:after { content: ""; content: none; } .imglykit a img { border: none; } .imglykit * { box-sizing: border-box; } .imglykit-float-left { float: left; } .imglykit-float-right { float: right; } .imglykit-container { position: absolute; top: 0; left: 0; display: table; width: 100%; height: 100%; table-layout: fixed; } /* * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ .imglykit-container .imglykit-canvas-container-row { display: table-row; } .imglykit-container .imglykit-canvas-container { position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; display: table-cell; overflow: hidden; } .imglykit-container .imglykit-canvas-inner-container { position: relative; } .imglykit-container .imglykit-canvas-inner-container canvas { cursor: move; } .imglykit-container .imglykit-canvas-inner-container .imglykit-canvas-controls { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .imglykit-container .imglykit-canvas-inner-container .imglykit-canvas-controls.imglykit-canvas-controls-disabled { display: none; } .imglykit-webcam-video { width: 100px; height: 100px; } .imglykit-webcam-button { -webkit-border-radius: 26.5px; -moz-border-radius: 26.5px; -ms-border-radius: 26.5px; -o-border-radius: 26.5px; border-radius: 26.5px; margin: 15px auto 0 !important; width: 110px; height: 53px; padding-top: 7px !important; background: #43ADEB; cursor: pointer; } .imglykit-webcam-button img { margin: auto; width: 39px !important; height: 39px !important; } /* * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ .imglykit-container .imglykit-splash-container { display: table; width: 100%; height: 100%; padding: 30px; table-layout: fixed; } .imglykit-container .imglykit-splash-container.imglykit-header-padding { padding-top: 100px; } .imglykit-container .imglykit-splash-container .imglykit-splash-cell { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; display: table-cell; } .imglykit-container .imglykit-splash-container .imglykit-splash-button { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; display: inline-block; margin-bottom: 10px; padding: 0 15px; background: #43ADEB; font-family: Helvetica, Arial, sans-serif; font-size: 18px; line-height: 38px; font-weight: bold; color: white; } .imglykit-container .imglykit-splash-container .imglykit-splash-or { display: table; table-layout: fixed; width: 100%; height: 30px; } .imglykit-container .imglykit-splash-container .imglykit-splash-or-line { position: relative; display: table-cell; } .imglykit-container .imglykit-splash-container .imglykit-splash-or-line:before { position: absolute; top: 50%; left: 0; display: block; border-top: 1px solid rgba(255, 255, 255, 0.2); width: 100%; height: 1px; content: ''; } .imglykit-container .imglykit-splash-container .imglykit-splash-or-word { display: table-cell; vertical-align: middle; width: 30px; font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: rgba(255, 255, 255, 0.2); } .imglykit-container .imglykit-splash-container .imglykit-splash-row, .imglykit-container .imglykit-splash-container .imglykit-splash-cell { width: 100%; text-align: center; vertical-align: middle; } .imglykit-container .imglykit-splash-container .imglykit-splash-row .imglykit-splash-cell, .imglykit-container .imglykit-splash-container .imglykit-splash-cell .imglykit-splash-cell { padding: 10px; } .imglykit-container .imglykit-splash-container .imglykit-splash-row { display: table-row; cursor: pointer; } .imglykit-container .imglykit-splash-container .imglykit-splash-row--upload, .imglykit-container .imglykit-splash-container .imglykit-splash-row--camera { height: 45%; } .imglykit-container .imglykit-splash-container .imglykit-splash-row .imglykit-splash-content { margin: auto; margin-top: 10px; width: 250px; font-family: Helvetica, Arial, Verdana; } .imglykit-container .imglykit-splash-container .imglykit-splash-row .imglykit-splash-content h1 { margin-bottom: 5px; font-size: 20px; font-weight: bold; color: white; } .imglykit-container .imglykit-splash-container .imglykit-splash-row .imglykit-splash-content .imglykit-splash-text { font-size: 14px; color: rgba(255, 255, 255, 0.2); } .imglykit-container .imglykit-splash-container .imglykit-splash-row .imglykit-upload-hidden-input { position: absolute; top: 0; left: 0; visibility: hidden; width: 0; height: 0; } /* * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ .imglykit-container .imglykit-header-row { display: table-row; height: 30px; } .imglykit-container .imglykit-header { display: table-cell; background: #1A1A1A; text-align: center; color: white; display: none; font: bold 11px Helvetica, Arial, sans-serif; line-height: 30px; position: absolute; top: 0; left: 0; width: 100%; height: 30px; z-index: 2; } .imglykit-container .imglykit-header .imglykit-close-button { position: absolute; top: 0; right: 0; cursor: pointer; margin-right: 10px; } .imglykit-container .imglykit-header .imglykit-close-button img { vertical-align: middle; } /* * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ .imglykit-container .imglykit-top-controls-row { display: table-row; } .imglykit-container .imglykit-top-controls { -webkit-user-select: none; -moz-user-select: none; user-select: none; display: table-cell; width: 100%; height: 40px; color: white; font-family: Helvetica, Arial, sans-serif; font-size: 16px; padding: 0 20px; z-index: 2; background: #2B2B2B; } .imglykit-container .imglykit-top-controls > * * { display: inline-block; } .imglykit-container .imglykit-top-controls, .imglykit-container .imglykit-top-controls * { line-height: 30px; } .imglykit-container .imglykit-top-controls.imglykit-header-padding { top: 30px; } .imglykit-container .imglykit-top-controls-left, .imglykit-container .imglykit-top-controls-right { padding-top: 5px; } .imglykit-container .imglykit-top-controls-left { float: left; } .imglykit-container .imglykit-top-controls-right { float: right; display: none; } .imglykit-container .imglykit-top-controls-right .imglykit-zoom-in, .imglykit-container .imglykit-top-controls-right .imglykit-zoom-out { padding: 0 15px; cursor: pointer; border-left: 1px solid #363636; } .imglykit-container .imglykit-top-controls-right .imglykit-zoom-in img, .imglykit-container .imglykit-top-controls-right .imglykit-zoom-out img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; vertical-align: middle; } .imglykit-container .imglykit-top-controls-right .imglykit-zoom-in:hover img, .imglykit-container .imglykit-top-controls-right .imglykit-zoom-out:hover img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .imglykit-container .imglykit-top-controls-right .imglykit-zoom-out { padding-right: 0; } .imglykit-container .imglykit-top-controls-right .imglykit-zoom-level { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; padding: 0 10px; } .imglykit-container .imglykit-undo { cursor: pointer; border-right: 1px solid #363636; color: rgba(255, 255, 255, 0.4); padding: 0 10px; display: none; } .imglykit-container .imglykit-undo img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; margin-right: 5px; vertical-align: middle; } .imglykit-container .imglykit-export { cursor: pointer; border-right: 1px solid #363636; color: rgba(255, 255, 255, 0.4); padding: 0 10px; display: none; } .imglykit-container .imglykit-export img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; margin-right: 5px; vertical-align: middle; } .imglykit-container .imglykit-new { cursor: pointer; border-right: 1px solid #363636; color: rgba(255, 255, 255, 0.4); padding-right: 10px; } .imglykit-container .imglykit-new img { margin-right: 5px; vertical-align: middle; } /* * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ /* * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ .imglykit-container .imglykit-knob { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; position: absolute; background: white; width: 20px; height: 20px; border: 2px solid rgba(0, 0, 0, 0.3); cursor: pointer; } /* * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ .imglykit-container .imglykit-crosshair { width: 34px; height: 34px; cursor: pointer; float: left; } /* * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ .imglykit-container .imglykit-transparent-knob { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); -moz-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); position: absolute; width: 20px; height: 20px; border: 2px solid rgba(0, 0, 0, 0.5); margin-top: -10px; margin-left: -10px; cursor: pointer; } /* * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ .imglykit .imglykit-loadingOverlay { position: absolute; z-index: 3; top: 0; left: 0; display: none; width: 100%; height: 100%; background: rgba(30, 30, 30, 0.9); } .imglykit .imglykit-loadingOverlay-content { position: absolute; top: 50%; left: 50%; margin-top: -40px; margin-left: -75px; border-radius: 5px; width: 150px; height: 70px; padding: 10px; background: #1E1E1E; } .imglykit .imglykit-loadingOverlay-content img { display: block; margin: auto; margin-bottom: 10px; } .imglykit .imglykit-loadingOverlay-content span { display: block; font: bold 11px Helvetica, Arial, sans-serif; text-align: center; color: white; } /* * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ .imglykit-container .imglykit-controls-row { display: table-row; } .imglykit-container .imglykit-controls-container { -webkit-user-select: none; -moz-user-select: none; user-select: none; display: table-cell; width: 100%; height: 80px; background: #2B2B2B; } .imglykit-container .imglykit-controls { width: 100%; text-align: center; height: 80px; } .imglykit-container .imglykit-controls > div:not(.imglykit-scrollbar-background) > * { width: 100%; display: table; table-layout: fixed; } .imglykit-container .imglykit-controls > div:not(.imglykit-scrollbar-background) > * > * { display: table-cell; vertical-align: top; } .imglykit-container .imglykit-controls .imglykit-controls-list-container { overflow: hidden; height: 80px; } .imglykit-container .imglykit-controls .imglykit-controls-list { position: absolute; width: 100%; overflow: hidden; overflow-x: auto; text-align: center; white-space: nowrap; height: 80px; font-size: 0; } .imglykit-container .imglykit-controls li { -webkit-transition: background-color 0.2s ease-out; -moz-transition: background-color 0.2s ease-out false; -o-transition: background-color 0.2s ease-out false; transition: background-color 0.2s ease-out; display: inline-block; position: relative; width: 80px; height: 80px; cursor: pointer; line-height: 80px; border-left: 1px solid #363636; } .imglykit-container .imglykit-controls li:last-child { border-right: 1px solid #363636; } .imglykit-container .imglykit-controls li.imglykit-controls-item--with-label:hover img { margin-bottom: 20px; } .imglykit-container .imglykit-controls li img { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out false; -o-transition: all 0.2s ease-out false; transition: all 0.2s ease-out; width: 40px; vertical-align: middle; } .imglykit-container .imglykit-controls li.imglykit-controls-item-active { background: rgba(0, 0, 0, 0.3); } .imglykit-container .imglykit-controls li .imglykit-controls-label { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out false; -o-transition: all 0.2s ease-out false; transition: all 0.2s ease-out; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; position: absolute; bottom: -20px; width: 100%; color: white; font: bold 10px Helvetica, Arial, sans-serif; text-align: center; } .imglykit-container .imglykit-controls li:hover .imglykit-controls-label { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; bottom: 13px; } .imglykit-container .imglykit-controls .imglykit-controls-item-label { color: white; font-size: 10px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; margin-top: 10px; } .imglykit-container .imglykit-controls .imglykit-controls-icon { width: 80px; height: 80px; line-height: 80px; font-size: 0; } .imglykit-container .imglykit-controls .imglykit-controls-icon img { vertical-align: middle; } .imglykit-container .imglykit-controls .imglykit-controls-item-canvas { display: inline-block; width: 42px; height: 50px; vertical-align: middle; } .imglykit-container .imglykit-controls li[data-disabled] { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20); opacity: 0.2; } .imglykit-container .imglykit-controls li:hover:not([data-disabled]), .imglykit-container .imglykit-controls .imglykit-controls-button:hover:not([data-disabled]) { -webkit-box-shadow: 0 -3px 0 0 #43ADEB inset; -moz-box-shadow: 0 -3px 0 0 #43ADEB inset; box-shadow: 0 -3px 0 0 #43ADEB inset; background-color: rgba(0, 0, 0, 0.3); } .imglykit-container .imglykit-controls li:hover:not([data-disabled]) img, .imglykit-container .imglykit-controls .imglykit-controls-button:hover:not([data-disabled]) img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .imglykit-container .imglykit-controls .imglykit-controls-button { -webkit-transition: background-color 0.2s ease-out; -moz-transition: background-color 0.2s ease-out false; -o-transition: background-color 0.2s ease-out false; transition: background-color 0.2s ease-out; width: 80px; height: 80px; line-height: 80px; font-size: 0; cursor: pointer; position: relative; } .imglykit-container .imglykit-controls .imglykit-controls-button:first-child { border-right: 1px solid #363636; } .imglykit-container .imglykit-controls .imglykit-controls-button:last-child { border-left: 1px solid #363636; } .imglykit-container .imglykit-controls .imglykit-controls-button img { vertical-align: middle; width: 40px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out false; -o-transition: all 0.2s ease-out false; transition: all 0.2s ease-out; } .imglykit-container .imglykit-controls .imglykit-controls-done .imglykit-controls-done-highlighted { display: none; position: absolute; top: 0; left: 0; width: 80px; height: 80px; line-height: 80px; } .imglykit-container .imglykit-controls .imglykit-controls-done.highlighted > img { display: none; } .imglykit-container .imglykit-controls .imglykit-controls-done.highlighted .imglykit-controls-done-highlighted { display: block; } /* * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ .imglykit-container .imglykit-controls-overview ul.imglykit-controls-list { display: block; } /* * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ .imglykit-container .imglykit-controls-filters ul.imglykit-controls-list li { line-height: normal; } .imglykit-container .imglykit-controls-filters ul.imglykit-controls-list li img { width: 40px; height: 40px; margin-top: 10px; } /* * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ .imglykit-container .imglykit-controls-stickers ul.imglykit-controls-list li { background-size: 42px; background-repeat: no-repeat; background-position: center center; } /* * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ .imglykit-container .imglykit-canvas-stickers-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .imglykit-container .imglykit-canvas-stickers-container .imglykit-canvas-stickers { position: relative; display: inline-block; cursor: move; } .imglykit-container .imglykit-canvas-stickers-container .imglykit-canvas-stickers .imglykit-knob { bottom: 0; right: 0; } /* * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ .imglykit-container .imglykit-controls-text ul.imglykit-controls-list li { color: white; font-size: 32px; line-height: 80px; } /* * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ .imglykit-container .imglykit-canvas-text-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .imglykit-container .imglykit-canvas-text-container .imglykit-canvas-text { position: relative; display: inline-block; } .imglykit-container .imglykit-canvas-text-container .imglykit-canvas-text .imglykit-crosshair { position: absolute; width: 34px; height: 34px; left: -34px; } .imglykit-container .imglykit-canvas-text-container .imglykit-canvas-text .imglykit-canvas-text-textarea { position: relative; display: inline-block; } .imglykit-container .imglykit-canvas-text-container .imglykit-canvas-text .imglykit-canvas-text-textarea textarea { background: transparent; border: 2px solid white; resize: none; padding: 0; } .imglykit-container .imglykit-canvas-text-container .imglykit-canvas-text .imglykit-canvas-text-textarea .imglykit-knob { bottom: -2px; right: -8px; } /* * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ .imglykit-container .imglykit-slider { display: table; table-layout: fixed; width: 100%; height: 80px; line-height: 80px; } .imglykit-container .imglykit-slider > * { display: table-cell; } .imglykit-container .imglykit-slider .imglykit-slider-content { position: absolute; top: 38px; width: 100%; } .imglykit-container .imglykit-slider .imglykit-slider-minus, .imglykit-container .imglykit-slider .imglykit-slider-plus { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20); opacity: 0.2; color: white; font-size: 12px; width: 40px; text-align: center; } .imglykit-container .imglykit-slider .imglykit-slider-slider { width: auto; position: relative; z-index: 1; } .imglykit-container .imglykit-slider .imglykit-slider-slider .imglykit-slider-background, .imglykit-container .imglykit-slider .imglykit-slider-slider .imglykit-slider-fill { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; background: #1A1A1A; height: 12px; top: 50%; margin-top: -8px; cursor: pointer; } .imglykit-container .imglykit-slider .imglykit-slider-slider .imglykit-slider-fill { position: absolute; background: #43ADEB; } .imglykit-container .imglykit-slider .imglykit-slider-slider .imglykit-slider-center-dot { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; width: 24px; height: 24px; background: #43ADEB; position: absolute; left: 50%; top: 50%; cursor: pointer; margin: -14px 0 0 -12px; } .imglykit-container .imglykit-slider .imglykit-slider-slider .imglykit-slider-dot { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); width: 30px; height: 30px; background: white; position: absolute; left: 50%; top: 50%; margin: -17px 0 0 -15px; cursor: pointer; } /* * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ .imglykit-container .imglykit-color-picker { position: relative; border-left: 1px solid #363636; height: 80px; } .imglykit-container .imglykit-color-picker .imglykit-color-picker-color { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; background: black; margin-top: 15px; } .imglykit-container .imglykit-color-picker .imglykit-controls-item-label { position: absolute; line-height: 11px; width: 100%; bottom: 10px; left: 0; } .imglykit-container .imglykit-color-picker .imglykit-transparent-knob { pointer-events: none; } .imglykit-container .imglykit-color-picker canvas { cursor: pointer; } .imglykit-container .imglykit-color-picker-overlay { position: absolute; cursor: default; background: #353535; width: 240px; height: 240px; padding: 20px; bottom: 115px; right: -80px; position: absolute; border-color: #353535; display: none; } .imglykit-container .imglykit-color-picker-overlay:before { position: absolute; content: ""; width: 0; height: 0; border-color: #353535; top: 100%; left: 50%; margin-top: -1px; margin-left: -15px; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid #353535; border-top-color: inherit; } .imglykit-container .imglykit-color-picker-overlay.imglykit-visible { display: block; } .imglykit-container .imglykit-color-picker-overlay .imglykit-color-picker-alpha-container { width: 200px; height: 30px; position: relative; margin-bottom: 10px; } .imglykit-container .imglykit-color-picker-overlay .imglykit-color-picker-alpha-container canvas { background: black; position: absolute; left: 0; top: 0; } .imglykit-container .imglykit-color-picker-overlay .imglykit-color-picker-alpha-container .imglykit-transparent-knob { top: 50%; } .imglykit-container .imglykit-color-picker-overlay .imglykit-color-picker-hue-container { width: 30px; height: 160px; position: relative; float: left; } .imglykit-container .imglykit-color-picker-overlay .imglykit-color-picker-hue-container canvas { background: black; position: absolute; top: 0; left: 0; } .imglykit-container .imglykit-color-picker-overlay .imglykit-color-picker-hue-container .imglykit-transparent-knob { left: 50%; } .imglykit-container .imglykit-color-picker-overlay .imglykit-color-picker-saturation-container { width: 160px; height: 160px; position: relative; float: left; margin-right: 10px; } .imglykit-container .imglykit-color-picker-overlay .imglykit-color-picker-saturation-container canvas { background: black; position: absolute; top: 0; left: 0; } /* * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ .imglykit-container .imglykit-canvas-crop-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: table; table-layout: fixed; } .imglykit-container .imglykit-canvas-crop-container.imglykit-canvas-crop-container-hidden { display: none; } .imglykit-container .imglykit-canvas-crop-container > * { display: table-row; } .imglykit-container .imglykit-canvas-crop-container > * > * { display: table-cell; background: rgba(34, 34, 34, 0.9); } .imglykit-container .imglykit-canvas-crop-container .imglykit-canvas-crop-center-center { position: relative; background: transparent; cursor: move; border: 1px solid white; } .imglykit-container .imglykit-canvas-crop-container .imglykit-canvas-crop-center-center.imglykit-canvas-crop-center-center-nomove { cursor: auto; } .imglykit-container .imglykit-canvas-crop-container .imglykit-canvas-crop-knobs { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .imglykit-container .imglykit-canvas-crop-container .imglykit-canvas-crop-knobs > * { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; position: absolute; background: white; width: 20px; height: 20px; border: 2px solid rgba(0, 0, 0, 0.3); cursor: pointer; } .imglykit-container .imglykit-canvas-crop-container .imglykit-canvas-crop-knobs [data-corner=top-left] { top: -10px; left: -10px; } .imglykit-container .imglykit-canvas-crop-container .imglykit-canvas-crop-knobs [data-corner=top-right] { top: -10px; right: -10px; } .imglykit-container .imglykit-canvas-crop-container .imglykit-canvas-crop-knobs [data-corner=bottom-left] { bottom: -10px; left: -10px; } .imglykit-container .imglykit-canvas-crop-container .imglykit-canvas-crop-knobs [data-corner=bottom-right] { bottom: -10px; right: -10px; } /* * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ .imglykit-container .imglykit-canvas-radial-blur-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .imglykit-container .imglykit-canvas-radial-blur-container .imglykit-canvas-radial-blur-dot { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; position: absolute; background: white; width: 20px; height: 20px; border: 2px solid rgba(0, 0, 0, 0.3); cursor: pointer; margin-left: -10px; margin-top: -10px; } .imglykit-container .imglykit-canvas-radial-blur-container .imglykit-canvas-radial-blur-circle-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; } .imglykit-container .imglykit-canvas-radial-blur-container .imglykit-canvas-radial-blur-circle { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; border: 2px solid white; position: absolute; top: 0; left: 0; width: 100px; height: 100px; pointer-events: none; } /* * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ .imglykit-container .imglykit-canvas-tilt-shift-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .imglykit-container .imglykit-canvas-tilt-shift-container .imglykit-canvas-tilt-shift-dot { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; position: absolute; background: white; width: 20px; height: 20px; border: 2px solid rgba(0, 0, 0, 0.3); cursor: pointer; margin-left: -10px; margin-top: -10px; } .imglykit-container .imglykit-canvas-tilt-shift-container .imglykit-canvas-tilt-shift-rect-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; } .imglykit-container .imglykit-canvas-tilt-shift-container .imglykit-canvas-tilt-shift-rect { border: 2px solid white; position: absolute; top: 0; left: 0; width: 100px; height: 100px; pointer-events: none; } /* * Copyright (c) 2013-2015 9elements GmbH * * Released under Attribution-NonCommercial 3.0 Unported * http://creativecommons.org/licenses/by-nc/3.0/ * * For commercial use, please contact us at contact@9elements.com */ .imglykit-container .imglykit-scrollbar-background { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out false; -o-transition: all 0.3s ease-out false; transition: all 0.3s ease-out; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; width: 100%; height: 11px; background: #1E1E1E; position: absolute; bottom: 0; left: 0; cursor: pointer; } .imglykit-container .imglykit-scrollbar-background.visible { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .imglykit-container .imglykit-scrollbar-button { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; background: #43ADEB; height: 7px; position: absolute; left: 0; top: 0; width: 50px; margin: 2px; cursor: pointer; }