index.css

/* color definitions --------------- */
:root {
  --primary-theme-text-color: #66B689;
  --primary-theme-dark-text-color: #228C50;
  --primary-theme-background-color: #EDF8FF;
  --primary-theme-color: #004C83;
  --primary-theme-hover-color: #003E6B;
  --info-theme-hover-color: #50916c;
  --secondary-theme-color: #303030;
  --warning-theme-color: #F29A2E;
  --danger-theme-color: #B50054;
  --info-theme-color: #66B689;

  --primary-theme-text-color-dark: #252525;
  --secondary-theme-color-dark: #000000;
}

/* main page styles ---------------- */
.container-fluid.full-width-page {
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden;
}

.screenshot-img {
  width: 100%;
  display: block;
  box-shadow: 0px 8px 8px 0px rgba(112,112,112,1);
}
.screenshot-img.connections {
  content: url('assets/connections.png');
}
.screenshot-img.sessions {
  content: url('assets/sessions.png');
}
.screenshot-img.spigraph {
  content: url('assets/spigraph.png');
}
.screenshot-img.spiview {
  content: url('assets/spiview.png');
}

div.demo {
  top: -190px;
  position: relative;
  margin-bottom: -100px;
}
div.demo > h1 {
  margin-top: 50px;
  margin-bottom: 100px;
}
div.demo > h1.demo-small-screen {
  margin-top: -20px;
}

.arkime-brand {
  width: 40vw;
  min-width: 400px;
  content: url('assets/Arkime_Logo_FullGradientBlack@2x.png');
}
.arkime-brand-sm {
  width: 30vw;
}

/* estimators page styles ---------- */
.estimators-content {
  padding-top: 80px;
  padding-bottom: 70px;
}

/* custom select styles */
.input-group .custom-select {
  border-radius: 0 .25rem .25rem 0;
}
.custom-select {
  display: inline-block;
  max-width: 100%;
  height: calc(2.25rem + 2px);
  padding: .375rem 1.75rem .375rem .75rem;
  line-height: 1.25;
  color: #464a4c;
  vertical-align: middle;
  background: #fff;
  -webkit-background-size: 8px 10px;
  background-size: 8px 10px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: .25rem;
  -moz-appearance: none;
  -webkit-appearance: none;
}

/* large labels */
.label-lg {
  font-size: 100%;
  padding: .25rem .5rem;
}

/* small inputs for numbers */
.input-group input {
  max-width: 80px;
}


/* downloads page styles ----------- */
.downloads-content {
  padding-top: 80px;
}

/* button to toggle more downloads */
.show-more-downloads {
  font-size : 90%;
  margin-top: 1rem;
}

/* version time display */
.time {
  margin-top: -6px;
}


/* on page styles ------------------ */
.on-content > .angle-background {
  padding-top: 120px;
}

/* flex styles */
.d-flex {
  display: flex !important;
}
.flex-column {
  flex-direction: column !important;
}
.align-items-start {
  align-items: flex-start !important;
}
.justify-content-between {
  justify-content: space-between !important;
}

/* agenda styles */
.agenda-title {
  font-size: 1.125rem;
  font-weight: bold;
}
.agenda-title .more-info {
  font-size: 1rem;
  font-weight: lighter;
}

/* quote styles */
.quote {
  border-left: 5px solid;
  padding-left: 8px;
}
.quote-danger {
  border-left-color: #d9534f;
}
.quote-info {
  border-left-color: #5bc0de;
}
.quote-warning {
  border-left-color: #f0ad4e;
}


/* arkimeet us page styles --------- */
.arkimeetus-content .angle-background,
.v3-content .angle-background {
  margin-bottom: -200px;
  padding-bottom: 360px !important;
}

.arkimeetus-content .black-arkime,
.v3-content .black-arkime {
  top: -130px;
  position: relative;
  margin-bottom: -200px;
}
.arkimeetus-content .black-arkime > img,
.v3-content .black-arkime > img {
  height: 230px;
}

