Template:CPU CHINA/common CSS

1. contain .left {

   position: -webkit-sticky;
   position: sticky;
   float: left;
   width: 25%;
   top: 20%;

}

1. contain .left .Frosting {

   position: absolute;
   top: 0;
   left: 15%;
   -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3),
       0 0 40px rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3),
       0 0 40px rgba(0, 0, 0, 0.1) inset;
   box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
   -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
   z-index: 2;

}

1. contain .left .catalogue-title {

   position: absolute;
   top: 25px;
   left: 20%;
   width: 60%;
   text-align: center;
   color: #202020;
   font-size: large;
   font-weight: 800;
   z-index: 3;

}

1. contain .left .catalogue {

   position: absolute;
   padding-left: 14px;
   overflow: hidden;
   top: 60px;
   width: 65%;
   z-index: 3;

}

1. contain .left .catalogue li {

   color: #404040;
   margin: 5% 10%;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   width: 95%;
   list-style: square inside url("https://static.igem.org/mediawiki/2021/9/9b/T--CPU_CHINA--circle.svg");

}

1. contain .left .catalogue li:hover {

   list-style: square inside url("https://static.igem.org/mediawiki/2021/5/5b/T--CPU_CHINA--circle2.svg");

}

1. contain .left .catalogue .current {

   color: #0071ff;
   list-style: square inside url("https://static.igem.org/mediawiki/2021/5/5b/T--CPU_CHINA--circle2.svg");

}

1. contain .left .catalogue li:hover a {

   color: #0071ff;
   text-decoration: none;

}

1. contain .left .catalogue li:hover .circle {

   fill: #0071ff;

}

1. contain #detail {

   float: right;
   position: relative;
   width: 60%;
   margin-right: 8%;
   padding:5%;
   border-radius: 8px;
   box-sizing: border-box;
   font-size: 1.1em;
   font-family: "CABIN-REGULAR";
   -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
   -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
   box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
   -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;

}

1. contain #detail h2 {

   padding: 10% 0;
   font-family: "MONTSERRAT-BLACKITALIC2";
   font-size: 3em;
   color: #212121;
   text-align: center;
   line-height: normal;

}

1. contain #detail h3 {

   margin: 5% 0;
   font-size: 2em;
   font-family: "MONTSERRAT-BLACKITALIC2";
   color: #424242;
   text-align: center;
   line-height: normal;

}

1. contain #detail h4{

   font-size: 1.5em;

}

1. contain #detail p {

   margin: 2% 0;
   color: #212121;
   line-height: 1.5em;
   font-size: 1.1em;
   font-family: "CABIN-REGULAR";

}

/* 图注 */

1. contain #detail .imgdescribe{

   font-size: 0.9em;
   font-weight: bold;

}

1. contain #detail .center{

   text-align: center;

}

/* 引用 */

1. contain #detail .reference{

   font-size: 0.9em;
   color: #636363;

}

1. contain #detail ol {

list-style: decimal; }

1. contain #detail ul {

   list-style: disc;

}

1. contain #detail a{

   color: #0071fe;

}

1. contain #detail img {

   width: 100%;
   margin: 5% 0 2%;

}

1. contain #detail em{

   font-style: italic;

}

/* 下载按钮 */

1. contain #detail #downLoad {

   margin: 2vw 0;
   width: 100%;
   height: 3vw;
   line-height: 3vw;
   border-radius: 30px;
   background-image: linear-gradient(to right, #D9D9D9 , #FFFFFF);

}

1. contain #detail #downLoad span{

   margin-left: 1vw;

}

1. contain #detail #downLoad a{

   float: right;
   width: 20%;
   height: 3vw;
   line-height: 3vw;
   border: none;
   text-align: center;
   background-color: #0071ff;
   color: #FAFAFA;
   font-size: 1.3vw;
   font-weight: bold;
   border-radius: 30px;

}

.current {

   color: #0071ff;

}

.section {

   margin-top: 30px;

}

1. contain #detail figure{

   margin: 5% 0;
   border-radius: 12px;

}

/* 滚动条宽度 */

1. contain #detail figure::-webkit-scrollbar {

   height: 5px;

}

/* 滚动条轨道 */

1. contain #detail figure::-webkit-scrollbar-track {

   background: #FAFAFA;
   border-radius: 10px;

}

/* 小滑块 */

1. contain #detail figure::-webkit-scrollbar-thumb {

   background: #c5daee49;
   border-radius: 10px;
   width: 5px;

}

1. contain #detail figure::-webkit-scrollbar-thumb:hover {

   background: #41a0ff;

}

1. contain #detail table {

   margin: 0;
   width: 100%;
   border: none;
   border-radius: 12px;
   font-family: "CABIN-REGULAR";
   -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
   -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
   box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
   -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;

}

1. contain #detail table tr {

   text-align: center;

}

1. contain #detail table thead tr,
2. contain #detail table tbody tr {

   height: 50px;
   line-height: 50px;
   /*background-color: pink;*/

}

1. contain #detail table tr td {

   /*设置table表格每列底部边框*/
   font-size: medium;
   border-left: none;
   border-right: none;
   border-bottom: 1px solid #eaeaea;

}

/*table tr:last-child td:first-child, table tr:last-child td:nth-child(2), table tr:last-child td:nth-child(3), table tr:last-child td:last-child{/!*设置table表格最后一列底部边框*!/

   border-bottom: 2px solid #000;

}*/

1. contain #detail table tr th {

   padding: 1vw 2vw;
   border: none;
   background: #0071fe;
   font-family: "MONTSERRAT-BLACK1";
   font-size: larger;
   line-height: 1.5em;
   color: #FAFAFA;

}

1. contain #detail table tr:first-child th:first-child {

   border-top-left-radius: 12px;

}

1. contain #detail table tr:first-child th:last-child {

   border-top-right-radius: 12px;

}

1. contain #detail table tr:last-child td:first-child {

   border-bottom-left-radius: 12px;

}

1. contain #detail table tr:last-child td:last-child {

   border-bottom-right-radius: 12px;

} /* 轮播图 */

1. contain #detail .rotationChart{

   margin: 2vw;

}

1. contain #detail .rotationChart img{

   margin: 0;
   width: 100%;
   border-radius: 20px;

}

1. contain #detail .rotationChart #text{

   margin: 1vmin 0;
   position: relative;
   height: 6vmin;
   line-height: 6vmin;
   text-align: center;
   font-weight: bold;
   font-family: "BLACKITALIC";

}

1. contain #detail .rotationChart button{

   background-color: #0071fe;
   width: 6vmin;
   height: 6vmin;
   border:none;
   border-radius: 50%;
   font-size: 1.5vw;
   font-weight: bold;
   color: #FAFAFA;
   

}

1. contain #detail .rotationChart button:nth-child(1){

   position: absolute;
   left: 0;

}

1. contain #detail .rotationChart button:nth-child(2){

   position: absolute;
   right: 0;

}

1. contain #detail .rotationChart #briefText{

   width: 100%;
   padding: 3vmin;
   background-color: #EFEFEF;   
   border-radius: 20px;

}

@media screen and (max-width: 730px) {

   #contain .left {
       display: none;
   }

   #contain #detail {
       width: 100%;
       float: none;
       padding: 5%;
       box-sizing: border-box;
   }

}

@media screen and (max-width: 450px){

   #contain #detail h2{
       font-size: 1.5em;
   }
   #contain #detail h3{
       font-size: 1.2em;
   }
   #contain #detail h4{
       font-size: 1.1em;
   }
   #contain #detail p{
       font-size: 1em;
   }
   #contain #detail figure{
       overflow-x: auto;
   }

}