metanorma/metanorma-ogc

$doctype-colors-list: (
  standard: #3D9970,
  draft-standard: #3D9970,
  abstract-specification-topic: #3D9970,
  reference-model: #3D9970,

  best-practice: #39CCCC,
  discussion-paper: #39CCCC,
  white-paper: #39CCCC,
  technical-paper: #39CCCC,
  engineering-report: #39CCCC,

  release-notes: #FFDC00,
  user-guide: #FFDC00,

  community-practice: #FF851B,
  community-standard: #FF851B,

  other: #0074D9,
  policy: #0074D9,
  change-request-supporting-document: #0074D9,

  test-suite: #001F3F,

);


$docstage-colors-list: (
  candidate: #8B9EB7,
  working-draft: #8B9EB7,
  proposal: #8B9EB7,
  oab-review: #8B9EB7,
  committee-draft: #8B9EB7,
  swg-draft: #8B9EB7,

  public-rfc: #48a0e7,

  tc-vote: #fd06fd,

  published: #9abd48,

  deprecated: #7e0d13,
  retired: #7e0d13,
  legacy: #7e0d13,
  rescinded: #7e0d13,
);


@import 'base_style/all';
@import 'coverpage';


body {
  @include bodyStyle1(
    $fontSize: $normalfontsize, $lineHeight: 1.5,
    $colorText: #00335b, $colorBackground: #f6f8fa,
    $fontWeight: 300);

  @include sidebarNavContainer(360px);
}

// Scroll too wide source code
dl {
  grid-template-columns: minmax(0, 1fr) 93%;
  pre {
    overflow-x: scroll;
  }
}

#toc, #toc > ul :is(.h1, .h2, .h3, .h4, .h5, .h6) {
  @include toc($colorLink: #00335b, $colorLinkActiveBg: #00335b, $colorLinkActiveFg: white);

  li a {
    font-size: 14px;
  }

  li::before {
    content: " ";
    display: none;
  }

  .toc-active, li:hover {
    font-weight: 600;
  }

  li:hover a {
     background: none;
     box-shadow: none;
  }
}

#toc > ul :is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 100%;
}

nav {
  @include sidebarNav(#f1f8ff, 323px, 45px);

  @media screen and (min-width: $bigscreenBreakpoint) {
    margin-right: 30px;
  }
}

#toggle {
  @include sidebarNavToggle(white, #00335b);
}

.rule {
  @include rule(1px, #00335b, 2em 0);

  &.toc {
    @include tocSeparator();
  }
}


@media screen and (min-width: 768px) {
  h1.toc-contents {
    margin-top: 1em;
  }

  ul#toc-list, ul#toc-list > :is(.h1, .h2, .h3, .h4, .h5, .h6) {
    padding: 0;
    margin: 0;
  }
}

#toc-list {
  ul {
    margin-bottom: 0.25em;
  }

  li {
    list-style-type: none;
  }
}

.figure {
  @include figureBlock();
}

table div.figure {
  padding: 0;
  margin: 0;
}


.document-stage-band {
  @include docBand($order: 1, $textLength: 160px, $fontWeight: 300);
}

.document-type-band {
  @include docBand($order: 2, $offset: 180px);
  .document-type {
    top: 20px;
  }
}

#governance-band p.document-type {
  font-weight: 400;
  height: 230px!important;
}

#standard-band p {
  height: 135px;
}

#proposal-band p {
  height: 150px;
}

#standard-band,
#published-band {
  color: rgb(123, 168, 18);
}

#standard,
#published {
  color: #9ABD48;
}



p {
  margin-top: 1em;
  margin-bottom: 1em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #00335b;
  font-weight: 400;
  margin-top: 1.6em;
  margin-bottom: 0.3em;
}

h1, .h1 {
  font-size: 1.8em;
  text-transform: uppercase;
  margin-top: 2em;

  #content {
    margin-top: 2em;
  }
}

h2, .h2 {
  margin-top: 1.3em;
  font-size: 1.7em;
  font-weight: 300;

  p {
    display: inline;
  }
}

h3, .h3 {
  margin-top: 1.3em;
  font-size: 1.5em;
  font-weight: 100;
}

h4, .h4 {
  font-size: 1.4em;
}


.contact-info {
  a:hover {
    text-decoration: underline;
    background: none;
    box-shadow: 0 0 0 0;
  }
  a, a:hover {
    color: #00335b;
  }

  padding: 2em;
  margin-top: 5em;
  width: 280px;
  text-align: left;
  border: #00335b solid 2px;
  color: #00335b!important;
  border-radius: 25px;

  p, a {
      font-family: $monospacefont;
      font-variant-ligatures: none;
      font-weight: 400;
  }

  #boilerplate-name {
    font-weight: 700;
    font-size: 1.2em;
    margin-bottom:0;
  }

  #boilerplate-address {
    font-size: 1em;
    line-height: 1.3em;
    margin-top:0;
  }
}


ul, ol {
  margin-left: 1.2em;
}

ul {
  > li {
    list-style: none;

    &::before {
      content: "\2014";
      display: inline-block;
      width: 1em;
      margin-left: -1em;
    }

    p:first-child {
      display: inline;
    }

    &:first-child {
      margin-top: 1em;
    }
  }
}

ul ul > li:first-child {
      margin-top: 0;
}
ol ul > li:first-child {
      margin-top: 0;
}


span.keyword {
  font-weight: 600;
}


