Ratio Bar

Link to article: Ratio Bar.

:where(:root) {
    /*Basalt compatibility */
    --rating-module-button-plus-color: var(--rate-module-upvote-color);
    --rating-module-button-negative-color: var(--rate-module-downvote-color);
    /*BHL compatibility */
    --positiveColor: rgb(var(--rating-module-button-plus-color, 144,238,144));
    --negativeColor: rgb(var(--rating-module-button-negative-color, 255,192,203));
}

.page-rate-widget-box {
    position: relative;
}
#main-content .page-rate-widget-box > *:where(:not(.creditBottomRate .page-rate-widget-box > *)) {
    border-bottom-width: 0.45em;
}
.page-rate-widget-box::after {
    content: "";
    display: block;
    width: 95%;
    margin: 0.1em auto;
    position: relative;
    height: 0.225em;
    background-color: grey;
    border-radius: inherit;
    z-index: 2;

    background: linear-gradient(
        90deg,
        var(--positiveColor) var(--rate-percentage),
        var(--negativeColor) var(--rate-percentage)
    );
    filter: saturate(var(--greymaker));
}

.rate-box-with-credit-button {
    display: flex;
    align-items: stretch;
}
.rate-box-with-credit-button .page-rate-widget-box::after {
    margin: 0.1em auto 0.075em;
}
#page-content .rate-box-with-credit-button .creditButton {
    display: flex;
    align-items: center;
}
#page-content .creditButton p a {
    margin-left: inherit;
}

div.creditBottomRate .page-rate-widget-box::after {
    display: none;
}

#main-content .page-rate-widget-box:not(.creditBottomRate .page-rate-widget-box) {
    --rating-module-bottom-border-color: initial;
    padding-bottom: 0.15em;
}
.page-rate-widget-box::after {
    width: 100%;
    border-radius: inherit;
    right: 0;
    bottom: -0.1em;
    position: absolute;
}

#main-content #page-content .rate-box-with-credit-button {
    --rating-module-bottom-border-color: initial;
    position: relative;
    padding-bottom: 0.15em;
}
#main-content #page-content .rate-box-with-credit-button .page-rate-widget-box {
    display: contents;
}
#page-content .rate-box-with-credit-button .page-rate-widget-box::after {
    position: absolute;
    width: 100%;
    margin: 0;
    bottom: 0;
}

:root {
    --info-circle-size: 12.5rem;

    --info-up-bg: var(--positiveColor);
    --info-down-bg: var(--negativeColor);
    --info-border-color: rgba(var(--swatch-border-color, 187,0,17),0.25);
}
.list-pages-box .rate_t3 {
    display: block;
    padding: 0;
    margin: 0.5rem auto 0;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    overflow: hidden;
}
.list-pages-box .rate_t3 .wrap {
    border-bottom: 1px solid var(--info-border-color);
    display: inline-block;
    width: var(--info-circle-size);
    height: calc(var(--info-circle-size) / 2);
    -webkit-clip-path: polygon(-10% -10%, 110% -10%, 110% 99%, -10% 99%);
                clip-path: polygon(-10% -10%, 110% -10%, 110% 99%, -10% 99%);
}
.list-pages-box .rate_t3 .cir {
    width: var(--info-circle-size);
    height: var(--info-circle-size);
    margin: 0;
    padding: 0;
    transform: rotate(-90deg);
}
.list-pages-box .rate_t3 .rad {
    width: calc(100% - 2px);
    height: 0;
    padding: calc(50% - 1px) 0 0;
    margin: 0;
    border: solid var(--info-border-color);
}
.list-pages-box .rate_t3 .rad_def {
    background: gray;
    border-radius: 50%;
    width: calc(100% - 2px);
    height: 0;
    padding: calc(100% - 2px) 0 0;
    margin: 0;
    border: 1px solid var(--info-border-color);
}
.list-pages-box .rate_t3 .uv {
    border-radius: 100rem 100rem 0 0;
    background: var(--info-up-bg);
    border-width: 1px 1px 0;
}
.list-pages-box .rate_t3 .dv {
    border-radius: 0 0 100rem 100rem;
    background: var(--info-down-bg);
    border-width: 0 1px 1px;
}
.list-pages-box .rate_t3 td {
    border: none;
}

