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

Line 448: Line 448:
 
#bodyContent footer i:hover {
 
#bodyContent footer i:hover {
 
   color: rgba(255, 255, 255, 1);
 
   color: rgba(255, 255, 255, 1);
−
}
 
−
 
−
/************************************************************************
 
−
Layout Elements
 
−
************************************************************************/
 
−
#bodyContent .tab {
 
−
  display:flex;
 
−
  flex-direction:row;
 
−
  justify-content: center;
 
−
}
 
−
 
−
#bodyContent .tab button {
 
−
  background-color:#fff;
 
−
  border:none;
 
−
  border-bottom:5px solid #ccc;
 
−
  outline:none;
 
−
  transition: 0.3s;
 
−
  width: 100%;
 
−
  padding: 20px;
 
−
}
 
−
 
−
#bodyContent .tab button:hover{
 
−
  background-color:#eee;
 
−
}
 
−
 
−
#bodyContent .tab button.active {
 
−
  border-bottom:5px solid #149375;
 
−
}
 
−
 
−
#bodyContent .tab img{
 
−
  padding: 20%;
 
−
}
 
−
 
−
#bodyContent .tabcontent {
 
−
  display:none;
 
−
}
 
−
 
−
#bodyContent .tabcontent:first-child{
 
−
  display:block;
 
−
}
 
−
 
−
#bodyContent .tabcontent {
 
−
    -webkit-animation: fadeEffect 1s;
 
−
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
 
−
}
 
−
 
−
@-webkit-keyframes fadeEffect {
 
−
    from {opacity: 0;}
 
−
    to {opacity: 1;}
 
−
}
 
−
 
−
@keyframes fadeEffect {
 
−
    from {opacity: 0;}
 
−
    to {opacity: 1;}
 
 
}
 
}
  
Line 681: Line 627:
 
     background: #149375;
 
     background: #149375;
 
     color: #fefefe;
 
     color: #fefefe;
 +
  }
 +
  /************************************************************************
 +
  Layout Elements
 +
  ************************************************************************/
 +
  /************************************************************************
 +
  Tabs
 +
  ************************************************************************/
 +
  #bodyContent .tab {
 +
    display:flex;
 +
    flex-direction:row;
 +
    justify-content: center;
 +
  }
 +
 +
  #bodyContent .tab button {
 +
    background-color:#fff;
 +
    border:none;
 +
    border-bottom:5px solid #ccc;
 +
    outline:none;
 +
    transition: 0.3s;
 +
    width: 100%;
 +
    padding: 20px;
 +
  }
 +
 +
  #bodyContent .tab button:hover{
 +
    background-color:#eee;
 +
  }
 +
 +
  #bodyContent .tab button.active {
 +
    border-bottom:5px solid #149375;
 +
  }
 +
 +
  #bodyContent .tab img{
 +
    padding: 20%;
 +
  }
 +
 +
  #bodyContent .tabcontent {
 +
    display:none;
 +
  }
 +
 +
  #bodyContent .tabcontent:first-child{
 +
    display:block;
 +
  }
 +
 +
  #bodyContent .tabcontent {
 +
      -webkit-animation: fadeEffect 1s;
 +
      animation: fadeEffect 1s; /* Fading effect takes 1 second */
 +
  }
 +
 +
  @-webkit-keyframes fadeEffect {
 +
      from {opacity: 0;}
 +
      to {opacity: 1;}
 +
  }
 +
 +
  @keyframes fadeEffect {
 +
      from {opacity: 0;}
 +
      to {opacity: 1;}
 +
  }
 +
  /************************************************************************
 +
  Callout
 +
  ************************************************************************/
 +
  #bodyContent div.callout {
 +
    margin: 24px 0;
 +
    padding: 20px;
 +
    border: 5px solid #149375;
 +
    border-radius: 20px;
 +
  }
 +
  /************************************************************************
 +
  Accordion
 +
  ************************************************************************/
 +
  #bodyContent button.accordion {
 +
    font: 20px Quicksand;
 +
    background-color: rgba(20, 147, 117, 0.125);
 +
    cursor: pointer;
 +
    padding: 18px;
 +
    width: 100%;
 +
    border: none;
 +
    text-align: left;
 +
    outline: none;
 +
    transition: all 0.5s ease;
 +
  }
 +
  #bodyContent button.accordion.active,
 +
  #bodyContent button.accordion:hover {
 +
    background-color: rgba(20, 147, 117, 0.7);
 +
  }
 +
  #bodyContent button.accordion:after {
 +
    content: '\002B';
 +
    color: #149375;
 +
    float: right;
 +
    margin-left: 5px;
 +
  }
 +
  #bodyContent button.accordion.active:after {
 +
    content: "\2212";
 +
  }
 +
  #bodyContent .panel {
 +
    padding: 0 18px;
 +
    background-color: white;
 +
    max-height: 0;
 +
    overflow: hidden;
 +
    transition: max-height 0.5s ease-out;
 +
  }
 +
  #bodyContent .panel p {
 +
    font-size: 18px;
 
   }
 
   }
 
