|
|
| (5 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| RequestContext::getMain()->getOutput()->enableOOUI();
| |
|
| |
|
|
| |
|
| new OO.ui.ToggleButtonWidget( {
| |
| label: 'Toggle',
| |
| value: true
| |
| } )
| |
|
| |
|
|
| |
|
|
| |
|
| | [[File:Slime.png]] |
|
| |
|
| // See documentation at:
| | ==Maps== |
| // https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget
| | Found in: <section begin="maps" /> <section end="maps" /> |
|
| |
|
| new OO.ui.ButtonWidget( {
| | ==Stats== |
| label: 'Normal'
| | HP: <section begin="HP" /> <section end="HP" /> ATK: <section begin="ATK" /> <section end="ATK" /> DEF: <section begin="DEF" /> <section end="DEF" /> |
| } )
| | MP: <section begin="MP" /> <section end="MP" /> SPD: <section begin="SPD" /> <section end="SPD" /> Type: <section begin="Type" /> <section end="Type" /> |
| | | |
| | | Player EXP: <section begin="Playerexp" /> <section end="Playerexp" /> |
| | |
| {{Clickable button|color=white}}
| |
| | |
| | |
| {{Button|text=button text}}
| |
| | |
| | |
| | |
| 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 );
| |
| | |
| | |
| <div class="button" data-tag-id="28" data-tag-group="28">Robot</div> | |
| <div class="lmao"> | |
| | |
| <div class="operatorCheckbox show" data-class="Sniper" data-rarity="0" data-recruit-only="true"><img loading="lazy" src="><div class="name"><svg><text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" lengthAdjust="spacingAndGlyphs">'Justice Knight'</text></svg></div></div> | |
| | |
| | |
| | |
| #recruitResults .operatorCheckbox {
| |
| display: inline-block;
| |
| }
| |
| #recruitResults .operatorCheckbox.checked {
| |
| outline: 1px solid lightgrey;
| |
| }
| |
| #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,
| |
| #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;
| |
| }
| |
| | |
| #recruitResults td:first-child {
| |
| width: 15%;
| |
| min-width: 140px;
| |
| }
| |
| | |
| #legend {
| |
| flex-grow: 0;
| |
| }
| |
| #reset {
| |
| background-color: #c62828;
| |
| color: white;
| |
| text-align: center;
| |
| padding: 0.5em 0;
| |
| cursor: pointer;
| |
| font-size: 1.5em;
| |
| }
| |
| | |
| #reset span {
| |
| display: inline-block;
| |
| vertical-align: middle;
| |
| }
| |
| | |
| #reset:hover {
| |
| background-color: #8e1c1c;
| |
| }
| |
| | |
| #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;
| |
| }
| |
| | |
| #tagInput {
| |
| width: 100%;
| |
| padding: 0.25em;
| |
| box-sizing: border-box;
| |
| color: #fff;
| |
| background-color: #333;
| |
| border: 1px solid #666;
| |
| }
| |
| | |
| #tagInput::placeholder {
| |
| color: #aaa;
| |
| }
| |
| | |
| #tagInput:focus {
| |
| outline: none;
| |
| box-shadow: 0 0 2px 2px #999;
| |
| }
| |
