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

m (eddits on zoom)
(applied new design)
Line 264: Line 264:
  
 
/* bevel size, left offset and color settings next 3 lines */  
 
/* bevel size, left offset and color settings next 3 lines */  
−
.contentbox { /*left: -30px*/ }
+
/*.bevel, .content { border-width: 30px }
−
.bevel, .content { border-width: 30px }
+
 
.bevel, .content { border-color: #eeeeee; border-style:solid; }
 
.bevel, .content { border-color: #eeeeee; border-style:solid; }
  
Line 273: Line 272:
 
.contentbox .tr, .contentbox .br { border-right-color: transparent; }
 
.contentbox .tr, .contentbox .br { border-right-color: transparent; }
 
.contentbox .tl, .contentbox .bl { border-left-color: transparent; }
 
.contentbox .tl, .contentbox .bl { border-left-color: transparent; }
−
.no_bevel { height: 0px; width: 100%; border-bottom: 0; }
+
.no_bevel { height: 0px; width: 100%; border-bottom: 0; }*/
  
  
Line 283: Line 282:
 
/*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: 66%;
+
width: 100%;
 
     margin: auto;
 
     margin: auto;
−
     margin-bottom: 30px;
+
     /*margin-bottom: 30px;*/
 +
background: #eeeeee;
 
}
 
}
  
−
@media screen and (max-width: 1000px) {
+
/*@media screen and (max-width: 1000px) {
 
     .contentbox {
 
     .contentbox {
 
         width: 72%;
 
         width: 72%;
Line 304: Line 304:
 
         width: 90%;
 
         width: 90%;
 
     }
 
     }
−
}
+
}*/
  
 
.labnotebox {
 
.labnotebox {
Line 353: Line 353:
 
 
 
background: #eeeeee;
 
background: #eeeeee;
−
     width: 100%;
+
     width: 66%;
 
     border-top: 0;
 
     border-top: 0;
 
     border-bottom: 0;
 
     border-bottom: 0;
Line 359: Line 359:
 
overflow: auto;
 
overflow: auto;
 
margin: auto;
 
margin: auto;
 +
padding-bottom: 20px;
 
}
 
}
  
Line 575: Line 576:
 
margin: 0px;
 
margin: 0px;
 
padding: 0px;
 
padding: 0px;
 +
margin-top: 20px;
 
 
 
}
 
}
Line 613: Line 615:
 
#cover-box {
 
#cover-box {
 
width: 70%;
 
width: 70%;
−
height: 95%;
+
height: 90%;
 
background: rgba(1, 1, 1, 0);
 
background: rgba(1, 1, 1, 0);
 
     top:50%;
 
     top:50%;
 
     left:50%;
 
     left:50%;
 
transform: translate(-50%, -50%);
 
transform: translate(-50%, -50%);
 +
overflow: auto;
 
}
 
}
  
Line 627: Line 630:
 
text-align: center;
 
text-align: center;
 
margin-bottom: 0px;
 
margin-bottom: 0px;
 +
overflow: auto;
 
}
 
}
  
Line 638: Line 642:
 
padding-right: 20px;
 
padding-right: 20px;
 
margin-top: 0px;
 
margin-top: 0px;
 +
overflow: auto;
 
}
 
}
  

Revision as of 16:37, 30 September 2017

/* START OVERIDE HQ CSS */

  1. top_title {

display: none; }

  1. sideMenu {

display: none; }

  1. content {

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

  1. globalWrapper {

padding: 0px; }

  1. HQ_page p {

font-size: 11px; }

ul { list-style-image: none; }

li { margin: 0px; }

a, a:link, a:visited, a:hover, a:active { color: #8b3d65; text-decoration: none; }

.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul { margin: 0px; }

/* END OVERIDE HQ CSS */

/* START OUR WIKI CSS */


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

}

  1. bodyContent a[href^="https://"], .link-https {
   padding: 0px;

margin: 0px; }

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

article { margin-bottom: 60px; }

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

   text-align: center;
   float: left;
   width: 100%;
   height: 50px;
   /*padding-bottom: 10px;*/
   position: fixed;

top: 16px; 

   /*box-shadow: 0px 0px 5px #000000;*/

display: table-cell; vertical-align: bottom; }


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

  1. navbar-left, #navbar-right {

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; font-size: 14px; }


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

   ul.navbar {

/*background-color: #FF0000;*/ font-size: 12px; } }

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

   ul.navbar {

/*background-color: #0000FF;*/ font-size: 10px; } }

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

   ul.navbar {

/*background-color: #00FF00;*/ font-size: 8px; } }

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

   ul.navbar {

/*background-color: #00FFFF;*/ font-size: 6px; } }

