mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

proto init implementation + less

Browse Source
This commit is contained in:
Vince
2013-06-12 14:53:47 +02:00
parent 5ff471e58f
commit 31062a70a9
62 changed files with 355 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
css/preview-animation-section.css → css/preview-animation-section.less
View File

@ -1,13 +1,11 @@
.preview-container {
position : absolute;
bottom : 0; right : 0;
height : 282px;
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);
font-size: 0;
}
.preview-container canvas {
@ -16,4 +14,4 @@
#preview-fps {
width : 200px;
}
}

103
css/preview-film-section.css
View File

@ -1,103 +0,0 @@
.preview-list-wrapper {
overflow-y: scroll;
position: absolute;
top: 30px;
right:0;
bottom: 0;
left: 0;
}
.preview-list {
list-style-type: none;
padding-left: 7px;
padding-right: 7px;
}
.preview-tile {
padding : 10px;
overflow: hidden;
background-color: gray;
border-radius: 2px;
-webkit-box-shadow: 0 0 7px 0 rgba(0, 0, 0, 1);
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 1);
}
.preview-tile:hover {
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 1);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 1);
}
.preview-tile .canvas-container {
float: left;
}
.preview-tile .tile-view {
float: left;
border: #ccc 1px solid;
}
.preview-tile .tile-action {
display: block;
cursor: pointer;
width: 30px;
height: 30px;
background-color: transparent;
background-repeat: no-repeat;
background-position: 7px 7px;
border: none;
}
.preview-tile .tile-action-container {
float: right;
visibility : hidden;
overflow: hidden;
}
.preview-tile:hover .tile-action-container {
visibility : visible;
}
.preview-tile .tile-action.duplicate-frame-action {
background-image: url(../img/actions/duplicate.png);
}
.preview-tile .tile-action.delete-frame-action {
background-image: url(../img/actions/delete.png);
}
.preview-tile:hover {
background-color: lightgray;
}
.preview-tile.selected {
background-color: lightyellow;
}
.preview-tile.ui-draggable-dragging {
opacity: 0.3;
}
.preview-tile.droppable-active {
background-color: pink;
}
.interstitial-tile.droppable-hover-active {
background-color: purple;
}
.preview-tile.droppable-hover-active {
background-color: yellow;
}
.interstitial-tile {
visibility: hidden;
background-color: blue;
height: 10px;
}
.show-interstitial-tiles .interstitial-tile {
visibility: visible;
}

126
css/preview-film-section.less Normal file
View File

@ -0,0 +1,126 @@
.preview-list-wrapper {
overflow-y: scroll;
overflow-x: hidden;
height: 100%;
}
.preview-list {
list-style-type: none;
padding-right: 7px;
}
.preview-tile {
position: relative;
border: #444 3px solid;
border-radius: 3px;
}
.preview-tile:hover {
border: #999 3px solid;
}
.preview-tile .tile-overlay {
z-index: 10;
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
opacity: 0;
height: 30px;
width: 30px;
border: none;
}
.preview-tile:hover .tile-overlay {
opacity: 1.0;
}
.tile-overlay.tile-count {
display: block;
opacity: 0.5;
border-bottom-right-radius: 3px;
top: 0;
left: 0;
font-size: 14px;
line-height: 30px;
color: white;
font-weight: bold;
text-align: center;
cursor: default;
}
.preview-tile .tile-overlay.delete-frame-action {
background-image: url(../img/garbage.png);
background-repeat: no-repeat;
top: 0;
right: 0;
border-bottom-left-radius: 3px;
height: 30px;
width: 30px;
background-position: 5px 5px;
background-size: 20px;
cursor: pointer;
}
.preview-tile .tile-overlay.duplicate-frame-action {
bottom: 0;
right: 0;
border-bottom-left-radius: 3px;
background-image: url(../img/duplicate.png);
background-repeat: no-repeat;
background-position: 5px 5px;
background-size: 20px;
cursor: pointer;
}
.preview-tile .tile-overlay.dnd-action {
bottom: 0;
left: 0;
border-top-right-radius: 3px;
background-image: url(../img/dragndrop.png);
background-repeat: no-repeat;
background-position: 5px 5px;
background-size: 20px;
cursor: move;
}
.preview-tile.selected {
border-color: gold;
}
.preview-tile.selected:after {
content: " ";
position: absolute;
top: 38px;
right: -15px;
border: transparent 4px solid;
border-left-color: gold;
border-width: 6px;
border-style: solid;
}
.preview-tile.ui-draggable-dragging {
opacity: 0.3;
}
.preview-tile.droppable-active {
background-color: pink;
}
.interstitial-tile.droppable-hover-active {
background-color: purple;
}
.preview-tile.droppable-hover-active {
background-color: yellow;
}
.interstitial-tile {
visibility: hidden;
background-color: blue;
height: 10px;
}
.show-interstitial-tiles .interstitial-tile {
visibility: visible;
}

