582 lines
11 KiB
CSS
582 lines
11 KiB
CSS
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
min-width: 320px;
|
||
background: #f5f5f7;
|
||
}
|
||
|
||
body {
|
||
min-width: 320px;
|
||
overflow-x: hidden;
|
||
background: #f5f5f7;
|
||
font-family:
|
||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
#root {
|
||
min-height: 100vh;
|
||
}
|
||
|
||
img,
|
||
svg,
|
||
canvas {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.app-shell,
|
||
.app-main,
|
||
.app-content {
|
||
min-width: 0;
|
||
}
|
||
|
||
.app-sidebar {
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.app-content > * {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.ant-card,
|
||
.ant-card-body,
|
||
.ant-tabs,
|
||
.ant-tabs-content-holder,
|
||
.ant-tabs-content,
|
||
.ant-tabs-tabpane {
|
||
min-width: 0;
|
||
}
|
||
|
||
.app-header {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
.route-dock {
|
||
position: sticky;
|
||
top: 64px;
|
||
z-index: 90;
|
||
min-width: 0;
|
||
height: 44px;
|
||
padding: 6px 12px;
|
||
overflow: hidden;
|
||
background: #f5f5f7;
|
||
border-bottom: 1px solid #e5e5e7;
|
||
}
|
||
|
||
.route-dock .ant-tabs {
|
||
height: 32px;
|
||
}
|
||
|
||
.route-dock .ant-tabs-nav {
|
||
height: 32px;
|
||
margin: 0;
|
||
}
|
||
|
||
.route-dock .ant-tabs-nav::before {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.route-dock .ant-tabs-tab {
|
||
min-width: 112px;
|
||
max-width: 220px;
|
||
height: 32px;
|
||
margin: 0 6px 0 0 !important;
|
||
padding: 0 10px 0 12px !important;
|
||
overflow: hidden;
|
||
background: rgba(255, 255, 255, 0.58) !important;
|
||
border: 1px solid transparent !important;
|
||
border-radius: 7px !important;
|
||
transition:
|
||
background-color 160ms ease,
|
||
border-color 160ms ease,
|
||
box-shadow 160ms ease !important;
|
||
}
|
||
|
||
.route-dock .ant-tabs-tab:hover {
|
||
background: rgba(255, 255, 255, 0.9) !important;
|
||
border-color: #dedee2 !important;
|
||
}
|
||
|
||
.route-dock .ant-tabs-tab-active {
|
||
background: #fff !important;
|
||
border-color: #d8d8dc !important;
|
||
box-shadow:
|
||
inset 0 2px 0 #1677ff,
|
||
0 2px 7px rgba(29, 29, 31, 0.08);
|
||
}
|
||
|
||
.route-dock .ant-tabs-tab-btn {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
color: #4d4d4d;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.route-dock .ant-tabs-tab-remove {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex: 0 0 auto;
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-left: 8px;
|
||
border-radius: 50%;
|
||
transition: background-color 140ms ease;
|
||
}
|
||
|
||
.route-dock .ant-tabs-tab-remove:hover {
|
||
background: #ededf0;
|
||
}
|
||
|
||
.route-dock .ant-tabs-content-holder {
|
||
display: none;
|
||
}
|
||
|
||
/* Shared responsive toolbar: add these classes to page filter/action rows. */
|
||
.responsive-toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.responsive-toolbar__group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.student-form-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
column-gap: 20px;
|
||
}
|
||
|
||
.student-form-grid .ant-form-item {
|
||
min-width: 0;
|
||
}
|
||
|
||
@media (max-width: 575px) {
|
||
.student-form-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.ant-drawer-content-wrapper {
|
||
max-width: 100vw !important;
|
||
}
|
||
|
||
.ant-pagination {
|
||
row-gap: 8px;
|
||
}
|
||
|
||
/* Data tables own their horizontal scroll instead of widening the page. */
|
||
.ant-table-wrapper {
|
||
width: 100%;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.ant-table-wrapper .ant-table-content {
|
||
overscroll-behavior-inline: contain;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
/* Keep wide tables scrollable without showing a heavy bar on every table. */
|
||
.ant-table-wrapper .ant-table-content {
|
||
scrollbar-color: transparent transparent;
|
||
scrollbar-width: thin;
|
||
}
|
||
|
||
.ant-table-wrapper .ant-table-content::-webkit-scrollbar {
|
||
height: 6px;
|
||
}
|
||
|
||
.ant-table-wrapper .ant-table-content::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
.ant-table-wrapper .ant-table-content::-webkit-scrollbar-thumb {
|
||
background: transparent;
|
||
border-radius: 999px;
|
||
}
|
||
|
||
.ant-table-wrapper:hover .ant-table-content,
|
||
.ant-table-wrapper:focus-within .ant-table-content {
|
||
scrollbar-color: #c8c8cc transparent;
|
||
}
|
||
|
||
.ant-table-wrapper:hover .ant-table-content::-webkit-scrollbar-thumb,
|
||
.ant-table-wrapper:focus-within .ant-table-content::-webkit-scrollbar-thumb {
|
||
background: #c8c8cc;
|
||
}
|
||
|
||
/* ── 表格单元格省略号截断（按需启用） ──
|
||
在 .ant-table-wrapper 上添加 .table-cell-ellipsis 类即可生效：
|
||
<Table className="table-cell-ellipsis" ... /> */
|
||
.table-cell-ellipsis .ant-table-thead > tr > th,
|
||
.table-cell-ellipsis .ant-table-tbody > tr > td {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* 操作列按钮不换行 */
|
||
.ant-table-wrapper .ant-table-cell .ant-space {
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
/* ── 宿舍总览卡片：Tag 溢出截断 ── */
|
||
.room-card-tag-wrapper {
|
||
overflow: hidden;
|
||
}
|
||
.room-card-tag-wrapper .ant-tag {
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
.room-card-tag-wrapper .ant-tag .anticon {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* === 手机 (< 576px) === */
|
||
@media (max-width: 575px) {
|
||
.app-header {
|
||
height: 56px;
|
||
padding-inline: 8px !important;
|
||
line-height: 56px;
|
||
}
|
||
|
||
.route-dock {
|
||
top: 56px;
|
||
height: 42px;
|
||
padding: 5px 8px;
|
||
}
|
||
|
||
.route-dock .ant-tabs-tab {
|
||
min-width: 104px;
|
||
}
|
||
|
||
.app-header .ant-btn {
|
||
width: 40px;
|
||
min-height: 40px;
|
||
padding-inline: 0;
|
||
}
|
||
|
||
.app-content {
|
||
min-height: calc(100dvh - 72px);
|
||
margin: 8px !important;
|
||
padding: 12px !important;
|
||
border-radius: 10px !important;
|
||
}
|
||
|
||
.app-navigation-drawer .ant-drawer-header {
|
||
padding-inline: 16px;
|
||
}
|
||
|
||
.responsive-toolbar {
|
||
align-items: stretch;
|
||
flex-direction: column;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.responsive-toolbar__group,
|
||
.responsive-toolbar > .ant-space {
|
||
width: 100%;
|
||
}
|
||
|
||
.responsive-toolbar__group > .ant-space-item,
|
||
.responsive-toolbar > .ant-space > .ant-space-item {
|
||
flex: 1 1 140px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.responsive-toolbar .ant-input,
|
||
.responsive-toolbar .ant-input-affix-wrapper,
|
||
.responsive-toolbar .ant-input-search,
|
||
.responsive-toolbar .ant-picker,
|
||
.responsive-toolbar .ant-select,
|
||
.responsive-toolbar .ant-upload,
|
||
.responsive-toolbar .ant-upload-wrapper,
|
||
.responsive-toolbar .ant-btn {
|
||
width: 100% !important;
|
||
}
|
||
|
||
.ant-btn:not(.ant-btn-sm),
|
||
.ant-input-affix-wrapper,
|
||
.ant-input-search-button,
|
||
.ant-picker,
|
||
.ant-select-single .ant-select-selector {
|
||
min-height: 40px;
|
||
}
|
||
|
||
.ant-table {
|
||
font-size: 13px;
|
||
}
|
||
.ant-table-cell {
|
||
padding: 8px 6px !important;
|
||
}
|
||
.ant-descriptions-item-label,
|
||
.ant-descriptions-item-content {
|
||
font-size: 13px;
|
||
}
|
||
.ant-modal {
|
||
top: 12px;
|
||
max-width: calc(100vw - 16px) !important;
|
||
margin: 0 auto !important;
|
||
padding-bottom: 12px;
|
||
}
|
||
.ant-modal .ant-modal-content {
|
||
padding: 16px;
|
||
}
|
||
.ant-modal .ant-modal-body {
|
||
max-height: calc(100dvh - 180px);
|
||
overflow-y: auto;
|
||
overscroll-behavior: contain;
|
||
}
|
||
.ant-modal .ant-modal-footer {
|
||
display: flex;
|
||
}
|
||
.ant-modal .ant-modal-footer .ant-btn {
|
||
flex: 1;
|
||
min-height: 40px;
|
||
}
|
||
.ant-drawer .ant-drawer-header {
|
||
padding: 14px 16px;
|
||
}
|
||
.ant-drawer .ant-drawer-body {
|
||
padding: 16px;
|
||
overscroll-behavior: contain;
|
||
}
|
||
.ant-popover,
|
||
.ant-picker-dropdown {
|
||
max-width: calc(100vw - 16px);
|
||
}
|
||
.ant-pagination {
|
||
justify-content: center;
|
||
}
|
||
.ant-pagination .ant-pagination-options {
|
||
margin-inline-start: 0;
|
||
}
|
||
.ant-alert {
|
||
padding: 10px 12px;
|
||
}
|
||
h1 {
|
||
font-size: 22px !important;
|
||
}
|
||
h2 {
|
||
font-size: 18px !important;
|
||
}
|
||
.ant-card {
|
||
margin-bottom: 8px;
|
||
}
|
||
.ant-card .ant-card-body {
|
||
padding: 14px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 575px) {
|
||
.ant-card-head {
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
padding-block: 12px;
|
||
}
|
||
|
||
.ant-card-head-wrapper {
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
.ant-card-extra {
|
||
max-width: 100%;
|
||
margin-inline-start: 0;
|
||
}
|
||
|
||
.ant-card-extra > .ant-space {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.ant-form-item-control,
|
||
.ant-form-item-control-input,
|
||
.ant-form-item-control-input-content,
|
||
.ant-picker-range {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.ant-statistic-content {
|
||
overflow-wrap: anywhere;
|
||
}
|
||
}
|
||
@media (max-width: 991px) {
|
||
.app-content {
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
/* === 平板 (576-991px) === */
|
||
@media (min-width: 576px) and (max-width: 991px) {
|
||
.ant-modal {
|
||
max-width: calc(100vw - 48px) !important;
|
||
}
|
||
}
|
||
|
||
.notifications-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.notifications-filter {
|
||
width: 100%;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
@media (max-width: 575px) {
|
||
.notifications-layout,
|
||
.notifications-content {
|
||
min-width: 0;
|
||
}
|
||
|
||
.notifications-header {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.notifications-content .ant-list-item {
|
||
align-items: flex-start;
|
||
padding: 14px 6px !important;
|
||
}
|
||
|
||
.notifications-content .ant-list-item-meta-avatar {
|
||
margin-inline-end: 10px;
|
||
}
|
||
|
||
.notifications-content .ant-list-item-meta-title {
|
||
margin-bottom: 4px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 575px) {
|
||
.ant-table-wrapper::before {
|
||
content: '表格可左右滑动查看';
|
||
display: block;
|
||
margin-bottom: 6px;
|
||
color: #8c8c8c;
|
||
font-size: 11px;
|
||
text-align: right;
|
||
}
|
||
|
||
.ant-table-wrapper .ant-table-content {
|
||
scrollbar-width: thin;
|
||
}
|
||
|
||
.ant-table-wrapper .ant-table-cell-fix-left,
|
||
.ant-table-wrapper .ant-table-cell-fix-right {
|
||
box-shadow: 2px 0 5px rgb(0 0 0 / 5%);
|
||
}
|
||
}
|
||
|
||
.responsive-toolbar--single {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
@media (max-width: 575px) {
|
||
/* Input.Search is an internal compact group. Keep the text field flexible and
|
||
the search icon button fixed instead of applying toolbar full-width rules
|
||
to both children. */
|
||
.responsive-toolbar .ant-input-search > .ant-input-affix-wrapper {
|
||
flex: 1 1 auto;
|
||
width: auto !important;
|
||
min-width: 0;
|
||
}
|
||
|
||
.responsive-toolbar .ant-input-search > .ant-input-search-btn {
|
||
flex: 0 0 40px;
|
||
width: 40px !important;
|
||
min-width: 40px;
|
||
padding-inline: 0;
|
||
}
|
||
}
|
||
|
||
/* ─── 全局无障碍与质感增强 ─── */
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
::selection {
|
||
background: rgba(0, 122, 255, 0.18);
|
||
}
|
||
|
||
/* 键盘导航焦点可见（鼠标点击不显示，符合 WCAG 2.4.7） */
|
||
:focus-visible {
|
||
outline: 2px solid #007aff;
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* 细滚动条（macOS/Chromium），降低大面积滚动条对视觉的干扰 */
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: rgba(0, 0, 0, 0.16);
|
||
border: 2px solid transparent;
|
||
border-radius: 8px;
|
||
background-clip: content-box;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background-color: rgba(0, 0, 0, 0.28);
|
||
}
|
||
|
||
/* 尊重系统「减少动态效果」偏好 */
|
||
/* 窄屏下压缩路由标签尺寸，避免横向裁切 */
|
||
@media (max-width: 575px) {
|
||
.route-dock {
|
||
padding: 6px 8px;
|
||
}
|
||
|
||
.route-dock .ant-tabs-tab {
|
||
min-width: 88px;
|
||
max-width: 160px;
|
||
padding: 0 8px 0 10px !important;
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
html {
|
||
scroll-behavior: auto;
|
||
}
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
animation-duration: 0.01ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: 0.01ms !important;
|
||
scroll-behavior: auto !important;
|
||
}
|
||
}
|