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

Line 4: Line 4:
 
     width: 100%;
 
     width: 100%;
 
     height: 100%;
 
     height: 100%;
−
}
+
     font-family: Roboto, Arial, Helvetica, sans-serif;
−
 
+
−
body.disable-scroll {
+
−
     overflow: hidden;
+
 
}
 
}
  
Line 13: Line 10:
 
     padding-top: 50px;
 
     padding-top: 50px;
 
     padding-bottom: 50px;
 
     padding-bottom: 50px;
 +
}
 +
 +
.orbit+div h2 {
 +
    padding-top: 20px;
 
}
 
}
  
Line 49: Line 50:
 
nav.top-bar ul {
 
nav.top-bar ul {
 
     background-color: transparent;
 
     background-color: transparent;
−
}
 
−
 
−
nav.orbit-bullets {
 
−
    transform: translateY(-180%);
 
 
}
 
}
  
Line 138: Line 135:
 
div.sticky.is-stuck {
 
div.sticky.is-stuck {
 
     z-index: 15;
 
     z-index: 15;
−
}
 
−
 
−
div#link1 {
 
−
    margin-top: -60px;
 
 
}
 
}
  
 
ul.dropdown.menu {
 
ul.dropdown.menu {
−
    font-size: .9em;
 
 
     font-weight: bold;
 
     font-weight: bold;
 +
    letter-spacing: .2px;
 
}
 
}
  
 
ul.dropdown.menu a:link {
 
ul.dropdown.menu a:link {
−
     color: #eee;
+
     color: white;
 
}
 
}
  
 
ul.dropdown.menu a:visited {
 
ul.dropdown.menu a:visited {
−
     color: #eee;
+
    color: white;
 +
}
 +
 
 +
ul.is-dropdown-submenu.menu>li>a:link {
 +
     color: #333;
 +
}
 +
 
 +
ul.is-dropdown-submenu.menu>li>a:visited {
 +
    color: #333;
 
}
 
}
  
Line 163: Line 164:
 
ul.is-dropdown-submenu.menu {
 
ul.is-dropdown-submenu.menu {
 
     border: none;
 
     border: none;
−
     background-color: #2c3840;
+
     background-color: white;
 +
    min-width: 180px;
 +
    margin-top: 10px;
 +
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12), 0 3px 3px rgba(0, 0, 0, 0.24);
 
}
 
}
  
 
ul.is-dropdown-submenu.menu>li {
 
ul.is-dropdown-submenu.menu>li {
 
     padding: 2px 0;
 
     padding: 2px 0;
−
     background-color: #2c3840;
+
     margin-bottom: 5px;
 +
    margin-top: 5px;
 
}
 
}
  
−
figure#overlay {
+
ul.is-dropdown-submenu.menu>li:hover {
−
     position: fixed;
+
     background-color: #757575;
−
    z-index: 10;
+
}
−
     display: block;
+
 
−
    visibility: hidden;
+
ul.is-dropdown-submenu.menu>li>a:hover {
−
    width: 100%;
+
     color: white;
−
    height: 100%;
+
}
−
     margin: 0;
+
 
−
     opacity: 0;
+
ul.menu li.menu-text a {
−
    background: rgba(29, 29, 31, .6);
+
     color: white;
 +
     text-transform: uppercase;
 
}
 
}
  
Line 207: Line 213:
  
 
.menu>li {
 
.menu>li {
−
     padding: 10px 5px;
+
     padding: 16px 5px;
 
}
 
}
  
Line 213: Line 219:
 
     position: absolute;
 
     position: absolute;
 
     z-index: 20;
 
     z-index: 20;
−
     top: 0;
+
     top: 5px;
 
     width: 100%;
 
     width: 100%;
−
     background-color: #2c3840;
+
     background-color: #009688;
 +
    box-shadow: 0 1px 4px #333;
 
}
 
}
  
−
#navbar-global ul>li:hover {
+
#navbar-global>div>ul>li>a {
−
     background-color: #41525e;
+
    transition: color .25s cubic-bezier(.75, 0, .1, 1);
 +
}
 +
 
 +
#navbar-global>div>ul>li:hover {
 +
     background-color: #00695c;
 +
}
 +
 
 +
#navbar-global>div>ul>li:hover>a {
 +
    opacity: .7;
 +
}
 +
 
 +
#navbar-global-mobile li {
 +
    margin: 0;
 +
    padding: 0;
 +
}
 +
 
 +
#navbar-global-mobile ul {
 +
    background-color: black;
 +
}
 +
 
 +
#navbar-global-mobile li {
 +
    background-color: black;
 +
    color: white;
 +
}
 +
 
 +
#navbar-global-mobile li>a:link {
 +
    color: white;
 +
}
 +
 
 +
#navbar-global-mobile li>a:visited {
 +
    color: white;
 
}
 
}
  
Line 268: Line 305:
 
     position: relative;
 
     position: relative;
 
     padding: calc(.7rem + 15px) calc(1rem + 20px);
 
     padding: calc(.7rem + 15px) calc(1rem + 20px);
−
     padding-top: calc(.7rem + 30px);
