Difference between revisions of "Template:Team:Bielefeld-CeBiTec/CSS"

m (navbar css fix test)
(updated css with new design and new navbar)
Line 19: Line 19:
 
list-style-image: none;
 
list-style-image: none;
 
}
 
}
 +
 
/* END OVERIDE HQ CSS */
 
/* END OVERIDE HQ CSS */
 +
 
/* START OUR WIKI CSS */
 
/* START OUR WIKI CSS */
 +
 +
 +
*,
 +
*:before,
 +
*:after {
 +
    -webkit-box-sizing: border-box;
 +
    -moz-box-sizing: border-box;
 +
    box-sizing: border-box;
 +
}
  
 
body {
 
body {
Line 32: Line 43:
 
header {
 
header {
 
background-color: #6b1d45;
 
background-color: #6b1d45;
−
text-align: center;
+
    text-align: center;
−
float: left;
+
    float: left;
−
width: 100%;
+
    width: 100%;
−
height: 40px;
+
    height: 50px;
−
padding-bottom: 10px;
+
    padding-bottom: 10px;
−
position: fixed;
+
    position: fixed;
−
top: 16px;
+
    top: 16px;
−
box-shadow: 0px 0px 5px #000000;
+
    box-shadow: 0px 0px 5px #000000;
 +
 
 +
    -webkit-transition: all 0.2s;
 +
    -moz-transition: all 0.2s;
 +
    -ms-transition: all 0.2s;
 +
    -o-transition: all 0.2s;
 +
    transition: all 0.2s;
 
}
 
}
  
Line 64: Line 81:
  
 
/*changes the order of the items from vertical to horizontal*/
 
/*changes the order of the items from vertical to horizontal*/
−
li.navbar {
+
li.navbar, .sub-navbar-item {
 
float: left;
 
float: left;
−
text-transform: capitalize;
 
 
}
 
}
  
 
/*styles the single items from text-links to nice buttons*/
 
/*styles the single items from text-links to nice buttons*/
−
li.navbar a {
+
li.navbar a, .sub-navbar-item a {
 
display: block;
 
display: block;
 
color: white;
 
color: white;
Line 78: Line 94:
 
}
 
}
  
−
/*changes the item color when the cursor is hovering over it*/
+
/*changes the item color when the cursor is hovering over it, clicking it or the tab is active*/
−
li.navbar a:hover {
+
li.navbar a:hover, li.navbar a:active, li.navbar.active, .sub-navbar-item a:hover, .sub-navbar-item a:active {
 
background-color: #7b2d55;
 
background-color: #7b2d55;
 
}
 
}
  
−
/*changes the item color when the user is clicking it*/
+
.sub-navbar {
−
li.navbar a:active {
+
background-color: #6b1d45;
−
background-color: #7b2d55;
+
    text-align: center;
 +
    float: left;
 +
    width: 100%;
 +
    padding-bottom: 10px;
 +
    position: fixed;
 +
    top: 66px;
 +
    box-shadow: 0px 5px 5px -5px #000000;
 +
 
 +
    -webkit-transition: all 0.2s;
 +
    -moz-transition: all 0.2s;
 +
    -ms-transition: all 0.2s;
 +
    -o-transition: all 0.2s;
 +
    transition: all 0.2s;
 
}
 
}
  
−
/*Highlights the active tab*/
+
.sub-navbar-list {
−
li.navbar.active {
+
list-style-type: none;
−
background-color: #7b2d55;
+
margin: 0;
 +
padding: 0;
 +
overflow: hidden;
 +
background-color: #6b1d45;
 +
top: 0;
 +
width: 100%;
 
}
 
}
 +
 +
.sub-navbar-item {
 +
font-size: 15px;
 +
}
 +
 +
.sub-navbar-item.small {
 +
font-size: 12px;
 +
}
 +
 +
 +
/* bevel size, left offset and color settings next 3 lines */
 +
.contentbox { /*left: -30px*/ }
 +
.bevel, .content { border-width: 30px }
 +
.bevel, .content { border-color: #eeeeee; border-style:solid; }
 +
 +
.contentbox .tr, .contentbox .tl, .contentbox .br, .contentbox .bl { height: 0px; width: 100%; }
 +
.contentbox .tr, .contentbox .tl { border-top: 0; }
 +
.contentbox .br, .contentbox .bl { border-bottom: 0; }
 +
.contentbox .tr, .contentbox .br { border-right-color: transparent; }
 +
.contentbox .tl, .contentbox .bl { border-left-color: transparent; }
 +
.no_bevel { height: 0px; width: 100%; border-bottom: 0; }
  
  
 
.container {
 
.container {
−
width: 100%;
+
width: 100%;
 +
margin-top: 180px;
 
}
 
}
  
 
/*styles the background of the content boxes and orders them below each other*/
 
/*styles the background of the content boxes and orders them below each other*/
 
.contentbox {
 
.contentbox {
−
width: 100%;
+
/*width: 100%;
 
float: left;
 
float: left;
 
padding-left: 0px;
 
padding-left: 0px;
 
padding-right: 0px;
 
padding-right: 0px;
−
background-color: #FFFFFF;
+
background-color: #FFFFFF;*/
 +
 +
width: 80%;
 +
    margin: auto;
 +
    margin-bottom: 30px;
 +
    /*padding-right: 60px; /* has to be twice the amount of border */
 
}
 
}
  
Line 138: Line 198:
 
}
 
}
  
−
/*surrounds the content by woxes with round edges and adds shadows*/
+
/*surrounds the content by boxes with round edges and adds shadows*/
 
.content {
 
.content {
−
padding: 50px;
+
/*padding: 50px;
 
padding-left: 50px;
 
padding-left: 50px;
 
padding-right: 50px;
 
padding-right: 50px;
 
padding-top: 25px;
 
padding-top: 25px;
−
text-align: justify;
+
width: 60%;
−
margin: 20px;
+
margin: auto;
−
margin-left: 250px;
+
margin-top: 20px;
−
margin-right: 250px;
+
margin-bottom: 20px;
 
box-shadow: 0px 0px 5px #666666;
 
box-shadow: 0px 0px 5px #666666;
 
border-radius: 8px;
 
border-radius: 8px;
 
border-color: #6b1d45;
 
border-color: #6b1d45;
 +
background-color: #e8e8e8;*/
 +
 +
background: #eeeeee;
 +
    width: 100%;
 +
    border-top: 0;
 +
    border-bottom: 0;
 +
 +
overflow: auto;
 +
margin: auto;
 +
}
 +
 +
article {
 +
text-align: justify;
 +
    width: 92%;
 +
    display: block;
 +
    margin: auto;
 +
}
 +
 +
h1, h2, h3, h4, h5, h6 {
 +
    width: 92%;
 +
    margin: auto;
 +
    margin-top: 0px;
 +
 +
    padding-top: 20px;
 +
    padding-bottom: 15px;
 
}
 
}
  
Line 202: Line 287:
 
border-radius: 8px;
 
border-radius: 8px;
 
border-color: #6b1d45;
 
border-color: #6b1d45;
−
background-color: #e8e8e8;
 
−
}
 
