mesh css simplification
This commit is contained in:
Stewart Allen
parent
cbec4b2e87
commit
44933dd1b4
9 changed files with 115 additions and 141 deletions
|
|
@ -9,7 +9,7 @@
|
|||
}
|
||||
@font-face {
|
||||
font-family: 'Russo One';
|
||||
src: url('ext/russo-one.ttf');
|
||||
src: url('/moto/russo-one.ttf');
|
||||
}
|
||||
a, a:hover, a:visited {
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
@font-face {
|
||||
font-family: 'Russo One';
|
||||
src: url('/kiri/ext/russo-one.ttf');
|
||||
src: url('/moto/russo-one.ttf');
|
||||
}
|
||||
|
||||
a, a:hover, a:visited {
|
||||
|
|
@ -19,7 +19,7 @@ a, a:hover, a:visited {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
div {
|
||||
body, div {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
|
|
@ -30,20 +30,24 @@ div {
|
|||
#app {
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
font-weight: normal;
|
||||
flex-direction: column;
|
||||
font-family: sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: larger;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#app-info {
|
||||
z-index: 50;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
z-index: 50;
|
||||
cursor: pointer;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#app-info:hover #app-vers {
|
||||
|
|
@ -67,24 +71,58 @@ div {
|
|||
background-color: white;
|
||||
}
|
||||
|
||||
#app-info {
|
||||
cursor: pointer;
|
||||
#app-body {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#app-body > div {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#curtain {
|
||||
z-index: 50000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
position: fixed;
|
||||
background-color: #fff;
|
||||
font-family: 'Russo One', sans-serif;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#container {
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#container canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#top {
|
||||
z-index: 2;
|
||||
padding: 3px;
|
||||
flex-direction: row;
|
||||
font-family: 'Russo One', sans-serif;
|
||||
background-color: rgba(255,255,255,0.75);
|
||||
}
|
||||
|
||||
#top > div {
|
||||
margin: 0 5px 0 5px;
|
||||
}
|
||||
|
||||
#top-sep {
|
||||
z-index: 14;
|
||||
z-index: 2;
|
||||
height: 1px;
|
||||
background-image: var(--gradbar);
|
||||
}
|
||||
|
||||
#loading {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding-right: 15px;
|
||||
position: fixed;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.noselect {
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
|
@ -92,52 +130,6 @@ div {
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
.noshow {
|
||||
display: none;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
.f-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
.f-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
.grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.a-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.a-center {
|
||||
align-items: center;
|
||||
}
|
||||
.a-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.a-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
.j-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.j-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.j-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
.russo {
|
||||
font-family: 'Russo One', sans-serif;
|
||||
}
|
||||
|
||||
:-moz-any() {
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: hidden !important;
|
||||
|
|
@ -148,38 +140,3 @@ div {
|
|||
margin-right: -14px !important;
|
||||
margin-bottom: -14px !important;
|
||||
}
|
||||
|
||||
#curtain {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
position: fixed;
|
||||
background-color: #fff;
|
||||
font-family: 'Russo One', sans-serif;
|
||||
z-index: 50000;
|
||||
}
|
||||
|
||||
#container {
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#container canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#top {
|
||||
font-family: 'Russo One', sans-serif;
|
||||
background-color: rgba(255,255,255,0.75);
|
||||
padding: 3px;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
#top > div {
|
||||
margin: 0 5px 0 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,29 +6,28 @@
|
|||
<meta name="keywords" content="3d,mesh,editor,stl,obj,3mf" />
|
||||
<meta name="copyright" content="stewart allen [sa@grid.space]">
|
||||
<meta name="description" content="Browser-based 3D Mesh Editor">
|
||||
<meta property="og:description" content="Mesh:Tool is browser-based 3D Mesh Editor">
|
||||
<meta property="og:title" content="Browser-based 3D Mesh Editor">
|
||||
<meta property="og:description" content="Mesh:Tool is a browser-based 3D Mesh Editor">
|
||||
<meta property="og:title" content="Browser-based Mesh Editor">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://grid.space/mesh/">
|
||||
<meta property="og:image" content="https://static.grid.space/img/logo_km_og.png">
|
||||
<title>Mesh:Tool</title>
|
||||
<link rel="icon" href="/kiri/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="/kiri/favicon-mobile.png">
|
||||
<link rel="icon" href="/mesh/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="/mesh/index.css?{{version}}">
|
||||
<link href="/font/css/all.min.css" rel="stylesheet">
|
||||
<script src="/font/js/all.min.js" crossorigin="anonymous"></script>
|
||||
<script src="/code/mesh.js?{{version}}"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" class="f-col">
|
||||
<div id="curtain" class="j-center a-center"><img id="loading"/>loading...</div>
|
||||
<div id="app">
|
||||
<div id="curtain"><img id="loading"/>loading...</div>
|
||||
<div id="container"></div>
|
||||
<div id="top" class="f-row">
|
||||
<div id="app-info" class="f-col a-center">
|
||||
<div><div id="app-name"></div><div id="app-vers">version</div></div>
|
||||
<div id="top">
|
||||
<div id="app-info">
|
||||
<div id="app-name"></div><div id="app-vers">version</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="top-sep"></div>
|
||||
<div id="app-body"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue