MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
No edit summary
No edit summary
 
(129 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */
/* COLOR OVERRIDES */
:root:not(.skin-citizen-dark) {
/* --color-primary--hover: #DAA06D !important; */
--color-surface-2: #faf7f2 !important;
--border-color-base: #faf7f2 !important;
--border-color-base--darker: #C68B59 !important;
--color-custom-tertiary: #faf7f2 !important;
--pi-border-color: var(--color-surface-2) !important;
}
:root {
--color-primary: #865439 !important;
--color-primary--hover: #C68B59 !important;
--color-primary--active: #6b432e !important;
--background-color-primary--active: #faf7f2 !important;
--pi-width: 400px !important;
--color-custom-tertiary: var(--color-surface-2) !important; 
--pi-border-color: var(--color-surface-2) !important; 
}


.mw-wiki-logo {
.mw-wiki-logo {
Line 6: Line 26:
}
}


.skin-citizen-dark .mw-logo-icon {
filter: var(--filter-invert);
}


.navbox-title {
background-color: var(--color-primary) !important;
color: white;
padding-top: 8px !important;
padding-bottom: 8px !important;
}


/* Infobox template style */
.navbox-title a, .navbox-title a:hover {
.infobox {
color: white !important;  
border: 1px solid #DAA06D;
border-spacing: 3px;
background-color: rgba(233, 220, 200, 0.23);
color: black;
/* @noflip */
margin: 0.5em 0 0.5em 1em;
padding: 0.2em;
/* @noflip */
float: right;
/* @noflip */
clear: right;
line-height: 1.5em;
width: 315.2px;
}
}


.infobox-header,
.navbox {
.infobox-label,
border-radius: var(--border-radius--medium) !important;
.infobox-above,
overflow: hidden;
.infobox-full-data,
border: none !important;
.infobox-data,
.infobox-below,
.infobox-subheader,
.infobox-image,
.infobox-navbar,
/* Remove element selector when every .infobox thing is using the standard module/templates  */
.infobox th,
.infobox td {
vertical-align: top;
}
}


.infobox-label,
.navbox-abovebelow,
.infobox-data,
.navbox-group,
/* Remove element selector when every .infobox thing is using the standard module/templates  */
.navbox-subgroup .navbox-title {
.infobox th,
background-color: var(--color-custom-tertiary) !important; /* Level 2 color */
.infobox td {
/* @noflip */
text-align: left;
}
}


/* Remove .infobox when element selectors above are removed */
.navbox-subgroup .navbox-group,
.infobox .infobox-above,
.navbox-subgroup .navbox-abovebelow {
.infobox .infobox-title,
background-color: var(--color-custom-tertiary) !important; /* Level 3 color */
/* Remove element selector when every .infobox thing is using the standard module/templates  */
.infobox caption {
font-size: 125%;
font-weight: bold;
text-align: center;
}
}


.infobox-title,
.navbox-even {
/* Remove element selector when every .infobox thing is using the standard module/templates  */
background-color: var(--color-custom-tertiary) !important;
.infobox caption {
padding: 0.2em;
}
}


/* Remove .infobox when element selectors above are removed */
.mw-parser-output tr + tr > .navbox-abovebelow,
.infobox .infobox-header,
.mw-parser-output tr + tr > .navbox-group,
.infobox .infobox-subheader,
.mw-parser-output tr + tr > .navbox-image,
.infobox .infobox-image,
.mw-parser-output tr + tr > .navbox-list {
.infobox .infobox-full-data,
border-top: 0px !important;
.infobox .infobox-below {
text-align: center;
}
}


/* Remove .infobox when element selectors above are removed */
.navbox .hlist td dl,
.infobox .infobox-navbar {
.navbox .hlist td ol,
/* @noflip */
.navbox .hlist td ul,
text-align: right;
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
padding: var(--space-xs) var(--space-sm) !important;
}
}


