Difference between revisions of "Template:UPMC-Paris/CSS"

Line 1: Line 1:
 +
<html>
 +
<style>
 +
/* TAGS */
 +
html {
 +
    overflow-y: scroll;
 +
    min-height:100%;
 +
}
 +
body {
 +
    zoom:1;
 +
    width:100%;
 +
    background: #383838;
 +
}
 +
body:after {
 +
  content: url(https://static.igem.org/mediawiki/2015/7/76/ETH_babybeacon.png);
 +
  display: none;
 +
}
 +
#bodyContent {
 +
    width: 100%;
 +
}
 +
#globalWrapper {
 +
    background-image: url("https://static.igem.org/mediawiki/2015/d/d8/ETH_Zurich_background.png");
 +
    background-position: 25px 25px;
 +
    background-attachment: fixed;
 +
}
  
  
−
<html>
+
h1#loading {
−
<!-- CSS-->
+
    border-bottom:none;
 +
    color:white;
 +
}
  
−
<style type='text/css'>
+
/* IDs */
 +
#content {
 +
    font-family: "Trebuchet MS", Helvetica, sans-serif;
 +
    width:100%;
 +
}
  
−
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {display: none;} /*-- hides default wiki settings --*/
+
#topContainer {
 +
    height: 100px;
 +
    display:table-header-group;
 +
}
 +
@media screen and (max-device-width:480px) {
 +
#topContainer {
 +
    height:314px;
 +
}
 +
}
 +
#mobileMenu {
 +
    display:none;
 +
}
  
−
    #top_title, #sideMenu{
+
#sideFiller {
−
      display: none;
+
     width:20%;
−
    }
+
    height:100px;
−
     #content{
+
    float:left;
−
    width:100%;
+
}
−
    padding: 0;
+
@media screen and (max-device-width:480px) {
−
    margin: auto;
+
#sideFiller {
−
    }  
+
    width:80%;
−
    p {
+
    height:auto;
−
color:#666666;
+
 
}
 
}
−
  h3 {
 
−
color: #222222;
 
 
}
 
}
−
#header{
 
−
      width:100%;
 
−
      height:200px;
 
−
      color-background:red;
 
−
      display: block;
 
  
−
} 
+
#sidemenuContainer {
−
#colorNav > ul{
+
    margin-right:1%;
−
+
     width:19%;
−
margin-left: auto;
+
    float:left;
−
     margin-right: auto;
+
    display:table-cell;
−
position:fixed;
+
    position:absolute;
−
top:50px;
+
    top:103px;
 +
    bottom:0px;
 +
/*    height:100%;*/
 +
/*    position:relative;*/
 +
/*    overflow:auto;*/
 
}
 
}
−
#colorNav > ul > li{ /* will style only the top level li */
+
 
−
list-style: none;
+
#sidemenu {
−
box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
+
    padding:11%;
−
display: inline-block;
+
    height:auto;
−
line-height:2;
+
    background:white;
−
        margin: 0px;
+
    border: 1px solid black;
−
border-radius: 30px;
+
    border-radius: 4px;
−
position:relative;
+
    width: 77%;
 +
    position:absolute;
 
}
 
}
−
#colorNav > ul > li > a{
+
 
−
color:inherit;
+
#mainContainer {
−
text-decoration:none !important;
+
    width:80%;
−
font-size:12px;
+
    max-width: 1020px;
−
padding: 30px;
+
    margin:auto;
 +
    position:relative;
 +
    min-height:400px;
 +
    height:100%;
 +
    overflow-y: visible;
 +
    display:table;
 
}
 
}
−
#colorNav li ul{
 
−
position:absolute;
 
−
list-style:none;
 
−
text-align:center;
 
−
width:180px;
 
−
left:50%;
 
−
margin-left:-90px;
 
−
top:30px;
 
−
font:bold 12px 'Open Sans Condensed', sans-serif;
 
  
−
/* This is important for the show/hide CSS animation */
+
#menuButton {
−
max-height:0px;
+
    padding:30px;
−
overflow:hidden;
+
    margin:85px 30px 0px 0px;
−
        border-radius: 30px;
+
    background:#383838;
−
-webkit-transition:max-height 0.4s linear;
+
    display:none;
−
-moz-transition:max-height 0.4 linear;
+
    width:90px;
−
transition:max-height 0.4 linear;
+
    height:90px;
 +
    float:right;
 
}
 
}
−
#colorNav li:hover ul{
+
@media screen and (max-device-width: 480px) {
−
max-height:100px;
+
#menuButton {
 +
    display:block;
 +
}
 +
}
 +
