@nebularstreams/overlay-sdk 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/package.json +2 -3
  2. package/preview/bundle.min.js +1 -1
  3. package/preview/index.css +1 -1
  4. package/skill/nebular-overlay/references/manifest.md +13 -14
  5. package/skill/nebular-overlay/references/runtime-and-design.md +12 -6
  6. package/templates/all/broadcast/newsticker/manifest.json +1 -1
  7. package/templates/all/broadcast/newsticker-frames/manifest.json +1 -1
  8. package/templates/all/broadcast/weather/manifest.json +0 -1
  9. package/templates/all/engagement/call-to-action/manifest.json +1 -1
  10. package/templates/all/gambling/bingo/manifest.json +0 -1
  11. package/templates/all/gambling/keno/manifest.json +0 -1
  12. package/templates/all/gambling/lottery/manifest.json +0 -1
  13. package/templates/all/gambling/prize-wall/manifest.json +0 -2
  14. package/templates/all/gambling/roulette/manifest.json +0 -1
  15. package/templates/all/gaming/battleship/manifest.json +0 -2
  16. package/templates/all/trivia/audience-poll/manifest.json +1 -2
  17. package/templates/all/trivia/classic-quiz/manifest.json +1 -1
  18. package/templates/all/trivia/lightning-round/manifest.json +0 -1
  19. package/templates/all/trivia/pasapalabra/manifest.json +0 -3
  20. package/templates/all/trivia/quiz-deck/manifest.json +0 -1
  21. package/templates/all/trivia/true-or-false/manifest.json +0 -1
  22. package/templates/basic/broadcast/newsticker/manifest.json +1 -1
  23. package/templates/basic/broadcast/weather/manifest.json +0 -1
  24. package/templates/basic/engagement/call-to-action/manifest.json +1 -1
  25. package/templates/games/gambling/bingo/manifest.json +0 -1
  26. package/templates/games/gambling/keno/manifest.json +0 -1
  27. package/templates/games/gambling/lottery/manifest.json +0 -1
  28. package/templates/games/gambling/prize-wall/manifest.json +0 -2
  29. package/templates/games/gambling/roulette/manifest.json +0 -1
  30. package/templates/games/gaming/battleship/manifest.json +0 -2
  31. package/templates/games/trivia/audience-poll/manifest.json +1 -1
  32. package/templates/games/trivia/classic-quiz/manifest.json +1 -1
  33. package/templates/games/trivia/lightning-round/manifest.json +0 -1
  34. package/templates/games/trivia/pasapalabra/manifest.json +0 -3
  35. package/templates/games/trivia/quiz-deck/manifest.json +0 -1
  36. package/templates/games/trivia/true-or-false/manifest.json +0 -1
  37. package/tool/cli.cjs +1 -1
