MediaWiki:Gadget-brownTheme.cssGive feedback
Note: After publishing, you may need to reload with your cache disabled to see your changes.
- Windows / Linux: Press Ctrl-Shift-R
- macOS: Press ⌘-Shift-R
:root[data-theme="brown"] {
--base: #241c16;
--accent: #60f8b3;
--link-color: var(--accent);
--color-progressive: var(--accent);
--color-visited: var(--accent);
--color-visited--hover: var(--accent);
--color-visited--active: var(--accent);
--color-content-added: #009c00;
--background-color-success-subtle: #009c00;
--border-color-success: #009c00;
--color-destructive: #e64835;
--border-color-error: #e64835;
--color-destructive--visited--active: #e64835;
--background-color-content-removed: #ff4e4e;
--border-color-warning: #ab7f2a;
--color-progressive--hover: var(--accent);
--bg-image-color: transparent;
--background-color-base: var(--base);
--background-color-base-border: oklch(from var(--base) calc(l - 0.06) c h);
--background-color-base-subtle: oklch(from var(--base) calc(l - 0.09) c h);
--background-color-base-subtle-border: oklch(from var(--base) calc(l - 0.06) c h);
--background-color-light: oklch(from var(--base) calc(l + 0.05) calc(c + 0.011) h);
--background-color-base-2: oklch(from var(--base) calc(l + 0.07) c h);
--background-color-base-3: oklch(from var(--base) calc(l + 0.12) c h);
--background-color-base-4: oklch(from var(--base) calc(l + 0.17) c h);
--background-color-base-5: oklch(from var(--base) calc(l + 0.22) c h);
--background-color-neutral-subtle: oklch(from var(--base) calc(l + 0.07) c h);
--background-color-neutral: var(--base);
--background-color-interactive-subtle: var(--base);
--background-color-interactive: oklch(from var(--base) calc(l + 0.07) c h);
--background-color-disabled: oklch(from var(--base) calc(l + 0.03) c h);
--background-color-disabled-subtle: var(--base);
--border-color-base: oklch(from var(--base) calc(l + 0.27) c h);
--border-color-subtle: oklch(from var(--base) calc(l + 0.19) c h / 0.96);
--border-color-muted: oklch(from var(--base) calc(l + 0.19) c h / 0.96);
--border-color-disabled: oklch(from var(--base) calc(l + 0.19) c h / 0.96);
--color-base: oklch(from var(--base) calc(l + 0.72) c h);
--color-emphasized: oklch(from var(--base) calc(l + 0.78) c h);
--color-subtle: oklch(from var(--base) calc(l + 0.72) c h / 0.63);
--color-notice: oklch(from var(--base) calc(l + 0.72) c h / 0.63);
--color-base--hover: oklch(from var(--base) calc(l + 0.72) c h);
--link-color--hover: oklch(from var(--accent) calc(l - 0.22) c h);
--alt-link-color: oklch(from var(--base) calc(l + 0.72) c h);
--color-destructive-subtle: #3e0000;
--background-color-error-subtle: #3e0000;
--background-color-warning-subtle: oklch(from var(--base) calc(l + 0.14) c h);
--background-color-progressive: oklch(from var(--accent) calc(l - 0.50) c h);
--background-color-progressive-subtle: oklch(from var(--accent) calc(l - 0.56) c h);
--background-color-progressive-subtle--hover: oklch(from var(--accent) calc(l - 0.52) c h);
--background-color-progressive--hover: oklch(from var(--accent) calc(l - 0.40) c h);
--background-color-progressive--active: oklch(from var(--accent) calc(l - 0.45) c h);
--background-color-progressive-subtle--active: oklch(from var(--accent) calc(l - 0.45) c h);
--border-color-progressive: oklch(from var(--accent) calc(l - 0.56) c h);
--border-color-progressive--hover: oklch(from var(--accent) calc(l - 0.48) c h);
--border-color-progressive-subtle--active: oklch(from var(--accent) calc(l - 0.45) c h);
--color-progressive--focus: oklch(from var(--accent) calc(l - 0.56) c h);
--color-progressive--active: #fff;
}
:root[data-theme="brown"][data-mode="light"] {
--base: #f5ede0;
--accent: #0a7a4b;
--background-color-base-border: oklch(from var(--base) calc(l + 0.06) c h);
--background-color-base-subtle: oklch(from var(--base) calc(l + 0.09) c h);
--background-color-base-subtle-border: oklch(from var(--base) calc(l + 0.06) c h);
--background-color-light: oklch(from var(--base) calc(l - 0.09) c h);
--background-color-base-2: oklch(from var(--base) calc(l - 0.07) c h);
--background-color-base-3: oklch(from var(--base) calc(l - 0.12) c h);
--background-color-base-4: oklch(from var(--base) calc(l - 0.17) c h);
--background-color-base-5: oklch(from var(--base) calc(l - 0.22) c h);
--background-color-neutral-subtle: oklch(from var(--base) calc(l - 0.07) c h);
--background-color-interactive: oklch(from var(--base) calc(l - 0.07) c h);
--background-color-disabled: oklch(from var(--base) calc(l - 0.03) c h);
--border-color-base: oklch(from var(--base) calc(l - 0.27) c h);
--border-color-subtle: oklch(from var(--base) calc(l - 0.19) c h / 0.96);
--border-color-muted: oklch(from var(--base) calc(l - 0.19) c h / 0.96);
--border-color-disabled: oklch(from var(--base) calc(l - 0.19) c h / 0.96);
--color-base: oklch(from var(--base) calc(l - 0.72) c h);
--color-emphasized: oklch(from var(--base) calc(l - 0.78) c h);
--color-subtle: oklch(from var(--base) calc(l - 0.72) c h / 0.63);
--color-notice: oklch(from var(--base) calc(l - 0.72) c h / 0.63);
--color-base--hover: oklch(from var(--base) calc(l - 0.72) c h);
--link-color--hover: oklch(from var(--accent) calc(l + 0.22) c h);
--alt-link-color: oklch(from var(--base) calc(l - 0.72) c h);
--color-destructive-subtle: #fde8e6;
--background-color-error-subtle: #fde8e6;
--background-color-warning-subtle: oklch(from var(--base) calc(l - 0.14) c h);
--background-color-progressive: oklch(from var(--accent) calc(l + 0.50) c h);
--background-color-progressive-subtle: oklch(from var(--accent) calc(l + 0.56) c h);
--background-color-progressive-subtle--hover: oklch(from var(--accent) calc(l + 0.52) c h);
--background-color-progressive--hover: oklch(from var(--accent) calc(l + 0.40) c h);
--background-color-progressive--active: oklch(from var(--accent) calc(l + 0.45) c h);
--background-color-progressive-subtle--active: oklch(from var(--accent) calc(l + 0.45) c h);
--border-color-progressive: oklch(from var(--accent) calc(l + 0.56) c h);
--border-color-progressive--hover: oklch(from var(--accent) calc(l + 0.48) c h);
--border-color-progressive-subtle--active: oklch(from var(--accent) calc(l + 0.45) c h);
--color-progressive--focus: oklch(from var(--accent) calc(l + 0.56) c h);
--color-progressive--active: #000;
.cm-mw-section-header {
color: var(--color-progressive)
}
.mw-highlight pre,
.mw-highlight code {
background: transparent;
color: inherit;
}
/*highlighted line */
.mw-highlight .hll {
background-color: oklch(from var(--accent) calc(l + 0.50) c h / 0.18);
}
/*line numbers */
.mw-highlight .linenos,
.mw-highlight .lineno {
background: var(--background-color-base-2);
color: var(--color-subtle);
padding: 0 0.6em;
z-index: 0;
}
/*whitespace */
.mw-highlight .w {
color: var(--border-color-subtle);
}
/*errors / invalid */
.mw-highlight .err {
background-color: var(--background-color-error-subtle);
color: var(--color-destructive);
border: 1px solid var(--border-color-error);
}
/*comments */
.mw-highlight .c,
.mw-highlight .ch,
.mw-highlight .cm,
.mw-highlight .cpf,
.mw-highlight .c1,
.mw-highlight .cs {
color: var(--color-subtle);
font-style: italic;
}
/*preprocessor / directive-ish comments */
.mw-highlight .cp {
color: var(--color-notice);
font-style: italic;
}
/*keywords */
.mw-highlight .k,
.mw-highlight .kc,
.mw-highlight .kd,
.mw-highlight .kn,
.mw-highlight .kr,
.mw-highlight .kp {
color: var(--accent);
font-weight: bold;
}
/*keyword: type */
.mw-highlight .kt {
color: #6035b0;
font-weight: bold;
}
/*operators + punctuation */
.mw-highlight .o,
.mw-highlight .ow,
.mw-highlight .p {
color: var(--color-emphasized);
}
/*numbers */
.mw-highlight .m,
.mw-highlight .mb,
.mw-highlight .mf,
.mw-highlight .mh,
.mw-highlight .mi,
.mw-highlight .mo,
.mw-highlight .il {
color: var(--border-color-warning);
}
/*strings */
.mw-highlight .s,
.mw-highlight .sa,
.mw-highlight .sb,
.mw-highlight .sc,
.mw-highlight .dl,
.mw-highlight .s2,
.mw-highlight .sh,
.mw-highlight .s1,
.mw-highlight .sx,
.mw-highlight .ss {
color: #b85000;
}
/*docstrings */
.mw-highlight .sd {
color: var(--color-subtle);
font-style: italic;
}
/*string escapes / interpolation */
.mw-highlight .se,
.mw-highlight .si {
color: var(--border-color-warning);
}
/*regex */
.mw-highlight .sr {
color: var(--color-destructive);
}
/*names / identifiers */
.mw-highlight .n {
color: var(--color-base);
}
/*functions */
.mw-highlight .nf,
.mw-highlight .fm {
color: #0a6080;
}
/*variables */
.mw-highlight .nv,
.mw-highlight .vc,
.mw-highlight .vg,
.mw-highlight .vi,
.mw-highlight .vm {
color: #0a6080;
}
/*builtins / pseudo-builtin */
.mw-highlight .nb,
.mw-highlight .bp {
color: #0a6080;
}
/*constants */
.mw-highlight .no {
color: var(--border-color-warning);
}
/*classes / types / namespaces */
.mw-highlight .nc,
.mw-highlight .nn {
color: #6035b0;
}
/*exceptions */
.mw-highlight .ne {
color: var(--color-destructive);
}
/*decorators / annotations */
.mw-highlight .nd {
color: #1a55b0;
}
/*labels */
.mw-highlight .nl {
color: var(--accent);
}
/*XML/HTML tags & attributes */
.mw-highlight .nt {
color: #1a55b0;
}
.mw-highlight .na {
color: var(--border-color-warning);
}
/*entities */
.mw-highlight .ni {
color: var(--color-emphasized);
}
/*generic / headings / emphasis */
.mw-highlight .gh,
.mw-highlight .gu,
.mw-highlight .gp {
color: #6035b0;
font-weight: bold;
}
/*deleted / inserted */
.mw-highlight .gd {
color: var(--color-destructive);
}
.mw-highlight .gi {
color: var(--color-content-added);
}
/*generic output / tracebacks */
.mw-highlight .go {
color: var(--color-subtle);
}
.mw-highlight .gt {
color: #1a55b0;
}
/*CodeMirror (MediaWiki template tokens) */
.cm-mw-template-name,
.cm-mw-template-argument-name,
.cm-mw-template-delimiter,
.cm-mw-template-bracket {
color: #7a20b0;
}
/*Ace editor*/
.ace-tm {
background-color: var(--background-color-base-subtle);
color: var(--color-base);
}
/*gutter */
.ace-tm .ace_gutter {
background: var(--background-color-base-2);
color: var(--color-subtle);
}
/*print margin */
.ace-tm .ace_print-margin {
width: 1px;
background: var(--border-color-subtle);
}
/*fold marker */
.ace-tm .ace_fold {
background-color: #1a55b0;
}
/*cursor */
.ace-tm .ace_cursor {
color: var(--color-emphasized);
}
/*invisible chars */
.ace-tm .ace_invisible {
color: var(--border-color-subtle);
}
/*keywords */
.ace-tm .ace_storage,
.ace-tm .ace_keyword {
color: var(--accent);
}
/*constants */
.ace-tm .ace_constant {
color: var(--border-color-warning);
}
.ace-tm .ace_constant.ace_buildin {
color: #0a6080;
}
.ace-tm .ace_constant.ace_language {
color: #1a55b0;
}
.ace-tm .ace_constant.ace_library {
color: var(--accent);
}
/*invalid */
.ace-tm .ace_invalid {
background-color: var(--background-color-error-subtle);
color: var(--color-destructive);
}
/*functions */
.ace-tm .ace_entity.ace_name.ace_function {
color: #2640c0;
}
.ace-tm .ace_support.ace_function {
color: #2640c0;
}
.ace-tm .ace_support.ace_constant {
color: var(--accent);
}
.ace-tm .ace_support.ace_type,
.ace-tm .ace_support.ace_class {
color: #6035b0;
}
/*operators */
.ace-tm .ace_keyword.ace_operator {
color: var(--color-emphasized);
}
/*strings */
.ace-tm .ace_string {
color: #b85000;
}
/*comments */
.ace-tm .ace_comment {
color: var(--color-subtle);
font-style: italic;
}
.ace-tm .ace_comment.ace_doc {
color: var(--color-notice);
}
.ace-tm .ace_comment.ace_doc.ace_tag {
color: var(--border-color-subtle);
}
/*numbers */
.ace-tm .ace_constant.ace_numeric {
color: var(--border-color-warning);
}
/*variables */
.ace-tm .ace_variable {
color: #0a6080;
}
/*XML / markup */
.ace-tm .ace_xml-pe {
color: var(--color-subtle);
}
.ace-tm .ace_meta.ace_tag {
color: #1a55b0;
}
/*regex */
.ace-tm .ace_string.ace_regex {
color: var(--color-destructive);
}
/*selection */
.ace-tm .ace_marker-layer .ace_selection {
background: oklch(from var(--accent) calc(l + 0.50) c h / 0.25);
}
.ace-tm.ace_multiselect .ace_selection.ace_start {
box-shadow: 0 0 3px 0px var(--color-emphasized);
}
/*active line / step / stack */
.ace-tm .ace_marker-layer .ace_step {
background: oklch(from var(--border-color-warning) l c h / 0.20);
}
.ace-tm .ace_marker-layer .ace_stack {
background: oklch(from var(--accent) calc(l + 0.50) c h / 0.18);
}
.ace-tm .ace_marker-layer .ace_active-line {
background: oklch(from var(--base) calc(l - 0.04) c h);
}
/*brackets */
.ace-tm .ace_marker-layer .ace_bracket {
margin: -1px 0 0 -1px;
border: 1px solid var(--border-color-subtle);
}
/*gutter active line */
.ace-tm .ace_gutter-active-line {
background-color: var(--background-color-base-3);
color: var(--color-base);
}
/*selected word */
.ace-tm .ace_marker-layer .ace_selected-word {
background: oklch(from var(--border-color-warning) l c h / 0.12);
border: 1px solid oklch(from var(--border-color-warning) l c h / 0.30);
}
/*indent guides */
.ace-tm .ace_indent-guide {
background: none;
border-right: 1px dotted var(--border-color-muted);
}
.ace-tm .ace_indent-guide-active {
background: none;
border-right: 1px dotted var(--border-color-base);
}
}