/* Tables */

table {
  @include table($border: 1px solid black);

  /*color: #010d16;*/

  thead tr th {
    background-color: #5d99d6;
  }

  td, th {
    padding: 1em;
  }

  td.header {
    font-weight: 400;
  }
}
.docstage-box {
  table,
  table th,
  table td {
    border: none
  }
}

table.modspec {
  @include table($border: none !important);

  color: #010d16;

  tr:nth-child(even) {
    background: #ffffff
  }
  tr:nth-child(odd) {
    background: #ffffff
  }

  thead tr th {
    background-color: #5d99d6;
  }

  td, th {
    padding: 1em;
  }

  td.header {
    font-weight: 400;
  }
}

td > p:first-child, th > p:first-child {
  margin-top: 0em;
}
td > p:last-child, th > p:last-child {
  margin-bottom: 0em;
}


p.TableTitle {
  text-align: center;
  margin-top: 2.5em;
  font-weight: 400;
}


/* Terms */

.TermNum {
  font-weight: 300;
}

.TermNum, .Terms, .AltTerms {
  color: #00335b;
  font-family: $headerfont;
}

h2.TermNum {
  margin-bottom: 0;
}

p.AltTerms {
  font-size: 24px;
  margin-top: 1em;
}

span.AdmittedLabel {
    color: #00335b;
    background-color: #CFE2F3;
    font-size: 70%;
    vertical-align: top;
}


/* Links, selection */

@include elementStyles(#2e81c2, #39CCCC, #00335b);


/* Bibliograhy */

p.Biblio, p.NormRef {
  margin-top: 1em;
  margin-left: 2em;
}


/* Blocks */

.SourceTitle {
  @include blockTitle();
}

@include listBlock();

pre, .sourcecode {
  @include sourceBlock(#f7f7f7);

  font-family: $monospacefont;
  font-variant-ligatures: none;
}

.Admonition {
  @include admonitionBlock();
  padding: 1em 1.2em 1.2em 1.2em;
  margin: 1em 0 1em 0;
  background-color: #fcad88;
  border-top: 10px solid #eb5a06;
  color: #290404;

  &.Important {
    background-color: #f58cff;
    color: #5d1364;
    border-top: 10px solid #9503a8;
  }

  &.Warning {
    background-color: #ff989d;
    color: #270204;
    border-top: 10px solid #e4010c;
  }


  p, &.Important p, &.Warning p {
    margin: 0;
  }
}

.figure, pre, .pseudocode, .sourcecode {
  background-color: #e1eef1;
  color: #424242;
  font-size: $monospacefontsize;
}

.Note {
  background-color: #fff8bb;
  color: #7d760b;
  padding: 1.2em;
  margin: 1em 0 1em 0;

  p {
    margin: 0;
  }
}

.example {
  background-color: #e1eef1;
  color: #424242;
  padding: 1.2em;
  margin: 2em 0 1em 0;
  padding-left: 2em;

  .example-title {
    font-weight: 700;
    text-transform: uppercase;
    margin-top:0;
    margin-left:-1.5em;
  }

  pre, .pseudocode {
    background: none;
  }
}

.Quote {
  @include blockquoteBlock(#e1eef1);
}


.formula {
  @include formulaBlock(#f6f6f6);
}

.recommend, .recommendtest {
  @include recommendationBlock();
}

.require, .requiretest {
  @include recommendationBlock();
}

.permission, .permissiontest {
  @include recommendationBlock();
}


.RecommendationTestTitle {
  @include blockTitle();
}

/*
.recommend {
  &, .example_label {
    background-color: #f8ffbd;
  }
  .example_label {
    font-weight: bold;
  }
}

.permission {
  &, .example_label {
    background-color: #cdfdbe;
  }
  .example_label {
    font-weight: bold;
  }
}

.require {
  &, .example_label {
    background-color: #d3e6ff;
  }
  .example_label {
    font-weight: bold;
  }
}
*/

.recommend {
  @include recommendationBlock();
}

.require {
  @include recommendationBlock();
}

.permission {
  @include recommendationBlock();
}

tbody td.recommend p.RecommendationTitle, tbody td.recommend p.RecommendationTitle, tbody td.recommend p.RecommendationTitle {
  font-weight: normal;
  text-align: left;
}

#myBtn {
  @include toTopBtn(white, #00335b);
}

a.anchorjs-link {
  @include anchorLink(#2e81c2);
}


@page {
  margin: 2cm 1cm;
}

@media print {
  h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    page-break-after: avoid;
    margin-top: 1.2em;
  }

  h1, .h1 {
    font-size: 1.5em;
    line-height: 1.5;

    &.content {
      margin-top: 2em;
      line-height: 2.5em;
    }
  }

  h2, .h2 {
    font-size: 1.2em
  }

  h3, .h3 {
    font-size: 1em;
  }

  .prefatory-section {
    page-break-before: always;
  }

  .note, .pseudocode {
    page-break-inside: avoid;
  }

  .Note {
    background-color: #fff495;
    color: #47430c;
    padding: 5px;
    margin: 2em 0 1em 0;

    p {
      padding: 0 5px 0 5px;
    }
  }

  nav {
    line-height: 1;
  }
}



/* Footnotes */

a.footnote-number {
  vertical-align: super;
  font-size: 0.8em;
}

.footnote {
  font-size: $footnotefontsize;
}

span.hi {
  background-color: yellow;
}