paranext-dock-layout.component.css

.dock-layout {
  flex-grow: 1;
  margin: 4px;
}

.dock-layout .dock-panel.dock-style-paranext {
  border: none;
}

/*
 * There is a bug where this placeholder box can't receive float windows. If you close all windows but a float window,
 * you will not be able to dock that float window. Submitted and tracking at https://github.com/ticlo/rc-dock/issues/199
 */
/* Hide the fake placeholder box that shows up if you have nothing but a floating window */
.dock-layout .dock-panel.dock-style-place-holder {
  background: none;
}

.dock-layout .dock-panel.dock-style-place-holder .dock-content-holder {
  border: none;
}

.dock-layout .dock-panel.dock-style-paranext .dock-tab {
  margin-right: 0px;
  border: 1px solid #5c5c5c;
  background: #bfbfbf;
  color: #191919;
}

/*
 * Show borders on the sides of the dock-nav, not on the very edges of the dock-tabs,
 * so the borders show even when the tabs don't fit in the space and you have to scroll
 */
.dock-layout .dock-panel.dock-style-paranext .dock-tab:first-child {
  border-left: none;
}

.dock-layout .dock-panel.dock-style-paranext .dock-tab:nth-last-child(2) {
  border-right: none;
}

.dock-layout .dock-panel.dock-style-paranext .dock-nav {
  border-left: 1px solid #5c5c5c;
  border-right: 1px solid #5c5c5c;
}

.dock-layout .dock-panel.dock-style-paranext .dock-tab.dock-tab-active {
  background: #a6c9ff;
  color: #191919;
  border-bottom: 1px solid #ffffff;
}

/* Curved corners including on floating window */
.dock-layout .dock-panel.dock-style-paranext,
.dock-layout .dock-panel.dock-style-paranext .dock-bar,
.dock-layout .dock-panel.dock-style-paranext .dock-nav,
.dock-layout .dock-panel.dock-style-paranext .dock-nav-wrap,
.dock-layout .dock-panel.dock-style-paranext .dock-tab {
  border-radius: 5px 5px 0px 0px;
}

.dock-layout .dock-panel.dock-style-paranext .dock-bar {
  background: #8c8c8c;
  padding: 0;
  border: none;
}

.dock-layout .dock-panel.dock-style-paranext .dock-tab-hit-area {
  /* expand the invisible dock-tab-hit-area a bit to cover the border area above it */
  left: -1px;
  right: -1px;
}

.dock-layout .dock-panel.dock-style-paranext .dock-nav-wrap {
  /*
   * Remove the handle bar at the top of each dock-tab. Note: Now, the tab
   * group can only be grabbed by grabbing the intersection between two tabs
   */
  padding-top: 0px;
  /*
   * For some reason, by default, the tabs are moved down one pixel. That
   * makes them blurry, so this removes that transform
   */
  transform: none;
}

/* tabs take all the space */
.dock-layout .dock-panel.dock-style-paranext .dock-nav-list {
  flex-grow: 1;
}

.dock-layout .dock-panel.dock-style-paranext .dock-tab {
  flex: 1 0 auto;
}

/* global dock layout styles */
.dock-layout > .dock-drop-indicator {
  border: solid 1px #a6c9ff;
  background: #a6c9ff;
}

.dock-layout .dock-content-holder {
  border: 1px solid #5c5c5c;
  border-top: none;
}

/* Hide tab group overflow button when the button is not needed */
.dock-layout .dock-nav-operations-hidden {
  display: none;
}