This repository has been archived on 2026-08-27. You can view files and clone it, but cannot push or open issues or pull requests.
Files
RECS-WEB-MODLE-REACT/app/markdown/MarkdownEditor.module.css
2026-08-27 20:15:24 +08:00

2 lines
8.9 KiB
CSS

.page{height:100vh;overflow:hidden;background:#f5f6f8;color:#272937;font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif}.page *{box-sizing:border-box}.page button,.page input,.page textarea{font:inherit}.topbar{height:58px;display:flex;align-items:center;padding:0 20px;border-bottom:1px solid #e3e5e9;background:#fff}.brand{display:flex;align-items:center;gap:8px;color:#292a36;text-decoration:none}.brand>span{width:30px;height:30px;display:grid;place-items:center;border-radius:7px;background:#242633;color:#fff;font-family:Georgia,serif;font-size:9px}.brand strong{font-family:Georgia,serif;font-size:14px}.topbar nav{height:100%;display:flex;align-items:stretch;gap:3px;margin-left:36px}.topbar nav a{position:relative;display:flex;align-items:center;padding:0 13px;color:#92949f;text-decoration:none;font-size:9px}.topbar nav .active,.topbar nav a:hover{color:#383946}.topbar nav .active:after{content:"";position:absolute;inset:auto 12px -1px;height:2px;background:#6460d8}.saveState{display:flex;align-items:center;gap:6px;margin-left:auto;color:#9a9ca6;font-size:8px}.saveState i{width:6px;height:6px;border-radius:50%;background:#e5a23b}.saveState .saved{background:#48a879}.headerActions{display:flex;align-items:center;gap:7px;margin-left:19px}.headerActions button{height:30px;padding:0 10px;border:1px solid #e0e1e6;border-radius:6px;background:#fff;color:#666875;cursor:pointer;font-size:8px}.headerActions .exportButton{border-color:#373844;background:#373844;color:#fff}.headerActions>span{width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:#e5e2ff;color:#5d55b0;font-size:8px}.workspace{height:calc(100vh - 58px);display:flex}.sidebar{width:235px;display:flex;flex-direction:column;flex:0 0 auto;border-right:1px solid #e1e3e7;background:#fafbfc}.sidebarHeader{height:59px;display:flex;align-items:center;justify-content:space-between;padding:0 16px}.sidebarHeader>div{display:flex;flex-direction:column;gap:3px}.sidebarHeader strong{font-size:10px}.sidebarHeader small{color:#a5a6af;font-size:7px}.sidebarHeader button{width:28px;height:28px;border:0;border-radius:6px;background:#615dcf;color:#fff;cursor:pointer}.search{height:31px;display:flex;align-items:center;gap:6px;margin:0 13px 11px;padding:0 8px;border:1px solid #e1e3e8;border-radius:6px;background:#fff;color:#a3a5ae}.search input{min-width:0;flex:1;border:0;outline:0;font-size:8px}.documentList{flex:1;overflow-y:auto;padding:0 8px}.documentList>p{margin:9px 8px;color:#aaaab2;font-size:7px;font-weight:700;letter-spacing:.6px}.documentList>button{width:100%;display:flex;align-items:center;gap:9px;padding:10px 8px;border:0;border-radius:7px;background:none;color:#666874;cursor:pointer;text-align:left}.documentList>button:hover{background:#f0f1f5}.documentList .documentActive{background:#ebeafd;color:#4f4aa6}.documentList>button>span{width:27px;height:27px;display:grid;place-items:center;flex:0 0 auto;border-radius:6px;background:#ececf1;color:#7e808a;font-family:Georgia,serif;font-size:8px}.documentActive>span{background:#dcd9ff!important;color:#5c53bf!important}.documentList>button>div{min-width:0;display:flex;flex:1;flex-direction:column;gap:3px}.documentList strong{overflow:hidden;font-size:8px;text-overflow:ellipsis;white-space:nowrap}.documentList small{color:#a4a6ae;font-size:6px}.documentList button>i{color:#b5b6bd;font-size:7px;font-style:normal}.noDocument{padding:30px 12px;color:#aaa;font-size:8px;text-align:center}.sidebarFooter{padding:10px;border-top:1px solid #e6e7eb}.sidebarFooter a,.sidebarFooter button{width:100%;display:block;padding:8px;border:0;border-radius:6px;background:none;color:#777986;text-decoration:none;cursor:pointer;text-align:left;font-size:8px}.sidebarFooter a:hover,.sidebarFooter button:hover{background:#f0f1f5}.editorArea{min-width:0;display:flex;flex:1;flex-direction:column;background:#fff}.documentHeader{height:59px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #e8e9ed}.documentHeader>div:first-child{min-width:0;display:flex;align-items:center;gap:10px}.documentHeader>div:first-child span{padding:4px 7px;border-radius:4px;background:#efedff;color:#655fc2;font-size:7px}.documentHeader input{min-width:0;width:370px;border:0;outline:0;color:#363743;font-size:13px;font-weight:700}.viewSwitch{display:flex;padding:3px;border-radius:6px;background:#f1f2f5}.viewSwitch button{height:25px;padding:0 10px;border:0;border-radius:4px;background:none;color:#9496a0;cursor:pointer;font-size:7px}.viewSwitch .viewActive{background:#fff;color:#4f4b99;box-shadow:0 2px 6px rgba(35,36,48,.08)}.toolbar{height:42px;display:flex;align-items:center;gap:7px;padding:0 13px;border-bottom:1px solid #e7e8ec;background:#fbfbfc}.toolbar>div{display:flex;gap:2px}.toolbar button{min-width:26px;height:26px;padding:0 6px;border:0;border-radius:4px;background:transparent;color:#676975;cursor:pointer;font-size:8px}.toolbar button:hover{background:#ebeaf8;color:#534fa4}.toolbar>i{width:1px;height:18px;background:#e1e2e7}.toolbarHint{margin-left:auto;color:#aaaab2;font-size:7px}.panes{min-height:0;display:grid;grid-template-columns:1fr 1fr;flex:1}.editorPane,.previewPane{min-width:0;overflow:auto}.editorPane{position:relative;display:flex;border-right:1px solid #e4e5e9;background:#fcfcfd}.lineNumbers{width:42px;display:flex;flex-direction:column;flex:0 0 auto;padding:26px 10px;border-right:1px solid #eff0f3;background:#f8f8fa;color:#b8b9c0;font-family:"Cascadia Code",Consolas,monospace;font-size:9px;line-height:1.85;text-align:right;user-select:none}.lineNumbers span{height:16.65px}.editorPane textarea{min-height:100%;flex:1;resize:none;padding:26px 24px;border:0;outline:0;background:transparent;color:#393b48;font-family:"Cascadia Code",Consolas,"Microsoft YaHei",monospace;font-size:9px;line-height:1.85;tab-size:2}.previewPane{padding:0;background:#fff}.view_edit,.view_preview{grid-template-columns:1fr}.view_edit .editorPane{border-right:0}.markdownBody{width:min(720px,calc(100% - 56px));margin:0 auto;padding:42px 0 80px;color:#4d4d59}.markdownBody h1{margin:0 0 25px;padding-bottom:12px;border-bottom:1px solid #e9e7ec;color:#262633;font-family:Georgia,"STSong",serif;font-size:25px}.markdownBody h2{margin:33px 0 15px;color:#2f2f3b;font-size:17px}.markdownBody h3{margin:27px 0 12px;color:#3b3b47;font-size:13px}.markdownBody p{margin:9px 0;font-size:10px;line-height:1.85}.markdownBody blockquote{margin:18px 0;padding:12px 16px;border-left:3px solid #7771dc;background:#f4f2ff;color:#5e5a78;font-size:10px;line-height:1.7}.markdownBody hr{height:1px;margin:28px 0;border:0;background:#e5e3e8}.markdownBody code{padding:2px 5px;border-radius:4px;background:#f1eff8;color:#695ab1;font-family:"Cascadia Code",Consolas,monospace;font-size:.9em}.markdownBody a{color:#5954bd;text-decoration:none;border-bottom:1px solid #aaa5e2}.markdownBody del{color:#9996a0}.unordered,.ordered{display:flex;gap:8px;margin:7px 0;padding-left:6px}.unordered>span,.ordered>span{width:14px;flex:0 0 auto;color:#6f68d4;font-size:10px;line-height:1.85}.unordered p,.ordered p{margin:0}.blank{height:7px}.codeFence{height:24px;margin-top:14px;padding:6px 10px;border-radius:6px 6px 0 0;background:#292b38;color:#9d9faf;font-family:monospace;font-size:6px;letter-spacing:1px}.codeLine{display:block!important;padding:2px 13px!important;border-radius:0!important;background:#292b38!important;color:#d5d7e3!important;font-size:9px!important;white-space:pre}.statusbar{height:26px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-top:1px solid #e5e6ea;background:#fafbfc;color:#9da0a9;font-size:6px}.statusbar>div{display:flex;align-items:center;gap:13px}.statusbar button{border:0;background:none;color:#8a8c97;cursor:pointer;font-size:6px}.toast{position:fixed;left:50%;bottom:19px;z-index:30;transform:translateX(-50%);padding:9px 15px;border-radius:18px;background:#2a2b38;color:#fff;box-shadow:0 10px 28px rgba(28,29,42,.2);font-size:8px}@media(max-width:850px){.topbar nav{display:none}.sidebar{width:190px}.documentHeader input{width:260px}.panes{grid-template-columns:1fr}.view_split .previewPane{display:none}.view_split .editorPane{border-right:0}}@media(max-width:600px){.topbar{padding:0 12px}.saveState{display:none}.headerActions button:first-child{display:none}.sidebar{position:absolute;z-index:5;bottom:0;left:0;top:58px;width:52px}.sidebarHeader{height:50px;padding:0 11px}.sidebarHeader>div,.search,.documentList button>div,.documentList button>i,.documentList>p,.sidebarFooter{display:none}.sidebarHeader button{width:30px}.documentList{padding:5px}.documentList>button{display:block;padding:6px}.documentList>button>span{width:30px;height:30px}.editorArea{margin-left:52px}.documentHeader{padding:0 10px}.documentHeader>div:first-child span{display:none}.documentHeader input{width:160px;font-size:10px}.viewSwitch button{padding:0 6px}.toolbar{overflow-x:auto}.toolbarHint{display:none}.editorPane textarea{padding:20px 14px}.lineNumbers{width:34px;padding:20px 7px}.markdownBody{width:calc(100% - 30px);padding-top:28px}}