Classification Effect

Link to article: Classification Effect.

#page-title, h1, h2, h3, h4, .centered {
    text-align: center;
}

h2 {
    margin-bottom: 0;
    padding-bottom: 0;
}

h3 {
    margin-top: -0.4em;
}

span.pointer {
    font-family: var(--body-font);
    display: inline-block;
    height: 0.8125rem;
    line-height: 0.750rem;
    line-height: 0.8125rem;
    font-size: 0.625rem;
    font-size: 0.6875rem;
    background: rgb(var(--swatch-primary-darkest));
    color: rgb(var(--swatch-menutxt-light-color));
    -webkit-border-bottom-right-radius: 0.25rem;
       -moz-border-radius-bottomright: 0.25rem;
            border-bottom-right-radius: 0.25rem;
    -webkit-border-top-right-radius: 0.25rem;
       -moz-border-radius-topright: 0.25rem;
            border-top-right-radius: 0.25rem;
    margin: 0 0 0 .75rem;
    padding: 0.1875rem 0.3125rem 0.1875rem 0;
    -webkit-user-select: none;      
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

span.pointer::before,
span.pointer::after {
    float: left;
    position: relative;
}

span.pointer::before {
    content: "";
    top: -0.1875rem;
    left: -0.625rem;
    width: 0;
    height: 0;
    border-color: transparent rgb(var(--swatch-primary-darkest)) transparent transparent;
    border-style: solid;
    border-width: 0.5rem 0.5rem 0.5rem 0;
    padding: 0 0.0625rem 0.1875rem;
}

span.pointer::after {
    --box-shadow: rgb(var(--swatch-primary-darkest));
    content: "";
    top: 0;
    left: -0.5rem;
    width: 0.5rem;
    height: 1rem;
    color: rgb(var(--swatch-menutxt-light-color));
    -webkit-box-shadow: -0.0625rem -0.0625rem 0.125rem var(--box-shadow);
       -moz-box-shadow: -0.0625rem -0.0625rem 0.125rem var(--box-shadow);
            box-shadow: -0.0625rem -0.0625rem 0.125rem var(--box-shadow);
    font-size: 1rem;
    line-height: 0.6em;
    -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 26.5933838 19.6584473' overflow='visible' xml:space='preserve'%3E%3Cpolygon fill='%23FFFFFF' points='26.5933838,5.1333008 7.7148438,5.1333008 7.7148438,0 0,9.6740723 7.7148438,19.6584473 7.7148438,14.0671387 26.5933838,14.0671387 '/%3E%3C/svg%3E%0A");
            mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 26.5933838 19.6584473' overflow='visible' xml:space='preserve'%3E%3Cpolygon fill='%23FFFFFF' points='26.5933838,5.1333008 7.7148438,5.1333008 7.7148438,0 0,9.6740723 7.7148438,19.6584473 7.7148438,14.0671387 26.5933838,14.0671387 '/%3E%3C/svg%3E%0A");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 1rem auto;
            mask-size: 1rem auto;
    background-color: rgb(var(--swatch-menutxt-light-color));
}

.declass-component-block {
    margin-bottom: 1em;
}

@media only screen and (max-width:500px) {
    span.pointer {
     width: -webkit-calc(100% - 1rem);
     width: -moz-calc(100% - 1rem);
     width: calc(100% - 1rem);
     height: auto;
    padding-left: 0.5rem;
    line-height: 1.5em;
    }
    span.pointer::before {
     dislay: none;
    }
    span.pointer::after {
     -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 19.6584473 26.5933838' overflow='visible' xml:space='preserve'%3E%3Cpolygon fill='%23FFFFFF' points='14.5251465,26.5933838 14.5251465,7.7148438 19.6584473,7.7148438 9.984375,0 0,7.7148438 5.5913086,7.7148438 5.5913086,26.5933838 '/%3E%3C/svg%3E%0A");
             mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 19.6584473 26.5933838' overflow='visible' xml:space='preserve'%3E%3Cpolygon fill='%23FFFFFF' points='14.5251465,26.5933838 14.5251465,7.7148438 19.6584473,7.7148438 9.984375,0 0,7.7148438 5.5913086,7.7148438 5.5913086,26.5933838 '/%3E%3C/svg%3E%0A");
     -webkit-mask-size: contain;
             mask-size: contain;
     mask-position: center center;    
    }
}

(none)

```
code
```
```
code
```
```
code
```
```
code
```
```
code
```
```
pointer
```
```
pointer
```
```
pointer
```
```
code
```
```
pointer
```
```
pointer
```
```
pointer
```
```
code
```

[[include :scp-wiki:theme:black-highlighter-theme]]
[[=]]
[[module Rate]]
[[/=]]
[[module css]]
#page-title, h1, h2, h3, h4, .centered {
    text-align: center;
}

