cosmos-explorer/less/Common/Constants.less

/******************************************************************************
                                FONTS
/******************************************************************************/

@font-face {
  font-family: wf_segoe-ui_normal;
  src: local("Segoe UI"), url("../../fonts/segoe-ui/west-european/normal/latest.woff");
}

@DataExplorerFont: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
@SemiboldFont: "Segoe UI Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
@GrayScale: "grayscale()";
@NoColor: "brightness(0) saturate(100%)";

@xSmallFontSize: 4px;
@smallFontSize: 8px;
@mediumFontSize: 12px;
@DefaultFontSize: 14px;
@largeFontSize: 16px;

/******************************************************************************
                                COLORS
/******************************************************************************/

@AccentMediumHigh: #0058ad;
@AccentMedium: #004e87;
@AccentHigh: #1ebaed;
@AccentExtraHigh: #55b3ff;
@AccentLow: #edf6ff;
@AccentMediumLow: #ddeefe;
@AccentLight: #eef7ff;
@AccentExtra: #ddf0ff;

@SelectionHigh: #b91f26;
@BaseLight: #ffffff;
@BaseDark: #000000;
@NotificationLow: #fff4ce;
@NotificationHigh: #f9e9b0;
@Purple1: #8a2da5;
@Dirty: #9b4f96;

@BaseLow: #f2f2f2;
@BaseMediumLow: #e6e6e6;
@BaseMedium: #cccccc;
@BaseMediumHigh: #767676;
@BaseHigh: #393939;

@BoxShadow: rgba(118, 118, 118, 0.65);
@GreyOutOpacity: 0.65;

@DefaultFontColor: @BaseHigh;
@DividerColor: @BaseMedium;

@InfoPointerColor: #3b3b3b;

@ErrorColor: @SelectionHigh;

@SelectionColor: #3074b0;

@FocusColor: #605e5c;

@GalleryBackgroundColor: #fdfdfd;

@LinkColor: #2d6da4;

//Icons
@InfoIconColor: #0072c6;
@WarningIconColor: #db7500;
@ErrorIconColor: #b91f26;

/******************************************************************************
                                METRICS
/******************************************************************************/

@SmallSpace: 4px;
@DefaultSpace: 8px;
@MediumSpace: 12px;
@LargeSpace: 16px;

@ButtonBorderWidth: 1px;
@RightPaneWidth: 440px;
@RightPaneMinHeight: 565px;

@PaneLoaderWidth: 110px;
@PaneLoaderHeight: 10px;

@ButtonIconHeight: 18px;

@ScaleFormWidth: 280px;

@ImgWidth: 14px;
@ImgHeight: 14px;

@toggleFontWeight: 700;

//Resource Tree
@TreeLineHeight: 17px;

//top command bar height
@topcommandbarheight: 36px;

//Global Loader
@LoaderHeight: 6px;
@LoaderWidth: 24px;

//HDE constants
@HdeAccountSplitterHeight: 20px;
@AccountNavigationImgWidth: 350px;
@AccountNavigationImgHeight: 190px;
@AccountNavigationExpandCollapseSize: 12px;

// Query Stats
@IETableDataWidth: 650px;

//New Colleciton Pane textbox width
@newCollectionPaneInputWidth: 300px;
@tooltipTextWidth: 280px;
@sharedCollectionThroughputTooltipTextWidth: 150px;
@mongoWildcardIndexTooltipWidth: 150px;
@addContainerPaneThroughputInfoWidth: 370px;
@optionsInfoWidth: 210px;
@noFixedCollectionsTooltipWidth: 196px;
@ThroughputInfoWidth: 215px;
@ThroughputRuInfoWidth: 175px;
@RenewAccessInfoWidth: 115px;
@ErrorDetailsInfowidth: 145px;
@AccessKeyInputWidth: 370px;
@provisionDatabaseThroughputInfo: 200px;

//tabs container
@ActiveTabHeight: 31px;
@ActiveTabWidth: 141px;
@TabsHeight: 30px;
@TabsWidth: 140px;
@ContentWrapper: 111px;
@StatusIconContainerSize: 18px;
@LoadingErrorIconSize: 14px;
@ErrorIconContainer: 16px;
@ErrorIconWidth: 3px;

//form errors
@FormErrorWidth: 320px;
@WarningErrorIconSize: 32px;

// z-index
@Loader_z-index: 5; //this should be higher than that of the splitter to disable it
@NotificationConsole_z-index: 2;

@screen: screen\0;

// CommandBar
@CommandBarButtonHeight: 40px;
@FabricCommandBarButtonHeight: 34px;

/**********************************************************************************
                              Portal Consts
/**********************************************************************************/

