/* 可折叠Notebook样式 */ /* 整个Notebook折叠按钮样式 */ .o_notebook_collapse_btn { display: inline-block; /* margin-right: 10px; */ /* margin-bottom: 5px; */ /* padding: 6px; */ background-color: transparent; color: #000; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: 500; transition: all 0.2s ease; user-select: none; vertical-align: top; line-height: 1.4; width: 30px; height: 30px; text-align: center; } /* 确保按钮和标签页在同一行 */ .o_notebook_collapse_btn + .nav-tabs { display: inline-block; vertical-align: top; width: calc(100% - 40px); /* 为按钮留出空间 */ } /* 为包含按钮的容器设置样式 */ .o_notebook .o_notebook_collapse_btn { float: left; margin-top: 5px; width: 30px; /* 固定按钮宽度 */ } .o_notebook .nav-tabs { overflow: visible; white-space: nowrap; flex-wrap: nowrap; } /* 确保导航标签不换行 */ .o_notebook .nav-tabs .nav-item { display: inline-block; white-space: nowrap; } .o_notebook .nav-tabs .nav-link { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; } .o_notebook_collapse_btn:hover { background-color: #f5f5f5; color: #000; } .o_notebook_collapse_btn:active { background-color: #e9e9e9; } .o_notebook_collapse_btn.o_collapsed { background-color: transparent; color: #000; } .o_notebook_collapse_btn.o_collapsed:hover { background-color: #f5f5f5; color: #000; } /* 折叠状态的整个Notebook */ .o_collapsible_notebook.o_notebook_collapsed .o_notebook .tab-content { display: none; transition: all 0.3s ease; } .o_collapsible_notebook.o_notebook_collapsed .o_notebook .nav-tabs { opacity: 0.7; transition: opacity 0.3s ease; } /* 展开状态的整个Notebook */ .o_collapsible_notebook:not(.o_notebook_collapsed) .o_notebook .tab-content { display: block; transition: all 0.3s ease; } .o_collapsible_notebook:not(.o_notebook_collapsed) .o_notebook .nav-tabs { opacity: 1; transition: opacity 0.3s ease; } /* 页面内容区域的过渡效果 */ .o_notebook .tab-pane { transition: opacity 0.3s ease, height 0.3s ease; } /* 响应式设计 */ @media (max-width: 768px) { .o_notebook_collapse_btn { font-size: 14px; padding: 4px; width: 25px; height: 25px; } .o_notebook_collapse_btn + .nav-tabs { width: calc(100% - 35px); } .o_notebook .nav-tabs .nav-link { font-size: 12px; padding: 8px 6px; } } /* 深色主题支持 */ @media (prefers-color-scheme: dark) { .o_notebook_collapse_btn { background-color: transparent; color: #fff; } .o_notebook_collapse_btn:hover { background-color: #333; color: #fff; } .o_notebook_collapse_btn.o_collapsed { background-color: transparent; color: #fff; } .o_notebook_collapse_btn.o_collapsed:hover { background-color: #333; color: #fff; } } /* 动画效果 */ @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } } /* 展开动画 */ .o_notebook .tab-pane.expanding { animation: slideDown 0.3s ease; } /* 折叠动画 */ .o_notebook .tab-pane.collapsing { animation: slideUp 0.3s ease; } /* 工具提示样式 */ .o_collapse_btn[title]:hover::after { content: attr(title); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background-color: #333; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; z-index: 1000; margin-bottom: 5px; } .o_collapse_btn[title]:hover::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #333; z-index: 1000; } /* 高对比度模式支持 */ @media (prefers-contrast: high) { .o_notebook_collapse_btn { border: 2px solid currentColor; } } /* 减少动画模式支持 */ @media (prefers-reduced-motion: reduce) { .o_notebook .tab-pane, .o_notebook_collapse_btn, .o_collapsible_notebook { transition: none; } .o_notebook .tab-pane.expanding, .o_notebook .tab-pane.collapsing { animation: none; } } /* 打印样式 */ @media print { .o_notebook_collapse_btn { display: none; } .o_collapsible_notebook.o_notebook_collapsed .o_notebook .tab-content { display: block !important; } .o_collapsible_notebook.o_notebook_collapsed .o_notebook .nav-tabs { opacity: 1 !important; } }