Difference between revisions of "Template:SYSU-Software/CSS"
(86 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | |||
/*Global*/ | /*Global*/ | ||
Line 6: | Line 5: | ||
border: 0; | border: 0; | ||
padding: 0; | padding: 0; | ||
− | |||
width: 100%; | width: 100%; | ||
+ | height:100%; | ||
+ | } | ||
+ | |||
+ | hr { | ||
+ | background-color: white; | ||
} | } | ||
Line 14: | Line 17: | ||
border: 0; | border: 0; | ||
padding: 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; | ||
} | } | ||
Line 43: | Line 61: | ||
} | } | ||
− | a { | + | #menuContainer a { |
text-decoration: none; | text-decoration: none; | ||
outline-style: 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; | ||
} | } | ||
Line 54: | Line 111: | ||
/*back to top button*/ | /*back to top button*/ | ||
+ | /* | ||
#top { | #top { | ||
− | background: url(" | + | background: url("http://www.iconpng.com/png/sketched-arrows/sketched6.png"); |
background-position: center; | background-position: center; | ||
− | background-size: | + | background-size: 90px 90px; |
− | width: | + | width:75px; |
− | height: | + | height:75px; |
− | border-radius: | + | border-radius:55%; |
position: fixed; | position: fixed; | ||
bottom: 20px; | bottom: 20px; | ||
right: 20px; | right: 20px; | ||
+ | opacity: 0.5; | ||
+ | z-index:100; | ||
} | } | ||
+ | */ | ||
/* Creates a container that will wrap all of the content inside your wiki pages. */ | /* Creates a container that will wrap all of the content inside your wiki pages. */ | ||
Line 89: | Line 150: | ||
#menuContainer #oplayer { | #menuContainer #oplayer { | ||
− | opacity: 0. | + | opacity: 0.7; |
position: fixed; | position: fixed; | ||
width: 100%; | width: 100%; | ||
height: 40px; | height: 40px; | ||
background-color: #000; | 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; | ||
} | } | ||
Line 100: | Line 173: | ||
text-decoration:none; | text-decoration:none; | ||
font-weight: bold; | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | #menuContainer #menu { | ||
+ | float: left; | ||
+ | margin-left: 34px; | ||
+ | width:85%; | ||
} | } | ||
/* Sets the style for lists inside menuContainer */ | /* Sets the style for lists inside menuContainer */ | ||
− | #menuContainer ul { | + | #menuContainer #menu ul { |
height: 40px; | height: 40px; | ||
− | width: | + | width:100% |
+ | /*width: 1100px;*/ /*this is going to be modified*/ | ||
list-style: none; | list-style: none; | ||
− | |||
clear: both; | clear: both; | ||
+ | margin: 0 auto; | ||
} | } | ||
Line 114: | Line 194: | ||
#menuContainer ul li { | #menuContainer ul li { | ||
height: 30px; | height: 30px; | ||
− | padding-top: | + | padding-top: 10px; |
− | + | padding-left: 1.2%; | |
− | padding-left: | + | padding-right: 1.2%; |
− | padding-right: | + | |
display: block; | display: block; | ||
float: left; | float: left; | ||
position: relative; | position: relative; | ||
− | + | /* margin-top:-4px;*/ | |
} | } | ||
/*For the menu buttons, changes the color when hovering*/ | /*For the menu buttons, changes the color when hovering*/ | ||
#menuContainer li { | #menuContainer li { | ||
− | |||
} | } | ||
#menuContainer li:hover { | #menuContainer li:hover { | ||
color: #FFF;/*this is going to be modified*/ | color: #FFF;/*this is going to be modified*/ | ||
− | background-color: # | + | background-color: #a8a9a9;/*this is going to be modified*/ |
} | } | ||
/*style for opacity for sub op*/ | /*style for opacity for sub op*/ | ||
#sub_oplayer { | #sub_oplayer { | ||
− | opacity: 0 | + | visibility: hidden; |
+ | opacity: 0; | ||
position: fixed; | position: fixed; | ||
top:56px; | top:56px; | ||
+ | left: 0px; | ||
height: 30px; | height: 30px; | ||
width: 100%; | width: 100%; | ||
Line 149: | Line 229: | ||
position: fixed; | position: fixed; | ||
top: 56px; | top: 56px; | ||
− | |||
left: 0px; | left: 0px; | ||
+ | padding-left: 150px; | ||
visibility: hidden; | visibility: hidden; | ||
opacity: 0; | opacity: 0; | ||
Line 164: | Line 244: | ||
top: 56px; | top: 56px; | ||
float:left; | float:left; | ||
+ | } | ||
+ | |||
+ | #menuContainer li:hover #sub_oplayer { | ||
+ | visibility: visible; | ||
+ | opacity: 0.3; | ||
} | } | ||
/*Style the submenu buttons*/ | /*Style the submenu buttons*/ | ||
#menuContainer li ul li{ | #menuContainer li ul li{ | ||
− | |||
color: #313131; | color: #313131; | ||
padding-top: 5px; | padding-top: 5px; | ||
Line 188: | Line 272: | ||
} | } | ||
+ | #menuContainer li ul li:hover { | ||
+ | color: gray; | ||
+ | } | ||
− | + | #menuContainer #team { | |
− | + | left:50%; | |
− | + | ||
− | # | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | /******************end of menuContainer*****************/ | ||
/*Set up height place holder for the banner*/ | /*Set up height place holder for the banner*/ | ||
Line 207: | Line 286: | ||
width: 100%; | width: 100%; | ||
margin:0; | margin:0; | ||
− | height: | + | padding: 0; |
+ | border:0; | ||
+ | height: 775px; | ||
text-align:center; | text-align:center; | ||
color: #24B694; | color: #24B694; | ||
− | + | background: url("https://static.igem.org/mediawiki/2015/e/ed/SYSU-Software_Bg_new.jpg"); | |
− | background: url("https://static.igem.org/mediawiki/2015/ | + | |
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-position: top center; | background-position: top center; | ||
− | background-size: | + | background-size:cover; |
+ | font-family:"MV Boli", "Lucida Sans Unicode", "Lucida Grande", sans-serif; | ||
+ | color: #399e80 ; | ||
+ | background-color:#F8F8F8; | ||
+ | line-height:normal; | ||
} | } | ||
#bannerContainer h3 { | #bannerContainer h3 { | ||
− | font-size: | + | font-size:20pt; |
} | } | ||
− | #title { | + | #bannerContainer #title { |
− | + | height: 400px; | |
− | + | width: 700px; | |
+ | position: relative; | ||
+ | top: 200px; | ||
+ | margin: 0 auto; | ||
} | } | ||
− | #title h2 { | + | /* |
+ | #bannerContainer #title h2 { | ||
font-size: 50pt; | font-size: 50pt; | ||
color: black; | color: black; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | border-bottom:none; | ||
} | } | ||
− | # | + | #bannerContainer #title h3{ |
color: #399e80 !important; | color: #399e80 !important; | ||
font-size: 30pt; | font-size: 30pt; | ||
− | margin: | + | margin: 0; |
+ | padding: 0; | ||
+ | margin-top:45px; | ||
} | } | ||
− | #title p { | + | #bannerContainer #title p { |
− | + | position: relative; | |
+ | top:120px; | ||
font-size: 12pt; | font-size: 12pt; | ||
font-family:"MV Boli"; | 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 */ | /*CLASSES */ | ||
Line 331: | Line 395: | ||
padding: 15px; | padding: 15px; | ||
padding-top: 5px; | 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;
}