Styles
======

The frontend leans heavily on `UIkit <https://getuikit.com/>`_ for
layout and components. Project styles add a thin layer of
brand-specific helpers, layout glue, and a handful of UIkit
overrides. Everything lives in
``app/richy/core/static/sass/`` and compiles via Webpack into
``static/css/app_build.css``, loaded by ``core/_js_css.pug``.

Source layout
-------------

``app.sass`` is the entry point. It ``@use``-s seven partials
in order and declares the global utility classes.

* ``_meter.sass`` -- ``.meter`` (HTML ``<meter>``) layout, with
  ``.min`` / ``.max`` labels and a ``.with-prefix`` two-column
  variant.
* ``_dashboard.sass`` -- ``.dashboard-performance-chart``
  desktop-only max-width.
* ``_loading.sass`` -- ``.loading`` spinner (CSS ``@keyframes``
  rotation), with an ``.in-container`` absolute-centered
  variant.
* ``_chart.sass`` -- ``.chart`` set to ``position: relative``
  so absolute-positioned chart overlays anchor correctly.
* ``_badge.sass`` -- ``.richy-dual-badge`` two-tone label badge.
* ``_basic_info.sass`` -- ``.basic-info table th`` padding
  tweak.
* ``_overrides.sass`` -- UIkit class overrides (see
  `UIkit overrides`_ below).

Project-wide utility classes
----------------------------

Declared directly in ``app.sass``. Reference them from any
template or template tag without needing a ``@use``.

* ``.richy-green`` / ``.richy-red`` -- brand "up" / "down"
  colors (``#00C853`` / ``#EF476F``). Emitted by template tags
  such as :func:`~richy.core.templatetags.items.move_arrow` and
  :func:`~richy.core.templatetags.items.color_perc_change`.
* ``.richy-sidebar-left`` -- 300px fixed-width left sidebar on
  desktop; pairs with a ``margin-left: 300px`` rule on ``main``
  for the content offset (``@media(min-width: 960px)``).
* ``.richy-flex-gap`` -- ``gap: 15px`` for flex containers.
* ``.richy-hand`` -- ``cursor: pointer``.

UIkit overrides
---------------

``_overrides.sass`` carries the small set of overrides applied
to UIkit classes -- heading font-weight, navbar background
color (the ``$primary`` brand blue ``#1e87f0``), label sizing,
table font-size, ``a.uk-card-badge`` hover state. These are
intentionally narrow; project styles should not fork UIkit
components, just nudge their defaults.

Build pipeline
--------------

SASS sources compile through Webpack alongside Vue components
(see :doc:`components/index`). The output is
``app/richy/static/css/app_build.css``; ``core/_js_css.pug``
loads it next to UIkit's stylesheet and the Bootstrap Icons
font. See :doc:`/architecture/frontend` for the full build
toolchain.