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

UI cleanup

Browse Source
This commit is contained in:
Vince
2012-09-16 04:33:26 +02:00
parent b761750766
commit cfd5050901
33 changed files with 614 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
css/bootstrap/bootstrap-tooltip-custom.css vendored Normal file
View File

@@ -0,0 +1,8 @@
.tooltip.in {
opacity: 0.95;
filter: alpha(opacity=95);
}
.tooltip {
line-height: 20px;
}

112
css/bootstrap/bootstrap.css vendored Executable file
View File

@@ -0,0 +1,112 @@
/*!
* Bootstrap v2.1.1
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
.hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.input-block-level {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.tooltip {
position: absolute;
z-index: 1030;
display: block;
visibility: visible;
padding: 5px;
font-size: 11px;
opacity: 0;
filter: alpha(opacity=0);
}
.tooltip.in {
opacity: 0.8;
filter: alpha(opacity=80);
}
.tooltip.top {
margin-top: -3px;
}
.tooltip.right {
margin-left: 3px;
}
.tooltip.bottom {
margin-top: 3px;
}
.tooltip.left {
margin-left: -3px;
}
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #ffffff;
text-align: center;
text-decoration: none;
background-color: #000000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: #000000;
}
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-width: 5px 5px 5px 0;
border-right-color: #000000;
}
.tooltip.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-width: 5px 0 5px 5px;
border-left-color: #000000;
}
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000000;
}
.tooltip {
line-height: 20px;
}

1
css/bootstrap/readme.txt Normal file
View File

@@ -0,0 +1 @@
Bootstrap custom build containing only the tooltip component

20
css/preview-animation-section.css Normal file
View File

@@ -0,0 +1,20 @@
.preview-container {
position : absolute;
bottom : 0; 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;
}
#preview-fps {
width : 200px;
}

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

@@ -1,12 +1,32 @@
.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 {
@@ -15,18 +35,33 @@
.preview-tile .tile-view {
float: left;
border: blue 1px solid;
border: #ccc 1px solid;
}
.preview-tile .tile-action {
display: none;
float: right;
cursor: pointer;
width: 30px;
height: 30px;
background-color: transparent;
background-repeat: no-repeat;
background-position: 7px 7px;
border: none;
}
.preview-tile:hover .tile-action {
display: block;
}
.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;
}

13
css/reset.css
View File

@@ -17,4 +17,17 @@ ul, li {
margin : 0;
padding : 0;
list-style-type: none;
}
/* Force apparition of scrollbars on leopard */
::-webkit-scrollbar {
-webkit-appearance: none;
width: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(180,180,180,.7);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

120
css/style.css
View File

@@ -1,58 +1,59 @@
/**
* Top menubars
*/
.menubar {
position: absolute;
top: 0; left: 0;
width: 100%; height: 30px;
background-color: #fff;
width: 100%;
height: 30px;
}
.left-nav {
position:absolute;
top : 30px; bottom : 0;
width : 200px;
overflow-y: scroll;
background : #000;
padding : 10px;
/**
* Application layout
*/
.left-section {
position: absolute;
top: 0;
bottom: 0;
width: 220px;
background: #666;
}
.main-panel {
position:absolute;
top : 30px; bottom : 0; left : 220px; right : 0;
background : #ccc;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 220px;
background: #ccc;
}
.preview-container {
position : absolute;
bottom : 0; 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);
/**
* CSS Helpers
*/
.overlay-total {
position: absolute;
top: 0;
right:0;
bottom: 0;
left: 0;
}
.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;
}
/**
* Canvases layout
*/
.action-button {
background-color : white;
width : 150px;
display : inline-block;
.canvas {
position: relative;
z-index: 1;
}
.canvas-container {
position: relative;
display: block;
@@ -67,42 +68,35 @@
left: 0;
}
.canvas {
position: relative;
z-index: 1;
}
.drawing-canvas {
float: left;
}
.canvas-overlay {
.canvas.canvas-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.drawing-canvas {
float: left;
}
.drawing-canvas-container {
float: left;
}
#preview-fps {
width : 200px;
}
/**
* User messages
*/
.user-message {
position: absolute;
top: 2px;
right: 0;
bottom: 0;
left: 25%;
background-color: #F9EDBE;
padding: 4px 12px;
padding-right: 20px;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
border-top-right-radius: 7px;
border-right: 0;
color: #222;
border: #F0C36D 1px solid;
@@ -124,15 +118,3 @@
.user-message .close:hover {
color: black;
}
/* 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);
}

51
css/tools.css
View File

@@ -1,7 +1,7 @@
.tools-group {
float: left;
height: 30px;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
padding: 0 3px;
}
@@ -19,11 +19,11 @@
* Framesheet level actions:
*/
.tool-icon.tool-save {
background-image: url(../img/tools/icons/save.png);
background-image: url(../img/actions/save.png);
}
.tool-icon.tool-add-frame {
background-image: url(../img/tools/icons/add-frame.png);
background-image: url(../img/actions/add.png);
}
@@ -31,47 +31,47 @@
* Tool icons:
*/
.tool-icon.tool-pen {
background-image: url(../img/tools/icons/pen.png);
background-image: url(../img/tools/pen.png);
}
.tool-icon.tool-vertical-mirror-pen {
background-image: url(../img/tools/icons/vertical-mirror-pen.png);
background-image: url(../img/tools/vertical-mirror-pen.png);
}
.tool-icon.tool-paint-bucket {
background-image: url(../img/tools/icons/paint-bucket.png);
background-image: url(../img/tools/paint-bucket.png);
}
.tool-icon.tool-eraser {
background-image: url(../img/tools/icons/eraser.png);
background-image: url(../img/tools/eraser.png);
}
.tool-icon.tool-stroke {
background-image: url(../img/tools/icons/stroke.png);
background-image: url(../img/tools/stroke.png);
}
.tool-icon.tool-rectangle {
background-image: url(../img/tools/icons/rectangle.png);
background-image: url(../img/tools/rectangle.png);
}
.tool-icon.tool-circle {
background-image: url(../img/tools/cursors/circle.png);
background-image: url(../img/tools/circle.png);
}
.tool-icon.tool-move {
background-image: url(../img/tools/icons/hand.png);
background-image: url(../img/tools/hand.png);
}
.tool-icon.tool-rectangle-select {
background-image: url(../img/tools/icons/select.png);
background-image: url(../img/tools/select.png);
}
.tool-icon.tool-shape-select {
background-image: url(../img/tools/icons/wand.png);
background-image: url(../img/tools/wand.png);
}
/*.tool-icon.tool-palette {
background-image: url(../img/tools/icons/color-palette.png);
background-image: url(../img/tools/color-palette.png);
}*/
/*
@@ -79,43 +79,43 @@
*/
.tool-paint-bucket .drawing-canvas-container:hover {
cursor: url(../img/tools/cursors/paint-bucket.png) 14 12, pointer;
cursor: url(../img/tools/paint-bucket.png) 14 12, pointer;
}
.tool-vertical-mirror-pen .drawing-canvas-container:hover {
cursor: url(../img/tools/cursors/vertical-mirror-pen.png) 14 12, pointer;
cursor: url(../img/tools/vertical-mirror-pen.png) 14 12, pointer;
}
.tool-pen .drawing-canvas-container:hover {
cursor: url(../img/tools/cursors/pen.png) 2 21, pointer;
cursor: url(../img/tools/pen.png) 2 21, pointer;
}
.tool-eraser .drawing-canvas-container:hover {
cursor: url(../img/tools/cursors/eraser.png) 2 21, pointer;
cursor: url(../img/tools/eraser.png) 2 21, pointer;
}
.tool-stroke .drawing-canvas-container:hover {
cursor: url(../img/tools/cursors/pen.png) 2 21, pointer;
cursor: url(../img/tools/pen.png) 2 21, pointer;
}
.tool-rectangle .drawing-canvas-container:hover {
cursor: url(../img/tools/cursors/rectangle.png) 4 21, pointer;
cursor: url(../img/tools/rectangle.png) 4 21, pointer;
}
.tool-circle .drawing-canvas-container:hover {
cursor: url(../img/tools/cursors/circle.png) 4 21, pointer;
cursor: url(../img/tools/circle.png) 4 21, pointer;
}
.tool-move .drawing-canvas-container:hover {
cursor: url(../img/tools/cursors/hand.png) 14 12, pointer;
cursor: url(../img/tools/hand.png) 14 12, pointer;
}
.tool-rectangle-select .drawing-canvas-container:hover {
cursor: url(../img/tools/cursors/select.png) 14 12, pointer;
cursor: url(../img/tools/select.png) 14 12, pointer;
}
.tool-shape-select .drawing-canvas-container:hover {
cursor: url(../img/tools/cursors/wand.png) 14 12, pointer;
cursor: url(../img/tools/wand.png) 14 12, pointer;
}
.tool-grid,
@@ -136,6 +136,7 @@
.tool-color-picker {
padding: 5px 0 0 5px;
height: 25px;
cursor : default;
}
@@ -148,7 +149,7 @@
position : relative;
}
#secondary-color-picker {
.secondary-color-picker {
top : 8px;
}