MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
LadderGoat (talk | contribs) No edit summary |
LadderGoat (talk | contribs) No edit summary |
||
| Line 524: | Line 524: | ||
.mw-ui-icon-menu:before { | .mw-ui-icon-menu:before { | ||
background-image: url(images/code-editor-icons/Menu.svg); | background-image: url(images/code-editor-icons/Menu.svg); | ||
} | |||
.vector-menu-tabs #ca-unwatch.icon a::before { | |||
background-image: url(images/code-editor-icons/Unwatch_icon.svg); | |||
} | } | ||
Revision as of 21:54, 15 May 2024
/*=============================================
= Variable declarations =
=============================================*/
:root {
--bg-content: hsl(0, 0%, 15%);
--bg-main: hsl(0, 0%, 10%);
--bg-warningbox: hsla(64, 84%, 47%, 0.3);
--bg-wikitable: hsl(0, 0%, 25%);
--bg-wikitable-header: hsl(0, 0%, 20%);
--border-color-warningbox: hsl(64, 84%, 47%);
--border-light: hsl(205, 87%, 82%);
--border-dark: hsl(206, 50%, 23%);
--sc-light: hsl(280.21deg 68.06% 80.74%);
--text-primary: hsl(197, 100%, 50%);
--text-secondary: hsl(0, 0%, 100%);
--wikitable-link: hsl(211, 63%, 60%);
}
/*===== End of Variable declarations ======*/
/*=============================================
= Main styling =
=============================================*/
body {
background-color: var(--bg-main);
font-size: 15px;
line-height: 1.75;
}
h1,
h2,
h3 {
border-bottom: 1px solid var(--bg-wikitable);
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--text-primary);
}
a:hover {
text-shadow: 0 2px 15px;
}
a,
a.new,
a.new:visited,
a:hover,
a:visited {
color: var(--wikitable-link);
}
.mw-body {
border-color: var(--bg-wikitable);
background-color: var(--bg-content);
color: var(--text-secondary);
}
#mw-page-base {
background: none;
}
/*===== End of Main styling ======*/
/*=============================================
= Notification styling =
=============================================*/
.mw-editform #editpage-copywarn {
padding: 1em;
}
.mw-message-box {
color: var(--text-secondary);
}
.mw-message-box-warning {
background-color: var(--bg-warningbox);
border-color: var(--border-color-warningbox);
}
.mw-message-box-error {
background-color: hsl(2.84deg 100% 50% / 21.96%);
}
.mw-notification,
.oo-ui-messageWidget>.oo-ui-labelElement-label {
background-color: #292929;
}
/*===== End of Notification styling ======*/
/*=============================================
= TOC & Wikitable styling =
=============================================*/
.toctogglelabel,
.mw-parser-output a.extiw,
.mw-parser-output a.external,
.mw-parser-output .wikitable tbody tr td a,
.mw-collapsible-toggle-default .mw-collapsible-text,
.mw-parser-output a.extiw:visited,
.mw-parser-output a.external:visited {
color: var(--wikitable-link);
}
.mw-parser-output a {
color: var(--border-light);
}
.toc {
font-size: 0.9em;
background: var(--bg-wikitable);
margin-top: 1em;
padding: 0;
border: 1px solid var(--border-dark);
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
clear: left;
}
.toc .toctitle {
background: var(--bg-wikitable-header);
box-sizing: content-box;
height: 21px;
padding-top: 3px;
}
.toc h2 {
color: var(--text-secondary);
}
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
background-color: var(--bg-wikitable);
border: 1px solid var(--border-dark);
}
.tocnumber {
display: none;
}
.toc ul {
list-style: none;
line-height: 20px;
font-size: 13px;
margin-left: 1em;
padding-right: 10px;
}
.toc ul ul {
border-left: 1px dotted #596e96;
padding-left: 0.5em;
}
#filetoc {
background-color: var(--bg-wikitable);
}
em {
font-style: normal;
background: #555555;
color: white;
border: 1px solid #979797;
border-radius: 2px;
font-size: 0.9em;
margin: 0 0.1em;
padding: 0.2em 0.5em;
white-space: nowrap;
}
.wikitable {
color: var(--text-secondary);
border: 1px solid var(--bg-content);
}
.wikitable tr {
background-color: var(--bg-wikitable);
}
.wikitable > tr > th,
.wikitable > tbody > tr > th,
.wikitable > thead > tr > th {
background-color: var(--bg-wikitable-header);
}
.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > tbody > tr > th,
.wikitable > tbody > tr > td,
.wikitable > thead > tr > th {
border: 1px solid var(--bg-content);
}
.wikitable img {
display: block;
margin: auto;
max-height: 32px;
padding: 3px 0;
}
.wikitable th.headerSort {
background-image: url(https://wiki.oldschoolrsps.com/images/a/a6/Sort_both.png);
background-repeat: no-repeat;
background-position: right;
}
.wikitable th.headerSortUp {
background-image: url(https://wiki.oldschoolrsps.com/images/8/81/Sort_up.png);
background-repeat: no-repeat;
background-position: right;
}
.wikitable th.headerSortDown {
background-image: url(https://wiki.oldschoolrsps.com/images/f/f3/Sort_down.png);
background-repeat: no-repeat;
background-position: right;
}
/*===== End of TOC & Wikitable styling ======*/
/*=============================================
= Forms, input & editor styling =
=============================================*/
fieldset {
border: 1px solid var(--bg-wikitable);
}
.wikiEditor-ui-toolbar {
background-color: var(--bg-main);
}
.wikiEditor-ui-toolbar .tabs span.tab a,
.wikiEditor-ui-toolbar .tabs span.tab a.current,
.wikiEditor-ui-toolbar .tabs span.tab a.current:visited,
.wikiEditor-ui-toolbar .group .tool-select .label {
color: var(--text-secondary);
}
.mw-input input,
.mw-input textarea {
background-color: var(--bg-wikitable);
border: 1px solid var(--border-dark);
}
.wikiEditor-ui-toolbar .tabs span.tab a::before {
width: 14px;
height: 30px;
}
.wikiEditor-ui-toolbar .group,
.wikiEditor-ui-toolbar .section-secondary .group {
border-color: var(--border-dark);
}
.wikiEditor-ui-toolbar .group .label {
color: var(--text-primary);
}
.codeEditor-status {
background-color: var(--bg-wikitable-header);
}
.wikiEditor-ui .wikiEditor-ui-view {
border: 1px solid var(--border-dark);
}
.wikiEditor-ui-toolbar .group,
.section-secondary .group {
border-color: var(--border-dark);
}
.wikiEditor-ui-toolbar .sections .section {
border-top: 1px solid var(--border-dark);
}
.wikiEditor-ui .wikiEditor-ui-top {
border-bottom: 1px solid var(--border-dark);
}
.codeEditor-status {
border: none;
}
.codeEditor-status-message {
border-left: none;
border-right: none;
}
.ace_scrollbar-inner {
background: var(--bg-content);
}
.ace-tm .ace-comment {
color: hsl(0deg 0% 53.69%);
}
.ace-tm,
.ace_support.ace_function {
background-color: var(--bg-content);
color: hsl(0deg 100% 72.24%);
}
.ace-tm .ace_constant,
.ace-tm .ace_support.ace_type,
.ace-tm .ace_support.ace_class {
color: var(--text-primary);
}
.ace-tm .ace_support.ace_constant {
color: hsl(39.59deg 100% 80.98%);
font-style: italic;
}
.ace-tm .ace_gutter {
background: var(--bg-wikitable-header);
}
.ace-tm .ace_string,
.ace-tm .ace_variable {
color: hsl(36.52deg 100% 68.79%);
}
.ace-tm .ace_gutter-active-line {
background-color: var(--border-dark);
}
.ace-tm .ace_constant.ace_numeric {
color: var(--sc-light);
}
.ace_gutter-cell {
color: var(--text-secondary);
}
.ace-tm .ace_print-margin {
background: none;
}
.ace-tm .ace_storage, .ace-tm .ace_keyword {
color: hsl(36.52deg 100% 53.7%);
}
span.ace_punctuation.ace_operator {
color: dimgray;
}
span.ace_paren.ace_lparen,
span.ace_paren.ace_rparen {
color: hsl(50.37deg 100% 56.29%);
}
.mw-editform #editpage-copywarn {
padding: 1em 0;
}
.editOptions {
background-color: hsl(0deg 0% 11.17%);
color: var(--text-secondary);
border-color: var(--border-dark);
border-right: 1px solid var(--border-dark);
border-bottom: 1px solid var(--border-dark);
border-left: 1px solid var(--border-dark);;
}
.oo-ui-icon-bold,
.mw-ui-icon-bold:before {
background-image: url(images/code-editor-icons/Bold.svg);
}
.oo-ui-icon-italic,
.mw-ui-icon-italic:before {
background-image: url(images/code-editor-icons/Italic.svg);
}
.oo-ui-icon-link,
.mw-ui-icon-link:before {
background-image: url(images/code-editor-icons/Hyperlink.svg);
}
.oo-ui-icon-image,
.mw-ui-icon-image:before {
background-image: url(images/code-editor-icons/Image.svg);
}
.oo-ui-icon-reference,
.mw-ui-icon-reference:before {
background-image: url(images/code-editor-icons/Reference.svg);
}
.oo-ui-icon-article,
.mw-ui-icon-article:before {
background-image: url(images/code-editor-icons/Article.svg);
}
.oo-ui-icon-edit,
.mw-ui-icon-edit:before {
background-image: url(images/code-editor-icons/Edit.svg);
}
.oo-ui-icon-listBullet,
.mw-ui-icon-listBullet:before {
background-image: url(images/code-editor-icons/Bullet_list.svg);
}
.oo-ui-icon-listNumbered,
.mw-ui-icon-listNumbered:before {
background-image: url(images/code-editor-icons/Numbered_list.svg);
}
.oo-ui-icon-noWikiText,
.mw-ui-icon-noWikiText:before {
background-image: url(images/code-editor-icons/No_WikiText.svg);
}
.oo-ui-icon-newline,
.mw-ui-icon-newline:before {
background-image: url(images/code-editor-icons/New_line.svg);
}
.oo-ui-icon-bigger,
.mw-ui-icon-bigger:before {
background-image: url(images/code-editor-icons/Bigger.svg);
}
.oo-ui-icon-smaller,
.mw-ui-icon-smaller:before {
background-image: url(images/code-editor-icons/Smaller.svg);
}
.oo-ui-icon-superscript,
.mw-ui-icon-superscript:before {
background-image: url(images/code-editor-icons/Superscript.svg);
}
.oo-ui-icon-subscript,
.mw-ui-icon-subscript:before {
background-image: url(images/code-editor-icons/Subscript.svg);
}
.oo-ui-icon-imageGallery,
.mw-ui-icon-imageGallery:before {
background-image: url(images/code-editor-icons/Image_gallery.svg);
}
.oo-ui-icon-articleRedirect,
.mw-ui-icon-articleRedirect:before {
background-image: url(images/code-editor-icons/Article_redirect.svg);
}
.oo-ui-icon-table,
.mw-ui-icon-table:before {
background-image: url(images/code-editor-icons/Table.svg);
}
.oo-ui-icon-articleSearch,
.mw-ui-icon-articleSearch:before {
background-image: url(images/code-editor-icons/Article_search.svg);
}
.oo-ui-icon-markup,
.mw-ui-icon-markup:before {
background-image: url(images/code-editor-icons/Markup.svg);
}
.oo-ui-icon-indent,
.mw-ui-icon-indent:before {
background-image: url(images/code-editor-icons/Indent.svg);
}
.oo-ui-icon-outdent,
.mw-ui-icon-outdent:before {
background-image: url(images/code-editor-icons/Outdent.svg);
}
.oo-ui-icon-pilcrow {
background-image: url(images/code-editor-icons/Pilcrow.svg);
}
.oo-ui-icon-wrapping {
background-image: url(images/code-editor-icons/Wrapping.svg);
}
.oo-ui-icon-gotoLine {
background-image: url(images/code-editor-icons/Go_to_line.svg);
}
.oo-ui-icon-play,
.mw-ui-icon-play:before {
background-image: url(images/code-editor-icons/Play.svg);
}
.oo-ui-icon-settings,
.mw-ui-icon-settings:before {
background-image: url(images/code-editor-icons/Settings.svg);
}
.oo-ui-icon-tag,
.mw-ui-icon-tag:before {
background-image: url(images/code-editor-icons/Tag.svg);
}
.oo-ui-icon-bookmark,
.mw-ui-icon-bookmark:before {
background-image: url(images/code-editor-icons/Bookmark.svg);
}
.oo-ui-icon-trash,
.mw-ui-icon-trash:before {
background-image: url(images/code-editor-icons/Trash.svg);
}
#mw-indicator-mw-helplink a {
background-image: url(images/code-editor-icons/Help_notice.svg);
}
.oo-ui-icon-menu,
.mw-ui-icon-menu:before {
background-image: url(images/code-editor-icons/Menu.svg);
}
.vector-menu-tabs #ca-unwatch.icon a::before {
background-image: url(images/code-editor-icons/Unwatch_icon.svg);
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--bg-wikitable-header);
color: var(--border-light);
border-color: var(--border-dark);
}
.oo-ui-checkboxInputWidget [type='checkbox'] + span {
background-color: var(--bg-wikitable-header);
border-color: var(--border-dark);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background-color: var(--bg-wikitable-header);
color: var(--border-light);
border-color: var(--border-dark);
}
.ext-WikiEditor-realtimepreview-textbox#wpTextbox1,
.mw-editform .ext-WikiEditor-realtimepreview-textbox#wpTextbox1,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
background-color: var(--bg-content);
color: var(--text-secondary);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined {
background-color: var(--bg-main);
}
.mw-rcfilters-collapsed .mw-rcfilters-ui-filterTagMultiselectWidget {
border-bottom: 1px solid var(--border-dark);
}
.mw-rcfilters-ui-cell.mw-rcfilters-ui-filterTagMultiselectWidget-views-select {
background-color: var(--bg-wikitable-header);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title {
color: var(--text-secondary);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
color: var(--border-light);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
color: var(--text-primary);
}
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
background-color: var(--bg-main);
border: 1px solid var(--border-dark);
border-bottom-width: 0;
}
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget {
border: 1px solid var(--border-dark);
border-left-width: 0;
}
.ext-WikiEditor-ResizingDragBar {
background-color: hsl(0deg 0.71% 27.65%);
}
.ext-WikiEditor-ResizingDragBar-ns {
border-top: 1px solid var(--text-primary);
}
.mw-content-ltr.mw-highlight-lines pre,
.mw-content-ltr.content .mw-highlight-lines pre {
box-shadow: inset 1em 0 0 #0083ff1c;
padding-left: 2em;
}
pre,
code,
.mw-code {
background-color: var(--bg-wikitable-header);
color: #ffffff;
border-color: #0069b980;
}
/*===== End of Sourcecode editor styling ======*/
/*=============================================
= Navigation styling =
=============================================*/
#p-logo {
margin-bottom: -1em;
}
.vector-menu-tabs li {
background-image: linear-gradient(to bottom, var(--bg-wikitable) 0, var(--bg-content) 1px, var(--bg-main) 100%);
}
.vector-user-menu-legacy #pt-userpage a {
color: #54595d;
}
.vector-user-menu-legacy li {
font-size: 0.75em;
}
.vector-menu-dropdown {
line-height: 1em;
}
.vector-menu-dropdown .vector-menu-content {
border: 1px solid var(--bg-wikitable)
}
.vector-menu-dropdown .mw-list-item {
background-color: var(--bg-content);
}
.vector-menu-dropdown .mw-list-item a {
border: none;
color: var(--text-secondary);
}
.vector-menu-portal .vector-menu-content li {
font-size: 0.75em;
}
.vector-menu-portal .vector-menu-content li a,
.vector-menu-tabs-legacy li a,
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a,
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:visited {
color: var(--text-secondary);
}
.vector-menu-tabs .selected {
background: var(--bg-content);
}
.vector-menu-tabs .selected a,
.vector-menu-tabs .selected a:visited {
color: var(--text-primary);
}
.oo-ui-indicator-down,
.vector-menu-dropdown .vector-menu-heading::after {
background: url(images/icons/arrow-down.svg) 100% 50% no-repeat;
}
.vector-menu-checkbox:checked ~ .vector-menu-content {
border-color: var(--bg-wikitable);
}
.vector-menu-dropdown .vector-menu-heading {
color: var(--text-secondary);
}
.vector-menu-tabs,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
background-image: linear-gradient(to bottom, rgba(167, 215, 249, 0) 0, var(--bg-wikitable) 100%);
}
.skin-vector-legacy .vector-menu-tabs .new a,
.skin-vector-legacy .vector-menu-tabs .new a:visited {
color: #a55858;
}
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading {
background-image: linear-gradient(to right, rgba(200, 204, 209, 0) 0, var(--bg-wikitable) 33%, var(--bg-wikitable) 66%, rgba(200, 204, 209, 0) 100%);
color: var(--text-primary);
padding: 0.4em 0;
font-weight: bold;
}
.oo-ui-icon-tray,
.mw-ui-icon-tray:before {
background-image: url(images/icon-inbox.png);
}
.oo-ui-icon-bell,
.mw-ui-icon-bell:before {
background-image: url(images/icon-bell.png);
}
#pt-notifications-alert .mw-echo-notifications-badge,
#pt-notifications-notice .mw-echo-notifications-badge {
background-repeat: round;
}
.vector-search-box form {
margin: 0.5em 2em 0 0;
}
.vector-search-box-input {
background-color: var(--bg-content);
color: var(--text-secondary);
box-sizing: content-box;
border: 1px solid var(--bg-wikitable);
height: 1em;
}
#n-Discord a::before {
content: 'Join our ';
font-weight: normal;
opacity: 0.85;
}
#n-Discord a {
color: white;
font-weight: bold;
border-radius: 5px;
border: 1px solid #4c57d0;
background-color: #5865f2;
display: block;
position: relative;
padding: 4px 0 5px calc(17px + 6.5px * 2);
margin-top: 10px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
transition: 0.2s ease;
}
#n-Discord a::after {
content: '';
background: url(images/Discord_icon.png) no-repeat;
background-size: 17px 13px;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
position: absolute;
left: 7px;
width: 17px;
height: 13px;
}
/*===== End of Navigation styling ======*/
/*=============================================
= Footer styling =
=============================================*/
li#footer-poweredbyico {
display: none;
}
.mw-footer li {
color: gray;
}
/*===== End of Footer styling ======*/
/*=============================================
= List styling =
=============================================*/
ul {
list-style-type: disc;
list-style-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%225%22%20height%3D%2213%22%3E%0A%3Ccircle%20cx%3D%222.5%22%20cy%3D%229.5%22%20r%3D%222.5%22%20fill%3D%22%23FFFFFF%22%2F%3E%0A%3C%2Fsvg%3E%0A);
}