348 lines
6.3 KiB
CSS
348 lines
6.3 KiB
CSS
page {
|
|
min-height: 100%;
|
|
background: #f3f5f7;
|
|
color: #182230;
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif;
|
|
}
|
|
|
|
:root {
|
|
--mobile-shell-max-width: 430px;
|
|
--surface: #ffffff;
|
|
--canvas: #f3f5f7;
|
|
--ink: #182230;
|
|
--muted: #647083;
|
|
--line: #dfe4ea;
|
|
--brand: #e60012;
|
|
--brand-pressed: #b8000f;
|
|
--knowledge: #315b8f;
|
|
--success: #168243;
|
|
--warning: #a86100;
|
|
--radius: 8px;
|
|
--employee-bg: #f4f6fb;
|
|
--employee-bg-soft: #f8fbff;
|
|
--employee-surface: #ffffff;
|
|
--employee-primary: #2f6bff;
|
|
--employee-primary-soft: #eaf1ff;
|
|
--employee-success: #34b368;
|
|
--employee-warning: #ff9b3d;
|
|
--employee-danger: #ff6b5f;
|
|
--employee-text: #182230;
|
|
--employee-muted: #6b7280;
|
|
--employee-line: rgba(47, 74, 117, 0.08);
|
|
--employee-card-radius: 24px;
|
|
--employee-chip-radius: 18px;
|
|
--employee-card-shadow: 0 16px 40px rgba(47, 107, 255, 0.1);
|
|
}
|
|
|
|
view,
|
|
text,
|
|
button {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
button {
|
|
margin: 0;
|
|
border: 0;
|
|
border-radius: var(--radius);
|
|
font-size: 16px;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
button::after {
|
|
border: 0;
|
|
}
|
|
|
|
button:focus-visible,
|
|
input:focus-visible,
|
|
textarea:focus-visible {
|
|
outline: 3px solid rgba(230, 0, 18, 0.35);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.page {
|
|
min-height: 100vh;
|
|
padding: 22px 16px 96px;
|
|
}
|
|
|
|
.employee-page-shell {
|
|
--employee-bg: #f3f5f7;
|
|
--employee-bg-soft: #fafafa;
|
|
--employee-primary: #e60012;
|
|
--employee-primary-soft: #fff0f1;
|
|
--employee-card-shadow: 0 16px 40px rgba(230, 0, 18, 0.08);
|
|
background: linear-gradient(180deg, var(--employee-bg-soft) 0%, var(--employee-bg) 100%);
|
|
}
|
|
|
|
.employee-card {
|
|
border: 1px solid var(--employee-line);
|
|
border-radius: var(--employee-card-radius);
|
|
background: var(--employee-surface);
|
|
box-shadow: var(--employee-card-shadow);
|
|
}
|
|
|
|
.employee-kicker {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: var(--employee-primary);
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.employee-section-title {
|
|
color: var(--employee-text);
|
|
font-size: 20px;
|
|
font-weight: 900;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.employee-section-subtitle {
|
|
color: var(--employee-muted);
|
|
font-size: 14px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.page-title {
|
|
display: block;
|
|
font-size: 26px;
|
|
font-weight: 900;
|
|
line-height: 1.2;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.page-subtitle {
|
|
display: block;
|
|
margin-top: 6px;
|
|
font-size: 14px;
|
|
line-height: 1.55;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.subpage-header {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
.subpage-heading {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.subpage-back-button {
|
|
display: flex;
|
|
flex: 0 0 40px;
|
|
width: 40px;
|
|
min-width: 40px;
|
|
height: 40px;
|
|
min-height: 40px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: var(--surface);
|
|
color: var(--ink);
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
.panel {
|
|
margin-top: 16px;
|
|
padding: 16px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: var(--surface);
|
|
box-shadow: 0 1px 2px rgba(24, 34, 48, 0.04);
|
|
}
|
|
|
|
.panel-title {
|
|
font-size: 17px;
|
|
font-weight: 900;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.muted {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.primary-button,
|
|
.secondary-button,
|
|
.ghost-button {
|
|
display: flex;
|
|
min-height: 46px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 16px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.primary-button {
|
|
background: var(--brand);
|
|
color: #ffffff;
|
|
box-shadow: 0 4px 10px rgba(231, 0, 20, 0.16);
|
|
}
|
|
|
|
.secondary-button {
|
|
border: 1px solid #c9d1db;
|
|
background: var(--surface);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.ghost-button {
|
|
background: #eef3f9;
|
|
color: #38506c;
|
|
}
|
|
|
|
.primary-button[disabled],
|
|
.secondary-button[disabled],
|
|
.ghost-button[disabled] {
|
|
opacity: 1;
|
|
border-color: #e1e4e8;
|
|
background: #f1f2f4;
|
|
box-shadow: none;
|
|
color: #9aa0a8;
|
|
}
|
|
|
|
.input {
|
|
width: 100%;
|
|
min-height: 46px;
|
|
padding: 0 14px;
|
|
border: 1px solid #c9d1db;
|
|
border-radius: var(--radius);
|
|
background: var(--surface);
|
|
color: var(--ink);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.textarea {
|
|
width: 100%;
|
|
min-height: 112px;
|
|
padding: 12px 14px;
|
|
border: 1px solid #c9d1db;
|
|
border-radius: var(--radius);
|
|
background: var(--surface);
|
|
color: var(--ink);
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.inline-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.chip-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.chip {
|
|
min-height: 36px;
|
|
padding: 0 12px;
|
|
border: 1px solid #dbe1e8;
|
|
border-radius: var(--radius);
|
|
background: #f8fafc;
|
|
color: #3d4b5f;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.status-message {
|
|
margin-top: 12px;
|
|
padding: 10px 12px;
|
|
border: 1px solid #f0d7a7;
|
|
border-left: 3px solid #d38a13;
|
|
border-radius: var(--radius);
|
|
background: #fffaf0;
|
|
color: #80520f;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.supervisor-access-panel {
|
|
border-left: 4px solid var(--brand);
|
|
}
|
|
|
|
.supervisor-access-copy {
|
|
display: block;
|
|
margin-top: 8px;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.supervisor-access-actions {
|
|
display: grid;
|
|
margin-top: 18px;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
.supervisor-access-actions button {
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding: 0 10px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.empty {
|
|
padding: 28px 12px;
|
|
color: var(--muted);
|
|
text-align: center;
|
|
}
|
|
|
|
.primary-button:active {
|
|
background: var(--brand-pressed);
|
|
}
|
|
|
|
uni-tabbar.uni-tabbar-bottom,
|
|
uni-tabbar.uni-tabbar-bottom .uni-tabbar {
|
|
border-top: 1px solid var(--line) !important;
|
|
background: rgba(255, 255, 255, 0.98) !important;
|
|
box-shadow: 0 -10px 30px rgba(47, 107, 255, 0.08);
|
|
}
|
|
|
|
@media (min-width: 520px) {
|
|
:root {
|
|
--mobile-shell-side-offset: calc((100vw - var(--mobile-shell-max-width)) / 2);
|
|
}
|
|
|
|
body {
|
|
background: #e5e7eb;
|
|
}
|
|
|
|
uni-app,
|
|
uni-page,
|
|
uni-page-body {
|
|
width: 100%;
|
|
max-width: var(--mobile-shell-max-width);
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
uni-app {
|
|
min-height: 100vh;
|
|
background: var(--canvas);
|
|
box-shadow: 0 0 0 1px rgba(24, 34, 48, 0.07), 0 16px 42px rgba(24, 34, 48, 0.1);
|
|
}
|
|
|
|
uni-tabbar.uni-tabbar-bottom {
|
|
right: var(--mobile-shell-side-offset);
|
|
left: var(--mobile-shell-side-offset);
|
|
width: auto;
|
|
max-width: none;
|
|
transform: none;
|
|
}
|
|
|
|
uni-tabbar.uni-tabbar-bottom .uni-tabbar {
|
|
right: var(--mobile-shell-side-offset);
|
|
left: var(--mobile-shell-side-offset);
|
|
width: auto;
|
|
max-width: none;
|
|
transform: none;
|
|
}
|
|
}
|