183 lines
14 KiB
CSS
183 lines
14 KiB
CSS
/*
|
|
* Shared prototype adapter for go-admin-ui commit 67d393d713877572fab0b897296a4c1d525fc81d.
|
|
* This is an offline visual/interaction mapping, not copied framework CSS and not an Element Plus runtime.
|
|
*/
|
|
.go-admin-prototype {
|
|
--ga-primary: #1677ff;
|
|
--ga-primary-hover: #409eff;
|
|
--ga-sidebar: #001529;
|
|
--ga-sidebar-hover: #000c17;
|
|
--ga-app-bg: #f0f2f5;
|
|
--ga-border: #e4e7ed;
|
|
--ga-text: #303133;
|
|
--ga-muted: #606266;
|
|
--ga-sidebar-width: 210px;
|
|
color: var(--ga-text);
|
|
background: var(--ga-app-bg);
|
|
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
|
|
}
|
|
|
|
.go-admin-prototype .go-admin-shell { grid-template-columns: var(--ga-sidebar-width) minmax(0, 1fr); }
|
|
.go-admin-prototype .sidebar-container { width: var(--ga-sidebar-width); padding: 0; background: var(--ga-sidebar); box-shadow: 2px 0 6px rgba(0, 21, 41, .35); transition: width .28s ease, transform .28s ease; }
|
|
.go-admin-prototype .sidebar-logo { height: 64px; min-height: 64px; padding: 0 16px; gap: 12px; color: #fff; text-decoration: none; background: #001529; }
|
|
.go-admin-prototype .brand-mark { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 5px; background: var(--ga-primary); }
|
|
.go-admin-prototype .brand-copy { min-width: 0; }
|
|
.go-admin-prototype .brand-name { white-space: nowrap; }
|
|
.go-admin-prototype .brand-subtitle { color: rgba(255,255,255,.56); white-space: nowrap; }
|
|
.go-admin-prototype .el-menu { gap: 0; padding: 8px 0; }
|
|
.go-admin-prototype .menu-group,
|
|
.go-admin-prototype .el-menu-item { min-height: 50px; height: 50px; padding: 0 18px; border-radius: 0; gap: 14px; color: rgba(255,255,255,.82); }
|
|
.go-admin-prototype .menu-group { display: flex; align-items: center; font-size: 14px; font-weight: 500; }
|
|
.go-admin-prototype .menu-group .menu-arrow { width: 14px; margin-left: auto; transform: rotate(90deg); }
|
|
.go-admin-prototype .el-menu-item:hover { color: #fff; background: var(--ga-sidebar-hover); }
|
|
.go-admin-prototype .el-menu-item.active { color: var(--ga-primary); background: var(--ga-sidebar-hover); box-shadow: inset 3px 0 0 var(--ga-primary); }
|
|
.go-admin-prototype .side-note { margin: 12px; padding: 11px 12px; border-radius: 4px; color: rgba(255,255,255,.72); }
|
|
|
|
.go-admin-prototype .main-container { min-width: 0; background: var(--ga-app-bg); }
|
|
.go-admin-prototype .fixed-header { position: sticky; top: 0; z-index: 30; }
|
|
.go-admin-prototype .navbar { position: relative; min-height: 50px; height: 50px; padding: 0 16px 0 0; border-bottom: 1px solid #eef0f6; background: #fff; box-shadow: 0 1px 8px rgba(79,70,229,.06); backdrop-filter: none; }
|
|
.go-admin-prototype .navbar::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg, #1677ff, #40a9ff); opacity: .7; }
|
|
.go-admin-prototype .navbar-action,
|
|
.go-admin-prototype .avatar-button { min-width: 46px; height: 48px; padding: 0 12px; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: transparent; color: #64748b; }
|
|
.go-admin-prototype .navbar-action:hover,
|
|
.go-admin-prototype .avatar-button:hover { color: var(--ga-primary); background: rgba(22,119,255,.06); }
|
|
.go-admin-prototype .navbar-action svg { width: 19px; height: 19px; }
|
|
.go-admin-prototype .mobile-menu { display: none; }
|
|
.go-admin-prototype .breadcrumb { display: flex; align-items: center; gap: 9px; color: #97a8be; font-size: 13px; white-space: nowrap; }
|
|
.go-admin-prototype .breadcrumb a { color: #606266; text-decoration: none; }
|
|
.go-admin-prototype .breadcrumb strong { color: #303133; font-weight: 500; }
|
|
.go-admin-prototype .avatar-button { min-width: auto; }
|
|
.go-admin-prototype .avatar { width: 32px; height: 32px; display: grid; place-items: center; border: 2px solid rgba(22,119,255,.2); border-radius: 50%; color: var(--ga-primary); }
|
|
.go-admin-prototype .prototype-pill { min-height: 25px; border-radius: 4px; }
|
|
|
|
.go-admin-prototype .tags-view-container { height: 40px; padding: 8px 8px 0; display: flex; align-items: flex-end; gap: 3px; overflow-x: auto; border-bottom: 1px solid #e8eaec; background: #fff; box-shadow: 0 1px 4px rgba(0,21,41,.08); }
|
|
.go-admin-prototype .tags-view-item { height: 32px; padding: 0 10px; border: 1px solid #e0e0e6; border-radius: 3px 3px 0 0; flex: 0 0 auto; background: #f8f9fa; color: #606266; font-size: 12px; }
|
|
.go-admin-prototype .tags-view-item:hover { color: var(--ga-primary); background: #e6f4ff; }
|
|
.go-admin-prototype .tags-view-item.active { color: var(--ga-primary); border-color: #91caff; border-bottom-color: #fff; background: #fff; font-weight: 500; }
|
|
.go-admin-prototype .tags-view-item span { margin-left: 4px; color: #909399; }
|
|
|
|
.go-admin-prototype .app-main { width: 100%; min-height: calc(100vh - 90px); padding: 16px; background: var(--ga-app-bg); }
|
|
.go-admin-prototype .compact-header { margin-bottom: 14px; }
|
|
.go-admin-prototype .compact-header h1 { font-size: 20px; font-weight: 500; letter-spacing: 0; }
|
|
.go-admin-prototype .compact-header p { font-size: 13px; }
|
|
.go-admin-prototype .el-card { border-color: var(--ga-border); border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
|
|
.go-admin-prototype .card-header { min-height: 48px; padding: 10px 14px; }
|
|
.go-admin-prototype .card-body { padding: 14px; }
|
|
.go-admin-prototype .metric { padding: 14px; }
|
|
|
|
.go-admin-prototype .el-button { min-height: 32px; height: 32px; padding: 5px 12px; border-color: #dcdfe6; border-radius: 4px; background: #fff; color: #606266; font-size: 12px; font-weight: 400; }
|
|
.go-admin-prototype .el-button svg { width: 15px; height: 15px; }
|
|
.go-admin-prototype .el-button:hover { color: var(--ga-primary); border-color: #a0cfff; background: #ecf5ff; }
|
|
.go-admin-prototype .el-button-primary { color: #fff; border-color: var(--ga-primary); background: var(--ga-primary); }
|
|
.go-admin-prototype .el-button-primary:hover { color: #fff; border-color: var(--ga-primary-hover); background: var(--ga-primary-hover); }
|
|
.go-admin-prototype .el-button-link { min-height: 30px; height: 30px; padding: 3px 4px; border: 0; color: var(--ga-primary); background: transparent; }
|
|
.go-admin-prototype .el-button:disabled { color: #a8abb2; border-color: #e4e7ed; background: #f5f7fa; }
|
|
|
|
.go-admin-prototype .el-form { color: var(--ga-text); }
|
|
.go-admin-prototype .el-form-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; padding-bottom: 14px; border-bottom: 1px solid #ebeef5; }
|
|
.go-admin-prototype .form-item { min-width: 180px; display: grid; grid-template-columns: auto minmax(150px, 220px); align-items: center; gap: 8px; }
|
|
.go-admin-prototype .form-item label { color: #606266; font-size: 13px; white-space: nowrap; }
|
|
.go-admin-prototype .form-actions { display: flex; gap: 8px; }
|
|
.go-admin-prototype .el-input,
|
|
.go-admin-prototype .el-select { min-height: 32px; height: 32px; padding: 4px 10px; border-color: #dcdfe6; border-radius: 4px; color: #606266; font-size: 13px; }
|
|
.go-admin-prototype .el-input:focus,
|
|
.go-admin-prototype .el-select:focus { border-color: var(--ga-primary); outline: 2px solid rgba(22,119,255,.16); }
|
|
.go-admin-prototype .vertical-form { display: grid; gap: 16px; }
|
|
.go-admin-prototype .vertical-form .form-item { grid-template-columns: 92px minmax(0,1fr); }
|
|
.go-admin-prototype .vertical-form .help { margin: -8px 0 0 100px; }
|
|
.go-admin-prototype .form-footer { display: flex; justify-content: flex-end; }
|
|
|
|
.go-admin-prototype .operation-bar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
|
|
.go-admin-prototype .operation-actions { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.go-admin-prototype .permission-hint { display: inline-flex; align-items: center; gap: 5px; color: #909399; font-size: 12px; }
|
|
.go-admin-prototype .permission-hint svg { width: 14px; height: 14px; }
|
|
.go-admin-prototype .el-table { min-width: 760px; border: 1px solid #ebeef5; }
|
|
.go-admin-prototype .el-table th,
|
|
.go-admin-prototype .el-table td { padding: 9px 10px; border-right: 1px solid #ebeef5; border-bottom-color: #ebeef5; }
|
|
.go-admin-prototype .el-table th { background: #f5f7fa; color: #909399; font-weight: 500; }
|
|
.go-admin-prototype .el-table tbody tr:nth-child(even) { background: #fafafa; }
|
|
.go-admin-prototype .el-table tbody tr:hover { background: #f5f7fa; }
|
|
.go-admin-prototype .checkbox-faux { width: 14px; height: 14px; display: inline-block; border: 1px solid #dcdfe6; border-radius: 2px; background: #fff; }
|
|
.go-admin-prototype .action-divider { height: 14px; margin: 0 3px; display: inline-block; border-left: 1px solid #dcdfe6; vertical-align: middle; }
|
|
.go-admin-prototype .el-tag { min-height: 24px; padding: 2px 8px; border: 1px solid currentColor; border-radius: 4px; font-weight: 400; }
|
|
.go-admin-prototype .el-tag::before { display: none; }
|
|
|
|
.go-admin-prototype .pagination-container { min-height: 48px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; color: #606266; font-size: 12px; }
|
|
.go-admin-prototype .pagination-container button { min-width: 30px; height: 28px; border: 0; border-radius: 3px; background: #f4f4f5; color: #606266; }
|
|
.go-admin-prototype .pagination-container button.active { color: #fff; background: var(--ga-primary); }
|
|
.go-admin-prototype .pagination-container button:disabled { color: #c0c4cc; cursor: not-allowed; }
|
|
.go-admin-prototype .pagination-size { height: 28px; border: 1px solid #dcdfe6; border-radius: 4px; color: #606266; }
|
|
.go-admin-prototype .pagination-total { margin-right: 4px; }
|
|
|
|
.go-admin-prototype .description-list { display: grid; }
|
|
.go-admin-prototype .description-row { min-height: 43px; padding: 8px 0; display: grid; grid-template-columns: minmax(90px,.7fr) minmax(0,1.5fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid #ebeef5; }
|
|
.go-admin-prototype .description-row:last-child { border-bottom: 0; }
|
|
.go-admin-prototype .description-row > span:first-child { color: #909399; font-size: 12px; }
|
|
.go-admin-prototype .description-row strong { font-size: 13px; font-weight: 500; }
|
|
|
|
.go-admin-prototype .sense-video-stage,
|
|
.go-admin-prototype .sense-zone-canvas { border-radius: 4px; }
|
|
.go-admin-prototype .el-overlay { background: rgba(0,0,0,.5); }
|
|
.go-admin-prototype .el-dialog { width: min(600px,100%); border-radius: 4px; }
|
|
.go-admin-prototype .el-dialog-header,
|
|
.go-admin-prototype .el-dialog-footer { padding: 16px 20px; }
|
|
.go-admin-prototype .el-dialog-body { padding: 20px; }
|
|
.go-admin-prototype .dialog-close { min-height: 32px; height: 32px; color: #909399; }
|
|
|
|
.go-admin-prototype .go-admin-shell.compact { grid-template-columns: 54px minmax(0,1fr); }
|
|
.go-admin-prototype .go-admin-shell.compact .sidebar-container { width: 54px; }
|
|
.go-admin-prototype .go-admin-shell.compact .brand-copy,
|
|
.go-admin-prototype .go-admin-shell.compact .el-menu-item span,
|
|
.go-admin-prototype .go-admin-shell.compact .menu-group span,
|
|
.go-admin-prototype .go-admin-shell.compact .menu-arrow,
|
|
.go-admin-prototype .go-admin-shell.compact .side-note { display: none; }
|
|
.go-admin-prototype .go-admin-shell.compact .sidebar-logo,
|
|
.go-admin-prototype .go-admin-shell.compact .menu-group,
|
|
.go-admin-prototype .go-admin-shell.compact .el-menu-item { padding-right: 0; padding-left: 0; justify-content: center; }
|
|
|
|
@media (max-width: 900px) {
|
|
.go-admin-prototype .go-admin-shell,
|
|
.go-admin-prototype .go-admin-shell.compact { display: block; }
|
|
.go-admin-prototype .sidebar-container,
|
|
.go-admin-prototype .go-admin-shell.compact .sidebar-container { position: fixed; top: 0; left: 0; z-index: 40; width: min(300px,88vw); height: 100vh; transform: translateX(-102%); }
|
|
.go-admin-prototype .sidebar-container.open,
|
|
.go-admin-prototype .go-admin-shell.compact .sidebar-container.open { transform: translateX(0); }
|
|
.go-admin-prototype .go-admin-shell.compact .brand-copy,
|
|
.go-admin-prototype .go-admin-shell.compact .el-menu-item span,
|
|
.go-admin-prototype .go-admin-shell.compact .menu-group span,
|
|
.go-admin-prototype .go-admin-shell.compact .menu-arrow,
|
|
.go-admin-prototype .go-admin-shell.compact .side-note { display: initial; }
|
|
.go-admin-prototype .go-admin-shell.compact .sidebar-logo,
|
|
.go-admin-prototype .go-admin-shell.compact .menu-group,
|
|
.go-admin-prototype .go-admin-shell.compact .el-menu-item { padding: 0 18px; justify-content: flex-start; }
|
|
.go-admin-prototype .desktop-collapse { display: none; }
|
|
.go-admin-prototype .mobile-menu { display: inline-flex; }
|
|
.go-admin-prototype .breadcrumb { max-width: 46vw; overflow: hidden; }
|
|
.go-admin-prototype .breadcrumb a,
|
|
.go-admin-prototype .breadcrumb span { display: none; }
|
|
.go-admin-prototype .app-main { padding: 12px; }
|
|
.go-admin-prototype .tags-view-container { height: 48px; padding-top: 8px; }
|
|
.go-admin-prototype .tags-view-item { height: 40px; }
|
|
.go-admin-prototype .el-button { min-height: 44px; height: 44px; }
|
|
.go-admin-prototype .el-input,
|
|
.go-admin-prototype .el-select { min-height: 44px; height: 44px; font-size: 16px; }
|
|
.go-admin-prototype .el-form-inline { align-items: stretch; }
|
|
.go-admin-prototype .el-form-inline .form-item { width: 100%; grid-template-columns: 82px minmax(0,1fr); }
|
|
.go-admin-prototype .el-form-inline .form-actions { margin-left: 90px; }
|
|
.go-admin-prototype .operation-bar { align-items: flex-start; flex-direction: column; padding: 9px 0; }
|
|
.go-admin-prototype .pagination-container button,
|
|
.go-admin-prototype .pagination-size { min-width: 40px; height: 40px; }
|
|
}
|
|
|
|
@media (max-width: 430px) {
|
|
.go-admin-prototype .desktop-only,
|
|
.go-admin-prototype .prototype-pill { display: none; }
|
|
.go-admin-prototype .topbar-actions { gap: 0; }
|
|
.go-admin-prototype .navbar-action,
|
|
.go-admin-prototype .avatar-button { min-width: 42px; padding: 0 8px; }
|
|
.go-admin-prototype .vertical-form .form-item { grid-template-columns: 1fr; gap: 5px; }
|
|
.go-admin-prototype .vertical-form .help { margin-left: 0; }
|
|
.go-admin-prototype .pagination-container { justify-content: flex-start; overflow-x: auto; }
|
|
}
|
|
|