Recently Written · git

src/style.css (11012 bytes)

 :root {
   color-scheme: light dark;
   font-family: system-ui, sans-serif;
   --highlight: rgba(255, 200, 0, 0.45);
   --highlight-solid: rgb(255, 200, 0);
   --highlight-weak: rgba(120, 160, 255, 0.35);
   --topbar: 3.25rem;
   /* The height of the status strip. The panel of its full texts starts under it. */
   --strip: 2rem;
   /* The size of a button of the top bar: 48 CSS px, the Android guideline for a touch target. */
   --target: 3rem;
   --panel-width: 22rem;
 }
 
 /* The hidden attribute wins over each `display` rule below, for example `.row`. */
 [hidden] {
   display: none !important;
 }
 
 /* Phone layout: top bar, page below, controls in a drawer. */
 body {
   margin: 0;
   display: flex;
   flex-direction: column;
   height: 100vh;
   height: 100dvh;
   overflow: hidden;
 }
 
 /*
  * The top bar fits a phone of 360 CSS pixels in one row: five icon buttons
  * of 48 px, and the page label in the free space.
  */
 #topbar {
   flex: none;
   box-sizing: border-box;
   height: var(--topbar);
   display: flex;
   gap: 4px;
   align-items: center;
   padding: 0 4px;
   border-bottom: 1px solid #8884;
 }
 
 #topbar button {
   flex: none;
   box-sizing: border-box;
   height: var(--target);
   min-width: var(--target);
   padding: 0 0.3rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font: inherit;
   font-size: 0.9rem;
   white-space: nowrap;
   color: inherit;
   background: none;
   border: 1px solid transparent;
   border-radius: 6px;
   cursor: pointer;
 }
 
 /* A touch screen keeps the hover state on the last button that was tapped. */
 @media (hover: hover) {
   #topbar button:hover:not(:disabled) {
     background: #8882;
   }
 }
 
 #topbar button:active:not(:disabled) {
   background: #8884;
 }
 
 #topbar button:focus-visible {
   outline: 2px solid Highlight;
   outline-offset: -2px;
 }
 
 #topbar button:disabled {
   opacity: 0.35;
   cursor: default;
 }
 
 #topbar svg {
   width: 1.5rem;
   height: 1.5rem;
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
 }
 
 #topbar svg .solid {
   fill: currentColor;
   stroke: none;
 }
 
 #play .i-pause,
 #play.playing .i-play {
   display: none;
 }
 
 #play.playing .i-pause {
   display: block;
 }
 
 /* The page label takes the free space, and it opens the page jump. */
 #topbar #page-label {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   font-variant-numeric: tabular-nums;
 }
 
 /*
  * The Follow button shows while a page turn by the user holds the follow.
  * It floats over the lower right corner of the page, so the buttons of the
  * top bar stay where they are when it shows.
  */
 #follow-now {
   position: absolute;
   right: 1rem;
   bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
   z-index: 5;
   min-height: 48px;
   padding: 0 1.2rem;
   font: inherit;
   font-weight: 600;
   color: #1a1a1a;
   background: var(--highlight-solid);
   border: none;
   border-radius: 24px;
   box-shadow: 0 2px 8px #0006;
   cursor: pointer;
 }
 
 #follow-note {
   font-weight: 600;
 }
 
 /* The page jump takes the place of the page label. */
 #page-input {
   flex: 1 1 auto;
   min-width: 0;
   width: 4rem;
   box-sizing: border-box;
   height: var(--target);
   padding: 0 0.4rem;
   font: inherit;
   font-size: 1rem;
   text-align: center;
 }
 
 /*
  * The status strip: the player, the reading of the pages, the last event.
  * One line of a fixed height, so the page under it never moves: a long
  * message wrapped and pushed the page down, and the page went up again
  * when the message faded. A long text ends with an ellipsis. Its title
  * attribute holds the full text, and a tap on the strip shows the full
  * texts in #strip-full (status.ts).
  */
 #strip {
   flex: none;
   box-sizing: border-box;
   height: var(--strip);
   cursor: pointer;
   display: flex;
   flex-wrap: nowrap;
   align-items: stretch;
   column-gap: 0.75rem;
   padding: 0 0.5rem;
   font-size: 0.8rem;
   line-height: 1.3;
   white-space: nowrap;
   overflow: hidden;
   border-bottom: 1px solid #8884;
 }
 
 #strip > * {
   display: flex;
   align-items: center;
   gap: 0.3rem;
   min-width: 0;
   flex: 0 1 auto;
 }
 
 /* The player text is short and always there: the other parts shrink first. */
 #player-status {
   flex-shrink: 0.3;
 }
 
 #strip .text {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 /* A link, a button and "Follow paused" do not shrink: a cut button cannot be read. */
 #strip a,
 #strip button.action,
 #follow-note {
   flex: none;
 }
 
 #strip button.action {
   margin: 3px 0;
   align-self: stretch;
 }
 
 /* A strip with no text takes no space. */
 #strip:not(:has(> :not([hidden]):not(:empty))) {
   display: none;
 }
 
 #strip a {
   color: inherit;
 }
 
 /* A button after a message, for example Retry. */
 button.action {
   font: inherit;
   padding: 0 0.5rem;
   color: inherit;
   background: none;
   border: 1px solid currentColor;
   border-radius: 4px;
   cursor: pointer;
 }
 
 #pages-status {
   opacity: 0.8;
 }
 
 #status {
   transition: opacity 600ms ease-out;
 }
 
 #status.faded {
   opacity: 0;
 }
 
 /*
  * While an event shows, it takes the place of the player text: on a phone
  * the parts do not fit in one line. The link or the button of the player
  * stays.
  */
 #strip.event #player-status .text,
 #strip.event #player-status:not(:has(a, button)) {
   display: none;
 }
 
 /*
  * The full texts of the strip, after a tap on it: a phone cannot hover to
  * read the title attribute. The panel floats over the top of the page, so
  * the page does not move. The next tap closes it.
  */
 #strip-full {
   position: fixed;
   top: calc(var(--topbar) + var(--strip));
   left: 0;
   right: 0;
   z-index: 6;
   box-sizing: border-box;
   max-height: 50vh;
   overflow-y: auto;
   padding: 0.5rem 0.75rem;
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
   font-size: 0.85rem;
   line-height: 1.35;
   background: Canvas;
   border-bottom: 1px solid #8884;
   box-shadow: 0 4px 12px #0004;
 }
 
 #strip-full p {
   margin: 0;
   overflow-wrap: anywhere;
 }
 
 #panel {
   position: fixed;
   top: var(--topbar);
   left: 0;
   bottom: 0;
   width: min(var(--panel-width), 88vw);
   box-sizing: border-box;
   padding: 1rem;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
   background: Canvas;
   border-right: 1px solid #8884;
   box-shadow: 0 0 12px #0004;
   transform: translateX(-100%);
   transition: transform 150ms ease-out;
   z-index: 10;
 }
 
 body.menu-open #panel {
   transform: none;
 }
 
 #panel h1 {
   font-size: 1.2rem;
   margin: 0;
 }
 
 .hint {
   margin: 0;
   font-size: 0.85rem;
   opacity: 0.8;
 }
 
 #panel label {
   display: flex;
   flex-direction: column;
   font-size: 0.85rem;
   gap: 0.2rem;
 }
 
 #panel input[type='file'] {
   max-width: 100%;
 }
 
 .row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.85rem;
 }
 
 #panel label.check,
 #follow label {
   flex-direction: row;
   align-items: center;
   gap: 0.4rem;
 }
 
 #follow {
   display: flex;
   flex-direction: column;
   gap: 0.3rem;
   margin: 0;
   padding: 0.4rem 0.6rem;
   border: 1px solid #8884;
   border-radius: 4px;
   font-size: 0.85rem;
 }
 
 #follow legend {
   padding: 0 0.2rem;
 }
 
 #make,
 #audio-row {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
   font-size: 0.85rem;
 }
 
 #make-status {
   word-break: break-word;
 }
 
 #make-status a {
   color: inherit;
 }
 
 #audio {
   width: 100%;
 }
 
 /*
  * The cue list has its own scroll box: it takes the free height of the
  * menu, at least 12rem. It scrolls to the cue of now, and the settings
  * above it stay.
  */
 #cues {
   position: relative;
   flex: 1 0 12rem;
   min-height: 12rem;
   overflow-y: auto;
   padding-left: 1.5rem;
   margin: 0;
   font-size: 0.9rem;
   border-top: 1px solid #8884;
 }
 
 #cues li {
   cursor: pointer;
   padding: 0.15rem 0.3rem;
   border-radius: 3px;
   white-space: pre-line;
 }
 
 #cues li.unmatched {
   opacity: 0.55;
 }
 
 #cues li.active {
   background: var(--highlight);
 }
 
 /* The frame of the Follow button. */
 #main {
   position: relative;
   flex: 1;
   min-height: 0;
   display: flex;
   flex-direction: column;
 }
 
 #viewer {
   flex: 1;
   min-height: 0;
   overflow: auto;
   /* A scroll bar that comes and goes does not change the width of the page. */
   scrollbar-gutter: stable;
   padding: 0.5rem;
   /* The browser pans vertically only, so a sideways swipe turns the page (nav.ts). */
   touch-action: pan-y pinch-zoom;
 }
 
 /* A zoomed page pans in each direction, and a swipe does not turn it. */
 body.zoomed #viewer {
   touch-action: auto;
 }
 
 /* The start card: what the app does, and how to start. */
 .card {
   box-sizing: border-box;
   max-width: 28rem;
   margin: 1.5rem auto;
   padding: 1.25rem;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.75rem;
   border: 1px solid #8884;
   border-radius: 10px;
   line-height: 1.4;
 }
 
 .card h2 {
   margin: 0;
   font-size: 1.3rem;
 }
 
 .card p {
   margin: 0;
 }
 
 .card button.primary {
   font: inherit;
   font-weight: 600;
   padding: 0.6rem 1.2rem;
   border-radius: 8px;
   border: none;
   color: #1a1a1a;
   background: var(--highlight-solid);
   cursor: pointer;
 }
 
 #suite-checklist:empty {
   display: none;
 }
 
 #suite-checklist h3,
 #suite h2 {
   margin: 0 0 0.3rem;
   font-size: 0.95rem;
 }
 
 /* The checklist of the SubRead suite: a mark, the text, then a link or a button. */
 .suite {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 0.35rem;
   font-size: 0.85rem;
 }
 
 .suite li::before {
   content: '✓';
   display: inline-block;
   width: 1.3em;
   font-weight: 700;
 }
 
 .suite li.missing::before {
   content: '✗';
 }
 
 .suite a {
   color: inherit;
 }
 
 /*
  * The page fits the viewer width in each orientation, up to 1000 CSS
  * pixels on a wide screen. The viewer scrolls vertically.
  */
 #page {
   position: relative;
   margin: 0 auto;
   width: 100%;
   max-width: 1000px;
   /* A long press makes an Anki card: no selection, no image menu. */
   -webkit-user-select: none;
   user-select: none;
   -webkit-touch-callout: none;
 }
 
 #page canvas {
   display: block;
   width: 100%;
   height: auto;
   box-shadow: 0 0 6px #0006;
 }
 
 /* The padding of a box can go past the edge of the page. The page clips it. */
 #overlay {
   position: absolute;
   inset: 0;
   pointer-events: none;
   overflow: hidden;
 }
 
 .box {
   position: absolute;
   background: var(--highlight);
   border-radius: 2px;
   transition: all 120ms ease-out;
 }
 
 .box.unmatched {
   background: var(--highlight-weak);
 }
 
 /* Desktop layout: panel and page side by side. */
 @media (min-width: 900px) {
   body {
     display: grid;
     grid-template-columns: var(--panel-width) 1fr;
     grid-template-rows: var(--topbar) auto 1fr;
   }
 
   #topbar #menu {
     display: none;
   }
 
   #topbar {
     grid-column: 2;
     grid-row: 1;
   }
 
   #strip {
     grid-column: 2;
     grid-row: 2;
     min-width: 0;
   }
 
   #strip-full {
     left: var(--panel-width);
   }
 
   #panel {
     grid-column: 1;
     grid-row: 1 / 4;
     position: static;
     width: auto;
     transform: none;
     box-shadow: none;
   }
 
   #main {
     grid-column: 2;
     grid-row: 3;
     min-width: 0;
   }
 
   #viewer {
     padding: 1rem;
   }
 }