piskel/css/style.css
2012-08-29 23:01:04 +02:00

168 lines
2.7 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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;
}
#palette li {
display : inline-block;
height : 20px;
width : 20px;
margin : 5px;
}
#preview-fps {
width : 200px;
}
/* User messages */
.user-message {
position: fixed;
bottom: 0;
left: 40%;
background-color: #F9EDBE;
padding: 7px 22px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
font-family: Arial Black, Gadget, sans-serif;
color: #222;
border: #F0C36D 1px solid;
border-bottom: 0;
font-weight: bold;
font-size: 14px;
}
/* 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);
}