@nearform/doctor/visualizer/style.css

Programmable interface to clinic doctor

/* Define colors */
html {
  --main-bg-color: rgb(27, 30, 39);

  --banner-logo-color: rgba(255, 255, 255, 0.94);
  --banner-bg-color: rgb(41, 45, 57);

  --alert-border-color: rgb(68, 75, 96);
  --alert-bg-color: rgb(55, 61, 79);
  --alert-text-color: rgb(255, 255, 255);
  --alert-button-color: rgb(200, 201, 203);
  --alert-indicator-color: rgb(233, 67, 100);

  --menu-button-color: rgb(200, 201, 203);

  --graph-text-color: rgb(255, 255, 255);
  --graph-bg-color: rgb(27, 30, 39);
  --graph-interval-color: rgba(255, 255, 255, 0.05);
  --graph-axis-color: rgb(89, 90, 95);
  --graph-tick-color: rgb(151, 151, 151);
  --graph-good-line-color: rgb(74, 144, 226);
  --graph-bad-line-color: rgb(233, 67, 100);
  --graph-alert-color: rgb(233, 67, 100);

  --hover-text-color: rgb(255, 255, 255);
  --hover-bg-color: rgba(82, 87, 111, 0.92);
  --hover-line-color: rgb(100, 107, 127);

  --recommendbar-text-color: rgb(255, 255, 255);
  --recommendbar-arrow-color: rgb(231, 239, 248);
  --recommendbar-top-line-color: rgb(96, 147, 208);
  --recommendbar-bg-color: rgb(63, 125, 198);

  --recommend-text-color: rgb(255, 255, 255);
  --recommend-title-bg-color: rgba(0, 0, 0, 0.15);
  --recommend-link-color: rgb(62, 167, 244);
  --recommend-close-color: rgb(62, 167, 244);
  --recommend-menu-selected-color: rgb(63, 125, 198);
  --recommend-menu-alert-color: rgb(233, 67, 100);
  --recommend-bg-color: rgba(55, 61, 79, 0.99);

  --article-menu-color: rgb(27, 30, 39);
}

html.light-theme {
  --main-bg-color: rgb(239, 239, 239);

  --banner-bg-color: rgb(65, 69, 85);

  --alert-bg-color: rgb(227, 227, 227);
  --alert-border-color: rgb(189, 189, 189);
  --alert-text-color: rgb(101, 101, 101);
  --alert-button-color: rgb(123, 128, 146);

  --menu-button-color: rgb(123, 128, 146);

  --graph-text-color: rgb(101, 101, 101);
  --graph-bg-color: rgb(227, 227, 227);
  --graph-interval-color: rgba(0, 0, 0, 0.1);
  --graph-axis-color: rgb(189, 189, 189);

  --recommend-text-color: rgb(20, 20, 20);
  --recommend-link-color: rgb(31, 91, 162);
  --recommend-close-color: rgb(63, 125, 198);
  --recommend-bg-color: rgb(209, 211, 218);

  --article-menu-color: rgb(227, 227, 227);
}

/* Main layout */

/* z-index: 1; is the hover boxes */
/* z-index: 2; is the recommendation view */

html, body {
  border: 0;
  margin: 0;
  padding: 0;
}

body {
  background: var(--main-bg-color);
  overflow-x: hidden; /* Hover box padding can overflow. Scrollbar appearing moves recommendation box. */
                      /* If that causes mouse to leave hover area, scrollbar flashes on and off in loop. */
}

/* TODO(16-02-2018): Remove once overscroll-behavior-y gets better browser
  support. Currently only supported by Chrome and the next version of Firefox. */
html.recommendation-open.recommendation-read-more-open {
  overflow-y: hidden;
}

#front-matter {
  display: flex;
  align-items: flex-start;
  margin: 22px 45px 24px 49px;
  overflow: hidden;
}

#front-matter #alert {
  flex: 1 1 0px;
  min-width: 0; /* don't consider children for min-width calculation */
}

#front-matter #menu {
  flex: 0 0 auto;
  height: 24px;
  width: 80px;
  margin-top: 5px;
}

#graph {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 200px 200px 200px 200px;
  grid-template-areas:
    "cpu"
    "memory"
    "delay"
    "handles";
  grid-column-gap: 20px;
  grid-row-gap: 50px;
  margin-right: 20px;
}

html.grid-layout #graph {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 200px 200px;
  grid-template-areas:
    "cpu memory"
    "delay handles";
}

#graph .sub-graph.cpu {
  grid-area: cpu;
}

#graph .sub-graph.memory {
  grid-area: memory;
}

#graph .sub-graph.delay {
  grid-area: delay;
}

#graph .sub-graph.handles {
  grid-area: handles;
}

/* Global Typography */

