391 lines
6.0 KiB
CSS
391 lines
6.0 KiB
CSS
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font: 1em sans-serif;
|
|
}
|
|
|
|
#loader {
|
|
margin: 140px 50px;
|
|
text-align: center;
|
|
}
|
|
|
|
#loader h1 {
|
|
font: 2em sans-serif;
|
|
margin: 0 0 20px;
|
|
}
|
|
|
|
#loader p {
|
|
margin: 0;
|
|
padding: 0.5em;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
#loader p.noscript {
|
|
position: relative;
|
|
top: -2.3em;
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
#loader nav {
|
|
margin: 80px 0 0;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
#loader nav a {
|
|
display: inline-block;
|
|
margin: 0 10px 10px;
|
|
}
|
|
|
|
.drop-target:after {
|
|
content: 'Drop SVG to Load Code';
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 5px;
|
|
right: 5px;
|
|
bottom: 5px;
|
|
background: rgba(255, 255, 255, 0.6);
|
|
text-shadow: 0 0 3px #FFFFFF;
|
|
font-size: 3em;
|
|
padding-top: 100px;
|
|
text-align: center;
|
|
border: 5px solid #88CC66;
|
|
border-radius: 20px;
|
|
pointer-events: none;
|
|
z-index: 99999;
|
|
}
|
|
|
|
.pane-hold {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.pane-side {
|
|
display: inline-block;
|
|
width: 30%;
|
|
height: 100%;
|
|
border-right: 1px solid #808080;
|
|
box-sizing: border-box;
|
|
vertical-align: top; /* Safari fix */
|
|
}
|
|
|
|
.pane-code {
|
|
height: 70%;
|
|
}
|
|
|
|
.pane-library {
|
|
background: #EEEEEE;
|
|
user-select: none;
|
|
height: 30%;
|
|
border-top: 1px solid #808080;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.pane-view {
|
|
display: inline-block;
|
|
width: 70%;
|
|
height: 100%;
|
|
position: relative;
|
|
vertical-align: top; /* Safari fix */
|
|
}
|
|
|
|
.gutter {
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
z-index: 9;
|
|
border: 0px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.gutter-horizontal {
|
|
margin: 0 -3px;
|
|
border-left-width: 3px;
|
|
border-right-width: 3px;
|
|
cursor: col-resize;
|
|
}
|
|
|
|
.gutter-vertical {
|
|
margin: -3px 0;
|
|
border-top-width: 3px;
|
|
border-bottom-width: 3px;
|
|
cursor: row-resize;
|
|
}
|
|
|
|
.pane-code .CodeMirror {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #EEEEEE;
|
|
}
|
|
|
|
.pane-code .editor-simple {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
background: #EEEEEE;
|
|
color: #222222;
|
|
font: 1em monospace;
|
|
margin: 0;
|
|
padding: 4px 8px 16px 8px;
|
|
resize: none;
|
|
white-space: pre;
|
|
}
|
|
|
|
.CodeMirror-line.error {
|
|
background: rgba(255, 0, 0, 0.2);
|
|
}
|
|
|
|
.cm-s-default .cm-keyword {color: #0055CC;}
|
|
.cm-s-default .cm-variable {color: #AA5500;}
|
|
.cm-s-default .cm-operator {color: #0055CC;}
|
|
.cm-s-default .cm-comment {color: #558800;}
|
|
.cm-s-default .cm-string {color: #221111;}
|
|
.cm-s-default .cm-error {color: #FF0000;}
|
|
|
|
.cm-s-default .cm-trailingspace {
|
|
background: rgba(255, 0, 0, 0.2);
|
|
}
|
|
|
|
.hover {
|
|
background: #FFFF00;
|
|
}
|
|
|
|
.pick-virtual {
|
|
color: #777777;
|
|
}
|
|
|
|
.pane-view-scroller {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
.pane-view-inner {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.pane-view svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.pane-view .region:hover .outline {
|
|
stroke-width: 5px;
|
|
stroke: rgba(255, 255, 0, 0.5);
|
|
}
|
|
|
|
.pane-view .region.focus .outline {
|
|
stroke-width: 5px;
|
|
stroke: rgba(255, 128, 0, 0.5);
|
|
}
|
|
|
|
.pane-view .region.focus:hover .outline {
|
|
stroke-width: 5px;
|
|
stroke: rgba(255, 192, 0, 0.5);
|
|
}
|
|
|
|
.pane-library-scroller {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.pane-library-inner {
|
|
padding: 5px;
|
|
}
|
|
|
|
.library-item {
|
|
display: inline-block;
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
|
|
.library-item > div {
|
|
width: 80px;
|
|
height: 80px;
|
|
border: 2px solid #EEEEEE;
|
|
background: #FFFFFF;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
transition: transform 0.2s, border-color 0.2s, background 0.2s;
|
|
}
|
|
|
|
.library-item.broken > div {
|
|
padding: 5px;
|
|
font: 6px monospace;
|
|
white-space: pre;
|
|
}
|
|
|
|
.library-item svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.library-item:hover > div {
|
|
border-color: #FFCC00;
|
|
background: #FFFFDD;
|
|
/* position: absolute;*/
|
|
transform: scale(1.1);
|
|
z-index: 10;
|
|
}
|
|
|
|
.msg-error {
|
|
display: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 20%;
|
|
margin-top: -50px;
|
|
width: 60%;
|
|
height: 100px;
|
|
overflow: auto;
|
|
box-sizing: border-box;
|
|
padding: 5px 10px;
|
|
font-family: monospace;
|
|
color: #770000;
|
|
background: #EEE8E8;
|
|
border: 1px solid rgba(0, 0, 0, 0.5);
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
|
|
opacity: 0.95;
|
|
z-index: 4;
|
|
}
|
|
|
|
.msg-error.error {
|
|
display: block;
|
|
}
|
|
|
|
.options {
|
|
position: absolute;
|
|
background: #FFFFFF;
|
|
user-select: none;
|
|
z-index: 30;
|
|
}
|
|
|
|
.options.links {
|
|
top: 0;
|
|
right: 0;
|
|
border-bottom-left-radius: 5px;
|
|
border-bottom: 1px solid #EEEEEE;
|
|
border-left: 1px solid #EEEEEE;
|
|
}
|
|
|
|
.options.downloads {
|
|
bottom: 0;
|
|
right: 0;
|
|
border-top-left-radius: 5px;
|
|
border-top: 1px solid #EEEEEE;
|
|
border-left: 1px solid #EEEEEE;
|
|
transition: 0.2s ease;
|
|
transition-property: box-shadow;
|
|
}
|
|
|
|
.options a {
|
|
display: inline-block;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.options a:not(:last-child) {
|
|
border-right: 1px solid #EEEEEE;
|
|
}
|
|
|
|
.options a:link, .options a:visited {
|
|
color: #666699;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.options a:active, .options a:hover {
|
|
background: #EEEEEE;
|
|
color: #6666CC;
|
|
}
|
|
|
|
.urlbuilder {
|
|
border-top: 1px solid #EEEEEE;
|
|
overflow: auto;
|
|
box-sizing: border-box;
|
|
transition: 0.2s ease;
|
|
transition-property: height, width, padding;
|
|
font-size: 0.8em;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.urlbuilder .message {
|
|
color: #666666;
|
|
font-size: 1.5em;
|
|
padding-top: 30px;
|
|
}
|
|
|
|
.urlbuilder .config {
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.urlbuilder input[type=number] {
|
|
width: 60px;
|
|
text-align: right;
|
|
}
|
|
|
|
.urlbuilder .or {
|
|
display: block;
|
|
margin: 10px 0;
|
|
color: #333333;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.urlbuilder .output {
|
|
display: block;
|
|
padding: 6px;
|
|
height: 30px;
|
|
border: 1px solid #999999;
|
|
border-right: none;
|
|
font-size: 1em;
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 10px;
|
|
width: calc(100% - 50px);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.urlbuilder .copy {
|
|
display: block;
|
|
width: 30px;
|
|
height: 30px;
|
|
line-height: 28px;
|
|
padding-top: 1px;
|
|
border: 1px solid #999999;
|
|
background: #FFFFFF;
|
|
font-size: 1em;
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.urlbuilder .copy:active {
|
|
background: #EEEEEE;
|
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.urlbuilder .copied {
|
|
display: none;
|
|
height: 30px;
|
|
border: 1px solid #999999;
|
|
font-size: 1em;
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 10px;
|
|
width: calc(100% - 20px);
|
|
line-height: 28px;
|
|
background: #99EE99;
|
|
box-sizing: border-box;
|
|
}
|