timeline.styles.editor.css Maven / Gradle / Ivy
The newest version!
/***
*Spectrum Colorpicker v1.5.2
*https://github.com/bgrins/spectrum
*Author: Brian Grinstead
*License: MIT
*** */
/* line 8, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-container {
position: absolute;
top: 0;
left: 0;
display: inline-block;
*display: inline;
*zoom: 1;
/* https://github.com/bgrins/spectrum/issues/40 */
z-index: 9999994;
overflow: hidden;
box-sizing: content-box; }
/* line 18, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-container.sp-flat {
position: relative; }
/* line 21, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-container * {
box-sizing: content-box; }
/* Fix for * { box-sizing: border-box; } */
/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
/* line 28, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-top {
position: relative;
width: 100%;
display: inline-block; }
/* line 33, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-top-inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0; }
/* line 40, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-color {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 20%; }
/* line 47, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-hue {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 84%;
height: 100%; }
/* line 55, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-clear-enabled .sp-hue {
top: 33px;
height: 77.5%; }
/* line 59, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-fill {
padding-top: 80%; }
/* line 62, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-sat, .sp-val {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0; }
/* line 70, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-alpha-enabled .sp-top {
margin-bottom: 18px; }
/* line 72, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-alpha-enabled .sp-alpha {
display: block; }
/* line 75, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-alpha-handle {
position: absolute;
top: -4px;
bottom: -4px;
width: 6px;
left: 50%;
cursor: pointer;
border: 1px solid black;
background: white;
opacity: 0.8; }
/* line 86, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-alpha {
display: none;
position: absolute;
bottom: -14px;
right: 0;
left: 0;
height: 8px; }
/* line 94, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-alpha-inner {
border: solid 1px #333; }
/* line 97, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-clear {
display: none; }
/* line 99, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-clear.sp-clear-display {
background-position: center; }
/* line 102, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-clear-enabled .sp-clear {
display: block;
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 84%;
height: 28px; }
/* Don't allow text selection */
/* line 113, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle {
-webkit-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
-ms-user-select: none;
user-select: none; }
/* line 120, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-container.sp-dragging .sp-input, .sp-container button {
-webkit-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
-ms-user-select: none;
user-select: none; }
/* line 125, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-container.sp-input-disabled .sp-input-container, .sp-container.sp-buttons-disabled .sp-button-container, .sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
display: none; }
/* line 128, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-palette-only .sp-picker-container, .sp-palette-disabled .sp-palette-container, .sp-initial-disabled .sp-initial {
display: none; }
/* Gradients for hue, saturation and value instead of images. Not pretty... but it works */
/* line 133, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-sat {
background-image: -webkit-linear-gradient(left, white, rgba(204, 154, 129, 0));
background-image: linear-gradient(to right, white, rgba(204, 154, 129, 0));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81'); }
/* line 138, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-val {
background-image: -webkit-linear-gradient(bottom, black, rgba(204, 154, 129, 0));
background-image: linear-gradient(to top, black, rgba(204, 154, 129, 0));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000'); }
/* line 143, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-hue {
background: -webkit-linear-gradient(top, red 0%, yellow 17%, lime 33%, cyan 50%, blue 67%, magenta 83%, red 100%);
background: linear-gradient(to bottom, red 0%, yellow 17%, lime 33%, cyan 50%, blue 67%, magenta 83%, red 100%); }
/* IE filters do not support multiple color stops.
* Generate 6 divs, line them up, and do two color gradients for each.
* Yes, really. */
/* line 150, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-1 {
height: 17%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00'); }
/* line 154, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-2 {
height: 16%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00'); }
/* line 158, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-3 {
height: 17%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff'); }
/* line 162, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-4 {
height: 17%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff'); }
/* line 166, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-5 {
height: 16%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff'); }
/* line 170, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-6 {
height: 17%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000'); }
/* line 174, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-hidden {
display: none !important; }
/* Clearfix hack */
/* line 179, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-cf {
*zoom: 1; }
/* line 180, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-cf:before {
content: "";
display: table; }
/* line 183, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-cf:after {
content: "";
display: table;
clear: both; }
/* Mobile devices, make hue slider bigger so it is easier to slide */
@media (max-device-width: 480px) {
/* line 191, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-color {
right: 40%; }
/* line 193, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-hue {
left: 63%; }
/* line 195, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-fill {
padding-top: 60%; }
}
/* line 198, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-dragger {
border-radius: 5px;
height: 5px;
width: 5px;
border: 1px solid #fff;
background: #000;
cursor: pointer;
position: absolute;
top: 0;
left: 0; }
/* line 209, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-slider {
position: absolute;
top: 0;
cursor: pointer;
height: 3px;
left: -1px;
right: -1px;
border: 1px solid #000;
background: white;
opacity: 0.8; }
/*
*Theme authors:
*Here are the basic themeable display options (colors, fonts, global widths).
*See http: */
/* line 225, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-container {
border-radius: 0;
background-color: #ECECEC;
border: solid 1px #f0c49B;
padding: 0;
font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
box-sizing: border-box; }
/* line 232, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-container button, .sp-container input {
font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
box-sizing: border-box; }
/* line 236, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-color, .sp-hue, .sp-clear {
font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
box-sizing: border-box; }
/* line 240, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-top {
margin-bottom: 3px; }
/* line 243, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-color, .sp-hue, .sp-clear {
border: solid 1px #666; }
/* Input */
/* line 248, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-input-container {
float: right;
width: 100px;
margin-bottom: 4px; }
/* line 253, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-initial-disabled .sp-input-container {
width: 100%; }
/* line 256, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-input {
font-size: 12px !important;
border: 1px inset;
padding: 4px 5px;
margin: 0;
width: 100%;
background: transparent;
border-radius: 3px;
color: #222; }
/* line 265, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-input:focus {
border: 1px solid orange; }
/* line 267, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-input.sp-validation-error {
border: 1px solid red;
background: #fdd; }
/* line 271, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-picker-container, .sp-palette-container {
float: left;
position: relative;
padding: 10px;
padding-bottom: 300px;
margin-bottom: -290px; }
/* line 278, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-picker-container {
width: 172px;
border-left: solid 1px #fff; }
/* Palettes */
/* line 284, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-palette-container {
border-right: solid 1px #ccc; }
/* line 287, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-palette-only .sp-palette-container {
border: 0; }
/* line 290, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-palette .sp-thumb-el {
display: block;
position: relative;
float: left;
width: 24px;
height: 15px;
margin: 3px;
cursor: pointer;
border: solid 2px transparent; }
/* line 299, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
border-color: orange; }
/* line 302, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-thumb-el {
position: relative; }
/* Initial */
/* line 307, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-initial {
float: left;
border: solid 1px #333; }
/* line 310, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-initial span {
width: 30px;
height: 25px;
border: none;
display: block;
float: left;
margin: 0; }
/* line 317, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-initial .sp-clear-display {
background-position: center; }
/* Buttons */
/* line 322, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-palette-button-container, .sp-button-container {
float: right; }
/* Replacer (the little preview div that shows up instead of the ) */
/* line 327, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-replacer {
margin: 0;
overflow: hidden;
cursor: pointer;
padding: 0;
display: inline-block;
*zoom: 1;
*display: inline;
color: #333;
vertical-align: middle; }
/* line 337, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-replacer:hover, .sp-replacer.sp-active {
border-color: #F0C49B;
color: #111; }
/* line 340, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-replacer.sp-disabled {
cursor: default;
border-color: silver;
color: silver; }
/* line 345, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-dd {
padding: 2px 0;
height: 16px;
line-height: 16px;
float: left;
font-size: 6px;
color: #fff; }
/* line 353, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-preview {
position: relative;
width: 15px;
height: 15px;
border: solid 1px #222;
margin-right: 5px;
float: left;
z-index: 0; }
/* line 362, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-palette {
*width: 220px;
max-width: 220px; }
/* line 365, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-palette .sp-thumb-el {
width: 16px;
height: 16px;
margin: 2px 1px;
border: solid 1px #d0d0d0; }
/* line 371, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-container {
padding-bottom: 0; }
/* line 373, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-container button {
background-color: #eeeeee;
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
border: 1px solid #ccc;
border-bottom: 1px solid #bbb;
border-radius: 3px;
color: #333;
font-size: 14px;
line-height: 1;
padding: 5px 4px;
text-align: center;
text-shadow: 0 1px 0 #eee;
vertical-align: middle; }
/* line 386, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-container button:hover {
background-color: #dddddd;
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
border: 1px solid #bbb;
border-bottom: 1px solid #999;
cursor: pointer;
text-shadow: 0 1px 0 #ddd; }
/* line 393, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-container button:active {
border: 1px solid #aaa;
border-bottom: 1px solid #888;
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; }
/* Buttons: http://hellohappy.org/css3-buttons/ */
/* line 400, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-cancel {
font-size: 11px;
color: #d93f3f !important;
margin: 0;
padding: 2px;
margin-right: 5px;
vertical-align: middle;
text-decoration: none; }
/* line 408, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-cancel:hover {
color: #d93f3f !important;
text-decoration: underline; }
/* line 413, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-palette span:hover, .sp-palette span.sp-thumb-active {
border-color: #000; }
/* line 416, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-preview, .sp-alpha, .sp-thumb-el {
position: relative;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); }
/* line 420, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0; }
/* line 429, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-palette .sp-thumb-inner {
background-position: 50% 50%;
background-repeat: no-repeat; }
/* line 432, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=); }
/* line 434, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=); }
/* line 437, /Users/poly/workspace/TweenTime/src/styles/vendors/spectrum */
.sp-clear-display {
background-repeat: no-repeat;
background-position: center;
background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==); }
/* line 3, /Users/poly/workspace/TweenTime/src/styles/editor/timeline-header */
.graph-mask {
fill: #2c2e2f; }
/* line 6, /Users/poly/workspace/TweenTime/src/styles/editor/timeline-header */
.timeline__menu {
position: relative;
border-top: 1px solid #181818;
position: absolute;
top: -27px;
left: 0;
right: 0;
height: 25px;
padding: 0 20px;
background: #2c2e2f; }
/* line 10, /Users/poly/workspace/TweenTime/src/styles/editor/settings */
.timeline__menu:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: #484a4b; }
/* line 17, /Users/poly/workspace/TweenTime/src/styles/editor/timeline-header */
.menu-item, a.menu-item {
position: relative;
display: inline-block;
height: 25px;
margin-right: 20px;
color: #eee;
font-size: 11px;
line-height: 25px;
vertical-align: middle;
text-decoration: none;
cursor: pointer; }
/* line 28, /Users/poly/workspace/TweenTime/src/styles/editor/timeline-header */
.menu-item:hover, a.menu-item:hover {
color: #fff; }
/* line 31, /Users/poly/workspace/TweenTime/src/styles/editor/timeline-header */
.menu-item--disabled {
color: #666 !important;
cursor: default !important; }
/* line 35, /Users/poly/workspace/TweenTime/src/styles/editor/timeline-header */
.submenu {
display: none;
position: absolute;
left: -10px;
min-width: 120px;
bottom: 25px;
padding-bottom: 5px;
background: #2c2e2f;
border: 1px solid #484a4b; }
/* line 45, /Users/poly/workspace/TweenTime/src/styles/editor/timeline-header */
.submenu a {
display: block;
padding: 0 10px;
text-decoration: none;
color: #ddd !important; }
/* line 50, /Users/poly/workspace/TweenTime/src/styles/editor/timeline-header */
.submenu a:hover, .submenu a:focus {
color: #fff !important; }
/* line 53, /Users/poly/workspace/TweenTime/src/styles/editor/timeline-header */
.menu-item:hover > .submenu {
display: block; }
/* line 56, /Users/poly/workspace/TweenTime/src/styles/editor/timeline-header */
a.menu-item--toggle {
float: right;
margin-right: 0; }
/* line 60, /Users/poly/workspace/TweenTime/src/styles/editor/timeline-header */
a.menu-item--toggle i:before {
content: "\f078"; }
/* line 65, /Users/poly/workspace/TweenTime/src/styles/editor/timeline-header */
a.menu-item--toggle.menu-item--toggle-up i:before {
content: "\f077"; }
/* line 1, /Users/poly/workspace/TweenTime/src/styles/editor/controls */
.controls {
position: absolute;
top: 10px;
left: 20px;
color: #aaa; }
/* line 7, /Users/poly/workspace/TweenTime/src/styles/editor/controls */
.control {
display: inline-block;
margin-right: 5px;
font-size: 18px;
text-decoration: none; }
/* line 13, /Users/poly/workspace/TweenTime/src/styles/editor/controls */
.control, .control:active, .control:visited {
color: #ddd; }
/* line 15, /Users/poly/workspace/TweenTime/src/styles/editor/controls */
.control:hover, .control:focus {
color: #fff; }
/* line 18, /Users/poly/workspace/TweenTime/src/styles/editor/controls */
.control--input {
position: relative;
top: -2px;
padding: 3px 10px;
margin-right: -1px;
width: 50px;
border: 0;
background: none;
font-size: 12px;
font-weight: bold;
letter-spacing: 0.5px;
text-align: right;
-webkit-transition: background 0.2s;
transition: background 0.2s; }
/* line 32, /Users/poly/workspace/TweenTime/src/styles/editor/controls */
.control--input:focus {
outline: 0;
background: #474b4c; }
/* line 37, /Users/poly/workspace/TweenTime/src/styles/editor/controls */
.control--time-end {
text-align: left; }
/* line 40, /Users/poly/workspace/TweenTime/src/styles/editor/controls */
.control__time-separator {
position: relative;
top: -3px;
font-size: 11px; }
/* line 1, /Users/poly/workspace/TweenTime/src/styles/editor/timeline */
.timeline__main {
height: 220px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
overflow-y: scroll;
background: #2c2e2f; }
/* line 10, /Users/poly/workspace/TweenTime/src/styles/editor/timeline */
.brush .extent {
fill: #fff;
fill-opacity: 0.05; }
/* line 14, /Users/poly/workspace/TweenTime/src/styles/editor/timeline */
.line__toggle {
fill: #fff;
font-size: 14px;
cursor: pointer; }
/* line 19, /Users/poly/workspace/TweenTime/src/styles/editor/timeline */
.timeline {
position: relative;
border-top: 1px solid #181818;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 270px;
background: #2c2e2f;
z-index: 9000; }
/* line 10, /Users/poly/workspace/TweenTime/src/styles/editor/settings */
.timeline:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: #484a4b; }
/* line 29, /Users/poly/workspace/TweenTime/src/styles/editor/timeline */
.timeline-is-closed .timeline {
bottom: -200px; }
/* line 32, /Users/poly/workspace/TweenTime/src/styles/editor/timeline */
.timeline rect, .timeline path, .timeline line {
shape-rendering: crispEdges; }
/* line 35, /Users/poly/workspace/TweenTime/src/styles/editor/timeline */
.timeline .axis {
pointer-events: none; }
/* line 37, /Users/poly/workspace/TweenTime/src/styles/editor/timeline */
.timeline .axis path, .timeline .axis line {
fill: none;
stroke: #fff; }
/* line 42, /Users/poly/workspace/TweenTime/src/styles/editor/timeline */
.timeline .x.axis path {
display: none; }
/* line 44, /Users/poly/workspace/TweenTime/src/styles/editor/timeline */
.timeline .x.axis line {
stroke: #515556; }
/* line 46, /Users/poly/workspace/TweenTime/src/styles/editor/timeline */
.timeline .x.axis text {
font-size: 10px;
fill: #919191;
font-weight: bold;
-webkit-font-smoothing: antialiased; }
/* line 53, /Users/poly/workspace/TweenTime/src/styles/editor/timeline */
.timeline .x.grid text {
display: none; }
/* line 55, /Users/poly/workspace/TweenTime/src/styles/editor/timeline */
.timeline .x.grid line {
stroke: #3d4041; }
/* line 58, /Users/poly/workspace/TweenTime/src/styles/editor/timeline */
.timeline .line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px; }
/* line 63, /Users/poly/workspace/TweenTime/src/styles/editor/timeline */
.timeline .bar-anchor {
fill-opacity: 0;
cursor: ew-resize; }
/* line 67, /Users/poly/workspace/TweenTime/src/styles/editor/timeline */
.timeline .click-handler {
fill-opacity: 0; }
/* line 70, /Users/poly/workspace/TweenTime/src/styles/editor/timeline */
svg * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
/* line 76, /Users/poly/workspace/TweenTime/src/styles/editor/timeline */
svg *::-moz-selection, svg *::-moz-selection, svg *::-webkit-selection {
background: transparent; }
svg *::selection, svg *::-moz-selection, svg *::-webkit-selection {
background: transparent; }
/* line 1, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.properties-editor {
position: fixed;
top: 0;
right: 0;
width: 280px;
bottom: 297px;
border-left: 1px solid #000;
background: #2c2e2f;
font-size: 11px;
color: #aaa;
overflow: auto; }
/* line 13, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.properties-is-closed .properties-editor {
right: -281px;
overflow: visible; }
/* line 17, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.timeline-is-closed .properties-editor {
bottom: 97px; }
/* line 20, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.properties-editor__main {
padding: 10px 10px; }
/* line 23, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.properties-editor .property {
overflow: hidden;
position: relative;
min-height: 26px;
line-height: 25px; }
/* line 29, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.properties-editor__title {
position: relative;
border-bottom: 1px solid #181818;
position: relative;
margin-top: 0;
margin-bottom: 10px;
margin-left: -10px;
margin-right: -10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
color: #fff;
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.8); }
/* line 10, /Users/poly/workspace/TweenTime/src/styles/editor/settings */
.properties-editor__title:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: #484a4b; }
/* line 42, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.property-grp {
padding-bottom: 10px; }
/* line 45, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.property-grp__title {
margin: 0 -10px 7px -10px;
padding: 2px 10px;
border-bottom: 1px solid #3C3E3F;
color: #fff;
font-size: 11px;
text-transform: uppercase; }
/* line 53, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.property__label {
position: relative;
display: inline-block;
min-width: 50px;
min-height: 25px;
margin-right: 10px;
margin-left: 18px;
color: #fff; }
/* line 62, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.property__key {
display: block;
position: absolute;
top: 50%;
margin-top: -4px;
width: 8px;
height: 8px;
padding: 0;
margin-right: 7px;
background: #666;
border: 0;
border-radius: 4px;
cursor: pointer;
z-index: 500; }
/* line 76, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.property__key:focus {
outline: 0; }
/* line 79, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.property__key--active {
background: #39C2C8; }
/* line 82, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.property__key-time {
margin-right: 10px;
color: #777; }
/* line 86, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.property__key-input {
color: #ddd; }
/* line 89, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.property__input {
background: #57595a;
border: 1px solid #2f3132;
color: #fff;
padding: 2px 5px; }
/* line 94, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.property__input:focus {
outline: 0; }
/* line 97, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.property--number span {
display: inline-block;
min-width: 100px; }
/* line 101, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
a.menu-item--toggle-side {
position: absolute;
top: 8px;
right: -3px;
z-index: 99999; }
/* line 108, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
a.menu-item--toggle-side i:before {
content: "\f054"; }
/* line 111, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.properties-is-closed a.menu-item--toggle-side {
left: -27px;
color: #fff;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6); }
/* line 116, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.properties-is-closed a.menu-item--toggle-side i:before {
content: "\f053"; }
/* line 119, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.property--tween {
overflow: hidden; }
/* line 121, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.property--tween .property__label {
display: inline;
float: left;
margin-left: 18px; }
/* line 126, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.property--tween .property__select {
display: inline;
float: left; }
/* line 130, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.actions {
position: relative;
border-bottom: 1px solid #181818;
margin-left: -10px;
margin-right: -10px;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 10px;
padding-bottom: 20px;
padding-top: 10px;
text-align: right; }
/* line 10, /Users/poly/workspace/TweenTime/src/styles/editor/settings */
.actions:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: #484a4b; }
/* line 142, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.actions__item {
-webkit-transition: background 0.3s;
transition: background 0.3s;
display: inline-block;
padding: 4px 10px;
background: #CF3938;
text-decoration: none; }
/* line 148, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.actions__item, .actions__item:hover, .actions__item:focus, .actions__item:active, .actions__item:link {
color: #fff; }
/* line 151, /Users/poly/workspace/TweenTime/src/styles/editor/properties-editor */
.actions__item:hover {
background: #b32c2b; }
/* line 2, /Users/poly/workspace/TweenTime/src/styles/editor/time-indicator */
.time-indicator__line {
fill: #82898b; }
/* line 5, /Users/poly/workspace/TweenTime/src/styles/editor/time-indicator */
.time-indicator__handle {
fill: #fff;
stroke: #565a5c; }
/* line 1, /Users/poly/workspace/TweenTime/src/styles/editor/line-label */
.line-label {
fill: #fff;
font-size: 11px;
cursor: pointer; }
/* line 6, /Users/poly/workspace/TweenTime/src/styles/editor/line-label */
.line-label--small {
fill: #919191;
font-size: 10px; }
/* line 1, /Users/poly/workspace/TweenTime/src/styles/editor/line-separator */
.line-separator {
stroke: #515556; }
/* line 4, /Users/poly/workspace/TweenTime/src/styles/editor/line-separator */
.line-separator--secondary {
stroke: #3d4041; }
/* line 1, /Users/poly/workspace/TweenTime/src/styles/editor/bar */
.bar {
fill: rgba(93, 98, 100, 0.5);
stroke: rgba(93, 98, 100, 0.9);
cursor: move; }
/* line 6, /Users/poly/workspace/TweenTime/src/styles/editor/bar */
.bar--selected {
fill: rgba(170, 174, 176, 0.5);
stroke: rgba(144, 149, 151, 0.9); }
/* line 6, /Users/poly/workspace/TweenTime/src/styles/editor/key */
.key path, .key circle {
shape-rendering: geometricPrecision;
fill: #bbb;
fill-opacity: 0.8;
cursor: move; }
/* line 14, /Users/poly/workspace/TweenTime/src/styles/editor/key */
.key--selected path, .key--selected circle {
fill-opacity: 1;
fill: #6ECEDF; }
/* line 18, /Users/poly/workspace/TweenTime/src/styles/editor/key */
.key__shape-rect {
fill-opacity: 0.6 !important; }
/* line 24, /Users/poly/workspace/TweenTime/src/styles/editor/key */
.ease-in, .ease-out, .ease-inout, .ease-linear {
display: none; }
/* line 28, /Users/poly/workspace/TweenTime/src/styles/editor/key */
.easeNone .ease-linear {
display: block; }
/* line 31, /Users/poly/workspace/TweenTime/src/styles/editor/key */
.easeIn .ease-in {
display: block; }
/* line 34, /Users/poly/workspace/TweenTime/src/styles/editor/key */
.easeOut .ease-out {
display: block; }
/* line 37, /Users/poly/workspace/TweenTime/src/styles/editor/key */
.easeInOut .ease-inout {
display: block; }
/* line 40, /Users/poly/workspace/TweenTime/src/styles/editor/key */
.key--preview {
fill: #bbb;
fill-opacity: 0.3;
shape-rendering: geometricPrecision;
pointer-events: none; }
/* line 1, /Users/poly/workspace/TweenTime/src/styles/editor/error */
.error {
fill: #CF3938; }
/* line 1, /Users/poly/workspace/TweenTime/src/styles/editor/selection */
.selection {
stroke: #fff;
stroke-dasharray: 3px;
stroke-opacity: 0.5;
fill: rgba(255, 255, 255, 0.05);
pointer-events: none;
animation: dash 0.5s linear infinite;
-webkit-animation: dash 0.5s linear infinite; }
@keyframes dash {
/* line 11, /Users/poly/workspace/TweenTime/src/styles/editor/selection */
from {
stroke-dashoffset: 0; }
/* line 13, /Users/poly/workspace/TweenTime/src/styles/editor/selection */
to {
stroke-dashoffset: -6; } }
@-webkit-keyframes dash {
/* line 17, /Users/poly/workspace/TweenTime/src/styles/editor/selection */
from {
stroke-dashoffset: 0; }
/* line 19, /Users/poly/workspace/TweenTime/src/styles/editor/selection */
to {
stroke-dashoffset: -6; } }
/* line 1, /Users/poly/workspace/TweenTime/src/styles/editor/content-wrapper */
.content-wrapper {
position: absolute;
top: 0;
left: 0;
right: 281px;
bottom: 297px;
overflow: auto; }
/* line 9, /Users/poly/workspace/TweenTime/src/styles/editor/content-wrapper */
.properties-is-closed .content-wrapper {
right: 0; }
/* line 12, /Users/poly/workspace/TweenTime/src/styles/editor/content-wrapper */
.timeline-is-closed .content-wrapper {
bottom: 97px; }
/* line 1, /Users/poly/workspace/TweenTime/src/styles/editor/custom-select */
.custom-select {
display: block;
position: relative; }
/* line 5, /Users/poly/workspace/TweenTime/src/styles/editor/custom-select */
.custom-select select {
width: 100%;
margin: 0;
padding: 0.3em 1.9em 0.2em 0em;
background: none;
border: 1px solid transparent;
outline: none;
box-sizing: border-box;
-moz-appearance: none;
appearance: none;
-webkit-appearance: none; }
/* line 16, /Users/poly/workspace/TweenTime/src/styles/editor/custom-select */
.custom-select select, .custom-select select:focus {
color: #aaa !important; }
/* line 19, /Users/poly/workspace/TweenTime/src/styles/editor/custom-select */
.custom-select::after {
content: "\f078" !important;
display: block !important;
font-family: 'icomoon';
position: absolute;
top: 50%;
right: 1em;
margin-top: -6px;
line-height: 1em;
pointer-events: none; }
/* line 30, /Users/poly/workspace/TweenTime/src/styles/editor/custom-select */
x:-o-prefocus, .custom-select::after {
display: none; }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* line 34, /Users/poly/workspace/TweenTime/src/styles/editor/custom-select */
.custom-select select::-ms-expand {
display: none; }
/* line 36, /Users/poly/workspace/TweenTime/src/styles/editor/custom-select */
.custom-select select:focus::-ms-value {
background: transparent;
color: #aaa; }
}
@-moz-document url-prefix() {
/* line 41, /Users/poly/workspace/TweenTime/src/styles/editor/custom-select */
.custom-select {
overflow: hidden; }
/* line 43, /Users/poly/workspace/TweenTime/src/styles/editor/custom-select */
.custom-select select {
width: 120%;
width: calc(100% + em); } }
/* line 48, /Users/poly/workspace/TweenTime/src/styles/editor/custom-select */
.custom-select select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000; }
/* line 4, /Users/poly/workspace/TweenTime/src/styles/editor.sass */
html, body {
margin: 0;
padding: 0; }
/* line 9, /Users/poly/workspace/TweenTime/src/styles/editor.sass */
.timeline, .properties-editor {
font-family: 'Source Sans Pro', Helvetica, sans-serif; }
/*# sourceMappingURL=maps/editor.css.map */© 2015 - 2025 Weber Informatics LLC | Privacy Policy