MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
Created page with "→CSS placed here will be applied to all skins: →****************** * Navboxes ******************: .navbox { width: 100%; background: white; color: black;..." |
No edit summary |
||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
/* Base CSS classes for demo. If you wish to use Mbox on your wiki, only copy the below. */ | |||
.mbox { | |||
--type-important: rgba(200, 0, 0, 0.8); | |||
--type-moderate: rgba(233, 124, 47, 0.8); | |||
--type-minor: rgba(241, 197, 37, 0.8); | |||
display: flex; | |||
position: relative; | |||
background-color: rgba(255, 255, 255, 0.7); | |||
border: 1px solid #d6d6d6; | |||
border-left-width: 8px; | |||
border-left-color: #d6d6d6; | |||
border-radius: 3px; | |||
margin-bottom: 5px; | |||
min-height: 32px; | |||
} | |||
.mbox.mbox-type-important { | |||
border-left-color: var(--type-important); | |||
} | |||
.mbox.mbox-type-moderate { | |||
border-left-color: var(--type-moderate); | |||
} | |||
.mbox.mbox-type-minor { | |||
border-left-color: var(--type-minor); | |||
} | |||
.mbox__content { | |||
display: table; | |||
box-sizing: border-box; | |||
width: 100%; | |||
padding: 8px 15px; | |||
} | |||
.mbox__content__image { | |||
display: table-cell; | |||
width: 40px; | |||
height: 100%; | |||
text-align: center; | |||
vertical-align: middle; | |||
padding-right: 15px; | |||
} | |||
.mbox__content__wrapper { | |||
display: table-cell; | |||
vertical-align: middle; | |||
} | |||
.mbox__content__header { | |||
display: block; | |||
font-weight: bold; | |||
} | |||
.mbox__content__text { | |||
display: block; | |||
} | |||
.mbox__content__text__comment { | |||
font-size: small; | |||
} | |||
.mbox__content__aside { | |||
display: table-cell; | |||
width: 100px; | |||
vertical-align: middle; | |||
text-align: center; | |||
padding-left: 15px; | |||
border-left: 1px solid #d6d6d6; | |||
} | |||
.mbox__close { | |||
position: absolute; | |||
right: 0; | |||
top: 0; | |||
padding: 2px 7px; | |||
font-weight: bold; | |||
font-size: 16px; | |||
color: #bbb; | |||
cursor: pointer; | |||
transition: all .15s ease-in; | |||
} | |||
.mbox__close:hover { | |||
color: #777; | |||
} | |||
.mbox__close:after { | |||
content: '×'; | |||
} | |||
.mw-collapsed + .mbox__close { | |||
transform: rotate(45deg); | |||
padding: 4px 7px 5px 2px; | |||
} | |||
/* Wookieepedia-style Mbox demo. */ | |||
.mbox--wook { | |||
background-color: #7bb0d8; | |||
border: none; | |||
border-radius: 10px; | |||
} | |||
.mbox--wook .mbox__close { | |||
color: #0c8787; | |||
font-weight: normal; | |||
font-size: 13px; | |||
} | |||
.mbox--wook .mbox__close:after { | |||
content: '[hide]'; | |||
} | |||
.mbox--wook .mw-collapsed + .mbox__close { | |||
transform: none; | |||
padding: 2px 7px; | |||
} | |||
.mbox--wook .mw-collapsed + .mbox__close:after { | |||
content: '[show]'; | |||
} | |||
/******************* | /******************* |
Latest revision as of 01:24, 28 April 2021
/* CSS placed here will be applied to all skins */
/* Base CSS classes for demo. If you wish to use Mbox on your wiki, only copy the below. */
.mbox {
--type-important: rgba(200, 0, 0, 0.8);
--type-moderate: rgba(233, 124, 47, 0.8);
--type-minor: rgba(241, 197, 37, 0.8);
display: flex;
position: relative;
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid #d6d6d6;
border-left-width: 8px;
border-left-color: #d6d6d6;
border-radius: 3px;
margin-bottom: 5px;
min-height: 32px;
}
.mbox.mbox-type-important {
border-left-color: var(--type-important);
}
.mbox.mbox-type-moderate {
border-left-color: var(--type-moderate);
}
.mbox.mbox-type-minor {
border-left-color: var(--type-minor);
}
.mbox__content {
display: table;
box-sizing: border-box;
width: 100%;
padding: 8px 15px;
}
.mbox__content__image {
display: table-cell;
width: 40px;
height: 100%;
text-align: center;
vertical-align: middle;
padding-right: 15px;
}
.mbox__content__wrapper {
display: table-cell;
vertical-align: middle;
}
.mbox__content__header {
display: block;
font-weight: bold;
}
.mbox__content__text {
display: block;
}
.mbox__content__text__comment {
font-size: small;
}
.mbox__content__aside {
display: table-cell;
width: 100px;
vertical-align: middle;
text-align: center;
padding-left: 15px;
border-left: 1px solid #d6d6d6;
}
.mbox__close {
position: absolute;
right: 0;
top: 0;
padding: 2px 7px;
font-weight: bold;
font-size: 16px;
color: #bbb;
cursor: pointer;
transition: all .15s ease-in;
}
.mbox__close:hover {
color: #777;
}
.mbox__close:after {
content: '×';
}
.mw-collapsed + .mbox__close {
transform: rotate(45deg);
padding: 4px 7px 5px 2px;
}
/* Wookieepedia-style Mbox demo. */
.mbox--wook {
background-color: #7bb0d8;
border: none;
border-radius: 10px;
}
.mbox--wook .mbox__close {
color: #0c8787;
font-weight: normal;
font-size: 13px;
}
.mbox--wook .mbox__close:after {
content: '[hide]';
}
.mbox--wook .mw-collapsed + .mbox__close {
transform: none;
padding: 2px 7px;
}
.mbox--wook .mw-collapsed + .mbox__close:after {
content: '[show]';
}
/*******************
* Navboxes
*******************/
.navbox {
width: 100%;
background: white;
color: black;
margin: 1em auto;
font-size: 84%;
clear: both;
padding: 2px;
border-spacing: 0;
border: 1px solid #AAA;
}
/* Merges navboxes that are directly under eachother */
.navbox + .navbox {
margin-top: -11px;
}
.navbox .navbox-title {
background: #CCF;
color: black;
font-weight: bold;
}
.navbox .navbox-vde {
float:left;
width:65px;
}
.navbox .navbox-title-padright {
padding-right: 65px;
}
.navbox .navbox-title-padleft {
padding-left: 65px;
}
.navbox .navbox-subgroup {
border-spacing: 0;
width: 100%;
}
.navbox .navbox-gutter {
height: 2px;
}
.navbox .navbox-subgroup .navbox-gutter {
background: white;
}
.navbox .navbox-section-row > td {
padding: 0;
height: 100%;
}
.navbox .navbox-section {
width: 100%;
border-spacing: 0;
}
.navbox .navbox-above,
.navbox .navbox-below {
background: #DDF;
text-align: center;
}
.navbox .navbox-image {
background: white;
text-align: center;
}
.navbox .navbox-group,
.navbox .navbox-header {
background: #DDF;
color: black;
font-weight: bold;
height: 100%;
padding: 2px 4px;
}
.navbox .navbox-header-collapsible {
padding-left: 65px;
}
.navbox .navbox-group {
text-align: right;
padding-right: 1em;
min-width: 150px;
}
.navbox .navbox-group,
.navbox .navbox-image-left {
border-right: 2px solid white;
}
.navbox-image-right {
border-left: 2px solid white;
}
.navbox .navbox-list {
background: white;
color: black;
width: 100%;
height: 100%;
padding: 0;
}
.navbox .alt > .navbox-list {
background: #F7F7F7;
}
.navbox .navbox-list div {
padding: 0px 4px;
}
.navbox .navbox-list.no-group {
text-align: center;
padding-top: 2px;
padding-bottom: 2px;
}
.navbox .mw-collapsible-toggle {
width: 65px;
}
/* hlist */
.hlist ul {
margin: 0;
list-style: none;
}
.hlist li, .hlist ul ul {
display: inline;
}
.hlist li a {
white-space: nowrap;
}
.hlist ul ul:before {
content: "("
}
.hlist ul ul:after {
content: ")"
}
.hlist li:after {
content: " • ";
}
.hlist ul ul li:after {
content: "/";
}
.hlist li:last-child:after, .hlist ul ul li:last-child:after {
content: none;
}