.navbar-paragraph { background-color: #444444; color: #FFFFFF; list-style: none; width: 100%; height: 50%; margin: 0px; padding: 0px; }

.navbar.item-left, .navbar.item-right, .sub-navbar li { cursor:pointer; }

.navbar-paragraph.left { text-align: left; padding-left: 5%; }

.navbar-paragraph.right { text-align: right; padding-right: 5%; }

.navbar.left { width: 47%; float: left; height: 100%; }

.navbar.right { width: 47%; float: right; height: 100%; }

ul.navbar.center { width: 6%; float: left; padding: 1%; padding-bottom: 5px; padding-top: 5px; box-shadow: 0px 0px 5px #000000; }

ul.navbar.center:hover { background-color: #7b2d55; }

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

.navbar.item-left { float: right; }

.navbar.item-right { 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: 0px 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, 

li.navbar.highlighted {

background-color: #62153d; }

/*changes the item color when the cursor is hovering over it, clicking it or the tab is active*/ .sub-navbar-item a:hover, .sub-navbar-item a:active, .sub-navbar-item.active, 

.sub-navbar-item.highlighted {

background-color: rgba(0,0,0, 0.35); }

.sub-navbar { /*background-color: #5b0d35;*/ 

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

}

.sub-navbar-list { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: rgba(0,0,0,0.7); top: 0; width: 100%; }

.sub-navbar-item { font-size: 13px; height: 20px; line-height: 20px; }

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

.anchor-jump{ 

 display: block;
 height: 60px; /*same height as header*/
 margin-top: -60px; /*same height as header*/
 visibility: hidden;

}

/* bevel size, left offset and color settings next 3 lines */ /*.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: 80px; }

/*styles the background of the content boxes and orders them below each other*/ .contentbox { width: 100%; 

   margin: auto;
   /*margin-bottom: 30px;*/

background: #eeeeee; }

/*@media screen and (max-width: 1000px) { 

   .contentbox {
       width: 72%;
   }

}

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

   .contentbox {
       width: 80%;
   }

}

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

   .contentbox {
       width: 90%;
   }

}*/

.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: 66%;
   border-top: 0;
   border-bottom: 0;

overflow: auto; margin: auto; padding-bottom: 20px; }

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 { display: block; margin: auto; margin-top: 20px; margin-bottom: 20px; }

.figure.large { width: 92%; }

.figure.medium, .figure.fifty { width: 50%; }

.figure.small { width: 30%; }

.figure.fourty { width: 40%; }

.figure.sixty { width: 60%; }

.figure.seventy { width: 70%; }

.figure.eighty { width: 80%; }

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

/*Styles the figure's subtitle to a smaller font-size. */ .figure.subtitle, .figure.subtitle p { font-size: 11px; 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%; }

.page-switch { width: 12%; font-size: 14px; text-align: center; margin-bottom: 20px; cursor: pointer; height: 40px; min-width: 160px; }

.page-switch.prev { float: left; margin-left: 3.5%; }

.page-switch.next { float: right; margin-right: 3.5%; }

ul.page-switch-buttons { overflow: hidden; list-style-type: none; margin: 0px; padding: 0px; margin-top: 20px;

}

li.page-switch a { background: #eeeeee; display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; }

li.page-switch a:hover { color: #7b2d55; background: #e7e7e7; }

.figure { cursor: pointer; }

.cover { cursor: pointer; padding:0; 

   margin:0;

position:fixed; }

  1. cover {

width: 100%; height: 100%; background: rgba(0, 0, 0, 0); 

   top:0;
   left:0;

}

  1. cover-box {

width: 70%; height: 90%; background: rgba(1, 1, 1, 0); 

   top:50%;
   left:50%;

transform: translate(-50%, -50%); overflow: auto; }

  1. cover-box-img {

position: relative; background: rgba(255, 0, 0, 0); width: 100%; height: 88%; text-align: center; margin-bottom: 0px; overflow: auto; }

  1. cover-box-text {

position:relative; background: rgba(0, 255, 0, 0); width: 100%; height: 12%; text-align: center; padding-left: 20px; padding-right: 20px; margin-top: 0px; overflow: auto; }

  1. cover-img {

margin: auto; margin-top: 10px; margin-bottom: 0px; }

  1. cover-p {

text-align: justify; }