651563f793
Migration to a Domain object (currently a FrameSheetModel, feel free to change its name). The model is being used by the slideshow (drawing each tiles), animation preview (drawing animation) and drawing (update model and redraw current tile). Now the rendering information are not stored in a canvas element that you paste from canvas to canvas but centralize in this model. The frame is described as an array of array: that will allow different rendering using the dpi constants and more flexibility (e.g. drawing a grid, serializing the data). Some minor modifications: - cleaning markup - adding background image to highlight transparent area
140 lines
No EOL
2.2 KiB
CSS
140 lines
No EOL
2.2 KiB
CSS
html, body {
|
|
height : 100%;
|
|
margin : 0;
|
|
cursor : default;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
ul, li {
|
|
margin : 0;
|
|
padding : 0;
|
|
}
|
|
|
|
.debug {
|
|
border : 1px Solid black;
|
|
}
|
|
|
|
.left-nav {
|
|
position:absolute;
|
|
top : 0;
|
|
bottom : 0;
|
|
width : 200px;
|
|
overflow-y: scroll;
|
|
background : #000;
|
|
padding : 10px;
|
|
}
|
|
|
|
.main-panel {
|
|
position:absolute;
|
|
top : 0;
|
|
bottom : 0;
|
|
left : 220px;
|
|
right : 0;
|
|
background : #ccc;
|
|
}
|
|
|
|
.preview-container {
|
|
position : absolute;
|
|
top : 30px;
|
|
right : 0;
|
|
height : 256px;
|
|
width : 256px;
|
|
background : white;
|
|
border : 0px Solid black;
|
|
border-radius:5px 0px 0px 5px;
|
|
box-shadow : 0px 0px 2px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.preview-container canvas {
|
|
border : 0px Solid transparent;
|
|
border-radius:5px 0px 0px 5px;
|
|
}
|
|
|
|
#cursorInfo {
|
|
position : fixed;
|
|
cursor : default;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.action-button {
|
|
background-color : white;
|
|
width : 150px;
|
|
display : inline-block;
|
|
}
|
|
|
|
#preview-list {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.preview-tile {
|
|
padding : 10px;
|
|
overflow: hidden;
|
|
background-color: gray;
|
|
}
|
|
|
|
.preview-tile .canvas-container {
|
|
float: left;
|
|
}
|
|
|
|
.preview-tile .tile-view {
|
|
float: left;
|
|
border: blue 1px solid;
|
|
}
|
|
|
|
.preview-tile .tile-action {
|
|
display: none;
|
|
float: right;
|
|
}
|
|
|
|
.preview-tile:hover .tile-action {
|
|
display: block;
|
|
}
|
|
|
|
.preview-tile:hover {
|
|
background-color: lightgray;
|
|
}
|
|
|
|
#preview-list .preview-tile.selected {
|
|
background-color: lightyellow;
|
|
}
|
|
|
|
.canvas-container {
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
|
|
.canvas-container .canvas-background {
|
|
background: url(../img/transparent_background.png) repeat;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.canvas {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Force apparition of scrollbars on leopard */
|
|
::-webkit-scrollbar {
|
|
-webkit-appearance: none;
|
|
width: 7px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 4px;
|
|
background-color: rgba(180,180,180,.7);
|
|
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
|
|
} |