Difference between revisions of "Team:Tianjin/css/base"

 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
body{
 
body{
−
     background-color: #F7F5E6;
+
     /*background-color: #F7F5E6;*/
 
}
 
}
 +
a :hover,a:focus{text-decoration: none;}
 +
button{padding:0;border:0;}
 +
tbody{
 +
    background-color: white;
 +
}
 +
th{
 +
    text-align: center;
 +
}
 +
table{
 +
    text-align: center;
 +
}
 +
embed{
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    width: 100%;
 +
    height: 500px;
 +
}
 +
.pdf{
 +
    padding-top: 50px;
 +
    padding-bottom: 50px;
 +
}
 +
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
 +
        vertical-align: middle;
 +
}
 +
/*nav*/
 
.navbar-default{
 
.navbar-default{
−
     background-color: white ;
+
     background-color: #79acdd ;
 
     border:solid transparent;
 
     border:solid transparent;
 +
    border-bottom:6px solid white;
 +
    margin-top: 14px;
 +
}
 +
.navbar-nav>li>.dropdown-menu{
 +
        position: absolute;
 +
        left: 0;
 
}
 
}
 
.navbar-nav>li{
 
.navbar-nav>li{
 
     margin-right: 5px;
 
     margin-right: 5px;
 
     margin-left: 5px;
 
     margin-left: 5px;
 +
}
 +
.navbar-nav>li>a{
 +
    color: white!important;
 
}
 
}
 
.navbar-brand{
 
.navbar-brand{
Line 23: Line 57:
 
}
 
}
 
.navbar-default .navbar-nav>.open>a{
 
.navbar-default .navbar-nav>.open>a{
−
     background-color: white!important;
+
    border-radius: 100px;
−
     color: green!important;
+
     background-color: #5b759d!important;
 +
     color: #e9f1f9!important;
 
}
 
}
 
.dropdown-menu > li > a{
 
.dropdown-menu > li > a{
−
     background-color: white!important;
+
     color: white;
 
}
 
}
 
.dropdown-menu > li > a:hover{
 
.dropdown-menu > li > a:hover{
−
     background-color: white!important;
+
     background-color: transparent;
−
     color: green!important;
+
     color: black!important;
 
}
 
}
 
.open{
 
.open{
 
     opacity: 1!important;
 
     opacity: 1!important;
 
     z-index: 1998;
 
     z-index: 1998;
−
     background-color: white;
+
     background-color: #79acdd;
 +
}
 +
.navbar-nav>li>.dropdown-menu {
 +
    margin-top: 0px;
 +
    border-top-left-radius: 25px;
 +
    border-top-right-radius: 25px;
 +
}
 +
.dropdown-menu{
 +
    overflow: hidden;
 +
    background-color: rgb(91,117,157);
 +
    border-radius: 25px;
 +
    border:1px solid transparent;
 +
    text-align: center;
 +
    background: -webkit-linear-gradient(rgba(91,117,157,1), rgba(91.117,157,0));
 +
    background: -o-linear-gradient(rgba(91,117,157,1), rgba(91.117,157,0));
 +
    background: -moz-linear-gradient(rgba(91,117,157,1), rgba(91.117,157,0));
 +
    background: linear-gradient(rgba(91,117,157,1), rgba(91,117,157,0.4));
 +
}
 +
.circle{
 +
    position: absolute;border-radius: 50%;
 +
    width:120px;height:120px;
 +
    background-size: 110%;background-repeat: no-repeat;
 +
    border:6px solid white;
 
}
 
}
  
−
 
+
.row{
−
 
+
    margin-left: 30px;
 +
    margin-right: 30px;
 +
}
 +
.panel-body .row {
 +
    margin-left: 15px;
 +
    margin-right: 15px;
 +
}
 +
/*foot*/
 
#footer h4{
 
#footer h4{
 
     color: white;
 
     color: white;
Line 48: Line 112:
 
}
 
}
 
#footer p{
 
#footer p{
−
     color: grey;
+
     color: white;
 
     padding-top: 10px;
 
     padding-top: 10px;
 
     padding-bottom: 10px;
 
     padding-bottom: 10px;
 
}
 
}
 
.footer-part{
 
.footer-part{
−
     padding-bottom: 15px;
+
     padding-top: 30px;
−
     padding-top: 15px;
+
     margin-top: 20px;
 +
    padding-bottom: 30px;
 
}
 
}
 
#footer a{
 
#footer a{
−
     color: grey;
+
     color: white;
 
     padding-bottom: 10px!important;
 
     padding-bottom: 10px!important;
 
     padding-top: 10px!important;
 
     padding-top: 10px!important;
Line 71: Line 136:
 
#footer{
 
#footer{
 
     margin-top:200px;
 
     margin-top:200px;
 +
    font-size:100%;
 +
}
 +
/*used in home page*/
 +
