themes/solr/static/css/base.css

/*
  Licensed to the Apache Software Foundation (ASF) under one
  or more contributor license agreements.  See the NOTICE file
  distributed with this work for additional information
  regarding copyright ownership.  The ASF licenses this file
  to you under the Apache License, Version 2.0 (the
  "License"); you may not use this file except in compliance
  with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing,
  software distributed under the License is distributed on an
  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  KIND, either express or implied.  See the License for the
  specific language governing permissions and limitations
  under the License.
*/
html, body {
  font-family: 'Helvetica Neue', sans-serif; /* substitute for proxima nova */
  color: #333;
}

body {
  overflow-x: clip; /* clip (not hidden) so it doesn't create a scroll container that breaks position:sticky */
  pointer-events: none;
}

body > * {
  pointer-events: auto;
}

.alignleft {
  float: left;
}

.alignright {
  float: right;
}

.container {
  padding: 40px 0;
}

code, pre {
  font-family: Menlo, Consolas,"Liberation Mono",Courier,monospace;
  color:#4F504D;
}

code {
  font-weight: 500;
}

/*
 * Elements
 */
:focus {
  outline: 0;
}

.offset {
  position: relative;
  top: -150px;
  padding-top: 150px;
  margin-bottom: -130px;
  z-index: -1000;
}

.offset-medium {
  position: relative;
  top: -115px;
  padding-top: 115px;
  padding-bottom: 0px;
  margin-bottom: -115px;
  z-index: -1000;
}

.offset-small {
  position: relative;
  top: -56px;
  padding-top: 112px;
  margin-bottom: -56px;
  z-index: -1000;
}

.btn1{
  border: 1px solid #d1d3d4;
  background-color:inherit;
  text-transform: uppercase;
  color:#000;
  padding: 0.7em 1em;
  font-weight: 500;
  margin: 0;
}
.btn1:hover, .btn1:focus {
  color:#ff833d;
  background:inherit;
}

div.centered {
  text-align: center;
  padding-top: 32px;
}

a.btn, button {
  border: 1px solid #d1d3d4;
  background-color:inherit;
  text-transform: uppercase;
  color:#000;
  padding: 0.7em 1em;
  font-weight: 500;
  margin: 0;
}

a.btn:hover, a.btn:focus,
button:hover, button:focus {
  color:#ff833d;
  background:inherit;
}

a.btn.white, 
button.white {
  color:#fff;
}

a.btn.white,
button.white:hover {
  color:#262130;
  background:#fff;
}

/*
 * Header
 */

.header-section {
  position: fixed;
  z-index: 999;
  min-width: 100%;
  background:#D9411E;
}

.header-fill {
  padding-top: 90px;
}

.top-bar, .top-bar .name {
  background:#D9411E;
  height: 90px;
}

.top-bar .name .logo {
  height: 100%;
  position:relative;
  left: 15px;
  padding: 15px 0 15px 0;
}

/* Keep the logo above the full-height nav section (Foundation gives it z-index:98)
   so the section's full-width box doesn't intercept clicks on the logo */
.top-bar .title-area {
  position: relative;
  z-index: 100;
}

.top-bar-section {
  height: 100%;
}

.top-bar-section ul li {
  height: 100%;
  align-content: center;
 }

.top-bar-section ul li, .top-bar-section li:not(.has-form) a:not(.button) {
  background: #D9411E;
}

.top-bar-section li:not(.has-form) a:not(.btn):hover {
  background:inherit;
  color: #25202f;
}

.top-bar-section .navigation a.selected {
  color: #25202f;
}

/* Highlight the top-level nav item that corresponds to the current section */
body.nav-news     .top-bar-section .navigation a[href$="/posts.html"],
body.nav-security .top-bar-section .navigation a[href$="/security.html"] {
  color: #25202f;
  font-weight: bold;
}

.top-bar-section li:not(.has-form) a.btn:hover, .top-bar-section li:not(.has-form) a.btn:focus {
  background:#fff;
  color: #25202f;
}