#menuButton img {
 +
    width:100%;
 
}
 
}
  
−
#colorNav li ul li a{
+
#footerContainer {
−
padding:12px;
+
    width:80%;
−
color:#fff !important;
+
    max-width: 1020px;
−
text-decoration:none !important;
+
    text-align:center;
−
display:block;
+
    background-color: #C0C0C0;
−
       
+
/*    padding: 10px;*/
 +
    border: 1px solid black;
 +
    border-radius: 4px;
 +
    margin:auto;
 +
/*    display:table-footer-group;*/
 +
}
  
 +
#socialmedia {
 +
    width:100%;
 +
    margin:auto;
 +
/*    text-align:center;*/
 +
    float:right;
 
}
 
}
  
−
#colorNav li ul li:nth-child(odd){ /* zebra stripes */
+
.expContainer {
−
background-color:#369799;
+
    padding: 4%;
 +
    background: #fff;
 +
    border-radius: 4px;
 +
    float:right;
 +
    clear:right;
 +
    display:table-cell;
 +
    width:72%;
 +
    margin:0 0 1% 0;
 
}
 
}
  
−
#colorNav li ul li:first-child{
+
@media screen and (max-width:1100px) {
−
border-radius:3px 3px 0 0;
+
#sidemenuContainer {
−
margin-top:25px;
+
    display:none;
−
position:relative;
+
}
 +
.expContainer {
 +
    width:92%;
 +
}
 +
}
 +
@media print {
 +
#sidemenuContainer {
 +
    display:none;
 +
}
 +
.expContainer {
 +
    width:92%;
 +
}
 
}
 
}
  
−
#colorNav li ul li:first-child:before{ /* the pointer tip */
+
@media screen and (max-device-width:480px) {
−
content:'';
+
#mainMenu {
−
position:absolute;
+
    display:none;
−
width:1px;
+
}
−
height:1px;
+
−
border:5px solid transparent;
+
−
border-bottom-color:#313131;
+
−
left:50%;
+
−
top:-10px;
+
−
margin-left:-5px;
+
 
}
 
}
  
−
#colorNav li ul li:last-child{
+
 
−
border-bottom-left-radius:3px;
+
/* CLASSES */
−
border-bottom-right-radius:3px;
+
 
 +
.mediabutton {
 +
    width:48px;
 +
    margin:3px;
 +
    border-radius: 50%;
 +
    display:inline-block;
 +
}
 +
@media screen and (max-device-width:480px) {
 +
.mediabutton {
 +
    width:120px;
 +
    height:120px;
 
}
 
}
−
#colorNav li.green{
 
−
/* This is the color of the icon */
 
−
color:#000000;
 
 
}
 
}
  
−
#colorNav li.pink{background-color:#ea5080;color:#000000;}
+
/*Clear class for all the pages, adds spacing too*/
−
#colorNav li.blue{background-color:#53bfe2;color:#000000;}
+
.clear{
−
#colorNav li.brown{background-color:#f8c54d;color:#000000;}
+
    clear:both;
−
#colorNav li.purple{background-color:#df6dc2;color:#000000;}
+
    height: 10px;
−
#colorNav li.orange{background-color:#df6dc2;color:#000000;}
+
}
−
#colorNav li.green{background-color:#00FF00;color:#000000;}
+
 
−
#colorNav li.yellow{background-color:#e2ff00;color:#000000;}
+
/* highlight box for special messages */
−
#colorNav li.red{background-color:#f00000;color:#000000;}
+
.highlightBox {
−
#colorNav li.grey{background-color:#d3d3d3;color:#000000;}
+
    width:80%;
 +
    margin:auto;
 +
    margin-bottom: 15px;
 +
    margin-top: 15px;
 +
    padding: 15px;
 +
    padding-top: 5px;
 +
    border:1px solid #383838;
 +
    border-radius:4px;
 +
}
 +
 
 +
.info {
 +
    max-height:70px;
 +
    overflow:hidden;
 +
    position:relative;
 +
    margin-bottom: 20px;
 +
/*    padding-bottom:35px;*/
 +
}
 +
.open-info {
 +
    max-height:99999px !important;
 +
    padding-bottom:35px;
 +
}
 +
/*.closed-info {
 +
    height:70px;
 +
    max-height:70px !important;
 +
    padding-bottom:auto;
 +
}*/
 +