.bulbBox{
 +
    position: absolute;top: 96%;right: 2%;margin-top: -50px;
 +
}
 +
.bulb{
 +
    width: 50px;
 +
    height: 50px;
 +
    background-repeat: no-repeat!important;
 +
    background-size: 100%!important;
 +
    background-image: url(https://static.igem.org/mediawiki/2018/b/b2/T--Tianjin--bulbDay.png);
 +
}
 +
.fo{
 +
    /*I was told to add this just before wiki freeze.*/
 +
    margin-bottom: 20px;
 +
    z-index: 20;
 +
    position: relative;
 +
    width: 40%;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
}
 +
.buttonDay{
 +
    background-image: url(https://static.igem.org/mediawiki/2018/b/b2/T--Tianjin--bulbDay.png)!important;
 +
}
 +
.buttonDay:hover{
 +
    background-image: url(https://static.igem.org/mediawiki/2018/a/a1/T--Tianjin--bulbNight.png)!important;
 +
}
 +
.buttonNight{
 +
    background-image: url(https://static.igem.org/mediawiki/2018/a/a1/T--Tianjin--bulbNight.png)!important;
 +
}
 +
.buttonNight:hover{
 +
    background-image: url(https://static.igem.org/mediawiki/2018/b/b2/T--Tianjin--bulbDay.png)!important;
 +
}
 +
@media(max-width: 767px){
 +
    .navbar-default .navbar-collapse, .navbar-default .navbar-form{
 +
        margin-top:30px;
 +
    }
 +
    .navbar-collapse{
 +
        overflow: visible;
 +
    }
 +
    .navbar-default .navbar-nav>.open>a{
 +
        border-radius: 0px;
 +
        background-color: transparent!important;
 +
    }
 +
    .navbar-nav>li>.dropdown-menu{
 +
        border-top-left-radius: 25px;
 +
        border-top-right-radius: 25px;
 +
    }
 +
    .toolate{
 +
        width: 100%;
 +
        position: relative;
 +
        z-index: 400;
 +
        background: #d3e0ee;
 +
    }
 +
    .fo{
 +
        width: 80%;
 +
        margin-left: 4%;
 +
    }
 +
    .dropdown-menu{
 +
        border-radius:0;
 +
        background-color: transparent;
 +
        background:transparent;
 +
        text-align: left;
 +
    }
 +
    .navbar-default .navbar-nav .open .dropdown-menu>li>a{
 +
        background-color: transparent!important;
 +
        color: white!important;
 +
    }
 +
 +
    .title-big{
 +
        word-wrap: break-word;
 +
        font-size: 25px;
 +
    }
 +
    .title-normal{
 +
        font-size: 18px;
 +
    }
 +
    .title-small{
 +
        font-size: 15px;
 +
    }
 +
    .partition{
 +
        padding-top: 20px;
 +
    }
 +
    .picture {
 +
        margin-top: 12px;
 +
        text-align: center;
 +
        line-height: 30px;
 +
    }
 +
    .text{
 +
        margin-top: 12px;
 +
        margin-bottom: 24px;
 +
        font-weight: 400 !important;
 +
        font-size: 14px !important;
 +
        line-height: 1.0;
 +
    }
 +
    .reftext{
 +
        font-size: 13px;
 +
        line-height: 1.0;
 +
        margin-top: 10px;
 +
        padding-top: 10px;
 +
    }
 
}
 
}

Latest revision as of 19:43, 17 October 2018

body{ 

   /*background-color: #F7F5E6;*/

} a :hover,a:focus{text-decoration: none;} button{padding:0;border:0;} tbody{ 

   background-color: white;

} th{ 

   text-align: center;

} table{ 

   text-align: center;

} embed{ 

   margin-left: auto;
   margin-right: auto;
   width: 100%;
   height: 500px;

} .pdf{ 

   padding-top: 50px;
   padding-bottom: 50px;

} .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{ 

       vertical-align: middle;

} /*nav*/ .navbar-default{ 

   background-color: #79acdd ;
   border:solid transparent;
   border-bottom:6px solid white;
   margin-top: 14px;

} .navbar-nav>li>.dropdown-menu{ 

       position: absolute;
       left: 0;

} .navbar-nav>li{ 

   margin-right: 5px;
   margin-left: 5px;

} .navbar-nav>li>a{ 

   color: white!important;

} .navbar-brand{ 

   height:auto!important;
   padding:0px !important;
   line-height: 25px!important;*/

} .navbar-toggle{ 

   margin-top: 25px!important;
   border-color: rgba(1,1,1,0)!important;

} .navbar-toggle:hover , .navbar-toggle:focus{ 

   background-color: rgba(1,1,1,0)!important;

} .navbar-default .navbar-nav>.open>a{ 

   border-radius: 100px;
   background-color: #5b759d!important;
   color: #e9f1f9!important;

} .dropdown-menu > li > a{ 

   color: white;

} .dropdown-menu > li > a:hover{ 

   background-color: transparent;
   color: black!important;

} .open{ 

   opacity: 1!important;
   z-index: 1998;
   background-color: #79acdd;

} .navbar-nav>li>.dropdown-menu { 

   margin-top: 0px;
   border-top-left-radius: 25px; 
   border-top-right-radius: 25px;

} .dropdown-menu{ 

   overflow: hidden;
   background-color: rgb(91,117,157);
   border-radius: 25px;
   border:1px solid transparent;
   text-align: center;
   background: -webkit-linear-gradient(rgba(91,117,157,1), rgba(91.117,157,0));
   background: -o-linear-gradient(rgba(91,117,157,1), rgba(91.117,157,0));
   background: -moz-linear-gradient(rgba(91,117,157,1), rgba(91.117,157,0));
   background: linear-gradient(rgba(91,117,157,1), rgba(91,117,157,0.4));

} .circle{ 

   position: absolute;border-radius: 50%;
   width:120px;height:120px;
   background-size: 110%;background-repeat: no-repeat;
   border:6px solid white;

}

.row{ 

   margin-left: 30px;
   margin-right: 30px;

} .panel-body .row { 

   margin-left: 15px;
   margin-right: 15px;

} /*foot*/

  1. footer h4{
   color: white;
   font-size: 25px !important;
   padding-top: 10px;
   padding-bottom: 10px;

}

  1. footer p{
   color: white;
   padding-top: 10px;
   padding-bottom: 10px;

} .footer-part{ 

   padding-top: 30px;
   margin-top: 20px;
   padding-bottom: 30px;

}

  1. footer a{
   color: white;
   padding-bottom: 10px!important;
   padding-top: 10px!important;

}

  1. footer a:hover,#footer a:focus{
   color: white;
   -moz-transition: all .3s;
   -ms-transition: all .3s;
   -o-transition: all .3s;
   -webkit-transition: all .3s;
   transition: all .3s;

}

  1. footer{
   margin-top:200px;
   font-size:100%;

} /*used in home page*/ .bulbBox{ 

   position: absolute;top: 96%;right: 2%;margin-top: -50px;

} .bulb{ 

   width: 50px;
   height: 50px;
   background-repeat: no-repeat!important;
   background-size: 100%!important;
   background-image: url(T--Tianjin--bulbDay.png);

} .fo{ 

   /*I was told to add this just before wiki freeze.*/
   margin-bottom: 20px;
   z-index: 20;
   position: relative;
   width: 40%;
   margin-left: auto;
   margin-right: auto;

} .buttonDay{ 

   background-image: url(https://static.igem.org/mediawiki/2018/b/b2/T--Tianjin--bulbDay.png)!important;

} .buttonDay:hover{ 

   background-image: url(https://static.igem.org/mediawiki/2018/a/a1/T--Tianjin--bulbNight.png)!important;

} .buttonNight{ 

   background-image: url(https://static.igem.org/mediawiki/2018/a/a1/T--Tianjin--bulbNight.png)!important;

} .buttonNight:hover{ 

   background-image: url(https://static.igem.org/mediawiki/2018/b/b2/T--Tianjin--bulbDay.png)!important;

} @media(max-width: 767px){ 

   .navbar-default .navbar-collapse, .navbar-default .navbar-form{
       margin-top:30px;
   }
   .navbar-collapse{
       overflow: visible;
   }
   .navbar-default .navbar-nav>.open>a{
       border-radius: 0px;
       background-color: transparent!important;
   }
   .navbar-nav>li>.dropdown-menu{
        border-top-left-radius: 25px; 
        border-top-right-radius: 25px; 
   }
   .toolate{
        width: 100%;
        position: relative;
        z-index: 400;
        background: #d3e0ee;
   }
   .fo{
        width: 80%;
        margin-left: 4%;
   }
   .dropdown-menu{
       border-radius:0;
       background-color: transparent;
       background:transparent;
       text-align: left;
   }
   .navbar-default .navbar-nav .open .dropdown-menu>li>a{
       background-color: transparent!important;
       color: white!important;
   }

   .title-big{
       word-wrap: break-word;
       font-size: 25px;
   }
   .title-normal{
       font-size: 18px;
   }
   .title-small{
       font-size: 15px;
   }
   .partition{
       padding-top: 20px;
   }
   .picture {
       margin-top: 12px;
       text-align: center;
       line-height: 30px;
   }
   .text{
       margin-top: 12px;
       margin-bottom: 24px;
       font-weight: 400 !important;
       font-size: 14px !important;
       line-height: 1.0;
   }
   .reftext{
       font-size: 13px;
       line-height: 1.0;
       margin-top: 10px;
       padding-top: 10px;
   }

}