.arkimeetus-footer, .v3-footer {
  margin-top: 200px;
}

.audio-container {
  width: 300px;
}


/* api page styles ----------------- */
/* make sure columns are wide enough */
.api-container table th {
  min-width: 120px;
}

/* make tables look bootstrappy */
.api-container table {
  width: 100%;
  margin-bottom: 1rem;
  border: 1px solid #dee2e6;
  background-color: transparent;
}

.api-container thead td,
.api-container thead th,
.api-container tbody td,
.api-container tbody th {
  border: 1px solid #dee2e6;
}
.api-container thead td,
.api-container thead th {
  border-bottom: 2px solid #dee2e6;
}

.api-container td,
.api-container th {
  padding: .2rem;
}

/* table stripes */
.api-container table tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, .05);
}


/* parliament page styles ---------- */
.screenshot-img.parliament-dashboard {
  content: url('assets/parliament.png');
}
.screenshot-img.parliament-edit {
  content: url('assets/parliament-edit.png');
}
.screenshot-img.parliament-issues {
  content: url('assets/parliament-issues.png');
}
.screenshot-img.parliament-settings {
  content: url('assets/parliament-settings.png');
}


/* all page styles ----------------- */
.arkime-logo {
  content: url('assets/Arkime_Logo_Mark_Black@2x.png');
}

/* white jumbotrons for custom backgrounds */
.jumbotron-white {
  background-color: #FFFFFF;
}

/* custom button styles */
.btn {
  border-radius: 0 !important;
}
.btn-fw {
  width: 160px;
}

.btn-primary {
  color: #FFF;
  border-color: var(--primary-theme-color);
  background-color: var(--primary-theme-color);
}
.btn-primary:hover {
  color: #FFF;
  border-color: var(--primary-theme-hover-color);
  background-color: var(--primary-theme-hover-color);
}

.btn-info {
  color: #FFF;
  border-color: var(--info-theme-color);
  background-color: var(--info-theme-color);
}
.btn-info:hover {
  color: #FFF;
  border-color: var(--info-theme-hover-color);
  background-color: var(--info-theme-hover-color);
}

.btn-outline-primary {
  color: var(--primary-theme-color);
  border-color: var(--primary-theme-color);
}
.btn-outline-primary:hover {
  color: #FFF;
  border-color: var(--primary-theme-color);
  background-color: var(--primary-theme-color);
}

.btn-outline-secondary {
  color: var(--secondary-theme-color);
  border-color: var(--secondary-theme-color);
}
.btn-outline-secondary:hover {
  color: #FFF;
  border-color: var(--secondary-theme-color);
  background-color: var(--secondary-theme-color);
}

.btn-outline-info {
  color: var(--info-theme-color);
  border-color: var(--info-theme-color);
}
.btn-outline-info:hover {
  color: #FFF;
  border-color: var(--info-theme-color);
  background-color: var(--info-theme-color);
}

.btn-outline-danger {
  color: var(--danger-theme-color);
  border-color: var(--danger-theme-color);
}
.btn-outline-danger:hover {
  color: #FFF;
  border-color: var(--danger-theme-color);
  background-color: var(--danger-theme-color);
}

.btn-outline-warning {
  color: var(--warning-theme-color);
  border-color: var(--warning-theme-color);
}
.btn-outline-warning:hover {
  color: #FFF;
  border-color: var(--warning-theme-color);
  background-color: var(--warning-theme-color);
}

/* theme color dark navbar */
.bg-dark {
  background-color: var(--secondary-theme-color) !important;
}

/* padding for navbar */
.p-nav {
  padding-top: 80px;
}
.p-nav-lg {
  padding-top: 120px;
}

/* misc */
.no-float { float: none; }

.no-wrap { white-space: nowrap; }

