/* -----------------------------------------------------------------------------

   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;

  }

}