rengine/web/static/reports/report.css

@font-face {
  font-family: roboto-regular;
  font-weight: 300;
  src: url(Roboto-Regular.ttf);
}
@font-face {
  font-family: roboto-italic;
  font-style: italic;
  font-weight: 400;
  src: url(Roboto-Ialic.ttf);
}
@font-face {
  font-family: roboto-light;
  font-weight: 300;
  src: url(Roboto-Light.ttf);
}
@font-face {
  font-family: roboto-lightitalic;
  font-style: italic;
  font-weight: 300;
  src: url(Roboto-LightItalic.ttf);
}
@font-face {
  font-family: roboto-bold;
  font-weight: 700;
  src: url(Roboto-Bold.ttf);
}

@page {
  @top-left {
    background: #FF7043;
    content: counter(page);
    height: 1cm;
    text-align: center;
    width: 1cm;
  }
  @top-center {
    background: #FF7043;
    content: '';
    display: block;
    height: .05cm;
    opacity: .5;
    width: 100%;
  }
  @top-right {
    content: string(heading);
    font-size: 9pt;
    height: 1cm;
    vertical-align: middle;
    width: 100%;
  }
}
@page :blank {
  @top-left { background: none; content: '' }
  @top-center { content: none }
  @top-right { content: none }
}
@page no-chapter {
  @top-left { background: none; content: none }
  @top-center { content: none }
  @top-right { content: none }
}

@page :first {
  background-color: #424242;
  background-size: cover;
  margin: 0;
}
@page chapter {
  background: #FF7043;
  margin: 0;
  @top-left { content: none }
  @top-center { content: none }
  @top-right { content: none }
}

html {
  color: #393939;
  font-family: roboto-regular;
  font-size: 11pt;
  font-weight: 300;
  line-height: 1.5;
}

h1 {
  font-family: roboto-light;
  font-size: 38pt;
  margin: 5cm 2cm 0 2cm;
  page: no-chapter;
  width: 100%;
  line-height: normal;
}

.subheading {
  font-family: roboto-light;
  font-size: 22pt;
  width: 100%;
}

h2, h3, h4 {
  font-family: roboto-regular;
  color: black;
  font-weight: 400;
  line-height: normal;
}

h2 {
  font-size: 28pt;
  string-set: heading content();
}

h3 {
  font-family: roboto-light;
  font-weight: 100;
  font-size: 15pt;
}

h4 {
  font-size: 13pt;
}

#cover {
  align-content: space-between;
  display: flex;
  flex-wrap: wrap;
  height: 297mm;
}

#cover footer {
  background: #FF7043;
  flex: 1 33%;
  margin: 0 -2cm;
  padding: 1cm 0;
  white-space: pre-wrap;
}

#cover footer:first-of-type {
  padding-left: 3cm;
}

#summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#summary h2, #summary h3 {
  width: 100%;
}

#summary section {
  width: 30%;
}

#summary section h4 {
  margin-bottom: 0;
}
#summary section ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
#summary section ul li:not(:last-of-type) {
  margin: .5cm 0;
}
#summary section p {
  background: #FF7043;
  display: block;
  font-size: 15pt;
  font-weight: 700;
  margin-bottom: 0;
  padding: .25cm 0;
  text-align: center;
}

#vulnerability-boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#vulnerability-boxes section {
  width: 24%;
}

#vulnerability-boxes section h4 {
  margin-bottom: 0;
}

#vulnerability-boxes section p {
  background: #FF7043;
  display: block;
  font-size: 15pt;
  font-weight: 700;
  margin-bottom: 0;
  padding: .25cm 0;
  text-align: center;
  height: 85px;
  color: #37474F;
}

.critical{
  background: #EF9A9A !important;
}
.high{
  background: #FFAB91 !important;
}
.medium{
  background: #FFCC80 !important;
}
.low{
  background: #FFE082 !important;
}

.critical-text{
  color: #F44336 !important;
}
.high-text{
  color: #FFAB91 !important;
}
.medium-text{
  color: #FF7043 !important;
}
.low-text{
  color: #FFE082 !important;
}
.info-text{
  color: #29B6F6 !important;
}

.critical-line{
  border-bottom: 3px solid #F44336 !important;
}
.high-line{
  border-bottom: 3px solid #FFAB91 !important;
}
.medium-line{
  border-bottom: 3px solid #FF7043 !important;
}
.low-line{
  border-bottom: 3px solid #FFE082 !important;
}
.info-line{
  border-bottom: 3px solid #29B6F6 !important;
}

#vulnerability-count{
  font-size: 30pt;
}

#info_title{
  font-size: 13pt;
  color: #29B6F6;
}

.bold-h3{
  font-family: roboto-medium;
  font-size: 18pt;
}


.line {
  border-bottom: 1px double #FF7043;
}

#light-title{
  font-family: roboto-light;
}

#primary-title{
  color: #FF7043;
}

#mini-text{
  font-size: 11px;
}

.table{
  margin: 0 0 40px 0;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  display: table;
  border-spacing: 0 0.4em;
}

.row{
  display: table-row;
  background: #f6f6f6;
}

.cell{
  padding: 6px 6px 6px 6px;
  display: table-cell;
}

.header{
  font-weight: 900;
  color: #ffffff;
}

.red-header{
  background: #ea6153;
}

.blue-header{
  background: #1E88E5;
}

.green-header{
  background: #66BB6A;
}

.info-cell{
  background: #42A5F5;
}

.severity-title-box{
  color: #37474F;
}


#contents {
  page: no-chapter;
}
#contents h2 {
  font-size: 20pt;
  font-weight: 400;
  margin-bottom: 3cm;
}
#contents h3 {
  font-weight: 500;
  margin: 3em 0 1em;
}
#contents h3::before {
  background: #FF7043;
  content: '';
  display: block;
  height: .08cm;
  margin-bottom: .25cm;
  width: 2cm;
}
#contents ul {
  list-style: none;
  padding-left: 0;
}
#contents ul li {
  border-top: .25pt solid #c1c1c1;
  margin: .25cm 0;
  padding-top: .25cm;
}
#contents ul li::before {
  color: #FF7043;
  content: '• ';
  font-size: 30pt;
  line-height: 16pt;
  vertical-align: bottom;
}
#contents ul li a {
  color: inherit;
  text-decoration-line: inherit;
}
#contents ul li a::before {
  content: target-text(attr(href));
}
#contents ul li a::after {
  color: #FF7043;
  content: target-counter(attr(href), page);
  float: right;
}

#columns section {
  columns: 2;
  column-gap: 1cm;
  padding-top: 1cm;
}
#columns section p {
  text-align: justify;
}
#columns section p:first-of-type {
  font-weight: 700;
}