html {
  font-family: sans-serif;
}

html #banner, html #front-matter, html #graph, html #graph .hover text, html #recommendation .details {
  /* light text on dark background doesn't look so good in the browser compared
     to graphical design tools. This is because graphical design tools uses
     antialiasing, where browsers uses subpixel rendering. To make it look
     like in the design tool, use antialiased font rendering. More details,
     especially on why this is a bad idea:
       http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
  */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.light-theme #front-matter, html.light-theme #graph, html.light-theme #recommendation .details {
  -webkit-font-smoothing: unset;
  -moz-osx-font-smoothing: unset;
}

/* Banner layout */
#banner {
  display: flex;
  align-items: center;
  height: 65px;
  background: var(--banner-bg-color);
  position: relative;
}

#banner svg {
  fill: var(--banner-logo-color);
  margin-left: 28px;
}

#banner a:last-child svg {
  position: absolute;
  height: 40px;
  right: 28px;
  top: 13px;
}

/* Menu layout */

#alert {
  border: 1px solid var(--alert-border-color);
  border-radius: 4px;
  background: var(--alert-bg-color);
  color: var(--alert-text-color);
  padding: 5px 13px;
  min-height: 22px; /* just for reducing the initial draw blink */
  max-height: 22px;
  transition: max-height 0.15s;
}

#alert.open {
  max-height: 10em;
}

#alert .summary {
  display: flex;
  height: 22px;
  align-items: center;
}

#alert .summary svg.alert {
  display: none;
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
  fill: var(--alert-indicator-color);
}
#alert.has-issue .summary svg.alert {
  display: block;
}

#alert .summary .title {
  flex: 1 1 0px;
  padding: 0 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#alert .summary .toggle {
  display: none;
  flex: 0 0 auto;
  /* crop empty space in the svg icon */
  position: relative;
  width: 22px;
  height: 22px;
  overflow: hidden;

  cursor: pointer;
}
#alert.has-issue .summary .toggle {
  display: block;
}

#alert .summary .toggle svg {
  /* crop empty space in the svg icon */
  position: absolute;
  top: -8px;
  left: -8px;
  width: 38px;
  height: 38px;

  fill: var(--alert-button-color);
}
#alert .summary .toggle svg.arrow-down {
  top: -6px;
}

#alert:not(.open) .summary .toggle svg.arrow-up { display: none; }
#alert.open .summary .toggle svg.arrow-down { display: none; }

#alert ul.details {
  margin: 8px 0 0 0;
  padding: 0;
  list-style: none;
}

#alert ul.details li {
  padding: 5px 0px;
  cursor: pointer;
}

#alert ul.details li::before {
  display: inline-block;
  width: 18px;
  content: '•';
  padding: 0 2px 0 6px;
}

#menu .toggle {
  float: right;
  cursor: pointer;
  height: 16px;
  padding: 4px;
  margin-left: 10px;
}

#menu svg {
  fill: var(--menu-button-color);
}

#toggle-grid svg {
  height: 16px;
  width: 16px;
}
html:not(.grid-layout) #toggle-grid svg.grid-1x4 { display: none; }
html.grid-layout #toggle-grid svg.grid-2x2 { display: none; }

svg#toggle-theme {
  height: 16px;
  width: 20px;
}

/* recommendation layout */
/* structual: the recommendation structual layout is rather complex, thus
   is is seperated here. The styleing layout follows bellow. */
#recommendation {
  display: flex;
  position: fixed;
  bottom: 0;
  z-index: 2;
  max-height: calc(100vh - 65px); /* 100% - #banner[height] */
  width: 100%;

  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
}

#recommendation .details {
  flex: 0 1 auto;
  box-sizing: border-box;
  min-height: 255px; /* prevent jumps for no-issue and unknow-issue */

  display: none;
  overflow: hidden;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
#recommendation.open .details {
  display: flex;
}
#recommendation.open.read-more-open .details {
  min-height: calc(100vh - 65px - 65px); /* 100% - #banner[height] .bar[height] */
}

/* change the scroll area to be the entire content if the screen-size is
   very small */
@media (max-height: 385px) {
  #recommendation .details {
    min-height: unset;
  }
}

#recommendation .details .menu {
  flex: 0 0 auto;

  display: flex;
  min-height: 48px;
  overflow: hidden;
  box-sizing: border-box;
}

#recommendation .details .menu ul {
  flex: 1 1 0px;
  align-self: flex-end;
}

#recommendation .details .menu .close {
  flex: 0 0 24px;
  height: 24px;
  width: 24px;
  align-self: flex-start;
}