−
 
−
/*content style 1*/
 
−
.content.style1 {
 
 
background-color: #e8e8e8;
 
background-color: #e8e8e8;
 
}
 
}
Line 248: Line 328:
 
}
 
}
  
−
.figure.big {
+
.figure.large {
−
width: 90%;
+
width: 92%;
 
display: block;
 
display: block;
 
margin: auto;
 
margin: auto;
Line 270: Line 350:
 
margin-top: 20px;
 
margin-top: 20px;
 
margin-bottom: 20px;
 
margin-bottom: 20px;
 +
}
 +
 +
.figure.image {
 +
width: 100%;
 +
margin-bottom: 15px;
 
}
 
}
  
Line 278: Line 363:
 
margin-top: -10px;
 
margin-top: -10px;
 
margin-bottom: 20px;
 
margin-bottom: 20px;
 +
}
 +
 +
.contentline {
 +
width: 96%;
 +
margin: auto;
 +
margin-top: 10px;
 +
margin-bottom: 10px;
 +
overflow: auto;
 +
}
 +
 +
.half {
 +
width: 48%;
 +
}
 +
 +
/* */
 +
.half.left {
 +
float: left;
 +
margin-right: 1%;
 +
}
 +
 +
.half.right {
 +
float: right;
 +
margin-left: 1%;
 +
}
 +
 +
