CSS API

Closer look into widget

You blurts widget has human-readable classes for almost every element. You can usee CSS to customize their appearance.

Record button

Record button
Button attached to textareas
blurts-record-button
  blurts-record-button-icon

Recorder

Recorder 1 Recorder 2
Recorder that appears when the record button is clicked
blurts-recorder-container
  blurts-recorder-close-button
  blurts-recorder
    blurts-recorder-time-limit-info
      blurts-recorder-time-limit-info-number
      blurts-recorder-time-limit-info-text
    blurts-recorder-controls
      blurts-recorder-record-button
      blurts-recorder-stop-button
      blurts-recorder-busy
        blurts-recorder-busy-text
        blurts-recorder-busy-icon
      blurts-recorder-hints
        blurts-recorder-button-hint
        blurts-recorder-countdown-hint
      blurts-recorder-mic-level
        blurts-recorder-mic-level-frame
        blurts-recorder-mic-level-bar
  blurts-powered-by-title
    blurts-powered-by-title-logo
  blurts-agreement-title
    blurts-agreement-title-link

Editor

Editor 1 Editor 2
Editor that appears after a blurt is recorded
blurts-editor-container
  blurts-editor-close-button
  blurts-editor-player-container
    blurts-editor-player
    blurts-editor-voicelink-text
      blurts-editor-voicelink-link
    blurts-editor-share-button
  blurts-editor-auth-container
    blurts-editor-auth-title
    blurts-editor-auth-username
    blurts-editor-auth-relogin-link
    blurts-editor-auth-login-link
    blurts-editor-auth-tip
  blurts-editor-avatar-container
    blurts-editor-avatar-image
  blurts-powered-by-title
    blurts-powered-by-title-logo
  blurts-agreement-title
    blurts-agreement-title-link

Inline player

Player 1 Player 2
Players parsed from text and links
blurts-player-container
  blurts-player-player-container
    blurts-player-player
    blurts-player-blurt-title
    blurts-player-avatar-container
      blurts-player-avatar-image
    blurts-player-stats-link
    blurts-player-user-container
      blurts-player-username
      blurts-player-post-time
  blurts-player-stats-container
    blurts-player-stats-close-button
    blurts-player-stats-title
    blurts-player-stats-counters
      blurts-player-stats-listens-icon
      blurts-player-stats-listens-number
    blurts-player-stats-share
      blurts-player-stats-share-button
  blurts-powered-by-title
    blurts-powered-by-title-logo