Difference between revisions of "Template:DFO-IM-gcplus css"

Latest revision as of 09:49, 30 March 2020

/* ===== 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 { margin-top: 0; padding-left: 70px; } div[class*="container"] ol { margin-top: 0; padding-left: 20px; }

div[class*="container"] dl { margin-top: 0; padding-left: 50px; }

ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; }*/

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; }

/*div[class*="container"] .btn-group {

 display: 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:#00d6fe; 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:#00d6fe; } .nav-link { padding:15px 5px; transition:0.2s; } .dropdown-item.active, .dropdown-item:active { color:#212529; } .dropdown-item:focus, .dropdown-item:hover { background:#00d6fe; }

/* == 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 == */ /* == 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; }

/*== 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>

Difference between revisions of "Template:DFO-IM-gcplus css"

Latest revision as of 09:49, 30 March 2020

Navigation menu

Search