github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/sass/variables.css (about)

     1  :root {
     2    --ps-neutral-1: #000000;
     3    --ps-neutral-2: #ffffff;
     4    --ps-neutral-9: #ffffff08; /* lighter background for table */
     5  
     6    /*
     7  
     8    Colors for the PS UI
     9    Depth from furthest back to closest front:
    10      1. --ps-ui-background: #2c2c30:   furthest back darkest color in the UI
    11      2. --ps-ui-foreground: #212124:   sidebar, box, panel, immediately above background
    12      3. --ps-ui-element-bg-primary:    background of "flat" ui elements, such as buttons, dropdown buttons, etc.
    13      4. --ps-ui-element-bg-highlight:  highlight of ui elements, selected app, table highlight, 
    14    */
    15  
    16    --ps-ui-element-bg-primary: #2c2c30; /* non-selected button background, highlighted button text (when buttons are green) */
    17    --ps-ui-element-bg-highlight: #47474e; /* table and dropdown background highlight, disabled button background-color, dark button color, table borders, selected sidebar item highlight background */
    18  
    19    --ps-ui-background: #0e0e13; /* background furthest back color */
    20    --ps-ui-border: #3b3b44; /* Note: same as --ps-grey-primary */
    21    --ps-disabled-button-text: #404047; /* disabled button text */
    22    --ps-ui-foreground: #212124; /* sidebar background and "panel"/"box" background */
    23    --ps-ui-foreground-text: #d8d8d8; /* sidebar text and date picker text */
    24    --ps-dropdown-background: #2c2c30; /* dropdown background */
    25    --ps-sidebar-separator: #d8d8d833; /* sidebar separation lines color */
    26  
    27    --ps-tooltip-bg: #ffffff; /* tooltip header background */
    28    --ps-tooltip-text: #000000; /* tooltip header text */
    29    --ps-tooltip-header-bg: #d8d8d8; /* flamegraph tooltip header */
    30    --ps-right-click-info: #9a9aa0; /* flamegraph tooltip right click info */
    31    --ps-sandwich-pane-info-bg: #f2cd50; /* flamegraph sandwich pane info */
    32  
    33    --ps-dropdown-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' fill='white' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
    34    --ps-dropdown-shadow: #000000; /* dropdown shadow */
    35  
    36    --ps-button-switch-bg: #2ecc40; /* 3 button switch selected button background */
    37    --ps-button-switch-bg-highlight: #61ea71; /* 3 button switch selected button background when hovered*/
    38    --ps-button-switch-text: #242428; /* 3 button switch selected button text */
    39  
    40    --ps-table-highlight-row-bg: #2ecc40; /* table selected row background */
    41    --ps-table-highlight-row-text: #000000; /* table selected row text */
    42    --ps-table-row-text-shadow: #000000; /* table selected row text */
    43  
    44    --ps-selected-app: #df8b53; /* active selected app color in dropdown */
    45    --ps-select-modal-title: #888; /* selected modal title */
    46    --ps-app-selector-filter: #9d9d9f; /* profile type filter in app selector */
    47  
    48    --ps-blue-primary: #3b78e7; /* Standard blue for button, instructions text (right) */
    49    --ps-blue-highlight: #578ae9; /* highlight (hover) blue */
    50    --ps-blue-disabled: #5374b0; /* disabled blue */
    51  
    52    --ps-green-primary: #2ecc40; /* standard green for button */
    53    --ps-green-highlight: #61ea71; /* highlight (hover) green */
    54    --ps-green-disabled: #85c985; /* disabled green */
    55  
    56    --ps-red-primary: #dc3545; /* standard red for button */
    57    --ps-red-highlight: #e4606d; /* highlight (hover) red */
    58    --ps-red-disabled: #eb8c95; /* disabled red */
    59  
    60    --ps-grey-primary: #3b3b44;
    61    --ps-grey-highlight: #47474e;
    62    --ps-grey-disabled: #404047;
    63  
    64    --ps-immutable-green-button-text: #242428;
    65    --ps-immutable-google-button: #e84d3c; /* sign up with google button */
    66    --ps-immutable-google-button-hover: #e53825; /* sign up with google hover */
    67    --ps-immutable-gitlab-button: #fc6d26; /* sign up with gitlab button */
    68    --ps-immutable-gitlab-button-hover: #fc5c0d; /* sign up with gitlab hover */
    69    --ps-immutable-gitlab-button: #3b3b44;
    70    --ps-immutable-gitlab-button-hover: #47474e;
    71    --ps-immutable-gradient-0: #d1283980; /* used for gradient */
    72    --ps-immutable-gradient-1: #3dc1d3cc; /* used for gradient */
    73  
    74    --ps-immutable-off-white: #e6e6e6; /* input background, intro pages text, google,gitlab,github buttons text, */
    75    --ps-immutable-linked-border: #eb7b18; /* linked border color */
    76    --ps-immutable-white: #ffffff; /* white: Use only when it should be white regardless of color mode */
    77    --ps-immutable-placeholder-text: #333333; /* placeholder text color */
    78  
    79    --ps-upload-profile-area-border: #4d4d4d;
    80    --ps-upload-profile-area-bg: #2c2c30;
    81    --ps-upload-profile-btn-bg: #2c2c30;
    82    --ps-upload-profile-icon: #575a6d;
    83    --ps-upload-profile-btn-color: rgba(255, 255, 255, 0.3);
    84  
    85    --ps-fl-toolbar-bg: #2c2c30;
    86    --ps-fl-toolbar-btn-bg: #3c7150;
    87    --ps-toolbar-icon-color: #ffffff;
    88  
    89    --ps-mui-tooltip-background: #3b3b44;
    90  }
    91  
    92  [data-theme='light'],
    93  [data-flamegraph-color-mode='light'] {
    94    --ps-neutral-1: #ffffff;
    95    --ps-neutral-2: #000000;
    96    --ps-neutral-9: #00000008; /* lighter background for table */
    97  
    98    --ps-ui-element-bg-primary: #f8f8f8; /* non-selected button background, highlighted button text (when buttons are green) */
    99    --ps-ui-element-bg-highlight: #c4c4c4; /* table and dropdown background highlight, disabled button background-color, dark button color, table borders, selected sidebar item highlight background */
   100  
   101    --ps-ui-background: #eaeaea; /* original: background furthest back color */
   102    --ps-ui-border: #cccccc; /* border color */
   103    --ps-disabled-button-text: #cccccc; /* disabled button text */
   104    --ps-ui-foreground: #f8f8f8; /* sidebar background and "panel"/"box" background */
   105    --ps-ui-foreground-text: #272727; /* sidebar text and datepicker text */
   106    --ps-dropdown-background: #f8f8f8; /* dropdown background */
   107    --ps-sidebar-separator: #0000004d; /* sidebar separation lines color */
   108  
   109    --ps-tooltip-bg: #ffffff; /* tooltip header background */
   110    --ps-tooltip-text: #000000; /* tooltip header text */
   111    --ps-tooltip-header-bg: #d8d8d8; /* flamegraph tooltip heeader */
   112    --ps-right-click-info: #9a9aa0; /* flamegraph tooltip right click info */
   113    --ps-sandwich-pane-info-bg: #3b78e7; /* flamegraph sandwich pane info */
   114  
   115    --ps-dropdown-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' fill='black' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
   116    --ps-dropdown-shadow: #00000052; /* dropdown shadow */
   117  
   118    --ps-button-switch-bg: #3b78e7; /* 3 button switch selected button background */
   119    --ps-button-switch-bg-highlight: #578ae9; /* 3 button switch selected button background when hovered*/
   120    --ps-button-switch-text: #ffffff; /* 3 button switch selected button text */
   121  
   122    --ps-table-highlight-row-bg: #3b78e7; /* table selected row background */
   123    --ps-table-highlight-row-text: #ffffff; /* table selected row text */
   124    --ps-table-row-text-shadow: #ffffff; /* table selected row text */
   125    --ps-selected-app: #3b78e7; /* active selected app color in dropdown */
   126    --ps-select-modal-title: #888; /* selected modal title */
   127  
   128    --ps-green-primary: #0bdb79; /* standard green */
   129    --ps-green-highlight: #5bdc9e; /* highlight (hover) green */
   130    --ps-green-disabled: #00a757; /* disabled green */
   131  
   132    --ps-upload-profile-area-border: #d8d8d8;
   133    --ps-upload-profile-area-bg: #f8f8f8;
   134    --ps-upload-profile-btn-bg: #f8f8f8;
   135    --ps-upload-profile-icon: #cccccc;
   136    --ps-upload-profile-btn-color: rgba(255, 255, 255, 0.3);
   137  
   138    --ps-fl-toolbar-bg: #00000008;
   139    --ps-fl-toolbar-btn-bg: #3b78e7;
   140    --ps-toolbar-icon-color: #5f6367;
   141  
   142    --ps-mui-tooltip-background: #5f6367;
   143    --ps-app-selector-filter: #9d9d9f;
   144  }