* { box-sizing: border-box; } html { height: 100%; width: 100%; /* Prevent rubber-band effect when scrolling via touchpad on macOS. */ overscroll-behavior: none; cursor: default; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } body { height: 100%; width: 100%; margin: 0; padding: 0; color: var(--color-foreground-contrast); background-color: var(--color-background-default); } .global-oid { color: var(--color-foreground-emphasized); font-size: var(--font-size-small); font-family: var(--font-family-monospace); font-weight: var(--font-weight-regular); } .global-commit { color: var(--color-foreground-dim); font-size: var(--font-size-small); font-family: var(--font-family-monospace); font-weight: var(--font-weight-semibold); } .global-flex { display: flex; align-items: center; gap: 0.5rem; } .global-tab { padding-left: 0.5rem; border-left: 1px solid var(--color-fill-ghost-hover); margin-left: 1rem; flex-direction: column; justify-content: space-between; align-items: flex-start; column-gap: 0.5rem; } .global-counter { display: flex; align-items: center; justify-content: center; background-color: var(--color-fill-ghost-hover); clip-path: var(--1px-corner-fill); height: 1.5rem; padding: 0 0.5rem; min-width: 1.5rem; font-weight: var(--font-weight-regular); } :root { --elevation-low: 0 0 48px 0 #000000ee; } [data-theme="light"] { --elevation-low: 0 0 16px 0 #00000022; } :root { --1px-corner-fill: polygon( 0 2px, 2px 2px, 2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px) ); --2px-corner-fill: polygon( 0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px) ); --2px-top-corner-fill: polygon( 0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px, 100% 100%, 0 100% ); --3px-corner-fill: polygon( 0 6px, 2px 6px, 2px 4px, 4px 4px, 4px 2px, 6px 2px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 2px, calc(100% - 4px) 2px, calc(100% - 4px) 4px, calc(100% - 2px) 4px, calc(100% - 2px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 2px) calc(100% - 6px), calc(100% - 2px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 2px), calc(100% - 6px) calc(100% - 2px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 2px), 4px calc(100% - 2px), 4px calc(100% - 4px), 2px calc(100% - 4px), 2px calc(100% - 6px), 0 calc(100% - 6px) ); --3px-top-corner-fill: polygon( 0 6px, 2px 6px, 2px 4px, 4px 4px, 4px 2px, 6px 2px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 2px, calc(100% - 4px) 2px, calc(100% - 4px) 4px, calc(100% - 2px) 4px, calc(100% - 2px) 6px, 100% 6px, 100% 100%, 0 100% ); --3px-bottom-corner-fill: polygon( 0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 2px) calc(100% - 6px), calc(100% - 2px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 2px), calc(100% - 6px) calc(100% - 2px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 2px), 4px calc(100% - 2px), 4px calc(100% - 4px), 2px calc(100% - 4px), 2px calc(100% - 6px), 0 calc(100% - 6px) ); }