mirror of
https://github.com/RhenCloud/Cloud-Index.git
synced 2025-12-06 15:17:40 +08:00
RhenCloud
730ee20048
- 移除 main.js 并替换为8个 JS 模块 - 移除 main.css 并替换为7个 CSS 模块 - 更新 base.html 以加载模块化文件 - 通过 index.css 保持完全向后兼容 - 改进代码组织、可维护性和可复用性
170 lines
3.2 KiB
CSS
170 lines
3.2 KiB
CSS
/**
|
|
* 网格视图样式
|
|
*/
|
|
|
|
/* Grid view 容器 */
|
|
.grid-container {
|
|
display: none;
|
|
margin-top: 20px;
|
|
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
:root[data-view="grid"] .files-table {
|
|
display: none;
|
|
}
|
|
|
|
:root[data-view="grid"] .grid-container {
|
|
display: grid;
|
|
}
|
|
|
|
/* 网格卡片 */
|
|
.grid-card {
|
|
background: var(--container-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 10px;
|
|
text-align: center;
|
|
box-shadow: 0 1px 2px var(--shadow-color);
|
|
}
|
|
|
|
.grid-checkbox {
|
|
text-align: left;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.grid-checkbox input {
|
|
transform: scale(1.05);
|
|
accent-color: var(--link-color);
|
|
}
|
|
|
|
/* 网格缩略图 */
|
|
.grid-thumb {
|
|
width: 100%;
|
|
height: 100px;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
margin-bottom: 8px;
|
|
background-color: var(--icon-bg);
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.grid-thumb:hover {
|
|
transform: scale(1.02);
|
|
box-shadow: 0 2px 8px var(--shadow-color);
|
|
}
|
|
|
|
/* 网格图标容器 */
|
|
.grid-icon {
|
|
width: 100%;
|
|
height: 100px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 8px;
|
|
border-radius: 6px;
|
|
background-color: var(--icon-bg);
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.grid-icon:hover {
|
|
transform: scale(1.02);
|
|
background-color: var(--hover-bg);
|
|
box-shadow: 0 2px 8px var(--shadow-color);
|
|
}
|
|
|
|
.grid-icon i {
|
|
font-size: 64px;
|
|
}
|
|
|
|
/* 网格卡片文件名 */
|
|
.grid-name {
|
|
display: block;
|
|
font-size: 0.95em;
|
|
color: var(--text-color);
|
|
margin-bottom: 6px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* 网格卡片操作按钮 */
|
|
.grid-actions {
|
|
display: flex;
|
|
gap: 4px;
|
|
justify-content: center;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.grid-action-btn {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 4px 6px;
|
|
border-radius: 4px;
|
|
font-size: 0.85em;
|
|
transition: all 0.2s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
}
|
|
|
|
.grid-action-btn.preview {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.grid-action-btn.preview:hover {
|
|
background-color: rgba(0, 123, 255, 0.1);
|
|
}
|
|
|
|
.grid-action-btn.download {
|
|
color: var(--success-color);
|
|
}
|
|
|
|
.grid-action-btn.download:hover {
|
|
background-color: rgba(40, 167, 69, 0.1);
|
|
}
|
|
|
|
.grid-action-btn.delete {
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
.grid-action-btn.delete:hover {
|
|
background-color: rgba(220, 53, 69, 0.1);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.grid-container {
|
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
}
|
|
|
|
.grid-icon i {
|
|
font-size: 48px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.grid-container {
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.grid-card {
|
|
padding: 8px;
|
|
}
|
|
|
|
.grid-icon i {
|
|
font-size: 40px;
|
|
}
|
|
|
|
.grid-name {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.grid-actions {
|
|
gap: 2px;
|
|
}
|
|
}
|