.cursor-copy { cursor: copy; }
.cursor-pointer { cursor: pointer; }

.no-decoration { text-decoration: none !important; }

.text-thin { font-weight: 200; }
.text-thick { font-weight: 800; }

.lead-lg { font-size: 1.5rem; }
.lead-xl { font-size: 2.5rem; }

.hide {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
}

/* pretty angled backgrounds */
.angle-background {
  padding-bottom: 7rem;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}
.angle-background-long {
  padding-bottom: 9rem !important;
}
.top-angle-background {
  padding-top: 7rem;
  clip-path: polygon(50% 10%, 100% 0, 100% 100%, 0 100%, 0 0);
}
.double-angle-background {
  padding-top: 7rem;
  padding-bottom: 7rem;
  clip-path: polygon(50% 10%, 100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);
}

/* primary theme color background */
.primary-theme-background {
  background-color: var(--primary-theme-background-color);
}

/* primary theme color text */
.primary-theme-text { color: var(--primary-theme-text-color) !important; }
.dark-primary-theme-text { color: var(--primary-theme-dark-text-color) !important; }

/* navbar owl image */
.nav-link > img,
.navbar-brand > img {
  top: 4px;
  left: 15px;
  height: 50px;
  position: absolute;
}

/* footer styles */
footer.footer {
  color: #aaa;
  padding: 8px 16px;
  border-top: 1px solid #E5E5E5;
}

body.wiki-body footer.footer {
  background: white;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
body.wiki-body .footer-owl {
  position: absolute;
  bottom: 37px;
}

/* move the image up so the owl is sitting on the border */
img.footer-owl {
  position: relative;
  margin-bottom: -2px;
  left: calc(50% - 11px);
}

/* code styles */
pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  border-radius: 3px;
  background-color: #f6f8fa;
}

/* dark dropdown menu */
.dropdown-menu {
  border-color: #242426;
  background-color: #343a40;
}
.dropdown-menu a.dropdown-item {
  color: #FFF;
}
.dropdown-menu a.dropdown-item:hover,
.dropdown-menu a.dropdown-item:focus {
  color: #FFF;
  background-color: #323235;
}
.dropdown-menu li.active a,
.dropdown-menu > li.active > a,
.dropdown-menu div li.active a,
.dropdown-menu > .active > div a,
.dropdown-menu > .active > div:focus a {
  color: #FFF !important;
}

/* anchor offset for navbar */
a.anchor {
  top: -60px;
  display: block;
  position: relative;
  visibility: hidden;
}
a.anchor.anchor-offset-more {
  top: -260px;
}

/* zebra stripey list groups */
ul.list-group.list-group-striped > li.list-group-item:nth-of-type(even) {
  background-color: #f8f9fa;
}

/* condensed list groups */
ul.list-group.list-group-sm > li.list-group-item {
  padding: 0.4rem 0.8rem;
}

/* full height body with scrollable nav and content */
body.full-height-body {
  height: 100%;
  overflow: hidden;
}

.full-height-container {
  right: 0;
  bottom: 0;
  left: 21rem;
  overflow-y: auto;
  position: absolute;
  width: calc(100% - 21rem);
  height: calc(100% - 56px);
  transition: all 1s ease;
}

.full-height-and-width-container {
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  position: absolute;
  height: calc(100% - 56px);
  transition: all 1s ease;
}

.left-nav {
  left: 0;
  bottom: 0;
  width: 20rem;
  overflow-y: auto;
  position: absolute;
  word-break: break-word;
  height: calc(100% - 56px);
  transition: width 1s ease;
}

.with-footer {
  top: 50px !important;
  bottom: 50px !important;
  height: calc(100% - 85px) !important;
}

/* collapsed toc */
.collapsed-toc .left-nav {
  width: 0px;
  height: 0px;
}
.collapsed-toc .collapse-btn {
  left: 0;
}
.collapsed-toc .full-height-container {
  left: 1rem;
  width: calc(100% - 1rem);
}
.collapsed-toc .collapse-btn > .fa {
  transform: rotate(180deg);
}

