Difference between revisions of "Team:XMU-China/css/experiments"

 
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
.Experiments {
+
.Experiments section {
 
     padding-top: 5rem;
 
     padding-top: 5rem;
 
     margin-top: 3vw;
 
     margin-top: 3vw;
 
}
 
}
−
table {
+
.hp section {
−
     margin-left: 40px;
+
     padding-top: 0;
−
     border-collapse: collapse;
+
}
 +
.no_top{
 +
     padding-top: 0!important;
 
}
 
}
 
#accordion .panel {
 
#accordion .panel {
Line 80: Line 82:
 
#accordion .panel-body img{
 
#accordion .panel-body img{
 
     width: 100%;
 
     width: 100%;
−
     margin: 0 auto;
+
     margin: 1vw auto;
 
}
 
}
 
.downloadpdf:after {
 
.downloadpdf:after {
−
     content: "\f019";
+
     content: "\f1c1";
 
     font-family: fontawesome;
 
     font-family: fontawesome;
  
Line 131: Line 133:
 
@media screen and (min-width: 769px) {
 
@media screen and (min-width: 769px) {
 
     .container {
 
     .container {
−
         width: 60vw;
+
         width: 73vw;
 
     }
 
     }
 
}
 
}
Line 161: Line 163:
 
     margin-bottom: 10px;
 
     margin-bottom: 10px;
 
}
 
}
−
.row {
+
 
−
    margin-bottom: 5vw;
+
−
}
+
 
.expstep_name {
 
.expstep_name {
 
     font-size: 1.5rem;
 
     font-size: 1.5rem;
Line 188: Line 188:
 
@media screen and (min-width: 45.0625rem) and (max-width: 769px) {}
 
@media screen and (min-width: 45.0625rem) and (max-width: 769px) {}
 
@media screen and (min-width: 769px) {}
 
@media screen and (min-width: 769px) {}
 +
.Quick-navigation {
 +
    position: fixed;
 +
    z-index: 1;
 +
    margin: 0;
 +
    top: 20%;
 +
    left: 83vw;
 +
    -webkit-transform: translateY(-50%);
 +
    transform: translateY(-50%);
 +
}
 +
.Quick-navigation_word {
 +
    float: left;
 +
}
 +
#Quick_A {
 +
    top: 10vw;
 +
    position: relative;
 +
}
 +
#Quick_B {
 +
    top: 12.25vw;
 +
    position: relative;
 +
}
 +
#Quick_C {
 +
    top: 14.5vw;
 +
    position: relative;
 +
}
 +
#Quick_D {
 +
    top: 16.75vw;
 +
    position: relative;
 +
}
 +
#Quick_F {
 +
    top: 19vw;
 +
    position: relative;
 +
}
 +
#Quick_A,
 +
#Quick_B,
 +
#Quick_C,
 +
#Quick_D,
 +
#Quick_F {
 +
    text-align: left;
 +
    padding-left: 1vw;
 +
    color: #1d2087 !important;
 +
    text-decoration: none;
 +
    font-size: 1vw;
 +
    line-height: 1vw;
 +
    -webkit-transition: color 0.3s;
 +
    transition: color 0.3s;
 +
    display: block;
 +
    position: absolute;
 +
    z-index: 1;
 +
    white-space: nowrap;
 +
}
 +
#Quick_A:hover,
 +
#Quick_B:hover,
 +
#Quick_C:hover,
 +
#Quick_D:hover,
 +
#Quick_F:hover {
 +
    font-weight: bolder;
 +
}
 +
.current+a {
 +
    font-weight: bolder;
 +
}
 +
.Quick-navigation-item>img {
 +
    display: none;
 +
}
 +
.Quick-navigation-item.current>img {
 +
    display: block;
 +
    position: absolute;
 +
}
 +
 +
.Quick-navigation-item img {
 +
    top: 10vw;
 +
    height: 10vw;
 +
    margin: 0;
 +
    float: left;
 +
    position: relative;
 +
}
 +
.Quick-navigation_word>img {
 +
    top: 10vw;
 +
    height: 10vw;
 +
    margin: 0;
 +
    float: left;
 +
    position: relative;
 +
}
 +
@media screen and (max-width: 769px) {
 +
    .Quick-navigation {
 +
        display: none;
 +
    }
 +
 +
}
 +
