Difference between revisions of "Template:Waterloo/CSS/style.css"
m (mainContainer margin-top fixed) |
|||
(50 intermediate revisions by the same user not shown) | |||
Line 3: | Line 3: | ||
margin: 0 auto; | margin: 0 auto; | ||
padding: 0; | padding: 0; | ||
+ | padding-top: 44px; | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
Line 13: | Line 14: | ||
} | } | ||
− | + | a, a:link, a:visited { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
color: #23b593; | color: #23b593; | ||
} | } | ||
+ | |||
/*---Changes to Default Wiki----------------------------------------------------------------------*/ | /*---Changes to Default Wiki----------------------------------------------------------------------*/ | ||
Line 61: | Line 34: | ||
height: 0; | height: 0; | ||
width: 100%; | width: 100%; | ||
− | |||
border: 0; | border: 0; | ||
background-color: transparent; | background-color: transparent; | ||
Line 70: | Line 42: | ||
padding: 0; | padding: 0; | ||
width: 100%; | width: 100%; | ||
− | |||
border: 0; | border: 0; | ||
padding-bottom: 2px; | padding-bottom: 2px; | ||
Line 80: | Line 51: | ||
} | } | ||
+ | #bodyContent a[href ^="https://"] { | ||
+ | padding-right: 0; | ||
+ | } | ||
/*---Div Properties-------------------------------------------------------------------------------*/ | /*---Div Properties-------------------------------------------------------------------------------*/ | ||
Line 85: | Line 59: | ||
#mainContainer { | #mainContainer { | ||
position: relative; | position: relative; | ||
− | width: | + | width: 1000px; |
margin: 0 auto; | margin: 0 auto; | ||
+ | margin-top: 50px; | ||
overflow: hidden; | overflow: hidden; | ||
background-color: #fff; | background-color: #fff; | ||
Line 95: | Line 70: | ||
padding: 0; | padding: 0; | ||
width: 100%; | width: 100%; | ||
− | + | max-width: 768px; | |
+ | margin: 0 auto; | ||
background-color: #fff; | background-color: #fff; | ||
} | } | ||
Line 140: | Line 116: | ||
} | } | ||
− | /* highlight box for special messages */ | + | /* highlight box for special messages, prevHighlightBox for template content that needs to be removed */ |
− | .highlightBox { | + | .highlightBox, .prevHighlightBox { |
− | width:500px; | + | width: 500px; |
− | margin:auto; | + | max-width: 85%; |
+ | margin: auto; | ||
background-color: #E8E8E9; | background-color: #E8E8E9; | ||
margin-bottom: 15px; | margin-bottom: 15px; | ||
Line 153: | Line 130: | ||
-moz-box-shadow: 0 0 5px 0 rgba(66,66,66,1); | -moz-box-shadow: 0 0 5px 0 rgba(66,66,66,1); | ||
-ms-box-shadow: 0 0 5px 0 rgba(66,66,66,1); | -ms-box-shadow: 0 0 5px 0 rgba(66,66,66,1); | ||
+ | -o-box-shadow: 0 0 5px 0 rgba(66,66,66,1); | ||
box-shadow: 0 0 5px 0 rgba(66,66,66,1); | box-shadow: 0 0 5px 0 rgba(66,66,66,1); | ||
+ | } | ||
+ | .prevHighlightBox { | ||
+ | background-color: #ef9a9a; | ||
+ | width: 100%; | ||
} | } | ||
+ | figure { | ||
+ | width: 100%; | ||
+ | margin: 0 auto; | ||
+ | display: block; | ||
+ | text-align: center; | ||
+ | } | ||
+ | img { | ||
+ | width: 90%; | ||
+ | margin: auto; | ||
+ | padding: 0.2em; | ||
+ | display: inline-block; | ||
+ | } | ||
/*---Header & Footer------------------------------------------------------------------------------*/ | /*---Header & Footer------------------------------------------------------------------------------*/ | ||
Line 166: | Line 160: | ||
-moz-box-shadow: 0 0 10px 0 rgba(66,66,66,1); | -moz-box-shadow: 0 0 10px 0 rgba(66,66,66,1); | ||
-ms-box-shadow: 0 0 10px 0 rgba(66,66,66,1); | -ms-box-shadow: 0 0 10px 0 rgba(66,66,66,1); | ||
+ | -o-box-shadow: 0 0 10px 0 rgba(66,66,66,1); | ||
box-shadow: 0 0 10px 0 rgba(66,66,66,1); | box-shadow: 0 0 10px 0 rgba(66,66,66,1); | ||
} | } | ||
Line 175: | Line 170: | ||
/* Styling for upper nav */ | /* Styling for upper nav */ | ||
nav { | nav { | ||
− | + | margin-top: 16px !important; | |
− | + | -webkit-transition: all 1s !important; | |
− | + | -moz-transition: all 1s !important; | |
− | + | -ms-transition: all 1s !important; | |
− | + | -o-transition: all 1s !important; | |
+ | transition: all 1s !important; | ||
} | } | ||
Line 187: | Line 183: | ||
} | } | ||
nav img { | nav img { | ||
− | + | -webkit-transition: all 1s !important; | |
− | + | -moz-transition: all 1s !important; | |
+ | -ms-transition: all 1s !important; | ||
+ | -o-transition: all 1s !important; | ||
+ | transition: all 1s !important; | ||
+ | height: 100%; | ||
} | } | ||
nav.main-nav { | nav.main-nav { | ||
− | + | z-index: 2000; | |
} | } | ||
− | |||
nav.shrink a.navbar-brand { | nav.shrink a.navbar-brand { | ||
− | + | height: 60px !important; | |
} | } | ||
− | |||
nav.shrink { | nav.shrink { | ||
− | + | min-height: 40px; | |
} | } | ||
− | |||
nav.shrink li a { | nav.shrink li a { | ||
padding-top: 20px !important; | padding-top: 20px !important; | ||
Line 208: | Line 205: | ||
min-height: 100% !important; | min-height: 100% !important; | ||
} | } | ||
− | |||
nav.shrink li li a { | nav.shrink li li a { | ||
padding-top: 0px !important; | padding-top: 0px !important; | ||
Line 216: | Line 212: | ||
/* Styling for lower nav */ | /* Styling for lower nav */ | ||
− | |||
nav.navbar-lower { | nav.navbar-lower { | ||
− | + | margin-top: 76px !important; | |
− | + | padding-left: 0px; | |
− | + | padding-right: 0px; | |
− | + | height: 1em; | |
− | + | font-size: 0.8em; | |
+ | text-align: center; | ||
+ | opacity: 0.9; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
nav.navbar-lower li { | nav.navbar-lower li { | ||
float: none; | float: none; | ||
display: inline-block; | display: inline-block; | ||
} | } | ||
− | |||
nav.hide-lower { | nav.hide-lower { | ||
opacity: 0; | opacity: 0; | ||
display: none; | display: none; | ||
} | } | ||
− | + | ul.inner-page-links { | |
− | ul.inner-page-links{ | + | |
width: 100% !important; | width: 100% !important; | ||
display: inline-block; | display: inline-block; | ||
+ | } | ||
+ | ul.inner-page-links a.scroll-link { | ||
+ | padding: 0.5em 1em !important; | ||
} | } | ||
Line 251: | Line 244: | ||
-moz-box-shadow: inset 0 10px 15px -10px #424242; | -moz-box-shadow: inset 0 10px 15px -10px #424242; | ||
-ms-box-shadow: inset 0 10px 15px -10px #424242; | -ms-box-shadow: inset 0 10px 15px -10px #424242; | ||
+ | -o-box-shadow: inset 0 10px 15px -10px #424242; | ||
box-shadow: inset 0 10px 15px -10px #424242; | box-shadow: inset 0 10px 15px -10px #424242; | ||
background: #2a2e33; | background: #2a2e33; | ||
Line 279: | Line 273: | ||
display:inline-block; | display:inline-block; | ||
text-decoration: none; | text-decoration: none; | ||
− | padding-right: 1.2em; | + | padding-right: 1.2em !important; |
color: #ffffff; | color: #ffffff; | ||
font-size: 0.8em; | font-size: 0.8em; | ||
} | } | ||
− | + | ||
− | + | ||
− | + | ||
/* If you don't want the footer to be responsive, remove these media queries */ | /* If you don't want the footer to be responsive, remove these media queries */ | ||
Line 315: | Line 307: | ||
opacity: 0; | opacity: 0; | ||
-webkit-transition: opacity .3s 0s, visibility 0s .3s; | -webkit-transition: opacity .3s 0s, visibility 0s .3s; | ||
− | + | -moz-transition: opacity .3s 0s, visibility 0s .3s; | |
− | + | -ms-transition: opacity .3s 0s, visibility 0s .3s; | |
+ | -o-transition: opacity .3s 0s, visibility 0s .3s; | ||
+ | transition: opacity .3s 0s, visibility 0s .3s; | ||
} | } | ||
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover { | .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover { | ||
− | -webkit-transition: opacity .3s 0s, visibility 0s | + | -webkit-transition: opacity .3s 0s, visibility 0s .3s; |
− | + | -moz-transition: opacity .3s 0s, visibility 0s .3s; | |
− | + | -ms-transition: opacity .3s 0s, visibility 0s .3s; | |
+ | -o-transition: opacity .3s 0s, visibility 0s .3s; | ||
+ | transition: opacity .3s 0s, visibility 0s .3s; | ||
} | } | ||
.cd-top.cd-is-visible { | .cd-top.cd-is-visible { | ||
Line 337: | Line 333: | ||
} | } | ||
− | @media (min-width: 768px | + | /* tablet */ |
+ | @media only screen and (min-device-width: 768px) { | ||
.cd-top { | .cd-top { | ||
height: 60px; | height: 60px; | ||
width: 60px; | width: 60px; | ||
+ | background: rgba(35, 181, 147, 0.8) url(/wiki/images/b/bd/Waterloo_cd-top-arrow.png) no-repeat center 50%; | ||
} | } | ||
} | } | ||
− | @media (max-width: 768px) { | + | /* phone */ |
+ | @media only screen and (max-device-width: 768px) { | ||
.cd-top { | .cd-top { | ||
height: 100px; | height: 100px; | ||
width: 100px; | width: 100px; | ||
+ | background: rgba(35, 181, 147, 0.8) url(/wiki/images/b/bd/Waterloo_cd-top-arrow.png) no-repeat center 50%; | ||
} | } | ||
} | } | ||
Line 407: | Line 407: | ||
margin-left: auto; | margin-left: auto; | ||
margin-right: auto; | margin-right: auto; | ||
− | width: | + | width: 800px; |
+ | max-width: 95%; | ||
} | } | ||
.accordion-inner dl dt { | .accordion-inner dl dt { | ||
Line 428: | Line 429: | ||
-moz-box-shadow: 0 0 20px 0 rgba(66,66,66,1); | -moz-box-shadow: 0 0 20px 0 rgba(66,66,66,1); | ||
-ms-box-shadow: 0 0 20px 0 rgba(66,66,66,1); | -ms-box-shadow: 0 0 20px 0 rgba(66,66,66,1); | ||
+ | -o-box-shadow: 0 0 20px 0 rgba(66,66,66,1); | ||
box-shadow: 0 0 20px 0 rgba(66,66,66,1); | box-shadow: 0 0 20px 0 rgba(66,66,66,1); | ||
} | } | ||
Line 450: | Line 452: | ||
/*---Attributions---------------------------------------------------------------------------------*/ | /*---Attributions---------------------------------------------------------------------------------*/ | ||
dl.attributions dt { | dl.attributions dt { | ||
− | font-weight: | + | font-size: 1.5em; |
+ | font-style: normal; | ||
+ | font-weight: normal; | ||
+ | margin: 0.67em 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*---Quote Styling--------------------------------------------------------------------------------*/ | ||
+ | q:before, blockquote:before { | ||
+ | content: "\201C" !important; | ||
+ | font-family: serif !important; | ||
+ | font-size: 5em; | ||
+ | font-style: normal; | ||
+ | line-height: normal; | ||
+ | z-index: -999; | ||
+ | } | ||
+ | q, blockquote { | ||
+ | display: block; | ||
+ | font-size: 1.2em; | ||
+ | font-weight: lighter; | ||
+ | font-style: italic; | ||
+ | font-family: inherit; | ||
+ | padding: 0 0 0 120px; | ||
+ | border-left: none !important; | ||
} | } |
Latest revision as of 23:09, 8 September 2015
/*---Properties-----------------------------------------------------------------------------------*/ html, body {
margin: 0 auto; padding: 0; padding-top: 44px; width: 100%; height: 100%; background-color: #fff;
}
html {
position: relative; min-height: 100%;
}
a, a:link, a:visited {
color: #23b593;
}
/*---Changes to Default Wiki----------------------------------------------------------------------*/
- globalWrapper, #content, #bodyContent {
margin: 0 auto; padding: 0; height: 100%; width: 100%; border: 0px; background-color: transparent;
}
- top_menu_under {
margin: 0; padding: 0; height: 0; width: 100%; border: 0; background-color: transparent;
}
- top_menu_14 {
margin: 0; padding: 0; width: 100%; border: 0; padding-bottom: 2px; background-color: #373B40;
}
div#top_menu_inside {
margin: 0 auto;
}
- bodyContent a[href ^="https://"] {
padding-right: 0;
}
/*---Div Properties-------------------------------------------------------------------------------*/ /* Creates a container that will wrap all of the content inside your wiki pages. */
- mainContainer {
position: relative; width: 1000px; margin: 0 auto; margin-top: 50px; overflow: hidden; background-color: #fff;
}
/* Creates the container for the content */
- contentContainer {
padding: 0; width: 100%; max-width: 768px; margin: 0 auto; background-color: #fff;
}
/* Styling links on hover- links are different inside the menu */
- contentContainer a:hover {
color: #59bf92;
}
/*Change the styling of tables */
- contentContainer table {
border: 1px solid #565656; border-collapse: collapse; width: 90%; margin: auto; margin-bottom: 15px; margin-top: 15px; margin-right: 10px; margin-left: 10px;
}
/*Change the styling of table cells*/
- contentContainer td {
padding: 10px; border: 1px solid #565656; border-collapse: collapse; vertical-align: text-top;
}
/*Change the styling of table headers */
- contentContainer th {
background-color: #E8E8E9; padding: 10px; border: 1px solid #565656; border-collapse: collapse; vertical-align: text-top;
}
/*Clear class for all the pages, adds spacing too*/
.clear{
clear:both; height: 10px;
}
/* highlight box for special messages, prevHighlightBox for template content that needs to be removed */ .highlightBox, .prevHighlightBox {
width: 500px; max-width: 85%; margin: auto; background-color: #E8E8E9; margin-bottom: 15px; margin-top: 15px; padding: 15px; padding-top: 5px;
-webkit-box-shadow: 0 0 5px 0 rgba(66,66,66,1); -moz-box-shadow: 0 0 5px 0 rgba(66,66,66,1); -ms-box-shadow: 0 0 5px 0 rgba(66,66,66,1); -o-box-shadow: 0 0 5px 0 rgba(66,66,66,1); box-shadow: 0 0 5px 0 rgba(66,66,66,1);
} .prevHighlightBox {
background-color: #ef9a9a; width: 100%;
}
figure {
width: 100%; margin: 0 auto; display: block; text-align: center;
} img {
width: 90%; margin: auto; padding: 0.2em; display: inline-block;
}
/*---Header & Footer------------------------------------------------------------------------------*/ header {
position: absolute; left: 0; right: 0; top: 16px; /*-- this matches the height of the top_menu_14 bar --*/ -webkit-box-shadow: 0 0 10px 0 rgba(66,66,66,1); -moz-box-shadow: 0 0 10px 0 rgba(66,66,66,1); -ms-box-shadow: 0 0 10px 0 rgba(66,66,66,1); -o-box-shadow: 0 0 10px 0 rgba(66,66,66,1); box-shadow: 0 0 10px 0 rgba(66,66,66,1);
}
header > .navbar-nav {
text-align: center;
}
/* Styling for upper nav */ nav {
margin-top: 16px !important; -webkit-transition: all 1s !important; -moz-transition: all 1s !important; -ms-transition: all 1s !important; -o-transition: all 1s !important; transition: all 1s !important;
}
nav a {
font-size: 1.2em; padding-right: 1em;
} nav img {
-webkit-transition: all 1s !important; -moz-transition: all 1s !important; -ms-transition: all 1s !important; -o-transition: all 1s !important; transition: all 1s !important; height: 100%;
}
nav.main-nav {
z-index: 2000;
} nav.shrink a.navbar-brand {
height: 60px !important;
} nav.shrink {
min-height: 40px;
} nav.shrink li a {
padding-top: 20px !important; padding-bottom: 20px !important; min-height: 100% !important;
} nav.shrink li li a {
padding-top: 0px !important; padding-bottom: 0px !important; min-height: 100% !important;
}
/* Styling for lower nav */ nav.navbar-lower {
margin-top: 76px !important; padding-left: 0px; padding-right: 0px; height: 1em; font-size: 0.8em; text-align: center; opacity: 0.9;
} nav.navbar-lower li {
float: none; display: inline-block;
} nav.hide-lower {
opacity: 0; display: none;
} ul.inner-page-links {
width: 100% !important; display: inline-block;
} ul.inner-page-links a.scroll-link {
padding: 0.5em 1em !important;
}
footer {
bottom: 0; width: 100%; padding: 0; -webkit-box-shadow: inset 0 10px 15px -10px #424242; -moz-box-shadow: inset 0 10px 15px -10px #424242; -ms-box-shadow: inset 0 10px 15px -10px #424242; -o-box-shadow: inset 0 10px 15px -10px #424242; box-shadow: inset 0 10px 15px -10px #424242; background: #2a2e33; line-height: 2em; color: #fff; box-sizing: border-box; text-align: center;
}
footer .footer-company-motto {
color: #8d9093; font-size: 0.9em; margin: 0;
}
footer .footer-company-name {
color: #8d9093; font-size: 1.3em; margin: 0;
} footer .footer-links {
list-style: none; padding: 3em 0 2em; margin: 0;
}
footer p.footer-links a {
display:inline-block; text-decoration: none; padding-right: 1.2em !important; color: #ffffff; font-size: 0.8em;
}
/* If you don't want the footer to be responsive, remove these media queries */
@media (max-width: 1000px) {
footer .footer-company-motto .footer-company-name .footer-links { font-size: 1.2em; } footer .footer-links a { padding: 25px 0 20px; line-height: 1.8; }
}
/*---Scroll to Top button ---------------------------*/ .cd-top {
display: inline-block; height: 40px; width: 40px; position: fixed; bottom: 40px; right: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* image replacement properties */ overflow: hidden; text-indent: 100%; white-space: nowrap; background: rgba(35, 181, 147, 0.8) url(/wiki/images/b/bd/Waterloo_cd-top-arrow.png) no-repeat center 50%; visibility: hidden; opacity: 0; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; -ms-transition: opacity .3s 0s, visibility 0s .3s; -o-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s;
} .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; -ms-transition: opacity .3s 0s, visibility 0s .3s; -o-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s;
} .cd-top.cd-is-visible {
/* the button becomes visible */ visibility: visible; opacity: 1;
} .cd-top.cd-fade-out {
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */ opacity: .5;
} .no-touch .cd-top:hover {
background-color: rgb(35, 181, 147); opacity: 1;
}
/* tablet */ @media only screen and (min-device-width: 768px) {
.cd-top { height: 60px; width: 60px; background: rgba(35, 181, 147, 0.8) url(/wiki/images/b/bd/Waterloo_cd-top-arrow.png) no-repeat center 50%; }
} /* phone */ @media only screen and (max-device-width: 768px) {
.cd-top { height: 100px; width: 100px; background: rgba(35, 181, 147, 0.8) url(/wiki/images/b/bd/Waterloo_cd-top-arrow.png) no-repeat center 50%; }
}
/*---Splash images & team page --------------------------------------------------------------------*/ .cover {
position: relative; height: 20em; background: rgba(0, 0, 0, 0.5); width: 100% color: #fff; margin: auto; text-align: center; line-height: 20em;
}
.cover::after {
content : ""; display: block; position: absolute; top: 0; left: 0; background-size: cover; width: 100%; height: 100%; z-index: -1; opacity: 0.8;
}
.cover#lab::after {
background-image: url('/wiki/images/c/c9/Waterloo_lab_cover.JPG');
} .cover#math::after {
background-image: url('/wiki/images/e/e8/Waterloo_math_cover.jpg');
} .cover#policy::after {
background-image: url('/wiki/images/2/22/Waterloo_policy_cover.jpg');
} .cover#advisors::after {
background-image: url('/wiki/images/c/cc/Waterloo_advisors_cover.jpg');
} .cover#leads::after {
background-image: url('/wiki/images/1/1e/Waterloo_cover_leads.jpg');
}
a.cover-text, a.cover-text:hover, a.cover-text:visited, a.cover-text:active {
color: #ccc; font-size: 2em; text-shadow: 0 0 10px #000; text-decoration: none;
} .cover-desc {
color: #999; margin-top: -9em; text-shadow: 0 0 10px #000; text-decoration: none;
} .accordion-inner {
margin-top: 10px; margin-left: auto; margin-right: auto; width: 800px; max-width: 95%;
} .accordion-inner dl dt {
min-width: 150px; width: 30%; display: inline-block; text-align: center; vertical-align: middle;
} .accordion-inner dl dd {
width: 60%; display: inline-block; vertical-align: middle;
} .accordion-inner dl dt img {
max-width: 100px; display: inline-block; border-radius: 50%; -webkit-box-shadow: 0 0 20px 0 rgba(66,66,66,1); -moz-box-shadow: 0 0 20px 0 rgba(66,66,66,1); -ms-box-shadow: 0 0 20px 0 rgba(66,66,66,1); -o-box-shadow: 0 0 20px 0 rgba(66,66,66,1); box-shadow: 0 0 20px 0 rgba(66,66,66,1);
}
/*---Sponsor images-------------------------------------------------------------------------------*/
ul.sponsors {
list-style: none; width: 100%; margin-left: auto; margin-right: auto;
} ul.sponsors li a {
margin-left: auto; margin-right: auto;
} .glyphicon {
font-size: medium;
}
/*---Attributions---------------------------------------------------------------------------------*/
dl.attributions dt {
font-size: 1.5em; font-style: normal; font-weight: normal; margin: 0.67em 0;
}
/*---Quote Styling--------------------------------------------------------------------------------*/
q:before, blockquote:before {
content: "\201C" !important; font-family: serif !important; font-size: 5em; font-style: normal; line-height: normal; z-index: -999;
} q, blockquote {
display: block; font-size: 1.2em; font-weight: lighter; font-style: italic; font-family: inherit; padding: 0 0 0 120px; border-left: none !important;
}