.top-bar-section ul li>a, 
.top-bar-section ul li>a.btn, 
.top-bar.shrink.expanded .top-bar-section ul li>a, 
.top-bar.shrink.expanded .top-bar-section ul li>a.btn {
  padding: 0 10px !important;
  transition: all 0.1s ease;
  text-transform:uppercase;
  font-size:0.92rem;
}

.top-bar-section ul li>a.btn {
  margin: 0;
  background-color: transparent;
  text-align:left;
}

.top-bar.expanded .toggle-topbar a {
  color:#fff;
}

.top-bar.expanded .top-bar-section li:not(.has-form) a:not(.btn):hover {
  background:#fff;
}

/* full-width nav styles */
@media only screen and (min-width: 47.5em) {
  .top-bar-section .navigation {
    height: 100% !important;
  }
  .top-bar .name .logo {
    left: 15px;
  }
  .top-bar .btn {
    padding-top: .65rem;
    padding-bottom: .55rem;
    top: 2px;
    text-align:center;
    border: 1px solid #fff;
  }
  .top-bar .btn:hover {
    background:#fff;
  }
}

/* shrink header styles */
.top-bar.shrink, .top-bar.shrink .name, .top-bar.expanded .name {
  height: 55px;
}

.top-bar.shrink.expanded {
  height:auto;
}

.top-bar.shrink .name .logo, .top-bar.expanded .name .logo {
  padding: 10px 0 15px 0;
}

.top-bar.shrink .top-bar-section ul li>a, .top-bar.shrink .top-bar-section ul li>a.btn {
  font-size: 0.8em;
}

.top-bar.shrink .top-bar-section li:not(.has-form) a:not(.button) {
  line-height: 35px;
}

.top-bar.shrink.expanded .navigation {
  margin: 0;
}

.top-bar.shrink.expanded .top-bar-section li:not(.has-form) a:not(.button) {
  line-height: 1.6;
}

.top-bar.shrink .button {
  padding: 10px 20px;
}

/*
 * Global
 */
h1, h2, h3, h4, h5 {
  font-family: 'Raleway', 'Helvetica Neue', sans-serif;
  font-weight:300;
}

h1 {
  margin-bottom: 20px;
  color: #d9411e;
}

h2 {
  margin-bottom: 0.8em;
  color: #D9411E;
}

h3 {
  color: #666;
}

h4 {
  color: #666;
}

h5 {
  color: #999;
}

p {
  line-height: 1.8em;
  color:#262130;
}

.button {
  background-color: #ff833d;
  text-transform: uppercase;
}

.button:hover,
.button:focus,
.button:active {
  background-color: #ff5c00;
}

.annotation {
  color: #262130;
  text-transform: uppercase;
  margin-bottom: 0.8em;
  font-weight:400;
}

/*
 * PAGES
 */

.homepage h1.red {
  color: #d9411e;;
}

.page h1, .page h2, .page h3 {
  font-family: 'Raleway', 'Helvetica Neue', sans-serif;
  color: #262130;
}

.page h1, .subnav h1 , h1.news {
  font-weight:300;
}

.subnav h1 , h1.news {
  margin-bottom: 30px;
}

.subnav h1 , h1.news {
  line-height:0.8;
}

.page h1 small, .subnav h1 small, h1.news small {
  font-size:0.4em;
  color:#333;
}

.page h2, .page h3 {
  font-weight:500;
}

.page h2 {
  font-size:1.5em;
}

.page h3 {
  font-size:1.4em;
}

.page p, .page ul li, .page ol li {
  color:#333;
}

.page a {
  color: #D9411E;
}

.page .date {
  color: #D9411E;
  text-transform:uppercase;
  font-weight:500;
}

#resources {
  text-align:center;
}

pre {
  white-space:pre-wrap;
  overflow:hidden;
}

/*
 * Alternate styles (blue sections)
 */
.alternate .annotation {
  color: #D9411E;
}

.alternate h1 {
  font-weight: 100;
  color: #212121;
}

.alternate h2 {
  font-weight: 300;
}

hr {
  margin-bottom: 2em;
  color:#e4e2dd;
}

/*
 * Small styles
 */