.infobox-title {
.side-box {
background-color: #DAA06D;
background-color: var(--color-custom-tertiary) !important;
    border-radius: var(--border-radius--medium) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
}


/* NEW THEME */
.navbox + .navbox, /* TODO: remove first line after transclusions have updated */
.vector-menu-tabs li {
.navbox + .navbox-styles + .navbox {
    background-image: linear-gradient(to top,#DAA06D 0, rgba(233, 220, 200, 0.23) 1px,#ffffff 100%);
/*margin-top: -1px; */ /* Single pixel border between adjacent navboxes */
margin-top: 16px !important;
}
}


.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown h3 {
/* Alignment grid CSS from Forgotten Realms wiki: https://forgottenrealms.fandom.com/wiki/MediaWiki:Wikia.css
     background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#DAA06D 100%);
* Used under CC-BY-SA as noted on the source page: https://creativecommons.org/licenses/by-sa/3.0/
*/
.alignment-grid {
     float: left;
    text-align:         center;
    font-size:          0.85em;
}
.alignment-cell {
padding: 4px !important;
text-align: center !important;
}
}


.mw-body {
 
    border: 1px solid #DAA06D;
 
 
 
 
 
 
.portable-infobox {
border-radius: var(--border-radius--medium);
overflow: hidden;
}
}


.toc, .catlinks, .mw-search-profile-tabs {
.portable-infobox .image-thumbnail, .portable-infobox .pi-image-thumbnail {
    background-color: rgba(233, 220, 200, 0.23);
width: 100%;
    border: 1px solid #DAA06D;
}
}


.catlinks li {
.portable-infobox .pi-title {
    border-left: 1px solid #DAA06D;
background-color: var(--color-primary);
color: white;
width: 100%;
font-size: var(--font-size-h2) !important;
padding-left: var(--space-md);
margin: 0 !important;
font-weight: var(--font-weight-semibold);
text-align: center;
}
}


h1, h2 {
.portable-infobox .pi-item-spacing {
    border-bottom: 1px solid #DAA06D;
padding-left: var(--space-md) !important;
}
}


.oo-ui-panelLayout-framed {
.portable-infobox p,
    border: 1px solid #DAA06D;
.portable-infobox .pi-data-value > :not(ul),
.portable-infobox .pi-data-value li {
margin: var(--space-xxs) 0;
}
}


hr {
.pi-section-navigation .pi-section-tab,
    background-color: #DAA06D;
.pi-media-collection .pi-tab-link {
flex: 1 1 0px;
}
}


.vector-menu-portal h3 {
.pi-media-collection .pi-tab-link {
    background-image: linear-gradient(to right,rgba(200,204,209,0) 0,#DAA06D 33%,#DAA06D 66%,rgba(200,204,209,0) 100%);
margin: 0 !important;
border-radius: 0 !important;
border-width: 0 !important;
}
}


.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
.pi-media-collection .pi-tab-link.current {
    border: 1px solid #DAA06D;
text-decoration-color: var(--color-primary) !important;
text-decoration: underline;
}
}


.wikitable > tr > th, .wikitable > * > tr > th {
.pi-media-collection .pi-tab-link:hover {
    background-color: #DAA06D;
text-decoration-color: var(--color-primary--hover) !important;
text-decoration: underline;
}
.pi-media-collection .pi-tab-link:active {
text-decoration-color: var(--color-primary--active) !important;
text-decoration: underline;
}
}


.wikitable {
.portable-infobox .pi-secondary-font {
    background-color: transparent;
font-weight: bold;
    border: 1px solid #DAA06D;
}
}


.editOptions {
.portable-infobox .pi-data-label {
background-color: rgba(233, 220, 200, 0.23);
flex-basis: 120px;
border: 1px solid #DAA06D;
}
}


.wikiEditor-ui .wikiEditor-ui-view {
.portable-infobox .pi-data-value ul li {
border: 1px solid #DAA06D;
list-style: none;
margin-left: -20px;
}
}


#searchInput {
.navbox {
border: 1px solid #DAA06D;
font-size: 0.85em;
}
 
.mw-parser-output .navbox .navbox-title div {
font-size: var(--font-size-h3) !important;
}
 
.pi-data-label {
hyphens: none !important;
}
 
.in-setting-text-info {
text-align: center;
}
}


.oo-ui-textInputWidget .oo-ui-inputWidget-input {
.template-note {
border: 1px solid #DAA06D;
display: block;
background-color: var(--background-color-primary--active);
padding: var(--space-md);
margin-bottom: 1em;
border-radius: var(--border-radius--medium);
}
}


.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
.template-note p {
background-color: #DAA06D;
margin: 0;
border: 1px solid #DAA06D;
}
}


.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
.mw-content-ltr ul {
border: 1px solid #DAA06D;
margin-top: 0;
margin-bottom: 0;
}
}


