Skip to content

Status Bar

Defines CSS variables to configure the status bar

Accepted Formats: s, px

Style Settings
|-- ...
|-- Flexcyon Style Settings
|   |-- Editor
|   |   |-- ...
|   |   |-- Status Bar
|   |   |-- ...
|   |-- ...
|-- ...

Configuration Options

Status Bar

Hide until trigger

CSS Classe(s) targeted: .flexcyon-status-hide-until-hover .flexcyon-status-hide-until-hold

Default: none (Class select)

Options:

  • Hide until hover
  • Hide until hold

Status bar alignment

CSS Classe(s) targeted: .flexcyon-status-left-align .flexcyon-status-centre-align

Default: none (Class select)

Options:

  • Left
  • Centre

Text when hide until hover enabled

CSS Variable(s) targeted: var(--flexcyon-status-hide-until-hover-text)

Default: "Show status"

Translation for showing status bar on hover

CSS Variable(s) targeted: var(--flexcyon-status-hide-until-hover-translation)

Default: 1500 (px)

Transition duration for showing status bar on hover

CSS Variable(s) targeted: var(--flexcyon-status-hide-hover-duration)

Default: 0.35 (s)

Transition timing function for showing status bar on hover

CSS Variable(s) targeted: var(--flexcyon-status-hide-hover-function)

Default: ease-out

Text Configuration

Use text instead of icons for mode status

CSS Variable(s) targeted: var(--flexcyon-status-text-mode)

Default: false (class toggle)

Reading Mode Text

CSS Variable(s) targeted: var(--flexcyon-status-reading-text)

Default: "READ"

Source Mode Text

CSS Variable(s) targeted: var(--flexcyon-status-source-text)

Default: "SOURCE"

Live Preview Mode Text

CSS Variable(s) targeted: var(--flexcyon-status-live-text)

Default: "LIVE"

Status Bar Styling

Show status bar on mobile

CSS Variable(s) targeted: var(--flexcyon-status-mobile-enabled)

Default: false (class toggle)

Status bar font size

CSS Variable(s) targeted: var(--status-bar-font-size)

Default: 13.753255 (px)

Select status bar style

CSS Classe(s) targeted: .flexcyon-status-style-angled, .flexcyon-status-style-card, .flexcyon-status-style-pl10k

Default: none (class select)

Options:

  • Angled
  • Cards
  • Powerlevel10k

Enable status text color

CSS Variable(s) targeted: var(--flexcyon-status-text-enable-color)

Default: false (class toggle)

Comments