438 lines
7.7 KiB
CSS
438 lines
7.7 KiB
CSS
:root {
|
|
--accent-color: #8E8CD8;
|
|
--bg-color: rgba(32, 32, 32, 0.65);
|
|
--sidebar-bg: rgba(25, 25, 25, 0.7);
|
|
--sidebar-hover: rgba(255, 255, 255, 0.08);
|
|
--item-active-hover: rgba(255, 255, 255, 0.06);
|
|
--text-color: #f3f3f3;
|
|
--border-color: rgba(255, 255, 255, 0.08);
|
|
--card-bg: rgba(38, 38, 38, 0.5);
|
|
--titlebar-height: 32px;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
font-family: "Segoe UI Variable", "Segoe UI", "Noto Sans SC", sans-serif;
|
|
user-select: none;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
color: var(--text-color);
|
|
/* background: var(--bg-color); */
|
|
/* background: #202020; */
|
|
background: transparent;
|
|
/* backdrop-filter: blur(20px) saturate(160%); */
|
|
-webkit-backdrop-filter: blur(20px) saturate(160%);
|
|
/* overflow: hidden; */
|
|
}
|
|
|
|
/* 主体区域 */
|
|
.main {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 200px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 12px 0;
|
|
overflow-y: auto;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
/* 整个滚动条宽度 */
|
|
.sidebar::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
/* 滚动条轨道 */
|
|
.sidebar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
/* 滚动条滑块 */
|
|
.sidebar::-webkit-scrollbar-thumb {
|
|
background-color: rgba(120, 120, 120, 0.4);
|
|
border-radius: 2px;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
/* 滚动条在鼠标悬浮时更亮一些 */
|
|
.sidebar::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(160, 160, 160, 0.6);
|
|
}
|
|
|
|
/* 深色模式下更暗 */
|
|
@media (prefers-color-scheme: dark) {
|
|
.sidebar::-webkit-scrollbar-thumb {
|
|
background-color: rgba(180, 180, 180, 0.25);
|
|
}
|
|
|
|
.sidebar::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(220, 220, 220, 0.4);
|
|
}
|
|
}
|
|
|
|
.sidebar-header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 24px 12px 24px;
|
|
gap: 10px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.content-header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 24px 12px 4px;
|
|
gap: 10px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.sidebar-header img {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.sidebar-header span {
|
|
font-weight: 500;
|
|
font-size: 19px;
|
|
}
|
|
|
|
.content-header span {
|
|
font-weight: 500;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
/* 控制 emoji 大小 */
|
|
line-height: 1;
|
|
/* 避免多余行高影响垂直居中 */
|
|
width: 24px;
|
|
height: 24px;
|
|
text-align: center;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
.input-icon {
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
.sidebar .item {
|
|
padding: 6px 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 15px;
|
|
position: relative;
|
|
/* transition: background 0.02s, color 0.02s; */
|
|
transition: none;
|
|
border-radius: 5px;
|
|
margin: 2px 8px;
|
|
color: #e6e6e6;
|
|
/* font-weight: 450; */
|
|
}
|
|
|
|
.sidebar .item:hover {
|
|
background: var(--sidebar-hover);
|
|
}
|
|
|
|
.sidebar .item.active {
|
|
background: var(--item-active-hover);
|
|
}
|
|
|
|
.sidebar .item.active:hover {
|
|
background: var(--sidebar-hover);
|
|
color: #fff;
|
|
}
|
|
|
|
/* item 左侧的 bar */
|
|
.sidebar .item::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: -2px;
|
|
width: 4px;
|
|
height: 50%;
|
|
border-radius: 3px;
|
|
background: var(--accent-color);
|
|
/* 初始收起 */
|
|
transform: scaleY(0);
|
|
/* 从中间往上下展开 */
|
|
transform-origin: center center;
|
|
/* 动画过渡 */
|
|
transition: transform 0.25s ease;
|
|
/* 初始隐藏 */
|
|
opacity: 0;
|
|
}
|
|
|
|
.sidebar .item.active::before {
|
|
transform: scaleY(1);
|
|
/* 展开 */
|
|
opacity: 1;
|
|
/* 渐显 */
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
padding: 12px 12px;
|
|
overflow-y: auto;
|
|
display: none;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.active {
|
|
display: block;
|
|
}
|
|
|
|
.section {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 20px 24px;
|
|
margin-bottom: 18px;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
|
|
/* backdrop-filter: blur(10px); */
|
|
/* z-index: 0; */
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 15px;
|
|
font-weight: 550;
|
|
color: #ccc;
|
|
}
|
|
|
|
select {
|
|
padding: 6px 10px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-color);
|
|
background-color: rgba(45, 45, 45, 0.8);
|
|
color: #f3f3f3;
|
|
font-size: 14px;
|
|
transition: border 0.2s, background 0.2s;
|
|
}
|
|
|
|
select:focus {
|
|
outline: none;
|
|
border: 1px solid var(--accent-color);
|
|
background-color: rgba(50, 50, 50, 0.9);
|
|
}
|
|
|
|
/* 候选窗口预览 */
|
|
.candidate-preview h2 {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.cand-prev-title {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
input[type="range"] {
|
|
width: 100%;
|
|
accent-color: var(--accent-color);
|
|
}
|
|
|
|
.candidate-container {
|
|
font-family: Arial, sans-serif;
|
|
font-size: 16px;
|
|
background-color: #202020;
|
|
padding: 2px;
|
|
border-radius: 6px;
|
|
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
|
|
min-width: 7em;
|
|
width: fit-content;
|
|
user-select: none;
|
|
border: 2px solid #9b9b9b2e;
|
|
}
|
|
|
|
.candidate-row {
|
|
justify-content: space-between;
|
|
padding: 2px;
|
|
padding-right: 12px;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
margin-top: 2px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.candidate-cand {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.candidate-row-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.candidate-first {
|
|
background-color: #3e3e3eb9;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.candidate-first::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
height: 0.8em;
|
|
width: 0.2em;
|
|
background: #6b69d6;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.candidate-text {
|
|
padding-left: 8px;
|
|
color: #e9e8e8;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.divider {
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: #908f8f16;
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.arrange-item {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
/* 主题模式 */
|
|
.theme .ftb-toggle {
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
/* 下拉按钮主体 */
|
|
.theme-toggle-header {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.dropdown-toggle {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: rgba(45, 45, 45, 0.85);
|
|
border: 0px solid var(--border-color);
|
|
border-radius: 8px;
|
|
color: #f3f3f3;
|
|
font-size: 14px;
|
|
padding: 4px 12px;
|
|
padding-right: 6px;
|
|
transition: all 0.2s ease;
|
|
text-align: left;
|
|
min-width: 100px;
|
|
}
|
|
|
|
div.arrow {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.dropdown-toggle img {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
/* 移除悬浮时的高亮效果 */
|
|
.dropdown-toggle:hover {
|
|
background: rgba(45, 45, 45, 0.85);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.dropdown-menu {
|
|
display: none;
|
|
position: absolute;
|
|
right: 0;
|
|
top: calc(100% + 2px);
|
|
background: rgba(40, 40, 40, 0.96);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
min-width: 100px;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
|
|
backdrop-filter: blur(12px);
|
|
z-index: 999;
|
|
overflow: hidden;
|
|
animation: dropdownFade 0.12s ease-out;
|
|
}
|
|
|
|
/* 悬浮时保持圆角和背景，不再加亮 */
|
|
.dropdown-item {
|
|
margin: 2px;
|
|
padding: 4px 8px;
|
|
color: #eee;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
/* 让每个选项也有圆角 */
|
|
}
|
|
|
|
.dropdown-item:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: #fff;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.dropdown.open .dropdown-menu {
|
|
display: block;
|
|
}
|
|
|
|
/* 外观 -> 悬浮工具栏 */
|
|
.ftb-toggle-btn {
|
|
position: relative;
|
|
width: 38px;
|
|
height: 19px;
|
|
background: #555;
|
|
border-radius: 9px;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
transition: background 0.2s ease, border 0.2s ease;
|
|
}
|
|
|
|
.ftb-toggle-knob {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 1px;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
transform: translateY(-50%);
|
|
transition: all 0.2s ease;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.ftb-toggle-btn.active {
|
|
background: #8E8CD8;
|
|
border-color: #555;
|
|
}
|
|
|
|
.ftb-toggle-btn.active .ftb-toggle-knob {
|
|
/* 38 - 16 - 1 * 2 = 20 */
|
|
transform: translate(20px, -50%);
|
|
} |