ethercalc/packages/client-multi/src/styles.module.css

Multi-User Spreadsheet Server — TypeScript rewrite (Cloudflare fullstack)

/* Port of multi/styles.styl — preserve legacy visual output byte-for-byte.
 * Class names are scoped via CSS Modules, but the structural selectors
 * (html/body, iframe, nav, .wrapper) stay global via :global() where needed
 * so the DOM shape matches the old implementation pixel-for-pixel.
 */

/* Global page layout — same as legacy `body {margin:0;padding:0;overflow:hidden}` */
:global(html),
:global(body),
:global(#root) {
  height: 100%;
}

:global(body) {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

:global(iframe) {
  width: 100%;
  height: 100%;
  border: 0;
}

/* === Nav strip + buttons ============================================= */

.nav {
  /* Marker class only — legacy layout attached the absolute strip rules to the
   * inner <nav> element, not the outer wrapper div.
   */
}

.buttons,
.tabList {
  background: #eee;
  font-family: Helvetica, sans-serif;
  border-top: 1px solid black;
  position: absolute !important;
  font-size: 16px;
  bottom: 5px;
  height: 43px;
}

.tabList {
  right: 200px;
  left: 0;
  padding-left: 8px;
  white-space: nowrap;
  overflow-x: auto;
}

.readonly .tabList {
  right: 0;
}

.buttons {
  width: 200px;
  right: 0;
  padding-right: 8px;
  text-align: right;
}

.buttons button {
  font-family: Helvetica, sans-serif;
  background: #eee;
  font-size: 14px;
  height: 22px;
  border-radius: 3px;
  border: 1px solid #eee;
  margin-left: 2px;
  cursor: pointer;
}

.buttons button:hover {
  border: 1px solid #ccc;
  background: #fff;
}

.buttons button:disabled:hover {
  border: 1px solid transparent;
  background: #eee;
  cursor: default;
}

/* === Tab strip (legacy `.basic-tabs-item` / `.basic-tabs-item-title`) ===
 *
 * react-basic-tabs rendered items as `.basic-tabs-item` and tab titles as
 * `.basic-tabs-item-title`. Our Radix port emits `[role=tab]` for titles and
 * `[role=tabpanel]` for items; we restyle the Radix atoms with the same
 * visual rules so the output is pixel-identical.
 */

.tabItem {
  display: block !important;
  visibility: hidden;
}

.tabItem[data-state='active'] {
  font-family: Helvetica, sans-serif;
  visibility: visible;
}

.tabTitle {
  background: #ccc;
  border: 1px solid black;
  border-top: none;
  padding: 2px 10px 2px 10px;
  border-radius: 0 0 8px 8px;
}

.tabTitle:hover {
  background: #eee;
  cursor: pointer;
}

.tabTitle[data-state='active'] {
  background: white;
  border-top: 1px solid white;
  margin-top: -1px;
}

/* === Iframe wrapper (positions the tabpanel above the 43px nav band) === */

.wrapper {
  position: absolute;
  width: 100%;
  bottom: 51px;
  top: 0;
}

/* The old rule targeted `body > .nav > .buttons` and `body > .nav > .basic-
 * tabs.basic-tabs-strip`; both elevated the strip height from 22 to 43px.
 * Radix's tablist role lives one level deep under our .nav container, so we
 * target it directly.
 */
/* Radix's TabsList is a flex row of triggers; make sure it renders on the
 * baseline of the .nav strip.
 */
.tabList {
  display: inline-flex;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  background: transparent;
  border: 0;
}

.tabTitleButton {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}