/* * Deadikace Fan Club — one composer design. * * The "Start a new discussion" dialog is built by the same script on artist * and band profiles and on the Community hub, but until now it only inherited * a full design on profiles, because the poll, field and control rules lived * inside dkf-profile-pilot.css behind a .dkf-pilot ancestor that the Community * hub never had. This file owns the dialog outright: it is loaded in both * places, it declares its own palette so it no longer depends on where in the * page the dialog happens to sit, and it is the only place the composer's * layout is decided. * * The script moves the dialog to , so nothing here may assume a * surrounding scope. */ .dpr-composer-modal{ --dkx-bg:#fffdfa; --dkx-soft:#f5efea; --dkx-card:#fffefd; --dkx-line:#ded4cc; --dkx-line-strong:#c9bcb3; --dkx-ink:#251e20; --dkx-muted:#6d6063; --dkx-red:#a11c2a; --dkx-red-ink:#a11c2a; --dkx-shadow:0 24px 70px rgba(20,12,14,.3); } html[data-dkf-theme="dark"] .dpr-composer-modal, html:not([data-dkf-theme="light"]) .dpr-composer-modal{ --dkx-bg:#211e20; --dkx-soft:#2a2527; --dkx-card:#191617; --dkx-line:#453b40; --dkx-line-strong:#5b4e53; --dkx-ink:#f7f2ee; --dkx-muted:#c0b4b6; --dkx-red:#a11c2a; --dkx-red-ink:#f17a87; --dkx-shadow:0 24px 70px rgba(0,0,0,.55); } /* The dialog is a direct child of , above every fixed site chrome. Its box follows the visual viewport, so the on-screen keyboard can never push the Publish button or the close control out of reach. */ .dpr-composer-modal{ position:fixed!important; z-index:2147483000!important; top:var(--dkx-top,0px)!important; right:0!important; bottom:auto!important; left:0!important; box-sizing:border-box; display:grid!important; place-items:center!important; width:100%!important; height:var(--dkx-height,100dvh)!important; max-height:none!important; padding:clamp(18px,4vh,46px) max(18px,calc((100vw - 1160px)/2))!important; overflow:hidden!important; background:rgba(18,10,12,.72); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); font-family:"Maven Pro",Arial,sans-serif; color:var(--dkx-ink); } .dpr-composer-modal[hidden]{display:none!important} .dpr-composer-modal *{box-sizing:border-box;min-width:0} .dpr-composer-modal [hidden]{display:none!important} html.dkc-composer-open,html.dkc-composer-open body{overflow:hidden!important} .dpr-composer-modal>.dpr-composer{ position:relative!important; display:flex!important; flex-direction:column!important; box-sizing:border-box; width:min(980px,100%)!important; max-width:100%!important; max-height:100%!important; margin:0!important; padding:0 26px 26px!important; gap:15px!important; overflow-y:auto!important; overscroll-behavior:contain; border:1px solid var(--dkx-line)!important; border-radius:14px!important; background:var(--dkx-bg)!important; color:var(--dkx-ink)!important; box-shadow:var(--dkx-shadow)!important; scroll-padding-top:74px; } .dpr-composer-modal>.dpr-composer[hidden]{display:none!important} /* A heading that stays put: the close control must never scroll away, and it must never sit underneath the site header. */ .dpr-composer-modal .dpr-composer-head{ position:sticky!important; top:0!important; z-index:5!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:14px!important; margin:0 -26px 0!important; padding:18px 26px 14px!important; border-bottom:1px solid var(--dkx-line)!important; background:var(--dkx-bg)!important; } .dpr-composer-modal .dpr-composer-head h3{ margin:0!important; color:var(--dkx-ink)!important; font:700 26px/1.14 "Archivo Narrow","Arial Narrow",sans-serif!important; overflow-wrap:anywhere; } .dpr-composer-modal .dpr-composer-close{ display:grid!important; place-items:center!important; flex:0 0 46px!important; width:46px!important; height:46px!important; min-width:46px!important; padding:0!important; border:1px solid var(--dkx-line-strong)!important; border-radius:50%!important; background:var(--dkx-soft)!important; color:var(--dkx-ink)!important; font:700 26px/1 Arial,sans-serif!important; cursor:pointer; box-shadow:none!important; } .dpr-composer-modal .dpr-composer-close:is(:hover,:focus-visible){border-color:var(--dkx-red-ink)!important;color:var(--dkx-red-ink)!important} /* Post type */ .dpr-composer-modal .dpr-post-type-label{ margin:2px 0 -6px!important; color:var(--dkx-ink)!important; font:600 14px/1.4 "Maven Pro",Arial,sans-serif!important; } .dpr-composer-modal .dpr-post-types{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; width:100%!important; gap:12px!important; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; } .dpr-composer-modal .dpr-post-types button{ display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:10px!important; width:100%!important; min-width:0!important; min-height:50px!important; padding:13px 14px!important; border:2px solid var(--dkx-red-ink)!important; border-radius:9px!important; background:transparent!important; color:var(--dkx-red-ink)!important; font:800 13px/1.2 "Maven Pro",Arial,sans-serif!important; letter-spacing:.025em!important; text-transform:uppercase!important; box-shadow:none!important; cursor:pointer!important; } /* The two type icons ship with the composer so profiles and the hub agree. */ .dpr-composer-modal .dpr-post-types button::before{ content:""; display:block; flex:0 0 20px; width:20px; height:20px; background:currentColor; mask-position:center;mask-repeat:no-repeat;mask-size:contain; -webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain; } .dpr-composer-modal .dpr-post-types .dpr-type-discussion::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h11a4 4 0 0 1 4 4v3a4 4 0 0 1-4 4H9l-5 4v-4a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Zm13 11.7A5.8 5.8 0 0 0 21 10v-1a4.8 4.8 0 0 1 3 4.5 4.5 4.5 0 0 1-3 4.3V21l-4-3.2h-3.5a5.7 5.7 0 0 0 3.5-2.1Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h11a4 4 0 0 1 4 4v3a4 4 0 0 1-4 4H9l-5 4v-4a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Zm13 11.7A5.8 5.8 0 0 0 21 10v-1a4.8 4.8 0 0 1 3 4.5 4.5 4.5 0 0 1-3 4.3V21l-4-3.2h-3.5a5.7 5.7 0 0 0 3.5-2.1Z'/%3E%3C/svg%3E")} .dpr-composer-modal .dpr-post-types .dpr-type-poll::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h4v8H3v-8Zm7-10h4v18h-4V3Zm7 6h4v12h-4V9Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h4v8H3v-8Zm7-10h4v18h-4V3Zm7 6h4v12h-4V9Z'/%3E%3C/svg%3E")} .dpr-composer-modal .dpr-post-types button.is-on{ border-color:var(--dkx-red)!important; background:var(--dkx-red)!important; color:#fff!important; box-shadow:0 8px 18px color-mix(in srgb,var(--dkx-red) 30%,transparent)!important; } /* Fields */ .dpr-composer-modal label.dkc-field, .dpr-composer-modal .dpr-poll-create label.dkc-field{ display:block!important; margin:0!important; color:var(--dkx-ink)!important; font:700 13px/1.4 "Maven Pro",Arial,sans-serif!important; } .dpr-composer-modal :is(input,textarea,select){ display:block; box-sizing:border-box; width:100%; max-width:none; margin-top:7px; padding:12px 13px; border:1px solid var(--dkx-line)!important; border-radius:8px!important; background:var(--dkx-card)!important; color:var(--dkx-ink)!important; font:400 15px/1.5 "Maven Pro",Arial,sans-serif; } .dpr-composer-modal select{appearance:auto} .dpr-composer-modal option{background:var(--dkx-card);color:var(--dkx-ink)} .dpr-composer-modal textarea{min-height:132px;resize:vertical} .dpr-composer-modal ::placeholder{color:var(--dkx-muted);opacity:1} .dpr-composer-modal :is(input,textarea,select):focus-visible{outline:2px solid var(--dkx-red-ink);outline-offset:2px} .dpr-composer-modal .dpr-muted{margin:0!important;color:var(--dkx-muted)!important;font:400 13px/1.55 "Maven Pro",Arial,sans-serif!important} .dpr-composer-modal .dkc-field-error{display:block;margin-top:5px;color:var(--dkx-red-ink);font:700 12px/1.4 "Maven Pro",Arial,sans-serif} /* Writing tools. The file input and the empty preview frame are never part of the toolbar's visible row — only the picture button is. */ .dpr-composer-modal .dpr-message-tools{ position:relative; display:flex!important; align-items:flex-start!important; flex-wrap:wrap!important; gap:8px!important; margin:-4px 0 0!important; } .dpr-composer-modal .dpr-message-tools>.dpr-tool-icon{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:44px!important; height:44px!important; min-width:44px!important; margin:0!important; padding:0!important; border:1px solid var(--dkx-line)!important; border-radius:9px!important; background:var(--dkx-card)!important; color:var(--dkx-ink)!important; font-size:20px!important; line-height:1!important; cursor:pointer; } .dpr-composer-modal .dpr-message-tools>.dpr-tool-icon:is(:hover,:focus-visible){border-color:var(--dkx-red-ink)!important;background:var(--dkx-soft)!important} .dpr-composer-modal input[data-dpr-image-tool][type="file"]{ position:absolute!important; width:1px!important; height:1px!important; margin:-1px!important; padding:0!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; clip-path:inset(50%)!important; border:0!important; opacity:0!important; pointer-events:none!important; } .dpr-composer-modal .dpr-image-preview{ position:relative; display:block; flex:1 0 100%; width:100%; max-width:420px; margin-top:4px; padding:8px; border:1px solid var(--dkx-line); border-radius:10px; background:var(--dkx-soft); } .dpr-composer-modal .dpr-image-preview:empty{display:none!important} .dpr-composer-modal .dpr-image-preview img{display:block;width:100%;max-height:240px;border-radius:7px;object-fit:cover} .dpr-composer-modal .dpr-image-remove{ position:absolute;top:13px;right:13px; display:grid!important;place-items:center!important; width:34px!important;height:34px!important;margin:0!important;padding:0!important; border:1px solid rgba(255,255,255,.78)!important;border-radius:50%!important; background:rgba(20,14,16,.82)!important;color:#fff!important;font-size:22px!important;cursor:pointer; } .dpr-composer-modal .dpr-emoji{ position:absolute;z-index:20;top:50px;left:0; display:grid!important; grid-template-columns:repeat(9,38px)!important; gap:3px!important; max-width:min(390px,calc(100vw - 38px))!important; max-height:268px!important; padding:7px!important; overflow:auto!important; overscroll-behavior:contain; border:1px solid var(--dkx-line); border-radius:11px; background:var(--dkx-card); box-shadow:0 12px 30px rgba(20,12,14,.22); } .dpr-composer-modal .dpr-emoji>.dpr-emoji-option{ display:grid!important;place-items:center!important; width:38px!important;height:38px!important;min-width:38px!important; margin:0!important;padding:0!important;border:0!important;border-radius:50%!important; background:transparent!important;color:inherit!important;font-size:22px!important;box-shadow:none!important;cursor:pointer; } .dpr-composer-modal .dpr-emoji>.dpr-emoji-option:is(:hover,:focus-visible){background:var(--dkx-soft)!important} /* Artist and band tagging */ .dpr-composer-modal .dpr-entity-picker{position:relative;display:grid;gap:9px} .dpr-composer-modal .dpr-entity-results{ display:grid;gap:3px;max-height:230px;overflow:auto; padding:6px;border:1px solid var(--dkx-line);border-radius:9px;background:var(--dkx-card); } /* No results, no box: the search field is the only bar this control needs. */ .dpr-composer-modal .dpr-entity-results:empty{display:none!important} .dpr-composer-modal .dpr-entity-chips:empty{display:none!important} .dpr-composer-modal .dpr-entity-results button{ width:100%;min-height:40px;padding:8px 10px;border:0;border-radius:7px; background:transparent;color:var(--dkx-ink);font:600 13px/1.35 "Maven Pro",Arial,sans-serif;text-align:left;cursor:pointer; } .dpr-composer-modal .dpr-entity-results button:is(:hover,:focus-visible){background:var(--dkx-soft)} .dpr-composer-modal .dpr-entity-chips{display:flex;flex-wrap:wrap;gap:7px} .dpr-composer-modal .dpr-entity-chip{ min-height:36px;padding:7px 13px;border:1px solid var(--dkx-line-strong);border-radius:999px; background:var(--dkx-soft);color:var(--dkx-ink);font:700 12px/1 "Maven Pro",Arial,sans-serif;cursor:pointer; } .dpr-composer-modal .dpr-entity-chip:is(:hover,:focus-visible){border-color:var(--dkx-red-ink);color:var(--dkx-red-ink)} /* Poll builder — the section that had no design at all on the Community hub. */ .dpr-composer-modal .dpr-poll-create{ display:grid!important; gap:15px!important; margin:2px 0 0!important; padding:20px!important; border:1px solid var(--dkx-line)!important; border-radius:12px!important; background:var(--dkx-soft)!important; } .dpr-composer-modal .dpr-poll-create[hidden]{display:none!important} .dpr-composer-modal .dpr-poll-create>h4{ margin:0!important; color:var(--dkx-ink)!important; font:700 19px/1.2 "Archivo Narrow","Arial Narrow",sans-serif!important; } .dpr-composer-modal .dpr-poll-create>h4+*{margin-top:-4px!important} .dpr-composer-modal .dpr-poll-options{display:grid!important;gap:10px!important} .dpr-composer-modal .dpr-response-row{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; align-items:center!important; gap:9px!important; } .dpr-composer-modal .dpr-response-row input{margin-top:0!important} .dpr-composer-modal .dpr-response-row .dkc-field-error{grid-column:1/-1} .dpr-composer-modal .dpr-response-remove{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:46px!important; padding:10px 14px!important; border:1px solid var(--dkx-line-strong)!important; border-radius:8px!important; background:var(--dkx-card)!important; color:var(--dkx-red-ink)!important; font:800 12px/1 "Maven Pro",Arial,sans-serif!important; white-space:nowrap; cursor:pointer; } .dpr-composer-modal .dpr-response-remove:disabled{opacity:.4;cursor:not-allowed} .dpr-composer-modal .dpr-poll-create>.dpr-button{ justify-self:start!important; min-height:44px!important; margin:0!important; padding:10px 16px!important; border:1px dashed var(--dkx-line-strong)!important; border-radius:8px!important; background:var(--dkx-card)!important; color:var(--dkx-ink)!important; font:800 12px/1 "Maven Pro",Arial,sans-serif!important; cursor:pointer; } .dpr-composer-modal .dpr-poll-create>.dpr-button:is(:hover,:focus-visible){border-color:var(--dkx-red-ink)!important;color:var(--dkx-red-ink)!important} .dpr-composer-modal .dpr-poll-settings{display:grid!important;gap:9px!important} .dpr-composer-modal .dpr-poll-settings label{ display:grid!important; grid-template-columns:22px minmax(0,1fr)!important; align-items:center!important; gap:11px!important; min-height:48px!important; margin:0!important; padding:10px 13px!important; border:1px solid var(--dkx-line)!important; border-radius:9px!important; background:var(--dkx-card)!important; color:var(--dkx-ink)!important; font:600 13px/1.35 "Maven Pro",Arial,sans-serif!important; cursor:pointer; } .dpr-composer-modal .dpr-poll-settings label:is(:hover,:focus-within){border-color:var(--dkx-line-strong)!important} .dpr-composer-modal .dpr-poll-settings input[type="checkbox"]{ width:20px!important;height:20px!important;min-width:20px!important; margin:0!important;padding:0!important;border-radius:5px!important;accent-color:var(--dkx-red);cursor:pointer; } /* Publish. No decorative arrow. */ .dpr-composer-modal .dpr-publish{ z-index:4; display:inline-flex!important; align-items:center!important; justify-content:center!important; align-self:flex-start!important; width:max-content!important; min-width:170px!important; min-height:50px!important; margin:4px 0 0!important; padding:13px 26px!important; gap:0!important; border:1px solid var(--dkx-red)!important; border-radius:9px!important; background:linear-gradient(135deg,var(--dkx-red),#7f1320)!important; color:#fff!important; font:850 14px/1 "Maven Pro",Arial,sans-serif!important; box-shadow:0 8px 20px color-mix(in srgb,var(--dkx-red) 30%,transparent)!important; cursor:pointer; } .dpr-composer-modal .dpr-publish::after, .dpr-composer-modal .dpr-publish::before{content:none!important;display:none!important} .dpr-composer-modal .dpr-publish:disabled{opacity:.6;cursor:progress} .dpr-composer-modal .dpr-publish:is(:hover,:focus-visible){filter:brightness(1.05)} .dpr-composer-modal .dpr-status{margin:0!important;color:var(--dkx-muted)!important;font:600 13px/1.5 "Maven Pro",Arial,sans-serif!important} .dpr-composer-modal .dpr-button:not(.dpr-publish){ min-height:44px;padding:10px 16px;border:1px solid var(--dkx-line-strong);border-radius:8px; background:var(--dkx-card);color:var(--dkx-ink);font:800 12px/1 "Maven Pro",Arial,sans-serif;cursor:pointer; } @media(max-width:780px){ .dpr-composer-modal{padding:0!important;place-items:stretch!important;background:var(--dkx-bg)} .dpr-composer-modal>.dpr-composer{ width:100%!important; height:100%!important; max-height:100%!important; padding:0 15px calc(16px + env(safe-area-inset-bottom))!important; gap:13px!important; border:0!important; border-radius:0!important; box-shadow:none!important; } .dpr-composer-modal .dpr-composer-head{ margin:0 -15px 0!important; padding:calc(13px + env(safe-area-inset-top)) 15px 12px!important; } .dpr-composer-modal .dpr-composer-head h3{font-size:22px!important} .dpr-composer-modal .dpr-composer-close{flex-basis:44px!important;width:44px!important;height:44px!important;min-width:44px!important;font-size:24px!important} .dpr-composer-modal .dpr-post-types{gap:8px!important} .dpr-composer-modal .dpr-post-types button{gap:6px!important;padding:11px 6px!important;font-size:10.5px!important;letter-spacing:0!important} .dpr-composer-modal textarea{min-height:112px} .dpr-composer-modal .dpr-poll-create{padding:15px!important;gap:13px!important} .dpr-composer-modal .dpr-poll-create>h4{font-size:18px!important} .dpr-composer-modal .dpr-emoji{ position:fixed!important;right:10px!important;bottom:calc(14px + env(safe-area-inset-bottom))!important;left:10px!important;top:auto!important; grid-template-columns:repeat(auto-fit,minmax(36px,1fr))!important;max-width:none!important;max-height:min(44vh,320px)!important; } /* The Publish control stays reachable while the keyboard is open: a bar pinned to the foot of the sheet rather than a button that scrolls away. */ .dpr-composer-modal .dpr-publish{ position:sticky; bottom:0; width:calc(100% + 30px)!important; align-self:stretch!important; min-height:58px!important; margin:8px -15px calc(-16px - env(safe-area-inset-bottom))!important; padding:17px 16px calc(17px + env(safe-area-inset-bottom))!important; border-right:0!important; border-left:0!important; border-radius:0!important; box-shadow:0 -10px 22px rgba(0,0,0,.18)!important; } } @media(max-width:420px){ .dpr-composer-modal .dpr-response-row{grid-template-columns:minmax(0,1fr)!important} .dpr-composer-modal .dpr-response-remove{justify-self:stretch!important} } @media(prefers-reduced-motion:reduce){ .dpr-composer-modal *{transition:none!important} } /* Last word on visibility: several rules above set display on elements the script also toggles with the hidden attribute (the emoji palette, the empty image frame, the poll builder, the search results). The attribute wins. */ .dpr-composer-modal [hidden][hidden], .dpr-composer-modal [hidden][hidden][hidden]{display:none!important}