/* UXP-FORM-CSS-VERSION: 202607021800 MINIMAL rebuild. Skins the Power Pages entity form (create/edit case) without fighting its layout: the Dataverse form decides structure (sections, columns, order); this file only applies fonts, rounded inputs, rounded action buttons, message styling, and hides portal chrome when the form runs inside the case modal iframe. Deliberately NOT included (removed from earlier versions): - fieldset-as-card borders / radius / shadow - legend-as-title styling (caused titles to float outside boxes) - forced two-column tab flex (caused squish / wasted space) */ /* ========================================================= Fonts ========================================================= */ @font-face { font-family: "Sohne-Buch"; src: url("/sohne-buch.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Sohne-Halbfett"; src: url("/sohne-halbfett.otf") format("opentype"); font-weight: 600 800; font-style: normal; font-display: swap; } @font-face { font-family: "SohneMono-Buch"; src: url("/sohne-mono-buch.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } /* ========================================================= Variables ========================================================= */ :root { --uxp-font-regular: "Sohne-Buch", Arial, sans-serif; --uxp-font-bold: "Sohne-Halbfett", Arial, sans-serif; --uxp-color-primary: #505882; --uxp-color-primary-light: #8c91dd; --uxp-color-primary-light-rgb: 140, 145, 221; --uxp-color-primary-tint: #edefff; --uxp-color-page-bg: #fcfbff; --uxp-color-border: #dadcff; --uxp-color-border-soft: #e9eaf0; --uxp-color-text: #40424e; --uxp-color-text-dark: #2c2c2a; --uxp-color-text-muted: #707070; --uxp-color-white: #ffffff; --uxp-color-danger: #fc8282; --uxp-color-danger-rgb: 252, 130, 130; --uxp-color-success: #69d9b5; --uxp-color-success-rgb: 105, 217, 181; --uxp-radius-control: 13px; --uxp-input-height: 34px; } /* ========================================================= Iframe context: hide portal chrome inside the case modal. The class uxp-in-iframe is set on by the create/edit template only when window.self !== window.top. ========================================================= */ html.uxp-in-iframe body { background: var(--uxp-color-page-bg) !important; } html.uxp-in-iframe .navbar, html.uxp-in-iframe header, html.uxp-in-iframe .header, html.uxp-in-iframe #header, html.uxp-in-iframe [role="banner"], html.uxp-in-iframe .navbar-static-top, html.uxp-in-iframe .navbar-fixed-top, html.uxp-in-iframe .navbar-inverse, html.uxp-in-iframe .menu-bar, html.uxp-in-iframe nav.navbar, html.uxp-in-iframe footer, html.uxp-in-iframe .footer, html.uxp-in-iframe .footer-bottom, html.uxp-in-iframe .copyrightname, html.uxp-in-iframe .paddingCopyright, html.uxp-in-iframe [role="contentinfo"], html.uxp-in-iframe .navbar-fixed-bottom, html.uxp-in-iframe .breadcrumb, html.uxp-in-iframe .page-heading, html.uxp-in-iframe .page-header { display: none !important; } /* Hide Layout 1 Column's breadcrumb/heading wrapper inside the iframe */ html.uxp-in-iframe .wrapper-body > .container > .page-heading { display: none !important; } /* Existing behaviour kept: portal hides the muted helper row */ .text-muted { display: none !important; } /* ========================================================= Base form typography (no layout changes) ========================================================= */ .crmEntityFormView { font-family: var(--uxp-font-regular) !important; color: var(--uxp-color-text); } h3, .h3 { font-family: var(--uxp-font-regular) !important; color: var(--uxp-color-text); } .crmEntityFormView .cell .info label { font-family: var(--uxp-font-bold); font-weight: 700; color: var(--uxp-color-text-dark); } /* Required marker (keep single asterisk; hide duplicate validator glyph) */ .crmEntityFormView .cell .info.required label::after { content: " *"; color: var(--uxp-color-danger); } .crmEntityFormView .cell .info .validators { display: none; } /* ========================================================= Inputs (rounded) - the look you want to keep ========================================================= */ .crmEntityFormView .control .form-control, .crmEntityFormView .control input[type="text"], .crmEntityFormView .control input[type="email"], .crmEntityFormView .control input[type="tel"], .crmEntityFormView .control input[type="number"], .crmEntityFormView .control input[type="date"], .crmEntityFormView .control select, .crmEntityFormView .control textarea { min-height: var(--uxp-input-height); padding: 5px 12px; border: 1px solid var(--uxp-color-border); border-radius: var(--uxp-radius-control); background: var(--uxp-color-white); color: var(--uxp-color-text); font-family: var(--uxp-font-regular); font-size: 13px; box-shadow: none; transition: border-color .12s ease, box-shadow .12s ease; } .crmEntityFormView .control textarea { resize: vertical; line-height: 1.4; } .crmEntityFormView .control .form-control:focus, .crmEntityFormView .control select:focus, .crmEntityFormView .control textarea:focus { border-color: var(--uxp-color-primary-light); box-shadow: 0 0 0 3px rgba(var(--uxp-color-primary-light-rgb), .18); outline: none; } .crmEntityFormView .control .form-control[readonly], .crmEntityFormView .control .form-control[disabled] { background: var(--uxp-color-page-bg); color: var(--uxp-color-text-muted); } /* Lookup input + magnifier as one rounded group */ .crmEntityFormView .control .input-group .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; } .crmEntityFormView .control .input-group-btn .btn, .crmEntityFormView .control .input-group .btn { min-height: var(--uxp-input-height); border: 1px solid var(--uxp-color-border); border-top-right-radius: var(--uxp-radius-control); border-bottom-right-radius: var(--uxp-radius-control); background: var(--uxp-color-primary-tint); color: var(--uxp-color-primary); box-shadow: none; } .crmEntityFormView .control .input-group-btn .btn:hover, .crmEntityFormView .control .input-group-btn .btn:focus { background: var(--uxp-color-primary-light); color: var(--uxp-color-white); } /* ========================================================= Validation + messages ========================================================= */ .crmEntityFormView .validation-summary, #ValidationSummaryEntityFormView { margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--uxp-color-danger); border-radius: var(--uxp-radius-control); background: rgba(var(--uxp-color-danger-rgb), .12); color: var(--uxp-color-text-dark); font-size: 13px; } .crmEntityFormView .msg-success, .crmEntityFormView .alert-success, #MessagePanel .alert-success { margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--uxp-color-success); border-radius: var(--uxp-radius-control); background: rgba(var(--uxp-color-success-rgb), .14); color: var(--uxp-color-text-dark); font-size: 13px; } .crmEntityFormView .cell.has-error .form-control, .crmEntityFormView .control .input-validation-error { border-color: var(--uxp-color-danger) !important; } /* ========================================================= Action buttons (Update / Submit / Close / Cancel / Add note / Upload) - rounded, same shape; Bootstrap keeps their colours. :empty deliberately excludes submit inputs and known action buttons so the Update / Submit is never hidden. ========================================================= */ .crmEntityFormView .btn, .crmEntityFormView input[type="submit"], .crmEntityFormView button[type="submit"], .crmEntityFormView #UpdateButton, .crmEntityFormView .submit-btn, .crmEntityFormView .close-case-link, .crmEntityFormView .cancel-case-link, .crmEntityFormView .reopen-case-link, .crmEntityFormView .addnote, .crmEntityFormView .note-actions .btn, .crmEntityFormView #notescontrol .btn, .crmEntityFormView .form-action-container .btn, .crmEntityFormView .form-action-container-left .btn, .crmEntityFormView .form-action-container-right .btn, .crmEntityFormView .attach-file .btn { min-height: var(--uxp-input-height); height: auto !important; padding: 5px 22px !important; border-radius: var(--uxp-radius-control) !important; font-family: var(--uxp-font-bold) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.3 !important; box-shadow: none !important; cursor: pointer !important; /* no background/color -> Bootstrap contextual colours kept */ } .crmEntityFormView .form-action-container .btn + .btn, .crmEntityFormView .btn + .btn { margin-left: 8px !important; } .crmEntityFormView .btn .fa, .crmEntityFormView .btn .glyphicon { margin-right: 6px !important; }