.small h1 {
  font-size: 2em;
}

.small h2 {
  font-size: 1.6em;
}

.small h3 {
  font-size: 1.4em;
}

.small h4 {
  font-size: 1.2em;
}

.small h5 {
  font-size: 1em;
}

.small p {
  font-size: 0.9em;
}

/*
 * Section styles
 */
section {
  padding: 40px 0;
  color: #333;
  text-align:center;
}

.artifacthub-widget > section {
  padding: 0;
}

section.gray {
  background-color: #f9f8f8;
}

section.orange {
  background-color: #D9411E;
  color: #fff;
  padding:60px 0 80px 0;
  text-align:center;
  position:relative;
}

section.orange .annotation {
  color:#fff;
}

section.orange h1 {
  color: inherit;
}

section.orange h2 {
  color: inherit;
}

section.orange p {
  color:#fff;
  font-weight: 300;
  font-size: 1.1em;
}

section.orange .down-arrow {
  position: absolute;
  left: 50%;
}

section.orange .down-arrow .red {
  color: #ff833c;
}

section.orange .down-arrow a {
  color:#fff;
}

section.orange.full-width {
  margin-left: -100%;
  margin-right: -100%;
  margin-bottom: 2em;
}


/*
 * Hero
 */
.hero {
  background-color: #262130;
  color: #fff;
  position:relative;
  padding: 100px 0;
}

.hero h1,
.hero p {
  color: #fff;
}

.hero p {
  margin-bottom: 40px;
  font-weight: 300;
  font-size: 1.1em;
}

.hero .button {
  background-color: #305cb3;
}

.hero .button:hover,
.hero .button:focus,
.hero .button:active {
  background-color: #0045cd;
}

.hero .down-arrow {
  position: absolute;
  bottom: -80px;
  left: 50%;
}

.hero .down-arrow .red {
  color: #D9411E;
}

.hero .down-arrow a {
  color:#fff;
}

.security {
  background-color: #FFBF78;
  padding-top: 10px;
  padding-bottom: 0px;
  display: none;
}

.security a {
  color: #262130;
}

.topnews {
  background-color: #59BD81;
  padding-top: 15px;
  padding-bottom: 0px;
  display: none;
}

.topnews .row p a {
  color: #262130;
  font-size: larger;
}

.topnews-operator {
  background-color: #59BD81;
  padding-top: 15px;
  padding-bottom: 0px;
  display: none;
}

.topnews-operator .row p a {
  color: #262130;
  font-size: larger;
}

/*
 * Footer
 */
footer {
  background-color: #262130;
  color: #f9f8f8;
  padding: 40px 0 20px 0;
}

footer h4 {
  padding-bottom:15px;
  text-transform:uppercase;
  font-size: 1em;
}

footer h4, footer ul li a, .page footer ul li a  {
  color: #f9f8f8;
  font-family: 'Raleway', 'Helvetica Neue', sans-serif;
}

footer ul li a, .page footer ul li a {
  font-weight:300;
  font-size:0.9em;
}

footer ul {
  list-style: none;
  margin-left: 0;
}

footer .copyright {
  padding: 50px 0 40px 0;
}

footer .copyright p {
  color: #bbb;
  font-size:0.7em;
  text-align:center;
}

/*
 * Gray/white section styles
 */

.white h1 {
  line-height:0.8;
}

.gray .annotation {
  color: #262130;
  font-size: 1em;
}

.gray h1 {
  color: #d9411e;
  line-height:0.8;
}

.gray .box h3 {
  color:#000;
  font-size:1.4em;
  margin-bottom:20px;
}

.gray .box p {
  font-size: 0.9em;
  line-height: 1.3em;
  color:#333;
}

.gray .box button {
  font-size: 0.75em;
  margin-bottom: 0;
}

.gray .box button:hover {
  background-color:inherit;
  color:#ff833d;
}

.gray .box:hover {
  background:#fff;
  border: 1px solid #333;
  cursor:pointer;
}

.gray .box:hover button {
  color:#ff833d;
}

.gray .box .img {
  height:120px;
}

