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