display:[[#ifexpr %%rating_votes%% == 0 | none | table-cell ]];

transform: rotate([[#expr (%%rating_votes%%-%%rating%%)/2/%%rating_votes%%*(-180)]]deg)

display:[[#ifexpr %%rating_votes%% == 0 | table-cell | none ]];

display: [[#ifexpr %%rating_votes%% == 0 | none | table-row ]];

```
text-align: left;
```
```
text-align: right;
```

display:[[#ifexpr %%rating_votes%% == 0 | table-row | none ]];

```
text-align: left;
```
```
text-align: right;
```
```
border: 1px solid #ddd; padding: 1em;
```

```
rate_t3
```
```
wrap
```
```
cir
```
```
rad
```
```
uv
```
```
rad
```
```
dv
```
```
wrap
```
```
cir
```
```
rad_def
```

[[module CSS]]
:where(:root) {
    /*Basalt compatibility */
    --rating-module-button-plus-color: var(--rate-module-upvote-color);
    --rating-module-button-negative-color: var(--rate-module-downvote-color);
    /*BHL compatibility */
    --positiveColor: rgb(var(--rating-module-button-plus-color, 144,238,144));
    --negativeColor: rgb(var(--rating-module-button-negative-color, 255,192,203));
}
[[/module]]

[!-- {$base}]
[[module ListPages name="="]]
[[module%%content{0}%% CSS]]
:root {
    --rate-percentage: max(calc(100%*(((%%rating%% + %%rating_votes%%)/2)/(%%rating_votes%% + 0.0001) + 0.001)), 0.001%);
    /* Controls to upvote/downvote ratio expressed in the pseudo-element */

    --greymaker: min(%%rating_votes%%, 1);
    /* Greyscale the ratio bar if number of votes = 0 */
}
[[/module%%content{0}%%]]
[[/module]]

[[module CSS]]
.page-rate-widget-box {
    position: relative;
}
#main-content .page-rate-widget-box > *:where(:not(.creditBottomRate .page-rate-widget-box > *)) {
    border-bottom-width: 0.45em;
}
.page-rate-widget-box::after {
    content: "";
    display: block;
    width: 95%;
    margin: 0.1em auto;
    position: relative;
    height: 0.225em;
    background-color: grey;
    border-radius: inherit;
    z-index: 2;

    background: linear-gradient(
        90deg,
        var(--positiveColor) var(--rate-percentage),
        var(--negativeColor) var(--rate-percentage)
    );
    filter: saturate(var(--greymaker));
}

.rate-box-with-credit-button {
    display: flex;
    align-items: stretch;
}
.rate-box-with-credit-button .page-rate-widget-box::after {
    margin: 0.1em auto 0.075em;
}
#page-content .rate-box-with-credit-button .creditButton {
    display: flex;
    align-items: center;
}
#page-content .creditButton p a {
    margin-left: inherit;
}

div.creditBottomRate .page-rate-widget-box::after {
    display: none;
}
[[/module]]
[!-- --]



[!-- {$ex}]
[[module CSS]]
#main-content .page-rate-widget-box:not(.creditBottomRate .page-rate-widget-box) {
    --rating-module-bottom-border-color: initial;
    padding-bottom: 0.15em;
}
.page-rate-widget-box::after {
    width: 100%;
    border-radius: inherit;
    right: 0;
    bottom: -0.1em;
    position: absolute;
}

#main-content #page-content .rate-box-with-credit-button {
    --rating-module-bottom-border-color: initial;
    position: relative;
    padding-bottom: 0.15em;
}
#main-content #page-content .rate-box-with-credit-button .page-rate-widget-box {
    display: contents;
}
#page-content .rate-box-with-credit-button .page-rate-widget-box::after {
    position: absolute;
    width: 100%;
    margin: 0;
    bottom: 0;
}

[[/module]]
[!-- --]



[!-- {$pie}]
[[module CSS]]
:root {
    --info-circle-size: 12.5rem;

    --info-up-bg: var(--positiveColor);
    --info-down-bg: var(--negativeColor);
    --info-border-color: rgba(var(--swatch-border-color, 187,0,17),0.25);
}
.list-pages-box .rate_t3 {
    display: block;
    padding: 0;
    margin: 0.5rem auto 0;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    overflow: hidden;
}
.list-pages-box .rate_t3 .wrap {
    border-bottom: 1px solid var(--info-border-color);
    display: inline-block;
    width: var(--info-circle-size);
    height: calc(var(--info-circle-size) / 2);
    -webkit-clip-path: polygon(-10% -10%, 110% -10%, 110% 99%, -10% 99%);
                clip-path: polygon(-10% -10%, 110% -10%, 110% 99%, -10% 99%);
}
.list-pages-box .rate_t3 .cir {
    width: var(--info-circle-size);
    height: var(--info-circle-size);
    margin: 0;
    padding: 0;
    transform: rotate(-90deg);
}
.list-pages-box .rate_t3 .rad {
    width: calc(100% - 2px);
    height: 0;
    padding: calc(50% - 1px) 0 0;
    margin: 0;
    border: solid var(--info-border-color);
}
.list-pages-box .rate_t3 .rad_def {
    background: gray;
    border-radius: 50%;
    width: calc(100% - 2px);
    height: 0;
    padding: calc(100% - 2px) 0 0;
    margin: 0;
    border: 1px solid var(--info-border-color);
}
.list-pages-box .rate_t3 .uv {
    border-radius: 100rem 100rem 0 0;
    background: var(--info-up-bg);
    border-width: 1px 1px 0;
}
.list-pages-box .rate_t3 .dv {
    border-radius: 0 0 100rem 100rem;
    background: var(--info-down-bg);
    border-width: 0 1px 1px;
}
.list-pages-box .rate_t3 td {
    border: none;
}
[[/module]]

[[module ListPages name="="]]
[[table class="rate_t3"]]
[[row]]
[[cell colspan="2" style="display:[[#ifexpr %%rating_votes%% == 0 | none | table-cell ]];"]]
[[div class="wrap"]]
[[div class="cir" style="transform: rotate([[#expr (%%rating_votes%%-%%rating%%)/2/%%rating_votes%%*(-180)]]deg)"]]
[[div class="rad uv"]]
[[/div]]
[[div class="rad dv"]]
[[/div]]
[[/div]]
[[/div]]
[[/cell]]
[[cell colspan="2" style="display:[[#ifexpr %%rating_votes%% == 0 | table-cell | none ]];"]]
[[div class="wrap"]]
[[div class="cir"]]
[[div class="rad_def"]]
[[/div]]
[[/div]]
[[/div]]
[[/cell]]
[[/row]]

[[row style="display: [[#ifexpr %%rating_votes%% == 0 | none | table-row ]];"]]
[[cell style="text-align: left;"]]
[[#expr 100 - (%%rating_votes%%-%%rating%%)/2/%%rating_votes%%*100*100%10000/100]]%
(+[[#expr (%%rating%%+%%rating_votes%%)/2]])
[[/cell]]
[[cell style="text-align: right;"]]
[[#expr (%%rating_votes%%-%%rating%%)/2/%%rating_votes%%*100*100%10000/100]]%
(-[[#expr (%%rating_votes%%-%%rating%%)/2]])
[[/cell]]
[[/row]]

[[row style="display:[[#ifexpr %%rating_votes%% == 0 | table-row | none ]];"]]
[[cell style="text-align: left;"]]
-%
(+0)
[[/cell]]
[[cell style="text-align: right;"]]
-%
(-0)
[[/cell]]
[[/row]]

[[/table]]
[[/module]]
[!-- --]

[[iftags +component]]

> The **Rating Info** component was originally created by [[*user 7happy7]], and then adapted by [[*user EstrellaYoshte]] to be compliant with the English wiki's Tech Policy as the **Ratio Bar**.

[[div style="border: 1px solid #ddd; padding: 1em;"]]
To add the Ratio Bar, insert the following after any theme {{[[include]]}}:

> {{@@[[include :scp-wiki:component:ratio-bar base=--]]@@}}

Which will add it any existing rating module:
[[=image ratio1.png width="50%"]]


For certain themes that more heavily alter the rating module, such as [[[theme:black-highlighter-theme|]]], [[[theme:basalt|]]] and [[[theme:inkblot|]]], you will need another parameter:

> {{@@[[include :scp-wiki:component:ratio-bar base=-- |ex=--]]@@}}

The extended compatibility parameter is meant to cover for cases when the standard rating module is extensively styled by a theme's CSS.

Generally, this parameter is meant for BHL and BHL-based themes. Otherwise, start with the {{base}} parameter and add {{@@|ex=--@@}} wherever needed.

@@ @@
-----
@@ @@

There is also a standalone pie chart module:

> {{@@[[include :scp-wiki:component:ratio-bar pie=--]]@@}}

As a usage suggestion, this could be put inside an Info module or something similar:

[[=image ratio2.png width="60%"]]

> {{@@[[include :scp-wiki:info:start]]@@}}
> @@**SCP-XXXX:** TITLE@@
> @@**NAME OF TALE/GOI-FORMAT**@@
> {{@@[[include component:ratio-bar pie=--]]@@}}
> {{@@[[include :scp-wiki:info:end]]@@}}

[[/div]]

[[/iftags]]

Ratio Bar

Module Styles

Inline Styles

Includes

CSS Classes

Page Source