.gray .box .img img {
  height:95px;
}

.full-width .gray .box {
  padding:0;
  border:none;
}

.full-width .gray .box:hover {
  border:none;
  cursor:default;
  background:inherit;
}

/* box variants */
.col-4 .box {
  margin: 15px;
  padding: 5px 5px 15px 5px;
  border: solid 1px transparent
}

.col-4 .box .title {
  height: 70px;
}

.col-3 .box {
  margin: 15px;
  padding: 20px 20px 30px 20px;
  border: solid 1px transparent
}

.col-3 .box .title {
  height: 70px;
}

[class*="block-grid-"] {
  display: flex;
  padding: 0;
  margin:0;
  flex-wrap: wrap;
  justify-content: center;
}

/*
 * Solr books
 */
.books {
  margin:40px 0;

}

.books > div{
    padding-left: 5px;
}

.powered{
    line-height: 99px;
    height: 99px;
}
.powered div{
    line-height: 99px;
    height: 99px;
    padding-left: 10px;
    padding-right: 10px;
}

.powered img{
    vertical-align: middle;
    display: inline;
}

/*
 * Slider
 * TODO: Not in use
*/
.slider-prev {
  left:-25px;
  color:#ffa16b;
}

.slider-next {
  right:-25px;
  color:#ffa16b;
}

.slider-prev, .slider-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  cursor: pointer;
  top: 50%;
  margin-top: -10px;
}

/*
 * FEATURES PAGE
 */
section.list {
  padding:80px 0;
}

section.list {
  text-align:left;
}

section.list ul li {
  font-family: 'Raleway', 'Helvetica Neue', sans-serif;
  font-weight:300;
  color: #333;
  font-size: 1.2em;
  padding-right:20px;
}

section.list ul li p {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight:300;
  color: #A13016;
  margin-top: 10px;
  font-size: 0.8em;
}

section.list ul li ul {
  padding-top: 10px;
}

section.list ul li ul li {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight:300;
  color: #A13016;
  margin-top: 2px;
  font-size: 0.96em;
}

.anchor-top {
  z-index: 10;
  top: 90px;
  position: sticky;
  width: 100%;
  max-width: 100%;
}

.anchor-fixed {
  top: 55px;
}

/*
 * Subnav style pages
 */
.sub-nav {
  display:inline-block;
  margin-bottom:0;
}

.sub-nav-container {
  /* display:contents so the sticky .anchor-top child is contained by the tall
     .container (not this short wrapper), giving it room to stay pinned */
  display: contents;
}

.sub-nav-border {
  padding: 20px 0;
  background: white;
  border-top: 1px solid #e4e2dd;
  border-bottom: 1px solid #e4e2dd;
}

.sub-nav dd {
  margin-bottom: 0;
}

.sub-nav dd a {
  padding-right: 30px;
  padding-left: 15px;
  border-right:1px solid #e4e2dd;
  position: relative;
  z-index: 10;
}

.sub-nav dd a.selected {
  color: #2d7a3e;
  font-weight: bold;
}

.codehilite {
  margin: 10px 0;
  background-color: #EEEEEE;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 15px;
}

pre {
  line-height:1.5;
}

ul.breadcrumbs {
  background-color:transparent;
  border: none;
}

/*
 * Sidebar
 */

.side-nav {
  padding:25px;
  border:1px solid #e4e2dd;
  margin-bottom:40px;
}

ul.side-nav > li {
  border-top:1px solid #e4e2dd;
  padding:10px 0 10px 10px;
  margin:0;
}

.page .side-nav li a {
  color:#25202f;
  font-weight:300;
  font-size: 1.3em;
}

.page .side-nav li a.active {
  color:#D9411E;
}

.page .side-nav li a:hover {
  color:#D9411E;
}

#search form, #search fieldset {
  border:none;
  padding:0;
  margin:0;
}

.search-box {
  display: inline-block;
  padding-right: 1em;
  position: relative;
  width: 150px;
  height: 42px;
}