.expander {
 +
    position:absolute;
 +
    bottom:0px;
 +
    width:100% !important;
 +
    display:inline-block;
 +
    padding:5px 0px 5px 0;
 +
    text-align:center;
 +
    background: linear-gradient(rgba(192,192,192,0), #ccc);
 +
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00cccccc, endColorstr=#ffcccccc);
 +
    border-radius: 4px;
 +
    outline : none;
 +
}
 +
 
 +
/* SIDEMENU STYLES */
 +
 
 +
#mainContainer #sidemenu ul {
 +
    margin: 0em 0em 0em 1em;
 +
}
 +
#mainContainer #sidemenu ul ul {
 +
    margin: 0 0 0 0.5em;
 +
}
 +
#mainContainer #sidemenu ul ul ul {
 +
    margin: 0 0 0 0.8em;
 +
}
 +
#mainContainer #sidemenu ul li {
 +
    list-style: none;
 +
    color: #00964B;
 +
    margin-left:-1em;
 +
    font-size:17px;
 +
}
 +
#mainContainer #sidemenu ul li a {
 +
    font-weight: bold;
 +
}
 +
#mainContainer #sidemenu ul ul li {
 +
    list-style: initial;
 +
    color: #000000;
 +
    margin:0;
 +
    font-size:15px;
 +
}
 +
#mainContainer #sidemenu ul ul li a {
 +
    font-weight:normal;
 +
}
 +
 
 +
#mainContainer #sidemenu a {
 +
    color: #00964B;
 +
    font-weight: normal;
 +
}
 +
 
 +
#mainContainer #sidemenu a:hover,#mainContainer #sidemenu a.current {
 +
    color: #006EB4;
 +
}
 +
 
 +
 
 +
/* MAIN STYLE */
 +
#mainContainer p {
 +
    font-size: 15px;
 +
    padding-top: 5px;
 +
    padding-bottom: 5px;
 +
    text-align:justify;
 +
    margin:0 1% 0 1%;
 +
}
 +
#mainContainer p.caption {
 +
    display:block;
 +
    margin:auto;
 +
    text-align:center;
 +
}
 +
 
 +
#mainContainer h1,#mainContainer h2,#mainContainer h3,#mainContainer h4,#mainContainer h5,#mainContainer h6 {
 +
    color: #000000;
 +
    border-bottom: none;
 +
    font-weight: bold;
 +
    line-height:normal;
 +
}
 +
#mainContainer h1 p,#mainContainer h2 p,#mainContainer h3 p,#mainContainer h4 p,#mainContainer h5 p,#mainContainer h6 p {
 +
    font-weight:normal;
 +
    text-align:left;
 +
}
 +
 
 +
#mainContainer h1 {
 +
    text-align: center;
 +
    color:#00964B;
 +
    font-size:36px;
 +
    padding-top:0px;
 +
    clear:both;
 +
/*    margin-bottom: 0px;*/
 +
}
 +
 
 +
#mainContainer h2 {
 +
    font-size:24px;
 +
    padding-top: 40px;
 +
    border-bottom:1px solid black;
 +
    clear:both;
 +
}
 +
 
 +
#mainContainer h2:first-child {
 +
    padding-top: 0px;
 +
}
 +
 
 +
#mainContainer h3 {
 +
    font-size:20px;
 +
    clear:both;
 +
}
 +
 
 +
#mainContainer li,td,th {
 +
    font-size:15px;
 +
}
 +
 
 +
.expContainer a {  
 +
    font-weight: bold;
 +
    color: #00964B;
 +
}
 +
 
 +
.expContainer a:hover {
 +
    color: #59bf92;
 +
}
 +
 
 +
.expContainer ul {
 +
    margin: .3em 0 0 2.5em;
 +
}
 +
 
 +
/*Change the styling of tables */
 +
#mainContainer table {
 +
    border: 3px solid #565656;
 +
    border-collapse: collapse;
 +
    margin: auto;
 +
    margin-bottom:20px;
 +
}
 +
 
 +
/*Change the styling of table cells*/
 +
#mainContainer td,th {
 +
    padding: 10px;
 +
    vertical-align:middle;
 +
    border: 3px solid #565656;
 +
    max-width:100%;
 +
}
 +
 
 +
/*Change the styling of table headers */
 +
#mainContainer th {
 +
    background-color: #93c6ac;
 +
}
 +
 
 +