package/preview/index.css CHANGED
@@ -25,4 +25,4 @@
25
25
  /*!
26
26
  * Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com
27
27
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
28
- */@font-face{font-display:block;font-family:Font Awesome\ 5 Brands;font-style:normal;font-weight:400;src:url(assets/webfonts/fa-brands-400.woff2) format("woff2")}.fabrd:before{font-family:Font Awesome\ 5 Brands!important;font-weight:400}.fabf:before{font-family:Font Awesome\ 5 Free;padding-right:.25rem}#header{border-bottom:1px solid var(--border-color);display:flex;height:4rem;line-height:4rem;margin:0;padding:0 1rem;user-select:none}#header>div{align-items:center;display:flex;flex-direction:row;flex-grow:1}h3.root-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#header a{color:var(--foreground);padding-right:.5rem}#header h3{cursor:pointer}#header h3:active{color:var(--accent)}.header-title{align-items:center;display:flex;flex-direction:row;height:4rem;width:100%}h3{border-bottom:none;line-height:1.1;margin:0}.playerheader{color:#ed7d0e;text-align:center}.innercontent{height:100%;overflow:hidden}.d-none-small{display:flex}.d-flex-small{display:none}@media only screen and (max-width:800px) and (orientation:portrait){.innercontent{height:100%;overflow:hidden}.d-none-small{display:none!important}.d-flex-small{display:flex!important}.header-title h3{font-size:smaller}.overlay-title p{font-size:.8rem}#modal-container>.modal-content{font-size:1rem!important;min-width:287px!important}#notification-container .notification{max-width:90%;white-space:normal}.maincontainer{display:flex;flex-wrap:nowrap}.centercontainer.revsmall,.maincontainer{flex-direction:column}.centercontainer{align-content:flex-start}.centercontainer.revsmall .part-mid,.centercontainer.revsmall .part-right{flex-grow:0;flex-shrink:1;width:-webkit-fill-available}.centercontainer.revsmall .part-mid{flex-grow:1}.part-left{border-bottom:1px solid var(--border-color);flex-direction:row;height:auto!important;justify-content:center!important;width:100%!important}.launchcell{justify-content:center}.launchcell div{display:none}}footer{background-color:rgba(0,0,0,.1);padding:10px}#package-version{font-size:.875rem;font-weight:500;line-height:1;text-transform:uppercase}.nogrows{flex-grow:0!important}h3.grows.apptitle{font-weight:400;padding:0 .5rem}h3.grows.apptitle:before{color:var(--accent);content:"\f0da";font-family:Font Awesome\ 5 Free;padding-right:.35rem}.noselect{user-select:none}button.skinbutton{background:transparent;border:0;color:var(--foreground);margin:0 .5rem}.boxstuff{align-items:center;border-bottom:1px solid var(--border-color);display:flex;gap:.5rem;padding:.5rem}figure.app-logo{margin:0;padding:0}.localebutton{font-size:1.3rem}.app-logo{background-image:url(assets/images/nebular.color.100h.png);background-position:50%;background-repeat:no-repeat;background-size:contain;flex-shrink:0;height:3.5rem;margin-right:.25rem;width:10rem}@media only screen and (max-width:500px) and (orientation:portrait){.d-none-micro{display:none!important}.header-title .app-logo{background-image:url(assets/images/nebular.medallion.transparent..png)!important;width:4rem}.button>span,.header-title h3.root-title{display:none}.overlay-details-card{font-size:.75rem}}.launchcard{background:var(--background-item);border-radius:.25rem;cursor:pointer;flex-grow:1;gap:.5rem;padding:2rem;text-align:center;transition:all .25s ease-in-out;width:49%}.launchcard:active{transform:scale(.9)}.launchcard:hover{color:var(--accent)}.rootservices{border-bottom:1px solid var(--border-color)}.rootservices button{background:transparent;border:0;color:var(--text)}button.accent{color:var(--accent)}.overlay-service{min-height:0}.overlay-content{background:var(--background-lo);border-left:1px solid var(--border-color);box-sizing:border-box;gap:1rem;min-width:0;overflow-y:auto;padding:1rem}.overlay-title{align-items:center;border-bottom:1px solid var(--border-color);gap:.5rem;padding-bottom:1rem;user-select:none}.overlay-title p{color:var(--foreground-lo);margin:0;text-overflow:ellipsis;white-space:normal}.overlay-title.flexcol{align-items:normal}.overlay-content-alt{gap:1rem}.overlay-template-copy code,.overlay-template-copy h3,.overlay-title h2{margin:0}.overlay-template-copy code{color:var(--foreground-lo);font-size:.7rem;overflow:hidden;white-space:nowrap}.overlay-notice{margin:0}.overlay-template-browser{align-items:start;display:grid;flex-grow:1;gap:1rem;grid-template-columns:13rem minmax(0,1fr)}.overlay-template-grid{align-content:start;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(20rem,100%),1fr));min-width:0;width:100%}i.icon.fa-toggle-on{color:var(--green)}.overlay-category-list{align-self:start;background:var(--background);border:1px solid var(--border-color);border-radius:.5rem;gap:.25rem;padding:.5rem;position:sticky;top:0}.overlay-category{align-items:center;background:transparent;border:1px solid transparent;border-radius:.25rem;color:var(--foreground);cursor:pointer;font:inherit;font-variant:all-small-caps;gap:.65rem;padding:.7rem .65rem;text-align:left;width:100%}.overlay-category.active,.overlay-category:focus-visible,.overlay-category:hover{border-color:var(--accent);color:var(--accent);outline:0}.overlay-category.active{background:var(--background-item)}.overlay-category-count{background:var(--background-lo);border:1px solid var(--border-color);border-radius:1rem;color:var(--foreground-lo);font-size:.7rem;font-variant:normal;min-width:1.25rem;padding:.15rem .35rem;text-align:center}.overlay-details-grid .overlay-template-card{position:sticky}.overlay-template-card{top:0;user-select:none}a.extlink{color:var(--text-lo)}.clipbutton.absolute{right:1.5rem;top:1.5rem}.label,label{position:relative}article.overlay-template-card{align-self:start;min-width:0}article.clickable{cursor:pointer;transition:scale .25s ease-in-out}article.clickable:active{transform:scale(.95)}.overlay-template-copy.is-pending{background:var(--background-alt)}.overlay-create-preview,.overlay-curl-example,.overlay-details-card,.overlay-form,.overlay-template-card,.overlay-template-switcher,.overlay-values-editor{background:var(--background);border:1px solid var(--border-color);border-radius:.5rem;overflow:hidden}.overlay-template-card.clickable:hover{border-color:var(--accent)}.overlay-preview{aspect-ratio:16/9;background-color:var(--transparent-base);background-image:linear-gradient(45deg,var(--transparent-alt) 25%,transparent 25%),linear-gradient(-45deg,var(--transparent-alt) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--transparent-alt) 75%),linear-gradient(-45deg,transparent 75%,var(--transparent-alt) 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px;min-height:0;overflow:hidden;position:relative;width:100%}.overlay-preview iframe{border:0;height:1080px;inset:0;min-height:12rem;pointer-events:none;position:absolute;transform:scale(var(--preview-scale,1));transform-origin:top left;width:1920px}dd.overlay-consumer{text-align:center}.overlay-preview-label{background:rgba(0,0,0,.72);bottom:.5rem;color:#fff;font:.7rem monospace;left:.5rem;padding:.3rem .45rem;position:absolute}.overlay-template-copy{align-items:center;border-bottom:1px solid var(--border-color);gap:.5rem;padding:1rem}.overlay-template-copy h3{margin-bottom:.25rem;text-transform:capitalize}.colorjoe-cell{border:1px solid var(--border-color)}.overlay-session-list{gap:.4rem}.overlay-session{align-items:center;background:var(--background);border:1px solid var(--border-color);border-radius:.25rem;color:var(--foreground);cursor:pointer;font:inherit;gap:1rem;overflow:hidden;padding:.9rem 1rem;position:relative;text-align:left;transition:all .5s linear;width:100%}.overlay-session:focus-visible,.overlay-session:hover{border-color:var(--accent);color:var(--accent);outline:0}.overlay-session.status-running:hover{border-color:var(--green);color:var(--green)}.overlay-session.busy{opacity:.55;pointer-events:none}.overlay-stop{flex-shrink:0}.overlay-session-name{display:flex;flex-direction:column;gap:.2rem}.overlay-session-name strong{font-family:monospace}.overlay-session-name span,.overlay-session-stat{color:var(--foreground-lo);font-size:.8rem}.overlay-consumer{border:1px solid;border-radius:1rem;font-size:.65rem;font-weight:700;padding:.25rem .6rem}.overlay-consumer.connected{color:var(--green)}.overlay-consumer.waiting{color:var(--accent)}.overlay-create-grid,.overlay-details-grid{display:grid;flex-grow:1;gap:1rem;grid-template-columns:minmax(20rem,.8fr) minmax(24rem,1.2fr)}.overlay-create-grid{margin-bottom:1rem}.overlay-create-preview,.overlay-details-card,.overlay-form,.overlay-template-switcher,.overlay-values-editor{box-sizing:border-box;gap:1rem;padding:1rem}.overlay-form .label{overflow:hidden;text-overflow:ellipsis}.overlay-form input,.overlay-form select{background:var(--inputs);border:1px solid var(--border-color);border-radius:.25rem;box-sizing:border-box;color:var(--foreground);font:inherit;padding:.7rem;width:100%}.overlay-form input:focus,.overlay-form select:focus{border-color:var(--accent);outline:0}.overlay-dimensions{display:grid;gap:.75rem;grid-template-columns:repeat(3,1fr)}.overlay-form-actions{gap:.5rem;justify-content:flex-end}.overlay-values-editor{border:0;border-radius:0;border-top:1px solid var(--border-color);grid-column:1/-1;padding:1rem 0}.overlay-values-title{align-items:center;border-bottom:1px solid var(--border-color);gap:.75rem;margin-bottom:.25rem;padding-bottom:.5rem;user-select:none}.overlay-values-title h3,.overlay-values-title p{margin:0}.overlay-values-title p{color:var(--foreground-lo);font-size:.85rem;margin-top:.3rem}.overlay-values-status{border:1px solid;border-radius:1rem;font-size:.65rem;font-weight:700;padding:.25rem .6rem;white-space:nowrap}.overlay-values-status.valid{color:var(--green)}.overlay-values-status.invalid{color:var(--red)}.overlay-values-fields{display:flex;flex-wrap:wrap;gap:.75rem}.overlay-values-field.big{width:100%}.overlay-values-field.small{flex-grow:0;min-width:auto;width:6rem}.overlay-values-field{display:flex;flex-direction:column;flex-grow:1;gap:.35rem;min-width:3rem;overflow:hidden}.overlay-values-set{background:var(--background-alt);border:1px solid var(--border-color);padding:.5rem}.notice.instructions{background:transparent;font-size:.75rem;margin:1rem}.overlay-details-grid .overlay-values-editor{border:1px solid var(--border-color);border-radius:.25rem;grid-column:auto;padding:1rem}.overlay-values-field input{background:var(--inputs);border:1px solid var(--border-color);border-radius:.25rem;box-sizing:border-box;color:var(--foreground);height:var(--unitsize);padding:.7rem;width:100%}.overlay-values-field input:focus{border-color:var(--accent);outline:0}.overlay-values-error,.overlay-values-result{font-size:.8rem}.overlay-values-error{color:#ff8d8d}.overlay-values-result{color:var(--foreground-lo);overflow-wrap:anywhere}.overlay-values-empty{color:var(--foreground-lo);padding:.75rem 0}.overlay-create-preview h3,.overlay-details-card h3{margin:0 0 1rem}.overlay-create-preview .overlay-preview{min-height:22rem}.overlay-details-card dl{display:grid;gap:.75rem 1rem;grid-template-columns:auto 1fr;margin:0}.overlay-details-card dt{color:var(--foreground-lo)}.overlay-details-card dd{font-weight:700;margin:0;white-space:normal;word-break:break-word}.overlay-code{color:var(--green);display:block;overflow-wrap:anywhere}.overlay-template-switcher h3,.overlay-template-switcher p{margin:0}.overlay-template-switcher p{color:var(--foreground-lo);margin-top:.3rem}.overlay-switch-options{gap:.4rem;max-height:30rem;overflow-y:auto}.overlay-template-switcher{grid-column:2;grid-row:1/span 2;min-height:100%}.overlay-switch-option{align-items:center;background:var(--background-item);border:1px solid transparent;border-radius:.25rem;color:var(--foreground);cursor:pointer;font:inherit;gap:.75rem;padding:.65rem .75rem;text-align:left;width:100%}.overlay-switch-option.selected,.overlay-switch-option:focus-visible,.overlay-switch-option:hover{border-color:var(--accent);outline:0}.overlay-switch-option.selected{background:color-mix(in srgb,var(--accent) 12%,var(--background-item))}.overlay-switch-option>div{display:flex;flex-direction:column;min-width:0}.overlay-switch-option code{color:var(--foreground-lo);font-size:.72rem;overflow:hidden;text-overflow:ellipsis}.overlay-active-template{border:1px solid var(--green);border-radius:1rem;color:var(--green);font-size:.6rem;font-weight:700;padding:.2rem .45rem}.overlay-switch-error{background:rgba(190,20,20,.16);border:1px solid var(--red);border-radius:.25rem;color:var(--red);padding:.6rem .75rem}.overlay-switch-actions{justify-content:flex-end;margin-top:auto}.overlay-curl-example{grid-column:1/-1;margin-bottom:.5rem;padding:1rem}.overlay-curl-title{align-items:center;gap:1rem;word-break:break-all}.overlay-curl-title h3,.overlay-curl-title p{margin:0;word-break:break-word}.overlay-template-card .overlay-preview{flex-grow:0}.overlay-curl-title .button{flex-shrink:0}.overlay-curl-title p{color:var(--foreground-lo);margin-top:.3rem}.overlay-curl-example pre{background:#000;border:1px solid var(--border-color);border-radius:.25rem;color:#8de6a8;font-size:.6rem;margin:1rem 0 0;overflow-x:auto;padding:.5rem;white-space:pre-wrap;word-break:break-all}.overlay-content-sub{margin:1rem}@media (max-width:1000px){.overlay-category-list{align-self:stretch;flex-direction:row;flex-wrap:wrap;font-size:.7rem;height:auto;justify-content:center;overflow:visible;position:static}.overlay-category{flex:0 0 auto;width:auto}.overlay-template-browser{align-content:flex-start;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}.overlay-create-grid,.overlay-details-grid{grid-template-columns:1fr}.overlay-session-stat{display:none}.overlay-template-switcher{grid-column:auto;grid-row:auto}}.selector .toolbar{background:var(--background-alt);border:1px solid var(--border-color);border-radius:.5rem;height:3rem;justify-content:space-evenly;margin-bottom:.5rem}.selector .toolbar button.accent{color:var(--accent)}.currentval{margin:1rem -.5rem}.selector .toolbar button{background:transparent;border:0;color:var(--text)}.overlay-template-switcher .overlay-category-list{width:100%}.overlay-session:before{background:var(--border-color);content:" ";height:100%;left:0;position:absolute;width:.25rem}.overlay-session.status-idle:before{background:var(--accent)}.overlay-session.status-running:before{background:var(--green)}.label>span,label>span{color:var(--foreground-lo);font-variant:all-petite-caps;white-space:nowrap}.overlay-visible.isvisible{color:var(--green)}.overlay-visible.ishidden{color:var(--red-grad)}.overlay-template-copy .button.isvisible{background:var(--green-grad)}.overlay-template-copy .button.ishidden{background:var(--red-grad)}.overlay-template-card.ishidden .overlay-preview{opacity:.2}.colorjoe-cell .inset{height:100%}.colorjoe-cell{border-radius:.25rem;overflow:hidden}.bar-services{transition:all .5s linear}.bar-services.mini{width:2.54rem}.bar-services.mini .launchcell>div{display:none}.updatedAt{align-content:center;border:1px solid var(--border-color);border-radius:10rem;cursor:help;font-size:.7rem;padding:0 .5rem}.param-choose,.param-multi{background:var(--background-lo)}.static.select{line-height:var(--unitsize-small);padding:0 .5rem}.status-idle i{color:var(--accent)}.status-running i{color:var(--green)}.currentval{font-size:.6rem}.maincontainer .cardie{border:none!important}:root{--window-background-hi:var(--background-alt);--mithril-range-scale:var(--background-alt);--transparent-base:#fff;--transparent-alt:#d7d7d7;--text-over-accent:#fff;--buttons:linear-gradient(0deg,gray,#aaa);--red:red;--green:#080;--yellow:#990;--red-alt:#b00;--green-alt:#0a0;--yellow-alt:#bb0;--accent:#f90;--accent-alt:#fb0;--red-grad:linear-gradient(0deg,var(--red),var(--red-alt));--green-grad:linear-gradient(0deg,var(--green),var(--green-alt));--yellow-grad:linear-gradient(0deg,var(--yellow),var(--yellow-alt));--accent-grad:linear-gradient(0deg,var(--accent),var(--accent-alt))}.skin-light{--accent-hover:#444;--background-legend:gray;--background:#fff;--background-lo:#f9f9f9;--background-mid:#eee;--background-item:#fff;--background-alt:#ffa;--foreground:#000;--foreground-lo:#444;--border-color:#ccc;--shadow-color:#000;--text:var(--foreground);--inputs:var(--background-lo);--gradient-one:#333;--gradient-two:#555;--transparent-base:#fff;--transparent-alt:#d7d7d7}@media (prefers-color-scheme:light){:root{--accent-hover:#444;--background-legend:gray;--background:#fff;--background-lo:#f9f9f9;--background-mid:#eee;--background-item:#fff;--background-alt:#ffa;--foreground:#000;--foreground-lo:#444;--border-color:#ccc;--shadow-color:#000;--text:var(--foreground);--text-over-accent:#fff;--inputs:var(--background-lo);--gradient-one:#333;--gradient-two:#555;--transparent-base:#fff;--transparent-alt:#d7d7d7}}.skin-dark{--accent-hover:#444;--background-legend:gray;--background:#111;--background-lo:#1a1a1a;--background-mid:#222;--background-item:#122230;--background-alt:#2a2a2a;--foreground:#fff;--foreground-lo:#aaa;--border-color:hsla(0,0%,100%,.12);--shadow-color:#000;--text:var(--foreground);--inputs:var(--background-lo);--gradient-one:#333;--gradient-two:#555;--transparent-base:#333;--transparent-alt:#444}.skin-dark .app-logo{background-image:url(assets/images/nebular.color.white.100h.png)!important}.skin-light .app-logo{background-image:url(assets/images/nebular.color.100h.png)!important}.app-logo.loginversion{margin-top:1rem}@media (prefers-color-scheme:dark){:root{--accent-hover:#444;--background-legend:gray;--background:#111;--background-lo:#1a1a1a;--background-mid:#222;--background-item:#122230;--background-alt:#2a2a2a;--foreground:#fff;--foreground-lo:#aaa;--border-color:hsla(0,0%,100%,.12);--shadow-color:#000;--text:var(--foreground);--inputs:var(--background-lo);--transparent-base:#333;--transparent-alt:#444}.app-logo{background-image:url(assets/images/nebular.color.white.100h.png)!important}}button.param-button{background:var(--buttons);border-radius:.25rem;color:var(--text-over-accent);font-weight:700;height:var(--unitsize)}select.param-select{background:var(--inputs);border:1px solid var(--border-color);border-radius:.25rem;box-sizing:border-box;color:var(--foreground);font:inherit;height:var(--unitsize)}.param-input:focus,.param-select:focus{border-color:var(--accent);outline:0}.param-field{text-align:center}.param-field,.plusminus{border:1px solid var(--border-color);border-radius:.25rem}.plusminus>.currentvalue{height:var(--unitsize);line-height:var(--unitsize)}.plusminus>button:active{color:var(--accent)}.currentvalue,.param-static{user-select:none}.param-static{border:1px solid var(--border-color);border-radius:.25rem;line-height:var(--unitsize);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
28
+ */@font-face{font-display:block;font-family:Font Awesome\ 5 Brands;font-style:normal;font-weight:400;src:url(assets/webfonts/fa-brands-400.woff2) format("woff2")}.fabrd:before{font-family:Font Awesome\ 5 Brands!important;font-weight:400}.fabf:before{font-family:Font Awesome\ 5 Free;padding-right:.25rem}#header{border-bottom:1px solid var(--border-color);display:flex;height:4rem;line-height:4rem;margin:0;padding:0 1rem;user-select:none}#header>div{align-items:center;display:flex;flex-direction:row;flex-grow:1}h3.root-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#header a{color:var(--foreground);padding-right:.5rem}#header h3{cursor:pointer}#header h3:active{color:var(--accent)}.header-title{align-items:center;display:flex;flex-direction:row;height:4rem;width:100%}h3{border-bottom:none;line-height:1.1;margin:0}.playerheader{color:#ed7d0e;text-align:center}.innercontent{height:100%;overflow:hidden}.d-none-small{display:flex}.d-flex-small{display:none}@media only screen and (max-width:800px) and (orientation:portrait){.innercontent{height:100%;overflow:hidden}.d-none-small{display:none!important}.d-flex-small{display:flex!important}.header-title h3{font-size:smaller}.overlay-title p{font-size:.8rem}#modal-container>.modal-content{font-size:1rem!important;min-width:287px!important}#notification-container .notification{max-width:90%;white-space:normal}.maincontainer{display:flex;flex-wrap:nowrap}.centercontainer.revsmall,.maincontainer{flex-direction:column}.centercontainer{align-content:flex-start}.centercontainer.revsmall .part-mid,.centercontainer.revsmall .part-right{flex-grow:0;flex-shrink:1;width:-webkit-fill-available}.centercontainer.revsmall .part-mid{flex-grow:1}.part-left{border-bottom:1px solid var(--border-color);flex-direction:row;height:auto!important;justify-content:center!important;width:100%!important}.launchcell{justify-content:center}.launchcell div{display:none}}footer{background-color:rgba(0,0,0,.1);padding:10px}#package-version{font-size:.875rem;font-weight:500;line-height:1;text-transform:uppercase}.nogrows{flex-grow:0!important}h3.grows.apptitle{font-weight:400;padding:0 .5rem}h3.grows.apptitle:before{color:var(--accent);content:"\f0da";font-family:Font Awesome\ 5 Free;padding-right:.35rem}.noselect{user-select:none}button.skinbutton{background:transparent;border:0;color:var(--foreground);margin:0 .5rem}.boxstuff{align-items:center;border-bottom:1px solid var(--border-color);display:flex;gap:.5rem;padding:.5rem}figure.app-logo{margin:0;padding:0}.localebutton{font-size:1.3rem}.app-logo{background-image:url(assets/images/nebular.color.100h.png);background-position:50%;background-repeat:no-repeat;background-size:contain;flex-shrink:0;height:3.5rem;margin-right:.25rem;width:10rem}@media only screen and (max-width:500px) and (orientation:portrait){.d-none-micro{display:none!important}.header-title .app-logo{background-image:url(assets/images/nebular.medallion.transparent..png)!important;width:4rem}.button>span,.header-title h3.root-title{display:none}.overlay-details-card{font-size:.75rem}}.launchcard{background:var(--background-item);border-radius:.25rem;cursor:pointer;flex-grow:1;gap:.5rem;padding:2rem;text-align:center;transition:all .25s ease-in-out;width:49%}.launchcard:active{transform:scale(.9)}.launchcard:hover{color:var(--accent)}.rootservices{border-bottom:1px solid var(--border-color)}.rootservices button{background:transparent;border:0;color:var(--text)}button.accent{color:var(--accent)}.overlay-service{min-height:0}.overlay-content{background:var(--background-lo);border-left:1px solid var(--border-color);box-sizing:border-box;gap:1rem;min-width:0;overflow-y:auto;padding:1rem}.overlay-title{align-items:center;border-bottom:1px solid var(--border-color);gap:.5rem;padding-bottom:1rem;user-select:none}.overlay-title p{color:var(--foreground-lo);margin:0;text-overflow:ellipsis;white-space:normal}.overlay-title.flexcol{align-items:normal}.overlay-content-alt{gap:1rem}.overlay-template-copy code,.overlay-template-copy h3,.overlay-title h2{margin:0}.overlay-template-copy code{color:var(--foreground-lo);font-size:.7rem;overflow:hidden;white-space:nowrap}.overlay-notice{margin:0}.overlay-template-browser{align-items:start;display:grid;flex-grow:1;gap:1rem;grid-template-columns:13rem minmax(0,1fr)}.overlay-template-grid{align-content:start;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(20rem,100%),1fr));min-width:0;width:100%}i.icon.fa-toggle-on{color:var(--green)}.overlay-category-list{align-self:start;background:var(--background);border:1px solid var(--border-color);border-radius:.5rem;gap:.25rem;padding:.5rem;position:sticky;top:0}.overlay-category{align-items:center;background:transparent;border:1px solid transparent;border-radius:.25rem;color:var(--foreground);cursor:pointer;font:inherit;font-variant:all-small-caps;gap:.65rem;padding:.7rem .65rem;text-align:left;width:100%}.overlay-category.active,.overlay-category:focus-visible,.overlay-category:hover{border-color:var(--accent);color:var(--accent);outline:0}.overlay-category.active{background:var(--background-item)}.overlay-category-count{background:var(--background-lo);border:1px solid var(--border-color);border-radius:1rem;color:var(--foreground-lo);font-size:.7rem;font-variant:normal;min-width:1.25rem;padding:.15rem .35rem;text-align:center}.overlay-details-grid .overlay-template-card{position:sticky}.overlay-template-card{top:0;user-select:none}a.extlink{color:var(--text-lo)}.clipbutton.absolute{right:1.5rem;top:1.5rem}.label,label{position:relative}article.overlay-template-card{align-self:start;min-width:0}article.clickable{cursor:pointer;transition:scale .25s ease-in-out}article.clickable:active{transform:scale(.95)}.overlay-template-copy.is-pending{background:var(--background-alt)}.overlay-create-preview,.overlay-curl-example,.overlay-details-card,.overlay-form,.overlay-template-card,.overlay-template-switcher,.overlay-values-editor{background:var(--background);border:1px solid var(--border-color);border-radius:.5rem;overflow:hidden}.overlay-template-card.clickable:hover{border-color:var(--accent)}.tip{border-top:1px solid var(--border-color);font-size:.8rem;padding:.5rem;text-align:center}.overlay-preview{aspect-ratio:16/9;background-color:var(--transparent-base);background-image:linear-gradient(45deg,var(--transparent-alt) 25%,transparent 25%),linear-gradient(-45deg,var(--transparent-alt) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--transparent-alt) 75%),linear-gradient(-45deg,transparent 75%,var(--transparent-alt) 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px;min-height:0;overflow:hidden;position:relative;width:100%}.overlay-preview iframe{border:0;height:1080px;inset:0;min-height:12rem;pointer-events:none;position:absolute;transform:scale(var(--preview-scale,1));transform-origin:top left;width:1920px;z-index:1}.overlay-preview-background{border:0;height:100%;inset:0;object-fit:cover;position:absolute;width:100%;z-index:0}dd.overlay-consumer{text-align:center}.overlay-preview-label{background:rgba(0,0,0,.72);bottom:.5rem;color:#fff;font:.7rem monospace;left:.5rem;padding:.3rem .45rem;position:absolute}.overlay-template-copy{align-items:center;border-bottom:1px solid var(--border-color);gap:.5rem;padding:1rem}.overlay-template-copy h3{margin-bottom:.25rem;text-transform:capitalize}.colorjoe-cell{border:1px solid var(--border-color)}.overlay-session-list{gap:.4rem}.overlay-session{align-items:center;background:var(--background);border:1px solid var(--border-color);border-radius:.25rem;color:var(--foreground);cursor:pointer;font:inherit;gap:1rem;overflow:hidden;padding:.9rem 1rem;position:relative;text-align:left;transition:all .5s linear;width:100%}.overlay-session:focus-visible,.overlay-session:hover{border-color:var(--accent);color:var(--accent);outline:0}.overlay-session.status-running:hover{border-color:var(--green);color:var(--green)}.overlay-session.busy{opacity:.55;pointer-events:none}.overlay-stop{flex-shrink:0}.overlay-session-name{display:flex;flex-direction:column;gap:.2rem}.overlay-session-name strong{font-family:monospace}.overlay-session-name span,.overlay-session-stat{color:var(--foreground-lo);font-size:.8rem}.overlay-consumer{border:1px solid;border-radius:1rem;font-size:.65rem;font-weight:700;padding:.25rem .6rem}.overlay-consumer.connected{color:var(--green)}.overlay-consumer.waiting{color:var(--accent)}.overlay-create-grid,.overlay-details-grid{display:grid;flex-grow:1;gap:1rem;grid-template-columns:minmax(20rem,.8fr) minmax(24rem,1.2fr)}.overlay-create-grid{margin-bottom:1rem}.overlay-create-preview,.overlay-details-card,.overlay-form,.overlay-template-switcher,.overlay-values-editor{box-sizing:border-box;gap:1rem;padding:1rem}.overlay-form .label{overflow:hidden;text-overflow:ellipsis}.overlay-form input,.overlay-form select{background:var(--inputs);border:1px solid var(--border-color);border-radius:.25rem;box-sizing:border-box;color:var(--foreground);font:inherit;padding:.7rem;width:100%}.overlay-form input:focus,.overlay-form select:focus{border-color:var(--accent);outline:0}.overlay-dimensions{display:grid;gap:.75rem;grid-template-columns:repeat(3,1fr)}.overlay-form-actions{gap:.5rem;justify-content:flex-end}.overlay-values-editor{border:0;border-radius:0;border-top:1px solid var(--border-color);grid-column:1/-1;padding:1rem 0}.overlay-values-title{align-items:center;border-bottom:1px solid var(--border-color);gap:.75rem;margin-bottom:.25rem;padding-bottom:.5rem;user-select:none}.overlay-title h2,.overlay-values-title h3{text-transform:capitalize}.overlay-values-title h3,.overlay-values-title p{margin:0}.overlay-values-title p{color:var(--foreground-lo);font-size:.85rem;margin-top:.3rem}.overlay-values-status{border:1px solid;border-radius:1rem;font-size:.65rem;font-weight:700;padding:.25rem .6rem;white-space:nowrap}.overlay-values-status.valid{color:var(--green)}.overlay-values-status.invalid{color:var(--red)}.overlay-values-fields{display:flex;flex-wrap:wrap}.overlay-values-field.big{width:100%}.overlay-values-field.small{flex-grow:0;min-width:auto;width:6rem}.overlay-values-field{display:flex;flex-direction:column;flex-grow:1;gap:.25rem;min-width:6rem;overflow:hidden;padding:.25rem}.overlay-values-set{background:var(--background-alt);border:1px solid var(--border-color);padding:.5rem}.notice.instructions{background:transparent;font-size:.75rem;margin:1rem}.overlay-details-grid .overlay-values-editor{border:1px solid var(--border-color);border-radius:.25rem;grid-column:auto;padding:1rem}.overlay-values-field input{background:var(--inputs);border:1px solid var(--border-color);border-radius:.25rem;box-sizing:border-box;color:var(--foreground);height:var(--unitsize);padding:.7rem;width:100%}.overlay-values-field input:focus{border-color:var(--accent);outline:0}.overlay-values-error,.overlay-values-result{font-size:.8rem}.overlay-values-error{color:#ff8d8d}.overlay-values-result{color:var(--foreground-lo);overflow-wrap:anywhere}.overlay-values-empty{color:var(--foreground-lo);padding:.75rem 0}.overlay-create-preview h3,.overlay-details-card h3{margin:0 0 1rem}.overlay-create-preview .overlay-preview{min-height:22rem}.overlay-details-card dl{display:grid;gap:.75rem 1rem;grid-template-columns:auto 1fr;margin:0}.overlay-details-card dt{color:var(--foreground-lo)}.overlay-details-card dd{font-weight:700;margin:0;white-space:normal;word-break:break-word}.overlay-code{color:var(--green);display:block;overflow-wrap:anywhere}.overlay-template-switcher h3,.overlay-template-switcher p{margin:0}.overlay-template-switcher p{color:var(--foreground-lo);margin-top:.3rem}.overlay-switch-options{gap:.4rem;max-height:30rem;overflow-y:auto}.overlay-template-switcher{grid-column:2;grid-row:1/span 2;min-height:100%}.overlay-switch-option{align-items:center;background:var(--background-item);border:1px solid transparent;border-radius:.25rem;color:var(--foreground);cursor:pointer;font:inherit;gap:.75rem;padding:.65rem .75rem;text-align:left;width:100%}.overlay-switch-option.selected,.overlay-switch-option:focus-visible,.overlay-switch-option:hover{border-color:var(--accent);outline:0}.overlay-switch-option.selected{background:color-mix(in srgb,var(--accent) 12%,var(--background-item))}.overlay-switch-option>div{display:flex;flex-direction:column;min-width:0}.overlay-switch-option code{color:var(--foreground-lo);font-size:.72rem;overflow:hidden;text-overflow:ellipsis}.overlay-active-template{border:1px solid var(--green);border-radius:1rem;color:var(--green);font-size:.6rem;font-weight:700;padding:.2rem .45rem}.overlay-switch-error{background:rgba(190,20,20,.16);border:1px solid var(--red);border-radius:.25rem;color:var(--red);padding:.6rem .75rem}.overlay-switch-actions{justify-content:flex-end;margin-top:auto}.overlay-curl-example{grid-column:1/-1;margin-bottom:.5rem;padding:1rem}.overlay-curl-title{align-items:center;gap:1rem;word-break:break-all}.overlay-curl-title h3,.overlay-curl-title p{margin:0;word-break:break-word}.overlay-template-card .overlay-preview{flex-grow:0}.overlay-curl-title .button{flex-shrink:0}.overlay-curl-title p{color:var(--foreground-lo);margin-top:.3rem}.overlay-curl-example pre{background:#000;border:1px solid var(--border-color);border-radius:.25rem;color:#8de6a8;font-size:.6rem;margin:1rem 0 0;overflow-x:auto;padding:.5rem;white-space:pre-wrap;word-break:break-all}.overlay-content-sub{margin:1rem}@media (max-width:1000px){.overlay-category-list{align-self:stretch;flex-direction:row;flex-wrap:wrap;font-size:.7rem;height:auto;justify-content:center;overflow:visible;position:static}.overlay-category{flex:0 0 auto;width:auto}.overlay-template-browser{align-content:flex-start;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}.overlay-create-grid,.overlay-details-grid{grid-template-columns:1fr}.overlay-session-stat{display:none}.overlay-template-switcher{grid-column:auto;grid-row:auto}}.selector .toolbar{background:var(--background-alt);border:1px solid var(--border-color);border-radius:.5rem;height:3rem;justify-content:space-evenly;margin-bottom:.5rem}.selector .toolbar button.accent{color:var(--accent)}.currentval{margin:1rem -.5rem}.selector .toolbar button{background:transparent;border:0;color:var(--text)}.overlay-template-switcher .overlay-category-list{width:100%}.overlay-session:before{background:var(--border-color);content:" ";height:100%;left:0;position:absolute;width:.25rem}.overlay-session.status-idle:before{background:var(--accent)}.overlay-session.status-running:before{background:var(--green)}.label>span,label>span{color:var(--foreground-lo);font-variant:all-petite-caps;white-space:nowrap}.overlay-visible.isvisible{color:var(--green)}.overlay-visible.ishidden{color:var(--red-grad)}.overlay-template-copy .button.isvisible{background:var(--green-grad)}.overlay-template-copy .button.ishidden{background:var(--red-grad)}.overlay-template-card.ishidden .overlay-preview{opacity:.2}.colorjoe-cell .inset{height:100%}.colorjoe-cell{border-radius:.25rem;overflow:hidden}.bar-services{transition:all .5s linear}.bar-services.mini{width:2.54rem}.bar-services.mini .launchcell>div{display:none}.updatedAt{align-content:center;border:1px solid var(--border-color);border-radius:10rem;cursor:help;font-size:.7rem;padding:0 .5rem}.param-choose,.param-multi{background:var(--background-lo)}.static.select{line-height:var(--unitsize-small);padding:0 .5rem}.status-idle i{color:var(--accent)}.status-running i{color:var(--green)}.currentval{font-size:.6rem}.maincontainer .cardie{border:none!important}:root{--window-background-hi:var(--background-alt);--mithril-range-scale:var(--background-alt);--transparent-base:#fff;--transparent-alt:#d7d7d7;--text-over-accent:#fff;--buttons:linear-gradient(0deg,gray,#aaa);--red:red;--green:#080;--yellow:#990;--red-alt:#b00;--green-alt:#0a0;--yellow-alt:#bb0;--accent:#f90;--accent-alt:#fb0;--red-grad:linear-gradient(0deg,var(--red),var(--red-alt));--green-grad:linear-gradient(0deg,var(--green),var(--green-alt));--yellow-grad:linear-gradient(0deg,var(--yellow),var(--yellow-alt));--accent-grad:linear-gradient(0deg,var(--accent),var(--accent-alt))}.skin-light{--accent-hover:#444;--background-legend:gray;--background:#fff;--background-lo:#f9f9f9;--background-mid:#eee;--background-item:#fff;--background-alt:#ffa;--foreground:#000;--foreground-lo:#444;--border-color:#ccc;--shadow-color:#000;--text:var(--foreground);--inputs:var(--background-lo);--gradient-one:#333;--gradient-two:#555;--transparent-base:#fff;--transparent-alt:#d7d7d7}@media (prefers-color-scheme:light){:root{--accent-hover:#444;--background-legend:gray;--background:#fff;--background-lo:#f9f9f9;--background-mid:#eee;--background-item:#fff;--background-alt:#ffa;--foreground:#000;--foreground-lo:#444;--border-color:#ccc;--shadow-color:#000;--text:var(--foreground);--text-over-accent:#fff;--inputs:var(--background-lo);--gradient-one:#333;--gradient-two:#555;--transparent-base:#fff;--transparent-alt:#d7d7d7}}.skin-dark{--accent-hover:#444;--background-legend:gray;--background:#111;--background-lo:#1a1a1a;--background-mid:#222;--background-item:#122230;--background-alt:#2a2a2a;--foreground:#fff;--foreground-lo:#aaa;--border-color:hsla(0,0%,100%,.12);--shadow-color:#000;--text:var(--foreground);--inputs:var(--background-lo);--gradient-one:#333;--gradient-two:#555;--transparent-base:#333;--transparent-alt:#444}.skin-dark .app-logo{background-image:url(assets/images/nebular.color.white.100h.png)!important}.skin-light .app-logo{background-image:url(assets/images/nebular.color.100h.png)!important}.app-logo.loginversion{margin-top:1rem}@media (prefers-color-scheme:dark){:root{--accent-hover:#444;--background-legend:gray;--background:#111;--background-lo:#1a1a1a;--background-mid:#222;--background-item:#122230;--background-alt:#2a2a2a;--foreground:#fff;--foreground-lo:#aaa;--border-color:hsla(0,0%,100%,.12);--shadow-color:#000;--text:var(--foreground);--inputs:var(--background-lo);--transparent-base:#333;--transparent-alt:#444}.app-logo{background-image:url(assets/images/nebular.color.white.100h.png)!important}}button.param-button{background:var(--buttons);border-radius:.25rem;color:var(--text-over-accent);font-weight:700;height:var(--unitsize)}select.param-select{background:var(--inputs);border:1px solid var(--border-color);border-radius:.25rem;box-sizing:border-box;color:var(--foreground);font:inherit;height:var(--unitsize)}.param-input:focus,.param-select:focus{border-color:var(--accent);outline:0}.param-field{text-align:center}.param-field,.plusminus{border:1px solid var(--border-color);border-radius:.25rem}.plusminus>.currentvalue{height:var(--unitsize);line-height:var(--unitsize)}.plusminus>button:active{color:var(--accent)}.currentvalue,.param-static{user-select:none}.param-static{border:1px solid var(--border-color);border-radius:.25rem;line-height:var(--unitsize);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
package/skill/nebular-overlay/references/manifest.md CHANGED
@@ -1,12 +1,12 @@
1
1
  # Manifest contract
