mirror of
https://github.com/RhenCloud/Cloud-Index.git
synced 2025-12-06 15:17:40 +08:00
feat: 优化响应式布局,调整标题和操作按钮样式
This commit is contained in:
@@ -52,6 +52,14 @@ h1 {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 > div {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 通用按钮样式 */
|
/* 通用按钮样式 */
|
||||||
@@ -865,9 +873,7 @@ video.preview-content {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.actions-col {
|
.actions-col {
|
||||||
width: auto;
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-align: right;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.actions-col > * {
|
.actions-col > * {
|
||||||
@@ -876,7 +882,6 @@ video.preview-content {
|
|||||||
gap: 4px;
|
gap: 4px;
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
@media (max-width: 1200px) {
|
||||||
.files-table .action-text {
|
.files-table .action-text {
|
||||||
@@ -889,35 +894,91 @@ video.preview-content {
|
|||||||
|
|
||||||
@media (max-width: 992px) {
|
@media (max-width: 992px) {
|
||||||
.last-modified-col {
|
.last-modified-col {
|
||||||
display: none;
|
display: none !important;
|
||||||
}
|
}
|
||||||
.file-name-col {
|
.file-name-col {
|
||||||
width: 60%;
|
max-width: 200px;
|
||||||
}
|
|
||||||
.file-size-col {
|
|
||||||
width: 20%;
|
|
||||||
}
|
|
||||||
.actions-col {
|
|
||||||
width: 20%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.file-size-col {
|
.file-size-col {
|
||||||
display: none;
|
display: none !important;
|
||||||
}
|
}
|
||||||
.file-name-col {
|
.file-name-col {
|
||||||
width: 70%;
|
max-width: 150px;
|
||||||
}
|
|
||||||
.actions-col {
|
|
||||||
width: 30%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.files-table .action-text {
|
.files-table .action-text {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.files-table .action-link {
|
.files-table .action-link,
|
||||||
|
.files-table button.action-link {
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
|
font-size: 1em;
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.files-table td,
|
||||||
|
.files-table th {
|
||||||
|
padding: 8px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-col > * {
|
||||||
|
margin-left: 2px;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
body {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 12px;
|
||||||
|
width: calc(100% - 20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 > div {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.files-table td,
|
||||||
|
.files-table th {
|
||||||
|
padding: 6px 2px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-col {
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-name-col {
|
||||||
|
max-width: 120px;
|
||||||
|
font-size: 0.85em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.files-table .action-link,
|
||||||
|
.files-table button.action-link {
|
||||||
|
padding: 4px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
margin-left: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-col > * {
|
||||||
|
margin-left: 1px;
|
||||||
|
gap: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user