MediaWiki:Common.css: Difference between revisions

Add money making guide specific rules
m (inline-grid instead of inline-block for math formatting, prevents vertical misalignment of inline math)
(Add money making guide specific rules)
(10 intermediate revisions by 2 users not shown)
Line 3: Line 3:
position:-webkit-sticky;
position:-webkit-sticky;
position:sticky;
position:sticky;
background-clip: padding-box
background-clip: padding-box;
}
 
/* Workaround for missing borders when headers are sticky */
.stickyHeader th:after,
.stickyHeader th:before {
content: '';
position: absolute;
left: 0;
width: 100%;
}
.stickyHeader th:before {
top: -1px;
border-top: 1px solid #c8ccd1;
}
.stickyHeader th:after {
bottom: -1px;
border-bottom: 1px solid #c8ccd1;
}
}


Line 21: Line 38:


/* Prevent math formulas from overflowing the width of the page */
/* Prevent math formulas from overflowing the width of the page */
mjx-container {
mjx-math {
   display: inline-grid;
   display: inline-grid !important;
   overflow-x: auto;
   overflow-x: auto;
   overflow-y: hidden;
   overflow-y: hidden;
Line 70: Line 87:
}
}


.infobox, .noticebox {
.infobox,
.noticebox {
float:right;
float:right;
clear:right;
clear:right;
Line 92: Line 110:
border-width:1px;
border-width:1px;
border-left:8px solid #0088dd !important;
border-left:8px solid #0088dd !important;
}
.mmgdisclaimer {
clear:both;
width:65%;
margin:0.5em auto;
overflow:auto;
background-color:#fef6e7;
border-left:15px solid #ffcc33;
border-top:none;
border-right:none;
border-bottom:none;
}
}


