@aics/vole-app 2.11.0

package/es/aics-image-viewer/components/Toolbar/DownloadButton.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { Dropdown, Button, Tooltip } from "antd";
+import ViewerIcon from "../shared/ViewerIcon";
+var DownloadButton = function DownloadButton(_ref) {
+  var fovDownloadHref = _ref.fovDownloadHref,
+    cellDownloadHref = _ref.cellDownloadHref,
+    hasFov = _ref.hasFov;
+  if (hasFov) {
+    var menu = {
+      className: "download-dropdown",
+      items: [{
+        key: "1",
+        label: /*#__PURE__*/React.createElement("a", {
+          href: cellDownloadHref
+        }, /*#__PURE__*/React.createElement(ViewerIcon, {
+          type: "download"
+        }), " Segmented cell")
+      }, {
+        key: "2",
+        label: /*#__PURE__*/React.createElement("a", {
+          href: fovDownloadHref
+        }, /*#__PURE__*/React.createElement(ViewerIcon, {
+          type: "download"
+        }), " Full field image")
+      }]
+    };
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      trigger: ["hover", "focus"],
+      placement: "bottom",
+      title: "Download volume data"
+    }, /*#__PURE__*/React.createElement(Dropdown, {
+      menu: menu,
+      placement: "bottomRight",
+      trigger: ["click"]
+    }, /*#__PURE__*/React.createElement(Button, {
+      className: "ant-btn-icon-only btn-borderless"
+    }, /*#__PURE__*/React.createElement(ViewerIcon, {
+      type: "download"
+    }))));
+  } else if (cellDownloadHref) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      trigger: ["hover", "focus"],
+      placement: "bottom",
+      title: "Download volume data"
+    }, /*#__PURE__*/React.createElement(Button, {
+      className: "ant-btn-icon-only btn-borderless",
+      href: cellDownloadHref
+    }, /*#__PURE__*/React.createElement(ViewerIcon, {
+      type: "download"
+    })));
+  } else {
+    return null;
+  }
+};
+export default DownloadButton;