2
2
 
3
- Each template has a `manifest.json` object with an optional concise `instructions` string and a required `meta` object.
3
+ Each template has a `manifest.json` object with an optional concise `instructions` string and a required `meta` object, that, besides defining the template parameters, also contains layout instructions so the editor automatically renders a responsive dialog to edit the values. The editor uses a Bootstrap layout container, and the optional parameter `size` in each field can define the desired column size (1...12), or `break:true` and start a new row for the next one.
4
4
 
5
5
  ```json
6
6
  {
7
7
  "instructions": "Configure the title before going live. Update the score during play.",
8
8
  "meta": {
9
- "content/title": {"type": "string", "phase": "edit", "label": "Title", "hint": "Enter title", "default": "Championship Final"},
9
+ "content/title": {"type": "string", "phase": "edit", "label": "Title", "hint": "Enter title", "default": "Championship Final", "size": 12},
10
10
  "game/score": {"type": "number", "phase": "play", "label": "Score", "min": 0, "default": 0}
11
11
  }
12
12
  }
@@ -16,17 +16,16 @@ Slash-separated keys become nested update values: `content/title` arrives as `de
16
16
 
17
17
  ## Shared fields
18
18
 
19
- - `type`: required control type.
20
- - `label`: short operator-facing caption. Buttons may use `text` instead.
21
- - `default`: initial Studio value. It must agree with the initial HTML presentation.
22
- - `phase`: optional `edit` or `play`. Omit only when a field genuinely belongs in both modes.
19
+ - `type` (string) required control type.
20
+ - `label` (string) short operator-facing caption. Buttons may use `text` instead.
21
+ - `default` (variant) initial Studio value. It must agree with the initial HTML presentation.
22
+ - `phase` (string) optional `edit` or `play`. Omit only when a field genuinely belongs in both modes.
23
23
  - `when`: optional conditional visibility rule in the form `{"key": "path", "is": value}`. The control is shown only while the current value at `key` strictly equals `is`.
