gator/paytolaugh
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Styles for the storyboard player, and make the tab score readable

Browse source 
"Claude Opus 5 ★75" is unreadable when the model's own name ends in a digit -
it was read as a score of 5. The score now sits in its own bordered pill.
This commit is contained in:
gator 2026-09-17 14:07:20 +00:00
parent efa861f227
commit 70bf7758e3
1 changed files with 23 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
trailer.html
View file

@ -13,7 +13,9 @@
.tab.on{color:var(--ink);border-color:var(--line);background:var(--panel)} .tab.on{color:var(--ink);border-color:var(--line);background:var(--panel)}
.tab.lead{color:var(--accent)} .tab.lead{color:var(--accent)}
.scene{color:var(--accent2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px} .scene{color:var(--accent2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.tab .sc{color:var(--accent2);margin-left:7px;font-weight:600} .tab .sc{color:var(--accent2);margin-left:9px;font-weight:600;font-size:11px;
border:1px solid var(--accent2);border-radius:999px;padding:1px 7px;
font-variant-numeric:tabular-nums}
.tab .st{color:var(--muted);margin-left:7px;font-size:12px} .tab .st{color:var(--muted);margin-left:7px;font-size:12px}
.head{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;margin-bottom:6px} .head{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;margin-bottom:6px}
.head h2{margin:0;font-size:22px} .head h2{margin:0;font-size:22px}
@ -116,6 +118,26 @@
.playbox video{width:100%;display:block;aspect-ratio:16/9;background:#000} .playbox video{width:100%;display:block;aspect-ratio:16/9;background:#000}
.playbox .bar2{display:flex;gap:10px;align-items:center;padding:7px 10px;font-size:12px; .playbox .bar2{display:flex;gap:10px;align-items:center;padding:7px 10px;font-size:12px;
color:var(--muted);background:var(--panel)} color:var(--muted);background:var(--panel)}
.reel{border:1px solid var(--accent);border-radius:10px;padding:14px 16px;margin:0 0 18px}
.reel h4{margin:0 0 4px;font-size:15px;color:var(--accent)}
.reel .lede{color:var(--muted);font-size:13px;margin:0 0 12px}
.reelframes{display:flex;gap:12px}
.reelframes figure{margin:0;flex:1;min-width:0}
.reelframes img{width:100%;border-radius:10px;border:1px solid var(--line);display:block;
aspect-ratio:16/9;object-fit:cover;background:#000}
.reelframes img.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,170,80,.25)}
.reelframes figcaption{color:var(--muted);font-size:11px;margin-top:4px;text-align:center}
.reelnow{margin:12px 0 0;text-align:center}
.reelnow .t{font-size:15px;font-weight:600}
.reelnow .w{color:var(--muted);font-size:12.5px;margin-top:2px}
.reelnow .said{font-size:14px;margin-top:8px;max-width:46em;margin-left:auto;margin-right:auto}
.reelnow .said .who{color:var(--accent);font-size:12px;margin-right:6px}
.reelbar{display:flex;gap:8px;align-items:center;justify-content:center;
flex-wrap:wrap;margin-top:12px}
.reelbar .pos{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.reelprog{height:4px;background:var(--line);border-radius:999px;margin-top:12px;overflow:hidden}
.reelprog i{display:block;height:100%;background:var(--accent);width:0}
.shot.lit{background:rgba(255,170,80,.06);border-radius:10px}
</style> </style>
</head> </head>
<body> <body>