1270 lines
26 KiB
CSS
Executable File
1270 lines
26 KiB
CSS
Executable File
html,
|
||
body {
|
||
height: 100%;
|
||
width: 100%;
|
||
margin: 0;
|
||
color: #8a8a8a;
|
||
background-color: #fafafa;
|
||
overflow: auto;
|
||
display: flex;
|
||
}
|
||
|
||
.responsive-img {
|
||
max-width: 100%; /* 限制最大宽度为容器 */
|
||
width: 100%; /* 占满容器宽度 */
|
||
height: auto; /* 高度自动，保持比例 */
|
||
display: block; /* 避免底部留空隙 */
|
||
object-fit: contain; /* 确保完整显示，而不是裁切 */
|
||
}
|
||
|
||
pre {
|
||
overflow-x: auto; /* 允许内容超出容器显示 */
|
||
background-color: #b5e5e5;
|
||
}
|
||
* {
|
||
box-sizing: border-box!important;
|
||
}
|
||
|
||
hr {
|
||
height: 1px;
|
||
background-color: #8a8a8a;
|
||
width: 80%;
|
||
}
|
||
|
||
.flexbox {
|
||
height: 100%;
|
||
width: 100%;
|
||
display: flex;
|
||
}
|
||
.curpos {
|
||
border-radius: 30%;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.tabular {
|
||
border-radius: 8px;
|
||
padding: 5px;
|
||
margin: 5px;
|
||
background-color: #f5f5f5;
|
||
border: 1px solid #888888;
|
||
}
|
||
|
||
.card {
|
||
border-radius: 8px;
|
||
padding: 5px;
|
||
margin: 5px;
|
||
background-color: #f5f5f5;
|
||
border: 1px solid #888888;
|
||
}
|
||
|
||
.card:hover {
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
|
||
border: 2px solid #ff8080;
|
||
}
|
||
|
||
.subcard {
|
||
background-color: #eeeeee;
|
||
}
|
||
.clickable {
|
||
color: #40cc40;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.video-in-video {
|
||
position: relative;
|
||
}
|
||
|
||
.bigvideo {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 0;
|
||
}
|
||
|
||
.smallvideo {
|
||
position: absolute;
|
||
bottom: 10px;
|
||
right: 30px;
|
||
width: 30%;
|
||
height: 30%;
|
||
z-index: 2;
|
||
}
|
||
|
||
.griddata {
|
||
display: grid;
|
||
grid-gap: 1px;
|
||
}
|
||
|
||
.resizebox {
|
||
width: 10px;
|
||
height: 10px;
|
||
background-color: darkblue;
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
z-index: 9999;
|
||
cursor: se-resize; /* 改变鼠标指针样式 */
|
||
}
|
||
.popup {
|
||
display: none;
|
||
position: absolute;
|
||
box-sizing: border-box; /* 包括边框在内计算宽度和高度 */
|
||
color: #111111;
|
||
background-color: #f1f1f1;
|
||
border: 1px solid #c1c1c1;
|
||
border-radius: 5px;
|
||
padding: 4px;
|
||
}
|
||
|
||
.titlebar {
|
||
background-color: #d8d8c8;
|
||
}
|
||
|
||
.toppopup {
|
||
box-shadow: 10px 5px 10px #000, 0 -5px 5px #fff;
|
||
}
|
||
|
||
.modal {
|
||
display:none;
|
||
position: absolute;
|
||
padding: 10px;
|
||
color: #111111;
|
||
background-color: #dddddd;
|
||
border: 1px solid #ccc;
|
||
border-radius: 5px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.menuitem {
|
||
backgroud-color: #eeeeee;
|
||
align-items: center;
|
||
border: 1px solid #ccc;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.modal>.title {
|
||
background-color: #a0a0a0;
|
||
}
|
||
|
||
.message {
|
||
padding: 10px;
|
||
width: 30%;
|
||
height: 30%;
|
||
background-color: #f0f0f0;
|
||
color:#222222;
|
||
border: 1px solid #ccc;
|
||
border-radius: 5px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.error {
|
||
padding: 10px;
|
||
width: 30%;
|
||
height: 30%;
|
||
background-color: #f0f0f0;
|
||
border: 1px solid #ccc;
|
||
border-radius: 5px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.message>.title {
|
||
background-color: #3030f0;
|
||
color: #e8e8e8;
|
||
}
|
||
|
||
.error>.title {
|
||
background-color: #f03030;
|
||
color: #e8e8e8;
|
||
}
|
||
|
||
.vscroll {
|
||
overflow-x: scroll;
|
||
}
|
||
|
||
.hscroll {
|
||
overflow-y: scroll;
|
||
}
|
||
|
||
.scroll {
|
||
overflow: auto;
|
||
}
|
||
|
||
.vcontainer {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.vbox {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.hcontainer {
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.hbox {
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.fixitem {
|
||
flex:none;
|
||
}
|
||
|
||
.filler, .hfiller, .vfiller {
|
||
flex: auto;
|
||
flex-grow: 1;
|
||
overflow:hidden;
|
||
}
|
||
|
||
.vfiller .vbox:last-child {
|
||
overflow-x: overlay;
|
||
}
|
||
|
||
.vline {
|
||
width:1px;
|
||
height:100%;
|
||
background-colir:#999;
|
||
}
|
||
|
||
.hline {
|
||
height:1px;
|
||
width:100%;
|
||
background-colir:#999;
|
||
}
|
||
.hfiller::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.flc {
|
||
width: 203px;
|
||
overflow-y: scroll;
|
||
overflow-x: visible;
|
||
}
|
||
|
||
.vtoolbar {
|
||
heigth: 100%;
|
||
background-color: #f1f1f1;
|
||
border: 1px solid #ccc;
|
||
}
|
||
|
||
.selected {
|
||
background-color: #d4d4d4;
|
||
}
|
||
|
||
.htoolbar {
|
||
width: 100%;
|
||
height: 40px;
|
||
background-color: #f1f1f1;
|
||
border: 1px solid #ccc;
|
||
}
|
||
|
||
.toolbar-button {
|
||
background-color: inherit;
|
||
float: left;
|
||
border: none;
|
||
outline: none;
|
||
cursor: pointer;
|
||
padding: 14px 16px;
|
||
transition: 0.3s;
|
||
border: 1px solid #888;
|
||
}
|
||
|
||
.toolbar-button-active {
|
||
background-color: #ddd;
|
||
}
|
||
|
||
.tabpanel {
|
||
background-color: #ededed;
|
||
border: 3px solid #888;
|
||
}
|
||
|
||
.tabpanel-content {
|
||
background-color: #f8f8f8;
|
||
border: 2px solid #888;
|
||
}
|
||
|
||
.multicolumns {
|
||
column-width: 340px;
|
||
colomn-gap: 10px;
|
||
overflow-x: none;
|
||
}
|
||
|
||
.selected_record {
|
||
border-radius: 8px;
|
||
border: 1px solid #f00;
|
||
}
|
||
.inputbox {
|
||
background-color: #f8f8f8;
|
||
color: #111111;
|
||
border: 1px solid #ccc;
|
||
padding: 10px;
|
||
margin: 0 0 1em 0;
|
||
}
|
||
|
||
.datagrid {
|
||
display:flex;
|
||
flex-direction:column;
|
||
width:100%;
|
||
height:100%;
|
||
}
|
||
|
||
.datagrid-grid {
|
||
width: 100%;
|
||
flex: 1;
|
||
overflow: auto;
|
||
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.datagrid-left {
|
||
height:100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: auto;
|
||
}
|
||
.datagrid-left>.scrollbar {
|
||
width:0px;
|
||
opacity:0;
|
||
}
|
||
.datagrid-right {
|
||
flex:1 0 ;
|
||
height:100%;
|
||
overflow: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.grid_header, .grid_footer {
|
||
height: 50px;
|
||
background-color: blue;
|
||
}
|
||
.childrensize {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
.datagrid-row {
|
||
flex:0 0 150px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
.datagrid-body {
|
||
width: 100%;
|
||
flex: 1;
|
||
overflow: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* Flex 布局 */
|
||
.accordion {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.accordion-item {
|
||
border: 1px solid #ccc;
|
||
width: auto;
|
||
margin-bottom: 5px;
|
||
}
|
||
.accordion-item:nth-child(odd) {
|
||
background-color: #fdfdfd;
|
||
width: auto;
|
||
}
|
||
.accordion-item:nth-child(even) {
|
||
background-color: #f9f9f9;
|
||
width: auto;
|
||
}
|
||
.accordion-item-selected {
|
||
background-color: #efefef;
|
||
}
|
||
.accordion-item-header {
|
||
padding: 10px;
|
||
background-color: #f0f0f0;
|
||
}
|
||
.accordion-item-info {
|
||
padding: 10px;
|
||
background-color: #fbfbfb;
|
||
cursor: pointer;
|
||
width: auto;
|
||
height: 50px;
|
||
}
|
||
.test_box {
|
||
height: 100px;
|
||
background-color: #e6e6e6;
|
||
border-radius: 5px;
|
||
flex-shrink:0;
|
||
border: 1px solid #c00;
|
||
}
|
||
|
||
.accordion-item-info-selected {
|
||
background-color: #e6e6e6;
|
||
}
|
||
.scrollpanel,
|
||
.tabular-table {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto;
|
||
}
|
||
.tabular-header-row {
|
||
display: flex;
|
||
top: 0;
|
||
position: sticky;
|
||
background-color: #dddddd;
|
||
min-width: 0;
|
||
min-width: fit-content;
|
||
flex-wrap: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
.tabular-row {
|
||
display: flex;
|
||
margin-bottom: 5px;
|
||
min-width: 0;
|
||
min-width: fit-content;
|
||
flex-wrap: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
.tabular-row:nth-child(odd) {
|
||
background-color: #efefef;
|
||
}
|
||
.tabular-row:nth-child(even) {
|
||
background-color: #f9f9f9;
|
||
}
|
||
.tabular-row-selected {
|
||
background-color: #fee2e2 !important;
|
||
color: #ef0000;
|
||
}
|
||
.tabular-row-content {
|
||
padding: 2;
|
||
}
|
||
.tabular-cell {
|
||
border: 1px solid #ccc;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.llm_msg {
|
||
margin-left: 5px;
|
||
margin-right: auto;
|
||
margin-bottom: 10px;
|
||
padding: 3px;
|
||
background-color:#fefedd;
|
||
border-top-left-radius: 10px;
|
||
border-top-right-radius: 0;
|
||
border-bottom-right-radius: 10px;
|
||
border-bottom-left-radius: 0;
|
||
box-shadow: 5px 5px 10px rgba(0, 0, 0.2, 0.5);
|
||
}
|
||
|
||
.user_msg {
|
||
margin-left: auto;
|
||
margin-right: 5px;
|
||
margin-bottom: 10px;
|
||
background-color:#ddfefe;
|
||
border-top-right-radius: 10px;
|
||
border-top-left-radius: 0;
|
||
border-bottom-left-radius: 10px;
|
||
border-bottom-right-radius: 0;
|
||
box-shadow: 5px 5px 10px rgba(0.2, 0, 0, 0.5);
|
||
}
|
||
.llm_title {
|
||
background-color:#eeeeee;
|
||
}
|
||
.progress-container {
|
||
width: 80%;
|
||
background-color: #ddd;
|
||
border-radius: 5px;
|
||
overflow: hidden;
|
||
margin-top: 20px;
|
||
}
|
||
.progress-bar {
|
||
height: 30px;
|
||
width: 0%;
|
||
background-color: #4CAF50;
|
||
text-align: center;
|
||
color: white;
|
||
line-height: 30px;
|
||
}
|
||
|
||
.left {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
/* 居右 */
|
||
.right {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
/* 居中 */
|
||
.hcenter {
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 居上 */
|
||
.top {
|
||
align-self: flex-start;
|
||
}
|
||
|
||
/* 居下 */
|
||
.bottom {
|
||
align-self: flex-end;
|
||
}
|
||
|
||
/* 居中 */
|
||
.vcenter {
|
||
align-self: center;
|
||
}
|
||
|
||
.video-container {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
border-radius: 12px;
|
||
background: #000;
|
||
}
|
||
|
||
.video-element {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 12px;
|
||
display: block;
|
||
}
|
||
|
||
.controls {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
|
||
color: white;
|
||
font-size: 14px;
|
||
padding: 10px 15px;
|
||
transition: opacity 0.3s;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.controls:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
.progress-container {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.progress-bar {
|
||
width: 100%;
|
||
accent-color: #ff0000;
|
||
}
|
||
|
||
.controls-bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.play-pause, .mute, .fullscreen {
|
||
background: none;
|
||
border: none;
|
||
color: white;
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.volume, .playback-speed, .audio-track-select {
|
||
font-size: 14px;
|
||
padding: 2px;
|
||
}
|
||
|
||
.time {
|
||
font-family: monospace;
|
||
}
|
||
|
||
.fullscreen {
|
||
margin-left: auto;
|
||
}
|
||
|
||
.thinking-content {
|
||
background-color: #fdfcf5;
|
||
}
|
||
.resp-error {
|
||
background-color: #f04444;
|
||
background-color: #f0f4f4;
|
||
}
|
||
.resp-content {
|
||
background-color: #f0eed8;
|
||
}
|
||
.droparea {
|
||
border: 2px dashed #666;
|
||
border-radius: 10px;
|
||
color: #666;
|
||
}
|
||
.droparea:hover {
|
||
border-color: #00aaff;
|
||
color: #00aaff;
|
||
background: #f0faff;
|
||
}
|
||
|
||
.mini-window {
|
||
width: 50px;
|
||
height: 50px;
|
||
}
|
||
|
||
.auto-textarea {
|
||
/* 1. 确保计算模型一致 */
|
||
box-sizing: border-box;
|
||
/* 2. 允许元素内部处理滚动事件，不传递给父层 */
|
||
touch-action: pan-y;
|
||
/* 3. 极其重要：有些 H5 框架会禁用默认滚动，这里强制开启 */
|
||
pointer-events: auto !important;
|
||
display: block;
|
||
width: 100%;
|
||
min-height: 40px; /* 初始高度 */
|
||
max-height: 350px; /* 最大高度：超过此高度将滚动 */
|
||
line-height: 1.5;
|
||
padding: 10px;
|
||
resize: none; /* 禁用右下角手动拉伸 */
|
||
overflow-y: hidden; /* 初始隐藏滚动条 */
|
||
overflow-x: hidden;
|
||
-webkit-appearance: none; /* 移除 iOS 默认内阴影 */
|
||
border: 1px solid #ccc;
|
||
border-radius: 4px;
|
||
outline: none;
|
||
transition: none;
|
||
}
|
||
/* 针对 Chrome/Edge/Safari 的滚动条美化（解决滚动条突然出现导致内容抖动） */
|
||
.auto-textarea::-webkit-scrollbar {
|
||
width: 5px;
|
||
}
|
||
.auto-textarea::-webkit-scrollbar-thumb {
|
||
background: rgba(0,0,0,0.2);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.inputbox:focus {
|
||
border-color: #007bff;
|
||
}
|
||
.inputbox.field-error {
|
||
border-color: #e74c3c;
|
||
}
|
||
.bricks-text.field-error-msg {
|
||
color: #e74c3c !important;
|
||
}
|
||
|
||
/* ========== Dark Theme (Sage Shell) ========== */
|
||
[data-theme="dark"] body,
|
||
[data-theme="dark"] {
|
||
color: #CBD5E1;
|
||
background-color: #0F172A;
|
||
}
|
||
|
||
[data-theme="dark"] .card {
|
||
background-color: #1E293B;
|
||
border: 1px solid #334155;
|
||
color: #E2E8F0;
|
||
}
|
||
[data-theme="dark"] .card:hover {
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||
border: 2px solid #60A5FA;
|
||
}
|
||
|
||
[data-theme="dark"] .subcard {
|
||
background-color: #1a2436;
|
||
}
|
||
|
||
[data-theme="dark"] .tabular {
|
||
background-color: #1E293B;
|
||
border: 1px solid #334155;
|
||
color: #CBD5E1;
|
||
}
|
||
|
||
[data-theme="dark"] .tabular-header-row {
|
||
background-color: #334155;
|
||
color: #F1F5F9;
|
||
}
|
||
[data-theme="dark"] .tabular-row:nth-child(odd) {
|
||
background-color: #1E293B;
|
||
}
|
||
[data-theme="dark"] .tabular-row:nth-child(even) {
|
||
background-color: #172033;
|
||
}
|
||
[data-theme="dark"] .tabular-row-selected {
|
||
background-color: #451a1a !important;
|
||
color: #F87171;
|
||
}
|
||
[data-theme="dark"] .tabular-cell {
|
||
border: 1px solid #334155;
|
||
color: #CBD5E1;
|
||
}
|
||
|
||
[data-theme="dark"] .curpos {
|
||
background-color: #1E293B;
|
||
}
|
||
|
||
[data-theme="dark"] .inputbox {
|
||
background-color: #0F172A;
|
||
color: #E2E8F0;
|
||
border: 1px solid #475569;
|
||
}
|
||
[data-theme="dark"] .inputbox:focus {
|
||
border-color: #3B82F6;
|
||
}
|
||
|
||
[data-theme="dark"] .popup {
|
||
background-color: #1E293B;
|
||
color: #E2E8F0;
|
||
border: 1px solid #475569;
|
||
}
|
||
|
||
[data-theme="dark"] .modal {
|
||
background-color: #1E293B;
|
||
color: #E2E8F0;
|
||
border: 1px solid #475569;
|
||
}
|
||
[data-theme="dark"] .modal>.title {
|
||
background-color: #334155;
|
||
color: #F1F5F9;
|
||
}
|
||
|
||
[data-theme="dark"] .message {
|
||
background-color: #1E293B;
|
||
color: #E2E8F0;
|
||
border: 1px solid #475569;
|
||
}
|
||
|
||
[data-theme="dark"] .vtoolbar,
|
||
[data-theme="dark"] .htoolbar {
|
||
background-color: #1E293B;
|
||
border: 1px solid #334155;
|
||
}
|
||
|
||
[data-theme="dark"] .toolbar-button {
|
||
border: 1px solid #475569;
|
||
color: #CBD5E1;
|
||
}
|
||
[data-theme="dark"] .toolbar-button-active {
|
||
background-color: #334155;
|
||
}
|
||
|
||
[data-theme="dark"] .tabpanel {
|
||
background-color: #1E293B;
|
||
border: 3px solid #475569;
|
||
}
|
||
[data-theme="dark"] .tabpanel-content {
|
||
background-color: #172033;
|
||
border: 2px solid #475569;
|
||
}
|
||
|
||
[data-theme="dark"] .selected {
|
||
background-color: #334155;
|
||
}
|
||
|
||
[data-theme="dark"] .accordion-item {
|
||
border: 1px solid #334155;
|
||
}
|
||
[data-theme="dark"] .accordion-item:nth-child(odd) {
|
||
background-color: #1E293B;
|
||
}
|
||
[data-theme="dark"] .accordion-item:nth-child(even) {
|
||
background-color: #172033;
|
||
}
|
||
[data-theme="dark"] .accordion-item-header {
|
||
background-color: #334155;
|
||
}
|
||
[data-theme="dark"] .accordion-item-info {
|
||
background-color: #1E293B;
|
||
}
|
||
[data-theme="dark"] .accordion-item-info-selected {
|
||
background-color: #334155;
|
||
}
|
||
|
||
[data-theme="dark"] .titlebar {
|
||
background-color: #334155;
|
||
}
|
||
|
||
[data-theme="dark"] .droparea {
|
||
border: 2px dashed #475569;
|
||
color: #94A3B8;
|
||
}
|
||
[data-theme="dark"] .droparea:hover {
|
||
border-color: #60A5FA;
|
||
color: #60A5FA;
|
||
background: #172033;
|
||
}
|
||
|
||
[data-theme="dark"] pre {
|
||
background-color: #1E293B;
|
||
color: #E2E8F0;
|
||
}
|
||
|
||
[data-theme="dark"] hr {
|
||
background-color: #475569;
|
||
}
|
||
|
||
[data-theme="dark"] .auto-textarea {
|
||
background-color: #1E293B;
|
||
color: #E2E8F0;
|
||
border: 1px solid #475569;
|
||
}
|
||
|
||
[data-theme="dark"] .thinking-content {
|
||
background-color: #1a2436;
|
||
}
|
||
[data-theme="dark"] .resp-content {
|
||
background-color: #1a2436;
|
||
}
|
||
[data-theme="dark"] .resp-error {
|
||
background-color: #7F1D1D;
|
||
}
|
||
|
||
[data-theme="dark"] .llm_msg {
|
||
background-color: #334155;
|
||
color: #E2E8F0;
|
||
}
|
||
[data-theme="dark"] .user_msg {
|
||
background-color: #1E3A5F;
|
||
color: #E2E8F0;
|
||
}
|
||
[data-theme="dark"] .llm_title {
|
||
background-color: #1E293B;
|
||
}
|
||
|
||
/* ---- Menu widget (language switcher, context menus) ---- */
|
||
[data-theme="dark"] .menuitem {
|
||
background-color: #334155 !important;
|
||
color: #E2E8F0 !important;
|
||
border: 1px solid #475569;
|
||
}
|
||
[data-theme="dark"] .menuitem:hover {
|
||
background-color: #475569 !important;
|
||
}
|
||
[data-theme="dark"] .menuitem img {
|
||
filter: invert(1);
|
||
}
|
||
|
||
/* ---- Sidebar Menu collapse ---- */
|
||
.menu-collapsed {
|
||
width: 48px !important;
|
||
min-width: 48px !important;
|
||
overflow: hidden;
|
||
}
|
||
.menu-collapsed .menuitem {
|
||
justify-content: center;
|
||
padding: 8px 0;
|
||
}
|
||
.menu-collapsed .menuitem .bricks-text,
|
||
.menu-collapsed .menuitem .text {
|
||
display: none;
|
||
}
|
||
.menu-collapsed .menuitem img {
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* Override Menu widget's inline backgroundColor:"white" */
|
||
[data-theme="dark"] .popup .vbox,
|
||
[data-theme="dark"] .popup .vcontainer,
|
||
[data-theme="dark"] .popup .vscroll {
|
||
background-color: #1E293B !important;
|
||
color: #E2E8F0;
|
||
}
|
||
|
||
/* ---- Popup content text visibility ---- */
|
||
[data-theme="dark"] .popup h1,
|
||
[data-theme="dark"] .popup h2,
|
||
[data-theme="dark"] .popup h3,
|
||
[data-theme="dark"] .popup h4,
|
||
[data-theme="dark"] .popup h5,
|
||
[data-theme="dark"] .popup h6 {
|
||
color: #F1F5F9;
|
||
}
|
||
[data-theme="dark"] .popup .clickable {
|
||
color: #60A5FA;
|
||
}
|
||
|
||
/* ---- WindowsPanel (minimized windows dock) ---- */
|
||
[data-theme="dark"] .mini-window {
|
||
background-color: #1E293B;
|
||
border: 1px solid #475569;
|
||
}
|
||
[data-theme="dark"] .mini-window:hover {
|
||
border-color: #60A5FA;
|
||
}
|
||
|
||
/* ---- DynamicColumn ---- */
|
||
[data-theme="dark"] .griddata {
|
||
background-color: transparent;
|
||
}
|
||
|
||
/* ---- Top popup shadow (dark variant) ---- */
|
||
[data-theme="dark"] .toppopup {
|
||
box-shadow: 10px 5px 10px rgba(0,0,0,0.5), 0 -5px 5px rgba(255,255,255,0.05);
|
||
}
|
||
|
||
/* ---- InlineForm ---- */
|
||
.inline-form-field {
|
||
flex-shrink: 0;
|
||
white-space: nowrap;
|
||
}
|
||
.inline-form-field input,
|
||
.inline-form-field select {
|
||
height: auto;
|
||
margin: 0;
|
||
}
|
||
|
||
/* === FlipCard widget === */
|
||
.bricks-flipcard {
|
||
perspective: 1000px;
|
||
cursor: pointer;
|
||
}
|
||
.bricks-flipcard-inner {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||
transform-style: preserve-3d;
|
||
}
|
||
.bricks-flipcard:hover .bricks-flipcard-inner {
|
||
transform: rotateY(180deg);
|
||
}
|
||
.bricks-flipcard-front,
|
||
.bricks-flipcard-back {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
backface-visibility: hidden;
|
||
-webkit-backface-visibility: hidden;
|
||
top: 0;
|
||
left: 0;
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
}
|
||
.bricks-flipcard-back {
|
||
transform: rotateY(180deg);
|
||
}
|
||
.bricks-flipcard-front {
|
||
background: #fff;
|
||
box-shadow: 0 18px 54px rgba(90, 60, 160, 0.1), 0 4px 16px rgba(90, 60, 160, 0.05);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 24px;
|
||
gap: 12px;
|
||
}
|
||
.bricks-flipcard-back {
|
||
background: #3b82f6;
|
||
box-shadow: 0 18px 54px rgba(59, 130, 246, 0.2);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 24px;
|
||
gap: 12px;
|
||
}
|
||
|
||
/* === Carousel widget === */
|
||
.bricks-carousel {
|
||
position: relative;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* DimensionFilter active state */
|
||
.dimension-btn-active {
|
||
background-color: var(--sage-brand, #6366f1) !important;
|
||
color: #fff !important;
|
||
}
|
||
[data-theme="dark"] .dimension-btn-active {
|
||
background-color: var(--sage-brand, #818cf8) !important;
|
||
}
|
||
|
||
/* DimensionFilter base */
|
||
.dimension-filter {
|
||
background: var(--sage-bg, #fff);
|
||
color: var(--sage-text, #333);
|
||
}
|
||
[data-theme="dark"] .dimension-filter {
|
||
background: var(--sage-bg-dark, #1e1e2e);
|
||
color: var(--sage-text-dark, #e0e0e0);
|
||
}
|
||
|
||
/* ══════════ 移动端适配（2026-09-07，mobile.js 配套样式） ══════════ */
|
||
|
||
/* 底部 TabBar（TabPanel mobile_bar 模式） */
|
||
.tabbar {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 9000;
|
||
display: flex;
|
||
align-items: stretch;
|
||
background: var(--sage-bg, #ffffff);
|
||
border-top: 1px solid #e2e8f0;
|
||
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||
box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.06);
|
||
}
|
||
[data-theme="dark"] .tabbar {
|
||
background: #0f172a;
|
||
border-top-color: #334155;
|
||
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.4);
|
||
}
|
||
.tabbar-item {
|
||
position: relative;
|
||
min-height: 52px; /* 触控目标 >= 44px */
|
||
padding: 5px 0 4px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
-webkit-tap-highlight-color: transparent;
|
||
color: #64748b;
|
||
transition: color 0.15s ease;
|
||
}
|
||
.tabbar-item-active { color: #2563eb; }
|
||
.tabbar-item-press { background: rgba(37, 99, 235, 0.06); }
|
||
[data-theme="dark"] .tabbar-item { color: #94a3b8; }
|
||
[data-theme="dark"] .tabbar-item-active { color: #60a5fa; }
|
||
.tabbar-icon {
|
||
font-size: 20px;
|
||
line-height: 1.15;
|
||
text-align: center;
|
||
width: 100%;
|
||
}
|
||
.tabbar-item-active .tabbar-icon { transform: scale(1.06); }
|
||
.tabbar-label {
|
||
font-size: 11px;
|
||
line-height: 1.2;
|
||
text-align: center;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.tabbar-item-active .tabbar-label { font-weight: 600; }
|
||
.tabbar-badge {
|
||
position: absolute;
|
||
top: 2px;
|
||
left: 58%;
|
||
min-width: 16px;
|
||
height: 16px;
|
||
padding: 0 4px;
|
||
border-radius: 8px;
|
||
background: #ef4444;
|
||
color: #fff !important;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
line-height: 16px;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 手机视口下 TabPanel 内容区为底部 TabBar 让位 */
|
||
.tabpanel-mobilebar {
|
||
padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* ══════════ MobileSheet 底部上滑竖向菜单（2026-09-08） ══════════
|
||
「更多」溢出 tab / 手机端功能按钮收缩共用。
|
||
蒙层盖全屏（含底部 TabBar 上方）；z-index 高于 TabBar(9000)。 */
|
||
.tabbar-more { flex: 0 0 auto; }
|
||
.sheet-mask {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
/* 高于 TabBar(9000)，低于 PopupWindow(app.new_zindex 从 10000 起)——
|
||
sheet 里选「功能」项弹出的窗口必须盖在蒙层之上可交互 */
|
||
z-index: 9500;
|
||
background: rgba(15, 23, 42, 0.45);
|
||
display: flex;
|
||
/* VBox 基底是 flex column：主轴垂直，面板贴底用 justify-content
|
||
（align-items:flex-end 在 column 下会把面板挤到右侧，实测会翻车） */
|
||
justify-content: flex-end;
|
||
opacity: 0;
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
.sheet-mask-open { opacity: 1; }
|
||
.sheet-panel {
|
||
width: 100%;
|
||
flex: 0 0 auto;
|
||
max-height: 70vh;
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
background: var(--sage-bg, #ffffff);
|
||
border-radius: 16px 16px 0 0;
|
||
padding: 8px 0 calc(12px + env(safe-area-inset-bottom, 0px));
|
||
box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.18);
|
||
transform: translateY(100%);
|
||
transition: transform 0.22s ease;
|
||
box-sizing: border-box;
|
||
}
|
||
.sheet-panel-open { transform: translateY(0); }
|
||
[data-theme="dark"] .sheet-panel {
|
||
background: #0f172a;
|
||
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
|
||
}
|
||
.sheet-handle {
|
||
flex: 0 0 auto;
|
||
align-self: center;
|
||
height: 4px;
|
||
border-radius: 2px;
|
||
background: #cbd5e1;
|
||
margin: 4px auto 8px;
|
||
}
|
||
[data-theme="dark"] .sheet-handle { background: #475569; }
|
||
.sheet-title {
|
||
font-size: 12px;
|
||
color: #94a3b8;
|
||
padding: 0 20px 6px;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
.sheet-empty {
|
||
font-size: 13px;
|
||
color: #94a3b8;
|
||
padding: 18px 20px;
|
||
text-align: center;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
.sheet-item {
|
||
min-height: 48px; /* 触控目标 >= 44px */
|
||
padding: 10px 20px !important;
|
||
box-sizing: border-box;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
-webkit-tap-highlight-color: transparent;
|
||
transition: background 0.12s ease;
|
||
}
|
||
.sheet-item:active { background: rgba(37, 99, 235, 0.06); }
|
||
.sheet-item-active { background: rgba(37, 99, 235, 0.08); }
|
||
.sheet-item-active .sheet-item-label { color: #2563eb !important; font-weight: 600; }
|
||
[data-theme="dark"] .sheet-item:active { background: rgba(96, 165, 250, 0.10); }
|
||
[data-theme="dark"] .sheet-item-active { background: rgba(96, 165, 250, 0.12); }
|
||
[data-theme="dark"] .sheet-item-active .sheet-item-label { color: #60a5fa !important; }
|
||
.sheet-item-icon { font-size: 18px; flex: 0 0 auto; width: 26px; text-align: center; }
|
||
.sheet-item-label { font-size: 15px; color: #1e293b !important; line-height: 1.4; }
|
||
[data-theme="dark"] .sheet-item-label { color: #e2e8f0 !important; }
|
||
.sheet-item-desc { font-size: 12px; color: #94a3b8 !important; line-height: 1.3; }
|
||
|
||
/* 胶囊切换条（ChipBar） */
|
||
.chipbar {
|
||
gap: 8px;
|
||
padding: 8px 12px;
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
scrollbar-width: none;
|
||
align-items: center;
|
||
}
|
||
.chipbar::-webkit-scrollbar { display: none; }
|
||
.chip {
|
||
flex: 0 0 auto;
|
||
padding: 7px 16px !important;
|
||
border-radius: 999px !important;
|
||
border: 1px solid #cbd5e1;
|
||
background: #ffffff;
|
||
color: #334155 !important;
|
||
font-size: 13px !important;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
-webkit-tap-highlight-color: transparent;
|
||
white-space: nowrap;
|
||
transition: all 0.15s ease;
|
||
}
|
||
.chip-active {
|
||
background: #2563eb !important;
|
||
border-color: #2563eb;
|
||
color: #ffffff !important;
|
||
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
|
||
}
|
||
[data-theme="dark"] .chip {
|
||
background: #1e293b;
|
||
border-color: #475569;
|
||
color: #e2e8f0 !important;
|
||
}
|
||
[data-theme="dark"] .chip-active {
|
||
background: #2563eb !important;
|
||
border-color: #2563eb;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
/* ══════════ 手机视口全局规则（<=768px；平板按桌面处理） ══════════ */
|
||
@media (max-width: 768px) {
|
||
/* PopupWindow 全屏化：bricks 弹窗行内 width/height/left/top，用 !important 覆盖。
|
||
* 只针对 .popupwindow —— 普通 .popup（下拉菜单/小提示）保持锚定小窗，
|
||
* 但同样钳制 max-height 不许超出可视屏（2026-09-08 用户报障：
|
||
* 弹出窗口/控件高度超出屏幕，要求高度=屏幕高）。
|
||
* 100vh 在手机浏览器是 large viewport（含地址栏遮挡区），可能大于可视高，
|
||
* 支持 dvh 的内核用 dvh（dynamic viewport，随地址栏收缩）；
|
||
* 不支持的（老微信 X5 等）由 popup.js _mobile_clamp 以 window.innerHeight
|
||
* 实测内联 important 覆盖兜底（JS 权威，CSS 只是首帧静态兜底）。
|
||
* 底部让出 TabBar 高度：全屏弹窗不盖住底部标签栏（2026-09-08 用户要求），
|
||
* 用户随时可点 Tab 离开弹窗页 */
|
||
.popupwindow {
|
||
width: 100vw !important;
|
||
max-width: 100vw !important;
|
||
height: calc(100vh - 56px - env(safe-area-inset-bottom, 0px)) !important;
|
||
max-height: calc(100vh - 56px - env(safe-area-inset-bottom, 0px)) !important;
|
||
left: 0 !important;
|
||
top: 0 !important;
|
||
border-radius: 0 !important;
|
||
box-sizing: border-box;
|
||
}
|
||
/* 普通弹出控件（.popup：下拉/提示/锚定小窗）不许高出可视屏。
|
||
* :not(.popupwindow) —— PopupWindow 同时带两个类，它的高度由上面
|
||
* .popupwindow 规则钳制（要让出 TabBar），别被这里覆盖 */
|
||
.popup:not(.popupwindow) {
|
||
max-width: 100vw !important;
|
||
max-height: calc(100vh - env(safe-area-inset-bottom, 0px)) !important;
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
@supports (height: 100dvh) {
|
||
.popupwindow {
|
||
height: calc(100dvh - 56px - env(safe-area-inset-bottom, 0px)) !important;
|
||
max-height: calc(100dvh - 56px - env(safe-area-inset-bottom, 0px)) !important;
|
||
}
|
||
.popup:not(.popupwindow) {
|
||
max-height: calc(100dvh - env(safe-area-inset-bottom, 0px)) !important;
|
||
}
|
||
}
|
||
/* 输入控件 16px：iOS Safari 对 <16px 输入框聚焦时自动放大页面 */
|
||
.inputbox, .auto-textarea, textarea,
|
||
input[type="text"], input[type="password"], input[type="number"], select {
|
||
font-size: 16px !important;
|
||
}
|
||
/* 表格横向滚动不挤压 */
|
||
.tabular {
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
/* 弹窗/工具栏按钮触控目标 */
|
||
.toolbar-button, .popup button, .message button {
|
||
min-height: 40px;
|
||
}
|
||
}
|
||
.chip-empty {
|
||
color: #94a3b8 !important;
|
||
font-size: 13px !important;
|
||
padding: 8px 12px !important;
|
||
white-space: normal !important;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* 门禁遮罩定位工具类（2026-09-08 未购产线引导层用）：
|
||
* 根容器 relative + 遮罩 absolute 铺满内容区（不盖顶栏/底部 TabBar） */
|
||
.pl-gate-root { position: relative; }
|
||
.pl-gate {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|