/************************************************************************
 
/************************************************************************
Line 904: Line 952:
 
   color: black;
 
   color: black;
 
}
 
}
 +
 +
 
/************************************************************************
 
/************************************************************************
−
Callout
+
Misc elements
 
************************************************************************/
 
************************************************************************/
−
#bodyContent div.callout {
 
−
  margin: 24px 0;
 
−
  padding: 20px;
 
−
  border: 5px solid #149375;
 
−
  border-radius: 20px;
 
−
}
 
−
/************************************************************************
 
−
Accordion
 
−
************************************************************************/
 
−
#bodyContent button.accordion {
 
−
  font: 20px Quicksand;
 
−
  background-color: rgba(20, 147, 117, 0.125);
 
−
  cursor: pointer;
 
−
  padding: 18px;
 
−
  width: 100%;
 
−
  border: none;
 
−
  text-align: left;
 
−
  outline: none;
 
−
  transition: all 0.5s ease;
 
−
}
 
−
#bodyContent button.accordion.active,
 
−
#bodyContent button.accordion:hover {
 
−
  background-color: rgba(20, 147, 117, 0.7);
 
−
}
 
−
#bodyContent button.accordion:after {
 
−
  content: '\002B';
 
−
  color: #149375;
 
−
  float: right;
 
−
  margin-left: 5px;
 
−
}
 
−
#bodyContent button.accordion.active:after {
 
−
  content: "\2212";
 
−
}
 
−
#bodyContent .panel {
 
−
  padding: 0 18px;
 
−
  background-color: white;
 
−
  max-height: 0;
 
−
  overflow: hidden;
 
−
  transition: max-height 0.5s ease-out;
 
−
}
 
−
#bodyContent .panel p {
 
−
  font-size: 18px;
 
−
}
 
−
/************************************************************************
 
−
Mega Menu
 
−
************************************************************************/
 
−
#mega-menu {
 
−
  display: flex;
 
−
  justify-content: space-around;
 
−
  margin: 5vw 0;
 
−
}
 
−
#mega-menu i {
 
−
  font-size: 10vw;
 
−
}
 
−
#mega-menu a {
 
−
  color: #263238;
 
−
  transition: all 0.5s ease;
 
−
}
 
−
#mega-menu a:link {
 
−
  color: #263238;
 
−
}
 
−
#mega-menu a:visited {
 
−
  color: #263238;
 
−
}
 
−
#mega-menu a:hover,
 
−
a:focus,
 
−
a:active {
 
−
  color: #149375;
 
−
}
 
 
/************************************************************************
 
/************************************************************************
 
Upwards arrow
 
Upwards arrow
Line 993: Line 974:
 
   color: black;
 
   color: black;
 
}
 
}
−
 
−
@media (min-width: 1024px) {
 
−
  #bodyContent #back-to-top {
 
−
    color: rgba(0, 0, 0, 0.6);
 
−
  }
 
−
}
 
−
 
  
  

Revision as of 07:24, 30 October 2017