User:TerminalFlow/styles.css:修订间差异
TerminalFlow(讨论 | 贡献) (额,css) |
TerminalFlow(讨论 | 贡献) 小 (我服了不能var吗) |
||
第1行: | 第1行: | ||
.mp-box { | .mp-box { | ||
position : relative; | position : relative; | ||
第169行: | 第164行: | ||
.mp-box-header{ | .mp-box-header{ | ||
text-align: center; | text-align: center; | ||
background-color: | background-color: #c4d999; | ||
direction: ltr; | direction: ltr; | ||
font-weight: normal; | font-weight: normal; | ||
第199行: | 第194行: | ||
padding-top:15px; | padding-top:15px; | ||
padding-bottom: 15px; | padding-bottom: 15px; | ||
background-color: | background-color: #e0efbb; | ||
height: min-content; | height: min-content; | ||
第216行: | 第211行: | ||
padding-top:18px; | padding-top:18px; | ||
padding-bottom: 18px; | padding-bottom: 18px; | ||
background-color: | background-color: #e0efbb; | ||
} | } | ||
2024年8月25日 (日) 17:22的版本
.mp-box {
position : relative;
z-index : 1;
display : flex;
overflow : hidden;
overflow-y : hidden;
align-items : center;
justify-content : center;
box-sizing : border-box;
width : 100%;
height : 125px;
padding : 1px;
background : url('https://wiki.rotaeno.cn/images/4/40/Rotaeno_Website_Background.png') no-repeat fixed;
background-size : cover;
}
.mp-box::before {
position : absolute;
z-index : 2;
top : 0;
left : 0;
width : 100%;
height : 125px;
content : '';
background : inherit;
filter : blur(20px);
}
.mp-abox {
z-index : 3;
width : auto;
height : auto;
padding : 10px;
}
@media all and (max-width: 720px) {
.mp-abox{
display:none;
}
}
.mp-circle {
z-index : 3;
display : flex;
align-items : center;
flex-shrink : 0;
justify-content : center;
width : 165px;
height : 165px;
margin-right : 8px;
margin-left : 8px;
border : 1px solid white;
border-radius : 50%;
background : url('https://wiki.rotaeno.cn/images/4/40/Rotaeno_Website_Background.png');
background-size : cover;
}
.mp-icon {
z-index : 4;
width : 133.365px;
height : 42.84px;
background : url('https://wiki.rotaeno.cn/images/1/13/Icon_Wiki_Main.png') no-repeat;
background-size : contain;
}
.mp-header{
position: relative;
box-sizing: border-box;
margin: 0 0 1.6em;
padding: .8em 1.6em 1.6em;
color: #000;
border: 1px solid #E8E8E8;
background: #FFF;
box-shadow: 0px 1px 3px rgba(0,0,0,0.08);
font-family: sans-serif;
font-size: calc(1em * 0.875);
line-height: 1.5em;
direction: ltr;
}
.mp-header-text-b{
padding: 0.1em;
text-align: center;
color: #000;
font-family: sans-serif;
font-size: 162%;
line-height: 1.5em;
direction: ltr;
}
.mp-header-text-a{
text-align: center;
color: #000;
font-family: sans-serif;
font-size: 95%;
line-height: 1.5em;
direction: ltr;
}
.mp-icon-new{
background: url("https://wiki.rotaeno.cn/images/1/10/Icon_MainPage_News.png") no-repeat;
}
.mp-icon-next{
background: url("https://wiki.rotaeno.cn/images/9/95/Icon_MainPage_Next.png") no-repeat;
}
.mp-icon-dev{
background: url("https://wiki.rotaeno.cn/images/c/c0/Icon_MainPage_Dev.png") no-repeat;
}
.mp-icon-new,.mp-icon-next,.mp-icon-dev{
padding-left: 30px;
color: #369;
border: 0;
font-family: Arial, sans-serif;
Background-size:21px 21px;
}
.mp-info-box{
margin: 0 0 1.6em;
color: #000;
border: 1px solid #E8E8E8;
background: #FFF;
box-shadow: 0px 1px 3px rgba(0,0,0,0.08);
font-family: sans-serif;
font-size: calc(1em * 0.875);
line-height: 1.5em;
direction: ltr;
}
.mp-box-header{
text-align: center;
background-color: #c4d999;
direction: ltr;
font-weight: normal;
line-height: 1.3;
font-size: 1.5em;
/* color: white; */
font-family: Arial,sans-serif;
padding: 0.4em 0;
}
.mp-box-in-box{
padding: .8em 1.6em 1.6em;
}
.mw-body-header{
display:none !important;
}
.mp-quicklink-box{
display: flex;
justify-content:center;
flex-direction: column;
gap: 5px 0;
}
.mp-quicklink-box-a{
text-align: center;
width: calc(100% - 10px);
margin: 0 5px;
padding-top:15px;
padding-bottom: 15px;
background-color: #e0efbb;
height: min-content;
display: grid;
grid-template-columns: 3fr 2fr;
}
.mp-quicklink-box-a > big {
display: flex;
align-items: center;
justify-content: center;
}
.mp-quicklink-box-b{
text-align: center;
width: calc(20% - 10px);
margin: 0 5px;
padding-top:18px;
padding-bottom: 18px;
background-color: #e0efbb;
}
.mp-latest.rotable tr:first-child th {
background-color: #bad780;
}
.mp-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 5px;
}