From 8e53c2883dd4fdb1833440ed01e664a2be272b58 Mon Sep 17 00:00:00 2001
From: Sansui233 <sansuilnm@gmail.com>
Date: Tue, 21 Sep 2021 20:37:52 +0800
Subject: [PATCH] fix vertical align

---
 theme/flatcard.html | 87 ++++++++-------------------------------------
 1 file changed, 14 insertions(+), 73 deletions(-)

diff --git a/theme/flatcard.html b/theme/flatcard.html
index 22622d2..16e4224 100644
--- a/theme/flatcard.html
+++ b/theme/flatcard.html
@@ -54,83 +54,24 @@
         .list-table tr[data-to]:hover a{color:white}
         .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 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.file a {vertical-align: middle;}
         .list-table .size,.list-table .updated_at{text-align:right}
         .updated_at{width:25%}
         .size{width:15%}
-        .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;
-        }
-        .list-table tbody.grid-view td, .list-table tbody.grid-view th {
-            padding:0;
-        }
-        
-        .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;
-        }
+        .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;}
+        .list-table tbody.grid-view td, .list-table tbody.grid-view th {padding:0;}
+        .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;}
 <!--AdminStart-->
         #top-op {position: absolute;color: white;font-size: 12px;}