594 lines
8.5 KiB
CSS
Executable File
594 lines
8.5 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;
|
|
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 {
|
|
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: auto;
|
|
max-width: 1000px;
|
|
overflow: hidden;
|
|
border-radius: 12px;
|
|
background: #000;
|
|
}
|
|
|
|
.video-element {
|
|
width: 100%;
|
|
height: auto;
|
|
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-content {
|
|
background-color: #f0eed8;
|
|
}
|