Difference between revisions of "Template:PGS-style"
(Created page with "<html> <style> →Adding a logo: .logo { height: 160px; width: 290px; background-size: 240px; display: block; backgroun...") |
(No difference)
|
Latest revision as of 09:56, 19 July 2018
<html> <style>
/* Adding a logo */ .logo { height: 160px; width: 290px; background-size: 240px; display: block; background-image: url('http://www.gcpedia.gc.ca/gcwiki/images/8/8c/DSOCfD-LOGO.png'); background-repeat: no-repeat; background-position: center; padding-top: -10px; margin-top: 0px; } .logo-fr { height: 160px; width: 290px; background-size: 240px; display: block; background-image: url('http://www.gcpedia.gc.ca/wiki/File:CfD_logo_EN.jpeg'); background-repeat: no-repeat; background-position: 50% 60%; } /* Navigation starts here */
.navbar { margin-bottom: 0; position: fixed; width: 100%; border-radius: 0; border: 0; padding-bottom: 0; z-index: 1000; height: 59px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01), 0 1px 2px rgba(0, 0, 0, 0.06); } .navbar-toggle { position: relative; float: right; padding: 9px 10px; margin-top: 12px; margin-right: 15px; margin-bottom: 8px; background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 4px; } .navbar-default { background-color: rgba(255, 255, 255, 1); border-color: transparent; padding: 0px 60px; }
.navbar-default .navbar-nav>li>a { color: rgba(24, 57, 102, 1); font-weight: 400; border-bottom: 6px solid transparent; padding-top: 18px; } .navbar-default .navbar-nav>li>a:visited { color: #891374; }
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { color: #040063; background-color: transparent; border-bottom: 4px solid #040063; } .navbar-default .navbar-nav>li.active>a, .navbar-default .navbar-nav>li.active>a { color: #040063; background-color: transparent; border-bottom: 4px solid #040063; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { color: #040063; background-color: transparent; border-bottom: 4px solid #040063; } .navbar-default .navbar-brand { margin-top: -50px; min-height: 58px; } .navbar-collapse.collapsing, .navbar-collapse.collapse.in { background-color: #fff; } .dropdown-menu { padding: 0; border: 1px solid #f8f8f8; } .dropdown-menu>li>a { display: block; padding: 15px 20px; clear: both; font-weight: 400; line-height: 1.42857143; color: #333; white-space: nowrap; border-bottom: 1px dotted #ccc; } /*ul.nav li.dropdown:hover ul.dropdown-menu { display: block; }*/
/* Jumbotrons start here for different layouts. Images seem to have to be in JPG */
.j1 { background-color: #e5e5e5; color: #fff; background-image: url('https://cdn.pixabay.com/photo/2018/05/14/16/25/cyber-security-3400657_960_720.jpg'); background-position: 50% 40%; background-size: cover; background-repeat: no-repeat; min-height: 10vh; text-align: left; margin-bottom: 0; }
.j1-bk { background-color: rgba(0, 0, 0, 0.35); padding: 120px 0px 100px 0px; background-size: cover; background-repeat: no-repeat; min-height: 10vh; }
.j1 h1 { font-family: 'Lato', sans-serif; font-size: 12vmin; font-weight: 600; line-height: .9em; } .j2 { background-color: #e5e5e5; color: #fff; background-image: url('http://hdbackgroundspic.com/wp-content/uploads/2017/07/full-snowfall-on-mountain.jpg'); background-position: 50% 40%; background-size: cover; background-repeat: no-repeat; min-height: 10vh; text-align: center; margin-bottom: 0; }
.j2-bk { background-color: rgba(0, 0, 0, 0.35); padding: 120px 0px 100px 0px; background-size: cover; background-repeat: no-repeat; min-height: 10vh; }
.j2 h1 { font-family: 'Lato', sans-serif; font-size: 12vmin; font-weight: 600; line-height: .9em; }
.j3 { background-color: #e5e5e5; color: #fff; background-image: url('https://f.fwallpapers.com/images/snow-covered-mountains.jpg'); background-position: 50% 40%; background-size: cover; background-repeat: no-repeat; min-height: 10vh; text-align: center; margin-bottom: 0; }
.j3 h1 { font-family: 'Lato', sans-serif; font-size: 12vmin; font-weight: 600; line-height: .9em; } .j4 { height: 200px; color: #fff; background-color: blue; background-image: radial-gradient( pink, #4D37AB ); background-position: 50% 40%; background-size: cover; min-height: 10vh; text-align: center; margin-bottom: 0;
}
.j4 h1 { font-family: 'Lato', sans-serif; font-size: 12vmin; font-weight: 600; line-height: .9em; }
/* Button styling */
.button1 { background-color: rgba(24, 57, 102, 1); color: black; padding: 15px 15px; border-radius: 1rem; border: none; transition: all 0.3s ease-in-out; text-decoration: none; font-size: 17px; font-weight: 200px; }
.button1:visited { color: white; }
.button1:hover { background-color: #28dcf2; border-color: #28dcf2 2px solid; color: black; text-decoration: none; }
.center { align: center; }
.button2 { background-color: rgba(24, 57, 102, 1); font-size: 16px; color: white; float: left; padding: 10px; margin: 0px; border-radius: 1rem; border: none; transition: all 0.3s ease-in-out; text-decoration: none; }
.button2:hover { background-color: #28dcf2; border-color: #28dcf2 2px solid; color: black; text-decoration: none; }
.button2:visited { color: white; }
.clear { float: none; }
/* Need to figure out what mw-body is... */
.mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 { line-height: 1.6; margin-top: .3em; margin-bottom: 0; padding-bottom: .3em; padding-top: 0; } /* Tile styling */
a.tile-link:focus, a.tile-link:hover { text-decoration: none; } .tile { color:white ; padding: 0 0 25px; margin-bottom: 30px; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .tile img { width: 100%; height: 200px; -o-object-fit: cover; object-fit: cover; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .tile:hover img { -webkit-filter: brightness(.7); filter: brightness(.7) } .tile .title { padding: 10px 20px 0; text-align: center; height: 100px; } .tile:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } .tile p, .card-tradeshow p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-height: 16px; /* fallback */ max-height: 32px; /* fallback */ -webkit-line-clamp: 2; /* number of lines to show */ -webkit-box-orient: vertical; }
.card-tradeshow h4 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-height: 24px; /* fallback */ max-height: 48px; /* fallback */ -webkit-line-clamp: 1; /* number of lines to show */ -webkit-box-orient: vertical; }
/* TILE POPUP */
.modal { width: 100%; height: 100%; position: fixed; overflow: auto;
}
.modal-backdrop {
display:none !important;
}
.modal-backdrop.in { display:none !important; }
.modal p {
font-family:Open Sans, Arial, Helvetica, sans-serif !important; line-height: 21px;
color:black !important; margin: 0 0 10px !important; font-size:16px !important; }
.modal-body li {
margin-left:20px; line-height:22px; font-size:16px; font-family:Open Sans, Arial, Helvetica, sans-serif !important; color:#3C3C3C !important; }
.modal-body li:first-child{ margin-top:50px !important; }
.modal-footer h5{ font-weight:bold; font-size:18px; }
.modal-footer p { line-height:18px !important; font-size:16px; margin-bottom:0; font-family:Open Sans, Arial, Helvetica, sans-serif !important; color:#3C3C3C !important; }
- mw-content-text p:first-child br{
display:none; }
body {
z-index: 1 !important;
}
- catlinks{
display:none; }
.catlinks{ display:none; }
.noprint{ display:none; }
/*---------------------------CSS ONLY POPUP, NOT IN USE----*/
- adv
{
position:fixed;
z-index: 500;
top:40%; left:40%; width:600px; background-color:#EFF1F3; color:black; -khtml-opacity:0; -moz-opacity : 0; -ms-filter: "alpha(opacity=0)"; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); filter : alpha(opacity=0); opacity : 0; padding:20px; border-style:solid; border-radius:15px; border-color:#bbd8b3; transition:all 1s; -webkit-transition:all 1s;
}
- adv:target
{
-khtml-opacity:1; -moz-opacity : 1; -ms-filter: "alpha(opacity=100)"; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); filter : alpha(opacity=100); opacity : 1;
}
/* Close button */
- close
{
position:absolute; left:100%; top:-20px; margin-left:-10px; background-color:#EFF1F3; font-size:12px; padding:5px 7px; border-radius:50px; border-style:solid; border-color:#bbd8b3; font-weight:bold; color:#bbd8b3; text-decoration:none; font-family:arial;
}
- close:hover
{
background-color:#EFF1F3; border-color:#bbd8b3; color:#D77A61;
}
- close:active
{
background-color:#A9F5F2; color:black;
}
/*--------------------------END CSS POPUP----*/
/* to edit styles on GCPedia, go to: http://www.gcpedia.gc.ca/gcwiki/index.php?title=Template:Awesome-styles&action=edit */ /* home-tiles background colours */
.background-blue { background-color: rgba(4,48,90, 1); }
.background-blue:hover { background-color: rgba(93,53,93, 1); } .background-red { background-color: rgba (128,0,255); }
/* Home-tiles, cards, tradeshow-tiles, and menu stuff */ .home-tiles { margin-top: 20px; padding: 12px 0px 60px 0px; }
/* .tradeshow-tiles {
} ------------------*/ .tradeshow-tiles .intro { font-size: 18px; } .tradeshow-tiles h2 { color: #DB49AC; font-weight: 600; font-size: 5rem; margin: 30px auto; font-family: Arial, Helvetica, sans-serif; text-align: center; text-decoration: none; -webkit-transition: 2s ease; transition: 2s ease; } .card-tradeshow { margin: 20px auto; } .card-tradeshow img { -o-object-fit: cover; object-fit: cover; background-color: #eee; height: 150px; width: 100%; -webkit-transition: all .2s ease; transition: all .2s ease; } .card-tradeshow img:hover { -webkit-transform: translateY(-7px); transform: translateY(-7px); }
/* Styling containers and Sections */
.container { padding-top: 30px; margin-top: -30px; } .sec1 { background-color: rgba(250, 250, 250, 1); padding-bottom: 30px; }
.sec1 p {
margin: 20px 0px; }
.ud { border-bottom: 1px solid rgba(24, 57, 102, 1); margin: 0px; padding: 0px; }
.ud1 { border-top: 1px solid rgba(24, 57, 102, 1); margin: 0 auto; width: 300px; margin-top: 0px; padding-top: 0px; }
.ud2 { border-top: 1px solid rgba(24, 57, 102, 1); margin: 0 auto; width: 500px; margin-top: 0px; padding-top: 0px; }
.ud3 { border-top: 1px solid white; margin: 0 auto; width: 500px; margin-top: 0px; padding-top: 0px; }
/*-----------
.spacecol { padding: 0px 50px; }
*/
.carousel-caption { background-color: rgba(255,255,255,0.5); color: black;
font-size: 14px;
padding: 4px; }
.carousel img {
max-width:100%; max-height:350px;
}
.carousel-inner { margin: auto; max-width: 700px; }
.carousel-control.right, .carousel-control.left { color: rgba(24, 57, 102, 1);
}
.carousel { margin-top: 10px; }
.myCarousel1 .carousel-control.right, .myCarousel1 .carousel-control.left { background: none !important; filter: progid:none !important; color: rgba(24, 57, 102, 1);
}
.carousel-indicators li {
border-color: rgba(24, 57, 102, 1);
}
.carousel-indicators li.active {
background-color: rgba(24, 57, 102, 0.8);
}
.item h4 {
font-size: 19px; line-height: 1.375em; font-weight: 400; font-style: italic; margin: 70px 0;
}
.item span {
font-style: normal;
}
.item img {
width: 700px; height: 500px; }
.sec1 p { font-size: 16px; }
.sec3 { background-color: #e5e5e5; color: #ffffff; background-image: url('https://wallpapercave.com/wp/jsqj2Er.jpg'); position: static; background-position: 60% 40%; background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; min-height: 10vh; text-align: left; }
.sec3 p {
color: white; }
.sec3-bk {
background-color: rgba(0, 0, 0, 0.65); padding: 60px 0px; background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; min-height: 10vh; }
.sec4 { padding: 12px 0px 60px 0px; text-align: center; }
.sec4 p { font-size: 15px; text-align: center; }
#signup {
color: white; background-color: #fff;
background-image: url('http://www.gcpedia.gc.ca/gcwiki/images/d/d9/Mountains-clouds-forest-fog.jpg'); background-position: 100% 40%; background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; margin: 0px; padding: 0px; }
.sec4-bk { background-color: rgba(0, 0, 0, 0.3); background-size: cover; -webkit-background-size: cover; padding: 100px 0px; background-repeat: no-repeat; min-height: 10vh;
}
.sec5 { padding: 12px 0px 60px 0px; text-align: center; background-color: rgba(240, 240, 240, 1); border-top: 5px solid rgba(24, 57, 102, 1); }
.sec5 p { font-size: 15px; text-align: left; }
.div-right {
padding: 20px 0px 0px 0px; }
/* Styling images */
.img { width: 300px; height: 200px; draggable: false; }
.bubble {
width: 200px; height: 200px; opacity: 1.5; filter:alpha(opacity=50); text-align: center; float: right; margin-top: 35px; margin-right: 50px; }
/* Styling elements on home page only */
#mgn { margin-top: 40px; }
/* Styling elements on specific pages */
.aboutpage p { font-size: 16px; }
.tooltip {
position: relative; display: inline-block; border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
/*styling table for services page - search */
- {
box-sizing: border-box;
}
- myInput {
background-image: url('https://www.w3schools.com/css/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px;
}
- myTable {
border-collapse: collapse; width: 100%; padding: 0px 0px 0px 30px; border: 1px solid #ddd; font-size: 18px;
}
- myTable h4 {
font-size: 18px; font-weight: 400; }
- myTable th, #myTable td {
text-align: left; padding: 12px;
}
- myTable tr {
border-bottom: 1px solid #ddd;
}
- myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1; color: black;
}
/* Styling h2s */ .sec1 h2 { color: rgba(24, 57, 102, 1); font-weight: 550; font-size: 5rem; font-family: Arial, Helvetica, sans-serif; margin-bottom: 0px; padding-bottom: 0px; }
.sec2 h2 { color: rgba(24, 57, 102, 1); font-weight: 550; font-size: 5rem; font-family: Arial, Helvetica, sans-serif; text-align: center; margin-bottom: 0px; padding-bottom: 0px; }
.sec4 h2 { color: rgba(24, 57, 102, 1); font-weight: 550; text-align: center; font-size: 5rem; font-family: Arial, Helvetica, sans-serif; margin-bottom: 0px; padding-bottom: 0px; }
.sec4 #signup h2 { color: white; }
.sec5 h2 { color: rgba(24, 57, 102, 1); font-weight: 550; text-align: center; font-size: 5rem; margin: 30px 0px 0px 0px; font-family: Arial, Helvetica, sans-serif; }
.location-box { display: inline-block; padding: 3px 12px; margin: 20px auto 0; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; background-image: none; border-radius: 2px; border: 2px solid #DB49AC; }
/* Edit Footer */
.footer { background-color: rgba(24, 57, 102, 1); color: #fff; } .footer h2 { font-family: Arial, Helvetica, sans-serif; text-align: center; margin-bottom: 30px; margin-top: 10px; } .footer hr { margin: 10px auto; }
.footer p { text-align:center; } .footer a { color: #FFBBDA; }
.footer .glyphicon { font-size: 20px; display:block; text-align:center; margin: 10px 0px 10px 0px; color: #FFBBDA; }
.footer .glyphicon:hover { text-decoration: none; position: relative; top: -5px; }
#footerlogo { display: block; margin: 0 auto; height: 90px; width: 230px;
}
/* Styling tables */
table { color: #000000; background-color: #F0EDED; } table tr:first-child { background-color: #DB49AC; color: #fff; font-weight: 600; } table td:first-child, table h4 { font-weight: 300; max-width: 420px; }
table tr h4 { font-weight:200; } table tr h6 { color: #3d41a5; } table tr h5 { font-weight: 400; color: #222; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-height: 16px; /* fallback */ /*max-height: 64px;*/ /* fallback */ -webkit-line-clamp: 4; /* number of lines to show */ -webkit-box-orient: vertical; } .text-full { overflow: visible; max-height: none; display: block; }
table th, td { padding-left: 40px; padding-right: 40px; padding-top: 10px; padding-bottom: 10px; }
table td {
border-bottom: 1px solid #ffffff;
}
/* TEAM IMAGES */
.cs-style-3 figure span{ font-size:11px;
}
.grid { padding: 0px 20px 0px 20px; margin: 0 auto; list-style: none; text-align: center; }
.grid li { display: inline-block; width: 200px; margin: 0; padding: 20px; text-align: left; position: relative; }
.grid figure { margin: 0; position: relative; }
.grid figure img { max-width: 200px;
max-height: 200px;
display: block; position: relative;
margin:0 auto;
}
.grid figcaption { position: absolute; top: 0; left: 0; padding: 10px; background: #67163F; color: White;
line-height:16px;
}
.grid figcaption h3 { margin: 0;
text-align: left;
padding: 0; color: #fff;
font-size:12px; text-transform: uppercase;
}
.grid figcaption a { text-align: center; padding: 2px 5px; border-radius: 2.5px; margin-left: 5px; background: #737273; color: White;
font-size:14px;
}
.cs-style-3 figure { overflow: hidden; }
.cs-style-3 figure img {
-webkit-transition: opacity 1s; transition: opacity 0.5s;
}
.cs-style-3 figure:hover img, .cs-style-3 figure.cs-hover img { opacity:0.5;
}
.cs-style-3 figcaption { height: 90px; width: 100%; top: auto; bottom: 0; opacity: 0; -webkit-transform: translateY(100%);
transform: translateY(100%); -webkit-transition: transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.cs-style-3 figure:hover figcaption, .cs-style-3 figure.cs-hover figcaption { opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
.cs-style-3 figcaption a { position: absolute; bottom: 6px; left: 5px; }
</style>
</html>