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

Revision as of 11:26, 14 October 2016 (view source) Avatarlei (Talk | contribs) ← Older edit		Revision as of 11:27, 14 October 2016 (view source) Avatarlei (Talk | contribs) Newer edit →
Line 396:		Line 396:
	#main-img-container {		#main-img-container {
	width: 100%;		width: 100%;
−	height: 100vh;	+	height: height:calc(100vh - 14px);
	}		}
	.img-fixed-position {		.img-fixed-position {
Line 416:		Line 416:
	.orbit+div h2 {		.orbit+div h2 {
	padding-top: 50px;		padding-top: 50px;
−	}
−	#main-img-container {
−	height:calc(100vh - 14px);
	}		}
	}		}

---

Revision as of 11:27, 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: 768px) {

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

}

@media(min-width: 1024px) {

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

}