/* app.css — minimalne nadogradnje povrh Bulme (mobile-first) Bulma v1 sama upravlja svijetlom/tamnom temom preko [data-theme], koji store.js postavlja na . */ :root { /* Brend boja (#1b3a4b ≈ hsl(201, 47%, 20%)) kao Bulma primary. Bulma v1 iz ovih HSL varijabli izvodi cijelu paletu (primary, -invert, -light...). */ --bulma-primary-h: 201deg; --bulma-primary-s: 47%; --bulma-primary-l: 24%; --bulma-link-h: 201deg; --bulma-link-s: 47%; --bulma-link-l: 32%; --vc-surface: orange; /* traka površine u SVG dijagramu */ --vc-segment: dodgerblue; } /* Brand ikona */ .brand-icon { border-radius: 22%; height: 48px; width: 48px; } /* Uže polje za količinu u redovima dimenzija */ .qty-input { max-width: 5.5rem; text-align: center; } /* Rezultat — malo naglašena kartica */ .result { border-left: 4px solid var(--bulma-primary, #1b3a4b); } .result p { margin-bottom: .25rem; } .result .tags { margin-bottom: .25rem; } /* SVG dijagram sredine */ .diagram { width: 100%; } .diag-surface { fill: var(--vc-surface); } .diag-segment { fill: var(--vc-segment); } .diag-label { font: 500 2px sans-serif; fill: currentColor; color: black;} .diag-label-sm { font: 400 1.8px sans-serif; fill: currentColor; color: black;} .diag-guide-surface { stroke: var(--vc-surface); stroke-width: .2; stroke-dasharray: 1 2; } .diag-guide-edge { stroke: currentColor; stroke-width: .2; stroke-dasharray: 1 2; } .diag-guide-segment { stroke: var(--vc-segment); stroke-width: .3; } /* Tabovi: bez donjeg razmaka koji Bulma dodaje */ .tabs { margin-bottom: 1.25rem; } /* Dvostupčani raspored: lijevo unos, desno prikaz. Bulma `.columns` se na mobitelu (< 769px) prirodno slaže vertikalno. */ .vc-placeholder { display: flex; align-items: center; justify-content: center; min-height: 8rem; padding: 1.5rem; border: 2px dashed var(--bulma-border, #dbdbdb); border-radius: 10px; color: var(--bulma-text-weak, #7a7a7a); text-align: center; } /* Na desktopu desni stupac "prati" pri scrollu duže forme. */ @media screen and (min-width: 769px) { .vc-output { position: sticky; top: 1rem; align-self: flex-start; } }