/* Kafka Lab - the API Producer and the API Listener. * * Its own sheet rather than more rules in developer-lab.css, because these two pages are a * different SHAPE from the rest of the Lab: the others are lists of things you own (endpoints, * databases, request logs), while these are a configuration form beside a result panel. Mixing the * two vocabularies in one file would leave the next person guessing which half applied. * * Both pages wear .tstudio, so every --ts-* token is available and the buttons are .ts-btn. What is * here is only what the studio skin has no opinion about. */ /* ---- tokens ---- These used to be five hard-coded amber values with a light set and a dark twin, carrying the note: "Kafka's established tone on this site is amber - both existing Kafka tools carry it - so the Lab keeps it rather than introducing a fourth accent for the same subject." THAT NOTE WAS WRONG, and it is quoted here so nobody reinstates it. There is no amber Kafka tone on this site to be consistent with. tools-kafka.html and tools-kafka-size.html both wear .tstudio and have always rendered indigo from --ts-brand; the only amber on either of them is two semantic `text-warning` strings (an unkeyed-record caveat and a JSON validation message), which are warnings and must stay amber. The one other amber is `text-warning-emphasis` on their icons in the tools catalogue (js/app.js), and that is a per-tile rotation through Bootstrap's emphasis palette - cron is danger, timestamp is primary, HTTP is info - not a Kafka identity. So these five values were the only place a "Kafka is amber" idea existed, and aliasing them onto --ts-* did not introduce a seam between the Lab and the tools. It removed one. Every value is now an alias onto a --ts-* token, and that is what buys dark mode for nothing: the studio redefines those tokens under [data-bs-theme="dark"], so the whole [data-bs-theme="dark"] .tstudio block this file used to carry has been deleted rather than maintained in parallel. --kf is --ts-brand-t and not --ts-brand because it is used as TEXT and as an icon colour; the studio keeps those two apart precisely so accent text stays readable on a dark card. */ /* .ts-tokens as well as .tstudio, and the second selector is load-bearing. A Bootstrap modal is appended to , which puts it OUTSIDE main.tstudio - so a panel that carried only .ts-tokens got every --ts-* token and not one of the five below. Every var(--kf) in it then resolved to nothing: the selected format button was `background: var(--kf); color: #fff`, which with no background is white text on white, and the borders, the right-hand tint and the record cards all vanished the same way. The panel did not look badly designed so much as unstyled. */ .tstudio, .ts-tokens { --kf: var(--ts-brand-t); --kf-soft: var(--ts-brand-s); --kf-line: var(--ts-line); --kf-surface: var(--ts-card); --kf-sunken: var(--ts-soft); } /* Local hedge. Four elements on these pages are shown and hidden through the DOM hidden property, and their own rules set display:flex or inline-flex - which beats the UA sheet's [hidden] rule, because an author rule always does. Today assets/css/theme.min.css carries [hidden] { display: none !important; } and saves us. That is a vendor file we neither own nor control the next version of, so these pages state the requirement themselves. */ .tstudio [hidden] { display: none !important; } /* ---- page header ---- Everything here is TRIMMED against the Lab's defaults, and scoped to the two Kafka pages so no other Lab page moves. The reason: these two pages carry more preamble than their siblings - an illustration, a usage meter, and two standing notices that have to be read before anybody types a password. At the shared sizes that added up to about 590px of chrome above the form, so the thing the visitor came to use started below the fold on a laptop. Every reduction below is to buy that back; none of it changes what is said. */ .kf-hero { flex: 0 0 auto; width: 7rem; max-width: 24vw; } .kf-hero svg { width: 100%; height: auto; display: block; } @media (max-width: 767.98px) { .kf-hero { display: none; } } /* The illustration's theme-sensitive shapes. The artwork carries these as presentation attributes too, which act as the fallback if this sheet fails to load; CSS outranks a presentation attribute, so these win when it does. Needed because the drawing was authored light-only: a near-white #f1eefe disc carrying #fff cards. On a dark page that is the brightest thing on screen - brighter than the h1 - sitting in the top-left corner, which is precisely where the eye lands first. */ .kf-art-disc { fill: #f1eefe; } .kf-art-dot { fill: #d7d5f4; } .kf-art-card { fill: #fff; stroke: #dbe0f5; } [data-bs-theme="dark"] .kf-art-disc { fill: rgba(129, 140, 248, .12); } [data-bs-theme="dark"] .kf-art-dot { fill: rgba(165, 180, 252, .38); } [data-bs-theme="dark"] .kf-art-card { fill: #1b2133; stroke: #373e53; } .tstudio[data-kafka-mode] .dl-head { gap: .85rem; margin-bottom: .85rem; align-items: center; } /* A step down from the Lab's clamp(1.5rem, 1.2rem + 1.2vw, 2rem). Still comfortably the largest thing on the page, which is all a page title has to be. */ .tstudio[data-kafka-mode] .dl-head-txt h1 { font-size: clamp(1.3rem, 1.05rem + .7vw, 1.6rem); margin-bottom: .15rem; } .tstudio[data-kafka-mode] .dl-head-txt p { font-size: .82rem; line-height: 1.5; } /* The usage meter used to be shrunk to header scale here - eleven rules squeezing it into the third slot of .dl-head, where it stood taller than the title beside it. Both pages now give it its own column in .kf-top and its full card size, so every one of those rules was overridden by the LAB LAYOUT block at the foot of this file and did nothing. Deleted rather than left as a decoy for whoever next wonders why editing them changes nothing. */ /* ---- the credential promise ---- Still given room, because it is the one thing on the page a visitor has to believe before they type a password - but Bootstrap's .alert ships 24px of padding on every side, which on two side-by-side notices was over 200px of header on its own. */ .kf-vows { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 0 0 .85rem; } @media (max-width: 991.98px) { .kf-vows { grid-template-columns: 1fr; } } /* .tstudio .kf-vow, not .kf-vow, and the extra class is load-bearing. Bootstrap's own .alert sets padding and border-radius at the same specificity as a bare .kf-vow would have - and assets/css/theme.min.css is linked AFTER this file, so at equal specificity Bootstrap wins on source order. The padding silently stayed at 24px until this selector outranked it. */ .tstudio .kf-vow { font-size: .78rem; line-height: 1.55; align-items: flex-start; margin: 0; padding: .65rem .8rem; border-radius: .7rem; } .kf-vow em { font-style: normal; opacity: .85; } /* ---- cards ---- */ .kf-card { border: 1px solid var(--kf-line); border-radius: 1.1rem; overflow: hidden; background: var(--kf-surface); display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); } .kf-card-h { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; border-bottom: 1px solid var(--kf-line); background: var(--kf-sunken); } .kf-card-h > span:nth-child(2) { display: flex; flex-direction: column; margin-right: auto; min-width: 0; } /* Card titles are h2 so the page has a heading outline below its h1 - four full-height panels with nothing to jump between is a page a screen-reader user has to read linearly. Sized as a card title, not as a document heading. */ .kf-card-h h2 { font-size: .92rem; line-height: 1.2; color: var(--ts-ink); margin: 0; font-weight: 700; } .kf-card-h em { font-style: normal; font-size: .72rem; margin-top: .1rem; color: var(--ts-muted); } .kf-ico { flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: .75rem; display: grid; place-items: center; font-size: .85rem; background: var(--kf-soft); color: var(--kf); } .kf-body { padding: 1rem; display: flex; flex-direction: column; gap: .1rem; } /* ---- fields ---- */ .kf-lbl { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: .85rem 0 .3rem; color: var(--ts-muted); } .kf-body > .kf-lbl:first-child, .kf-body > div:first-child .kf-lbl { margin-top: 0; } /* "optional" is on the label rather than in the placeholder, because a placeholder disappears the moment somebody types - and requirement 4 is that these two fields are optional, which is exactly the fact a half-filled form needs to keep showing. */ .kf-opt { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: .68rem; color: var(--ts-muted); margin-left: .25rem; } /* A leading glyph inside the control. Decorative and aria-hidden: every one of these fields has a real label, and the icon only repeats it. */ .kf-field { position: relative; display: block; } .kf-field > .kf-field-ico { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); font-size: .78rem; color: var(--ts-faint); pointer-events: none; z-index: 1; } .kf-field > .dl-input { padding-left: 2.25rem; } .kf-hint { font-size: .72rem; line-height: 1.5; margin: .35rem 0 0; color: var(--ts-muted); } .kf-hint code { font-size: .95em; } .kf-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; } .kf-2col { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .75rem; } @media (max-width: 575.98px) { .kf-2col { grid-template-columns: 1fr; } } textarea.kf-value { min-height: 9rem; resize: vertical; } /* Taller than the value box, not shorter, because for Avro the schema is the LARGER artifact - the sample value is four fields and the record declaring them is a dozen lines. At 7rem a loaded sample schema showed its opening brace and about two fields, so the thing the sample exists to demonstrate was the one part scrolled out of sight. Still `resize: vertical`, and applySample grows it to fit what it just loaded. */ textarea.kf-schema { min-height: 12rem; resize: vertical; } .kf-sample { max-width: 13rem; flex: 0 0 auto; } /* The picker, once a sample is actually loaded. Without it the select falls back to "Load a sample…" wording in the reader's memory only: the fields are full of somebody else's data and nothing on screen says which sample put it there, which matters most after switching format twice and wondering what is in the boxes. */ .kf-sample.is-loaded { border-color: var(--kf); background-color: var(--kf-soft); color: var(--ts-ink); font-weight: 600; } .kf-check { display: flex; gap: .55rem; align-items: flex-start; margin: .9rem 0 0; font-size: .82rem; cursor: pointer; color: var(--ts-ink); } .kf-check input { margin-top: .2rem; flex: 0 0 auto; } .kf-check em { font-style: normal; color: var(--ts-muted); font-size: .76rem; } /* ---- format switch ---- Three options that change what the field BELOW means, and which one is active has to stay visible while the payload is being written. This is the DECODE format, sent to the server. The per-record JSON/Text control in the results panel is a DISPLAY toggle that changes nothing fetched. Two different jobs that look alike, so they are named apart - .kf-seg against .kf-view - and must not be merged. */ .kf-seg { display: inline-flex; gap: .4rem; margin-top: .9rem; align-self: flex-start; flex-wrap: wrap; } .kf-seg button { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--kf-line); background: var(--kf-surface); padding: .5rem .9rem; border-radius: .7rem; cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--ts-muted); transition: border-color .15s, color .15s, background .15s; } .kf-seg button:hover { border-color: var(--kf); color: var(--kf); } .kf-seg button.on { background: var(--ts-brand); border-color: var(--ts-brand); color: #fff; } /* ---- the auto-stop note ---- */ .kf-note { display: flex; gap: .6rem; align-items: flex-start; margin-top: .9rem; padding: .7rem .85rem; border-radius: .7rem; background: var(--kf-soft); color: var(--ts-ink); font-size: .78rem; line-height: 1.55; } /* Matches the icon that is actually there. The rule named .fa-solid while the markup carries fa-regular fa-clock, so it styled nothing; the child selector also covers the 0 of 100 Kafka calls today" as one line, and the count is the thing being read - it should not be the same size as the words explaining it. column-reverse inverts the two without touching the shared script: the loose text after the becomes an anonymous flex item, which is what lets it be reordered at all. Sizing the label therefore has to happen on the CONTAINER, since an anonymous item has no selector. */ .tstudio[data-kafka-mode] .jch-meter-head { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: .1rem; font-size: .78rem; color: var(--ts-muted); } .tstudio[data-kafka-mode] .jch-meter-head strong { font-size: 1.55rem; font-weight: 700; line-height: 1.1; color: var(--ts-ink); font-variant-numeric: tabular-nums; } .tstudio[data-kafka-mode] .jch-meter-sub { font-size: .75rem; margin-top: .15rem; } .tstudio[data-kafka-mode] .jch-meter-gauge { flex: 1 1 100%; gap: .8rem; } .tstudio[data-kafka-mode] .jch-meter-ring { width: 2.6rem; height: 2.6rem; } .tstudio[data-kafka-mode] .jch-meter-ring i { width: 2rem; height: 2rem; font-size: .62rem; } /* ---- "Try it live", now inside the masthead ---- Solid rather than tinted here. In its old position it sat alone on a line and a tint was enough to find it; sitting under a paragraph of body copy it needs to read as the one thing on the masthead you can press. The tinted treatment stays untouched for the producer page. */ [data-kafka-mode] .dl-head-txt #kf-play-mount { margin: .7rem 0 0; } [data-kafka-mode] .dl-head-txt .kf-play-open { background: var(--ts-brand); border-color: transparent; color: #fff; padding: .42rem .9rem .42rem .72rem; font-size: .79rem; } [data-kafka-mode] .dl-head-txt .kf-play-open .kf-play-dot { background: #fff; } [data-kafka-mode] .dl-head-txt .kf-play-open:hover { background: var(--ts-brand-d); color: #fff; } /* ---- the two-column body ---- The aside belongs on the RIGHT on anything that is recognisably a desktop, so the threshold is 992px, not the 1400px this started at. 1400 was wrong, and the reasoning behind it is worth recording so it does not come back: it was picked so the aside would never squeeze the console's own col-xl-4/col-xl-8 pair. But those two columns only exist from Bootstrap's xl (1200px) - below that they are already stacked full width - so between 992 and 1199 there is nothing to squeeze, and the aside costs a stacked column some width it has to spare. The practical cost of getting it wrong was large: a 1366px laptop, or any 1080p screen at 125% scaling (1536 physical, 1229 CSS), is under 1400 and got the guide dumped underneath the form, which is exactly where its "what a listen costs" note is of no use to anybody. The column widens in two steps rather than sitting at one size, because 18rem out of 992 is a third of the page and out of 1600 it is a sixth. */ [data-kafka-mode] .kf-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: stretch; } @media (min-width: 992px) { [data-kafka-mode] .kf-shell { grid-template-columns: minmax(0, 1fr) 15rem; } } @media (min-width: 1200px) { [data-kafka-mode] .kf-shell { grid-template-columns: minmax(0, 1fr) 16.5rem; } } @media (min-width: 1400px) { [data-kafka-mode] .kf-shell { grid-template-columns: minmax(0, 1fr) 18rem; } } /* The guide runs to the same floor as the form cards beside it, so the columns bottom out together instead of leaving a short card stranded at the top of a tall gap. Only while there are no results: once #kf-result-card is showing, the main column grows by however many records arrived, and a guide stretched to match would be a 2000px card holding 400px of text. Then it reverts to its natural height. */ @media (min-width: 992px) { [data-kafka-mode] .kf-shell:has(#kf-result-card[hidden]) .kf-guide { height: 100%; } } [data-kafka-mode] .kf-main { min-width: 0; } /* When the server says the Lab is switched off, developer-lab-kafka.js puts .d-none on #kf-console. The aside is a SIBLING of that element, so it would otherwise be left explaining the workings of a console that is no longer on screen. A browser without :has() simply keeps the aside, which is untidy rather than broken. */ [data-kafka-mode] .kf-shell:has(#kf-console.d-none) .kf-aside { display: none; } /* ---- the standing column ---- */ .kf-guide { border: 1px solid var(--kf-line); border-radius: 1.1rem; background: var(--kf-surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); padding: 1.1rem 1.15rem 1.2rem; } .kf-guide-art { max-width: 11rem; margin: -.2rem auto .85rem; } .kf-guide-art svg { width: 100%; height: auto; display: block; } /* Sized as a card title, matching .kf-card-h h2: these are headings so the aside appears in the document outline, not so it competes with the h1. */ .kf-guide h2 { font-size: .92rem; font-weight: 700; line-height: 1.2; color: var(--ts-ink); margin: 0 0 .45rem; } .kf-guide p { font-size: .78rem; line-height: 1.6; color: var(--ts-muted); margin: 0; } /* A rule between the two halves, because they answer different questions - what it costs, and what it touches - and a reader looking for the second should not have to read the first. */ .kf-guide h2.kf-guide-next { margin-top: 1rem; padding-top: .95rem; border-top: 1px solid var(--kf-line); } .kf-safe { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .kf-safe li { display: flex; align-items: center; gap: .5rem; font-size: .78rem; line-height: 1.4; color: var(--ts-ink); } /* Both selectors are needed: the FontAwesome build on this site is the SVG-JS one, which replaces each icon with an