Difference between revisions of "Template:Cologne-Duesseldorf/css"

 
(27 intermediate revisions by the same user not shown)
Line 137: Line 137:
 
     margin: auto;
 
     margin: auto;
 
     padding: 8% 0;
 
     padding: 8% 0;
 +
}
 +
 +
#bodyContent .frontpage{
 +
    width: 100%;
 +
    margin: 0% 0;
 +
    padding: 5%;
 +
    padding-top: 0%;
 +
    background: white;
 +
    box-shadow: 0 -20px 20px 20px white;
 
}
 
}
  
Line 150: Line 159:
 
   display:none;
 
   display:none;
 
   position:fixed;
 
   position:fixed;
   top: 125px;
+
   top: 100px;
 
   left: 85%;
 
   left: 85%;
 
   right: 0;
 
   right: 0;
Line 159: Line 168:
 
       -ms-flex-direction:column;
 
       -ms-flex-direction:column;
 
           flex-direction:column;
 
           flex-direction:column;
   //-ms-flex-pack:distribute;
+
   -webkit-box-pack: start;
      //justify-content:space-around;
+
      -ms-flex-pack: start;
      -webkit-box-pack: start;
+
          justify-content: flex-start;
          -ms-flex-pack: start;
+
  -webkit-box-align: start;
              justify-content: flex-start;
+
      -ms-flex-align: start;
 +
          align-items: flex-start;
 
}
 
}
  
Line 178: Line 188:
 
   position:relative;
 
   position:relative;
 
   text-align: left;}
 
   text-align: left;}
#bodyContent #ToC a[title=H1] { font-size:1.125rem;}
+
#bodyContent #ToC a[title=H1] { display:none;font-size:1.125rem;}
 
#bodyContent #ToC a[title=H2] { font-size:0.875rem;}
 
#bodyContent #ToC a[title=H2] { font-size:0.875rem;}
 
#bodyContent #ToC a[title=H3] { display:none;font-size:0.750rem;}
 
#bodyContent #ToC a[title=H3] { display:none;font-size:0.750rem;}
Line 536: Line 546:
 
   display: block;
 
   display: block;
 
   max-width: 100%;
 
   max-width: 100%;
 +
  padding: 20px;
 
   margin: 20px auto;
 
   margin: 20px auto;
 +
}
 +
 +
@media (min-width: 1024px){
 +
  #bodyContent .floatleft{
 +
    float:left;
 +
    margin:0;
 +
  }
 +
 +
  #bodyContent .floatright{
 +
      float:right;
 +
      margin:0;
 +
  }
 +
  #bodyContent img.nomargin{
 +
    margin:0;
 +
  }
 +
 
}
 
}
  
Line 551: Line 578:
 
   max-width:100%;
 
   max-width:100%;
 
   margin: 5% auto;
 
   margin: 5% auto;
 +
}
 +
 +
#bodyContent .max-width {
 +
  width: 100%;
 +
}
 +
 +
#bodyContent .limited-height{
 +
    max-height: 500px;
 +
    width: auto;
 
}
 
}
  
 
#bodyContent .half-width{
 
#bodyContent .half-width{
 
   width:100%;
 
   width:100%;
  padding:10%;
 
 
   margin:5% auto;
 
   margin:5% auto;
 
}
 
}
 +
 +
#bodyContent .quarter-width{
 +
  width:100%;
 +
  margin:5% auto;
 +
}
 +
 +
 
@media (min-width: 1024px){
 
@media (min-width: 1024px){
 
   #bodyContent .half-width{
 
   #bodyContent .half-width{
 
     width:50%;
 
     width:50%;
    padding: 0;
 
 
   }
 
   }
 +
  #bodyContent .quarter-width{
 +
    width:25%;
 
}
 
}
 
#bodyContent .max-width {
 
  width: 100%;
 
  padding: 10%;
 
 
}
 
}
 +
 
#bodyContent h1,h2,h3,h4,h5,h6 {
 
#bodyContent h1,h2,h3,h4,h5,h6 {
 
   color: #149375;
 
   color: #149375;
Line 832: Line 872:
 
   ************************************************************************/
 
   ************************************************************************/
 
   #bodyContent .tab {
 
   #bodyContent .tab {
 +
    width: 100%;
 
     display:-webkit-box;
 
     display:-webkit-box;
 
     display:-ms-flexbox;
 
     display:-ms-flexbox;
Line 903: Line 944:
 
   ************************************************************************/
 
   ************************************************************************/
 
   #bodyContent button.accordion {
 
   #bodyContent button.accordion {
  display:flex;
+
      display:-webkit-box;
  flex-direction:column;
+
      display:-ms-flexbox;
  align-items:center;
+
      display:flex;
  font-family: 'Quicksand', sans-serif;
+
      -webkit-box-orient:vertical;
  margin: 3px;
+
      -webkit-box-direction:normal;
  border-radius: 10px;
+
          -ms-flex-direction:column;
  background-color: rgba(20, 147, 117, 0.125);
+
              flex-direction:column;
  cursor: pointer;
+
      -webkit-box-align:center;
  padding: 18px;
+
          -ms-flex-align:center;
  width: 100%;