24
- - `hint`: short placeholder for `string` and `date`; descriptive hover help for other controls.
25
- - `readonly`: displays the value without allowing edits.
26
- - `source`: makes this control a UI alias for another canonical value path. The alias path is not persisted.
27
- - `size`: optional editor column width; `break` starts a new editor row.
28
- - `container`: `"big"` or `"small"` editor-space preference.
29
- - `class`: optional Studio presentation class; use only when an established repository convention requires it.
24
+ - `hint` (string) optional short placeholder for `string` and `date`; descriptive hover help for other controls.
25
+ - `readonly` (boolean) displays the value without allowing edits.
26
+ - `source` (string) makes this control a UI alias for another canonical value path. The alias path is not persisted.
27
+ - `size` (number) optional bootstrap column width (1...12, 12 = full width); defaults: {set: 12, multi: 12, choose: 6, number: 3, rest: undefined (responsive)}; In any case controls will grow to fill the available row.
28
+ - `break` (boolean) starts a new editor row for the next control. Use it to further logically layout the control window. Favour `break` to delimite logical groups, it works very well with responsive resizes.
30
29
 
31
30
  ## Conditional controls
32
31
 
@@ -66,7 +65,7 @@ Every control type supports `when`. Use it to keep a crowded Edit or Play panel
66
65
  - `is` is compared with strict equality, so its JSON type must match the controlling value. For example, `1` and `"1"` are different.