#mainContainer .imgBox {
 +
    padding:3px;
 +
    height:auto;
 +
    border: 1px solid #ccc;
 +
    font-family: "Trebuchet MS", Helvetica, sans-serif;
 +
    margin: 20px 0 20px 0;
 +
    background-color:#f9f9f9;
 +
}
 +
#mainContainer .imgBox a {
 +
    display:block;
 +
}
 +
#mainContainer .imgBox > :not(p) {
 +
    background-color:#fff;
 +
}
 +
#mainContainer .imgBox #mag {
 +
    width:15px;
 +
    height:11px;
 +
    float:right;
 +
    margin: 3px;
 +
}
 +
#mainContainer .imgBox #mag img {
 +
    border:none !important;
 +
}
 +
#mainContainer .imgBox p {
 +
    font-size: 10pt;
 +
    padding:3px;
 +
    margin: 0px;
 +
    text-align:left;
 +
}
 +
 
 +
#mainContainer .imgBox object,.imgBox img {
 +
    width:100%;
 +
    border: 1px solid #ccc;
 +
}
 +
#mainContainer .imgBox > table, #mainContainer .imgBox > table td,#mainContainer .imgBox > table th {
 +
    border: 0;
 +
}
 +
#mainContainer .imgBox > table table, #mainContainer .imgBox > table table td, #mainContainer .imgBox > table table th {
 +
    border: 3px solid black;
 +
}
 +
 
 +
 
 +
.expContainer img,.expContainer object.svg {
 +
    display:block;
 +
    margin:auto;
 +
    text-align:center;
 +
}
 +
.expContainer ul {
 +
    list-style: square;
 +
}
 +
a.expander img {
 +
    background: url("https://static.igem.org/mediawiki/2015/b/b1/Updownarrows.png") no-repeat;
 +
    outline : none;
 +
    height:100%;
 +
    background-size:100%;
 +
/*    background-position: 0 100%;*/
 +
}
 +
.open-info a.expander img {
 +
    background-position: 0 100%;
 +
}
 +
/*.closed-info a.expander img {
 +
    background-position: 0 0;
 +
}*/
 +
.expContainer b.TODO {
 +
    color: #F660AB;
 +
}
 +
 
 +
@media screen and (max-device-width: 480px) {
 +
    a.expander {
 +
        height: 10em;
 +
    }
 +
    .info {
 +
        padding-bottom:20em;
 +
    }
 +
    .open-info {
 +
        padding-bottom:20em;
 +
    }
 +
    .info {
 +
        max-height:10em;
 +
    }
 +
/*    .closed-info {
 +
        max-height:10em;
 +
        height:10em;
 +
    }*/
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/* MENU STYLE */
 +
 
 +
#sideFiller img {
 +
    width:95%;
 +
}
 +
 
 +
.hideMenu a {
 +
    color: white;
 +
    text-decoration:none;
 +
    display:block;
 +
    cursor: pointer;
 +
    cursor: hand;
 +
    outline : none;
 +
}
 +
 
 +
 
 +
.hideMenu {
 +
    list-style: none;
 +
    font-weight: bold;
 +
    cursor: pointer;
 +
    outline : none;
 +
    -moz-user-select:-moz-none;
 +
    -moz-user-select:none;
 +
      -o-user-select:none;
 +
  -khtml-user-select:none;
 +
-webkit-user-select:none;
 +
    -ms-user-select:none;
 +
        user-select:none;
 +
    text-align: center;
 +
    height: 100px;
 +
    width:80%;
 +
    float:left;
 +
    position:relative;
 +
    margin: 0px;
 +
    -webkit-transition: z-index 0s;
 +
      -moz-transition: z-index 0s;
 +
        -ms-transition: z-index 0s;
 +
        -o-transition: z-index 0s;
 +
            transition: z-index 0s;
 +
    -webkit-transition-delay: 1s;
 +
      -moz-transition-delay: 1s;
 +
        -ms-transition-delay: 1s;
 +
        -o-transition-delay: 1s;
 +
            transition-delay: 1s;
 +
}
 +
 
 +
#menuContainer .hideMenu {
 +
    margin:0.3em 0 0 0;
 +
}
 +
 
 +
.hideMenu li {
 +
    color: #fff;
 +
    text-transform:uppercase;
 +
    cursor: pointer;
 +
    margin:auto;
 +
    outline : none;
 +
/*    width:14.2857%;*/
 +
    width:16.66666666%;
 +
    float:left;
 +
    z-index:10; 
 +
    padding:10px 0 10px 0;
 +
    border-radius: 20px;
 +
    line-height:40px;
 +
}
 +
 
 +
