mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
preview zoom
This commit is contained in:
jdescottes
8
zoom/css/bootstrap/bootstrap-tooltip-custom.css
vendored
Normal file
8
zoom/css/bootstrap/bootstrap-tooltip-custom.css
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
.tooltip.in {
|
||||
opacity: 0.95;
|
||||
filter: alpha(opacity=95);
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
line-height: 20px;
|
||||
}
|
||||
112
zoom/css/bootstrap/bootstrap.css
vendored
Normal file
112
zoom/css/bootstrap/bootstrap.css
vendored
Normal 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
zoom/css/bootstrap/readme.txt
Normal file
1
zoom/css/bootstrap/readme.txt
Normal file
@@ -0,0 +1 @@
|
||||
Bootstrap custom build containing only the tooltip component
|
||||
185
zoom/css/preview-film-section.css
Normal file
185
zoom/css/preview-film-section.css
Normal file
@@ -0,0 +1,185 @@
|
||||
.preview-list-wrapper {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-list-scroller {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.top-overflow,
|
||||
.bottom-overflow {
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 12px;
|
||||
|
||||
-webkit-transition: all 500ms ease-out;
|
||||
-moz-transition: all 500ms ease-out;
|
||||
-ms-transition: all 500ms ease-out;
|
||||
-o-transition: all 500ms ease-out;
|
||||
transition: all 500ms ease-out;
|
||||
|
||||
background-image: linear-gradient(45deg, rgba(0,0,0, 0.8) 25%, transparent 25%, transparent 75%, rgba(0,0,0, 0.8) 75%, rgba(0,0,0, 0.8)),
|
||||
linear-gradient(-45deg, rgba(0,0,0, 0.8) 25%, transparent 25%, transparent 75%, rgba(0,0,0, 0.8) 75%, rgba(0,0,0, 0.8));
|
||||
background-size: 29px 45px;
|
||||
background-repeat: repeat-x;
|
||||
background-position-x: 3px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.top-overflow {
|
||||
top: -20px;
|
||||
}
|
||||
|
||||
.bottom-overflow {
|
||||
bottom: -20px;
|
||||
background-position-x: 0;
|
||||
background-position-y: -23px;
|
||||
}
|
||||
|
||||
.top-overflow-visible .top-overflow {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bottom-overflow-visible .bottom-overflow {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.preview-list {
|
||||
list-style-type: none;
|
||||
padding-right: 7px;
|
||||
}
|
||||
|
||||
.add-frame-action {
|
||||
border: #888 solid 4px;
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
padding: 6px 0;
|
||||
border-radius: 4px;
|
||||
margin-top: 8px;
|
||||
background-image: url(../img/plus.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 3px 7px;
|
||||
background-size: 26px 26px;
|
||||
text-indent: 18px;
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
.add-frame-action .label {
|
||||
width: 80px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.add-frame-action:hover {
|
||||
border-color: gold;
|
||||
}
|
||||
|
||||
.preview-tile {
|
||||
position: relative;
|
||||
border: #444 3px solid;
|
||||
border-radius: 3px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.preview-tile:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.preview-tile:hover {
|
||||
border: #999 3px solid;
|
||||
}
|
||||
|
||||
.preview-tile .tile-overlay {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
background-color: rgba(100, 100, 100, 0.6);
|
||||
opacity: 0;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.preview-tile:hover .tile-overlay {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.preview-tile .tile-overlay.tile-count {
|
||||
display: block;
|
||||
opacity: 1.0;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Drag n drop styles.
|
||||
*/
|
||||
|
||||
.preview-tile-drop-proxy {
|
||||
border: 3px dashed gold;
|
||||
height: 90px;
|
||||
border-radius: 9px;
|
||||
background-color: rgba(255, 215,0, 0.2);
|
||||
}
|
||||
36
zoom/css/reset.css
Normal file
36
zoom/css/reset.css
Normal file
@@ -0,0 +1,36 @@
|
||||
html, body {
|
||||
height : 100%; width: 100%;
|
||||
margin : 0;
|
||||
overflow: hidden;
|
||||
cursor : default;
|
||||
font-family: arial;
|
||||
font-size: 11px;
|
||||
-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;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
|
||||
/* Force apparition of scrollbars on leopard */
|
||||
::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 2px;
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: rgba(50, 50, 50, 0.4);
|
||||
}
|
||||
118
zoom/css/settings.css
Normal file
118
zoom/css/settings.css
Normal file
@@ -0,0 +1,118 @@
|
||||
|
||||
/** Righty sticky drawer expanded state. */
|
||||
|
||||
.right-sticky-section.sticky-section {
|
||||
right: 0;
|
||||
width: 47px;
|
||||
|
||||
-webkit-transition: all 200ms ease-out;
|
||||
-moz-transition: all 200ms ease-out;
|
||||
-ms-transition: all 200ms ease-out;
|
||||
transition: all 200ms ease-out;
|
||||
}
|
||||
|
||||
.right-sticky-section.expanded {
|
||||
right: 280px;
|
||||
}
|
||||
|
||||
.right-sticky-section .tool-icon {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
overflow: hidden;
|
||||
background-color: #444;
|
||||
height: 550px;
|
||||
max-height: 100%;
|
||||
width: 280px;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.right-sticky-section.expanded .tool-icon {
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.right-sticky-section .tool-icon.has-expanded-drawer {
|
||||
position: relative;
|
||||
background-color: #444;
|
||||
margin-right: 0;
|
||||
padding-right: 1px;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
margin: 10px 20px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #ccc;
|
||||
text-shadow: 1px 1px #000;
|
||||
}
|
||||
|
||||
.settings-title {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px #aaa solid;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.settings-item {}
|
||||
|
||||
.background-picker-wrapper {
|
||||
overflow: hidden;
|
||||
padding: 10px 5px 20px 5px;
|
||||
}
|
||||
|
||||
.background-picker {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
background-color: transparent;
|
||||
margin-right: 15px;
|
||||
padding: 1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.background-picker:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
left: -2px;
|
||||
}
|
||||
|
||||
.background-picker:hover:after {
|
||||
border: #eee 1px solid;
|
||||
}
|
||||
|
||||
.background-picker.selected:after {
|
||||
border: gold 1px solid;
|
||||
}
|
||||
|
||||
/* Gif Export Setting panel*/
|
||||
.export-gif-upload-button {
|
||||
margin-top : 10px;
|
||||
}
|
||||
|
||||
.export-gif-preview {
|
||||
margin-top:20px;
|
||||
max-width:240px;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.preview-upload-ongoing:before{
|
||||
content: "Upload ongoing ...";
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-top: 45%;
|
||||
box-sizing:border-box;
|
||||
-moz-box-sizing:border-box;
|
||||
background: rgba(0,0,0,0.5);
|
||||
color: white;
|
||||
}
|
||||
310
zoom/css/style.css
Normal file
310
zoom/css/style.css
Normal file
@@ -0,0 +1,310 @@
|
||||
|
||||
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
222
zoom/css/tools.css
Normal file
222
zoom/css/tools.css
Normal file
@@ -0,0 +1,222 @@
|
||||
|
||||
.tools-wrapper,
|
||||
.options-wrapper,
|
||||
.palette-wrapper {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.tool-icon {
|
||||
cursor : pointer;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
margin: 1px;
|
||||
background-color: #3a3a3a;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 12px 12px;
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
|
||||
.tool-icon.selected {
|
||||
cursor: default;
|
||||
background-color: #444;
|
||||
border: 1px gold solid;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tool-icon:hover {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
/*
|
||||
* Tool icons:
|
||||
*/
|
||||
.tool-icon.tool-pen {
|
||||
background-image: url(../img/tools/pen.png);
|
||||
}
|
||||
|
||||
.tool-icon.tool-vertical-mirror-pen {
|
||||
background-image: url(../img/tools/mirror.png);
|
||||
background-position: 0px 10px;
|
||||
background-size: 38px 27px;
|
||||
}
|
||||
|
||||
.tool-icon.tool-paint-bucket {
|
||||
background-image: url(../img/tools/paintbucket.png);
|
||||
}
|
||||
|
||||
.tool-icon.tool-eraser {
|
||||
background-image: url(../img/tools/eraser.png);
|
||||
}
|
||||
|
||||
.tool-icon.tool-stroke {
|
||||
background-image: url(../img/tools/stroke.png);
|
||||
}
|
||||
|
||||
.tool-icon.tool-rectangle {
|
||||
background-image: url(../img/tools/rectangle.png);
|
||||
background-position: 12px 14px;
|
||||
background-size: 24px 20px;
|
||||
}
|
||||
|
||||
.tool-icon.tool-circle {
|
||||
background-image: url(../img/tools/circle.png);
|
||||
}
|
||||
|
||||
.tool-icon.tool-move {
|
||||
background-image: url(../img/tools/hand.png);
|
||||
background-position: 12px 12px;
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
|
||||
.tool-icon.tool-rectangle-select {
|
||||
background-image: url(../img/tools/rectangle_selection.png);
|
||||
background-position: 12px 14px;
|
||||
background-size: 24px 20px;
|
||||
}
|
||||
|
||||
.tool-icon.tool-shape-select {
|
||||
background-image: url(../img/tools/magicwand.png);
|
||||
}
|
||||
|
||||
.tool-icon.tool-colorpicker {
|
||||
background-image: url(../img/tools/eyedropper.png);
|
||||
background-position: 12px 12px;
|
||||
background-size: 23px 23px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Tool cursors:
|
||||
*/
|
||||
|
||||
.tool-paint-bucket .drawing-canvas-container:hover {
|
||||
cursor: url(../img/icons/paint-bucket.png) 12 12, pointer;
|
||||
}
|
||||
|
||||
.tool-vertical-mirror-pen .drawing-canvas-container:hover {
|
||||
cursor: url(../img/icons/vertical-mirror-pen.png) 5 15, pointer;
|
||||
}
|
||||
|
||||
.tool-pen .drawing-canvas-container:hover {
|
||||
cursor: url(../img/icons/pen.png) 0 15, pointer;
|
||||
}
|
||||
|
||||
.tool-eraser .drawing-canvas-container:hover {
|
||||
cursor: url(../img/icons/eraser.png) 0 15, pointer;
|
||||
}
|
||||
|
||||
.tool-stroke .drawing-canvas-container:hover {
|
||||
cursor: url(../img/icons/pen.png) 0 15, pointer;
|
||||
}
|
||||
|
||||
.tool-rectangle .drawing-canvas-container:hover {
|
||||
cursor: url(../img/icons/rectangle.png) 0 15, pointer;
|
||||
}
|
||||
|
||||
.tool-circle .drawing-canvas-container:hover {
|
||||
cursor: url(../img/icons/circle.png) 2 15, pointer;
|
||||
}
|
||||
|
||||
.tool-move .drawing-canvas-container:hover {
|
||||
cursor: url(../img/icons/hand.png) 15 15, pointer;
|
||||
}
|
||||
|
||||
.tool-rectangle-select .drawing-canvas-container:hover {
|
||||
cursor: url(../img/icons/select.png) 15 15, pointer;
|
||||
}
|
||||
|
||||
.tool-shape-select .drawing-canvas-container:hover {
|
||||
cursor: url(../img/icons/wand.png) 15 15, pointer;
|
||||
}
|
||||
|
||||
.tool-colorpicker .drawing-canvas-container:hover {
|
||||
cursor: url(../img/icons/dropper.png) 0 15, pointer;
|
||||
}
|
||||
|
||||
.tool-color-picker input {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-indent: -10000px;
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
position : relative;
|
||||
top: 10px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.tool-color-picker .secondary-color-picker {
|
||||
top : 18px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
.palette-color[data-color=TRANSPARENT] {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
background-color: white;
|
||||
height : 16px;
|
||||
width : 16px;
|
||||
border: 2px solid #000;
|
||||
background-size: 16px 16px;
|
||||
background-position: 0 0;
|
||||
background-image: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
right bottom,
|
||||
color-stop(0, #fff),
|
||||
color-stop(0.45, #fff),
|
||||
color-stop(0.5, #ff0000),
|
||||
color-stop(0.55, #fff),
|
||||
color-stop(1, #fff)
|
||||
);
|
||||
background-image: -moz-linear-gradient(
|
||||
left top,
|
||||
#fff 0%,
|
||||
#fff 45%,
|
||||
#f00 50%,
|
||||
#fff 55%,
|
||||
#fff 100%
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
* Framesheet level actions:
|
||||
*/
|
||||
|
||||
.tool-icon.gallery-icon {
|
||||
background-image: url(../img/gallery.png);
|
||||
background-position: 3px 3px;
|
||||
background-size: 39px 39px;
|
||||
}
|
||||
|
||||
.tool-icon.save-icon {
|
||||
background-image: url(../img/save.png);
|
||||
background-position: 6px 6px;
|
||||
background-size: 36px 36px;
|
||||
}
|
||||
|
||||
.tool-icon.gear-icon {
|
||||
background-image: url(../img/gear.png);
|
||||
background-position: 6px 7px;
|
||||
background-size: 32px 32px;
|
||||
}
|
||||
|
||||
.tool-icon.upload-cloud-icon {
|
||||
background-image: url(../img/cloud_export.png);
|
||||
background-position: 4px 0px;
|
||||
background-size: 36px 36px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.upload-cloud-icon .label {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 4px;
|
||||
right: 0;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user