MediaWiki:Common.css: Difference between revisions
DawahAgent (talk | contribs) 006 wiki Common.css card-link sanitizer correction wiki_en (plans_site 006 approved runner) |
DawahAgent (talk | contribs) 006 Common.css native MediaWiki card-link correction EN (plans_site 006/007 approved runner) |
||
| Line 489: | Line 489: | ||
} | } | ||
html[dir="rtl"] .dw-hero p { line-height: 1.75; } | html[dir="rtl"] .dw-hero p { line-height: 1.75; } | ||
.dw-button { | .dw-button, | ||
.dw-button-wrap a { | |||
display: inline-flex; | display: inline-flex; | ||
min-height: 44px; | min-height: 44px; | ||
| Line 532: | Line 533: | ||
.dw-card .dw-cta { color: var(--du-link) !important; font-weight: 800; } | .dw-card .dw-cta { color: var(--du-link) !important; font-weight: 800; } | ||
.dw-stretch, | .dw-stretch, | ||
.dw-card > a:last-child { | .dw-card > a:last-child, | ||
.dw-cardlink a { | |||
position: absolute; | position: absolute; | ||
inset: 0; | inset: 0; | ||
| Line 541: | Line 543: | ||
} | } | ||
.dw-stretch:focus, | .dw-stretch:focus, | ||
.dw-card > a:last-child:focus { | .dw-card > a:last-child:focus, | ||
.dw-cardlink a:focus { | |||
outline: 3px solid hsl(var(--du-h) calc(80% * var(--du-c)) 55%); | outline: 3px solid hsl(var(--du-h) calc(80% * var(--du-c)) 55%); | ||
outline-offset: 3px; | outline-offset: 3px; | ||
} | } | ||
.dw-tile { | .dw-tile { | ||
width: 38px; | width: 38px; | ||
Revision as of 06:30, 18 June 2026
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
/* ============================================================
URETHANE DESIGN — portable token sheet + generic components
App-agnostic. Pair with 05-theme-engine.js, which sets on <html>:
data-du-mode = light | dark (auto resolved by the engine)
data-du-glass = faithful | modern | flat
--du-h = accent hue (inline style, number)
No-JS defaults: light + faithful + blue (205).
Self-host this file (content-app CSP blocks CDNs). Link it LAST
in <head> so it wins cascade ties against app CSS.
============================================================ */
/* ------------------------------------------------------------------
ACCESSIBLE CONTRAST (WCAG 2.x) — measured at hue 205, faithful glass.
Body text target >=4.5:1 ; large text / icon glyph target >=3:1.
Computed from the HSL token values below (sRGB relative luminance).
LIGHT (data-du-mode="light")
--du-text on --du-panel ....... 15.02:1 (body PASS)
--du-text on --du-page ........ 13.12:1 (body PASS)
--du-text on --du-panel2 ...... 14.05:1 (body PASS)
--du-muted on --du-panel ........ 6.04:1 (body PASS)
--du-muted on --du-page ......... 5.28:1 (body PASS)
--du-link on --du-page ......... 6.27:1 (body PASS)
--du-link on --du-panel ........ 7.18:1 (body PASS)
--du-glyph on --du-face(mid) .... 3.06:1 (large/glyph PASS)
DARK (data-du-mode="dark")
--du-text on --du-panel ....... 12.70:1 (body PASS)
--du-text on --du-page ........ 14.62:1 (body PASS)
--du-text on --du-panel2 ...... 11.49:1 (body PASS)
--du-muted on --du-panel ........ 5.81:1 (body PASS)
--du-muted on --du-page ......... 6.69:1 (body PASS)
--du-link on --du-page ......... 9.23:1 (body PASS)
--du-link on --du-panel ........ 8.02:1 (body PASS)
--du-glyph on --du-face(mid) ... 13.10:1 (large/glyph PASS)
FIXED tile glyphs (mode-independent gradients; large glyph, >=3:1).
The glyph centroid sits on the bright body bands; only the 1px 45%
hard-break stop (the intentional bottom-lit recipe break) dips lower.
hot glyph hsl(10 80% 19%) on --du-hot body band 60%L .. 5.06:1 PASS
(worst single stop, 45% hard-break ............ 2.56:1)
gold glyph hsl(35 90% 18%) on --du-gold body band 60%L .. 6.42:1 PASS
(worst single stop, 45% hard-break ............ 3.17:1)
------------------------------------------------------------------ */
/* === TIER: PRIMITIVE === */
:root{
--du-h:205;
--du-c:1;
--du-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38'%3E%3Cg fill='none' stroke='white' stroke-opacity='.14'%3E%3Crect x='11' y='11' width='16' height='16'/%3E%3Crect x='11' y='11' width='16' height='16' transform='rotate(45 19 19)'/%3E%3C/g%3E%3C/svg%3E");
--du-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)'/%3E%3C/svg%3E");
/* === TIER: SEMANTIC === */
/* light base */
--du-page:hsl(var(--du-h) calc(30% * var(--du-c)) 93%);
--du-panel:hsl(var(--du-h) calc(40% * var(--du-c)) 99%);
--du-panel2:hsl(var(--du-h) calc(35% * var(--du-c)) 96%);
--du-text:hsl(var(--du-h) calc(55% * var(--du-c)) 14%);
--du-muted:hsl(var(--du-h) calc(20% * var(--du-c)) 38%);
--du-line:hsl(var(--du-h) calc(28% * var(--du-c)) 86%);
--du-link:hsl(var(--du-h) calc(80% * var(--du-c)) 31%);
--du-glyph:hsl(var(--du-h) calc(62% * var(--du-c)) 21%);
--du-gsh:0 -1px 0 hsl(var(--du-h) calc(90% * var(--du-c)) 97% / .6),0 1px 1px hsl(var(--du-h) calc(70% * var(--du-c)) 16% / .35);
--du-tsh:0 1px rgb(255 255 255 / .4);
--du-psh:0 2px 6px hsl(var(--du-h) calc(55% * var(--du-c)) 30% / .14);
--du-chbev:inset 0 1px hsl(var(--du-h) calc(90% * var(--du-c)) 99% / .85),inset 0 -1px hsl(var(--du-h) calc(92% * var(--du-c)) 92% / .9);
--du-tabbg:linear-gradient(180deg,hsl(var(--du-h) calc(32% * var(--du-c)) 86%),hsl(var(--du-h) calc(32% * var(--du-c)) 76%) 44%,hsl(var(--du-h) calc(46% * var(--du-c)) 59%) 45%,hsl(var(--du-h) calc(55% * var(--du-c)) 71%) 100%);
--du-tabon:linear-gradient(180deg,#fff,hsl(var(--du-h) calc(50% * var(--du-c)) 92%) 60%,hsl(var(--du-h) calc(65% * var(--du-c)) 96%) 100%);
--du-fade:linear-gradient(180deg,hsl(var(--du-h) calc(45% * var(--du-c)) 58% / .10),hsl(var(--du-h) calc(45% * var(--du-c)) 50% / .26));
/* light + faithful glass */
--du-chrome:linear-gradient(180deg,hsl(var(--du-h) calc(80% * var(--du-c)) 97%),hsl(var(--du-h) calc(58% * var(--du-c)) 82%) 44%,hsl(var(--du-h) calc(52% * var(--du-c)) 66%) 45%,hsl(var(--du-h) calc(56% * var(--du-c)) 73%) 76%,hsl(var(--du-h) calc(72% * var(--du-c)) 86%) 100%);
--du-face:linear-gradient(180deg,hsl(var(--du-h) calc(85% * var(--du-c)) 98%) 0%,hsl(var(--du-h) calc(35% * var(--du-c)) 85%) 9%,hsl(var(--du-h) calc(35% * var(--du-c)) 74%) 44%,hsl(var(--du-h) calc(55% * var(--du-c)) 49%) 45%,hsl(var(--du-h) calc(58% * var(--du-c)) 57%) 65%,hsl(var(--du-h) calc(68% * var(--du-c)) 71%) 88%,hsl(var(--du-h) calc(90% * var(--du-c)) 86%) 100%);
--du-prim:linear-gradient(180deg,hsl(var(--du-h) calc(78% * var(--du-c)) 88%) 0%,hsl(var(--du-h) calc(62% * var(--du-c)) 62%) 9%,hsl(var(--du-h) calc(60% * var(--du-c)) 53%) 44%,hsl(var(--du-h) calc(76% * var(--du-c)) 30%) 45%,hsl(var(--du-h) calc(72% * var(--du-c)) 38%) 65%,hsl(var(--du-h) calc(70% * var(--du-c)) 51%) 88%,hsl(var(--du-h) calc(88% * var(--du-c)) 70%) 100%);
--du-edge:hsl(var(--du-h) calc(42% * var(--du-c)) 52%);
--du-bev:inset 0 0 0 1px hsl(var(--du-h) calc(85% * var(--du-c)) 96% / .5),inset 0 1px hsl(var(--du-h) calc(90% * var(--du-c)) 99% / .95),inset 0 -1px hsl(var(--du-h) calc(95% * var(--du-c)) 88% / .95),inset 0 -2px hsl(var(--du-h) calc(70% * var(--du-c)) 68% / .45),0 1px 2px hsl(var(--du-h) calc(60% * var(--du-c)) 28% / .25);
--du-glow:0 0 9px hsl(var(--du-h) calc(85% * var(--du-c)) 58% / .6);
--du-hot:linear-gradient(180deg,hsl(26 100% 90%) 0%,hsl(22 92% 72%) 9%,hsl(20 88% 64%) 44%,hsl(12 85% 42%) 45%,hsl(14 84% 48%) 65%,hsl(20 90% 60%) 88%,hsl(30 100% 75%) 100%);
--du-gold:linear-gradient(180deg,hsl(48 100% 88%) 0%,hsl(45 95% 72%) 9%,hsl(42 90% 62%) 44%,hsl(34 85% 42%) 45%,hsl(36 85% 48%) 65%,hsl(42 90% 60%) 88%,hsl(50 100% 76%) 100%);
}
html[data-du-mode="light"][data-du-glass="modern"]{
--du-chrome:linear-gradient(180deg,hsl(var(--du-h) calc(70% * var(--du-c)) 97%),hsl(var(--du-h) calc(52% * var(--du-c)) 84%) 72%,hsl(var(--du-h) calc(66% * var(--du-c)) 91%) 100%);
--du-face:linear-gradient(180deg,hsl(var(--du-h) calc(70% * var(--du-c)) 98%),hsl(var(--du-h) calc(48% * var(--du-c)) 87%) 72%,hsl(var(--du-h) calc(64% * var(--du-c)) 93%) 100%);
--du-prim:linear-gradient(180deg,hsl(var(--du-h) calc(72% * var(--du-c)) 58%),hsl(var(--du-h) calc(70% * var(--du-c)) 42%) 72%,hsl(var(--du-h) calc(75% * var(--du-c)) 56%) 100%);
--du-edge:hsl(var(--du-h) calc(36% * var(--du-c)) 66%);
--du-bev:inset 0 0 0 1px hsl(var(--du-h) calc(85% * var(--du-c)) 96% / .4),inset 0 1px hsl(var(--du-h) calc(90% * var(--du-c)) 99% / .9),inset 0 -1px hsl(var(--du-h) calc(90% * var(--du-c)) 88% / .7),0 1px 2px hsl(var(--du-h) calc(50% * var(--du-c)) 40% / .14);
--du-glow:0 0 8px hsl(var(--du-h) calc(80% * var(--du-c)) 62% / .45);
}
html[data-du-mode="light"][data-du-glass="flat"]{
--du-chrome:hsl(var(--du-h) calc(42% * var(--du-c)) 88%);
--du-face:hsl(var(--du-h) calc(40% * var(--du-c)) 97%);
--du-prim:hsl(var(--du-h) calc(66% * var(--du-c)) 42%);
--du-edge:hsl(var(--du-h) calc(26% * var(--du-c)) 76%);
--du-bev:0 0 0 transparent;
--du-glow:0 0 0 transparent;
--du-hot:hsl(16 80% 48%);
--du-gold:hsl(40 85% 50%);
}
html[data-du-mode="dark"]{
--du-page:hsl(var(--du-h) calc(26% * var(--du-c)) 9%);
--du-panel:hsl(var(--du-h) calc(20% * var(--du-c)) 14%);
--du-panel2:hsl(var(--du-h) calc(18% * var(--du-c)) 17%);
--du-text:hsl(var(--du-h) calc(28% * var(--du-c)) 91%);
--du-muted:hsl(var(--du-h) calc(13% * var(--du-c)) 62%);
--du-line:hsl(var(--du-h) calc(17% * var(--du-c)) 23%);
--du-link:hsl(var(--du-h) calc(82% * var(--du-c)) 72%);
--du-glyph:hsl(var(--du-h) calc(38% * var(--du-c)) 90%);
--du-gsh:0 -1px 0 rgb(0 0 0 / .5),0 1px 2px hsl(var(--du-h) calc(80% * var(--du-c)) 65% / .35);
--du-tsh:0 1px rgb(0 0 0 / .4);
--du-psh:0 2px 8px rgb(0 0 0 / .45);
--du-chbev:inset 0 1px hsl(var(--du-h) calc(40% * var(--du-c)) 72% / .28),inset 0 -1px hsl(var(--du-h) calc(85% * var(--du-c)) 62% / .3);
--du-tabbg:linear-gradient(180deg,hsl(var(--du-h) calc(22% * var(--du-c)) 24%),hsl(var(--du-h) calc(24% * var(--du-c)) 18%) 44%,hsl(var(--du-h) calc(32% * var(--du-c)) 11%) 45%,hsl(var(--du-h) calc(42% * var(--du-c)) 19%) 100%);
--du-tabon:linear-gradient(180deg,hsl(var(--du-h) calc(26% * var(--du-c)) 34%),hsl(var(--du-h) calc(22% * var(--du-c)) 20%) 70%,hsl(var(--du-h) calc(32% * var(--du-c)) 24%) 100%);
--du-fade:linear-gradient(180deg,hsl(var(--du-h) calc(60% * var(--du-c)) 60% / .08),hsl(var(--du-h) calc(60% * var(--du-c)) 55% / .2));
--du-chrome:linear-gradient(180deg,hsl(var(--du-h) calc(32% * var(--du-c)) 31%),hsl(var(--du-h) calc(34% * var(--du-c)) 21%) 44%,hsl(var(--du-h) calc(42% * var(--du-c)) 13%) 45%,hsl(var(--du-h) calc(44% * var(--du-c)) 17%) 76%,hsl(var(--du-h) calc(56% * var(--du-c)) 27%) 100%);
--du-face:linear-gradient(180deg,hsl(var(--du-h) calc(32% * var(--du-c)) 42%) 0%,hsl(var(--du-h) calc(26% * var(--du-c)) 29%) 9%,hsl(var(--du-h) calc(28% * var(--du-c)) 23%) 44%,hsl(var(--du-h) calc(46% * var(--du-c)) 12%) 45%,hsl(var(--du-h) calc(46% * var(--du-c)) 16%) 65%,hsl(var(--du-h) calc(56% * var(--du-c)) 26%) 88%,hsl(var(--du-h) calc(72% * var(--du-c)) 40%) 100%);
--du-prim:linear-gradient(180deg,hsl(var(--du-h) calc(70% * var(--du-c)) 64%) 0%,hsl(var(--du-h) calc(68% * var(--du-c)) 50%) 9%,hsl(var(--du-h) calc(70% * var(--du-c)) 44%) 44%,hsl(var(--du-h) calc(80% * var(--du-c)) 26%) 45%,hsl(var(--du-h) calc(76% * var(--du-c)) 32%) 65%,hsl(var(--du-h) calc(72% * var(--du-c)) 44%) 88%,hsl(var(--du-h) calc(85% * var(--du-c)) 60%) 100%);
--du-edge:hsl(var(--du-h) calc(32% * var(--du-c)) 6%);
--du-bev:inset 0 0 0 1px hsl(var(--du-h) calc(45% * var(--du-c)) 70% / .18),inset 0 1px hsl(var(--du-h) calc(45% * var(--du-c)) 76% / .4),inset 0 -1px hsl(var(--du-h) calc(88% * var(--du-c)) 66% / .5),inset 0 -2px hsl(var(--du-h) calc(70% * var(--du-c)) 45% / .35),0 1px 2px rgb(0 0 0 / .5);
--du-glow:0 0 9px hsl(var(--du-h) calc(90% * var(--du-c)) 58% / .45);
}
html[data-du-mode="dark"][data-du-glass="modern"]{
--du-chrome:linear-gradient(180deg,hsl(var(--du-h) calc(26% * var(--du-c)) 23%),hsl(var(--du-h) calc(28% * var(--du-c)) 15%) 75%,hsl(var(--du-h) calc(40% * var(--du-c)) 22%) 100%);
--du-face:linear-gradient(180deg,hsl(var(--du-h) calc(22% * var(--du-c)) 28%),hsl(var(--du-h) calc(24% * var(--du-c)) 18%) 75%,hsl(var(--du-h) calc(36% * var(--du-c)) 25%) 100%);
--du-prim:linear-gradient(180deg,hsl(var(--du-h) calc(70% * var(--du-c)) 54%),hsl(var(--du-h) calc(72% * var(--du-c)) 38%) 75%,hsl(var(--du-h) calc(76% * var(--du-c)) 50%) 100%);
--du-edge:hsl(var(--du-h) calc(28% * var(--du-c)) 6%);
--du-bev:inset 0 0 0 1px hsl(var(--du-h) calc(40% * var(--du-c)) 70% / .15),inset 0 1px hsl(var(--du-h) calc(40% * var(--du-c)) 72% / .3),inset 0 -1px hsl(var(--du-h) calc(80% * var(--du-c)) 60% / .35),0 1px 2px rgb(0 0 0 / .35);
--du-glow:0 0 8px hsl(var(--du-h) calc(85% * var(--du-c)) 58% / .35);
}
html[data-du-mode="dark"][data-du-glass="flat"]{
--du-chrome:hsl(var(--du-h) calc(24% * var(--du-c)) 16%);
--du-face:hsl(var(--du-h) calc(21% * var(--du-c)) 21%);
--du-prim:hsl(var(--du-h) calc(70% * var(--du-c)) 46%);
--du-edge:hsl(var(--du-h) calc(18% * var(--du-c)) 26%);
--du-bev:0 0 0 transparent;
--du-glow:0 0 0 transparent;
--du-hot:hsl(16 75% 45%);
--du-gold:hsl(40 70% 42%);
}
/* === TIER: SEMANTIC (typography) === */
:root{
--du-body-size: 16px;
--du-body-lh: 1.55;
--du-body-track: 0; /* letter-spacing, LTR only */
--du-font-ui: Inter, ui-sans-serif, system-ui, sans-serif;
--du-font-ar: "Noto Sans Arabic", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
}
:root:lang(ar), [lang="ar"], [dir="rtl"]{
--du-body-size: 18px; /* ~+12% step-up: Arabic glyphs read smaller at same px */
--du-body-lh: 1.75; /* more leading for stacked harakat / voweled Qur'anic text */
--du-body-track: normal; /* NEVER letter-space cursive Arabic */
}
/* === TIER: COMPONENT === */
/* ============ generic components (opt-in classes) ============ */
html{background:var(--du-page)}
.du-body{background:var(--du-page);color:var(--du-text)}
.du-chrome{background:var(--du-noise),var(--du-chrome);box-shadow:var(--du-chbev);border-bottom:1px solid var(--du-edge);color:var(--du-text);text-shadow:var(--du-tsh)}
.du-chrome--hero{background:var(--du-star),var(--du-noise),var(--du-chrome)}
html[data-du-glass="flat"] .du-chrome,html[data-du-glass="flat"] .du-chrome--hero{background:var(--du-chrome)}
.du-panel{background:var(--du-panel);border:1px solid var(--du-edge);border-radius:9px;box-shadow:var(--du-psh);color:var(--du-text)}
.du-panel2{background:var(--du-panel2)}
.du-button{display:inline-flex;gap:7px;align-items:center;background:var(--du-face);border:1px solid var(--du-edge);border-radius:7px;box-shadow:var(--du-bev);color:var(--du-text);text-shadow:var(--du-tsh);padding:7px 15px;cursor:pointer;transition:box-shadow .15s,filter .15s;text-decoration:none}
.du-button:hover{box-shadow:var(--du-bev),var(--du-glow);filter:brightness(1.06)}
.du-button:active{transform:translateY(1px);filter:brightness(.93)}
.du-button--primary{background:var(--du-prim);color:#fff;text-shadow:0 1px rgb(0 0 0 / .3);position:relative;overflow:hidden}
.du-button--primary::after{content:"";position:absolute;top:0;inset-inline-start:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .5),transparent);transform:skewX(-20deg);transition:inset-inline-start .5s;pointer-events:none}
.du-button--primary:hover::after{inset-inline-start:120%}
.du-tile{width:30px;height:30px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;background:var(--du-face);border:1px solid var(--du-edge);box-shadow:var(--du-bev);color:var(--du-glyph);text-shadow:var(--du-gsh);cursor:pointer}
.du-tile:hover{box-shadow:var(--du-bev),var(--du-glow);filter:brightness(1.07)}
.du-tile:active{transform:translateY(1px);filter:brightness(.92)}
.du-tile--hot{background:var(--du-hot);border-color:hsl(14 65% 34%);color:hsl(10 80% 19%);text-shadow:0 -1px 0 hsl(30 100% 88% / .7),0 1px 1px hsl(8 80% 12% / .4)}
.du-tile--hot.du-pulse{animation:du-unread 3.2s ease-in-out infinite}
.du-tile--gold{background:var(--du-gold);border-color:hsl(34 65% 36%);color:hsl(35 90% 18%);text-shadow:0 -1px 0 hsl(52 100% 88% / .75),0 1px 1px hsl(30 80% 12% / .4)}
.du-input{background:var(--du-panel);border:1px solid var(--du-edge);border-radius:7px;color:var(--du-text);padding:6px 11px;box-shadow:inset 0 1px 2px hsl(var(--du-h) calc(40% * var(--du-c)) 35% / .18)}
.du-input:focus{border-color:hsl(var(--du-h) calc(70% * var(--du-c)) 50%);box-shadow:0 0 6px hsl(var(--du-h) calc(85% * var(--du-c)) 58% / .4);outline:none}
.du-tab{padding:7px 15px 8px;border:1px solid var(--du-edge);border-bottom:none;border-radius:8px 8px 0 0;background:var(--du-tabbg);color:var(--du-text);text-shadow:var(--du-tsh);box-shadow:inset 0 1px hsl(var(--du-h) calc(80% * var(--du-c)) 96% / .5);cursor:pointer}
.du-tab:hover{filter:brightness(1.05)}
.du-tab.on,.du-tab[aria-selected="true"]{background:var(--du-tabon);box-shadow:var(--du-chbev);font-weight:500}
.du-crumb{background:hsl(var(--du-h) calc(50% * var(--du-c)) 52% / .13);padding:2px 10px;border-radius:99px;box-shadow:inset 0 1px hsl(var(--du-h) calc(80% * var(--du-c)) 94% / .5);color:var(--du-muted)}
.du-pill{font-size:11px;padding:1px 8px;border-radius:99px;font-weight:500}
.du-pill--new{background:linear-gradient(180deg,hsl(22 95% 70%),hsl(12 82% 46%) 60%,hsl(20 90% 58%));color:#fff;text-shadow:0 1px rgb(0 0 0 / .25);box-shadow:inset 0 1px rgb(255 255 255 / .5),inset 0 -1px hsl(28 100% 70% / .7)}
.du-pill--mod{background:linear-gradient(180deg,hsl(145 55% 52%),hsl(148 65% 28%) 60%,hsl(143 55% 42%));color:#fff;text-shadow:0 1px rgb(0 0 0 / .25);box-shadow:inset 0 1px rgb(255 255 255 / .45),inset 0 -1px hsl(140 80% 60% / .6)}
.du-quote{border-inline-start:3px solid hsl(var(--du-h) calc(60% * var(--du-c)) 55%);background:linear-gradient(180deg,hsl(var(--du-h) calc(55% * var(--du-c)) 50% / .06),hsl(var(--du-h) calc(55% * var(--du-c)) 50% / .14));box-shadow:inset 0 1px hsl(var(--du-h) calc(80% * var(--du-c)) 92% / .4);padding:7px 11px;color:var(--du-text);border-radius:0}
.du-row-hover:hover{background:var(--du-fade)}
.du-fade--gold{background:linear-gradient(180deg,hsl(42 95% 60% / .12),hsl(42 95% 55% / .3))}
.du-fade--red{background:linear-gradient(180deg,hsl(8 75% 50% / .12),hsl(8 75% 45% / .26))}
.du-dot{width:7px;height:7px;border-radius:50%;background:hsl(135 70% 45%);box-shadow:0 0 0 0 hsl(135 70% 45% / .5);animation:du-pulse 2.2s infinite}
@keyframes du-unread{50%{box-shadow:var(--du-bev),0 0 8px hsl(18 92% 55% / .55)}}
@keyframes du-pulse{70%{box-shadow:0 0 0 6px transparent}}
@media (prefers-reduced-motion:reduce){
.du-tile--hot.du-pulse,.du-dot{animation:none}
.du-button--primary::after{display:none}
}
/* Dawah.Wiki MediaWiki URETHANE layer: Vector 2022 selector mapping. */
body.skin-vector {
margin: 0;
background: var(--du-page) !important;
color: var(--du-text) !important;
font-family: var(--du-font-ui);
font-size: var(--du-body-size);
line-height: var(--du-body-lh);
}
html[dir="rtl"] body.skin-vector,
body.rtl,
.mw-content-rtl {
font-family: var(--du-font-ar);
line-height: var(--du-body-lh);
letter-spacing: normal;
}
body.skin-vector a { color: var(--du-link); }
body.skin-vector a:hover { text-decoration-thickness: 2px; }
body.skin-vector ::selection { background: hsl(var(--du-h) calc(75% * var(--du-c)) 58% / .28); }
.vector-header-container,
.mw-header,
.vector-sticky-header {
background: var(--du-star), var(--du-noise), var(--du-chrome) !important;
border-bottom: 1px solid var(--du-edge) !important;
box-shadow: var(--du-chbev), 0 1px 0 hsl(var(--du-h) calc(50% * var(--du-c)) 30% / .18) !important;
color: var(--du-text) !important;
}
.mw-header { min-height: 58px; }
.mw-logo,
.mw-logo-container { color: var(--du-text) !important; text-decoration: none !important; }
.mw-logo-icon {
width: 40px !important;
height: 40px !important;
border-radius: 9px !important;
background: var(--du-face) !important;
border: 1px solid var(--du-edge) !important;
box-shadow: var(--du-bev) !important;
padding: 2px;
}
.mw-logo-wordmark { filter: drop-shadow(0 1px rgb(255 255 255 / .28)); }
.vector-user-links,
.vector-header-end { color: var(--du-text) !important; }
.vector-search-box input,
.vector-search-box .cdx-text-input__input,
#searchInput,
input[type="search"],
input[type="text"],
textarea,
select {
background: var(--du-panel) !important;
color: var(--du-text) !important;
border: 1px solid var(--du-edge) !important;
border-radius: 7px !important;
box-shadow: inset 0 1px 2px hsl(var(--du-h) calc(40% * var(--du-c)) 35% / .18) !important;
}
.vector-search-box input:focus,
.vector-search-box .cdx-text-input__input:focus,
#searchInput:focus,
input:focus,
textarea:focus,
select:focus {
border-color: hsl(var(--du-h) calc(70% * var(--du-c)) 50%) !important;
box-shadow: 0 0 6px hsl(var(--du-h) calc(85% * var(--du-c)) 58% / .4) !important;
outline: 2px solid transparent !important;
}
.cdx-button,
.mw-ui-button,
.vector-dropdown-label,
.vector-menu-tabs a,
.vector-page-tools a,
.vector-user-menu a {
border-color: var(--du-edge) !important;
color: var(--du-text) !important;
text-shadow: var(--du-tsh);
}
.cdx-button:not(.cdx-button--weight-quiet),
.mw-ui-button,
.vector-dropdown-label {
background: var(--du-face) !important;
box-shadow: var(--du-bev) !important;
}
.cdx-button:hover,
.mw-ui-button:hover,
.vector-dropdown-label:hover,
.vector-menu-tabs a:hover {
filter: brightness(1.05);
box-shadow: var(--du-bev), var(--du-glow) !important;
}
.mw-page-container {
background: transparent !important;
max-width: 1280px !important;
margin-top: 18px !important;
}
.mw-page-container-inner { column-gap: 22px !important; }
.mw-body,
.mw-body-content,
.vector-body {
color: var(--du-text) !important;
}
.mw-body {
background: var(--du-panel) !important;
border: 1px solid var(--du-edge) !important;
border-radius: 9px !important;
box-shadow: var(--du-psh) !important;
padding: clamp(18px, 2.4vw, 34px) !important;
}
.mw-body-header,
.vector-page-titlebar,
.vector-page-toolbar-container {
border-color: var(--du-line) !important;
}
.mw-first-heading,
.mw-page-title-main,
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3 {
color: var(--du-text) !important;
letter-spacing: 0;
}
.mw-parser-output h2,
.mw-parser-output h3 { border-bottom-color: var(--du-line) !important; }
.mw-parser-output p,
.mw-parser-output li,
.mw-parser-output dd,
.mw-parser-output td,
.mw-parser-output th { font-size: 1rem; line-height: var(--du-body-lh); }
body:not(.page-Main_Page) .mw-parser-output > p,
body:not(.page-Main_Page) .mw-parser-output > ul,
body:not(.page-Main_Page) .mw-parser-output > ol,
body:not(.page-Main_Page) .mw-parser-output > blockquote { max-width: 72ch; }
body.page-Main_Page .mw-first-heading { display: none !important; }
.vector-main-menu,
.vector-main-menu .vector-pinnable-element,
.vector-toc,
.vector-page-tools,
.vector-appearance,
.vector-dropdown-content {
background: var(--du-panel2) !important;
border: 1px solid var(--du-edge) !important;
border-radius: 9px !important;
box-shadow: var(--du-psh) !important;
color: var(--du-text) !important;
}
.vector-main-menu .vector-menu-heading,
.vector-toc .vector-pinnable-header-label,
.vector-page-tools .vector-pinnable-header-label,
.vector-menu-heading {
color: var(--du-muted) !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: .06em;
text-transform: uppercase;
}
html[dir="rtl"] .vector-main-menu .vector-menu-heading,
html[dir="rtl"] .vector-toc .vector-pinnable-header-label,
html[dir="rtl"] .vector-page-tools .vector-pinnable-header-label,
html[dir="rtl"] .vector-menu-heading { letter-spacing: normal; }
.vector-main-menu a,
.vector-toc a,
.vector-page-tools a,
.vector-menu-content-list a {
border-radius: 7px;
color: var(--du-text) !important;
}
.vector-main-menu a:hover,
.vector-toc a:hover,
.vector-page-tools a:hover,
.vector-menu-content-list a:hover,
.vector-toc-list-item-active > .vector-toc-link {
background: var(--du-fade) !important;
text-decoration: none !important;
}
.vector-toc-numb,
.mw-editsection,
.mw-editsection a,
#siteSub,
.mw-parser-output .mw-empty-elt { color: var(--du-muted) !important; }
.catlinks,
.mw-parser-output .hatnote,
.mw-parser-output blockquote,
.mw-parser-output .quotebox,
.mw-parser-output pre,
.mw-parser-output code {
background: linear-gradient(180deg, hsl(var(--du-h) calc(55% * var(--du-c)) 50% / .06), hsl(var(--du-h) calc(55% * var(--du-c)) 50% / .14)) !important;
border: 1px solid var(--du-line) !important;
border-inline-start: 3px solid hsl(var(--du-h) calc(60% * var(--du-c)) 55%) !important;
border-radius: 0 !important;
color: var(--du-text) !important;
box-shadow: inset 0 1px hsl(var(--du-h) calc(80% * var(--du-c)) 92% / .4) !important;
}
.mw-parser-output pre,
.mw-parser-output code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
white-space: pre-wrap;
}
.wikitable,
.mw-parser-output table {
background: var(--du-panel) !important;
border-color: var(--du-line) !important;
color: var(--du-text) !important;
}
.wikitable th,
.wikitable td,
.mw-parser-output table th,
.mw-parser-output table td { border-color: var(--du-line) !important; }
.wikitable th,
.mw-parser-output table th { background: var(--du-panel2) !important; color: var(--du-muted) !important; }
.mw-footer-container,
.mw-footer,
#footer {
background: var(--du-noise), var(--du-chrome) !important;
border-top: 1px solid var(--du-edge) !important;
box-shadow: var(--du-chbev) !important;
color: var(--du-muted) !important;
}
.mw-footer a,
#footer a { color: var(--du-text) !important; text-decoration: none; }
.mw-footer a:hover,
#footer a:hover { color: var(--du-link) !important; text-decoration: underline; }
#footer-icons,
#footer-poweredbyico { display: none !important; }
#footer-places,
#footer-info,
.dw-footer-links {
display: flex !important;
flex-wrap: wrap;
gap: 8px 18px;
align-items: center;
list-style: none;
padding: 0 !important;
}
#footer-places li,
#footer-info li,
.dw-footer-links li { margin: 0 !important; }
/* Main Page portal classes used by Plan 007 wikitext. */
.dw-mainpage {
max-width: 1120px;
margin-inline: auto;
color: var(--du-text);
}
.dw-mainpage * { box-sizing: border-box; }
.dw-hero {
position: relative;
overflow: hidden;
background: var(--du-star), var(--du-noise), var(--du-chrome);
border: 1px solid var(--du-edge);
border-radius: 9px;
box-shadow: var(--du-bev), var(--du-psh);
padding: clamp(28px, 4vw, 54px);
margin: 0 0 18px;
}
.dw-hero h1 {
margin: 0 0 12px;
max-width: 780px;
color: var(--du-text) !important;
font-size: clamp(2.2rem, 5vw, 4.2rem);
line-height: .98;
font-weight: 900;
letter-spacing: -.045em;
}
html[dir="rtl"] .dw-hero h1 { letter-spacing: normal; line-height: 1.08; }
.dw-hero p {
max-width: 720px;
margin: 0 0 22px;
color: var(--du-text);
font-size: clamp(1.05rem, 1.8vw, 1.35rem);
line-height: 1.45;
}
html[dir="rtl"] .dw-hero p { line-height: 1.75; }
.dw-button,
.dw-button-wrap a {
display: inline-flex;
min-height: 44px;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 18px;
border-radius: 7px;
border: 1px solid var(--du-edge);
background: var(--du-prim);
color: #fff !important;
text-decoration: none !important;
font-weight: 800;
text-shadow: 0 1px rgb(0 0 0 / .35);
box-shadow: var(--du-bev);
}
.dw-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin: 0 0 16px;
}
.dw-card {
position: relative;
min-height: 156px;
background: var(--du-panel);
border: 1px solid var(--du-edge);
border-radius: 9px;
box-shadow: var(--du-psh);
padding: 18px;
}
.dw-card:hover { box-shadow: var(--du-psh), var(--du-glow); }
.dw-card h2 {
margin: 10px 0 8px !important;
border: 0 !important;
color: var(--du-text) !important;
font-size: 1.25rem;
font-weight: 900;
line-height: 1.18;
}
.dw-card p { margin: 0 0 14px; color: var(--du-muted); }
.dw-card .dw-cta { color: var(--du-link) !important; font-weight: 800; }
.dw-stretch,
.dw-card > a:last-child,
.dw-cardlink a {
position: absolute;
inset: 0;
z-index: 3;
border-radius: 9px;
overflow: hidden;
text-indent: -9999px;
}
.dw-stretch:focus,
.dw-card > a:last-child:focus,
.dw-cardlink a:focus {
outline: 3px solid hsl(var(--du-h) calc(80% * var(--du-c)) 55%);
outline-offset: 3px;
}
.dw-tile {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: var(--du-face);
border: 1px solid var(--du-edge);
box-shadow: var(--du-bev);
color: var(--du-glyph);
font-size: 18px;
font-weight: 900;
text-shadow: var(--du-gsh);
}
.dw-crosslinks {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
align-items: center;
margin: 16px 0;
padding: 16px 18px;
background: var(--du-panel2);
border: 1px solid var(--du-edge);
border-radius: 9px;
color: var(--du-muted);
}
.dw-crosslinks a { font-weight: 700; text-decoration: none; }
.dw-note { color: var(--du-muted); margin: 16px 0 0; }
html[dir="rtl"] .dw-mainpage { text-align: right; }
html[dir="rtl"] .dw-grid { direction: rtl; }
html[dir="rtl"] .dw-card { text-align: right; }
@media (max-width: 900px) {
.mw-page-container { margin-top: 10px !important; }
.mw-body { padding: 16px !important; }
.dw-grid { grid-template-columns: 1fr; }
.dw-hero { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}