MediaWiki:Chameleon.css: Difference between revisions

From Variscite Wiki
No edit summary
No edit summary
Line 89: Line 89:
background: var(--leaf-light);
background: var(--leaf-light);
}
}
#iqc-badges {
#iqc-badges {
     background-image: url(extensions/wikivisor/badges.png);
     background-image: url(extensions/wikivisor/badges.png);
Line 113: Line 112:
/* GRID */
/* GRID */


.w-90 {
width: 90%;
}
@media (max-width: 991px) {
.w-90 {
    width: 100%;
}
}


@media (min-width: 992px) {
@media (min-width: 992px) {
Line 131: Line 138:
}
}
}
}


/* FONT */
/* FONT */


body {
body {
font-family: Verdana, "DejaVu Sans", sans-serif;
/* font-family: Verdana, "DejaVu Sans", sans-serif; */
font-size: 9.5pt;
/* font-size: 9.5pt; */
    font-size: inherit;
     font-weight: 500;
     font-weight: 500;
     color: #000;
     color: #000;
Line 150: Line 159:


#p-personal .p-personal-tools, .p-personal .p-personal-tools {
#p-personal .p-personal-tools, .p-personal .p-personal-tools {
margin: 0;
margin: auto;
max-width: 1424px !important;
justify-content: flex-end !important;
}
}
.p-personal {
.p-personal {
background: linear-gradient(0deg, #e0dd9e, #eeebac);
background: #fff;
border-bottom: 1px solid #c5c5c5;
}
}
.p-personal .p-personal-tools > * {
.p-personal .p-personal-tools > * {
margin: 0 .5rem !important;
margin: 0 .5rem !important;
}
}
.p-personal a, .p-navbar a {
.p-personal a {
     color: var(--dark) !important;
     color: var(--dark) !important;
}
}
Line 169: Line 178:
/* LOGO */
/* LOGO */


#p-logo {
padding: 0 .5rem;
}
.p-logo img {
.p-logo img {
width: 287px;
width: auto;
height: 55px;
height: 33px !important;
}
}


/* NAVBAR */
/* NAVBAR */


.p-navbar {
.top-navbar {
border-top: 3px solid var(--dark);
    height: 90px;
box-shadow: 0 1px 3px #aaa;
    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: #000;
font-size: 14px;
padding: 0;
border: 0;
}
.top-navbar .nav-item a {
        white-space: nowrap;
}
.top-navbar .dropdown-menu a {
color: #f6f6f6 !important;
padding: .5rem 1rem !important;
}
.top-navbar .dropdown-menu a:hover {
background: #f56323 !important;
color: #fff !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;
}
.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
}
}


@media screen and ( max-width: 768px ) {
/* SEARCH */
#pt-mycontris {
 
display: none;
#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;
}
}
@media screen and ( max-width: 576px ) {
#pt-watchlist {
display: none;
}
}
}


Line 225: Line 381:
}
}
.first-heading {
    font-size: 2.1rem;
}
h1, .h1 {
h1, .h1 {
     font-size: 16pt;
     font-size: 16pt;
}
.mw-body .firstHeading {
    font-size: 24pt !important;
    font-weight: bold !important;
    border-bottom: 0 !important;
}
}
h2, .h2 {
h2, .h2 {
Line 355: Line 513:
}
}
p { margin: 0.4em 0 !important }
p { margin: 0.4em 0 !important }
/* BACK-TO-TOP */
.back-top {
bottom: 4.5rem;
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
}

Revision as of 19:27, 1 June 2021

/* 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: #000;
font-size: 14px;
padding: 0;
border: 0;
}
.top-navbar .nav-item a {
        white-space: nowrap;
}
.top-navbar .dropdown-menu a {
	color: #f6f6f6 !important;
	padding: .5rem 1rem !important;
}
.top-navbar .dropdown-menu a:hover {
	background: #f56323 !important;
	color: #fff !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; 
}
.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);
}

/* 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 10%;
}
}
@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: 4.5rem;
	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
}