package/es/aics-image-viewer/components/Toolbar/ViewModeRadioButtons.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { Radio } from "antd";
+import { ViewMode } from "../../shared/enums";
+var viewModes = [ViewMode.threeD, ViewMode.xy, ViewMode.xz, ViewMode.yz];
+var ViewModeRadioButtons = function ViewModeRadioButtons(props) {
+  var onChangeButton = function onChangeButton(_ref) {
+    var target = _ref.target;
+    if (props.mode !== target.value) {
+      props.onViewModeChange(target.value);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Radio.Group, {
+    onChange: onChangeButton,
+    value: props.mode.toString()
+  }, viewModes.map(function (mode, index) {
+    return /*#__PURE__*/React.createElement(Radio.Button, {
+      key: index,
+      value: mode.toString()
+    }, mode);
+  }));
+};
+export default ViewModeRadioButtons;

package/es/aics-image-viewer/components/Toolbar/index.js

@@ -0,0 +1,274 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { UndoOutlined } from "@ant-design/icons";
+import { Button, Radio, Select, Tooltip } from "antd";
+import { debounce } from "lodash";
+import React from "react";
+import ViewModeRadioButtons from "./ViewModeRadioButtons";
+import DownloadButton from "./DownloadButton";
+import { connectToViewerState } from "../ViewerStateProvider";
+import { ImageType, RenderMode, ViewMode } from "../../shared/enums";
+import ViewerIcon from "../shared/ViewerIcon";
+import "./styles.css";
+var RESIZE_DEBOUNCE_DELAY = 50;
+var visuallyHiddenStyle = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: "0",
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  borderWidth: "0"
+};
+var Toolbar = function Toolbar(props) {
+  var containerRef = React.useRef(null);
+  var barRef = React.useRef(null);
+  var leftRef = React.useRef(null);
+  var rightRef = React.useRef(null);
+  var centerRef = React.useRef(null);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    scrollMode = _React$useState2[0],
+    setScrollMode = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    showScrollBtnLeft = _React$useState4[0],
+    setScrollBtnLeft = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    showScrollBtnRight = _React$useState6[0],
+    setScrollBtnRight = _React$useState6[1];
+
+  // Scroll buttons are only visible when toolbar can be scrolled in that direction.
+  // This may change on either scroll or resize.
+  var checkScrollBtnVisible = React.useCallback(function () {
+    var barEl = barRef.current;
+    if (!barEl) {
+      return;
+    }
+    setScrollBtnLeft(barEl.scrollLeft > 0);
+    setScrollBtnRight(barEl.scrollLeft < barEl.scrollWidth - barEl.clientWidth);
+  }, []);
+  var checkSize = React.useCallback(debounce(function () {
+    if (!leftRef.current || !centerRef.current || !rightRef.current || !barRef.current) {
+      return;
+    }
+    var leftRect = leftRef.current.getBoundingClientRect();
+    var centerRect = centerRef.current.getBoundingClientRect();
+    var rightRect = rightRef.current.getBoundingClientRect();
+
+    // when calculating width required to leave scroll mode, add a bit of extra width to ensure that triggers
+    // for entering and leaving scroll mode never overlap (causing toolbar to rapidly switch when resizing)
+    var SCROLL_OFF_EXTRA_WIDTH = 15;
+    if (scrollMode) {
+      // Leave scroll mode if there is enough space for centered controls not to overlap left/right-aligned ones
+      var barWidth = barRef.current.getBoundingClientRect().width;
+      var requiredWidth = Math.max(leftRect.width, rightRect.width) * 2 + centerRect.width + SCROLL_OFF_EXTRA_WIDTH;
+      if (barWidth > requiredWidth) {
+        setScrollMode(false);
+      }
+    } else {
+      // Enter scroll mode if centered controls are overlapping either left/right-aligned ones
+      if (leftRect.right > centerRect.left || centerRect.right > rightRect.left) {
+        setScrollMode(true);
+      }
+    }
+    checkScrollBtnVisible();
+  }, RESIZE_DEBOUNCE_DELAY), [scrollMode, checkScrollBtnVisible]);
+  React.useEffect(checkSize, []);
+  React.useEffect(function () {
+    window.addEventListener("resize", checkSize);
+    return function () {
+      return window.removeEventListener("resize", checkSize);
+    };
+  }, [checkSize]);
+  var scrollX = function scrollX(amount) {
+    return barRef.current.scrollLeft += amount;
+  };
+
+  // Translate vertical scrolling into horizontal scrolling
+  var wheelHandler = function wheelHandler(e) {
+    e.preventDefault();
+    if (e.deltaY === 0) {
+      return;
+    }
+    scrollX(e.deltaY);
+  };
+  var toggleAxis = function toggleAxis() {
+    return props.changeViewerSetting("showAxes", !props.showAxes);
+  };
+  var toggleBoundingBox = function toggleBoundingBox() {
+    return props.changeViewerSetting("showBoundingBox", !props.showBoundingBox);
+  };
+  // TODO remove ant-btn-icon-only hack when upgrading antd
+  var classForToggleBtn = function classForToggleBtn(active) {
+    return "ant-btn-icon-only btn-borderless" + (active ? " btn-active" : "");
+  };
+  var changeViewerSetting = props.changeViewerSetting,
+    resetToSavedViewerState = props.resetToSavedViewerState,
+    visibleControls = props.visibleControls,
+    showAxes = props.showAxes,
+    showBoundingBox = props.showBoundingBox,
+    autorotate = props.autorotate;
+  var twoDMode = props.viewMode !== ViewMode.threeD;
+  var renderGroup1 = visibleControls.viewModeRadioButtons || visibleControls.resetCameraButton || visibleControls.autoRotateButton;
+  var renderGroup4 = visibleControls.showAxesButton || visibleControls.showBoundingBoxButton;
+  var axesToggleTitle = showAxes ? "Hide axes" : "Show axes";
+  var boundingBoxToggleTitle = showBoundingBox ? "Hide bounding box" : "Show bounding box";
+  var turntableToggleTitle = autorotate ? "Turn off turntable" : "Turn on turntable";
+  var getPopupContainer = containerRef.current ? function () {
+    return containerRef.current;
+  } : undefined;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "viewer-toolbar-container".concat(scrollMode ? " viewer-toolbar-scroll" : ""),
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "viewer-toolbar-scroll-left",
+    style: {
+      display: showScrollBtnLeft ? "flex" : "none"
+    },
+    onClick: function onClick() {
+      return scrollX(-100);
+    }
+  }, /*#__PURE__*/React.createElement(ViewerIcon, {
+    type: "closePanel",
+    style: {
+      fontSize: "12px",
+      transform: "rotate(180deg)"
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "viewer-toolbar",
+    ref: barRef,
+    onWheel: wheelHandler,
+    onScroll: checkScrollBtnVisible
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "viewer-toolbar-left",
+    ref: leftRef
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "bottom",
+    title: "Reset to initial settings",
+    trigger: ["focus", "hover"]
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "ant-btn-icon-only btn-borderless",
+    onClick: resetToSavedViewerState
+  }, /*#__PURE__*/React.createElement(UndoOutlined, null), /*#__PURE__*/React.createElement("span", {
+    style: visuallyHiddenStyle
+  }, "Reset to initial settings")))), /*#__PURE__*/React.createElement("div", {
+    className: "viewer-toolbar-center",
+    ref: centerRef
+  }, renderGroup1 && /*#__PURE__*/React.createElement("div", {
+    className: "viewer-toolbar-group"
+  }, visibleControls.viewModeRadioButtons && /*#__PURE__*/React.createElement(ViewModeRadioButtons, {
+    mode: props.viewMode,
+    onViewModeChange: function onViewModeChange(newMode) {
+      return changeViewerSetting("viewMode", newMode);
+    }
+  }), visibleControls.resetCameraButton && /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "bottom",
+    title: "Reset camera"
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "ant-btn-icon-only btn-borderless",
+    onClick: props.resetCamera
+  }, /*#__PURE__*/React.createElement(ViewerIcon, {
+    type: "resetView"
+  }))), visibleControls.autoRotateButton && /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "bottom",
+    title: turntableToggleTitle
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: classForToggleBtn(autorotate && !twoDMode),
+    disabled: twoDMode || props.renderMode === RenderMode.pathTrace,
+    onClick: function onClick() {
+      return changeViewerSetting("autorotate", !autorotate);
+    }
+  }, /*#__PURE__*/React.createElement(ViewerIcon, {
+    type: "turnTable"
+  })))), visibleControls.fovCellSwitchControls && props.hasCellId && props.hasParentImage && /*#__PURE__*/React.createElement("div", {
+    className: "viewer-toolbar-group"
+  }, /*#__PURE__*/React.createElement(Radio.Group, {
+    value: props.imageType,
+    onChange: function onChange(_ref) {
+      var target = _ref.target;
+      return changeViewerSetting("imageType", target.value);
+    }
+  }, /*#__PURE__*/React.createElement(Radio.Button, {
+    value: ImageType.segmentedCell
+  }, "Single cell"), /*#__PURE__*/React.createElement(Radio.Button, {
+    value: ImageType.fullField
+  }, "Full field"))), /*#__PURE__*/React.createElement("div", {
+    className: "viewer-toolbar-group"
+  }, /*#__PURE__*/React.createElement(Select, {
+    className: "select-render-setting",
+    popupClassName: "viewer-toolbar-dropdown",
+    value: props.renderMode,
+    onChange: function onChange(value) {
+      return changeViewerSetting("renderMode", value);
+    },
+    getPopupContainer: getPopupContainer
+  }, /*#__PURE__*/React.createElement(Select.Option, {
+    value: RenderMode.volumetric,
+    key: RenderMode.volumetric
+  }, "Volumetric"), props.canPathTrace && /*#__PURE__*/React.createElement(Select.Option, {
+    value: RenderMode.pathTrace,
+    key: RenderMode.pathTrace,
+    disabled: twoDMode
+  }, "Path trace"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: RenderMode.maxProject,
+    key: RenderMode.maxProject
+  }, "Max project"))), renderGroup4 && /*#__PURE__*/React.createElement("div", {
+    className: "viewer-toolbar-group"
+  }, visibleControls.showAxesButton && /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "bottom",
+    title: axesToggleTitle
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: classForToggleBtn(showAxes),
+    onClick: toggleAxis
+  }, /*#__PURE__*/React.createElement(ViewerIcon, {
+    type: "axes"
+  }))), visibleControls.showBoundingBoxButton && /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "bottom",
+    title: boundingBoxToggleTitle
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: classForToggleBtn(showBoundingBox),
+    onClick: toggleBoundingBox
+  }, /*#__PURE__*/React.createElement(ViewerIcon, {
+    type: "boundingBox"
+  }))))), /*#__PURE__*/React.createElement("div", {
+    className: "viewer-toolbar-right viewer-toolbar-group",
+    ref: rightRef
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "bottom",
+    title: "Download"
+  }, /*#__PURE__*/React.createElement(DownloadButton, {
+    cellDownloadHref: props.cellDownloadHref,
+    fovDownloadHref: props.fovDownloadHref,
+    hasFov: props.hasCellId && props.hasParentImage
+  })), /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "bottom",
+    title: "Screenshot"
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "ant-btn-icon-only btn-borderless",
+    onClick: props.downloadScreenshot
+  }, /*#__PURE__*/React.createElement(ViewerIcon, {
+    type: "camera"
+  }))))), /*#__PURE__*/React.createElement("div", {
+    className: "viewer-toolbar-scroll-right",
+    style: {
+      display: showScrollBtnRight ? "flex" : "none"
+    },
+    onClick: function onClick() {
+      return scrollX(100);
+    }
+  }, /*#__PURE__*/React.createElement(ViewerIcon, {
+    type: "closePanel",
+    style: {
+      fontSize: "12px"
+    }
+  })));
+};
+export default connectToViewerState(Toolbar, ["imageType", "renderMode", "viewMode", "autorotate", "showAxes", "showBoundingBox", "changeViewerSetting", "resetToSavedViewerState"]);