+
     padding-top: calc(.7rem + 30px)；
 +
}
 +
 
 +
#navbar-head a:hover {
 +
    color: white;
 
}
 
}
  
 
#navbar-head.is-stuck a {
 
#navbar-head.is-stuck a {
 +
    color: #004d40;
 
     transition: all .3s ease-in-out;
 
     transition: all .3s ease-in-out;
 
}
 
}
  
 
#navbar-head.is-stuck a:hover {
 
#navbar-head.is-stuck a:hover {
−
     background: rgba(40, 40, 40, .5);
+
     background: #757575;
−
     transition: all .1s;
+
     color: white;
 
}
 
}
  
Line 284: Line 326:
 
     color: white;
 
     color: white;
 
}
 
}
−
 
−
 
−
/*
 
−
#navbar-head.is-stuck a.active {
 
−
    box-shadow: 0 -.25em 0 #41525e inset;
 
−
}
 
−
*/
 
  
 
div#sticky-wrapper {
 
div#sticky-wrapper {
Line 297: Line 332:
 
     z-index: 20;
 
     z-index: 20;
 
}
 
}
−
 
−
 
−
/*
 
−
#navbar-head a::before {
 
−
    content: '';
 
−
    position: absolute;
 
−
    bottom: 0;
 
−
    right: 50%;
 
−
    height: .25em;
 
−
    background-color: #41525e;
 
−
    width: 0;
 
−
    transition: all .15s ease-in-out;
 
−
}
 
−
 
−
#navbar-head a::after {
 
−
    content: '';
 
−
    position: absolute;
 
−
    bottom: 0;
 
−
    left: 50%;
 
−
    height: .25em;
 
−
    background-color: #41525e;
 
−
    width: 0;
 
−
    transition: all .15s ease-in-out;
 
−
}
 
−
 
−
#navbar-head a.active::before {
 
−
    width: 50%;
 
−
    /*box-shadow: 0 -.2em 0 #41525e inset;
 
−
}
 
−
 
−
#navbar-head a.active::after {
 
−
    width: 50%;
 
−
    /*box-shadow: 0 -.2em 0 #41525e inset;
 
−
}*/
 
  
 
#navbar-head ul {
 
#navbar-head ul {
Line 351: Line 352:
 
#navbar-head.is-stuck>div.top-bar-right>ul.menu>li>h3:hover {
 
#navbar-head.is-stuck>div.top-bar-right>ul.menu>li>h3:hover {
 
     color: #aaa;
 
     color: #aaa;
−
}
 
−
 
−
#nav-sidebar-content {
 
−
    position: fixed;
 
−
    z-index: 15;
 
−
    top: 0;
 
−
    right: -300px;
 
−
    width: 300px;
 
−
    height: 100%;
 
−
    background-color: rgba(1, 1, 1, .8);
 
−
}
 
−
 
−
#nav-sidebar-content>ul {
 
−
    font-size: 1.4em;
 
−
    height: 85%;
 
−
    margin-top: 50px;
 
−
    list-style: none;
 
−
    opacity: 1;
 
−
}
 
−
 
−
#nav-sidebar-content>ul>li {
 
−
    height: 13%;
 
−
    margin-top: 0;
 
−
}
 
−
 
−
#nav-sidebar-content>ul>li>a {
 
−
    text-decoration: none;
 
−
    color: #fff;
 
−
}
 
−
 
−
#nav-sidebar-content>ul>li>a:hover {
 
−
    transition: color .3s ease;
 
−
    color: #9b9baf;
 
−
}
 
−
 
−
#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);
 
−
}
 
−
 
−
#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;
 
−
}
 
−
 
−
#nav-sidebar.nav-sidebar-toggle span {
 
−
    background-color: #666;
 
−
}
 
−
 
−
#nav-sidebar span:nth-child(1) {
 
−
    top: 0;
 
−
}
 
−
 
−
#nav-sidebar span:nth-child(2),
 
−
#nav-sidebar span:nth-child(3) {
 
−
    top: 9px;
 
−
}
 
−
 
−
#nav-sidebar span:nth-child(4) {
 
−
    top: 18px;
 
−
}
 
−
 
−
#nav-sidebar.open span:nth-child(1) {
 
−
    top: 9px;
 
−
    left: 50%;
 
−
    width: 0;
 
−
}
 
−
 
−
#nav-sidebar.open span:nth-child(2) {
 
−
    -webkit-transform: rotate(45deg);
 
−
    -moz-transform: rotate(45deg);
 
−
    -o-transform: rotate(45deg);
 
−
    transform: rotate(45deg);
 
−
}
 
−
 
−
#nav-sidebar.open span:nth-child(3) {
 
−
    -webkit-transform: rotate(-45deg);
 
−
    -moz-transform: rotate(-45deg);
 
−
    -o-transform: rotate(-45deg);
 
−
    transform: rotate(-45deg);
 
−
}
 
−
 
−
#nav-sidebar.open span:nth-child(4) {
 
−
    top: 9px;
 
−
    left: 50%;
 
−
    width: 0;
 
 
}
 
}
  
