styles.scss

/* Ad styles */

// Sizes
$width-image-horizontal: 320px;
$width-image-vertical: 180px;

// Z-index used to ensure these custom ad styles are above the main content.
// but below most modals
$zindex-styles-stickybox: 100;
// "fixedfooter" requires 200 minimum to be show over the Read the Docs Sphinx theme navbar.
$zindex-styles-fixedfooter: 200;

// Breakpoints (used for stickybox/fixedfooter formats)
$breakpoint-ultrawide: 1300px;
$breakpoint-mobile: 576px;

// Colors
$color-background: rgba(0, 0, 0, 0.03);
$color-background-dark: rgba(255, 255, 255, 0.05);
$color-link: rgb(80, 80, 80);
$color-link-callout: lighten($color-link, 10%);
$color-link-bold: #088cdb;
$color-link-dark: rgb(220, 220, 220); // gainsboro
$color-link-callout-dark: darken($color-link-dark, 10%);
$color-link-bold-dark: lighten($color-link-bold, 20%);
$color-bg-stickybox: $color-link-dark;
$color-bg-dark-stickybox: $color-link;

// Utilities, mostly to reduce file size
@mixin links($color-primary, $color-secondary, $color-highlight) {
  a {
    &:link {
      color: $color-primary;
    }
    &:visited {
      color: $color-primary;
    }
    &:hover {
      color: $color-secondary;
    }
    &:active {
      color: $color-secondary;
    }
    strong,
    b {
      color: $color-highlight;
    }
  }
}

// Common styles default to most themes
[data-ea-publisher].loaded,
[data-ea-type].loaded {
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
    Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0px;
  vertical-align: baseline;
  line-height: 1.3em;

  a {
    text-decoration: none;
  }

  .ea-pixel {
    display: none;
  }

  .ea-content {
    margin: 1em 1em 0.5em 1em;
    padding: 1em;

    background: $color-background;
    color: $color-link;

    @include links($color-link, darken($color-link, 10%), $color-link-bold);
  }
  .ea-callout {
    @include links(
      $color-link-callout,
      darken($color-link-callout, 10%),
      $color-link-bold
    );
    a {
      font-size: 0.8em;
    }
  }

  .ea-domain {
    margin-top: 0.75em;
    font-size: 0.8em;
    text-align: center;
    color: lighten($color-link-callout, 20%);
  }

  &.dark {
    .ea-content {
      background: $color-background-dark;
      color: $color-link-dark;
      @include links(
        $color-link-dark,
        lighten($color-link-dark, 10%),
        $color-link-bold-dark
      );
    }

    .ea-callout {
      @include links(
        $color-link-callout-dark,
        lighten($color-link-callout-dark, 10%),
        $color-link-bold-dark
      );
    }

    .ea-domain {
      color: darken($color-link-callout-dark, 20%);
    }
  }

  &.adaptive {
    // For adaptive color schemes, the default is light
    // TODO: Find a way to reuse these definitions from dark class above
    @media (prefers-color-scheme: dark) {
      .ea-content {
        background: $color-background-dark;
        color: $color-link-dark;
        @include links(
          $color-link-dark,
          lighten($color-link-dark, 10%),
          $color-link-bold-dark
        );
      }

      .ea-callout {
        @include links(
          $color-link-callout-dark,
          lighten($color-link-callout-dark, 10%),
          $color-link-bold-dark
        );
      }

      .ea-domain {
        color: darken($color-link-callout-dark, 20%);
      }
    }
  }
}

// Themes
@mixin theme-flat {
  .ea-content {
    border: 0px;
    border-radius: 3px;
    box-shadow: none;
  }
}

@mixin theme-raised {
  .ea-content {
    border: 0px;
    border-radius: 3px;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15);
  }
}

@mixin theme-bordered {
  .ea-content {
    border: 1px solid opacify($color-background, 0.01);
    border-radius: 3px;
    box-shadow: none;
  }
  &.dark .ea-content {
    border: 1px solid opacify($color-background-dark, 0.02);
  }

  &.adaptive {
    @media (prefers-color-scheme: dark) {
      .ea-content {
        border: 1px solid opacify($color-background-dark, 0.02);
      }
    }
  }
}

[data-ea-publisher].loaded,
[data-ea-type].loaded {
  @include theme-raised;

  &.raised {
    @include theme-raised;
  }
  &.bordered {
    @include theme-bordered;
  }
  &.flat {
    @include theme-flat;
  }
}

