fix vertical align

pull/427/head
Sansui233 2021-09-21 20:37:52 +08:00
parent a167ce1376
commit 8e53c2883d
1 changed files with 14 additions and 73 deletions

View File

@ -54,83 +54,24 @@
.list-table tr[data-to]:hover a{color:white} .list-table tr[data-to]:hover a{color:white}
.list-table tr:first-child{background:rgba(245,245,245,0)} .list-table tr:first-child{background:rgba(245,245,245,0)}
.list-table tr[data-to]:hover .operate ul li a{color:black} .list-table tr[data-to]:hover .operate ul li a{color:black}
.list-table tr ion-icon {vertical-align: middle;} .list-table tr ion-icon {vertical-align: middle; height: 2rem;}
.list-table td,.list-table th{padding:0 10px;text-align:left} .list-table td,.list-table th{padding:0 10px;text-align:left}
.list-table td.file a {vertical-align: middle;}
.list-table .size,.list-table .updated_at{text-align:right} .list-table .size,.list-table .updated_at{text-align:right}
.updated_at{width:25%} .updated_at{width:25%}
.size{width:15%} .size{width:15%}
.list-table tbody.grid-view { .list-table tbody.grid-view {display: flex;flex-wrap: wrap;position: relative;width: 100%;grid-template: repeat(auto-fill, 100px) / repeat(auto-fill, minmax(100px, 50%));grid-auto-rows: 100px;}
display: flex; .list-table tbody.grid-view td, .list-table tbody.grid-view th {padding:0;}
flex-wrap: wrap; .list-table tbody.grid-view img {height: 150px;width: 100%;object-fit: cover;position:relative;}
position: relative; .list-table tbody.grid-view #tr0{width: 100%;height: 33px;background-color: unset !important;}
width: 100%; .list-table tbody.grid-view tr {width: unset;height: 150px;background-color: #efefef;margin: 2px;position: relative;flex-grow: 1;min-width: 100px;}
grid-template: repeat(auto-fill, 100px) / repeat(auto-fill, minmax(100px, 50%)); .list-table tbody.grid-view td.file {display: block;width: 100%;height: 100%;}
grid-auto-rows: 100px; .list-table tbody.grid-view td.file a {width: 100%;height: 100%;display: inline-block;position:relative}
} .list-table tbody.grid-view td.file a > span {position: absolute;left: 3px;}
.list-table tbody.grid-view td, .list-table tbody.grid-view th { .list-table tbody.grid-view td.file .download {display: none;}
padding:0; .list-table tbody.grid-view td.file ion-icon{position: absolute;top: calc(50% - 25px);left: calc(50% - 25px);width: 50px;height: 50px;color: #0002}
} .list-table tbody.grid-view td.updated_at {position: absolute;bottom: 0px;height: 1.5em;overflow-y: hidden;width: 100%;background-image: linear-gradient(#ffffff00, #0000008f);color: #fffc;z-index: 3;}
.list-table tbody.grid-view td.size {display: none;}
.list-table tbody.grid-view img {
height: 150px;
width: 100%;
object-fit: cover;
position:relative;
}
.list-table tbody.grid-view #tr0{
width: 100%;
height: 33px;
background-color: unset !important;
}
.list-table tbody.grid-view tr {
width: unset;
height: 150px;
background-color: #efefef;
margin: 2px;
position: relative;
flex-grow: 1;
min-width: 100px;
}
.list-table tbody.grid-view td.file {
display: block;
width: 100%;
height: 100%;
}
.list-table tbody.grid-view td.file a {
width: 100%;
height: 100%;
display: inline-block;
position:relative
}
.list-table tbody.grid-view td.file a > span {
position: absolute;
left: 3px;
}
.list-table tbody.grid-view td.file .download {
display: none;
}
.list-table tbody.grid-view td.file ion-icon{
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 25px);
width: 50px;
height: 50px;
color: #0002
}
.list-table tbody.grid-view td.updated_at {
position: absolute;
bottom: 0px;
height: 1.5em;
overflow-y: hidden;
width: 100%;
background-image: linear-gradient(#ffffff00, #0000008f);
color: #fffc;
z-index: 3;
}
.list-table tbody.grid-view td.size {
display: none;
}
.mask{position:absolute;left:0px;top:0px;width:100%;background-color:#000;filter:alpha(opacity=50);opacity:0.5;z-index:2;} .mask{position:absolute;left:0px;top:0px;width:100%;background-color:#000;filter:alpha(opacity=50);opacity:0.5;z-index:2;}
<!--AdminStart--> <!--AdminStart-->
#top-op {position: absolute;color: white;font-size: 12px;} #top-op {position: absolute;color: white;font-size: 12px;}