Template:专题导航/styles.css：修订间差异
模板页面
更多操作
删除的内容 添加的内容
小 防止hover跟丢 |
小无编辑摘要 |
||
| （未显示同一用户的5个中间版本） | |||
| 第1行： | 第1行： | ||
/* |
|||
* Skeleton V2.0.4 |
|||
* Copyright 2014, Dave Gamache |
|||
* www.getskeleton.com |
|||
* Free to use under the MIT license. |
|||
* http://www.opensource.org/licenses/mit-license.php |
|||
* 12/29/2014 |
|||
*/ |
|||
.container { |
|||
position: relative; |
|||
width: 100%; |
|||
max-width: 960px; |
|||
margin: 0 auto; |
|||
padding: 0 20px; |
|||
box-sizing: border-box; |
|||
} |
|||
.div, |
|||
.divs, |
|||
.column, |
|||
.columns { |
|||
width: 100%; |
|||
float: left; |
|||
box-sizing: border-box; |
|||
} |
|||
/* For devices larger than 400px */ |
|||
@media (min-width: 400px) { |
|||
.container { |
|||
width: 85%; |
|||
padding: 0; |
|||
} |
|||
} |
|||
/* For devices larger than 550px */ |
|||
@media (min-width: 550px) { |
|||
.container { |
|||
width: 80%; |
|||
} |
|||
.div, |
|||
.divs, |
|||
.column, |
|||
.columns { |
|||
margin-left: .3%; |
|||
} |
|||
.div:first-child, |
|||
.divs:first-child, |
|||
.column:first-child, |
|||
.columns:first-child { |
|||
margin-left: 0; |
|||
} |
|||
.one.div, |
|||
.one.divs { width: 100%; margin-left: 0; } |
|||
.two.divs { width: 49.85%; } |
|||
.three.divs { width: 33.1333333333%; } |
|||
.four.divs { width: 24.775%; } |
|||
.five.divs { width: 19.76%; } |
|||
.six.divs { width: 16.4166666667%; } |
|||
.seven.divs { width: 14.0285714286%; } |
|||
.eight.divs { width: 12.2375%; } |
|||
.nine.divs { width: 10.8444444444%; } |
|||
.ten.divs { width: 9.73%; } |
|||
.eleven.divs { width: 8.81818181818%; } |
|||
.twelve.divs { width: 8.05833333333%; } |
|||
.one.column, |
|||
.one.columns { width: 8.05833333333%; } |
|||
.two.columns { width: 16.4166666667%; } |
|||
.three.columns { width: 24.775%; } |
|||
.four.columns { width: 33.1333333333%; } |
|||
.five.columns { width: 41.4916666667%; } |
|||
.six.columns { width: 49.85%; } |
|||
.seven.columns { width: 58.2083333333%; } |
|||
.eight.columns { width: 66.5666666667%; } |
|||
.nine.columns { width: 74.925%; } |
|||
.ten.columns { width: 83.2833333333%; } |
|||
.eleven.columns { width: 91.6416666667%; } |
|||
.twelve.columns { width: 100%; margin-left: 0; } |
|||
.one-third.column { width: 33.1333333333%; } |
|||
.two-thirds.column { width: 66.5666666667%; } |
|||
.one-half.column { width: 49.85%; } |
|||
} |
|||
/* |
/* |
||
* 专题导航 V1 |
* 专题导航 V1 |
||
| 第101行： | 第14行： | ||
position: relative; |
position: relative; |
||
border-radius: 10px; |
border-radius: 10px; |
||
box-shadow: 0 0 |
box-shadow: 0 0 3px rgba(0,0,0,.2), 0 3px 5px rgba(0,0,0,.1); |
||
} |
|||
.ztdh .ztdhhead { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
} |
||
| 第112行： | 第30行： | ||
clear: none; |
clear: none; |
||
margin: 0; |
margin: 0; |
||
font-family: 'Microsoft YaHei','STHeiti Light'; |
|||
font-weight: bold; |
font-weight: bold; |
||
font-size: 1.55em; |
font-size: 1.55em; |
||
| 第139行： | 第56行： | ||
border-radius: 8px; |
border-radius: 8px; |
||
box-shadow: 0 0 5px rgba(57, 197, 187, .5); |
box-shadow: 0 0 5px rgba(57, 197, 187, .5); |
||
white-space: nowrap; |
|||
} |
} |
||
.ztdh .ztdhmenu{ |
.ztdh .ztdhmenu{ |
||
display: flex; |
|||
margin-top: 5px; |
|||
width: 100%; |
|||
gap: 8px; |
|||
} |
|||
.ztdh .menu-item{ |
|||
flex: 1; |
|||
} |
} |
||
| 第150行： | 第74行： | ||
margin: 0; |
margin: 0; |
||
width: 100%; |
width: 100%; |
||
top: |
top: 5px; |
||
border-radius: 8px; |
border-radius: 8px; |
||
box-shadow: 0 0 8px rgba(0,0,0,.25); |
box-shadow: 0 0 8px rgba(0,0,0,.25); |
||
padding: 5px 8px; |
padding: 5px 8px; |
||
box-sizing: border-box; |
box-sizing: border-box; |
||
backdrop-filter: blur(15px); |
|||
-webkit-backdrop-filter: blur(15px); |
|||
} |
} |
||
| 第176行： | 第102行： | ||
} |
} |
||
.ztdh .menu-item:hover { |
|||
body.main-sm .ztdh .menu-item:hover { |
|||
padding-bottom: 3px; |
|||
padding-bottom: 5px; |
|||
margin-bottom: -5px; |
|||
} |
} |
||
| 第204行： | 第131行： | ||
padding: 0 6px; |
padding: 0 6px; |
||
cursor: pointer; |
cursor: pointer; |
||
margin-top: -.8rem; |
|||
} |
} |
||
.ztdh hr{ |
.ztdh hr{ |
||
margin: |
margin: 6px 0; |
||
} |
} |
||
body:not(.main-sm) .ztdhhead { |
|||
@media (max-width: 550px) { |
|||
display: block; |
|||
.ztdh .hint { |
|||
font-size: 10px; |
|||
} |
|||
.ztdh .menu-item{ |
|||
margin-bottom: 5px; |
|||
} |
|||
.menu-content { |
|||
position: relative; |
|||
margin-bottom: 5px; |
|||
} |
|||
.menu-popout { |
|||
position: relative; |
|||
} |
|||
.ztdh .menu-item > span.menu-title { |
|||
background: linear-gradient(to right, #39c5a5, #39c5bb, #34b5c0); |
|||
} |
|||
.ztdh hr{ |
|||
margin: .2em 0; |
|||
} |
|||
.ztdh-hsctrl { |
|||
display: none; |
|||
} |
|||
} |
} |
||
body:not(.main-sm) .ztdh .hint { |
|||
font-size: 10px; |
|||
} |
|||
body:not(.main-sm) .menu-content { |
|||
position: relative; |
|||
margin-bottom: 5px; |
|||
} |
|||
body:not(.main-sm) .menu-popout { |
|||
position: relative; |
|||
} |
|||
body:not(.main-sm) .ztdh .menu-item > span.menu-title { |
|||
background: linear-gradient(to right, #39c5a5, #39c5bb, #34b5c0); |
|||
} |
|||
body:not(.main-sm) .ztdh hr{ |
|||
margin: .2em 0; |
|||
} |
|||
body:not(.main-sm) .ztdhtitle { |
|||
display: block; |
|||
} |
|||
body:not(.main-sm) .hint p { |
|||
margin-block: initial; |
|||
} |
|||
body:not(.main-sm) .ztdh-hsctrl { |
|||
display: none; |
|||
} |
|||
body:not(.main-sm) .ztdhmenu { |
|||
padding-top: 5px; |
|||
flex-direction: column; |
|||
} |
|||
.menu-popout > ul { |
.menu-popout > ul { |
||