#search input[type="search"] {
  font-family: 'Raleway', 'Helvetica Neue', sans-serif;
  font-weight:300;
  height: 28px;
  width: 135px;
  font-size: 12px;
  border: none;
  box-shadow: none;
  position: absolute;
  top: 8px;
  left: 0px;
  padding-right: 26px;
}

#search input[type="search"]:focus {
  background-color: #f9f9f9;
}

.search-button {
  position:absolute;
  height:23px;
  width:23px;
  background-color: transparent !important;
  line-height: 23px !important;
  padding: 0 !important;
  top: 10px;
  right: 17px;
  margin:0;
}

.search-button img {
  padding:0;
  line-height:23px;
  margin:0;
}

.nested-nav {

}

ul.breadcrumbs {
  margin:0;
  padding:0;
}

ul.breadcrumbs a {
  text-transform:none;
  font-size:1.2em;
}

.tutorials .orange {
  margin-top: 40px;
  margin-bottom:40px;
}

.float-right {
    float: right;
}

img.float-right {
    margin: 5px 0px 10px 10px;
}

.poweredby ul {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  font-weight: 500;
}

.wrappable-btn {
  border: 1px solid #d1d3d4;
  background-color: inherit;
  text-transform: uppercase;
  color: #000;
  padding: 0.25em 0.75em 0.05em 0.47em;
  font-weight: 500;
  margin: 0;
  display: inline-block;
  vertical-align: middle;
}
.wrappable-btn:hover, .wrappable-btn:focus {
  color: #ff833d;
  background: inherit;
}

.ref-guide-badge {
  background-color: #D9411E;
  color: #fff;
  display: inline-block;
  text-align: center;
  font-size: 0.6em;
  line-height: 1.1;
  font-weight: 500;
  vertical-align: middle;
  padding: 1px 2px;
  margin: 0em 0.50em 0.30em -0.40em;
}
.wrappable-btn:hover .ref-guide-badge, .wrappable-btn:focus .ref-guide-badge {
  background-color: #ff833d;
}

ul li div.box div.img img.resizeable-solr-logo {
  max-width:243px; 
  max-height:123px; 
  height:auto;
  width: 100%;
  border:2px solid #CCC                 
}

ul li div.box h3.fixed-wrap-point-logo-title {
  padding-left:9px;
  padding-right:8px;
}

section h3.asset-download {
  text-align: left;
  padding-top: 10px;
}

ul li div.box div.img.logo-container {
  padding: 20px;
  height: auto;
  width: auto;
}
ul li div.box div.img.logo-container.black-background {
  background-color:#000;
}
ul li div.box div.img.logo-container.white-background {
  background-color:#fff;
}
ul li div.box div.img.logo-container.orange-background {
  background-color:#D9411E;
}
.full-width .gray .box.logo-box {
  position: relative;
  border: 1px solid #CCC;
}

.cdx-exploitable {
  color: #fff;
  background-color: #d32f2f;
}
.cdx-not-affected {
  color: #fff;
  background-color: #388e3c;
}
.cdx-in-triage {
  color: #fff;
  background-color: #fbc02d;
}

:target {
  scroll-margin-top: -5px; /* By default some cut off text will be included otherwise */
}

.post-item-title {
  color: #D9411E;
}

.post-item-title a {
  color: #D9411E;
  text-decoration: none;
}

.post-item-title a:hover {
  text-decoration: underline;
}

.read-more {
  margin-top: 10px;
  font-size: 0.9em;
}

.read-more a {
  color: #D9411E;
  font-weight: 600;
}

/*
 * Posts Page Pagination
 */
.pagination {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #e4e2dd;
  text-align: center;
}

.pagination a {
  margin: 0 10px;
  color: #D9411E;
  font-weight: 600;
  text-decoration: none;
}

.pagination a:hover {
  text-decoration: underline;
}

.pagination-info {
  margin: 10px 0;
  font-size: 0.95em;
  color: #555;
}

/* Permalink anchors generated by the markdown toc extension */
.headerlink, .elementid-permalink { visibility: hidden; }
h1:hover > .headerlink, h2:hover > .headerlink, h3:hover > .headerlink,
h4:hover > .headerlink, h5:hover > .headerlink, h6:hover > .headerlink,
dt:hover > .elementid-permalink { visibility: visible; }

