MediaWiki:Chameleon.css: Difference between revisions
From Variscite Wiki
No edit summary |
m (1 revision imported) |
||
(35 intermediate revisions by 2 users not shown) | |||
Line 89: | Line 89: | ||
background: var(--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 { | #bodyContent a.external { | ||
color: #36b !important; | color: #36b !important; | ||
Line 102: | 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 111: | Line 129: | ||
@media (min-width: 1440px) { | @media (min-width: 1440px) { | ||
.container-fluid { | .container-fluid { | ||
max-width: | max-width: 1980px; | ||
} | } | ||
} | } | ||
Line 120: | Line 138: | ||
} | } | ||
} | } | ||
/* FONT */ | /* FONT */ | ||
body { | body { | ||
/* font-family: Verdana, "DejaVu Sans", sans-serif; */ | |||
/* font-size: 9.5pt; */ | |||
font-size: inherit; | |||
font-weight: 500; | font-weight: 500; | ||
color: #000; | color: #000; | ||
Line 139: | Line 159: | ||
#p-personal .p-personal-tools, .p-personal .p-personal-tools { | #p-personal .p-personal-tools, .p-personal .p-personal-tools { | ||
margin: | margin: auto; | ||
max-width: 1424px !important; | |||
justify-content: flex-end !important; | |||
} | } | ||
.p-personal { | .p-personal { | ||
background: | background: #fff; | ||
} | } | ||
.p-personal .p-personal-tools > * { | .p-personal .p-personal-tools > * { | ||
margin: 0 .5rem !important; | margin: 0 .5rem !important; | ||
} | } | ||
.p-personal | .p-personal a { | ||
color: var(--dark) !important; | color: var(--dark) !important; | ||
} | } | ||
Line 158: | Line 178: | ||
/* LOGO */ | /* LOGO */ | ||
#p-logo { | |||
padding: 0 .5rem; | |||
} | |||
.p-logo img { | .p-logo img { | ||
width: | width: auto; | ||
height: | height: 33px !important; | ||
} | } | ||
/* NAVBAR */ | /* NAVBAR */ | ||
.p-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 */ | |||
@media screen and ( max-width: 768px ) { | #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; | |||
} | } | ||
} | } | ||
Line 213: | Line 392: | ||
content: '.'; | content: '.'; | ||
} | } | ||
h1, .h1 { | h1, .h1 { | ||
font-size: | font-size: 16pt; | ||
} | |||
.mw-body .firstHeading { | |||
font-size: 24pt !important; | |||
font-weight: bold !important; | |||
border-bottom: 0 !important; | |||
} | } | ||
h2, .h2 { | h2, .h2 { | ||
font-size: | font-size: 14pt; | ||
} | } | ||
h3, .h3 { | h3, .h3 { | ||
font-size: | font-size: 13pt; | ||
} | } | ||
h4, .h4 { | h4, .h4 { | ||
font-size: | font-size: 12pt; | ||
} | } | ||
h5, .h5 { | h5, .h5 { | ||
font-size: | font-size: 11pt; | ||
} | } | ||
h6, .h6 { | h6, .h6 { | ||
Line 239: | Line 423: | ||
padding: 6px 12px; | padding: 6px 12px; | ||
box-shadow: 0 1px 2px rgba(0,0,0,.2); | box-shadow: 0 1px 2px rgba(0,0,0,.2); | ||
} | |||
.catlinks { | |||
border: 0; | |||
background-color: transparent; | |||
padding: 0; | |||
} | } | ||
Line 276: | Line 466: | ||
/* MAIN PAGE */ | /* MAIN PAGE */ | ||
.card-deck .card { | |||
.page-Main_Page .card-deck .card { | |||
width:auto !important; | width:auto !important; | ||
} | } | ||
@media ( min-width: 576px ) { | @media ( min-width: 576px ) { | ||
.card-deck .card { | .page-Main_Page .card-deck .card { | ||
flex: 0 0 20%; | |||
} | } | ||
} | } | ||
.card- | @media ( min-width: 768px ) { | ||
.page-Main_Page .card-deck .card { | |||
width: | 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 PAGE */ | ||
Line 307: | Line 513: | ||
} | } | ||
} | } | ||
.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; | |||
} | } |
Latest revision as of 23:20, 5 December 2023
/* 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;
}