https://whatafinefellowsaidhisnamewashades.trumpetz.com/index.php/Special:RecentChanges Track the most recent changes to the wiki in this feed. en MediaWiki 1.45.3 Fri, 17 Apr 2026 09:38:19 GMT https://whatafinefellowsaidhisnamewashades.trumpetz.com/index.php?title=MediaWiki:Common.js&diff=3&oldid=0 https://whatafinefellowsaidhisnamewashades.trumpetz.com/index.php?title=MediaWiki:Common.js&diff=3&oldid=0 <p>Created page with &quot;<span class="autocomment">================================================================ H A D E S — MediaWiki Common.js Ambient: dripping candles, crimson wires, roses, flame glow ================================================================: </span> ( function () { &#039;use strict&#039;; <span class="autocomment">── SVG ELEMENTS ────────────────────────────────────────────: </span> var SVGS = { // Tall candle wit...&quot;</p> <p><b>New page</b></p><div>/* ================================================================<br /> H A D E S — MediaWiki Common.js<br /> Ambient: dripping candles, crimson wires, roses, flame glow<br /> ================================================================ */<br /> <br /> ( function () {<br /> &#039;use strict&#039;;<br /> <br /> /* ── SVG ELEMENTS ──────────────────────────────────────────── */<br /> <br /> var SVGS = {<br /> <br /> // Tall candle with dripping wax and animated flame<br /> candle_tall: function ( id, glowColor ) {<br /> glowColor = glowColor || &#039;#f5a020&#039;;<br /> return [<br /> &#039;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 40 140&quot; class=&quot;h-candle-el&quot;&gt;&#039;,<br /> &#039;&lt;defs&gt;&#039;,<br /> &#039;&lt;radialGradient id=&quot;cg&#039; + id + &#039;&quot; cx=&quot;50%&quot; cy=&quot;80%&quot;&gt;&#039;,<br /> &#039;&lt;stop offset=&quot;0%&quot; stop-color=&quot;&#039; + glowColor + &#039;&quot; stop-opacity=&quot;0.4&quot;/&gt;&#039;,<br /> &#039;&lt;stop offset=&quot;100%&quot; stop-color=&quot;&#039; + glowColor + &#039;&quot; stop-opacity=&quot;0&quot;/&gt;&#039;,<br /> &#039;&lt;/radialGradient&gt;&#039;,<br /> &#039;&lt;/defs&gt;&#039;,<br /> &#039;&lt;!-- glow pool --&gt;&#039;,<br /> &#039;&lt;ellipse cx=&quot;20&quot; cy=&quot;128&quot; rx=&quot;18&quot; ry=&quot;8&quot; fill=&quot;url(#cg&#039; + id + &#039;)&quot;/&gt;&#039;,<br /> &#039;&lt;!-- candle body --&gt;&#039;,<br /> &#039;&lt;rect x=&quot;13&quot; y=&quot;60&quot; width=&quot;14&quot; height=&quot;68&quot; rx=&quot;2&quot;&#039;,<br /> &#039; fill=&quot;#fdf0d0&quot; stroke=&quot;#e0c890&quot; stroke-width=&quot;0.5&quot;/&gt;&#039;,<br /> &#039;&lt;!-- wax left drip --&gt;&#039;,<br /> &#039;&lt;path d=&quot;M14,75 Q12,85 13,98 Q14,104 15,108&quot; stroke=&quot;#f5e8c0&quot;&#039;,<br /> &#039; stroke-width=&quot;4&quot; fill=&quot;none&quot; stroke-linecap=&quot;round&quot; opacity=&quot;0.7&quot;/&gt;&#039;,<br /> &#039;&lt;!-- wax right drip --&gt;&#039;,<br /> &#039;&lt;path d=&quot;M26,82 Q28,93 27,106 Q26.5,110 26,115&quot; stroke=&quot;#f5e8c0&quot;&#039;,<br /> &#039; stroke-width=&quot;3.5&quot; fill=&quot;none&quot; stroke-linecap=&quot;round&quot; opacity=&quot;0.6&quot;/&gt;&#039;,<br /> &#039;&lt;!-- wick --&gt;&#039;,<br /> &#039;&lt;line x1=&quot;20&quot; y1=&quot;60&quot; x2=&quot;20&quot; y2=&quot;52&quot; stroke=&quot;#3a2010&quot; stroke-width=&quot;1.2&quot;/&gt;&#039;,<br /> &#039;&lt;!-- flame outer (animated sway) --&gt;&#039;,<br /> &#039;&lt;g class=&quot;h-candle-flame&quot;&gt;&#039;,<br /> &#039;&lt;ellipse cx=&quot;20&quot; cy=&quot;42&quot; rx=&quot;7&quot; ry=&quot;11&quot; fill=&quot;&#039; + glowColor + &#039;&quot; opacity=&quot;0.85&quot;/&gt;&#039;,<br /> &#039;&lt;ellipse cx=&quot;20&quot; cy=&quot;44&quot; rx=&quot;4.5&quot; ry=&quot;8&quot; fill=&quot;#ffdb60&quot; opacity=&quot;0.9&quot;/&gt;&#039;,<br /> &#039;&lt;ellipse cx=&quot;20&quot; cy=&quot;47&quot; rx=&quot;2.5&quot; ry=&quot;5&quot; fill=&quot;#fff5c0&quot; opacity=&quot;0.95&quot;/&gt;&#039;,<br /> &#039;&lt;/g&gt;&#039;,<br /> &#039;&lt;/svg&gt;&#039;<br /> ].join( &#039;&#039; );<br /> },<br /> <br /> // Short squat candle<br /> candle_short: function ( id ) {<br /> return [<br /> &#039;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 30 80&quot; class=&quot;h-candle-el&quot;&gt;&#039;,<br /> &#039;&lt;defs&gt;&#039;,<br /> &#039;&lt;radialGradient id=&quot;cgs&#039; + id + &#039;&quot; cx=&quot;50%&quot; cy=&quot;80%&quot;&gt;&#039;,<br /> &#039;&lt;stop offset=&quot;0%&quot; stop-color=&quot;#f5a020&quot; stop-opacity=&quot;0.3&quot;/&gt;&#039;,<br /> &#039;&lt;stop offset=&quot;100%&quot; stop-color=&quot;#f5a020&quot; stop-opacity=&quot;0&quot;/&gt;&#039;,<br /> &#039;&lt;/radialGradient&gt;&#039;,<br /> &#039;&lt;/defs&gt;&#039;,<br /> &#039;&lt;ellipse cx=&quot;15&quot; cy=&quot;74&quot; rx=&quot;13&quot; ry=&quot;5&quot; fill=&quot;url(#cgs&#039; + id + &#039;)&quot;/&gt;&#039;,<br /> &#039;&lt;rect x=&quot;8&quot; y=&quot;38&quot; width=&quot;14&quot; height=&quot;36&quot; rx=&quot;1.5&quot; fill=&quot;#fdf0d0&quot; stroke=&quot;#e0c890&quot; stroke-width=&quot;0.5&quot;/&gt;&#039;,<br /> &#039;&lt;!-- pooled wax at base --&gt;&#039;,<br /> &#039;&lt;ellipse cx=&quot;15&quot; cy=&quot;74&quot; rx=&quot;12&quot; ry=&quot;3&quot; fill=&quot;#f8f0d8&quot; opacity=&quot;0.6&quot;/&gt;&#039;,<br /> &#039;&lt;!-- drips --&gt;&#039;,<br /> &#039;&lt;path d=&quot;M9,48 Q7,56 8,66&quot; stroke=&quot;#f5e8c0&quot; stroke-width=&quot;3&quot; fill=&quot;none&quot; stroke-linecap=&quot;round&quot; opacity=&quot;0.65&quot;/&gt;&#039;,<br /> &#039;&lt;path d=&quot;M22,52 Q24,60 23,70&quot; stroke=&quot;#f5e8c0&quot; stroke-width=&quot;2.5&quot; fill=&quot;none&quot; stroke-linecap=&quot;round&quot; opacity=&quot;0.55&quot;/&gt;&#039;,<br /> &#039;&lt;line x1=&quot;15&quot; y1=&quot;38&quot; x2=&quot;15&quot; y2=&quot;32&quot; stroke=&quot;#3a2010&quot; stroke-width=&quot;1&quot;/&gt;&#039;,<br /> &#039;&lt;g class=&quot;h-candle-flame&quot;&gt;&#039;,<br /> &#039;&lt;ellipse cx=&quot;15&quot; cy=&quot;25&quot; rx=&quot;5.5&quot; ry=&quot;9&quot; fill=&quot;#f5a020&quot; opacity=&quot;0.85&quot;/&gt;&#039;,<br /> &#039;&lt;ellipse cx=&quot;15&quot; cy=&quot;27&quot; rx=&quot;3.5&quot; ry=&quot;6.5&quot; fill=&quot;#ffdb60&quot; opacity=&quot;0.9&quot;/&gt;&#039;,<br /> &#039;&lt;ellipse cx=&quot;15&quot; cy=&quot;29&quot; rx=&quot;2&quot; ry=&quot;4&quot; fill=&quot;#fff5c0&quot; opacity=&quot;0.95&quot;/&gt;&#039;,<br /> &#039;&lt;/g&gt;&#039;,<br /> &#039;&lt;/svg&gt;&#039;<br /> ].join( &#039;&#039; );<br /> },<br /> <br /> // Crimson wire / tendril<br /> wire: function ( id, w, h, color ) {<br /> color = color || &#039;#8b1515&#039;;<br /> var path = &#039;M&#039; + Math.floor( w * 0.1 ) + &#039;,0 &#039;<br /> + &#039;C&#039; + Math.floor( w * 0.3 ) + &#039;,&#039; + Math.floor( h * 0.2 ) + &#039; &#039;<br /> + Math.floor( w * 0.6 ) + &#039;,&#039; + Math.floor( h * 0.4 ) + &#039; &#039;<br /> + Math.floor( w * 0.7 ) + &#039;,&#039; + Math.floor( h * 0.6 ) + &#039; &#039;<br /> + &#039;S&#039; + Math.floor( w * 0.9 ) + &#039;,&#039; + Math.floor( h * 0.85 ) + &#039; &#039;<br /> + w + &#039;,&#039; + h;<br /> return [<br /> &#039;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 &#039; + w + &#039; &#039; + h + &#039;&quot;&#039;,<br /> &#039; class=&quot;h-wire&quot; width=&quot;&#039; + w + &#039;&quot; height=&quot;&#039; + h + &#039;&quot;&gt;&#039;,<br /> &#039;&lt;path d=&quot;&#039; + path + &#039;&quot; fill=&quot;none&quot; stroke=&quot;&#039; + color + &#039;&quot; stroke-width=&quot;2&quot;&#039;,<br /> &#039; stroke-dasharray=&quot;6,4&quot; stroke-linecap=&quot;round&quot;/&gt;&#039;,<br /> &#039;&lt;!-- secondary curl --&gt;&#039;,<br /> &#039;&lt;path d=&quot;M&#039; + Math.floor( w * 0.3 ) + &#039;,&#039; + Math.floor( h * 0.1 ) + &#039; &#039;,<br /> &#039;Q&#039; + Math.floor( w * 0.5 ) + &#039;,&#039; + Math.floor( h * 0.5 ) + &#039; &#039;,<br /> Math.floor( w * 0.4 ) + &#039;,&#039; + h + &#039;&quot;&#039;,<br /> &#039; fill=&quot;none&quot; stroke=&quot;&#039; + color + &#039;&quot; stroke-width=&quot;1.2&quot; opacity=&quot;0.5&quot;&#039;,<br /> &#039; stroke-dasharray=&quot;4,6&quot;/&gt;&#039;,<br /> &#039;&lt;/svg&gt;&#039;<br /> ].join( &#039;&#039; );<br /> },<br /> <br /> // Dried rose silhouette<br /> rose: function () {<br /> return [<br /> &#039;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 80 120&quot; class=&quot;h-rose&quot;&gt;&#039;,<br /> &#039;&lt;!-- stem --&gt;&#039;,<br /> &#039;&lt;path d=&quot;M40,120 Q38,90 40,70&quot; stroke=&quot;#3a2a10&quot; stroke-width=&quot;2&quot; fill=&quot;none&quot;/&gt;&#039;,<br /> &#039;&lt;!-- thorns --&gt;&#039;,<br /> &#039;&lt;path d=&quot;M39,100 L32,96 M39,88 L46,84&quot; stroke=&quot;#3a2a10&quot; stroke-width=&quot;1.5&quot; fill=&quot;none&quot;/&gt;&#039;,<br /> &#039;&lt;!-- leaves --&gt;&#039;,<br /> &#039;&lt;ellipse cx=&quot;32&quot; cy=&quot;95&quot; rx=&quot;10&quot; ry=&quot;5&quot; fill=&quot;#4a3a18&quot; opacity=&quot;0.6&quot; transform=&quot;rotate(-30,32,95)&quot;/&gt;&#039;,<br /> &#039;&lt;ellipse cx=&quot;48&quot; cy=&quot;82&quot; rx=&quot;10&quot; ry=&quot;5&quot; fill=&quot;#4a3a18&quot; opacity=&quot;0.6&quot; transform=&quot;rotate(30,48,82)&quot;/&gt;&#039;,<br /> &#039;&lt;!-- petals - outer ring --&gt;&#039;,<br /> &#039;&lt;ellipse cx=&quot;40&quot; cy=&quot;48&quot; rx=&quot;14&quot; ry=&quot;22&quot; fill=&quot;#6a2020&quot; opacity=&quot;0.7&quot; transform=&quot;rotate(0,40,48)&quot;/&gt;&#039;,<br /> &#039;&lt;ellipse cx=&quot;40&quot; cy=&quot;48&quot; rx=&quot;14&quot; ry=&quot;22&quot; fill=&quot;#6a2020&quot; opacity=&quot;0.6&quot; transform=&quot;rotate(60,40,48)&quot;/&gt;&#039;,<br /> &#039;&lt;ellipse cx=&quot;40&quot; cy=&quot;48&quot; rx=&quot;14&quot; ry=&quot;22&quot; fill=&quot;#6a2020&quot; opacity=&quot;0.6&quot; transform=&quot;rotate(120,40,48)&quot;/&gt;&#039;,<br /> &#039;&lt;!-- petals - inner ring --&gt;&#039;,<br /> &#039;&lt;ellipse cx=&quot;40&quot; cy=&quot;48&quot; rx=&quot;10&quot; ry=&quot;16&quot; fill=&quot;#8b2828&quot; opacity=&quot;0.75&quot; transform=&quot;rotate(30,40,48)&quot;/&gt;&#039;,<br /> &#039;&lt;ellipse cx=&quot;40&quot; cy=&quot;48&quot; rx=&quot;10&quot; ry=&quot;16&quot; fill=&quot;#8b2828&quot; opacity=&quot;0.75&quot; transform=&quot;rotate(90,40,48)&quot;/&gt;&#039;,<br /> &#039;&lt;ellipse cx=&quot;40&quot; cy=&quot;48&quot; rx=&quot;10&quot; ry=&quot;16&quot; fill=&quot;#8b2828&quot; opacity=&quot;0.75&quot; transform=&quot;rotate(150,40,48)&quot;/&gt;&#039;,<br /> &#039;&lt;!-- center --&gt;&#039;,<br /> &#039;&lt;circle cx=&quot;40&quot; cy=&quot;48&quot; r=&quot;8&quot; fill=&quot;#4a1010&quot; opacity=&quot;0.9&quot;/&gt;&#039;,<br /> &#039;&lt;circle cx=&quot;40&quot; cy=&quot;48&quot; r=&quot;4&quot; fill=&quot;#6a2828&quot; opacity=&quot;0.8&quot;/&gt;&#039;,<br /> &#039;&lt;/svg&gt;&#039;<br /> ].join( &#039;&#039; );<br /> },<br /> <br /> // Candle wax pool (flat puddle)<br /> waxPool: function ( id ) {<br /> return [<br /> &#039;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 60 20&quot; class=&quot;h-rose&quot;&gt;&#039;,<br /> &#039;&lt;ellipse cx=&quot;30&quot; cy=&quot;12&quot; rx=&quot;28&quot; ry=&quot;8&quot; fill=&quot;#f8f0d8&quot; opacity=&quot;0.6&quot;/&gt;&#039;,<br /> &#039;&lt;ellipse cx=&quot;30&quot; cy=&quot;10&quot; rx=&quot;20&quot; ry=&quot;5&quot; fill=&quot;#fdf5e0&quot; opacity=&quot;0.4&quot;/&gt;&#039;,<br /> &#039;&lt;/svg&gt;&#039;<br /> ].join( &#039;&#039; );<br /> },<br /> <br /> // Gothic arch ornament<br /> archOrnament: function () {<br /> return [<br /> &#039;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 120 80&quot; class=&quot;h-rose&quot;&gt;&#039;,<br /> &#039;&lt;path d=&quot;M10,80 L10,40 Q10,10 60,5 Q110,10 110,40 L110,80&quot;&#039;,<br /> &#039; fill=&quot;none&quot; stroke=&quot;#8b5530&quot; stroke-width=&quot;1.5&quot; opacity=&quot;0.5&quot;/&gt;&#039;,<br /> &#039;&lt;path d=&quot;M25,80 L25,45 Q25,25 60,20 Q95,25 95,45 L95,80&quot;&#039;,<br /> &#039; fill=&quot;none&quot; stroke=&quot;#c4922a&quot; stroke-width=&quot;1&quot; opacity=&quot;0.3&quot;/&gt;&#039;,<br /> &#039;&lt;!-- finial --&gt;&#039;,<br /> &#039;&lt;circle cx=&quot;60&quot; cy=&quot;4&quot; r=&quot;5&quot; fill=&quot;none&quot; stroke=&quot;#8b5530&quot; stroke-width=&quot;1.5&quot; opacity=&quot;0.5&quot;/&gt;&#039;,<br /> &#039;&lt;line x1=&quot;60&quot; y1=&quot;-4&quot; x2=&quot;60&quot; y2=&quot;9&quot; stroke=&quot;#8b5530&quot; stroke-width=&quot;1&quot; opacity=&quot;0.4&quot;/&gt;&#039;,<br /> &#039;&lt;/svg&gt;&#039;<br /> ].join( &#039;&#039; );<br /> },<br /> <br /> // Sacred heart (album motif)<br /> sacredHeart: function () {<br /> return [<br /> &#039;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 80 90&quot; class=&quot;h-rose&quot;&gt;&#039;,<br /> &#039;&lt;!-- heart body --&gt;&#039;,<br /> &#039;&lt;path d=&quot;M40,75 Q10,55 10,35 Q10,18 25,18 Q33,18 40,28 Q47,18 55,18 Q70,18 70,35 Q70,55 40,75Z&quot;&#039;,<br /> &#039; fill=&quot;#7a1515&quot; opacity=&quot;0.8&quot;/&gt;&#039;,<br /> &#039;&lt;!-- cross on top --&gt;&#039;,<br /> &#039;&lt;line x1=&quot;40&quot; y1=&quot;5&quot; x2=&quot;40&quot; y2=&quot;22&quot; stroke=&quot;#c4922a&quot; stroke-width=&quot;2&quot;/&gt;&#039;,<br /> &#039;&lt;line x1=&quot;33&quot; y1=&quot;12&quot; x2=&quot;47&quot; y2=&quot;12&quot; stroke=&quot;#c4922a&quot; stroke-width=&quot;2&quot;/&gt;&#039;,<br /> &#039;&lt;!-- thorns wrapped around heart --&gt;&#039;,<br /> &#039;&lt;path d=&quot;M15,38 Q5,30 12,22 Q18,14 25,20&quot; fill=&quot;none&quot; stroke=&quot;#3a2010&quot; stroke-width=&quot;1.5&quot;/&gt;&#039;,<br /> &#039;&lt;path d=&quot;M65,38 Q75,30 68,22 Q62,14 55,20&quot; fill=&quot;none&quot; stroke=&quot;#3a2010&quot; stroke-width=&quot;1.5&quot;/&gt;&#039;,<br /> &#039;&lt;!-- flame on heart --&gt;&#039;,<br /> &#039;&lt;ellipse cx=&quot;40&quot; cy=&quot;18&quot; rx=&quot;5&quot; ry=&quot;8&quot; fill=&quot;#f5a020&quot; opacity=&quot;0.7&quot;/&gt;&#039;,<br /> &#039;&lt;ellipse cx=&quot;40&quot; cy=&quot;20&quot; rx=&quot;3&quot; ry=&quot;5&quot; fill=&quot;#fff5c0&quot; opacity=&quot;0.8&quot;/&gt;&#039;,<br /> &#039;&lt;/svg&gt;&#039;<br /> ].join( &#039;&#039; );<br /> },<br /> <br /> // Crown silhouette (worn by figure in cover)<br /> crown: function () {<br /> return [<br /> &#039;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 100 60&quot; class=&quot;h-rose&quot;&gt;&#039;,<br /> &#039;&lt;path d=&quot;M5,55 L5,25 L25,5 L50,30 L75,5 L95,25 L95,55 Z&quot;&#039;,<br /> &#039; fill=&quot;none&quot; stroke=&quot;#c4922a&quot; stroke-width=&quot;1.5&quot; opacity=&quot;0.6&quot;&#039;,<br /> &#039; stroke-linejoin=&quot;round&quot;/&gt;&#039;,<br /> &#039;&lt;!-- jewels --&gt;&#039;,<br /> &#039;&lt;circle cx=&quot;25&quot; cy=&quot;5&quot; r=&quot;4&quot; fill=&quot;#c4922a&quot; opacity=&quot;0.5&quot;/&gt;&#039;,<br /> &#039;&lt;circle cx=&quot;50&quot; cy=&quot;30&quot; r=&quot;5&quot; fill=&quot;#8878b8&quot; opacity=&quot;0.5&quot;/&gt;&#039;,<br /> &#039;&lt;circle cx=&quot;75&quot; cy=&quot;5&quot; r=&quot;4&quot; fill=&quot;#c4922a&quot; opacity=&quot;0.5&quot;/&gt;&#039;,<br /> &#039;&lt;circle cx=&quot;50&quot; cy=&quot;5&quot; r=&quot;3&quot; fill=&quot;#fdf0d0&quot; opacity=&quot;0.4&quot;/&gt;&#039;,<br /> &#039;&lt;/svg&gt;&#039;<br /> ].join( &#039;&#039; );<br /> },<br /> <br /> // Mirror / oval frame<br /> mirrorFrame: function () {<br /> return [<br /> &#039;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 100 140&quot; class=&quot;h-rose&quot;&gt;&#039;,<br /> &#039;&lt;!-- outer frame --&gt;&#039;,<br /> &#039;&lt;path d=&quot;M50,5 Q90,5 90,50 L90,100 Q90,135 50,135 Q10,135 10,100 L10,50 Q10,5 50,5Z&quot;&#039;,<br /> &#039; fill=&quot;none&quot; stroke=&quot;#8b5530&quot; stroke-width=&quot;3&quot; opacity=&quot;0.5&quot;/&gt;&#039;,<br /> &#039;&lt;!-- inner --&gt;&#039;,<br /> &#039;&lt;path d=&quot;M50,15 Q80,15 80,50 L80,100 Q80,125 50,125 Q20,125 20,100 L20,50 Q20,15 50,15Z&quot;&#039;,<br /> &#039; fill=&quot;none&quot; stroke=&quot;#c4922a&quot; stroke-width=&quot;1&quot; opacity=&quot;0.3&quot;/&gt;&#039;,<br /> &#039;&lt;!-- gothic arch top --&gt;&#039;,<br /> &#039;&lt;path d=&quot;M30,5 Q50,-8 70,5&quot; fill=&quot;none&quot; stroke=&quot;#c4922a&quot; stroke-width=&quot;2&quot; opacity=&quot;0.4&quot;/&gt;&#039;,<br /> &#039;&lt;!-- finial --&gt;&#039;,<br /> &#039;&lt;polygon points=&quot;50,-5 53,8 47,8&quot; fill=&quot;#c4922a&quot; opacity=&quot;0.45&quot;/&gt;&#039;,<br /> &#039;&lt;!-- base --&gt;&#039;,<br /> &#039;&lt;rect x=&quot;35&quot; y=&quot;132&quot; width=&quot;30&quot; height=&quot;8&quot; rx=&quot;2&quot; fill=&quot;#8b5530&quot; opacity=&quot;0.4&quot;/&gt;&#039;,<br /> &#039;&lt;/svg&gt;&#039;<br /> ].join( &#039;&#039; );<br /> }<br /> <br /> };<br /> <br /> /* ── HELPERS ────────────────────────────────────────────────── */<br /> <br /> function rand( a, b ) { return Math.random() * ( b - a ) + a; }<br /> function randInt( a, b ) { return Math.floor( rand( a, b + 1 ) ); }<br /> <br /> function el( tag, styles, html ) {<br /> var d = document.createElement( tag || &#039;div&#039; );<br /> if ( styles ) { d.style.cssText = styles; }<br /> if ( html ) { d.innerHTML = html; }<br /> return d;<br /> }<br /> <br /> /* ── AMBIENT CONTAINER ──────────────────────────────────────── */<br /> <br /> function makeContainer() {<br /> var c = document.createElement( &#039;div&#039; );<br /> c.id = &#039;h-ambient&#039;;<br /> c.className = &#039;h-candles-container&#039;;<br /> document.body.insertBefore( c, document.body.firstChild );<br /> return c;<br /> }<br /> <br /> /* ── CANDLE POSITIONS ───────────────────────────────────────── */<br /> // Place candles along bottom edge and occasionally rising mid-page<br /> // They are FIXED position so they never push layout<br /> <br /> var CANDLE_CONFIGS = [<br /> // Bottom row of candles (various heights)<br /> { type: &#039;tall&#039;, left: 2, scale: 1.2, delay: 0 },<br /> { type: &#039;short&#039;, left: 5, scale: 0.9, delay: 0.8 },<br /> { type: &#039;tall&#039;, left: 8, scale: 0.75, delay: 1.5 },<br /> { type: &#039;short&#039;, left: 12, scale: 1.1, delay: 2.2 },<br /> { type: &#039;tall&#039;, left: 15, scale: 0.85, delay: 0.4 },<br /> { type: &#039;short&#039;, left: 82, scale: 1.0, delay: 1.1 },<br /> { type: &#039;tall&#039;, left: 86, scale: 0.8, delay: 1.8 },<br /> { type: &#039;short&#039;, left: 89, scale: 1.15, delay: 0.6 },<br /> { type: &#039;tall&#039;, left: 93, scale: 0.9, delay: 2.5 },<br /> { type: &#039;short&#039;, left: 96, scale: 1.3, delay: 0.2 },<br /> // A few scattered mid positions<br /> { type: &#039;short&#039;, left: 45, scale: 0.6, delay: 3.0, top: 70 },<br /> { type: &#039;short&#039;, left: 55, scale: 0.55, delay: 2.0, top: 75 },<br /> ];<br /> <br /> function spawnCandles( container ) {<br /> CANDLE_CONFIGS.forEach( function ( cfg, i ) {<br /> var svgStr = cfg.type === &#039;tall&#039;<br /> ? SVGS.candle_tall( i, ( i % 3 === 0 ) ? &#039;#f5a020&#039; : ( i % 3 === 1 ) ? &#039;#d4820a&#039; : &#039;#ffcc60&#039; )<br /> : SVGS.candle_short( i );<br /> <br /> var baseH = cfg.type === &#039;tall&#039; ? 140 : 80;<br /> var h = baseH * cfg.scale;<br /> var hasTop = cfg.top != null;<br /> <br /> var style = [<br /> &#039;position:fixed&#039;,<br /> &#039;pointer-events:none&#039;,<br /> &#039;z-index:9982&#039;,<br /> hasTop<br /> ? &#039;top:&#039; + cfg.top + &#039;vh&#039;<br /> : &#039;bottom:0px&#039;,<br /> &#039;left:&#039; + cfg.left + &#039;vw&#039;,<br /> &#039;width:&#039; + Math.round( ( cfg.type === &#039;tall&#039; ? 40 : 30 ) * cfg.scale ) + &#039;px&#039;,<br /> &#039;height:&#039; + Math.round( h ) + &#039;px&#039;,<br /> &#039;animation-delay:&#039; + cfg.delay + &#039;s,&#039; + ( cfg.delay * 0.7 ) + &#039;s&#039;,<br /> &#039;filter:drop-shadow(0 0 12px rgba(245,160,32,&#039; + ( 0.25 + Math.random() * 0.2 ) + &#039;))&#039;<br /> ].join( &#039;;&#039; );<br /> <br /> var wrapper = document.createElement( &#039;div&#039; );<br /> wrapper.style.cssText = style;<br /> wrapper.innerHTML = svgStr;<br /> <br /> // Per-candle flicker CSS animation<br /> wrapper.style.animation = &#039;h-glow-pulse &#039; + ( 2 + rand( 0, 3 ) ) + &#039;s ease-in-out &#039; + cfg.delay + &#039;s infinite&#039;;<br /> container.appendChild( wrapper );<br /> } );<br /> }<br /> <br /> /* ── CRIMSON WIRES ──────────────────────────────────────────── */<br /> <br /> var WIRE_CONFIGS = [<br /> { left: 0, top: 20, w: 180, h: 300, color: &#039;#9c2020&#039;, rot: -10 },<br /> { left: -2, top: 45, w: 140, h: 200, color: &#039;#7a1515&#039;, rot: 5 },<br /> { right: 0, top: 30, w: 160, h: 280, color: &#039;#8b1515&#039;, rot: 15 },<br /> { right: -1, top: 55, w: 120, h: 180, color: &#039;#a02020&#039;, rot: -8 },<br /> { left: 20, top: 10, w: 200, h: 120, color: &#039;#7a1515&#039;, rot: 20 },<br /> { right: 15, top: 15, w: 180, h: 140, color: &#039;#9c2020&#039;, rot: -25 },<br /> ];<br /> <br /> function spawnWires( container ) {<br /> WIRE_CONFIGS.forEach( function ( cfg, i ) {<br /> var svgStr = SVGS.wire( i, cfg.w, cfg.h, cfg.color );<br /> var isRight = cfg.right != null;<br /> var style = [<br /> &#039;position:fixed&#039;,<br /> &#039;pointer-events:none&#039;,<br /> &#039;z-index:9981&#039;,<br /> &#039;top:&#039; + cfg.top + &#039;vh&#039;,<br /> isRight ? &#039;right:&#039; + cfg.right + &#039;vw&#039; : &#039;left:&#039; + cfg.left + &#039;vw&#039;,<br /> &#039;transform:rotate(&#039; + cfg.rot + &#039;deg)&#039;,<br /> &#039;opacity:0.3&#039;,<br /> &#039;animation:h-float &#039; + ( 8 + i * 1.5 ) + &#039;s ease-in-out &#039; + ( i * 0.5 ) + &#039;s infinite&#039;<br /> ].join( &#039;;&#039; );<br /> var wrapper = document.createElement( &#039;div&#039; );<br /> wrapper.style.cssText = style;<br /> wrapper.innerHTML = svgStr;<br /> container.appendChild( wrapper );<br /> } );<br /> }<br /> <br /> /* ── ROSES ─────────────────────────────────────────────────── */<br /> <br /> var ROSE_CONFIGS = [<br /> { left: 1, bottom: 15, scale: 0.9, delay: 0 },<br /> { left: 18, bottom: 12, scale: 0.7, delay: 2 },<br /> { right: 2, bottom: 18, scale: 1.0, delay: 1 },<br /> { right: 18, bottom: 10, scale: 0.75, delay: 3 },<br /> { left: 35, bottom: 5, scale: 0.6, delay: 1.5 },<br /> { right: 35, bottom: 5, scale: 0.65, delay: 0.5 },<br /> ];<br /> <br /> function spawnRoses( container ) {<br /> ROSE_CONFIGS.forEach( function ( cfg, i ) {<br /> var style = [<br /> &#039;position:fixed&#039;,<br /> &#039;pointer-events:none&#039;,<br /> &#039;z-index:9980&#039;,<br /> cfg.bottom != null ? &#039;bottom:&#039; + cfg.bottom + &#039;px&#039; : &#039;&#039;,<br /> cfg.top != null ? &#039;top:&#039; + cfg.top + &#039;vh&#039; : &#039;&#039;,<br /> cfg.right != null ? &#039;right:&#039; + cfg.right + &#039;vw&#039; : &#039;left:&#039; + cfg.left + &#039;vw&#039;,<br /> &#039;transform:scale(&#039; + cfg.scale + &#039;)&#039;,<br /> &#039;transform-origin:bottom center&#039;,<br /> &#039;filter:drop-shadow(0 0 6px rgba(122,21,21,0.25))&#039;,<br /> &#039;animation:h-float &#039; + ( 10 + i ) + &#039;s ease-in-out &#039; + cfg.delay + &#039;s infinite&#039;<br /> ].join( &#039;;&#039; );<br /> var wrapper = document.createElement( &#039;div&#039; );<br /> wrapper.style.cssText = style;<br /> wrapper.innerHTML = SVGS.rose();<br /> container.appendChild( wrapper );<br /> } );<br /> }<br /> <br /> /* ── ORNAMENTAL ELEMENTS ────────────────────────────────────── */<br /> <br /> function spawnOrnaments( container ) {<br /> // Sacred heart — bottom centre<br /> var sh = document.createElement( &#039;div&#039; );<br /> sh.style.cssText = [<br /> &#039;position:fixed&#039;, &#039;pointer-events:none&#039;, &#039;z-index:9980&#039;,<br /> &#039;bottom:0&#039;, &#039;left:50%&#039;, &#039;transform:translateX(-50%)&#039;,<br /> &#039;opacity:0.18&#039;,<br /> &#039;animation:h-glow-pulse 5s ease-in-out infinite&#039;<br /> ].join( &#039;;&#039; );<br /> sh.innerHTML = SVGS.sacredHeart();<br /> container.appendChild( sh );<br /> <br /> // Crown — top-right<br /> var cr = document.createElement( &#039;div&#039; );<br /> cr.style.cssText = [<br /> &#039;position:fixed&#039;, &#039;pointer-events:none&#039;, &#039;z-index:9980&#039;,<br /> &#039;top:8vh&#039;, &#039;right:2vw&#039;,<br /> &#039;opacity:0.15&#039;,<br /> &#039;animation:h-float 12s ease-in-out 1s infinite&#039;<br /> ].join( &#039;;&#039; );<br /> cr.innerHTML = SVGS.crown();<br /> container.appendChild( cr );<br /> <br /> // Mirror frames — far edges<br /> [ { left: &#039;-30px&#039;, top: &#039;20vh&#039; }, { right: &#039;-30px&#039;, top: &#039;35vh&#039; } ].forEach( function ( pos, i ) {<br /> var mf = document.createElement( &#039;div&#039; );<br /> mf.style.cssText = [<br /> &#039;position:fixed&#039;, &#039;pointer-events:none&#039;, &#039;z-index:9980&#039;,<br /> pos.left ? &#039;left:&#039; + pos.left : &#039;&#039;,<br /> pos.right ? &#039;right:&#039; + pos.right : &#039;&#039;,<br /> &#039;top:&#039; + pos.top,<br /> &#039;opacity:0.12&#039;,<br /> &#039;animation:h-float &#039; + ( 14 + i * 2 ) + &#039;s ease-in-out &#039; + ( i * 1.5 ) + &#039;s infinite&#039;<br /> ].join( &#039;;&#039; );<br /> mf.innerHTML = SVGS.mirrorFrame();<br /> container.appendChild( mf );<br /> } );<br /> <br /> // Arch ornaments — top left and top right<br /> [ { left: &#039;0&#039;, top: &#039;0&#039; }, { right: &#039;0&#039;, top: &#039;0&#039; } ].forEach( function ( pos, i ) {<br /> var ao = document.createElement( &#039;div&#039; );<br /> ao.style.cssText = [<br /> &#039;position:fixed&#039;, &#039;pointer-events:none&#039;, &#039;z-index:9980&#039;,<br /> pos.left ? &#039;left:&#039; + pos.left : &#039;&#039;,<br /> pos.right ? &#039;right:&#039; + pos.right : &#039;&#039;,<br /> &#039;top:&#039; + pos.top,<br /> &#039;opacity:0.14&#039;,<br /> pos.right ? &#039;transform:scaleX(-1)&#039; : &#039;&#039;,<br /> &#039;animation:h-glow-pulse 7s ease-in-out &#039; + ( i * 2 ) + &#039;s infinite&#039;<br /> ].join( &#039;;&#039; );<br /> ao.innerHTML = SVGS.archOrnament();<br /> container.appendChild( ao );<br /> } );<br /> }<br /> <br /> /* ── CANDLE LIGHT BLOOM ─────────────────────────────────────── */<br /> // Semi-transparent warm glow circles at candle positions — fixed, z:9979<br /> <br /> function spawnGlowBlooms( container ) {<br /> var bloomPositions = [<br /> { left: &#039;3vw&#039;, bottom: &#039;0&#039; },<br /> { left: &#039;87vw&#039;, bottom: &#039;0&#039; },<br /> { left: &#039;50vw&#039;, bottom: &#039;0&#039; },<br /> ];<br /> bloomPositions.forEach( function ( pos, i ) {<br /> var bloom = document.createElement( &#039;div&#039; );<br /> bloom.style.cssText = [<br /> &#039;position:fixed&#039;, &#039;pointer-events:none&#039;, &#039;z-index:9979&#039;,<br /> &#039;left:&#039; + ( pos.left || &#039;0&#039; ),<br /> &#039;bottom:&#039; + ( pos.bottom || &#039;0&#039; ),<br /> &#039;width:300px&#039;, &#039;height:300px&#039;,<br /> &#039;border-radius:50%&#039;,<br /> &#039;background:radial-gradient(ellipse at center,&#039;,<br /> &#039; rgba(245,160,32,0.14) 0%,&#039;,<br /> &#039; rgba(245,160,32,0.06) 40%,&#039;,<br /> &#039; transparent 70%)&#039;,<br /> &#039;transform:translate(-50%,50%)&#039;,<br /> &#039;animation:h-candle-ambient &#039; + ( 4 + i * 1.5 ) + &#039;s ease-in-out &#039; + ( i * 0.8 ) + &#039;s infinite&#039;<br /> ].join( &#039;;&#039; );<br /> container.appendChild( bloom );<br /> } );<br /> }<br /> <br /> /* ── CURSOR CANDLE GLOW ─────────────────────────────────────── */<br /> <br /> function initCursorGlow() {<br /> var glow = document.createElement( &#039;div&#039; );<br /> glow.style.cssText = [<br /> &#039;position:fixed&#039;, &#039;pointer-events:none&#039;, &#039;z-index:9995&#039;,<br /> &#039;width:80px&#039;, &#039;height:80px&#039;, &#039;border-radius:50%&#039;,<br /> &#039;background:radial-gradient(ellipse at center,&#039;,<br /> &#039; rgba(245,160,32,0.2) 0%, rgba(245,160,32,0.06) 50%, transparent 70%)&#039;,<br /> &#039;transform:translate(-50%,-50%)&#039;,<br /> &#039;transition:left 0.08s ease, top 0.08s ease&#039;<br /> ].join( &#039;;&#039; );<br /> document.body.appendChild( glow );<br /> <br /> document.addEventListener( &#039;mousemove&#039;, function ( e ) {<br /> glow.style.left = e.clientX + &#039;px&#039;;<br /> glow.style.top = e.clientY + &#039;px&#039;;<br /> } );<br /> }<br /> <br /> /* ── MOUSE PARALLAX ─────────────────────────────────────────── */<br /> <br /> function initParallax( container ) {<br /> var cx = window.innerWidth / 2, cy = window.innerHeight / 2;<br /> var tx = 0, ty = 0, curX = 0, curY = 0;<br /> document.addEventListener( &#039;mousemove&#039;, function ( e ) {<br /> tx = ( e.clientX - cx ) / cx * 6;<br /> ty = ( e.clientY - cy ) / cy * 4;<br /> } );<br /> ( function tick() {<br /> curX += ( tx - curX ) * 0.03;<br /> curY += ( ty - curY ) * 0.03;<br /> container.style.transform = &#039;translate(&#039; + curX + &#039;px,&#039; + curY + &#039;px)&#039;;<br /> requestAnimationFrame( tick );<br /> }() );<br /> }<br /> <br /> /* ── PAGE TITLE SHIMMER ─────────────────────────────────────── */<br /> <br /> function initTitleShimmer() {<br /> var title = document.getElementById( &#039;firstHeading&#039; )<br /> || document.querySelector( &#039;.firstHeading&#039; )<br /> || document.querySelector( &#039;h1&#039; );<br /> if ( !title ) { return; }<br /> <br /> // Wrap each letter for individual shimmer<br /> var text = title.textContent.trim();<br /> if ( !text || text.length &gt; 80 ) { return; } // skip very long titles<br /> title.innerHTML = text.split( &#039;&#039; ).map( function ( ch, i ) {<br /> if ( ch === &#039; &#039; ) { return &#039;&amp;nbsp;&#039;; }<br /> return &#039;&lt;span style=&quot;display:inline-block;animation:h-shimmer &#039; +<br /> ( 3 + ( i % 5 ) * 0.4 ) + &#039;s ease-in-out &#039; +<br /> ( i * 0.06 ) + &#039;s infinite;&quot;&gt;&#039; + ch + &#039;&lt;/span&gt;&#039;;<br /> } ).join( &#039;&#039; );<br /> }<br /> <br /> /* ── ONLINEWEBFONTS PRELOAD ─────────────────────────────────── */<br /> <br /> function preloadFonts() {<br /> if ( document.getElementById( &#039;h-gfonts&#039; ) ) { return; }<br /> var link = document.createElement( &#039;link&#039; );<br /> link.id = &#039;h-gfonts&#039;;<br /> link.rel = &#039;stylesheet&#039;;<br /> link.href = &#039;https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&amp;family=Cinzel:wght@400;500;600;700&amp;family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&amp;family=IM+Fell+English:ital@0;1&amp;family=Playfair+Display+SC:wght@400;700&amp;family=UnifrakturMaguntia&amp;family=Sorts+Mill+Goudy:ital@0;1&amp;display=swap&#039;;<br /> document.head.appendChild( link );<br /> }<br /> <br /> /* ── HOVER CANDLE GLOW ON LINKS ─────────────────────────────── */<br /> <br /> function initLinkGlow() {<br /> document.addEventListener( &#039;mouseover&#039;, function ( e ) {<br /> var target = e.target;<br /> if ( target &amp;&amp; target.tagName === &#039;A&#039; ) {<br /> target.style.textShadow = &#039;0 0 12px rgba(245,160,32,0.5), 0 0 24px rgba(245,160,32,0.25)&#039;;<br /> }<br /> } );<br /> document.addEventListener( &#039;mouseout&#039;, function ( e ) {<br /> var target = e.target;<br /> if ( target &amp;&amp; target.tagName === &#039;A&#039; ) {<br /> target.style.textShadow = &#039;&#039;;<br /> }<br /> } );<br /> }<br /> <br /> /* ── WAX DRIP SPAWNER ───────────────────────────────────────── */<br /> <br /> function spawnDrip( container ) {<br /> var drip = document.createElement( &#039;div&#039; );<br /> drip.style.cssText = [<br /> &#039;position:fixed&#039;,<br /> &#039;pointer-events:none&#039;,<br /> &#039;z-index:9981&#039;,<br /> &#039;left:&#039; + rand( 0, 100 ) + &#039;vw&#039;,<br /> &#039;top:-20px&#039;,<br /> &#039;width:6px&#039;,<br /> &#039;height:&#039; + randInt( 30, 80 ) + &#039;px&#039;,<br /> &#039;border-radius:0 0 50% 50%&#039;,<br /> &#039;background:linear-gradient(180deg,#fdf0d0,#f5e8c0)&#039;,<br /> &#039;opacity:0.35&#039;,<br /> &#039;animation:h-wax-drip &#039; + randInt( 4, 9 ) + &#039;s ease-in &#039; + rand( 0, 3 ) + &#039;s forwards&#039;<br /> ].join( &#039;;&#039; );<br /> container.appendChild( drip );<br /> setTimeout( function () {<br /> if ( drip.parentNode ) { drip.parentNode.removeChild( drip ); }<br /> }, 12000 );<br /> }<br /> <br /> /* ── MAIN INIT ──────────────────────────────────────────────── */<br /> <br /> function init() {<br /> // Don&#039;t run on edit pages<br /> if ( typeof mw !== &#039;undefined&#039; ) {<br /> var action = mw.config.get( &#039;wgAction&#039; );<br /> if ( action === &#039;edit&#039; || action === &#039;submit&#039; ) { return; }<br /> }<br /> <br /> preloadFonts();<br /> <br /> var container = makeContainer();<br /> <br /> spawnGlowBlooms( container );<br /> spawnCandles( container );<br /> spawnWires( container );<br /> spawnRoses( container );<br /> spawnOrnaments( container );<br /> <br /> initParallax( container );<br /> initCursorGlow();<br /> initLinkGlow();<br /> <br /> // Title shimmer with slight delay (font needs to load)<br /> setTimeout( initTitleShimmer, 600 );<br /> <br /> // Periodically drop a wax drip from top<br /> setInterval( function () {<br /> if ( Math.random() &lt; 0.5 ) {<br /> spawnDrip( container );<br /> }<br /> }, 3000 );<br /> }<br /> <br /> /* ── BOOT ───────────────────────────────────────────────────── */<br /> <br /> if ( typeof mw !== &#039;undefined&#039; ) {<br /> mw.loader.using( &#039;mediawiki.util&#039; ).then( function () {<br /> $( document ).ready( init );<br /> } );<br /> } else {<br /> document.addEventListener( &#039;DOMContentLoaded&#039;, init );<br /> }<br /> <br /> }() );</div> Wed, 15 Apr 2026 11:31:40 GMT Possession https://whatafinefellowsaidhisnamewashades.trumpetz.com/index.php/MediaWiki_talk:Common.js https://whatafinefellowsaidhisnamewashades.trumpetz.com/index.php?title=MediaWiki:Common.css&diff=2&oldid=0 https://whatafinefellowsaidhisnamewashades.trumpetz.com/index.php?title=MediaWiki:Common.css&diff=2&oldid=0 <p>Created page with &quot;<span class="autocomment">================================================================ H A D E S — MediaWiki Wiki Theme Based on the 2026 album &quot;Hades&quot; Gothic Victorian · Candlelit Shrine · Damask Baroque MediaWiki:Common.css ================================================================: </span> <span class="autocomment">── GOOGLE FONTS ────────────────────────────────────────────: </span> @import url(&#039;https:...&quot;</p> <a href="https://whatafinefellowsaidhisnamewashades.trumpetz.com/index.php?title=MediaWiki:Common.css&amp;diff=2">Show changes</a> Wed, 15 Apr 2026 11:31:19 GMT Possession https://whatafinefellowsaidhisnamewashades.trumpetz.com/index.php/MediaWiki_talk:Common.css