/* -----------------------------------------------------------------------------
   ComboViewer / Viewer / FlipBook
----------------------------------------------------------------------------- */

#ComboViewerPanel {
  & Toolbar {
    border-bottom: 1 solid @accent; // accent line against viewport
    &::separator:horizontal {
      margin: 0 0 0 2;
      padding: 0;
    }
    & QToolButton {
      margin: 0;
      margin-bottom: 3; // Add 1px more margin here to allow the border-bottom
                        // of ToolBar to show.
      margin-left: 2;
      margin-right: 0;
      margin-top: 2;
      padding-top: 1;
      padding-left: 1;
      padding-right: 0;
      padding-bottom: 0;
    }
    & QToolButton#qt_toolbar_ext_button {
      margin-bottom: 1;
      qproperty-icon: url('@{img-url}/toolbar_extension_horizontal.png');
    }
  }
}

#ComboViewerToolOptions {
  border-bottom: 1 solid @accent; // accent line against viewport & ToolBar
}

#ComboViewer,
#ViewerPanel,
FlipBook {
  & #ToolBarContainer {
    background-color: transparent;
    border-top: 1 solid @accent;
    border-bottom: 1 solid @accent;
    padding-right: -1; // hides right border on #ScrollRightButton when
                       // fps slider is disabled
  }
}

#flipCustomize {
  // options menu
  &:extend(.button-tool all);
  margin-left: 3;
  &::menu-button {
    background-color: transparent;
    width: 35;
  }
  &::menu-arrow {
    image: none;
  }
}

QToolBar#FlipConsolePlayToolBar {
  &::separator:horizontal {
    border-color: @accent;
    margin: 0 1 0 1;
  }
  & QToolButton {
    padding-left: 0;
    padding-top: -1;
    padding-right: -1;
    padding-bottom: -2;
    margin: 2 1 2 1;
  }

  #KeyNo,
  #KeyPartial,
  #KeyTotal,
  #PreviousKey,
  #NextKey {
    padding-right: 1;
    padding-left: 1;
    max-width: 20px;
    max-height: 20px;
    padding-bottom: 0;
    padding-top: 0;
  }
  
  #PreviousKey,
  #NextKey {
    margin: 0 2;
  }
}

#ViewerFpsSlider {
  background-color: transparent;
  background-image: url('@{img-url}/@{slider-groove-img}');
  background-position: center center;
  background-repeat: repeat-x;
  border: 0;
  height: 19;
  margin: 0 3 0 37;
  max-width: 300;
  min-width: 0;
  &::sub-line:horizontal {
    subcontrol-origin: absolute;
    background-color: @button-bg-color;
    border: 1 solid @button-border-color;
    border-top-left-radius: 2;
    border-bottom-left-radius: 2;
    height: 16;
    left: -33;
    width: 14;
  }
  &::add-line:horizontal {
    subcontrol-position: left;
    background-color: @button-bg-color;
    border: 1 solid @button-border-color;
    border-top-right-radius: 2;
    border-bottom-right-radius: 2;
    left: 18;
    height: 16;
    image-position: center center;
    width: 13;
  }
  &::sub-line:horizontal,
  &::add-line:horizontal {
    &:hover {
      &:extend(.Button:hover all);
    }
    &:pressed {
      &:extend(.Button:pressed all);
    }
    &:disabled {
      &:extend(.Button:disabled all);
    }
  }
  &::handle {
    &::horizontal {
      @size: 9;
      background-color: @slider-handle-bg-color;
      border: 1 solid @slider-handle-border-color;
      border-radius: 2;
      margin: 2 0 3 0;
      min-width: @size;
      width: @size;
      max-width: @size;
    }
  }
}

FlipConsole {
  qproperty-FpsFieldColor: @input-bg-color;
}

FlipSlider {
  qproperty-PBHeight: 15;

  // slider
  qproperty-PBOverlay: url('@{img-url}/@{flipslider-img}');
  qproperty-PBColorMarginLeft: 1;
  qproperty-PBColorMarginTop: 2;
  qproperty-PBColorMarginRight: 1;
  qproperty-PBColorMarginBottom: 2;
  
  // marker
  qproperty-PBMarker: url('@{img-url}/@{flipmarker-img}');
  qproperty-PBMarkerMarginLeft: 3;
  qproperty-PBMarkerMarginRight: 3;
  qproperty-notStartedColor: @flipslider-notstarted-color;
  qproperty-startedColor: @flipslider-started-color;
  qproperty-baseColor: @flipslider-base-color;
  qproperty-finishedColor: @flipslider-finished-color;
}

Ruler {
  qproperty-ParentBGColor: @viewer-ruler-bg-color;
  qproperty-ScaleColor: @viewer-ruler-scale-color;
  qproperty-HandleColor: @viewer-ruler-handle-color;
  qproperty-HandleDragColor: @viewer-ruler-handle-drag-color;
  qproperty-BorderColor: @viewer-ruler-border-color;
}

#RulerToolOptionValues {
  color: @viewer-ruler-ToolOptionValues-color;
}

#enableBlankFrameButton {
  &:extend(.Button all);
  background-color: transparent;
  border-color: transparent;
  color: @text-color-disabled;
  padding: 0;
  font-weight: bold;
  &:checked {
    border-width: 2px;
  }
}