Stiliaus gidas

Pakartotinai naudojami, prie X9 temos priderinti HTML blokai ir tekstų stiliai. Kiekvienas rodomas gyvai su kopijuojamu HTML. Nori naujo bloko ar kitokio varianto? Parodyk į šią vietą ir paprašyk — čia dėsime tik naujus daugkartinius stilius.

Paletė

Temos spalvos — CSS kintamieji (naudok var(--x9-accent) ir t. t.).

accent

warn

danger

bg-card

fg-dim

HTML

<div class="x9-swatches">
  <div class="x9-swatch"><span class="x9-swatch__chip" style="background:var(--x9-accent)"></span>accent</div>
  <div class="x9-swatch"><span class="x9-swatch__chip" style="background:var(--x9-warn)"></span>warn</div>
  <div class="x9-swatch"><span class="x9-swatch__chip" style="background:var(--x9-danger)"></span>danger</div>
  <div class="x9-swatch"><span class="x9-swatch__chip" style="background:var(--x9-bg-card)"></span>bg-card</div>
  <div class="x9-swatch"><span class="x9-swatch__chip" style="background:var(--x9-fg)"></span>fg</div>
  <div class="x9-swatch"><span class="x9-swatch__chip" style="background:var(--x9-fg-dim)"></span>fg-dim</div>
</div>

Callout — accent (numatytasis)

Bordo su mono antrašte. Naudoja <div> + .x9-callout__title.

Svarbu žinoti

Numatytasis accent callout — bendriems paaiškinimams ir pastaboms.

HTML

<div class="x9-callout">
  <span class="x9-callout__title">Svarbu žinoti</span>
  <p>Numatytasis <strong>accent</strong> callout — bendriems paaiškinimams ir pastaboms.</p>
</div>

Callout — info

Ramesnis variantas su kairiuoju akcentu.

ℹ Informacija

Variantas --info su kairiąja akcentine juosta — švelnesnis, ilgesniems tekstams.

HTML

<div class="x9-callout x9-callout--info">
  <span class="x9-callout__title">ℹ Informacija</span>
  <p>Variantas <strong>--info</strong> su kairiąja akcentine juosta — švelnesnis, ilgesniems tekstams.</p>
</div>

Callout — warn (dashed)

Punktyrinė geltona su legenda — įspėjimai, demo/debug jungikliai.

⚠ Demo / Debug Rodyti teisingus kodus žaidimo puslapyje

Punktyrinė geltona — įspėjimams ir laikiniems nustatymams. Būtent šis stilius patiko (buvęs .debug-block). Veikia su <fieldset> + <legend>.

HTML

<fieldset class="x9-callout x9-callout--warn">
  <legend>⚠ Demo / Debug</legend>
  <label style="display:flex;align-items:center;gap:0.5rem">
    <input type="checkbox" style="width:auto" checked> Rodyti teisingus kodus žaidimo puslapyje
  </label>
  <p>Punktyrinė geltona — įspėjimams ir laikiniems nustatymams. Būtent šis stilius patiko
     (buvęs <code>.debug-block</code>). Veikia su <code>&lt;fieldset&gt;</code> + <code>&lt;legend&gt;</code>.</p>
</fieldset>

Callout — danger

Raudona — pavojingi/negrįžtami veiksmai.

✗ Negrįžtama

Variantas --danger — pavojingiems ar negrįžtamiems veiksmams (trynimas, finišas).

HTML

<div class="x9-callout x9-callout--danger">
  <span class="x9-callout__title">✗ Negrįžtama</span>
  <p>Variantas <strong>--danger</strong> — pavojingiems ar negrįžtamiems veiksmams (trynimas, finišas).</p>
</div>

Žingsniai

Sunumeruotas eiga su mono apskritimais. Naudok <ol class="x9-steps">.

Sukurk komandą arba priimk kvietimą.
Užsiregistruok į žaidimą su PIN.
Eik ir žaisk — spręsk užduotis iš eilės.

HTML

<ol class="x9-steps">
  <li><strong>Sukurk komandą</strong> arba priimk kvietimą.</li>
  <li><strong>Užsiregistruok</strong> į žaidimą su PIN.</li>
  <li><strong>Eik ir žaisk</strong> — spręsk užduotis iš eilės.</li>
</ol>

Pavyzdžio eilutė

Kursyvinė „pavyzdžiui…“ eilutė su akcentiniu krašteliu.

Užuomina veda komandą į vietą.

Pavyzdys: „Ant senojo švyturio durų rasi metalinę lentelę su žodžiu.“