h2 {
    margin-bottom: 0;
    padding-bottom: 0;
}

h3 {
    margin-top: -0.4em;
}

span.pointer {
    font-family: var(--body-font);
    display: inline-block;
    height: 0.8125rem;
    line-height: 0.750rem;
    line-height: 0.8125rem;
    font-size: 0.625rem;
    font-size: 0.6875rem;
    background: rgb(var(--swatch-primary-darkest));
    color: rgb(var(--swatch-menutxt-light-color));
    -webkit-border-bottom-right-radius: 0.25rem;
       -moz-border-radius-bottomright: 0.25rem;
            border-bottom-right-radius: 0.25rem;
    -webkit-border-top-right-radius: 0.25rem;
       -moz-border-radius-topright: 0.25rem;
            border-top-right-radius: 0.25rem;
    margin: 0 0 0 .75rem;
    padding: 0.1875rem 0.3125rem 0.1875rem 0;
    -webkit-user-select: none;      
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

span.pointer::before,
span.pointer::after {
    float: left;
    position: relative;
}

span.pointer::before {
    content: "";
    top: -0.1875rem;
    left: -0.625rem;
    width: 0;
    height: 0;
    border-color: transparent rgb(var(--swatch-primary-darkest)) transparent transparent;
    border-style: solid;
    border-width: 0.5rem 0.5rem 0.5rem 0;
    padding: 0 0.0625rem 0.1875rem;
}

span.pointer::after {
    --box-shadow: rgb(var(--swatch-primary-darkest));
    content: "";
    top: 0;
    left: -0.5rem;
    width: 0.5rem;
    height: 1rem;
    color: rgb(var(--swatch-menutxt-light-color));
    -webkit-box-shadow: -0.0625rem -0.0625rem 0.125rem var(--box-shadow);
       -moz-box-shadow: -0.0625rem -0.0625rem 0.125rem var(--box-shadow);
            box-shadow: -0.0625rem -0.0625rem 0.125rem var(--box-shadow);
    font-size: 1rem;
    line-height: 0.6em;
    -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 26.5933838 19.6584473' overflow='visible' xml:space='preserve'%3E%3Cpolygon fill='%23FFFFFF' points='26.5933838,5.1333008 7.7148438,5.1333008 7.7148438,0 0,9.6740723 7.7148438,19.6584473 7.7148438,14.0671387 26.5933838,14.0671387 '/%3E%3C/svg%3E%0A");
            mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 26.5933838 19.6584473' overflow='visible' xml:space='preserve'%3E%3Cpolygon fill='%23FFFFFF' points='26.5933838,5.1333008 7.7148438,5.1333008 7.7148438,0 0,9.6740723 7.7148438,19.6584473 7.7148438,14.0671387 26.5933838,14.0671387 '/%3E%3C/svg%3E%0A");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 1rem auto;
            mask-size: 1rem auto;
    background-color: rgb(var(--swatch-menutxt-light-color));
}

.declass-component-block {
    margin-bottom: 1em;
}

@media only screen and (max-width:500px) {
    span.pointer {
     width: -webkit-calc(100% - 1rem);
     width: -moz-calc(100% - 1rem);
     width: calc(100% - 1rem);
     height: auto;
    padding-left: 0.5rem;
    line-height: 1.5em;
    }
    span.pointer::before {
     dislay: none;
    }
    span.pointer::after {
     -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 19.6584473 26.5933838' overflow='visible' xml:space='preserve'%3E%3Cpolygon fill='%23FFFFFF' points='14.5251465,26.5933838 14.5251465,7.7148438 19.6584473,7.7148438 9.984375,0 0,7.7148438 5.5913086,7.7148438 5.5913086,26.5933838 '/%3E%3C/svg%3E%0A");
             mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 19.6584473 26.5933838' overflow='visible' xml:space='preserve'%3E%3Cpolygon fill='%23FFFFFF' points='14.5251465,26.5933838 14.5251465,7.7148438 19.6584473,7.7148438 9.984375,0 0,7.7148438 5.5913086,7.7148438 5.5913086,26.5933838 '/%3E%3C/svg%3E%0A");
     -webkit-mask-size: contain;
             mask-size: contain;
     mask-position: center center;    
    }
}
[[/module]]

+ What is this?

[[=]]
**A theme-agnostic (in theory) component that "classifies" text and "declassifies" it when being clicked. Has a few options for customization.**
[[/=]]

@@ @@
+++ Notes on some limitations/downsides

Due to needing to work with purely CSS and Wikidot's limited selection of HTML features, this component's functionality is a bit limited. Of note:
* Only one block of text can have the "declassified" status at a time. If another part of the page or another classified block is clicked, the text will be "reclassified."
* The input content is limited to essentially just text. Breaks are possible, which I'll outline below, but adding anything else might not be possible. I've not tested //everything// but attempt at your own risk.
* The text content cannot be selected at all. So links and any other interactable content within this will not work.
* The effect is hover-only on desktop Safari due to being the worst browser.

+ Sample

[[include :scp-wiki:component:classification-effect-source |styles=--] ]]

