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

Revision as of 09:52, 10 October 2016 (view source) Avatarlei (Talk | contribs) ← Older edit		Latest revision as of 03:49, 20 October 2016 (view source) Hypercube (Talk | contribs)
(43 intermediate revisions by 3 users not shown)
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 23:		Line 24:
	}		}
		+	#globalWrapper {
		+	padding-bottom: 0;
		+	}
		+
		+	#HQ_page div.row{
		+	width: 100%;
		+	max-width: none;
		+	margin-left: 0;
		+	margin-right: 0;
		+	margin-top: 2rem;
		+	padding-top: 3rem;
		+	padding-bottom: 3rem;
		+	padding-left: 2rem;
		+	padding-right: 2rem;
		+	}
		+	#HQ_page .row img{
		+	padding-top:3.8rem;
		+	}
		+
		+	#HQ_page #link2 {
		+	background-color: #f5f5f5;
		+	}
		+
		+	#HQ_page #link2 h2{
		+	margin-top:1rem;
		+	}
		+
		+	#HQ_page #link3 h2{
		+	margin-top:2rem;
		+	}
		+
		+	#HQ_page #link4 {
		+	background-color: #f5f5f5;
		+	}
		+
		+	#HQ_page #link5 h2{
		+	margin-top:6rem;
		+	}
		+
		+	#HQ_page #link6 {
		+	background-color: #e0f2f1;
		+	}
		+
		+	#HQ_page .row h2{
		+	font-family:'Raleway';
		+	}
		+
		+	#HQ_page .row p{
		+	font-size:20px;
		+	margin-right:5%;
		+	}
		+
		+	#HQ_page a.button{
		+	display: inline-block;
		+	text-align: center;
		+	line-height: 1;
		+	height:40px;
		+	cursor: pointer;
		+	-webkit-appearance: none;
		+	transition: background-color .25s ease-out,color .25s ease-out;
		+	vertical-align: middle;
		+	border: 1px solid transparent;
		+	border-radius: 0;
		+	padding: .85em 1em;
		+	margin: 0 0 1rem;
		+	font-size: .9rem;
		+	background-color: #2199e8;
		+	color: #fefefe;
		+	}
		+
		+	#HQ_page footer {
		+	width: 100%;
		+	max-width: none;
		+	margin-left: 0;
		+	margin-right: 0;
		+	background-color: #f5f5f5;
		+	}
	/*		/*
Line 49:		Line 127:
	nav.top-bar ul {		nav.top-bar ul {
	background-color: transparent;		background-color: transparent;
−	}
−
−	nav.orbit-bullets {
−	transform: translateY(-180%);
	}		}
Line 66:		Line 140:
	div#top_title {		div#top_title {
	display: none;		display: none;
		+	}
		+
		+	#top_menu_under{
		+	height:16px;
	}		}
Line 138:		Line 216:
	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 245:
	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: #03a9f4;
−	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 199:		Line 286:
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
−	opacity: .8;
	}		}
Line 207:		Line 293:
	.menu>li {		.menu>li {
−	padding: 10px 5px;	+	padding: 16px 5px;
	}		}
Line 213:		Line 299:
	position: absolute;		position: absolute;
	z-index: 20;		z-index: 20;
−	top: 0;	+	top: 5px;
	width: 100%;		width: 100%;
−	background-color: #2c3840;	+	background-color: #03A9F4;
	}		}
−	#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: #9c27b0;
		+	}
		+
		+	#navbar-global>div>ul>li:hover>a {
		+	opacity: .9;
		+	}
		+
		+	#navbar-global-mobile li {
		+	margin: 0;
		+	padding: 0;
		+	}
		+
		+	.title-bar {
		+	background-color: #0288D1;
		+	}
		+
		+	#navbar-global-mobile ul {
		+	background-color: #0288D1;
		+	}
		+
		+	#navbar-global-mobile li {
		+	background-color: #0288D1;
		+	color: white;
		+	}
		+
		+	#navbar-global-mobile li a::after {
		+	border-color: #B3E5FC transparent transparent;
		+	}
		+
		+	#navbar-global-mobile li>a:link {
		+	color: white;
		+	}
		+
		+	#navbar-global-mobile li>a:visited {
		+	color: white;
	}		}
Line 243:		Line 367:
	#navbar-head>.top-bar-right li {		#navbar-head>.top-bar-right li {
−	transition: color .1s ease-in-out;	+	transition: color .2s ease-in-out;
	color: #2199e8;		color: #2199e8;
	}		}
Line 268:		Line 392:
	position: relative;		position: relative;
	padding: calc(.7rem + 15px) calc(1rem + 20px);		padding: calc(.7rem + 15px) calc(1rem + 20px);
		+	padding-top: calc(.7rem + 30px);
		+	}
		+
		+	#navbar-head a:hover {
		+	color: white;
	}		}
	#navbar-head.is-stuck a {		#navbar-head.is-stuck a {
		+	color: #0288d1;
	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 283:		Line 413:
	color: white;		color: white;
	}		}
−
−
−	/*
−	#navbar-head.is-stuck a.active {
−	box-shadow: 0 -.25em 0 #41525e inset;
−	}
−	*/
	div#sticky-wrapper {		div#sticky-wrapper {
	position: relative;		position: relative;