67
66
  - `phase` and `when` are cumulative: a control is visible only when both filters pass.
68
67
  - Conditional visibility affects only the generated editor. A hidden value remains initialized, persisted, and available to the template; hiding it never clears or resets it.
69
- - Prefer one clear controlling field such as `screen` over chains of interdependent conditions. `when` supports one equality test, not compound expressions.
68
+ - Prefer one clear controlling field such as `screen` over chains of interdependent conditions. `when` supports one equality test, not compound expressions. It's typically used with a `choose` value to select groups of controls to be visible.
70
69
  - In a nested `set` record, `key` refers to a sibling field in that record's nested `meta`.
71
70
 
72
71
  ## Types
@@ -99,7 +98,7 @@ Keep the default's type consistent with the choice values.
99
98
 
100
99
  ### `multi`
101
100
 
102
- A multiple-choice grid. `choose` is an array and `default` is an array. Useful options are `cols`, `rows`, `responsive`, `minCellWidth`, and `container`.
101
+ A multiple-choice grid. `choose` is an array and `default` is an array. Useful options are `cols`, `rows`, `responsive`, `size`.
103
102
 
104
103
  ### `set`
105
104
 
package/skill/nebular-overlay/references/runtime-and-design.md CHANGED
@@ -1,23 +1,29 @@
1
1
  # Runtime and design guidance
