akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-23 07:10:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Layout styling

Browse Source
This commit is contained in:
Misode
2020-06-03 03:40:52 +02:00
parent 3520fe8bba
commit 12b4725ed4
4 changed files with 145 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
public/index.html
View File

@@ -4,14 +4,29 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles/global.css">
<link rel="stylesheet" href="./styles/nodes.css">
</head>
<body>
<div id="header"></div>
<hr>
<div id="view"></div>
<hr>
<div id="source" style="font-family: monospace;"></div>
<div class="container">
<div class="header">
<select id="model-selector" class="dropdown">
<option value="loot-table">Loot Table</option>
<option value="predicate">Predicate</option>
<option value="advancement">Advancement</option>
<option value="sandbox">Sandbox</option>
</select>
</div>
<div class="content">
<div class="tree" id="tree-view"></div>
<div class="source" id="source-view">
<div class="source-controls">
<button class="btn">Copy</button>
</div>
<textarea spellcheck="false" autocorrect="off" autocapitalize="off"></textarea>
</div>
</div>
</div>
<script src="./build/bundle.js"></script>
</body>
</html>

92
public/styles/global.css Normal file
View File

@@ -0,0 +1,92 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
background-color: #ffffff;
}
.header {
display: flex;
padding: 10px;
height: 56px;
/* background: #2e2e2e; */
border-bottom: 2px #ccc solid;
color: #343a40
}
.content {
display: flex;
height: calc(100vh - 56px);
overflow-y: hidden;
}
.tree {
padding: 1rem;
overflow-y: auto;
}
.source textarea {
width: 100%;
height: calc(100vh - 56px - 30px - 13px);
padding: 0.4rem;
border: none;
white-space: pre;
overflow-wrap: normal;
overflow-x: auto;
tab-size: 4;
-moz-tab-size: 4;
-o-tab-size: 4;
-webkit-tab-size: 4;
outline: none;
}
.source textarea::selection {
background-color: rgba(103, 134, 221, 0.6);
}
.source-controls {
padding: 0.4rem;
display: flex;
flex-direction: row-reverse;
}
.gutter.gutter-horizontal {
border-left: 2px solid #ccc;
float: left;
cursor: ew-resize;
}
.btn {
display: inline;
border: none;
color: #ffffff;
background: #5c615f;
padding: 7px 20px;
cursor: pointer;
outline: none;
transition: background-color 0.2s;
}
.btn:hover {
background: #787c7b;
}
.dropdown {
display: inline;
border: none;
color: #ffffff;
background: #5c615f;
padding: 7px 7px;
cursor: pointer;
outline: none;
font-size: 1rem;
transition: background-color 0.2s;
}
.dropdown:hover {
background: #787c7b;
}