|
Difference between revisions of "MediaWiki:Common.css"
Jump to navigation
Jump to search
(Created page with "→CSS placed here will be applied to all skins: .new-blockColor1 { background-color: #fcfcfc; border: 1px solid #e3e3e3; } .new-blockColor2 { background-color: #fff...") |
|||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
+ | /* CSS placed here will be applied to all skins */ | ||
+ | .top_banners .banner_1 { | ||
+ | display: inline-block; | ||
+ | width: 64%; | ||
+ | } | ||
+ | |||
+ | .top_banners .banner_2 { | ||
+ | display: inline-block; | ||
+ | width: 34%; | ||
+ | } | ||
+ | |||
+ | .top_banners img { | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | .top_banners p { | ||
+ | padding: 0px; | ||
+ | margin: 0px; | ||
+ | } | ||
+ | |||
+ | .wiki-columns:before, | ||
+ | .wiki-columns:after { | ||
+ | content: ""; | ||
+ | display: table; | ||
+ | } | ||
+ | |||
+ | .wiki-columns:after { | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | .wiki-columns { | ||
+ | display: flex; | ||
+ | flex-wrap: wrap; | ||
+ | margin-left: -10px; | ||
+ | margin-right: -10px; | ||
+ | margin-bottom: 1em; | ||
+ | } | ||
+ | |||
+ | .wiki-columns > * { | ||
+ | float: left; | ||
+ | box-sizing: border-box; | ||
+ | padding: 0 10px; | ||
+ | margin: 1em 0px; | ||
+ | } | ||
+ | |||
+ | .wiki-columns.wiki-columns-4 > * { | ||
+ | width: 25%; | ||
+ | width: calc(25% - 1px); | ||
+ | } | ||
+ | |||
+ | .wiki-columns.wiki-columns-3 > * { | ||
+ | width: 33.3%; | ||
+ | width: calc(33.3% - 1px); | ||
+ | } | ||
+ | |||
+ | .wiki-columns.wiki-columns-2 > * { | ||
+ | width: 50%; | ||
+ | width: calc(50% - 1px); | ||
+ | } | ||
+ | |||
+ | .wiki-columns .wiki-column table { | ||
+ | width: 100%; | ||
+ | padding: 4px; | ||
+ | background: #f7f6f6; | ||
+ | border: 1px solid #efefef; | ||
+ | height: 100%; | ||
+ | display: block; | ||
+ | margin: 0px; | ||
+ | } | ||
+ | |||
+ | .wiki-columns .wiki-column th { | ||
+ | margin: 3px; | ||
+ | font-size: 120%; | ||
+ | font-weight: bold; | ||
+ | border: 1px solid transparent; | ||
+ | text-align: left; | ||
+ | padding: 0.2em 0.4em; | ||
+ | } | ||
+ | |||
+ | .wiki-columns .wiki-column td { | ||
+ | border: 0px; | ||
+ | vertical-align: top; | ||
+ | background: none; | ||
+ | padding: 0.2em 0.4em; | ||
+ | } | ||
+ | |||
+ | .wiki-columns .wiki-column th { | ||
+ | background: #efefef; | ||
+ | border: 1px solid #efefef; | ||
+ | } | ||
+ | |||
+ | .wiki-columns .wiki-column-red table { | ||
+ | border: 1px solid #ffc9c9; | ||
+ | background: #fff3f3; | ||
+ | } | ||
+ | |||
+ | .wiki-columns .wiki-column-red th { | ||
+ | background: #ffe2e2; | ||
+ | border: 1px solid #ffe2e2; | ||
+ | } | ||
+ | |||
+ | .wiki-columns .wiki-column-blue table { | ||
+ | border: 1px solid #c6c9ff; | ||
+ | background: #f0f0ff; | ||
+ | } | ||
+ | |||
+ | @media (max-width: 1000px) { | ||
+ | .wiki-columns .wiki-column { | ||
+ | width: 100%; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .wiki-columns .wiki-column-blue th { | ||
+ | background: #cedff2; | ||
+ | border: 1px solid #cedff2; | ||
+ | } | ||
+ | |||
+ | .wiki-columns > .wiki-columns > .wiki-column { | ||
+ | margin-top: 0; | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | |||
+ | .wiki-card { | ||
+ | text-align: center; | ||
+ | border: 0; | ||
+ | margin-bottom: 0px; | ||
+ | background-color: #fcfcfc; | ||
+ | border: 1px solid #e1e1e1; | ||
+ | border-radius: 5px; | ||
+ | width: 100%; | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | .wiki-card table { | ||
+ | width: 100%; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | |||
+ | .responsive-image img { | ||
+ | max-width: 100%; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | .responsive-image pre { | ||
+ | display: flex; | ||
+ | padding: 0px; | ||
+ | margin: 0px; | ||
+ | border: 0px; | ||
+ | background: none; | ||
+ | } | ||
+ | |||
+ | .mb-default { | ||
+ | margin-bottom: 14px; | ||
+ | } | ||
+ | |||
+ | .border-image img { | ||
+ | border: 1px solid #f2f2f2; | ||
+ | } | ||
+ | |||
+ | .top-social { | ||
+ | display: flex; | ||
+ | align-items: center; | ||
+ | justify-content: flex-end; | ||
+ | } | ||
+ | |||
+ | .changelly-button { | ||
+ | height: 30px; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .changelly-button img { | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | .top-social pre { | ||
+ | padding: 0px; | ||
+ | margin: 0px; | ||
+ | border: 0px; | ||
+ | line-height: initial; | ||
+ | background: none; | ||
+ | display: block; | ||
+ | white-space: initial; | ||
+ | } | ||
+ | |||
+ | .top-social .wiki-share { | ||
+ | display: flex; | ||
+ | } | ||
+ | |||
+ | .share-buttons { | ||
+ | margin-right: 7px; | ||
+ | } | ||
+ | |||
+ | .top-social .likely-small .likely__widget { | ||
+ | line-height: 26px; | ||
+ | height: 30px; | ||
+ | padding: 0px 8px; | ||
+ | } | ||
+ | |||
+ | .top-social .likely-small .likely__icon { | ||
+ | width: 25px; | ||
+ | height: 25px; | ||
+ | } | ||
+ | |||
+ | .top-social .likely-small svg { | ||
+ | top: 7px; | ||
+ | width: 17px; | ||
+ | height: 17px; | ||
+ | } | ||
+ | |||
+ | /*.slick-list{ max-width: 1590px;}*/ | ||
+ | |||
+ | /* MAIN PAGE SPECIAL STYLES */ | ||
+ | /* Greeting plate */ | ||
+ | .wiki-card_flex { | ||
+ | display: flex; | ||
+ | flex-wrap: wrap; | ||
+ | justify-content: space-around; | ||
+ | } | ||
+ | .wiki-card__list::before { | ||
+ | content: ''; | ||
+ | display: inline-block; | ||
+ | height: 100%; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | .wiki-card__list { | ||
+ | font-size: 0; | ||
+ | } | ||
+ | .wiki-card__list ul { | ||
+ | text-align: left; | ||
+ | display: inline-block; | ||
+ | vertical-align: middle; | ||
+ | width: 100%; | ||
+ | font-size: 0.9rem; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | /* News on the front page */ | ||
+ | #news-column-widget .ct-widget__body { | ||
+ | max-height: none !important; | ||
+ | } | ||
+ | #news-column-widget .simplebar-track { | ||
+ | display: none; | ||
+ | } | ||
+ | #news-column-widget .ct-widget { | ||
+ | background-color: transparent !important; | ||
+ | padding: 0 !important; | ||
+ | } | ||
+ | |||
+ | /* Interesting projects on the front page */ | ||
+ | #interesting-projects-table { | ||
+ | /* display: table; */ | ||
+ | } | ||
+ | #interesting-projects-table img, | ||
+ | #interesting-projects-table iframe { | ||
+ | max-width: 100%; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | /* Structure table */ | ||
+ | .wiki-columns .wiki-column .fp-structure-table { | ||
+ | background: transparent; | ||
+ | border: none; | ||
+ | border-collapse: collapse; | ||
+ | display: table; | ||
+ | } | ||
+ | .fp-structure-table { | ||
+ | table-layout: fixed; | ||
+ | } | ||
+ | .fp-structure-table .wiki-columns { | ||
+ | height: 100%; | ||
+ | } | ||
+ | .fp-structure-table .wiki-columns > .wiki-column { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | .wiki-columns .wiki-column .fp-structure-table > tbody > tr > td, | ||
+ | .fp-structure-table > tbody > tr > td, | ||
+ | .fp-structure-table > tr > td { | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | /* Current prices */ | ||
+ | .current-prices-block tbody { | ||
+ | display: table; | ||
+ | width: 100%; | ||
+ | } | ||
+ | #marquee-container { | ||
+ | background: transparent !important; | ||
+ | } | ||
+ | #marquee-container .ccc-header-v3-price-logo { | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | #marquee-container .ccc-header-v3-price-value { | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | #marquee-container .ccc-header-v3-ccc-price-container { | ||
+ | width: 210px; | ||
+ | margin-right: auto; | ||
+ | } | ||
+ | #marquee-inner { | ||
+ | line-height: 1.4 !important; | ||
+ | } | ||
+ | #marquee-element { | ||
+ | white-space: normal; | ||
+ | display: flex; | ||
+ | flex-wrap: wrap; | ||
+ | justify-content: space-around; | ||
+ | } | ||
+ | |||
+ | /* Front page main banner */ | ||
+ | .fp-main-banner a { | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | } | ||
+ | .fp-main-banner img { | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | } | ||
+ | /* END MAIN PAGE SPECIAL STYLES */ | ||
+ | |||
+ | |||
+ | .your-class img { | ||
+ | max-width: calc(100vw - 225px) !important; | ||
+ | } | ||
+ | |||
+ | .media-min-769 { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | @media (min-width: 769px) { | ||
+ | .media-min-769 { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .media-max-768 { | ||
+ | display: none; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .nodesktop { | ||
+ | display: none; | ||
+ | } | ||
+ | .mwe-math-mathml-a11y { | ||
+ | clip: auto !important; | ||
+ | overflow: visible !important; | ||
+ | position: static !important; | ||
+ | width: auto !important; | ||
+ | height: auto !important; | ||
+ | opacity: 1 !important; | ||
+ | } | ||
+ | .mwe-math-fallback-image-inline, .mwe-math-fallback-image-display { | ||
+ | display: none !important; | ||
+ | } | ||
+ | |||
+ | You can then easily change the style of MathML formulas e.g. to set the math font: | ||
+ | |||
+ | .mw-body, mtext { | ||
+ | font-family: Latin Modern Roman; | ||
+ | } | ||
+ | math { | ||
+ | font-family: Latin Modern Math; | ||
+ | } | ||
+ | |||
+ | /* NEW STYLES */ | ||
+ | |||
.new-blockColor1 { | .new-blockColor1 { | ||
background-color: #fcfcfc; | background-color: #fcfcfc; |
Latest revision as of 08:51, 23 February 2019
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */
.top_banners .banner_1 {
display: inline-block;
width: 64%;
}
.top_banners .banner_2 {
display: inline-block;
width: 34%;
}
.top_banners img {
width: 100%;
height: auto;
}
.top_banners p {
padding: 0px;
margin: 0px;
}
.wiki-columns:before,
.wiki-columns:after {
content: "";
display: table;
}
.wiki-columns:after {
clear: both;
}
.wiki-columns {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-right: -10px;
margin-bottom: 1em;
}
.wiki-columns > * {
float: left;
box-sizing: border-box;
padding: 0 10px;
margin: 1em 0px;
}
.wiki-columns.wiki-columns-4 > * {
width: 25%;
width: calc(25% - 1px);
}
.wiki-columns.wiki-columns-3 > * {
width: 33.3%;
width: calc(33.3% - 1px);
}
.wiki-columns.wiki-columns-2 > * {
width: 50%;
width: calc(50% - 1px);
}
.wiki-columns .wiki-column table {
width: 100%;
padding: 4px;
background: #f7f6f6;
border: 1px solid #efefef;
height: 100%;
display: block;
margin: 0px;
}
.wiki-columns .wiki-column th {
margin: 3px;
font-size: 120%;
font-weight: bold;
border: 1px solid transparent;
text-align: left;
padding: 0.2em 0.4em;
}
.wiki-columns .wiki-column td {
border: 0px;
vertical-align: top;
background: none;
padding: 0.2em 0.4em;
}
.wiki-columns .wiki-column th {
background: #efefef;
border: 1px solid #efefef;
}
.wiki-columns .wiki-column-red table {
border: 1px solid #ffc9c9;
background: #fff3f3;
}
.wiki-columns .wiki-column-red th {
background: #ffe2e2;
border: 1px solid #ffe2e2;
}
.wiki-columns .wiki-column-blue table {
border: 1px solid #c6c9ff;
background: #f0f0ff;
}
@media (max-width: 1000px) {
.wiki-columns .wiki-column {
width: 100%;
}
}
.wiki-columns .wiki-column-blue th {
background: #cedff2;
border: 1px solid #cedff2;
}
.wiki-columns > .wiki-columns > .wiki-column {
margin-top: 0;
margin-bottom: 0;
}
.wiki-card {
text-align: center;
border: 0;
margin-bottom: 0px;
background-color: #fcfcfc;
border: 1px solid #e1e1e1;
border-radius: 5px;
width: 100%;
clear: both;
}
.wiki-card table {
width: 100%;
padding: 10px;
}
.responsive-image img {
max-width: 100%;
height: auto;
}
.responsive-image pre {
display: flex;
padding: 0px;
margin: 0px;
border: 0px;
background: none;
}
.mb-default {
margin-bottom: 14px;
}
.border-image img {
border: 1px solid #f2f2f2;
}
.top-social {
display: flex;
align-items: center;
justify-content: flex-end;
}
.changelly-button {
height: 30px;
display: block;
}
.changelly-button img {
height: 100%;
}
.top-social pre {
padding: 0px;
margin: 0px;
border: 0px;
line-height: initial;
background: none;
display: block;
white-space: initial;
}
.top-social .wiki-share {
display: flex;
}
.share-buttons {
margin-right: 7px;
}
.top-social .likely-small .likely__widget {
line-height: 26px;
height: 30px;
padding: 0px 8px;
}
.top-social .likely-small .likely__icon {
width: 25px;
height: 25px;
}
.top-social .likely-small svg {
top: 7px;
width: 17px;
height: 17px;
}
/*.slick-list{ max-width: 1590px;}*/
/* MAIN PAGE SPECIAL STYLES */
/* Greeting plate */
.wiki-card_flex {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.wiki-card__list::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.wiki-card__list {
font-size: 0;
}
.wiki-card__list ul {
text-align: left;
display: inline-block;
vertical-align: middle;
width: 100%;
font-size: 0.9rem;
margin: 0;
}
/* News on the front page */
#news-column-widget .ct-widget__body {
max-height: none !important;
}
#news-column-widget .simplebar-track {
display: none;
}
#news-column-widget .ct-widget {
background-color: transparent !important;
padding: 0 !important;
}
/* Interesting projects on the front page */
#interesting-projects-table {
/* display: table; */
}
#interesting-projects-table img,
#interesting-projects-table iframe {
max-width: 100%;
height: auto;
}
/* Structure table */
.wiki-columns .wiki-column .fp-structure-table {
background: transparent;
border: none;
border-collapse: collapse;
display: table;
}
.fp-structure-table {
table-layout: fixed;
}
.fp-structure-table .wiki-columns {
height: 100%;
}
.fp-structure-table .wiki-columns > .wiki-column {
margin-bottom: 0;
}
.wiki-columns .wiki-column .fp-structure-table > tbody > tr > td,
.fp-structure-table > tbody > tr > td,
.fp-structure-table > tr > td {
padding: 0;
}
/* Current prices */
.current-prices-block tbody {
display: table;
width: 100%;
}
#marquee-container {
background: transparent !important;
}
#marquee-container .ccc-header-v3-price-logo {
margin-right: 5px;
}
#marquee-container .ccc-header-v3-price-value {
margin-right: 5px;
}
#marquee-container .ccc-header-v3-ccc-price-container {
width: 210px;
margin-right: auto;
}
#marquee-inner {
line-height: 1.4 !important;
}
#marquee-element {
white-space: normal;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
/* Front page main banner */
.fp-main-banner a {
display: block;
width: 100%;
}
.fp-main-banner img {
width: 100%;
height: auto;
}
/* END MAIN PAGE SPECIAL STYLES */
.your-class img {
max-width: calc(100vw - 225px) !important;
}
.media-min-769 {
display: none;
}
@media (min-width: 769px) {
.media-min-769 {
display: block;
}
.media-max-768 {
display: none;
}
}
.nodesktop {
display: none;
}
.mwe-math-mathml-a11y {
clip: auto !important;
overflow: visible !important;
position: static !important;
width: auto !important;
height: auto !important;
opacity: 1 !important;
}
.mwe-math-fallback-image-inline, .mwe-math-fallback-image-display {
display: none !important;
}
You can then easily change the style of MathML formulas e.g. to set the math font:
.mw-body, mtext {
font-family: Latin Modern Roman;
}
math {
font-family: Latin Modern Math;
}
/* NEW STYLES */
.new-blockColor1 {
background-color: #fcfcfc;
border: 1px solid #e3e3e3;
}
.new-blockColor2 {
background-color: #fff3f3;
border: 1px solid #ffc0c0;
}
.new-blockColor3 {
background-color: #f0f0ff;
border: 1px solid #bdbdff;
}
.new-card {
display: flex;
}
.new-card:not(:last-child) {
margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
.new-card {
display: block;
}
.new-card .floatleft {
max-width: 50%;
margin: 0 auto 10px;
}
}
.new-col {
flex: 1 1 auto;
}
.new-col--20 {
flex-basis: 20%;
}
.new-col--40 {
flex-basis: 40%;
}
.new-col--60 {
flex-basis: 60%;
}
.new-col--80 {
flex-basis: 80%;
}
.new-col--vertical {
display: flex;
flex-flow: column;
}
@media screen and (max-width: 768px) {
.new-col--vertical {
margin-top: 10px;
}
}
.new-col:not(:last-child) {
margin-right: 10px;
}
@media screen and (max-width: 768px) {
.new-col:not(:last-child) {
margin-right: 0;
}
}
.new-textAlignCenter {
text-align: center;
}
.new-head {
padding: 10px;
margin: 10px;
}
.new-headColor1 {
background-color: #efefef;
}
.new-headColor2 {
background-color: #ffdada;
}
.new-headColor3 {
background-color: #d7d7ff;
}
.new-content {
padding: 0 10px 10px;
}
.new-row:not(:last-child) {
margin-bottom: 10px;
}
.new-fillSpace {
flex: 1;
}
.new-list {
display: flex;
}
@media screen and (max-width: 768px) {
.new-list {
display: block;
}
}
@media screen and (max-width: 768px) {
.new-mobileListCenter {
list-style: none;
}
.new-mobileListCenter ul,
.new-mobileListCenter li {
margin: 0;
padding: 0;
}
}
.new-list-half {
flex: 1 1 50%;
}
@media screen and (max-width: 768px) {
.new-mobileTextAlignCenter {
text-align: center;
}
}
#marquee-container .ccc-header-v3-ccc-price-container {
width: auto;
flex-basis: 50%;
}
@media screen and (max-width: 768px) {
#marquee-container .ccc-header-v3-ccc-price-container {
flex-basis: 100%;
}
}
.new-noHead {
padding: 10px 0;
}