wiki

Template:TBSBS-head

Revision as of 11:56, 4 October 2019 by Travis.gobeil (talk | contribs) (Created page with "<!-- SECTIONS OF THIS FILE (search for 'sec#') Sec1 : Bootstrap & Icon CSS Sec2 : Custom CSS Styles (ATIP) ========= Sec1 : Bootstrap & Icon CSS ========= --> <html> <head...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

<html> 

 <head>

   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

<style>

.text-danger * { color: #CD202C !important; }

html, body { height: 100%; -webkit-animation: fadein .5s; animation: fadein .5s; }

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

@-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

body { overflow-y: hidden; background-color: #f8f8f8; padding-right: 0; top: 0; font-family: sans-serif; font-size: 1rem; }

.super-body { position: fixed; overflow-y: scroll; overflow-x: hidden; -ms-overflow-x: hidden; top: 0; left: 0; right: 0; bottom: 0; z-index: 990; background-color: #ffffff; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; }

/* Remove MediaWiki objects */ #mw-panel, #footer { display: none; }

/* Show/Hide MediaWiki Header */ body.mw-head--open .super-body { 

    top: 125px;

}

  1. content {
    position: relative;
    z-index: 990;

}

/* HIDE Visual Editor */

  1. ca-ve-edit { display: none; }

.zoom { transition: .3s ease-in-out; }

.zoom:hover { transform: translate(0px,-3px) scale(1.05); }

/* BOOTSTRAP 4 TBS THEME ================================= ========================================================== ========================================================== */

/* JUMBOTRON =================================== */

.jumbotron { background: #E6EBED; display: block; position: relative; z-index: 0; border-radius: 0; }

.jumbotron::after { content: ""; /* background-image: url(https://raw.githubusercontent.com/gctools-outilsgc/design-system/master/project_mgmt/Aurora-Banner-large.png); */ background-image: url(http://www.gcpedia.gc.ca/gcwiki/images/d/d7/IPPD-bg-test1%402x-min.png); background-size: cover; background-position: center center; background-repeat: no-repeat;

opacity: 0.25; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }

.jumbotron--styleb::after { background-image: url(http://www.gcpedia.gc.ca/gcwiki/images/2/2d/Pattern-whitecolour.png); background-repeat: repeat; background-size:auto; opacity: 0.15; }

/* TEXT COLOURS =================================== */

.text-primary { color: #005172 !important; } .text-secondary { color: #ccdc00 !important; } .text-success { color: #278400 !important; } .text-danger { color: #CD202C !important; } .text-warning { color: #ffa011 !important; } .text-info { color: #3095B4 !important; } .text-light { color: #c0cad0 !important; } .text-dark { color: #21282d !important; } .text-muted { color: #6a7f8e !important; } .text-white { color: #FFFFFF !important; }

.text-secondary:hover, .text-secondary a:hover { color: #ebfe00 !important; }

/* BACKGROUND COLOURS =================================== */

.bg-primary { background-color: #005172 !important; } .bg-secondary { background-color: #ccdc00 !important; } .bg-success { background-color: #278400 !important; } .bg-danger { background-color: #CD202C !important; } .bg-warning { background-color: #ffa011 !important; } .bg-info { background-color: #3095B4 !important; } .bg-light { background-color: #d3dadf !important; } .bg-dark { background-color: #37424A !important; } .bg-white { background-color: #FFFFFF !important; }

.bg-primary { background: #002c49; background: -moz-linear-gradient(-45deg, #002c49 0%, #3095B4 100%); background: -webkit-linear-gradient(-45deg, #002c49 0%,#3095B4 100%); background: linear-gradient(135deg, #002c49 0%,#3095B4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002c49', endColorstr='#3095B4',GradientType=1 ); }

.bg-secondary { background: #ccdc00; background: -moz-linear-gradient(-45deg, #ccdc00 0%, #f6ff87 100%); background: -webkit-linear-gradient(-45deg, #ccdc00 0%,#f6ff87 100%); background: linear-gradient(135deg, #ccdc00 0%,#f6ff87 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccdc00', endColorstr='#f6ff87',GradientType=1 ); }

.bg-success--gradient { background: #278400 !important; background: -moz-linear-gradient(-45deg, #278400 0%, #36b700 100%) !important; background: -webkit-linear-gradient(-45deg, #278400 0%,#36b700 100%) !important; background: linear-gradient(135deg, #278400 0%,#36b700 100%) !important; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#278400', endColorstr='#36b700',GradientType=1 ) !important; }

.bg-danger--gradient { background: #CD202C !important; background: -moz-linear-gradient(-45deg, #CD202C 0%, #e13f4a 100%) !important; background: -webkit-linear-gradient(-45deg, #CD202C 0%,#e13f4a 100%) !important; background: linear-gradient(135deg, #CD202C 0%,#e13f4a 100%) !important; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CD202C', endColorstr='#e13f4a',GradientType=1 ) !important; }

.bg-warning--gradient { background: #ffa011 !important; background: -moz-linear-gradient(-45deg, #ffa011 0%, #ffb444 100%) !important; background: -webkit-linear-gradient(-45deg, #ffa011 0%,#ffb444 100%) !important; background: linear-gradient(135deg, #ffa011 0%,#ffb444 100%) !important; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa011', endColorstr='#ffb444',GradientType=1 ) !important; }

.bg-info--gradient { background: #3095B4 !important; background: -moz-linear-gradient(-45deg, #3095B4 0%, #49afce 100%) !important; background: -webkit-linear-gradient(-45deg, #3095B4 0%,#49afce 100%) !important; background: linear-gradient(135deg, #3095B4 0%,#49afce 100%) !important; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3095B4', endColorstr='#49afce',GradientType=1 ) !important; }

.bg-light--gradient { background: #e7ebed !important; background: -moz-linear-gradient(-45deg, #e7ebed 0%, #fbfbfc 100%) !important; background: -webkit-linear-gradient(-45deg, #e7ebed 0%,#fbfbfc 100%) !important; background: linear-gradient(135deg, #e7ebed 0%,#fbfbfc 100%) !important; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7ebed', endColorstr='#fbfbfc',GradientType=1 ) !important; }

.bg-dark--gradient { background: #37424A !important; background: -moz-linear-gradient(-45deg, #37424A 0%, #4d5c67 100%) !important; background: -webkit-linear-gradient(-45deg, #37424A 0%,#4d5c67 100%) !important; background: linear-gradient(135deg, #37424A 0%,#4d5c67 100%) !important; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#37424A', endColorstr='#4d5c67',GradientType=1 ) !important; }

/* ALERTS =================================== */

.alert-primary { background-color: #d8f4ff; border-color: #a5e5ff; color: #00212e; }

.alert-secondary { background-color: #fbffcb; border-color: #ccdc00; color: #005172; }

.alert-success { background-color: #e4ffd9; border-color: #a8ff84; color: #0e2f00; }

.alert-danger { background-color: #fedcdd; border-color: #fcbbbd; color: #810507; }

.alert-warning { background-color: #ffebcc; border-color: #ffcf88; color: #774700; }

.alert-info { background-color: #d9f0f7; border-color: #92d5e9; color: #155567; }

.alert-light { background-color: #fbfbfc; border-color: #dee3e6; color: #21282d; }

.alert-dark { background-color: #37424a; border-color: #21282d; color: #d4dadf; }

.alert-dark .alert-link { color: white; }

/* BADGES =================================== */

.badge-primary { background-color: #005172; } .badge-success { background-color: #278400; } .badge-danger { background-color: #CD202C; } .badge-warning { background-color: #ffa011; } .badge-info { background-color: #3095B4; }

/* BUTTONS =================================== */

.btn-wrap { white-space: normal !important; }

.btn-primary, .btn-primary:link, .btn-primary:visited { background: #005172 !important; border-color: #003950 !important; color: white; }

.btn-primary.disabled, .btn-primary:disabled { background: #005172 !important; opacity: 0.65; }

.btn-primary:not(:disabled):not(.disabled):hover, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus { background: #006994 !important; border-color: #003950 !important; }

.btn-secondary, .btn-secondary:link, .btn-secondary:visited { background: #ccdc00; border-color: #adba00; color: #005172; }

.btn-secondary.disabled, .btn-secondary:disabled { background: #ccdc00; opacity: 0.65; color: #005172; }

.btn-secondary:not(:disabled):not(.disabled):hover, .btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-secondary.dropdown-toggle:focus { background: #ebfe00; color: #005172; border-color: #adba00; }

.btn-success, .btn-success:link, .btn-success:visited { background: #278400; border-color: #1d6200; 

               color: white;

}

.btn-success.disabled, .btn-success:disabled { background: #278400; opacity: 0.65; }

.btn-success:not(:disabled):not(.disabled):hover, .btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show>.btn-success.dropdown-toggle:focus { background: #31a600; border-color: #1d6200; }


.btn-warning, .btn-warning:link, .btn-warning:visited { background: #ffa011; border-color: #ee8f00; color: white; }

.btn-warning.disabled, .btn-warning:disabled { background: #ffa011; opacity: 0.65; }

.btn-warning:not(:disabled):not(.disabled):hover, .btn-warning:not(:disabled):not(.disabled).active:focus, .btn-warning:not(:disabled):not(.disabled):active:focus, .show>.btn-warning.dropdown-toggle:focus { background: #ffae33; border-color: #ee8f00; }

.btn-danger, .btn-danger:link, .btn-danger:visited { background: #CD202C; border-color: #b01b26; color: white; }

.btn-danger.disabled, .btn-danger:disabled { background: #CD202C; opacity: 0.65; }

.btn-danger:not(:disabled):not(.disabled):hover, .btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus, .show>.btn-danger.dropdown-toggle:focus { background: #df303c; border-color: #b01b26; }

.btn-info, .btn-info:link, .btn-info:visited { background: #3095B4; border-color: #297f99; color: white; }

.btn-info.disabled, .btn-info:disabled { background: #3095B4; opacity: 0.65; }

.btn-info:not(:disabled):not(.disabled):hover, .btn-info:not(:disabled):not(.disabled).active:focus, .btn-info:not(:disabled):not(.disabled):active:focus, .show>.btn-info.dropdown-toggle:focus { background: #3ba9cb; border-color: #297f99; }

.btn-light, .btn-light:link, .btn-light:visited { background: #d3dadf; border-color: #adbac1; color: #212121; }

.btn-light.disabled, .btn-light:disabled { background: #d3dadf; opacity: 0.65; }

.btn-light:not(:disabled):not(.disabled):hover, .btn-light:not(:disabled):not(.disabled).active:focus, .btn-light:not(:disabled):not(.disabled):active:focus, .show>.btn-light.dropdown-toggle:focus { background: #f1f3f4; border-color: #adbac1; }

.btn-dark, .btn-dark:link, .btn-dark:visited { background: #37424A; border-color: #293137; color: white; }

.btn-dark.disabled, .btn-dark:disabled { background: #37424a; opacity: 0.65; }

.btn-dark:not(:disabled):not(.disabled):hover, .btn-dark:not(:disabled):not(.disabled).active:focus, .btn-dark:not(:disabled):not(.disabled):active:focus, .show>.btn-dark.dropdown-toggle:focus { background: #4d5c67; border-color: #293137; }

.btn-link, .btn-link:link, .btn-link:visited { color: #005172; }

.btn-link.disabled, .btn-link:disabled { color: #005172; opacity: 0.65; }

.btn-link:not(:disabled):not(.disabled):hover, .btn-link:not(:disabled):not(.disabled).active:focus, .btn-link:not(:disabled):not(.disabled):active:focus, .show>.btn-link.dropdown-toggle:focus { color: #3095b4; }

.btn-accordion::before { font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 2rem; line-height: 1.33rem; content: "\f107"; display: block; float: right; }

.btn-accordion.collapsed::before { content: "\f105" }

/* CARD =================================== */

/* DISABLED .card { background: #f8f8f8; } */

/* LIST ITEMS =================================== */

.list-group-item { padding: .75rem 1.25rem !important; }

.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { background-color: #005172; border-color: #003950; }

.list-group-item-action:not(.active):focus, .list-group-item-action:not(.active):hover { background-color: #b6eaff; }

.list-group-item.disabled, :disabled.list-group-item { color: #6a7f8e; background-color: #f1f3f5; }

.list-group-item.active .badge-primary { color: #005172; background-color: white; }


.list-group-item-primary { background-color: #d8f4ff; border-color: #a5e5ff; color: #00212e; }

.list-group-item-primary.list-group-item-action:focus, .list-group-item-primary.list-group-item-action:hover { background-color: #94e0ff; border-color: #61d1ff; color: #00212e; }

.list-group-item-secondary { background-color: #fbffcb; border-color: #ccdc00; color: #005172; }

.list-group-item-secondary.list-group-item-action:focus, .list-group-item-secondary.list-group-item-action:hover { background-color: #f6ff87; border-color: #adba00; color: #00212e; }

.list-group-item-success { background-color: #e4ffd9; border-color: #a8ff84; color: #0e2f00; }

.list-group-item-success.list-group-item-action:focus, .list-group-item-success.list-group-item-action:hover { background-color: #b4ff95; border-color: #78ff40; color: #040d00; }

.list-group-item-danger { background-color: #fedcdd; border-color: #fcbbbd; color: #810507; }

.list-group-item-danger.list-group-item-action:focus, .list-group-item-danger.list-group-item-action:hover { background-color: #fb9b9d; border-color: #fa7a7c; color: #400204; }

.list-group-item-warning { background-color: #ffebcc; border-color: #ffcf88; color: #774700; }

.list-group-item-warning.list-group-item-action:focus, .list-group-item-warning.list-group-item-action:hover { background-color: #ffcf88; border-color: #ffb444; color: #331f00; }

.list-group-item-info { background-color: #d9f0f7; border-color: #92d5e9; color: #155567; }

.list-group-item-info.list-group-item-action:focus, .list-group-item-info.list-group-item-action:hover { background-color: #a0dbec; border-color: #68c5e0; color: #09262f; }

.list-group-item-light { background-color: #fbfbfc; border-color: #dee3e6; color: #21282d; }

.list-group-item-light.list-group-item-action:focus, .list-group-item-light.list-group-item-action:hover { background-color: #d4dadf; border-color: #b7c1c9; color: #040506; }

.list-group-item-dark { background-color: #37424a; border-color: #21282d; color: #d4dadf; }


.list-group-item-dark.list-group-item-action:focus, .list-group-item-dark.list-group-item-action:hover { background-color: #546571; border-color: #040506; color: white; }

/* NAV / NAVBAR =================================== */

/* HEADER EXCEPTIONS ONLY */ .navbar.navbar--en, .navbar.navbar--fr { border-radius: 0 !important; margin-bottom: 0 !important; box-shadow: 0 -2px 8px rgba(0,0,0,0.45); z-index: 1003; }

.navbar.navbar--en ul.navbar-nav, .navbar.navbar--fr ul.navbar-nav { margin-bottom: 0; }

/* Center child items in a navbar */ .nav-justified .nav-item { align-self: center; }

/* PILLS */

.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: #005172; }

/* .nav-pills .nav-link { background-color: #e9ecef; }

.nav-pills .nav-link::hover { background-color: #d4dadf; } */

.nav--footer .nav-link { padding-top: 0; padding-bottom: 0; }

.navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,0.6); }

.navbar-dark .navbar-nav .nav-link:hover { color: rgba(255,255,255,1); background: transparent; }

/* Align items center (for navs with long titles) .nav { align-items: center; }


/* PROGRESS =================================== */

.progress-bar { background-color: #005172; }

/* FOOTER =================================== */ footer { background-color: #37424a; color: white; padding: 15px 0 5px 0; }

footer *:hover { background: transparent !important; }

/* =========================================================== GCPEDIA FIXES START HERE ============================================================== - Specific fixes to the GCPedia MediaWiki CSS - Overrides A.gcpedia.css, A.load.php, and ahost of others... ============================================================== ============================================================== */

/* Override Default MW Styles */ h1, .mw-body h1, .h1, h2, .mw-body h2, .h2, h3, .mw-body h3, .h3, h4, .mw-body h4, .h4, h5, .mw-body h5, .h5, h6, .mw-body h6, .h6 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold !important; border-bottom: none !important; margin-bottom: 0.4em; margin-top: 0 !important; padding: 0 !important; color: inherit; line-height: 1.1; } h2, .mw-body h2, .h2 { margin-bottom: 0.6em; } h3, .mw-body h3, .h3, h4, .mw-body h4, .h4 { margin-top: 0.25em; margin-bottom: 0.5em; }

h5, .mw-body h5, .h5, h6, .mw-body h6, .h6 { margin-top: 0.35em; margin-bottom: 0.7em; }

h1, .mw-body h1, .h1 { font-size: 2.4rem; } h2, .mw-body h2, .h2 { font-size: 1.8rem; } h3, .mw-body h3, .h3 { font-size: 1.4rem; } h4, .mw-body h4, .h4 { font-size: 1.1rem; } h5, .mw-body h5, .h5 { font-size: 0.9rem; text-transform: uppercase; border-top: 1px dotted rgba(0,0,0,0.3); padding-top: 0.2em !important;} h6, .mw-body h6, .h6 { font-size: 0.7rem; text-transform: uppercase; }

p, .mw-body p, .p { font-size: 0.9rem; line-height: 1.6; margin-bottom: 1em; } 

       .jumbotron h1, .jumbotron .h1 { font-size: 3.6rem; }

.jumbotron h2, .jumbotron .h2 { font-size: 2.7rem; } .jumbotron h3, .jumbotron .h3 { font-size: 2.4rem; } .jumbotron h4, .jumbotron .h4 { font-size: 1.8rem; } .jumbotron h5, .jumbotron .h5 { font-size: 1.4rem; } .jumbotron h6, .jumbotron .h6 { font-size: 1.1rem; } .jumbotron p { font-size: 1.33rem; }

.secondary .row h2 a, .secondary .row h3 a, .secondary .row h4 a, .home .row h2 a, .home .row h3 a, .home .row h4 a { font-size: inherit !important; }

blockquote { 

border-left-color: #005172;

}

.navbar { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin-top: 0 !important; padding: 0 !important; color: inherit; }

.navbar-brand { float: none; padding: 0 0 0 0.75em; font-size: 18px; font-weight: bold !important; line-height: 40px; height: 40px; flex: auto; }

.navbar-brand img { height: 40px; margin: 0 0 0 0.25em; padding: 0; }

a.navbar-brandːhover { opacityː 0.5 ǃimporant; }

.navbar.navbar--en { display: flex; } .navbar.navbar--fr { display: none; }

.super-body.fr .navbar.navbar--en { display:none; } .super-body.fr .navbar.navbar--fr { display: flex; }

@media (min-width: 768px) { .navbar-collapse.collapse { display: flex !important; } }

footer { margin-top: 40px; }

footer.footer--en { display: flex; } footer.footer--fr { display: none; }

.super-body.fr footer.footer--en { display:none; } .super-body.fr footer.footer--fr { display: flex; }



ul.nav, ol.breadcrumb { margin-left: 0; }

a:link, a:visited { color: #0076A7; /*3095b4; */ }

a:hover { color: #00A0E0; /* 005172; */ text-decoration: underline !important; }


hr { background-color: transparent !important; }

.super-body .text-white a:not(.btn), .super-body .text-light a:not(.btn) { color: rgba(255,255,255,0.7); }

.super-body .text-white a:not(.btn):hover, .super-body .text-light a:not(.btn):hover { color: #ccdc00; }

.super-body .bg-warning a:not(.btn) { color: rgba(255,255,255,0.7); }

.super-body .bg-warning a:not(.btn):hover { color: rgba(255,255,255,0.7); }

.mw-body-content { font-size: 0.875em; }

.mw-content-ltr ol, .mw-content-rtl .mw-content-ltr ol { padding: .75rem 1rem; margin-left: 0; }

.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul { /* disabled margin-left: 0; */ margin-bottom: 1em; list-style-image: none; }

.mw-content-ltr ul li, .mw-content-rtl .mw-content-ltr ul li { padding-left: 0.25em; padding-bottom: 0.25em; }

.form-check-input, input[type="radio"], input[type="checkbox"] { margin-left: -1.25rem; }

.alert > :first-child::before { position: relative; left: -4px; }

.alert > :first-child { margin-left: 0 !important; /* DISABLED */ }

.modal-backdrop { display: none !important; }

.modal { background: rgba(0,0,0,0.5); }

.collapse.show { visibility: visible; }

.modal.show .modal-dialog { -webkit-transform: translate(0,0); transform: translate(0,0); }

.modal-content { background: white; }

.fade { opacity: 1; }

.dropdown-menu { font-size: 0.875rem; }

a.list-group-item-dark { color: #d4dadf; }

.list-group { margin-left: 0 !important; }

.input-group { display: flex; }

.input-group-addon, .input-group-btn, .input-group .form-control { display: flex; }

.input-group .form-control { width: auto; }

/* FIX LANGUAGE BUG - adds extra

if you use the <multilang> tag... */ main > p, main > p + p, nav > p .super-body > p { height: 0; margin: 0 !important; overflow: hidden; } /* REMOVE LANGUAGE LINK FROM GCPedia TOP NAVIGATION */ #app-brand #wb-lng { visibility: hidden !important; } /* EQUAL HEIGHT ROWS and CARDS */ .row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .row-eq-height .card { height: 100%; } </style> </head> <body> <section class="super-body </html>{{{langClass}}}<html>"> </html>

Retrieved from "https://wiki.gccollab.ca/index.php?title=Template:TBSBS-head&oldid=12891"