Files
goodbuddy-shareserver/docs/demo/client/demo.css
T
lofyer 599a0a6645 docs: add workspace collaboration design and client demos
Document shared workspaces, realtime messaging, member handling, and source permissions. Include local interaction demos and verification scripts, and update development startup for Electron Node mode. Production collaboration services remain unimplemented.
2026-09-28 17:04:34 +08:00

2 lines
7.2 KiB
CSS

:root{font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;color:#233247;background:#f4f7fb;font-size:13px;--muted:#718095;--line:#e1e7ef;--blue:#3569dc;--soft:#edf3ff}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,a,input,textarea,select{outline-offset:4px}button{cursor:pointer}a{color:var(--blue);text-decoration:none}button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 14px;color:inherit}button:hover{background:#f1f5fb}button:disabled{opacity:.5;cursor:not-allowed}.primary{background:var(--blue);border-color:var(--blue);color:white}.primary:hover{background:#2859c2}.shell{display:grid;grid-template-columns:222px 1fr;min-height:100vh}.sidebar{background:#edf2f8;border-right:1px solid var(--line);padding:27px 18px;display:flex;flex-direction:column;gap:28px}.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:700;letter-spacing:-.6px}.logo{width:31px;height:31px;background:var(--blue);border-radius:10px;color:white;display:grid;place-items:center;font-size:20px}.nav-label,.eyebrow{font-size:11px;letter-spacing:1.6px;color:var(--muted);font-weight:600}.nav{display:grid;gap:7px;margin-top:12px}.nav a{padding:11px 13px;color:#627087;border-radius:9px}.nav a.active{background:#dfe9fc;color:#285fc7;font-weight:600}.sidebar-bottom{margin-top:auto;color:var(--muted);font-size:12px;line-height:1.8}.account{display:flex;align-items:center;gap:10px;margin-bottom:18px;color:#233247}.mini-avatar,.avatar{background:#dee9f5;color:#466b91;border:1px solid #cbdced;display:grid;place-items:center;border-radius:12px;font-weight:600}.mini-avatar{width:36px;height:36px}.avatar{width:64px;height:64px;font-size:24px;border-radius:21px}.topbar{height:65px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#ffffffb8;gap:12px}.crumb{color:var(--muted)}.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;background:#e9f5f1;color:#26745b;padding:5px 9px;border-radius:6px;white-space:nowrap}.badge.gray{background:#eef1f5;color:#738092}.content{max-width:1140px;margin:auto;padding:34px 36px 50px}.heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}h1{font-size:26px;letter-spacing:-.7px;margin:6px 0 10px;font-weight:650}h2{font-size:16px;margin:0 0 7px}h3{font-size:14px;margin:0 0 8px}p{line-height:1.75;margin:0;color:var(--muted)}.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:23px}.tab{border:0;background:transparent;border-radius:0;padding:12px 0;color:var(--muted);border-bottom:2px solid transparent}.tab.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}.panel{border:1px solid var(--line);border-radius:14px;background:white;padding:24px;margin-bottom:18px}.panel-head,.row{display:flex;align-items:center;justify-content:space-between;gap:18px}.panel-head{margin-bottom:19px}.row{padding:17px 0;border-top:1px solid #eef1f5}.row:last-child{padding-bottom:0}.row p{font-size:12px;margin-top:5px}.switch{appearance:none;width:36px;height:21px;border-radius:20px;background:#c7d0dc;position:relative;cursor:pointer;flex-shrink:0;transition:background .18s}.switch:before{content:"";position:absolute;width:15px;height:15px;border-radius:100%;background:white;top:3px;left:3px;transition:transform .18s}.switch:checked{background:var(--blue)}.switch:checked:before{transform:translateX(15px)}.columns{display:grid;grid-template-columns:minmax(0,1fr) 284px;gap:22px}.aside .panel{padding:21px}.aside p{font-size:12px}.flow{border-left:2px solid #dce7fc;padding-left:15px;margin:20px 0;display:grid;gap:20px}.flow strong{display:block;font-size:12px;margin-bottom:5px}.field{display:grid;gap:8px;margin-bottom:18px}.field:last-child{margin-bottom:0}.field>span{font-size:12px;font-weight:600}input[type=text],textarea,select,input[type=search]{width:100%;padding:10px 12px;border:1px solid #d5deea;border-radius:8px;background:#fff;color:inherit}textarea{resize:vertical;line-height:1.7;min-height:100px}.check{display:flex;gap:10px;align-items:flex-start;line-height:1.65}.check input{accent-color:var(--blue);margin-top:4px}.check small{display:block;color:var(--muted)}.notice{padding:12px 14px;background:#f2f6fd;border-radius:9px;color:#596f92;font-size:12px;line-height:1.7;margin-top:16px}.footer-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px}.muted{color:var(--muted);font-size:12px}.profile{display:flex;align-items:center;gap:18px;margin-bottom:24px}.profile h1{margin:0 0 7px}.split{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px}.source-list{display:grid;gap:10px;margin-top:16px}.source{width:100%;text-align:left;padding:16px;background:#fff}.source.active{border-color:#93afe9;background:#f0f5ff}.source strong{display:block;margin-bottom:8px}.source small{color:var(--muted);line-height:1.65}.source-icon{color:var(--blue);font-size:11px;margin-bottom:10px;letter-spacing:1px}.reader{min-height:450px}.reader article{padding:20px 0;line-height:1.9;color:#46576b;font-size:14px}.reader article h3{margin-top:20px}.reader article p{color:inherit;margin-bottom:15px}.chat{display:flex;flex-direction:column;min-height:430px}.messages{flex:1;display:grid;align-content:start;gap:15px;margin:20px 0}.message{padding:15px 17px;background:#f4f7fb;border-radius:0 12px 12px 12px;line-height:1.8;white-space:pre-wrap}.message.user{background:#edf3ff;margin-left:45px;border-radius:12px 0 12px 12px}.message small{display:block;color:var(--muted);margin-top:8px;font-size:11px}.composer{display:flex;gap:9px}.composer input{flex:1;min-width:0}.suggestions{display:flex;gap:8px;flex-wrap:wrap}.suggestions button{font-size:12px}.empty{padding:65px 24px;text-align:center}.empty h2{margin-bottom:12px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#253951;color:white;border-radius:10px;padding:12px 20px;box-shadow:0 6px 30px #1a2a4525;z-index:5;max-width:90vw}.save-state{color:#9a6a25;font-size:12px}.summary-line{display:flex;justify-content:space-between;margin-top:16px;font-size:12px;gap:10px}details{margin-top:15px}summary{cursor:pointer;color:#526a8b;font-size:12px}.record{font-size:12px;line-height:1.8;margin-top:12px;color:#63768e}.mobile-brand{display:none}[hidden]{display:none!important}@media(min-width:1450px){.content{padding-top:45px}}@media(max-width:1000px){.columns{grid-template-columns:1fr}.aside{display:grid;grid-template-columns:1fr 1fr;gap:16px}.split{grid-template-columns:245px 1fr}.content{padding:25px 24px}.topbar{padding:0 24px}.shell{grid-template-columns:190px 1fr}}@media(max-width:720px){.shell{display:block}.sidebar{display:none}.mobile-brand{display:inline;color:#233247;font-weight:700}.topbar{height:auto;min-height:60px;padding:14px 18px;flex-wrap:wrap}.content{padding:24px 16px}.heading{align-items:flex-start;flex-direction:column;gap:12px}h1{font-size:23px}.split,.aside{grid-template-columns:1fr}.source-list{grid-template-columns:1fr 1fr}.panel{padding:19px}.tabs{gap:20px}.footer-actions{align-items:flex-start;flex-wrap:wrap}.profile{align-items:flex-start}.avatar{width:50px;height:50px;flex-shrink:0}.composer{flex-wrap:wrap}.reader{min-height:0}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}