Difference between revisions of "Team:BIT-China/src/css/style"

Revision as of 12:58, 28 September 2017 (view source) Coriq (Talk | contribs) ← Older edit		Revision as of 12:59, 28 September 2017 (view source) Coriq (Talk | contribs) Newer edit →
Line 41:		Line 41:
	width: 100%;		width: 100%;
	background-color: rgba(8,41,59,1);		background-color: rgba(8,41,59,1);
−	background-image: url("https://2017.igem.org/File:Bit-china-2017logo.svg");	+	background-image: url("https://static.igem.org/mediawiki/2017/3/38/Bit-china-2017logo.svg");
	background-size: auto 100%;		background-size: auto 100%;
	left: 0;		left: 0;

---

Revision as of 12:59, 28 September 2017

@import url(https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css);

html,body { margin: 0; padding: 0;

 height: 100%;
 width: 100%;

} body {

 height: 100%;
 width: 100%;

} /*.screen-hidden {

 overflow: hidden;

}*/

• {

-webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;
         box-sizing: border-box;

} @media (min-width: 768px) .navbar-static-top {

   border-radius: 0;

} .navbar-static-top {

   z-index: 1000;
   border-width: 0 0 1px;

} @media (min-width: 768px) .navbar {

   border-radius: 4px;

} .navbar-brand img {

 /*width: 100%;*/
 font-size: 0;
 padding: 0;
 margin: 0;
  height: 100%;

} .navbar { width: 100%; background-color: rgba(8,41,59,1);

 background-image: url("https://static.igem.org/mediawiki/2017/3/38/Bit-china-2017logo.svg");
 background-size: auto 100%;
 left: 0;
   /*border-color: #e7e7e7;*/
   position: relative;
   min-height: 70px;
   /*margin-bottom: 20px;*/
   /*border: 1px solid transparent;*/

} .navbar-header {

 width: 200px;
 height: 50px;

display: block;

   float: left;

} .navbar-nav {

 /*margin-left: 100px;*/

float: left; list-style: none; }

1. navbar a {

   text-decoration: none;
   font-size: 13px;
   font-weight: bold;

}

1. navbar * {

   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

}

1. navbar ul,
2. navbar li {

   margin: 0;

}

1. navbar ul {

padding: 0; }

1. navbar * {

   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

} .navbar .myactive { background-color: rgba(255,255,255,0.1); } @media (min-width: 768px) .navbar-nav>li {

   float: left;

} .nav { margin: 0; } .nav>li { padding: 0 20px;

   position: relative;
   display: block;
   float: left;

} .nav>li a {

 position: relative;
 display: block;
 padding-top: 25px;
 padding-bottom: 25px;
 line-height: 20px;
 color: #ccc;
  -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

} .nav>li a:hover {

 color: rgba(255,255,255,0.5);

} /*------------------------dropup dropdown------------------------*/ .dropup, .dropdown {

 position: relative;

} .dropdown-toggle:focus {

 outline: 0;

} .dropdown-menu {

 position: absolute;
 top: 100%;
 left: 0;
 z-index: 1000;
 display: none;
 float: left;
 min-width: 160px;
 padding: 5px 0;
 margin: 2px 0 0;
 list-style: none;
 font-size: 14px;
 text-align: left;
 background-color: #fff;
 border: 1px solid #ccc;
 border: 1px solid rgba(0, 0, 0, 0.15);
 border-radius: 4px;
 -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 background-clip: padding-box;

} .dropdown-menu.pull-right {

 right: 0;
 left: auto;

} .dropdown-menu .divider {

 height: 1px;
 margin: 9px 0;
 overflow: hidden;
 background-color: #e5e5e5;

} .dropdown-menu > li > a {

 display: block;
 padding: 3px 20px;
 clear: both;
 font-weight: normal;
 line-height: 1.42857143;
 color: #333333;
 white-space: nowrap;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

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

 text-decoration: none;
 color: #262626;
 background-color: #f5f5f5;
 font-size: 2em;

} .dropdown-menu > .myactive > a, .dropdown-menu > .myactive > a:hover, .dropdown-menu > .myactive > a:focus {

 color: #fff;
 text-decoration: none;
 outline: 0;
 background-color: #337ab7;

} .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {

 color: #777777;

} .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {

 text-decoration: none;
 background-color: transparent;
 background-image: none;
 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 cursor: not-allowed;

} .open > .dropdown-menu {

 display: block;

} .open > a {

 outline: 0;

} .dropdown-menu-right {

 left: auto;
 right: 0;

} .dropdown-menu-left {

 left: 0;
 right: auto;

} .dropdown-header {

 display: block;
 padding: 3px 20px;
 font-size: 12px;
 line-height: 1.42857143;
 color: #777777;
 white-space: nowrap;

} .dropdown-backdrop {

 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 top: 0;
 z-index: 990;

} /*------------------------dropup dropdown------------------------*/ .movepic-container {

 /*position: relative;*/
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 display: flex;
 text-align: center;
 overflow: hidden;

} ul,ol,li {

 /*font-size: 0;*//*控制ol,li之间没有空隙*/
 list-style: none;
 /*padding: 0;*/

}

@media screen and (min-width: 678px) {

 img {
 width: 100%;
 }

} @media screen and (min-width: 1024px) {

 img {
 width: 100%;
 }

} .page-border {

 position: absolute;
 width: 100%;
 height: 100%;
 margin: auto;
 /*overflow: hidden;*/

}