−	top: -68.4px;	+	top: -84.4px;
	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 350:		Line 439:
	#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 481:		Line 457:
	button.orbit-next:focus {		button.orbit-next:focus {
	background: transparent;		background: transparent;
−	;
	}		}
Line 494:		Line 469:
	button.orbit-previous:hover:focus {		button.orbit-previous:hover:focus {
−	background: hsla(0, 0%, 4%, .5)	+	background: hsla(0, 0%, 4%, .5);
	}		}
−	@media(min-width: 768px) {	+	.animation>* {
		+	visibility: hidden;
		+	}
		+
		+	.orbit-image {
		+	height: calc(100vh - 13px);
		+	}
		+
		+	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;
	}		}
−	#main-img-container {	+	.orbit+div h2 {
		+	padding-top: 50px;
		+	}
		+	}
		+
		+	@media(min-width: 768px) {
		+	/*  #main-img-container {
	width: 100%;		width: 100%;
−	height: 100vh;	+	height: calc(100vh - 14px);
	}		}
		+	*/
	.img-fixed-position {		.img-fixed-position {
	min-height: 500px;		min-height: 500px;
Line 513:		Line 510:
	}		}
	}		}
−
−	@media screen and (-ms-high-contrast: active),
−	(-ms-high-contrast: none) {
−	.scrollmagic-pin-spacer {
−	bottom: 68px !important;
−	}

---

Latest revision as of 03:49, 20 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%;

}

1. globalWrapper {

   padding-bottom: 0;

}

1. HQ_page div.row{

   width: 100%;
   max-width: none;
   margin-left: 0;
   margin-right: 0;
   margin-top: 2rem;
   padding-top: 3rem;
   padding-bottom: 3rem;
   padding-left: 2rem;
   padding-right: 2rem;

}

1. HQ_page .row img{

   padding-top:3.8rem;

}

1. HQ_page #link2 {

   background-color: #f5f5f5;

}

1. HQ_page #link2 h2{

   margin-top:1rem;

}

1. HQ_page #link3 h2{

   margin-top:2rem;

}

1. HQ_page #link4 {

   background-color: #f5f5f5;

}

1. HQ_page #link5 h2{

   margin-top:6rem;

}

1. HQ_page #link6 {

   background-color: #e0f2f1;

}

1. HQ_page .row h2{

   font-family:'Raleway';

}

1. HQ_page .row p{

   font-size:20px;
   margin-right:5%;

}

1. HQ_page a.button{

   display: inline-block;
   text-align: center;
   line-height: 1;
   height:40px;
   cursor: pointer;
   -webkit-appearance: none;
   transition: background-color .25s ease-out,color .25s ease-out;
   vertical-align: middle;
   border: 1px solid transparent;
   border-radius: 0;
   padding: .85em 1em;
   margin: 0 0 1rem;
   font-size: .9rem;
   background-color: #2199e8;
   color: #fefefe;

}

1. HQ_page footer {

   width: 100%;
   max-width: none;
   margin-left: 0;
   margin-right: 0;
   background-color: #f5f5f5;

}

/* 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_under{

   height:16px;

}

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: #03a9f4;

}

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%;

}

.top-bar {

   padding: 0;

}

.menu>li {

   padding: 16px 5px;

}

1. navbar-global {

   position: absolute;
   z-index: 20;
   top: 5px;
   width: 100%;
   background-color: #03A9F4;

}

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: #9c27b0;

}

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

   opacity: .9;

}

1. navbar-global-mobile li {

   margin: 0;
   padding: 0;

}

.title-bar {

   background-color: #0288D1;

}

1. navbar-global-mobile ul {

   background-color: #0288D1;

}

1. navbar-global-mobile li {

   background-color: #0288D1;
   color: white;

}

1. navbar-global-mobile li a::after {

   border-color: #B3E5FC transparent transparent;

}

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 .2s 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: #0288d1;
   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: -84.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;

}

.orbit-image {

   height: calc(100vh - 13px);

}

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: calc(100vh - 14px);
   }
 */
   .img-fixed-position {
       min-height: 500px;
       background-repeat: no-repeat;
       background-attachment: fixed;
       background-size: cover;
   }

}