.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:checked + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:indeterminate + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:checked + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:indeterminate + span:hover, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:checked:hover + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:indeterminate:hover + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:checked:active + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:indeterminate:active + span {
/* Yearbox styling */
background-color: #DAA06D;
.yearbox {
border: 1px solid #DAA06D;
display: flex;
box-shadow: none;
flex-direction: column;
border-radius: var(--border-radius--medium) !important;
overflow: hidden;
margin-bottom: 1em;
}
}


.navbox {
.yearbox .yearbox-header {
margin-bottom: 15px !important;
    background-color: var(--color-primary);
color: white;
font-size: var(--font-size-h2) !important;
margin: 0 !important;
font-weight: var(--font-weight-semibold);
text-align: center;
padding: 5px 10px /*var(--pi-item-spacing)*/;
}
 
.yearbox .yearbox-header p {
margin: var(--space-xxs) 0;
line-height: 1.5;
}
}


.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link {
.yearbox .yearbox-content {
background-color: #DAA06D;
display: flex;
flex-direction: row;
justify-content: space-evenly;
background-color: var(--color-surface-2);
}
}


/* Alignment grid CSS from Forgotten Realms wiki: https://forgottenrealms.fandom.com/wiki/MediaWiki:Wikia.css
.yearbox .yearbox-content .yearbox-item {
* Used under CC-BY-SA as noted on the source page: https://creativecommons.org/licenses/by-sa/3.0/
*/
.alignment-grid {
    float: left;
    text-align:        center;
    font-size:          88%;
    line-height:        22px;
    padding:            1px;
    border:            1px solid #DAA06D;
    margin-bottom:      2px;
}
}
.alignment-grid td {
 
    width: 33%;
.yearbox .yearbox-content .yearbox-item.main-item {
    padding: 4px;
font-weight: bold;
    text-align: center;
}
}
.alignment-grid caption {
 
    line-height:       normal;
.yearbox .yearbox-content .yearbox-item:after {
    padding:           1px;
content: " · ";
font-weight: bold;
}
}


.infobox tr td.infobox-data ul {
.yearbox .yearbox-content .yearbox-item:last-child:after {
list-style: none;
content: "";
margin-left: 0;
}
}


.vector-body blockquote.templatequote {
.mwe-popups footer {
border-left: 4px solid #DAA06D;
display: none;
}
}


.template-note {
.mwe-popups .mwe-popups-extract {
display: block;
margin-bottom: 16px !important;
border: 1px solid #DAA06D;
background-color: rgba(233, 220, 200, 0.23);
padding: 7px;
}
}


.in-setting-text-title {
.full-width-image img {
font-size: 1.5em;
max-width: 100%;
height: auto;
width: auto;
}
}

Latest revision as of 20:23, 20 July 2024

/* CSS placed here will be applied to all skins */

/* COLOR OVERRIDES */
:root:not(.skin-citizen-dark) {
	/* --color-primary--hover: #DAA06D !important; */
	--color-surface-2: #faf7f2 !important;
	--border-color-base: #faf7f2 !important; 
	--border-color-base--darker: #C68B59 !important;
	--color-custom-tertiary: #faf7f2 !important;
	--pi-border-color: var(--color-surface-2) !important;
}
:root {
	--color-primary: #865439 !important;
	--color-primary--hover: #C68B59 !important;
	--color-primary--active: #6b432e !important;
	--background-color-primary--active: #faf7f2 !important;
	--pi-width: 400px !important;
	--color-custom-tertiary: var(--color-surface-2) !important;  
	--pi-border-color: var(--color-surface-2) !important;  
}


.mw-wiki-logo {
    background-size: 160px !important;
    margin-top: 10px !important;
}

.skin-citizen-dark .mw-logo-icon {
	filter: var(--filter-invert);
}

.navbox-title {
	background-color: var(--color-primary) !important;
	color: white;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

.navbox-title a, .navbox-title a:hover {
	color: white !important; 
}

.navbox {
	border-radius: var(--border-radius--medium) !important;
	overflow: hidden;
	border: none !important;
}

.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
	background-color: var(--color-custom-tertiary) !important; /* Level 2 color */
}

.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
	background-color: var(--color-custom-tertiary) !important; /* Level 3 color */
}

.navbox-even {
	background-color: var(--color-custom-tertiary) !important;
}

.mw-parser-output tr + tr > .navbox-abovebelow,
.mw-parser-output tr + tr > .navbox-group,
.mw-parser-output tr + tr > .navbox-image,
.mw-parser-output tr + tr > .navbox-list {
	border-top: 0px !important;
}

