diff --git a/readme.md b/readme.md index b0850bf..689e845 100644 --- a/readme.md +++ b/readme.md @@ -7,7 +7,7 @@ UpdateAddress [heroku.php](/platform/heroku.php "heroku.php"),[scf.php](/platfor Theme -Material Design for Classic Series(对默认主题的MD风格小优化,有对页宽度、按钮外观等的适配调整): [tfo_mdtr.php](/theme/tfo_mdtr.php "tfo_mdtr.php")(Transparent Material Design), [tfo_md.php](/theme/tfo_md.php "tfo_md.php")(Material Design), [tfo_mdtr_baw.php](/theme/tfo_mdtr_baw.php "tfo_mdtr_baw.php")(Black & White Material Design for Tomb-Sweeping Day) (All based on classic.php,latest at 2020.5.1) +Material Design for Classic Series(对默认主题的MD风格小优化,有对响应式、按钮外观等的适配调整): [tfo_mdtr.php](/theme/tfo_mdtr.php "tfo_mdtr.php")(Transparent Material Design), [tfo_md.php](/theme/tfo_md.php "tfo_md.php")(Material Design), [tfo_mdtr_baw.php](/theme/tfo_mdtr_baw.php "tfo_mdtr_baw.php")(Black & White Material Design for Tomb-Sweeping Day) (All based on classic.php,latest at 2020.5.1) 具体地,您可以下载/复制体验一下或参考示例中运用tfo_mdtr.php的[Li Share Storage Mini](https://tfo.herokuapp.com/ "Li Share Storage Mini")。需要注意:以上系列主题**默认隐藏多盘和右上角语言框**,请谨慎使用!若强迫开启多盘,可以自行定位修改#L107左右more-disk前几行位置去掉display:none !important字符。目前,主题仍存在诸多问题,请谅解。PS:主题**将要实现**的功能有背景模糊等,敬请期待... diff --git a/theme/tfo_md.php b/theme/tfo_md.php index 857f968..3d9514c 100644 --- a/theme/tfo_md.php +++ b/theme/tfo_md.php @@ -36,8 +36,8 @@ .list-table tr[data-to]:hover a{color:white} .list-table tr:first-child{background:rgba(245,245,245,0)} .list-table td.updated_at,.list-table th.updated_at{width:15%;} - .list-table td.file,.list-table th.file{width:75%;} - .list-table td.size,.list-table th.size{width:5%;} + .list-table td.file,.list-table th.file{width:70%;} + .list-table td.size,.list-table th.size{width:10%;} .list-table td,.list-table th{padding:0 8px;text-align:left;float:left;line-height:32px} .list-table td button,.list-table th button{border-radius:16px;transition-duration: 0.3s;cursor:pointer;color:#24292e;height:24px;padding: 0 8px;background:transparent;border:1px solid rgba(27,31,35,0);font-weight:bold;} .list-table td button:hover,.list-table th button:hover{color:#FFF;background:rgb(3,102,214);border:1px solid rgba(27,31,35,.15);box-shadow:0 1px 15px rgba(27,31,35,.15);} @@ -55,7 +55,7 @@ .operatediv_close{position:absolute;right:3px;top:3px;} .readme{padding:8px;background-color:rgb(245,245,245);} .markdown-body{padding:20px;text-align:left;font-size:14px !important} - @media only screen and (max-width:480px){ + @media only screen and (max-width:605px){ .title{margin-bottom:24px} .list-wrapper{width:96%; margin:0 auto 10px;} .list-table {padding:8px} @@ -63,6 +63,30 @@ .list-table td, .list-table th{white-space:nowrap;overflow:auto} .size, .updated_at{display:none} } + @media only screen and (max-width:1152px){ + .list-table td.file,.list-table th.file{width:calc(95% - 220px)} + .size{width:140px} + .updated_at{width:70px} + .list-table td, .list-table th{white-space:nowrap;overflow:auto} + } + @media only screen and (max-width:925px){ + .list-table td.file,.list-table th.file{width:calc(94% - 220px)} + .size{width:140px} + .updated_at{width:70px} + .list-table td, .list-table th{white-space:nowrap;overflow:auto} + } + @media only screen and (max-width:781px){ + .list-table td.file,.list-table th.file{width:calc(93% - 220px)} + .size{width:140px} + .updated_at{width:70px} + .list-table td, .list-table th{white-space:nowrap;overflow:auto} + } + @media only screen and (max-width:679px){ + .list-table td.file,.list-table th.file{width:calc(92% - 220px)} + .size{width:140px} + .updated_at{width:70px} + .list-table td, .list-table th{white-space:nowrap;overflow:auto} + } diff --git a/theme/tfo_mdtr.php b/theme/tfo_mdtr.php index 49b98df..fb49ad6 100644 --- a/theme/tfo_mdtr.php +++ b/theme/tfo_mdtr.php @@ -36,8 +36,8 @@ .list-table tr[data-to]:hover a{color:white} .list-table tr:first-child{background:rgba(245,245,245,0)} .list-table td.updated_at,.list-table th.updated_at{width:15%;} - .list-table td.file,.list-table th.file{width:75%;} - .list-table td.size,.list-table th.size{width:5%;} + .list-table td.file,.list-table th.file{width:70%;} + .list-table td.size,.list-table th.size{width:10%;} .list-table td,.list-table th{padding:0 8px;text-align:left;float:left;line-height:32px} .list-table td button,.list-table th button{border-radius:16px;transition-duration: 0.3s;cursor:pointer;color:#24292e;height:24px;padding: 0 8px;background:transparent;border:1px solid rgba(27,31,35,0);font-weight:bold;} .list-table td button:hover,.list-table th button:hover{color:#FFF;background:rgb(3,102,214);border:1px solid rgba(27,31,35,.15);box-shadow:0 1px 15px rgba(27,31,35,.15);} .list-table .size,.list-table .updated_at{text-align:right} @@ -54,7 +54,7 @@ .operatediv_close{position:absolute;right:3px;top:3px;} .readme{padding:8px;background-color:rgba(245,245,245,0.3);} .markdown-body{padding:20px;text-align:left;font-size:14px !important} - @media only screen and (max-width:480px){ + @media only screen and (max-width:605px){ .title{margin-bottom:24px} .list-wrapper{width:96%; margin:0 auto 10px;} .list-table {padding:8px} @@ -62,6 +62,30 @@ .list-table td, .list-table th{white-space:nowrap;overflow:auto} .size, .updated_at{display:none} } + @media only screen and (max-width:1152px){ + .list-table td.file,.list-table th.file{width:calc(95% - 220px)} + .size{width:140px} + .updated_at{width:70px} + .list-table td, .list-table th{white-space:nowrap;overflow:auto} + } + @media only screen and (max-width:925px){ + .list-table td.file,.list-table th.file{width:calc(94% - 220px)} + .size{width:140px} + .updated_at{width:70px} + .list-table td, .list-table th{white-space:nowrap;overflow:auto} + } + @media only screen and (max-width:781px){ + .list-table td.file,.list-table th.file{width:calc(93% - 220px)} + .size{width:140px} + .updated_at{width:70px} + .list-table td, .list-table th{white-space:nowrap;overflow:auto} + } + @media only screen and (max-width:679px){ + .list-table td.file,.list-table th.file{width:calc(92% - 220px)} + .size{width:140px} + .updated_at{width:70px} + .list-table td, .list-table th{white-space:nowrap;overflow:auto} + } diff --git a/theme/tfo_mdtr_baw.php b/theme/tfo_mdtr_baw.php index b6ada8f..d0cb848 100644 --- a/theme/tfo_mdtr_baw.php +++ b/theme/tfo_mdtr_baw.php @@ -37,8 +37,8 @@ .list-table tr[data-to]:hover a{color:white} .list-table tr:first-child{background:rgba(245,245,245,0)} .list-table td.updated_at,.list-table th.updated_at{width:15%;} - .list-table td.file,.list-table th.file{width:75%;} - .list-table td.size,.list-table th.size{width:5%;} + .list-table td.file,.list-table th.file{width:70%;} + .list-table td.size,.list-table th.size{width:10%;} .list-table td,.list-table th{padding:0 8px;text-align:left;float:left;line-height:32px} .list-table td button,.list-table th button{border-radius:16px;transition-duration: 0.3s;cursor:pointer;color:#24292e;height:24px;padding: 0 8px;background:transparent;border:1px solid rgba(27,31,35,0);font-weight:bold;} .list-table td button:hover,.list-table th button:hover{color:#FFF;background:rgb(3,102,214);border:1px solid rgba(27,31,35,.15);box-shadow:0 1px 15px rgba(27,31,35,.15);} .mask{position:absolute;left:0px;top:0px;width:100%;background-color:#000;filter:alpha(opacity=20);opacity:0.2;z-index:2;} @@ -54,7 +54,7 @@ .operatediv_close{position:absolute;right:3px;top:3px;} .readme{padding:8px;background-color:rgba(245,245,245,0.3);} .markdown-body{padding:20px;text-align:left;font-size:14px !important} - @media only screen and (max-width:600px){ + @media only screen and (max-width:605px){ .title{margin-bottom:24px} .list-wrapper{width:96%; margin:0 auto 10px;} .list-table {padding:8px} @@ -63,7 +63,28 @@ .size, .updated_at{display:none} } @media only screen and (max-width:1152px){ - + .list-table td.file,.list-table th.file{width:calc(95% - 220px)} + .size{width:140px} + .updated_at{width:70px} + .list-table td, .list-table th{white-space:nowrap;overflow:auto} + } + @media only screen and (max-width:925px){ + .list-table td.file,.list-table th.file{width:calc(94% - 220px)} + .size{width:140px} + .updated_at{width:70px} + .list-table td, .list-table th{white-space:nowrap;overflow:auto} + } + @media only screen and (max-width:781px){ + .list-table td.file,.list-table th.file{width:calc(93% - 220px)} + .size{width:140px} + .updated_at{width:70px} + .list-table td, .list-table th{white-space:nowrap;overflow:auto} + } + @media only screen and (max-width:679px){ + .list-table td.file,.list-table th.file{width:calc(92% - 220px)} + .size{width:140px} + .updated_at{width:70px} + .list-table td, .list-table th{white-space:nowrap;overflow:auto} }