Marnolmao

RequestContext::getMain()->getOutput()->enableOOUI();

new OO.ui.ToggleButtonWidget( { label: 'Toggle', value: true } )

// See documentation at: // https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget

new OO.ui.ButtonWidget( { label: 'Normal' } )

Template:Button

var buttonWithLabel = new OO.ui.ButtonWidget( { label: 'Button Label' } ); $( document.body ).append( buttonWithLabel.$element );

var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle button on', value: true } ); // Append the button to the DOM. $( document.body ).append( toggleButton.$element );

Robot

<img loading="lazy" src=">

<svg><text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" lengthAdjust="spacingAndGlyphs">'Justice Knight'</text></svg>

1. recruitResults .operatorCheckbox {

display: inline-block; }

1. recruitResults .operatorCheckbox.checked {

outline: 1px solid lightgrey; }

1. recruitResults .operatorCheckbox {

transition: none; }

.operatorCheckbox[data-rarity] { background-color: rgba(var(--base-color), 0.7); }

.operatorCheckbox[data-rarity] .name { background-color: rgb(var(--base-color)); }

.operatorCheckbox .name svg { fill: #222; } .operatorCheckbox[data-recruit-only="true"] { outline: 1px solid limegreen; }

.operatorCheckbox, .operatorCheckbox .name { cursor: pointer; }

table,

1. reset {

border-collapse: collapse; /* border-spacing: 1em 0.5em;*/ margin: 1em auto; width: 80vw; max-width: 1600px; }

td { padding: 1em; vertical-align: middle; }

tr:nth-child(even) { --row-bg: #00000080; }

tr:nth-child(odd) { --row-bg: #00000050; } tr { background-color: var(--row-bg); }

.tag { padding: 0.5em; /* background: #ffffff30;*/ background: #555; margin: 0.25em; display: inline-block; user-select: none; }

1. recruitResults td:first-child {

width: 15%; min-width: 140px; }

1. legend {

flex-grow: 0; }

1. reset {

background-color: #c62828; color: white; text-align: center; padding: 0.5em 0; cursor: pointer; font-size: 1.5em; }

1. reset span {

display: inline-block; vertical-align: middle; }

1. reset:hover {

background-color: #8e1c1c; }

1. reset:active {

background-color: #611414; }

table .button { margin: 0.2em; padding: 0.6em; background: #000; border-radius: 0px; border: 1px solid grey; }

@media (hover: hover) { table .button:not(.disabled):hover { color: black; background-color: #696969; text-shadow: none; } } table .button:not(.disabled).checked { background: #0098dc; border: 1px solid #f1f1f1; color: #f1f1f1; }

tbody[data-too-many="true"] tr td .button[data-tag-id].checked:not(.disabled) { color: #ff7f7f; border-color: #ff7f7f; } table tbody tr td .button[data-tag-id="14"]:not(.disabled), table tbody tr td .button[data-tag-id="11"]:not(.disabled) { /* color: #e7e723;*/ } table tbody tr td .button[data-tag-id="14"]:not(.disabled).checked, table tbody tr td .button[data-tag-id="11"]:not(.disabled).checked { /* color: yellow;*/ background: #f6e30b; color: black; border: 1px solid #f1f1f1; }

tbody:not([data-typing="false"]) .button.highlight_low { /* color: #222;*/ background-color: #444; outline: 1px solid #ccc; text-shadow: none; }

tbody:not([data-typing="false"]) .button.highlight { color: black; background-color: #ccc; outline: 2px solid white; text-shadow: none; }

1. tagInput {

width: 100%; padding: 0.25em; box-sizing: border-box; color: #fff; background-color: #333; border: 1px solid #666; }

1. tagInput::placeholder {

color: #aaa; }

1. tagInput:focus {

outline: none; box-shadow: 0 0 2px 2px #999; }