Difference between revisions of "Template:USTC-Software/css/mainpage"

m
Line 259: Line 259:
 
}
 
}
  
 +
 +
#navbar-head.navbar-head-pinned a {
 +
    transition: all .3s ease-in-out;
 +
}
 +
 +
#navbar-head.navbar-head-pinned a.active {
 +
    box-shadow: 0 -.25em 0 #41525e inset;
 +
}
 +
 +
/*
 
#navbar-head.navbar-head-pinned a::after {
 
#navbar-head.navbar-head-pinned a::after {
 
     position: absolute;
 
     position: absolute;
Line 275: Line 285:
 
}
 
}
  
−
 
−
/*
 
 
#navbar-head a::before {
 
#navbar-head a::before {
 
     content: '';
 
     content: '';

Revision as of 13:29, 3 October 2016

html, body { 

   position: relative;
   width: 100%;
   height: 100%;

}

body.disable-scroll { 

   overflow: hidden;

}

h2 { 

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

}

div.inner-text-container { 

   position: relative;

}

div.inner-text-container>img { 

   width: 100%;

}


/* div.inner-text-container:hover>img { 

   -webkit-filter: brightness(.5);
   filter: brightness(.5);
   transition: all .3s ease-in-out;

}

div.inner-text-container:hover>h3 { 

   top: 43%;
   opacity: 1;

}

  • /

h3.inner-text { 

   position: absolute;
   top: 120%;
   left: 35%;
   opacity: 0;
   /*
   transition: all .38s cubic-bezier(.75, 0, .1, 1);
   color: white;*/

}

nav.top-bar ul { 

   background-color: transparent;

}

nav.orbit-bullets { 

   transform: translateY(-180%);

}


/*the style below is used to fix the igem bar*/

div#content{ 

   width:100%;
   margin:-20px 0 0 0;
   padding:0;

}

div#top_title{ 

   display:none;

}

  1. top_menu_inside #bars_item{
   left: auto;
   right: calc(1% + 170px);

}

div#sideMenu{ 

   display:none;
   left: auto;
   right: 1%;
   box-sizing:content-box;
   line-height:1.5em;

}

div#top_menu_14{ 

   box-sizing:content-box;
   line-height:1em;

}

div#top_menu_14 ul{ 

   line-height:1.45em;

}

div#top_menu_14 #user_item{ 

   padding-top:3px;

}

div#top_menu_14 #bars_item>img{ 

   padding-top:.5px;

}

div#sideMenu div.mainMenu_toggle{ 

   padding-top:12px;
   padding-bottom:11px;

}

.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{ 

   margin:0;

}

/*end of style to fix igem bar*/


div.large-6 { 

   font-size: .9em;

}

div.large-6>img { 

   padding-top: 5px;

}

div.sticky { 

   z-index: 15;

}

div.sticky.is-stuck { 

   z-index: 15;

}

ul.dropdown.menu { 

   font-size: .9em;
   font-weight: bold;

}

ul.dropdown.menu a:link { 

   color: #eee;

}

ul.dropdown.menu a:visited { 

   color: #eee;

}

ul.dropdown.menu>li.is-dropdown-submenu-parent>a::after { 

   content: none;

}

ul.is-dropdown-submenu.menu { 

   border: none;
   background-color: #2c3840;

}

ul.is-dropdown-submenu.menu>li { 

   padding: 2px 0;
   background-color: #2c3840;

}

figure#overlay { 

   position: fixed;
   z-index: 10;
   display: block;
   visibility: hidden;
   width: 100%;
   height: 100%;
   margin: 0;
   opacity: 0;
   background: rgba(29, 29, 31, .6);

}

.img-fixed-position { 

   height: 169px;
   margin-top: 10px;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 100%;

}

  1. main-img-container {
   position: relative;
   z-index: 9;

}

  1. main-img {
   width: 100%;
   height: 100%;
   opacity: .8;

}

.top-bar { 

   padding: 0;

}

.menu>li { 

   padding: 10px 5px;

}

  1. HQ_page{
   width: 100%;

}

  1. navbar-global {
   position: absolute;
   z-index: 20;
   top: 0;
   width: 100%;
   background-color: #2c3840;

}

  1. navbar-global ul>li:hover {
   background-color: #41525e;

}

nav#navbar-head { 

   position: absolute;
   bottom: 0;
   width: 100%;
   transition: all .25s cubic-bezier(.75, 0, .1, 1);
   background-color: transparent;

}

  1. navbar-head h3 {
   font-size: 1rem;
   margin-bottom: 0;
   padding: .7rem 1rem;

}

  1. navbar-head #nav-top {
   visibility: hidden;

}

  1. navbar-head>div.top-bar-right {
   padding-right: 30px;

}

  1. navbar-head>.top-bar-right li {
   transition: color .1s ease-in-out;
   color: #2199e8;

}

  1. navbar-head>.top-bar-right li:hover {
   color: #ddd;

}

  1. navbar-head>.top-bar-title li>h3 {
   font-weight: bold;
   color: #aaa;

}

  1. navbar-head h3:hover {
   cursor: pointer;

}

  1. navbar-head li {
   padding: 0;
   background-color: transparent;

}

  1. navbar-head a {
   position: relative;
   padding: calc(.7rem + 15px) calc(1rem + 20px);
   padding-top: calc(.7rem + 30px)

}


  1. navbar-head.navbar-head-pinned a {
   transition: all .3s ease-in-out;

}

  1. navbar-head.navbar-head-pinned a.active {
   box-shadow: 0 -.25em 0 #41525e inset;

}

