(style.css) |
|||
Line 1: | Line 1: | ||
<style> | <style> | ||
+ | /******************** | ||
+ | * 覆盖 | ||
+ | * https://2017.igem.org/Template:SCU_China/default_CSS?action=raw&ctype=text/css | ||
+ | ********************/ | ||
+ | |||
+ | /***************************************************** DEFAULT WIKI SETTINGS ****************************************************/ | ||
+ | /* Clear the default wiki settings */ | ||
+ | /********************************** DEFAULT WIKI SETTINGS *********************************/ | ||
+ | #top_menu_inside #bars_item { | ||
+ | position: absolute; | ||
+ | top: -30px !important; | ||
+ | left: -100px !important; | ||
+ | z-index: -1 !important; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | #sideMenu, | ||
+ | #top_title { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #content { | ||
+ | padding: 0px; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | background-color: white; | ||
+ | margin: 0px; | ||
+ | } | ||
+ | |||
+ | #bodyContent h1 { | ||
+ | font-weight: 300 !important; | ||
+ | } | ||
+ | |||
+ | #bodyContent h1, | ||
+ | #bodyContent h2, | ||
+ | #bodyContent h3, | ||
+ | #bodyContent h4, | ||
+ | #bodyContent h5 { | ||
+ | margin-bottom: 0px; | ||
+ | border-bottom: none; | ||
+ | } | ||
+ | |||
+ | #bodyContent { | ||
+ | padding-right: 0px; | ||
+ | } | ||
+ | |||
+ | #globalWrapper { | ||
+ | font-size: 100%; | ||
+ | padding: 0px; | ||
+ | margin: -10px -20px -20px -20px; | ||
+ | } | ||
+ | |||
+ | .navbar-collapse { | ||
+ | padding-left: 0px; | ||
+ | } | ||
+ | |||
+ | #banner { | ||
+ | margin-top: 50px; | ||
+ | } | ||
+ | |||
+ | #sideMenu { | ||
+ | margin-top: 10px; | ||
+ | } | ||
+ | |||
+ | .navbar-nav .dropdown-menu, | ||
+ | .navbar .dropdown-menu { | ||
+ | margin-top: 0; | ||
+ | } | ||
+ | |||
+ | /**************************************************************** MENU ***************************************************************/ | ||
+ | /* Wrapper for the menu */ | ||
+ | .igem_menu_wrapper { | ||
+ | width: 15%; | ||
+ | height: 100vh; | ||
+ | position: fixed; | ||
+ | right: 0%; | ||
+ | padding: 0px; | ||
+ | float: right; | ||
+ | border-left: 1px solid #d3d3d3; | ||
+ | background-color: #dddddd; | ||
+ | text-align: left; | ||
+ | font-family: Tahoma, Geneva, sans-serif; | ||
+ | overflow-y: auto; | ||
+ | overflow-x: hidden; | ||
+ | } | ||
+ | |||
+ | /* this hides the scrollbar to keep view consistency */ | ||
+ | .igem_menu_wrappe::-webkit-scrollbar { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | /* styling for links in the menu, removes the line under text */ | ||
+ | .igem_menu_wrapper a { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | /* styling for the images in the menu */ | ||
+ | .igem_menu_wrapper img { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | /* styling for the menu buttons */ | ||
+ | .igem_menu_wrapper .menu_button { | ||
+ | width: 100%; | ||
+ | padding: 10px 0px 10px 15px; | ||
+ | float: left; | ||
+ | border-bottom: 1px solid #d3d3d3; | ||
+ | font-size: 12px; | ||
+ | font-weight: bold; | ||
+ | color: #5e5f5f; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | .igem_menu_wrapper .menu_bottom_padding { | ||
+ | width: 100%; | ||
+ | height: 30px; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | .menu_button.direct_to_page { | ||
+ | padding-left: 36px; | ||
+ | } | ||
+ | |||
+ | .igem_menu_wrapper .menu_button .expand_collapse_icon { | ||
+ | width: 10%; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | .igem_menu_wrapper .menu_button .expand_collapse_icon::before { | ||
+ | content: "+"; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* styling for the menu buttons on hover */ | ||
+ | .igem_menu_wrapper .menu_button:hover, .igem_menu_wrapper .submenu_button:hover, .submenu_button.current_page:hover { | ||
+ | background-color: #3399ff; | ||
+ | text-decoration: none; | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | |||
+ | /* styling for the menu button when it is the current page */ | ||
+ | .current_page { | ||
+ | background-color: #7fc1f7 !important; | ||
+ | color: #5e5f5f !important; | ||
+ | } | ||
+ | |||
+ | /* styling for the submenu buttons */ | ||
+ | .igem_menu_wrapper .submenu_button { | ||
+ | width: 100%; | ||
+ | padding: 10px 0px 10px 34px; | ||
+ | float: left; | ||
+ | background-color: #f2f2f2; | ||
+ | border-bottom: 1px solid #d3d3d3; | ||
+ | font-size: 12px; | ||
+ | color: #5e5f5f; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | /* wrapper for the submenu items, they are hidden by default*/ | ||
+ | .igem_menu_wrapper .submenu_wrapper { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | /* when the page size is bigger than 800px, this show/hide control is hidden by default */ | ||
+ | .igem_menu_wrapper #display_menu_control { | ||
+ | display: none; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | /***************************************************** CONTENT OF THE PAGE ****************************************************/ | ||
+ | |||
+ | /* Wrapper for the content */ | ||
+ | .igem_content_wrapper { | ||
+ | width: 81%; | ||
+ | margin: 2%; | ||
+ | display: block; | ||
+ | float: left; | ||
+ | background-color: white; | ||
+ | font-family: Tahoma, Geneva, sans-serif; | ||
+ | } | ||
+ | |||
+ | .igem_column_wrapper { | ||
+ | max-width: none; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | /********************************* HTML STYLING *********************************/ | ||
+ | |||
+ | /* styling for the titles h1 h2 */ | ||
+ | .igem_content_wrapper h1, .igem_content_wrapper h2 { | ||
+ | padding: 5px 15px; | ||
+ | border-bottom: 0px; | ||
+ | color: #3399ff; | ||
+ | } | ||
+ | |||
+ | /* styling for the titles h3 h4 h5 h6*/ | ||
+ | .igem_content_wrapper h3, .igem_content_wrapper h4, .igem_content_wrapper h5, .igem_content_wrapper h6 { | ||
+ | padding: 5px 15px; | ||
+ | border-bottom: 0px; | ||
+ | color: #000000; | ||
+ | } | ||
+ | |||
+ | /* font and text */ | ||
+ | .igem_content_wrapper p { | ||
+ | padding: 0px 15px; | ||
+ | font-size: 13px; | ||
+ | } | ||
+ | |||
+ | /* Links */ | ||
+ | .igem_content_wrapper a { | ||
+ | font-weight: bold; | ||
+ | text-decoration: underline; | ||
+ | text-decoration-color: #3399ff; | ||
+ | color: #3399ff; | ||
+ | -webkit-transition: all 0.4s ease; | ||
+ | -moz-transition: all 0.4s ease; | ||
+ | -ms-transition: all 0.4s ease; | ||
+ | -o-transition: all 0.4s ease; | ||
+ | transition: all 0.4s ease; | ||
+ | } | ||
+ | |||
+ | /* hover for the links */ | ||
+ | .igem_content_wrapper a:hover { | ||
+ | text-decoration: none; | ||
+ | color: #000000; | ||
+ | } | ||
+ | |||
+ | /* non numbered lists */ | ||
+ | .igem_content_wrapper ul { | ||
+ | padding: 0px 20px; | ||
+ | font-size: 13px; | ||
+ | font-family: Tahoma, Geneva, sans-serif; | ||
+ | } | ||
+ | |||
+ | /* numbered lists */ | ||
+ | .igem_content_wrapper ol { | ||
+ | padding: 0px; | ||
+ | font-size: 13px; | ||
+ | font-family: Tahoma, Geneva, sans-serif; | ||
+ | } | ||
+ | |||
+ | /* Table */ | ||
+ | .igem_content_wrapper table { | ||
+ | width: 97%; | ||
+ | margin: 15px 10px; | ||
+ | border: 1px solid #d3d3d3; | ||
+ | border-collapse: collapse; | ||
+ | } | ||
+ | |||
+ | /* table cells */ | ||
+ | .igem_content_wrapper td { | ||
+ | padding: 10px; | ||
+ | vertical-align: text-top; | ||
+ | border: 1px solid #d3d3d3; | ||
+ | border-collapse: collapse; | ||
+ | } | ||
+ | |||
+ | /* table headers */ | ||
+ | .igem_content_wrapper th { | ||
+ | padding: 10px; | ||
+ | vertical-align: text-top; | ||
+ | border: 1px solid #d3d3d3; | ||
+ | border-collapse: collapse; | ||
+ | background-color: #f2f2f2; | ||
+ | } | ||
+ | |||
+ | /**********************************LAYOUT CLASSES **********************************/ | ||
+ | |||
+ | /* general class for column divs */ | ||
+ | .igem_content_wrapper .column { | ||
+ | padding: 10px 0px; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | /* class for a full width column */ | ||
+ | .column .full_size { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | /* styling for images in a full width column*/ | ||
+ | .column.full_size img { | ||
+ | width: 97%; | ||
+ | padding: 10px 15px; | ||
+ | } | ||
+ | |||
+ | /* class for a half width column */ | ||
+ | .column.half_size { | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | /* styling for images in a half width column*/ | ||
+ | .column.half_size img { | ||
+ | width: 94.5%; | ||
+ | padding: 10px 15px; | ||
+ | } | ||
+ | |||
+ | /********************************* SUPPORT CLASSES ********************************/ | ||
+ | |||
+ | /* class that clears content below*/ | ||
+ | .igem_content_wrapper .clear { | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | /* adds extra spacing when clearing content */ | ||
+ | .igem_content_wrapper .clear.extra_space { | ||
+ | height: 30px; | ||
+ | } | ||
+ | |||
+ | /* highlight class, makes content slightly smaller */ | ||
+ | .igem_content_wrapper .highlight { | ||
+ | margin: 0px 15px; | ||
+ | padding: 15px 0px; | ||
+ | } | ||
+ | |||
+ | /* highlight class, adds a gray background */ | ||
+ | .igem_content_wrapper .highlight.gray { | ||
+ | background-color: #f2f2f2; | ||
+ | } | ||
+ | |||
+ | /* highlight with decoration blue line on top */ | ||
+ | .igem_content_wrapper .highlight.blue_top { | ||
+ | border-top: 4px solid #3399ff; | ||
+ | } | ||
+ | |||
+ | /* highlight with a full blue border decoration */ | ||
+ | .igem_content_wrapper .highlight.blue_border { | ||
+ | border: 4px solid #3399ff; | ||
+ | } | ||
+ | |||
+ | /* button class */ | ||
+ | .igem_content_wrapper .button { | ||
+ | max-width: 35%; | ||
+ | margin: 30px auto; | ||
+ | padding: 12px 10px; | ||
+ | background-color: #3399ff; | ||
+ | text-align: center; | ||
+ | color: #ffffff; | ||
+ | -webkit-transition: all 0.4s ease; | ||
+ | -moz-transition: all 0.4s ease; | ||
+ | -ms-transition: all 0.4s ease; | ||
+ | -o-transition: all 0.4s ease; | ||
+ | transition: all 0.4s ease; | ||
+ | } | ||
+ | |||
+ | /* styling for button on hover */ | ||
+ | .igem_content_wrapper .button:hover { | ||
+ | background-color: #3399ff; | ||
+ | color: #000000; | ||
+ | } | ||
+ | |||
+ | /***************************************************** RESPONSIVE STYLING ****************************************************/ | ||
+ | |||
+ | /* IF THE SCREEN IS LESS THAN 1200PX */ | ||
+ | @media only screen and (max-width: 1200px) { | ||
+ | |||
+ | #content { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .igem_menu_wrapper { | ||
+ | width: 15%; | ||
+ | right: 0; | ||
+ | } | ||
+ | |||
+ | .highlight { | ||
+ | padding: 10px 0px; | ||
+ | } | ||
+ | |||
+ | .igem_menu_wrapper #display_menu_control { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #menu_content { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .menu_button.direct_to_page { | ||
+ | padding-left: 17px; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | /* IF THE SCREEN IS LESS THAN 800PX */ | ||
+ | @media only screen and (max-width: 800px) { | ||
+ | |||
+ | .igem_menu_wrapper { | ||
+ | width: 100%; | ||
+ | height: 15%; | ||
+ | position: relative; | ||
+ | left: 0%; | ||
+ | } | ||
+ | |||
+ | .igem_content_wrapper { | ||
+ | width: 100%; | ||
+ | margin-left: 0px; | ||
+ | } | ||
+ | |||
+ | .column.half_size { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .column.full_size img, .column.half_size img { | ||
+ | width: 100%; | ||
+ | padding: 10px 0px; | ||
+ | } | ||
+ | |||
+ | .highlight { | ||
+ | padding: 15px 5px; | ||
+ | } | ||
+ | |||
+ | .igem_menu_wrapper #display_menu_control { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | #menu_content { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .igem_menu_wrapper .menu_button .expand_collapse_icon { | ||
+ | width: 5%; | ||
+ | } | ||
+ | |||
+ | .menu_bottom_padding { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .menu_button.direct_to_page { | ||
+ | padding-left: 36px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* special class that the system uses to make sure the team wants a page to be evaluated */ | ||
+ | .judges-will-not-evaluate { | ||
+ | width: 96.6%; | ||
+ | margin: 5px 15px; | ||
+ | display: block; | ||
+ | border: 4px solid #3399ff; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | .content_wrapper { | ||
+ | width: 100%; | ||
+ | height: 100vh; | ||
+ | } | ||
+ | |||
+ | |||
/******************** | /******************** | ||
* 字体 | * 字体 | ||
Line 282: | Line 730: | ||
margin-top: 58px; | margin-top: 58px; | ||
} | } | ||
+ | |||
</style> | </style> |
Revision as of 02:55, 9 September 2021
<style> /********************
* 覆盖 * https://2017.igem.org/Template:SCU_China/default_CSS?action=raw&ctype=text/css ********************/
/***************************************************** DEFAULT WIKI SETTINGS ****************************************************/ /* Clear the default wiki settings */ /********************************** DEFAULT WIKI SETTINGS *********************************/
- top_menu_inside #bars_item {
position: absolute; top: -30px !important; left: -100px !important; z-index: -1 !important; cursor: pointer;
}
- sideMenu,
- top_title {
display: none;
}
- content {
padding: 0px; width: 100%;
}
body {
background-color: white; margin: 0px;
}
- bodyContent h1 {
font-weight: 300 !important;
}
- bodyContent h1,
- bodyContent h2,
- bodyContent h3,
- bodyContent h4,
- bodyContent h5 {
margin-bottom: 0px; border-bottom: none;
}
- bodyContent {
padding-right: 0px;
}
- globalWrapper {
font-size: 100%; padding: 0px; margin: -10px -20px -20px -20px;
}
.navbar-collapse {
padding-left: 0px;
}
- banner {
margin-top: 50px;
}
- sideMenu {
margin-top: 10px;
}
.navbar-nav .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}
/**************************************************************** MENU ***************************************************************/ /* Wrapper for the menu */ .igem_menu_wrapper {
width: 15%; height: 100vh; position: fixed; right: 0%; padding: 0px; float: right; border-left: 1px solid #d3d3d3; background-color: #dddddd; text-align: left; font-family: Tahoma, Geneva, sans-serif; overflow-y: auto; overflow-x: hidden;
}
/* this hides the scrollbar to keep view consistency */ .igem_menu_wrappe::-webkit-scrollbar {
display: none;
}
/* styling for links in the menu, removes the line under text */ .igem_menu_wrapper a {
text-decoration: none;
}
/* styling for the images in the menu */ .igem_menu_wrapper img {
width: 100%;
}
/* styling for the menu buttons */ .igem_menu_wrapper .menu_button {
width: 100%; padding: 10px 0px 10px 15px; float: left; border-bottom: 1px solid #d3d3d3; font-size: 12px; font-weight: bold; color: #5e5f5f; cursor: pointer;
}
.igem_menu_wrapper .menu_bottom_padding {
width: 100%; height: 30px; float: left;
}
.menu_button.direct_to_page {
padding-left: 36px;
}
.igem_menu_wrapper .menu_button .expand_collapse_icon {
width: 10%; float: left;
}
.igem_menu_wrapper .menu_button .expand_collapse_icon::before {
content: "+";
}
/* styling for the menu buttons on hover */
.igem_menu_wrapper .menu_button:hover, .igem_menu_wrapper .submenu_button:hover, .submenu_button.current_page:hover {
background-color: #3399ff; text-decoration: none; color: #ffffff;
}
/* styling for the menu button when it is the current page */ .current_page {
background-color: #7fc1f7 !important; color: #5e5f5f !important;
}
/* styling for the submenu buttons */ .igem_menu_wrapper .submenu_button {
width: 100%; padding: 10px 0px 10px 34px; float: left; background-color: #f2f2f2; border-bottom: 1px solid #d3d3d3; font-size: 12px; color: #5e5f5f; cursor: pointer;
}
/* wrapper for the submenu items, they are hidden by default*/ .igem_menu_wrapper .submenu_wrapper {
display: none;
}
/* when the page size is bigger than 800px, this show/hide control is hidden by default */ .igem_menu_wrapper #display_menu_control {
display: none; text-align: center;
}
/***************************************************** CONTENT OF THE PAGE ****************************************************/
/* Wrapper for the content */ .igem_content_wrapper {
width: 81%; margin: 2%; display: block; float: left; background-color: white; font-family: Tahoma, Geneva, sans-serif;
}
.igem_column_wrapper {
max-width: none; width: 100%;
}
/********************************* HTML STYLING *********************************/
/* styling for the titles h1 h2 */ .igem_content_wrapper h1, .igem_content_wrapper h2 {
padding: 5px 15px; border-bottom: 0px; color: #3399ff;
}
/* styling for the titles h3 h4 h5 h6*/ .igem_content_wrapper h3, .igem_content_wrapper h4, .igem_content_wrapper h5, .igem_content_wrapper h6 {
padding: 5px 15px; border-bottom: 0px; color: #000000;
}
/* font and text */ .igem_content_wrapper p {
padding: 0px 15px; font-size: 13px;
}
/* Links */ .igem_content_wrapper a {
font-weight: bold; text-decoration: underline; text-decoration-color: #3399ff; color: #3399ff; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;
}
/* hover for the links */ .igem_content_wrapper a:hover {
text-decoration: none; color: #000000;
}
/* non numbered lists */ .igem_content_wrapper ul {
padding: 0px 20px; font-size: 13px; font-family: Tahoma, Geneva, sans-serif;
}
/* numbered lists */ .igem_content_wrapper ol {
padding: 0px; font-size: 13px; font-family: Tahoma, Geneva, sans-serif;
}
/* Table */ .igem_content_wrapper table {
width: 97%; margin: 15px 10px; border: 1px solid #d3d3d3; border-collapse: collapse;
}
/* table cells */ .igem_content_wrapper td {
padding: 10px; vertical-align: text-top; border: 1px solid #d3d3d3; border-collapse: collapse;
}
/* table headers */ .igem_content_wrapper th {
padding: 10px; vertical-align: text-top; border: 1px solid #d3d3d3; border-collapse: collapse; background-color: #f2f2f2;
}
/**********************************LAYOUT CLASSES **********************************/
/* general class for column divs */ .igem_content_wrapper .column {
padding: 10px 0px; float: left;
}
/* class for a full width column */ .column .full_size {
width: 100%;
}
/* styling for images in a full width column*/ .column.full_size img {
width: 97%; padding: 10px 15px;
}
/* class for a half width column */ .column.half_size {
width: 50%;
}
/* styling for images in a half width column*/ .column.half_size img {
width: 94.5%; padding: 10px 15px;
}
/********************************* SUPPORT CLASSES ********************************/
/* class that clears content below*/ .igem_content_wrapper .clear {
clear: both;
}
/* adds extra spacing when clearing content */ .igem_content_wrapper .clear.extra_space {
height: 30px;
}
/* highlight class, makes content slightly smaller */ .igem_content_wrapper .highlight {
margin: 0px 15px; padding: 15px 0px;
}
/* highlight class, adds a gray background */ .igem_content_wrapper .highlight.gray {
background-color: #f2f2f2;
}
/* highlight with decoration blue line on top */ .igem_content_wrapper .highlight.blue_top {
border-top: 4px solid #3399ff;
}
/* highlight with a full blue border decoration */ .igem_content_wrapper .highlight.blue_border {
border: 4px solid #3399ff;
}
/* button class */ .igem_content_wrapper .button {
max-width: 35%; margin: 30px auto; padding: 12px 10px; background-color: #3399ff; text-align: center; color: #ffffff; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;
}
/* styling for button on hover */ .igem_content_wrapper .button:hover {
background-color: #3399ff; color: #000000;
}
/***************************************************** RESPONSIVE STYLING ****************************************************/
/* IF THE SCREEN IS LESS THAN 1200PX */ @media only screen and (max-width: 1200px) {
#content { width: 100%; }
.igem_menu_wrapper { width: 15%; right: 0; }
.highlight { padding: 10px 0px; }
.igem_menu_wrapper #display_menu_control { display: none; }
#menu_content { display: block; }
.menu_button.direct_to_page { padding-left: 17px; }
}
/* IF THE SCREEN IS LESS THAN 800PX */ @media only screen and (max-width: 800px) {
.igem_menu_wrapper { width: 100%; height: 15%; position: relative; left: 0%; }
.igem_content_wrapper { width: 100%; margin-left: 0px; }
.column.half_size { width: 100%; }
.column.full_size img, .column.half_size img { width: 100%; padding: 10px 0px; }
.highlight { padding: 15px 5px; }
.igem_menu_wrapper #display_menu_control { display: block; }
#menu_content { display: none; }
.igem_menu_wrapper .menu_button .expand_collapse_icon { width: 5%; }
.menu_bottom_padding { display: none; }
.menu_button.direct_to_page { padding-left: 36px; }
}
/* special class that the system uses to make sure the team wants a page to be evaluated */ .judges-will-not-evaluate {
width: 96.6%; margin: 5px 15px; display: block; border: 4px solid #3399ff; font-weight: bold;
}
.content_wrapper {
width: 100%; height: 100vh;
}
/********************
* 字体 ********************/
@font-face {
font-family: SourceHanSansCN-Medium; src: url("https://static.igem.org/mediawiki/2021/5/5e/T--Shanghai_Metropolis--font.ttf");
}
/********************
* 基本 ********************/
- root {
--swiper-container-height: 100%; --gif-logo-height: 100%;
}
body, html {
margin: 0; padding: 0; scroll-behavior: smooth;
}
body {
background-color: white; min-width: 1400px;
}
- {
color: #434343; box-sizing: border-box; font-family: SourceHanSansCN-Medium, sans-serif;
}
a, a:visited {
text-decoration: none;
}
ul {
list-style: none; margin: 0; padding: 0;
}
ul:after {
content: " "; clear: both; display: table;
}
.content {
width: 1200px; margin: 0 auto;
}
.content-small {
width: 900px; margin: 0 auto;
}
/*Navbar*/
.navbar {
height: 122px; background-color: white; padding: 0 120px; display: flex; align-items: center;
}
.navbar .logo {
width: 54px; height: 62px; display: inline-block; flex-shrink: 0;
}
.navbar .logo img {
width: 100%; height: 100%; object-fit: contain;
}
.navbar .list {
display: block; height: 100%; flex-grow: 1; float: right;
}
.navbar .list .item {
display: inline-block; height: 100%; padding: 0 20px; position: relative; float: right;
}
.navbar .list .item > a {
color: #4c4c4c; font-size: 17px; transition: color 0.3s; padding-top: 4px; height: 100%; display: flex; justify-content: center; align-items: center;
}
.navbar .list .item:after, .navbar .list .item:after {
content: " "; width: 47px; height: 5px; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); background-color: transparent; transition: background-color 0.3s;
}
.navbar .list .item:hover:after, .navbar .list .item.active:after {
background-color: #b3b3b3;
}
.navbar .list .item:hover > a, .navbar .list .item.active > a {
color: #b3b3b3;
}
.navbar .child-nav {
display: none; background-color: rgba(185, 185, 185, .96); position: absolute; top: 100%; left: -32px; z-index: 9999;
}
.navbar .child-nav .child-list {
padding: 20px 52px; border: 2px solid rgba(255, 255, 255, .96);
}
.navbar .child-nav .child-item {
line-height: 50px;
}
.navbar .child-nav .child-item a {
display: block; color: white !important; border-bottom: 3px solid transparent; word-break: keep-all; white-space: nowrap;
}
.navbar .child-nav .child-item:hover a {
border-bottom: 3px solid white;
}
.navbar .item:hover .child-nav {
display: inherit;
}
/*footer*/
.footer {
background-color: #F5F5F7; padding-top: 60px; padding-bottom: 38px;
}
.footer hr {
height: 2px;
}
.footer span {
font-size: 14px; display: block; color: #666666; line-height: 24px;
}
/*article*/ .article { }
.article .title {
font-size: 36px; line-height: 46px; color: #4c4c4c; margin: 0; font-weight: normal;
}
.article .title.big {
font-size: 48px; line-height: 56px;
}
.article .title.blue {
color: #1f72cc;
}
.article p {
color: #4c4c4c; font-size: 22px; line-height: 36px; margin: 0;
}
/********************
* index ********************/
/*gif-logo*/ .index-page .gif-logo {
width: 100%; height: 100%;
}
.index-page .gif-logo img {
width: 100%; height: var(--gif-logo-height); display: block;
}
/*swiper*/ /*.index-page .swiper-container {
width: 1920px !important; height: 966px !important;
}*/ .index-page .swiper-container {
width: 100% !important; height: var(--swiper-container-height) !important;
}
.index-page .swiper-slide {
background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important;
}
.index-page .swiper-pagination-bullet {
width: 12px !important; height: 12px !important;
}
/*abstract*/ .index-page .abstract {
padding-top: 92px;
}
.index-page .abstract h2 {
margin-top: 40px; margin-bottom: 34px;
}
.index-page .abstract .bottom {
display: flex;
}
.index-page .abstract .bottom img {
margin-left: 12px; max-width: 400px; height: 100%;
}
/*promotional*/ .index-page .promotional {
padding-top: 110px; padding-bottom: 48px;
}
.index-page .promotional video {
width: 100%; height: 100%; margin-top: 58px;
}
</style>