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; } .right-sticky-section.sticky-section { right: 0; width: 47px; -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; transition: all 200ms ease-out; } .right-sticky-section .tool-icon { float: right; margin-right: 0; } .drawer { } .drawer-content { overflow: hidden; background-color: #444; height: 550px; max-height: 100%; width: 280px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } /** Righty sticky drawer expanded state. */ .right-sticky-section.expanded { right: 280px; } .right-sticky-section.expanded .tool-icon { margin-right: 1px; } .right-sticky-section .tool-icon.has-expanded-drawer { position: relative; background-color: #444; margin-right: 0; padding-right: 1px; } .settings-section { margin: 10px 20px; font-size: 12px; font-weight: bold; color: #ccc; text-shadow: 1px 1px #000; } .settings-title { margin-top: 20px; margin-bottom: 10px; text-transform: uppercase; border-bottom: 1px #aaa solid; padding-bottom: 5px; } .settings-item {} .background-picker-wrapper { overflow: hidden; padding: 10px 5px 20px 5px; } .background-picker { cursor: pointer; float: left; height: 35px; width: 35px; background-color: transparent; margin-right: 15px; padding: 1px; position: relative; } .background-picker:after { content: " "; position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; } .background-picker:hover:after { border: #eee 1px solid; } .background-picker.selected:after { border: gold 1px solid; } /** * 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; } .canvas.canvas-overlay { position: absolute; top: 0; left: 0; 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; } /** * 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; }