body { background: radial-gradient(circle, #000, #373737); /* 16/06/2013 : -webkit still needed for safari, safari mobile and android browser and chrome for android cf http://caniuse.com/css-gradients */ background: -webkit-radial-gradient(circle, #000, #373737); } /** * Application layout */ .main-wrapper { position: absolute; top: 5px; right: 0; bottom: 5px; left: 0; } .column-wrapper { text-align: center; font-size: 0; position: absolute; left: 100px; /* Reserve room for tools on the left edge of the screen. */ top: 0; right: 50px; /* Reserve room for actions on the right edge of the screen. */ bottom: 0; } .piskel-name-container { overflow:hidden; position:fixed; top:10px; left:10px; color:white; font-family:Tahoma; z-index: 10000; } .piskel-name-container #piskel-name { border :none; color : lightgrey; background: transparent; font-size:16pt; } .column { display: inline-block; } .left-column { vertical-align: top; height: 100%; margin-right: 7px; } .main-column { height: 100%; position: relative; } .right-column { vertical-align: top; margin-left: 10px; } .drawing-canvas-container { font-size: 0; } .sticky-section { position: fixed; top: 0; bottom: 0; z-index: 1000; } .sticky-section .sticky-section-wrap { display: table; height: 100%; } .sticky-section .vertical-centerer { display: table-cell; vertical-align: middle; } .left-sticky-section.sticky-section { left: 0; max-width: 100px; } .left-sticky-section .tool-icon { float: left; } /** * Canvases layout */ .canvas { position: relative; z-index: 1; } .canvas-container { position: relative; display: block; } .canvas-container .canvas-background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .light-picker-background, .light-canvas-background .canvas-background { background: url(../img/canvas_background/light_canvas_background.png) repeat; } .medium-picker-background, .medium-canvas-background .canvas-background { background: url(../img/canvas_background/medium_canvas_background.png) repeat; } .lowcont-medium-picker-background, .lowcont-medium-canvas-background .canvas-background { background: url(../img/canvas_background/lowcont_medium_canvas_background.png) repeat; } .lowcont-dark-picker-background, .lowcont-dark-canvas-background .canvas-background { background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat; } .layers-canvas { opacity: 0.2; } .canvas.canvas-overlay, .canvas.layers-canvas { position: absolute; top: 0; left: 0; } /** * Z-indexes should match the drawing area canvas superposition order : * - 1 : draw layers below current layer * - 2 : draw current layer * - 3 : draw layers above current layer * - 4 : draw the tools overlay */ .canvas.layers-below-canvas {z-index: 7;} .canvas.drawing-canvas {z-index: 8;} .canvas.layers-above-canvas {z-index: 9;} .canvas.canvas-overlay {z-index: 10;} /** * Animated preview styles. */ .preview-container { border : 0px Solid black; border-radius:5px 0px 0px 5px; box-shadow : 0px 0px 2px rgba(0,0,0,0.2); font-size: 0; } .preview-container canvas { border : 0px Solid transparent; } .display-fps { float: left; color: #aaa; font-size: 12px; min-width: 55px; vertical-align: bottom; line-height: 24px; } .range-fps { overflow: hidden; } /** * Layers container */ .layers-container { border: 4px solid #888; font-size: medium; color: white; text-align: left; border-radius: 4px; margin-top: 10px; } .layers-title { padding: 8px; margin: 0; font-size: 15px; background: #222; background-image: url('../img/layers.svg'); background-size: 22px; background-repeat: no-repeat; background-position: 97%; } .layers-list { font-size : 12px; } .layer-item { height:24px; line-height: 24px; padding : 0 10px; border-top: 1px solid #444; cursor : pointer; } .layer-item:hover { background : #222; } .current-layer-item, .current-layer-item:hover { background : #333; color: gold; } .layers-button-container { overflow : hidden; } .layers-button-arrow { font-family : 'Lucida Grande', Calibri; padding : 2px 6px 0 6px; } .layers-button { height: 24px; margin: 0; width: 25%; float : left; border: none; box-sizing: border-box; border-top: 1px solid #666; border-right: 1px solid #333; border-bottom: 1px solid #333; background-color: #3f3f3f; cursor: pointer; color: white; font-size: 0.7em; font-weight: bold; text-align: center; text-decoration: none; text-shadow: 0px -1px 0 #000; transition: background-color 0.2s linear; } .layers-button:last-child { border-right-width: 0; } .layers-button:hover { text-decoration: none; background-color: #484848; color: gold; } /** * User messages */ .user-message { position: absolute; right: 0; bottom: 0; background-color: #F9EDBE; padding: 10px 47px; border-top-left-radius: 7px; color: #222; border: #F0C36D 1px solid; border-right: 0; border-bottom: 0; font-weight: bold; font-size: 13px; z-index: 10000; max-width: 300px; } .user-message .close { position: absolute; top: 6px; right: 17px; color: gray; font-weight: bold; cursor: pointer; font-size: 18px; } .user-message .close:hover { color: black; }