Difference between revisions of "Template:SYSU-Software/CSS"
(95 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | + | /*Global*/ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | html,body { | |
− | + | margin: 0; | |
− | + | border: 0; | |
− | + | padding: 0; | |
− | + | width: 100%; | |
− | + | height:100%; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | hr { | |
− | + | background-color: white; | |
− | + | } | |
− | + | * { | |
− | + | margin: 0; | |
− | } | + | border: 0; |
+ | padding: 0; | ||
+ | line-height:normal; | ||
+ | } | ||
− | + | #menuContainer ul li { | |
− | + | box-sizing:content-box; | |
− | + | } | |
− | + | #contentContainer h1 { | |
− | + | border: 0px; | |
− | + | } | |
− | + | #contentContainer h2 { | |
− | + | border: 0px; | |
+ | } | ||
− | + | #contentContainer { | |
− | + | font-size: 12pt; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | #mainContainer p, #footer p{ | |
− | + | display: block; | |
− | + | } | |
− | + | ||
− | + | h1, h2, h3, h4 { | |
− | + | margin: 10px; | |
− | + | padding: 5px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | h1 { | |
− | + | font-size: 180%; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | h2 { | |
− | + | font-size: 150%; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | h3 { | |
− | + | font-size: 120%; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | h4 { | ||
+ | font-size: 90%; | ||
+ | } | ||
− | + | #menuContainer a { | |
− | + | text-decoration: none; | |
− | + | outline-style: none; | |
− | + | color: #6c78ef; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | a:visited { | |
− | + | text-decoration: none; | |
− | + | outline-style: none; | |
− | } | + | color: #6c78ef; |
+ | } | ||
− | + | a:link { | |
− | + | text-decoration: none; | |
− | + | outline-style: none; | |
− | } | + | color: #6c78ef; |
+ | } | ||
− | + | #menuContainer a:active { | |
− | + | text-decoration: none; | |
− | + | outline-style: none; | |
− | + | color: rgba(43, 210, 174, 1); | |
− | + | } | |
− | + | /× | |
− | + | #menuContainer a:hover { | |
− | + | text-decoration: none; | |
− | + | outline-style: none; | |
− | + | color: rgba(43, 210, 174, 1); | |
+ | } | ||
+ | ×/ | ||
+ | /*super container*/ | ||
+ | #globalWrapper { | ||
+ | background-color: white !important; | ||
+ | } | ||
− | + | #content { | |
+ | width: 100%; | ||
+ | border: 0; | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | } | ||
− | + | /*no default title for Team:SYSU-Software*/ | |
− | + | .firstHeading { | |
− | + | display:none; | |
− | + | } | |
− | + | /*back to top button*/ | |
− | + | /* | |
− | + | #top { | |
− | + | background: url("http://www.iconpng.com/png/sketched-arrows/sketched6.png"); | |
− | } | + | background-position: center; |
+ | background-size: 90px 90px; | ||
+ | width:75px; | ||
+ | height:75px; | ||
+ | border-radius:55%; | ||
+ | position: fixed; | ||
+ | bottom: 20px; | ||
+ | right: 20px; | ||
+ | opacity: 0.5; | ||
+ | z-index:100; | ||
+ | } | ||
+ | */ | ||
− | + | /* Creates a container that will wrap all of the content inside your wiki pages. */ | |
− | + | #mainContainer { | |
− | + | width: 100%; | |
− | + | margin-bottom: 15px; | |
− | + | overflow:hidden; | |
− | + | } | |
− | + | ||
− | + | /* Creates the container for the menu */ | |
− | + | /*MENU STYLING */ | |
− | + | /*Styling for the links in the menu */ | |
− | + | #menuContainer { | |
− | + | font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif; | |
− | + | font-size: 9pt; | |
+ | width: 100%; | ||
+ | height: 40px; | ||
+ | top:16px; | ||
+ | position: fixed; | ||
+ | text-align: center; | ||
+ | z-index:100; | ||
+ | } | ||
− | + | #menuContainer #oplayer { | |
− | + | opacity: 0.7; | |
− | + | position: fixed; | |
− | + | width: 100%; | |
− | } | + | height: 40px; |
+ | background-color: #000; | ||
+ | z-index: -1; | ||
+ | } | ||
− | + | #menuContainer #igem_logo { | |
− | + | margin-left: 80px; | |
− | + | height: 40px; | |
− | } | + | width: 40px; |
+ | float: left; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2015/e/e4/SYSU-SoftwareIGEM_official_logo.png"); | ||
+ | background-position: center; | ||
+ | background-size: 40px 40px; | ||
+ | text-align: center; | ||
+ | } | ||
− | + | #menuContainer a { | |
− | + | color: #fff; | |
− | + | text-decoration:none; | |
− | + | font-weight: bold; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | #menuContainer #menu { | |
− | + | float: left; | |
− | + | margin-left: 34px; | |
− | + | width:85%; | |
− | + | } | |
− | + | ||
+ | /* Sets the style for lists inside menuContainer */ | ||
+ | #menuContainer #menu ul { | ||
+ | height: 40px; | ||
+ | width:100% | ||
+ | /*width: 1100px;*/ /*this is going to be modified*/ | ||
+ | list-style: none; | ||
+ | clear: both; | ||
+ | margin: 0 auto; | ||
+ | } | ||
− | + | /*Styles the list items to become menu buttons */ | |
− | + | #menuContainer ul li { | |
− | + | height: 30px; | |
− | + | padding-top: 10px; | |
− | + | padding-left: 1.2%; | |
− | + | padding-right: 1.2%; | |
+ | display: block; | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | /* margin-top:-4px;*/ | ||
+ | } | ||
+ | /*For the menu buttons, changes the color when hovering*/ | ||
+ | #menuContainer li { | ||
+ | } | ||
+ | #menuContainer li:hover { | ||
+ | color: #FFF;/*this is going to be modified*/ | ||
+ | background-color: #a8a9a9;/*this is going to be modified*/ | ||
+ | } | ||
+ | /*style for opacity for sub op*/ | ||
+ | #sub_oplayer { | ||
+ | visibility: hidden; | ||
+ | opacity: 0; | ||
+ | position: fixed; | ||
+ | top:56px; | ||
+ | left: 0px; | ||
+ | height: 30px; | ||
+ | width: 100%; | ||
+ | background-color: #a8a9a9; | ||
+ | } | ||
− | + | /*Submenus are not displayed as default*/ | |
+ | #menuContainer li ul { | ||
+ | width: 100%; | ||
+ | position: fixed; | ||
+ | top: 56px; | ||
+ | left: 0px; | ||
+ | padding-left: 150px; | ||
+ | visibility: hidden; | ||
+ | opacity: 0; | ||
+ | } | ||
− | + | /*Submenus are displayed when hovering the menu button */ | |
+ | #menuContainer li:hover ul { | ||
+ | /*display: inline-block; */ | ||
+ | visibility: visible; | ||
+ | opacity: 1; | ||
+ | height: 30px; | ||
+ | position: fixed; | ||
+ | top: 56px; | ||
+ | float:left; | ||
+ | } | ||
− | #menuContainer | + | #menuContainer li:hover #sub_oplayer { |
− | + | visibility: visible; | |
− | + | opacity: 0.3; | |
− | + | } | |
− | } | + | |
+ | /*Style the submenu buttons*/ | ||
+ | #menuContainer li ul li{ | ||
+ | color: #313131; | ||
+ | padding-top: 5px; | ||
+ | padding-bottom: 0px; | ||
+ | padding-left: 20px; | ||
+ | padding-right: 20px; | ||
+ | height: 30px; | ||
+ | overflow: hidden; | ||
+ | width: auto; | ||
+ | display: block; | ||
+ | float: left; | ||
+ | text-align: center; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | #menuContainer li ul li:hover{ | ||
+ | background-color: inherit; | ||
+ | color: gray; | ||
+ | } | ||
+ | |||
+ | #menuContainer li ul li:hover { | ||
+ | color: gray; | ||
+ | } | ||
+ | |||
+ | #menuContainer #team { | ||
+ | left:50%; | ||
+ | } | ||
+ | |||
+ | /******************end of menuContainer*****************/ | ||
+ | |||
+ | /*Set up height place holder for the banner*/ | ||
+ | #bannerContainer { | ||
+ | width: 100%; | ||
+ | margin:0; | ||
+ | padding: 0; | ||
+ | border:0; | ||
+ | height: 775px; | ||
+ | text-align:center; | ||
+ | color: #24B694; | ||
+ | background: url("https://static.igem.org/mediawiki/2015/e/ed/SYSU-Software_Bg_new.jpg"); | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: top center; | ||
+ | background-size:cover; | ||
+ | font-family:"MV Boli", "Lucida Sans Unicode", "Lucida Grande", sans-serif; | ||
+ | color: #399e80 ; | ||
+ | background-color:#F8F8F8; | ||
+ | line-height:normal; | ||
+ | } | ||
+ | |||
+ | #bannerContainer h3 { | ||
+ | font-size:20pt; | ||
+ | } | ||
+ | |||
+ | #bannerContainer #title { | ||
+ | height: 400px; | ||
+ | width: 700px; | ||
+ | position: relative; | ||
+ | top: 200px; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | #bannerContainer #title h2 { | ||
+ | font-size: 50pt; | ||
+ | color: black; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | border-bottom:none; | ||
+ | } | ||
+ | |||
+ | #bannerContainer #title h3{ | ||
+ | color: #399e80 !important; | ||
+ | font-size: 30pt; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | margin-top:45px; | ||
+ | } | ||
− | + | #bannerContainer #title p { | |
− | + | position: relative; | |
− | + | top:120px; | |
− | } | + | font-size: 12pt; |
+ | font-family:"MV Boli"; | ||
+ | } | ||
+ | */ | ||
− | + | #title .logo { | |
− | + | height: 217px; | |
− | + | margin-left: 40px; | |
− | + | width: 580px; | |
− | + | background-image: url("https://static.igem.org/mediawiki/2015/9/9b/SYSU-Software_Logo.jpg"); | |
− | + | background-size: 80% auto; | |
− | + | background-repeat: no-repeat; | |
− | + | background-position: center; | |
− | + | margin: 0 auto; | |
− | + | margin-bottom: 200px; | |
− | + | } | |
− | + | ||
− | / | + | #title .scroll { |
− | + | width: 322px; | |
− | + | height: 22px; | |
− | + | margin: 0 auto; | |
− | + | background-image: url("https://static.igem.org/mediawiki/2015/a/a2/SYSU-Software_scroll.jpg"); | |
+ | background-repeat: no-repeat; | ||
+ | background-position: center; | ||
+ | background-size: 75% auto; | ||
+ | } | ||
− | + | #title .down { | |
− | + | margin-top: 20px; | |
− | + | margin: 10px auto 0px; | |
− | + | height: 25px; | |
− | + | margin-top: 10px; | |
− | + | background-image: url("https://static.igem.org/mediawiki/2015/b/b1/SYSU-Software_down.jpg"); | |
+ | background-repeat: no-repeat; | ||
+ | background-position: center; | ||
+ | } | ||
− | + | /*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */ | |
− | + | /* Creates the container for the content */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | /*Change the styling of text for everything inside main container*/ |
+ | #mainContainer p { | ||
+ | color: #000000; | ||
+ | } | ||
− | + | /*CLASSES */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | /*Clear class for all the pages, adds spacing too*/ | |
+ | .clear{ | ||
+ | clear:both; | ||
+ | height: 10px; | ||
+ | } | ||
− | + | /* highlight box for special messages */ | |
− | + | .highlightBox { | |
− | + | width:500px; | |
− | + | margin:auto; | |
− | } | + | background-color: #F4F0D8; |
+ | margin-bottom: 15px; | ||
+ | margin-top: 15px; | ||
+ | padding: 15px; | ||
+ | padding-top: 5px; | ||
+ | } | ||
− | + | #footer { | |
− | + | margin-bottom:20px; | |
− | + | margin-top: 40px; | |
− | + | line-height:25px; | |
− | + | text-align: center; | |
− | + | background-color: white; | |
− | + | color: #7f7f7f; | |
− | + | font-family: Arial; | |
− | + | font-size:11pt; | |
} | } |
Latest revision as of 03:22, 19 September 2015
/*Global*/
html,body {
margin: 0; border: 0; padding: 0; width: 100%; height:100%;
}
hr {
background-color: white;
}
- {
margin: 0; border: 0; padding: 0; line-height:normal;
}
- menuContainer ul li {
box-sizing:content-box;
}
- contentContainer h1 {
border: 0px;
}
- contentContainer h2 {
border: 0px;
}
- contentContainer {
font-size: 12pt;
}
- mainContainer p, #footer p{
display: block;
}
h1, h2, h3, h4 {
margin: 10px; padding: 5px;
}
h1 {
font-size: 180%;
}
h2 {
font-size: 150%;
}
h3 {
font-size: 120%;
}
h4 {
font-size: 90%;
}
- menuContainer a {
text-decoration: none; outline-style: none; color: #6c78ef;
}
a:visited {
text-decoration: none; outline-style: none; color: #6c78ef;
}
a:link {
text-decoration: none; outline-style: none; color: #6c78ef;
}
- menuContainer a:active {
text-decoration: none; outline-style: none; color: rgba(43, 210, 174, 1);
}
/×
- menuContainer a:hover {
text-decoration: none; outline-style: none; color: rgba(43, 210, 174, 1);
} ×/
/*super container*/
- globalWrapper {
background-color: white !important;
}
- content {
width: 100%; border: 0; padding: 0; margin: 0;
}
/*no default title for Team:SYSU-Software*/ .firstHeading {
display:none;
}
/*back to top button*/ /*
- top {
background: url("http://www.iconpng.com/png/sketched-arrows/sketched6.png"); background-position: center; background-size: 90px 90px; width:75px; height:75px; border-radius:55%; position: fixed; bottom: 20px; right: 20px; opacity: 0.5; z-index:100;
}
- /
/* Creates a container that will wrap all of the content inside your wiki pages. */
- mainContainer {
width: 100%; margin-bottom: 15px; overflow:hidden;
}
/* Creates the container for the menu */ /*MENU STYLING */ /*Styling for the links in the menu */
- menuContainer {
font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif; font-size: 9pt; width: 100%; height: 40px; top:16px; position: fixed; text-align: center; z-index:100;
}
- menuContainer #oplayer {
opacity: 0.7; position: fixed; width: 100%; height: 40px; background-color: #000; z-index: -1;
}
- menuContainer #igem_logo {
margin-left: 80px; height: 40px; width: 40px; float: left; background-image: url(""); background-position: center; background-size: 40px 40px; text-align: center;
}
- menuContainer a {
color: #fff; text-decoration:none; font-weight: bold;
}
- menuContainer #menu {
float: left; margin-left: 34px; width:85%;
}
/* Sets the style for lists inside menuContainer */
- menuContainer #menu ul {
height: 40px; width:100% /*width: 1100px;*/ /*this is going to be modified*/ list-style: none; clear: both; margin: 0 auto;
}
/*Styles the list items to become menu buttons */
- menuContainer ul li {
height: 30px; padding-top: 10px; padding-left: 1.2%; padding-right: 1.2%; display: block; float: left; position: relative; /* margin-top:-4px;*/
}
/*For the menu buttons, changes the color when hovering*/
- menuContainer li {
}
- menuContainer li:hover {
color: #FFF;/*this is going to be modified*/ background-color: #a8a9a9;/*this is going to be modified*/
}
/*style for opacity for sub op*/
- sub_oplayer {
visibility: hidden; opacity: 0; position: fixed; top:56px; left: 0px; height: 30px; width: 100%; background-color: #a8a9a9;
}
/*Submenus are not displayed as default*/
- menuContainer li ul {
width: 100%; position: fixed; top: 56px; left: 0px; padding-left: 150px; visibility: hidden; opacity: 0;
}
/*Submenus are displayed when hovering the menu button */
- menuContainer li:hover ul {
/*display: inline-block; */ visibility: visible; opacity: 1; height: 30px; position: fixed; top: 56px; float:left;
}
- menuContainer li:hover #sub_oplayer {
visibility: visible; opacity: 0.3;
}
/*Style the submenu buttons*/
- menuContainer li ul li{
color: #313131; padding-top: 5px; padding-bottom: 0px; padding-left: 20px; padding-right: 20px; height: 30px; overflow: hidden; width: auto; display: block; float: left; text-align: center; opacity: 1;
}
- menuContainer li ul li:hover{
background-color: inherit; color: gray;
}
- menuContainer li ul li:hover {
color: gray;
}
- menuContainer #team {
left:50%;
}
/******************end of menuContainer*****************/
/*Set up height place holder for the banner*/
- bannerContainer {
width: 100%; margin:0; padding: 0; border:0; height: 775px; text-align:center; color: #24B694; background: url(""); background-repeat: no-repeat; background-position: top center; background-size:cover; font-family:"MV Boli", "Lucida Sans Unicode", "Lucida Grande", sans-serif; color: #399e80 ; background-color:#F8F8F8; line-height:normal;
}
- bannerContainer h3 {
font-size:20pt;
}
- bannerContainer #title {
height: 400px; width: 700px; position: relative; top: 200px; margin: 0 auto;
}
/*
- bannerContainer #title h2 {
font-size: 50pt; color: black; margin: 0; padding: 0; border-bottom:none;
}
- bannerContainer #title h3{
color: #399e80 !important; font-size: 30pt; margin: 0; padding: 0; margin-top:45px;
}
- bannerContainer #title p {
position: relative; top:120px; font-size: 12pt; font-family:"MV Boli";
}
- /
- title .logo {
height: 217px; margin-left: 40px; width: 580px; background-image: url(""); background-size: 80% auto; background-repeat: no-repeat; background-position: center; margin: 0 auto; margin-bottom: 200px;
}
- title .scroll {
width: 322px; height: 22px; margin: 0 auto; background-image: url(""); background-repeat: no-repeat; background-position: center; background-size: 75% auto;
}
- title .down {
margin-top: 20px; margin: 10px auto 0px; height: 25px; margin-top: 10px; background-image: url(""); background-repeat: no-repeat; background-position: center; }
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */ /* Creates the container for the content */
/*Change the styling of text for everything inside main container*/
- mainContainer p {
color: #000000;
}
/*CLASSES */
/*Clear class for all the pages, adds spacing too*/ .clear{
clear:both; height: 10px;
}
/* highlight box for special messages */ .highlightBox {
width:500px; margin:auto; background-color: #F4F0D8; margin-bottom: 15px; margin-top: 15px; padding: 15px; padding-top: 5px;
}
- footer {
margin-bottom:20px; margin-top: 40px; line-height:25px; text-align: center; background-color: white; color: #7f7f7f; font-family: Arial; font-size:11pt;
}