Tags: Manual revert Reverted |
Tags: Blanking Manual revert |
| Line 1: |
Line 1: |
|
| |
|
| :root {
| |
| --bg: #f8d5e4;
| |
| --bg-1: #fff5fb;
| |
| --bg-2: #ffebf5;
| |
| --surface: #ffffff;
| |
| --border: #f7d6e6;
| |
| --border-strong: #ff6b9d;
| |
| --text: #cc226c;
| |
| --text-strong: #1a0610;
| |
| --text-muted: #6b3b53;
| |
| --heading: #ff6b9d;
| |
| --link: #fd007f;
| |
| --link-hover: #fa4aa2;
| |
| --link-visited: #8a012f;
| |
| --heading-gradient-start: #ff6b9d;
| |
| --heading-gradient-end: #ff8fb0;
| |
| --primary: #ff6b9d;
| |
| --primary-hover: #ff8fb0;
| |
| --danger: #b91c1c;
| |
| --danger-hover: #dc2626;
| |
| --disabled-bg: #fff5fb;
| |
| --disabled-border: #f7d6e6;
| |
| --disabled-text: #a76a86;
| |
| --overlay: rgba( 0, 0, 0, 0.5 );
| |
| --overlay-light: rgb( 0 0 0 / 0.3 );
| |
| --shadow-soft: rgba( 255, 107, 157, 0.15 );
| |
| --shadow-medium: rgba( 255, 107, 157, 0.22 );
| |
| --shadow-strong: rgb(252, 84, 168);
| |
| --focus-ring: rgba( 255, 107, 157, 0.2 );
| |
| --positive: #22c55e;
| |
| --negative: #ef4444;
| |
| --positive-bg: rgba( 34, 197, 94, 0.12 );
| |
| --negative-bg: rgba( 239, 68, 68, 0.12 );
| |
| --right-margin: 20px;
| |
| --surface-tint: rgba( 255, 107, 157, 0.1 );
| |
|
| |
|
| |
| }
| |
|
| |
|
| |
| /* -----------------------------------------------------------------------------------*/
| |
| :root[data-theme='dark-neutral'] {
| |
| --bg: #111214;
| |
| --bg-1: #15171a;
| |
| --bg-2: #1b1e22;
| |
| --surface: #14161a;
| |
| --border: #262a30;
| |
| --border-strong: #3a3f47;
| |
| --text: #ffe7d7e1;
| |
| --text-strong: #f1f3f5;
| |
| --text-muted: #9aa3ad;
| |
| --heading: #e5bca0fd;
| |
| --link: #e5bca0fd;
| |
| --link-hover: #e5bca0a6;
| |
| --link-visited: #e5bca0a6;
| |
| --heading-gradient-start: #e5bca0fd;
| |
| --heading-gradient-end: #f0d8c9;
| |
| --primary: #9c7a62;
| |
| --primary-hover: #c49a7f;
| |
| --danger: #ff3b6e;
| |
| --danger-hover: #ff567f;
| |
| --disabled-bg: #14161a;
| |
| --disabled-border: #262a30;
| |
| --disabled-text: #6f7782;
| |
| --overlay: rgba( 0, 0, 0, 0.6 );
| |
| --overlay-light: rgb( 0 0 0 / 0.3 );
| |
| --shadow-soft: rgba( 0, 0, 0, 0.2 );
| |
| --shadow-medium: rgba( 0, 0, 0, 0.35 );
| |
| --shadow-strong: rgba( 0, 0, 0, 0.5 );
| |
| --focus-ring: rgba( 229, 188, 160, 0.22 );
| |
| --positive: #aaff00;
| |
| --negative: #ff3366;
| |
| --positive-bg: rgba( 170, 255, 0, 0.12 );
| |
| --negative-bg: rgba( 255, 51, 102, 0.12 );
| |
| --right-margin: 20px;
| |
| --surface-tint: rgba( 156, 122, 98, 0.18 );
| |
|
| |
|
| |
| }
| |
|
| |
|
| |
| /* -----------------------------------------------------------------------------------*/
| |
| :root[data-theme='power-light'] {
| |
| --bg: #fff0f0;
| |
| --bg-1: #fff5f5;
| |
| --bg-2: #ffebeb;
| |
| --surface: #ffffff;
| |
| --border: #f7d6d6;
| |
| --border-strong: #ff6b6b;
| |
| --text: #a00909;
| |
| --text-strong: #1a0606;
| |
| --text-muted: #6b3b3b;
| |
| --heading: #ff6b6b;
| |
| --link: #ff6b6b;
| |
| --link-hover: #fa4a4a;
| |
| --link-visited: #d63333;
| |
| --heading-gradient-start: #ff6b6b;
| |
| --heading-gradient-end: #ff8f8f;
| |
| --primary: #ff6b6b;
| |
| --primary-hover: #ff8f8f;
| |
| --danger: #b91c1c;
| |
| --danger-hover: #dc2626;
| |
| --disabled-bg: #fff5f5;
| |
| --disabled-border: #f7d6d6;
| |
| --disabled-text: #a76a6a;
| |
| --overlay: rgba( 0, 0, 0, 0.5 );
| |
| --overlay-light: rgb( 0 0 0 / 0.3 );
| |
| --shadow-soft: rgba( 255, 107, 107, 0.15 );
| |
| --shadow-medium: rgba( 255, 107, 107, 0.22 );
| |
| --shadow-strong: rgba( 255, 107, 107, 0.3 );
| |
| --focus-ring: rgba( 255, 107, 107, 0.2 );
| |
| --positive: #22c55e;
| |
| --negative: #ef4444;
| |
| --positive-bg: rgba( 34, 197, 94, 0.12 );
| |
| --negative-bg: rgba( 239, 68, 68, 0.12 );
| |
| --right-margin: 20px;
| |
| --surface-tint: rgba( 255, 107, 107, 0.1 );
| |
|
| |
| }
| |
|
| |
| /* -----------------------------------------------------------------------------------*/
| |
| :root[data-theme='magic-light'] {
| |
| --bg: #f0f8ff;
| |
| --bg-1: #f5fbff;
| |
| --bg-2: #ebf5ff;
| |
| --surface: #ffffff;
| |
| --border: #d6e6f7;
| |
| --border-strong: #6ba6ff;
| |
| --text: #004196;
| |
| --text-strong: #06101a;
| |
| --text-muted: #3b536b;
| |
| --heading: #6ba6ff;
| |
| --link: #6ba6ff;
| |
| --link-hover: #4a9afa;
| |
| --link-visited: #3384d6;
| |
| --heading-gradient-start: #6ba6ff;
| |
| --heading-gradient-end: #8fc3ff;
| |
| --primary: #6ba6ff;
| |
| --primary-hover: #8fc3ff;
| |
| --danger: #b91c1c;
| |
| --danger-hover: #dc2626;
| |
| --disabled-bg: #f5fbff;
| |
| --disabled-border: #d6e6f7;
| |
| --disabled-text: #6a86a7;
| |
| --overlay: rgba( 0, 0, 0, 0.5 );
| |
| --overlay-light: rgb( 0 0 0 / 0.3 );
| |
| --shadow-soft: rgba( 107, 166, 255, 0.15 );
| |
| --shadow-medium: rgba( 107, 166, 255, 0.22 );
| |
| --shadow-strong: rgba( 107, 166, 255, 0.3 );
| |
| --focus-ring: rgba( 107, 166, 255, 0.2 );
| |
| --positive: #22c55e;
| |
| --negative: #ef4444;
| |
| --positive-bg: rgba( 34, 197, 94, 0.12 );
| |
| --negative-bg: rgba( 239, 68, 68, 0.12 );
| |
| --right-margin: 20px;
| |
| --surface-tint: rgba( 107, 166, 255, 0.1 );
| |
| }
| |
| /* -----------------------------------------------------------------------------------*/
| |
| :root[data-theme='sense-light'] {
| |
| --bg: #f8f0ff;
| |
| --bg-1: #fbf5ff;
| |
| --bg-2: #f5ebff;
| |
| --surface: #ffffff;
| |
| --border: #e6d6f7;
| |
| --border-strong: #a66bff;
| |
| --text: #410096;
| |
| --text-strong: #10061a;
| |
| --text-muted: #533b6b;
| |
| --heading: #a66bff;
| |
| --link: #a66bff;
| |
| --link-hover: #9a4afa;
| |
| --link-visited: #8433d6;
| |
| --heading-gradient-start: #a66bff;
| |
| --heading-gradient-end: #c38fff;
| |
| --primary: #a66bff;
| |
| --primary-hover: #c38fff;
| |
| --danger: #b91c1c;
| |
| --danger-hover: #dc2626;
| |
| --disabled-bg: #fbf5ff;
| |
| --disabled-border: #e6d6f7;
| |
| --disabled-text: #866aa7;
| |
| --overlay: rgba( 0, 0, 0, 0.5 );
| |
| --overlay-light: rgb( 0 0 0 / 0.3 );
| |
| --shadow-soft: rgba( 166, 107, 255, 0.15 );
| |
| --shadow-medium: rgba( 166, 107, 255, 0.22 );
| |
| --shadow-strong: rgba( 166, 107, 255, 0.3 );
| |
| --focus-ring: rgba( 166, 107, 255, 0.2 );
| |
| --positive: #22c55e;
| |
| --negative: #ef4444;
| |
| --positive-bg: rgba( 34, 197, 94, 0.12 );
| |
| --negative-bg: rgba( 239, 68, 68, 0.12 );
| |
| --right-margin: 20px;
| |
| --surface-tint: rgba( 166, 107, 255, 0.1 );
| |
| }
| |
| /* -----------------------------------------------------------------------------------*/
| |
| :root[data-theme='charm-light'] {
| |
| --bg: #fff7e6;
| |
| --bg-1: #fffaf0;
| |
| --bg-2: #ffefd5;
| |
| --surface: #ffffff;
| |
| --border: #f3d6b6;
| |
| --border-strong: #d97706;
| |
| --text: #a55d00;
| |
| --text-strong: #1a0f06;
| |
| --text-muted: #6b4a3b;
| |
| --heading: #b45309;
| |
| --link: #c2410c;
| |
| --link-hover: #9a3412;
| |
| --link-visited: #7c2d12;
| |
| --heading-gradient-start: #b45309;
| |
| --heading-gradient-end: #f59e0b;
| |
| --primary: #d97706;
| |
| --primary-hover: #f59e0b;
| |
| --danger: #b91c1c;
| |
| --danger-hover: #dc2626;
| |
| --disabled-bg: #fffaf0;
| |
| --disabled-border: #f3d6b6;
| |
| --disabled-text: #a77d6a;
| |
| --overlay: rgba( 0, 0, 0, 0.5 );
| |
| --overlay-light: rgb( 0 0 0 / 0.3 );
| |
| --shadow-soft: rgba( 217, 119, 6, 0.15 );
| |
| --shadow-medium: rgba( 217, 119, 6, 0.22 );
| |
| --shadow-strong: rgba( 217, 119, 6, 0.3 );
| |
| --focus-ring: rgba( 245, 158, 11, 0.2 );
| |
| --positive: #22c55e;
| |
| --negative: #ef4444;
| |
| --positive-bg: rgba( 34, 197, 94, 0.12 );
| |
| --negative-bg: rgba( 239, 68, 68, 0.12 );
| |
| --right-margin: 20px;
| |
| --surface-tint: rgba( 217, 119, 6, 0.1 );
| |
| }
| |
| /* -----------------------------------------------------------------------------------*/
| |
| :root[data-theme='power-dark'] {
| |
| --bg: #1a0b0b;
| |
| --bg-1: #261010;
| |
| --bg-2: #331616;
| |
| --surface: #220f0f;
| |
| --border: #5a2f2f;
| |
| --border-strong: #ff6b6b;
| |
| --text: #ff9494;
| |
| --text-strong: #ffffff;
| |
| --text-muted: #b4c9c9;
| |
| --heading: #ff6b6b;
| |
| --link: #ffb488d7;
| |
| --link-hover: #ff6b6b;
| |
| --link-visited: #ff8f45d5;
| |
| --heading-gradient-start: #ff4d4d;
| |
| --heading-gradient-end: #ff8f8f;
| |
| --primary: #b30000;
| |
| --primary-hover: #e60000;
| |
| --danger: #ff3b6e;
| |
| --danger-hover: #ff567f;
| |
| --disabled-bg: #2d0b0b;
| |
| --disabled-border: #5a2f2f;
| |
| --disabled-text: #817c8a;
| |
| --overlay: rgba( 0, 0, 0, 0.6 );
| |
| --overlay-light: rgb( 0 0 0 / 0.3 );
| |
| --shadow-soft: rgba( 255, 77, 77, 0.2 );
| |
| --shadow-medium: rgba( 255, 77, 77, 0.35 );
| |
| --shadow-strong: rgba( 255, 77, 77, 0.5 );
| |
| --focus-ring: rgba( 255, 77, 77, 0.3 );
| |
| --positive: #aaff00;
| |
| --negative: #ff3366;
| |
| --positive-bg: rgba( 170, 255, 0, 0.12 );
| |
| --negative-bg: rgba( 255, 51, 102, 0.12 );
| |
| --right-margin: 20px;
| |
| --surface-tint: #4d1f1f;
| |
| }
| |
| /* -----------------------------------------------------------------------------------*/
| |
| :root[data-theme='charm-dark'] {
| |
| --bg: #1a120b;
| |
| --bg-1: #261a10;
| |
| --bg-2: #332216;
| |
| --surface: #22170f;
| |
| --border: #5a432f;
| |
| --border-strong: #f59e0b;
| |
| --text: #fde8a3;
| |
| --text-strong: #fdf5c5;
| |
| --text-muted: #c9bdb4;
| |
| --heading: #fbbf24;
| |
| --link: #f59e0b;
| |
| --link-hover: #fbbf24;
| |
| --link-visited: #d97706;
| |
| --heading-gradient-start: #f59e0b;
| |
| --heading-gradient-end: #fbbf24;
| |
| --primary: #b45309;
| |
| --primary-hover: #d97706;
| |
| --danger: #ff3b6e;
| |
| --danger-hover: #ff567f;
| |
| --disabled-bg: #2d1a0b;
| |
| --disabled-border: #5a432f;
| |
| --disabled-text: #8a827c;
| |
| --overlay: rgba( 0, 0, 0, 0.6 );
| |
| --overlay-light: rgb( 0 0 0 / 0.3 );
| |
| --shadow-soft: rgba( 245, 158, 11, 0.2 );
| |
| --shadow-medium: rgba( 245, 158, 11, 0.35 );
| |
| --shadow-strong: rgba( 245, 158, 11, 0.5 );
| |
| --focus-ring: rgba( 251, 191, 36, 0.3 );
| |
| --positive: #aaff00;
| |
| --negative: #ff3366;
| |
| --positive-bg: rgba( 170, 255, 0, 0.12 );
| |
| --negative-bg: rgba( 255, 51, 102, 0.12 );
| |
| --right-margin: 20px;
| |
| --surface-tint: #4d3621;
| |
| }
| |
| /* -----------------------------------------------------------------------------------*/
| |
| :root[data-theme='dark-lightBlue'] {
| |
| --bg: #040914;
| |
| --bg-1: #091427;
| |
| --bg-2: #0c1b3a;
| |
| --surface: #081226;
| |
| --border: #12243c;
| |
| --border-strong: #3a6ea6;
| |
| --text: #9ceeff;
| |
| --text-strong: #00515f;
| |
| --text-muted: #8fb2cc;
| |
| --heading: #76e2ff;
| |
| --link: #4cc9f0;
| |
| --link-hover: #76e2ff;
| |
| --link-visited: #2ea9ff;
| |
| --heading-gradient-start: #4cc9f0;
| |
| --heading-gradient-end: #76e2ff;
| |
| --primary: #2ec7ff;
| |
| --primary-hover: #76e2ff;
| |
| --danger: #ff3b6e;
| |
| --danger-hover: #ff567f;
| |
| --disabled-bg: #0b172d;
| |
| --disabled-border: #213a50;
| |
| --disabled-text: #7a90a6;
| |
| --overlay: rgba( 0, 0, 0, 0.6 );
| |
| --overlay-light: rgb( 0 0 0 / 0.3 );
| |
| --shadow-soft: rgba( 76, 201, 240, 0.2 );
| |
| --shadow-medium: rgba( 76, 201, 240, 0.35 );
| |
| --shadow-strong: rgba( 76, 201, 240, 0.5 );
| |
| --focus-ring: rgba( 76, 201, 240, 0.3 );
| |
| --positive: #aaff00;
| |
| --negative: #ff3366;
| |
| --positive-bg: rgba( 170, 255, 0, 0.12 );
| |
| --negative-bg: rgba( 255, 51, 102, 0.12 );
| |
| --right-margin: 20px;
| |
| --surface-tint: #1a3f66;
| |
| }
| |
| /* -----------------------------------------------------------------------------------*/
| |
| :root[data-theme='dark-purple'] {
| |
| --bg: #11061c;
| |
| --bg-1: #1a0e2a;
| |
| --bg-2: #221237;
| |
| --surface: #170a26;
| |
| --border: #3a2b5a;
| |
| --border-strong: #6e48a6;
| |
| --text: #e3a8ff;
| |
| --text-strong: #eeb8ff;
| |
| --text-muted: #b8acd6;
| |
| --heading: #c557cf;
| |
| --link: #e993ffcc;
| |
| --link-hover: #e96eff;
| |
| --link-visited: #d066fd96;
| |
| --heading-gradient-start: #d03cff;
| |
| --heading-gradient-end: #e96eff;
| |
| --primary: #490268;
| |
| --primary-hover: #684374;
| |
| --danger: #ff3b6e;
| |
| --danger-hover: #ff567f;
| |
| --disabled-bg: #1a132b;
| |
| --disabled-border: #3a2b5a;
| |
| --disabled-text: #8d7bb1;
| |
| --overlay: rgba( 0, 0, 0, 0.6 );
| |
| --overlay-light: rgb( 0 0 0 / 0.3 );
| |
| --shadow-soft: rgba( 208, 60, 255, 0.2 );
| |
| --shadow-medium: rgba( 208, 60, 255, 0.35 );
| |
| --shadow-strong: rgba( 208, 60, 255, 0.5 );
| |
| --focus-ring: rgba( 208, 60, 255, 0.3 );
| |
| --positive: #aaff00;
| |
| --negative: #ff3366;
| |
| --positive-bg: rgba( 170, 255, 0, 0.12 );
| |
| --negative-bg: rgba( 255, 51, 102, 0.12 );
| |
| --right-margin: 20px;
| |
| --surface-tint: #3a2b5a;
| |
| }
| |
| /* -----------------------------------------------------------------------------------*/
| |
| :root[data-theme='christmas'] {
| |
| --bg: #0b1a12;
| |
| --bg-1: #10261a;
| |
| --bg-2: #163322;
| |
| --surface: #0f2217;
| |
| --border: #2f5a41;
| |
| --border-strong: #d4af37;
| |
| --text: #f4f0e6;
| |
| --text-strong: #ffffff;
| |
| --text-muted: #c9c1b4;
| |
| --heading: #d4af37;
| |
| --link: #e04b4b;
| |
| --link-hover: #ff6b6b;
| |
| --link-visited: #c13f3f;
| |
| --heading-gradient-start: #d4af37;
| |
| --heading-gradient-end: #fff2b2;
| |
| --primary: #0f7a3a;
| |
| --primary-hover: #14914a;
| |
| --danger: #b91c1c;
| |
| --danger-hover: #dc2626;
| |
| --disabled-bg: #0d1c13;
| |
| --disabled-border: #2f5a41;
| |
| --disabled-text: #7c8a81;
| |
| --overlay: rgba( 0, 0, 0, 0.6 );
| |
| --overlay-light: rgb( 0 0 0 / 0.3 );
| |
| --shadow-soft: rgba( 212, 175, 55, 0.2 );
| |
| --shadow-medium: rgba( 212, 175, 55, 0.35 );
| |
| --shadow-strong: rgba( 212, 175, 55, 0.5 );
| |
| --focus-ring: rgba( 212, 175, 55, 0.3 );
| |
| --positive: #22c55e;
| |
| --negative: #ef4444;
| |
| --positive-bg: rgba( 34, 197, 94, 0.12 );
| |
| --negative-bg: rgba( 239, 68, 68, 0.12 );
| |
| --right-margin: 20px;
| |
| --surface-tint: #1f4d36;
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| /*
| |
| * =========================
| |
| * = Centering the content =
| |
| * =========================
| |
| */
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| html body {
| |
| position: relative;
| |
|
| |
|
| |
| }
| |
|
| |
|
| |
| #p-personal {
| |
| right: var( --right-margin );
| |
| }
| |
|
| |
| #p-search {
| |
| margin-right: var( --right-margin );
| |
| }
| |
|
| |
| .suggestions {
| |
| /* We can't get around !important here due to inline CSS. */
| |
| right: var( --right-margin ) !important;
| |
| }
| |
|
| |
| /* For Extension:UniversalLanguageSelector */
| |
| .imeselector {
| |
| position: fixed;
| |
| }
| |
|
| |
| #content {
| |
| margin-right: var( --right-margin );
| |
| }
| |
|
| |
| /*
| |
| * =======================
| |
| * = Color configuration =
| |
| * =======================
| |
| */
| |
|
| |
|
| |
|
| |
| /*
| |
| * ==========================
| |
| * = Standard HTML elements =
| |
| * ==========================
| |
| */
| |
|
| |
| html body {
| |
| background: var( --bg );
| |
| color: var( --text );
| |
| }
| |
|
| |
| :focus {
| |
| outline: 0;
| |
| }
| |
|
| |
| /*
| |
| * Headers and paragraphs
| |
| */
| |
| h1,
| |
| h2,
| |
| h3,
| |
| h4,
| |
| h5,
| |
| h6 {
| |
| color: var(--heading) !important;
| |
| font-weight: 700 !important;
| |
| }
| |
|
| |
| h1,
| |
| h2,
| |
| h3 {
| |
| font-family: 'Linux Libertine', 'Georgia', 'Times', serif;
| |
| border-bottom: 1px solid var( --border-strong );
| |
| }
| |
|
| |
| h4,
| |
| h5,
| |
| h6 {
| |
| border-bottom: none;
| |
| }
| |
|
| |
| p {
| |
| color: var( --text );
| |
| }
| |
|
| |
| b {
| |
| color: var(--heading);
| |
| }
| |
|
| |
| /*
| |
| * Tables
| |
| */
| |
| table {
| |
| background: var( --bg-1 );
| |
| color: var( --text );
| |
| }
| |
|
| |
|
| |
| /*
| |
| * Inputs
| |
| */
| |
| input[ type='text' ],
| |
| input:not( [ type ] ),
| |
| select,
| |
| option {
| |
| background: var( --bg );
| |
| border: 1px solid var( --border );
| |
| color: var( --text );
| |
| }
| |
|
| |
| /*
| |
| * Lists
| |
| */
| |
| ul {
| |
| list-style-type: disc;
| |
| list-style-image: none;
| |
| }
| |
|
| |
| /*
| |
| * Textarea
| |
| */
| |
| textarea {
| |
| background: var( --bg );
| |
| border: 1px solid var( --border );
| |
| color: var( --text );
| |
| }
| |
|
| |
| /*
| |
| * Pre & Code
| |
| */
| |
| pre,
| |
| code,
| |
| tt,
| |
| kbd,
| |
| samp,
| |
| .mw-code {
| |
| background: var( --bg );
| |
| color: var( --text );
| |
| }
| |
|
| |
| pre,
| |
| code,
| |
| .mw-code {
| |
| border: 1px dashed var( --border );
| |
| }
| |
|
| |
| /*
| |
| * Horizontal rule
| |
| */
| |
| hr {
| |
| background: var( --border );
| |
| color: var( --border );
| |
| }
| |
|
| |
| /*
| |
| * Links
| |
| */
| |
| a,
| |
| a.stub {
| |
| color: var( --link );
| |
| }
| |
|
| |
| a:visited,
| |
| a.stub:visited {
| |
| color: var( --link-visited );
| |
| }
| |
|
| |
| a:hover,
| |
| a:active,
| |
| a:focus,
| |
| a.stub:hover,
| |
| a.stub:active,
| |
| a.stub:focus {
| |
| color: var( --link-hover );
| |
| text-decoration: underline;
| |
| }
| |
|
| |
| a.new,
| |
| a.new:hover,
| |
| a.new:active,
| |
| a.new:focus,
| |
| a.new:visited {
| |
| color: var( --link-visited );
| |
| }
| |
|
| |
| .mw-parser-output a.external,
| |
| .mw-parser-output a.external:visited {
| |
| color: var( --link );
| |
| background: none;
| |
| padding: 0;
| |
| }
| |
|
| |
| .mw-parser-output a.external:visited {
| |
| color: var( --link-visited );
| |
| }
| |
|
| |
| /*
| |
| * Forms
| |
| */
| |
| fieldset {
| |
| border: 1px solid var( --border );
| |
| }
| |
|
| |
| /*
| |
| * ======================
| |
| * = Custom UI elements =
| |
| * ======================
| |
| */
| |
|
| |
| /* We add a gratuitous .oo-ui-widget in some places to increase the weight of the selectors. */
| |
|
| |
| /*
| |
| * Classic UI widgets
| |
| */
| |
| .ui-widget-overlay {
| |
| background: var( --overlay-light ) !important;
| |
| }
| |
|
| |
| .ui-widget-content {
| |
| /* Have to use !important to override inline style. */
| |
| color: var( --text ) !important;
| |
| }
| |
|
| |
| .ui-widget.ui-widget-content {
| |
| background: var( --bg-1 );
| |
| color: var( --text );
| |
| }
| |
|
| |
| body .ui-dialog .ui-dialog-titlebar.ui-widget-header,
| |
| body .ui-dialog .ui-dialog-buttonpane.ui-widget-content {
| |
| /* Have to use !important to override another one, ugh. */
| |
| background: var( --bg-2 ) !important;
| |
| color: var( --text );
| |
| }
| |
|
| |
| .ui-widget .ui-widget-header {
| |
| border: 1px solid var( --border );
| |
| }
| |
|
| |
| body .ui-button.ui-widget {
| |
| background: var( --surface ) !important;
| |
| border: 1px solid var( --border ) !important;
| |
| color: var( --text );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| body .ui-button.ui-widget:is( :hover, :active, :focus ) {
| |
| background: var( --surface ) !important;
| |
| border: 1px solid var( --border-strong ) !important;
| |
| color: var( --text );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| /*
| |
| * Message dialog
| |
| */
| |
| .oo-ui-widget.oo-ui-messageDialog-title,
| |
| .oo-ui-widget.oo-ui-messageDialog-message {
| |
| color: var( --text );
| |
| }
| |
|
| |
| /*
| |
| * Panels
| |
| */
| |
| .oo-ui-panelLayout-framed {
| |
| border: 1px solid var( --border );
| |
| }
| |
|
| |
| /*
| |
| * Media search widget
| |
| */
| |
| .oo-ui-widget.oo-ui-widget-enabled.mw-widget-mediaSearchWidget .mw-widget-mediaResultWidget .mw-widget-mediaResultWidget-overlay {
| |
| border: 1px solid var( --border );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.mw-widget-mediaSearchWidget .mw-widget-mediaResultWidget:is( :hover, :active, :focus, .oo-ui-optionWidget-selected ) {
| |
| border: none;
| |
| box-shadow: none;
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.mw-widget-mediaSearchWidget .mw-widget-mediaResultWidget:is( :hover, :active, :focus, .oo-ui-optionWidget-selected ) .mw-widget-mediaResultWidget-overlay {
| |
| border: 1px solid var( --border );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| /*
| |
| * File upload widget
| |
| */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-selectFileWidget.oo-ui-selectFileWidget-dropTarget {
| |
| background-color: var( --bg-1 );
| |
| }
| |
|
| |
| .oo-ui-selectFileWidget-dropLabel,
| |
| .oo-ui-widget.oo-ui-labelWidget.oo-ui-inline-help {
| |
| color: var( --text );
| |
| }
| |
|
| |
| /*
| |
| * Windows
| |
| */
| |
| .oo-ui-windowManager.oo-ui-windowManager-modal .oo-ui-window.oo-ui-dialog .oo-ui-window-frame {
| |
| background-color: var( --bg-1 );
| |
| border: 1px solid var( --border );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| .oo-ui-windowManager.oo-ui-windowManager-floating .oo-ui-window.oo-ui-dialog .oo-ui-window-frame .oo-ui-window-foot {
| |
| outline: none;
| |
| }
| |
|
| |
| /*
| |
| * Save dialog
| |
| */
| |
| .ve-ui-mwSaveDialog-savePanel .ve-ui-mwSaveDialog-summary {
| |
| background: transparent;
| |
| }
| |
|
| |
| .ve-ui-mwSaveDialog-savePanel .ve-ui-mwSaveDialog-options {
| |
| background-color: var( --bg-2 );
| |
| border: 1px solid var( --border );
| |
| }
| |
|
| |
| .ve-ui-mwSaveDialog-savePanel .ve-ui-mwSaveDialog-summaryLabel,
| |
| .ve-ui-mwSaveDialog-savePanel .ve-ui-mwSaveDialog-license {
| |
| color: var( --text );
| |
| }
| |
|
| |
| /*
| |
| * Tab select widget
| |
| */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-tabSelectWidget-framed {
| |
| background-color: var( --bg-2 );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget {
| |
| color: var( --text );
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-tabSelectWidget-framed .oo-ui-widget.oo-ui-widget-enabled.oo-ui-tabOptionWidget:is( :hover, :active, :focus, .oo-ui-optionWidget-selected ) {
| |
| background-color: var( --bg-2 );
| |
| box-shadow: none;
| |
| color: var( --text );
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-tabSelectWidget-frameless {
| |
| background-color: var( --bg-2 );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget {
| |
| color: var( --text );
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-tabSelectWidget-frameless .oo-ui-widget.oo-ui-widget-enabled.oo-ui-tabOptionWidget:is( :hover, :active, :focus, .oo-ui-optionWidget-selected ) {
| |
| background-color: var( --bg-2 );
| |
| box-shadow: none;
| |
| color: var( --link );
| |
| }
| |
|
| |
| /*
| |
| * Toolbar
| |
| */
| |
|
| |
| .oo-ui-toolbar .oo-ui-toolbar-bar {
| |
| background-color: var( --bg-1 );
| |
| color: var( --text );
| |
| }
| |
|
| |
| .oo-ui-toolbar.oo-ui-toolbar-position-top .oo-ui-toolbar-bar {
| |
| border-bottom: 1px solid var( --border );
| |
| }
| |
|
| |
| .oo-ui-toolbar .oo-ui-menuToolGroup {
| |
| border-left: 1px solid var( --border );
| |
| border-right: 1px solid var( --border );
| |
| }
| |
|
| |
| .oo-ui-toolbar .oo-ui-menuToolGroup-tools .oo-ui-tool.oo-ui-tool-active {
| |
| background-color: var( --bg-2 );
| |
| }
| |
|
| |
| .oo-ui-toolbar .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link:is( :hover, :active, :focus ) {
| |
| outline: none;
| |
| box-shadow: none;
| |
| }
| |
|
| |
| .oo-ui-toolbar .oo-ui-toolbar-actions .oo-ui-popupToolGroup.oo-ui-widget-enabled .oo-ui-popupToolGroup-handle {
| |
| border-right: none;
| |
| outline: none;
| |
| box-shadow: none;
| |
| }
| |
|
| |
| .oo-ui-toolbar .oo-ui-toolbar-actions .oo-ui-popupToolGroup.oo-ui-widget-enabled .oo-ui-popupToolGroup-handle:is( :hover, :active, :focus ) {
| |
| border-right: none;
| |
| outline: none;
| |
| box-shadow: none;
| |
| }
| |
|
| |
| .oo-ui-toolbar .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link:is( :hover, :active, :focus ) {
| |
| background-color: var( --bg-2 );
| |
| color: var( --text );
| |
| }
| |
|
| |
| .oo-ui-toolbar .oo-ui-tool.oo-ui-widget-enabled.oo-ui-tool-active .oo-ui-tool-link {
| |
| background-color: var( --bg-2 );
| |
| color: var( --text );
| |
| }
| |
|
| |
| .oo-ui-toolbar .oo-ui-popupToolGroup.oo-ui-widget-enabled .oo-ui-popupToolGroup-handle {
| |
| border-right: none;
| |
| outline: none;
| |
| box-shadow: none;
| |
| }
| |
|
| |
| .oo-ui-toolbar .oo-ui-popupToolGroup.oo-ui-widget-enabled .oo-ui-popupToolGroup-handle:is( :hover, :active, :focus ) {
| |
| background-color: var( --bg-2 );
| |
| color: var( --text );
| |
| }
| |
|
| |
| .oo-ui-toolbar .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active .oo-ui-popupToolGroup-handle {
| |
| background-color: var( --bg-2 );
| |
| color: var( --text );
| |
| }
| |
|
| |
| .oo-ui-toolbar .oo-ui-popupToolGroup-tools {
| |
| background-color: var( --bg );
| |
| border: 1px solid var( --border );
| |
| }
| |
|
| |
| .oo-ui-toolbar .oo-ui-listToolGroup-tools .oo-ui-tool.oo-ui-widget-enabled:is( :hover, :active, :focus ) {
| |
| background-color: var( --bg );
| |
| color: var( --text );
| |
| }
| |
|
| |
| .oo-ui-toolbar .oo-ui-popupToolGroup-tools .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
| |
| color: var( --text );
| |
| }
| |
|
| |
| .oo-ui-toolbar .oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary .oo-ui-tool-link {
| |
| background: var( --disabled-bg );
| |
| border: 1px solid var( --disabled-border ); /* Disabled border */
| |
| color: var( --disabled-text );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| .oo-ui-toolbar .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive .oo-ui-tool-link {
| |
| background: var( --primary );
| |
| border: 1px solid var( --primary );
| |
| color: var( --text-strong );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| .oo-ui-toolbar .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive .oo-ui-tool-link:is( :hover, :active, :focus ) {
| |
| background: var( --primary-hover );
| |
| border: 1px solid var( --primary-hover );
| |
| color: var( --text-strong );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| /*
| |
| * Text input
| |
| */
| |
|
| |
| /* Note that we have to use some weird combinations of hover on the parent
| |
| and focus on the child, to correctly override the default styles. */
| |
|
| |
| /* The search input has to be special-cased as it doesn't use either of the
| |
| mw-ui or oo-ui classes. */
| |
|
| |
| .mw-ui-input:not( :disabled ),
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-textInputWidget .oo-ui-inputWidget-input {
| |
| background: var( --bg );
| |
| border: 1px solid var( --border );
| |
| color: var( --text );
| |
| }
| |
|
| |
| .mw-ui-input:not( :disabled ):is( :hover, :active, :focus ),
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-textInputWidget:is( *, :hover ) .oo-ui-inputWidget-input:is( :hover, :active, :focus ) {
| |
| border: 1px solid var( --border-strong );
| |
| box-shadow: none;
| |
| outline: none;
| |
| outline-offset: 0;
| |
| }
| |
|
| |
| .mw-ui-input:not( :disabled )::placeholder,
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-textInputWidget .oo-ui-inputWidget-input::placeholder {
| |
| color: var( --text-muted );
| |
| }
| |
|
| |
| .mw-ui-input:disabled,
| |
| .oo-ui-widget.oo-ui-widget-disabled.oo-ui-textInputWidget .oo-ui-inputWidget-input {
| |
| background: var( --bg-1 );
| |
| border: 1px solid var( --border );
| |
| color: var( --text-muted );
| |
| }
| |
|
| |
| /*
| |
| * Buttons
| |
| */
| |
|
| |
| /* Normal buttons with frame */
| |
| .mw-ui-button:not( :disabled ),
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-framed .oo-ui-buttonElement-button {
| |
| background: var( --surface );
| |
| border: 1px solid var( --border );
| |
| color: var( --text );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| .mw-ui-button:not( :disabled ):is( :hover, :active, :focus ),
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-framed .oo-ui-buttonElement-button:is( :hover, :active, :focus ) {
| |
| background: var( --surface );
| |
| border-color: var( --border-strong );
| |
| color: var( --text );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-framed.oo-ui-buttonElement-active .oo-ui-buttonElement-button {
| |
| background: var( --primary );
| |
| border-color: var( --primary );
| |
| color: var( --text-strong );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| /* "Primary" and "progressive" buttons with frame */
| |
| .mw-ui-button:is( .mw-ui-primary,.mw-ui-progressive ):not( :disabled ),
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary .oo-ui-buttonElement-button,
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button,
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button {
| |
| background: var( --primary );
| |
| border: 1px solid var( --primary );
| |
| color: var( --text-strong );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| .mw-ui-button:is( .mw-ui-primary,.mw-ui-primary ):not( :disabled ):is( :hover, :active, :focus ),
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary .oo-ui-buttonElement-button:is( :hover, :active, :focus ),
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button:is( :hover, :active, :focus ),
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button:is( :hover, :active, :focus ) {
| |
| background: var( --primary-hover );
| |
| border: 1px solid var( --primary-hover );
| |
| color: var( --text-strong );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| /* "Destructive" buttons with frame */
| |
| .mw-ui-button.mw-ui-destructive:not( :disabled ),
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-framed.oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button {
| |
| background: var( --bg-1 );
| |
| border: 1px solid var( --danger );
| |
| color: var( --danger );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| .mw-ui-button.mw-ui-destructive:not( :disabled ):is( :hover, :active, :focus ),
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-framed.oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button:is( :hover, :active, :focus ) {
| |
| background: var( --bg-2 );
| |
| border: 1px solid var( --danger-hover );
| |
| color: var( --danger );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| /* Disabled buttons with frame */
| |
| .mw-ui-button:disabled,
| |
| .oo-ui-widget.oo-ui-widget-disabled.oo-ui-buttonElement-framed .oo-ui-buttonElement-button {
| |
| background: var( --disabled-bg );
| |
| border: 1px solid var( --disabled-border );
| |
| color: var( --disabled-text );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| /* Normal buttons without frame */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless .oo-ui-buttonElement-button {
| |
| background: transparent;
| |
| border: 0;
| |
| color: var( --text );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless .oo-ui-buttonElement-button:is( :hover, :active, :focus ) {
| |
| background: transparent;
| |
| border: 0;
| |
| color: var( --text );
| |
| box-shadow: none;
| |
| text-decoration: underline;
| |
| }
| |
|
| |
| /* "Primary" and "progressive" buttons without frame */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-primary .oo-ui-buttonElement-button,
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button {
| |
| background: transparent;
| |
| border: 0;
| |
| color: var( --link );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-primary .oo-ui-buttonElement-button:is( :hover, :active, :focus ),
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button:is( :hover, :active, :focus ) {
| |
| background: transparent;
| |
| border: 0;
| |
| color: var( --link-hover );
| |
| box-shadow: none;
| |
| text-decoration: underline;
| |
| }
| |
|
| |
| /* "Destructive" buttons without frame */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button {
| |
| background: transparent;
| |
| border: 0;
| |
| color: var( --danger );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button:is( :hover, :active, :focus ) {
| |
| background: transparent;
| |
| border: 0;
| |
| color: var( --danger );
| |
| box-shadow: none;
| |
| text-decoration: underline;
| |
| }
| |
|
| |
| /* Disabled buttons without frame */
| |
| .oo-ui-widget.oo-ui-widget-disabled.oo-ui-buttonElement-frameless .oo-ui-buttonElement-button {
| |
| background: transparent;
| |
| border: 0;
| |
| color: var( --disabled-text );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| /* Close button of some dialogs */
| |
| .oo-ui-processDialog-actions-safe .oo-ui-widget.oo-ui-widget-enabled.oo-ui-iconElement:not( .oo-ui-labelElement ) .oo-ui-buttonElement-button {
| |
| background-color: transparent;
| |
| border: none;
| |
| }
| |
|
| |
| .oo-ui-processDialog-actions-safe .oo-ui-widget.oo-ui-widget-enabled.oo-ui-iconElement:not( .oo-ui-labelElement ) .oo-ui-buttonElement-button:is( :hover, :active, :focus ) {
| |
| background-color: var( --surface );
| |
| border: none;
| |
| }
| |
|
| |
| /* Button select widget */
| |
| .oo-ui-widget.oo-ui-buttonSelectWidget.oo-ui-widget-enabled:is( :hover, :active, :focus ) .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected .oo-ui-buttonElement-button {
| |
| border-color: var( --primary );
| |
| box-shadow: none;
| |
| outline: none;
| |
| }
| |
|
| |
| /*
| |
| * Dropdown Menus
| |
| */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-dropdownInputWidget:is( *, :hover ) {
| |
| background: transparent;
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-dropdownWidget .oo-ui-dropdownWidget-handle {
| |
| background: var( --bg );
| |
| border: 1px solid var( --border );
| |
| color: var( --text );
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-dropdownWidget .oo-ui-dropdownWidget-handle:is( :hover, :active, :focus ) {
| |
| background: var( --bg );
| |
| border: 1px solid var( --border-strong );
| |
| color: var( --text );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-dropdownWidget.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle {
| |
| background: var( --bg );
| |
| border: 1px solid var( --border );
| |
| color: var( --text );
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-dropdownWidget.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle:is( :hover, :active, :focus ) {
| |
| background: var( --bg );
| |
| border: 1px solid var( --border-strong );
| |
| color: var( --text );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget {
| |
| background: var( --bg );
| |
| border: 1px solid var( --border );
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .oo-ui-menuOptionWidget.oo-ui-optionWidget {
| |
| background: var( --bg );
| |
| color: var( --text );
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected,
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
| |
| background: var( --bg-1 );
| |
| color: var( --text );
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-optionWidget-highlighted,
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-optionWidget-highlighted {
| |
| background: var( --bg-2 );
| |
| color: var( --text-strong );
| |
| }
| |
|
| |
| /*
| |
| * Checkboxes
| |
| */
| |
|
| |
| /* Make sure the catch-all filter: invert(100%) further down doesn't affect these. */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-checkboxInputWidget[ type='checkbox' ] + span {
| |
| filter: none;
| |
| background-color: var( --bg );
| |
| border-color: var( --border );
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-checkboxInputWidget[ type='checkbox' ]:checked + span {
| |
| filter: none;
| |
| background-color: var( --primary );
| |
| border-color: var( --primary );
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-checkboxInputWidget[ type='checkbox' ]:hover + span {
| |
| filter: none;
| |
| background-color: var( --bg );
| |
| border-color: var( --primary );
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-checkboxInputWidget[ type='checkbox' ]:checked:hover + span {
| |
| filter: none;
| |
| background-color: var( --primary-hover );
| |
| border-color: var( --primary-hover );
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-checkboxInputWidget[ type='checkbox' ]:focus + span {
| |
| box-shadow: none;
| |
| }
| |
|
| |
| /*
| |
| * Radio buttons
| |
| */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-radioInputWidget [ type='radio' ] + span {
| |
| background-color: var( --bg );
| |
| border-color: var( --border );
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-radioInputWidget [ type='radio' ]:checked + span {
| |
| border-color: var( --primary-hover );
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-radioInputWidget [ type='radio' ]:hover + span {
| |
| border-color: var( --primary );
| |
| }
| |
|
| |
| /*
| |
| * Date input & Calendar
| |
| */
| |
| .oo-ui-widget-enabled.mw-widget-dateInputWidget .mw-widget-dateInputWidget-handle {
| |
| background: var( --bg );
| |
| border: 1px solid var( --border );
| |
| color: var( --text );
| |
| transition: border-color 250ms;
| |
| }
| |
|
| |
| .oo-ui-widget-enabled.mw-widget-dateInputWidget-empty .mw-widget-dateInputWidget-handle {
| |
| color: var( --text-muted );
| |
| }
| |
|
| |
| .oo-ui-widget-enabled.mw-widget-dateInputWidget .mw-widget-dateInputWidget-handle:is( :hover, :active, :focus ) {
| |
| background: var( --bg );
| |
| color: var( --text );
| |
| border: 1px solid var( --border-strong );
| |
| box-shadow: none;
| |
| transition: border-color 250ms;
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.mw-widget-dateInputWidget .mw-widget-dateInputWidget-handle:is( :hover, :active, :focus ) {
| |
| border: 1px solid var( --border );
| |
| }
| |
|
| |
| .oo-ui-widget-enabled.mw-widget-dateInputWidget-empty .mw-widget-dateInputWidget-handle:is( :hover, :active, :focus ) {
| |
| color: var( --text-muted );
| |
| }
| |
|
| |
| .oo-ui-widget-enabled.mw-widget-calendarWidget {
| |
| border: 1px solid var( --border );
| |
| /* This isn't color related, but it really looks much better with this */
| |
| padding: 3px;
| |
| }
| |
|
| |
| .oo-ui-widget-enabled.mw-widget-dateInputWidget-calendar {
| |
| background: var( --bg );
| |
| }
| |
|
| |
| .mw-widget-calendarWidget-item.mw-widget-calendarWidget-day,
| |
| .mw-widget-calendarWidget-item.mw-widget-calendarWidget-month,
| |
| .mw-widget-calendarWidget-item.mw-widget-calendarWidget-year {
| |
| color: var( --text );
| |
| }
| |
|
| |
| .mw-widget-calendarWidget-item.mw-widget-calendarWidget-day.mw-widget-calendarWidget-day-additional {
| |
| color: var( --text-muted );
| |
| }
| |
|
| |
| .mw-widget-calendarWidget-item.mw-widget-calendarWidget-day:hover,
| |
| .mw-widget-calendarWidget-item.mw-widget-calendarWidget-month:hover,
| |
| .mw-widget-calendarWidget-item.mw-widget-calendarWidget-year:hover {
| |
| background: var( --primary );
| |
| }
| |
|
| |
| .mw-widget-calendarWidget-item-selected.mw-widget-calendarWidget-day,
| |
| .mw-widget-calendarWidget-item-selected.mw-widget-calendarWidget-month,
| |
| .mw-widget-calendarWidget-item-selected.mw-widget-calendarWidget-year {
| |
| background: var( --primary-hover );
| |
| }
| |
|
| |
| .mw-widget-calendarWidget-item.mw-widget-calendarWidget-day.mw-widget-calendarWidget-day-today {
| |
| box-shadow: 0 0 0 1px var( --border-strong );
| |
| }
| |
|
| |
| /*
| |
| * Multiselect widget (see Special:RecentChanges / Special:Watchlist)
| |
| */
| |
|
| |
| /* Overall background, needs to be set because some descendants are transparent */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined {
| |
| background: var( --bg-2 );
| |
| }
| |
|
| |
| /* Top part containing the selected tags */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle {
| |
| background: var( --bg-2 );
| |
| border: 1px solid var( --border );
| |
| }
| |
|
| |
| /* Labels in the top part, like a title */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle label {
| |
| color: var( --text );
| |
| }
| |
|
| |
| /* The added tag items */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined .oo-ui-widget.oo-ui-widget-enabled.oo-ui-tagItemWidget {
| |
| background: var( --surface );
| |
| border: 1px solid var( --border );
| |
| color: var( --text );
| |
| }
| |
|
| |
| /* The added tag items, focused */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined .oo-ui-widget.oo-ui-widget-enabled.oo-ui-tagItemWidget:focus {
| |
| box-shadow: none;
| |
| }
| |
|
| |
| /* Currently selected tag item */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined .oo-ui-widget.oo-ui-widget-enabled.oo-ui-tagItemWidget.mw-rcfilters-ui-tagItemWidget-selected {
| |
| background: var( --primary );
| |
| border: 1px solid var( --primary );
| |
| color: var( --text-strong );
| |
| }
| |
|
| |
| /* The dropdown handle */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined .oo-ui-inputWidget-input {
| |
| background: var( --bg-2 );
| |
| }
| |
|
| |
| /* The buttons on the bottom right */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined .mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget {
| |
| border: 1px solid var( --border );
| |
| }
| |
|
| |
| /*
| |
| * Filter selection table (see Special:RecentChanges / Special:Watchlist)
| |
| */
| |
|
| |
| /* Top header */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .mw-rcfilters-ui-table.mw-rcfilters-ui-filterMenuHeaderWidget-header {
| |
| background: var( --bg-2 );
| |
| border-bottom: 1px solid var( --border );
| |
| }
| |
|
| |
| /* Top header title */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .mw-rcfilters-ui-table .mw-rcfilters-ui-filterMenuHeaderWidget-title {
| |
| color: var( --text );
| |
| }
| |
|
| |
| /* Section header */
| |
| .section-lead{
| |
| color: var( --text )!important;
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .mw-rcfilters-ui-filterMenuSectionOptionWidget {
| |
| background: var( --bg-2 );
| |
| }
| |
|
| |
| /* Section header labels */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .mw-rcfilters-ui-filterMenuSectionOptionWidget .oo-ui-labelElement-label {
| |
| color: var( --text );
| |
| }
| |
|
| |
| /* Filters table, option */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .oo-ui-widget.oo-ui-widget-enabled.mw-rcfilters-ui-filterMenuOptionWidget {
| |
| background: var( --bg-2 );
| |
| border-bottom: 1px solid var( --bg );
| |
| }
| |
|
| |
| /* Filters table, option labels */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .oo-ui-widget.oo-ui-widget-enabled.mw-rcfilters-ui-filterMenuOptionWidget .oo-ui-labelElement-label {
| |
| color: var( --text );
| |
| }
| |
|
| |
| /* Filters table, option, highlighted */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .oo-ui-widget.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-optionWidget-highlighted {
| |
| background: var( --bg-2 );
| |
| }
| |
|
| |
| /* Filters table, option labels, highlighted */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .oo-ui-widget.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-optionWidget-highlighted .oo-ui-labelElement-label {
| |
| color: var( --text );
| |
| }
| |
|
| |
| /* Filters table, option, muted */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .oo-ui-widget.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted {
| |
| background: var( --bg-1 );
| |
| }
| |
|
| |
| /* Filters table, option labels, muted */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .oo-ui-widget.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted .oo-ui-labelElement-label {
| |
| color: var( --text-muted );
| |
| }
| |
|
| |
| /* Footer */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .mw-rcfilters-ui-menuSelectWidget-footer {
| |
| background: var( --bg );
| |
| border-top: 1px solid var( --border );
| |
| }
| |
|
| |
| /* Footer, labels */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .mw-rcfilters-ui-menuSelectWidget-footer .oo-ui-labelElement-label {
| |
| color: var( --text );
| |
| }
| |
|
| |
| /*
| |
| * Popup widget & anchor
| |
| */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-popupWidget .oo-ui-popupWidget-popup {
| |
| background: var( --bg );
| |
| border: 1px solid var( --border );
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-popupWidget .oo-ui-popupWidget-popup label {
| |
| color: var( --text );
| |
| }
| |
|
| |
| /* Fill color for the bottom anchor */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor::after {
| |
| border-top-color: var( --bg );
| |
| }
| |
|
| |
| /* Fill color for the top anchor */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::after {
| |
| border-bottom-color: var( --bg );
| |
| }
| |
|
| |
| /* Border color for the bottom anchor */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor::before {
| |
| border-top-color: var( --border );
| |
| }
| |
|
| |
| /* Border color for the top anchor */
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::before {
| |
| border-bottom-color: var( --border );
| |
| }
| |
|
| |
| /*
| |
| * Notification pop-up
| |
| */
| |
| .skin-vector .mw-notification {
| |
| background: var( --bg );
| |
| color: var( --text );
| |
| }
| |
|
| |
| /*
| |
| * Miscellaneous
| |
| */
| |
| .oo-ui-labelWidget.oo-ui-inline-help {
| |
| color: var( --text );
| |
| }
| |
|
| |
| .oo-ui-widget.ve-ui-targetWidget-focused {
| |
| border: 1px solid var( --border-strong );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-outlineOptionWidget.oo-ui-optionWidget-highlighted,
| |
| .oo-ui-widget.oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected {
| |
| background-color: var( --bg-2 );
| |
| color: var( --text );
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-selectWidget .oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
| |
| background: var( --bg-2 );
| |
| }
| |
|
| |
| .oo-ui-widget.ve-ui-targetWidget:not( .oo-ui-pendingElement-pending ) {
| |
| background: transparent;
| |
| }
| |
|
| |
| .mw-message-box-warning.mw-message-box {
| |
| background-color: var( --bg-2 );
| |
| border: 1px solid var( --border );
| |
| color: var( --text );
| |
| }
| |
|
| |
| .mw-message-box-error.mw-message-box {
| |
| background-color: var( --bg-2 );
| |
| border: 1px solid var( --border );
| |
| color: var( --text );
| |
| }
| |
|
| |
| /* Kind of a catch-all to make icons dark */
| |
| .oo-ui-iconElement-icon,
| |
| .oo-ui-indicatorElement-indicator {
| |
| filter: invert( 100% );
| |
| }
| |
|
| |
| /*
| |
| * ==================================
| |
| * = Parts of the main MediaWiki UI =
| |
| * ==================================
| |
| */
| |
|
| |
| #mw-page-base {
| |
| background: transparent;
| |
| }
| |
|
| |
| /*
| |
| * Head / Tabs
| |
| */
| |
|
| |
| /* The "Not logged in" text where the username would be */
| |
| #mw-head #p-personal #pt-anonuserpage {
| |
| color: var( --text );
| |
| background-image: none;
| |
| }
| |
|
| |
| #mw-head .vector-menu-tabs {
| |
| background-image: none;
| |
| border: 0;
| |
| padding: 0;
| |
| }
| |
|
| |
| #mw-head .vector-menu-tabs li {
| |
| background: transparent;
| |
| }
| |
|
| |
| #mw-head .vector-menu-tabs li.selected {
| |
| background: linear-gradient( var( --bg ), 30%, var( --bg-1 ) );
| |
| }
| |
|
| |
| #mw-head .vector-menu-tabs li a,
| |
| #mw-head .vector-menu-tabs li a:visited {
| |
| background-image: none;
| |
| border-left: 1px solid var( --border );
| |
| border-right: 1px solid var( --border );
| |
| margin-right: -1px;
| |
| color: var( --link );
| |
| }
| |
|
| |
| #mw-head .vector-menu-tabs li.selected a,
| |
| #mw-head .vector-menu-tabs li.selected a:visited {
| |
| color: var( --text );
| |
| }
| |
|
| |
| #mw-head .vector-menu-tabs li.new a,
| |
| #mw-head .vector-menu-tabs li.new a:visited {
| |
| color: var( --link-visited );
| |
| }
| |
|
| |
| /*
| |
| * The "More [actions]" drop-down pseudo-tab
| |
| */
| |
|
| |
| #mw-head .vector-menu-dropdown .vector-menu-heading {
| |
| color: var( --link );
| |
| background-image: none;
| |
| border-right: 1px solid var( --border );
| |
| }
| |
|
| |
| /* Make the "More" menu arrow visible on MW 1.39+ */
| |
| .vector-menu-dropdown .vector-menu-heading::after {
| |
| filter: invert( 100% );
| |
| }
| |
|
| |
| /* Also make the "More" text itself the same color as other tabs, for consistency (MW 1.39+) */
| |
| .vector-menu-dropdown .vector-menu-heading {
| |
| color: var( --link );
| |
| }
| |
|
| |
| /* Disable the ugly dotted outline when focused */
| |
| #mw-head .vector-menu-dropdown-noicon input.vector-menu-checkbox:focus + h3 {
| |
| outline: 0;
| |
| }
| |
|
| |
| #mw-head .vector-menu-dropdown .vector-menu-content {
| |
| background: var( --bg );
| |
| border: 1px solid var( --border );
| |
| }
| |
|
| |
| #mw-head .vector-menu-dropdown .vector-menu-content li a {
| |
| color: var( --link );
| |
| margin: 10px;
| |
| }
| |
|
| |
| .mw-heading2{
| |
| border-bottom-color: var(--border-strong);
| |
|
| |
| }
| |
|
| |
| /* Arrow icon */
| |
| #mw-head .vector-menu-dropdown .vector-menu-heading::after {
| |
| filter: invert( 100% );
| |
| }
| |
|
| |
| /*
| |
| * Search input field
| |
| */
| |
| #simpleSearch #searchInput {
| |
| background: var( --bg-1 );
| |
| border: 1px solid var( --border );
| |
| color: var( --text );
| |
| }
| |
|
| |
| #simpleSearch #searchInput:focus,
| |
| #simpleSearch:hover #searchInput,
| |
| #simpleSearch:hover #searchInput:focus {
| |
| border: 1px solid var( --border-strong );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| #searchInput::placeholder {
| |
| color: var( --text-muted );
| |
| }
| |
|
| |
| #simpleSearch #searchButton {
| |
| filter: invert( 100% );
| |
| }
| |
|
| |
| /*
| |
| * Search suggestions
| |
| */
| |
|
| |
| /* We need to override inline CSS, so duplicate the class to increase matching weight */
| |
| .suggestions-results.suggestions-results {
| |
| background: var( --bg );
| |
| border: 1px solid var( --border );
| |
| }
| |
|
| |
| .suggestions .suggestions-results .mw-searchSuggest-link .suggestions-result {
| |
| color: var( --text );
| |
| }
| |
|
| |
| .suggestions .suggestions-results a.mw-searchSuggest-link:is( .suggestions-result-current, .suggestions-result:is( :hover, :active, :focus ) ) {
| |
| background: var( --bg-1 );
| |
| }
| |
|
| |
| .suggestions a.mw-searchSuggest-link .suggestions-special {
| |
| background: var( --bg );
| |
| border: 1px solid var( --border );
| |
| }
| |
|
| |
| .suggestions a.mw-searchSuggest-link .suggestions-special:is( .suggestions-result-current, :hover, :active, :focus ) {
| |
| background: var( --bg-1 );
| |
| }
| |
|
| |
| .suggestions a.mw-searchSuggest-link .suggestions-special .special-label {
| |
| color: var( --text-muted );
| |
| }
| |
|
| |
| .suggestions a.mw-searchSuggest-link .suggestions-special .special-query {
| |
| color: var( --text );
| |
| }
| |
|
| |
| /*
| |
| * mediawiki.userSuggest, the username suggestion widget used in various places
| |
| */
| |
| div.suggestions-result {
| |
| color: var( --text );
| |
| }
| |
|
| |
| /*
| |
| * Advanced search
| |
| */
| |
|
| |
| #powersearch #mw-searchoptions {
| |
| background: var( --bg );
| |
| border: 1px solid var( --border );
| |
| }
| |
|
| |
| /*
| |
| * Left-side panel
| |
| */
| |
| #mw-panel .vector-menu-portal .vector-menu-heading {
| |
| color: var( --text );
| |
| background: var(--bg);
| |
| border-bottom: 1pt dotted var( --border );
| |
| }
| |
|
| |
| #mw-panel .vector-menu-portal .vector-menu-content .vector-menu-content-list li a {
| |
| color: var( --link );
| |
| }
| |
|
| |
| #mw-panel .vector-menu-portal .vector-menu-content .vector-menu-content-list li a:visited {
| |
| color: var( --link-visited );
| |
| }
| |
|
| |
| #mw-panel .vector-menu-portal .vector-menu-content .vector-menu-content-list li a:is( :hover, :active, :focus ) {
| |
| color: var( --link-hover );
| |
| text-decoration: underline;
| |
| }
| |
|
| |
| /*
| |
| * Main content
| |
| */
| |
| .mw-body {
| |
| border: 1px solid var( --border );
| |
| background: var( --bg-1 );
| |
| color: var( --text );
| |
| padding: 1em;
| |
| }
| |
|
| |
| /*
| |
| * Footer
| |
| */
| |
| #footer ul li {
| |
| color: var( --text-muted );
| |
| }
| |
|
| |
| /* New, Codex style "Powered by MediaWiki" button in MW 1.43+ */
| |
| #footer-icons li:not( #footer-poweredbyico ) a {
| |
| background: transparent;
| |
| }
| |
|
| |
| #footer-poweredbyico a {
| |
| /* Force this to have the background span the entire "button", which is more like what's
| |
| * intended than the default display style
| |
| */
| |
| display: inline-block;
| |
| }
| |
|
| |
| /*
| |
| * ==============================
| |
| * = Regular wiki page contents =
| |
| * ==============================
| |
| */
| |
|
| |
| /*
| |
| * Table of Contents
| |
| */
| |
| #toc,
| |
| .toc,
| |
| .toccolours {
| |
| border: 1px solid var( --border );
| |
| border-radius: 50px;
| |
| background: var( --bg );
| |
| }
| |
|
| |
| .tocnumber {
| |
| color: var( --link );
| |
|
| |
| }
| |
|
| |
| .toctogglelabel {
| |
| color: var( --link );
| |
|
| |
| }
| |
|
| |
| /*
| |
| * Wikitable
| |
| */
| |
| table.wikitable {
| |
| padding: 1em;
| |
| background: var(--bg);
| |
| border: 1px solid var(--border);
| |
| border-collapse: collapse;
| |
| color: var(--text);
| |
| }
| |
|
| |
| table.wikitable caption {
| |
| margin-left: inherit;
| |
| margin-right: inherit;
| |
| background: var(--bg);
| |
| border: 1px solid var(--border);
| |
| font-weight: bold;
| |
| }
| |
|
| |
| table.wikitable :is(th, td) {
| |
| background: var(--bg);
| |
| border: 1px solid var(--border);
| |
| padding: 0.2em;
| |
|
| |
| }
| |
|
| |
| table.wikitable th {
| |
| background: var(--bg-1);
| |
| text-align: center;
| |
|
| |
| }
| |
|
| |
| table.wikitable tr :is(th, td) {
| |
| border: 1px solid var(--border);
| |
| color: var(--text);
| |
| }
| |
|
| |
| table.wikitable tr th {
| |
| background: var(--bg);
| |
| color: var(--text);
| |
|
| |
| }
| |
|
| |
| table.wikitable code {
| |
| background: transparent;
| |
| border: 0;
| |
| color: var( --text );
| |
| }
| |
|
| |
| .mw-collapsible-text{
| |
| color: var(--link)!important;
| |
| }
| |
|
| |
| /*--------------------------*/
| |
| .wikitable {
| |
| width: 100%;
| |
| border-collapse: collapse;
| |
| background: var(--bg-1);
| |
| border: 2px solid var(--border);
| |
| border-radius: 20px;
| |
| margin: 20px 0;
| |
| box-shadow: 0 6px 24px var(--shadow-soft);
| |
| overflow: hidden;
| |
| }
| |
|
| |
| .wikitable th {
| |
| background: var(--primary);
| |
| color: var(--text-strong);
| |
| font-weight: 700;
| |
| padding: 16px 20px;
| |
| text-align: left;
| |
| font-size: 14px;
| |
| text-transform: uppercase;
| |
| letter-spacing: 0.5px;
| |
| border: none;
| |
| }
| |
|
| |
| .wikitable th:first-child {
| |
| border-top-left-radius: 20px;
| |
| }
| |
|
| |
| .wikitable th:last-child {
| |
| border-top-right-radius: 20px;
| |
| }
| |
|
| |
| .wikitable td {
| |
| padding: 16px 20px;
| |
| border-bottom: 1px solid var(--border);
| |
| color: var(--text-muted);
| |
| font-size: 14px;
| |
| line-height: 1.5;
| |
| vertical-align: top;
| |
| }
| |
|
| |
| .wikitable tr:nth-child(even) td {
| |
| background: var(--bg-1);
| |
| }
| |
|
| |
| .wikitable tr:hover td {
| |
| background: var(--bg-1);
| |
| }
| |
|
| |
| .wikitable tr:last-child td {
| |
| border-bottom: none;
| |
| }
| |
|
| |
| .wikitable tr:last-child td:first-child {
| |
| border-bottom-left-radius: 20px;
| |
| }
| |
|
| |
| .wikitable tr:last-child td:last-child {
| |
| border-bottom-right-radius: 20px;
| |
| }
| |
|
| |
|
| |
| /*
| |
| * Datatable
| |
| */
| |
| .mw-datatable-is-ascending a,
| |
| .mw-datatable-is-descending a {
| |
| background: transparent;
| |
| padding-left: 0;
| |
| }
| |
|
| |
| .mw-datatable-is-ascending a::before {
| |
| content: '\2b9d \00a0';
| |
| }
| |
|
| |
| .mw-datatable-is-descending a::before {
| |
| content: '\2b9f \00a0';
| |
| }
| |
|
| |
| .mw-datatable th {
| |
| background: var( --bg-1 );
| |
| border: 1px solid var( --border );
| |
| }
| |
|
| |
| .mw-datatable td {
| |
| background: var( --bg );
| |
| border: 1px solid var( --border );
| |
| }
| |
|
| |
| .mw-datatable tr:hover td {
| |
| background: var( --bg-1 );
| |
| }
| |
|
| |
| /*
| |
| * Thumbnails
| |
| */
| |
| .thumb .thumbinner {
| |
| background: var( --bg );
| |
| border: 1px solid var( --border );
| |
| }
| |
|
| |
| .thumb .thumbinner .thumbimage {
| |
| background: var( --bg );
| |
| border: 1px solid var( --border );
| |
| }
| |
|
| |
| /*
| |
| * User message
| |
| */
| |
| .usermessage {
| |
| background: var( --bg );
| |
| border: 1px solid var( --border );
| |
| color: var( --text );
| |
| }
| |
|
| |
| /*
| |
| * Galleries
| |
| */
| |
| li.gallerybox div.thumb {
| |
| background: var( --bg );
| |
| border: 1px solid var( --border );
| |
| }
| |
|
| |
| /*
| |
| * Categories
| |
| */
| |
| .catlinks {
| |
| border: 1px solid var( --border );
| |
| background: var( --bg );
| |
| }
| |
|
| |
| /*
| |
| * Blockquote
| |
| */
| |
| .vector-body blockquote {
| |
| border-left: 4px solid var( --bg-2 );
| |
| }
| |
|
| |
| /*
| |
| * =========================
| |
| * = Special page contents =
| |
| * =========================
| |
| */
| |
|
| |
| #contentSub,
| |
| #contentSub2 {
| |
| color: var( --text-muted );
| |
| }
| |
|
| |
| /*
| |
| * Create account
| |
| */
| |
| .mw-createacct-benefits-container {
| |
| display: none;
| |
| }
| |
|
| |
| /*
| |
| * Login
| |
| */
| |
|
| |
| /* Don't be fooled by the button's id; it's in the login page */
| |
| #mw-createaccount-join {
| |
| background: var( --surface );
| |
| border: 1px solid var( --border );
| |
| color: var( --text );
| |
| }
| |
|
| |
| #mw-createaccount-join:is( :hover, :active, :focus ) {
| |
| background: var( --surface );
| |
| border: 1px solid var( --border-strong );
| |
| color: var( --text );
| |
| box-shadow: none;
| |
| }
| |
|
| |
| /*
| |
| * Search results
| |
| */
| |
| .mw-search-profile-tabs {
| |
| background: var( --bg );
| |
| border: 1px solid var( --border );
| |
| }
| |
|
| |
| .search-types .current a {
| |
| color: var( --text );
| |
| }
| |
|
| |
| .mw-search-result-data {
| |
| color: var( --text-muted );
| |
| }
| |
|
| |
| /*
| |
| * Editing
| |
| */
| |
| .editOptions {
| |
| background: var( --bg-2 );
| |
| border: 1px solid var( --border );
| |
| color: var( --text );
| |
| }
| |
|
| |
| /*
| |
| * File page
| |
| */
| |
| #filetoc {
| |
| background: var( --bg );
| |
| border: 1px solid var( --border );
| |
| }
| |
|
| |
| table.mw_metadata :is( th, td ) {
| |
| border: 1px solid var( --border );
| |
| }
| |
|
| |
| table.mw_metadata th {
| |
| background: var( --bg );
| |
| }
| |
|
| |
| table.mw_metadata td {
| |
| background: transparent;
| |
| }
| |
|
| |
| .filehistory a img,
| |
| #file img:hover {
| |
| background: transparent;
| |
| }
| |
|
| |
| /*
| |
| * History, Changes, Watchlist, Contributions
| |
| */
| |
| #mw-indicator-mw-helplink a {
| |
| background-image: none;
| |
| padding-left: 0;
| |
| }
| |
|
| |
| .mw-rcfilters-ui-watchlistTopSectionWidget .mw-rcfilters-ui-watchlistTopSectionWidget-separator {
| |
| border-top: 2px solid var( --border );
| |
| }
| |
|
| |
| .oo-ui-widget.oo-ui-widget-enabled.oo-ui-dropdownWidget.mw-rcfilters-ui-rclToOrFromWidget .oo-ui-dropdownWidget-handle:is( *, :hover, :active, :focus ) {
| |
| background: transparent;
| |
| border: 0;
| |
| }
| |
|
| |
| #pagehistory li.selected {
| |
| background: var( --bg-1 );
| |
| color: var( --text );
| |
| }
| |
|
| |
| .mw-plusminus-pos {
| |
| color: var( --positive );
| |
| }
| |
|
| |
| .mw-plusminus-neg {
| |
| color: var( --negative );
| |
| }
| |
|
| |
| .autocomment,
| |
| .autocomment a,
| |
| .autocomment a:visited {
| |
| color: var( --text-muted );
| |
| }
| |
|
| |
| /* Duplicate class selector to add weight */
| |
| .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend.mw-changeslist-legend {
| |
| background: var( --bg );
| |
| border: 1px solid var( --border );
| |
| }
| |
|
| |
| /*
| |
| * Revision differences
| |
| */
| |
| table.diff,
| |
| td.diff-otitle,
| |
| td.diff-ntitle {
| |
| background: transparent;
| |
| }
| |
|
| |
| td.diff-addedline {
| |
| background: var( --bg );
| |
| border-color: var( --positive );
| |
| }
| |
|
| |
| td.diff-deletedline {
| |
| background: var( --bg );
| |
| border-color: var( --negative );
| |
| }
| |
|
| |
| td.diff-context {
| |
| background: transparent;
| |
| border-color: var( --border );
| |
| color: var( --text );
| |
| }
| |
|
| |
| td.diff-addedline .diffchange,
| |
| td.diff-deletedline .diffchange {
| |
| border-radius: 0.33em;
| |
| padding: 0.25em;
| |
| }
| |
|
| |
| td.diff-addedline .diffchange {
| |
| background: var( --positive-bg );
| |
| color: var( --text-strong );
| |
| }
| |
|
| |
| td.diff-deletedline .diffchange {
| |
| background: var( --negative-bg );
| |
| color: var( --text-strong );
| |
| }
| |
|
| |
| /*
| |
| * Preferences
| |
| */
| |
| .mw-prefs-buttons {
| |
| background: var( --bg-1 );
| |
| }
| |
|
| |
| /*
| |
| * The legend box on Special:RecentChanges
| |
| */
| |
| .mw-changeslist-legend {
| |
| background-color: transparent;
| |
| }
| |
|
| |
|
| |
| /*
| |
| * ===============================
| |
| * = Extension-specific elements =
| |
| * ===============================
| |
| */
| |
|
| |
| /*
| |
| * WikiEditor
| |
| */
| |
|
| |
| .wikiEditor-ui .wikiEditor-ui-toolbar {
| |
| background: var( --bg-2 );
| |
| }
| |
|
| |
| .wikiEditor-ui .wikiEditor-ui-toolbar .group .label,
| |
| .wikiEditor-ui .wikiEditor-ui-toolbar .group .tool-select .label {
| |
| color: var( --text );
| |
| }
| |
|
| |
| .wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab a {
| |
| color: var( --link );
| |
| }
| |
|
| |
| .wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab a.current {
| |
| color: var( --link-hover );
| |
| }
| |
|
| |
| .wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab a::before,
| |
| .wikiEditor-ui .wikiEditor-ui-toolbar .group .tool-select .label::after {
| |
| filter: invert( 100% );
| |
| }
| |
|
| |
| .wikiEditor-ui .wikiEditor-ui-toolbar .group .tool-select .options .option {
| |
| background: var( --bg-2 );
| |
| color: var( --text );
| |
| }
| |
|
| |
| .wikiEditor-ui .wikiEditor-ui-toolbar .group .tool-select .menu .options .option:hover {
| |
| background: var( --bg-2 );
| |
| }
| |
|
| |
| .wikiEditor-ui .wikiEditor-ui-toolbar .booklet .index .current,
| |
| .wikiEditor-ui .wikiEditor-ui-toolbar .booklet .index :hover,
| |
| .wikiEditor-ui .wikiEditor-ui-toolbar .page-characters div span,
| |
| .wikiEditor-ui .wikiEditor-ui-toolbar .page-characters div span:hover {
| |
| background: var( --bg-2 );
| |
| color: var( --text );
| |
| }
| |
|
| |
| .wikiEditor-ui .wikiEditor-ui-toolbar .page-table td {
| |
| color: var( --text );
| |
| }
| |
|
| |
| /*
| |
| * Spoilers
| |
| */
| |
|
| |
| .spoilers .spoilers-button {
| |
| background: var( --surface );
| |
| border: 1px solid var( --border );
| |
| color: var( --text );
| |
| }
| |
|
| |
| .spoilers .spoilers-button:is( :hover, :active, :focus ) {
| |
| background: var( --surface );
| |
| border: 1px solid var( --border );
| |
| color: var( --text );
| |
| }
| |
|
| |
| .spoilers .spoilers-body {
| |
| background: var( --bg );
| |
| border: 1px solid var( --border );
| |
| color: var( --text );
| |
| }
| |
|
| |
| /*
| |
| * ProblemReports
| |
| */
| |
|
| |
| div#reportProblemForm {
| |
| background-color: transparent;
| |
| }
| |
|
| |
| body .ui-dialog .ui-icon-closethick {
| |
| filter: invert( 100% );
| |
| }
| |
|
| |
|
| |
|
| |
| /* ---------------------Cores para overlay do sidebar ---------------*/
| |
| body.sidebar-open::before {
| |
| background: var( --overlay );
| |
| }
| |
|
| |
| /* Cores para menu mobile (hamburger) */
| |
| .mobile-hamburger-menu {
| |
| background: linear-gradient( 135deg, var( --primary ), var( --primary-hover ) );
| |
| box-shadow: 0 6px 20px var( --shadow-soft );
| |
| }
| |
|
| |
| .mobile-hamburger-menu:hover {
| |
| box-shadow: 0 8px 30px var( --shadow-strong );
| |
| }
| |
|
| |
| .mobile-hamburger-menu span {
| |
| background: black ;
| |
| }
| |
|
| |
| body.skin-vector-legacy .user-menu-container {
| |
| background: transparent;
| |
| }
| |
|
| |
| body.skin-vector-legacy .user-menu-header,
| |
| .personal-menu-header {
| |
| color: var( --heading );
| |
| background: var( --bg-1 );
| |
| box-shadow: 0 6px 20px var( --shadow-soft );
| |
| border-color: var( --border-strong );
| |
| }
| |
|
| |
| body.skin-vector-legacy .user-menu-header:hover,
| |
| .personal-menu-header:hover {
| |
| background: var( --surface );
| |
| }
| |
|
| |
| body.skin-vector-legacy .user-menu-content,
| |
| .personal-menu-content {
| |
| background: var( --surface );
| |
| border-color: var( --border-strong );
| |
| box-shadow: 0 6px 20px var( --shadow-soft );
| |
| }
| |
|
| |
| body.skin-vector-legacy .user-menu-list li {
| |
| border-bottom-color: var( --border );
| |
| }
| |
|
| |
| body.skin-vector-legacy .user-menu-list a {
| |
| color: var( --link );
| |
| border-left-color: transparent;
| |
| }
| |
|
| |
| body.skin-vector-legacy .user-menu-list a:hover {
| |
| background: var( --surface );
| |
| color: var( --link-hover );
| |
| border-left-color: var( --border-strong );
| |
| }
| |
|
| |
| /* Cores para alternador de tema */
| |
| #pt-theme-toggle a {
| |
| background: var( --surface );
| |
| color: var( --link );
| |
| border-color: var( --border-strong );
| |
| box-shadow: 0 6px 20px var( --shadow-soft );
| |
| }
| |
|
| |
| /* Cores para Back to Top */
| |
| .btt-button {
| |
| background: linear-gradient( 135deg, var( --primary ) 0%, var( --primary-hover ) 100% );
| |
| box-shadow: 0 4px 20px var( --shadow-soft );
| |
| }
| |
|
| |
| .btt-button:hover {
| |
| box-shadow: 0 8px 30px var( --shadow-strong );
| |
| background: linear-gradient( 135deg, var( --primary-hover ) 0%, var( --primary ) 100% );
| |
| }
| |
|
| |
| .btt-button:active {
| |
| box-shadow: 0 4px 15px var( --shadow-strong );
| |
| }
| |
|
| |
| .btt-button::before {
| |
| border-left-color: transparent;
| |
| border-right-color: transparent;
| |
| border-bottom-color: var( --text-strong );
| |
| }
| |
|
| |
| .btt-button:hover::before {
| |
| border-bottom-color: var( --text );
| |
| }
| |
|
| |
| @keyframes btt-pulse {
| |
| 0% { box-shadow: 0 4px 20px var( --shadow-soft ); }
| |
| 50% { box-shadow: 0 4px 25px var( --shadow-strong ); }
| |
| 100% { box-shadow: 0 4px 20px var( --shadow-soft ); }
| |
| }
| |
|
| |
| @media (prefers-contrast: high) {
| |
| .btt-button {
| |
| background: var( --text-strong );
| |
| border-color: var( --text-strong );
| |
| }
| |
|
| |
| .btt-button::before {
| |
| border-bottom-color: var( --text-strong );
| |
| }
| |
|
| |
| .btt-button:hover {
| |
| background: var( --bg-2 );
| |
| }
| |
| }
| |
|
| |
| /*------------------ Cores para cabeçalho e base -----------------------*/
| |
| #mw-head {
| |
| border-bottom-color: var( --border-strong );
| |
| background-color: var( --surface );
| |
| border-color: var( --border );
| |
| box-shadow: 0 2px 6px var( --shadow-medium );
| |
| }
| |
|
| |
| /* Cores para conteúdo principal */
| |
| body.skin-vector-legacy #content,
| |
| body.skin-vector-legacy .mw-body {
| |
| border-color: var( --border ) !important;
| |
|
| |
| box-shadow: 0 0px 20px var( --shadow-strong ) !important;
| |
|
| |
|
| |
| }
| |
|
| |
|
| |
| /* Cores para sidebar */
| |
| body.skin-vector-legacy #mw-panel {
| |
| background: var( --surface );
| |
| border-right-color: var( --border-strong );
| |
| box-shadow: 0 4px 6px var( --shadow-strong ), 0 1px 0 var( --shadow-soft ) inset;
| |
| }
| |
|
| |
| body.skin-vector-legacy #mw-panel .vector-menu-portal,
| |
| body.skin-vector-legacy #mw-panel .portal {
| |
| border-color: var( --border );
| |
| background: var( --bg-1 );
| |
| }
| |
|
| |
| /* Cores para headings dos portais */
| |
| body.skin-vector-legacy #mw-panel .vector-menu-portal .vector-menu-heading,
| |
| body.skin-vector-legacy #mw-panel .portal h3 {
| |
| color: var( --text-strong ) !important;
| |
| background: linear-gradient( 135deg, var( --primary ), var( --primary-hover ) );
| |
| border-bottom-color: var( --border );
| |
| text-shadow: 0 1px 2px var( --text-strong ) !important;
| |
| box-shadow: 0 6px 10px var( --shadow-strong ), 0 1px 0 var( --shadow-soft ) inset;
| |
| }
| |
|
| |
| body.skin-vector-legacy #mw-panel .vector-menu-portal .vector-menu-heading:hover,
| |
| body.skin-vector-legacy #mw-panel .portal h3:hover {
| |
| background: linear-gradient( 135deg, var( --primary-hover ), var( --primary ) );
| |
| }
| |
|
| |
| /*---------- Cores para itens e links da sidebar -------------- */
| |
| body.skin-vector-legacy #mw-panel .vector-menu-content ul,
| |
| body.skin-vector-legacy #mw-panel .portal .body ul {
| |
| background: var( --bg-1 );
| |
| }
| |
|
| |
| body.skin-vector-legacy #mw-panel .vector-menu-content li,
| |
| body.skin-vector-legacy #mw-panel .portal .body li {
| |
| border-bottom-color: var( --border );
| |
| }
| |
|
| |
| body.skin-vector-legacy #mw-panel .vector-menu-content a,
| |
| body.skin-vector-legacy #mw-panel .portal .body a {
| |
| color: var( --link );
| |
| border-left-color: transparent;
| |
| }
| |
|
| |
| body.skin-vector-legacy #mw-panel .vector-menu-content a:hover,
| |
| body.skin-vector-legacy #mw-panel .portal .body a:hover {
| |
| color: var( --link-hover );
| |
| background: var( --surface );
| |
| border-left-color: var( --border-strong );
| |
| }
| |
|
| |
| /* Cores para scrollbar */
| |
| body.skin-vector-legacy #mw-panel::-webkit-scrollbar-track { background: var( --surface ); }
| |
| body.skin-vector-legacy #mw-panel::-webkit-scrollbar-thumb { background: var( --primary ); }
| |
| body.skin-vector-legacy #mw-panel::-webkit-scrollbar-thumb:hover { background: var( --primary ); }
| |
|
| |
| /* Cores para logo */
| |
| body.skin-vector-legacy #p-logo a {
| |
| background-color: var( --surface );
| |
| border-color: var( --border );
| |
| box-shadow: 0 8px 20px var( --shadow-medium );
| |
| }
| |
|
| |
| body.skin-vector-legacy #p-logo a:hover {
| |
| border-color: var( --primary );
| |
| box-shadow: 0 8px 24px var( --shadow-medium );
| |
| }
| |
|
| |
| /* 🎨 Firefox */
| |
| html {
| |
| scrollbar-width: thin; /* width: auto | thin | none */
| |
| scrollbar-color: var(--text) transparent; /* thumb color and track color */
| |
| }
| |
|
| |
| /* 🎨 Chrome, Edge, Safari (WebKit/Blink) */
| |
| ::-webkit-scrollbar {
| |
| width: 8px; /* width of vertical scrollbar */
| |
| height: 8px; /* height of horizontal scrollbar */
| |
| }
| |
|
| |
| ::-webkit-scrollbar-track {
| |
| background: transparent; /* background of the track */
| |
| }
| |
|
| |
| ::-webkit-scrollbar-thumb {
| |
| background-color: var(--text); /* color of the thumb */
| |
| border-radius: 4px; /* rounded corners */
| |
| border: 2px solid transparent; /* inner spacing */
| |
| }
| |
|
| |
| ::-webkit-scrollbar-thumb:hover {
| |
| background-color: var(--text); /* keep the same color on hover */
| |
| }
| |
|
| |
| ::-webkit-scrollbar-corner {
| |
| background: transparent; /* bottom-right corner where scrollbars meet */
| |
| }
| |
|
| |
| /*------------- Cores para menu pessoal (top-right)---------------- */
| |
| body.skin-vector-legacy
| |
| #pt-userpage a,
| |
| #pt-mytalk a,
| |
| #pt-preferences a,
| |
| #pt-watchlist a,
| |
| #pt-mycontris a,
| |
| #pt-logout a {
| |
| color: var( --link ) !important;
| |
| border-left-color: transparent !important;
| |
| }
| |
|
| |
| body.skin-vector-legacy
| |
| #pt-userpage a:hover,
| |
| #pt-mytalk a:hover,
| |
| #pt-preferences a:hover,
| |
| #pt-watchlist a:hover,
| |
| #pt-mycontris a:hover,
| |
| #pt-logout a:hover {
| |
| color: var( --text-strong ) !important;
| |
| background-color: var( --primary ) !important;
| |
| border-color: var( --primary ) !important;
| |
| border-left-color: transparent !important;
| |
| }
| |
|
| |
| body.skin-vector-legacy #p-personal {
| |
| background: var( --surface );
| |
| border-color: var( --border-strong );
| |
| box-shadow: 0 6px 20px var( --shadow-soft );
| |
| }
| |
|
| |
| body.skin-vector-legacy #p-personal li {
| |
| border-bottom-color: var( --border );
| |
| }
| |
|
| |
| body.skin-vector-legacy #p-personal a {
| |
| color: var( --link );
| |
| border-left-color: transparent;
| |
| }
| |
|
| |
| body.skin-vector-legacy #p-personal a:hover {
| |
| background: var( --surface );
| |
| color: var( --link-hover );
| |
| border-left-color: var( --border-strong );
| |
| }
| |
|
| |
| /* Cores para formulários */
| |
| #searchInput,
| |
| Input::placeholder {
| |
| color: var( --link );
| |
| border-color: var( --border-strong ) !important;
| |
| }
| |
|
| |
| input[type="text"],
| |
| input[type="search"],
| |
| textarea,
| |
| select {
| |
| border-color: var( --border ) !important;
| |
| }
| |
|
| |
| input[type="text"]:focus,
| |
| input[type="search"]:focus,
| |
| textarea:focus,
| |
| select:focus {
| |
| border-color: var( --primary ) !important;
| |
| box-shadow: 0 0 0 3px var( --focus-ring ) !important;
| |
| }
| |
|
| |
| /* Cores para botões e abas */
| |
| #ca-view a,
| |
| #ca-viewsource a,
| |
| #ca-ve-edit a,
| |
| #ca-edit a,
| |
| #ca-history a,
| |
| #p-cactions .vector-menu-heading,
| |
| #ca-delete a,
| |
| #ca-move a,
| |
| #ca-protect a {
| |
| background: var( --surface ) !important;
| |
| color: var( --link ) !important;
| |
| border-color: var( --border ) !important;
| |
| box-shadow: 0 2px 8px var( --shadow-soft ) !important;
| |
| }
| |
|
| |
| #ca-view a:hover,
| |
| #ca-viewsource a:hover,
| |
| #ca-edit a:hover,
| |
| #ca-history a:hover,
| |
| #ca-watch a:hover,
| |
| #ca-unwatch a:hover,
| |
| #p-cactions .vector-menu-heading:hover,
| |
| #ca-delete a:hover,
| |
| #ca-move a:hover,
| |
| #ca-protect a:hover {
| |
| color: var( --link-hover ) !important;
| |
| border-color: var( --primary ) !important;
| |
| box-shadow: 0 8px 30px var( --shadow-strong ) !important;
| |
| border-color: var( --border-strong ) !important;
| |
| }
| |
|
| |
| #ca-view.selected a,
| |
| #ca-viewsource.selected a,
| |
| #ca-edit.selected a,
| |
| #ca-ve-edit.selected a,
| |
| #ca-history.selected a,
| |
| #ca-watch.selected a,
| |
| #ca-unwatch.selected a,
| |
| #ca-more.selected a {
| |
| background: linear-gradient( 135deg, var( --primary ), var( --primary-hover ) ) !important;
| |
| color: var( --text-strong ) !important;
| |
| border-color: transparent !important;
| |
| box-shadow: 0 8px 30px var( --shadow-strong ) !important;
| |
| }
| |
|
| |
| #ca-view.selected.mw-list-item.collapsible,
| |
| #ca-viewsource.selected.mw-list-item.collapsible,
| |
| #ca-edit.selected.mw-list-item.collapsible,
| |
| #ca-ve-edit.selected.mw-list-item.collapsible,
| |
| #ca-history.selected.mw-list-item.collapsible,
| |
| #ca-watch.selected.mw-list-item.collapsible,
| |
| #ca-unwatch.selected.mw-list-item.collapsible,
| |
| #ca-more.selected.mw-list-item.collapsible {
| |
| background: var(--surface) !important;
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| :root:not( [ data-theme ] )
| |
| .oo-ui-iconElement-icon,
| |
| :root:not( [ data-theme ] )
| |
| .oo-ui-indicatorElement-indicator,
| |
| :root[ data-theme$='-light' ]
| |
| .oo-ui-iconElement-icon,
| |
| :root[ data-theme$='-light' ]
| |
| .oo-ui-indicatorElement-indicator {
| |
| filter: none !important;
| |
| }
| |
|
| |
| /* -------------------------------------Mw Native Img ------------------------------------- */
| |
| figcaption {
| |
|
| |
| border-bottom-left-radius:20px;
| |
| border-bottom-right-radius:20px;
| |
| border-color: var(--border)!important;
| |
| padding: 10px!important;
| |
| margin: -2px 0 5px ;
| |
| }
| |
| .mw-file-description::after{
| |
| display: none!important;
| |
| }
| |
| .mw-file-description {
| |
| border-color: var(--border);
| |
| padding: 10px!important;
| |
| border-radius: 20px!important;
| |
| }
| |
|
| |
| img.mw-file-element,.mw-broken-media {
| |
| border-radius: 20px!important;
| |
| box-shadow: 5px 5px 10px var(--text);
| |
| }
| |
|
| |
|
| |
| figure[typeof="mw:File/Thumb"],
| |
| figure[typeof="mw:Error mw:File/Thumb"] {
| |
| border-top: 1px solid var(--border);
| |
| border-color: var(--border);
| |
| background: var(--bg);
| |
| color:var(--text);
| |
|
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| /* Footer Modern Styles */
| |
| #footer {
| |
| background: var(--bg-2);
| |
| border-top: 1px solid var(--border);
| |
| padding: 2rem 1rem;
| |
| margin: 3rem;
| |
| text-align: center;
| |
| color: var(--text-muted);
| |
|
| |
| /* Full width breakout */
| |
| width: 100vw;
| |
| position: relative;
| |
| left: 50%;
| |
| right: 50%;
| |
| margin-left: -50vw;
| |
| margin-right: -50vw;
| |
| box-sizing: border-box;
| |
| }
| |
|
| |
| #footer ul {
| |
| margin: 0;
| |
| padding: 0 ;
| |
| list-style: none;
| |
| display: flex;
| |
| justify-content: center;
| |
| flex-wrap: wrap;
| |
| gap: 1.5rem;
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| /* Categories Modern Styles */
| |
| .catlinks {
| |
| border: none;
| |
| background: var(--bg-1);
| |
| padding: 1rem 1.5rem;
| |
| margin-top: 2rem;
| |
| border-radius: 12px;
| |
| box-shadow: 0 4px 12px var(--shadow-soft);
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| align-items: center;
| |
| gap: 0.5rem;
| |
| clear: both;
| |
| }
| |
|
| |
| .mw-normal-catlinks {
| |
| background: transparent;
| |
| display: flex;
| |
| align-items: center;
| |
| flex-wrap: wrap;
| |
| gap: 0.5rem;
| |
| }
| |
|
| |
| .mw-normal-catlinks > a:first-child {
| |
| font-weight: 700;
| |
| text-transform: uppercase;
| |
| font-size: 0.75rem;
| |
| letter-spacing: 0.5px;
| |
| color: var(--text-muted);
| |
| margin-right: 0.5rem;
| |
| padding: 0;
| |
| pointer-events: none;
| |
| }
| |
|
| |
| .mw-normal-catlinks ul {
| |
| display: inline-flex;
| |
| flex-wrap: wrap;
| |
| gap: 0.5rem;
| |
| margin: 0;
| |
| padding: 0;
| |
| list-style: none;
| |
| }
| |
|
| |
| .mw-normal-catlinks li {
| |
| margin: 0;
| |
| padding: 0;
| |
| border: none;
| |
| display: inline-block;
| |
| line-height: 1;
| |
| }
| |
|
| |
| .mw-normal-catlinks li a {
| |
| display: inline-block;
| |
| padding: 6px 14px;
| |
| background: var(--surface);
| |
| border: 1px solid var(--border);
| |
| border-radius: 20px;
| |
| color: var(--text);
| |
| font-size: 0.85rem;
| |
| font-weight: 500;
| |
| text-decoration: none;
| |
| transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
| |
| box-shadow: 0 2px 4px var(--shadow-soft);
| |
| }
| |
|
| |
| .mw-normal-catlinks li a:hover {
| |
| background: var(--primary);
| |
| color: var(--text-strong);
| |
| border-color: var(--primary);
| |
| transform: translateY(-2px);
| |
| box-shadow: 0 4px 8px var(--shadow-medium);
| |
| text-decoration: none;
| |
| }
| |