Template:GCb-css-bootest-core
<html> <style> /* ===== core.css Purpose: To extend the wonderful GCpedicure (by Chris - Global Affairs Canada's Innolab) by being able to utilize default Bootstrap's common look and feel and retain GCpedia's functionality.
Author: Marco Battilana (marco.battilana@dfo-mpo.gc.ca) - Fisheries and Oceans Canada GCconnex: gcconnex.gc.ca/profile/crazybat Twitter: @crazybat
Revision History:
Version 1.0 (16 Oct 2018) - Using existing methodology of GCpedicure and having the added benefit of showing most of the default stylings of Bootstrap. You can now use Bootstrap framework directly - including almost all scripts, styles, etc.
Known Issues: - Need an easier way to add the Edit link (SOLVED! See override.css Version 1.0) - Incorporate existing GCpedia functionality: Language flipper, log in, etc. (SOLVED! See override.css Version 1.0)
Version 1.1 (31 Oct 2018) - Created override.css to bring back some of the default GCpedia functionality, language flipper, log in, etc.
Known Issues: - <multilang> does weird things to GCpedia include files. See if we can flip language using this. Otherwise, keep the built-in flipper for now.
References: GCpedicure: www.gcpedia.gc.ca/wiki/GCpedicure Bootstrap: getbootstrap.com
*/
html { position: relative; min-height: 100%; -ms-overflow-style: none; }
html, body { height: 100%; }
body { overflow-y: hidden; background-color: #fff; /*min-height: 75rem;*/ /*margin-top: 4.5rem;*/ /*margin-bottom: 4.5rem;*/ }
/* ==== The main container style for GCbootstrap - DON'T CHANGE! ==== */ .super-body {
position: fixed; overflow-y: scroll; overflow-x: hidden; -ms-overflow-x: hidden; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; background-color: #fff; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; /* moved from body as GCpedia renders it out */ /*min-height: 75rem; margin-top: 4.5rem; margin-bottom: 4.5rem;*/
} /* ==== The main container style for GCbootstrap - DON'T CHANGE! ==== */
/* === GCbootstrap icon ===*/
- icon-gcb {
position: absolute; display: block; /*bottom: 30px;*/ bottom: 22px; right: 23px; z-index: 10005; }
/* ==== To override GCpedia styles. DO NOT REMOVE ==== */ div#mw-head {
position: absolute; top: 145px; right: 0; width: 100%; display: none;
} div#mw-panel {
position: absolute; top: 160px; padding-top: 1em; width: 10em; left: 0; display: none;
}
- footer {
display: none;
}
/* ==== To override GCpedia styles. DO NOT REMOVE ==== */
/* === Globals: Building rows, column for proper spaces and shading, inheriting font sizes, visibility, etc. === */
/* == For debugging only! Puts boxes around all grid elements == */ /*[class*="col-"] { padding-top: 1rem; padding-bottom: 1rem; background-color: rgba(86, 61, 124, .15); border: 1px solid rgba(86, 61, 124, .2); }*/
/* == Content container that's NOT a header, nav, or footer == */ div[role*="main"] {
margin-top: 5em; margin-bottom: 4em;
}
@media screen { ul { list-style-image: inherit; margin-left: 0; } } @media screen { .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul { margin-top: 0; } } @media screen { .mw-content-ltr nav ul, .mw-content-rtl .mw-content-ltr nav ul { margin-left: 0; } }
@media screen { .mw-content-ltr ol, .mw-content-rtl .mw-content-ltr ol { margin: inherit; padding: inherit; } } @media screen { .mw-content-ltr nav ol, .mw-content-rtl .mw-content-ltr nav ol { margin: inherit; padding: inherit; } } div[class*="container"] ul[class*="list-group"], div[class*="container"] ul[class*="nav"], div[class*="container"] ul[class*="pagination"] { margin-left: 0; }
input[type=checkbox], input[type=radio] { margin-left: 0; position: inherit; }
.collapse, .collapse .show {
visibility: inherit;
}
.row {
margin-bottom: 1rem;
}
.btn-primary {
background-color: #007bff !important;
} .fade {
opacity: inherit;
}
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 {
font-family: inherit; margin-bottom: .25em; padding-bottom: 5px; padding-top: inherit; border-bottom: solid 1px transparent;
}
.mw-body-content {
font-size: inherit;
}
@media screen { .mw-body h1 { font-size: 2.5rem; line-height: 1.2; margin-top: 0; } } @media screen { .mw-body h2 { font-size: 2rem; line-height: 1.2; margin-top: 0; } }
@media screen { .mw-body h3 { font-size: 1.75rem; font-weight: inherit; line-height: 1.2; margin-top: 0; } }
@media screen { .mw-body h4 { font-size: 1.5rem; font-weight: inherit; line-height: 1.2; margin-top: 0; } }
@media screen { .mw-body h5 { font-size: 1.25rem; line-height: 1.2; margin-top: 0; } }
@media screen { .mw-body h6 { font-size: 1rem; line-height: 1.2; margin-top: 0; } } .modal-backdrop { z-index: -1; }
/* == Main Navigation bar == */ .navbar {
border-radius: 0;
}
.navbar-default {
background-color: #fff; border-color: #e7e7e7;
}
.navbar-default .navbar-brand {
color: #222;
}
.navbar-brand { padding: 0; }
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color: #5e5e5e; background-color: transparent;
}
.navbar-default .navbar-text {
color: #222;
}
.navbar-default .navbar-nav>li>a {
color: #222;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
color: #111; background-color: transparent;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
color: #555; background-color: #e7e7e7;
}
.navbar-default .navbar-nav>.disabled>a, .navbar-default .navbar-nav>.disabled>a:hover, .navbar-default .navbar-nav>.disabled>a:focus {
color: #ccc; background-color: transparent;
}
.navbar-default .navbar-toggle {
border-color: #ddd;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #ddd;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #888;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: #e7e7e7;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
color: #555; background-color: #e7e7e7;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
color: #777;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {
color: #333; background-color: transparent;
}
.navbar-default .navbar-nav .open .dropdown-menu>.active>a,
.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
color: #555; background-color: #e7e7e7;
}
.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,
.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus {
color: #ccc; background-color: transparent;
}
}
.navbar-default .navbar-link {
color: #777;
}
.navbar-default .navbar-link:hover {
color: #333;
}
.navbar-default .btn-link {
color: #777;
}
.navbar-default .btn-link:hover, .navbar-default .btn-link:focus {
color: #333;
}
.navbar-default .btn-link[disabled]:hover, fieldset[disabled] .navbar-default .btn-link:hover, .navbar-default .btn-link[disabled]:focus, fieldset[disabled] .navbar-default .btn-link:focus {
color: #ccc;
}
.navbar-default .navbar-nav>li>a:visited {
color: #222;
}
ul.dropdown-menu {
padding: 0;
}
.dropdown-menu>li>a {
display: block; padding: 15px 20px; clear: both; line-height: 1.42857143; color: #333; white-space: nowrap; border-bottom: 1px solid #e8e8e8;
}
/*= Pretty nav effects =*/ .nav-item::after{ content:; display:block; width:0px; height:2px; background:#a07dff; transition: 0.2s; } .nav-item:hover::after { width:100%; } .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover{ color:#a07dff; } .nav-link { padding:15px 5px; transition:0.2s; } .dropdown-item.active, .dropdown-item:active { color:#212529; } .dropdown-item:focus, .dropdown-item:hover { background:#a07dff; }
/* == Cards, specific styles ==*/
.card {
border: solid 1px #c8ced3;
}
.card-accent-primary {
border-top-color: #20a8d8; border-top-width: 5px;
} .card-accent-secondary {
border-top-color: #c8ced3; border-top-width: 5px;
} .card-accent-success {
border-top-color: #4dbd74; border-top-width: 5px;
} .card-accent-danger {
border-top-color: #f86c6b; border-top-width: 5px;
} .card-accent-warning {
border-top-color: #ffc107; border-top-width: 5px;
} .card-accent-info {
border-top-color: #63c2de; border-top-width: 5px;
} .card-accent-dark {
border-top-color: #2f353a; border-top-width: 5px;
}
/* == Main Footer == */ .footer a, .footer a:link, .footer a:visited { color: #a07dff !important; } .footer a:focus, .footer a:hover, .footer a:active { color: #e7e7e7 !important; text-decoration: underline; } /* == Sticky bottom == */ .fixed-bottom {
position: fixed; bottom: 0; width: 100%; height: 60px; /* Set the fixed height of the footer */ line-height: 60px; /* Vertically center the text */ background-color: #333; z-index: 10001;
}
@media (max-width: 767px) { .fixed-bottom { position: relative; bottom: none; width: 100%; height: 60px; /* Set the fixed height of the footer */ line-height: 60px; /* Vertically center the text */ background-color: #333; z-index: 10001; } }
/* === Content-specific styles ===*/ /* == Youtube Player styles == */
.youtube-player { position: relative; padding-bottom: 56.23%; /* Use 75% for 4:3 videos */ height: 0; overflow: hidden; max-width: 100%; background: #000; margin: 5px; }
.youtube-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background: transparent; }
.youtube-player img { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; border: none; height: auto; cursor: pointer; -webkit-transition: .4s all; -moz-transition: .4s all; transition: .4s all; }
.youtube-player img:hover { -webkit-filter: brightness(75%); }
.youtube-player .play { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("http://www.gcpedia.gc.ca/gcwiki/images/e/ef/Play-button.png") no-repeat; cursor: pointer; }
/*== Gallery ==*/ .thumbnail {
position:relative; overflow:hidden;
}
.caption {
position:absolute; top:-100%; right:0; background: rgba(102, 75, 229, 0.75); width:100%; height:100%; padding:2%; text-align:center; color:#fff !important; z-index:2; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
} .thumbnail:hover .caption {
top:0%;
}
/*== Personas ==*/ .our-team-main { width:100%; height:auto; border-top:5px #323233 solid; background:#fff; overflow:hidden; position:relative; transition:0.5s; margin-bottom:28px; } .our-team-main h3 { font-size:20px; font-weight:700; }
.our-team-main p { margin-bottom:0; }
.team-back { width:100%; height:auto; position:absolute; top:0; left:0; padding-right: 90px; text-align:left; background:#fff;
} .team-back img { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
filter: gray; }
.team-front { width:100%; height:auto; position:relative; z-index:10; background:#fff; bottom:0px; transition: all 0.5s ease; text-align:left; }
.our-team-main:hover .team-front { bottom:-300px; transition: all 0.5s ease; }
.our-team-main:hover { border-color:#777; transition:0.5s; }
/*== FAQs ==*/
- accordian ul {
margin-left: 35px;
}
- accordion .card {
border: medium none; border-radius: 0; box-shadow: none; margin: 0 0 15px 0;
}
- accordion .card-header {
border-radius: 30px; padding: 0;
background-color: none; border-bottom: none; border-top-color: #c8ced3;
border-top-width: 5px;
}
- accordion h5 {
background: #fff; margin-bottom: 0; padding: 5px 15px 5px 0; }
- accordion .card-title a {
background: #28a745 none repeat scroll 0 0; border: 1px solid transparent; border-radius: 5px; color: #fff; display: block; padding: 12px 20px 12px 60px; position: relative; transition: all 0.3s ease 0s;
}
- accordion .card-title a.collapsed {
background: #fff none repeat scroll 0 0; border: 1px solid #bbb;
border-top-color: #c8ced3;
border-top-width: 5px; color: #333;
}
- accordion .card-title a::after {
background: #28a745 none repeat scroll 0 0; border: 1px solid transparent; border-radius: 50%; color: #fff; content: '\02C5'; height: 55px; left: -1px; line-height: 55px; position: absolute; text-align: center; top: -5px; transition: all 0.3s ease 0s; width: 55px;
}
- accordion .card-title a.collapsed::after {
background: #fff none repeat scroll 0 0; border: 1px solid #bbb;
box-shadow: none;
color: #333; content: '\003E';
}
- accordion .card-body {
background: transparent none repeat scroll 0 0; border-top: medium none; padding: 20px 0 10px 9px; position: relative;
border: 1px solid #28a745; margin-right: 15px; }</style></html>
