/* packages/brand/brand.css */ /* Modest Tools brand layer on top of mdst-ui. Page layout and site chrome only; component styles live next to each component. */ :root { color-scheme: light dark; --mt-width: 64rem; /* mdst-ui has no dark theme yet. Each colour is light, dark: the browser picks one from color-scheme, which follows the device unless the theme toggle sets data-theme on . */ --mdst-color-fg: light-dark(#000, #f2f2f2); --mdst-color-bg: light-dark(#fff, #121212); --mdst-color-border: light-dark(#000, #f2f2f2); --mdst-color-muted: light-dark(#666, #a3a3a3); --mdst-color-subtle: light-dark(#f5f5f5, #262626); --mdst-color-surface: light-dark(#f5f5f5, #1c1c1c); --mdst-color-focus: light-dark(#000, #fff); --mdst-color-error: light-dark(#dc2626, #f87171); --mdst-color-success: light-dark(#16a34a, #4ade80); &[data-theme='light'] { color-scheme: light; } &[data-theme='dark'] { color-scheme: dark; } } [hidden] { display: none !important; } /* mdst-ui spaces list items with a bottom margin, except the last. Lists laid out as grids or rows use gaps instead, where that margin makes the last item bigger. */ :is(.tool-grid, .category-nav ul, .footer-tools ul, .breadcrumbs) > li { margin: 0; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* The password input's eye toggle is a checkbox, so mdst-ui's checked-box square (::after) was drawn over the eye when shown. Remove once fixed in mdst-ui. */ .mdst-password-input .mdst-password-input__toggle:checked::after { content: none; } body.mdst-ui { margin: 0; background: var(--mdst-color-bg); color: var(--mdst-color-fg); font-family: var(--mdst-font-text); line-height: var(--mdst-line-height); -webkit-text-size-adjust: 100%; } .site-header, .site-footer, main { box-sizing: border-box; max-width: var(--mt-width); margin-inline: auto; padding-inline: var(--mdst-space-md); } .site-header { display: flex; justify-content: space-between; align-items: center; gap: var(--mdst-space-md); padding-block: var(--mdst-space-md); border-bottom: var(--mdst-border-width) solid var(--mdst-color-border); & .logo { display: inline-flex; align-items: center; gap: var(--mdst-space-sm); font-weight: 700; color: inherit; text-decoration: none; } & nav { display: flex; gap: var(--mdst-space-md); align-items: center; font-size: var(--mdst-text-sm); } & .icon-link { display: inline-flex; color: inherit; &:hover, &:focus-visible { color: var(--mdst-color-muted); } } & .theme-toggle { min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; &[data-current='light'] .theme-sun, &[data-current='dark'] .theme-moon { display: none; } } } main { padding-block: var(--mdst-space-xl); } .site-footer { padding-block: var(--mdst-space-xl) var(--mdst-space-lg); border-top: var(--mdst-border-width) solid var(--mdst-color-border); font-size: var(--mdst-text-sm); color: var(--mdst-color-muted); & a { color: inherit; } & .footer-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--mdst-space-lg); margin-bottom: var(--mdst-space-xl); & h2 { margin: 0 0 var(--mdst-space-sm); font-size: var(--mdst-text-sm); font-weight: 600; & a { color: var(--mdst-color-fg); text-decoration: none; } } & ul { display: grid; gap: var(--mdst-space-xs); margin: 0; padding: 0; list-style: none; } & ul a { text-decoration: none; &:hover, &:focus-visible { color: var(--mdst-color-fg); text-decoration: underline; } } } & .legal { margin: 0 0 var(--mdst-space-xs); & .link { all: unset; color: inherit; text-decoration: underline; cursor: pointer; &:focus-visible { outline: 2px solid var(--mdst-color-focus); outline-offset: 2px; } } font-size: var(--mdst-text-xs); text-align: center; } } .intro { max-width: 42rem; & h1 { margin-block: 0 var(--mdst-space-sm); } & p { margin-block: 0 var(--mdst-space-sm); } & .note { font-size: var(--mdst-text-sm); color: var(--mdst-color-muted); } } mt-search { display: block; margin-block: var(--mdst-space-lg); & input { width: 100%; box-sizing: border-box; } /* The clear button: a solid X in the text colour, instead of the browser's grey circle. */ & input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 1em; height: 1em; background-color: var(--mdst-color-fg); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='%23000' stroke-width='2.5' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat; cursor: pointer; } } #search-empty { margin-block: var(--mdst-space-xl); } mt-search:has(+ .category-nav) { margin-bottom: var(--mdst-space-sm); } .category-nav ul { display: flex; flex-wrap: wrap; gap: var(--mdst-space-xs); margin: 0; padding: 0; list-style: none; & a { display: inline-flex; gap: var(--mdst-space-xs); padding: var(--mdst-space-xs) var(--mdst-space-sm); border: var(--mdst-border-width) solid var(--mdst-color-border); font-size: var(--mdst-text-sm); color: inherit; text-decoration: none; &:hover, &:focus-visible { background: var(--mdst-color-fg); color: var(--mdst-color-bg); } } & span { color: var(--mdst-color-muted); } & a:hover span, & a:focus-visible span { color: inherit; } } .category { margin-block: var(--mdst-space-xl); scroll-margin-top: var(--mdst-space-md); & > header { display: flex; align-items: baseline; gap: var(--mdst-space-md); flex-wrap: wrap; margin-bottom: var(--mdst-space-md); & h2 { margin: 0; } & p { margin: 0; color: var(--mdst-color-muted); } & a { margin-left: auto; font-size: var(--mdst-text-sm); } } } .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--mdst-space-md); margin: 0; padding: 0; list-style: none; & > li { position: relative; } } .tool-card { display: grid; gap: var(--mdst-space-xs); height: 100%; box-sizing: border-box; padding: var(--mdst-space-md); border: var(--mdst-border-width) solid var(--mdst-color-border); color: inherit; text-decoration: none; & strong { padding-right: 1.75rem; font-size: var(--mdst-text-base); } & span { font-size: var(--mdst-text-sm); color: var(--mdst-color-muted); } &:is(a):hover, &:is(a):focus-visible { background: var(--mdst-color-subtle); } &[aria-disabled='true'] { border-style: dashed; border-color: var(--mdst-color-muted); opacity: 0.5; cursor: default; } & .badge { justify-self: start; font-size: var(--mdst-text-xs); text-transform: uppercase; letter-spacing: 0.05em; } } .content { max-width: 42rem; margin-top: var(--mdst-space-xl); & h2 { margin-block: var(--mdst-space-xl) var(--mdst-space-sm); } & h2:first-child { margin-top: 0; } & ol { margin-block: 0; } & details { margin-block: var(--mdst-space-sm); } & .note { margin-top: var(--mdst-space-xl); font-size: var(--mdst-text-sm); color: var(--mdst-color-muted); } } .breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--mdst-space-sm); margin: 0 0 var(--mdst-space-md); padding: 0; list-style: none; font-size: var(--mdst-text-sm); color: var(--mdst-color-muted); & li + li::before { content: '/'; margin-right: var(--mdst-space-sm); } & a { color: inherit; } } /* packages/audio/waveform.css */ /* createWaveform(). Colours come from custom properties so tools can theme it. */ .waveform { --selection: color-mix(in srgb, var(--mdst-color-fg) 12%, transparent); --handle: var(--mdst-color-fg); --playhead: var(--mdst-color-error); color: color-mix(in srgb, var(--mdst-color-fg) 70%, transparent); background: var(--mdst-color-subtle); & .waveform-canvas { display: block; width: 100%; height: 9rem; touch-action: none; } } /* packages/pdf/viewer.css */ .pdf-sheet { position: relative; justify-self: center; max-width: 100%; box-shadow: 0 1px 6px rgb(0 0 0 / 0.25); } .pdf-sheet-canvas { display: block; max-width: 100%; max-height: 80vh; width: auto; height: auto; } .pdf-page-label { align-self: center; } /* packages/shell/components/consent.css */ mt-consent { /* Paragraphs default to body size, which is large for a small banner. */ & .mdst-banner-content { font-size: var(--mdst-text-sm); } } /* packages/shell/components/dropzone.css */ mt-dropzone { display: grid; gap: var(--mdst-space-sm); justify-items: center; padding: var(--mdst-space-xl) var(--mdst-space-md); border: var(--mdst-border-width) dashed var(--mdst-color-border); text-align: center; &[data-over] { background: var(--mdst-color-subtle); } & p { margin: 0; color: var(--mdst-color-muted); } & input[type='file'] { max-width: 100%; } } /* packages/shell/components/field.css */ mt-field { /* Height of a text input, so other controls can line up with them in a row. */ --mt-control-height: calc(var(--mdst-line-height) * 1em + 2 * var(--mdst-space-sm) + 2 * var(--mdst-border-width)); display: block; min-width: 10rem; & > label { display: grid; gap: var(--mdst-space-xs); } & .label { font-size: var(--mdst-text-sm); font-weight: 600; } & .hint { font-size: var(--mdst-text-xs); color: var(--mdst-color-muted); } } /* Colour pickers match the height of text inputs, so rows line up. */ mt-field input[type='color'] { display: block; inline-size: 4rem; block-size: var(--mt-control-height); padding: var(--mdst-space-xs); border: var(--mdst-border-width) solid var(--mdst-color-border); border-radius: var(--mdst-radius); background: var(--mdst-color-bg); cursor: pointer; } /* Sliders take the same height as text inputs, with the track in the middle, so they sit level with the controls beside them instead of against the label. */ mt-field input[type='range'] { margin-block: calc((var(--mt-control-height) - var(--mdst-space-1)) / 2); } /* packages/shell/components/file-list.css */ mt-file-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mdst-space-sm); &:empty { display: none; } & .heading { margin: var(--mdst-space-sm) 0 0; font-size: var(--mdst-text-sm); font-weight: 600; &:first-child { margin-top: 0; } } & .item { display: flex; gap: var(--mdst-space-md); align-items: center; padding: var(--mdst-space-sm); border: var(--mdst-border-width) solid var(--mdst-color-subtle); & > div { display: grid; flex: 1; min-width: 0; overflow-wrap: anywhere; } /* Long names are cut short with an ellipsis; the full name is in the tooltip. */ & strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & span { font-size: var(--mdst-text-sm); color: var(--mdst-color-muted); } & img { width: 3.5rem; height: 3.5rem; object-fit: contain; background: var(--mdst-color-subtle); } &[data-kind='error'] { color: var(--mdst-color-error); } } } /* packages/shell/components/file-picker.css */ mt-file-picker { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mdst-space-sm); & mt-dropzone[data-compact] { padding-block: var(--mdst-space-md); } & .files { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mdst-space-xs); margin: 0; padding: 0; list-style: none; &:empty { display: none; } } & li { display: flex; gap: var(--mdst-space-sm); align-items: center; padding: var(--mdst-space-xs) var(--mdst-space-xs) var(--mdst-space-xs) var(--mdst-space-sm); border: var(--mdst-border-width) solid var(--mdst-color-subtle); font-size: var(--mdst-text-sm); & img { width: 2rem; height: 2rem; object-fit: cover; background: var(--mdst-color-subtle); } & .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & .size { color: var(--mdst-color-muted); font-variant-numeric: tabular-nums; } & button { min-width: 2rem; padding-inline: var(--mdst-space-sm); font-size: var(--mdst-text-lg); line-height: 1; } } } /* packages/shell/components/panel.css */ mt-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mdst-space-md); padding: var(--mdst-space-md); border: var(--mdst-border-width) solid var(--mdst-color-border); & > h2 { margin: 0; font-size: var(--mdst-text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mdst-color-muted); } & textarea { width: 100%; box-sizing: border-box; resize: vertical; } & .mono { font-family: var(--mdst-font-mono); font-size: var(--mdst-text-sm); } /* Rows line controls up by their bottom edge, so buttons sit level with inputs. Rows of fields only line up by the top, so a hint under one field doesn't shift the rest. */ & .row { display: flex; flex-wrap: wrap; gap: var(--mdst-space-md); align-items: end; &:not(:has(> :not(mt-field))) { align-items: start; } } & .checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--mdst-space-sm); } & .check { display: flex; gap: var(--mdst-space-sm); align-items: center; } } /* packages/shell/components/pin.css */ mt-pin { position: absolute; top: var(--mdst-space-xs); right: var(--mdst-space-xs); & button { all: unset; display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--mdst-color-muted); cursor: pointer; /* Override modest-ui's filled button hover, which would hide the icon. */ &:hover, &:active, &:focus-visible { background: none; border-color: transparent; } &:hover { color: var(--mdst-color-fg); } &:focus-visible { outline: 2px solid var(--mdst-color-focus); outline-offset: -2px; } &[aria-pressed='true'] { color: var(--mdst-color-fg); & .head { fill: currentColor; } } } } /* packages/shell/components/pinned.css */ mt-pinned { display: block; margin-block: var(--mdst-space-lg); &:empty { display: none; } & h2 { margin: 0 0 var(--mdst-space-sm); font-size: var(--mdst-text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mdst-color-muted); } & ul { display: flex; flex-wrap: wrap; gap: var(--mdst-space-sm); margin: 0; padding: 0; list-style: none; } & li { display: flex; align-items: center; margin: 0; padding: 0; border: var(--mdst-border-width) solid var(--mdst-color-border); } & a { padding: var(--mdst-space-xs) 0 var(--mdst-space-xs) var(--mdst-space-sm); font-size: var(--mdst-text-sm); font-weight: 600; color: inherit; text-decoration: none; &:hover, &:focus-visible { text-decoration: underline; } } & button { all: unset; display: grid; place-items: center; width: 2rem; height: 2rem; cursor: pointer; & .head { fill: currentColor; } /* Override modest-ui's filled button hover, which would hide the icon. */ &:hover, &:active, &:focus-visible { background: none; border-color: transparent; color: inherit; } &:hover { color: var(--mdst-color-muted); } &:focus-visible { outline: 2px solid var(--mdst-color-focus); outline-offset: -2px; } } } /* packages/shell/components/stats.css */ mt-stats { display: block; overflow-x: auto; & table { width: 100%; border-collapse: collapse; } & th, & td { padding: var(--mdst-space-xs) var(--mdst-space-sm); border-bottom: var(--mdst-border-width) solid var(--mdst-color-subtle); text-align: left; } & tbody th { font-weight: 400; color: var(--mdst-color-muted); } & td { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } & tr[data-flagged] td { color: var(--mdst-color-error); font-weight: 600; } } /* packages/shell/components/status.css */ mt-status { display: block; font-size: var(--mdst-text-sm); color: var(--mdst-color-muted); &:empty { display: none; } &[data-kind='error'] { color: var(--mdst-color-error); } &[data-kind='success'] { color: var(--mdst-color-success); } } /* packages/shell/components/tool.css */ /* Grid columns use minmax(0, 1fr) throughout, so long content (a file name, a wide image) shrinks to fit instead of pushing the page wider than the screen. */ mt-tool { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mdst-space-md); margin-block: var(--mdst-space-lg); } /* packages/shell/graphic.css */ /* Preview frame for graphicOutput(). */ .graphic-frame { display: flex; justify-content: center; padding: var(--mdst-space-md); border: var(--mdst-border-width) solid var(--mdst-color-subtle); background: #fff; & .graphic-preview { max-width: 100%; max-height: 16rem; image-rendering: pixelated; } } /* packages/shell/stage.css */ /* createStage(). The canvas scales down to fit, never up. */ .stage { display: flex; justify-content: center; padding: var(--mdst-space-sm); border: var(--mdst-border-width) solid var(--mdst-color-subtle); background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 16px 16px; & .stage-canvas { display: block; max-width: 100%; max-height: 70vh; cursor: crosshair; touch-action: none; /* Editors focus the canvas for keyboard shortcuts; the selection handles already show that. */ &:focus { outline: none; } } } /* tools/barcode-generator/ui.css */ mt-tool[slug='barcode-generator'] { & .graphic-preview { height: 10rem; } } /* tools/business-card/ui.css */ mt-tool[slug='business-card'] { & .card-previews { display: flex; flex-wrap: wrap; gap: var(--mdst-space-md); justify-content: center; padding: var(--mdst-space-md); background: var(--mdst-color-subtle); & figure { display: grid; gap: var(--mdst-space-xs); margin: 0; flex: 1 1 18rem; max-width: 26rem; } & figcaption { font-size: var(--mdst-text-sm); color: var(--mdst-color-muted); text-align: center; } } & .card-preview { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 10px rgb(0 0 0 / 0.18); } & textarea { width: 100%; } } /* tools/colour-palette/ui.css */ mt-tool[slug='colour-palette'] { & .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--mdst-space-sm); } & .swatches-scale { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); } & .swatch { display: grid; gap: var(--mdst-space-sm); align-content: start; & .swatch-colour { display: block; aspect-ratio: 3 / 2; border: var(--mdst-border-width) solid var(--mdst-color-subtle); } & code { font-size: 0.875rem; } & .swatch-label { color: var(--mdst-color-muted); font-size: 0.8125rem; } & mt-copy { justify-self: start; } } } /* tools/contrast-checker/ui.css */ mt-tool[slug='contrast-checker'] { & .colour { display: flex; gap: var(--mdst-space-xs); align-items: center; & input:not([type='color']) { width: 9rem; } } & .preview { padding: var(--mdst-space-lg); border: var(--mdst-border-width) solid var(--mdst-color-subtle); & p { margin: 0; color: inherit; } & .large { margin-bottom: var(--mdst-space-sm); font-size: 1.5rem; } } & .ratio { margin: 0; font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; } & .suggestions { display: grid; gap: var(--mdst-space-sm); & .row { align-items: center; } } & .swatch { width: 1.5rem; height: 1.5rem; border: var(--mdst-border-width) solid var(--mdst-color-subtle); } } /* tools/csv-converter/ui.css */ mt-tool[slug='csv-converter'] { & .data-preview { max-height: 24rem; overflow: auto; border: var(--mdst-border-width) solid var(--mdst-color-subtle); &:empty { display: none; } & table { border-collapse: collapse; font-size: var(--mdst-text-sm); white-space: nowrap; } & th { position: sticky; top: 0; background: var(--mdst-color-bg); text-align: left; } & th, & td { padding: var(--mdst-space-xs) var(--mdst-space-sm); border: var(--mdst-border-width) solid var(--mdst-color-subtle); max-width: 20rem; overflow: hidden; text-overflow: ellipsis; } } } /* tools/currency-converter/ui.css */ mt-tool[slug='currency-converter'] { & .fx-result { margin: 0; font-size: calc(var(--mdst-text-xl) * 1.4); font-weight: 600; font-variant-numeric: tabular-nums; } & .fx-detail { margin: 0; color: var(--mdst-color-muted); } /* A plain list of conversions, without modest-ui's data table styles. */ & .fx-table { width: auto; border-collapse: collapse; font-variant-numeric: tabular-nums; & th, & td { padding: var(--mdst-space-xs) 0; border: 0; font-size: inherit; letter-spacing: normal; text-transform: none; } & th { padding-right: var(--mdst-space-xl); text-align: left; font-weight: 400; color: var(--mdst-color-muted); } & td { text-align: right; } } } /* tools/data-converter/ui.css */ mt-tool[slug='data-converter'] { & .data-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--mdst-space-md); & textarea { min-height: 22rem; font-family: var(--mdst-font-mono); font-size: var(--mdst-text-sm); } } } /* tools/email-dns-checker/ui.css */ mt-tool[slug='email-dns-checker'] { & .dns-results { display: grid; gap: var(--mdst-space-md); &:empty { display: none; } } & .dns-card { display: grid; gap: var(--mdst-space-xs); padding: var(--mdst-space-md); border: var(--mdst-border-width) solid var(--mdst-color-subtle); border-left-width: 4px; &[data-level='pass'] { border-left-color: var(--mdst-color-success); } &[data-level='warn'] { border-left-color: var(--mdst-color-warning); } &[data-level='fail'] { border-left-color: var(--mdst-color-error); } & header { display: flex; justify-content: space-between; gap: var(--mdst-space-sm); } & .dns-badge { font-size: var(--mdst-text-sm); color: var(--mdst-color-muted); } & .dns-summary { margin: 0; font-family: var(--mdst-font-mono); font-size: var(--mdst-text-sm); overflow-wrap: anywhere; } & ul { margin: 0; padding-left: 1.25em; } & li[data-level='fail'] { color: var(--mdst-color-error); } & pre { margin: var(--mdst-space-xs) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--mdst-text-xs); } } } /* tools/email-signature/ui.css */ mt-tool[slug='email-signature'] { & .signature-preview { padding: var(--mdst-space-lg); background: #fff; border: var(--mdst-border-width) solid var(--mdst-color-subtle); overflow-x: auto; /* Keep the page's own styles out of the preview, so it matches the email. */ & table { width: auto; margin: 0; border: 0; } & td { padding: 0; border: 0; } } & textarea { width: 100%; } } /* tools/favicon-generator/ui.css */ mt-tool[slug='favicon-generator'] { & .favicon-previews { display: flex; gap: var(--mdst-space-md); align-items: end; flex-wrap: wrap; &:empty { display: none; } & img { border: var(--mdst-border-width) solid var(--mdst-color-subtle); background: repeating-conic-gradient(var(--mdst-color-subtle) 0 25%, transparent 0 50%) 0 0 / 8px 8px; } } } /* tools/fill-pdf/ui.css */ mt-tool[slug='fill-pdf'] { & .pdf-form-editor, & .pdf-form { display: grid; gap: var(--mdst-space-md); } & .pdf-form { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); align-items: end; & mt-field:has(textarea) { grid-column: 1 / -1; } & input:not([type='checkbox']), & select, & textarea { width: 100%; } } } /* tools/gradient-generator/ui.css */ mt-tool[slug='gradient-generator'] { & .stops { display: grid; gap: var(--mdst-space-sm); } & .stop { display: flex; gap: var(--mdst-space-sm); align-items: center; & input[type='range'] { flex: 1; } } & .gradient-preview { aspect-ratio: 16 / 7; border: var(--mdst-border-width) solid var(--mdst-color-subtle); } } /* tools/hours-calculator/ui.css */ mt-tool[slug='hours-calculator'] { & .shifts { display: grid; gap: var(--mdst-space-sm); } & .shift { display: flex; flex-wrap: wrap; gap: var(--mdst-space-sm) var(--mdst-space-md); align-items: end; & mt-field { min-width: 7rem; } & .total { min-width: 6rem; padding-bottom: var(--mdst-space-sm); font-variant-numeric: tabular-nums; &[data-kind='error'] { color: var(--mdst-color-error); font-size: var(--mdst-text-sm); } } } } /* tools/id-watermark/ui.css */ mt-tool[slug='id-watermark'] { & .id-watermark-text { margin: 0; color: var(--mdst-color-muted); } } /* tools/invoice-generator/ui.css */ mt-tool[slug='invoice-generator'] { & .invoice-items { display: grid; gap: var(--mdst-space-xs); } & .invoice-item { display: grid; grid-template-columns: minmax(0, 3fr) minmax(3.5rem, 0.7fr) minmax(5rem, 1fr) minmax(3.5rem, 0.7fr) auto; gap: var(--mdst-space-xs); align-items: center; & input { width: 100%; min-width: 0; } } & .invoice-item-head { font-size: var(--mdst-text-sm); font-weight: 600; } & .invoice-summary { margin: 0; color: var(--mdst-color-muted); } & .invoice-pages { display: grid; gap: var(--mdst-space-md); justify-items: center; padding: var(--mdst-space-md); background: var(--mdst-color-subtle); } & .invoice-page { width: 100%; max-width: 46rem; height: auto; box-shadow: 0 1px 6px rgb(0 0 0 / 0.15); } & textarea { width: 100%; } } /* tools/link-in-bio/ui.css */ mt-tool[slug='link-in-bio'] { & .link-layout { display: grid; gap: var(--mdst-space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; } & .link-editor { display: grid; gap: var(--mdst-space-md); } & .link-rows { display: grid; gap: var(--mdst-space-sm); } & .link-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto auto auto; gap: var(--mdst-space-xs); align-items: center; } & .link-preview { min-height: 28rem; border: var(--mdst-border-width) solid var(--mdst-color-subtle); overflow: auto; } } /* tools/markdown-editor/ui.css */ mt-tool[slug='markdown-editor'] { & .markdown-split { display: grid; gap: var(--mdst-space-md); grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); align-items: stretch; /* Panels are grids that stretch their rows; keep the preview at the top. */ & > mt-panel { align-content: start; } & textarea { width: 100%; min-height: 28rem; box-sizing: border-box; resize: vertical; } } & .markdown-body { overflow-wrap: anywhere; max-height: 40rem; overflow: auto; & > * { margin-block: 0 0.75em; } & > :is(h1, h2, h3, h4, h5, h6) { margin-block: 1em 0.4em; line-height: 1.25; } & > :first-child { margin-top: 0; } & li > :is(ul, ol) { margin: 0; } & pre { padding: var(--mdst-space-sm); background: var(--mdst-color-subtle); overflow-x: auto; } & :not(pre) > code { padding: 0.1em 0.3em; background: var(--mdst-color-subtle); } & blockquote { margin-inline: 0; padding-left: var(--mdst-space-md); border-left: 3px solid var(--mdst-color-subtle); color: var(--mdst-color-muted); } & table { border-collapse: collapse; } & th, & td { padding: var(--mdst-space-xs) var(--mdst-space-sm); border: var(--mdst-border-width) solid var(--mdst-color-subtle); } & img { max-width: 100%; } & li > input[type='checkbox'] { margin: 0 0.25em 0 0; } } } /* tools/meta-tag-preview/ui.css */ mt-tool[slug='meta-tag-preview'] { & .meta-count { font-size: var(--mdst-text-xs); color: var(--mdst-color-muted); &[data-over='true'] { color: var(--mdst-color-error); } } & textarea { width: 100%; } & .meta-import { display: grid; gap: var(--mdst-space-sm); } /* The previews copy each site's own look, in light mode. */ & .preview-google { max-width: 600px; padding: var(--mdst-space-md); background: #fff; font-family: Arial, sans-serif; color: #202124; & .g-site { display: grid; font-size: 14px; line-height: 20px; } & .g-url { color: #4d5156; font-size: 12px; } & .g-title { margin-top: 4px; color: #1a0dab; font-size: 20px; line-height: 26px; white-space: nowrap; } & .g-desc { color: #4d5156; font-size: 14px; line-height: 22px; } } & .preview-social { max-width: 500px; border: 1px solid #dadde1; background: #f2f3f5; font-family: Helvetica, Arial, sans-serif; color: #1d2129; & img, & .no-image { display: block; width: 100%; aspect-ratio: 1.91; object-fit: cover; } & .s-body { display: grid; gap: 3px; padding: 10px 12px; overflow: hidden; } & .s-domain { color: #606770; font-size: 12px; } & .s-title { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & .s-desc { color: #606770; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } & .preview-x { max-width: 500px; font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; & .x-card { position: relative; border: 1px solid #cfd9de; border-radius: 16px; overflow: hidden; } & img, & .no-image { display: block; width: 100%; aspect-ratio: 1.91; object-fit: cover; } & .x-domain { position: absolute; left: 12px; bottom: 12px; padding: 0 4px; border-radius: 4px; background: rgb(0 0 0 / 0.77); color: #fff; font-size: 13px; } & .x-from { margin-top: 4px; font-size: 13px; color: #536471; } } & .no-image { display: grid !important; place-items: center; background: #e4e6eb; color: #8a8d91; font-size: 14px; } } /* tools/organise-pdf/ui.css */ mt-tool[slug='organise-pdf'] { & .organise-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--mdst-space-md); margin: 0; padding: 0; list-style: none; &:empty { display: none; } } & .organise-page { margin: 0; display: grid; gap: var(--mdst-space-xs); padding: var(--mdst-space-sm); border: var(--mdst-border-width) solid var(--mdst-color-subtle); background: var(--mdst-color-bg); cursor: grab; &.dragging { opacity: 0.4; } } & .organise-thumb { display: grid; place-items: center; aspect-ratio: 1; background: var(--mdst-color-subtle); overflow: hidden; & img { max-width: 90%; max-height: 90%; box-shadow: 0 1px 4px rgb(0 0 0 / 0.2); transition: transform 0.15s; } } & .organise-label { display: flex; gap: var(--mdst-space-xs); align-items: baseline; overflow: hidden; & span { font-size: var(--mdst-text-xs); color: var(--mdst-color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } & .organise-actions { display: flex; justify-content: space-between; & button { min-width: 0; padding: var(--mdst-space-xs); } } } /* tools/password-checker/ui.css */ mt-tool[slug='password-checker'] { & .mdst-password-input { max-width: 32rem; } & .strength { width: 100%; height: 0.5rem; } & .summary { margin: 0; font-weight: 600; } & .feedback { margin: 0; padding-left: var(--mdst-space-lg); &:empty { display: none; } } } /* tools/password-generator/ui.css */ mt-tool[slug='password-generator'] { & .password-row { display: flex; gap: var(--mdst-space-sm); & .password { flex: 1; min-width: 0; } } } /* tools/protect-pdf/ui.css */ mt-tool[slug='protect-pdf'] { & .protect-allow { display: flex; flex-wrap: wrap; gap: var(--mdst-space-sm) var(--mdst-space-lg); } } /* tools/qr-code-generator/ui.css */ mt-tool[slug='qr-code-generator'] { & .qr-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--mdst-space-md); & mt-field:has(textarea) { grid-column: 1 / -1; } & input:not([type='checkbox']), & select { width: 100%; box-sizing: border-box; } } & .graphic-preview { width: 15rem; height: 15rem; } } /* tools/redact-pdf/ui.css */ mt-tool[slug='redact-pdf'] { & .redact-view { display: grid; gap: var(--mdst-space-sm); } & .pdf-sheet { cursor: crosshair; /* Dragging on the page draws, rather than scrolling. */ touch-action: none; } & .redact-box { position: absolute; background: rgb(0 0 0 / 0.8); outline: 1px solid transparent; cursor: default; & button { position: absolute; top: -1.9rem; right: -0.4rem; min-width: 0; padding: 0 var(--mdst-space-xs); background: var(--mdst-color-bg); visibility: hidden; } &:hover, &:focus, &:focus-within { outline-color: var(--mdst-color-error); & button { visibility: visible; } } &.drawing button { visibility: hidden; } } } /* tools/regex-tester/ui.css */ mt-tool[slug='regex-tester'] { & .examples { display: flex; flex-wrap: wrap; gap: var(--mdst-space-xs); align-items: center; font-size: var(--mdst-text-sm); & span { margin-right: var(--mdst-space-xs); color: var(--mdst-color-muted); } & button { padding: var(--mdst-space-xs) var(--mdst-space-sm); font-size: var(--mdst-text-sm); border-color: var(--mdst-color-subtle); } } & .grow { flex: 1; } & .flags { width: 6rem; } & .highlight { min-height: 3rem; padding: var(--mdst-space-sm); border: var(--mdst-border-width) solid var(--mdst-color-subtle); font-size: var(--mdst-text-sm); white-space: pre-wrap; overflow-wrap: anywhere; & mark { background: color-mix(in srgb, var(--mdst-color-warning) 45%, transparent); color: inherit; } } } /* tools/rich-text-to-markdown/ui.css */ mt-tool[slug='rich-text-to-markdown'] { & .markdown-body { overflow-wrap: anywhere; & > * { margin-block: 0 0.75em; } & > :first-child { margin-top: 0; } & pre { padding: var(--mdst-space-sm); background: var(--mdst-color-subtle); overflow-x: auto; } & blockquote { margin-inline: 0; padding-left: var(--mdst-space-md); border-left: 3px solid var(--mdst-color-subtle); } & th, & td { padding: var(--mdst-space-xs) var(--mdst-space-sm); border: var(--mdst-border-width) solid var(--mdst-color-subtle); } & img { max-width: 100%; } } } /* tools/schema-generator/ui.css */ mt-tool[slug='schema-generator'] { & .schema-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--mdst-space-md); & mt-field:has(textarea) { grid-column: 1 / -1; } & input, & select { width: 100%; box-sizing: border-box; } } } /* tools/screen-recorder/ui.css */ mt-tool[slug='screen-recorder'] { & .screen-clock { margin: 0; font-size: calc(var(--mdst-text-xl) * 1.6); font-variant-numeric: tabular-nums; } & .screen-results { display: grid; gap: var(--mdst-space-md); &:empty::before { content: 'Nothing recorded yet.'; color: var(--mdst-color-muted); } } & .screen-take { display: grid; gap: var(--mdst-space-sm); padding: var(--mdst-space-md); border: var(--mdst-border-width) solid var(--mdst-color-subtle); & video { width: 100%; max-height: 60vh; background: #000; } } & .screen-take-head { display: flex; justify-content: space-between; gap: var(--mdst-space-sm); & span { color: var(--mdst-color-muted); } } } /* tools/sign-pdf/ui.css */ mt-tool[slug='sign-pdf'] { & .sign-mode { display: grid; gap: var(--mdst-space-sm); } & .sign-pad { width: 100%; aspect-ratio: 3; border: var(--mdst-border-width) dashed var(--mdst-color-muted); background: #fff; touch-action: none; cursor: crosshair; } & .sign-typed { margin: 0; padding: var(--mdst-space-sm) var(--mdst-space-md); border: var(--mdst-border-width) solid var(--mdst-color-subtle); background: #fff; font-size: 2.5rem; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } & .sign-view { display: grid; gap: var(--mdst-space-sm); } & .sign-item { position: absolute; outline: 1px dashed transparent; cursor: move; touch-action: none; & img { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; } & .sign-handle, & .sign-remove { position: absolute; visibility: hidden; } & .sign-handle { right: -0.4rem; bottom: -0.4rem; width: 0.8rem; height: 0.8rem; border: 1px solid var(--mdst-color-fg); background: var(--mdst-color-bg); cursor: nwse-resize; } & .sign-remove { top: -1.9rem; right: -0.4rem; min-width: 0; padding: 0 var(--mdst-space-xs); background: var(--mdst-color-bg); } &:hover, &:focus, &:focus-within, &.active { outline-color: var(--mdst-color-fg); & .sign-handle, & .sign-remove { visibility: visible; } } } } /* tools/social-image-maker/ui.css */ mt-tool[slug='social-image-maker'] { & .images { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--mdst-space-md); & mt-dropzone { padding-block: var(--mdst-space-md); } } & .preview-frame { background: repeating-conic-gradient(var(--mdst-color-subtle) 0 25%, transparent 0 50%) 0 0 / 16px 16px; border: var(--mdst-border-width) solid var(--mdst-color-subtle); text-align: center; } & .preview { display: block; width: auto; max-width: 100%; height: auto; max-height: 70vh; margin-inline: auto; } } /* tools/svg-optimiser/ui.css */ mt-tool[slug='svg-optimiser'] { & .svg-options { display: grid; gap: var(--mdst-space-xs); } } /* tools/teleprompter/ui.css */ mt-tool[slug='teleprompter'] { & textarea { width: 100%; } & .prompter-estimate { margin: 0; color: var(--mdst-color-muted); } & .prompter-screen { position: relative; height: 60vh; background: #000; color: #fff; outline: none; overflow: hidden; &:fullscreen { height: 100vh; } &.mirrored .prompter-text { transform: scaleX(-1); } } & .prompter-camera { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; transform: scaleX(-1); } & .prompter-text { position: relative; height: 100%; overflow-y: auto; scrollbar-width: none; padding: 20vh 8% 100vh; box-sizing: border-box; font-weight: 600; line-height: 1.4; text-align: center; /* The page's paragraph styles would otherwise set a small, dark font. */ & p { margin: 0 0 1em; color: inherit; font-size: inherit; line-height: inherit; max-width: none; } } /* A marker near the top, where the eyes should be, close to the camera. */ & .prompter-guide { position: absolute; left: 0; right: 0; top: 20vh; border-top: 2px solid rgb(255 255 255 / 0.25); pointer-events: none; } & .prompter-results { display: grid; gap: var(--mdst-space-md); &:empty { display: none; } } & .prompter-take { display: grid; gap: var(--mdst-space-sm); & video { width: 100%; max-height: 50vh; background: #000; } } } /* tools/text-diff/ui.css */ mt-tool[slug='text-diff'] { & .sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--mdst-space-md); } & .diff { padding: var(--mdst-space-sm); border: var(--mdst-border-width) solid var(--mdst-color-subtle); font-size: var(--mdst-text-sm); white-space: pre-wrap; overflow-wrap: anywhere; &:empty { display: none; } & ins { background: color-mix(in srgb, var(--mdst-color-success) 25%, transparent); text-decoration: none; } & del { background: color-mix(in srgb, var(--mdst-color-error) 25%, transparent); text-decoration: line-through; } &[data-mode='lines'] { & ins, & del, & span { display: block; } & ins::before { content: '+ '; } & del::before { content: '− '; } } } } /* tools/time-zone-converter/ui.css */ mt-tool[slug='time-zone-converter'] { & .zones { display: flex; flex-wrap: wrap; gap: var(--mdst-space-xs); & .mdst-tag { display: inline-flex; gap: var(--mdst-space-xs); align-items: center; } & button { padding: 0 var(--mdst-space-xs); min-height: 0; line-height: 1; } } } /* tools/trim-audio/ui.css */ mt-tool[slug='trim-audio'] { & .trim-editor { display: grid; gap: var(--mdst-space-md); } & .trim-info { margin: 0; color: var(--mdst-color-muted); font-variant-numeric: tabular-nums; } } /* tools/type-tester/ui.css */ mt-tool[slug='type-tester'] { & .type-cards { display: grid; gap: var(--mdst-space-md); } & .type-card { display: grid; gap: var(--mdst-space-sm); padding: var(--mdst-space-md); border: var(--mdst-border-width) solid var(--mdst-color-subtle); & header { display: flex; justify-content: space-between; align-items: start; gap: var(--mdst-space-sm); & > div { display: grid; } } } & .type-meta, & .type-px { color: var(--mdst-color-muted); font-size: var(--mdst-text-xs); } & .type-sample { line-height: 1.25; overflow-wrap: anywhere; } & .type-step { display: grid; grid-template-columns: 2rem 1fr; align-items: baseline; gap: var(--mdst-space-sm); } } /* tools/video-frames/ui.css */ mt-tool[slug='video-frames'] { & .frames-editor { display: grid; gap: var(--mdst-space-md); } & .frames-video { width: 100%; max-height: 60vh; background: #000; } & .frames-time { align-self: center; font-variant-numeric: tabular-nums; color: var(--mdst-color-muted); } } /* tools/video-to-gif/ui.css */ mt-tool[slug='video-to-gif'] { & .gif-editor { display: grid; gap: var(--mdst-space-md); } & .gif-video { width: 100%; max-height: 50vh; background: #000; } & .gif-summary { margin: 0; color: var(--mdst-color-muted); } & .gif-result { display: grid; gap: var(--mdst-space-sm); justify-items: start; &:empty::before { content: 'Your GIF will appear here.'; color: var(--mdst-color-muted); } & img { max-width: 100%; } & p { margin: 0; color: var(--mdst-color-muted); } } } /* tools/voice-recorder/ui.css */ mt-tool[slug='voice-recorder'] { & .rec-clock { margin: 0; font-size: calc(var(--mdst-text-xl) * 1.6); font-variant-numeric: tabular-nums; } & .rec-meter { width: 100%; height: 5rem; color: var(--mdst-color-fg); background: var(--mdst-color-subtle); } & .rec-list { display: grid; gap: var(--mdst-space-md); &:empty::before { content: 'Nothing recorded yet.'; color: var(--mdst-color-muted); } } & .rec-take { display: grid; gap: var(--mdst-space-sm); padding: var(--mdst-space-md); border: var(--mdst-border-width) solid var(--mdst-color-subtle); & audio { width: 100%; } } & .rec-take-head { display: flex; justify-content: space-between; gap: var(--mdst-space-sm); & span { color: var(--mdst-color-muted); font-variant-numeric: tabular-nums; } } } /* tools/watermark-image/ui.css */ mt-tool[slug='watermark-image'] { & .watermark-preview { display: grid; gap: var(--mdst-space-xs); justify-items: center; margin: 0; & figcaption { font-size: var(--mdst-text-sm); color: var(--mdst-color-muted); } } & .watermark-preview-canvas { display: block; max-width: 100%; max-height: 60vh; width: auto; height: auto; border: var(--mdst-border-width) solid var(--mdst-color-subtle); } }