System messages

This is a list of system messages available in the MediaWiki namespace. Please visit MediaWiki Localisation and translatewiki.net if you wish to contribute to the generic MediaWiki localisation.

System messages

Filter by prefix:

Filter by customization state:

Unmodified

All

Modified

Language:

Items per page:

First pagePrevious pageNext pageLast page

Name	Default message text
Name	Current message text
cite_reference_backlink_symbol (talk) (Translate)	↑
cite_reference_link (talk) (Translate)	<sup id="$1" class="reference">[[#$2\|<span class="cite-bracket">[</span>$3<span class="cite-bracket">]</span>]]</sup>
cite_references_link_accessibility_back_label (talk) (Translate)	Jump back up
cite_references_link_accessibility_label (talk) (Translate)	Jump up
cite_references_link_many (talk) (Translate)	<li id="$1"$4><span class="mw-cite-backlink">↑ $2</span> $3</li>
cite_references_link_many_accessibility_label (talk) (Translate)	Jump up to:
cite_references_link_many_and (talk) (Translate)
cite_references_link_many_format (talk) (Translate)	<sup>[[#$1\|$2]]</sup>
cite_references_link_many_format_backlink_labels (talk) (Translate)	a b c d e f g h i j k l m n o p q r s t u v w x y z aa ab ac ad ae af ag ah ai aj ak al am an ao ap aq ar as at au av aw ax ay az ba bb bc bd be bf bg bh bi bj bk bl bm bn bo bp bq br bs bt bu bv bw bx by bz ca cb cc cd ce cf cg ch ci cj ck cl cm cn co cp cq cr cs ct cu cv cw cx cy cz da db dc dd de df dg dh di dj dk dl dm dn do dp dq dr ds dt du dv dw dx dy dz ea eb ec ed ee ef eg eh ei ej ek el em en eo ep eq er es et eu ev ew ex ey ez fa fb fc fd fe ff fg fh fi fj fk fl fm fn fo fp fq fr fs ft fu fv fw fx fy fz ga gb gc gd ge gf gg gh gi gj gk gl gm gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu iv iw ix iy iz ja jb jc jd je jf jg jh ji jj jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd ke kf kg kh ki kj kk kl km kn ko kp kq kr ks kt ku kv kw kx ky kz la lb lc ld le lf lg lh li lj lk ll lm ln lo lp lq lr ls lt lu lv lw lx ly lz ma mb mc md me mf mg mh mi mj mk ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os ot ou ov ow ox oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm pn po pp pq pr ps pt pu pv pw px py pz qa qb qc qd qe qf qg qh qi qj qk ql qm qn qo qp qq qr qs qt qu qv qw qx qy qz ra rb rc rd re rf rg rh ri rj rk rl rm rn ro rp rq rr rs rt ru rv rw rx ry rz sa sb sc sd se sf sg sh si sj sk sl sm sn so sp sq sr ss st su sv sw sx sy sz ta tb tc td te tf tg th ti tj tk tl tm tn to tp tq tr ts tt tu tv tw tx ty tz ua ub uc ud ue uf ug uh ui uj uk ul um un uo up uq ur us ut uu uv uw ux uy uz va vb vc vd ve vf vg vh vi vj vk vl vm vn vo vp vq vr vs vt vu vv vw vx vy vz wa wb wc wd we wf wg wh wi wj wk wl wm wn wo wp wq wr ws wt wu wv ww wx wy wz xa xb xc xd xe xf xg xh xi xj xk xl xm xn xo xp xq xr xs xt xu xv xw xx xy xz ya yb yc yd ye yf yg yh yi yj yk yl ym yn yo yp yq yr ys yt yu yv yw yx yy yz za zb zc zd ze zf zg zh zi zj zk zl zm zn zo zp zq zr zs zt zu zv zw zx zy zz
cite_references_link_many_sep (talk) (Translate)
cite_references_link_one (talk) (Translate)	<li id="$1"$4><span class="mw-cite-backlink">[[#$2\|↑]]</span> $3</li>
cite_section_preview_references (talk) (Translate)	Preview of references
cite_warning_sectionpreview_no_text (talk) (Translate)	<code><ref></code> tag with name <code>$1</code> cannot be previewed because it is defined outside the current section or not defined at all.
citethispage (talk) (Translate)	Cite This Page
citethispage-badrevision (talk) (Translate)	Error: could not find any revision for the page "$1" with the revision ID $2.
citethispage-change-submit (talk) (Translate)	Cite
citethispage-change-target (talk) (Translate)	Page:
citethispage-content (talk) (Translate)	__TOC__ <div class="mw-specialCiteThisPage-bibliographic"> == Bibliographic details for {{FULLPAGENAME}} == * Page name: {{FULLPAGENAME}} * Author: {{SITENAME}} contributors * Publisher: ''{{SITENAME}}''. * Date of last revision: {{CURRENTDAY}} {{CURRENTMONTHNAME}} {{CURRENTYEAR}} {{CURRENTTIME}} UTC * Date retrieved: <citation>{{CURRENTDAY}} {{CURRENTMONTHNAME}} {{CURRENTYEAR}} {{CURRENTTIME}} UTC</citation> * Permanent URL: {{canonicalurl:{{FULLPAGENAME}}\|oldid={{REVISIONID}}}} * Page Version ID: {{REVISIONID}} </div> <div class="plainlinks mw-specialCiteThisPage-styles"> == Citation styles for {{FULLPAGENAME}} == === [https://en.wikipedia.org/wiki/APA_style APA style] === {{FULLPAGENAME}}. ({{CURRENTYEAR}}, {{CURRENTMONTHNAME}} {{CURRENTDAY}}). ''{{SITENAME}}''. Retrieved <citation>{{CURRENTMONTHNAME}} {{CURRENTDAY}}, {{CURRENTYEAR}}</citation>, from {{canonicalurl:{{FULLPAGENAME}}\|oldid={{REVISIONID}}}}. === [https://en.wikipedia.org/wiki/MLA_Handbook#MLA_Style_Manual MLA style] === "{{FULLPAGENAME}}." ''{{SITENAME}}''. {{CURRENTDAY}} {{CURRENTMONTHABBREV}} {{CURRENTYEAR}}, {{CURRENTTIME}} UTC. <{{canonicalurl:{{FULLPAGENAME}}\|oldid={{REVISIONID}}}}> <citation>{{CURRENTDAY}} {{CURRENTMONTHABBREV}} {{CURRENTYEAR}}, {{CURRENTTIME}}</citation>. === [https://en.wikipedia.org/wiki/MHRA_Style_Guide MHRA style] === {{SITENAME}} contributors, '{{FULLPAGENAME}}', ''{{SITENAME}},'' {{CURRENTDAY}} {{CURRENTMONTHNAME}} {{CURRENTYEAR}}, {{CURRENTTIME}} UTC, <{{canonicalurl:{{FULLPAGENAME}}\|oldid={{REVISIONID}}}}> [accessed <citation>{{CURRENTDAY}} {{CURRENTMONTHNAME}} {{CURRENTYEAR}}</citation>] === [https://en.wikipedia.org/wiki/The_Chicago_Manual_of_Style Chicago style] === {{SITENAME}} contributors, "{{FULLPAGENAME}}," ''{{SITENAME}},'' {{canonicalurl:{{FULLPAGENAME}}\|oldid={{REVISIONID}}}} (accessed <citation>{{CURRENTMONTHNAME}} {{CURRENTDAY}}, {{CURRENTYEAR}}</citation>). === [https://en.wikipedia.org/wiki/Council_of_Science_Editors CBE/CSE style] === {{SITENAME}} contributors. {{FULLPAGENAME}} [Internet]. {{SITENAME}}; {{CURRENTYEAR}} {{CURRENTMONTHABBREV}} {{CURRENTDAY}}, {{CURRENTTIME}} UTC [cited <citation>{{CURRENTYEAR}} {{CURRENTMONTHABBREV}} {{CURRENTDAY}}</citation>]. Available from: {{canonicalurl:{{FULLPAGENAME}}\|oldid={{REVISIONID}}}}. === [https://en.wikipedia.org/wiki/Bluebook Bluebook style] === {{FULLPAGENAME}}, {{canonicalurl:{{FULLPAGENAME}}\|oldid={{REVISIONID}}}} (last visited <citation>{{CURRENTMONTHNAME}} {{CURRENTDAY}}, {{CURRENTYEAR}}</citation>). === [https://en.wikipedia.org/wiki/BibTeX BibTeX] entry === @misc{ wiki:xxx, author = "{{SITENAME}}", title = "{{FULLPAGENAME}} --- {{SITENAME}}{,} {{int:sitesubtitle}}", year = "{{CURRENTYEAR}}", url = "{{canonicalurl:{{FULLPAGENAME}}\|oldid={{REVISIONID}}}}", note = "[Online; accessed <citation>{{CURRENTDAY}}-{{CURRENTMONTHNAME}}-{{CURRENTYEAR}}</citation>]" } When using the [https://en.wikipedia.org/wiki/LaTeX LaTeX] package url (<code>\usepackage{url}</code> somewhere in the preamble) which tends to give much more nicely formatted web addresses, the following may be preferred: @misc{ wiki:xxx, author = "{{SITENAME}}", title = "{{FULLPAGENAME}} --- {{SITENAME}}{,} {{int:sitesubtitle}}", year = "{{CURRENTYEAR}}", url = "'''\url{'''{{canonicalurl:{{FULLPAGENAME}}\|oldid={{REVISIONID}}}}'''}'''", note = "[Online; accessed <citation>{{CURRENTDAY}}-{{CURRENTMONTHNAME}}-{{CURRENTYEAR}}</citation>]" } </div> <!--closing div for "plainlinks"-->
citethispage-desc (talk) (Translate)	Adds a [[Special:CiteThisPage\|citation]] special page and toolbox link
citethispage-link (talk) (Translate)	Cite this page
citethispage-summary (talk) (Translate)
clearyourcache (talk) (Translate)	<strong>Note:</strong> After publishing, you may have to bypass your browser's cache to see the changes. * <strong>Firefox / Safari:</strong> Hold <em>Shift</em> while clicking <em>Reload</em>, or press either <em>Ctrl-F5</em> or <em>Ctrl-R</em> (<em>⌘-R</em> on a Mac) * <strong>Google Chrome:</strong> Press <em>Ctrl-Shift-R</em> (<em>⌘-Shift-R</em> on a Mac) * <strong>Edge:</strong> Hold <em>Ctrl</em> while clicking <em>Refresh</em>, or press <em>Ctrl-F5</em>.
codeeditor-desc (talk) (Translate)	Syntax-highlighted editing for JavaScript and CSS pages using [https://ace.c9.io/ Ace editor]
codeeditor-error-message (talk) (Translate)	CodeEditor needs WikiEditor to be loaded.
codeeditor-error-title (talk) (Translate)	Dependency failed
codeeditor-gotoline (talk) (Translate)	Go to line number...
codeeditor-gotoline-placeholder (talk) (Translate)	line[:column]
codeeditor-gotoline-prompt (talk) (Translate)	Enter a line number
codeeditor-indent (talk) (Translate)	Indent
codeeditor-invisibleChars-toggle (talk) (Translate)	Toggle invisible characters
codeeditor-lineWrapping-toggle (talk) (Translate)	Toggle line wrapping
codeeditor-next-annotation (talk) (Translate)	Go to next annotation
codeeditor-outdent (talk) (Translate)	Outdent
codeeditor-save-with-errors (talk) (Translate)	The document contains errors. Are you sure you want to publish?
codeeditor-searchReplace-toggle (talk) (Translate)	Toggle search and replace dialog
codeeditor-toolbar-toggle (talk) (Translate)	Toggle code editor
collapsible-collapse (talk) (Translate)	Collapse
collapsible-collapse-all-text (talk) (Translate)	Collapse all
collapsible-collapse-all-tooltip (talk) (Translate)	Collapse all collapsible elements on the current page
collapsible-expand (talk) (Translate)	Expand
collapsible-expand-all-text (talk) (Translate)	Expand all
collapsible-expand-all-tooltip (talk) (Translate)	Expand all collapsible elements on the current page
colon-separator (talk) (Translate)	:
comma-separator (talk) (Translate)	,
common.css (talk) (Translate)	/* CSS placed here will be applied to all skins */
common.css (talk) (Translate)	/* CSS placed here will be applied to all skins / @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css'); @font-face { font-family: "Outfit"; src: url("/fonts/Outfit.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Daedalus"; src: url("/fonts/000webfont.ttf") format("truetype"); } :root, .view-dark { --content-link-color: #ffc05f; --content-border-color: #feffe5; --heading-font-family: "Daedalus", sans-serif; --body-font-family: "Outfit", sans-serif; --accent-link-color: #22214d; --content-link-label-color: #0b101b; } :root{ --is-top-logo: 1; --logo-file-width: 160; --logo-file-height: 160; --logo-height: calc(var(--logo-file-height)1px); --logo-margin: 15px; --is-navigation-inside-content: 0; } /***************************** * Sound * ****************************/ .sound-button,.sound-button a,.sound-button a.image,.sound-button img { background: none !important; background-color: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; text-decoration: none !important; padding: 0 !important; margin: 0 !important } .sound-button img { filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(96%) contrast(89%); transition: filter 0.2s ease-in-out; display: inline-block !important; vertical-align: middle; margin: 0 !important; } .sound-button { cursor: pointer; display: inline-block !important; vertical-align: middle; margin: 0 2px !important; line-height: 1; white-space: nowrap; } .sound-button:hover img,.sound-button.playing img { filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(115%) contrast(100%) drop-shadow(0 0 2px rgba(201,225,230,0.7)) } .sound-button a:hover,.sound-button a:focus { background: none !important; border: none !important } /*************************** * End Sound * ****************************/ /*************************** * PortableInfoboxes * ****************************/ :root { image-rendering: pixelated !important; --pi-background: var(--background-color-base); --pi-secondary-background: var(--color-progressive); --pi-secondary-background-label: var(--content-link-label-color); --pi-border-color: color-mix(in srgb, var(--color-progressive) 50%, transparent); } .portable-infobox .pi-title, .portable-infobox .pi-header { text-align:center; font-size:1.5em; background: color-mix(in srgb, var(--color-progressive) 75%, transparent); color:var(--pi-secondary-background-label); } .portable-infobox .pi-data { background: color-mix(in srgb, var(--color-progressive) 18%, transparent); font-size: 115%; word-wrap: normal; } .miniboss-box .portable-infobox { box-shadow: 3px 3px 6px var(--content-border-color); } .portable-infobox .pi-image { padding: 8px; } .pi-image-thumbnail { max-width:100%; } .pi-section-navigation .pi-section-tab.pi-section-active, .pi-section-navigation .pi-section-tab.current, .pi-media-collection .pi-tab-link.current { background: var(--pi-secondary-background); color: var(--pi-secondary-background-label); } .mw-body .portable-infobox h2, .mw-body .portable-infobox h3 { text-shadow: 0 0 5px var(--color-progressive); border-bottom: 0; font-family: var(--heading-font-family); font-weight: 550; margin: 0; word-wrap: normal; } .mw-body .portable-infobox { border-radius:5px; border-image-source: var(--border-image-base); border-image-slice: 15 16; border-image-width: 15px; border-image-repeat: stretch; } .mw-body .portable-infobox h3 { font-size: 80%; font-weight: 500; } /*************************** * End PortableInfoboxes * ****************************/ / as of Module:navbox version 1.2.2 / /******************************************************************************************************************* * Semantically-correct horizontal lists (for Module:Navbox, and they're more machine-readable than {{}}-formatting) *********************************************************************************************************************/ .hlist dl, .hlist ol, .hlist ul { margin: 0; padding: 0; } / Display list items inline / .hlist dd, .hlist dt, .hlist li { / * don't trust the note that says margin doesn't work with inline * removing margin: 0 makes dds have margins again * We also want to reset margin-right in Minerva / margin: 0; display: inline; } / Display requested top-level lists inline / .hlist.inline, .hlist.inline dl, .hlist.inline ol, .hlist.inline ul, / Display nested lists inline / .hlist dl dl, .hlist dl ol, .hlist dl ul, .hlist ol dl, .hlist ol ol, .hlist ol ul, .hlist ul dl, .hlist ul ol, .hlist ul ul { display: inline; } / Hide empty list items / .hlist .mw-empty-li { display: none; } / TODO: :not() can maybe be used here to remove the later rule. naive test * seems to work. more testing needed. like so: / .hlist dt:not(:last-child)::after { content: ":\20"; } .hlist dd:not(:last-child)::after, .hlist li:not(:last-child)::after { / "space, Middle Dot, space" We use unicode numbers instead of the raw characters due to a Firefox encoding bug on unicode characters. The space is also encoded because raw spaces combined with a unicode number strips the spaces under some conditions such as single-line lists / / content: "\20\00B7\20"; font-weight: bold; / / "space • space" There may (and likely) be an extra whitespace between <li>s, therefore we have to use a space character as last character of this sequence. By this way, the last space and the next whitespce will collapse as a single space, to make the whitespace on both sides of the middle dot the same width. / content: "\20\A0\2022\A0\20"; font-weight: inherit; } / Add parentheses around nested lists / .hlist dd ol::before, .hlist dd ul::before, .hlist dd dl::before, .hlist dt ol::before, .hlist dt ul::before, .hlist dt dl::before, .hlist li ol::before, .hlist li ul::before, .hlist li dl::before { content: "\20("; font-weight: inherit; } .hlist dd ol::after, .hlist dd ul::after, .hlist dd dl::after, .hlist dt ol::after, .hlist dt ul::after, .hlist dt dl::after, .hlist li ol::after, .hlist li ul::after, .hlist li dl::after { content: ")"; font-weight: inherit; } / Put ordinals in front of ordered list items / .hlist ol { counter-reset: listitem; } .hlist ol > li { counter-increment: listitem; } .hlist ol > li::before { content: " " counter(listitem) ".\20"; } / Progressive enhancement: * try to make the dot always follow the list item in same line / .hlist :is(li,dt,dd):not(:has(:is(li,dt,dd))){ display: inline-block; } /******************************************* * End semantically-correct horizontal lists * *******************************************/ /******************************************************** * Template:Navbox (RANGER) (needs semantic horizontal lists above) * **********************************************************/ .ranger-navbox{ --navbox-background: none; --navbox-margin: 0.5em auto; --navbox-padding: 4px; --navbox-gap: 3px; --navbox-outer-border-color: color-mix(in srgb, var(--color-progressive) 50%, transparent); --navbox-outer-border-width: 1px; --navbox-outer-border-style: solid; --navbox-outer-border-radius: 0px; --navbox-font-size: calc(1em - 2px); --navbox-title-color: var(--content-link-label-color); --navbox-title-font-size: calc(125%); --navbox-title-background: var(--color-progressive); --navbox-title-icon-color: var(--content-link-label-color); --navbox-title-link-color: var(--navbox-title-color); --navbox-title-link-color--visited: var(--navbox-title-link-color); --navbox-title-link-color--hover: var(--accent-link-color); --navbox-title-redlink-color: var(--navbox-title-link-color); --navbox-title-link-decoration: underline solid; --navbox-title-redlink-decoration: underline wavy; --navbox-title-padding--y: 0.5em; --navbox-above-background: color-mix(in srgb, var(--color-base) 15%, transparent); --navbox-above-color: var(--color-base); --navbox-above-padding: var(--navbox-list-padding); --navbox-below-background: var(--navbox-above-background); --navbox-below-color: var(--navbox-above-color); --navbox-below-padding: var(--navbox-above-padding); --navbox-header-color: var(--navbox-title-color); --navbox-header-font-size: calc(110%); --navbox-header-background: var(--navbox-title-background); --navbox-header-icon-color: var(--navbox-title-icon-color); --navbox-header-link-color: var(--navbox-title-link-color); --navbox-header-link-color--visited: var(--navbox-title-link-color--visited); --navbox-header-link-color--hover: var(--navbox-title-link-color--hover); --navbox-header-redlink-color: var(--navbox-title-redlink-color); --navbox-header-link-decoration: var(--navbox-title-link-decoration); --navbox-header-redlink-decoration: var(--navbox-title-redlink-decoration); --navbox-header-padding--y: 0.3em; --navbox-subheader-font-size: calc(100%); --navbox-subheader-padding--y: calc(var(--navbox-header-padding--y)/2); --navbox-list-background: color-mix(in srgb, var(--color-base) 5%, transparent); --navbox-list-background--striped: color-mix(in srgb, var(--color-base) 8%, transparent); --navbox-list-color: var(--color-base); --navbox-list-padding: 0.25em 0.5em; --navbox-group-text-align: left; --navbox-group-text-align--mobile: left; --navbox-group-background: color-mix(in srgb, var(--color-progressive) 20%, transparent); --navbox-group-color: var(--color-base); --navbox-group-padding: var(--navbox-list-padding); --navbox-tree-line-color: color-mix(in srgb, var(--color-progressive) 30%, transparent); --navbox-tree-line-width: 2px; --navbox-tree-indent: 1em; --navbox-tree-line-indent: 0.5em; --navbox-tree-line-spacing: var(--navbox-gap); --icon-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-up' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 15l6 -6l6 6'%3E%3C/path%3E%3C/svg%3E"); --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 9l6 6l6 -6'%3E%3C/path%3E%3C/svg%3E"); --icon-metalinks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-edit' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1'%3E%3C/path%3E%3Cpath d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z'%3E%3C/path%3E%3Cpath d='M16 5l3 3'%3E%3C/path%3E%3C/svg%3E"); --navbox-icon-offset--x: 0.5rem; / should be an absolute length (rem-based or px-based) / } .ranger-navbox.pill, .ranger-navbox.pill-mobile{ --navbox-pill-gap: 0.3em; --navbox-pill-padding: 0.25em 0.75em; --navbox-pill-border-radius: 3px; --navbox-pill-box-shadow: none; --navbox-pill-background: color-mix(in srgb, var(--color-base) 5%, transparent); --navbox-pill-box-shadow--hover: inset 0 0 3px var(--navbox-list-color); --navbox-pill-background--hover: var(--navbox-pill-background); --navbox-list-background: none; --navbox-list-background--striped: color-mix(in srgb, var(--color-base) 3%, transparent); } .ranger-navbox.no-underline-title-links{ --navbox-title-link-color: var(--accent-link-color); --navbox-title-link-decoration: none; --navbox-title-redlink-decoration: none; } .ranger-navbox.noborder, .ranger-navbox.no-border{ --navbox-padding: 0px; --navbox-outer-border-width: 0px; } /***************************** * Fallback for older browsers * *****************************/ @supports not (color:color-mix(in srgb, #000, transparent)) { .ranger-navbox { --navbox-above-background: var(--background-color-neutral-subtle); --navbox-list-background: transparent; --navbox-list-background--striped: var(--background-color-neutral-subtle); --navbox-group-background: var(--background-color-neutral-subtle); --navbox-tree-line-color: var(--background-color-neutral-subtle); } .ranger-navbox.pill, .ranger-navbox.pill-mobile { --navbox-pill-background: var(--background-color-neutral-subtle); --navbox-list-background--striped: transparent; } } /************* * End fallback * ***************/ .ranger-navbox{ border-color: var(--navbox-outer-border-color); border-style: var(--navbox-outer-border-style); border-width: var(--navbox-outer-border-width); border-radius: var(--navbox-outer-border-radius); padding: var(--navbox-padding); font-size: var(--navbox-font-size); margin: var(--navbox-margin); background: var(--navbox-background); line-height: 1.5; clear:both; } .ranger-navbox { border: 0; } .ranger-navbox .center { margin-left: unset; margin-right: unset; } .ranger-navbox, .ranger-navbox .ranger-section, .ranger-navbox .ranger-listbox{ display: flex; flex-direction: column; gap: var(--navbox-gap); } .ranger-navbox .ranger-title, .ranger-navbox .ranger-header{ text-align: center; min-height: 1.5em; position: relative; z-index: 0; font-weight: bold; } .ranger-navbox .ranger-title{ color: var(--navbox-title-color); background: var(--navbox-title-background); font-size: var(--navbox-title-font-size); padding: var(--navbox-title-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); / left and right padding equal to the size and position of the edit/collapse buttons / } .ranger-navbox .ranger-title a, .ranger-navbox .ranger-title a:visited, .ranger-navbox .ranger-title a:hover, .ranger-navbox .ranger-title a.external, .ranger-navbox .ranger-title a.external:visited, .ranger-navbox .ranger-title a.external:hover { text-decoration: var(--navbox-title-link-decoration); } .ranger-navbox .ranger-title a.new, .ranger-navbox .ranger-title a.new:visited { text-decoration: var(--navbox-title-redlink-decoration); } .ranger-navbox .ranger-title a, .ranger-navbox .ranger-title a.external, .ranger-navbox .ranger-title a.external:visited { color: var(--navbox-title-link-color); } .ranger-navbox .ranger-title a:visited{ color: var(--navbox-title-link-color--visited); } .ranger-navbox .ranger-title a.new, .ranger-navbox .ranger-title a.new:visited{ color:var(--navbox-title-redlink-color); } .ranger-navbox .ranger-title a:hover, .ranger-navbox .ranger-title a:visited:hover, .ranger-navbox .ranger-title a.external:hover, .ranger-navbox .ranger-title a.external:visited:hover { color:var(--navbox-title-link-color--hover); } .ranger-navbox .ranger-header{ color: var(--navbox-header-color); background: var(--navbox-header-background); font-size: var(--navbox-header-font-size); padding: var(--navbox-header-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); / left and right padding equal to the size and position of the edit/collapse buttons / } .ranger-navbox .ranger-sublist .ranger-header{ font-size: var(--navbox-subheader-font-size); padding: var(--navbox-subheader-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); / left and right padding equal to the size and position of the edit/collapse buttons / } .ranger-navbox .ranger-header a, .ranger-navbox .ranger-header a:visited, .ranger-navbox .ranger-header a:hover, .ranger-navbox .ranger-header a.external, .ranger-navbox .ranger-header a.external:visited, .ranger-navbox .ranger-header a.external:hover { text-decoration: var(--navbox-header-link-decoration); } .ranger-navbox .ranger-header a.new, .ranger-navbox .ranger-header a.new:visited { text-decoration: var(--navbox-header-redlink-decoration); } .ranger-navbox .ranger-header a, .ranger-navbox .ranger-header a.external, .ranger-navbox .ranger-header a.external:visited { color: var(--navbox-header-link-color); } .ranger-navbox .ranger-header a:visited{ color: var(--navbox-header-link-color--visited); } .ranger-navbox .ranger-header a.new, .ranger-navbox .ranger-header a.new:visited{ color:var(--navbox-header-redlink-color); } .ranger-navbox .ranger-header a:hover, .ranger-navbox .ranger-header a:visited:hover, .ranger-navbox .ranger-header a.external:hover, .ranger-navbox .ranger-header a.external:visited:hover { color:var(--navbox-header-link-color--hover); } .ranger-navbox .ranger-meta{ font-size: var(--navbox-title-font-size); position: absolute; left: var(--navbox-icon-offset--x); top: calc(var(--navbox-title-padding--y) + 0.08em); / 0.08em: vertial offset tweak based on the icon graph / display: block; } .ranger-navbox .ranger-meta .nv{ --mask: var(--icon-metalinks); display: block; width: 0.84em; / based on the icon graph / height: 0.84em; -webkit-mask: var(--mask); mask: var(--mask); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center center; mask-position: center center; background-color: var(--navbox-title-icon-color); } .ranger-navbox .ranger-meta .nv > a{ display: block; width: 100%; height: 100%; opacity: 0; } .ranger-navbox .ranger-meta .nv > a > span{ display: block; width: 100%; height: 100%; overflow: hidden; } .ranger-navbox .ranger-meta:has(.mw-selflink){ display: none; } .ranger-navbox, .ranger-navbox .ranger-section{ position: relative; } .ranger .mw-collapsible-toggle-placeholder{ display: none; } .ranger-navbox .ranger-title > .ranger-title-text, .ranger-navbox .ranger-header > .ranger-header-text{ pointer-events: none; } .ranger-navbox .ranger-title > .ranger-title-text a, .ranger-navbox .ranger-header > .ranger-header-text a{ pointer-events: auto; } .ranger-navbox .ranger-title > .mw-collapsible-toggle, .ranger-navbox .ranger-header > .mw-collapsible-toggle{ --mask: var(--icon-chevron-down); position: absolute; right: 0; top: 0; z-index: -1; display: block; width: 100%; height: 100%; overflow:hidden; } .ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle, .ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{ width: 1.5em; height: 1.5em; right: var(--navbox-icon-offset--x); } .ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle{ top: var(--navbox-title-padding--y); } .ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{ top: var(--navbox-header-padding--y); } .ranger-navbox.small-collapsible-toggle-click-area .ranger-sublist .ranger-header > .mw-collapsible-toggle{ top: var(--navbox-subheader-padding--y); } .ranger-navbox .ranger-title > .mw-collapsible-toggle::before, .ranger-navbox .ranger-header > .mw-collapsible-toggle::before{ content: ""; display: block; width: 1.5em; height: 1.5em; position: absolute; right: var(--navbox-icon-offset--x); -webkit-mask: var(--mask); mask: var(--mask); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center center; mask-position: center center; background-color: var(--navbox-title-icon-color); transform: scaleY(-1); } .ranger-navbox .ranger-title > .mw-collapsible-toggle::before{ top: var(--navbox-title-padding--y); } .ranger-navbox .ranger-header > .mw-collapsible-toggle::before{ top: var(--navbox-header-padding--y); } .ranger-navbox .ranger-sublist .ranger-header > .mw-collapsible-toggle::before{ top: var(--navbox-subheader-padding--y); } .ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle::before, .ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle::before{ top: 0; right: 0; } .ranger-navbox .ranger-header > .mw-collapsible-toggle::before{ background-color: var(--navbox-header-icon-color); } .ranger-navbox .ranger-title > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before, .ranger-navbox .ranger-header > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before{ transform: none; } .ranger-navbox .ranger-title > .mw-collapsible-toggle , .ranger-navbox .ranger-title > .mw-collapsible-toggle::after, .ranger-navbox .ranger-header > .mw-collapsible-toggle , .ranger-navbox .ranger-header > .mw-collapsible-toggle::after{ display: none; } .ranger-navbox .ranger-list{ width: unset; padding: var(--navbox-list-padding); } .ranger-navbox .ranger-above{ background: var(--navbox-above-background); color: var(--navbox-above-color); padding: var(--navbox-above-padding); width: unset; } .ranger-navbox .ranger-below{ background: var(--navbox-below-background); color: var(--navbox-below-color); padding: var(--navbox-below-padding); width: unset; } .ranger-navbox .ranger-sublist{ display: flex; flex-direction: column; gap: var(--navbox-gap); } .ranger-navbox .ranger-section-body{ display: grid; gap: var(--navbox-gap); grid-template-columns: auto minmax(0,1fr); } / gap fix for collapsed content / .ranger-navbox [class^="ranger-"][hidden="until-found"]{ margin-top: calc(0px - var(--navbox-gap)) !important; } .ranger-navbox .ranger-row{ display: contents; } .ranger-navbox .ranger-group, .ranger-navbox .ranger-subgroup{ text-align: var(--navbox-group-text-align); white-space: nowrap; font-weight: bold; background: var(--navbox-group-background); color: var(--navbox-group-color); padding: var(--navbox-group-padding); width: unset; } / for desktop view / .ranger-navbox.group-align-left .ranger-group, .ranger-navbox.group-align-left .ranger-subgroup{ --navbox-group-text-align: left; } .ranger-navbox.group-align-center .ranger-group, .ranger-navbox.group-align-center .ranger-subgroup{ --navbox-group-text-align: center; } .ranger-navbox.group-align-right .ranger-group, .ranger-navbox.group-align-right .ranger-subgroup{ --navbox-group-text-align: right; } / for mobile view / .ranger-navbox.mobile-group-align-left .ranger-group, .ranger-navbox.mobile-group-align-left .ranger-subgroup{ --navbox-group-text-align--mobile: left; } .ranger-navbox.mobile-group-align-center .ranger-group, .ranger-navbox.mobile-group-align-center .ranger-subgroup{ --navbox-group-text-align--mobile: center; } .ranger-navbox.mobile-group-align-right .ranger-group, .ranger-navbox.mobile-group-align-right .ranger-subgroup{ --navbox-group-text-align--mobile: right; } .ranger-navbox .ranger-listbox > .ranger-wrap{ background: var(--navbox-list-background); color: var(--navbox-list-color); flex-grow: 1; } .ranger-navbox .ranger-sublist{ flex-grow: var(--count); } .ranger-navbox .ranger-listbox:first-child{ / A list-n without group-n / grid-column-end: span 2; } .ranger-navbox .ranger-group, .ranger-navbox .ranger-subgroup, .ranger-navbox .ranger-listbox > .ranger-wrap{ display: grid; justify-items: stretch; align-items: center; } .ranger-navbox.striped-even .ranger-even, .ranger-navbox.striped-odd .ranger-odd{ background: var(--navbox-list-background--striped); } / make links use full line height (larger click box)/ .ranger-navbox .hlist a{ display: inline-block; } .ranger-navbox .align-left, .ranger-navbox .alignleft{ text-align: left; } .ranger-navbox .align-center, .ranger-navbox .aligncenter{ text-align: center; } .ranger-navbox .align-right, .ranger-navbox .alignright{ text-align: right; } / responsive / @media screen and (max-width: 720px) { .ranger-navbox .ranger-section-body, .ranger-navbox .ranger-sublist { display: flex; flex-flow: column; } .ranger-navbox .ranger-row{ display: block; } .ranger-navbox .ranger-group + .ranger-listbox > .ranger-sublist:first-child, .ranger-navbox .ranger-subgroup + .ranger-listbox > .ranger-sublist:first-child{ margin-top: var(--navbox-gap); } .ranger-navbox .ranger-listbox.empty{ display: none; } .ranger-navbox .ranger-group, .ranger-navbox .ranger-subgroup{ text-align: var(--navbox-group-text-align--mobile); white-space: normal; } .ranger-navbox .ranger-sublist { padding-left: var(--navbox-tree-indent); margin-left: var(--navbox-tree-line-indent); } .ranger-navbox .ranger-subgroup, .ranger-navbox .ranger-listbox { position:relative; } .ranger-navbox .ranger-group br, .ranger-navbox .ranger-subgroup br{ display: none; } .ranger-navbox .ranger-sublist > .ranger-section > .ranger-header{ margin-left: calc( 0px - var(--navbox-tree-indent) - var(--navbox-tree-line-indent)); } .ranger-navbox .ranger-sublist .ranger-row > ::before{ position: absolute; left: calc(0px - var(--navbox-tree-indent)); top: 0; width: var(--navbox-tree-line-width); height: 100%; content: ''; display: block; background-color: var(--navbox-tree-line-color); } .ranger-navbox .ranger-sublist .ranger-row > .ranger-listbox::before, .ranger-navbox .ranger-row.empty-list > .ranger-subgroup::before{ height: calc(100% + var(--navbox-gap)); } .ranger-navbox .ranger-sublist .ranger-row:last-child > ::before { display: none; } .ranger-navbox .ranger-sublist .ranger-row:last-child > :first-child::before { display: block; height: calc(50% + var(--navbox-tree-line-width)/2); } .ranger-navbox .ranger-subgroup::after, .ranger-navbox .empty-group > .ranger-listbox > .ranger-wrap::after{ position: absolute; left: calc(0px - var(--navbox-tree-indent) + var(--navbox-tree-line-width)); width: calc(var(--navbox-tree-indent) - var(--navbox-tree-line-spacing) - var(--navbox-tree-line-width)); height: var(--navbox-tree-line-width); content: ''; background-color: var(--navbox-tree-line-color); } / increase height for links / .ranger-navbox .hlist{ line-height: 2; } } /* `.pill` class: the "pill" style */ / remove middle dots betweem items / .ranger-navbox.pill .hlist dd:not(:last-child)::after, .ranger-navbox.pill .hlist li:not(:last-child)::after{ display: none; } / remove parentheses around nested lists/ .ranger-navbox.pill .hlist dd ol::before, .ranger-navbox.pill .hlist dd ul::before, .ranger-navbox.pill .hlist dd dl::before, .ranger-navbox.pill .hlist dt ol::before, .ranger-navbox.pill .hlist dt ul::before, .ranger-navbox.pill .hlist dt dl::before, .ranger-navbox.pill .hlist li ol::before, .ranger-navbox.pill .hlist li ul::before, .ranger-navbox.pill .hlist li dl::before, .ranger-navbox.pill .hlist dd ol::after, .ranger-navbox.pill .hlist dd ul::after, .ranger-navbox.pill .hlist dd dl::after, .ranger-navbox.pill .hlist dt ol::after, .ranger-navbox.pill .hlist dt ul::after, .ranger-navbox.pill .hlist dt dl::after, .ranger-navbox.pill .hlist li ol::after, .ranger-navbox.pill .hlist li ul::after, .ranger-navbox.pill .hlist li dl::after { display: none; } / make lists inline-flex / .ranger-navbox.pill .hlist ul, .ranger-navbox.pill .hlist ol, .ranger-navbox.pill .hlist dl{ display: inline-flex; gap: var(--navbox-pill-gap); flex-wrap: wrap; } / "pill" style for items / .ranger-navbox.pill .hlist li, .ranger-navbox.pill .hlist dt, .ranger-navbox.pill .hlist dd{ padding: var(--navbox-pill-padding); border-radius: var(--navbox-pill-border-radius); box-shadow: var(--navbox-pill-box-shadow); background: var(--navbox-pill-background); / 100% height / display: flex; align-items: center; / for nested lists / gap: var(--navbox-pill-gap); flex-wrap: wrap; } / Add a hover / focus feedback style / .ranger-navbox.pill .hlist dd:hover, .ranger-navbox.pill .hlist dd:focus, .ranger-navbox.pill .hlist dt:hover, .ranger-navbox.pill .hlist dt:focus, .ranger-navbox.pill .hlist li:hover, .ranger-navbox.pill .hlist li:focus { box-shadow: var(--navbox-pill-box-shadow--hover); background: var(--navbox-pill-background--hover); } /* `.pill-mobile` class: only apply the "pill" style on mobile */ @media screen and (max-width: 720px) { / remove middle dots betweem items / .ranger-navbox.pill-mobile .hlist dd:not(:last-child)::after, .ranger-navbox.pill-mobile .hlist li:not(:last-child)::after{ display: none; } / remove parentheses around nested lists/ .ranger-navbox.pill-mobile .hlist dd ol::before, .ranger-navbox.pill-mobile .hlist dd ul::before, .ranger-navbox.pill-mobile .hlist dd dl::before, .ranger-navbox.pill-mobile .hlist dt ol::before, .ranger-navbox.pill-mobile .hlist dt ul::before, .ranger-navbox.pill-mobile .hlist dt dl::before, .ranger-navbox.pill-mobile .hlist li ol::before, .ranger-navbox.pill-mobile .hlist li ul::before, .ranger-navbox.pill-mobile .hlist li dl::before, .ranger-navbox.pill-mobile .hlist dd ol::after, .ranger-navbox.pill-mobile .hlist dd ul::after, .ranger-navbox.pill-mobile .hlist dd dl::after, .ranger-navbox.pill-mobile .hlist dt ol::after, .ranger-navbox.pill-mobile .hlist dt ul::after, .ranger-navbox.pill-mobile .hlist dt dl::after, .ranger-navbox.pill-mobile .hlist li ol::after, .ranger-navbox.pill-mobile .hlist li ul::after, .ranger-navbox.pill-mobile .hlist li dl::after { display: none; } / make lists inline-flex / .ranger-navbox.pill-mobile .hlist ul, .ranger-navbox.pill-mobile .hlist ol, .ranger-navbox.pill-mobile .hlist dl{ display: inline-flex; gap: var(--navbox-pill-gap); flex-wrap: wrap; } .ranger-navbox.pill-mobile .hlist li, .ranger-navbox.pill-mobile .hlist dt, .ranger-navbox.pill-mobile .hlist dd{ padding: var(--navbox-pill-padding); border-radius: var(--navbox-pill-border-radius); box-shadow: var(--navbox-pill-box-shadow); background: var(--navbox-pill-background); display: flex; align-items: center; gap: var(--navbox-pill-gap); flex-wrap: wrap; } / Add a hover / focus feedback style / .ranger-navbox.pill-mobile .hlist dd:hover, .ranger-navbox.pill-mobile .hlist dd:focus, .ranger-navbox.pill-mobile .hlist dt:hover, .ranger-navbox.pill-mobile .hlist dt:focus, .ranger-navbox.pill-mobile .hlist li:hover, .ranger-navbox.pill-mobile .hlist li:focus { box-shadow: var(--navbox-pill-box-shadow--hover); background: var(--navbox-pill-background--hover); } } /******************** * End Template:Navbox* *********************/ .mp-box { display:flex; flex-flow:column nowrap; width: calc(100% - 2px); box-sizing: border-box; background: linear-gradient(135deg, rgba(66, 162, 241, 0.12) 0%, transparent 35%, rgba(76, 87, 181, 0.1) 65%, rgba(66, 162, 241, 0.12) 100%), radial-gradient(ellipse at top left, rgba(66, 162, 241, 0.15), transparent 50%), radial-gradient(ellipse at bottom right, rgba(76, 87, 181, 0.12), transparent 50%), var(--background-color-transparent); padding:0; box-shadow: 0 0 50px 10px rgba(66, 162, 241, 0.2), 0 0 80px 15px rgba(0, 0, 0, 0.8), inset 0 0 80px 15px rgba(66, 162, 241, 0.08), 0 0 0 1px rgba(66, 162, 241, 0.3), inset 0 0 0 1px rgba(66, 162, 241, 0.2); margin-top: 1em; border-radius: 6px; position: relative; overflow: hidden; } .mp-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.6) 15%, rgba(66, 162, 241, 1) 50%, rgba(66, 162, 241, 0.6) 85%, transparent); box-shadow: 0 0 15px rgba(66, 162, 241, 0.8), 0 0 25px rgba(66, 162, 241, 0.5); } .mp-box::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.4) 20%, rgba(66, 162, 241, 0.7) 50%, rgba(66, 162, 241, 0.4) 80%, transparent); box-shadow: 0 0 10px rgba(66, 162, 241, 0.6); } .mp-body { height: 100%; display: flex; padding:0.5em; flex-flow: column nowrap; } .mp-box.centered-content .mp-body { height: 100%; display: flex; flex-flow: column nowrap; justify-content: space-evenly; } .mp-box.has-floating-image { display:block; } .mp-box.has-floating-image .mp-body { height:unset; display:block; } .mp-box h2 { text-align:center; font-weight:bold; font-family: "Daedalus"; overflow: initial; font-size: 4em; margin: 0.5em 0; padding: 0.5em 0; text-shadow: 0 0 30px rgba(66, 162, 241, 0.8), 0 0 15px rgba(66, 162, 241, 0.6), 0 2px 5px rgba(0, 0, 0, 0.8); color:var(--content-border-color); background: linear-gradient(90deg, transparent 0%, rgba(66, 162, 241, 0.08) 50%, transparent 100%), radial-gradient(ellipse at center, rgba(26, 26, 34, 0.6), transparent 70%); border-radius: 8px; position: relative; } .mp-box h2::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.3) 30%, rgba(66, 162, 241, 0.5) 50%, rgba(66, 162, 241, 0.3) 70%, transparent); } .mp-box .welcome-message { font-size: 5.5em; margin: 0; padding: 0.4em 0; color: #fff; font-family: "Daedalus"; text-shadow: 0 0 50px rgba(66, 162, 241, 1), 0 0 35px rgba(66, 162, 241, 0.9), 0 0 20px rgba(66, 162, 241, 0.7), 0 0 10px rgba(255, 255, 255, 0.8), 0 6px 12px rgba(0, 0, 0, 1), 0 0 80px rgba(66, 162, 241, 0.6); letter-spacing: 0.08em; position: relative; animation: welcome-pulse 4s ease-in-out infinite; background: linear-gradient(90deg, transparent 0%, rgba(66, 162, 241, 0.05) 30%, rgba(66, 162, 241, 0.08) 50%, rgba(66, 162, 241, 0.05) 70%, transparent 100%); padding: 0.5em 1em; border-radius: 8px; } .mp-box .welcome-message::before { content: ''; position: absolute; top: 0; left: 5%; right: 5%; height: 2px; background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.6) 20%, rgba(255, 255, 255, 0.8) 50%, rgba(66, 162, 241, 0.6) 80%, transparent); box-shadow: 0 0 15px rgba(66, 162, 241, 1), 0 0 25px rgba(66, 162, 241, 0.6); } .mp-box .welcome-message::after { content: ''; position: absolute; bottom: 0; left: 5%; right: 5%; height: 2px; background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.5) 20%, rgba(255, 255, 255, 0.6) 50%, rgba(66, 162, 241, 0.5) 80%, transparent); box-shadow: 0 0 12px rgba(66, 162, 241, 0.8), 0 0 20px rgba(66, 162, 241, 0.5); } @keyframes welcome-pulse { 0%, 100% { text-shadow: 0 0 50px rgba(66, 162, 241, 1), 0 0 35px rgba(66, 162, 241, 0.9), 0 0 20px rgba(66, 162, 241, 0.7), 0 0 10px rgba(255, 255, 255, 0.8), 0 6px 12px rgba(0, 0, 0, 1), 0 0 80px rgba(66, 162, 241, 0.6); } 50% { text-shadow: 0 0 65px rgba(66, 162, 241, 1), 0 0 45px rgba(66, 162, 241, 1), 0 0 30px rgba(66, 162, 241, 0.8), 0 0 15px rgba(255, 255, 255, 1), 0 6px 12px rgba(0, 0, 0, 1), 0 0 100px rgba(66, 162, 241, 0.8); } } #mp-banner-container { position: relative; } #mp-box-welcome { text-align:center; position:relative; overflow:hidden; background: linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, transparent 30%, rgba(76, 87, 181, 0.12) 70%, rgba(66, 162, 241, 0.15) 100%), radial-gradient(ellipse at center, rgba(66, 162, 241, 0.18), transparent 60%), var(--background-color-transparent); box-shadow: 0 0 60px 12px rgba(66, 162, 241, 0.25), 0 0 100px 20px rgba(0, 0, 0, 0.8), inset 0 0 100px 20px rgba(66, 162, 241, 0.1), 0 0 0 1px rgba(66, 162, 241, 0.4), inset 0 0 0 1px rgba(66, 162, 241, 0.3); } #mp-welcome { display:flex; flex-flow:column nowrap; position: relative; height: 100%; font-family: var(--heading-font-family); z-index: 2; box-sizing: border-box; padding: 1em; } #mp-welcome .welcome-subtitle { height: 100%; font-family: var(--body-font-family); background: linear-gradient(135deg, rgba(66, 162, 241, 0.08), transparent 50%, rgba(76, 87, 181, 0.08)), color-mix(in srgb, var(--background-color-base) 85%, transparent); margin-left: 4px; margin-right: 4px; margin-bottom: 4px; padding: 1em; border-radius: 4px; box-shadow: inset 0 0 20px 3px rgba(66, 162, 241, 0.1), 0 2px 8px rgba(0, 0, 0, 0.4); border: 1px solid rgba(66, 162, 241, 0.2); } #mp-banner { position: absolute; width: 100%; height: 100%; filter: blur(5px); z-index: -1; background: url(/images/e/e0/MP_banner.jpg); background-size: cover; background-repeat: no-repeat; background-position: top center; } .view-dark #mp-banner { filter: blur(5px) brightness(50%); } .view-light #mp-banner { filter: blur(5px) contrast(50%); } / [[Template:MP_link]] / .mp-links { --gap:10px; font-size: 1.5em; } .mp-links > ul { display: flex; flex-flow: row wrap; justify-content: space-evenly; margin: 2px; gap:var(--gap); } .mp-main > .mp-links > ul { display: grid; grid-template-columns: repeat(3, minmax(5em, 1fr)); } @media screen and (max-width: 720px) { .mp-main > .mp-links > ul { grid-template-columns: 1fr; gap: 1em; } .mp-main > .mp-links > ul > li { margin: 0 0.5em; } } .mp-links > ul > li { display:flex; flex-flow:column nowrap; align-items:stretch; text-align: center; box-sizing:border-box; padding-top: 0.5em; border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png"); border-image-slice: 6; border-image-width: 6px; border-image-repeat: repeat repeat; } .mp-main > .mp-links > ul > li { background: linear-gradient(135deg, #42a2f125 0%, transparent 50%, #4c57b525 100%), linear-gradient(to bottom, #42a2f140, #4c57b550, #42a2f130); margin: 0 3em; box-shadow: inset 0 0 15px 3px #42a2f160, inset 0 -2px 8px 0 #4c57b540, 0 2px 12px 0 rgba(66, 162, 241, 0.2), inset 2px 0 2px -1px rgba(255, 255, 255, 0.15), inset -2px 0 2px -1px rgba(255, 255, 255, 0.15); border: 1px solid rgba(66, 162, 241, 0.3); border-radius: 4px; padding-top: 1em; padding-bottom: 0.5em; position: relative; overflow: hidden; } .mp-main > .mp-links > ul > li::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); animation: tech-shimmer 3s infinite; } @keyframes tech-shimmer { 0% { left: -100%; } 100% { left: 100%; } } .mp-main > .mp-links > ul > li:hover { background: linear-gradient(135deg, #42a2f140 0%, transparent 50%, #4c57b540 100%), linear-gradient(to bottom, #42a2f155, #4c57b565, #42a2f145); box-shadow: inset 0 0 20px 5px #42a2f180, inset 0 -2px 10px 0 #4c57b560, 0 4px 20px 2px rgba(66, 162, 241, 0.35), inset 2px 0 4px -1px rgba(255, 255, 255, 0.25), inset -2px 0 4px -1px rgba(255, 255, 255, 0.25); border-color: rgba(66, 162, 241, 0.5); } .mp-links > ul > li::before { transition: opacity 0.5s ease-in-out; z-index: 0; pointer-events: none; } .mp-links > ul > li:hover::before { opacity: 0.2; } .mp-links > ul > li:hover { background-color: #42a2f180; } .mp-links.columns-1 > ul > li {flex: max(calc(100% - var(--gap)), 5em) 1 1;} .mp-links.columns-2 > ul > li {flex: max(calc(50% - var(--gap)), 5em) 1 1;} .mp-links.columns-3 > ul > li {flex: max(calc((100% / 3) - var(--gap)), 5em) 1 1;} .mp-links.columns-4 > ul > li {flex: max(calc(25% - var(--gap)), 5em) 1 1;} .mp-links.columns-5 > ul > li {flex: max(calc(20% - var(--gap)), 5em) 1 1;} .mp-links.columns-6 > ul > li {flex: max(calc((100% / 6) - var(--gap)), 5em) 1 1;} .mp-links.columns-7 > ul > li {flex: max(calc((100% / 7) - var(--gap)), 5em) 1 1;} .mp-links > ul > li { cursor: pointer; } .mp-links > ul > li > a { display: flex; align-items: center; justify-content: center; height:100%; flex:1 1 auto; box-sizing:border-box; padding:5px; pointer-events: auto; } .mp-links > ul > li > a:first-child { height:100%; } .mp-links > ul > li > a:last-child:not(:first-child) { height:unset; } .mp-links.stretch, .mp-links.stretch > ul { height:100%; } .mp-links.side-image li { flex-flow:row nowrap; } / MP icon lists / .mp-iconlists { display: flex; flex-flow: wrap; gap: 5px 20px; } .mp-iconlists > .mp-iconlist { flex: 1; min-width: fit-content; } .mp-iconlist { font-size: 4em; } .mp-iconlist > h3 { padding: 0; margin: 0; } .mp-iconlist > ul { list-style: none; margin: 0; } / MP gallery / .mp-box ul.gallery { display: flex; flex-flow: wrap; gap: 5px 10px; align-items: flex-end; justify-content: space-evenly; margin: 0; } .mp-box ul.gallery .gallerytext { margin-top: 1em; padding: 0; background-color: var(--background-color-neutral-subtle); } .mp-box .gallerybox:hover .gallerytext { background-color: color-mix(in srgb, var(--content-link-color) 20%, transparent); } .mp-box ul.gallery .gallerytext > p { margin: 0; } .mp-box ul.gallery .gallerytext a { display: block; padding: .5em 0; } /********************** * End main page layout * **********************/ /********************* * Start DRUID infoboxes * **********************/ .druid-container { --druid-background-color: var(--background-color-base); --druid-secondary-background-color: var(--color-progressive); --druid-secondary-background-label-color: var(--content-link-label-color); --druid-tertiary-background-color: var(--background-color-neutral-subtle); --druid-border-color: var(--content-border-color); --druid-link-color: var(--content-link-color); --druid-link-label-color: var(--content-link-label-color); } .npc-infobox { border-radius:5px; border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png"); border-image-slice: 6; border-image-width: 6px; border-image-repeat: repeat; position: relative; background: linear-gradient(135deg, rgba(66, 162, 241, 0.05) 0%, transparent 40%, rgba(76, 87, 181, 0.05) 100%), radial-gradient(ellipse at top, rgba(66, 162, 241, 0.08), transparent 60%), var(--druid-background-color); box-shadow: 0 0 40px 8px rgba(66, 162, 241, 0.15), inset 0 0 60px 10px rgba(66, 162, 241, 0.05), 0 0 0 1px rgba(66, 162, 241, 0.2); overflow: hidden; } .npc-infobox::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.4) 20%, rgba(66, 162, 241, 0.8) 50%, rgba(66, 162, 241, 0.4) 80%, transparent); box-shadow: 0 0 15px rgba(66, 162, 241, 0.8); animation: data-scan 3s linear infinite; } @keyframes data-scan { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } } .npc-infobox::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.3) 30%, rgba(66, 162, 241, 0.6) 50%, rgba(66, 162, 241, 0.3) 70%, transparent); } .druid-container { background: var(--druid-background-color); float: right; clear: right; margin: 0 0 1em 1em; padding: 0.5em; width:100%; max-width:26em; box-sizing: border-box; border-collapse: separate; } @media screen and (max-width: 720px) { .druid-container { float: none; margin: 0.5rem auto; } } .druid-main-images-file, .druid-main-image { text-align:center; } .druid-infobox .druid-title, .druid-infobox .druid-section { text-align:center; padding:1px; border-radius: 0.1em; } .npc-infobox .druid-title { background: linear-gradient(135deg, rgba(66, 162, 241, 0.25) 0%, rgba(76, 87, 181, 0.2) 40%, rgba(66, 162, 241, 0.15) 80%, rgba(66, 162, 241, 0.25) 100%), radial-gradient(ellipse at center, rgba(66, 162, 241, 0.2), transparent 70%), linear-gradient(90deg, color-mix(in srgb, var(--druid-secondary-background-color) 80%, transparent) 0%, color-mix(in srgb, var(--druid-secondary-background-color) 70%, transparent) 100%); color: var(--druid-secondary-background-label-color); text-shadow: 0 0 20px rgba(66, 162, 241, 1), 0 0 15px rgba(66, 162, 241, 0.8), 0 0 8px rgba(66, 162, 241, 0.6), 0 2px 4px rgba(0, 0, 0, 0.9); font-size: 1.3em; letter-spacing: 0.08em; line-height: 1; position: relative; box-shadow: inset 0 0 30px 5px rgba(66, 162, 241, 0.15), 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(66, 162, 241, 0.4); border-radius: 2px; padding: 0.5em 0.8em; } .npc-infobox .druid-title::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.6) 20%, rgba(66, 162, 241, 1) 50%, rgba(66, 162, 241, 0.6) 80%, transparent); box-shadow: 0 0 10px rgba(66, 162, 241, 0.8); } .npc-infobox .druid-title::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.4) 30%, rgba(66, 162, 241, 0.8) 50%, rgba(66, 162, 241, 0.4) 70%, transparent); box-shadow: 0 0 8px rgba(66, 162, 241, 0.6); } .npc-infobox .druid-section { background: linear-gradient(90deg, color-mix(in srgb, var(--druid-secondary-background-color) 80%, transparent) 0%, color-mix(in srgb, var(--druid-secondary-background-color) 60%, transparent) 100%), linear-gradient(135deg, rgba(66, 162, 241, 0.1), transparent 50%); color:var(--druid-secondary-background-label-color); text-shadow: 0 0 15px rgba(66, 162, 241, 0.8), 0 0 8px rgba(66, 162, 241, 0.5), 0 2px 4px rgba(0, 0, 0, 0.8); position: relative; box-shadow: inset 0 0 20px 3px rgba(66, 162, 241, 0.1), 0 2px 8px rgba(0, 0, 0, 0.5); } .npc-infobox .druid-section::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.6) 50%, transparent); box-shadow: 0 0 6px rgba(66, 162, 241, 0.4); } .druid-infobox .druid-section { font-size: 1.25em; font-weight: 500; } .druid-label { font-weight:bold; text-align: right; box-sizing: border-box; } .druid-row > .druid-label { width: 40%; flex-shrink: 0; } .druid-row > .druid-label, .druid-row > .druid-data { padding-inline: 0.3em; } .druid-main-image, .druid-main-images { padding:5px; } .druid-main-image img, .druid-main-images img { max-width:100%; height:auto; } .druid-main-images-labels { display:flex; flex-direction:row; flex-wrap:wrap; justify-content: space-evenly; margin:0.25em; gap:0.25em; } .druid-main-images-label { cursor:pointer; flex:1 1 auto; text-align:center; transition:.1s ease-in; outline:1px solid var(--druid-link-color); } .druid-main-images-label.focused { background:var(--druid-link-color); color:var(--druid-link-label-color); } .druid-main-images-label:not(.focused):hover { background:rgba(var(--druid-link-color--rgb), 0.25); } .druid-toggleable-data:not(.focused), .druid-main-images-file:not(.focused), .druid-toggleable-heading:not(.focused) { display:none; } .druid-row:not(:has(.druid-grid)):has(.druid-toggleable-data-empty.focused) { display:none; } .druid-section:has(.druid-toggleable-heading-empty.focused) { display:none; } .druid-grid { display:grid; gap: 0.3em; padding: 0.35em; } .druid-grid-item { background:var(--druid-tertiary-background-color); padding:0.25em; border:1px solid rgba(var(--druid-border-color--rgb), 0.5); border-radius: 2px; } .druid-grid-item > .druid-label, .druid-grid-item > .druid-data { text-align: center; } .druid-section-container > .druid-collapsible { display: flex; justify-content: space-between; align-items: center; } .druid-collapsed { display:none!important; } .druid-collapsible { cursor:pointer; position:relative; } .druid-collapsible::after { content:'\2013'; display:block; position:absolute; right:10px; font-size:20px; font-weight:bold; color:var(--druid-secondary-background-label-color); } .druid-collapsible-collapsed::after { content:'+'; } .druid-section-container:has(.druid-toggleable-data-empty.focused):not(:has(.druid-toggleable-data-nonempty.focused)):not(:has(.druid-data-nonempty)) { display: none; } body .has-worn-variant .image-base { display: block !important; } body .has-worn-variant .image-worn { display: none !important; } body .has-worn-variant.is-worn-active .image-base { display: none !important; } body .has-worn-variant.is-worn-active .image-worn { display: block !important; } .image-base img, .image-worn img { display: block !important; margin: 0 auto !important; max-width: 100%; height: auto; } .worn-toggle-button { display: inline-block !important; margin-top: 10px; padding: 5px 15px; background: #333 !important; color: #fff !important; border: 1px solid #666 !important; border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: bold; text-transform: uppercase; } .is-worn-active .worn-toggle-button { background: #833 !important; } /************************************* Div support *************************************/ div.druid-row { display:flex; margin-block: 1px; } div.druid-row + div.druid-row { margin-top: 0; } .npc-infobox div.druid-row { background: linear-gradient(90deg, rgba(66, 162, 241, 0.02), transparent 60%); } .npc-infobox div.druid-row > .druid-label { background: linear-gradient(90deg, color-mix(in srgb, var(--druid-tertiary-background-color) 80%, #42a2f1) 0%, var(--druid-tertiary-background-color) 100%); text-shadow: 0 0 8px rgba(66, 162, 241, 0.4); border-right: 1px solid rgba(66, 162, 241, 0.2); } .npc-infobox div.druid-row > .druid-data { text-shadow: 0 0 6px rgba(66, 162, 241, 0.3); } .druid-infobox #toc { display:none; } /********************* * End DRUID infoboxes * **********************/ /* Miscellaneous */ .responsive-image { max-width:100%; height:auto; } .view-dark .invert-on-dark, .view-light .invert-on-light { filter:invert(100%); } @media screen and (min-width:720px) { .mobileonly { display:none; } } @media screen and (max-width:720px) { .nomobile { display:none; } } /************************ * Start Modular Templates * ************************/ /***** [[Template:Ambox]] *****/ .ambox { border: 1px solid var(--content-border-color); border-left: 10px solid var(--ambox-color); border-radius: 2px; display: flex; align-items: center; gap: .6em; margin: 1em 0; padding: 3px .6em; background-color: var(--background-color-neutral-subtle); box-shadow: 2px 2px 5px 0px #0002; } @media (min-width: 720px) { .ambox { margin-inline: 10%; } } .ambox.tiny { padding: .04rem .5em; margin-inline: 0; width: fit-content; } .ambox + .ambox { margin-top: -.6em; } .ambox-content p { margin: .15em 0; } .ambox-title { font-weight: bold; } /***** [[Template:Hatnote]] *****/ .hatnote { padding: 1px 0 1px 1.6em; margin-bottom: 0.5em; font-style: italic; border-top: 1px solid var(--border-color-subtle); border-bottom: 1px solid var(--border-color-subtle); } .hatnote.icon { padding-left: 0; } /***** [[Template:Spoiler]] ******/ .spoiler-content { background-color: rgb(127, 127, 127); transition: all 0.3s; cursor: pointer; } .spoiler-content > span { opacity: 0; transition: all 0.3s; } .spoiler-content > { pointer-events:none; } .spoiler-content.show > * { pointer-events:unset; } .spoiler-content.show { background-color: rgba(127, 127, 127, 0); } .spoiler-content.show > span { opacity: 1; } /******* [[Template:Link icon]] *****/ .link-icon { display: inline-flex; align-items: center; height: var(--link-icon-line-height); vertical-align: bottom; } .link-icon .regular { align-self: center; } .link-icon .regular a { display: flex; } .link-icon .regular img { height: var(--link-icon-size); max-width: var(--link-icon-size); } .link-icon .fallback { outline: 1px solid var(--color-base); border-radius: 50%; text-align: center; width: var(--link-icon-size); line-height: var(--link-icon-size); } .link-icon.notext .fallback { display: inline-block; } .link-icon.notext { display: inline; } /***** [[Template:Quote]] *****/ .quote { background: var(--background-color-neutral-subtle); border-radius: 5px; border: 2px solid var(--content-border-color); margin: .5em 0; padding: .5em; } .quote .block { display: block; } .quote .title { font-size: large; font-weight: bold; } .quote .content { font-style: italic; } .quote .author { font-weight: bold; text-align: end; } .quote .marks-wrapper { display: flex; gap: 5px; } .quote .marks-wrapper::before, .quote .marks-wrapper::after { font-size: 100px; line-height: 0px; } .quote .marks-wrapper::before { content: "\201C"; margin-top: 40px; } .quote .marks-wrapper::after { content: "\201D"; align-self: end; margin-bottom: -10px; } /********************** * End Modular Templates * ************************/ .button-expand-header { margin-top: 0.5em; width: 100%; padding: 14px 18px; padding-right: 60px; background: var(--background-color-base); color: var(--color-progressive); border: 2px solid var(--color-progressive); cursor: pointer; font-family: 'Courier New', monospace; font-size: 16px; font-weight: 700; position: relative; transition: all 0.2s ease; box-shadow: inset 0 0 0 2px #0f0f0f, inset 0 0 20px #42a2f180; } .button-expand-header:hover { background: var(--background-color-transparent); box-shadow: inset 0 0 0 2px #0f0f0f, inset 0 0 30px #4c57b580, 0 0 10px #4c57b5a0; } .button-expand-header:active { border-radius: 20px; transition: 0.2s; } .button-expand-header::before { content: '[ + ]'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); } .button-expand-header:has(+ .mw-collapsible:not(.mw-collapsed))::before { content: '[ - ]'; } .button-expand-header > span:not([typeof]) { cursor: pointer; display: inline-block; position: relative; transition: 0.2s; } @media screen and (max-width:720px) { h2.mw-customtoggle > span:not([typeof])::after { display: none; } } a.tabber__tab { margin-top: 0.7em; font-size: 2em; margin-left: 0.6em; margin-bottom: 0.7em; } header.tabber__header { margin-bottom: 0.5em; margin-top: 0.5em; } a.tabber__tab[aria-selected="true"]{ background: var(--background-color-transparent); color: var(--color-progressive); border: 2px solid var(--color-progressive); box-shadow: inset 0 0 0 2px #0f0f0f, inset 0 0 20px #42a2f180; } @media (hover: hover) { .tabber__tab:hover { box-shadow: inset 0 0 0 2px #0f0f0f, inset 0 0 30px #4c57b580, 0 0 10px #4c57b5a0; background-color: var(--background-color-base); } } .tabber__panel > div.mw-heading.mw-heading2 > h2 { border-bottom: 1px solid var(--color-progressive) !important; padding-bottom: 0.5em; text-shadow: 0 0 20px black; } .tabber__panel > div > h2 > span { text-shadow: 0 0 10px black; color: var(--content-link-color); margin-left: 0.1em; padding: 0 0.5em 0; } header.tabber__header { box-shadow: none; } .tabber__header__prev, .tabber__header__next { background: linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, rgba(76, 87, 181, 0.12) 100%), rgba(26, 26, 34, 0.8); border: 1px solid rgba(66, 162, 241, 0.5); color: var(--color-base); padding: 0.6em 1em; cursor: pointer; transition: all 0.3s ease; box-shadow: inset 0 0 20px 3px rgba(66, 162, 241, 0.1), 0 2px 10px rgba(66, 162, 241, 0.2); border-radius: 4px; position: relative; backdrop-filter: blur(3px); } .tabber__header__prev::before, .tabber__header__next::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.6) 30%, rgba(66, 162, 241, 0.9) 50%, rgba(66, 162, 241, 0.6) 70%, transparent); box-shadow: 0 0 8px rgba(66, 162, 241, 0.6); } .tabber__header__prev:hover, .tabber__header__next:hover { background: linear-gradient(135deg, rgba(66, 162, 241, 0.25) 0%, rgba(76, 87, 181, 0.2) 100%), rgba(26, 26, 34, 0.9); border-color: rgba(66, 162, 241, 0.7); box-shadow: inset 0 0 30px 5px rgba(66, 162, 241, 0.15), 0 4px 15px rgba(66, 162, 241, 0.3), 0 0 25px rgba(66, 162, 241, 0.2); transform: scale(1.05); text-shadow: 0 0 10px rgba(66, 162, 241, 0.8), 0 0 5px rgba(66, 162, 241, 0.5); } .tabber__header .tabber__header__prev::after, .tabber__header .tabber__header__next::after { display: block; width: inherit; height: 100%; background-position: center; background-repeat: no-repeat; background-size: 1em; filter: drop-shadow(0 0 4px rgba(66, 162, 241, 0.6)); } @media screen and (max-width: 720px) { .button-expand-header { background-color: #8dbec280; box-shadow: 0 0 40px var(--color-progressive); } .button-expand-header > span:after { position: relative; font-size: 1em; opacity: 1; left: 0; bottom: 0; text-align: inherit; } } .button-expand-header > img { padding: 0 1em 0; } .button-expand-header:hover > span:after{ opacity: 1; font-size: 0.75em; } .class-box { background: linear-gradient(135deg, rgba(66, 162, 241, 0.06) 0%, transparent 50%, rgba(76, 87, 181, 0.06) 100%), linear-gradient(to bottom, rgba(26, 26, 34, 0.95), rgba(26, 26, 34, 0.98)); box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.8), inset 0 0 40px 5px rgba(66, 162, 241, 0.08), 0 0 0 1px rgba(66, 162, 241, 0.25); padding: 0 0.5em 0; border-radius: 6px; position: relative; overflow: hidden; } .class-box::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.4) 30%, rgba(66, 162, 241, 0.6) 50%, rgba(66, 162, 241, 0.4) 70%, transparent); } / =============================== MP elements =============================== / .main-page-links { font-weight: bold; text-shadow: 0 0 6px #000000; margin: 1em; } .mp-box pre { font-family: var(--body-font-family); color: var(--color-progressive); border-radius:5px; border-image-source: var(--border-image-base); border-image-slice: 6; border-image-width: 6px; border-image-repeat: repeat repeat; text-align: center; } / =============================== DRUID Boss Infoboxes =============================== / / UNHOLY / .druid-data-Unholy a, .druid-data-Unholy a:visited { color: black; text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white; } / VOIDBOUND / .druid-data-Voidbound a, .druid-data-Voidbound a:visited { color: #e48cff; text-shadow: 0 0 4px #e48cff, 0 0 8px #b94dff, 0 0 12px #7a1d9a; } / BLOODSHOT / .druid-data-Bloodshot a, .druid-data-Bloodshot a:visited { color: #d23c3c; text-shadow: 0 0 4px #d23c3c, 0 0 8px #8b0000, 0 0 12px #ff4d4d; } / ROYAL / .druid-data-Royal a, .druid-data-Royal a:visited { color: #a86dff; text-shadow: 0 0 4px #a86dff, 0 0 8px #6a00ff, 0 0 12px #330066; } / GILDED / .druid-data-Gilded a, .druid-data-Gilded a:visited { color: #ffb84d; text-shadow: 0 0 4px #ffb84d, 0 0 8px #ff8000, 0 0 12px #cc6600; } / IRRADIATED / .druid-data-Irradiated a, .druid-data-Irradiated a:visited { color: #4dff4d; text-shadow: 0 0 4px #4dff4d, 0 0 8px #00cc00, 0 0 12px #006600; } / COMPANION / .druid-data-Companion a, .druid-data-Companion a:visited { color: #ffd700; text-shadow: 0 0 4px #ffd700, 0 0 8px #ffaa00, 0 0 12px #cc8400; } / RUNES / .druid-data-Rune a, .druid-data-Rune a:visited { color: #bfbfbf; text-shadow: 0 0 4px #bfbfbf, 0 0 8px #666, 0 0 12px #333; } .druid-row[data-druid-section-row="Loot"] div { padding-top: 0.75em; padding-bottom: 0.5em; flex-wrap: nowrap; flex-direction: row; display: block; justify-content: space-between; align-items: center; text-align: left; width: 100%; } div[data-druid-section="Loot"] + div[data-druid-section-row="Loot"] div { border-top: none; } .druid-data .image { margin-left: 0%; } .loot-category-header { display: flex; align-items: center; gap: 0.5em; padding: 0.5em 0.75em; margin: 0.75em 0 0.3em 0; background: linear-gradient(90deg, rgba(66, 162, 241, 0.12) 0%, transparent 100%), rgba(26, 26, 34, 0.4); border-left: 2px solid rgba(66, 162, 241, 0.5); border-radius: 3px; box-shadow: inset 0 0 15px 2px rgba(66, 162, 241, 0.05), 0 1px 4px rgba(0, 0, 0, 0.4); } .loot-category-title { font-weight: 600; font-size: 0.95em; color: var(--color-base); text-shadow: 0 0 6px rgba(66, 162, 241, 0.4), 0 1px 2px rgba(0, 0, 0, 0.8); letter-spacing: 0.02em; } .loot-item-row { display: flex; justify-content: space-between; align-items: center; padding: 0.3em 0.75em; margin: 0.15em 0; background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.02) 50%, transparent); border-radius: 2px; transition: all 0.2s ease; } .loot-item-row:hover { background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.06) 50%, transparent); padding-left: 1em; } .boss-percent { color: var(--content-border-color); text-shadow: 0 0 8px rgba(66, 162, 241, 0.5), 0 0 4px rgba(66, 162, 241, 0.3), 0 2px 4px rgba(0, 0, 0, 0.8); font-weight: bold; font-size: 1.05em; } .loot-data-infobox { display: flex; align-items: center; gap: 0.5em; } .item-infobox div[data-druid-section] > .druid-section { font-weight: bolder; text-shadow: 0px 2px black; } .druid-infobox .druid-title { display: flex; align-items: center; justify-content: center; color: var(--content-border-color); font-family: "Daedalus", sans-serif; line-height: 1em; font-weight: 1000; font-size: 3em; min-height: 2.2em; flex-wrap: wrap; text-shadow: 0 0 20px black; } .boss-infobox-subtitle { font-weight: 500; font-size: 0.75em; display: inline-block; white-space: normal; word-break: break-word; width: 100%; position: relative; color: rgba(255, 255, 255, 0.95); text-shadow: 0 0 10px rgba(66, 162, 241, 0.6), 0 0 5px rgba(66, 162, 241, 0.4), 0 2px 4px rgba(0, 0, 0, 0.8); animation: subtitle-pulse 4s ease-in-out infinite; background: linear-gradient(90deg, rgba(66, 162, 241, 0.05) 0%, rgba(66, 162, 241, 0.08) 50%, rgba(66, 162, 241, 0.05) 100%); background-size: 200% 100%; animation: subtitle-scan 6s linear infinite, subtitle-pulse 4s ease-in-out infinite; padding: 0.3em 0.5em; border-radius: 2px; letter-spacing: 0.03em; } .boss-infobox-subtitle::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; background: linear-gradient(180deg, transparent, rgba(66, 162, 241, 0.8) 50%, transparent); box-shadow: 0 0 6px rgba(66, 162, 241, 0.8); animation: subtitle-indicator 2s ease-in-out infinite; } @keyframes subtitle-pulse { 0%, 100% { text-shadow: 0 0 10px rgba(66, 162, 241, 0.6), 0 0 5px rgba(66, 162, 241, 0.4), 0 2px 4px rgba(0, 0, 0, 0.8); } 50% { text-shadow: 0 0 15px rgba(66, 162, 241, 0.9), 0 0 8px rgba(66, 162, 241, 0.6), 0 0 4px rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.8); } } @keyframes subtitle-scan { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } } @keyframes subtitle-indicator { 0%, 100% { opacity: 0.4; box-shadow: 0 0 6px rgba(66, 162, 241, 0.6); } 50% { opacity: 1; box-shadow: 0 0 10px rgba(66, 162, 241, 1); } } / =============================== Dungeon Page CSS =============================== / .dungeon-page-box { background-color: transparent; box-shadow: none; transition: 0.5s; padding: 1em; position: relative; padding: 0 1em; border-radius: 0px; } .dungeon-page-smaller-box li { display: inline-block; width: 18%; margin: 0 1% 1% 0; vertical-align: top; text-align: center; background: linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 60%), linear-gradient(to bottom, rgba(26, 26, 34, 0.9), rgba(26, 26, 34, 0.95)); border-radius: 4px; border: 1px solid rgba(66, 162, 241, 0.2); box-shadow: inset 0 0 20px 3px rgba(66, 162, 241, 0.05), 0 2px 10px rgba(0, 0, 0, 0.5); transition: all 0.3s ease; position: relative; overflow: hidden; } .dungeon-page-smaller-box li::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.4), transparent); } .dungeon-page-smaller-box a { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0.5em; } .dungeon-page-smaller-box li:hover, .mp-links.dungeon-page-smaller-box > ul > li:hover { background: linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, transparent 60%), linear-gradient(to bottom, rgba(26, 26, 34, 0.95), rgba(26, 26, 34, 1)); border-color: rgba(66, 162, 241, 0.4); box-shadow: inset 0 0 25px 5px rgba(66, 162, 241, 0.1), 0 4px 15px rgba(66, 162, 241, 0.3), 0 0 20px rgba(66, 162, 241, 0.2); transform: translateY(-2px); } .pre-dungeon { max-width: 100%; width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; display: block; } .dungeon-enemies { display: flex; flex-wrap: wrap; max-width: 100%; justify-content: center; } .dungeon-enemies .druid-container { margin: 2%; } .tipstricks { display: flex; max-width: 100%; } .pre-dungeon p { margin: 1em 0; padding: 0.9em 1.2em 0.9em 1.5em; border-radius: 3px 12px 8px 3px; box-shadow: -2px 0 0 0 rgba(66, 162, 241, 0.4), 0 4px 15px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(66, 162, 241, 0.03); display: block; width: auto; background: linear-gradient(90deg, rgba(66, 162, 241, 0.06) 0%, rgba(26, 26, 34, 0.8) 15%, rgba(26, 26, 34, 0.6) 85%, transparent 100%); border-left: 2px solid rgba(66, 162, 241, 0.5); color: var(--color-base); line-height: 1.6; position: relative; backdrop-filter: blur(2px); } .pre-dungeon p::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, rgba(66, 162, 241, 0.8) 0%, rgba(66, 162, 241, 0.3) 50%, rgba(66, 162, 241, 0.8) 100%); opacity: 0.6; } .dlog { margin-bottom: 2%; background: linear-gradient(to right, rgba(31, 35, 77, 0.95) 0%, rgba(31, 35, 77, 0.9) 70%, rgba(31, 35, 77, 0) 100%), linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 50%); padding: 0.75em; border: 3px solid; border-image: linear-gradient(to right, rgba(66, 162, 241, 0.8) 0%, rgba(71, 75, 117, 1) 30%, rgba(71, 75, 117, 0.8) 70%, rgba(71, 75, 117, 0) 100%) 1 stretch; border-right: none; border-top: none; border-bottom: none; min-width: 20%; max-width: 70%; width: fit-content; text-wrap: balance; font-size: 2em; position: relative; box-shadow: -3px 0 15px rgba(66, 162, 241, 0.3), inset 2px 0 20px rgba(66, 162, 241, 0.1), 0 4px 12px rgba(0, 0, 0, 0.5); border-radius: 0 4px 4px 0; backdrop-filter: blur(3px); } .dlog::before { content: url("/wiki/Special:Redirect/file/DNexus.png") " " url("/wiki/Special:Redirect/file/Dlog-text.png"); display: inline-block; background: linear-gradient(to right, rgba(66, 162, 241, 0.25) 0%, rgba(66, 162, 241, 0.15) 50%, transparent 100%), linear-gradient(135deg, rgba(76, 87, 181, 0.2), transparent 60%); padding: 0.5em 0.8em; border-radius: 3px 0 0 3px; margin-right: 12px; box-shadow: inset -2px 0 10px rgba(66, 162, 241, 0.3), 2px 0 8px rgba(66, 162, 241, 0.2); border-right: 1px solid rgba(66, 162, 241, 0.4); position: relative; } .dlog::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, rgba(66, 162, 241, 0.8) 0%, rgba(66, 162, 241, 1) 50%, rgba(66, 162, 241, 0.8) 100%); box-shadow: 0 0 8px rgba(66, 162, 241, 0.8), 0 0 15px rgba(66, 162, 241, 0.5); animation: dlog-pulse 3s ease-in-out infinite; } @keyframes dlog-pulse { 0%, 100% { opacity: 0.7; box-shadow: 0 0 8px rgba(66, 162, 241, 0.8), 0 0 15px rgba(66, 162, 241, 0.5); } 50% { opacity: 1; box-shadow: 0 0 12px rgba(66, 162, 241, 1), 0 0 20px rgba(66, 162, 241, 0.7); } } .dlog p { position: relative; color: #f1f1f1; font-family: "Daedalus", Sans-Serif; font-size: 1em; line-height: 1.3; text-shadow: 0 0 8px rgba(66, 162, 241, 0.8), 0 0 4px rgba(66, 162, 241, 0.6), 0 2px 4px rgba(0, 0, 0, 0.9); word-wrap: break-word; padding: 0.8em; padding-top: 0.5em; background: linear-gradient(90deg, rgba(66, 162, 241, 0.03), transparent 80%); border-radius: 2px; } @media only screen and (max-width: 768px) { .daedalus-log { display: none; } } / =============================== Skill Tree =============================== / /* * ============================== * Tooltips Gadget (Base Styles) * ============================== / .main-tooltip { border-radius:5px; border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png"); border-image-slice: 6; border-image-width: 6px; border-image-repeat: repeat repeat; box-shadow: 0 0 10px black; margin-bottom: 5px; padding: 1em 1em; background-color: #312b38; } #tooltip-wrapper { padding: 0.3em; } .has-redlinks, .tooltip-loading, .advanced-tooltip .tooltip-contents { display: none; } .tooltips-init-complete { cursor: help; } .main-tooltip img { vertical-align: middle; } .advanced-tooltip img { box-shadow: 0 0 10px #000000; } .advanced-tooltip .imhoveringit { position: relative; display: inline-block; } .advanced-tooltip .tooltip-base-image, .advanced-tooltip .tooltip-hover-image { transition: opacity 0.2s ease; } .advanced-tooltip .tooltip-hover-image { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; } .advanced-tooltip .tooltip-base-image { opacity: 1; } .advanced-tooltip:hover .tooltip-base-image { opacity: 0; } .advanced-tooltip:hover .tooltip-hover-image { opacity: 1; pointer-events: auto; } .tabber__panel { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tabber__panel::-webkit-scrollbar { display: none; } /* * ============================== * Skill Tree Layout * ============================== / .skill-tree { display: flex; flex-direction: column; align-items: center; row-gap: 15px; / vertical spacing between rows / } / Rows / .skill-tree .row { display: flex; justify-content: center; } .skill-tree .row-1 { gap: 0; } .skill-tree .row-2 { gap: 40px; } .skill-tree .row-3 { gap: 20px; } .skill-tree .wide-gap { gap: 80px; } / For Trap tree rows / / Nodes / .node { display: inline-block; width: 80px; / keeps nodes aligned / text-align: center; } / Node Title Style / .skill-title { font-weight: bold; color: #fca801; text-shadow: 2px 2px 8px black; border-bottom: 1px solid #fca801; padding-bottom: 0.5em; } .main-tooltip p { color: #54fc55; } .main-tooltip span { color: #54fcfc; text-shadow: 0 0 2px #54fcfc; } / item pages / .display-items { display: flex; flex-wrap: wrap; } a.tabber__tab { font-size: 2em; text-shadow: 1px 1px 12px black; } .druid-main-images-label { font-size: 1.2em; } .druid-main-images-label.focused { box-shadow: 0 0 20px var(--druid-link-color); } .hoverbox:hover { background-color: #1a1a22E0; box-shadow: 0 0 30px 30px var(--background-color-base); border-radius: 0 0 15px 15px; border-top: 0.1em solid var(--color-progressive--hover); transition: 0.4s; } .hoverbox { background-color: transparent; box-shadow: none; transition: 0.5s; padding: 0 1em 1em; margin: 1em 0 1em -0.5em; position: relative; z-index: 0; border-top: 0.1em solid var(--color-progressive); display: flow-root; } .hoverbox > div > h3 > a { border-bottom: 2px solid currentColor; background: no-repeat cover; } .hoverbox > div { overflow: visible; } .dungeon-clear { max-width: 100%; overflow: visible; } .lore { max-width: 100%; overflow: visible; } .mp-main { background-size: 100% 100%; background-repeat: no-repeat; aspect-ratio: 16 / 9; padding-top: 1em; padding-bottom: 1em; } .class-rarities { display:flex; flex-wrap: wrap; flex-direction: column; align-items: center; } .class-rarities > div { margin: 1em 0 1em; padding: 1em 1.5em; border-radius: 8px; position: relative; background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, transparent 50%), linear-gradient(to right, transparent, rgba(255, 255, 255, 0.03), transparent); backdrop-filter: blur(2px); border: 1px solid rgba(255, 255, 255, 0.1); } .class-rarities > div::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80%; height: 2px; background: linear-gradient(90deg, transparent, currentColor 50%, transparent); opacity: 0.3; filter: blur(1px); } .class-rarities > div > p > img { margin: 0 2em 0 0; border-radius: 100px; background: #1a1a2280; box-shadow: 0 0 10px black; } .class-rarities > div > p > span > img { text-shadow: 0 0 10px black; } .class-rarities > div > p > a { text-shadow: 0 0 10px black; } .class-irradiated { box-shadow: 0 0 20px #4dff4d; background-color: #4dff4d80; } .class-gilded { box-shadow: 0 0 20px #ffb84d; background-color: #ffb84d80; } .class-royal{ box-shadow: 0 0 20px #a86dff; background-color: #a86dff80; } .class-bloodshot { box-shadow: 0 0 20px #d23c3c; background-color: #d23c3c80; } .class-voidbound{ box-shadow: 0 0 20px #e48cff; background-color: #e48cff80; } .class-unholy { box-shadow: 0 0 20px black; background-color: #00000080; } div.class-rarities > div > p > a { font-weight: bold; } / TABLES / .wikitable td, .wikitable th { border: none !important; } .wikitable { margin: 0; } td > div.mw-collapsible > button { margin: 1.5em; padding: 1.2em; background-color: #8dbec280; box-shadow: 0 0 20px #8dbec2FF; border-radius: 30px; } .wikitable td, .wikitable th { font-size: 1.1em; } td > div.mw-collapsible > button > span.mw-collapsible-text { text-shadow: 0 0 4px black; } td > div.mw-collapsible > button > span.mw-collapsible-text:hover { text-decoration: none; } td > div.mw-collapsible > button.mw-collapsible-toggle-default::after { content: ''; } td > div.mw-collapsible > button.mw-collapsible-toggle-default::before { content: ''; } / Inline Image Template / .inline-image-image { position: relative; display: inline-block; } .inline-image-image > p > span > span > img { box-shadow: 0 0 30px 5px rgba(66, 162, 241, 0.3), 0 4px 20px rgba(0, 0, 0, 0.8), inset 0 0 40px 5px rgba(66, 162, 241, 0.05); border-radius: 8px; border: 2px solid rgba(66, 162, 241, 0.5); background: linear-gradient(135deg, rgba(66, 162, 241, 0.02), transparent 50%); padding: 4px; transition: all 0.3s ease; } .inline-image-image > p > span > span > img:hover { box-shadow: 0 0 40px 8px rgba(66, 162, 241, 0.5), 0 6px 25px rgba(0, 0, 0, 0.9), inset 0 0 50px 8px rgba(66, 162, 241, 0.08); border-color: rgba(66, 162, 241, 0.7); transform: translateY(-2px); } .inline-image-caption { margin-top: 0.5em; position: relative; } .inline-image-caption > p { background: linear-gradient(90deg, rgba(66, 162, 241, 0.12) 0%, rgba(26, 26, 34, 0.8) 15%, rgba(26, 26, 34, 0.6) 85%, transparent 100%); border-left: 3px solid rgba(66, 162, 241, 0.6); border-radius: 3px; padding: 0.6em 1em; margin: 0; box-shadow: inset 0 0 20px 2px rgba(66, 162, 241, 0.05), 0 2px 8px rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px); } .inline-image-caption > p > span { font-weight: 600; font-size: 0.95em; color: var(--color-base); text-shadow: 0 0 8px rgba(66, 162, 241, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8); letter-spacing: 0.02em; } .inline-image-caption > p > span::before { content: '❖ '; color: rgba(66, 162, 241, 0.8); text-shadow: 0 0 10px rgba(66, 162, 241, 0.9), 0 0 5px rgba(66, 162, 241, 0.6); margin-right: 0.3em; } .inline-image-caption > p::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, rgba(66, 162, 241, 0.8) 0%, rgba(66, 162, 241, 0.4) 50%, rgba(66, 162, 241, 0.8) 100%); opacity: 0.7; } / dynamic gif display css ONLY TOUCH IF YOU KNOW WHAT YOU ARE DOING / .dynamic-gif-container { padding-top: 8em; width: fit-content; max-width: 100%; margin-right: 1em; margin-bottom: 1em; margin-left: 1em; z-index: 100; transition: all 0.3s ease; display: block !important; visibility: visible !important; clear: both; } / Override for flexbox container / .gif-tabber-display-container .dynamic-gif-container { padding-top: 0; margin: 0; clear: none; } .dynamic-gif-container.expanded .gif-display-area { max-height: none; height: auto; opacity: 1; padding: 15px; overflow: visible; } .gif-display-area { background: linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 40%, rgba(76, 87, 181, 0.08) 100%), radial-gradient(ellipse at center, rgba(66, 162, 241, 0.12), transparent 60%), rgba(26, 26, 34, 0.95); border-radius: 6px; overflow: visible; height: auto; min-height: auto; opacity: 1; padding: 12px; transition: all 0.3s ease; box-shadow: 0 0 30px 5px rgba(66, 162, 241, 0.2), inset 0 0 40px 8px rgba(66, 162, 241, 0.05), 0 4px 20px rgba(0, 0, 0, 0.6); border: 1px solid rgba(66, 162, 241, 0.4); display: block !important; visibility: visible !important; position: relative; backdrop-filter: blur(4px); width: fit-content; } .gif-display-area::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.6) 20%, rgba(66, 162, 241, 0.9) 50%, rgba(66, 162, 241, 0.6) 80%, transparent); box-shadow: 0 0 10px rgba(66, 162, 241, 0.8); } .gif-header { display: flex; justify-content: center; align-items: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--color-progressive); } .gif-title { font-size: 2em; font-weight: bold; font-family: var(--heading-font-family); color: var(--color-progressive); margin: 0; } .gif-toggle-btn { background: none; border: 1px solid #4a4a4a; color: #e0e0e0; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 1em; transition: all 0.2s ease; } .gif-toggle-btn:hover { background: #2a2a2a; border-color: #5a5a5a; } .gif-image-container { width: 100%; height: 400px; min-height: 400px; max-height: 400px; display: flex; align-items: center; justify-content: center; background: var(--background-color-base); border-radius: 4px; position: relative; margin-bottom: 10px; overflow: hidden; } .gif-image-container img { max-width: 100%; max-height: 100%; height: auto; width: auto; display: block; border-radius: 4px; object-fit: contain; } .gif-image-container.loading::after { content: ''; position: absolute; width: 40px; height: 40px; border: 4px solid var(--color-progressive--hover); border-top-color: #e0e0e0; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .gif-error { color: var(--color-destructive); font-size: 1em; text-align: center; padding: 20px; } .gif-caption { text-align: center; color: var(--color-base); font-size: 1em; font-style: italic; padding: 5px; background: var(--color-progressive--hover); border-radius: 4px; text-shadow: 0 0 5px var(--content-border-color); display: none; } .gif-placeholder { color: var(--color-progressive--hover); font-size: 1em; text-align: center; padding: 60px 20px; height: 500px; } @media (max-width: 768px) { .dynamic-gif-container { position: relative; float: none; width: 100%; margin: 0 0 20px 0; } .dynamic-gif-container.expanded .gif-display-area { max-height: none; } } .skill-tree-section::after { content: ""; display: table; clear: both; } .tabber .tabbertab { clear: both; overflow: auto; } .gif-tabber-display-container { display: flex; flex-direction: row; gap: 1.5em; align-items: flex-start; } .gif-tabber-display-container > div:first-child { flex: 1 1 auto; min-width: 0; } .gif-tabber-display-container > .dynamic-gif-container { flex: 0 0 auto; position: sticky; top: 1em; align-self: flex-start; padding-top: 0; margin: 0; min-width: 500px; max-width: 600px; } @media screen and (max-width: 1200px) { .gif-tabber-display-container { flex-direction: column; width: 100%; max-width: 100%; overflow: hidden; } .gif-tabber-display-container > .dynamic-gif-container { position: static; width: 100%; max-width: 100%; min-width: 0; order: 2; / Move gif display below tabber / margin-top: 1em; } .gif-tabber-display-container > div:first-child { order: 1; / Keep tabber on top / width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; } / Ensure tabber content doesn't overflow / .gif-tabber-display-container #List\ of\ Skill\ Trees, .gif-tabber-display-container .tabber, .gif-tabber-display-container .tabbertab { max-width: 100%; overflow-x: auto; box-sizing: border-box; } / Hide gif display by default on mobile, show when expanded / .gif-tabber-display-container > .dynamic-gif-container:not(.expanded) { display: none; } / When expanded on mobile, make it compact / .gif-tabber-display-container > .dynamic-gif-container.expanded { display: block; } .gif-tabber-display-container > .dynamic-gif-container .gif-display-area { max-width: 100%; } } .decor-page { border-image: url(/wiki/Special:Redirect/file/Wiki-border-book.png); border-image-slice: 65 122 65 122; border-image-width: 100% 100% 100% 100%; border-image-repeat: stretch stretch; border-image-outset: 0; border-style: solid; color: var(--background-color-base); width: 492px; height: 262px; } .decor-page > p{ padding: 3.5em; font-family: var(--heading-font-family); } .swap-silverling { position: relative; display: inline-block; width: 7em; text-align: left; text-shadow: 0 0 10px currentColor; font-weight: bold; } .swap-silverling::before, .swap-silverling::after { position: absolute; left: 0; bottom: -0.45em; width: 140%; text-align: inherit; animation: fadeSwap 5s infinite ease-in-out; } .swap-silverling::before { content: "Silverlings."; opacity: 1; } .swap-silverling::after { content: "Players."; opacity: 0; animation-delay: 2.5s; } @keyframes fadeSwap { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } } .main-welcome { text-shadow: 0 0 2px black; font-weight: bold; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-top: 0.5em; padding: 14px 18px; padding-right: 60px; background: var(--background-color-base); color: var(--color-progressive); border: 2px solid var(--color-progressive); font-family: var(--body-font-family); font-size: 16px; font-weight: 700; transition: all 0.2s ease; box-shadow: inset 0 0 0 2px #0f0f0f, inset 0 0 20px #42a2f180; padding: 1em; } .welcome-text { flex: 2; min-width: 300px; border-left: 2px solid var(--color-progressive); padding: 1em; font-size: 2em; } div.main-welcome > .mp-links { flex: 1; min-width: 250px; margin: 1em; } div.main-welcome > .mp-links > ul > li { background: linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 50%, rgba(76, 87, 181, 0.08) 100%), linear-gradient(to bottom, rgba(66, 162, 241, 0.15), rgba(76, 87, 181, 0.2), rgba(66, 162, 241, 0.15)); box-shadow: inset 0 0 20px 4px rgba(66, 162, 241, 0.12), 0 4px 15px rgba(66, 162, 241, 0.2), 0 0 30px rgba(66, 162, 241, 0.15); border: 1px solid rgba(66, 162, 241, 0.4); border-radius: 4px; padding: 1em 0.8em; position: relative; transition: all 0.3s ease; backdrop-filter: blur(2px); } div.main-welcome > .mp-links > ul > li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.6) 30%, rgba(66, 162, 241, 0.9) 50%, rgba(66, 162, 241, 0.6) 70%, transparent); box-shadow: 0 0 8px rgba(66, 162, 241, 0.8); } div.main-welcome > .mp-links > ul > li::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.4) 30%, rgba(66, 162, 241, 0.6) 50%, rgba(66, 162, 241, 0.4) 70%, transparent); } div.main-welcome > .mp-links > ul > li:hover { background: linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, transparent 50%, rgba(76, 87, 181, 0.15) 100%), linear-gradient(to bottom, rgba(66, 162, 241, 0.25), rgba(76, 87, 181, 0.3), rgba(66, 162, 241, 0.25)); box-shadow: inset 0 0 30px 6px rgba(66, 162, 241, 0.2), 0 6px 20px rgba(66, 162, 241, 0.3), 0 0 40px rgba(66, 162, 241, 0.25); border-color: rgba(66, 162, 241, 0.6); transform: translateY(-2px); } div.main-welcome > .mp-links > ul > li > a { color: var(--color-base); text-shadow: 0 0 8px rgba(66, 162, 241, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8); transition: all 0.2s ease; } div.main-welcome > .mp-links > ul > li:hover > a { text-shadow: 0 0 12px rgba(66, 162, 241, 0.9), 0 0 6px rgba(66, 162, 241, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8); } .mw-collapsible { padding-top: 2em; display: flow-root; } .tab-gif-container { background: linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 40%, rgba(76, 87, 181, 0.08) 100%), radial-gradient(ellipse at top left, rgba(66, 162, 241, 0.12), transparent 60%), rgba(26, 26, 34, 0.95); border: 1px solid rgba(66, 162, 241, 0.4); border-radius: 6px; padding: 12px; margin: 1em 0; box-shadow: 0 0 30px 5px rgba(66, 162, 241, 0.2), inset 0 0 40px 8px rgba(66, 162, 241, 0.05), 0 4px 20px rgba(0, 0, 0, 0.6); display: inline-block; width: fit-content; max-width: 100%; position: relative; backdrop-filter: blur(4px); } .tab-gif-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.6) 20%, rgba(66, 162, 241, 0.9) 50%, rgba(66, 162, 241, 0.6) 80%, transparent); box-shadow: 0 0 10px rgba(66, 162, 241, 0.8); } .tab-gif-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 10px; font-size: 2em; border-bottom: 1px solid var(--color-progressive); } .tab-gif-title { font-size: 1.5em; font-weight: bold; font-family: var(--heading-font-family); color: var(--color-progressive); margin: 0; } .tab-gif-toggle-btn { background: none; border: 1px solid #4a4a4a; color: #e0e0e0; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 0.9em; transition: all 0.2s ease; } .tab-gif-toggle-btn:hover { background: #2a2a2a; border-color: #5a5a5a; } .tab-gif-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--color-progressive); } .tab-gif-tab { background: linear-gradient(135deg, rgba(66, 162, 241, 0.08), transparent 60%), rgba(26, 26, 34, 0.6); color: var(--color-base); border: 1px solid rgba(66, 162, 241, 0.4); font-family: var(--body-font-family); padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 1em; font-weight: bold; transition: all 0.2s ease; white-space: nowrap; text-shadow: 0 0 6px rgba(66, 162, 241, 0.5), 0 2px 4px rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 15px 2px rgba(66, 162, 241, 0.08), 0 2px 8px rgba(0, 0, 0, 0.4); position: relative; } .tab-gif-tab::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.5) 30%, rgba(66, 162, 241, 0.7) 50%, rgba(66, 162, 241, 0.5) 70%, transparent); } .tab-gif-tab:hover { background: linear-gradient(135deg, rgba(66, 162, 241, 0.15), transparent 60%), rgba(26, 26, 34, 0.8); color: #ffffff; border-color: rgba(66, 162, 241, 0.6); box-shadow: inset 0 0 20px 3px rgba(66, 162, 241, 0.15), 0 4px 12px rgba(66, 162, 241, 0.3), 0 0 20px rgba(66, 162, 241, 0.2); text-shadow: 0 0 10px rgba(66, 162, 241, 0.8), 0 0 5px rgba(66, 162, 241, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8); } .tab-gif-tab.tab-gif-active { background: linear-gradient(135deg, rgba(66, 162, 241, 0.3) 0%, rgba(76, 87, 181, 0.25) 100%), rgba(66, 162, 241, 0.2); color: #ffffff; border-color: rgba(66, 162, 241, 0.8); font-weight: bold; box-shadow: inset 0 0 25px 5px rgba(66, 162, 241, 0.2), 0 4px 15px rgba(66, 162, 241, 0.4), 0 0 30px rgba(66, 162, 241, 0.3); text-shadow: 0 0 12px rgba(66, 162, 241, 1), 0 0 8px rgba(66, 162, 241, 0.8), 0 2px 4px rgba(0, 0, 0, 0.8); } .tab-gif-display-area { background: linear-gradient(135deg, rgba(66, 162, 241, 0.03) 0%, transparent 50%), rgba(26, 26, 34, 0.4); border-radius: 4px; padding: 8px; min-height: auto; box-shadow: inset 0 0 20px 3px rgba(66, 162, 241, 0.08); border: 1px solid rgba(66, 162, 241, 0.15); } .tab-gif-display-area .gif-image-container { width: fit-content; min-height: auto; max-height: none; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(66, 162, 241, 0.05), transparent 60%), rgba(0, 0, 0, 0.3); border-radius: 3px; position: relative; margin-bottom: 8px; overflow: hidden; box-shadow: 0 0 20px 3px rgba(66, 162, 241, 0.15), inset 0 0 15px 2px rgba(66, 162, 241, 0.05); border: 1px solid rgba(66, 162, 241, 0.3); padding: 4px; } .tab-gif-display-area .gif-image-container img { max-width: 100%; height: auto; width: auto; display: block; border-radius: 2px; object-fit: contain; transition: opacity 0.2s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } .tab-gif-display-area .gif-image-container.loading::after { content: ''; position: absolute; width: 40px; height: 40px; border: 4px solid var(--color-progressive--hover); border-top-color: #e0e0e0; border-radius: 50%; animation: tab-gif-spin 1s linear infinite; } @keyframes tab-gif-spin { to { transform: rotate(360deg); } } .tab-gif-display-area .gif-placeholder { color: var(--color-progressive--hover); font-size: 1em; text-align: center; padding: 60px 20px; font-style: italic; } .tab-gif-display-area .gif-error { color: var(--color-destructive); font-size: 1em; text-align: center; padding: 20px; background: rgba(255, 107, 107, 0.1); border-radius: 4px; } .tab-gif-display-area .gif-caption { text-align: center; color: var(--color-base); font-size: 1em; font-style: italic; padding: 6px 10px; background: linear-gradient(90deg, rgba(66, 162, 241, 0.2) 0%, rgba(66, 162, 241, 0.3) 50%, rgba(66, 162, 241, 0.2) 100%), rgba(26, 26, 34, 0.6); border-radius: 3px; text-shadow: 0 0 8px rgba(66, 162, 241, 0.8), 0 0 4px rgba(66, 162, 241, 0.6), 0 2px 4px rgba(0, 0, 0, 0.9); margin-top: 6px; border: 1px solid rgba(66, 162, 241, 0.4); box-shadow: inset 0 0 15px 2px rgba(66, 162, 241, 0.1), 0 2px 8px rgba(0, 0, 0, 0.4); } @media (max-width: 768px) { .tab-gif-container { display: block; width: 100%; min-width: auto; margin: 1em 0; } .tab-gif-tabs { flex-direction: column; } .tab-gif-tab { width: 100%; text-align: center; } .tab-gif-header { flex-direction: column; align-items: flex-start; gap: 10px; } .tab-gif-toggle-btn { width: 100%; } } .tab-gif-container.full-width { display: block; width: 100%; } .tab-gif-container.float-left { float: left; margin-right: 1em; } .tab-gif-container.float-right { float: right; margin-left: 1em; } / ============================================================ MOBILE ADJUSTMENTS ============================================================ / @media screen and (max-width: 720px) { / 1. BOX FIX / , ::before, ::after { box-sizing: border-box !important; } .mp-main { aspect-ratio: auto !important; height: auto !important; background-size: cover !important; } /* 2. HEIGHT & OVERFLOW / .mp-box, .mp-body, .main-welcome, .mp-links, .welcome-text, #mp-box-welcome, #mp-welcome { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 6px !important; padding-right: 6px !important; float: none !important; overflow: visible !important; display: block !important; } / 3. WELCOME BOX / .main-welcome { display: flex !important; flex-direction: column !important; padding: 10px !important; align-items: stretch !important; border-radius: 4px !important; } .welcome-text { font-size: 1em !important; border-left: none !important; border-bottom: 2px solid var(--color-progressive); margin-bottom: 15px; padding: 8px 0 !important; text-align: left; } / 4. MASTER GRID / .mp-main, .mp-links, .mp-links > ul { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; min-width: 0 !important; box-sizing: border-box !important; } .mp-main { margin-top: 20px !important; } .mp-links > ul { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; list-style: none !important; } / 5. INDIVIDUAL BUTTON STYLING / .mp-links > ul > li { flex: none !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; margin: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; min-height: 110px !important; padding: 10px 5px !important; background: linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 50%, rgba(76, 87, 181, 0.08) 100%), linear-gradient(to bottom, rgba(66, 162, 241, 0.15), rgba(76, 87, 181, 0.2), rgba(66, 162, 241, 0.15)) !important; box-shadow: inset 0 0 15px rgba(66, 162, 241, 0.12), 0 2px 8px rgba(0,0,0,0.3) !important; border: 1px solid rgba(66, 162, 241, 0.4) !important; border-radius: 6px !important; } div.main-welcome > .mp-links > ul > li:nth-child(3) { grid-column: span 2 !important; width: 100% !important; justify-self: center !important; } / 7. ICON & TEXT GLOW / .mp-links img { max-width: 45px !important; height: auto !important; margin-bottom: 6px !important; display: block !important; } .mp-links > ul > li > a { font-size: 0.85em !important; line-height: 1.1 !important; white-space: normal !important; text-align: center !important; color: #fff !important; text-shadow: 0 0 8px rgba(66, 162, 241, 0.8), 0 0 4px rgba(66, 162, 241, 0.5), 0 2px 4px rgba(0, 0, 0, 0.9) !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; } .mp-box h2 { font-size: 1.5em !important; padding: 0.2em 0 !important; } .mp-box .welcome-message { font-size: 1.3em !important; padding: 0.4em !important; } .druid-infobox .druid-title { font-size: 1.3em !important; min-height: auto !important; } a.tabber__tab { font-size: 1.1em !important; } .node { width: 45px !important; } / 9. DUNGEON PAGE / .dungeon-page-smaller-box ul { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; width: 100% !important; } .dungeon-page-smaller-box li { display: block !important; width: 100% !important; max-width: 100% !important; margin: 10px 0 !important; padding: 1em !important; flex: none !important; border: 1px solid rgba(66, 162, 241, 0.3) !important; box-shadow: inset 0 0 20px 3px rgba(66, 162, 241, 0.05), 0 2px 10px rgba(0, 0, 0, 0.5) !important; } .dungeon-page-smaller-box a { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; width: 100% !important; } .dungeon-page-box h2, .mp-box h2 { text-align: center !important; width: 100% !important; } / 10. GENERAL PAGE / .mw-parser-output h2 { font-size: 1.6em !important; margin-top: 0.1em !important; margin-bottom: 0.05em !important; padding: 0 !important; border: none !important; } .mp-box h2::after { bottom: -2px !important; } .mw-parser-output p, .mw-parser-output li { font-size: 0.9em !important; line-height: 1.5 !important; margin-top: 0.2em !important; } / 11. BUTTONS / .button-expand-header { background: var(--background-color-base) !important; box-shadow: inset 0 0 0 2px #0f0f0f, inset 0 0 20px #42a2f180 !important; padding-right: 65px !important; font-size: 14px !important; white-space: normal !important; text-align: left !important; display: flex !important; align-items: center !important; border-radius: 4px !important; min-height: 60px !important; } .button-expand-header img { flex-shrink: 0 !important; width: 45px !important; height: 45px !important; object-fit: contain !important; margin-right: 6px !important; } / 12. MAIN PAGE TITLE / h1#firstHeading, .mw-body h1, .section-heading h1 { font-size: 1.5em !important; width: 100% !important; text-align: center !important; display: block !important; margin: 10px 0 !important; letter-spacing: 0.05em !important; } / 13. TABS / .header-container, .pre-content, .page-header-bar { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; } .minerva__tab-container { display: flex !important; width: 100% !important; justify-content: stretch !important; margin-bottom: 5px !important; } .minerva__tab-container .tab { flex: 1 !important; text-align: center !important; } .page-actions-menu { width: 100% !important; display: block !important; } .page-actions-menu__list { display: flex !important; width: 100% !important; justify-content: space-around !important; padding: 0 !important; margin: 0 !important; list-style: none !important; } .page-actions-menu__list li { flex: 1 !important; display: flex !important; justify-content: center !important; } / 14. TABLE STACK / .mw-parser-output div[style="display:flex"]:has(.wikitable) { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; gap: 20px !important; } .mw-parser-output .wikitable td, .mw-parser-output .wikitable th { white-space: nowrap !important; word-break: normal !important; padding: 10px 5px !important; } /* 15. DLOG STUFF / .dlog { font-size: 1em !important; max-width: 100% !important; padding: 0.5em !important; / Optional: tightens the box for mobile / } .dlog::before { zoom: 0.6; margin-bottom: 5px; display: block; width: fit-content; } / 16. INLINE IMAGE STUFF / .inline-image-template { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; display: block !important; margin: 1em 0 !important; } .inline-image-image { display: block !important; width: 100% !important; text-align: center; } .inline-image-image img, .inline-image-image > p > span > span > img { max-width: 100% !important; height: auto !important; width: auto !important; } .inline-image-caption { width: 100% !important; box-sizing: border-box !important; } .inline-image-caption > p { font-size: 0.7em !important; white-space: normal !important; } / 17. OTHER / .pre-dungeon p { font-size: 0.8em !important; padding: 0.7em 1em !important; } / fixed 492px decor/book pages overflow a phone and force zoom-out / .decor-page { width: 100% !important; max-width: 492px !important; height: auto !important; box-sizing: border-box !important; } .decor-page > p { padding: 1.5em !important; } } / ============================================================ THE ARCHIVES — MAIN PAGE v2 Scoped entirely to .archive-page ([[Telos Realms Wiki]]). Built from the wiki's own vocabulary: kurva pixel frames, embossed Daedalus, Courier ledger notes, Minecraft palette. Shared classes (.mp-links, .mp-box, .dlog) untouched. ============================================================ / .archive-page { --ar-accent: #42a2f1; --ar-accent-bright: #7cc2ff; --ar-cream: #feffe5; --ar-line: rgba(66, 162, 241, 0.18); --ar-panel: rgba(10, 14, 24, 0.85); --ar-panel-raised: rgba(15, 20, 33, 0.88); --ar-text: #dde5f2; --ar-text-dim: #93a0b8; --ar-gold: #ffc05f; --ar-ease: cubic-bezier(0.32, 0.72, 0, 1); --ar-ease-out: cubic-bezier(0.22, 1, 0.36, 1); max-width: 1280px; margin: 0 auto; font-family: var(--body-font-family); color: var(--ar-text); } / --- one-time entry cascade (no looping motion) --- / @keyframes ar-enter { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } } .archive-page > { animation: ar-enter 0.55s var(--ar-ease-out) both; } .archive-page > :nth-child(1) { animation-delay: 0.05s; } .archive-page > :nth-child(2) { animation-delay: 0.12s; } .archive-page > :nth-child(3) { animation-delay: 0.19s; } .archive-page > :nth-child(4) { animation-delay: 0.25s; } .archive-page > :nth-child(5) { animation-delay: 0.30s; } .archive-page > :nth-child(6) { animation-delay: 0.34s; } .archive-page > :nth-child(n+7) { animation-delay: 0.38s; } / --- hero: centered greeting panel --- / .archive-hero { text-align: center; padding: 2.4em 2.4em 0; background: radial-gradient(ellipse at 50% -10%, rgba(66, 162, 241, 0.14), transparent 60%), var(--ar-panel); border-style: solid; border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png"); border-image-slice: 6; border-image-width: 6px; border-image-repeat: repeat repeat; } .archive-hero p { margin: 0; } .ar-hero-emblem img { filter: drop-shadow(0 0 18px rgba(66, 162, 241, 0.55)); } .ar-hero-eyebrow { margin-top: 0.9em; font-style: italic; font-size: 0.98em; color: #8493ad; } .ar-hero-title { font-family: var(--heading-font-family); font-size: clamp(2.8em, 6.5vw, 4.6em); line-height: 1.02; margin-top: 0.12em; color: var(--ar-cream); text-rendering: geometricPrecision; text-shadow: 0 0.06em 0 color-mix(in srgb, currentColor 50%, black), 0 0.12em 0 color-mix(in srgb, currentColor 10%, black), 0 0 0.2em currentColor; } .ar-hero-sub { margin: 0.6em auto 0; max-width: 38em; color: var(--ar-text-dim); font-size: 1.08em; line-height: 1.6; text-wrap: balance; } .archive-status { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4em 2.4em; margin: 1.8em -2.4em 0; padding: 0.85em 1.5em 1em; border-top: 1px solid var(--ar-line); font-size: 0.92em; color: #7d92b3; } .ar-stat b { color: var(--ar-cream); font-weight: 600; margin-right: 0.15em; font-variant-numeric: tabular-nums; } .ar-stat-note { color: #54fc54; text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, black); } / --- D's welcome ledger + the three starting records --- / .archive-comm { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 14px; margin-top: 14px; align-items: stretch; } .archive-transmission { background: var(--ar-panel); border-left: 3px solid var(--ar-accent); padding: 1.2em 1.6em 1.1em; box-shadow: inset 0 0 24px 4px rgba(66, 162, 241, 0.07); } .ar-comm-eyebrow { font-family: 'Courier New', monospace; font-weight: 700; font-size: 0.88em; color: #7d92b3; } .ar-comm-greeting { font-family: var(--heading-font-family); font-size: 2em; margin-top: 0.3em; color: var(--ar-cream); text-rendering: geometricPrecision; text-shadow: 0 0.08em 0 color-mix(in srgb, currentColor 35%, black), 0 0 0.2em color-mix(in srgb, currentColor 60%, transparent); } .ar-comm-greeting .swap-silverling { color: var(--ar-accent-bright); width: 6.5em; } .archive-transmission p { margin: 0.8em 0 0; color: #bcc8dd; line-height: 1.62; } .ar-sign { margin-top: 0.45em; text-align: right; font-family: var(--heading-font-family); font-size: 1.7em; color: var(--ar-accent-bright); text-shadow: 0 0 14px rgba(66, 162, 241, 0.6), 0 2px 0 rgba(0, 0, 0, 0.6); } .ar-d { color: var(--ar-accent-bright); font-weight: 700; text-shadow: 0 0 12px rgba(66, 162, 241, 0.65); } .ar-silver { color: #cfd6e2; font-weight: 600; text-shadow: 0 0 10px rgba(207, 214, 226, 0.4); } .archive-directives { display: flex; flex-direction: column; gap: 10px; } .ar-directives-label { font-family: 'Courier New', monospace; font-weight: 700; font-size: 0.88em; color: #7d92b3; padding-left: 2px; } .ar-directive { display: flex; align-items: center; gap: 0.9em; flex: 1; padding: 0.6em 1em; background: var(--ar-panel-raised); border: 1px solid var(--ar-line); cursor: pointer; transition: background-color 0.22s var(--ar-ease), border-color 0.22s var(--ar-ease), transform 0.22s var(--ar-ease), box-shadow 0.22s var(--ar-ease); } .ar-directive:hover { background: rgba(24, 33, 54, 0.92); border-color: rgba(66, 162, 241, 0.5); transform: translateY(-1px); box-shadow: inset 0 0 16px 2px rgba(66, 162, 241, 0.15), 0 4px 14px rgba(0, 0, 0, 0.45); } .ar-directive:active { transform: translateY(0) scale(0.99); } .ar-directive p { margin: 0; } .ar-directive > a, .ar-directive > span[typeof] { flex-shrink: 0; } .ar-directive img { display: block; } .ar-directive-title a { font-family: var(--heading-font-family); font-size: 1.3em; line-height: 1; color: var(--ar-cream); text-decoration: none; text-shadow: 0 2px 0 color-mix(in srgb, currentColor 20%, black); } .ar-directive-title a:visited { color: var(--ar-cream); } .ar-directive-sub { color: var(--ar-text-dim); font-size: 0.88em; margin-top: 2px; } .ar-directive-go { margin-left: auto; font-size: 1.5em; line-height: 1; color: #5e7795; transition: transform 0.22s var(--ar-ease), color 0.22s var(--ar-ease); } .ar-directive:hover .ar-directive-go { transform: translateX(3px); color: var(--ar-accent-bright); } / --- section headers: ❖ marker, embossed Daedalus, D's aside --- / .ar-sect { display: flex; align-items: baseline; gap: 0.6em; margin: 2.2em 0 0.9em; } .ar-sect-mark { color: var(--ar-accent-bright); text-shadow: 0 0 10px rgba(124, 194, 255, 0.9), 0 0 5px rgba(124, 194, 255, 0.6); } .ar-sect-name { font-family: var(--heading-font-family); font-size: 2.1em; line-height: 1; color: var(--ar-cream); text-rendering: geometricPrecision; text-shadow: 0 0.06em 0 color-mix(in srgb, currentColor 50%, black), 0 0.12em 0 color-mix(in srgb, currentColor 10%, black), 0 0 0.2em currentColor; } .ar-sect-sub { font-style: italic; color: #7d8ba5; font-size: 0.95em; margin-left: 0.3em; } .ar-sect::after { content: ''; flex: 1; align-self: center; height: 1px; background: linear-gradient(90deg, rgba(66, 162, 241, 0.5), var(--ar-line) 40%, transparent); } / --- record cards --- / .archive-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; } .ar-card { display: flex; align-items: flex-start; gap: 1em; grid-column: span 4; padding: 1.05em 1.15em 1em; background-color: var(--ar-panel); border-style: solid; border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png"); border-image-slice: 6; border-image-width: 6px; border-image-repeat: repeat repeat; cursor: pointer; transition: background-color 0.22s var(--ar-ease), transform 0.22s var(--ar-ease), box-shadow 0.22s var(--ar-ease); } .ar-w6 { grid-column: span 6; } .ar-w4 { grid-column: span 4; } .ar-w3 { grid-column: span 3; } .ar-card:hover { background-color: rgba(20, 28, 46, 0.92); transform: translateY(-2px); box-shadow: inset 0 0 20px 4px rgba(66, 162, 241, 0.16), 0 8px 22px rgba(0, 0, 0, 0.45), 0 0 22px -6px rgba(66, 162, 241, 0.45); } .ar-card:active { transform: translateY(0) scale(0.99); } .ar-card > a, .ar-card > span[typeof] { flex-shrink: 0; } .ar-card img { display: block; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6)); transition: transform 0.22s var(--ar-ease); } .ar-card:hover img { transform: translateY(-2px); } .ar-card-body { flex: 1; min-width: 0; } .ar-card-titles { display: flex; align-items: baseline; gap: 0.7em; flex-wrap: wrap; } .ar-card-titles p { margin: 0; } .ar-card-titles a { font-family: var(--heading-font-family); font-size: 1.5em; line-height: 1.05; color: var(--ar-cream); text-decoration: none; text-rendering: geometricPrecision; text-shadow: 0 0.08em 0 color-mix(in srgb, currentColor 35%, black), 0 0 0.15em color-mix(in srgb, currentColor 40%, transparent); transition: text-shadow 0.2s var(--ar-ease); } .ar-card-titles a:visited { color: var(--ar-cream); } .ar-card:hover .ar-card-titles a { text-shadow: 0 0.08em 0 color-mix(in srgb, currentColor 35%, black), 0 0 0.4em currentColor; } / little colored annotations, same palette as the item infoboxes / .ar-card-tag { font-size: 0.8em; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; text-shadow: 1px 1px color-mix(in srgb, currentColor 20%, black); } .ar-mc-yellow { color: #fcfc54; } .ar-mc-aqua { color: #54fcfc; } .ar-mc-red { color: #fc5454; } .ar-mc-green { color: #54fc54; } .ar-mc-gold { color: #ffc05f; } .ar-card-desc { margin-top: 0.45em; color: var(--ar-text-dim); font-size: 0.93em; line-height: 1.58; } .ar-card-desc p { margin: 0; } .ar-card-links { margin-top: 0.75em; padding-top: 0.65em; border-top: 1px solid rgba(66, 162, 241, 0.14); font-size: 0.9em; line-height: 1.9; color: #51617c; } .ar-card-links p { margin: 0; } .ar-see { font-style: italic; color: #5d6c85; margin-right: 0.3em; } .ar-card-links a { color: var(--ar-gold); text-decoration: none; } .ar-card-links a:visited { color: var(--ar-gold); } .ar-card-links a:hover { color: #ffd28a; text-decoration: underline; } / --- footer --- / .archive-footer { margin-top: 2.4em; padding: 1.5em 1em 0.5em; border-top: 1px solid var(--ar-line); text-align: center; } .ar-footer-quote { font-style: italic; font-size: 1.05em; color: #aab6cc; max-width: 42em; margin: 0 auto 0.9em; text-wrap: balance; } .ar-footer-quote .ar-d { font-style: normal; } .ar-footer-line { color: #7e8ca6; font-size: 0.95em; } .ar-footer-links { margin-top: 0.7em; font-size: 0.92em; color: #51617c; } .ar-footer-links a { color: var(--ar-gold); text-decoration: none; } .ar-footer-links a:hover { text-decoration: underline; } / --- keyboard focus --- / .archive-page a:focus-visible { outline: 2px solid var(--ar-accent-bright); outline-offset: 2px; } / --- responsive --- / @media screen and (max-width: 1060px) { .archive-comm { grid-template-columns: 1fr; } .ar-w6 { grid-column: span 12; } .ar-w4, .ar-w3 { grid-column: span 6; } } @media screen and (max-width: 720px) { .archive-grid { display: flex; flex-direction: column; } .archive-hero { padding: 1.6em 1.2em 0; } .archive-status { margin-inline: -1.2em; padding-inline: 1.2em; gap: 0.4em 1.4em; } .ar-sect { flex-wrap: wrap; margin-top: 1.8em; } .ar-sect-name { font-size: 1.6em; } .ar-sect-sub { flex-basis: 100%; margin-left: 1.5em; } .ar-card { padding: 1em; } .ar-comm-greeting { font-size: 1.6em; } } / --- reduced motion: everything appears instantly --- / @media (prefers-reduced-motion: reduce) { .archive-page > , .archive-page .swap-silverling::before, .archive-page .swap-silverling::after { animation: none !important; } .archive-page , .archive-page ::before, .archive-page ::after { transition-duration: 0.01ms !important; } } / ============================================================ END THE ARCHIVES — MAIN PAGE v2 ============================================================ / / ============================================================ DUNGEON PAGES v2 1) .dungeon-index / .dungeon-jump — the [[Dungeons]] list page, danger-graded via --tier (green → void) 2) .npc-infobox — compact infobox chrome + single-line loot rows; model renders keep their template sizes 3) .dungeon-page — wiki-article layout for dungeon pages Heading selectors are written long to out-rank Minerva's `.content .mw-parser-output .mw-heading { display:block }`. ============================================================ / / smooth anchor jumps (jump bar, TOC links) / @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } / --- 1) the dungeon index --- / / danger palette, shared by pills, markers, rules, tile glows / .tier-g, .dj-g { --tier: #54fc54; } .tier-o, .dj-o { --tier: #fca854; } .tier-p, .dj-p { --tier: #cd08cd; } .tier-r, .dj-r { --tier: #c20f0f; } .tier-u, .dj-u { --tier: #8d9f97; } / jump bar: one tap to any tier bracket / .dungeon-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0.9em 0 0.3em; } .dungeon-jump .dj { display: inline-block; padding: 0.3em 0.85em; background: rgba(15, 20, 33, 0.88); border: 1px solid color-mix(in srgb, var(--tier, #42a2f1) 30%, transparent); border-radius: 2px; font-weight: 700; font-size: 0.95em; color: var(--tier, #dde5f2); text-shadow: 1px 1px color-mix(in srgb, currentColor 20%, black); transition: border-color 0.18s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.18s cubic-bezier(0.32, 0.72, 0, 1), transform 0.18s cubic-bezier(0.32, 0.72, 0, 1); } .dungeon-jump .dj a { color: inherit; text-decoration: none; } .dungeon-jump .dj:hover { background: rgba(24, 33, 54, 0.92); border-color: color-mix(in srgb, var(--tier, #42a2f1) 70%, transparent); transform: translateY(-1px); } / bracket headings — long selectors beat Minerva's .mw-heading{display:block} / .dungeon-index .mw-heading3, .content .mw-parser-output .dungeon-index .mw-heading3 { display: flex; align-items: center; gap: 0.7em; margin: 1.6em 0 0.8em; border: none; min-width: 0; } .dungeon-index .mw-heading3::before { content: '❖'; font-size: 1.1em; color: var(--tier, #7cc2ff); text-shadow: 0 0 10px currentColor, 1px 1px color-mix(in srgb, currentColor 20%, black); } .dungeon-index .mw-heading3::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--tier, #42a2f1) 50%, transparent), color-mix(in srgb, var(--tier, #42a2f1) 15%, transparent) 45%, transparent); } .dungeon-index h3, .content .mw-parser-output .dungeon-index h3 { flex: 0 0 auto; margin: 0; font-family: var(--heading-font-family); font-size: 2em; line-height: 1; font-weight: normal; color: #feffe5; text-rendering: geometricPrecision; text-shadow: 0 0.06em 0 color-mix(in srgb, currentColor 50%, black), 0 0.12em 0 color-mix(in srgb, currentColor 10%, black), 0 0 0.2em currentColor; } / portal tiles: .mp-links supplies the kurva frame + whole-tile click JS / .dungeon-grid { font-size: 1em; } .dungeon-grid > ul { justify-content: flex-start; gap: 12px; margin: 0; } .dungeon-grid > ul > li { gap: 4px; padding: 0.9em 1.1em 0.8em; background-color: rgba(10, 14, 24, 0.85); transition: background-color 0.22s cubic-bezier(0.32, 0.72, 0, 1), transform 0.22s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.22s cubic-bezier(0.32, 0.72, 0, 1); } .dungeon-grid > ul > li:hover { background-color: rgba(20, 28, 46, 0.92); transform: translateY(-2px); box-shadow: inset 0 0 20px 4px color-mix(in srgb, var(--tier, #42a2f1) 15%, transparent), 0 8px 22px rgba(0, 0, 0, 0.45), 0 0 24px -6px var(--tier, #42a2f1); } / --- 2) boss & enemy infoboxes --- / .druid-container.npc-infobox { max-width: 21.5em; padding: 0.35em; font-size: 0.94em; } .npc-infobox .druid-title { font-size: 1.7em; min-height: auto; padding: 0.3em 0.5em; } .npc-infobox .druid-section { font-size: 1.05em; padding: 2px; } .npc-infobox div.druid-row > .druid-label, .npc-infobox div.druid-row > .druid-data { padding-block: 1px; } / loot: one line per drop — name + icon left, % right. The old `.druid-row[data-druid-section-row="Loot"] div` rule sets display:block, width:100% and justify-content:space-between on every div in here; width:100% + padding overflows the box (clipped %s), so everything below resets to width:auto / border-box. / .npc-infobox .druid-row[data-druid-section-row="Loot"] div { padding: 0; display: block; width: auto; box-sizing: border-box; } .npc-infobox .druid-row[data-druid-section-row="Loot"] > .druid-data { flex: 1 1 auto; min-width: 0; width: 100%; } .npc-infobox .druid-row[data-druid-section-row="Loot"] .loot-category-header, .npc-infobox .loot-category-header { display: flex; align-items: center; justify-content: flex-start; gap: 0.45em; padding: 0.25em 0.5em; margin: 0.45em 0 0.15em; } .npc-infobox .loot-category-header img { width: 24px; height: auto; } .npc-infobox .loot-category-title { font-size: 0.9em; } .npc-infobox .druid-row[data-druid-section-row="Loot"] .loot-item-row, .npc-infobox .loot-item-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.15em 0.6em; padding: 0.12em 0.4em 0.12em 0.6em; margin: 0; font-size: 0.95em; line-height: 1.35; } .npc-infobox .druid-row[data-druid-section-row="Loot"] .loot-data-infobox, .npc-infobox .loot-data-infobox { display: flex; align-items: center; gap: 0.45em; min-width: 0; } .npc-infobox .loot-data-infobox img { max-height: 26px; width: auto; } .npc-infobox .boss-percent { font-size: 1em; flex-shrink: 0; } / enemy boxes inside a dungeon page: compact cards / .dungeon-enemies .druid-container.npc-infobox { max-width: 18em; font-size: 0.9em; float: none; margin: 0.4em; } .dungeon-enemies .npc-infobox .druid-title { font-size: 1.35em; } / --- 3) individual dungeon pages (.dungeon-page wrapper) --- / / flat sections: the heading rule does the separating, not boxes / .dungeon-page .hoverbox, .dungeon-page .hoverbox:hover { background: none; background-color: transparent; border-top: 0; border-radius: 0; box-shadow: none; padding: 0 0.2em 0.2em; margin: 0.2em 0 0.6em; } / wiki-style headings: ❖ marker + underline rule. Long selectors beat Minerva's display:block / flex-basis:0. / .dungeon-page .mw-heading2, .content .mw-parser-output .dungeon-page .mw-heading2 { display: flex; align-items: center; gap: 0.55em; margin: 1em 0 0.45em; padding-bottom: 0.22em; border-bottom: 1px solid rgba(66, 162, 241, 0.3); min-width: 0; } .dungeon-page .mw-heading2::before { content: '❖'; color: #7cc2ff; text-shadow: 0 0 10px rgba(124, 194, 255, 0.9); } .dungeon-page h2, .content .mw-parser-output .dungeon-page h2 { flex: 0 0 auto; font-size: 1.9em; margin: 0; } .dungeon-page > p, .dungeon-page .hoverbox > p { line-height: 1.65; max-width: 72ch; } / attack patterns: slim ledger rows / .dungeon-page .pre-dungeon p { margin: 0.4em 0; padding: 0.45em 0.85em; font-size: 0.97em; border-radius: 2px; border-left: 2px solid rgba(66, 162, 241, 0.45); background: linear-gradient(90deg, rgba(66, 162, 241, 0.07), rgba(26, 26, 34, 0.6) 30%, transparent 96%); box-shadow: none; backdrop-filter: none; } .dungeon-page .pre-dungeon p::before { display: none; } .dungeon-page .dlog { font-size: 1.4em; margin-bottom: 0.8em; } .dungeon-page .mw-collapsible { padding-top: 0.6em; } .dungeon-page .button-expand-header { font-size: 14px; padding: 10px 50px 10px 14px; } / dialogue tables must wrap, never force sideways scroll / .dungeon-page .wikitable td, .dungeon-page .wikitable th, .mw-parser-output .dungeon-page .wikitable td, .mw-parser-output .dungeon-page .wikitable th { white-space: normal !important; word-break: normal !important; } / anchor jumps land clear of the (mobile-sticky) jump bar / .dungeon-index .mw-heading3 { scroll-margin-top: 4.5em; } / --- mobile: the dungeon section must be readable one-handed --- / @media screen and (max-width: 720px) { / jump bar pins to the top and scrolls sideways — one thumb-swipe to reach any tier bracket from anywhere on the page / .dungeon-jump { position: sticky; top: 0; z-index: 5; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 0.5em 6px; margin: 0.6em -6px 0.3em; background: rgba(10, 13, 20, 0.96); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .dungeon-jump::-webkit-scrollbar { display: none; } .dungeon-jump .dj { flex-shrink: 0; padding: 0.45em 0.8em; font-size: 1em; } .dungeon-index .mw-heading3 { margin-top: 1.3em; } .dungeon-index h3, .content .mw-parser-output .dungeon-index h3 { font-size: 1.5em; } / two-up portal tiles, capped images (overrides the old 45px cap) / .dungeon-grid > ul { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; } .dungeon-grid > ul > li { width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0.7em 0.4em !important; background: rgba(10, 14, 24, 0.85) !important; } .dungeon-grid > ul > li img { max-width: 116px !important; height: auto !important; margin: 0 auto !important; } / infoboxes go full width and stack / .druid-container.npc-infobox { max-width: 100%; } .dungeon-enemies { flex-direction: column; align-items: center; } .dungeon-enemies .druid-container.npc-infobox { width: 100%; max-width: 24em; } .dungeon-page .hoverbox, .dungeon-page .hoverbox:hover { margin-inline: 0; padding-inline: 0; } .dungeon-page .pre-dungeon p { font-size: 0.88em; padding: 0.45em 0.7em; } .dungeon-page .dlog { font-size: 1.1em !important; } / keep dialogue tables inside the screen / .dungeon-page .wikitable { width: 100%; } } / ============================================================ END DUNGEON PAGES v2 ============================================================ / / ============================================================ MOBILE READABILITY FIXES (added) Keeps page content from rendering wider than the phone screen (Minerva clips horizontal overflow, so over-wide content is lost off the right edge) and shrinks boss/enemy infoboxes from full-screen blocks back into readable cards. ============================================================ / @media screen and (max-width: 720px) { / nothing should size itself wider than the viewport / .mw-parser-output, .dungeon-page, .hoverbox, .dungeon-clear, .lore, .pre-dungeon { max-width: 100% !important; box-sizing: border-box; overflow-wrap: break-word; } / .pre-dungeon is `width: fit-content`; a long non-wrapping heading inside it stretches the whole section past the screen. Let it fill the available width instead. / .pre-dungeon { width: auto !important; } / ❖-marker headings are flex rows; the heading was `flex: 0 0 auto` so it could neither shrink nor wrap and ran off the screen edge. Allow the row to wrap and the heading to shrink + wrap its text. / .dungeon-page .mw-heading2, .content .mw-parser-output .dungeon-page .mw-heading2, .dungeon-index .mw-heading3, .content .mw-parser-output .dungeon-index .mw-heading3 { / keep the ❖ marker on the same flex line as the title and let the TITLE wrap inside itself — don't wrap the flex items, or the marker gets stranded on its own line / flex-wrap: nowrap !important; align-items: baseline !important; min-width: 0 !important; } .dungeon-page h2, .content .mw-parser-output .dungeon-page h2, .dungeon-index h3, .content .mw-parser-output .dungeon-index h3 { flex: 0 1 auto !important; min-width: 0 !important; font-size: 1.35em !important; overflow-wrap: anywhere; word-break: break-word; } / boss / enemy infoboxes: centered cards, not full-screen blocks (the 3D render + bossbar were filling the whole width) / .dungeon-page .druid-container.npc-infobox, .dungeon-enemies .druid-container.npc-infobox { max-width: 19em !important; margin: 0.6em auto !important; font-size: 0.82em; } } / ============================================================ MOBILE — FLATTEN DECORATION FOR ACCESSIBILITY (added) On phones, trade the neon glow / frame chrome / motion for flat, solid, high-contrast surfaces and clean text. Desktop is untouched. ============================================================ / @media screen and (max-width: 720px) { / 1) blurry colored text-shadows wreck legibility — remove them from body text entirely... / .mw-parser-output p, .mw-parser-output li, .mw-parser-output dd, .mw-parser-output dt, .mw-parser-output td, .mw-parser-output th, .mw-parser-output a, .druid-data, .druid-label, .npc-infobox div.druid-row > .druid-label, .npc-infobox div.druid-row > .druid-data, .boss-percent, .loot-category-title, .footer-content > ul > li > a, .footer-section > ul > li, .ar-card-titles a, .ar-directive-title a, .ar-card-desc { text-shadow: none !important; } / ...and reduce headings to a single clean dark shadow (kept for legibility over the page's background image) / .mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3, .dungeon-page h2, .dungeon-index h3, .druid-title, .druid-section, .druid-infobox .druid-title, .npc-infobox .druid-title, .npc-infobox .druid-section, .mp-box h2, .mp-box .welcome-message, .ar-hero-title, .ar-sect-name { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important; } / 2) the page frame (nexus border-image + blue inner glow) eats width and contrast — drop it on phones / #bodyContent { border-image: none !important; border: none !important; box-shadow: none !important; padding: 1em 0.7em !important; } / 3) flatten neon box-shadow glows + backdrop blur on containers / .npc-infobox, .druid-container, .wikitable, table.wikitable, .dlog, .pre-dungeon p, .hoverbox, .hoverbox:hover, .mp-box, #mp-box-welcome, .class-box, .main-welcome, .button-expand-header, .tab-gif-container, .gif-display-area, .tab-gif-display-area, .inline-image-image > p > span > span > img, .ar-card, .ar-directive, .archive-hero, .archive-transmission { box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } / 4) replace the border-image frames (tables, portal tiles, infoboxes, archive cards) with flat solid borders + bg / .wikitable, table.wikitable, .npc-infobox, .druid-container.npc-infobox, .mp-links > ul > li, .ar-card, .archive-hero { border-image: none !important; border: 1px solid rgba(66, 162, 241, 0.35) !important; background: #15151c !important; } / 5) hide purely-decorative glow bars / scan lines (NOT the ❖ heading markers, which are real content) / .mp-box::before, .mp-box::after, .mp-box h2::after, .mp-box .welcome-message::before, .mp-box .welcome-message::after, .npc-infobox::before, .npc-infobox::after, .npc-infobox .druid-title::before, .npc-infobox .druid-title::after, .npc-infobox .druid-section::after, .mw-footer::before, .tab-gif-container::before, .gif-display-area::before, .dlog::after, .pre-dungeon p::before, .inline-image-caption > p::before { display: none !important; } / 6) stop the looping pulse / scan / shimmer animations / .npc-infobox::before, .mw-footer::before, .boss-infobox-subtitle, .boss-infobox-subtitle::before, .dlog::after, .mp-box .welcome-message, .mp-main > .mp-links > ul > li::before, .archive-page > { animation: none !important; } } /* ============================================================ MOBILE — READABLE TABLES (added) The forced `white-space: nowrap` made text-heavy cells refuse to wrap, so tables ballooned far wider than the phone and Minerva clipped them to a sliver. Let cells wrap so the table fits the screen; shrink/contain wide bits; give genuinely wide all-number tables a horizontal swipe instead. No `display` change on the generic rule, so layout tables are unaffected. ============================================================ / @media screen and (max-width: 720px) { .mw-parser-output .wikitable, .mw-parser-output table.wikitable { width: 100% !important; margin-inline: 0 !important; } / the key fix: cells wrap instead of forcing the table off-screen / .mw-parser-output .wikitable td, .mw-parser-output .wikitable th { white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere; font-size: 0.82em !important; padding: 6px 5px !important; vertical-align: top; } / oversized in-cell icons (e.g. the 128px ruleset banners) / .mw-parser-output .wikitable td img, .mw-parser-output .wikitable th img { max-width: 64px !important; height: auto !important; } / math formulas don't wrap; shrink them and let any that are still too wide scroll inside their own box. overflow:auto also drops their min-content width to 0 so they stop stretching the cell. / .wikitable div[style="font-size:150%"], .wikitable div[style="font-size: 150%"] { font-size: 105% !important; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .wikitable .mwe-math-element, .wikitable .mwe-math-fallback-image-inline, .wikitable .mwe-math-fallback-image-display { max-width: 100%; height: auto; } / the 8-column "Max Base Class Stats" table is all short numbers — a clean left-to-right swipe reads far better than cramped wrap */ #mp-box-basestats .wikitable { display: block; width: -moz-max-content; width: max-content; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } #mp-box-basestats .wikitable td, #mp-box-basestats .wikitable th { white-space: nowrap !important; } }
common.js (talk) (Translate)	/* Any JavaScript here will be loaded for all users on every page load. */
common.js (talk) (Translate)	/* Any JavaScript here will be loaded for all users on every page load. / / DRUID / $(function () { $(".druid-main-images-label").off("click"); $(".druid-main-images-label").click(function () { var $parent = $(this).closest(".druid-container"); $parent.find(".druid-toggleable").removeClass("focused"); var i = $(this).attr("data-druid"); $parent.find(".druid-toggleable[data-druid=" + i + "]").addClass("focused"); }); $(".druid-collapsible").off("click"); $(".druid-collapsible").click(function () { var kind = $(this).attr("data-druid-section"); $(this).toggleClass("druid-collapsible-collapsed"); $(this) .closest(".druid-container") .find("[data-druid-section-row=" + kind + "]") .toggleClass("druid-collapsed"); }); $(".druid-container").on("click", ".worn-toggle-button", function (e) { e.preventDefault(); e.stopPropagation(); var $btn = $(this); var $container = $btn.closest('.has-worn-variant'); var $base = $container.find('.image-base'); var $worn = $container.find('.image-worn'); if ($container.hasClass('is-worn-active')) { $container.removeClass('is-worn-active'); $worn.hide(); $base.show(); $btn.text('Show Worn'); } else { $container.addClass('is-worn-active'); $base.hide(); $worn.show(); $btn.text('Show Normal'); } console.log("Toggle state: " + ($container.hasClass('is-worn-active') ? "Worn" : "Normal")); }); }); / End DRUID / / Sound / (function () { let currentAudio = null; let currentBtn = null; $(document).on('click', '.sound-button', function () { const $btn = $(this); const soundUrl = $btn.data('sound-file'); if (!soundUrl) return; if (currentAudio && currentBtn && currentBtn[0] === $btn[0]) { if (!currentAudio.paused) { currentAudio.pause(); currentAudio.currentTime = 0; $btn.removeClass('playing'); return; // Stop here } } if (currentAudio) { currentAudio.pause(); currentAudio.currentTime = 0; $('.sound-button').removeClass('playing'); } const audio = new Audio(soundUrl); currentAudio = audio; currentBtn = $btn; $btn.addClass('playing'); audio.play().catch(function(error) { console.error("Playback failed:", error); $btn.removeClass('playing'); }); audio.onended = function() { $btn.removeClass('playing'); currentAudio = null; currentBtn = null; }; }); })(); / End Sound / / [[Template:Spoiler]] / $(function () { $('.spoiler-content') .off('click') // in case this code is loaded twice .on('click', function(e){ $(this).toggleClass('show'); }).find('a').on('click', function(e){ e.stopPropagation(); }); }); / End Template:Spoiler / / Link to imported modules from Lua code / $(function() { var config = mw.config.get([ 'wgCanonicalNamespace', 'wgFormattedNamespaces' ]); if (config.wgCanonicalNamespace !== 'Module') { return; } var localizedNamespace = config.wgFormattedNamespaces[828]; $('.s1, .s2, .s').each(function() { var $this = $(this); var html = $this.html(); var quote = html[0]; var isLongStringQuote = quote === '['; var quoteRE = new RegExp('^\\' + quote + '\|\\' + quote + '$', 'g'); if (isLongStringQuote) { quoteRE = /^\[\[\|\]\]$/g; } var name = html.replace(quoteRE, ''); var isEnglishPrefix = name.startsWith('Module:'); var isLocalizedPrefix = name.startsWith(localizedNamespace + ':'); var isDevPrefix = name.startsWith('Dev:'); if (isEnglishPrefix \|\| isLocalizedPrefix \|\| isDevPrefix) { var attrs = { href: mw.util.getUrl(name) }; if (isDevPrefix) { attrs.href = 'https://commons.wiki.gg/wiki/Module:' + mw.util.wikiUrlencode(name.replace('Dev:', '')); attrs.target = '_blank'; attrs.rel = 'noopener'; } var link = mw.html.element('a', attrs, name); var str = quote + link + quote; if (isLongStringQuote) { str = '[[' + link + ']]'; } $this.html(str); } }); }); / dynamic gif displayer ONLY TOUCH IF YOU KNOW WHAT YOU ARE DOING / (function() { 'use strict'; console.log('Dynamic GIF Displayer: Script loading...'); // Configuration const CONFIG = { containerClass: 'dynamic-gif-container', displayClass: 'gif-display-area', autoExpand: true, expandDelay: 200, collapseDelay: 1000 }; let expandTimer = null; let collapseTimer = null; let currentGif = null; function safeCreateError(message) { const div = document.createElement('div'); div.className = 'gif-error'; div.textContent = message; return div; } function safeCreatePlaceholder(message) { const div = document.createElement('div'); div.className = 'gif-placeholder'; div.textContent = message; return div; } function init() { console.log('Dynamic GIF Displayer: Initializing...'); const containers = document.querySelectorAll('.' + CONFIG.containerClass); console.log('Dynamic GIF Displayer: Found', containers.length, 'containers'); containers.forEach(container => { console.log('Dynamic GIF Displayer: Setting up container', container.id); setupContainer(container); attachTooltipListeners(container); }); } function setupContainer(container) { const displayArea = container.querySelector('.' + CONFIG.displayClass); if (!displayArea) { console.error('Dynamic GIF Displayer: No display area found'); return; } displayArea.addEventListener('mouseenter', () => { clearTimeout(collapseTimer); }); displayArea.addEventListener('mouseleave', () => { scheduleCollapse(container); }); } function attachTooltipListeners(container) { console.log('Dynamic GIF Displayer: Attaching tooltip listeners...'); const gifMap = buildGifMap(container); console.log('Dynamic GIF Displayer: GIF map', gifMap); const tooltips = document.querySelectorAll('.advanced-tooltip'); console.log('Dynamic GIF Displayer: Found', tooltips.length, 'tooltips'); tooltips.forEach((tooltip) => { const skillTitle = tooltip.querySelector('.skill-title'); if (!skillTitle) return; const skillName = skillTitle.textContent.trim(); const gifUrl = gifMap[skillName]; console.log('Dynamic GIF Displayer: Processing tooltip:', skillName, 'GIF:', gifUrl); if (gifUrl) { // Remove old listeners if they exist if (tooltip._gifHoverHandler) { tooltip.removeEventListener('mouseenter', tooltip._gifHoverHandler); } if (tooltip._gifLeaveHandler) { tooltip.removeEventListener('mouseleave', tooltip._gifLeaveHandler); } tooltip._gifHoverHandler = () => handleTooltipHover(container, gifUrl, skillName); tooltip._gifLeaveHandler = () => scheduleCollapse(container); tooltip.addEventListener('mouseenter', tooltip._gifHoverHandler); tooltip.addEventListener('mouseleave', tooltip._gifLeaveHandler); console.log('Dynamic GIF Displayer: Attached listeners to', skillName); } }); } function buildGifMap(container) { const gifMap = {}; const listData = container.getAttribute('data-gif-list'); if (!listData) { console.error('Dynamic GIF Displayer: No data-gif-list attribute found'); return gifMap; } console.log('Dynamic GIF Displayer: Raw list data:', listData); const entries = listData.split(';').filter(e => e.trim()); console.log('Dynamic GIF Displayer: Found', entries.length, 'entries'); entries.forEach(entry => { const parts = entry.split(':'); if (parts.length >= 2) { const skillName = parts[0].trim(); const gifFile = parts.slice(1).join(':').trim(); if (skillName && gifFile) { let gifUrl; if (typeof mw !== 'undefined' && mw.config) { const scriptPath = mw.config.get('wgScriptPath') \|\| ''; gifUrl = scriptPath + '/index.php?title=Special:Redirect/file/' + encodeURIComponent(gifFile); } else { gifUrl = '/index.php?title=Special:Redirect/file/' + encodeURIComponent(gifFile); } gifMap[skillName] = gifUrl; console.log('Dynamic GIF Displayer: Mapped "' + skillName + '" to', gifUrl); } } }); return gifMap; } function handleTooltipHover(container, gifUrl, skillName) { console.log('Dynamic GIF Displayer: Hovering', skillName); clearTimeout(collapseTimer); clearTimeout(expandTimer); // Show GIF after delay (allows checking if different from current) expandTimer = setTimeout(() => { showGif(container, gifUrl, skillName); }, CONFIG.expandDelay); } function showGif(container, gifUrl, skillName) { console.log('Dynamic GIF Displayer: Showing GIF for', skillName, gifUrl); const displayArea = container.querySelector('.' + CONFIG.displayClass); if (!displayArea) return; if (!container.classList.contains('expanded')) { container.classList.add('expanded'); console.log('Dynamic GIF Displayer: Expanded container'); } const imgContainer = displayArea.querySelector('.gif-image-container'); const caption = displayArea.querySelector('.gif-caption'); // Update caption immediately if (caption) { caption.textContent = skillName; caption.style.display = 'block'; } // Only reload if different GIF if (currentGif === gifUrl) { console.log('Dynamic GIF Displayer: Already showing', skillName); return; } // Set currentGif IMMEDIATELY to prevent race conditions currentGif = gifUrl; if (imgContainer) { const placeholder = imgContainer.querySelector('.gif-placeholder'); if (placeholder) { placeholder.remove(); } // Don't set dynamic height - let CSS handle fixed sizing const gifFilename = gifUrl.split('/').pop(); const decodedFilename = decodeURIComponent(gifFilename); if (decodedFilename.toLowerCase() === 'blank' \|\| decodedFilename.toLowerCase() === 'blank.gif') { imgContainer.innerHTML = ''; imgContainer.appendChild(safeCreatePlaceholder('This node does not require a GIF due to its simplicity.')); imgContainer.classList.remove('loading'); } else { // Cancel any existing image loads const existingImg = imgContainer.querySelector('img'); if (existingImg) { existingImg.onload = null; existingImg.onerror = null; } imgContainer.classList.add('loading'); const img = document.createElement('img'); img.src = gifUrl; img.alt = skillName; // CSS handles sizing via .gif-image-container img rules // Store reference for validation const targetGif = gifUrl; img.onload = () => { // Only update if this is still the current target GIF if (currentGif === targetGif) { imgContainer.innerHTML = ''; imgContainer.appendChild(img); imgContainer.classList.remove('loading'); console.log('Dynamic GIF Displayer: GIF loaded successfully'); } else { console.log('Dynamic GIF Displayer: Discarded outdated load for', skillName); } }; img.onerror = () => { // Only update if this is still the current target GIF if (currentGif === targetGif) { imgContainer.innerHTML = ''; imgContainer.appendChild(safeCreateError('GIF not found: ' + decodedFilename)); imgContainer.classList.remove('loading'); console.error('Dynamic GIF Displayer: Failed to load GIF', gifUrl); } }; } } } function scheduleCollapse(container) { // Keep the most recent GIF displayed instead of clearing it // GIF will only change when a different skill node is hovered clearTimeout(collapseTimer); console.log('Dynamic GIF Displayer: Keeping current GIF displayed'); } window.toggleGifDisplay = function(containerId) { console.log('Dynamic GIF Displayer: Toggle clicked for', containerId); const container = document.getElementById(containerId); if (!container) { console.error('Dynamic GIF Displayer: Container not found', containerId); return; } clearTimeout(collapseTimer); if (container.style.display === 'none') { container.style.display = 'block'; } else { container.style.display = 'none'; } // Only clear the GIF when manually toggling the display off if (container.style.display === 'none') { const displayArea = container.querySelector('.' + CONFIG.displayClass); if (displayArea) { const imgContainer = displayArea.querySelector('.gif-image-container'); const caption = displayArea.querySelector('.gif-caption'); if (imgContainer) { imgContainer.innerHTML = ''; imgContainer.appendChild(safeCreatePlaceholder('Hover over a skill node to see its demonstration')); imgContainer.style.height = ''; imgContainer.style.minHeight = ''; } if (caption) { caption.textContent = ''; caption.style.display = 'none'; } } container.classList.remove('expanded'); currentGif = null; } }; if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } window.addEventListener('load', init); if (typeof mw !== 'undefined' && mw.hook) { mw.hook('wikipage.content').add(init); } const observer = new MutationObserver(function(mutations) { let shouldReinit = false; mutations.forEach(function(mutation) { if (mutation.addedNodes.length) { mutation.addedNodes.forEach(function(node) { if (node.nodeType === 1 && ( node.classList && node.classList.contains('advanced-tooltip') \|\| node.querySelector && node.querySelector('.advanced-tooltip') )) { shouldReinit = true; } }); } }); if (shouldReinit) { console.log('Dynamic GIF Displayer: Content changed, reinitializing...'); setTimeout(init, 100); } }); observer.observe(document.body, { childList: true, subtree: true }); console.log('Dynamic GIF Displayer: Script loaded'); })(); / Make mp-links clickable anywhere in the box / (function() { 'use strict'; function initMpLinksClick() { const mpLinkItems = document.querySelectorAll('.mp-links > ul > li'); mpLinkItems.forEach(item => { // Remove any existing click handler if (item._clickHandlerAttached) return; item.addEventListener('click', function(e) { // Find the first anchor tag in this li const link = this.querySelector('a'); if (link && e.target !== link) { // Trigger a click on the link link.click(); } }); item._clickHandlerAttached = true; }); } // Initialize on page load if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initMpLinksClick); } else { initMpLinksClick(); } // Reinitialize when content changes window.addEventListener('load', initMpLinksClick); if (typeof mw !== 'undefined' && mw.hook) { mw.hook('wikipage.content').add(initMpLinksClick); } // Watch for DOM changes const observer = new MutationObserver(function(mutations) { let shouldReinit = false; mutations.forEach(function(mutation) { if (mutation.addedNodes.length) { mutation.addedNodes.forEach(function(node) { if (node.nodeType === 1 && ( node.classList && node.classList.contains('mp-links') \|\| node.querySelector && node.querySelector('.mp-links') )) { shouldReinit = true; } }); } }); if (shouldReinit) { setTimeout(initMpLinksClick, 100); } }); observer.observe(document.body, { childList: true, subtree: true }); })(); (function() { 'use strict'; console.log('Tab GIF Display: Script loading...'); // Configuration const CONFIG = { containerClass: 'tab-gif-container', displayClass: 'tab-gif-display-area', tabsClass: 'tab-gif-tabs', tabClass: 'tab-gif-tab', activeTabClass: 'tab-gif-active' }; let currentContainers = new Map(); let initAttempts = 0; const MAX_INIT_ATTEMPTS = 5; function safeCreateError(message) { const div = document.createElement('div'); div.className = 'gif-error'; div.textContent = message; return div; } function safeCreatePlaceholder(message) { const div = document.createElement('div'); div.className = 'gif-placeholder'; div.textContent = message; return div; } function init() { initAttempts++; console.log('Tab GIF Display: Initializing... (attempt ' + initAttempts + ')'); const containers = document.querySelectorAll('.' + CONFIG.containerClass); console.log('Tab GIF Display: Found', containers.length, 'containers'); if (containers.length === 0 && initAttempts < MAX_INIT_ATTEMPTS) { console.log('Tab GIF Display: No containers found yet, will retry...'); setTimeout(init, 500); return; } let setupCount = 0; containers.forEach(container => { const containerId = container.id; console.log('Tab GIF Display: Checking container', containerId); if (!currentContainers.has(containerId)) { console.log('Tab GIF Display: Setting up NEW container', containerId); const success = setupContainer(container); if (success) { currentContainers.set(containerId, container); setupCount++; } } else { console.log('Tab GIF Display: Container already initialized', containerId); } }); console.log('Tab GIF Display: Successfully set up', setupCount, 'containers'); } function setupContainer(container) { console.log('Tab GIF Display: setupContainer called for', container.id); const gifMap = buildGifMap(container); console.log('Tab GIF Display: GIF map built', gifMap); if (Object.keys(gifMap).length === 0) { console.error('Tab GIF Display: No GIFs found for container', container.id); const displayArea = container.querySelector('.' + CONFIG.displayClass); if (displayArea) { const imgContainer = displayArea.querySelector('.gif-image-container'); if (imgContainer) { imgContainer.innerHTML = ''; imgContainer.appendChild(safeCreateError('No GIFs configured. Check your list parameter.')); } } return false; } createTabs(container, gifMap); // Display the first GIF by default const firstTabName = Object.keys(gifMap)[0]; console.log('Tab GIF Display: Showing first tab:', firstTabName); showGif(container, gifMap[firstTabName], firstTabName); return true; } function buildGifMap(container) { const gifMap = {}; const listData = container.getAttribute('data-gif-list'); console.log('Tab GIF Display: Building map for container', container.id); console.log('Tab GIF Display: data-gif-list attribute:', listData); if (!listData) { console.error('Tab GIF Display: No data-gif-list attribute found on', container.id); return gifMap; } if (listData.trim() === '') { console.error('Tab GIF Display: data-gif-list is empty on', container.id); return gifMap; } const entries = listData.split(';').filter(e => e.trim()); console.log('Tab GIF Display: Found', entries.length, 'entries in list'); entries.forEach((entry, index) => { console.log('Tab GIF Display: Processing entry', index, ':', entry); const parts = entry.split(':'); if (parts.length < 2) { console.warn('Tab GIF Display: Invalid entry format (no colon):', entry); return; } const tabName = parts[0].trim(); const gifFile = parts.slice(1).join(':').trim(); console.log('Tab GIF Display: Parsed - Tab:', tabName, 'File:', gifFile); if (!tabName) { console.warn('Tab GIF Display: Empty tab name in entry:', entry); return; } if (!gifFile) { console.warn('Tab GIF Display: Empty gif file in entry:', entry); return; } let gifUrl; if (typeof mw !== 'undefined' && mw.config) { const scriptPath = mw.config.get('wgScriptPath') \|\| ''; gifUrl = scriptPath + '/index.php?title=Special:Redirect/file/' + encodeURIComponent(gifFile); } else { gifUrl = '/index.php?title=Special:Redirect/file/' + encodeURIComponent(gifFile); } gifMap[tabName] = gifUrl; console.log('Tab GIF Display: Mapped "' + tabName + '" to', gifUrl); }); console.log('Tab GIF Display: Final map has', Object.keys(gifMap).length, 'entries'); return gifMap; } function createTabs(container, gifMap) { const tabsContainer = container.querySelector('.' + CONFIG.tabsClass); if (!tabsContainer) { console.error('Tab GIF Display: No tabs container found in', container.id); return; } console.log('Tab GIF Display: Creating tabs in', container.id); tabsContainer.innerHTML = ''; let isFirst = true; let tabCount = 0; Object.keys(gifMap).forEach(tabName => { const tab = document.createElement('button'); tab.className = CONFIG.tabClass; tab.textContent = tabName; tab.setAttribute('data-tab-name', tabName); tab.type = 'button'; if (isFirst) { tab.classList.add(CONFIG.activeTabClass); isFirst = false; } tab.addEventListener('click', () => { console.log('Tab GIF Display: Tab clicked:', tabName); handleTabClick(container, gifMap, tabName); }); tabsContainer.appendChild(tab); tabCount++; console.log('Tab GIF Display: Created tab button for', tabName); }); console.log('Tab GIF Display: Created', tabCount, 'tabs total'); } function handleTabClick(container, gifMap, tabName) { console.log('Tab GIF Display: Handling tab click for', tabName); const tabs = container.querySelectorAll('.' + CONFIG.tabClass); tabs.forEach(tab => { if (tab.getAttribute('data-tab-name') === tabName) { tab.classList.add(CONFIG.activeTabClass); } else { tab.classList.remove(CONFIG.activeTabClass); } }); const gifUrl = gifMap[tabName]; showGif(container, gifUrl, tabName); } function showGif(container, gifUrl, tabName) { console.log('Tab GIF Display: Showing GIF for', tabName, '-', gifUrl); const displayArea = container.querySelector('.' + CONFIG.displayClass); if (!displayArea) { console.error('Tab GIF Display: No display area found'); return; } const rawSize = container.getAttribute('data-gif-size') \|\| '400'; const gifSize = rawSize.replace(/[^0-9]/g, '') \|\| '400'; const imgContainer = displayArea.querySelector('.gif-image-container'); const caption = displayArea.querySelector('.gif-caption'); if (imgContainer) { const placeholder = imgContainer.querySelector('.gif-placeholder'); if (placeholder) { placeholder.remove(); } imgContainer.style.height = gifSize + 'px'; imgContainer.style.minHeight = gifSize + 'px'; const gifFilename = gifUrl.split('/').pop(); const decodedFilename = decodeURIComponent(gifFilename); if (decodedFilename.toLowerCase() === 'blank' \|\| decodedFilename.toLowerCase() === 'blank.gif') { imgContainer.innerHTML = ''; imgContainer.appendChild(safeCreatePlaceholder('No GIF available for this tab.')); imgContainer.classList.remove('loading'); } else { const oldImg = imgContainer.querySelector('img'); const img = document.createElement('img'); img.src = gifUrl; img.alt = tabName; img.style.maxHeight = gifSize + 'px'; img.style.opacity = '0'; img.style.position = 'absolute'; img.style.transition = 'opacity 0.2s ease'; img.onload = () => { if (oldImg) { oldImg.style.transition = 'opacity 0.15s ease'; oldImg.style.opacity = '0'; setTimeout(() => { imgContainer.innerHTML = ''; img.style.position = 'relative'; img.style.opacity = '1'; imgContainer.appendChild(img); imgContainer.classList.remove('loading'); }, 150); } else { imgContainer.innerHTML = ''; img.style.position = 'relative'; img.style.opacity = '1'; imgContainer.appendChild(img); imgContainer.classList.remove('loading'); } console.log('Tab GIF Display: GIF loaded successfully'); }; img.onerror = () => { imgContainer.innerHTML = ''; imgContainer.appendChild(safeCreateError('GIF not found: ' + decodedFilename)); imgContainer.classList.remove('loading'); console.error('Tab GIF Display: Failed to load GIF', gifUrl); }; if (!oldImg) { imgContainer.appendChild(img); imgContainer.classList.add('loading'); } } } if (caption) { caption.textContent = tabName; caption.style.display = 'block'; } } window.toggleTabGifDisplay = function(containerId) { console.log('Tab GIF Display: Toggle clicked for', containerId); const container = document.getElementById(containerId); if (!container) { console.error('Tab GIF Display: Container not found', containerId); return; } if (container.style.display === 'none') { container.style.display = 'block'; } else { container.style.display = 'none'; } }; if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } window.addEventListener('load', init); if (typeof mw !== 'undefined' && mw.hook) { mw.hook('wikipage.content').add(init); } const observer = new MutationObserver(function(mutations) { let shouldReinit = false; mutations.forEach(function(mutation) { if (mutation.addedNodes.length) { mutation.addedNodes.forEach(function(node) { if (node.nodeType === 1 && ( node.classList && node.classList.contains(CONFIG.containerClass) \|\| node.querySelector && node.querySelector('.' + CONFIG.containerClass) )) { shouldReinit = true; } }); } }); if (shouldReinit) { console.log('Tab GIF Display: Content changed, reinitializing...'); setTimeout(init, 100); } }); observer.observe(document.body, { childList: true, subtree: true }); console.log('Tab GIF Display: Script loaded and ready'); })(); (function () { const images = [ 'url(/wiki/Special:Redirect/file/Site-background-image.jpg)', 'url(/wiki/Special:Redirect/file/Site-background-image2.jpg)', 'url(/wiki/Special:Redirect/file/Site-background-image3.jpg)', 'url(/wiki/Special:Redirect/file/Site-background-image4.jpg)', 'url(/wiki/Special:Redirect/file/Site-background-image5.jpg)', ]; function seededRandom(seed) { let x = Math.sin(seed 9999) * 10000; return x - Math.floor(x); } const day = new Date().getDate(); const pick1 = Math.floor(seededRandom(day) * images.length); let pick2 = Math.floor(seededRandom(day + 1) * images.length); if (pick2 === pick1) { pick2 = (pick1 + 1) % images.length; } document.body.style.backgroundImage = images[pick1]; const footer = document.querySelector('.mw-footer'); if (footer) { footer.style.backgroundImage = images[pick2]; } })(); /* Archives main page: whole-card navigation. Clicking anywhere on a record card or directive follows its title link; clicks on actual links (sublinks, icons) are left alone. / (function () { 'use strict'; document.addEventListener('click', function (e) { var card = e.target.closest('.ar-card, .ar-directive'); if (!card \|\| e.target.closest('a')) return; var link = card.querySelector('.ar-card-titles a, .ar-directive-title a') \|\| card.querySelector('a'); if (link) link.click(); }); })(); (function () { 'use strict'; function fullSizeUrl(img) { var src = img.currentSrc \|\| img.src; var m = src.match(/^(.)\/thumb\/(.+)\/[0-9]+px-[^\/]+$/); return m ? (m[1] + '/' + m[2]) : src; } function captionFor(img) { var thumb = img.closest('.thumb'); if (thumb) { var tc = thumb.querySelector('.thumbcaption'); if (tc) return tc.textContent.trim(); } var inl = img.closest('.inline-image-template'); if (inl) { var ic = inl.querySelector('.inline-image-caption'); if (ic) return ic.textContent.trim(); } return ''; } function overlay() { var el = document.querySelector('.nx-lightbox-overlay'); if (el) return el; el = document.createElement('div'); el.className = 'nx-lightbox-overlay'; el.innerHTML = '<span class="nx-lightbox-close">×</span><img alt="">' + '<div class="nx-lightbox-caption"></div>'; document.body.appendChild(el); el.addEventListener('click', function (e) { if (e.target === el \|\| e.target.classList.contains('nx-lightbox-close')) { close(); } }); return el; } function close() { var el = document.querySelector('.nx-lightbox-overlay'); if (el) el.classList.remove('active'); } document.addEventListener('keydown', function (e) { if (e.key === 'Escape') close(); }); document.addEventListener('click', function (e) { var img = e.target.closest('.nexus-page .thumb img, .nexus-page .inline-image-image img'); if (!img) return; e.preventDefault(); var el = overlay(); el.querySelector('img').src = fullSizeUrl(img); el.querySelector('.nx-lightbox-caption').textContent = captionFor(img); el.classList.add('active'); }); })();
communityconfiguration-cite-description (talk) (Translate)	Customize the format and appearance of references.
communityconfiguration-cite-title (talk) (Translate)	Cite
communityconfiguration-templatedata-featuredtemplates-description (talk) (Translate)	Featured templates are templates that have been marked as useful by the community. They are available for use in the template discovery tool.
communityconfiguration-templatedata-featuredtemplates-featuredtemplates-label (talk) (Translate)	Featured templates

First pagePrevious pageNext pageLast page