mirror of
https://github.com/RhenCloud/Cloud-Index.git
synced 2025-12-06 07:06:41 +08:00
RhenCloud
730ee20048
- 移除 main.js 并替换为8个 JS 模块 - 移除 main.css 并替换为7个 CSS 模块 - 更新 base.html 以加载模块化文件 - 通过 index.css 保持完全向后兼容 - 改进代码组织、可维护性和可复用性
150 lines
2.8 KiB
CSS
150 lines
2.8 KiB
CSS
/**
|
|
* 按钮样式
|
|
*/
|
|
|
|
/* 通用按钮基类 */
|
|
.btn {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 8px;
|
|
border-radius: 6px;
|
|
font-size: 1em;
|
|
transition: all 0.2s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.btn:hover {
|
|
background-color: var(--hover-bg);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* 导航栏按钮 */
|
|
.nav-btn {
|
|
color: var(--secondary-text);
|
|
font-size: 1.1em;
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.nav-btn:hover {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
/* 主题/视图切换按钮 */
|
|
.theme-toggle,
|
|
.view-toggle {
|
|
background: none;
|
|
border: none;
|
|
color: var(--secondary-text);
|
|
cursor: pointer;
|
|
padding: 8px 10px;
|
|
border-radius: 6px;
|
|
font-size: 1.1em;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.theme-toggle:hover,
|
|
.view-toggle:hover {
|
|
background-color: var(--hover-bg);
|
|
color: var(--text-color);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.theme-toggle:active,
|
|
.view-toggle:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* 删除按钮 */
|
|
.delete-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--danger-color);
|
|
cursor: pointer;
|
|
padding: 6px 10px;
|
|
border-radius: 6px;
|
|
font-size: 0.9em;
|
|
transition: all 0.2s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.delete-btn:hover {
|
|
background-color: rgba(220, 53, 69, 0.1);
|
|
color: var(--danger-hover-color);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.delete-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* 下载按钮 */
|
|
.download-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--success-color);
|
|
cursor: pointer;
|
|
padding: 6px 10px;
|
|
border-radius: 6px;
|
|
font-size: 0.9em;
|
|
transition: all 0.2s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.download-btn:hover {
|
|
background-color: rgba(40, 167, 69, 0.1);
|
|
color: #218838;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.download-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* 操作链接按钮 */
|
|
.action-link {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
transition: all 0.2s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.action-link:hover {
|
|
background-color: var(--hover-bg);
|
|
text-decoration: none;
|
|
}
|
|
|
|
button.action-link {
|
|
border: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
font-size: 0.9em;
|
|
font-family: inherit;
|
|
}
|
|
|
|
/* 重命名按钮 */
|
|
.rename-btn,
|
|
.grid-action-btn.rename {
|
|
color: var(--warning-color);
|
|
}
|
|
|
|
.rename-btn:hover,
|
|
.grid-action-btn.rename:hover {
|
|
color: var(--warning-hover-color);
|
|
}
|