.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
	padding: var(--space-xs) var(--space-sm) !important;
}

.side-box {
	background-color: var(--color-custom-tertiary) !important;
    border-radius: var(--border-radius--medium) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.navbox + .navbox, /* TODO: remove first line after transclusions have updated */
.navbox + .navbox-styles + .navbox {
	/*margin-top: -1px; */ /* Single pixel border between adjacent navboxes */
	margin-top: 16px !important;
}

/* Alignment grid CSS from Forgotten Realms wiki: https://forgottenrealms.fandom.com/wiki/MediaWiki:Wikia.css
* Used under CC-BY-SA as noted on the source page: https://creativecommons.org/licenses/by-sa/3.0/
*/
.alignment-grid {
    float: left;
    text-align:         center;
    font-size:          0.85em; 
}
.alignment-cell {
	padding: 4px !important;
	text-align: center !important;
}








.portable-infobox {
	border-radius: var(--border-radius--medium);
	overflow: hidden;
}

.portable-infobox .image-thumbnail, .portable-infobox .pi-image-thumbnail {
	width: 100%;
}

.portable-infobox .pi-title {
	background-color: var(--color-primary);
	color: white;
	width: 100%;
	font-size: var(--font-size-h2) !important;
	padding-left: var(--space-md);
	margin: 0 !important;
	font-weight: var(--font-weight-semibold);
	text-align: center;
}

.portable-infobox .pi-item-spacing {
	padding-left: var(--space-md) !important;
}

.portable-infobox p,
.portable-infobox .pi-data-value > :not(ul),
.portable-infobox .pi-data-value li {
	margin: var(--space-xxs) 0;
}

.pi-section-navigation .pi-section-tab,
.pi-media-collection .pi-tab-link {
	flex: 1 1 0px;
}

.pi-media-collection .pi-tab-link {
	margin: 0 !important;
	border-radius: 0 !important;
	border-width: 0 !important;
}

.pi-media-collection .pi-tab-link.current {
	text-decoration-color: var(--color-primary) !important;
	text-decoration: underline;
}

.pi-media-collection .pi-tab-link:hover {
	text-decoration-color: var(--color-primary--hover) !important;
	text-decoration: underline;
}
.pi-media-collection .pi-tab-link:active {
	text-decoration-color: var(--color-primary--active) !important;
	text-decoration: underline;
}

.portable-infobox .pi-secondary-font {
	font-weight: bold;
}

.portable-infobox .pi-data-label {
	flex-basis: 120px;
}

.portable-infobox .pi-data-value ul li {
	list-style: none;
	margin-left: -20px;
}

.navbox {
	font-size: 0.85em;
}

.mw-parser-output .navbox .navbox-title div {
	font-size: var(--font-size-h3) !important;
}

.pi-data-label {
	hyphens: none !important;
}

.in-setting-text-info {
	text-align: center;
}

.template-note {
	display: block;
	background-color: var(--background-color-primary--active);
	padding: var(--space-md);
	margin-bottom: 1em;
	border-radius: var(--border-radius--medium);
}

.template-note p {
	margin: 0;
}

.mw-content-ltr ul {
	margin-top: 0;
	margin-bottom: 0;
}

/* Yearbox styling */
.yearbox {
	display: flex;
	flex-direction: column;
	border-radius: var(--border-radius--medium) !important;
	overflow: hidden;
	margin-bottom: 1em;
}

.yearbox .yearbox-header {
    background-color: var(--color-primary);
	color: white;
	font-size: var(--font-size-h2) !important;
	margin: 0 !important;
	font-weight: var(--font-weight-semibold);
	text-align: center;
	padding: 5px 10px /*var(--pi-item-spacing)*/;
}

.yearbox .yearbox-header p {
	margin: var(--space-xxs) 0;
	line-height: 1.5;
}

.yearbox .yearbox-content {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	background-color: var(--color-surface-2);
}

.yearbox .yearbox-content .yearbox-item {
}

.yearbox .yearbox-content .yearbox-item.main-item {
	font-weight: bold;
}

.yearbox .yearbox-content .yearbox-item:after {
	content: " · ";
	font-weight: bold;
}

.yearbox .yearbox-content .yearbox-item:last-child:after {
	content: "";
}

.mwe-popups footer {
	display: none;
}

.mwe-popups .mwe-popups-extract {
	margin-bottom: 16px !important;
}

.full-width-image img {
	max-width: 100%;
	height: auto;
	width: auto;
}