Difference between revisions of "Team:SSTi-SZGD/css/Notebook"

Line 1: Line 1:
−
body{ min-width: 1347px; min-height: 465px; position: relative;}
+
body{ min-width: 1024px; min-height: 465px; position: relative;}
 
 
 
.SSTi-SZGD{ background: url(https://static.igem.org/mediawiki/2017/3/3d/SSTi-SZGD_banner.jpeg) no-repeat 0px 0px; height: 465px; background-size: cover; padding-top: 15px;}
 
.SSTi-SZGD{ background: url(https://static.igem.org/mediawiki/2017/3/3d/SSTi-SZGD_banner.jpeg) no-repeat 0px 0px; height: 465px; background-size: cover; padding-top: 15px;}
Line 8: Line 8:
 
.topic{ position: absolute; margin: 10% auto; left: 0; right: 0; text-align: center; font-size: 5rem; color: white;}
 
.topic{ position: absolute; margin: 10% auto; left: 0; right: 0; text-align: center; font-size: 5rem; color: white;}
 
.topic p{ width: 58.28%; padding: 30px; border-top: 5px solid white; border-bottom: 5px solid white; margin: auto;}
 
.topic p{ width: 58.28%; padding: 30px; border-top: 5px solid white; border-bottom: 5px solid white; margin: auto;}
 +
  
 
/*Content*/
 
/*Content*/
−
.Content{ width: 100%; height: auto; background: #f5f5f5; padding: 0 5%; padding-bottom: 100px;}
+
.Content{ width: 100%; height: 1000px; background: cornsilk; padding: 0 5%; padding-bottom: 100px;}
 
.Content .title{ width: 100%; height: 185px; text-align: center; font-size: 6rem; font-weight: 600; color: #394c53; padding: 50px; letter-spacing: 2px;}
 
.Content .title{ width: 100%; height: 185px; text-align: center; font-size: 6rem; font-weight: 600; color: #394c53; padding: 50px; letter-spacing: 2px;}
−
.Content .pdf{ margin: auto; width: 80%; height: 500px;}
+
 
 +
/*calendar*/
 +
.calendar{ width: 385px; margin-left: 15%; color: #333; position: relative;}
 +
.calendar .month{ position: relative; width: 100%; height: 55px; text-align: center; font-size: 3rem; padding: 12px 0; color: white;}
 +
.calendar .week{ width: 100%; height: 30px; font-size: 1.5rem; padding: 6px 0; color: white;}
 +
.calendar .week ul li{ float: left; width: 55px; text-align: center;}
 +
.calendar .day_x{ float: left;}
 +
.calendar .day_x li{ width: 40px; text-align: center; height: 40px; padding: 13px 0; margin: 9px 7.5px; border-radius: 100%; cursor: default;}
 +
.calendar .sth{ position: relative;}
 +
.calendar .focus{ width: 8px; height: 8px; position: absolute; top: 0;  right: 0px; background: #009E6D; border-radius: 100%; cursor: pointer;}
 +
.sth{ cursor: pointer !important;}
 +
 
 +
/*切换*/
 +
.calendar .icon_left img{ position: absolute; height: 25px; width: 25px; margin: auto; top: 0; bottom: 0; left: 50px; cursor: pointer;}
 +
.calendar .icon_right img{ position: absolute; height: 25px; width: 25px; margin: auto; top: 0; bottom: 0; right: 50px; cursor: pointer;}
 +
 
 +
/*默认显示*/
 +
.March .day_x:nth-of-type(2) .sth{ background: #009F6E; color: white;}
 +
.March .day_x:nth-of-type(2) .sth .focus{ display: none;}
 +
 
 +
/*hover*/
 +
.March .sth:hover{ background: #00A070 !important; color: white !important;}
 +
.March .sth:hover .focus{ display: none !important;}
 +
.April .sth:hover{ background: #87BD4D !important; color: white !important;}
 +
.April .sth:hover .focus{ display: none !important;}
 +
.May .sth:hover{ background: #C1D133 !important; color: white !important;}
 +
.May .sth:hover .focus{ display: none !important;}
 +
.June .sth:hover{ background: #FDC435 !important; color: white !important;}
 +
.June .sth:hover .focus{ display: none !important;}
 +
.July .sth:hover{ background: #EF8434 !important; color: white !important;}
 +
.July .sth:hover .focus{ display: none !important;}
 +
 
 +
/*month+focus*/
 +
.March .month,.March .focus{ background: #00A070;}
 +
.April .month,.April .focus{ background: #87BD4D;}
 +
.May .month,.May .focus{ background: #C1D133;}
 +
.June .month,.June .focus{ background: #FDC435;}
 +
.July .month,.July .focus{ background: #EF8434;}
 +
 
 +
/*Sun*/
 +
.March .day_x:nth-of-type(1) ul li{ color: #06935F;}
 +
.April .day_x:nth-of-type(1) ul li{ color: #63B337;}
 +
.May .day_x:nth-of-type(1) ul li{ color: #B6C211;}
 +
.June .day_x:nth-of-type(1) ul li{ color: #FBBD1C;}
 +
.July .day_x:nth-of-type(1) ul li{ color: #EB701D;}
 +
 
 +
/*week*/
 +
.March .week{ background: #06935F;}
 +
.April .week{ background: #63B337;}
 +
.May .week{ background: #B6C211;}
 +
.June .week{ background: #FBBD1C;}
 +
.July .week{ background: #EB701D;}
 +
 
 +
/*hide*/
 +
.March,.April,.May,.June,.July{ position: absolute; background: #FCFDFE;}
 +
.March,.April,.May,.June,.July{ height: 390px; display: none;}
 +
.March{ display: block;}
 +
 
 +
 
 +
/*Sth*/
 +
.Sth{ width: 40%; height: 390px; border: 3px dashed burlywood; border-radius: 20px; margin-right: 15%; float: right; font-size: 2rem; padding: 20px; color: #333333; line-height: 1.5;}

Revision as of 12:31, 19 September 2017

body{ min-width: 1024px; min-height: 465px; position: relative;}

.SSTi-SZGD{ background: url(SSTi-SZGD_banner.jpeg) no-repeat 0px 0px; height: 465px; background-size: cover; padding-top: 15px;}

/*自定义header*/ .header .nav .Project span,.header .nav .Project li:nth-of-type(4) a{ color: #FAEE0D;}

.topic{ position: absolute; margin: 10% auto; left: 0; right: 0; text-align: center; font-size: 5rem; color: white;} .topic p{ width: 58.28%; padding: 30px; border-top: 5px solid white; border-bottom: 5px solid white; margin: auto;}


/*Content*/ .Content{ width: 100%; height: 1000px; background: cornsilk; padding: 0 5%; padding-bottom: 100px;} .Content .title{ width: 100%; height: 185px; text-align: center; font-size: 6rem; font-weight: 600; color: #394c53; padding: 50px; letter-spacing: 2px;}

/*calendar*/ .calendar{ width: 385px; margin-left: 15%; color: #333; position: relative;} .calendar .month{ position: relative; width: 100%; height: 55px; text-align: center; font-size: 3rem; padding: 12px 0; color: white;} .calendar .week{ width: 100%; height: 30px; font-size: 1.5rem; padding: 6px 0; color: white;} .calendar .week ul li{ float: left; width: 55px; text-align: center;} .calendar .day_x{ float: left;} .calendar .day_x li{ width: 40px; text-align: center; height: 40px; padding: 13px 0; margin: 9px 7.5px; border-radius: 100%; cursor: default;} .calendar .sth{ position: relative;} .calendar .focus{ width: 8px; height: 8px; position: absolute; top: 0; right: 0px; background: #009E6D; border-radius: 100%; cursor: pointer;} .sth{ cursor: pointer !important;}

/*切换*/ .calendar .icon_left img{ position: absolute; height: 25px; width: 25px; margin: auto; top: 0; bottom: 0; left: 50px; cursor: pointer;} .calendar .icon_right img{ position: absolute; height: 25px; width: 25px; margin: auto; top: 0; bottom: 0; right: 50px; cursor: pointer;}

/*默认显示*/ .March .day_x:nth-of-type(2) .sth{ background: #009F6E; color: white;} .March .day_x:nth-of-type(2) .sth .focus{ display: none;}

/*hover*/ .March .sth:hover{ background: #00A070 !important; color: white !important;} .March .sth:hover .focus{ display: none !important;} .April .sth:hover{ background: #87BD4D !important; color: white !important;} .April .sth:hover .focus{ display: none !important;} .May .sth:hover{ background: #C1D133 !important; color: white !important;} .May .sth:hover .focus{ display: none !important;} .June .sth:hover{ background: #FDC435 !important; color: white !important;} .June .sth:hover .focus{ display: none !important;} .July .sth:hover{ background: #EF8434 !important; color: white !important;} .July .sth:hover .focus{ display: none !important;}

/*month+focus*/ .March .month,.March .focus{ background: #00A070;} .April .month,.April .focus{ background: #87BD4D;} .May .month,.May .focus{ background: #C1D133;} .June .month,.June .focus{ background: #FDC435;} .July .month,.July .focus{ background: #EF8434;}

/*Sun*/ .March .day_x:nth-of-type(1) ul li{ color: #06935F;} .April .day_x:nth-of-type(1) ul li{ color: #63B337;} .May .day_x:nth-of-type(1) ul li{ color: #B6C211;} .June .day_x:nth-of-type(1) ul li{ color: #FBBD1C;} .July .day_x:nth-of-type(1) ul li{ color: #EB701D;}

/*week*/ .March .week{ background: #06935F;} .April .week{ background: #63B337;} .May .week{ background: #B6C211;} .June .week{ background: #FBBD1C;} .July .week{ background: #EB701D;}

/*hide*/ .March,.April,.May,.June,.July{ position: absolute; background: #FCFDFE;} .March,.April,.May,.June,.July{ height: 390px; display: none;} .March{ display: block;}


/*Sth*/ .Sth{ width: 40%; height: 390px; border: 3px dashed burlywood; border-radius: 20px; margin-right: 15%; float: right; font-size: 2rem; padding: 20px; color: #333333; line-height: 1.5;}