mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
bd99027852
- Added MinimapController that displays a frame on the animated preview when zoomed in - Added bounds for the offset to make sure it doesn't go crazy - Added new utility Math.js with a minmax function - TODO : the minimap controller has a lot of dependencies, see if could be cleaned up - TODO : DrawingController knows the size of the picture it has to render only indirectly, which makes it hard in some cases (such as boundary checking performed during setOffset)
316 lines
5.4 KiB
CSS
316 lines
5.4 KiB
CSS
|
|
|
|
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-container {
|
|
overflow : hidden;
|
|
}
|
|
|
|
.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;
|
|
width: 120px;
|
|
}
|
|
|
|
/**
|
|
* Layers container
|
|
*/
|
|
.layers-list-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;
|
|
}
|