HTML

<p class="x9-muted">Užuomina veda komandą į vietą.</p>
<span class="x9-eg"><b>Pavyzdys:</b> „Ant senojo švyturio durų rasi metalinę lentelę su žodžiu.“</span>

Taisyklių sąrašas

Erdvus sąrašas su paryškintais raktažodžiais — taisyklėms ir savybėms.

Komanda — nuolatinė. Sukuriama vieną kartą, dalyvauja visuose žaidimuose.
Vienu metu — viena komanda. Negali priklausyti kelioms iškart.

HTML

<ul class="x9-rules">
  <li><strong>Komanda — nuolatinė.</strong> Sukuriama vieną kartą, dalyvauja visuose žaidimuose.</li>
  <li><strong>Vienu metu — viena komanda.</strong> Negali priklausyti kelioms iškart.</li>
</ul>

Pagalbos blokas (perjungiamas)

Bet koks blokas su klase x9-help paklūsta „?“ jungikliui.

❓ Pagalbos blokas

Pridėk klasę x9-help bet kuriam blokui — jį paslepia/parodo „?“ jungiklis viršuje. Numatyta: įjungta.

HTML

<section class="x9-callout x9-callout--info x9-help">
  <span class="x9-callout__title">❓ Pagalbos blokas</span>
  <p>Pridėk klasę <code>x9-help</code> bet kuriam blokui — jį paslepia/parodo „?“ jungiklis
     viršuje. Numatyta: įjungta.</p>
</section>

Žymos (tags)

Būsenų ženkliukai. Esami atomai — naudojami kartu su naujais blokais.

NEUTRALI GYVA KODAS UŽUOMINA BAIGTA 🔒 UŽRAKINTA

HTML

<span class="x9-tag">NEUTRALI</span>
<span class="x9-tag x9-tag--live">GYVA</span>
<span class="x9-tag x9-tag--code">KODAS</span>
<span class="x9-tag x9-tag--hint">UŽUOMINA</span>
<span class="x9-tag x9-tag--done">BAIGTA</span>
<span class="x9-tag x9-tag--locked">🔒 UŽRAKINTA</span>

Mygtukai

Esami mygtukų stiliai — naudojami blokų viduje.

Pagrindinis Antrinis

HTML

<a class="x9-btn x9-btn--primary" href="#">Pagrindinis</a>
<a class="x9-btn x9-btn--ghost" href="#">Antrinis</a>

Pagalbos „?“ mygtukas

Apvalus jungiklis (statusinėje juostoje šalia vardo). „?“ centruotas.

HTML

<button type="button" class="x9-help-toggle" title="Pagalbos tekstai">?</button>

Tactical FX — military / sci-fi sluoksnis

Dekoracijos, kurias naudoja titulinis puslapis ir kurias galima dėti bet kur. CSS: public/assets/css/x9-fx.css, JS: x9-fx.js. Spalvos — tik temos (žalia, gintarinė, oranžinė, raudona). Visos animacijos paiso prefers-reduced-motion.

Logotipas (stencil)

Twig dalinys _fx/logo.html.twig: taikiklio žiedas, šešiakampė plokštė, trafaretinis X9. Parametrai: size (sm | lg), word, href, tagline. Užvedus pele — „glitch“.

X9 OUT Lauko operacijos X9 OUT Lauko operacijos

HTML