1. fullpage {

 position: relative;
 height: 100%;
 /*position: fixed;*/
 width: 100%;
 top: -50px;
 /*top: -667px;控制出现那一页图片*/
 text-align: center;
 font-size: 0;

 /*translate3d(0px, px , 0px);*/
 -webkit-transition: all 0.7s;
 -moz-transition: all 0.7s;
 -o-transition: all 0.7s;
 transition: all 0.7s;

} img {

 margin: auto;

} .fp-section {

 /*position: absolute;*/
 /*visible的时候要加上*/
 display: flex;
 height: 100%;
 width: 100%;
 
 /*-webkit-transition: all 1.5s;
 -moz-transition: all 1.5s;
 -o-transition: all 1.5s;
 transition: all 1.5s;*/
 
 animation-duration: 0.5s;
 animation-timing-function: ease-out;
 animation-name: slidein;

} @keyframes slidein {

 from {
   transform: translateY(500px);
 }
 to {
   transform: translateY(0);
 }

}

.circle {

 display: none;
 z-index: 100;
 position: fixed;
 width: 100%;
 bottom: 60px;

 display: flex;
 

} .circle ol {

   display: none;
 margin: auto;

} .circle li {

 float: left;
 margin: 2em;

} .circle li span {

 display: block;
 height: 20px;
 width: 20px;
 border: 6px solid #333;
 border-radius: 50%;
 margin: auto;
 background-color: #fff;

} .circle li span:hover {

 opacity: 0.8;
 box-shadow: 2px 2px 2px #fff;

} .fa-circle {

 color: #444;
 text-shadow: 2px 2px 2px #fff;

}

1. Maxamed {

 width: 100%;
 display: flex;
 position: fixed;
 bottom: 3em;

} .nav__mine {

 position: relative;
 margin: auto;

}

.nav__item {

 line-height: 1;
 position: relative;
 /*display: block;*/
 margin: 10px;
 padding: 0;
 letter-spacing: 0;
 color: currentColor;
 border: 0;
 background: none;
 -webkit-tap-highlight-color: rgba(0,0,0,0);

}

.nav__item:focus {

 outline: none;

} .nav--maxamed .nav__item {

 width: 36px;
 height: 36px;

}

.nav--maxamed .nav__item::before {

 content: ;
 position: absolute;
 top: 0.75em;
 right: 0;
 width: 16px;
 height: 16px;
 box-shadow: inset 0 0 0 6px #3F598E;
 border: 2px solid #fff;
 border-radius: 50%;
 -webkit-transition: -webkit-transform 0.3s, box-shadow 0.3s;
 transition: transform 0.3s, box-shadow 0.3s;

}

.nav--maxamed .nav__item:not(.nav__item--current):focus::before, .nav--maxamed .nav__item:not(.nav__item--current):hover::before {

 box-shadow: inset 0 0 0 6px #1D3045;

}

.nav--maxamed .nav__item--current::before {

 -webkit-transform: scale3d(1.75,1.75,1);
 transform: scale3d(1.75,1.75,1);
 box-shadow: inset 0 0 0 1px #3F598E;

}

.nav--maxamed .nav__item-title {

 position: absolute;
 left: 3.5em;
 top: 0;
 pointer-events: none;
 padding: 0.75em 0;
 font-weight: bold;
 white-space: nowrap;
 -webkit-transform-origin: 0 50%;
 transform-origin: 0 50%;
 opacity: 0;
 -webkit-transform: scale3d(0.5,0.5,1);
 transform: scale3d(0.5,0.5,1);
 -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
 transition: opacity 0.5s, transform 0.5s;
 -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
 transition-timing-function: cubic-bezier(0.2,1,0.3,1);

}

.nav--maxamed .nav__item--current .nav__item-title {

 opacity: 1;
 -webkit-transform: scale3d(1,1,1);
 transform: scale3d(1,1,1);

}

/*====================下拉栏=============================*/ .caret {

   display: inline-block;
   width: 0;
   height: 0;
   margin-left: 2px;
   vertical-align: middle;
   border-top: 4px dashed;
   border-top: 4px solid \9;
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;

} .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {

   /*color: transparent;*/
   color: white;
   /*background-color: #e7e7e7;*/
   background-color:  transparent;

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

   color: #fff;

}

.nav>li a {

 position: relative;
 display: block;
 padding-top: 25px;
 padding-bottom: 25px;
 line-height: 20px;
 color: white;
 /*background-color: #08293b;*/
  -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

}

.nav li>.dropdown-a {

 position: relative;
 display: block;
 height: 50px;
 /*padding-top: 25px;*/
 /*padding-bottom: 15px;*/
 /*line-height: 50px;*/
 color: white;
 background-color: #08293b;
 vertical-align:middle;
 text-align: center;
  -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

} .nav li>.dropdown-a>span {

 position: relative;
 top: -12px;

} .nav>li a:hover {

 /*background-color: transparent;*/
 color: #aaa;

}

1. navbar .dropdown-a:hover {

 background-color: #08293b;
 opacity: 0.8;

}

1. navbar>ul>li>a:hover {

  color: #aaa;

}

1. navbar>.nav>.myactive:hover {

 color: #fff;

} .main-nav-link {

 border: 0;
 margin: 0;
 height: 50px;

} .dropdown-menu li:ast-child .dropdown-a{

 border-radius: 5px;

} .dropdown-menu li:last-child {

 border-radius: 5px;

} .dropdown-menu {

 border: 0;
 border-radius: 5px;

}