@PortalAccentMediumHigh: #0058ad;
@PortalAccentMedium: #004e87;
@PortalAccentLight: #eef7ff;
@PortalAccentAccentExtra: #ddf0ff;

/**********************************************************************************
                              Fabric Consts
/**********************************************************************************/

@FabricFont: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
@FabricToolbarIconColor: "brightness(0) saturate(100%) invert(50%) sepia(17%) saturate(1459%) hue-rotate(81deg) brightness(99%) contrast(94%)";

@FabricBoxBorderRadius: 8px;
@FabricBoxBorderShadow: rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px;
@FabricBoxMargin: 4px 8px 4px 8px;

@FabricAccentMediumHigh: #0c695a;
@FabricAccentMedium: #117865;
@FabricAccentLight: #f5f5f5;
@FabricAccentExtra: #ebebeb;

@FabricButtonBorderRadius: 4px;


/**********************************************************************************
                              Common Flex Property
/**********************************************************************************/

.flex-display(@display: flex) {
  display:~"-webkit-@{display}";
  display:~"-ms-@{display}box"; // IE10 uses -ms-flexbox
  display:~"-ms-@{display}"; // IE11
  display: @display;
}

.flex-direction(@direction: column) {
  -webkit-flex-direction: @direction;
  -ms-flex-direction: @direction;
  flex-direction: @direction;
}

/*************************************************************************************
                                 High contrast mode active
**************************************************************************************/

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {

  .selectedRadio,
  .selectedRadio:hover,
  .selectedRadio:active,
  .selectedRadio.dirty,
  .tab [type="radio"]:checked~label,
  .tab [type="radio"]:checked~label:hover {
    -ms-high-contrast-adjust: none;
    -webkit-text-fill-color: HighlightText;
    color: HighlightText;
    border-color: HighlightText;
    background-color: Highlight;
  }

  .queryMetricsSummaryTuple {

    th,
    td {
      &:nth-child(2) {
        width: @IETableDataWidth;
      }

      &:nth-child(3) {
        width: 50%;
      }
    }
  }
}

/********************************************************************************************
                            Common Hover and Active color
*********************************************************************************************/

.hover() {
  background-color: var(--colorNeutralBackground1Hover);
}

.active() {
  background-color: var(--colorNeutralBackground1Hover);
}

.focus() {
  outline: 1px dashed @FocusColor;
}

.focusedBorder() {
  border: 1px dashed @FocusColor;
}

/************************************************************************************************
                               Common Toggle Switch
*************************************************************************************************/
@ToggleHeight: 30px;
@ToggleWidth: 180px;

.toggleSwitch() {
  max-width: 100%;
  margin-bottom: @SmallSpace;
  padding: @SmallSpace;
  cursor: pointer;
  color: @BaseHigh;
  font-weight: 400;
  font-size: @mediumFontSize;
  font-family: @DataExplorerFont;
}

.selectedToggle() {
  border-bottom: 2px solid @BaseHigh;
}

.unselectedToggle() {
  color: @AccentMediumHigh;
}

/********************************************************************************************************
                             Common Data Explorer Icons
*********************************************************************************************************/
.dataExplorerIcons() {
  cursor: pointer;
  width: @ImgWidth;
  height: @ImgHeight;
}

/*********************************************************************************************************
                            Info Tooltip
**********************************************************************************************************/
.infoTooltip() {
  position: relative;
  display: inline-block;
}

.tooltipText(@textColor: @BaseLight, @backgroundColor: @BaseHigh) {
  visibility: hidden;
  background-color: @backgroundColor;
  color: @textColor;
  position: absolute;
  z-index: 1;
  left: @MediumSpace;
  padding: @MediumSpace;
}

.tooltipTextAfter(@color: @BaseDark) {
  content: "";
  position: absolute;
  right: 100%;
  border-style: solid;
  border-color: transparent @color transparent transparent;
  left: 0px;
  width: 0;
  height: 0;
  border-color: @InfoPointerColor transparent;
}

.tooltipVisible() {
  visibility: visible;
}

.inputTooltip() {
  position: relative;
}

.inputTooltipText(@textColor: @BaseLight, @backgroundColor: @BaseHigh) {
  background-color: @backgroundColor;
  color: @textColor;
  position: absolute;
  z-index: 1;
  padding: @MediumSpace;
}

.inputTooltipTextAfter(@color: @BaseDark) {
  content: "";
  position: absolute;
  right: 100%;
  border-style: solid;
  border-color: transparent @color transparent transparent;
  left: 10px;
  width: 0;
  height: 0;
  border-color: @InfoPointerColor transparent;
}
/*********************************************************************************************************
                           Screen Reader Only
**********************************************************************************************************/
.screenReaderOnly {
  position: absolute;
  left: -9999px;
}