/* Collapsible details/summary blocks (e.g. canned email responses) */
details {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 1em;
  padding: 0;
}
summary {
  background: #f5f5f5;
  cursor: pointer;
  font-weight: bold;
  padding: 0.75em 1em;
  border-radius: 4px;
}
details[open] summary {
  border-bottom: 1px solid #ddd;
  border-radius: 4px 4px 0 0;
}
details pre {
  background: #fafafa;
  border: none;
  margin: 0;
  padding: 1em 1.5em;
  white-space: pre-wrap;
  font-size: 0.9em;
}

/* VEX file download button wrapper */
.vex-download {
  margin: 1.5em 0;
}
.vex-download a.button {
  border-radius: 2em;
  color: #fff;
}
.vex-download a.button:hover,
.vex-download a.button:focus {
  color: #fff;
}

/* Workflow diagram figure */
.workflow-figure {
  margin: 2em 0;
}
.workflow-figure img {
  width: 100%;
  height: auto;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}
.workflow-figure figcaption {
  color: #666;
  font-size: 0.9em;
  margin-top: 0.5em;
}

/*
 * Top-nav dropdown menus (Learn / About)
 */

/* Caret indicator on the dropdown parents */
.top-bar-section .navigation li.has-dropdown > a:after {
  border-top-color: rgba(255, 255, 255, 0.75) !important;
  top: 50% !important;
  margin-top: -3px !important;
}

/* The floating panel */
.top-bar-section .navigation li.has-dropdown > ul.dropdown {
  /* Left-align under the parent (overrides Foundation's right-align for .right navs) */
  left: 0 !important;
  right: auto !important;
  text-align: left;
  background: #a82e15;
  border: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
  min-width: 190px;
}

/* Drop the "Back" / duplicated-title items Foundation's topbar JS injects */
.top-bar-section .navigation .dropdown li.js-generated, li.parent-link {
  display: none !important;
}

.top-bar-section .has-dropdown>a {
  height: 100%;
  align-content: center;
}

/* Panel rows */
.top-bar-section .navigation ul.dropdown li,
.top-bar-section .navigation ul.dropdown li:not(.has-form) > a:not(.btn) {
  background: #a82e15;
}

.top-bar-section .navigation ul.dropdown li > a {
  padding: 10px 22px !important;
  line-height: 1.4;
  white-space: nowrap;
  text-align: left;
  color: #fff;
  font-size: 0.92rem; /* match the top-level nav items */
  z-index: 100;
}

/* Row hover */
.top-bar-section .navigation ul.dropdown li:not(.has-form) > a:not(.btn):hover {
  background: #8a2411 !important;
  color: #fff;
}

.top-bar-section ul li:hover:not(.has-form) > a {
   background: #D9411E;
   color: #25202f;
 }

/*
 * Thin screens: the top bar collapses to Foundation's hamburger menu. Undo the
 * desktop full-height layout, and make the Learn/About submenus tap-to-expand
 * accordions (collapsed by default; main.js toggles .mobile-open on tap).
 */
@media only screen and (max-width: 40em) {
  .top-bar-section,
  .top-bar-section ul li,
  .top-bar-section .navigation li.has-dropdown > a {
    height: auto;
  }
  /* Anchor the caret to the parent link, not the (now in-flow, tall) li,
     so it stays on the title row instead of dropping onto the first sub-item */
  .top-bar-section .navigation li.has-dropdown > a {
    position: relative;
  }
  .top-bar-section .navigation li.has-dropdown > ul.dropdown {
    position: static !important;
    width: 100% !important;
    min-width: 0;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    display: none !important; /* collapsed until the parent is tapped */
  }
  .top-bar-section .navigation li.has-dropdown.mobile-open > ul.dropdown {
    display: block !important;
  }
  /* Flip the caret to indicate expanded state */
  .top-bar-section .navigation li.has-dropdown.mobile-open > a:after {
    transform: rotate(180deg);
  }
}