@media screen and (max-width:850px) {
@media screen and (max-width:850px) {
.infobox, .noticebox, .messagebox {
.infobox,
.noticebox,
.messagebox,
.mmgdisclaimer {
max-width:100%;
max-width:100%;
min-width:250px;
min-width:250px;
Line 115: Line 148:
}
}


/* Common text & table cell styles */
.col-1-left td:nth-child(1) { text-align: left; }
.col-1-left td:nth-child(1) { text-align: left; }
.col-2-left td:nth-child(2) { text-align: left; }
.col-2-left td:nth-child(2) { text-align: left; }
Line 145: Line 179:
.col-9-right td:nth-child(9) { text-align: right; }
.col-9-right td:nth-child(9) { text-align: right; }


/* Common text & table cell styles */
.table-positive {
.table-positive {
background-color: #90ee90;
background-color: #90ee90;
Line 169: Line 202:
.text-negative {
.text-negative {
color: red;
color: red;
}
.mmg-no-list li {
    list-style: none;
    margin-bottom: 0.1em;
}
.mmg-no-list ul, .mmg-no-list ol, .mmg-no-list li {
    margin-left: 0
}
}


Line 217: Line 257:
.suggestions-special .special-query,
.suggestions-special .special-query,
.wikitable,
.wikitable,
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
code,
code,
body {
body {
Line 293: Line 334:
.mw-code,
.mw-code,
.mw-widget-dateInputWidget-handle,
.mw-widget-dateInputWidget-handle,
mw-tagfilter-input mw-ui-input mw-ui-input-inline {
mw-tagfilter-input mw-ui-input mw-ui-input-inline,
.oo-ui-tabSelectWidget-framed {
background-color:#323942;
background-color:#323942;
color:#eee;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
background-color:#47505b;
}
.mw-prefs-buttons {
background-color:#2c343f;
}
.oo-ui-tabOptionWidget {
color:#eee;
color:#eee;
}
}
Line 301: Line 352:
.oo-ui-menuOptionWidget.oo-ui-optionWidget,
.oo-ui-menuOptionWidget.oo-ui-optionWidget,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled,
.mw-widget-dateInputWidget-calendar {
.mw-widget-dateInputWidget-calendar,
.oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
background-color:#323942;
background-color:#323942;
border-color:#465160;
border-color:#465160;
Line 320: Line 372:
.mw-parser-output a.external:active,
.mw-parser-output a.external:active,
.mw-parser-output a.external:hover,
.mw-parser-output a.external:hover,
.mw-parser-output a.external:visited:hover,
a:active,
a:active,
a:hover,
a:hover,
Line 372: Line 425:
}
}
.wikitable>*>tr>th,
.wikitable>*>tr>th,
.wikitable>tr>th {
.wikitable>tr>th,
.mw-json tr {
background-color:#465160
background-color:#465160
}
}
Line 387: Line 441:
background-color:#465160
background-color:#465160
}
}
.mw-datatable td {
.mw-datatable td,
.mw-json th {
background-color:#323942
background-color:#323942
}
}
Line 499: Line 554:
background-color:#1e2842;
background-color:#1e2842;
border-color:#091957;
border-color:#091957;
}
/* Money Making guide disclaimer */
.mmgdisclaimer {
background-color: #392e19;
  border-left: 15px solid #a37a00;
}
}
Line 523: Line 584:
.tabber__header {
.tabber__header {
box-shadow:inset 0 -1px 0 0 #eee;
box-shadow:inset 0 -1px 0 0 #eee;
}
/* Workaround for missing borders when headers are sticky */
.stickyHeader th:before {
top: -1px;
border-top: 1px solid #626c7b;
}
.stickyHeader th:after {
bottom: -1px;
border-bottom: 1px solid #626c7b;
}
}
Line 532: Line 603:
/* Common text & table cell styles */
/* Common text & table cell styles */
.table-positive {
.table-positive,
.mw-json-value {
background-color: #285128;
background-color: #285128;
}
}
Line 541: Line 613:
background-color: #6f5815;
background-color: #6f5815;
}
}
.table-na {
.table-na,
.mw-json-empty {
background-color: #282f39;
background-color: #282f39;
color: #717f93;
color: #717f93;
Line 989: Line 1,062:
outline: 1px solid #465160;
outline: 1px solid #465160;
box-shadow: unset;
box-shadow: unset;
}
/* Border of editing text area */
form:not(.oo-ui-layout) textarea, form:not(.oo-ui-layout) input {
border-color: #465160;
}
/* CodeMirror */
.CodeMirror {
background-color:#232a35;
color:#eee;
}
.CodeMirror-linenumber {
color: #72777d;
}
.CodeMirror-gutter.CodeMirror-linenumbers {
background-color: #3c4653;
}
/* Selected text */
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {
background-color: #3e445a;
}
/* Leading space */
.cm-mw-skipformatting {
background-color: #4b6389;
}
/* Asterisk or number sign */
.cm-mw-list {
color: #9cdcfe;
}
/* Signature */
.cm-mw-signature,
.cm-mw-hr {
background-color: inherit;
}
/* HTML comment */
.cm-mw-comment {
color: #529955;
}
/* Template - Nesting levels 1, 2 & 3 */
.cm-mw-template-ground {
color: #569cd6;
}
.cm-mw-template2-ground {
color: #569cd6;
background-color: rgba(100, 0, 0, 0.10);
}
.cm-mw-template3-ground {
color: #569cd6;
background-color: rgba(100, 0, 0, 0.20);
}
/* Variable - variable, name, brackets, and delimiter */
.cm-mw-templatevariable,
.cm-mw-templatevariable-name,
.cm-mw-templatevariable-bracket,
.cm-mw-templatevariable-delimiter {
color: #ce9178;
}
/* Parser function - name, brackets, and delimiter */
.cm-mw-parserfunction-name,
.cm-mw-parserfunction-bracket,
.cm-mw-parserfunction-delimiter {
color: #8a1919;
}
/* Internal link - Link target, brackets, and delimiter */
.cm-mw-link-pagename,
.cm-mw-link-bracket,
.cm-mw-link-delimiter {
color: #888cd7;
}
/* Internal link - # character & section */
.cm-mw-link,
.cm-mw-link-tosection {
color: #bd81ce;
}
/* External link - target, protocol, label, and brackets */
.cm-mw-extlink,
.cm-mw-free-extlink,
.cm-mw-extlink-protocol,
.cm-mw-free-extlink-protocol,
.cm-mw-extlink-bracket {
color: #565991;
}
/* Table - Brackets, delimiter, definition, caption */
.cm-mw-table-bracket,
.cm-mw-table-delimiter,
.cm-mw-table-definition,
.cm-mw-table-caption {
color: #dbbb5b;
}
}


Line 1,164: Line 1,325:
background-color:#465160!important
background-color:#465160!important
}
}
}
.d-none {
  display: none !important;
}
}