Skip to content

CSS Reference

This page contains the CSS selector names for styling RPGM within an application, by using custom CSS code in the project settings.

Main

  • #pgm is the whole container of an RPGM app;
    • #pgm-content is the current content of the app;
    • #pgm-content-past is the content while viewing a past step;
    • .pgm-sidebar-on and .pgm-sidebar-off are applied to #pgm-content and its past counterpart if the sidebar is shown or hidden.
  • #pgm-menu is the sidebar container;
    • #pgm-menu-logo is the logo in the sidebar;
    • #pgm-menu-title is the title of the app in the sidebar;
    • #pgm-menu-content is the content of the menu;
      • .pgm-menu-item is a single step in the sidebar menu;
      • .pgm-menu-item-active is the additional class for the currently active step in the app;
      • .pgm-menu-item-selected is the additional class for the step the user is looking at.

Script step

  • .pgm-script is the main container of the whole script sequence;
    • .pgm-script-spinner is the rotating spinner;
    • .pgm-script-label is the label with the elapsed time and/or finished message;
    • .pgm-script-progress is the main container of the custom progress display;
      • .pgm-script-progress-bar is the progress bar container;
        • .pgm-script-progress-bar-inner is the inner bar of the progress bar;
      • .pgm-script-progress-label is the custom text below the progress bar.

GUI step

  • .pgm-gui is the container of a GUI sequence;
  • button[data-click="gui:submit"] is the submit button of a GUI.

See the Widgets CSS page for widget styling.

End step

  • .pgm-end is the container of the whole end sequence;
    • .pgm-end-message is the "finished" label;
    • .pgm-end-files is the output file cards;
      • .pgm-end-files-title is the "Output files:" title;
      • .pgm-end-files-list is the files container;
        • .pgm-end-file is a single output file;
    • .pgm-end-buttons is the container of the restart/quit button;
      • .pgm-end-restart and .pgm-end-quit are the restart and quit button.

Toasts notifications

  • #toast is the notifications container;
    • .toast is a single toast container;
    • .toast-{type} is the type of the notification: success, info or error.