/* ===================================================================== Docent dialogs — Assign, the workflow note, the follow-up question, and the Alert page. These are hand-written browser views in DocentIMS.ActionItems, not z3c.form add/edit forms, so add_form.css never reaches them: Diazo links that file only on add and edit pages. Each template had grown its own copy of the Add Task header - three copies by the time anyone counted - and they had already drifted apart. THIS FILE OWNS HOW THOSE DIALOGS LOOK, and rules.xml links it on every page rather than on a URL pattern. That is not laziness: the Assign form is fetched and injected into a on the page you were already looking at, so a stylesheet linked on the form's own URL is discarded with the rest of that response's . The parent page's stylesheet is the only one that reaches it. The numbers below are the ones add_form.css uses for the Add Task heading. They are repeated rather than imported because the two files are never loaded together; if you change one, change the other. ===================================================================== */ :root { /* The cream heading band and the logo's own brown, from add_form.css. --docent-accent is set per site by css-viewlet.pt in DocentIMS.ActionItems; the fallback here matches that file's. */ --docent-dialog-head: #f9f2e8; --docent-dialog-ink: #8B6914; --docent-dialog-card: whitesmoke; --docent-dialog-rule: #e3ded5; --docent-dialog-radius: 7px; } /* ------------------------------------------------------------ the card */ /* Shaped like the Add Task card, because that is the card these are meant to match: the same measure, the same whitesmoke, the same drop shadow (add_form.css, .pat-formunloadalert). Standing an unshadowed 480px box on the page instead read as an unfinished panel rather than a form. */ .docent-dialog { background: var(--docent-dialog-card); border-radius: var(--docent-dialog-radius); /* The header band runs to the card's edge, so nothing may sit outside the rounded corners. */ overflow: hidden; max-width: var(--docent-form-width, 980px); margin: 0 auto; border: 1px solid var(--docent-dialog-rule); box-shadow: 7px 7px 7px 2px #777; } /* Beats .transition-note-wrapper .transition-note-form { max-width: 480px } in the add-on's stylesheet, which was written for a bare no-JS fallback page and now squeezes a card. Overridden from here rather than edited there: that file is served under a cache-keyed URL, so changing it needs a profile bump and an upgrade step. */ .transition-note-wrapper .transition-note-form.docent-dialog { max-width: var(--docent-form-width, 980px); } /* Inside the popup the modal is the frame, so the card drops these. A 980px maximum would do nothing there, and the shadow would be a second one over the backdrop's. */ .transition-note-dialog .docent-dialog { max-width: none; box-shadow: none; border: 0; } /* One title per page. On a standalone dialog page Plone prints the content's own heading above the card, and the card then names the same thing again two lines lower - "can i set days" over "Will you meet this date?" about that very task. Keyed on .transition-note-wrapper, which exists only on the standalone page: action_items.js lifts the
alone into the popup and leaves the wrapper behind, so this can never hide the heading of the task page a dialog is opened over. The Alert page keeps its heading - that one carries the due date and the task, which the card does not repeat. */ body:has(.transition-note-wrapper .docent-dialog) h1.documentFirstHeading { display: none; } /* The shell DocentIMS.ActionItems builds around a fetched dialog. It used to carry 24px 26px of white padding, which showed as a white gutter around the header band - the band bled by 1rem, the shell padded by 26px, and the difference was visible on every edge. The card owns its edges now. */ dialog.transition-note-dialog:has(.docent-dialog), .transition-note-dialog:has(.docent-dialog) { padding: 0; background: transparent; border-radius: var(--docent-dialog-radius); } /* ---------------------------------------------------------- the header */ .docent-dialog-head { display: flex; align-items: center; gap: 10px; background: var(--docent-dialog-head); padding: 0.5rem 1.4rem; } .docent-dialog-head .docent-dialog-title { margin: 0; color: var(--docent-dialog-ink); font-size: 1.05rem; font-weight: 400; letter-spacing: 0.01em; line-height: 1.3; border-bottom: 0 none; } /* The round mark, drawn on the heading's own row. A background on ::before rather than an , so a template needs nothing but the heading - same as add_form.css does it on h1.documentFirstHeading. */ .docent-dialog-head::before { content: ""; flex: 0 0 30px; width: 30px; height: 30px; background: url(../images/docent-round.svg) center / contain no-repeat; } /* ------------------------------------------------------------ the body */ /* Whitesmoke, not white: the Add Task card's body is whitesmoke and its fields are white, which is what gives the fields an edge. Padding is add_form.css's - less at the top, because the header band already stands the content off. */ .docent-dialog-body { padding: 0.8rem 2rem 1.4rem; } .docent-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; background: var(--docent-dialog-card); border-top: 1px solid var(--docent-dialog-rule); padding: 0.9rem 2rem; } /* The buttons, in the shape add_form.css gives Create and Cancel: a pill, 8px by 22px, semibold. Painted here rather than left to the cascade - outside .formControls these fell through to the theme's page buttons and came out as uppercase crimson outlines, which is the toolbar's language, not a form's. */ .docent-dialog-foot .btn, .docent-dialog-foot button, .docent-dialog-foot input[type="submit"] { border-radius: 18px; padding: 8px 22px; font-size: 0.9rem; font-weight: 600; text-transform: none; letter-spacing: normal; line-height: 1.4; border: 1px solid transparent; cursor: pointer; text-decoration: none; } .docent-dialog-foot .btn-primary, .docent-dialog-foot button[type="submit"], .docent-dialog-foot input[type="submit"] { background: var(--docent-accent, #64041f); border-color: var(--docent-accent, #64041f); color: #ffffff; } .docent-dialog-foot .btn-primary:hover, .docent-dialog-foot button[type="submit"]:hover, .docent-dialog-foot input[type="submit"]:hover { filter: brightness(1.25); } .docent-dialog-foot .btn-secondary, .docent-dialog-foot .transition-note-cancel { background: #ffffff; border-color: var(--docent-line, #d7dbe3); color: var(--docent-dialog-ink, #8B6914); } .docent-dialog-foot .btn-secondary:hover, .docent-dialog-foot .transition-note-cancel:hover { background: #f6f2ec; } .docent-dialog-foot .btn:focus-visible, .docent-dialog-foot button:focus-visible { outline: 2px solid var(--docent-accent, #64041f); outline-offset: 2px; } /* --------------------------------------------------- inside the body */ /* A "N days before due date" sentence is one sentence. Plone renders a select as a full-width block, which broke it across three lines. */ .docent-dialog .assign-followup-when select, .docent-dialog .docent-inline-select { display: inline-block; width: auto; margin: 0 0.35rem; vertical-align: baseline; } /* Off until the choice that needs it is made. CSS rather than script: these dialogs are injected as HTML, and an injected