MediaWiki:Chameleon.css
From Variscite Wiki
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* COLOR */
:root {
--blue: #00bef5;
--green: #a4c639;
--darkblue: #4f9df2;
--orange: #fea53f;
--grey: #545454;
--pink: #d70751;
--default: #e1e4e7;
--plate: #006c5e;
--leaf: #41cd81;
--green-light: #eaf5df;
--darkblue-light: #d7e4f2;
--orange-light: #ffecd7;
--grey-light: #e3e3e3;
--pink-light: #f1d8e1;
--blue-light: #e0f7fd;
--default-light: #f7f7f7;
--plate-light: #5c967e;
--leaf-light: #e0fdf1;
--breakpoint-xs: 0;
--breakpoint-sm: 768px;
--breakpoint-md: 992px;
--breakpoint-lg: 1200px;
--breakpoint-cmln: 1356px;
--breakpoint-xl: 1920px;
}
.bg-main {
background: #0055a5;
}
.bg-blue {
background: var(--blue);
}
.bg-green {
background: var(--green);
}
.bg-darkblue {
background: var(--darkblue);
}
.bg-orange {
background: var(--orange);
}
.bg-grey, .bg-gray {
background: var(--grey);
}
.bg-pink {
background: var(--pink);
}
.bg-default {
background: var(--default);
}
.bg-plate {
background: var(--plate);
}
.bg-leaf {
background: var(--leaf);
}
.bg-purple {
background: var(--purple);
}
.bg-blue-light {
background: var(--blue-light);
}
.bg-green-light {
background: var(--green-light);
}
.bg-darkblue-light {
background: var(--darkblue-light);
}
.bg-orange-light {
background: var(--orange-light);
}
.bg-grey-light, .bg-gray-light {
background: var(--grey-light);
}
.bg-pink-light {
background: var(--pink-light);
}
.bg-default-light {
background: var(--default-light);
}
.bg-plate-light {
background: var(--plate-light);
}
.bg-leaf-light {
background: var(--leaf-light);
}
#iqc-badges {
background-image: url(extensions/wikivisor/badges.png);
height: 140px;
background-repeat: no-repeat;
background-size: contain;
background-color: #f9f9f9;
background-blend-mode: multiply;
}
.card-light {
background-color: #f9f9f9;
}
#bodyContent a.external {
color: #36b !important;
}
:visited {
color: #5a3696 !important;
}
:link, a {
color: #039 !important;
}
/* GRID */
.w-90 {
width: 90%;
}
@media (max-width: 991px) {
.w-90 {
width: 100%;
}
}
@media (min-width: 992px) {
.container-fluid {
width: 90%;
}
}
@media (min-width: 1440px) {
.container-fluid {
max-width: 1980px;
}
}
@media (min-width: 2300px) {
.container-fluid {
max-width: 2100px;
}
}
/* FONT */
body {
/* font-family: Verdana, "DejaVu Sans", sans-serif; */
/* font-size: 9.5pt; */
font-size: inherit;
font-weight: 500;
color: #000;
}
.pagetools, .pagetools .tab-group, #p-personal .p-personal-tools, .p-personal .p-personal-tools {
font-size: inherit;
}
.error, .warning, .success {
font-size: inherit;
}
/* PERSONAL */
#p-personal .p-personal-tools, .p-personal .p-personal-tools {
margin: auto;
max-width: 1424px !important;
justify-content: flex-end !important;
}
.p-personal {
background: #fff;
}
.p-personal .p-personal-tools > * {
margin: 0 .5rem !important;
}
.p-personal a {
color: var(--dark) !important;
}
.p-personal a:before, .pagetools a:before {
display: none;
}
/* LOGO */
#p-logo {
padding: 0 .5rem;
}
.p-logo img {
width: auto;
height: 33px !important;
}
/* NAVBAR */
.top-navbar {
height: 90px;
display: flex;
align-items: center;
font-size: 16px;
}
.top-navbar #mw-navigation > .navbar-nav {
width: 100%;
}
.top-navbar .navbar-tool a.navbar-userloggedin:before,
.top-navbar .navbar-tool a.navbar-usernotloggedin:before,
.top-navbar .usernotloggedin a.nav-link {
width: 90px;
margin: 0;
/* background: #f56323;
color: #fff !important; */
text-align:center;
font-weight: bold !important;
}
.top-navbar .navbar-tool a.navbar-userloggedin:before,
.top-navbar .navbar-tool a.navbar-usernotloggedin:before {
margin-top: -15px;
padding: .65rem;
font-family: Roboto, sans-serif;
}
.top-navbar .navbar-tool a.navbar-userloggedin:before {
content: 'Personal';
}
.top-navbar .navbar-tool a.navbar-usernotloggedin:before {
content: 'Log in';
}
.top-navbar .p-tb-toggle:before {
display: none !important;
}
.navbar-tools {
padding-right: 0 !important;
}
.p-navbar a {
color: var(--dark) !important;
}
.p-navbar a:hover {
color: #039 !important;
}
.top-navbar .navbar-nav > .nav-item:hover > a.nav-link,
.top-navbar .navbar-nav > .secondary menu > .nav-item:hover > a.nav-link {
color: #039 !important;
}
/*
.editor-menu {
position: sticky;
z-index: 1020;
}
*/
.editor-menu {
top: 0px;
font-size: 14px !important;
}
@media screen and ( max-width: 991px ) {
.top-navbar { height: auto; }
.top-navbar #mw-navigation > .navbar-nav {
flex-direction: column;
align-items: center;
}
.p-tb-dropdown {
display: none;
}
.navbar-brand {
margin: 1rem 0 .25rem .5rem !important;
}
.secondary-menu {
font-size: 14px;
}
.p-navbar.not-collapsible .navbar-nav .nav-link {
padding-left:.5rem;
padding-right:.5rem;
}
}
/* DROPDOWNS */
.dropdown-menu.show {
z-index: 1040;
border-radius: 0;
}
.top-navbar .dropdown-menu {
background: #fff;
font-size: 14px;
padding: 0;
border: 0;
}
.top-navbar .nav-item a {
white-space: nowrap;
}
.top-navbar .dropdown-menu a {
color: #000 !important;
padding: .5rem 1rem !important;
}
.top-navbar .dropdown-menu a:hover {
background: #fff !important;
color: #ff5f46 !important;
}
.navbar-brand {
margin: 0 0 0 .5rem;
}
.navbar-brand img {
top: 0 !important;
}
/* FOOTER */
.bottom-footer {
background: #262626;
}
.bottom-footer a {
color: #fff !important;
}
.footer-info > div, .footer-places > div, .footer-icons > div {
font-size: 90%;
}
.bottom-wrapper {
overflow-y: hidden;
margin-top: 240px;
background-color: #262626;
min-height: 400px;
padding: 60px 0 25px;
/* z-index: 101; */
position: relative;
display: flex;
align-items: baseline;
}
/**
.bottom-skew {
background: #262626;
height: 300px;
margin-top: 100px;
transform: skewY(3.3deg);
-webkit-transform: skewY(3.3deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
margin-bottom: -200px;
}
**/
.copyright {
font-size: 14px
}
/* SEARCH */
#searchform {
margin: 0 !important;
}
#p-search, #p-search * {
border-radius: 0;
box-shadow: none;
border: none;
}
.p-search .searchGoButton, .p-search .mw-searchButton, .p-search .searchGoButton a {
color: #e6e6e6 !important;
background: #282828;
}
.p-search .searchGoButton:hover, .p-search .mw-searchButton:hover, .p-search .searchGoButton:hover a {
color: #e6e6e6 !important;
background: #f56323;
}
#searchInput {
border: 1px solid #282828;
}
@media screen and ( max-width: 768px ){
#searchform {
margin: 0 0 0 1rem !important;
}
}
/* FIXES */
#top.top {
background: none;
border: 0;
padding: 0;
}
/* MONOSPACE */
.mw-highlight .lineno {
color: #aaa;
}
/* TOC */
.toc { font-size: inherit; }
/* BADLY DISABLED TITLE ON THE SOURCE WIKI */
.ns-0 #firstHeading {
display: none;
}
.mw-parser-output {
padding-top: 1rem;
}
/* HEADERS */
.mw-headline-number:after, .tocnumber:after {
content: '.';
}
h1, .h1 {
font-size: 16pt;
}
.mw-body .firstHeading {
font-size: 24pt !important;
font-weight: bold !important;
border-bottom: 0 !important;
}
h2, .h2 {
font-size: 14pt;
}
h3, .h3 {
font-size: 13pt;
}
h4, .h4 {
font-size: 12pt;
}
h5, .h5 {
font-size: 11pt;
}
h6, .h6 {
font-size: inherit !important;
}
/* CATLINKS */
#mw-normal-catlinks {
background: #f1f1f1;
padding: 6px 12px;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.catlinks {
border: 0;
background-color: transparent;
padding: 0;
}
/* PRE */
.mw-code {
white-space: pre-wrap;
}
pre, .mw-code {
color: #000;
background-color: #f1f1f1;
border: 0;
padding: 1em;
font-size: 100%;
}
pre {
padding-left: 2rem;
border-left: 4px solid #0457a6;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
overflow: auto;
overflow-y: hidden;
white-space: pre;
}
/* TOGGLER */
.navbar-toggler {
padding: 0.1rem 0.65rem;
font-size: 1.5rem;
border: 0;
border-radius: 0;
margin-right: -15px;
}
.navbar-collapse {
align-items: start;
}
/* MAIN PAGE */
.page-Main_Page .card-deck .card {
width:auto !important;
}
@media ( min-width: 576px ) {
.page-Main_Page .card-deck .card {
flex: 0 0 20%;
}
}
@media ( min-width: 768px ) {
.page-Main_Page .card-deck .card {
flex: 0 0 15%;
}
}
@media ( min-width: 992px ) {
.page-Main_Page .card-deck .card {
flex: 0 0 13%;
}
}
@media ( min-width: 1480px ) {
.page-Main_Page .position-md-absolute {
position: absolute !important;
}
.page-Main_Page .card-deck .card {
flex: 0 0 11%;
}
}
/**
@media ( min-width: 2000px ) {
.page-Main_Page .card-deck .card {
flex: 0 0 8%;
}
}
**/
/* PRODUCT PAGE */
.product-header {
max-width: 340px !important;
}
@media ( max-width: 768px ) {
.product-header {
max-width: unset !important;
}
}
.specs {
flex: 0 0 360px !important;
}
ol, ul, dl {
margin-top: .25rem;
margin-bottom: .25rem;
}
dl dl {
margin-left: 1rem;
}
.history .dropdown {
display: none;
}
.history a.ca-history:before {
display: none;
}
.table th, .table td {
padding: 0.5rem;
}
p { margin: 0.4em 0 !important }
/* BACK-TO-TOP */
.back-top {
bottom: 4rem;
border-radius: 0;
color: #fff;
height: 52px;
line-height: 52px;
position: fixed;
text-align: center;
transition: all .3s ease-in-out;
visibility: hidden;
width: 52px;
cursor: pointer;
pointer-events: initial !important;
z-index: 1060;
background-color: #f56323;
right: 0;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
opacity: 1;
}
.back-top:hover {
pointer-events:initial;
opacity: 1;
}
.back-top:hover i {
transform: rotate(720deg);
transition: all .75s;
}
.top-navbar {
max-width: 1480px !important
}
.secondary-menu ul ul {
min-width: 220px !important;
}