+
              align-items:center;
  border: none;
+
      font-family: 'Quicksand', sans-serif;
  outline: none;
+
      margin: 10px;
  -webkit-transition: all 0.5s ease;
+
      border-radius: 10px;
  -o-transition: all 0.5s ease;
+
      background-color: rgba(20, 147, 117, 0.125);
  transition: all 0.5s ease;
+
      cursor: pointer;
}
+
      padding: 18px;
#bodyContent button.accordion h2{
+
      width: 100%;
  font-size: 1.250rem;
+
      border: none;
  text-transform:uppercase;
+
      outline: none;
  letter-spacing: 7px;
+
      -webkit-transition: all 0.5s ease;
}
+
      -o-transition: all 0.5s ease;
#bodyContent button.accordion h3{
+
      transition: all 0.5s ease;
  font-size: 1.250rem;
+
    }
  text-transform:uppercase;
+
  #bodyContent button.accordion h2{
  letter-spacing: 7px;
+
      font-size: 1.250rem;
}
+
      text-transform:uppercase;
#bodyContent button.accordion h4{
+
      letter-spacing: 7px;
  font-size: 1.250rem;
+
  }
  text-transform:uppercase;
+
  #bodyContent button.accordion h3{
  letter-spacing: 7px;
+
      font-size: 1.250rem;
}
+
      text-transform:uppercase;
#bodyContent button.accordion span{
+
      letter-spacing: 7px;
color:black;
+
  }
font-size:1rem;
+
  #bodyContent button.accordion h4{
font-weight:bold;
+
      font-size: 1.250rem;
margin-top:10px;
+
      text-transform:uppercase;
width:100%;
+
      letter-spacing: 7px;
text-align:center;
+
  }
background-color:white;
+
border-radius: 10px;
+
}
+
  
   #bodyContent button.accordion.active,
+
   #bodyContent button.accordion:after{
  #bodyContent button.accordion:hover {
+
    //content:"\25BE";
     background-color: rgba(20, 147, 117, 0.7);
+
    content:"v";
 +
    font-size:1.25rem;
 +
    font-weight:bold;
 +
    margin: 18px 0;
 +
    width:100%;
 +
    text-align:center;
 +
     background-color:white;
 +
    border-radius: 10px;
 
   }
 
   }
 +
 +
    #bodyContent button.accordion.active,
 +
    #bodyContent button.accordion:hover {
 +
      background-color: rgba(20, 147, 117, 0.7);
 +
    }
  
  
Line 1,106: Line 1,156:
 
   padding-right: 7px;
 
   padding-right: 7px;
 
}
 
}
 +
 +
#bodyContent ul.eric{
 +
    display: flex;
 +
    flex-direction: column;
 +
}
 +
 +
#bodyContent ul.eric li{
 +
    text-indent: 0;
 +
}
 +
 +
 +
#bodyContent ul.eric li::before {
 +
    content: "";
 +
    color: #149375;
 +
    float: left;
 +
    padding-right: 10px;
 +
    display: block;
 +
    height: 32px;
 +
    width: 32px;
 +
    background-image: url(https://static.igem.org/mediawiki/2017/5/50/T--Cologne-Duesseldorf--check.jpeg);
 +
    background-repeat: no-repeat;
 +
    background-position: left center;
 +
    background-size: 26px;
 +
}
 +
 
#bodyContent ol li::before {
 
#bodyContent ol li::before {
 
   content: none;
 
   content: none;
Line 1,299: Line 1,374:
 
     -o-transition: opacity 2s linear;
 
     -o-transition: opacity 2s linear;
 
     transition: opacity 2s linear;
 
     transition: opacity 2s linear;
 +
    padding:0;
 
}
 
}
 +
  
 
#bodyContent .slider button {
 
#bodyContent .slider button {
Line 1,365: Line 1,442:
 
     border-radius: 50%;
 
     border-radius: 50%;
 
     border: 3px solid transparent;
 
     border: 3px solid transparent;
     border-top-color: #3498db;
+
     border-top-color: #0e6752;
  
 
     -webkit-animation: spin 2s linear infinite;
 
     -webkit-animation: spin 2s linear infinite;
Line 1,382: Line 1,459:
 
         border-radius: 50%;
 
         border-radius: 50%;
 
         border: 3px solid transparent;
 
         border: 3px solid transparent;
         border-top-color: #e74c3c;
+
         border-top-color: #149375;
  
 
         -webkit-animation: spin 3s linear infinite;
 
         -webkit-animation: spin 3s linear infinite;
Line 1,397: Line 1,474:
 
         border-radius: 50%;
 
         border-radius: 50%;
 
         border: 3px solid transparent;
 
         border: 3px solid transparent;
         border-top-color: #f9c922;
+
         border-top-color: #1ac19a;
  
 
         -webkit-animation: spin 1.5s linear infinite;
 
         -webkit-animation: spin 1.5s linear infinite;
Line 1,489: Line 1,566:
 
     }
 
     }
  
     #myowncanvas{
+
     #myCanvas{
 
       position:fixed;
 
       position:fixed;
 
       top: 0;
 
       top: 0;

Latest revision as of 20:31, 1 November 2017