/* ============================================================ Dawah Urethane — phpBB 3.3 skin layer (child of prosilver) Clean-room recreation of the Urethane Light visual language (Firefox theme by miamoto, used as reference only): - bottom-lit glass: gradients darken to a hard gloss break at ~45%, then BRIGHTEN toward the bottom edge (measured from the original endcap.png raster), finished with a near-white catch-light line above the bottom border - full 1px white inner rim inside the dark border - engraved ink glyphs: dark solid icons, pale highlight above, soft shadow below - orange "hot" state for unread/alert (the original stop button) Theme state lives on : data-du-mode = light | dark (resolved; auto handled in JS) data-du-glass = faithful | modern | flat --du-h = accent hue (number), set inline by urethane.js Defaults with no JS: light + faithful + blue (hue 205). ============================================================ */ :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"); /* light mode 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%); } 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%); } 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)); /* dark + faithful glass (default glass for dark) */ --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%); } /* ---------- page scaffold ---------- */ body{background:var(--du-page);color:var(--du-text)} #wrap,.wrap{background:var(--du-panel);border-color:var(--du-edge);box-shadow:var(--du-psh)} a{color:var(--du-link)} a:hover{color:hsl(var(--du-h) calc(85% * var(--du-c)) 45%)} html[data-du-mode="dark"] a:hover{color:hsl(var(--du-h) calc(90% * var(--du-c)) 82%)} h2,h3,h2 a,h3 a,.panel h3,.postbody h3,.postbody h3 a{color:var(--du-text)} p,label,dt,dd,.content,.postbody .content{color:var(--du-text)} .copyright,.footer-row,.postprofile,.postprofile dd,dd.lastpost span,dd.lastpost,dd.posts,dd.topics,dd.views,.responsive-show,.topic-poster,.username-coloured ~ span,.modified,.notice{color:var(--du-muted)} hr{border-color:var(--du-line)} /* ---------- header (chrome with star watermark + grain) ---------- */ .headerbar{background:var(--du-star),var(--du-noise),var(--du-chrome);box-shadow:var(--du-chbev);border-bottom:1px solid var(--du-edge);color:var(--du-text)} html[data-du-glass="flat"] .headerbar{background:var(--du-chrome)} .headerbar h1,.headerbar p,#site-description h1,#site-description p{color:var(--du-text);text-shadow:var(--du-tsh)} .navbar{background:var(--du-noise),var(--du-chrome);box-shadow:var(--du-chbev);border-bottom:1px solid var(--du-edge)} html[data-du-glass="flat"] .navbar{background:var(--du-chrome)} .navbar .linklist > li > a,.navbar a,.navbar .dropdown-toggle{color:var(--du-text);text-shadow:var(--du-tsh)} .headerbar .search-box .inputbox,#search-box .inputbox{background:var(--du-panel);border:1px solid var(--du-edge);color:var(--du-text);box-shadow:inset 0 1px 2px hsl(var(--du-h) calc(40% * var(--du-c)) 35% / .18)} .search-box .button-search,.search-box .button-search-end,.search-header{background:var(--du-face);border-color:var(--du-edge);box-shadow:var(--du-bev)} /* engraved ink glyphs (Font Awesome icons in chrome and buttons) */ .navbar .icon,.headerbar .icon,.button .icon,ul.linklist .icon,.dropdown-trigger .icon{color:var(--du-glyph);text-shadow:var(--du-gsh)} /* ---------- breadcrumbs as glass chips ---------- */ .breadcrumbs .crumb a{background:hsl(var(--du-h) calc(50% * var(--du-c)) 52% / .13);padding:1px 10px;border-radius:99px;box-shadow:inset 0 1px hsl(var(--du-h) calc(80% * var(--du-c)) 94% / .5);color:var(--du-muted)} html[data-du-mode="dark"] .breadcrumbs .crumb a{box-shadow:inset 0 1px hsl(var(--du-h) calc(50% * var(--du-c)) 65% / .2)} .breadcrumbs .crumb a:hover{color:var(--du-link)} /* ---------- category / forum panels ---------- */ .forabg,.forumbg{background:var(--du-noise),var(--du-chrome);border:1px solid var(--du-edge);border-radius:9px;box-shadow:var(--du-psh)} html[data-du-glass="flat"] .forabg,html[data-du-glass="flat"] .forumbg{background:var(--du-chrome)} .forabg .header,.forumbg .header,ul.topiclist li.header{box-shadow:var(--du-chbev)} ul.topiclist li.header dt,ul.topiclist li.header dd,ul.topiclist li.header dt a,ul.topiclist li.header dd a{color:var(--du-text);text-shadow:var(--du-tsh)} ul.topiclist li.row{border-top:1px solid var(--du-line);border-bottom:none} ul.topiclist li.row:hover{background:var(--du-fade)} /* prosilver paints ul.forums (the row container) with a gradient IMAGE — only background shorthand removes it; background-color never wins */ ul.forums,ul.topics{background:transparent none} .bg1{background:var(--du-panel) none} .bg2{background:var(--du-panel2) none} .bg3{background:var(--du-panel2) none} ul.topiclist li.row dt a.forumtitle,ul.topiclist li.row dt a.topictitle{color:var(--du-link);font-weight:500} ul.topiclist dd{border-color:var(--du-line)} ul.topiclist li.row dt .forum-description,ul.topiclist .responsive-hide,ul.topiclist dfn{color:var(--du-muted)} /* sticky + announcement faders (denser toward the bottom, like itemSelected.png) */ .global-announce,.announce{background:linear-gradient(180deg,hsl(42 95% 60% / .12),hsl(42 95% 55% / .3))} .sticky{background:linear-gradient(180deg,hsl(var(--du-h) calc(70% * var(--du-c)) 55% / .07),hsl(var(--du-h) calc(70% * var(--du-c)) 50% / .18))} /* ---------- generic panels ---------- */ .panel{background-color:var(--du-panel2);color:var(--du-text);border-radius:9px} .post.bg1,.post.bg2{border:1px solid var(--du-line);border-radius:9px;box-shadow:var(--du-psh)} .post .postprofile{border-color:var(--du-line)} .rules{background-color:hsl(16 70% 50% / .12);color:hsl(14 75% 38%);border-radius:9px} html[data-du-mode="dark"] .rules{color:hsl(20 90% 70%)} /* ---------- post notices (deleted / unapproved / reported) ---------- */ p.post-notice{background:var(--du-panel2) none;border-inline-start:3px solid var(--du-edge);color:var(--du-text);padding:8px 12px} p.post-notice strong{color:var(--du-text)} p.post-notice.deleted,p.post-notice.reported{background:linear-gradient(180deg,hsl(8 75% 50% / .12),hsl(8 75% 45% / .26));border-inline-start-color:hsl(8 70% 48%)} p.post-notice.unapproved{background:linear-gradient(180deg,hsl(42 95% 60% / .12),hsl(42 95% 55% / .3));border-inline-start-color:hsl(38 80% 45%)} /* ---------- quotes and code: inset glass ---------- */ blockquote{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));border-inline-start:3px solid hsl(var(--du-h) calc(60% * var(--du-c)) 55%);border-top:none;border-bottom:none;border-inline-end:none;box-shadow:inset 0 1px hsl(var(--du-h) calc(80% * var(--du-c)) 92% / .4);color:var(--du-text)} blockquote cite{color:var(--du-link);font-weight:500} .codebox{background-color:var(--du-panel2);border:1px solid var(--du-line);color:var(--du-text)} .codebox p{border-bottom-color:var(--du-line);color:var(--du-muted)} /* ---------- buttons: bottom-lit glass ---------- */ .button,.button2,a.button,input.button2{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);transition:box-shadow .15s,filter .15s} .button:hover,.button2:hover,a.button:hover{background:var(--du-face);border-color:var(--du-edge);box-shadow:var(--du-bev),var(--du-glow);filter:brightness(1.06);color:var(--du-text)} .button:active,.button2:active{transform:translateY(1px);filter:brightness(.93)} .button .icon,.button:hover .icon{color:var(--du-glyph);text-shadow:var(--du-gsh)} input.button1,.button1,button.button1{background:var(--du-prim);border:1px solid var(--du-edge);border-radius:7px;box-shadow:var(--du-bev);color:#fff;text-shadow:0 1px rgb(0 0 0 / .3)} input.button1:hover,.button1:hover{box-shadow:var(--du-bev),var(--du-glow);filter:brightness(1.06);color:#fff} .caps-container,.dropdown-select{border-color:var(--du-edge)} /* ---------- forms ---------- */ .inputbox,select,textarea{background-color:var(--du-panel);border:1px solid var(--du-edge);color:var(--du-text)} .inputbox:focus,select:focus,textarea: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)} fieldset.fields1,fieldset.fields2{color:var(--du-text)} /* ---------- pagination: glass pills ---------- */ .pagination li a,.pagination li span{background:var(--du-face);border:1px solid var(--du-edge);border-radius:6px;box-shadow:var(--du-bev);color:var(--du-text);text-shadow:var(--du-tsh)} .pagination li a:hover{box-shadow:var(--du-bev),var(--du-glow);filter:brightness(1.06);color:var(--du-text)} .pagination li.active span{background:var(--du-prim);border-color:var(--du-edge);color:#fff;text-shadow:0 1px rgb(0 0 0 / .3);box-shadow:var(--du-bev),0 0 6px hsl(var(--du-h) calc(85% * var(--du-c)) 58% / .4)} .pagination li.ellipsis span{background:transparent;border:none;box-shadow:none;color:var(--du-muted)} /* ---------- notifications: the orange hot state ---------- */ .badge{background:var(--du-hot);border:1px solid hsl(14 65% 34%);box-shadow:inset 0 1px rgb(255 255 255 / .5);text-shadow:0 1px rgb(0 0 0 / .25)} .dropdown .dropdown-contents{background:var(--du-panel);border:1px solid var(--du-edge);box-shadow:var(--du-psh);color:var(--du-text)} .dropdown-extended ul li{border-top-color:var(--du-line)} .dropdown-extended ul li:hover{background:var(--du-fade)} .notification_list p.notification-time{color:var(--du-muted)} /* ---------- UCP/MCP tabs: steel inactive, light active ---------- */ .tabs .tab > a{background:var(--du-tabbg);border:1px solid var(--du-edge);border-bottom:none;border-radius:8px 8px 0 0;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)} .tabs .tab > a:hover{filter:brightness(1.05);color:var(--du-text)} .tabs .activetab > a,.tabs .activetab > a:hover{background:var(--du-tabon);box-shadow:var(--du-chbev);color:var(--du-text);font-weight:500} #tabs .tab > a,#minitabs .tab > a{background:var(--du-tabbg);color:var(--du-text)} #tabs .activetab > a,#minitabs .activetab > a{background:var(--du-tabon);color:var(--du-text)} /* ---------- row state icons: engraved glass tiles ---------- Replaces prosilver's raster row-item images with the designed tiles: glass face + engraved ink glyph; orange hot tile for unread (the original Urethane stop-button orange); gold tile for announcements. */ ul.topiclist li.row dl.row-item{background-image:none !important;position:relative} ul.topiclist li.header dl.row-item dt::before{display:none !important;content:none} ul.topiclist li.row dl.row-item dt::before{content:"\f075";font-family:FontAwesome;font-size:14px;font-style:normal;position:absolute;inset-inline-start:9px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:7px;display: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)} ul.topiclist li.row dl.forum_read dt::before,ul.topiclist li.row dl.forum_unread dt::before,ul.topiclist li.row dl.forum_read_subforum dt::before,ul.topiclist li.row dl.forum_unread_subforum dt::before{content:"\f086"} ul.topiclist li.row dl.forum_link dt::before{content:"\f08e"} ul.topiclist li.row dl[class*="sticky"] dt::before{content:"\f08d"} ul.topiclist li.row dl[class*="announce"] dt::before,ul.topiclist li.row dl[class*="global"] dt::before{content:"\f0a1";background: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%);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)} ul.topiclist li.row dl[class*="unread"] dt::before{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)} ul.topiclist li.row dl[class*="unread"]:not([class*="announce"]):not([class*="global"]):not([class*="sticky"]) dt::before{content:"\f06d"} ul.topiclist li.row dl[class*="locked"] dt::before{content:"\f023"} ul.topiclist li.row dl.topic_moved dt::before{content:"\f064"} ul.topiclist li.row dl[class*="pm_"] dt::before{content:"\f0e0"} @media (prefers-reduced-motion: no-preference){ ul.topiclist li.row dl[class*="unread"] dt::before{animation:du-unread 3.2s ease-in-out infinite} @keyframes du-unread{50%{box-shadow:var(--du-bev),0 0 8px hsl(18 92% 55% / .55)}} } /* ---------- primary action buttons with the sheen sweep ---------- New Topic / Post Reply etc. in the action bars get the primary bottom-lit glass and the specular sweep on hover. */ #phpbb .action-bar .button:not(.dropdown-trigger):not(.dropdown-toggle):not(.button-search):not(.button-search-end){background:var(--du-prim);border-color:var(--du-edge);color:#fff;text-shadow:0 1px rgb(0 0 0 / .3);position:relative;overflow:hidden} #phpbb .action-bar .button:not(.dropdown-trigger):not(.dropdown-toggle):not(.button-search):not(.button-search-end) .icon{color:#fff;text-shadow:0 1px rgb(0 0 0 / .3)} #phpbb .action-bar .button:not(.dropdown-trigger):not(.dropdown-toggle):not(.button-search):not(.button-search-end)::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} #phpbb .action-bar .button:not(.dropdown-trigger):not(.dropdown-toggle):not(.button-search):not(.button-search-end):hover::after{inset-inline-start:120%} @media (prefers-reduced-motion: reduce){#phpbb .action-bar .button::after{display:none}} /* ---------- icon-only tool buttons as square glass tiles ---------- */ #phpbb .post-buttons .button,#phpbb .dropdown-toggle.button,#phpbb .action-bar .dropdown-toggle{border-radius:7px} #phpbb .icon{color:var(--du-glyph);text-shadow:var(--du-gsh)} #phpbb .pagination .icon,#phpbb .pagination .icon:before{color:inherit;text-shadow:none} /* ---------- footer ---------- */ .copyright{color:var(--du-muted)} /* ---------- cascade hardening ---------- This file is linked last in , and these #phpbb-prefixed rules additionally out-rank extension/polish CSS that styles the same elements with class-level specificity. Also paints the html canvas so no white band can appear below a short page. */ html{background:var(--du-page)} body#phpbb{background:var(--du-page);color:var(--du-text)} #phpbb #wrap,#phpbb .wrap{background:var(--du-panel);border-color:var(--du-edge)} #phpbb ul.forums,#phpbb ul.topics{background:transparent none} #phpbb .bg1{background:var(--du-panel) none} #phpbb .bg2,#phpbb .bg3{background:var(--du-panel2) none} #phpbb .button:focus{background:var(--du-face);border-color:var(--du-edge);box-shadow:var(--du-bev),var(--du-glow);color:var(--du-text)} #phpbb .navigation a{background:var(--du-face);color:var(--du-text);box-shadow:var(--du-bev);border-color:var(--du-edge)} #phpbb .navigation a:hover,#phpbb .navigation .active-subsection a{background:var(--du-prim);color:#fff;text-shadow:0 1px rgb(0 0 0 / .3)} #phpbb .dropdown-extended .header{background:var(--du-noise),var(--du-chrome);color:var(--du-text);box-shadow:var(--du-chbev)} #phpbb ul.topiclist li.row{border-top:1px solid var(--du-line)} #phpbb ul.topiclist li.row:hover{background:var(--du-fade)} #phpbb p,#phpbb dt,#phpbb dd,#phpbb label,#phpbb .content,#phpbb .postbody .content,#phpbb fieldset dt label{color:var(--du-text)} #phpbb h2,#phpbb h3,#phpbb h2 a,#phpbb .panel h3{color:var(--du-text)} #phpbb .copyright,#phpbb .postprofile,#phpbb .postprofile dd,#phpbb dd.lastpost span,#phpbb dd.lastpost,#phpbb dd.posts,#phpbb dd.topics,#phpbb dd.views,#phpbb .responsive-show,#phpbb dfn,#phpbb .forum-description{color:var(--du-muted)} #phpbb a.forumtitle,#phpbb a.topictitle,#phpbb ul.topiclist li.row dt a.forumtitle,#phpbb ul.topiclist li.row dt a.topictitle{color:var(--du-link)} #phpbb .panel{background-color:var(--du-panel2);color:var(--du-text)} #phpbb .post.bg1{background:var(--du-panel) none} #phpbb .post.bg2{background:var(--du-panel2) none} #phpbb .post.pm{background:var(--du-panel) none} #phpbb .post:not(.bg1):not(.bg2){background:var(--du-panel) none} /* PM message-colours legend: readable on every swatch (white text + dark halo) + tidy layout */ #phpbb .mini dd.pm-legend{padding:4px 8px!important;margin-bottom:3px!important;border-radius:4px!important;line-height:1.25!important;font-size:11.5px!important;color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.8)!important} #phpbb .mini dt{margin-bottom:5px!important} #phpbb .inputbox,#phpbb select,#phpbb textarea{background-color:var(--du-panel);color:var(--du-text);border-color:var(--du-edge)} #phpbb .dropdown .dropdown-contents{background:var(--du-panel);color:var(--du-text)} #page-footer,#page-footer p{color:var(--du-muted)} #phpbb ul.navlinks{border-top-color:var(--du-line)} #phpbb li.row:hover{background:var(--du-fade)} #phpbb li.row:hover dd{border-left-color:var(--du-line)} #phpbb .rtl li.row:hover dd{border-right-color:var(--du-line);border-left-color:transparent} #phpbb table.table1 thead th{color:var(--du-muted);border-bottom:1px solid var(--du-edge)} #phpbb table.table1 tbody tr{border-color:var(--du-line)} #phpbb table.table1 tbody tr:hover,#phpbb table.table1 tbody tr.hover{background:var(--du-fade)} #phpbb table.table1 td{color:var(--du-text)} /* ---------- UCP login-polish reconciliation ---------- dawah-login-polish.css (prosilver, loaded before this file) paints all section-ucp surfaces with fixed light colors using !important. We keep its layout (radii, auth-card grid, button sizing) and the Google-branded sign-in button, but re-color surfaces/text with theme vars — repeated !important at equal specificity wins because this file loads last. */ body.section-ucp{background:var(--du-page) !important;color:var(--du-text) !important} body.section-ucp #page-body > .panel, body.section-ucp #page-body form#login > .panel, body.section-ucp #dawahwiki-google-login-panel{background:var(--du-panel) !important;border-color:var(--du-edge) !important;box-shadow:var(--du-psh) !important} body.section-ucp #page-body .panel .inner{background:transparent !important} body.section-ucp .dawahwiki-auth-card{background:transparent !important} body.section-ucp .dawahwiki-auth-card h2{color:var(--du-link) !important;box-shadow:inset 0 -1px 0 var(--du-line) !important} body.section-ucp .dawahwiki-auth-card p{color:var(--du-muted) !important} body.section-ucp form#login h2.login-title,body.section-ucp form#login h3{color:var(--du-link) !important} body.section-ucp form#login .fields1 dt label{color:var(--du-text) !important} body.section-ucp form#login .button2,body.section-ucp .button2.dawahwiki-auth-submit{background:var(--du-face) !important;border-color:var(--du-edge) !important;color:var(--du-text) !important} /* ============================================================ Theme switcher UI (injected by urethane.js) ============================================================ */ #du-fab{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none} #du-panel{position:absolute;z-index:9999;inset-inline-end:8px;top:100%;margin-top:6px;width:248px;background:var(--du-panel);border:1px solid var(--du-edge);border-radius:10px;box-shadow:var(--du-psh),0 6px 22px rgb(0 0 0 / .25);padding:12px;color:var(--du-text);font-size:12px;text-align:start} #du-panel h4{margin:0 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--du-muted)} #du-panel .du-row{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px} #du-panel .du-opt{flex:1;text-align:center;padding:5px 8px;border:1px solid var(--du-edge);border-radius:7px;background:var(--du-face);box-shadow:var(--du-bev);color:var(--du-text);text-shadow:var(--du-tsh);cursor:pointer;white-space:nowrap} #du-panel .du-opt:hover{box-shadow:var(--du-bev),var(--du-glow);filter:brightness(1.06)} #du-panel .du-opt.on{background:var(--du-prim);color:#fff;text-shadow:0 1px rgb(0 0 0 / .3)} #du-panel .du-sw{width:24px;height:24px;border-radius:50%;border:1px solid var(--du-edge);cursor:pointer;padding:0;box-shadow:inset 0 1px rgb(255 255 255 / .55)} #du-panel .du-sw.on{outline:2px solid var(--du-link);outline-offset:2px} #du-panel input[type="color"]{width:34px;height:26px;padding:0;border:1px solid var(--du-edge);border-radius:6px;background:var(--du-panel);cursor:pointer} #du-panel .du-note{color:var(--du-muted);font-size:11px;margin:2px 0 0} .du-anchor{position:relative} /* IMPLEMENTAUDIT Plan011/014 2026-06-19: forum mobile crest, touch targets, and Theme panel bounds. */ #du-fab{ min-height:44px; padding:10px 12px; border-radius:7px; touch-action:manipulation; } #du-fab:focus-visible{ outline:3px solid var(--du-link); outline-offset:2px; } #du-panel{ box-sizing:border-box; max-width:calc(100vw - 24px); } @media (max-width: 700px){ #site-description #logo.logo, #site-description a.logo{ display:inline-flex !important; align-items:center; justify-content:center; width:88px; height:88px; min-width:44px; min-height:44px; margin:0 auto 10px; float:none; } #site-description .site_logo{ display:block !important; width:72px; height:72px; background-size:contain; background-position:center; background-repeat:no-repeat; } #du-fab{ min-width:44px; min-height:44px; } #du-panel{ position:fixed; top:96px; right:12px; left:auto; width:min(248px, calc(100vw - 24px)); max-width:calc(100vw - 24px); max-height:calc(100vh - 112px); overflow:auto; } } @media (max-width: 360px){ #site-description #logo.logo, #site-description a.logo{ width:72px; height:72px; margin-bottom:8px; } #site-description .site_logo{ width:58px; height:58px; } #du-panel{ right:8px; width:calc(100vw - 16px); max-width:calc(100vw - 16px); } } /* === P0-07 forum chrome cohesion (BEGIN) — CSS-only; appearance only, no functions changed === */ /* A: form inputs -> flat Urethane surface. NOTE: on the forum --du-face is a GRADIENT; the flat surface token is --du-panel. Force flat (background-image:none) so no editor gradient leaks in. */ #page-body .inputbox, #page-body input[type="text"], #page-body input[type="password"], #page-body input[type="email"], #page-body input[type="search"], #page-body input[type="url"], #page-body input[type="tel"], #page-body input[type="number"], #page-body textarea, #page-body select { background-color: var(--du-panel) !important; background-image: none !important; border: 1px solid var(--du-edge); border-radius: 9px; box-shadow: var(--du-bev); color: var(--du-text); } #page-body .inputbox:focus, #page-body input[type="text"]:focus, #page-body input[type="password"]:focus, #page-body input[type="email"]:focus, #page-body input[type="search"]:focus, #page-body input[type="url"]:focus, #page-body input[type="number"]:focus, #page-body textarea:focus, #page-body select:focus { border-color: hsl(var(--du-h) calc(60% * var(--du-c)) 48%); box-shadow: var(--du-bev), 0 0 0 3px hsl(var(--du-h) calc(58% * var(--du-c)) 55% / .30); outline: none; } #page-body input[type="checkbox"], #page-body input[type="radio"] { accent-color: hsl(var(--du-h) calc(62% * var(--du-c)) 48%); } /* B: post author identity -> Urethane role pill (flat surface) + neutral username */ .postprofile .profile-rank { display: inline-block; font-weight: 800; font-size: 10.5px; line-height: 1.5; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--du-edge); background-color: var(--du-panel2); background-image: none; box-shadow: var(--du-bev); color: var(--du-muted); } .postprofile .username-coloured, .postprofile a.username { color: var(--du-text) !important; } /* === P0-07 (END) === */