.third {
 +
width: 33%;
 +
float: left;
 +
margin-right: 0.334%;
 +
}
 +
 +
.third.double {
 +
width: 66%;
 +
float: left;
 +
margin-right: 0.335%;
 
}
 
}

Revision as of 21:16, 26 August 2017

/* START OVERIDE HQ CSS */

  1. top_title {

display: none; }

  1. sideMenu {

display: none; }

  1. content {

padding: 0px; width: 100%; margin: 0px; border: none; }

ul { list-style-image: none; }

/* END OVERIDE HQ CSS */

/* START OUR WIKI CSS */


  • ,
    before,
    after {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

}

body { height: 100%; font-family: verdana; color: #000000; margin: 0px; }

/*styles bar of the navigation bar and fixes it to the top*/ header { background-color: #6b1d45; 

   text-align: center;
   float: left;
   width: 100%;
   height: 50px;
   padding-bottom: 10px;
   position: fixed;
   top: 16px;
   box-shadow: 0px 0px 5px #000000;

   -webkit-transition: all 0.2s;
   -moz-transition: all 0.2s;
   -ms-transition: all 0.2s;
   -o-transition: all 0.2s;
   transition: all 0.2s;

}

footer { background-color: #111111; text-align: center; float: left; width: 100%; height: 60px; padding-top: 15px; box-shadow: 0px 0px 5px #000000; }

/*Aligns navbar items to the bar and removes bullet points*/ ul.navbar { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #6b1d45; top: 0; width: 100%; }

/*changes the order of the items from vertical to horizontal*/ li.navbar, .sub-navbar-item { float: left; }

/*styles the single items from text-links to nice buttons*/ li.navbar a, .sub-navbar-item a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }

/*changes the item color when the cursor is hovering over it, clicking it or the tab is active*/ li.navbar a:hover, li.navbar a:active, li.navbar.active, .sub-navbar-item a:hover, .sub-navbar-item a:active { background-color: #7b2d55; }

.sub-navbar { background-color: #6b1d45; 

   text-align: center;
   float: left;
   width: 100%;
   padding-bottom: 10px;
   position: fixed;
   top: 66px;
   box-shadow: 0px 5px 5px -5px #000000;

   -webkit-transition: all 0.2s;
   -moz-transition: all 0.2s;
   -ms-transition: all 0.2s;
   -o-transition: all 0.2s;
   transition: all 0.2s;

}

.sub-navbar-list { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #6b1d45; top: 0; width: 100%; }

.sub-navbar-item { font-size: 15px; }

.sub-navbar-item.small { font-size: 12px; }


/* bevel size, left offset and color settings next 3 lines */ .contentbox { /*left: -30px*/ } .bevel, .content { border-width: 30px } .bevel, .content { border-color: #eeeeee; border-style:solid; }

.contentbox .tr, .contentbox .tl, .contentbox .br, .contentbox .bl { height: 0px; width: 100%; } .contentbox .tr, .contentbox .tl { border-top: 0; } .contentbox .br, .contentbox .bl { border-bottom: 0; } .contentbox .tr, .contentbox .br { border-right-color: transparent; } .contentbox .tl, .contentbox .bl { border-left-color: transparent; } .no_bevel { height: 0px; width: 100%; border-bottom: 0; }


.container { width: 100%; margin-top: 180px; }

/*styles the background of the content boxes and orders them below each other*/ .contentbox { /*width: 100%; float: left; padding-left: 0px; padding-right: 0px; background-color: #FFFFFF;*/

width: 80%; 

   margin: auto;
   margin-bottom: 30px;
   /*padding-right: 60px; /* has to be twice the amount of border */

}

.labnotebox { width: 100%; float: left; padding-left: 0px; padding-right: 0px; background-color: #FFFFFF; }

.contentbox.team { width: 100%; background-color: #FF0000; padding-left: 0px; padding-right: 0px; display: flex; }

.contentbox.left { background-color: #FFFFFF; padding-left: 0px; padding-right: 0px; width: 50%; height: 100%; }

.contentbox.right { background-color: #FFFFFF; padding-left: 0px; padding-right: 0px; width: 50%; }

/*surrounds the content by boxes with round edges and adds shadows*/ .content { /*padding: 50px; padding-left: 50px; padding-right: 50px; padding-top: 25px; width: 60%; margin: auto; margin-top: 20px; margin-bottom: 20px; box-shadow: 0px 0px 5px #666666; border-radius: 8px; border-color: #6b1d45; background-color: #e8e8e8;*/

background: #eeeeee; 

   width: 100%;
   border-top: 0;
   border-bottom: 0;

overflow: auto; margin: auto; }

article { text-align: justify; 

   width: 92%;
   display: block;
   margin: auto;

}

h1, h2, h3, h4, h5, h6 { 

   width: 92%;
   margin: auto;
   margin-top: 0px;

   padding-top: 20px;
   padding-bottom: 15px;

}

/*---*/ .labnote-content { padding: 25px; padding-left: 50px; padding-right: 50px; padding-top: 15px; text-align: justify; margin-bottom: 10px; margin-left: 250px; margin-right: 250px; box-shadow: 0px 0px 5px #666666; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; border-color: #6b1d45; background-color: #e8e8e8; display: none; }

/*---*/ .labnote-title { padding-bottom: 5px; padding-left: 50px; padding-right: 50px; padding-top: 5px; text-align: justify; margin-top: 20px; margin-left: 250px; margin-right: 250px; box-shadow: 0px 0px 5px #666666; border-top-right-radius: 8px; border-top-left-radius: 8px; border-color: #6b1d45; background-color: #f4f4f4; cursor: pointer; }

/*---*/ .labnote-date { padding: 1px; padding-left: 50px; padding-right: 50px; text-align: center; margin-bottom: 5px; margin-left: 250px; margin-right: 250px; margin-top: 20px; box-shadow: 0px 0px 5px #666666; border-radius: 8px; border-color: #6b1d45; background-color: #e8e8e8; }

/*styles the content of a team member box on the team page*/ .content.memberbox { background-color: #e8e8e8; padding-left: 20px; padding-top: 20px; margin: 20px; min-width: 0px; }

.content.memberbox.left { margin-right: 10px; }

.content.memberbox.right { margin-left: 10px; }

.team-member-image { float: left; width: 15%; margin-right: 10px; }

.team.member-info { width: 75%; /*background-color: #00FF00;*/ }

/*icons from font-awesome*/ .fa { color: #6b1d45; }

/*color change for icons*/ .fa:hover { color: #8b3d65; }

.figure.large { width: 92%; display: block; margin: auto; margin-top: 20px; margin-bottom: 20px; }

.figure.medium { width: 50%; display: block; margin: auto; margin-top: 20px; margin-bottom: 20px; }

.figure.small { width: 30%; display: block; margin: auto; margin-top: 20px; margin-bottom: 20px; }

.figure.image { width: 100%; margin-bottom: 15px; }

/*Styles the figure's subtitle to a smaller font-size. */ .figure.subtitle { font-size: 75%; text-align: justify; margin-top: -10px; margin-bottom: 20px; }

.contentline { width: 96%; margin: auto; margin-top: 10px; margin-bottom: 10px; overflow: auto; }

.half { width: 48%; }

/* */ .half.left { float: left; margin-right: 1%; }

.half.right { float: right; margin-left: 1%; }

.third { width: 33%; float: left; margin-right: 0.334%; }

.third.double { width: 66%; float: left; margin-right: 0.335%; }