.md-utilities { --mu-ink: var(--navy); --mu-panel: var(--white); --mu-field: var(--sand); --mu-border: var(--cream); } .md-utilities .md-utility-dialog { width: min(680px, calc(100% - 32px)); max-width: calc(100% - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 2px solid var(--mu-ink); border-radius: 0; background: var(--mu-panel); color: var(--mu-ink); box-shadow: 4px 4px 0 var(--blue); overflow: auto; overscroll-behavior: contain; } .md-utilities .md-utility-dialog::backdrop { background: color-mix(in srgb, var(--navy) 64%, transparent); } .md-utilities .md-utility-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border-bottom: 2px solid var(--mu-border); } .md-utilities .md-utility-dialog h2 { margin: 0; font: 16px/1.5 var(--font-display); overflow-wrap: anywhere; } .md-utilities .md-utility-body { display: grid; gap: 16px; min-width: 0; padding: 16px; } .md-utilities .md-utility-dialog p { margin: 0; font: 20px/1.4 var(--font-body); overflow-wrap: anywhere; } .md-utilities .md-utility-dialog label { display: grid; gap: 8px; min-width: 0; font: 12px/1.6 var(--font-display); overflow-wrap: anywhere; } .md-utilities .md-utility-dialog :is(input:not([type="checkbox"]), select) { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 8px; border: 2px solid var(--mu-border); border-radius: 0; background: var(--mu-field); color: var(--mu-ink); font: 16px/1.5 var(--font-code); } .md-utilities .md-utility-dialog button { min-width: 44px; min-height: 44px; padding: 8px 12px; border: 2px solid var(--mu-border); border-radius: 0; background: var(--mu-panel); color: var(--mu-ink); font: 12px/1.5 var(--font-display); cursor: pointer; overflow-wrap: anywhere; } .md-utilities .md-utility-dialog button:enabled:hover { color: var(--white); background: var(--navy); border-color: var(--blue); } .md-utilities .md-utility-dialog button:disabled { border-style: dashed; cursor: not-allowed; } .md-utilities .md-utility-dialog [readonly] { border-style: dashed; } .md-utilities .md-utility-dialog :is(button, input, select):focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; } .md-utilities .md-utility-dialog [aria-invalid="true"] { border: 2px dashed var(--mu-ink); } .md-utilities .md-utility-actions, .md-utilities .md-utility-options { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .md-utilities .md-utility-dialog :is(.md-utility-options label, .md-utility-consent) { display: flex; align-items: center; gap: 8px; } .md-utilities .md-utility-dialog input[type="checkbox"] { flex: none; appearance: none; width: 24px; height: 24px; margin: 0; border: 2px solid var(--mu-ink); border-radius: 0; background: var(--mu-panel); color: var(--mu-ink); cursor: pointer; } .md-utilities .md-utility-dialog input[type="checkbox"]:checked::before { content: ""; display: block; width: 12px; height: 6px; margin: 4px 2px; border-left: 4px solid currentColor; border-bottom: 4px solid currentColor; transform: rotate(-45deg); } .md-utilities .md-utility-note { padding: 8px; border-left: 4px solid var(--blue); background: var(--mu-field); } .md-utilities .md-utility-match { max-height: 160px; overflow: auto; padding: 8px; border: 2px solid var(--mu-border); font-family: var(--font-code); } .md-utilities .md-utility-match:empty { display: none; } .md-utilities .md-utility-bindings { display: grid; gap: 16px; } .md-utilities .md-utility-outline { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .md-utilities .md-utility-outline li { min-width: 0; padding-inline-start: calc((var(--mu-level, 1) - 1) * 12px); } .md-utilities .md-utility-outline [data-level="2"] { --mu-level: 2; } .md-utilities .md-utility-outline [data-level="3"] { --mu-level: 3; } .md-utilities .md-utility-outline [data-level="4"] { --mu-level: 4; } .md-utilities .md-utility-outline [data-level="5"] { --mu-level: 5; } .md-utilities .md-utility-outline [data-level="6"] { --mu-level: 6; } .md-utilities .md-utility-outline button { width: 100%; text-align: start; } .md-utilities [hidden] { display: none !important; } @media screen { .md-document::highlight(md-utility-current) { color: var(--navy); background: var(--cream); text-decoration: underline; } [data-md-ui-theme="dark"] .md-utilities, .md-utilities[data-md-ui-theme="dark"] { --mu-ink: var(--sand); --mu-panel: var(--navy); --mu-field: var(--navy); --mu-border: var(--cream); color-scheme: dark; } .md-editor[data-md-ui-theme="dark"] { color: var(--sand); background: var(--navy); } [data-md-ui-theme="dark"] :is(.md-toolbar, .md-menu-panel, .md-selection-toolbar, .md-status-box, .md-busy, .md-import-notice, .md-settings-note, .md-shortcut-key, .md-shortcuts-section, .md-field, .md-dialog-heading, .md-dialog-actions, #local-workspace-panel, .md-explorer, .md-explorer__tree, .md-explorer__button) { color: var(--sand); background: var(--navy); border-color: var(--cream); } [data-md-ui-theme="dark"] .md-explorer__button:hover:not(:disabled), [data-md-ui-theme="dark"] .md-explorer__entry[aria-selected="true"] { color: var(--navy); background: var(--sand); } [data-md-ui-theme="dark"] :is(.md-button, #heading-level, #status-close, #drop-feedback) { color: var(--sand); background: var(--navy); border-color: var(--cream); } [data-md-ui-theme="dark"] :is(.md-button, #heading-level):not(:disabled):hover { color: var(--navy); background: var(--sand); } [data-md-ui-theme="dark"] .md-button[aria-pressed="true"] { color: var(--navy); background: var(--sand); } [data-md-ui-theme="dark"] .md-primary { color: var(--navy); background: var(--sand); } [data-md-ui-theme="dark"] dialog:not(.md-utility-dialog) { color: var(--sand); background: var(--navy); border-color: var(--cream); } [data-md-ui-theme="dark"] dialog:not(.md-utility-dialog) :is(input:not([type="range"]), select) { color: var(--sand); background: var(--navy); border-color: var(--cream); } [data-md-ui-theme="dark"] .md-utilities button:enabled:hover { color: var(--navy); background: var(--sand); } [data-md-ui-theme="dark"] :is(.md-button, .md-explorer__button, .md-utilities button, .md-utilities input, .md-utilities select):focus-visible { outline-color: var(--sand); } } @media (max-width: 620px) { .md-utilities .md-utility-dialog { width: calc(100% - 24px); max-width: calc(100% - 24px); } .md-utilities .md-utility-dialog header, .md-utilities .md-utility-body { padding: 12px; } .md-utilities .md-utility-dialog h2 { font-size: 12px; } .md-utilities .md-utility-outline li { padding-inline-start: calc((var(--mu-level, 1) - 1) * 4px); } } @media (prefers-reduced-motion: reduce) { .md-utilities, .md-utilities * { scroll-behavior: auto; transition: none; animation: none; } } @media print { .md-utilities { display: none !important; } }