Styling

info

Only available after version 2.0.0

We'd love to help making your product look awesome, so we included css variables to make your life easier.

Grab the snippet below and add it to your css file to get yourself a 🌈

:root {
    --PF-primary-color: #ff3366; 
    --PF-primary-color: #ff6633;
    --PF-secondary-color: #ffcc33;

    --PF-button-primary-border-color: #33ff66;
    --PF-button-primary-bg-color: #33ffcc;
    --PF-button-primary-color: #33ccff;


    --PF-button-secondary-border-color: #3366ff;
    --PF-button-secondary-bg-color: #6633ff;
    --PF-button-secondary-color: #cc33ff;


    --PF-progress-bg-color: #efefef;
    --PF-progress-completed-color: #efefef;

    /* We addded some more in v3.0.0 */ 
    --PF-annotation-primary-foreground-color: red;
    --PF-annotation-highlight-color: green;
    --PF-annotation-primary-background-color: blue;
    --PF-annotation-primary-background-transparency: 0.5;
    --PF-annotation-secondary-background-color: yellow;
    --PF-annotation-secondary-background-transparency: 0.5;
    --PF-annotation-border-radius: 10px;
    --PF-annotation-shadow: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));

    --PF-annotation-header-color: red;
    --PF-annotation-header-background-color: green;
    --PF-annotation-header-shadow-color: blue;
    --PF-annotation-header-shadow-size: 2px 2px 5px;
    --PF-annotation-header-padding: 10px;
    --PF-annotation-header-height: 100px;
    --PF-annotation-header-icon-size: 40px;
    --PF-annotation-header-font-family: Arial;
    --PF-annotation-header-font-size: 12px;
    --PF-annotation-header-font-weight: bold;
    --PF-annotation-header-font-size-sm: 12px;
    --PF-annotation-header-font-weight-sm: bold;
    --PF-annotation-editor-toolbar-color: red;
    --PF-annotation-editor-toolbar-background-color: green;
    --PF-annotation-editor-toolbar-shadow-color: blue;
     
    --PF-annotation-recorder-top: auto;
    --PF-annotation-recorder-right: 10px;
    --PF-annotation-recorder-bottom: 10px;
    --PF-annotation-recorder-left: auto;
    --PF-annotation-recorder-height: 220px;
    --PF-annotation-recorder-width:  200px;
    --PF-annotation-recorder-max-width: auto;
    --PF-annotation-recorder-max-height: auto;
    --PF-annotation-recorder-shadow: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
    --PF-annotation-recorder-border-radius: 60px;
    --PF-annotation-recorder-control-padding: 3px;
}

Tired of our icons? We got you covered! Just add the following snippet to your css file and you're good to go.

:root {
    --PF-icon-file: url('your icon resource here');
    --PF-icon-welcome: url('your icon resource here');
    --PF-icon-permission: url('your icon resource here');
    --PF-icon-loader: url('your icon resource here');
    --PF-icon-success: url('your icon resource here');
    --PF-icon-success_large: url('your icon resource here');
    --PF-icon-uploading: url('your icon resource here');
    --PF-icon-error_large: url('your icon resource here');
    --PF-icon-error: url('your icon resource here');
    --PF-icon-fullscreen_on: url('your icon resource here');
    --PF-icon-fullscreen_off: url('your icon resource here');
}

tip

Did we miss something? Feel free to reach out to us at hi@pathfindr.dev, if you need more variables!