<div style="display:flex;gap:2rem;flex-wrap:wrap;align-items:center">
  <a href="#" class="x9-logo x9-logo--lg" aria-label="X9 OUT">
    <svg class="x9-logo__mark" viewBox="0 0 120 120" aria-hidden="true">
        <circle class="x9-logo__ring" cx="60" cy="60" r="55" transform="rotate(-45 60 60)"/>
        <circle class="x9-logo__ring2" cx="60" cy="60" r="46"/>
        <line class="x9-logo__tick" x1="60" y1="1" x2="60" y2="11"/>
        <line class="x9-logo__tick" x1="60" y1="109" x2="60" y2="119"/>
        <line class="x9-logo__tick" x1="1" y1="60" x2="11" y2="60"/>
        <line class="x9-logo__tick" x1="109" y1="60" x2="119" y2="60"/>
        <polygon class="x9-logo__hex" points="60,22 93,41 93,79 60,98 27,79 27,41"/>
                <line class="x9-logo__glyph" x1="30" y1="42" x2="56" y2="78"/>
        <line class="x9-logo__glyph" x1="56" y1="42" x2="30" y2="78"/>
                <circle class="x9-logo__glyph" cx="78" cy="52" r="11"/>
        <path class="x9-logo__glyph" d="M89 52 V66 Q89 79 73 80"/>
                <line class="x9-logo__cut" x1="36" y1="60" x2="50" y2="60"/>
        <line class="x9-logo__cut" x1="66" y1="48" x2="72" y2="48"/>
        <line class="x9-logo__cut" x1="84" y1="72" x2="94" y2="68"/>
        <circle class="x9-logo__dot" cx="93" cy="30" r="4"/>
    </svg>
            <span class="x9-logo__word">
            <b>X9 <em>OUT</em></b>
            <small>Lauko operacijos</small>
        </span>
    </a>
  <a href="#" class="x9-logo" aria-label="X9 OUT">
    <svg class="x9-logo__mark" viewBox="0 0 120 120" aria-hidden="true">
        <circle class="x9-logo__ring" cx="60" cy="60" r="55" transform="rotate(-45 60 60)"/>
        <circle class="x9-logo__ring2" cx="60" cy="60" r="46"/>
        <line class="x9-logo__tick" x1="60" y1="1" x2="60" y2="11"/>
        <line class="x9-logo__tick" x1="60" y1="109" x2="60" y2="119"/>
        <line class="x9-logo__tick" x1="1" y1="60" x2="11" y2="60"/>
        <line class="x9-logo__tick" x1="109" y1="60" x2="119" y2="60"/>
        <polygon class="x9-logo__hex" points="60,22 93,41 93,79 60,98 27,79 27,41"/>
                <line class="x9-logo__glyph" x1="30" y1="42" x2="56" y2="78"/>
        <line class="x9-logo__glyph" x1="56" y1="42" x2="30" y2="78"/>
                <circle class="x9-logo__glyph" cx="78" cy="52" r="11"/>
        <path class="x9-logo__glyph" d="M89 52 V66 Q89 79 73 80"/>
                <line class="x9-logo__cut" x1="36" y1="60" x2="50" y2="60"/>
        <line class="x9-logo__cut" x1="66" y1="48" x2="72" y2="48"/>
        <line class="x9-logo__cut" x1="84" y1="72" x2="94" y2="68"/>
        <circle class="x9-logo__dot" cx="93" cy="30" r="4"/>
    </svg>
            <span class="x9-logo__word">
            <b>X9 <em>OUT</em></b>
            <small>Lauko operacijos</small>
        </span>
    </a>
  <span class="x9-logo x9-logo--sm" aria-label="X9 OUT">
    <svg class="x9-logo__mark" viewBox="0 0 120 120" aria-hidden="true">
        <circle class="x9-logo__ring" cx="60" cy="60" r="55" transform="rotate(-45 60 60)"/>
        <circle class="x9-logo__ring2" cx="60" cy="60" r="46"/>
        <line class="x9-logo__tick" x1="60" y1="1" x2="60" y2="11"/>
        <line class="x9-logo__tick" x1="60" y1="109" x2="60" y2="119"/>
        <line class="x9-logo__tick" x1="1" y1="60" x2="11" y2="60"/>
        <line class="x9-logo__tick" x1="109" y1="60" x2="119" y2="60"/>
        <polygon class="x9-logo__hex" points="60,22 93,41 93,79 60,98 27,79 27,41"/>
                <line class="x9-logo__glyph" x1="30" y1="42" x2="56" y2="78"/>
        <line class="x9-logo__glyph" x1="56" y1="42" x2="30" y2="78"/>
                <circle class="x9-logo__glyph" cx="78" cy="52" r="11"/>
        <path class="x9-logo__glyph" d="M89 52 V66 Q89 79 73 80"/>
                <line class="x9-logo__cut" x1="36" y1="60" x2="50" y2="60"/>
        <line class="x9-logo__cut" x1="66" y1="48" x2="72" y2="48"/>
        <line class="x9-logo__cut" x1="84" y1="72" x2="94" y2="68"/>
        <circle class="x9-logo__dot" cx="93" cy="30" r="4"/>
    </svg>
    </span>
</div>

HUD rėmelis + plokštė + švytėjimas

Trys nepriklausomos klasės, dedamos ant to paties elemento.

Plokštė su HUD kampais

.x9-plate (nupjauti kampai) + .x9-hud (kampų skliaustai: --amber / --red / --dim) + .x9-glow (švyti ten, kur pelė).

Tik .x9-hud — kampai ant bet kokio bloko be papildomo HTML.

