58 lines
52 KiB
CSS
58 lines
52 KiB
CSS
|
|
||
|
|
* { 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 */
|
||
|
|
|
||
|
|
@font-face { font-family: 'input_mono_medium'; font-weight: normal; font-style: normal; font-display: swap; src: url(data:application/font-woff2;charset=utf-8;base64,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
|
||
|
|
|
||
|
|
body { padding: 0px; font-family: 'input_mono_medium'; -webkit-user-select: none; overflow: hidden; transition: background-color 500ms; -webkit-app-region: drag; padding: 30px;width:calc(100vw - 60px);height:calc(100vh - 60px)}
|
||
|
|
|
||
|
|
/* 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 }
|
||
|
|
|
||
|
|
#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; font-family: 'input_mono_medium';height:20px; padding:5px 0px;left:280px; overflow:hidden;}
|
||
|
|
#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; }
|
||
|
|
}
|