@charset "UTF-8"; :root { --bsa-header-height: 50px; --bsa-primary: #0f62fe; --bs-blue: #377dff; --bs-indigo: #6610f2; --bs-purple: #6f42c1; --bs-pink: #d63384; --bs-red: #ed4c78; --bs-orange: #fd7e14; --bs-yellow: #f5ca99; --bs-green: #198754; --bs-teal: #00c9a7; --bs-cyan: #09a5be; --bs-black: #000; --bs-white: #fff; --bs-gray: #8c98a4; --bs-gray-dark: #71869d; --bs-gray-100: #f9fafc; --bs-gray-200: #f8fafd; --bs-gray-300: #e7eaf3; --bs-gray-400: #bdc5d1; --bs-gray-500: #97a4af; --bs-gray-600: #8c98a4; --bs-gray-700: #677788; --bs-gray-800: #71869d; --bs-gray-900: #1e2022; --bs-primary: #377dff; --bs-secondary: #71869d; --bs-success: #00c9a7; --bs-info: #09a5be; --bs-warning: #f5ca99; --bs-danger: #ed4c78; --bs-light: #f9fafc; --bs-dark: #132144; --bs-primary-rgb: 55, 125, 255; --bs-secondary-rgb: 113, 134, 157; --bs-success-rgb: 0, 201, 167; --bs-info-rgb: 9, 165, 190; --bs-warning-rgb: 245, 202, 153; --bs-danger-rgb: 237, 76, 120; --bs-light-rgb: 249, 250, 252; --bs-dark-rgb: 19, 33, 68; --bs-white-rgb: 255, 255, 255; --bs-black-rgb: 0, 0, 0; --bs-body-color-rgb: 103, 119, 136; --bs-body-bg-rgb: 255, 255, 255; --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); --bs-body-font-family: Inter, sans-serif; --bs-body-font-size: 0.875rem; --bs-body-font-weight: 400; --bs-body-line-height: 1.5; --bs-body-color: #677788; --bs-body-bg: #fff; --bs-border-width: 0.0625rem; --bs-border-style: solid; --bs-border-color: rgba(231, 234, 243, 0.7); --bs-border-color-translucent: rgba(0, 0, 0, 0.175); --bs-border-radius: 0.5rem; --bs-border-radius-sm: 0.3125rem; --bs-border-radius-lg: 0.75rem; --bs-border-radius-xl: 1rem; --bs-border-radius-2xl: 2rem; --bs-border-radius-pill: 50rem; --bs-link-color: #377dff; --bs-link-hover-color: #1366ff; --bs-code-color: #d63384; --bs-highlight-bg: #fdf4eb; --bs-tertiary-color-rgb: 102, 16, 242; --bs-tertiary-color-rgb: 33, 37, 41; } * { scrollbar-color: rgba(var(--bs-tertiary-color-rgb), 0.18) var(--bs-light-bg-subtle) !important; scrollbar-width: thin !important; } /** .os-scrollbar { --os-size: 4px !important; } .os-scrollbar-handle { background: rgba(0, 0, 0, 0.15) !important; } .os-scrollbar:hover .os-scrollbar-handle { background: rgba(0, 0, 0, 0.3) !important; }**/ .app-container { display: flex; min-height: 100vh; flex-direction: column; margin: 0; } .app-header { background: #fafbfc; } .fixed-header .app-header { position: fixed; width: 100%; top: 0; } .app-header.header-shadow { box-shadow: 0 0.46875rem 2.1875rem rgba(4, 9, 20, 0.03), 0 0.9375rem 1.40625rem rgba(4, 9, 20, 0.03), 0 0.25rem 0.53125rem rgba(4, 9, 20, 0.05), 0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03); } .app-header { height: var(--bsa-header-height); display: flex; align-items: center; align-content: center; position: relative; z-index: 10; transition: all 0.2s; } .fixed-header .app-main { padding-top: var(--bsa-header-height); } .app-main { flex: 1; display: flex; z-index: 8; position: relative; } .fixed-sidebar .app-sidebar { position: fixed; height: 100vh; } .app-sidebar { width: 280px; display: flex; z-index: 11; overflow: hidden; min-width: 280px; position: relative; flex: 0 0 280px; margin-top: calc(-1 * var(--bsa-header-height)); padding-top: var(--bsa-header-height); transition: all 0.2s; background-color: var(--bs-body-bg); height: 100vh; } .fixed-sidebar .app-main .app-content { z-index: 9; padding-left: 280px; } .app-main .app-content { flex: 1; flex-direction: column; display: flex; z-index: 12; } .closed-sidebar .app-sidebar { transition: all 0.3s ease; width: 80px; min-width: 80px; flex: 0 0 80px; z-index: 13; } .closed-sidebar.fixed-sidebar .app-content { padding-left: 80px; } /** .app-main .app-content { flex: 1; flex-direction: column; display: flex; z-index: 12; } **/ .closed-sidebar .app-sidebar:hover { flex: 0 0 280px !important; width: 280px !important; } .app-container.closed-sidebar .app-sidebar:not(:hover) .bsa-sidebar-wrapper .bsa-navigation li a { display: flex; align-items: center; justify-content: center; } .app-container.closed-sidebar .app-sidebar:not(:hover) .bsa-sidebar-wrapper .bsa-navigation li a .content { display: none; } .app-container.closed-sidebar .app-sidebar:hover .bsa-sidebar-wrapper .bsa-navigation li a .content { display: ""; } @media (max-width: 576px) { } @media (max-width: 768px) { } @media (max-width: 992px) { .app-sidebar { flex: 0 0 280px !important; width: 280px !important; transform: translateX(-280px); position: fixed; } .sidebar-mobile-open .app-sidebar { transform: translateX(0); z-index: 16; } } @media (max-width: 1200px) { } .bsa-navigation { list-style-type: none; padding: 0; margin: 0; --bsa-navigation-arrow-icon: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"%3e%3cpath fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/%3e%3c/svg%3e'); --bsa-navigation-active-color: #0d6efd; --bsa-navigation-padding-x: 16px; --bsa-navigation-padding-y: 8px; --bsa-navigation-prepend-margin-right: 10px; --bsa-navigation-prepend-font-size: 20px; } .bsa-navigation ul { list-style-type: none; padding: 0; margin: 0; } .bsa-navigation li.subheader { padding: 8px 15px; overflow: hidden; font-size: 0.875rem; font-weight: 400; color: #9ea8b1; text-overflow: ellipsis; white-space: nowrap; background-color: inherit; } .bsa-navigation li.separator { height: 0; padding: 0; margin: 0.35em 0; overflow: hidden; border-top: 1px solid #e7e9ec; } .bsa-navigation li a { outline-width: 0; letter-spacing: 0.5px; position: relative; display: grid; grid-template-areas: "prepend content append arrow"; grid-template-columns: -webkit-max-content 1fr auto auto; grid-template-columns: max-content 1fr auto auto; padding: var(--bsa-navigation-padding-y) var(--bsa-navigation-padding-x); margin-bottom: 4px; color: #212529; text-decoration: none; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease; } .bsa-navigation li a .badge { font-size: 60%; } .bsa-navigation li a + ul a { padding-left: calc(var(--bsa-navigation-padding-x) + var(--bsa-navigation-prepend-font-size) + var(--bsa-navigation-prepend-margin-right)); } .bsa-navigation li a + ul a + ul a { padding-left: calc(var(--bsa-navigation-padding-x) + var(--bsa-navigation-prepend-font-size) + var(--bsa-navigation-prepend-margin-right) + 1em); } .bsa-navigation li a + ul a + ul a + ul a { padding-left: calc(var(--bsa-navigation-padding-x) + var(--bsa-navigation-prepend-font-size) + var(--bsa-navigation-prepend-margin-right) + 2em); } .bsa-navigation li a + ul a + ul a + ul a + ul a { padding-left: calc(var(--bsa-navigation-padding-x) + var(--bsa-navigation-prepend-font-size) + var(--bsa-navigation-prepend-margin-right) + 3em); } .bsa-navigation li a + ul a + ul a + ul a + ul a + ul a { padding-left: calc(var(--bsa-navigation-padding-x) + var(--bsa-navigation-prepend-font-size) + var(--bsa-navigation-prepend-margin-right) + 4em); } .bsa-navigation li a + ul a + ul a + ul a + ul a + ul a + ul a { padding-left: calc(var(--bsa-navigation-padding-x) + var(--bsa-navigation-prepend-font-size) + var(--bsa-navigation-prepend-margin-right) + 5em); } .bsa-navigation li a:hover { background-color: #f5f6f7; } .bsa-navigation li a .prepend { font-size: var(--bsa-navigation-prepend-font-size); margin-right: var(--bsa-navigation-prepend-margin-right); line-height: 1; display: flex; grid-area: prepend; align-items: center; justify-content: center; align-self: center; } .bsa-navigation li a .content { grid-area: content; align-self: center; text-overflow: ellipsis; white-space: nowrap; background-color: inherit; } .bsa-navigation li a .append { display: flex; grid-area: append; align-items: center; align-self: center; margin: 0 10px; } .bsa-navigation li a.active { color: #0d6efd; background-color: #e2eeff; } .bsa-navigation li a.active:hover { background-color: #d8e8ff; } .app-container.closed-sidebar .app-sidebar:hover .bsa-sidebar-wrapper .bsa-navigation li a.arrow::after, .app-container:not(.closed-sidebar) .app-sidebar .bsa-sidebar-wrapper .bsa-navigation li a.arrow::after { display: flex; flex-shrink: 0; grid-area: arrow; align-items: center; align-self: center; width: 1.25em; height: 1.25em; content: " "; background-color: #212529; -webkit-mask-image: var(--bsa-navigation-arrow-icon); mask-image: var(--bsa-navigation-arrow-icon); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 1.25em; mask-size: 1.25em; transition: transform 150ms ease-in-out; transform: scale(0.4) rotate(0); transform-origin: center; will-change: transform; } .bsa-navigation li:not(.open) > a + ul { display: none; } .bsa-navigation li.open > a { color: #0d6efd; } .bsa-navigation li.open > a:hover { background-color: #f5f9ff; } .bsa-navigation li.open > a::after { background-color: #0d6efd; transform: scale(0.4) rotate(-90deg); } .app-container.closed-sidebar .app-sidebar:not(:hover) .bsa-sidebar-wrapper .bsa-navigation li ul { display: none; } .bsa-header { width: 100%; position: fixed; top: 0; right: 0; left: var(--bsa-sidebar-width); display: flex; align-items: center; justify-content: flex-start; height: var(--bsa-header-height); padding: 0 4px; margin: 0; list-style: none; background-color: var(--bs-body-bg); box-shadow: 0 1px 1px -1px rgba(var(--bs-dark-rgb), 0.25); transition: 0.3s padding-left, 0.3s left; } .bsa-header > li { height: inherit; } .bsa-header .dropdown-menu { max-width: 360px; border: 0; border-radius: 10px; box-shadow: 0 0.125rem 0.25rem rgb(var(--bsa-secondary-color-rgb) 0.075); } .bsa-header .dropdown-menu .dropdown-item { display: block; padding: 8px 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bsa-header .dropdown-menu .dropdown-item:active { background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); } .bsa-header-item { position: relative; display: flex; align-items: center; justify-content: center; height: inherit; padding: 0 12px; color: var(--bs-body-color); background: inherit; cursor: pointer; } .bsa-header-item-font-size { font-size: 20px; } .bsa-header-item::after { position: absolute; top: 0; left: 0; width: 0; height: 2px; content: ""; background-color: var(--bsa-primary); border-radius: 0; transition: all 0.3s; } .bsa-header-item:hover::after { width: 100%; } .bsa-header-item .bsa-user-avatar { flex-shrink: 0; width: 35px; height: 35px; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; user-select: none; border-radius: 50%; } .bsa-header-item .bsa-user-details { display: block; flex-shrink: 0; max-width: 150px; margin-left: 8px; } @keyframes tada { 0% { transform: scale3d(1, 1, 1); } 10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { transform: scale3d(1, 1, 1); } } .bsa-shock { animation: tada 1s infinite; } .quicktab-dropdown.active { z-index: 99; } .quicktab-list-group.active { z-index: 99; } .quicktab .tab-bar li.scroll button.active { color: var(--bsa-primary); } .quicktab .tab-bar li.scroll button:hover { color: var(--bsa-primary); } .quicktab .tab-bar li.scroll button::after { height: 2px; background-color: var(--bsa-primary); } .quicktab-loaders { color: var(--bsa-primary); } .btn-refresh { --bs-btn-color: #000; --bs-btn-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3e%3cpath d='M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z'/%3e%3c/svg%3e"); --bs-btn-opacity: 0.5; --bs-btn-hover-opacity: 0.75; --bs-btn-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); --bs-btn-focus-opacity: 1; --bs-btn-disabled-opacity: 0.25; --bs-btn-white-filter: invert(1) grayscale(100%) brightness(200%); box-sizing: content-box; width: 1em; height: 1em; padding: 0.25em 0.25em; color: var(--bs-btn-color); background: transparent var(--bs-btn-bg) center/1em auto no-repeat; border: 0; border-radius: 0.375rem; opacity: var(--bs-btn-opacity); } .btn-refresh:hover { color: var(--bs-btn-color); text-decoration: none; opacity: var(--bs-btn-hover-opacity); } .btn-refresh:focus { outline: 0; box-shadow: var(--bs-btn-focus-shadow); opacity: var(--bs-btn-focus-opacity); } .btn-refresh:disabled, .btn-refresh.disabled { pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; opacity: var(--bs-btn-disabled-opacity); } .btn-refresh-white { filter: var(--bs-btn-white-filter); } [data-bs-theme="dark"] .btn-refresh { filter: var(--bs-btn-white-filter); } .btn-fullscreen { --bs-btn-color: #000; --bs-btn-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3e%3cpath d='M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z'/%3e%3c/svg%3e"); --bs-btn-opacity: 0.5; --bs-btn-hover-opacity: 0.75; --bs-btn-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); --bs-btn-focus-opacity: 1; --bs-btn-disabled-opacity: 0.25; --bs-btn-white-filter: invert(1) grayscale(100%) brightness(200%); box-sizing: content-box; width: 1em; height: 1em; padding: 0.25em 0.25em; color: var(--bs-btn-color); background: transparent var(--bs-btn-bg) center/1em auto no-repeat; border: 0; border-radius: 0.375rem; opacity: var(--bs-btn-opacity); } .btn-fullscreen:hover { color: var(--bs-btn-color); text-decoration: none; opacity: var(--bs-btn-hover-opacity); } .btn-fullscreen:focus { outline: 0; box-shadow: var(--bs-btn-focus-shadow); opacity: var(--bs-btn-focus-opacity); } .btn-fullscreen:disabled, .btn-fullscreen.disabled { pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; opacity: var(--bs-btn-disabled-opacity); } .btn-fullscreen-white { filter: var(--bs-btn-white-filter); } [data-bs-theme="dark"] .btn-fullscreen { filter: var(--bs-btn-white-filter); } .btn-fullscreen-exit { --bs-btn-color: #000; --bs-btn-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3e%3cpath d='M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z' /%3e%3c/svg%3e"); --bs-btn-opacity: 0.5; --bs-btn-hover-opacity: 0.75; --bs-btn-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); --bs-btn-focus-opacity: 1; --bs-btn-disabled-opacity: 0.25; --bs-btn-white-filter: invert(1) grayscale(100%) brightness(200%); box-sizing: content-box; width: 1em; height: 1em; padding: 0.25em 0.25em; color: var(--bs-btn-color); background: transparent var(--bs-btn-bg) center/1em auto no-repeat; border: 0; border-radius: 0.375rem; opacity: var(--bs-btn-opacity); } .btn-fullscreen-exit:hover { color: var(--bs-btn-color); text-decoration: none; opacity: var(--bs-btn-hover-opacity); } .btn-fullscreen-exit:focus { outline: 0; box-shadow: var(--bs-btn-focus-shadow); opacity: var(--bs-btn-focus-opacity); } .btn-fullscreen-exit:disabled, .btn-fullscreen-exit.disabled { pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; opacity: var(--bs-btn-disabled-opacity); } .btn-fullscreen-exit-white { filter: var(--bs-btn-white-filter); } [data-bs-theme="dark"] .btn-fullscreen-exit { filter: var(--bs-btn-white-filter); } .bsa-loading { position: fixed; inset: 0; z-index: 99999; display: none; width: 100%; height: 100%; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.3); transition: all 0.2s ease-out; opacity: 1; transition: opacity 500ms; } .bsa-loading.active { display: flex; } .bsa-loading.fade-out { opacity: 0; } .bsa-modal .modal-wrapper { position: absolute; inset: 0; height: 100%; width: 100%; overflow: auto; /* 禁止这个元素接受鼠标事件 */ } .bsa-modal .modal-wrapper .modal-header .modal-title { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .bsa-modal .modal-wrapper .modal-header .btn-refresh { padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5); margin: calc(-0.5 * var(--bs-modal-header-padding-y)) calc(-0.5 * var(--bs-modal-header-padding-x)) calc(-0.5 * var(--bs-modal-header-padding-y)) auto; } .bsa-modal .modal-wrapper .modal-header .btn-fullscreen { padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5); margin: calc(-0.5 * var(--bs-modal-header-padding-y)) calc(-0.5 * var(--bs-modal-header-padding-x)) calc(-0.5 * var(--bs-modal-header-padding-y)) auto; } .bsa-modal .modal-wrapper .modal-header .btn-fullscreen-exit { padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5); margin: calc(-0.5 * var(--bs-modal-header-padding-y)) calc(-0.5 * var(--bs-modal-header-padding-x)) calc(-0.5 * var(--bs-modal-header-padding-y)) auto; } .bsa-modal .modal-wrapper .modal-header .btn-close { --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3e%3cpath d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z'/%3e%3c/svg%3e"); } .bsa-modal .modal-wrapper .modal-body .loading { opacity: 1; transition: opacity 600ms; } .bsa-modal .modal-wrapper .modal-body .loading.fade-out { opacity: 0; } .modal-header { padding: 0.5rem; } .modal-footer { padding: calc(var(--bs-modal-padding) * 0.9 - var(--bs-modal-footer-gap)) calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * 0.5); } .table { --bs-table-color: var(--bs-body-color); --bs-table-bg: transparent; --bs-table-border-color: rgba(231, 234, 243, 0.7); --bs-table-accent-bg: transparent; --bs-table-striped-color: var(--bs-body-color); --bs-table-striped-bg: #f9fafc; --bs-table-active-color: var(--bs-body-color); --bs-table-active-bg: rgba(0, 0, 0, 0.1); --bs-table-hover-color: var(--bs-body-color); --bs-table-hover-bg: rgba(231, 234, 243, 0.4); width: 100%; margin-bottom: 1rem; color: var(--bs-table-color); vertical-align: top; border-color: var(--bs-table-border-color); } .bsa-permission-check { display: none; } .wo-floating-label { position: relative; } .wo-floating-label .form-label { position: absolute; left: 1em; font-size: 0.75rem; background-color: #fafafa; z-index: 5; white-space: nowrap; text-overflow: ellipsis; max-width: calc(100% - 2em); overflow: hidden; } .wo-floating-label .form-label { top: -0.6rem; padding-left: 0.125rem; padding-right: 0.125rem; } .wo-floating-label .form-label { color: #4a4a4a; } .wo-floating-label .form-label { color: #363636; display: block; font-weight: 700; } @keyframes progress { 0% { width: 100%; } 100% { width: 0; } } .bsa-toast-pause .progress-bar { animation-play-state: paused !important; } .bsa-layout1 .bsa-layout1-left { position: fixed; top: 0; left: 0; bottom: 0; /** width: 240px; **/ width: 360px; z-index: 1020; } .bsa-layout1 .bsa-layout1-left .bsa-chevron-toggle { position: absolute; width: 16px; height: 60px; right: -16px; top: 40%; display: flex; align-items: center; cursor: pointer; color: var(--bs-dark-text-emphasis); background-color: var(--bs-dark-bg-subtle); } .bsa-layout1 .bsa-layout1-left .bsa-chevron-toggle::after { font-family: bootstrap-icons, serif; content: "\f284"; } .bsa-layout1 .bsa-layout1-left .bsa-chevron-toggle:hover { color: var(--bs-light-text-emphasis); background-color: var(--bs-light-bg-subtle); } .bsa-layout1 .bsa-layout1-right { /** margin-left: 244px; **/ margin-left: 364px; } .bsa-layout1.collapsed .bsa-layout1-left { transform: translateX(-101%); } .bsa-layout1.collapsed .bsa-layout1-right { margin-left: 0; } .bsa-layout1.collapsed .bsa-chevron-toggle::after { content: "\f285"; } .ztree * { font-size: 16px !important; } .ztree li a { height: 21px; color: var(--bs-body-color); } .ztree li span { line-height: 17px; } .ztree li a.curSelectedNode { color: var(--bs-dark-text-emphasis); background-color: var(--bs-dark-bg-subtle); border: 1px solid var(--bs-dark-border-subtle); height: 20px; } /** ************ 左右布局 start ************ **/ .aw-main-pannel { flex: 1; display: flex; z-index: 8; position: relative; height: 100%; } .aw-left-pannel { width: 380px; /** display: flex; **/ z-index: 11; overflow: hidden; min-width: 380px; position: relative; flex: 0 0 380px; /** margin-top: calc(-1 * var(--bsa-header-height)); padding-top: var(--bsa-header-height);**/ transition: all 0.2s; background-color: var(--bs-body-bg); height: 100%; display: flex; flex-direction: column; } .aw-main-pannel .aw-right-pannel { flex: 1; flex-direction: column; /** display: flex; **/ z-index: 12; height: 100%; overflow-x: auto; } .closed-aw-left-pannel .aw-left-pannel { transition: all 0.3s ease; width: 0px; min-width: 0px; flex: 0 0 0px; z-index: 13; } @media (max-width: 576px) { } @media (max-width: 768px) { } @media (max-width: 992px) { .aw-main-pannel .aw-left-pannel { position: fixed; z-index: 13; } .aw-main-pannel.closed-aw-left-pannel .aw-left-pannel { transition: all 0.3s ease; width: 0px; min-width: 0px; flex: 0 0 0px; z-index: 13; } .aw-main-pannel .aw-left-pannel-toggle { left: 320px; } .aw-main-pannel.closed-aw-left-pannel .aw-left-pannel-toggle { left: 0px; } } @media (max-width: 1200px) { } .aw-main-pannel .aw-left-pannel-toggle { position: fixed; width: 16px; height: 50px; left: 380px; top: 40%; display: flex; align-items: center; cursor: pointer; color: var(--bs-dark-text-emphasis); background-color: var(--bs-secondary-bg); z-index: 9999; } .aw-main-pannel .aw-left-pannel-toggle::after { font-family: bootstrap-icons, serif; content: "\f284"; } .aw-main-pannel.closed-aw-left-pannel .aw-left-pannel-toggle::after { font-family: bootstrap-icons, serif; content: "\f285"; } .aw-left-pannel-toggle:hover { color: var(--bs-light-text-emphasis); background-color: var(--bs-dark-bg-subtle); } .aw-main-pannel.closed-aw-left-pannel .aw-left-pannel-toggle { left: 0px; } /** ************ 左右布局 end ************ **/ /** ************ checkbox disable start ************ **/ .form-check-input:disabled~.form-check-label, .form-check-input[disabled]~.form-check-label Specificity: (0,3,0) { opacity: 1 !important; } /** ************ checkbox disable end ************ **/ /** ************ avatar start ************ **/ .avatar { position: relative; display: inline-block; width: 3.125rem; height: 3.125rem; border-radius: 0.3125rem; } .avatar-img { max-width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0.3125rem; } .avatar-circle { border-radius: 50%; } .avatar-circle .avatar-img { border-radius: 50%; } .media { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; } .media-body { -ms-flex: 1; flex: 1; } .font-size-1 { font-size: 0.875rem; } .ml-3, .mx-3 { margin-left: 1rem !important; } /** ************ avatar end ************ **/ /** ************ group start ************ **/ .aw-list-group { display: flex; flex-wrap: wrap; padding: 0; list-style: none; gap: 10px; } .aw-group-item { padding: 5px 10px; } /** ************ group end ************ **/ /** ************ js表单验证 start ************ **/ .form-control.is-invalid { border-color: var(--bs-border-color) !important; /* 恢复默认边框颜色 */ box-shadow: none !important; /* 移除红色阴影 */ background-image: none !important; /* 移除右侧错误图标 */ padding-right: inherit !important; /* 恢复右侧内边距 */ } /** ************ js表单验证 end ************ **/ /** ************ 标题样式 start ************ **/ /* 简约图标标题样式 - 紧凑版优化 */ .compact-title { display: flex; align-items: center; margin-bottom: 1rem; padding: 0.3rem 0.2rem; background: #f8f9ff; border-radius: 6px; position: relative; /** border-left: 2px solid var(--bsa-primary); **/ } .compact-title i { width: 23px; height: 23px; background: #ffffff; color: var(--bsa-primary); border-radius: 6px; display: flex; align-items: center; justify-content: center; margin-right: 0.5rem; font-size: 0.95rem; box-shadow: 0 1px 2px rgba(67, 97, 238, 0.12); transition: all 0.2s ease; } .compact-title:hover i { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(67, 97, 238, 0.18); } .compact-title h5 { margin: 0; color: #2d3748; font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; } .compact-title .title-description { margin-left: auto; font-size: 0.78rem; /** color: var(--secondary-color); **/ background: rgba(255, 255, 255, 0.65); padding: 0.15rem 0.5rem; border-radius: 10px; font-weight: 500; } /** ************ 标题样式 end ************ **/ /************** placeholder start***************/ /* 通用写法 */ input::placeholder { font-size: 12px; /* 设置字体大小 */ color: #999; /* 可选：设置颜色 */ opacity: 1; /* 有些浏览器默认会让 placeholder 半透明 */ } /* 如果需要兼容旧版浏览器 */ input::-webkit-input-placeholder { font-size: 12px; } /* Chrome/Safari */ input::-moz-placeholder { font-size: 12px; } /* Firefox 19+ */ input:-ms-input-placeholder { font-size: 12px; } /* IE 10+ */ input:-moz-placeholder { font-size: 12px; } /* Firefox 18- */ /************** placeholder end***************/ /************** line-input start***************/ .line-input { background-color: transparent !important; /* 强制透明 */ border: none; /* 去掉四周边框 */ border-bottom: 1px solid #ccc; /* 只保留下边框 */ border-radius: 0; /* 去掉圆角 */ box-shadow: none !important; /* 去掉 focus 阴影 */ padding: 0.375rem 0; /* 上下内边距 */ } /* focus 时下边框变色 */ .line-input:focus { background-color: transparent !important; /* 聚焦时也透明 */ border-bottom: 2px solid #111827; /* 下边框变色 */ box-shadow: none !important; /* 去掉阴影 */ outline: none; /* 去掉外框 */ } /* placeholder 样式 */ .line-input::placeholder { font-size: 12px; color: #999; opacity: 1; } /************** line-input end***************/