#recommendation .details .content {
   /* make this the offsetParent, such that `.article h2` has a `offsetTop`
      that is relative to `.content` */
  position: relative;

  flex: 0 1 auto;
  /* in firefox `flex: 0 1 auto` takes up the content space instead of the
     available space. Set min-height to indicate that the auto height can
     be less than the content. */
  min-height: 0px;

  overflow-y: scroll;
  overscroll-behavior-y: contain; /* prevent scolling the main window */
}

#recommendation .details .content .read-more {
  display: none;
}
#recommendation.read-more-open .details .content .read-more {
  display: flex;
}

#recommendation .content .read-more .article {
  max-width: 550px;
  flex: 1 1 auto;
}

#recommendation .content .read-more .article-menu {
  flex: 0 0 240px;
  align-self: flex-start;
  position: sticky;
  top: 0;
}
@media (max-width: 670px) {
  #recommendation .content .read-more .article-menu {
    display: none;
  }
}


#recommendation .bar {
  flex: 0 0 65px;
  box-sizing: border-box;
  height: 65px;
  width: 100%;
}

/* recommendation styleing */
#recommendation-space {
  margin-bottom: 75px; /* #recommendation.bar[height] + 10px */
}

#recommendation .details {
  background: var(--recommend-bg-color);
  color: var(--recommend-text-color);
  padding: 18px 28px;
  font-size: 12pt;
  line-height: 1.5em;
}

#recommendation .content a {
  color: var(--recommend-link-color);
  text-decoration: none;
}

#recommendation .content .summary-title {
  padding-top: 16px;
}

#recommendation .content .read-more-button {
  display: none;
  color: var(--recommend-link-color);
  cursor: pointer;
}
#recommendation .content .read-more-button::before {
  content: 'Read more';
}
#recommendation.has-read-more .content .read-more-button {
  display: block;
}
#recommendation.read-more-open .content .read-more-button {
  margin-bottom: 10px;
}
#recommendation.read-more-open .content .read-more-button::before {
  content: 'Read less';
}

#recommendation .content .article h2 {
  background: var(--recommend-title-bg-color);
  font-size: 12pt;
  padding: 12px;
  margin: 0; /* let p and ul tags dominate margin collapse */
  font-weight: bold;
  color: var(--recommend-text-color);
}

#recommendation .content .article p {
  line-height: 24px;
  margin-top: 18px;
  margin-bottom: 18px;
}

#recommendation .content .article-menu {
  margin-right: 40px;
}

#recommendation .content .article-menu h2 {
  font-size: 12pt;
  padding-left: 12px;
}

#recommendation .content .article-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#recommendation .content .article-menu li {
  margin-bottom: 6px;
  padding: 12px;
  background-color: var(--article-menu-color);
  font-weight: bold;
  color: var(--recommend-text-color);
  cursor: pointer;
}

#recommendation .menu {
  border-bottom: 1px solid var(--recommend-menu-selected-color);
}

#recommendation .menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#recommendation .menu ul li {
  float: right;
  height: 35px;
  box-sizing: border-box;
  padding: 0px 4px 0 4px;
  border-bottom: 4px solid transparent;
  margin-right: 30px;
  cursor: pointer;
}

#recommendation .menu ul li.recommendation-tab {
  display: none;
}

#recommendation .menu ul li,
#recommendation .menu ul li.detected,
#recommendation .menu ul li.selected,
#recommendation.undetected-opened .menu ul li.has-read-more {
  display: flex;
}

#recommendation .menu ul li.detected {
  float: left;
}

#recommendation .menu ul li.selected, #recommendation.open.read-more-open .article-menu li.selected {
  border-bottom: 4px solid var(--recommend-menu-selected-color);
  font-weight: bold;
}

#recommendation .menu ul li .menu-text {
  flex: 0 0 auto;
  align-self: center;
  display: block;
  line-height: 31px;
}

#recommendation .menu ul li .menu-text::before {
  display: block;
  width: 100%;
  content: attr(data-content);
  text-align: center;
}
/* Create a hidden element with the attr(data-content) content, but bold.
   This will make the element attain the size as if it had font-weight: bold;.
   This prevents jumping of the surrounding menu items when selected. */
#recommendation .menu ul li .menu-text::after {
  content: attr(data-content);
  display: block;
  font-weight: bold;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

#recommendation .menu ul li .warning-icon {
  flex: 0 0 auto;
  align-self: center;
  margin-left: 10px;
  height: 18px;
  width: 18px;
  display: none;
  fill: var(--recommend-menu-alert-color);
}
#recommendation .menu ul li.detected .warning-icon {
  display: block;
}

#recommendation .menu svg.close {
  fill: var(--recommend-close-color);
  cursor: pointer;
}

#recommendation .menu ul li.show-hide {
  color: var(--recommend-link-color);
}
#recommendation .menu ul li.show-hide .menu-text::before {
  content: 'Browse undetected issues ❮';
}
#recommendation.undetected-opened .menu ul li.show-hide .menu-text::before {
  content: 'Hide ❯';
}

