@clinic/heap-profiler/src/visualizer/style.css

Programmable interface to Clinic.js Heap Profiler

@import '@clinic/clinic-common/styles/styles.css';
@import '@clinic/clinic-common/base/style.css';
@import "./walkthrough-steps.css";
@import "./toolbar.css";
@import "./stack-bar.css";
@import "./key.css";
@import "./search-box.css";
@import "./flame-graph.css";
@import "./message.css";
@import "./tooltip.css";
@import "./selection-controls.css";
@import "./info-box.css";
@import "@clinic/clinic-common/spinner/style.css";
@import "./filters-bar.css";
@import "./filters-content.css";
@import "./side-bar.css";

html {
  font-size: 62.5%;
}

/*
  fixing monospaced font issue
  reference : http://code.iamkate.com/html-and-css/fixing-browsers-broken-monospace-font-handling/
*/
pre,
code,
kbd,
samp,
tt {
  font-family: var(--nc-font-family-monospace);
  font-size:1em;
}

html {
  /* Define colors */

  --spinner-border-color: var(--flame-orange);

  --main-bg-color-val: 27, 30, 39;
  --max-contrast: rgb(255, 255, 255);
  --opposite-contrast: rgb(var(--opposite-color-val));
  --opposite-color-val: 0, 0, 0;
  --light-glare: rgba(255, 255, 255, 0.3);

  --main-bg-color: rgb(var(--main-bg-color-val));
  --main-bg-translucent: rgba(var(--main-bg-color-val), 0.94);

  --banner-bg-color-val: 50, 53, 61;
  --banner-bg-color: rgb(var(--banner-bg-color-val));
  --nc-colour-header-background: rgb(var(--banner-bg-color-val));

  --options-menu-bg-color: rgb(15, 18, 26);
  --footer-bg-color: rgb(15, 18, 26);
  --footer-color: rgba(255, 255, 255, 0.9);

  --clickable-bg-hover : rgb(15, 15, 15);

  --dark-grey-val: 25, 26, 30;

  --grey-blue: rgb(76, 92, 138);
  --primary-grey: rgb(121, 122, 124);
  --grey-highlight-color-val: 191, 192, 194;
  --grey-highlight: rgb(var(--grey-highlight-color-val));
  --flame-orange: rgb(255, 170, 43);



  --checkbox-border-color: rgba(var(--grey-highlight-color-val), 0.9);

  --area-color-app: var(--max-contrast);
  --area-color-deps: rgb(255, 170, 43);
  --area-color-core: rgb(230, 230, 230);

  /* scrollbars */
  --scrollbar-primary-color-val: 145, 169, 179;
  --scrollbar-primary-color: rgb(var(--scrollbar-primary-color-val));
  --scrollbar-bg: var(--light-glare);
  --scrollbar-shadow: rgba(0, 0, 0, 0.5);
  --scrollbar-thumb: rgba(var(--scrollbar-primary-color-val), 0.2);
  --scrollbar-thumb-outline: rgba(var(--scrollbar-primary-color-val), 0.849);

  /* Define text sizes */
  --main-text-size: 1.2rem;
  --small-text-size: 1rem;

  /* base component style */
  --nc-button-bgColor: var(--opposite-contrast);
  --nc-button-color: var(--max-contrast);
  --nc-button-fontSize: var(--small-text-size);
  --nc-button-bgHover: var(--clickable-bg-hover);
  --nc-button-hoverOutline: var(--light-glare);

  /* --nc-link-bgColor */
  --nc-link-color: rgb(63, 125, 198);
  --nc-link-fontSize: var(--small-text-size);
  /* --nc-link-bgHover */
  /* --nc-link-hoverOutline */
  
  --nc-checkbox-bgColor: var(--opposite-contrast);
  --nc-checkbox-hoverColor: var(--clickable-bg-hover);
  --nc-checkbox-hoverOutline: var(--light-glare);
  --nc-checkbox-borderColor: var(--checkbox-border-color);
  --nc-checkbox-checkedIconColor: var(--max-contrast);
  --nc-checkbox-indeterminateIconColor: var(--grey-highlight);
  
  --nc-dropdown-color: var(--max-contrast);
  --nc-dropdown-bgColor: var(--opposite-contrast);
  --nc-dropdown-contentBg: var(--opposite-contrast);
}