package/es/aics-image-viewer/components/Toolbar/styles.css

@@ -0,0 +1,241 @@
+.viewer-toolbar-container{
+  position:absolute;
+  width:100%;
+  z-index:250;
+}
+
+.viewer-toolbar-container .viewer-toolbar-scroll-left,
+  .viewer-toolbar-container .viewer-toolbar-scroll-right{
+    height:100%;
+    width:18px;
+    justify-content:center;
+    align-items:center;
+    background-color:rgba(75, 75, 75, 0.85);
+    display:none;
+    position:absolute;
+    top:0;
+    z-index:255;
+    transition:color 0.3s;
+  }
+
+.viewer-toolbar-container .viewer-toolbar-scroll-left:hover, .viewer-toolbar-container .viewer-toolbar-scroll-right:hover{
+      color:white;
+    }
+
+.viewer-toolbar-container .viewer-toolbar-scroll-left{
+    left:0;
+  }
+
+.viewer-toolbar-container .viewer-toolbar-scroll-right{
+    right:0;
+  }
+
+.viewer-toolbar-container.viewer-toolbar-scroll{
+    border-bottom:1px solid var(--color-layout-dividers);
+  }
+
+.viewer-toolbar-container.viewer-toolbar-scroll .viewer-toolbar-scroll-left,
+    .viewer-toolbar-container.viewer-toolbar-scroll .viewer-toolbar-scroll-right{
+      display:flex;
+    }
+
+.viewer-toolbar-container.viewer-toolbar-scroll .viewer-toolbar{
+      white-space:nowrap;
+      justify-content:normal;
+
+      overflow-x:scroll;
+      scrollbar-width:none;
+    }
+
+.viewer-toolbar-container.viewer-toolbar-scroll .viewer-toolbar::-webkit-scrollbar{
+        display:none;
+      }
+
+.viewer-toolbar-container.viewer-toolbar-scroll .viewer-toolbar .viewer-toolbar-left{
+        position:static;
+        margin-left:15px;
+      }
+
+.viewer-toolbar-container.viewer-toolbar-scroll .viewer-toolbar .viewer-toolbar-right{
+        position:static;
+        margin-right:15px;
+      }
+
+.viewer-toolbar{
+  padding:12px;
+  text-align:center;
+  display:flex;
+  flex-direction:row;
+  justify-content:space-around;
+}
+
+.viewer-toolbar > div{
+    display:flex;
+    flex-direction:row;
+    align-items:center;
+    vertical-align:middle;
+  }
+
+.viewer-toolbar .viewer-toolbar-left,
+  .viewer-toolbar .viewer-toolbar-right{
+    position:absolute;
+  }
+
+.viewer-toolbar .viewer-toolbar-left:not(:empty), .viewer-toolbar .viewer-toolbar-right:not(:empty){
+      padding:0 12px;
+    }
+
+.viewer-toolbar .viewer-toolbar-left{
+    left:0;
+  }
+
+.viewer-toolbar .viewer-toolbar-right{
+    right:0;
+  }
+
+.viewer-toolbar .viewer-toolbar-group{
+    display:flex;
+    flex-direction:row;
+    align-items:center;
+    vertical-align:middle;
+  }
+
+.viewer-toolbar .viewer-toolbar-group:not(:last-child){
+    margin-right:14px;
+  }
+
+.viewer-toolbar .viewer-toolbar-group > :not(:last-child){
+    margin-right:6px;
+  }
+
+.viewer-toolbar .ant-btn-icon-only{
+    padding-bottom:4px;
+    padding-left:1px;
+  }
+
+.viewer-toolbar .btn-borderless{
+    background-color:var(--color-toolbar-button-bg);
+    border-color:transparent;
+    color:var(--color-text-body);
+  }
+
+.viewer-toolbar .btn-active{
+    color:var(--color-button-icon-activated-text);
+    background-color:var(--color-button-icon-activated-bg);
+    border:1px solid var(--color-button-icon-activated-outline);
+  }
+
+.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled){
+    background-color:black;
+    box-shadow:-1px 0px 0px 0px transparent;
+    transition-property:color, background-color, border-color, box-shadow;
+  }
+
+.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled).ant-radio-button-wrapper-checked,
+    .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):hover{
+      outline:none;
+      color:white;
+      border-color:#aeacae;
+    }
+
+.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled).ant-radio-button-wrapper-checked:not(:first-child), .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):hover:not(:first-child){
+        box-shadow:-1px 0px 0px 0px #aeacae;
+      }
+
+.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled).ant-radio-button-wrapper-checked{
+      background-color:#4b4b4b;
+    }
+
+.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):hover{
+      background-color:#aa88ed;
+      color:white;
+    }
+
+.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):focus-within{
+      outline:none;
+    }
+
+.viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled)::before{
+      content:none;
+    }
+
+.viewer-toolbar.viewer-toolbar .ant-select.select-render-setting{
+    min-width:120px;
+  }
+
+.viewer-toolbar.viewer-toolbar .ant-select.select-render-setting .ant-select-selection-item,
+    .viewer-toolbar.viewer-toolbar .ant-select.select-render-setting .ant-select-arrow{
+      color:var(--color-button-tertiary-text);
+      transition:all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    }
+
+.viewer-toolbar.viewer-toolbar .ant-select.select-render-setting .ant-select-selector{
+      border-color:#aeacae;
+      box-shadow:none;
+      background-color:var(--color-toolbar-button-bg);
+    }
+
+.viewer-toolbar .ant-select.select-render-setting:hover:not(:disabled) .ant-select-selector,
+    .viewer-toolbar .ant-select.select-render-setting:hover:not(:disabled) .ant-select-arrow,
+    .viewer-toolbar .ant-select.select-render-setting:hover:not(:disabled) .ant-select-selection-item,
+    .viewer-toolbar .ant-select.select-render-setting:focus-visible:not(:disabled) .ant-select-selector,
+    .viewer-toolbar .ant-select.select-render-setting:focus-visible:not(:disabled) .ant-select-arrow,
+    .viewer-toolbar .ant-select.select-render-setting:focus-visible:not(:disabled) .ant-select-selection-item,
+    .viewer-toolbar.viewer-toolbar.viewer-toolbar .ant-select-open .ant-select-selector,
+    .viewer-toolbar.viewer-toolbar.viewer-toolbar .ant-select-open .ant-select-arrow,
+    .viewer-toolbar.viewer-toolbar.viewer-toolbar .ant-select-open .ant-select-selection-item{
+      color:var(--color-button-tertiary-hover-text);
+      outline-color:var(--color-button-tertiary-hover-outline);
+    }
+
+.viewer-toolbar-dropdown .ant-select-dropdown-menu-item-active{
+    transition-property:background-color, color;
+  }
+
+.viewer-toolbar-dropdown .ant-select-dropdown-menu-item-disabled,
+  .viewer-toolbar-dropdown .ant-select-dropdown-menu-item-disabled:hover{
+    color:#6e6e6e;
+  }
+
+.viewer-toolbar-dropdown .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled){
+    background-color:transparent;
+    color:white;
+  }
+
+.viewer-toolbar-dropdown .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled).ant-select-dropdown-menu-item-selected{
+      background-color:#4b4b4b;
+    }
+
+.viewer-toolbar-dropdown .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled){
+    background-color:#f6f0ff;
+    color:#4b4b4b;
+  }
+
+@supports selector(:has(:focus-visible)){
+    .viewer-toolbar .ant-select-selection:focus-visible,
+    .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):has(:focus-visible),
+    .viewer-toolbar .btn-borderless:focus-visible{
+      background-color:#aa88ed !important;
+      color:white !important;
+    }
+
+    .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):has(:focus-visible){
+      outline:none;
+      border-color:#aeacae;
+    }
+
+      .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):has(:focus-visible):not(:first-child){
+        box-shadow:-1px 0px 0px 0px #aeacae;
+      }
+}
+
+@supports not (selector(:has(:focus-visible))){
+    .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):focus-within{
+      outline:none;
+      border-color:#aeacae;
+    }
+
+      .viewer-toolbar .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-disabled):focus-within:not(:first-child){
+        box-shadow:-1px 0px 0px 0px #aeacae;
+      }
+}