github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/sass/profile.scss

@use 'sass:math';
@use 'variables' as *;
@use 'mixins/outline' as *;
@use 'components/daterangepicker';
@use 'components/labels';
@use 'components/tagsbar';
@use 'components/button';

@import './reset.scss';
@import 'common.scss';
@import 'login.scss';

//global color variables
@import './variables.css';

html {
  width: 100vw;
}

body {
  font: 400 16px/1.7 -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

  background-color: var(--ps-ui-background);
  color: var(--ps-neutral-2);
  -webkit-font-smoothing: antialiased;
}

.logo-main {
  background-image: url('../images/logo-v3-small.svg');
  background-size: 36px 36px;
  width: 36px;
  height: 36px;
  background-position: 0px 0px;
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}

.followed-by-btn {
  border-radius: 4px 0 0 4px;
}

.followed-by-btn + .btn {
  border-left: none;
  border-radius: 0 4px 4px 0;
}

.btn.btn-active {
  background-color: #999;
  border-color: #999;
  // font-weight: 500;
}

.hidden {
  visibility: hidden;
}

.svg-container,
.canvas-container {
  //  border-radius: 4px;
  //  // box-shadow: 0 1px 2px rgba(0,0,0,0.33);
  //  background-color: #212124;
  //  border: 1px solid #141414;
}

.comparison-container {
  display: flex;
  flex-direction: row;
}

body {
  // this is the width of GitHub README page. so we're targeting this width so that it looks good for demo gif
  min-width: 838px;
}

// see previous comment about min-width
@media only screen and (max-width: 1439px) {
  .navbar-links {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .logo::after {
    content: '';
  }
  .labels {
    margin-left: 5px;
  }
  .drp-button {
    max-width: 375px;
  }
}

#timeline-chart-single,
#timeline-chart-double,
#timeline-chart-left,
#timeline-chart-right,
#timeline-chart-diff,
#timeline-chart-explore-page {
  cursor: crosshair;
}

.flot-tick-label.tickLabel {
  white-space: nowrap;
}

$pane-width: 6px;

.diff-instructions-wrapper {
  display: flex;
  gap: 15px;
}

.diff-instructions-wrapper-side {
  flex: 1 1 0;
}

.left-instructions-wrapper {
  display: flex;
  justify-content: flex-start;
  padding-left: 16px;
}

.left-instructions-text {
  color: rgba(200, 102, 204, 1);
  font-size: 12px;
}

.right-instructions-wrapper {
  display: flex;
  justify-content: flex-end;
  padding-right: 16px;
}

.right-instructions-text {
  color: var(--ps-blue-primary);
  font-size: 12px;
}

.modal-close-btn {
  position: absolute;
  display: block;
  top: 20px;
  right: 20px;
  cursor: pointer;
  &:after {
    content: '✕';
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    text-align: center;
    width: 20px;
    height: 20px;
    line-height: 20px;
  }
  // hit-area
  &:before {
    content: '';
    cursor: pointer;
    top: -20px;
    right: -20px;
    display: block;
    position: absolute;

    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
}

.footer {
  display: block;
  // display: flex;
  padding: 20px 15px;
  text-align: center;
  .footer-space-filler {
    // flex-grow: 1;
  }
  a {
    color: var(--ps-neutral-2);
    text-decoration: none;
    &:hover span {
      text-decoration: underline;
    }
  }
}

html,
body,
#root {
  height: 100%;
  min-height: 100%;
}

// This was used for the sidebar setup
// The trick here is to have 2 items
// The sidebar and the app
// And ONLY scroll the app
// which should occuppy the rest of screen width
// making it look like it's the body's toolbar!
.app {
  height: 100vh;
  display: flex;
}

.pyroscope-app {
  overflow-y: auto;
  flex-grow: 1;

  // define the padding here instead of each individual component
  // to make it easier to maintain
  padding: 0 15px;
}

.pyroscope-app {
  //  display: flex;
  //  flex-direction: column;
}

.main-wrapper {
  flex: 1 0 auto;
  min-width: 890px;

  .singleView-timeline-title {
    margin-bottom: 15px;
  }
}
// stretch all main-wrapper children by default
// so that we don't have to define it for every single page
.main-wrapper > * {
  width: 100%;
}

.no-data-message {
  text-align: center;
  margin: 40px 0;
  display: none;
  &.visible {
    display: block;
  }
}

// used to generate gifs with no scrollbars
.demo-mode {
  body {
    overflow: hidden;
  }

  .root {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px;
    margin-right: -17px;
    box-sizing: content-box;
  }
}

.navbar-space-filler {
  flex-grow: 1;
}