2
2
 
3
- ## Page baseline
3
+ ## Baseline considerations for page blended over video
4
4
 
5
- Use a transparent, fixed render surface:
5
+ Overlays are blended in YUV over a video signal and that imposes legibility limitations.
6
+
7
+ Design primarily for 1920×1080. Use percentages, viewport units, grids, flex layout, and `clamp()` where they improve scaling. Keep essential graphics inside sensible title-safe margins unless the design intentionally touches an edge.
8
+
9
+ - Use a transparent, fixed render surface:
6
10
 
7
11
  ```css
8
12
  * { box-sizing: border-box }
9
13
  html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: transparent; }
10
14
  ```
11
15
 
12
- Design primarily for 1920×1080. Use percentages, viewport units, grids, flex layout, and `clamp()` where they improve scaling. Keep essential graphics inside sensible title-safe margins unless the design intentionally touches an edge.
13
-
14
- Broadcast copy must survive motion and detailed video beneath it. Prefer:
16
+ Broadcast blend must survive motion and detailed video beneath it. Prefer:
15
17
 
16
18
  - large type for the primary value (roughly 40–70 px at 1080p, often larger for scores or countdowns);
17
- - high contrast, restrained shadows, translucent panels, or local backplates;
19
+ - high contrast, restrained shadows, translucent panels, or local backplates. Remember there's a video behind and it's what is important here, unless the operator asks you for a big opaque prominent table (ie hiscores, ...). If an opaque backplate is to be used, favour locations like bottom quarters or halves so the top part of the video is visible.
18
20
  - short line lengths and deliberate truncation/wrapping behavior;
19
21
  - clear hierarchy rather than many equally prominent elements;
20
22
  - tabular numerals for clocks and scores (`font-variant-numeric: tabular-nums`).
23
+ - Avoid too much text, except maybe in tickers or chats, but even there a reasonable limit would be 3 lines
24
+ - consider usage of icons or abbreviatures when better illustrate the concept rather than a long word
25
+ - Avoid using fonts smaller than 12px, they are illegible, there may be rare exceptions in headers, but dont abuse it. Absolute minimum is 10px.
26
+ - Avoid very light fonts, they can be blended out by FFMPEG.
21
27
 
22
28
  ## Incremental updates
23
29
 