/* left nav collapse btn */
.collapse-btn {
  left: 20rem;
  bottom: 0;
  cursor: pointer;
  width: 1rem;
  position: absolute;
  height: calc(100% - 56px);
  background-color: #eee;
  transition: left 1s ease;
}
.collapse-btn:hover {
  background-color: #ddd;
}
.collapse-btn > .fa {
  top: 50%;
  left: 0.15rem;
  position: absolute;
  transition: all 1s ease;
}

@media (max-width: 575.98px) {
  .full-height-container {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    overflow-y: auto;
    position: absolute;
    height: calc(100% - 56px);
  }
}

.left-nav div.nav-pills.nav-pills-nested a.nav-link {
  width: 100%;
  overflow: hidden;
  word-break: break-word;
  padding: 4px 8px !important;
}
.left-nav div.nav-pills.nav-pills-nested a.nav-link.nested {
  line-height: 1.2;
  font-size: 0.85rem;
  padding: 4px 10px 4px 20px !important;
}
.left-nav div.nav-pills.nav-pills-nested a.nav-link.nested-more {
  padding: 4px 10px 4px 30px !important;
}
.left-nav div.nav-pills.nav-pills-nested a.nav-link:not(.nested) {
  font-weight: bold;
}

/* hide/show copy link for faq anchors */
.full-height-container h1[id] > span.copy-link,
.full-height-container h2[id] > span.copy-link,
.full-height-container h3[id] > span.copy-link,
.full-height-container td[id] > span.copy-link {
  visibility: hidden;
}
.full-height-container h1[id]:hover > span.copy-link,
.full-height-container h2[id]:hover > span.copy-link,
.full-height-container h3[id]:hover > span.copy-link,
.full-height-container td[id]:hover > span.copy-link {
  visibility: visible;
}

/* wiki tocs */
.wiki-toc {
  padding-left: 10px;
}

.wiki-toc, .wiki-toc ul {
  list-style: none;
}

