8 lines
12 KiB
CSS
8 lines
12 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
:root{--ink:#29282c;--muted:#939095;--line:#e8e5e5;--purple:#572743;--wash:#f5eef3}*{box-sizing:border-box}body{margin:0;background:#f7f7f5;color:var(--ink);font-family:Arial,'PingFang SC',sans-serif;font-size:14px}button,input,textarea,select{font:inherit}button,a,label{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button{border:0;background:none;color:inherit}button:disabled{opacity:.6;cursor:wait}a{color:inherit;text-decoration:none}button:hover,a:hover,label:hover{color:var(--purple)}input:focus,textarea:focus,select:focus{outline:2px solid #b6a2b0;outline-offset:-2px}button:focus-visible,a:focus-visible,label:focus-within{outline:2px solid #8c5478;outline-offset:3px}header{height:82px;padding:0 4%;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:#fcfcfa}.brand{display:flex;align-items:center;font-weight:700;font-size:23px;letter-spacing:-1px;gap:10px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--purple);color:white}.local{font-size:9px;letter-spacing:1.5px;color:#99929a;margin-left:14px;border-left:1px solid var(--line);padding-left:22px}header>a{display:flex;gap:10px;align-items:center;font-size:12px;border:1px solid var(--line);border-radius:7px;padding:10px 15px}main{max-width:1560px;margin:auto;padding:43px 4% 0}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}.eyebrow{color:#927b8b;font-size:10px;letter-spacing:2px;font-weight:700}h1{font-size:34px;letter-spacing:-1.5px;font-weight:500;margin:13px 0 11px}h1 span{color:var(--purple)}.intro p{color:#88838a;font-size:12px;margin:0}.intro-meta{font-size:11px;color:#777078}.intro-meta small{display:block;font-size:9px;letter-spacing:1.5px;margin-top:12px;color:#aaa2a8;text-align:right}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#c7a56e;margin-right:7px;vertical-align:middle}.dot.ready{background:#70a08d}.intro-meta .dot{background:#8a9c8d}.workspace{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr);gap:24px;align-items:stretch}.panel{border:1px solid #e2dfe1;border-radius:13px;background:white;overflow:hidden;box-shadow:0 4px 24px #352a3510;display:flex;flex-direction:column;min-width:0}.panel-head{height:64px;display:flex;justify-content:space-between;align-items:center;padding:0 23px;border-bottom:1px solid var(--line)}.panel-head>div{display:flex;gap:12px;align-items:center}.panel-head strong{font-size:13px;font-weight:500}.step{font-size:11px;color:#a4939e;font-family:monospace}.muted{font-size:9px;letter-spacing:1.5px;color:#aaa3aa}.source-tabs{display:flex;gap:8px;margin:18px 23px}.source-tabs button,.source-tabs label{padding:9px 13px;font-size:11px;border-radius:6px;cursor:pointer;display:flex;gap:7px;align-items:center}.source-tabs .active{background:var(--wash);color:var(--purple)}.text-wrap{margin:0 23px 22px;flex:1;min-height:505px;border:1px solid var(--line);border-radius:8px;background:#fcfbf9;display:flex;flex-direction:column}.paper-label{padding:20px;color:#938b91;display:flex;align-items:center;gap:9px;font-size:11px;border-bottom:1px dashed #e4dfe0}.paper-label span{margin-left:auto;font-size:9px;border:1px solid #e3dedf;padding:3px 5px;border-radius:4px}.text-wrap textarea{width:100%;flex:1;resize:vertical;min-height:350px;background:transparent;border:0;padding:28px 23px;line-height:2.3;font-size:13px;color:#555059}.text-count{padding:12px 20px;font-size:10px;color:#aaa;text-align:right}.source-footer{margin-top:auto;padding:18px 23px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#9c949b}.source-footer button{color:#7b5670;font-size:10px}.toolbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);height:61px;padding:0 23px}.tabs{display:flex;gap:22px;height:100%}.tabs>button{position:relative;color:#969098;font-size:12px;padding:0 0}.tabs .active{color:var(--purple)}.tabs .active:after{position:absolute;content:'';height:2px;background:var(--purple);bottom:0;left:0;right:0}.tabs span{background:var(--wash);font-size:9px;padding:2px 5px;border-radius:3px;margin-left:5px}.icon{padding:7px;display:inline-flex;align-items:center;justify-content:center;color:#a49aa3}.config-body{padding:24px 23px;flex:1;min-height:500px}.section-heading h2{font-size:17px;margin:0 0 9px;font-weight:500}.section-heading p{font-size:11px;color:#9b939c;margin:0 0 24px;line-height:1.7}.field-table{border:1px solid var(--line);border-radius:8px;overflow:hidden}.table-head,.field-row{display:grid;grid-template-columns:minmax(90px,1fr) 94px minmax(90px,1.25fr) 32px;align-items:center}.table-head{background:#f8f7f8;color:#9c949c;font-size:10px;padding:12px 8px}.table-head span{padding-left:9px}.field-row{padding:6px 8px;min-height:56px;border-top:1px solid #efecee;gap:3px}.field-row input,.field-row select{min-width:0;width:100%;border:1px solid transparent;border-radius:4px;background:transparent;padding:9px 6px;font-size:11px}.field-row input:hover{border-color:var(--line)}.field-row select{border-color:#e8e2e7;color:#705667;padding:7px 5px;background:#fff}.field-row input:nth-child(3){color:#8a8089;font-size:10px}.children{background:#faf8fa;padding:10px}.child-label{display:flex;align-items:center;gap:5px;color:#a294a0;font-size:10px;padding:0 2px 7px}.child-label span{margin-left:5px;color:#976b89;background:#f1e9ef;border-radius:3px;padding:3px 4px}.child-label small{font-size:9px}.nested{border:1px solid #ece6eb;border-radius:5px;background:white}.nested .field-row{grid-template-columns:minmax(65px,1fr) 75px minmax(65px,1.1fr) 24px;min-height:44px;padding:4px}.nested .field-row input{font-size:10px;padding:6px 3px}.nested .field-row select{font-size:10px}.nested .children{padding:6px}.add-field{display:flex;gap:6px;align-items:center;justify-content:center;width:100%;padding:13px;border-top:1px solid var(--line);font-size:10px;color:#94748b}.schema-actions{display:flex;gap:15px;margin-top:15px;flex-wrap:wrap}.schema-actions button,.schema-actions label{display:flex;gap:5px;align-items:center;color:#968b94;font-size:9px;cursor:pointer}.schema-actions button:last-child{margin-left:auto}.tip{display:flex;gap:10px;background:#f8f6f8;border-radius:7px;padding:17px 14px;margin-top:27px;color:#94778b}.tip strong{font-size:10px;font-weight:500}.tip p{font-size:9px;margin:6px 0 0;color:#a79aa4;line-height:1.6}.run-area{border-top:1px solid var(--line);padding:20px 23px;background:#fdfcfd}.run-row{display:flex;justify-content:space-between;align-items:center}.run-row>div{font-size:10px;color:#8d7f89}.run-row small{display:block;margin:6px 0 0 14px;color:#b0a6ae;font-size:9px}.run{display:flex;gap:17px;align-items:center;background:var(--purple);color:white;border-radius:7px;padding:13px 19px;font-size:12px}.run:hover{color:white;background:#703757}.run-area>input{border:1px solid var(--line);padding:9px;border-radius:5px;width:100%;margin-bottom:14px}.error{background:#fff0eb;color:#a44d3a;padding:12px;border-radius:5px;font-size:11px;line-height:1.8;margin-bottom:12px}footer{display:flex;justify-content:space-between;color:#aaa1a9;font-size:9px;letter-spacing:.4px;padding:25px 0 30px}footer a{display:flex;gap:8px;align-items:center;color:#92728a}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#f7f4f7;border:1px solid var(--line);padding:18px;border-radius:7px;font-size:11px;line-height:1.8;max-height:480px;overflow:auto;color:#69485f}.result-tools{display:flex;gap:12px;align-items:center;font-size:10px;color:#9c8697}.result-tools>span{margin-right:auto}.result-tools button{display:flex;align-items:center;gap:5px}.empty{min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#b6a5b2}.empty p{font-size:12px;margin:20px}.empty button{color:#734c66;background:var(--wash);padding:10px 17px;border-radius:6px;font-size:11px}.preview{margin:0 23px 22px;min-height:505px;flex:1;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:#faf9f7}.file-info{display:flex;gap:10px;padding:15px;border-bottom:1px solid var(--line);font-size:11px}.file-info span{flex:1;word-break:break-all}.file-info small{display:block;color:#aaa;font-size:9px;margin-top:6px}.preview img{width:100%;max-height:550px;object-fit:contain}.preview iframe{width:100%;height:470px;border:0}.file-placeholder{display:grid;justify-items:center;padding:120px 0;color:#a793a2}.file-placeholder small{font-size:10px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:12px 22px;background:#49303e;color:#fff;display:flex;gap:8px;border-radius:7px;font-size:12px}.spinner{width:14px;height:14px;border:2px solid #ffffff50;border-top-color:white;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:1500px){.workspace{gap:30px}.config-body{padding:28px}.text-wrap{min-height:580px}}@media(max-width:900px){.workspace{grid-template-columns:1fr}.intro-meta{display:none}main{padding-top:30px}.text-wrap{min-height:340px}.text-wrap textarea{min-height:240px}.local{display:none}h1{font-size:29px}footer{gap:20px;line-height:1.8}}@media(max-width:480px){.panel-head,.toolbar{padding:0 14px}.config-body{padding:18px 10px}.field-row,.table-head{grid-template-columns:minmax(60px,1fr) 73px minmax(65px,1fr) 24px}.nested .field-row{grid-template-columns:minmax(50px,1fr) 66px minmax(50px,1fr) 22px}.source-footer{gap:10px}.run-area{padding:16px}footer{flex-direction:column}.schema-actions{gap:10px}.source-tabs{margin:16px}.text-wrap,.preview{margin:0 14px 18px}}
|
|
.task-card{background:#f6f0f5;border:1px solid #e6dbe3;border-radius:8px;padding:16px;margin-bottom:18px}.task-status{color:#76516a;font-size:11px}.task-card code{display:block;color:#a28c9d;font-size:9px;margin:9px 0;overflow-wrap:anywhere}.task-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.task-buttons button{display:flex;gap:5px;align-items:center;font-size:10px;background:white;border:1px solid #e1d5de;border-radius:5px;padding:8px 10px}.task-card details{font-size:10px;margin-top:14px;color:#94728a}.task-card summary{cursor:pointer}.view-switch{display:flex;gap:8px;margin:18px 0}.view-switch button{padding:7px 13px;border:1px solid var(--line);border-radius:5px;font-size:10px}.view-switch .active{background:var(--wash);color:var(--purple)}.result-table{border:1px solid var(--line);border-radius:7px;overflow:hidden;margin-bottom:18px}.table-title{display:flex;justify-content:space-between;padding:12px;background:#f8f5f8;font-size:11px;color:var(--purple)}.table-title button{font-size:10px}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;font-size:11px}td,th{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);white-space:pre-wrap;min-width:80px}th{font-weight:500;color:#9a8293;font-size:10px}td{color:#63555f}.tables{max-height:540px;overflow:auto}.tables>p{font-size:11px;color:#9b8895}
|
|
.pdf-viewer{width:100%;background:#eae7e9}.pdf-toolbar{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;background:#faf8fa;border-bottom:1px solid #ded6dc;padding:8px 10px}.pdf-toolbar>div{display:flex;align-items:center;gap:3px}.pdf-toolbar button{display:grid;place-items:center;min-width:28px;height:29px;border-radius:4px;font-size:11px}.pdf-toolbar button:hover{background:#eee5ed}.pdf-toolbar button:disabled{opacity:.3;cursor:default}.pdf-toolbar span{min-width:48px;text-align:center;font-size:11px;color:#87717f}.pdf-status{font-size:10px;color:#99838f;padding:8px 14px;text-align:center;min-height:30px}.pdf-pages{height:650px;max-height:75vh;overflow:auto;padding:0 16px 18px}.pdf-pages canvas{display:block;margin:0 auto;background:white;box-shadow:0 2px 12px #3e283b20}.pdf-message{padding:80px 22px;text-align:center;color:#947c8c;font-size:12px;line-height:1.8}.pdf-message button{border:1px solid #cbb9c5;background:white;padding:6px 13px;border-radius:5px}
|
|
.schema-library{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:18px}.schema-library select{flex:1;min-width:150px;border:1px solid var(--line);padding:8px;border-radius:5px;font-size:10px;color:#846779;background:white}.schema-library button{font-size:10px;color:#8b6680;border:1px solid var(--line);padding:8px;border-radius:5px}.schema-library button:disabled{opacity:.35;cursor:default}
|