User:TerminalFlow/styles.css

* {
  --header-bgc: #c4d999;
  --box-bgc: #e0efbb;
}

.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: var(--header-bgc);
  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: var(--box-bgc);
    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: var(--box-bgc);
}

.mp-latest.rotable tr:first-child th {
    background-color: #bad780;
}

.mp-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 5px;
}