**Click on the text below to declassify it.**

[[include :scp-wiki:component:classification-effect-source |block=--]
|declassification-speed=500
|classification-speed=2000
|content=SCP-4378 is contained inside a 5 liter stainless steel mixing bowl.
]]

[[collapsible show="+ Show above code" hide="- Hide above code"]]
[[div_ class="code"]]
@@[[include :scp-wiki:component:classification-effect-source |block=--]@@
|declassification-speed=500
|classification-speed=2000
|content=SCP-4378 is contained inside a 5 liter stainless steel mixing bowl.
@@]]@@
[[/div]]
[[/collapsible]]

**Can also be used with multiple lines:**

[[include :scp-wiki:component:classification-effect-source |block=--]
|declassification-speed=3000
|classification-speed=1000
|content=The bowl is enclosed within the former kitchen of the United States White House with access via a single outward swinging door. _
This door is to be kept locked at all times. _
All movement and sound within 20 meters of the object is to be kept to a minimum; under no circumstances is it to be disturbed.
]]

[[collapsible show="+ Show above code" hide="- Hide above code"]]
[[div_ class="code"]]
@@[[include :scp-wiki:component:classification-effect-source |block=--]@@
|declassification-speed=3000
|classification-speed=1000
@@|content=The bowl is enclosed within the former kitchen of the United States White House with access via a single outward swinging door. _@@
@@This door is to be kept locked at all times. _@@
@@All movement and sound within 20 meters of the object is to be kept to a minimum; under no circumstances is it to be disturbed.@@
@@]]@@
[[/div]]
[[/collapsible]]

**It can also be used inline:**

@@An X-Class cognitohazard is placed @@
[[include :scp-wiki:component:classification-effect-source |inline=--]
|declassification-speed=1500
|classification-speed=1500
|content=within the immediate vicinity of the kitchen door leading to SCP-4378
]]
, preventing White House personnel from either perceiving or approaching it.
[[collapsible show="+ Show above code" hide="- Hide above code"]]
[[div_ class="code"]]
An X-Class cognitohazard is placed 
@@[[include :scp-wiki:component:classification-effect-source |inline=--]@@
|declassification-speed=1500
|classification-speed=1500
|content=within the immediate vicinity of the kitchen door leading to SCP-4378
@@]]@@
, preventing White House personnel from either perceiving or approaching it.
[[/div]]
[[/collapsible]]

------

+ How To Use
@@ @@
+++ Styles Include
[[=]]
Always include this code just ONCE.
Put it at very beginning of your page but BELOW any theme includes.
[[/=]]
[[div_ class="code"]]
@@[[include :scp-wiki:component:classification-effect-source |styles=--] ]]@@
[[/div]]

------
@@ @@
+++ Block & Inline Include
[[=]]
Include these for each piece of text you want to have the Classification Effect.

There is one option for text blocks, where it will sit on its own. This option allows line breaks in the content. The other option is for inline-text that will be placed within other non-classified text.

**Note:** {{declassification-speed}} and {{classification-speed}} are set per-component. You can give each block a different speed, if you'd like.
[[/=]]
[[div_ class="code"]]
@@[[include :scp-wiki:component:classification-effect-source |block=--]@@
|declassification-speed=Number [[span class="pointer"]]Animation speed in milliseconds[[/span]]
|classification-speed=Number [[span class="pointer"]]Animation speed in milliseconds[[/span]]
|content=text [[span class="pointer"]]line-breaks allowed[[/span]]
@@]]@@
[[/div]]

[[div_ class="code"]]
@@[[include :scp-wiki:component:classification-effect-source |inline=--]@@
|declassification-speed=Number [[span class="pointer"]]Animation speed in milliseconds[[/span]]
|classification-speed=Number [[span class="pointer"]]Animation speed in milliseconds[[/span]]
|content=text [[span class="pointer"]]line-breaks NOT allowed[[/span]]
@@]]@@
[[/div]]

@@ @@
++++ Block Include Multi-Line Content
[[=]]
You **can** have multi-line content but ONLY in the block-type include.
You just need to format the content like so:
[[/=]]
[[div_ class="code"]]
@@|content=This is a super duper long text content that is eventually going to have a line break. _@@
@@You just need to add a space WITH an underscore after. _@@
@@Remember the space or it will not work. _@@
@@Adding a space after the underscore will also cause it not to work.@@
[[/div]]

Classification Effect

Module Styles

Inline Styles

Includes

CSS Classes

Page Source