Info Module Content Warning

Link to article: Info Module Content Warning.

Module Styles

• table.wiki-content-table td { text-align: center; border-color: #ddd; padding: 0.7em; }
  table.wiki-content-table td img { padding: 4px; }

• .content-warning {
    /* Shift the content warning into position beneath the info button
     *
     * The var --base-font-size is set to 0.9375rem (15px) in BHL, so using the
     * fallback parameter of the var() function, I can detect if it or Sigma-9
     * is being used. I can use this to get the perfect positioning.
     */
    transform: translate(
      /* Horizontal: 5px for BHL and 12px for Sigma-9 */
      calc(var(--base-font-size, 21px) - 9px),
      /* Vertical: -8px for BHL and -5px for Sigma-9 */
      calc(var(--base-font-size, 19px) - 24px)
    );
  }
  
  .content-warning-arrow {
    /* https://phosphoricons.com, licensed MIT */
    --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23000000' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='128 96 176 48 224 96' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/polyline%3E%3Cpolyline points='32 192 176 192 176 48' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/polyline%3E%3C/svg%3E");
  
    display: inline-block;
    width: 32px;
    transform: translateY(-3px);
  
    background-color: currentColor;
    -webkit-mask-size: 16px;
    mask-size: 16px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: top left;
    mask-position: top left;
    -webkit-mask-image: var(--arrow);
    mask-image: var(--arrow);
  }

Inline Styles

• border: 1px solid #ddd; padding: 1em;

Includes

• :scp-wiki:component:croqstyle [info]
• :scp-wiki:info:start [info]
• :scp-wiki:info:end [info]
• :scp-wiki:component:info-cw [info]

CSS Classes

• code

• code

• content-warning

• creditRate

• content-warning-arrow

Page Source

[[iftags +component]]

[[>]]
[[module Rate]]
[[/>]]

[[include :scp-wiki:component:croqstyle]]

[[div style="border: 1px solid #ddd; padding: 1em;"]]

[[module CSS]]
table.wiki-content-table td { text-align: center; border-color: #ddd; padding: 0.7em; }
table.wiki-content-table td img { padding: 4px; }
[[/module]]

|| [[image cw-s9-light.png]] _
[[[component:theme | Sigma-9]]] || [[image cw-s9-dark.png]] _
[[[theme:night-rush-theme|]]] ||
|| [[image cw-bhl-light.png]] _
[[[theme:black-highlighter-theme|]]] || [[image cw-bhl-dark.png]] _
[[[theme:extra-black-highlighter-theme|]]] ||

This is a component that adds a little unobtrusive content warning notification. It is designed to sit underneath the [[[info:start | Info module]]] in such a way that the little arrow points to the little info button.

All it does is direct attention to the Info module, where you will have written your content warning.

Readers who would prefer a content warning have the option of reading it. Readers who would prefer to read without the spoiler of the content warning can ignore it. All readers are aware that there is a content warning, though, and that's what matters.

If you'd prefer that all of your readers are made to read the content warning, then you should not use this component. Put a content warning in the article itself instead.

Please note that authors are not obligated to provide content warnings for their work, but if you choose to do so, this hopefully makes it a little easier.

There's no guarantee that this will work nicely with any given theme (except Sigma-9 and BHL); if it doesn't, bug the theme creator about it.

+ Usage

Include this component just below the [[[info:start | Info module]]]:

[[div class="code"]]
**@@[[include :scp-wiki:info:start]]@@**
Info about the article
⚠️ @@**Content warning:**@@ This article contains a content warning
**@@[[include :scp-wiki:info:end]]@@**

**@@[[include :scp-wiki:component:info-cw]]@@**
[[/div]]

This component intentionally comes with no built-in customisation options, as it's supposed to be serious and out-of-universe, and being consistent across articles helps with that.

If you'd like to use this with the [[[component:info-ayers|]]] by [[*user Ayers]], I recommend just using some simple centre-aligned text instead:

[[div class="code"]]
@@=@@ ⚠️ content warning @<&uarr;>@
[[/div]]

[[/div]]
[[/iftags]]

[[module CSS]]
.content-warning {
  /* Shift the content warning into position beneath the info button
   *
   * The var --base-font-size is set to 0.9375rem (15px) in BHL, so using the
   * fallback parameter of the var() function, I can detect if it or Sigma-9
   * is being used. I can use this to get the perfect positioning.
   */
  transform: translate(
    /* Horizontal: 5px for BHL and 12px for Sigma-9 */
    calc(var(--base-font-size, 21px) - 9px),
    /* Vertical: -8px for BHL and -5px for Sigma-9 */
    calc(var(--base-font-size, 19px) - 24px)
  );
}

.content-warning-arrow {
  /* https://phosphoricons.com, licensed MIT */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23000000' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='128 96 176 48 224 96' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/polyline%3E%3Cpolyline points='32 192 176 192 176 48' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/polyline%3E%3C/svg%3E");

  display: inline-block;
  width: 32px;
  transform: translateY(-3px);

  background-color: currentColor;
  -webkit-mask-size: 16px;
  mask-size: 16px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: top left;
  mask-position: top left;
  -webkit-mask-image: var(--arrow);
  mask-image: var(--arrow);
}
[[/module]]

[[div_ class="content-warning creditRate"]]
⚠️ content warning [[span class="content-warning-arrow"]]@@ @@[[/span]]
[[/div]]