Line 482: Line 370:
 
button.orbit-next:focus {
 
button.orbit-next:focus {
 
     background: transparent;
 
     background: transparent;
−
    ;
 
 
}
 
}
  
Line 498: Line 385:
 
}
 
}
  
−
@media(min-width: 768px) {
+
.animation>* {
 +
    visibility: hidden;
 +
}
 +
 
 +
section {
 +
    overflow: hidden;
 +
}
 +
 
 +
@media(min-width: 1024px) {
 +
    section {
 +
        margin-top: -50px;
 +
    }
 
     .content-container {
 
     .content-container {
 
         padding-top: 25px;
 
         padding-top: 25px;
 
         padding-bottom: 25px;
 
         padding-bottom: 25px;
 
     }
 
     }
 +
    .orbit+div h2 {
 +
        padding-top: 50px;
 +
    }
 +
}
 +
 +
@media(min-width: 768px) {
 
     #main-img-container {
 
     #main-img-container {
 
         width: 100%;
 
         width: 100%;
Line 514: Line 418:
 
     }
 
     }
 
}
 
}
−
 
−
@media screen and (-ms-high-contrast: active),
 
−
(-ms-high-contrast: none) {
 
−
    .scrollmagic-pin-spacer {
 
−
        bottom: 68px !important;
 
−
    }
 

Revision as of 10:50, 14 October 2016

html, body { 

   position: relative;
   width: 100%;
   height: 100%;
   font-family: Roboto, Arial, Helvetica, sans-serif;

}

h2 { 

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

}

.orbit+div h2 { 

   padding-top: 20px;

}

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;

}


/*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;

}

  1. HQ_page {
   width: 100%;
   font-size: 1.2em;

}

  1. HQ_page a:link {
   text-decoration: none;

}

  1. HQ_page a:hover {
   text-decoration: none;

}


/*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-weight: bold;
   letter-spacing: .2px;

}

ul.dropdown.menu a:link { 

   color: white;

}

ul.dropdown.menu a:visited { 

   color: white;

}

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

   color: #333;

}

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

   color: #333;

}

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

   content: none;

}

ul.is-dropdown-submenu.menu { 

   border: none;
   background-color: white;
   min-width: 180px;
   margin-top: 10px;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12), 0 3px 3px rgba(0, 0, 0, 0.24);

}

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

   padding: 2px 0;
   margin-bottom: 5px;
   margin-top: 5px;

}

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

   background-color: #757575;

}

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

   color: white;

}

ul.menu li.menu-text a { 

   color: white;
   text-transform: uppercase;

}

.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: 16px 5px;

}

  1. navbar-global {
   position: absolute;
   z-index: 20;
   top: 5px;
   width: 100%;
   background-color: #009688;
   box-shadow: 0 1px 4px #333;

}

  1. navbar-global>div>ul>li>a {
   transition: color .25s cubic-bezier(.75, 0, .1, 1);

}

  1. navbar-global>div>ul>li:hover {
   background-color: #00695c;

}

  1. navbar-global>div>ul>li:hover>a {
   opacity: .7;

}

  1. navbar-global-mobile li {
   margin: 0;
   padding: 0;

}

  1. navbar-global-mobile ul {
   background-color: black;

}

  1. navbar-global-mobile li {
   background-color: black;
   color: white;

}

  1. navbar-global-mobile li>a:link {
   color: white;

}

  1. navbar-global-mobile li>a:visited {
   color: white;

}

nav#navbar-head { 

   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 a:hover {
   color: white;

}

  1. navbar-head.is-stuck a {
   color: #004d40;
   transition: all .3s ease-in-out;

}

  1. navbar-head.is-stuck a:hover {
   background: #757575;
   color: white;

}

  1. navbar-head.is-stuck a:active {
   background: rgba(0, 0, 0, .7);
   color: white;

}

div#sticky-wrapper { 

   position: relative;
   top: -78.4px;
   z-index: 20;

}

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

}

nav#navbar-head.is-stuck { 

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

}

nav#navbar-head.is-stuck li#nav-top { 

   visibility: visible;

}

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

}

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

}

button.orbit-next, button.orbit-previous { 

   opacity: 0;
   transition: all .2s ease-in-out;

}

ul.orbit-container:hover button.orbit-next { 

   opacity: 1;

}

ul.orbit-container:hover button.orbit-previous { 

   opacity: 1;

}

button.orbit-next:focus { 

   background: transparent;

}

button.orbit-next:hover:focus { 

   background: hsla(0, 0%, 4%, .5)

}

button.orbit-previous:focus { 

   background: transparent;
   ;

}

button.orbit-previous:hover:focus { 

   background: hsla(0, 0%, 4%, .5)

}

.animation>* { 

   visibility: hidden;

}

section { 

   overflow: hidden;

}

@media(min-width: 1024px) { 

   section {
       margin-top: -50px;
   }
   .content-container {
       padding-top: 25px;
       padding-bottom: 25px;
   }
   .orbit+div h2 {
       padding-top: 50px;
   }

}

@media(min-width: 768px) { 

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

}