app.sass

// The default danger red hurts my eyes.
$danger: hsl(10, 75%, 61%)

@import "node_modules/bulma/sass/utilities/all"
@import "node_modules/bulma/sass/base/all"
@import "node_modules/bulma/sass/form/all"
@import "node_modules/bulma/sass/elements/button"
@import "node_modules/bulma/sass/elements/progress"
@import "node_modules/bulma/sass/elements/content"
@import "node_modules/bulma/sass/elements/title"
@import "node_modules/bulma/sass/elements/tag"
@import "node_modules/bulma/sass/components/navbar"
@import "node_modules/bulma/sass/components/level"
@import "node_modules/bulma/sass/components/message"
@import "node_modules/bulma/sass/grid/columns"

$tooltip-max-width: 50rem

// Bulma extensions
@import "node_modules/bulma-switch/src/sass/index"
@import "node_modules/bulma-checkradio/src/sass/index"
@import "node_modules/bulma-tooltip/src/sass/index"

@import "themes/dark"
@import "themes/light"

$fixed-font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace
$nav-height: 3.25rem

// Variables don't work with calc! https://github.com/sass/sass/issues/818
$height-sans-padding: calc(100vh - #{$nav-height})

html, body
  height: $height-sans-padding
  width: 100vw
  margin: 0
  padding: 0

body
  *::-webkit-scrollbar
    height: 10px
    width: 10px

.main-columns.columns:not(:last-child)
  margin: 0

.logs-column
  height: $height-sans-padding
  overflow: auto
  padding: 0

.histogram-column
  padding: 0
  margin: 0

.log-wide
  width: 100%

.log-nav
  position: relative

  .navbar-item .columns
    // This fixes columns within a dropdown. For some reason it isn't stretched to full width.
    width: 100%
    padding-bottom: 1rem
    white-space: normal

  .navbar-dropdown.time-picker
    .navbar-item
      padding-right: 0

  .navbar-dropdown .navbar-action
    display: flex
    flex-direction: row-reverse
    padding-right: 1rem

  img
    margin-right: 0.5rem

$progress-height: 0.3rem
.log-progress
  width: 100%
  border-radius: 0
  position: absolute
  height: $progress-height
  bottom: -$progress-height

.logs
  display: block
  font-family: $fixed-font-family
  font-size: 0.9rem
  margin: 0
  padding: 0.5rem 0

  .entry
    white-space: nowrap
    padding-left: 0.5rem
    padding-right: 0.5rem
    position: relative

    $hoverHeight: 1.6rem
    .hover
      padding-left: 0.5rem
      padding-right: 0.5rem
      position: absolute
      height: $hoverHeight
      font-size: 1rem
      width: max-content
      z-index: 10
      border: 2px solid $blue
      visibility: hidden

    .value.focused
      padding: 3px
      margin: -3px

    .unexpanded
      cursor: pointer

      *
        display: inline-block

    .expanded
      display: block
      white-space: pre
      position: relative

      .toggle
        cursor: pointer

        &:hover
          color: $blue

      .context-button
        cursor: pointer
        margin-left: .5rem
        line-height: normal
        vertical-align: middle
        display: inline-block

        i
          pointer-events: none

      .copyable-wrapper
        .copy-button
          visibility: hidden

        &:hover
          .copy-button
            visibility: visible

  .more-marker
    padding: 0
    margin: 0
    margin-top: 5px
    margin-bottom: 5px
    height: 30px
    line-height: 30px
    width: 100%
    background-color: $blue
    text-align: center
    vertical-align: middle
    color: white
    cursor: pointer


#log-welcome, #log-error, #recent-searches
  display: flex
  align-items: center
  justify-content: center

  article
    width: 100%
    max-width: 80rem
    margin: 2rem
    margin-top: 1rem

#log-error
  .message-header
    background-color: #a23e3e

#recent-searches
  .message-header
    background-color: #3273dc

.log-divider
  padding: 0
  margin: 0
  height: 10px
  width: 100%
  background-color: $blue

.log-navbar-dropdown-icon
  padding: 2px 3px 0 0

.time-picker
  width: 50rem

  h1
    font-weight: bold

  .flatpickr-calendar
    width: 100%

    .flatpickr-time .flatpickr-am-pm
      // Makes the AM/PM picker slightly wider, nicer.
      width: 25%

#quick-ranges
  margin-bottom: 0.5rem

  .button
    width: 62px
    text-align: center
    justify-content: center

  .buttons:not(:last-child)
    margin-bottom: 0
    padding-bottom: 1rem

#env-switcher
  width: 5rem
  display: inline-block
  text-align: center

#env-switcher
  width: 5rem
  display: inline-block
  text-align: center

#copy-helper
  height: 1px
  width: 1px
  top: -1000px
  left: -1000px
  position: fixed

// Reduce delay before progress animation is visible.
@keyframes moveIndeterminate
  from
    background-position: 140% 0
  to
    background-position: -200% 0

#histogram
  position: relative

  svg
    width: 100%
    height: calc(100vh - 52px)
    shape-rendering: geometricPrecision

    // We only want pointer events for the SVG itself
    *
      pointer-events: none

  text
    color: white
    font-size: 0.8rem

  line, path
    stroke: white

  rect
    fill: $info
    stroke: rgba(255, 255, 255, 0.5)

  .hovering
    fill: $warning

  .visible-range
    fill: rgba(255, 255, 255, 0.2)
    stroke: none

  .downloaded-range
    fill: rgba(255, 255, 255, 0.2)
    stroke: none

  .drag-range
    fill: rgba(255, 255, 255, 0.3)
    stroke: none

#histogram-tooltip
  background: $link
  color: white
  position: absolute
  width: 250px
  height: 60px
  padding: 2px
  font-size: 0.8rem
  font-family: $fixed-font-family
  border: 0
  pointer-events: none
  left: -200px
  text-align: right
  display: none

//input[type=radio]
//  margin-top: 0.5rem
//  margin-right: 0.3rem

.recent-search-entry
  padding: 3px 0 7px
  border-bottom: 1px solid #ededed
  cursor: pointer

  &:hover
    background: #ededed

  .search-terms
    display: block
    font-weight: 500

  .search-dates
    display: block
    color: #999999

  .tag
    margin-right: 5px

    &.is-primary.is-light
      background-color: #ebfffc
      color: #00947e