// Image placement
// -------------------------------------------------------------------------
// Explicit image ad type, or default image ad type not specified
// https://ethical-ad-client.readthedocs.io/en/latest/#image-placement
[data-ea-type="image"].loaded,
[data-ea-publisher]:not([data-ea-type]).loaded,
.ea-type-image {
  display: inline-block;

  .ea-content {
    max-width: $width-image-vertical;
    overflow: auto;

    text-align: center;

    > a > img {
      width: 120px;
      height: 90px;
      display: inline-block;
    }

    > .ea-text {
      margin-top: 1em;
      font-size: 1em;
      text-align: center;
    }
  }

  .ea-callout {
    max-width: $width-image-vertical;
    margin: 0em 1em 1em 1em;
    padding-left: 1em;
    padding-right: 1em;
    font-style: italic;
    text-align: right;
  }

  &.horizontal {
    .ea-content {
      max-width: $width-image-horizontal;

      > a > img {
        float: left;
        margin-right: 1em;
      }

      .ea-text {
        margin-top: 0em;
        text-align: left;
        overflow: auto;
      }
    }

    .ea-callout {
      max-width: $width-image-horizontal;
      text-align: right;
    }
  }
}

// Text placement (text-only ad type)
// -------------------------------------------------------------------------
// https://ethical-ad-client.readthedocs.io/en/latest/#text-placement
[data-ea-type="text"].loaded,
.ea-type-text {
  font-size: 14px;

  .ea-content {
    text-align: left;
  }

  .ea-callout {
    margin: 0.5em 1em 1em 1em;
    padding-left: 1em;
    padding-right: 1em;
    text-align: right;
    font-style: italic;
  }
}

// Stickybox ad
// -------------------------------------------------------------------------
// The stickybox is an ad that is shown in a floating box in the lower right
// on very wide screens or a standard image ad
// (text-only not supported) on screens less wide.
// https://ethical-ad-client.readthedocs.io/en/latest/#stickybox
[data-ea-style="stickybox"].loaded {
  // The outer div containing data-ea-publisher and data-ea-type
  // Needs to be positioned when using fixed positioning
  // in order for viewport detection to function correctly.
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: $zindex-styles-stickybox;

  .ea-type-image {
    .ea-stickybox-hide {
      cursor: pointer;
      position: absolute;
      top: 0.75em;
      right: 0.75em;

      background-color: #fefefe;
      border: 1px solid #088cdb;
      border-radius: 50%;
      color: #088cdb;
      font-size: 1em;
      text-align: center;
      height: 1.5em;
      width: 1.5em;
      /* MDN says prefer unitless line-heights */
      /*  and the times symbol vertically centers best with this value */
      line-height: 1.4;
    }
  }

  @media (max-width: $breakpoint-ultrawide) {
    position: static;
    bottom: 0;
    right: 0;
    margin: auto;
    text-align: center;

    .ea-stickybox-hide {
      display: none;
    }
  }

  // Our ads are normally partially transparent
  // This doesn't work with floating ads
  @media (min-width: $breakpoint-ultrawide + 1) {
    .ea-type-image .ea-content {
      background: $color-bg-stickybox;
    }
    &.dark .ea-type-image .ea-content {
      background: $color-bg-dark-stickybox;
    }
    &.adaptive {
      @media (prefers-color-scheme: dark) {
        .ea-type-image .ea-content {
          background: $color-bg-dark-stickybox;
        }
      }
    }
  }
}

// FixedFooter ad
// -------------------------------------------------------------------------
// https://ethical-ad-client.readthedocs.io/en/latest/#fixedfooter
[data-ea-style="fixedfooter"].loaded {
  // The outer div containing data-ea-publisher and data-ea-type
  // Needs to be positioned when using fixed positioning
  // in order for viewport detection to function correctly.
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: $zindex-styles-fixedfooter;

  width: 100%;
  max-width: 100%;

  .ea-type-text {
    width: 100%;
    max-width: 100%;
    display: flex;

    z-index: $zindex-styles-fixedfooter;
    background: $color-bg-stickybox;

    @include theme-flat;

    .ea-content {
      background-color: inherit;
      max-width: 100%;
      margin: 0;
      padding: 1em;
      flex: auto; // Expand to fill remaining space
    }

    .ea-callout {
      max-width: 100%;
      margin: 0;
      padding: 1em;
      flex: initial; // Use the initial width of this item - does not expend

      // Hide Ads by EthicalAds on mobile
      @media (max-width: $breakpoint-mobile) {
        display: none;
      }
    }

    .ea-fixedfooter-hide {
      cursor: pointer;
      color: $color-link;
      padding: 1em;
      flex: initial; // Use the initial width of this item - does not expend
      margin: auto 0;

      // Make the close button - button-like
      span {
        padding: 0.25em;
        font-size: 0.8em;
        font-weight: bold;
        border: 0.15em solid $color-link;
        border-radius: 0.5em;
        white-space: nowrap;
      }
    }
  }

  &.dark {
    .ea-type-text {
      background: $color-bg-dark-stickybox;

      .ea-fixedfooter-hide span {
        color: $color-link-dark;
        border-color: $color-link-dark;
      }
    }
  }

  &.adaptive {
    @media (prefers-color-scheme: dark) {
      .ea-type-text {
        background: $color-bg-dark-stickybox;

        .ea-fixedfooter-hide span {
          color: $color-link-dark;
          border-color: $color-link-dark;
        }
      }
    }
  }
}