#recommendation .bar {
  border-top: 1px solid var(--recommendbar-top-line-color);
  background: var(--recommendbar-bg-color);
  overflow: hidden;
  cursor: pointer;
}

#recommendation .bar .text::after {
  display: block;
  margin-left: 37px;
  float: left;
  content: 'recommendations';
  font-variant: small-caps;
  font-size: 14pt;
  line-height: 64px;
  color: var(--recommendbar-text-color);
}

#recommendation .bar .arrow {
  float: left;
  margin: 14px 0px 12px 10px;
  height: 38px;
  width: 38px;
}

#recommendation .bar .arrow svg {
  fill: var(--recommendbar-text-color);
  width: 38px;
  height: 38px;
}

#recommendation:not(.open) .bar .arrow svg.arrow-down { display: none; }
#recommendation.open .bar .arrow svg.arrow-up { display: none; }

/* Graph layout */
#graph .sub-graph {
  position: relative;
}

#graph .sub-graph .header {
  /* margin-left: is the `graph g[margin-left] - .domain[stroke-width]` */
  margin: 0 20px 0 48px;
  height: 18px;
  color: var(--graph-text-color);
  font-size: 12pt;
  overflow: hidden;
}

#graph .sub-graph .header .title {
  float: left;
  height: 18px;
  margin-right: 20px;
}

#graph .sub-graph .header .title svg.alert {
  float: right;
  margin-left: 10px;
  height: 18px;
  width: 18px;
  visibility: hidden;
  cursor: pointer;
  fill: var(--graph-alert-color)
}

#graph .sub-graph .header .title .alert.visible {
  visibility: visible;
}

#graph .sub-graph .header .title .name::after {
  content: ' ';
}

#graph .sub-graph .header .legend {
  float: left;
  height: 18px;
  overflow: hidden;
}

#graph .sub-graph .header .legend .legend-item {
  float: left;
  height: 18px;
  margin-left: 20px;
  overflow: hidden;
}

#graph .sub-graph .header .legend .legend-item svg {
  float: left;
  margin-right: 6px;
}

#graph .sub-graph .header .legend .legend-item svg line {
  stroke-width: 2px;
  stroke: var(--graph-good-line-color);
}

#graph .sub-graph .header .legend .legend-item.bad svg line {
  stroke: var(--graph-bad-line-color);
}

#graph .sub-graph .header .legend .legend-item span {
  float: left;
  font-size: 10pt;
  line-height: 18px;
}

#graph .sub-graph .header .legend .legend-item .short-legend {
  display: none;
}

@media (max-width: 670px) {
  #graph .sub-graph .header .legend .legend-item .long-legend {
    display: none;
  }

  #graph .sub-graph .header .legend .legend-item .short-legend {
    display: unset;
  }
}

#graph .sub-graph .hover-area {
  position: absolute;
  z-index: 1;
}

#graph .sub-graph .hover {
  position: absolute;
  display: none;
}

#graph .sub-graph .hover.visible {
  display: block;
}

#graph .sub-graph .hover .background, #graph .sub-graph .hover .pointer {
  fill: var(--hover-bg-color);
}

#graph .sub-graph .hover .line {
  fill: var(--hover-line-color);
}

#graph .sub-graph .hover text {
  alignment-baseline: central;
  fill: var(--hover-text-color);
  font-size: 10pt;
}

#graph .sub-graph .hover .title {
  font-weight: bold;
  text-anchor: middle;
}

#graph .sub-graph .hover .legend {
  font-weight: bold;
}

#graph .sub-graph .hover.above-curve .pointer.below-curve, #graph .sub-graph .hover.below-curve .pointer.above-curve {
  display: none;
}

#graph .sub-graph svg.chart {
  width: 100%;
  height: 180px;
}

#graph .sub-graph .chart .line {
  fill: none;
  stroke: var(--graph-good-line-color);
  stroke-width: 2px;
}

#graph .sub-graph .chart .line.bad {
  stroke: var(--graph-bad-line-color);
}

#graph .sub-graph .chart .tick line {
  stroke: var(--graph-tick-color);
  shape-rendering: crispEdges;
}

#graph .sub-graph .chart .tick text {
  fill: var(--graph-text-color);
  font-size: 10pt;
}

#graph .sub-graph .chart .domain {
  stroke: var(--graph-axis-color);
  stroke-width: 2px;
  shape-rendering: crispEdges;
}

#graph .sub-graph .chart .background {
  fill: var(--graph-bg-color);
}

#graph .sub-graph .chart .interval {
  fill: var(--graph-interval-color);
  display: none;
}

html.recommendation-open #graph .sub-graph .chart .interval {
  display: block;
}