180 lines
3.5 KiB
CSS
180 lines
3.5 KiB
CSS
/* 优化弹出窗口背景和圆角 */
|
||
#fgc-popup-dialog{
|
||
border-radius: 8px !important;
|
||
overflow: hidden;
|
||
}
|
||
/* .FUI-dialog-cover.FUI-show{
|
||
backdrop-filter: blur(3px);
|
||
} */
|
||
|
||
/* 单选按钮圆形 */
|
||
.singlebox .fgc-toggle-button {
|
||
border-radius: 20px;
|
||
}
|
||
|
||
/* 活字格菜单组件 */
|
||
.pms-menu-row ul {
|
||
text-align: center;
|
||
}
|
||
.pms-menu-row ul li {
|
||
width: auto !important;
|
||
margin: 0 10px;
|
||
}
|
||
.pms-menu-row ul li a {
|
||
padding: 0px 10px !important;
|
||
}
|
||
|
||
/*文字溢出隐藏*/
|
||
|
||
.ec-label label,
|
||
.ec-label a {
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap !important;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.ec-label .fgc-align {
|
||
width: 100%;
|
||
}
|
||
|
||
/* 工具栏bar撑满圆角 */
|
||
.toolbar .menuContainer {
|
||
border-radius: 5px;
|
||
padding: 5px 0;
|
||
height: 100%;
|
||
}
|
||
.toolbar .menuContainer > ul {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-content: center;
|
||
align-items: center;
|
||
height: 100%;
|
||
}
|
||
|
||
.toolbar-left .menuContainer > ul{
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.toolbar-right .menuContainer > ul{
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.toolbar .menuContainer > ul > li {
|
||
width: auto !important;
|
||
padding: 5px 0;
|
||
margin: 0 10px !important;
|
||
height: auto;
|
||
}
|
||
|
||
.toolbar .menuContainer > ul > li > a {
|
||
padding-left: 12px !important;
|
||
line-height: 0px !important;
|
||
min-height: 26px;
|
||
background: #efefef;
|
||
transition-duration: 0.3s;
|
||
}
|
||
.toolbar .menuContainer > ul > li > a:hover {
|
||
background: #d8d8d8;
|
||
}
|
||
|
||
.toolbar .menuContainer > ul > li > a > i {
|
||
margin: 0 !important;
|
||
}
|
||
|
||
.toolbar .menuContainer > ul > li > ul {
|
||
margin-top: 0px;
|
||
}
|
||
|
||
.toolbar .menuContainer > ul > li > ul li:last-child > a {
|
||
border-radius: 0 0 3px 3px;
|
||
}
|
||
|
||
.toolbar .menuContainer > ul > li > ul li:first-child > a {
|
||
border-radius: 3px 3px 0 0;
|
||
}
|
||
|
||
/* 定义淡入动画 */
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0; /* 开始时元素完全透明 */
|
||
}
|
||
to {
|
||
opacity: 1; /* 结束时元素完全不透明 */
|
||
}
|
||
}
|
||
|
||
/* 应用淡入动画的CSS类 */
|
||
.fade-in {
|
||
opacity: 0; /* 初始状态为不可见 */
|
||
animation-name: fadeIn; /* 使用定义的fadeIn动画 */
|
||
animation-duration: 3s; /* 动画持续时间为2秒 */
|
||
animation-fill-mode: forwards; /* 动画完成后保持最后一帧的样式 */
|
||
}
|
||
.animation-delay-1{
|
||
animation-delay: 1s;
|
||
}
|
||
.animation-delay-2{
|
||
animation-delay: 3s;
|
||
}
|
||
.animation-delay-3{
|
||
animation-delay: 3s;
|
||
}
|
||
|
||
.max-height-150{
|
||
max-height: 140px;
|
||
overflow: auto !important;
|
||
}
|
||
/* 淡入淡出*/
|
||
.fade-effect {
|
||
transition: opacity 1s ease, transform 1s ease;
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.hidden {
|
||
opacity: 0;
|
||
transform: translateY(20px); /* 向下移动20像素 */
|
||
}
|
||
|
||
/* 聊天气泡框 */
|
||
.chatpop .markdown-body.editormd-html-preview{
|
||
white-space: normal !important;
|
||
padding: 0 !important;
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
/* 定义旋转动画 */
|
||
@keyframes rotate-and-fade {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
opacity: 1;
|
||
}
|
||
25% {
|
||
transform: rotate(90deg);
|
||
opacity: 0.6;
|
||
}
|
||
50% {
|
||
transform: rotate(180deg);
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
transform: rotate(360deg);
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
|
||
/* 应用动画的CSS类 */
|
||
.rotate-slow {
|
||
animation: rotate-and-fade 10s linear infinite; /* 持续时间10秒，线性速率，无限循环 */
|
||
}
|
||
|
||
/* 图文列表中按钮 */
|
||
.repeater-item:hover .hover-btn {
|
||
transition: all 0.5s;
|
||
opacity: 1;
|
||
}
|
||
|
||
.repeater-item .hover-btn {
|
||
opacity: 0;
|
||
} |