Difference between revisions of "Template:SYSU-Software/CSS"
(23 intermediate revisions by 2 users not shown) | |||
Line 18: | Line 18: | ||
padding: 0; | padding: 0; | ||
line-height:normal; | line-height:normal; | ||
+ | } | ||
+ | |||
+ | #menuContainer ul li { | ||
+ | box-sizing:content-box; | ||
} | } | ||
Line 57: | Line 61: | ||
} | } | ||
− | a { | + | #menuContainer a { |
text-decoration: none; | text-decoration: none; | ||
outline-style: none; | outline-style: none; | ||
− | color: # | + | color: #6c78ef; |
} | } | ||
Line 66: | Line 70: | ||
text-decoration: none; | text-decoration: none; | ||
outline-style: none; | outline-style: none; | ||
− | color: # | + | color: #6c78ef; |
} | } | ||
Line 72: | Line 76: | ||
text-decoration: none; | text-decoration: none; | ||
outline-style: none; | outline-style: none; | ||
− | color: # | + | color: #6c78ef; |
} | } | ||
− | a:active { | + | #menuContainer a:active { |
text-decoration: none; | text-decoration: none; | ||
outline-style: none; | outline-style: none; | ||
Line 81: | Line 85: | ||
} | } | ||
− | a:hover { | + | /× |
+ | #menuContainer a:hover { | ||
text-decoration: none; | text-decoration: none; | ||
outline-style: none; | outline-style: none; | ||
color: rgba(43, 210, 174, 1); | color: rgba(43, 210, 174, 1); | ||
} | } | ||
+ | ×/ | ||
/*super container*/ | /*super container*/ | ||
Line 105: | Line 111: | ||
/*back to top button*/ | /*back to top button*/ | ||
+ | /* | ||
#top { | #top { | ||
background: url("http://www.iconpng.com/png/sketched-arrows/sketched6.png"); | background: url("http://www.iconpng.com/png/sketched-arrows/sketched6.png"); | ||
Line 118: | Line 125: | ||
z-index:100; | 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 170: | Line 178: | ||
float: left; | float: left; | ||
margin-left: 34px; | margin-left: 34px; | ||
+ | width:85%; | ||
} | } | ||
Line 175: | Line 184: | ||
#menuContainer #menu ul { | #menuContainer #menu ul { | ||
height: 40px; | height: 40px; | ||
− | width: 1100px; /*this is going to be modified*/ | + | width:100% |
+ | /*width: 1100px;*/ /*this is going to be modified*/ | ||
list-style: none; | list-style: none; | ||
clear: both; | clear: both; | ||
Line 185: | Line 195: | ||
height: 30px; | height: 30px; | ||
padding-top: 10px; | padding-top: 10px; | ||
− | padding-left: | + | padding-left: 1.2%; |
− | padding-right: | + | padding-right: 1.2%; |
display: block; | display: block; | ||
float: left; | float: left; | ||
Line 195: | Line 205: | ||
/*For the menu buttons, changes the color when hovering*/ | /*For the menu buttons, changes the color when hovering*/ | ||
#menuContainer li { | #menuContainer li { | ||
− | |||
} | } | ||
Line 213: | Line 222: | ||
width: 100%; | width: 100%; | ||
background-color: #a8a9a9; | background-color: #a8a9a9; | ||
− | |||
} | } | ||
Line 221: | Line 229: | ||
position: fixed; | position: fixed; | ||
top: 56px; | top: 56px; | ||
− | |||
left: 0px; | left: 0px; | ||
padding-left: 150px; | padding-left: 150px; | ||
Line 246: | Line 253: | ||
/*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 268: | Line 274: | ||
#menuContainer li ul li:hover { | #menuContainer li ul li:hover { | ||
color: gray; | color: gray; | ||
+ | } | ||
+ | |||
+ | #menuContainer #team { | ||
+ | left:50%; | ||
} | } | ||
Line 278: | Line 288: | ||
padding: 0; | padding: 0; | ||
border:0; | border:0; | ||
− | height: | + | height: 775px; |
text-align:center; | text-align:center; | ||
color: #24B694; | color: #24B694; | ||
Line 284: | Line 294: | ||
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; | font-family:"MV Boli", "Lucida Sans Unicode", "Lucida Grande", sans-serif; | ||
color: #399e80 ; | color: #399e80 ; | ||
+ | background-color:#F8F8F8; | ||
line-height:normal; | line-height:normal; | ||
} | } | ||
Line 334: | Line 345: | ||
background-size: 80% auto; | background-size: 80% auto; | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
− | background-position: | + | background-position: center; |
− | margin-bottom: | + | margin: 0 auto; |
+ | margin-bottom: 200px; | ||
} | } | ||
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;
}