@media screen and (min-width: 769px) and (max-width: 89.9375rem) {
 +
    .Quick-navigation {
 +
    left: 85vw;
 +
}
 +
#Quick_A,
 +
#Quick_B,
 +
#Quick_C,
 +
#Quick_D,
 +
#Quick_F {
 +
    font-size: 0.8vw;
 +
}
 +
}
 +
@media screen and (min-width: 90rem) {}
 +
#Overview  #accordion .panel-body p,
 +
.com{
 +
    padding-left: 0px!important;
 +
    border-left: 0px!important;
 +
    text-align: left;
 +
 +
}
 +
.hp p{
 +
    text-indent: 28px;
 +
}
 +
.hp .F1,
 +
.hp .F2,
 +
.hp .F25,
 +
.hp .F3,
 +
.hp .F4,
 +
.hp .F5,
 +
.hp .F6{
 +
    text-align: center!important;
 +
}
 +
.hp .expstep_name{
 +
    margin-top: 65px;
 +
}
 +
.share:after {
 +
    content: "\f064";
 +
    font-family: fontawesome;
 +
    color: #1d2087;
 +
}
 +
.hp h1{
 +
    border-left: 1px dashed #8c8c8c!important;
 +
    padding: 2vw 0 1vw!important;
 +
    font-size: 25px!important;
 +
    text-indent: 2rem;
 +
    text-align: left!important;
 +
}
 +
.hp h1:nth-child(1){
 +
    padding: 0.5vw 0 1vw!important;
 +
}
 +
.marginbottom{
 +
    margin-bottom: 8vw;
 +
}

Latest revision as of 03:17, 18 October 2018

.Experiments section { 

   padding-top: 5rem;
   margin-top: 3vw;

} .hp section { 

   padding-top: 0;

} .no_top{ 

   padding-top: 0!important;

}

  1. accordion .panel {
   border: none;
   box-shadow: none;
   border-radius: 0;
   margin: 0 0 15px 10px;

}

  1. accordion .panel-heading {
   padding: 0;
   border-radius: 30px;

}

  1. accordion .panel-title a {
   display: block;
   padding: 12px 20px 12px 50px;
   background: #1d2087;
   font-size: 18px;
   font-weight: 600;
   color: #fff;
   border: 1px solid transparent;
   border-radius: 30px;
   position: relative;
   transition: all 0.3s ease 0s;
   text-align: left;

}

  1. accordion .panel-title a.collapsed {
   background: #fff;
   color: #1d2087;
   border: 1px solid #ddd;

} /*打开*/

  1. accordion .panel-title a:after,
  2. accordion .panel-title a.collapsed:after {
   content: "\f107";
   font-family: fontawesome;
   width: 55px;
   height: 55px;
   line-height: 55px;
   border-radius: 50%;
   background: #1d2087;
   font-size: 25px;
   color: #fff;
   text-align: center;
   border: 1px solid transparent;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.58);
   position: absolute;
   top: -5px;
   left: -20px;
   transition: all 0.3s ease 0s;

} /**/ /*关闭*/

  1. accordion .panel-title a.collapsed:after {
   content: "\f105";
   background: #fff;
   color: #1d2087;
   border: 1px solid #ddd;
   box-shadow: none;

}

  1. accordion .panel-body {
   padding: 20px 25px 10px 9px;
   background: transparent;
   font-size: 14px;
   color: #8c8c8c;
   line-height: 25px;
   border-top: none;
   position: relative;

}

  1. accordion .panel-body p {
   padding-left: 25px;
   border-left: 1px dashed #8c8c8c;
   text-align: left;

}

  1. accordion .panel-body img{
   width: 100%;
   margin: 1vw auto;

} .downloadpdf:after { 

   content: "\f1c1";
   font-family: fontawesome;

} @media (min-width: 768px) { 

   .col-md-offset-3 {
       margin-left: 5% !important;
   }
   .col-md-6 {
       width: 90% !important;
   }

} .container { 

   margin-right: auto;
   margin-left: auto

} @media screen and (max-width: 45rem) { 

   .container {
       width: 90vw;
   }
   #accordion .panel-title a {
       padding: 8px 20px 8px 50px;
       font-size: 14px;
   }
   #accordion .panel-title a:after,
   #accordion .panel-title a.collapsed:after {
       width: 45px;
       height: 45px;
       line-height: 45px;
   }
   #accordion .panel-body {
       padding: 5px 0px 5px 9px;
   }
   #accordion .panel-body p {
       font-size: 12px;
       line-height: 16px;
   }
   table {
       margin: 8px 0;
   }

} @media screen and (min-width: 45.0625rem) and (max-width: 769px) { 

   .container {
       width: 85vw;
   }

} @media screen and (min-width: 769px) { 

   .container {
       width: 73vw;
   }

} .collapse { 

   display: none

} .collapse.in { 

   display: block

} .collapsing { 

   position: relative;
   height: 0;
   overflow: hidden;
   -webkit-transition-timing-function: ease;
   -o-transition-timing-function: ease;
   transition-timing-function: ease;
   -webkit-transition-duration: .35s;
   -o-transition-duration: .35s;
   transition-duration: .35s;
   -webkit-transition-property: height, visibility;
   -o-transition-property: height, visibility;
   transition-property: height, visibility

} .exp_name { 

   font-size: 2rem;
   color: #1d2087;
   line-height: 3rem;
   text-align: center;
   margin-bottom: 10px;

}