HTML

<div class="x9-plate x9-hud x9-glow" style="padding:1rem 1.25rem;max-width:420px">
  <strong>Plokštė su HUD kampais</strong>
  <p class="x9-muted" style="margin:.4rem 0 0">.x9-plate (nupjauti kampai) + .x9-hud (kampų skliaustai: --amber / --red / --dim) + .x9-glow (švyti ten, kur pelė).</p>
</div>
<div class="x9-hud x9-hud--amber" style="padding:1rem;margin-top:1rem;max-width:420px">Tik .x9-hud — kampai ant bet kokio bloko be papildomo HTML.</div>

Radaras

Grynas CSS: besisukantis spindulys, žiedai, taškai su --x/--y (procentais) ir --d (vėlinimas s).

komandos · 3

HTML

<div class="x9-radar" style="--s:180px">
  <i class="x9-radar__blip" style="--x:62;--y:34;--d:0.4"></i>
  <i class="x9-radar__blip x9-radar__blip--amber" style="--x:30;--y:58;--d:1.9"></i>
  <i class="x9-radar__blip x9-radar__blip--red" style="--x:70;--y:70;--d:2.6"></i>
  <span class="x9-radar__label">komandos · 3</span>
</div>

Taikinys

SVG dalinys _fx/reticle.html.twig — du lėtai besisukantys žiedai. Spalva per klasę --amber / --red, dydis per size.

HTML

<div style="display:flex;gap:2rem;align-items:center">
  <svg class="x9-reticle" viewBox="0 0 100 100" aria-hidden="true" style="--s:90px">
    <circle class="r-ring" cx="50" cy="50" r="46" stroke-width="1.5" stroke-dasharray="40 10 6 10 40 10 6 10"/>
    <circle class="r-ring2" cx="50" cy="50" r="34" stroke-width="1" stroke-dasharray="3 5"/>
    <circle cx="50" cy="50" r="18" stroke-width="1.2"/>
    <circle cx="50" cy="50" r="2.5" fill="currentColor" stroke="none"/>
    <line x1="50" y1="2" x2="50" y2="24" stroke-width="1.5"/>
    <line x1="50" y1="76" x2="50" y2="98" stroke-width="1.5"/>
    <line x1="2" y1="50" x2="24" y2="50" stroke-width="1.5"/>
    <line x1="76" y1="50" x2="98" y2="50" stroke-width="1.5"/>
</svg>
  <svg class="x9-reticle x9-reticle--amber" viewBox="0 0 100 100" aria-hidden="true" style="--s:90px">
    <circle class="r-ring" cx="50" cy="50" r="46" stroke-width="1.5" stroke-dasharray="40 10 6 10 40 10 6 10"/>
    <circle class="r-ring2" cx="50" cy="50" r="34" stroke-width="1" stroke-dasharray="3 5"/>
    <circle cx="50" cy="50" r="18" stroke-width="1.2"/>
    <circle cx="50" cy="50" r="2.5" fill="currentColor" stroke="none"/>
    <line x1="50" y1="2" x2="50" y2="24" stroke-width="1.5"/>
    <line x1="50" y1="76" x2="50" y2="98" stroke-width="1.5"/>
    <line x1="2" y1="50" x2="24" y2="50" stroke-width="1.5"/>
    <line x1="76" y1="50" x2="98" y2="50" stroke-width="1.5"/>
</svg>
  <svg class="x9-reticle x9-reticle--red" viewBox="0 0 100 100" aria-hidden="true" style="--s:60px">
    <circle class="r-ring" cx="50" cy="50" r="46" stroke-width="1.5" stroke-dasharray="40 10 6 10 40 10 6 10"/>
    <circle class="r-ring2" cx="50" cy="50" r="34" stroke-width="1" stroke-dasharray="3 5"/>
    <circle cx="50" cy="50" r="18" stroke-width="1.2"/>
    <circle cx="50" cy="50" r="2.5" fill="currentColor" stroke="none"/>
    <line x1="50" y1="2" x2="50" y2="24" stroke-width="1.5"/>
    <line x1="50" y1="76" x2="50" y2="98" stroke-width="1.5"/>
    <line x1="2" y1="50" x2="24" y2="50" stroke-width="1.5"/>
    <line x1="76" y1="50" x2="98" y2="50" stroke-width="1.5"/>
</svg>
</div>

Antspaudai + prierašai

.x9-stamp (pasuktas, „nusitrynęs“ antspaudas; --red / --lime / --flat) ir .x9-eyebrow (mono prierašas su brūkšniu prieš skyriaus antraštę).

