/* The sidebar's calculator. Values are the legacy `SymbolCalc.vue`'s `.calc-section` block. */ .symbol-calc { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 16px; border: 1px solid var(--gray-200); border-radius: 16px; background-color: var(--gray-0); } .symbol-calc-title { width: 100%; margin-bottom: 16px; color: var(--gray-900); font-size: 20px; font-weight: 700; } /* The two fields and the swap between them. `column-reverse` is what the swap does — one declaration rather than the legacy's five `order`s against `:nth-child`, which have to be renumbered whenever an element moves. */ .symbol-calc-fields { position: relative; display: flex; flex-direction: column; width: 100%; } .symbol-calc-fields[data-order='toman-first'] { flex-direction: column-reverse; } /* The 16px below each field is what spaces the pair and what separates the second from the button; the button itself carries no margin. */ .symbol-calc-field { position: relative; display: block; width: 100%; margin-bottom: 16px; } .symbol-calc-input { width: 100%; height: 40px; padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: 8px; background-color: transparent; color: var(--gray-900); direction: rtl; font-size: 14px; text-align: right; } /* `left` is the far edge on this RTL page: the unit sits opposite the number. `29%` is the legacy's own offset and is kept rather than centred — it lands about a pixel below the middle, and matching it is free. */ .symbol-calc-unit { position: absolute; top: 29%; left: 12px; color: var(--gray-400); font-size: 12px; font-weight: 400; } /* Swapping is the island's. Without it the control cannot do anything, so it is not offered — the call the price table's toolbar and the chart's spans make. `js` is set on by an inline script in head.hbs before anything paints, so it never flashes. */ .symbol-calc-swap { display: none; } /* Centred on the gap between the two fields: 40px of field, then half of the 16px below it. Out of flow, as the legacy's is, so it adds nothing to the card's height — in flow it made the card 7px taller than the one it copies. The offset holds when the fields are reversed, the gap being in the same place either way. The glyph draws its own disc and ring, so there is no background here. The legacy's sits 1.2px lower: it is absolutely positioned with no offsets, so it keeps the static position it would have had in flow, which is not the middle of the gap. Centred here on purpose. */ .js .symbol-calc-swap { position: absolute; z-index: 1; top: 48px; left: 50%; display: flex; width: 30px; height: 30px; transform: translate(-50%, -50%); color: var(--gray-900); } /* The legacy hard-codes #408941, which is this app's `--success`. It is the one call to action on the site that is not the brand yellow. */ .symbol-calc-buy { display: block; width: 100%; padding: 6px 0; border-radius: 8px; background-color: var(--success); color: var(--white); font-size: 14px; font-weight: 500; text-align: center; }