package/templates/all/broadcast/newsticker/manifest.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "meta": {
4
4
  "content/brand": {"type": "string", "phase": "edit", "label": "Brand text", "hint": "US OPEN", "default": "US OPEN"},
5
5
  "news": {
6
- "type": "set", "phase": "edit", "label": "News items", "hint": "Headlines shown in their playback order", "container": "big", "max": 30,
6
+ "type": "set", "phase": "edit", "label": "News items", "hint": "Headlines shown in their playback order", "max": 30,
7
7
  "default": [
8
8
  {"topic": "MEN'S DOUBLES", "tagline": "Carlos Alcaraz defeats Tommy Paul in memorable performance, 6-4 6–4 6–2"},
9
9
  {"topic": "MEN'S DOUBLES", "tagline": "The quarter-final line-up is now complete in New York"},
package/templates/all/broadcast/newsticker-frames/manifest.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "instructions": "Build the running news list in playback order. Each item remains on screen for the selected interval; its headline slides upward to the next item, while the topic changes only when the next item belongs to a different topic.",
3
3
  "meta": {
4
4
  "news": {
5
- "type": "set", "phase": "edit", "label": "News items", "hint": "Headlines shown in their playback order", "container": "big", "max": 30,
5
+ "type": "set", "phase": "edit", "label": "News items", "hint": "Headlines shown in their playback order", "max": 30,
6
6
  "default": [
7
7
  {"topic": "MEN'S DOUBLES", "tagline": "Carlos Alcaraz defeats Tommy Paul in memorable performance, 6-4 6–4 6–2"},
8
8
  {"topic": "MEN'S DOUBLES", "tagline": "The quarter-final line-up is now complete in New York"},
package/templates/all/broadcast/weather/manifest.json CHANGED
@@ -68,7 +68,6 @@
68
68
  "forecast": {
69
69
  "type": "set",
70
70
  "phase": "play",
71
- "container": "big",
72
71
  "label": "Forecast", "hint": "Forecast periods displayed alongside current conditions",
73
72
  "max": 3,
74
73
  "default": [
package/templates/all/engagement/call-to-action/manifest.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "meta": {
4
4
  "content/eyebrow": {"type": "string", "phase": "edit", "label": "Eyebrow", "hint": "Enter short label", "default": "VIEWER GOAL"},
5
5
  "content/title": {"type": "string", "phase": "edit", "label": "Title", "hint": "Enter title", "default": "Help us reach 10,000 followers"},
6
- "content/subtitle": {"type": "string", "phase": "edit", "label": "Description", "hint": "Enter description", "default": "Follow the channel and join the Nebular community."},
6
+ "content/subtitle": {"type": "string", "phase": "edit", "label": "Description", "hint": "Enter description", "default": "Follow the channel and join the Nebular community.", "size": 12},
7
7
  "content/action": {"type": "string", "phase": "edit", "label": "Action", "hint": "e.g. FOLLOW NOW", "default": "FOLLOW NOW"},
8
8
  "goal/playTarget": {"type": "number", "phase": "play", "label": "Target", "hint": "Goal currently used by the live progress display", "source": "goal/target", "readonly": true},
9
9
  "goal/current": {"type": "number", "phase": "play", "label": "Current", "hint": "Enter current value", "min": 0, "default": 7240},
package/templates/all/gambling/bingo/manifest.json CHANGED
@@ -23,7 +23,6 @@
23
23
  "type": "multi",
24
24
  "phase": "play",
25
25
  "label": "Called numbers", "hint": "Numbers called so far; the latest selection is highlighted",
26
- "container": "big",
27
26
  "choose": [
28
27
  1,
29
28
  2,
package/templates/all/gambling/keno/manifest.json CHANGED
@@ -16,7 +16,6 @@
16
16
  "draw/numbers": {
17
17
  "type": "multi",
18
18
  "phase": "play",
19
- "container": "big",
20
19
  "label": "Drawn numbers", "hint": "Numbers selected in the current draw",
21
20
  "choose": [
22
21
  1,
package/templates/all/gambling/lottery/manifest.json CHANGED
@@ -16,7 +16,6 @@
16
16
  "draw/numbers": {
17
17
  "type": "multi",
18
18
  "phase": "play",
19
- "container": "big",
20
19
  "label": "Drawn numbers", "hint": "Numbers selected in the current draw",
21
20
  "choose": [
22
21
  1,
package/templates/all/gambling/prize-wall/manifest.json CHANGED
@@ -11,7 +11,6 @@
11
11
  "type": "set",
12
12
  "phase": "edit",
13
13
  "label": "Prizes", "hint": "Assign prizes to positions on the wall",
14
- "container": "big",
15
14
  "max": 30,
16
15
  "default": [
17
16
  {"position": 2, "prize": "Buick Limousine", "icon": "car"},
@@ -48,7 +47,6 @@
48
47
  "type": "multi",
49
48
  "phase": "play",
50
49
  "label": "Opened doors", "hint": "Doors that have already been opened",
51
- "container": "big",
52
50
  "choose": [
53
51
  1,
54
52
  2,
package/templates/all/gambling/roulette/manifest.json CHANGED
@@ -10,7 +10,6 @@
10
10
  "game/history": {
11
11
  "type": "multi",
12
12
  "phase": "play",
13
- "container": "big",
14
13
  "label": "Numbers hit", "hint": "Winning numbers in the order they were called",
15
14
  "choose": [
16
15
  0,
package/templates/all/gaming/battleship/manifest.json CHANGED
@@ -22,7 +22,6 @@
22
22
  "board/fleet": {
23
23
  "type": "multi",
24
24
  "phase": "edit",
25
- "container": "big",
26
25
  "label": "Fleet positions", "hint": "Every coordinate occupied by the player's ships",
27
26
  "choose": [
28
27
  "A1",
@@ -155,7 +154,6 @@
155
154
  "board/shots": {
156
155
  "type": "multi",
157
156
  "phase": "play",
158
- "container": "big",
159
157
  "label": "Player shots", "hint": "Coordinates fired upon by the player",
160
158
  "choose": [
161
159
  "A1",
package/templates/all/trivia/audience-poll/manifest.json CHANGED
@@ -2,12 +2,11 @@
2
2
  "instructions": "Build up to four poll options and enter their raw vote counts; percentages are calculated automatically. Keep Display on question while voting, then select results and press Update to reveal the animated outcome.",
3
3
  "meta": {
4
4
  "content/eyebrow": {"type": "string", "phase": "edit", "label": "Label", "hint": "Enter short label", "default": "AUDIENCE POLL"},
5
- "content/question": {"type": "string", "phase": "edit", "label": "Question", "hint": "Enter question", "container": "big", "default": "Which destination should we visit next?"},
5
+ "content/question": {"type": "string", "phase": "edit", "label": "Question", "hint": "Enter question", "size": 12, "default": "Which destination should we visit next?"},
6
6
  "options": {
7
7
  "type": "set",
8
8
  "label": "Poll options", "hint": "Answer choices and their current raw vote counts",
9
9
  "max": 4,
10
- "container": "big",
11
10
  "default": [
12
11
  {"label": "Tokyo", "votes": 420},
13
12
  {"label": "New York", "votes": 310},
package/templates/all/trivia/classic-quiz/manifest.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "instructions": "Enter the category, question and four possible answers, then select the correct answer. Publish in question mode first; switch Display to answer and press Update when it is time to reveal the result.",
3
3
  "meta": {
4
4
  "content/category": {"type": "string", "phase": "edit", "label": "Category", "hint": "Enter category", "default": "GENERAL KNOWLEDGE"},
5
- "content/question": {"type": "string", "phase": "edit", "label": "Question", "hint": "Enter question", "container": "big", "default": "Which planet is known as the Red Planet?"},
5
+ "content/question": {"type": "string", "phase": "edit", "label": "Question", "hint": "Enter question", "size": 12, "default": "Which planet is known as the Red Planet?"},
6
6
  "answers/a": {"type": "string", "phase": "edit", "label": "Answer A", "hint": "Enter answer A", "default": "Venus"},
7
7
  "answers/b": {"type": "string", "phase": "edit", "label": "Answer B", "hint": "Enter answer B", "default": "Mars"},
8
8
  "answers/c": {"type": "string", "phase": "edit", "label": "Answer C", "hint": "Enter answer C", "default": "Jupiter"},
package/templates/all/trivia/lightning-round/manifest.json CHANGED
@@ -7,7 +7,6 @@
7
7
  "phase": "edit",
8
8
  "label": "Questions", "hint": "Ordered question-and-answer cards used by the automatic loop",
9
9
  "max": 30,
10
- "container": "big",
11
10
  "default": [
12
11
  {"question": "Capital of Japan?", "answer": "Tokyo"},
13
12
  {"question": "Fastest land animal?", "answer": "Cheetah"},
package/templates/all/trivia/pasapalabra/manifest.json CHANGED
@@ -5,7 +5,6 @@
5
5
  "type": "number",
6
6
  "phase": "edit",
7
7
  "label": "Time", "hint": "Enter seconds",
8
- "container": "small",
9
8
  "min": 0,
10
9
  "max": 600,
11
10
  "default": 60
@@ -23,7 +22,6 @@
23
22
  "game/correct": {
24
23
  "type": "multi",
25
24
  "phase": "play",
26
- "container": "big",
27
25
  "label": "Correct answers", "hint": "Letters answered correctly",
28
26
  "choose": [
29
27
  "A", "B", "C", "D", "E", "F", "G", "H", "I",
@@ -39,7 +37,6 @@
39
37
  "game/failed": {
40
38
  "type": "multi",
41
39
  "phase": "play",
42
- "container": "big",
43
40
  "label": "Failed answers", "hint": "Letters answered incorrectly",
44
41
  "choose": [
45
42
  "A", "B", "C", "D", "E", "F", "G", "H", "I",
package/templates/all/trivia/quiz-deck/manifest.json CHANGED
@@ -7,7 +7,6 @@
7
7
  "phase": "edit",
8
8
  "label": "Question deck", "hint": "Ordered collection of questions and possible answers",
9
9
  "max": 20,
10
- "container": "big",
11
10
  "default": [
12
11
  {"question": "What is the largest ocean on Earth?", "answer": "The Pacific Ocean"},
13
12
  {"question": "How many sides does a dodecagon have?", "answer": "12"},
package/templates/all/trivia/true-or-false/manifest.json CHANGED
@@ -6,7 +6,6 @@
6
6
  "phase": "edit",
7
7
  "label": "Questions", "hint": "Statements and their true-or-false answers",
8
8
  "max": 30,
9
- "container": "big",
10
9
  "default": [
11
10
  {"category": "SCIENCE", "statement": "Lightning never strikes the same place twice.", "correct": "false", "explanation": "Lightning can strike the same place repeatedly."},
12
11
  {"category": "GEOGRAPHY", "statement": "The Great Wall of China is visible from the Moon with the naked eye.", "correct": "false", "explanation": "It is far too narrow to be distinguished from the Moon."},
package/templates/basic/broadcast/newsticker/manifest.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "meta": {
4
4
  "content/brand": {"type": "string", "phase": "edit", "label": "Brand text", "hint": "US OPEN", "default": "US OPEN"},
5
5
  "news": {
6
- "type": "set", "phase": "edit", "label": "News items", "hint": "Headlines shown in their playback order", "container": "big", "max": 30,
6
+ "type": "set", "phase": "edit", "label": "News items", "hint": "Headlines shown in their playback order", "max": 30,
7
7
  "default": [
8
8
  {"topic": "MEN'S DOUBLES", "tagline": "Carlos Alcaraz defeats Tommy Paul in memorable performance, 6-4 6–4 6–2"},
9
9
  {"topic": "MEN'S DOUBLES", "tagline": "The quarter-final line-up is now complete in New York"},
package/templates/basic/broadcast/weather/manifest.json CHANGED
@@ -68,7 +68,6 @@
68
68
  "forecast": {
69
69
  "type": "set",
70
70
  "phase": "play",
71
- "container": "big",
72
71
  "label": "Forecast", "hint": "Forecast periods displayed alongside current conditions",
73
72
  "max": 3,
74
73
  "default": [
package/templates/basic/engagement/call-to-action/manifest.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "meta": {
4
4
  "content/eyebrow": {"type": "string", "phase": "edit", "label": "Eyebrow", "hint": "Enter short label", "default": "VIEWER GOAL"},
5
5
  "content/title": {"type": "string", "phase": "edit", "label": "Title", "hint": "Enter title", "default": "Help us reach 10,000 followers"},
6
- "content/subtitle": {"type": "string", "phase": "edit", "label": "Description", "hint": "Enter description", "default": "Follow the channel and join the Nebular community."},
6
+ "content/subtitle": {"type": "string", "phase": "edit", "label": "Description", "hint": "Enter description", "default": "Follow the channel and join the Nebular community.", "size": 12},
7
7
  "content/action": {"type": "string", "phase": "edit", "label": "Action", "hint": "e.g. FOLLOW NOW", "default": "FOLLOW NOW"},
8
8
  "goal/playTarget": {"type": "number", "phase": "play", "label": "Target", "hint": "Goal currently used by the live progress display", "source": "goal/target", "readonly": true},
9
9
  "goal/current": {"type": "number", "phase": "play", "label": "Current", "hint": "Enter current value", "min": 0, "default": 7240},
package/templates/games/gambling/bingo/manifest.json CHANGED
@@ -23,7 +23,6 @@
23
23
  "type": "multi",
24
24
  "phase": "play",
25
25
  "label": "Called numbers", "hint": "Numbers called so far; the latest selection is highlighted",
26
- "container": "big",
27
26
  "choose": [
28
27
  1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
29
28
  11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
package/templates/games/gambling/keno/manifest.json CHANGED
@@ -16,7 +16,6 @@
16
16
  "draw/numbers": {
17
17
  "type": "multi",
18
18
  "phase": "play",
19
- "container": "big",
20
19
  "label": "Drawn numbers", "hint": "Numbers selected in the current draw",
21
20
  "choose": [
22
21
  1,
package/templates/games/gambling/lottery/manifest.json CHANGED
@@ -16,7 +16,6 @@
16
16
  "draw/numbers": {
17
17
  "type": "multi",
18
18
  "phase": "play",
19
- "container": "big",
20
19
  "label": "Drawn numbers", "hint": "Numbers selected in the current draw",
21
20
  "choose": [
22
21
  1,
package/templates/games/gambling/prize-wall/manifest.json CHANGED
@@ -11,7 +11,6 @@
11
11
  "type": "set",
12
12
  "phase": "edit",
13
13
  "label": "Prizes", "hint": "Assign prizes to positions on the wall",
14
- "container": "big",
15
14
  "max": 30,
16
15
  "default": [
17
16
  {"position": 2, "prize": "Buick Limousine", "icon": "car"},
@@ -48,7 +47,6 @@
48
47
  "type": "multi",
49
48
  "phase": "play",
50
49
  "label": "Opened doors", "hint": "Doors that have already been opened",
51
- "container": "big",
52
50
  "choose": [
53
51
  1,
54
52
  2,
package/templates/games/gambling/roulette/manifest.json CHANGED
@@ -10,7 +10,6 @@
10
10
  "game/history": {
11
11
  "type": "multi",
12
12
  "phase": "play",
13
- "container": "big",
14
13
  "label": "Numbers hit", "hint": "Winning numbers in the order they were called",
15
14
  "choose": [
16
15
  0,
package/templates/games/gaming/battleship/manifest.json CHANGED
@@ -22,7 +22,6 @@
22
22
  "board/fleet": {
23
23
  "type": "multi",
24
24
  "phase": "edit",
25
- "container": "big",
26
25
  "label": "Fleet positions", "hint": "Every coordinate occupied by the player's ships",
27
26
  "choose": [
28
27
  "A1",
@@ -155,7 +154,6 @@
155
154
  "board/shots": {
156
155
  "type": "multi",
157
156
  "phase": "play",
158
- "container": "big",
159
157
  "label": "Player shots", "hint": "Coordinates fired upon by the player",
160
158
  "choose": [
161
159
  "A1",
package/templates/games/trivia/audience-poll/manifest.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "instructions": "Build up to four poll options and enter their raw vote counts; percentages are calculated automatically. Keep Display on question while voting, then select results and press Update to reveal the animated outcome.",
3
3
  "meta": {
4
4
  "content/eyebrow": {"type": "string", "phase": "edit", "label": "Label", "hint": "Enter short label", "default": "AUDIENCE POLL"},
5
- "content/question": {"type": "string", "phase": "edit", "label": "Question", "hint": "Enter question", "container": "big", "default": "Which destination should we visit next?"},
5
+ "content/question": {"type": "string", "phase": "edit", "label": "Question", "hint": "Enter question", "default": "Which destination should we visit next?"},
6
6
  "options": {
7
7
  "type": "set",
8
8
  "label": "Poll options", "hint": "Answer choices and their current raw vote counts",
package/templates/games/trivia/classic-quiz/manifest.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "instructions": "Enter the category, question and four possible answers, then select the correct answer. Publish in question mode first; switch Display to answer and press Update when it is time to reveal the result.",
3
3
  "meta": {
4
4
  "content/category": {"type": "string", "phase": "edit", "label": "Category", "hint": "Enter category", "default": "GENERAL KNOWLEDGE"},
5
- "content/question": {"type": "string", "phase": "edit", "label": "Question", "hint": "Enter question", "container": "big", "default": "Which planet is known as the Red Planet?"},
5
+ "content/question": {"type": "string", "phase": "edit", "label": "Question", "hint": "Enter question", "default": "Which planet is known as the Red Planet?"},
6
6
  "answers/a": {"type": "string", "phase": "edit", "label": "Answer A", "hint": "Enter answer A", "default": "Venus"},
7
7
  "answers/b": {"type": "string", "phase": "edit", "label": "Answer B", "hint": "Enter answer B", "default": "Mars"},
8
8
  "answers/c": {"type": "string", "phase": "edit", "label": "Answer C", "hint": "Enter answer C", "default": "Jupiter"},
package/templates/games/trivia/lightning-round/manifest.json CHANGED
@@ -7,7 +7,6 @@
7
7
  "phase": "edit",
8
8
  "label": "Questions", "hint": "Ordered question-and-answer cards used by the automatic loop",
9
9
  "max": 30,
10
- "container": "big",
11
10
  "default": [
12
11
  {"question": "Capital of Japan?", "answer": "Tokyo"},
13
12
  {"question": "Fastest land animal?", "answer": "Cheetah"},
package/templates/games/trivia/pasapalabra/manifest.json CHANGED
@@ -5,7 +5,6 @@
5
5
  "type": "number",
6
6
  "phase": "edit",
7
7
  "label": "Time", "hint": "Enter seconds",
8
- "container": "small",
9
8
  "min": 0,
10
9
  "max": 600,
11
10
  "default": 60
@@ -23,7 +22,6 @@
23
22
  "game/correct": {
24
23
  "type": "multi",
25
24
  "phase": "play",
26
- "container": "big",
27
25
  "label": "Correct answers", "hint": "Letters answered correctly",
28
26
  "choose": [
29
27
  "A", "B", "C", "D", "E", "F", "G", "H", "I",
@@ -39,7 +37,6 @@
39
37
  "game/failed": {
40
38
  "type": "multi",
41
39
  "phase": "play",
42
- "container": "big",
43
40
  "label": "Failed answers", "hint": "Letters answered incorrectly",
44
41
  "choose": [
45
42
  "A", "B", "C", "D", "E", "F", "G", "H", "I",
package/templates/games/trivia/quiz-deck/manifest.json CHANGED
@@ -7,7 +7,6 @@
7
7
  "phase": "edit",
8
8
  "label": "Question deck", "hint": "Ordered collection of questions and possible answers",
9
9
  "max": 20,
10
- "container": "big",
11
10
  "default": [
12
11
  {"question": "What is the largest ocean on Earth?", "answer": "The Pacific Ocean"},
13
12
  {"question": "How many sides does a dodecagon have?", "answer": "12"},
package/templates/games/trivia/true-or-false/manifest.json CHANGED
@@ -6,7 +6,6 @@
6
6
  "phase": "edit",
7
7
  "label": "Questions", "hint": "Statements and their true-or-false answers",
8
8
  "max": 30,
9
- "container": "big",
10
9
  "default": [
11
10
  {"category": "SCIENCE", "statement": "Lightning never strikes the same place twice.", "correct": "false", "explanation": "Lightning can strike the same place repeatedly."},
12
11
  {"category": "GEOGRAPHY", "statement": "The Great Wall of China is visible from the Moon with the naked eye.", "correct": "false", "explanation": "It is far too narrow to be distinguished from the Moon."},