Patikrinta Misija 04 · aktyvi Demo

Antraštės prierašas
Gintarinis
Raudonas

HTML

<span class="x9-stamp">Patikrinta</span>
<span class="x9-stamp x9-stamp--red">Misija 04 · aktyvi</span>
<span class="x9-stamp x9-stamp--lime x9-stamp--flat">Demo</span>
<p style="margin-top:1rem"><span class="x9-eyebrow">Antraštės prierašas</span><br>
<span class="x9-eyebrow x9-eyebrow--amber">Gintarinis</span><br>
<span class="x9-eyebrow x9-eyebrow--red">Raudonas</span></p>

Bėganti juosta + apsauginė juosta

.x9-classbar (--amber / --red) su slenkančiu tekstu; <hr class="x9-tape"> — geltonai juoda juosta (--red, --thin).

// X9 OUT · lauko operacijų platformabūsena: aktyviserverio laikas — vienintelė tiesa

HTML

<div class="x9-classbar"><div class="x9-classbar__track"><span>// X9 OUT · lauko operacijų platforma</span><span>būsena: aktyvi</span><span>serverio laikas — vienintelė tiesa</span></div></div>
<hr class="x9-tape" style="margin:1rem 0">
<hr class="x9-tape x9-tape--red x9-tape--thin">

Terminalo langas

Mock ekranams ir žurnalams: .x9-term + __bar + __body; spalvų klasės k / ok / warn / err / org; .x9-term__cursor mirksi.

komanda Žalieji

LYGIS 4/6 · TAŠKAI 370

> kodas: X9-DEL

✓ X9-CHARLIE · +150

✗ X9-CHARLY · −10

☼ slyva atrakinta (−20)

▲ bonusas +30

HTML

<div class="x9-term x9-hud" style="max-width:360px">
  <div class="x9-term__bar"><i></i><i></i><i></i><span>komanda Žalieji</span></div>
  <div class="x9-term__body">
    <div><span class="k">LYGIS</span> 4/6 · <span class="k">TAŠKAI</span> <span class="ok">370</span></div>
    <div><span class="k">&gt; kodas:</span> X9-DEL<span class="x9-term__cursor"></span></div>
    <div class="ok">✓ X9-CHARLIE · +150</div>
    <div class="err">✗ X9-CHARLY · −10</div>
    <div class="warn">☼ slyva atrakinta (−20)</div>
    <div class="org">▲ bonusas +30</div>
  </div>
</div>

Smulkmenos: LED, ikonų rėmeliai, tinklelis, efektai

Būsenos lemputės, nupjautų kampų ikonos (4 spalvos), tinklelio fonas ir JS valdomi efektai.

gyva laukia įtartina

.x9-grid — brėžinio tinklelio fonas sekcijoms.

Dar: .x9-reveal (atsiranda slenkant), .x9-count[data-to] (skaičius „užbėga“), body.x9-matrix-strong (ryškesnis „matrix“ lietus — titulinis), pelės kryžiukas .x9-cursor (automatinis, tik desktop), scanline'ai .x9-scan (visur, base.html.twig).

HTML

<p><span class="x9-led"></span>gyva <span class="x9-led x9-led--amber"></span>laukia <span class="x9-led x9-led--red"></span>įtartina</p>
<div style="display:flex;gap:.75rem;margin:1rem 0">
  <span class="x9-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 4v16M4 12h16"/></svg></span>
  <span class="x9-icon x9-icon--amber"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16"/></svg></span>
  <span class="x9-icon x9-icon--orange"><svg viewBox="0 0 24 24"><path d="M12 3l9 18H3z"/></svg></span>
  <span class="x9-icon x9-icon--red"><svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg></span>
</div>
<div class="x9-grid x9-hud x9-hud--dim" style="padding:1rem">.x9-grid — brėžinio tinklelio fonas sekcijoms.</div>
<p class="x9-muted" style="margin-top:1rem">Dar: <code>.x9-reveal</code> (atsiranda slenkant), <code>.x9-count[data-to]</code> (skaičius „užbėga“),
<code>body.x9-matrix-strong</code> (ryškesnis „matrix“ lietus — titulinis), pelės kryžiukas <code>.x9-cursor</code> (automatinis, tik desktop),
scanline'ai <code>.x9-scan</code> (visur, base.html.twig).</p>

Šių komponentų CSS: public/assets/css/x9-player.css (skiltis „STYLEGUIDE COMPONENTS“).