/* Frame overrides for Azad studio sub-tools. Loaded by each srcdoc iframe. A relative href in a srcdoc frame resolves against the PARENT's base URL -- the site root -- which is the same reason lib/az-webfonts.1ea46267.css already works from here. Part 1 makes a standalone tool document sit inside a frame. Part 2 is density: these tools were built as full pages with a centred column and page-sized headings. Inside a 46px-barred shell that wastes both edges and the first 200px of every screen. */ /* ---------- part 1: living in a frame ---------- */ html,body{background:transparent!important} /* The document must be able to scroll. Several tools were written as standalone full-page apps and pin themselves with overflow:hidden, so content taller than the frame is cut off with no scrollbar. ONLY overflow is touched. An earlier version also forced height:auto, which was unnecessary -- height:100% never prevented scrolling, only overflow:hidden does -- and destructive: collage, edit and svg size their canvas through a height:100% chain from body, so collapsing it left Collage with no canvas and the other two unable to scroll the stage. Heights stay exactly as the tools wrote them. overflow-x stays hidden where the fragments set it, on purpose. */ html{overflow-y:auto!important} body{overflow-y:visible!important} /* Panels here are capped at calc(100vh - N) so they scroll INSIDE the frame. That is the tools' own design and it is right -- what was missing is the pairing. A cap measured against the frame only fits if the panel starts at the top of the frame; these start below the tool's toolbar, so the box ran past the bottom and its last stretch was unreachable. Earlier attempts here lifted the cap instead. That was wrong twice over: it left overscroll-behavior:contain on an element with no scrollport, which swallowed the wheel entirely, and the accompanying html/body height:auto override collapsed the height:100% chain that collage, edit and svg size their canvas through -- the stage went to zero and the artwork disappeared. Both are reverted. The cap stays; sticky is added so the box fits; and overscroll is released so reaching the panel's end scrolls the page on. */ html body .az-scrollpanel{position:sticky!important;top:8px!important; align-self:start!important;max-height:calc(100vh - 16px)!important; overflow-y:auto!important;overscroll-behavior:auto!important} header, .masthead, .wrap.masthead, .app-header, .dl-head, .topbar, #topbar, #toolrail, #statusbar, .header-note, .brand-bar, .app-bar{ background:var(--paper)!important;background-image:none!important; border-bottom:0!important;box-shadow:none!important} .dl-hero,.dl-head .hero{background:var(--paper)!important} .dl-head *,header .brand,.masthead .brand{color:#35251f} .hero{display:none!important} :root{color-scheme:light!important} [hidden]{display:none!important} /* ---------- part 2: density ---------- */ /* One lever for everything sized in rem: all eight tools use rem-based clamps for headings and body copy, so dropping the root brings the whole type scale down together instead of one selector at a time. */ html{font-size:14.5px!important} /* NOTE ON CONTAINERS. Width and padding are deliberately NOT here. `.app-shell` means "centred 1180px column, needs padding" in the Persian Toolkit and "full-height 100dvh grid, overflow hidden" in the Web Studio code editor. A shared padding rule would add 30px to the editor's grid and clip the bottom of Ace with no scrollbar to reveal it. Same class name, opposite meaning -- so container geometry is declared per template, in the page config, where the class name can be read against the tool it belongs to. */ /* The frame's own title line, compressed to one row: mark, name, actions. The subtitle under it repeats what the tool rail and the About pane already say, so it goes. justify-content is dropped because with the subtitle gone space-between strands the name and any action button at opposite ends of an 1800px row. */ .topbar{margin-bottom:8px!important;align-items:center!important; gap:10px!important;justify-content:flex-start!important} .topbar .brand{gap:9px!important;align-items:center!important} .topbar .brand>div>p,.topbar .brand p{display:none!important} .topbar h2{font-size:var(--text-xl)!important;line-height:1.25!important;margin:0!important} .brand-mark,.topbar .mark{width:26px!important;height:26px!important; border-radius:var(--radius-sm)!important;font-size:var(--text-lg)!important;box-shadow:none!important; flex:0 0 auto!important} .top-actions,.topbar .actions{margin:0!important;margin-inline-start:auto!important} .icon-button{padding:4px 8px!important;line-height:1!important} /* Panel headings: name only. The descriptive paragraph under each one is the same copy that now lives in the How to use tab, so showing it twice costs a screen-inch per panel. Delete this one rule to bring them back. */ .panel-head,.cardhead,.panelhead{margin-bottom:10px!important;align-items:center!important} .panel-head p,.cardhead p{display:none!important} .panel-head h2,.cardhead h2{font-size:var(--text-xl)!important;margin:0!important; line-height:1.25!important} /* ---------- part 3: compact type ---------- Most of these tools size in px and inherit their control text from `body`, and two of them (Readable Pairs, the Inspector) never set a body size at all -- so they were running at the browser default 16px and every tab, label and select inherited it. One declaration moves all of that. Deliberately NOT `button{...}`: colour swatches, chips and the eyedropper are buttons whose size is their meaning. Named control classes only. */ body{font-size:var(--text-md)!important;line-height:var(--lh-base)!important} h1{font-size:17px!important} h2{font-size:var(--text-xl)!important;margin-block-end:8px!important} h3{font-size:var(--text-xs)!important} label,.field-label,legend{font-size:var(--text-xs)!important;margin-block-end:3px!important} input[type=text],input[type=number],input[type=search],input[type=tel],select{ padding:6px 9px!important;border-radius:7px!important;font-size:var(--text-sm)!important} input[type=color]{height:34px!important} /* The textarea is the work, not the chrome. Persian and Arabic need a little more than Latin to stay legible, so it does not follow the body down. */ textarea{font-size:14.5px!important;padding:8px 10px!important} .tab,.tabs>button,.seg>button,.segmented>button,.btn,.button,.small-button, .compact,.icon-button{padding:6px 11px!important;font-size:var(--text-sm)!important; border-radius:var(--radius-sm)!important} .support,.notice-box,.status,.hint,.stats{font-size:var(--text-sm)!important} .support,.notice-box{padding:7px 10px!important;margin-block-end:10px!important} .panel,.card{margin-block-end:10px!important} /* =================================================================== CODE EDITOR — the message strip above the workspace ------------------------------------------------------------------- Scoped to the editor so the other eighteen pages that link this file are untouched. This used to be styled from a JavaScript string inside az-editor-plus.js, where every colour was a literal with a fallback (#a32a1d, #efe3cb, #d8c9ac) and nothing followed the site's theme. It is written against the design tokens here instead, so it themes with everything else and changes in one place. It also stopped being a wall of red. Three kinds of message share the strip and they are not equally your problem: cause why all of this is happening. Shown first, in the accent colour, because it is the only row that explains the others. error something wrong in your own code. Danger colour. note the preview sandbox or a third-party script. Nothing you wrote caused it and nothing you write will fix it, so it is muted and carries no jump button. The kind is carried by a word as well as a colour, so the difference survives for anyone who cannot rely on hue. =================================================================== */ /* Height, scrolling and the clearance for the dismiss button all live HERE, not half here and half in a