/* LAMMPS look for the buildbot web interface at ci.lammps.org.
 *
 * nginx adds this file and the #lammps-bar navbar to the page, see ci-branding.conf.
 * Colors and navbar follow the LAMMPS website and dashboard.lammps.org.  The page content
 * has no dark mode, since buildbot itself has none.  An upgrade of buildbot can change the
 * class names used here, which then only changes the appearance.
 */
:root {
  --lammps-blue: #1f6db5;
  --lammps-blue-hover: #17527f;
  --lammps-gold: #f4b41a;
  --lammps-dark: #212529;
  --lammps-bar-height: 59px;

  --bb-sidebar-background-color: #2b3035;
  --bb-sidebar-header-background-color: #212529;
  --bb-sidebar-header-text-color: #fff;
  --bb-sidebar-title-text-color: #8f979f;
  --bb-sidebar-footer-background-color: #212529;
  --bb-sidebar-button-text-color: #ced4da;
  --bb-sidebar-button-hover-background-color: #1a1d20;
  --bb-sidebar-button-hover-text-color: #fff;
  --bb-sidebar-button-current-background-color: #212529;
  --bb-sidebar-button-current-text-color: #fff;
  --bb-sidebar-stripe-hover-color: #f4b41a;
  --bb-sidebar-stripe-current-color: #f4b41a;
}

/* ---- navbar of the LAMMPS websites, always dark ---------------------------- */
body { padding-top: var(--lammps-bar-height); }
#root, .modal .modal-dialog {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans",
               "Liberation Sans", Arial, sans-serif;
}
#lammps-bar {
  /* above the page, but below dialogs: Bootstrap has 1040 for the backdrop of a dialog */
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  height: var(--lammps-bar-height); padding: 0 24px;
  display: flex; align-items: center; gap: 16px;
  background: var(--lammps-dark); border-bottom: 3px solid var(--lammps-gold);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans",
        "Liberation Sans", Arial, sans-serif;
  white-space: nowrap;
}
#lammps-bar img { display: block; height: 32px; width: auto; }
#lammps-bar .title { color: #fff; }
#lammps-bar a.link { color: rgba(255, 255, 255, .55); padding: 8px 0; text-decoration: none; }
#lammps-bar a.link:hover { color: rgba(255, 255, 255, .75); }
#lammps-bar nav { display: flex; gap: 32px; margin-left: auto; }
/* only when it fits on the bar next to everything else */
@media (max-width: 1000px) {
  #lammps-bar .icms { display: none; }
}
@media (max-width: 780px) {
  #lammps-bar { padding: 0 16px; gap: 12px; }
  #lammps-bar img { height: 24px; }
  #lammps-bar .title { display: none; }
  #lammps-bar nav { margin-left: auto; gap: 8px; font-size: 13px; overflow-x: auto; }
}

/* ---- buildbot layout below the navbar -------------------------------------- */
.gl-page-with-sidebar .sidebar { top: var(--lammps-bar-height); height: calc(100% - var(--lammps-bar-height)); }
.gl-page-with-sidebar .sidebar ul li.sidebar-main { height: 40px; }
.gl-page-with-sidebar .sidebar ul li.sidebar-main .bb-sidebar-item { font-size: 15px; line-height: 40px; }
.gl-page-with-sidebar .sidebar ul li.sidebar-main .menu-icon { line-height: 40px; }
.gl-page-with-sidebar .sidebar ul li.sidebar-title { color: var(--bb-sidebar-title-text-color); }
/* buildbot places search and download of a log at a distance from the top of the page,
   and over the user menu.  move them below the navbar and to the left of that menu */
.bb-logviewer-text-download-log { top: calc(var(--lammps-bar-height) + 8px); right: 12em; }
/* the logo in the navbar already says what the title of this bar would */
.navbar .navbar-brand { display: none; }

/* ---- the bar of buildbot below the navbar, in the same dark color ----------- */
/* the color is also for parts of the path that are not links */
.navbar.navbar-light.bg-light { background-color: var(--lammps-dark) !important; color: rgba(255, 255, 255, .55); }
.navbar-light .navbar-nav .nav-link, .navbar-light .bb-topbar-navbar-elements .nav-link { color: rgba(255, 255, 255, .55); }
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus,
.navbar-light .bb-topbar-navbar-elements .nav-link:hover,
.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active { color: rgba(255, 255, 255, .75); }
.navbar-light .navbar-toggler { border-color: rgba(255, 255, 255, .25); }
.navbar-light .navbar-toggler-icon { filter: invert(1); }

/* ---- brand colors for what uses the blue of Bootstrap ---------------------- */
a { color: var(--lammps-blue); }
a:hover { color: var(--lammps-blue-hover); }
.btn-primary, .btn-primary:disabled, .btn-primary.disabled {
  background-color: var(--lammps-blue); border-color: var(--lammps-blue);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active {
  background-color: #1a5c9a; border-color: #185490;
}
.dropdown-item.active, .dropdown-item:active,
.nav-pills .nav-link.active, .nav-pills .show > .nav-link,
.icon-button.active:before { background-color: var(--lammps-blue); }
.page-link { color: var(--lammps-blue); }
.page-item.active .page-link { background-color: var(--lammps-blue); border-color: var(--lammps-blue); }

/* the About page shows icon.svg, whose pale atoms are the placeholder for the status color of the
   favicon, and spins it.  show the real icon instead, without spinning */
.nut-spin { animation: none; content: url(icon.png); }