77 lines
4.3 KiB
HTML
77 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Ronin</title>
|
|
<style>
|
|
|
|
* { 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;}
|
|
body { margin:0px; padding:0px; overflow:hidden; font-family: monospace; background:000; -webkit-app-region: drag; -webkit-user-select: none; font-size:12px; transition: background 500ms}
|
|
*:focus { outline: none; }
|
|
#ronin { height: calc(100vh - 60px); width:calc(100vw - 60px); -webkit-app-region: drag; padding: 30px;overflow: hidden; }
|
|
#ronin #wrapper { overflow: hidden; position: relative; }
|
|
#ronin #wrapper #commander { z-index: 9000;position: relative;width: calc(50vw - 30px);height: calc(100vh - 60px);-webkit-app-region: no-drag;padding-right: 30px;transition: margin-left 250ms;}
|
|
#ronin #wrapper #commander textarea { background: none; width: 100%; height: calc(100vh - 105px); resize: none; font-size: 12px;line-height: 15px; padding-right: 15px}
|
|
#ronin #wrapper #commander #status { position: absolute; bottom: 0px; line-height: 15px; height: 30px; overflow: hidden; width: calc(100% - 75px); padding-left:45px;}
|
|
#ronin #wrapper #commander #status #eval { display: block; width: 26px; height: 26px; position: absolute; top: 0px; border-radius: 15px; left:0px; cursor: pointer; border:2px solid #fff; transition: background-color 250ms, border-color 250ms}
|
|
#ronin #wrapper #commander #status #eval:hover { background: none }
|
|
#ronin.expand #wrapper #commander { width:100%; }
|
|
#ronin #surface, #ronin #guide { position: absolute; top:0px; -webkit-user-select: none;-webkit-app-region: no-drag; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='1' fill='%23555'></circle></svg>"); background-size: 10px 10px; background-position: -4px -4px; width:100%; height:100%; transition: left 250ms, opacity 250ms; opacity: 1; }
|
|
#ronin.hidden #wrapper #commander { margin-left:-40vw; }
|
|
#ronin.hidden #surface, #ronin.hidden #guide { left:0; }
|
|
#ronin #guide.hidden { opacity: 0 }
|
|
#ronin.hidden #wrapper #commander { margin-left:-50vw; }
|
|
#ronin #surface,#ronin #guide { left:50vw; }
|
|
#ronin #guide { background:none; }
|
|
#ronin #surface { border-radius: 2px }
|
|
#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; }
|
|
body { background:var(--background); }
|
|
#ronin #wrapper { background: var(--background); }
|
|
#ronin #wrapper #commander { background:var(--background); }
|
|
#ronin #wrapper #commander textarea { color:var(--f_high); }
|
|
#ronin #wrapper #commander #status { color:var(--f_med); }
|
|
#ronin #wrapper #commander #status #source { color:var(--f_low); }
|
|
#ronin #wrapper #commander #status #eval { background-color: var(--b_inv); border-color: var(--b_inv) }
|
|
#ronin #wrapper #commander #status #eval.active { background:var(--f_high); border-color:var(--f_high); transition: none }
|
|
::selection { background-color:var(--b_inv); color:var(--f_inv); text-decoration:none }
|
|
@media (min-width: 720px) {
|
|
#ronin #wrapper #commander { width:350px; }
|
|
#ronin.hidden #wrapper #commander { margin-left:-380px; }
|
|
#ronin #surface,#ronin #guide { left:380px; }
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<script type="module">
|
|
|
|
import Client from './Client.js'
|
|
|
|
const client = new Client()
|
|
client.install(document.body)
|
|
window.addEventListener('load', () => {
|
|
client.start()
|
|
})
|
|
|
|
window.client = client
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|