.expstep_name { 

   font-size: 1.5rem;
   color: #1d2087;
   line-height: 3rem;
   text-align: left;
   margin: 25px 0 5px;

} @media screen and (max-width: 45rem) { 

   .exp_name {
       font-size: 1.5rem;
       line-height: 2rem;
       margin-bottom: 5px;
   }
   .expstep_name {
       font-size: 1.1rem;
       line-height: 1.5rem;
       margin: 35px 0 5px;
   }
   .row {
       margin-bottom: 15vw;
   }

} @media screen and (min-width: 45.0625rem) and (max-width: 769px) {} @media screen and (min-width: 769px) {} .Quick-navigation { 

   position: fixed;
   z-index: 1;
   margin: 0;
   top: 20%;
   left: 83vw;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);

} .Quick-navigation_word { 

   float: left;

}

  1. Quick_A {
   top: 10vw;
   position: relative;

}

  1. Quick_B {
   top: 12.25vw;
   position: relative;

}

  1. Quick_C {
   top: 14.5vw;
   position: relative;

}

  1. Quick_D {
   top: 16.75vw;
   position: relative;

}

  1. Quick_F {
   top: 19vw;
   position: relative;

}

  1. Quick_A,
  2. Quick_B,
  3. Quick_C,
  4. Quick_D,
  5. Quick_F {
   text-align: left;
   padding-left: 1vw;
   color: #1d2087 !important;
   text-decoration: none;
   font-size: 1vw;
   line-height: 1vw;
   -webkit-transition: color 0.3s;
   transition: color 0.3s;
   display: block;
   position: absolute;
   z-index: 1;
   white-space: nowrap;

}

  1. Quick_A:hover,
  2. Quick_B:hover,
  3. Quick_C:hover,
  4. Quick_D:hover,
  5. Quick_F:hover {
   font-weight: bolder;

} .current+a { 

   font-weight: bolder;

} .Quick-navigation-item>img { 

   display: none;

} .Quick-navigation-item.current>img { 

   display: block;
   position: absolute;

}

.Quick-navigation-item img { 

   top: 10vw;
   height: 10vw;
   margin: 0;
   float: left;
   position: relative;

} .Quick-navigation_word>img { 

   top: 10vw;
   height: 10vw;
   margin: 0;
   float: left;
   position: relative;

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

   .Quick-navigation {
       display: none;
   }

} @media screen and (min-width: 769px) and (max-width: 89.9375rem) { 

   .Quick-navigation {
   left: 85vw;

}

  1. Quick_A,
  2. Quick_B,
  3. Quick_C,
  4. Quick_D,
  5. Quick_F {
   font-size: 0.8vw;

} } @media screen and (min-width: 90rem) {}

  1. Overview #accordion .panel-body p,

.com{ 

   padding-left: 0px!important;
   border-left: 0px!important;
   text-align: left;

} .hp p{ 

   text-indent: 28px;

} .hp .F1, .hp .F2, .hp .F25, .hp .F3, .hp .F4, .hp .F5, .hp .F6{ 

   text-align: center!important;

} .hp .expstep_name{ 

   margin-top: 65px;

} .share:after { 

   content: "\f064";
   font-family: fontawesome;
   color: #1d2087;

} .hp h1{ 

   border-left: 1px dashed #8c8c8c!important;
   padding: 2vw 0 1vw!important;
   font-size: 25px!important;
   text-indent: 2rem;
   text-align: left!important;

} .hp h1:nth-child(1){ 

   padding: 0.5vw 0 1vw!important;

} .marginbottom{ 

   margin-bottom: 8vw;

}