forked from bai/curriculum-project-hub
ymy
139 lines
5.8 KiB
TypeScript
139 lines
5.8 KiB
TypeScript
/**
|
|
* 全局共享 UI 主题(老师端 /app、管理员后台 /database、文件页 /database/library)。
|
|
*
|
|
* 方向:高级简约、零视觉疲劳 —— 暖白底、发丝边框、近黑主按钮(唯一强调色)、
|
|
* 无渐变、无彩色、无阴影(弹层仅一丝)、Inter 全界面、克制的动效。
|
|
* 所有页面的设计令牌收敛于此,调色只改这里。
|
|
*/
|
|
|
|
export const UI_HEAD_FONTS = `
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
|
|
`;
|
|
|
|
export const UI_THEME_CSS = `
|
|
:root {
|
|
--bg: #FCFCFB;
|
|
--panel: #FFFFFF;
|
|
--sidebar: #F7F7F5;
|
|
--text: #1A1A18;
|
|
--text-2: #6B6A66;
|
|
--text-3: #9C9B96;
|
|
--border: #ECECE8;
|
|
--border-soft: #F1F1EE;
|
|
--hover: #F4F4F1;
|
|
--selected: #EBEBE7;
|
|
--accent: #1A1A18;
|
|
--accent-hover: #333330;
|
|
--danger: #A13A33;
|
|
--guide: #E9E9E5;
|
|
--diff-add-bg: #F3F6F2;
|
|
--diff-add-text: #4A6741;
|
|
--diff-del-bg: #F8F2F1;
|
|
--diff-del-text: #A13A33;
|
|
--sans: 'Inter', -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
--shadow-pop: 0 4px 20px rgba(26,26,24,.07);
|
|
}
|
|
* { box-sizing: border-box; }
|
|
html, body { margin: 0; height: 100%; }
|
|
body {
|
|
font-family: var(--sans);
|
|
background: var(--bg); color: var(--text);
|
|
font-size: 14px; line-height: 1.65;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.hidden { display: none !important; }
|
|
h1, h2, h3 { margin: 0; }
|
|
a { color: var(--text); text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
|
|
/* 按钮:近黑实心(主)/ 发丝边幽灵(次)/ 文字型(危险) */
|
|
.btn {
|
|
display: inline-flex; align-items: center; gap: 5px;
|
|
padding: 6px 14px; border-radius: 8px;
|
|
border: 1px solid var(--border); background: var(--panel);
|
|
color: var(--text); font-size: 12.5px; font-weight: 500;
|
|
cursor: pointer; transition: all 120ms ease; text-decoration: none;
|
|
}
|
|
.btn:hover { background: var(--hover); text-decoration: none; }
|
|
.btn-primary {
|
|
background: var(--accent); border-color: var(--accent); color: #fff;
|
|
}
|
|
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
|
|
.btn-danger { border-color: transparent; background: transparent; color: var(--danger); }
|
|
.btn-danger:hover { background: #A13A3312; }
|
|
|
|
/* 面板与标签 */
|
|
.panel {
|
|
background: var(--panel); border: 1px solid var(--border-soft);
|
|
border-radius: 10px; padding: 20px 22px;
|
|
}
|
|
.tag {
|
|
font-size: 10.5px; font-weight: 500; font-family: var(--mono);
|
|
padding: 2px 8px; border-radius: 999px;
|
|
border: 1px solid var(--border-soft); color: var(--text-3); background: var(--panel);
|
|
}
|
|
.tag-role { color: var(--text-2); border-color: var(--border); }
|
|
|
|
/* 页签 */
|
|
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-soft); margin-bottom: 18px; }
|
|
.tab {
|
|
padding: 8px 14px; font-size: 13px; color: var(--text-3);
|
|
border: none; background: none; cursor: pointer;
|
|
border-bottom: 2px solid transparent; margin-bottom: -1px;
|
|
transition: color 120ms ease;
|
|
}
|
|
.tab:hover { color: var(--text); }
|
|
.tab.active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
|
|
|
|
/* 表单 */
|
|
.input, .select, .textarea {
|
|
width: 100%; padding: 7px 11px; border-radius: 8px;
|
|
border: 1px solid var(--border); background: var(--panel);
|
|
font-size: 13px; color: var(--text); font-family: inherit;
|
|
outline: none; transition: border-color 120ms ease;
|
|
}
|
|
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); }
|
|
.textarea { font-family: var(--mono); font-size: 12.5px; line-height: 1.75; resize: vertical; }
|
|
.form-label { display: block; font-size: 11.5px; color: var(--text-3); margin-bottom: 4px; }
|
|
.form-row { margin-bottom: 12px; }
|
|
.inline-form { display: flex; gap: 8px; align-items: center; }
|
|
.inline-form .input { flex: 1; }
|
|
|
|
/* 表格 */
|
|
table.list { width: 100%; border-collapse: collapse; font-size: 13px; }
|
|
table.list th { text-align: left; font-size: 11.5px; font-weight: 500; color: var(--text-3); padding: 4px 0; }
|
|
table.list td { padding: 8px 0; border-top: 1px solid var(--border-soft); }
|
|
table.list tr:first-child td { border-top: none; }
|
|
|
|
/* 弹层 */
|
|
.modal-mask {
|
|
position: fixed; inset: 0; z-index: 40;
|
|
background: rgba(26,26,24,.3);
|
|
display: flex; align-items: center; justify-content: center; padding: 16px;
|
|
}
|
|
.modal-card {
|
|
width: 100%; max-width: 430px; background: var(--panel);
|
|
border: 1px solid var(--border-soft); border-radius: 14px; padding: 22px;
|
|
box-shadow: var(--shadow-pop);
|
|
}
|
|
.modal-title { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
|
|
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
|
|
.toast {
|
|
border-radius: 8px; padding: 8px 16px; font-size: 12.5px; color: #fff;
|
|
background: #333230; max-width: 330px;
|
|
}
|
|
.toast-err { background: #7E2C26; }
|
|
#toast-root { position: fixed; bottom: 18px; right: 18px; z-index: 50; display: flex; flex-direction: column; gap: 8px; }
|
|
|
|
.quiet { color: var(--text-3); font-size: 12.5px; }
|
|
.divider { border-top: 1px solid var(--border-soft); margin: 14px 0; }
|
|
.section-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
|
|
.section-note { font-size: 11.5px; color: var(--text-3); margin-top: 6px; }
|
|
.file-path { font-family: var(--mono); font-size: 12.5px; color: var(--text); }
|
|
.file-meta { font-size: 11px; color: var(--text-3); font-family: var(--mono); }
|
|
.link-danger { color: var(--danger); font-size: 12.5px; background: none; border: none; cursor: pointer; padding: 0; }
|
|
.link-danger:hover { text-decoration: underline; }
|
|
`;
|