2020-03-24 01:41:27 +00:00
|
|
|
* { margin:0;padding:0;border:0;outline:0;text-decoration:none;font-weight:inherit;font-style:inherit;color:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;list-style:none;border-collapse:collapse;border-spacing:0; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
|
|
|
|
|
|
|
|
|
|
/* Font */
|
|
|
|
|
|
2020-03-24 08:00:10 +00:00
|
|
|
@font-face {
|
|
|
|
|
font-family: 'input_mono_regular';
|
|
|
|
|
src: url(data:application/font-woff2;charset=utf-8;base64,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
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
font-style: normal;
|
|
|
|
|
font-display: swap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body { padding: 0px; font-family:"input_mono_regular",courier,monospace; -webkit-user-select: none; overflow: hidden; transition: background-color 500ms; -webkit-app-region: drag; padding: 30px;width:calc(100vw - 60px);height:calc(100vh - 60px)}
|
2020-03-24 01:41:27 +00:00
|
|
|
|
2020-03-24 08:00:10 +00:00
|
|
|
*:focus {outline: none; }
|
2020-03-24 01:41:27 +00:00
|
|
|
|
|
|
|
|
/* Core */
|
|
|
|
|
|
|
|
|
|
#guide { position: absolute;width: 300px;height: 300px; transition: opacity 150ms; -webkit-app-region: no-drag; border-radius: 3px;}
|
|
|
|
|
#render { display: none }
|
|
|
|
|
#vector { z-index: 1000;position: relative;width:300px; height:300px; }
|
|
|
|
|
|
|
|
|
|
/* Interface */
|
|
|
|
|
|
|
|
|
|
#interface { font-size: 11px;line-height: 30px;text-transform: uppercase;-webkit-app-region: no-drag; transition: all 150ms; width: 100%; position:fixed; bottom:30px; left:40px; height:30px; max-width:calc(100vw - 75px); overflow: hidden;}
|
|
|
|
|
#interface.hidden { bottom:10px !important;opacity: 0 !important }
|
|
|
|
|
#interface.visible { bottom:28px !important; opacity: 1 !important}
|
|
|
|
|
#interface #menu { opacity: 1; position: absolute; top:0px; transition: all 250ms; z-index: 900; overflow: hidden; height:30px; width:100%;}
|
|
|
|
|
#interface #menu svg.icon { width:30px; height:30px; margin-right:-9px; opacity: 0.6; transition: opacity 250ms; }
|
|
|
|
|
#interface #menu svg.icon.inactive { opacity: 0.2 }
|
|
|
|
|
#interface #menu svg.icon:hover { cursor: pointer; opacity: 1.0 }
|
|
|
|
|
#interface #menu svg.icon:last-child { margin-right: 0; }
|
|
|
|
|
#interface #menu svg.icon path { fill:none; stroke-linecap: round; stroke-linejoin: round; stroke-width:12px; }
|
|
|
|
|
#interface #menu svg.icon.source { float:right; margin-left:-2px; margin-right:0px; }
|
|
|
|
|
#interface #menu svg.icon#option_color { opacity: 1.0; z-index:1001; position: relative; }
|
|
|
|
|
#interface #menu svg.icon#option_color:hover { opacity: 0.8 }
|
|
|
|
|
|
2020-03-24 08:00:10 +00:00
|
|
|
#interface #picker { position: absolute; line-height: 20px; z-index: 0; width: 30px; opacity: 0; transition: all 250ms; font-size: 11px; border-radius: 3px; left: 200px; top: 0px; text-transform: uppercase; height:20px; padding:5px 0px;left:280px; overflow:hidden;}
|
2020-03-24 01:41:27 +00:00
|
|
|
#interface #picker:before { content:"#"; position: absolute; left:10px; opacity: 0; transition: opacity 500ms}
|
|
|
|
|
#interface #picker input { background:transparent; position: absolute; left: 20px; height: 20px; width: 60px; line-height: 20px; opacity: 0; transition: opacity 500ms; text-transform: uppercase;}
|
|
|
|
|
#interface #color_path { transition: all 500ms; }
|
|
|
|
|
#interface.picker #menu { z-index: 0 }
|
|
|
|
|
|
|
|
|
|
#interface.picker #picker { width:30px; padding: 5px 15px; padding-right: 45px; opacity: 1; z-index: 900; width: 50px; left:200px; opacity: 1}
|
|
|
|
|
#interface.picker #picker:before { opacity: 1; }
|
|
|
|
|
#interface.picker #picker input { opacity: 1 }
|
|
|
|
|
#interface.picker #option_thickness { opacity: 0 !important }
|
|
|
|
|
#interface.picker #option_mirror { opacity: 0 !important }
|
|
|
|
|
#interface.picker #option_fill { opacity: 0 !important }
|
|
|
|
|
|
|
|
|
|
/* Web Specific */
|
|
|
|
|
|
|
|
|
|
body.web #interface #menu #option_open { display: none; }
|
|
|
|
|
|
|
|
|
|
/* Ready */
|
|
|
|
|
|
|
|
|
|
body #guide { opacity: 0; transition: opacity 500ms; }
|
|
|
|
|
body.ready #guide { opacity: 1 }
|
|
|
|
|
body #interface { opacity: 0; transition: opacity 250ms, bottom 500ms; bottom:15px; }
|
|
|
|
|
body.ready #interface { opacity: 1; bottom:30px; }
|
|
|
|
|
|
|
|
|
|
@media (max-width: 560px) {
|
|
|
|
|
#interface #menu svg.icon.source { opacity: 0; }
|
|
|
|
|
}
|
2020-03-24 08:00:10 +00:00
|
|
|
|
|
|
|
|
/* Acels */
|
|
|
|
|
|
|
|
|
|
#acels { position: fixed;width: 30px;background: red;top: 0;left: 0; width: 100vw; color:black; background:white; font-size:11px; line-height: 20px; transition: margin-top 0.25s; z-index: 9999; padding-left: 25px; }
|
|
|
|
|
#acels.hidden { margin-top:-20px; }
|
|
|
|
|
#acels.hidden > li > ul > li { display: none }
|
|
|
|
|
#acels > li { float: left; position: relative; cursor: pointer; padding:0px 5px; display: inline-block; }
|
|
|
|
|
#acels > li:hover { background: black; color:white; }
|
|
|
|
|
#acels > li > ul { display: none; position: absolute; background:white; position: absolute; top:20px; left:0px; color:black; width: 200px}
|
|
|
|
|
#acels > li:hover > ul { display: block; }
|
|
|
|
|
#acels > li > ul > li { padding: 0px 10px; display: block }
|
|
|
|
|
#acels > li > ul > li:hover { background: #ccc; }
|
|
|
|
|
#acels > li > ul > li > i { display: inline-block; float: right; color: #aaa; }
|
