style(desktop): improve alignment and spacing across file/share views
This commit is contained in:
@@ -1279,7 +1279,7 @@ select:focus {
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
border: 1px solid rgba(141, 164, 196, 0.3);
|
||||
border-radius: 16px;
|
||||
padding: 0 12px;
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -1290,11 +1290,14 @@ select:focus {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
gap: 4px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.crumb-btn {
|
||||
height: 30px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #3f5876;
|
||||
@@ -1310,29 +1313,41 @@ select:focus {
|
||||
.tool-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 260px;
|
||||
height: 34px;
|
||||
width: 280px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.solid-btn {
|
||||
height: 34px;
|
||||
height: 36px;
|
||||
min-width: 78px;
|
||||
padding: 0 14px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
height: 34px;
|
||||
height: 36px;
|
||||
min-width: 74px;
|
||||
border: 1px solid #cad8ea;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
color: #284666;
|
||||
padding: 0 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
@@ -1350,13 +1365,13 @@ select:focus {
|
||||
.main-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 270px;
|
||||
gap: 12px;
|
||||
gap: 14px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.content-panel,
|
||||
.detail-panel {
|
||||
padding: 14px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
@@ -1366,7 +1381,8 @@ select:focus {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.panel-head h3 {
|
||||
@@ -1377,32 +1393,37 @@ select:focus {
|
||||
.panel-head span {
|
||||
color: #60768f;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.icon-grid {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: repeat(auto-fill, 140px);
|
||||
gap: 12px;
|
||||
grid-template-columns: repeat(auto-fill, 144px);
|
||||
justify-content: flex-start;
|
||||
align-content: start;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
padding-right: 4px;
|
||||
padding: 2px 4px 2px 2px;
|
||||
}
|
||||
|
||||
.file-card {
|
||||
border: 1px solid #d8e1ee;
|
||||
border-radius: 12px;
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
text-align: left;
|
||||
padding: 12px 10px;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
gap: 4px;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
gap: 6px;
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -1418,8 +1439,8 @@ select:focus {
|
||||
}
|
||||
|
||||
.file-icon-glyph {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #d7e4f8;
|
||||
background: #f2f7ff;
|
||||
@@ -1427,27 +1448,37 @@ select:focus {
|
||||
place-items: center;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #1f2b3a;
|
||||
line-height: 1.35;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
min-height: 34px;
|
||||
}
|
||||
|
||||
.file-meta,
|
||||
.file-time {
|
||||
font-size: 11px;
|
||||
color: #60768f;
|
||||
line-height: 1.35;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-time {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.task-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -1498,7 +1529,7 @@ select:focus {
|
||||
.share-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
overflow: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
@@ -1507,9 +1538,9 @@ select:focus {
|
||||
border: 1px solid #d8e1ee;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
padding: 12px;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
gap: 12px;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -1518,7 +1549,7 @@ select:focus {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.share-title {
|
||||
@@ -1548,6 +1579,7 @@ select:focus {
|
||||
.share-meta {
|
||||
font-size: 12px;
|
||||
color: #5a718c;
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -1556,12 +1588,14 @@ select:focus {
|
||||
.share-meta {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 4px;
|
||||
}
|
||||
|
||||
.share-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.context-mask {
|
||||
@@ -1573,22 +1607,24 @@ select:focus {
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
z-index: 90;
|
||||
width: 210px;
|
||||
width: 224px;
|
||||
border: 1px solid #d1dced;
|
||||
border-radius: 12px;
|
||||
border-radius: 14px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 12px 24px rgba(25, 52, 86, 0.2);
|
||||
padding: 6px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.context-item {
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
height: 36px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
padding: 0 10px;
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #2a4664;
|
||||
cursor: pointer;
|
||||
@@ -1605,7 +1641,7 @@ select:focus {
|
||||
.context-divider {
|
||||
height: 1px;
|
||||
background: #e5edf7;
|
||||
margin: 4px 6px;
|
||||
margin: 6px 4px;
|
||||
}
|
||||
|
||||
.detail-panel h3 {
|
||||
@@ -1614,17 +1650,22 @@ select:focus {
|
||||
}
|
||||
|
||||
.stat-grid {
|
||||
margin-top: 10px;
|
||||
margin-top: 12px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.stat-grid > div {
|
||||
border-radius: 10px;
|
||||
border: 1px solid #d8e1ee;
|
||||
background: #f7faff;
|
||||
padding: 10px;
|
||||
padding: 12px;
|
||||
min-height: 68px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stat-grid strong {
|
||||
@@ -1638,9 +1679,9 @@ select:focus {
|
||||
}
|
||||
|
||||
.selected-info {
|
||||
margin-top: 12px;
|
||||
margin-top: 14px;
|
||||
border-top: 1px solid #dbe6f2;
|
||||
padding-top: 12px;
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.selected-info h4 {
|
||||
@@ -1649,13 +1690,18 @@ select:focus {
|
||||
}
|
||||
|
||||
.selected-info p {
|
||||
margin: 0 0 6px;
|
||||
margin: 0 0 7px;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
color: #4f6984;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
margin: auto;
|
||||
padding: 24px 12px;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
color: #5a7089;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user