747 lines
11 KiB
CSS
747 lines
11 KiB
CSS
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font: 1em sans-serif;
|
|
|
|
text-size-adjust: none;
|
|
-webkit-text-size-adjust: none;
|
|
|
|
/* disable whole-page elastic scrolling in iOS */
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#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 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 {
|
|
border-right: 1px solid #808080;
|
|
}
|
|
|
|
.pane-library {
|
|
background: #EEEEEE;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
border-top: 1px solid #808080;
|
|
overscroll-behavior: contain;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.pane-view {
|
|
position: relative;
|
|
overscroll-behavior: contain;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.param {
|
|
border: 1px solid #CC0000;
|
|
margin: -1px;
|
|
}
|
|
|
|
.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;
|
|
-webkit-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: 0;
|
|
}
|
|
|
|
.urlbuilder .export-mode input {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.urlbuilder .export-mode label {
|
|
display: inline-block;
|
|
margin: 0 10px 10px;
|
|
}
|
|
|
|
.urlbuilder input[type=number] {
|
|
width: 60px;
|
|
text-align: right;
|
|
}
|
|
|
|
.urlbuilder .or {
|
|
display: block;
|
|
margin: 5px 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:before {
|
|
content: "\1F4CB";
|
|
}
|
|
|
|
.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;
|
|
color: #000000;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
svg a:active, svg a:hover {
|
|
fill: #0080CC;
|
|
}
|
|
|
|
.touch .pane-hold {
|
|
bottom: 50px;
|
|
}
|
|
|
|
.touch.keyinput .pane-hold {
|
|
bottom: 0;
|
|
}
|
|
|
|
.touch .pane-code {
|
|
border-top: 1px solid #808080;
|
|
}
|
|
|
|
.touch .pane-library {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
transition: top 0.2s ease;
|
|
}
|
|
|
|
.touch .urlbuilder {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 160px;
|
|
margin-bottom: 50px;
|
|
max-height: 100%;
|
|
left: 0;
|
|
transition: bottom 0.2s ease;
|
|
border-top: 1px solid #808080;
|
|
font-size: 1em;
|
|
background: #FFFFFF;
|
|
z-index: 10;
|
|
}
|
|
|
|
.touch.keyinput .urlbuilder {
|
|
margin-bottom: 0;
|
|
height: 180px;
|
|
}
|
|
|
|
.touch .urlbuilder input[type=number] {
|
|
text-align: left;
|
|
}
|
|
|
|
.touch .urlbuilder .output {
|
|
display: none;
|
|
}
|
|
|
|
.touch .urlbuilder .copy {
|
|
width: auto;
|
|
left: 10px;
|
|
height: 36px;
|
|
border-radius: 100px;
|
|
padding: 0;
|
|
line-height: 34px;
|
|
}
|
|
|
|
.touch.keyinput .copy {
|
|
bottom: 30px;
|
|
}
|
|
|
|
.touch .urlbuilder .copy:before {
|
|
content: "Copy URL to Clipboard \1F4CB";
|
|
}
|
|
|
|
.touch .urlbuilder .copy:active {
|
|
background: #FFFFFF;
|
|
box-shadow: none;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.touch .urlbuilder .copied {
|
|
height: 36px;
|
|
border-radius: 100px;
|
|
line-height: 34px;
|
|
}
|
|
|
|
.touch.keyinput .copied {
|
|
bottom: 30px;
|
|
}
|
|
|
|
.touch .options {
|
|
display: none;
|
|
}
|
|
|
|
.optbar {
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 50px;
|
|
box-sizing: border-box;
|
|
border-top: 1px solid #AAAAAA;
|
|
background: #FAFAFA;
|
|
font-size: 1.5em;
|
|
font-weight: 100;
|
|
z-index: 11;
|
|
}
|
|
|
|
.touch.keyinput .optbar {
|
|
display: none;
|
|
}
|
|
|
|
.optbar a:link, .optbar a:visited {
|
|
color: #5577FF;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.optbar a:active, .optbar a:hover {
|
|
color: #2244CC;
|
|
}
|
|
|
|
.optbar a {
|
|
display: inline-block;
|
|
width: 20%;
|
|
height: 49px;
|
|
line-height: 49px;
|
|
text-align: center;
|
|
}
|
|
|
|
.pick-document {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
padding: 20px 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.pick-document h1 {
|
|
font: 2em sans-serif;
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
.pick-document p {
|
|
font-size: 0.8em;
|
|
font-style: italic;
|
|
margin: 0 0 20px;
|
|
}
|
|
|
|
.pick-document-item {
|
|
display: inline-block;
|
|
width: 200px;
|
|
height: 200px;
|
|
margin: 10px;
|
|
user-select: none;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.pick-document-item > div {
|
|
width: 200px;
|
|
height: 200px;
|
|
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;
|
|
}
|
|
|
|
.pick-document-item.broken > div {
|
|
padding: 5px;
|
|
font: 6px monospace;
|
|
white-space: pre;
|
|
}
|
|
|
|
.pick-document-item svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.pick-document-item:hover > div {
|
|
border-color: #FFCC00 !important;
|
|
background: #FFFFDD;
|
|
transform: scale(1.1);
|
|
z-index: 10;
|
|
}
|
|
|
|
.pick-document-item.new {
|
|
text-align: center;
|
|
}
|
|
|
|
.pick-document-item.new > div:before {
|
|
content: '+';
|
|
line-height: 170px;
|
|
font-size: 120px;
|
|
color: #EEEEEE;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.pick-document-item.new:hover > div:before {
|
|
color: #FFCC00;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background: #222222;
|
|
color: #EEEEEE;
|
|
}
|
|
|
|
.drop-target:after {
|
|
background: rgba(64, 64, 64, 0.6);
|
|
text-shadow: 0 0 3px #000000;
|
|
border-color: #66AA55;
|
|
}
|
|
|
|
.pane-view, .pane-view-scroller {
|
|
background: #111111;
|
|
}
|
|
|
|
.pane-library, .pane-library-scroller {
|
|
background: #222222;
|
|
}
|
|
|
|
.pane-code .CodeMirror {
|
|
background: #222222;
|
|
}
|
|
|
|
.pane-code .editor-simple {
|
|
background: #222222;
|
|
color: #EEEEEE;
|
|
}
|
|
|
|
.param {
|
|
border-color: #AA0000;
|
|
}
|
|
|
|
.hover {
|
|
background: #807700;
|
|
}
|
|
|
|
.pane-view .region:hover .outline {
|
|
stroke: rgba(150, 140, 0, 0.5);
|
|
}
|
|
|
|
.pane-view .region.focus .outline {
|
|
stroke: rgba(190, 140, 0, 0.5);
|
|
}
|
|
|
|
.pane-view .region.focus:hover .outline {
|
|
stroke: rgba(170, 140, 0, 0.5);
|
|
}
|
|
|
|
.library-item > div {
|
|
border-color: #222222;
|
|
background: #111111;
|
|
}
|
|
|
|
.library-item:hover > div {
|
|
border-color: #FFCC00;
|
|
background: #444433;
|
|
}
|
|
|
|
.msg-error {
|
|
color: #440000;
|
|
background: #AA6666;
|
|
}
|
|
|
|
.pane-view svg, .library-item svg {
|
|
filter: invert(1) hue-rotate(180deg);
|
|
}
|
|
|
|
.options {
|
|
background: #333333;
|
|
}
|
|
|
|
.options, .options a, .urlbuilder {
|
|
border-color: #222222 !important;
|
|
}
|
|
|
|
.options a:link, .options a:visited {
|
|
color: #4488DD;
|
|
}
|
|
|
|
.options a:active, .options a:hover {
|
|
background: #444444;
|
|
color: #22AAFF;
|
|
}
|
|
|
|
.urlbuilder .message {
|
|
color: #AAAAAA;
|
|
}
|
|
|
|
.urlbuilder .or {
|
|
color: #999999;
|
|
}
|
|
|
|
.pick-document-item > div {
|
|
border-color: #999999;
|
|
background: #111111;
|
|
}
|
|
|
|
.pick-document-item:hover > div {
|
|
background: #444433;
|
|
}
|
|
|
|
.pick-document-item.new > div:before {
|
|
color: #999999;
|
|
}
|
|
|
|
.pane-view svg, .library-item svg, .pick-document-item svg {
|
|
filter: invert(1) hue-rotate(180deg);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
transition: none !important;
|
|
}
|
|
|
|
.pick-document-item:hover > div {
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
.drop-target:after {
|
|
display: none;
|
|
}
|
|
|
|
.pane-side {
|
|
display: none;
|
|
}
|
|
|
|
.pane-view {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.pane-view-scroller {
|
|
overflow: visible;
|
|
}
|
|
|
|
.pane-view-inner {
|
|
/* https://bugs.chromium.org/p/chromium/issues/detail?id=449512 */
|
|
/* (not using this workaround for now
|
|
* due to drastically lowered resolution) */
|
|
/*-webkit-filter: opacity(1);*/
|
|
}
|
|
|
|
.pane-view .region .outline {
|
|
stroke: none !important;
|
|
}
|
|
|
|
.options {
|
|
display: none;
|
|
}
|
|
}
|