.hideMenu li ul {
 +
    overflow:hidden;
 +
    border-radius: 0px 0px 20px 20px;
 +
    background: #00B058;
 +
    display:none;
 +
    position:relative;
 +
    margin: 10px 0 0 0;
 +
    z-index:100;
 +
    list-style: none;
 +
    width:100%;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
.hideMenu li.sub {
 +
    height:60px;
 +
}
 +
.hideMenu li.ignoreSwitch {
 +
    line-height:normal;
 +
}
 +
.hideMenu li:hover {
 +
    color: #FFF;
 +
    background-color: #00964B;
 +
    cursor: pointer;
 +
}
 +
.hideMenu li.sub:hover {
 +
    border-radius: 20px 20px 0px 0px;
 +
    background:      -o-linear-gradient(top,#00964B,#19b768);
 +
    background: -webkit-linear-gradient(top,#00964B,#19b768);
 +
    background:    -moz-linear-gradient(top,#00964B,#19b768);
 +
    background:        linear-gradient(top,#00964B,#19b768);
 +
}
 +
.hideMenu li:hover a{
 +
    color: #FFF;
 +
}
 +
.hideMenu li:hover ul {
 +
    display:block;
 +
}
 +
/*Style the submenu buttons*/
 +
.hideMenu li ul li {
 +
    text-transform:capitalize;
 +
    line-height:30px;
 +
    border-radius: 0px;
 +
    color: #383838;
 +
    background-clip: border-box;
 +
    padding:5px 0 5px 0;
 +
    width:100%;
 +
}
 +
 
 +
 
 +
@media only screen and (max-device-width: 480px) {
 +
.hideMenu {
 +
    text-align: left;
 +
    height:auto;
 +
    float:none;
 +
    margin: .3em 0 0 2em;
 +
    background-color:#383838;
 +
    position:absolute;
 +
    width:100%;
 +
}
 +
#menuContainer .hideMenu {
 +
    display:none;
 +
}
 +
 
 +
.hideMenu li {
 +
    font-size:70px;
 +
    width:auto;
 +
    line-height:120px;
 +
    float:left;
 +
    display:inline-block;
 +
    clear:both;
 +
    padding: 50px 0 50px 0;
 +
}
 +
.hideMenu li:hover {
 +
    background:transparent;
 +
}
 +
.hideMenu li.ignoreSwitch br {
 +
    display:none;
 +
}
 +
 
 +
.hideMenu li.sub {
 +
    height:auto;
 +
    line-height:60px;
 +
}
 +
.hideMenu li.sub:hover {
 +
    border-radius: 20px 20px 0px 0px;
 +
    background: transparent;
 +
}
 +
.hideMenu li ul {
 +
    margin: 0 0 0 20%;
 +
    background:transparent;
 +
    float:none;
 +
    width:100%;
 +
    display:none;
 +
}
 +
.hideMenu li:hover ul {
 +
    display:none;
 +
}
 +
.hideMenu li ul li {
 +
    line-height:120px;
 +
    color: #fff;
 +
}
 +
.hideMenu li ul li:hover {
 +
    line-height:120px;
 +
    color: #fff;
 +
    background-color: #00964B;
 +
}
 +
}
 +
 
 +
 
 +
/* FOOTER STYLE */
 +
#footerContainer img {
 +
    padding:10px;
 +
    max-width:200px;
 +
    max-height:70px;
 +
}
 +
#footerContainer h2 {
 +
    text-align:center;
 +
    border: none;
 +
    color: black;
 +
    overflow: initial;
 +
}
 +
 
 +
#lives {
 +
    position:fixed;
 +
    left:5px;
 +
    top:16px;
 +
    display:none;
 +
}
 +
#runner {
 +
    position:fixed;
 +
    left:5px;
 +
    bottom:0px;
 +
    display:none;
 +
    width:100%;
 +
    z-index:100;
 +
}
 +
#sandbox {
 +
}
 +
 
 +
img#runnerImg {
 +
    animation: run 10s linear;
 +
    animation-fill-mode: forwards;
 +
    position:relative;
 +
    float:left;
 +
    left:50px;
 +
}
 +
@keyframes run {
 +
    from {left:0;}
 +
    to {left:100%;display:none;}
 +
}
 +
 
 +
/* CHANGE MEDIAWIKI STUFF */
 +
div.thumb div div.thumbcaption {
 +
    font-size: 10pt;
 +
}
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 12:42, 28 September 2016