.wiki-toc > li > ul > li {
  margin-left: -40px;
}
.wiki-toc > li > ul > li > ul > li {
  margin-left: -25px;
}
.wiki-toc > li > ul > li,
.wiki-toc > li > ul > li > ul > li {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wiki-toc > li > a {
  font-weight: bold;
}

.wiki-toc a:hover {
  text-decoration: none;
}

/* Add to calendar override styles */
.add-to-calendar > .add-to-calendar-widget {
  display: inline !important;
  margin-left: 10px !important;
}
.add-to-calendar > .add-to-calendar-widget > .add-to-calendar-label {
  padding: 0 .5rem !important;
  font-size: .875rem !important;
  line-height: 1.5 !important;
  border-radius: 0 !important;
  color: var(--danger-theme-color) !important;
  border: 1px solid var(--danger-theme-color) !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}
.add-to-calendar > .add-to-calendar-widget > .add-to-calendar-label:hover {
  color: #FFF !important;
  border-color: var(--danger-theme-color) !important;
  background-color: var(--danger-theme-color) !important;
}
.add-to-calendar > .add-to-calendar-widget > .add-to-calendar-dropdown {
  width: 200px !important;
  padding: .5rem !important;
}

/* right justified button for copying code from galleries */
.btn.btn-copy-code {
  right: 20px;
  margin-top: 30px;
  position: absolute;
  cursor: copy !important;
}

/* gallery item visibility and transitions */
.gallery-item {
  opacity: 1;
  max-height: 9999px;
  visibility: visible;
  transition: all 0.5s linear;
}
.gallery-item.gallery-item-hidden {
  opacity: 0;
  max-height: 0px;
  visibility: hidden;
}

/* to offset the scroll position of hash links because of the navbar */
.hash-link-offset {
  margin-top: -56px;
  padding-top: 56px;
}

/* dark mode switch */
.switch-container {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  user-select: none;
  font-size: 10px;
  cursor: pointer;
}
.switch {
  display: block;
  position: relative;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  transition: border-color .3s,background-color .3s;
  user-select: none;
  width: 95px;
  height: 26px;
  background-color: rgb(181, 181, 181);
  border-radius: 13px;
}
.dark-theme .switch {
  background-color: rgb(85, 85, 85);
}
.switch-btn {
  width: 20px;
  height: 20px;
  transition: transform 300ms ease 0s;
  background: rgb(255, 255, 255);
  border-radius: 10px;
  transform: translate3d(3px, 3px, 0px);
}
.dark-theme .switch-btn {
  transform: translate3d(72px, 3px, 0px);
  background: rgb(0, 0, 0);
}
.switch-label {
  transition: transform 300ms ease 0s;
  position: absolute;
  top: 0;
  font-weight: 600;
  color: #fff;
  z-index: 1;
  line-height: 26px;
  right: 10px;
}
.dark-theme .switch-label {
  left: 10px;
}

/* dark theme styles --------------- */
.dark-theme {
  color: #EEEEEE;
}

.dark-theme {
  background-color: #111111;
}

.dark-theme .arkime-logo {
  content: url('assets/Arkime_Logo_Mark_White@3x.png');
}

.dark-theme hr {
  border-top: 1px solid #666666;
}

.dark-theme .text-muted {
  color: #AAAAAA !important;
}

.dark-theme .bg-dark {
  background-color: var(--secondary-theme-color-dark) !important;
}

.dark-theme .arkime-brand {
  content: url('assets/Arkime_Logo_FullGradientWhite@3x.png');
}

.dark-theme .primary-theme-background {
  background-color: var(--primary-theme-text-color-dark);
}

.dark-theme .card,
.dark-theme .bg-white,
.dark-theme .jumbotron,
.dark-theme .jumbotron-white {
  background-color: #333333 !important;
}

.dark-theme input,
.dark-theme select,
.dark-theme textarea
.dark-theme .form-control:focus {
  border-color: #CED4DA;
  color: #FFFFFF !important;
  background-color: #000000 !important;
}
.dark-theme pre,
.dark-theme .input-group-append .input-group-text,
.dark-theme .input-group-prepend .input-group-text {
  color: #EEEEEE;
  background-color: #212121;
}

.dark-theme footer.footer {
  border-top: 1px solid #666666;
}
body.wiki-body.dark-theme footer.footer {
  background: var(--secondary-theme-color-dark);
}

.dark-theme .screenshot-img {
  box-shadow: none;
}
.dark-theme .screenshot-img.connections {
  content: url('assets/connections-dark.png');
}
.dark-theme .screenshot-img.sessions {
  content: url('assets/sessions-dark.png');
}
.dark-theme .screenshot-img.spigraph {
  content: url('assets/spigraph-dark.png');
}
.dark-theme .screenshot-img.spiview {
  content: url('assets/spiview-dark.png');
}

.dark-theme .screenshot-img.parliament-dashboard {
  content: url('assets/parliament-dark.png');
}
.dark-theme .screenshot-img.parliament-edit {
  content: url('assets/parliament-edit-dark.png');
}
.dark-theme .screenshot-img.parliament-issues {
  content: url('assets/parliament-issues-dark.png');
}
.dark-theme .screenshot-img.parliament-settings {
  content: url('assets/parliament-settings-dark.png');
}

.dark-theme .collapse-btn {
  background-color: #212121;
}
.dark-theme .collapse-btn:hover {
  background-color: #333333;
}

.dark-theme .list-group-item {
  background-color: #333333;
  border: 1px solid rgba(0,0,0,.5);
}

.dark-theme .alert.alert-info {
  color: #d1ecf1;
  border-color: #03434e;
  background-color: #0c5460;
}