Add src/styles.css
This commit is contained in:
bjkim committed
1 parent
65a01a8889
commit
abe1087eae
1 file changed
+335
+335
@@ -0,0 +1,335 @@
|
||||
/* Theme tokens */
|
||||
:root {
|
||||
color-scheme:dark;
|
||||
--bg:#101419;
|
||||
--panel:#171d24;
|
||||
--line:#29333e;
|
||||
--muted:#93a1ad;
|
||||
--text:#edf2f6;
|
||||
--accent:#66d6b2;
|
||||
--blue:#78a9ff
|
||||
}
|
||||
/* Base controls */
|
||||
* {
|
||||
box-sizing:border-box
|
||||
}
|
||||
body {
|
||||
margin:0;
|
||||
background:var(--bg);
|
||||
color:var(--text);
|
||||
font:14px/1.5 Inter,"Segoe UI",sans-serif
|
||||
}
|
||||
button,input,select {
|
||||
font:inherit
|
||||
}
|
||||
button {
|
||||
cursor:pointer;
|
||||
border:0;
|
||||
border-radius:8px;
|
||||
padding:10px 14px;
|
||||
background:var(--accent);
|
||||
color:#0b1714;
|
||||
font-weight:700
|
||||
}
|
||||
button:disabled {
|
||||
opacity:.4;
|
||||
cursor:not-allowed
|
||||
}
|
||||
/* App and preview layout */
|
||||
.app {
|
||||
min-height:100vh;
|
||||
display:grid;
|
||||
grid-template-columns:320px 1fr
|
||||
}
|
||||
.side {
|
||||
padding:16px 18px;
|
||||
border-right:1px solid var(--line);
|
||||
background:#13181e;
|
||||
overflow:auto
|
||||
}
|
||||
.brand {
|
||||
display:flex;
|
||||
gap:12px;
|
||||
align-items:center;
|
||||
margin-bottom:12px
|
||||
}
|
||||
.logo {
|
||||
width:38px;
|
||||
height:38px;
|
||||
border-radius:11px;
|
||||
background:#1e3f39;
|
||||
color:var(--accent);
|
||||
display:grid;
|
||||
place-items:center;
|
||||
font-weight:800;
|
||||
font-size:18px
|
||||
}
|
||||
.brand h1 {
|
||||
font-size:16px;
|
||||
line-height:1.25;
|
||||
margin:0
|
||||
}
|
||||
.brand p {
|
||||
font-size:12px;
|
||||
color:var(--muted);
|
||||
margin:3px 0 0
|
||||
}
|
||||
/* DXF input controls */
|
||||
.step {
|
||||
font-size:11px;
|
||||
color:var(--accent);
|
||||
font-weight:800;
|
||||
letter-spacing:.09em;
|
||||
text-transform:uppercase;
|
||||
margin:12px 0 6px
|
||||
}
|
||||
.drop {
|
||||
border:1px dashed #43515d;
|
||||
border-radius:12px;
|
||||
padding:10px 14px;
|
||||
text-align:center;
|
||||
background:#171f26;
|
||||
transition:.2s
|
||||
}
|
||||
.drop.drag {
|
||||
border-color:var(--accent);
|
||||
background:#1a2c29
|
||||
}
|
||||
.drop strong {
|
||||
display:block;
|
||||
margin-bottom:4px
|
||||
}
|
||||
.drop small {
|
||||
display:block;
|
||||
color:var(--muted)
|
||||
}
|
||||
.drop input {
|
||||
display:none
|
||||
}
|
||||
.pick {
|
||||
display:inline-block;
|
||||
margin-top:6px;
|
||||
padding:7px 12px;
|
||||
border-radius:7px;
|
||||
background:#27333c;
|
||||
color:var(--text);
|
||||
cursor:pointer
|
||||
}
|
||||
.fileline {
|
||||
font-size:12px;
|
||||
color:#b9c6cf;
|
||||
margin-top:5px;
|
||||
overflow-wrap:anywhere
|
||||
}
|
||||
.field {
|
||||
margin:7px 0
|
||||
}
|
||||
.field label {
|
||||
display:block;
|
||||
color:#c5cfd7;
|
||||
font-size:12px;
|
||||
margin-bottom:4px
|
||||
}
|
||||
.field select,.field input {
|
||||
width:100%;
|
||||
height:36px;
|
||||
padding:0 10px;
|
||||
border-radius:7px;
|
||||
border:1px solid #34414c;
|
||||
background:#10161b;
|
||||
color:var(--text);
|
||||
outline:none
|
||||
}
|
||||
.field select:focus,.field input:focus {
|
||||
border-color:var(--accent)
|
||||
}
|
||||
.grid2 {
|
||||
display:grid;
|
||||
grid-template-columns:1fr 1fr;
|
||||
gap:8px
|
||||
}
|
||||
.check {
|
||||
display:flex;
|
||||
gap:8px;
|
||||
align-items:center;
|
||||
color:#bec9d1;
|
||||
font-size:12px;
|
||||
margin:7px 0
|
||||
}
|
||||
.check input {
|
||||
accent-color:var(--accent)
|
||||
}
|
||||
.primary {
|
||||
width:100%;
|
||||
margin-top:5px
|
||||
}
|
||||
.status {
|
||||
min-height:20px;
|
||||
color:var(--muted);
|
||||
font-size:12px;
|
||||
margin-top:5px
|
||||
}
|
||||
.status.error {
|
||||
color:#ff9c91
|
||||
}
|
||||
.hint {
|
||||
font-size:11px;
|
||||
color:#82919c;
|
||||
margin-top:12px
|
||||
}
|
||||
/* Preview and generated parts */
|
||||
.main {
|
||||
min-width:0;
|
||||
display:flex;
|
||||
flex-direction:column
|
||||
}
|
||||
.top {
|
||||
height:70px;
|
||||
border-bottom:1px solid var(--line);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
padding:0 22px
|
||||
}
|
||||
.top h2 {
|
||||
font-size:15px;
|
||||
margin:0
|
||||
}
|
||||
.top small {
|
||||
color:var(--muted)
|
||||
}
|
||||
.toolbar {
|
||||
display:flex;
|
||||
gap:8px
|
||||
}
|
||||
.secondary {
|
||||
background:#27323c;
|
||||
color:#dce5eb;
|
||||
font-size:12px;
|
||||
padding:8px 11px
|
||||
}
|
||||
.viewer {
|
||||
position:relative;
|
||||
flex:1;
|
||||
min-height:420px;
|
||||
background:radial-gradient(ellipse at 50% 42%,#1b242c 0,#12181e 60%,#101419 100%)
|
||||
}
|
||||
#viewport {
|
||||
position:absolute;
|
||||
inset:0
|
||||
}
|
||||
.empty {
|
||||
position:absolute;
|
||||
inset:0;
|
||||
display:grid;
|
||||
place-items:center;
|
||||
text-align:center;
|
||||
pointer-events:none
|
||||
}
|
||||
.emptybox {
|
||||
max-width:370px;
|
||||
padding:22px
|
||||
}
|
||||
.emptyicon {
|
||||
font-size:36px;
|
||||
color:#536470
|
||||
}
|
||||
.empty h3 {
|
||||
font-size:17px;
|
||||
margin:8px 0
|
||||
}
|
||||
.empty p {
|
||||
color:var(--muted);
|
||||
font-size:13px
|
||||
}
|
||||
.hidden {
|
||||
display:none!important
|
||||
}
|
||||
.badge {
|
||||
position:absolute;
|
||||
left:18px;
|
||||
top:16px;
|
||||
background:#131a20dd;
|
||||
border:1px solid var(--line);
|
||||
border-radius:7px;
|
||||
padding:7px 10px;
|
||||
color:#c2cdd5;
|
||||
font-size:11px
|
||||
}
|
||||
.legend {
|
||||
position:absolute;
|
||||
right:18px;
|
||||
top:16px;
|
||||
background:#131a20dd;
|
||||
border:1px solid var(--line);
|
||||
border-radius:8px;
|
||||
padding:10px 12px;
|
||||
font-size:11px;
|
||||
color:#bdc8d0
|
||||
}
|
||||
.legend span {
|
||||
display:inline-block;
|
||||
width:8px;
|
||||
height:8px;
|
||||
border-radius:50%;
|
||||
background:var(--accent);
|
||||
margin-right:6px
|
||||
}
|
||||
/* Generated parts and footer */
|
||||
.partslist {
|
||||
margin-top:14px;
|
||||
padding:11px;
|
||||
border:1px solid var(--line);
|
||||
border-radius:9px;
|
||||
background:#10161b
|
||||
}
|
||||
.partslist b {
|
||||
display:block;
|
||||
font-size:12px;
|
||||
margin-bottom:7px
|
||||
}
|
||||
.partrow {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:8px;
|
||||
padding:4px 0;
|
||||
color:#c6d1d8;
|
||||
font-size:12px
|
||||
}
|
||||
.partrow input {
|
||||
accent-color:var(--accent)
|
||||
}
|
||||
.swatch {
|
||||
width:9px;
|
||||
height:9px;
|
||||
border-radius:2px;
|
||||
display:inline-block
|
||||
}
|
||||
.footer {
|
||||
border-top:1px solid var(--line);
|
||||
padding:13px 20px;
|
||||
color:var(--muted);
|
||||
font-size:11px;
|
||||
display:flex;
|
||||
justify-content:space-between
|
||||
}
|
||||
.toast {
|
||||
color:var(--accent)
|
||||
}
|
||||
/* Responsive layout */
|
||||
@media(max-width:850px) {
|
||||
.app {
|
||||
grid-template-columns:1fr
|
||||
}
|
||||
.side {
|
||||
border-right:0;
|
||||
border-bottom:1px solid var(--line);
|
||||
padding:18px
|
||||
}
|
||||
.main {
|
||||
min-height:65vh
|
||||
}
|
||||
.top {
|
||||
height:58px
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user