11
edits
Changes
Jump to navigation
Jump to search
Template:DFO-IM-gcplus-css-override (view source)
Revision as of 09:50, 30 March 2020
, 09:50, 30 March 2020Created page with "<html> <style> /* ===== override.css Purpose: To override the initial core.css styles. Dependancy: - core.css (runs first) -- override.css (runs second) Author: Marco Ba..."
<html>
<style>
/* =====
override.css
Purpose: To override the initial core.css styles.
Dependancy:
- core.css (runs first)
-- override.css (runs second)
Author: Marco Battilana (marco.battilana@dfo-mpo.gc.ca) - Fisheries and Oceans Canada
Twitter: @crazybat
Revision History:
****
Version 1.0
(26 Oct 2018)
- Brought in existing GCpedia functionality for pages. Uses same links, just styled and displayed different.
Known Issues:
- Incorporate additional GCpedia functionality: Language flipper, log in, etc. (PARTIALLY SOLVED! Still need to bring over remaining GCpedia items)
-- Search GCpedia
-- Categories
-- Others???
****
References:
GCpedicure: www.gcpedia.gc.ca/wiki/GCpedicure
Bootstrap: getbootstrap.com
*/
/* ==== To override the initial override from core.css. DO NOT REMOVE ==== */
/* === GCpedia Head content (Personal, GCpedia Tools) === */
div#mw-head {
position: absolute;
top: -145px;
display: block;
height: 0;
}
div#mw-head #left-navigation,
div#mw-head #right-navigation .pull-left,
div#mw-head #right-navigation #p-cactions {
display: none;
}
div#mw-head #p-personal {
position: fixed;
/*bottom: -97px;*/
bottom: -109px;
/*right: 140px;*/
right: 82px;
display: block;
width: auto;
}
/* == NOTE: The Eng / Fr button only changed the language of GCpedia UI, NOT YOUR CONTENT. ==*/
div#mw-head #right-navigation #p-views {
position: fixed;
/*bottom: -30px;*/
bottom: -40px;
display: block;
right: 20px;
}
div#mw-head #right-navigation #p-views ul {
background: #eee;
border: solid hsla(0, 0%, 96%, 0.5);
transition: 0.2s;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
div#mw-head #p-personal ul {
transition: 0.2s;
}
div#mw-head #right-navigation #p-views ul::before {
color: white;
background: #222;
display: block;
float: right;
margin-bottom: 5px;
content: ' Views \A\A\A\A\A';
white-space: pre-wrap;
position: relative;
top: -30px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: solid 1px #777;
padding: 0 5px;
}
div#mw-head #p-personal ul::before {
color: white;
background: #222;
display: block;
float: right;
margin-bottom: 5px;
content: ' Personal Tools \A\A\A\A';
white-space: pre-wrap;
position: relative;
top: -30px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: solid 1px #777;
padding: 0 5px;
}
div#mw-head #right-navigation #p-views:hover {
bottom: 30px;
transition: 0.2s;
z-index: 10000;
}
div#mw-head #p-personal:hover {
/*bottom: -35px;*/
bottom: -43px;
transition: 0.2s;
}
div#mw-head #right-navigation #p-views ul li,
div#mw-head #p-personal ul li {
background-image: none;
background: #eee;
height: 30px;
text-align: center;
}
div#mw-head #right-navigation #p-views ul li#ca-ve-edit {
display: none;
}
div#mw-head #right-navigation #p-search #simpleSearch {
height: inherit;
position: fixed;
right: 16px;
top: 29px;
}
/*TO DO Have search show on very small devices, but results don't show very well on older template. Staying invisible for now.*/
@media (max-width: 767px) {
div#mw-head #right-navigation #p-search {
display: none;
}
}
@media screen {
div#mw-head #right-navigation #p-search #simpleSearch #searchInput {
font-size: inherit;
padding: 0 0 0 5px;
}
}
@media screen {
div#mw-head #right-navigation #p-search #simpleSearch input {
background-color: none;
}
}
@media screen {
div#simpleSearch #searchButton, div#simpleSearch #mw-searchButton {
background-color: #ccc;
}
}
.icon#ca-unfavorite a, .icon#ca-favorite a {
padding-top: 2.3em;
}
@media screen {
div.vectorTabs {
background-image: none;
background-image: none !ie;
}
}
@media screen {
div.vectorTabs span {
display: inherit;
background-image: none;
background-image: none !ie;
}
}
@media screen {
div.vectorTabs ul {
height: auto;
}
}
@media screen {
div.vectorTabs ul li {
line-height: 0;
}
}
@media screen {
#p-personal {
top: auto;
background: #eee;
border: solid hsla(0, 0%, 96%, 0.5);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
}
@media screen {
#p-personal ul {
padding-left: 0;
}
}
@media screen {
#p-personal li {
font-size: 0.8em;
padding: 0 0.375em;
}
}
/*TO DO: Figure out a way to make GCpedia tools not sticky on the footer with small resolutions. For now, don't show as it's hard to edit a GCpedia page with such a small window.*/
@media (max-width: 767px) {
div#mw-head #right-navigation #p-views {
display: none;
}
}
@media (max-width: 767px) {
div#mw-head #p-personal {
display: none;
}
}
/* === GCpedia Left Navigation content === */
/* == Eng / Fr button (Used to flip the language of your CONTENT ==*/
div#mw-panel {
position: absolute;
left: -9999px;
display: block;
}
div#mw-panel #p-lang .interlanguage-link {
position: fixed;
top: -2px;
right: 17px;
display: block;
font-size: inherit;
}
@media (max-width: 767px) {
div#mw-panel #p-lang .interlanguage-link {
position: fixed;
/*top: -4px;*/
left: 0;
width: 95px;
height: 0px;
}
}
div#mw-panel #p-lang .interlanguage-link a {
color: #fff;
/*padding: 15px;*/
padding-left: 71px;
padding-right: 71px;
line-height: 2.1rem;
display: block;
/*background: #333;*/
/*border: solid 1px #aaa;*/
font-weight: bold;
}
@media (max-width: 767px) {
div#mw-panel #p-lang .interlanguage-link a {
line-height: 0;
padding-left: 10px;
padding-right: 10px;
display: inline;
}
}
div#mw-panel #p-lang .interlanguage-link a::after {
/*content:'';
display:block;
width:0px;
height:2px;
background:#00d6fe;
transition: 0.2s;*/
}
div#mw-panel #p-lang .interlanguage-link a:hover::after {
/*width:100%;*/
}
</style>
</html>
<style>
/* =====
override.css
Purpose: To override the initial core.css styles.
Dependancy:
- core.css (runs first)
-- override.css (runs second)
Author: Marco Battilana (marco.battilana@dfo-mpo.gc.ca) - Fisheries and Oceans Canada
Twitter: @crazybat
Revision History:
****
Version 1.0
(26 Oct 2018)
- Brought in existing GCpedia functionality for pages. Uses same links, just styled and displayed different.
Known Issues:
- Incorporate additional GCpedia functionality: Language flipper, log in, etc. (PARTIALLY SOLVED! Still need to bring over remaining GCpedia items)
-- Search GCpedia
-- Categories
-- Others???
****
References:
GCpedicure: www.gcpedia.gc.ca/wiki/GCpedicure
Bootstrap: getbootstrap.com
*/
/* ==== To override the initial override from core.css. DO NOT REMOVE ==== */
/* === GCpedia Head content (Personal, GCpedia Tools) === */
div#mw-head {
position: absolute;
top: -145px;
display: block;
height: 0;
}
div#mw-head #left-navigation,
div#mw-head #right-navigation .pull-left,
div#mw-head #right-navigation #p-cactions {
display: none;
}
div#mw-head #p-personal {
position: fixed;
/*bottom: -97px;*/
bottom: -109px;
/*right: 140px;*/
right: 82px;
display: block;
width: auto;
}
/* == NOTE: The Eng / Fr button only changed the language of GCpedia UI, NOT YOUR CONTENT. ==*/
div#mw-head #right-navigation #p-views {
position: fixed;
/*bottom: -30px;*/
bottom: -40px;
display: block;
right: 20px;
}
div#mw-head #right-navigation #p-views ul {
background: #eee;
border: solid hsla(0, 0%, 96%, 0.5);
transition: 0.2s;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
div#mw-head #p-personal ul {
transition: 0.2s;
}
div#mw-head #right-navigation #p-views ul::before {
color: white;
background: #222;
display: block;
float: right;
margin-bottom: 5px;
content: ' Views \A\A\A\A\A';
white-space: pre-wrap;
position: relative;
top: -30px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: solid 1px #777;
padding: 0 5px;
}
div#mw-head #p-personal ul::before {
color: white;
background: #222;
display: block;
float: right;
margin-bottom: 5px;
content: ' Personal Tools \A\A\A\A';
white-space: pre-wrap;
position: relative;
top: -30px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: solid 1px #777;
padding: 0 5px;
}
div#mw-head #right-navigation #p-views:hover {
bottom: 30px;
transition: 0.2s;
z-index: 10000;
}
div#mw-head #p-personal:hover {
/*bottom: -35px;*/
bottom: -43px;
transition: 0.2s;
}
div#mw-head #right-navigation #p-views ul li,
div#mw-head #p-personal ul li {
background-image: none;
background: #eee;
height: 30px;
text-align: center;
}
div#mw-head #right-navigation #p-views ul li#ca-ve-edit {
display: none;
}
div#mw-head #right-navigation #p-search #simpleSearch {
height: inherit;
position: fixed;
right: 16px;
top: 29px;
}
/*TO DO Have search show on very small devices, but results don't show very well on older template. Staying invisible for now.*/
@media (max-width: 767px) {
div#mw-head #right-navigation #p-search {
display: none;
}
}
@media screen {
div#mw-head #right-navigation #p-search #simpleSearch #searchInput {
font-size: inherit;
padding: 0 0 0 5px;
}
}
@media screen {
div#mw-head #right-navigation #p-search #simpleSearch input {
background-color: none;
}
}
@media screen {
div#simpleSearch #searchButton, div#simpleSearch #mw-searchButton {
background-color: #ccc;
}
}
.icon#ca-unfavorite a, .icon#ca-favorite a {
padding-top: 2.3em;
}
@media screen {
div.vectorTabs {
background-image: none;
background-image: none !ie;
}
}
@media screen {
div.vectorTabs span {
display: inherit;
background-image: none;
background-image: none !ie;
}
}
@media screen {
div.vectorTabs ul {
height: auto;
}
}
@media screen {
div.vectorTabs ul li {
line-height: 0;
}
}
@media screen {
#p-personal {
top: auto;
background: #eee;
border: solid hsla(0, 0%, 96%, 0.5);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
}
@media screen {
#p-personal ul {
padding-left: 0;
}
}
@media screen {
#p-personal li {
font-size: 0.8em;
padding: 0 0.375em;
}
}
/*TO DO: Figure out a way to make GCpedia tools not sticky on the footer with small resolutions. For now, don't show as it's hard to edit a GCpedia page with such a small window.*/
@media (max-width: 767px) {
div#mw-head #right-navigation #p-views {
display: none;
}
}
@media (max-width: 767px) {
div#mw-head #p-personal {
display: none;
}
}
/* === GCpedia Left Navigation content === */
/* == Eng / Fr button (Used to flip the language of your CONTENT ==*/
div#mw-panel {
position: absolute;
left: -9999px;
display: block;
}
div#mw-panel #p-lang .interlanguage-link {
position: fixed;
top: -2px;
right: 17px;
display: block;
font-size: inherit;
}
@media (max-width: 767px) {
div#mw-panel #p-lang .interlanguage-link {
position: fixed;
/*top: -4px;*/
left: 0;
width: 95px;
height: 0px;
}
}
div#mw-panel #p-lang .interlanguage-link a {
color: #fff;
/*padding: 15px;*/
padding-left: 71px;
padding-right: 71px;
line-height: 2.1rem;
display: block;
/*background: #333;*/
/*border: solid 1px #aaa;*/
font-weight: bold;
}
@media (max-width: 767px) {
div#mw-panel #p-lang .interlanguage-link a {
line-height: 0;
padding-left: 10px;
padding-right: 10px;
display: inline;
}
}
div#mw-panel #p-lang .interlanguage-link a::after {
/*content:'';
display:block;
width:0px;
height:2px;
background:#00d6fe;
transition: 0.2s;*/
}
div#mw-panel #p-lang .interlanguage-link a:hover::after {
/*width:100%;*/
}
</style>
</html>