11
css/reset.css → css/reset.less
View File

@ -23,11 +23,14 @@ ul, li {
/* Force apparition of scrollbars on leopard */
::-webkit-scrollbar {
-webkit-appearance: none;
width: 10px;
width: 6px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(180,180,180,.7);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
border-radius: 2px;
background-color: #666;
}
::-webkit-scrollbar-track {
background-color: #444;
}

88
css/style.css → css/style.less
View File

@ -1,47 +1,53 @@
/**
* Top menubars
*/
.menubar {
background-color: #fff;
width: 100%;
height: 30px;
body {
background: -webkit-radial-gradient(circle, #000, #373737);
}
/**
* Application layout
*/
.left-section {
@toolbar-height: 104px;
.column-wrapper {
text-align: center;
font-size: 0;
position: absolute;
top: 0;
bottom: 0;
width: 220px;
background: #666;
}
.main-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 220px;
background: #ccc;
}
/**
* CSS Helpers
*/
.overlay-total {
position: absolute;
top: 0;
right:0;
bottom: 0;
left: 0;
top: @toolbar-height;
right: 0;
bottom: 0;
}
.left-column {
display: inline-block;
vertical-align: top;
height: 100%;
margin-right: 7px;
}
.main-column {
display: inline-block;
height: 100%;
position: relative;
}
.drawing-canvas-container {
font-size: 0;
}
.top-section {
position: absolute;
bottom: 100%;
min-width: 400px;
margin-bottom: 5px;
}
.right-column {
display: inline-block;
vertical-align: top;
background: blue;
margin-left: 10px;
}
@ -60,7 +66,7 @@
}
.canvas-container .canvas-background {
background: url(../img/transparent_background.png) repeat;
background: url(../img/canvas_background.png) repeat;
position: absolute;
top: 0;
right: 0;
@ -75,16 +81,6 @@
z-index: 10;
}
.drawing-canvas {
float: left;
}
.drawing-canvas-container {
float: left;
}
/**
* User messages
*/

122
css/tools.css → css/tools.less
View File

@ -1,39 +1,37 @@
.tools-group {
float: left;
height: 30px;
border-left: 1px solid #ccc;
padding: 0 3px;
.tools-wrapper,
.options-wrapper,
.palette-wrapper {
float: left;
}
.tools-wrapper {
width: 70%;
}
.tool-icon {
float: left;
cursor : pointer;
width: 30px;
height: 30px;
background-color: transparent;
width: 46px;
height: 46px;
margin: 1px;
background-color: rgba(200,200,200, .1);
background-repeat: no-repeat;
background-position: 7px 7px;
background-position: 9px 9px;
background-size: 28px;
}
/*
* Framesheet level actions:
*/
.tool-icon.tool-save {
background-image: url(../img/actions/save.png);
.tool-icon.selected {
cursor: default;
background-color: #444;
cursor: normal;
border: 1px gold solid;
margin: 0;
}
.tool-icon.tool-export {
background-image: url(../img/actions/image-export.png);
}
.tool-icon.tool-upload {
background-image: url(../img/actions/image-upload.png);
}
.tool-icon.tool-add-frame {
background-image: url(../img/actions/add.png);
}
.tool-icon:hover {
background-color: #444;
}
/*
* Tool icons:
@ -43,23 +41,23 @@
}
.tool-icon.tool-vertical-mirror-pen {
background-image: url(../img/tools/vertical-mirror-pen.png);
background-image: url(../img/tools_legacy/vertical-mirror-pen.png);
}
.tool-icon.tool-paint-bucket {
background-image: url(../img/tools/paint-bucket.png);
background-image: url(../img/tools/paintbucket.png);
}
.tool-icon.tool-eraser {
background-image: url(../img/tools/eraser.png);
background-image: url(../img/tools_legacy/eraser.png);
}
.tool-icon.tool-stroke {
background-image: url(../img/tools/stroke.png);
background-image: url(../img/tools_legacy/stroke.png);
}
.tool-icon.tool-rectangle {
background-image: url(../img/tools/rectangle.png);
background-image: url(../img/tools_legacy/rectangle.png);
}
.tool-icon.tool-circle {
@ -71,67 +69,63 @@
}
.tool-icon.tool-rectangle-select {
background-image: url(../img/tools/select.png);
background-image: url(../img/tools_legacy/select.png);
}
.tool-icon.tool-shape-select {
background-image: url(../img/tools/wand.png);
background-image: url(../img/tools/magicwand.png);
}
.tool-icon.tool-colorpicker {
background-image: url(../img/tools/dropper.png);
background-image: url(../img/tools/eyedropper.png);
}
/*.tool-icon.tool-palette {
background-image: url(../img/tools/color-palette.png);
}*/
/*
* Tool cursors:
*/
.tool-paint-bucket .drawing-canvas-container:hover {
cursor: url(../img/tools/paint-bucket.png) 12 12, pointer;
cursor: url(../img/tools_legacy/paint-bucket.png) 12 12, pointer;
}
.tool-vertical-mirror-pen .drawing-canvas-container:hover {
cursor: url(../img/tools/vertical-mirror-pen.png) 5 15, pointer;
cursor: url(../img/tools_legacy/vertical-mirror-pen.png) 5 15, pointer;
}
.tool-pen .drawing-canvas-container:hover {
cursor: url(../img/tools/pen.png) 0 15, pointer;
cursor: url(../img/tools_legacy/pen.png) 0 15, pointer;
}
.tool-eraser .drawing-canvas-container:hover {
cursor: url(../img/tools/eraser.png) 0 15, pointer;
cursor: url(../img/tools_legacy/eraser.png) 0 15, pointer;
}
.tool-stroke .drawing-canvas-container:hover {
cursor: url(../img/tools/pen.png) 0 15, pointer;
cursor: url(../img/tools_legacy/pen.png) 0 15, pointer;
}
.tool-rectangle .drawing-canvas-container:hover {
cursor: url(../img/tools/rectangle.png) 0 15, pointer;
cursor: url(../img/tools_legacy/rectangle.png) 0 15, pointer;
}
.tool-circle .drawing-canvas-container:hover {
cursor: url(../img/tools/circle.png) 2 15, pointer;
cursor: url(../img/tools_legacy/circle.png) 2 15, pointer;
}
.tool-move .drawing-canvas-container:hover {
cursor: url(../img/tools/hand.png) 15 15, pointer;
cursor: url(../img/tools_legacy/hand.png) 15 15, pointer;
}
.tool-rectangle-select .drawing-canvas-container:hover {
cursor: url(../img/tools/select.png) 15 15, pointer;
cursor: url(../img/tools_legacy/select.png) 15 15, pointer;
}
.tool-shape-select .drawing-canvas-container:hover {
cursor: url(../img/tools/wand.png) 15 15, pointer;
cursor: url(../img/tools_legacy/wand.png) 15 15, pointer;
}
.tool-colorpicker .drawing-canvas-container:hover {
cursor: url(../img/tools/dropper.png) 0 15, pointer;
cursor: url(../img/tools_legacy/dropper.png) 0 15, pointer;
}
.tool-grid,
@ -141,15 +135,6 @@
cursor: pointer;
}
.tool-icon.selected {
cursor: auto;
background-color: #eee;
}
.tool-icon:hover {
background-color: #eee;
}
.tool-color-picker {
padding: 5px 0 0 5px;
height: 25px;
@ -209,3 +194,24 @@
#fff 100%
);
}
/*
* Framesheet level actions:
*/
.tool-icon.tool-save {
background-image: url(../img/actions/save.png);
}
.tool-icon.tool-export {
background-image: url(../img/actions/image-export.png);
}
.tool-icon.tool-upload {
background-image: url(../img/actions/image-upload.png);
}
.tool-icon.tool-add-frame {
background-image: url(../img/actions/add.png);
}