/*

  1. navbar-head.navbar-head-pinned a::after {
   position: absolute;
   right: 100%;
   bottom: 0;
   width: 0;
   height: .25em;
   content: ;
   transition: all .15s ease-in-out;
   background-color: #41525e;

}

  1. navbar-head.navbar-head-pinned a.active::after {
   right: 0;
   width: 100%;

}

  1. navbar-head a::before {
   content: ;
   position: absolute;
   bottom: 0;
   right: 50%;
   height: .25em;
   background-color: #41525e;
   width: 0;
   transition: all .15s ease-in-out;

}

  1. navbar-head a::after {
   content: ;
   position: absolute;
   bottom: 0;
   left: 50%;
   height: .25em;
   background-color: #41525e;
   width: 0;
   transition: all .15s ease-in-out;

}

  1. navbar-head a.active::before {
   width: 50%;
   /*box-shadow: 0 -.2em 0 #41525e inset;

}

  1. navbar-head a.active::after {
   width: 50%;
   /*box-shadow: 0 -.2em 0 #41525e inset;

}*/

  1. navbar-head ul {
   background-color: transparent;

}

nav#navbar-head.navbar-head-pinned { 

   background-color: white;
   box-shadow: 0 0 8px rgba(0, 0, 0, .4);

}

nav#navbar-head.navbar-head-pinned li#nav-top { 

   visibility: visible;

}

  1. navbar-head.navbar-head-pinned>div.top-bar-right>ul.menu>li>h3 {
   color: #333;

}

  1. navbar-head.navbar-head-pinned>div.top-bar-right>ul.menu>li>h3:hover {
   color: #aaa;

}

  1. nav-sidebar-content {
   position: fixed;
   z-index: 15;
   top: 0;
   right: -300px;
   width: 300px;
   height: 100%;
   background-color: rgba(1, 1, 1, .8);

}

  1. nav-sidebar-content>ul {
   font-size: 1.4em;
   height: 85%;
   margin-top: 50px;
   list-style: none;
   opacity: 1;

}

  1. nav-sidebar-content>ul>li {
   height: 13%;
   margin-top: 0;

}

  1. nav-sidebar-content>ul>li>a {
   text-decoration: none;
   color: #fff;

}

  1. nav-sidebar-content>ul>li>a:hover {
   transition: color .3s ease;
   color: #9b9baf;

}

  1. nav-sidebar {
   position: fixed;
   z-index: 16;
   top: 17px;
   right: 5%;
   width: 30px;
   height: 25px;
   cursor: pointer;
   -webkit-transition: .5s ease-in-out;
   -moz-transition: .5s ease-in-out;
   -o-transition: .5s ease-in-out;
   transition: .5s ease-in-out;
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   -o-transform: rotate(0deg);
   transform: rotate(0deg);

}

  1. nav-sidebar span {
   position: absolute;
   left: 0;
   display: block;
   width: 100%;
   height: 3px;
   -webkit-transition: .25s ease-in-out;
   -moz-transition: .25s ease-in-out;
   -o-transition: .25s ease-in-out;
   transition: .25s ease-in-out;
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
   opacity: 1;
   border-radius: 3px;
   background: #fff;

}

  1. nav-sidebar.nav-sidebar-toggle span {
   background-color: #666;

}

  1. nav-sidebar span:nth-child(1) {
   top: 0;

}

  1. nav-sidebar span:nth-child(2),
  2. nav-sidebar span:nth-child(3) {
   top: 9px;

}

  1. nav-sidebar span:nth-child(4) {
   top: 18px;

}

  1. nav-sidebar.open span:nth-child(1) {
   top: 9px;
   left: 50%;
   width: 0;

}

  1. nav-sidebar.open span:nth-child(2) {
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);

}

  1. nav-sidebar.open span:nth-child(3) {
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);

}

  1. nav-sidebar.open span:nth-child(4) {
   top: 9px;
   left: 50%;
   width: 0;

}

@media(min-width: 768px) { 

   .content-container {
       padding-top: 25px;
       padding-bottom: 25px;
   }
   #main-img-container {
       width: 100%;
       height: 100vh;
   }
   .img-fixed-position {
       min-height: 500px;
       background-repeat: no-repeat;
       background-attachment: fixed;
       background-size: cover;
   }

}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 

   .scrollmagic-pin-spacer {
       bottom: 68px !important;
   }

}