/* Overrides for light theme */
/* just a poc for now... */
html.light {
  --main-bg-color-val: 197, 224, 239;

  --max-contrast: rgb(0, 0, 0);
  --opposite-contrast: rgb(255, 255, 255);

  --banner-bg-color: rgba(0, 0, 0, 0.1);
  --options-menu-bg-color: rgba(0, 0, 0, 0.1);
  --footer-bg-color: rgba(0, 0, 0, 0.1);
  --footer-color: rgba(0, 0, 0, 0.9);
  --nc-colour-header-background: rgba(0, 0, 0, 0.1);
}

/* Overrides for Presentation mode */
/* just a poc for now... */
html.presentation-mode {
  --banner-bg-color: rgb(120, 122, 128);
  --main-bg-color: rgb(76, 78, 84);

  --grey-highlight: rgb(255, 255, 255);
  --primary-grey: rgb(var(--grey-highlight-color-val));

  --area-color-deps: rgb(255, 170, 43);
  --area-color-core: rgb(160, 155, 215);

  --clickable-bg-hover : rgb(0, 0, 0);
}

/* Main layout */

html,
body {
  border: 0;
  margin: 0;
  padding: 0;
  height: 100vh;
}

body {
  background: var(--main-bg-color);
  display: flex;
  flex-direction: column;
}

/* MS Edge doesn't like background colors on body elements when devtools open */
main {
  flex-grow: 1;
  background: var(--main-bg-color);
}

/* Global */

html * {
  box-sizing: border-box;
}

.hidden {
  /* Hides elements even if display is defined for structural reasons */
  display: none !important;
}

.collapsed .collapsible-content-wrapper {
  display: none;
}


/* breakpoints helpers */

.after-bp-1,
.after-bp-2 {
  display: none!important;
}


@media screen and (min-width: 630px) {
  .after-bp-1 {
    display: inherit!important;
  }
  .checkbox .after-bp-1{
    display: inline!important;
  }

  .before-bp-1 {
    display: none!important;
  }
}


@media screen and (min-width: 930px) {
  .after-bp-2 {
    display: inherit!important;
  }
  .checkbox .after-bp-2{
    display: inline!important;
  }

  .before-bp-2 {
    display: none!important;
  }
}

/* Header */
.nc-header {
  flex-shrink: 0;
}

.is-loading-font .nc-header {
  opacity: 0;
}

div#main-content {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

/* Footer */
#footer {
  background-color: var(--opposite-contrast);
  color: var(--footer-color);
  flex-shrink: 0;
  padding: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.5);
}

#footer .m-search-box-wrapper {
  display: flex;
  width: 100%;
  padding: 10px;
  background-color: var(--banner-bg-color);
  border-bottom: 1px solid var(--light-glare);
  display: none;
}

#footer .m-search-box-wrapper.show {
  display: flex;
}

#footer #m-search-box input{
  font-size: 1.6rem;
}

#footer #m-search-box{
  width: 100%;
  margin-right: 10px;
}

/* Layout definition */
#one-col-layout {

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  min-height: 1px;  /* apparently this is needed to fix FireFox */
}

#one-col-layout > * {
  flex-shrink: 0;
}

/* SVG icons */
svg.icon-img path {
  /* Default to same fill as adjacent text */
  fill: currentColor;
}

svg.icon-img {
  /* Default to same size as adjacent text */
  width: 1em;
  height: 1em;
  display: block;
}


/* custom accordion style */
.nc-accordion.nc-accordion--secondary {
  padding: 0 5px;
  background-color: transparent;
  border: none;
  font-size: 1em;
}

.nc-accordion.nc-accordion--secondary .nc-collapsible-container {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nc-accordion.nc-accordion--secondary.expanded .nc-collapsible-container {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.nc-accordion.nc-accordion--secondary > .nc-button {
  --nc-button-bgColor: rgba(255, 255, 255, 0.1);
  --nc-button-bgHover: rgba(255, 255, 255, 0.08);
  width: auto;
  font-size: 0.8rem;
  padding: 0 0.5em;
}

.nc-accordion.nc-accordion--secondary > .nc-button .nc-button__inner-container {
  padding-right: 3em;
}

/* TODO: refine this then migrate it to Clinic Common */
.pulsing {
  animation: pulse 0.8s infinite linear;
}

@keyframes pulse {
  0% {
    opacity: 0.5;
  }
  80% {
    opacity: 0.1;
  }
  100% {
    opacity: 0.5;
  }
}