metanorma/metanorma-cc

$doctype-colors-list: (
  standard: #0AC442,
  directive: #540D6E,
  guide: #D183C9,
  specification: #65AFFF,
  report: #3A405A,
  amendment: #F26430,
  corrigendum: #C84630,
  administrative: #BFAE48,
  advisory: #BD9391
);


$docstage-colors-list: (
  proposal: #39A0ED,
  working-draft: #2D7393,
  committee-draft: #2A6B7C,
  draft-standard: #1C7F7A,
  final-draft: #53C170,
  published: #069E2D,
  withdrawn: #004E64,
  cancelled: #2E382E,
);


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


body {
  // line-height: 1;

  @include bodyStyle1(
    $fontSize: $normalfontsize, $fontWeight: 300, $lineHeight: 1.4em,
    $colorText: #1d1d1d, $colorBackground: #fff);
}

.container {
  @include sidebarNavContainer(360px);
}

nav {
  @include sidebarNav(
    $offsetLeft: 45px,
    $colorBg: #f7f7f7,
    $width: 323px);

  #toc {
    @include sidebarToc();
  }
}

#toggle {
  @include sidebarNavToggle(
    $colorBg: #1d1d1d,
    $colorFg: white);
}

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

  ul {
    margin-bottom: 0.25em;
  }

  li {
    list-style-type: none;

    &::before {
      content: " " !important;
      display: none;
    }
  }
}

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

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

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

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

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

  .document-type {
    top: 20px;
  }
}


/* Typograpy */

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: #0e1a85;
  font-weight: 600;
  margin-top: 2em;
  margin-bottom: 0.3em;
}

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

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

h2, .h2 {
  font-size: 1.3em;
  font-weight: 400;

  p {
    display: inline;
  }
}

h3, .h3 {
  font-size: 1.1em;
  font-weight: 400;
}

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


/* Terms */

.TermNum {
  font-weight: 400;
}

.TermNum, .Terms, .AltTerms {
  color: #485094;
}

p.TermNum {
  font-size: 0.9em;
  line-height: 1em;
  margin: 0;
  margin-top: 2em;
}

p.Terms {
  font-size: 1.1em;
  line-height: 1.7em;
  margin: 0;
}


/* Links, selection */

@include elementStyles(
  $color: #485094,
  $colorHighlightBg: #1d1d1d,
  $colorHighlightFg: white);


/* Lists */

ol {
  margin-left: 1.2em;
}

ul {
  position: relative;
  margin-left: 0;
  list-style: none;
  padding-left: 1.2em;
}

ul > li::before {
  content: "\2014";
  position: absolute;
  left: 0;
}

main li {
  margin-top: 1em;
  padding-left: 0.5em;
}


/* Bibliograhy */

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

p.Biblio::before, p.NormRef::before {
  content: "\2014";
  padding-right: 1em;
}


/* Blocks */

.figure {
  @include figureBlock();
  @include monospaceBlockStyle();
}

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


.SourceTitle {
  @include blockTitle();
}

pre {
  @include sourceBlock(#f7f7f7);

  .example & {
    background: none;
  }
}

.pseudocode {
  @include pseudocodeBlock(#f7f7f7);

  .example & {
    background: none;
  }
}

.Admonition {
  @include admonitionBlock();
}

.recommend {
  @include recommendationBlock();
}

.require {
  @include recommendationBlock();
}

.permission {
  @include recommendationBlock();
}

@include listBlock();

.Note, .Admonition {
  color: #47430c;
  padding: 0.25em;
  margin: 0;
}

.Note {
  background-color: #fff495;

  p {
    margin: 1em;
  }
}

.blockquote, .Quote {
  @include blockquoteBlock(#f7f7f7, $rightAlignAttribution: true);
}

.formula, .Formula {
  @include formulaBlock(#f7f7f7);
}


/* Examples */

table.example {
  background-color: #e1eef1;
}

td.example {
  padding: 0 1em 0 1em;
  margin: 2em 0 1em 0;
}

.example {
  background-color: #e1eef1;
  padding: 0.5em;
  margin: 2em 0 1em 0;
  text-align: left;
  padding-left: 2em;
}

.example p {
  margin: 0;
}

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

.example pre, .example .pseudocode {
  background: none;
}


/* Tables */

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

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


/* Footnotes */

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

.footnote {
  font-size: $footnotefontsize;
}


/* Contact Info */

.contact-info {
  background-color: #f7f7f7;
  padding: 1em;
  margin-top: 2em;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  text-align: left;

  p, a {
    font-family: $monospacefont;
    font-variant-ligatures: none;
    font-weight: 400;
    line-height: 1.3em;
    font-size: 1em;
    margin: 0;
  }

  a:hover {
    color: #485094;
    background: none;
    text-decoration: underline;
    box-shadow: none;
  }

  .name {
    font-weight: 700;
  }
}


/* Keywords */

span.keyword {
  font-weight: 600;
}



/* Admonitions */

.Admonition, .admonition {
  background-color: #ffb3b3;
  padding: 0.5em;
  margin: 1.5em 0 1.5em 0;
  text-align: left;

  p {
    margin: 0;
  }
}



// To top button

#myBtn {
  @include toTopBtn($color: white, $colorBg: #1d1d1d);
}

a.anchorjs-link:hover {
  background: none;
  color: #485094;
  box-shadow: none;
}

@page {
  margin: 2cm 1cm 2cm 1cm;
}

@media print {
  h1, .h1, .title-section1 {
    page-break-before: always;
  }

  h1.toc-contents {
    margin-top: 2em;
  }
}