mirror of
https://github.com/smogon/pokemon-showdown-client.git
synced 2026-08-28 14:11:08 -05:00
Preact: Replace teambuilder Wizard with Form
This replaces the old Preact Teambuilder Wizard with a new Preact
Teambuilder Form (which looks/works much more like the oldclient
teambuilder).
I admit defeat here. I made the Wizard with buttons rather than text
boxes because I thought it was the only way to fit everything into a
tiny vertical space.
But I got so many complaints about how the buttons were worse that I
gave text boxes another try, and I managed to fit them in with only
around two more pixels of height per set than the Wizard. And the
text boxes are so much nicer in every other way that it completely
eliminates any reason to use the Wizard.
I've retained all of the standard Preact client niceties:
- scales down to mobile
- fits 6 pokemon vertically on a 1440x900-equivalent screen
- i.e. a 13" MacBook Air at default resolution
- a move multiselect mode (accessible by clicking the "Moves" label)
- supports >4 moves
- you might think this isn't useful for normal teambuilding, but it
does let you add moves before removing them, if you want to be
indecisive and come back later
- sample sets and box sets importer, right after selecting species
And added some new ones:
- type-color tints! these look surprisingly way nicer than you'd expect
- new type icons
- new gender icons
- a modern dropdown for Tera types
- animation when going from list view to editing mode
- scroll position matching when leaving editing mode
- pressing Esc will now reliably leave editing mode
- in general, keyboard behavior should be more predictable
This commit is contained in:
Guangcong Luo
6
play.pokemonshowdown.com/js/lib/preact.d.ts
vendored
6
play.pokemonshowdown.com/js/lib/preact.d.ts
vendored
@@ -4,8 +4,8 @@ export as namespace preact;
|
||||
declare namespace preact {
|
||||
type Key = string | number;
|
||||
type Ref<T> = (instance: T) => void;
|
||||
type ComponentChild = VNode<any> | string | number | null;
|
||||
type ComponentChildren = ComponentChild[] | ComponentChild | object | string | number | null;
|
||||
type ComponentChild = VNode<any> | string | number | null | false;
|
||||
type ComponentChildren = ComponentChild[] | ComponentChild | object | string | number | null | false;
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
@@ -716,6 +716,7 @@ declare global {
|
||||
type?: string;
|
||||
useMap?: string;
|
||||
value?: string | string[] | number;
|
||||
defaultValue?: string | string[] | number;
|
||||
width?: number | string;
|
||||
wmode?: string;
|
||||
wrap?: string;
|
||||
@@ -821,6 +822,7 @@ declare global {
|
||||
script: HTMLAttributes;
|
||||
section: HTMLAttributes;
|
||||
select: HTMLAttributes;
|
||||
selectedcontent: {};
|
||||
slot: HTMLAttributes;
|
||||
small: HTMLAttributes;
|
||||
source: HTMLAttributes;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -9,7 +9,7 @@ import { PS, PSRoom, type RoomOptions, type Team } from "./client-main";
|
||||
import { PSPanelWrapper, PSRoomPanel } from "./panels";
|
||||
import { toID, type ID } from "./battle-dex";
|
||||
import { BattleLog } from "./battle-log";
|
||||
import { TeamEditor } from "./battle-team-editor";
|
||||
import { TeamEditor, type TeamEditorState } from "./battle-team-editor";
|
||||
import { Net, PSLoginServer } from "./client-connection";
|
||||
import { Teams } from "./battle-teams";
|
||||
import { CopyableURLBox } from "./panel-chat";
|
||||
@@ -20,6 +20,7 @@ class TeamRoom extends PSRoom {
|
||||
team!: Team;
|
||||
teamDeleted = false;
|
||||
forceReload = false;
|
||||
editor?: TeamEditorState;
|
||||
override clientCommands = this.parseClientCommands({
|
||||
'validate'(target) {
|
||||
if (this.team.format.length <= 4) {
|
||||
@@ -37,6 +38,9 @@ class TeamRoom extends PSRoom {
|
||||
if (team) this.setFormat(team.format);
|
||||
this.load();
|
||||
}
|
||||
override onParentKeyDown = (e?: Event) => {
|
||||
return this.editor?.handleParentKeyDown?.(e as KeyboardEvent);
|
||||
};
|
||||
getTeam() {
|
||||
const team = PS.teams.byKey[this.id.slice(5)] || null;
|
||||
this.teamDeleted = !team && (!!this.team || this.teamDeleted);
|
||||
@@ -265,6 +269,7 @@ class TeamPanel extends PSRoomPanel<TeamRoom> {
|
||||
</label>
|
||||
<TeamEditor
|
||||
team={team} onChange={this.save} readOnly={!!team.teamid && !team.uploadedPackedTeam} resources={this.renderResources()}
|
||||
editorRef={(editor: TeamEditorState) => { this.props.room.editor = editor; }}
|
||||
>
|
||||
{!!(team.packedTeam && team.format.length > 4) && <p>
|
||||
<button data-cmd="/validate" class="button"><i class="fa fa-check"></i> Validate</button>
|
||||
|
||||
@@ -1178,7 +1178,7 @@ export class ReconnectTimer extends preact.Component {
|
||||
export function PSIcon(
|
||||
props: { pokemon: string | Pokemon | ServerPokemon | Dex.PokemonSet | null } |
|
||||
{ item: string | null } | { type: string, b?: boolean, new?: boolean, tera?: boolean } |
|
||||
{ category: string }
|
||||
{ category: string } | { gender: string }
|
||||
) {
|
||||
if ('pokemon' in props) {
|
||||
return <span class="picon" style={Dex.getPokemonIcon(props.pokemon)} />;
|
||||
@@ -1216,5 +1216,11 @@ export function PSIcon(
|
||||
height="14" width="32" class="pixelated" style="vertical-align:middle"
|
||||
/>;
|
||||
}
|
||||
if ('gender' in props) {
|
||||
return <img
|
||||
src={`${Dex.resourcePrefix}sprites/misc/gender-${props.gender.toLowerCase()}.png`}
|
||||
width={18} height={18} alt={props.gender} style="margin-top: -1px; filter: grayscale(30%)"
|
||||
/>;
|
||||
}
|
||||
return null!;
|
||||
}
|
||||
|
||||
@@ -148,6 +148,34 @@ button:disabled {
|
||||
select.button {
|
||||
text-align: left;
|
||||
}
|
||||
select.base-select, select.base-select::picker(select) {
|
||||
appearance: base-select;
|
||||
}
|
||||
select.base-select {
|
||||
width: fit-content;
|
||||
}
|
||||
select.base-select::picker-icon {
|
||||
margin-left: 2px;
|
||||
display: inline;
|
||||
}
|
||||
.base-select::picker(select) {
|
||||
text-align: left;
|
||||
background: #E1E8E8;
|
||||
color: black;
|
||||
border: 1px solid #999999;
|
||||
|
||||
padding: 2px 4px;
|
||||
border-radius: 6px;
|
||||
box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #DDDDDD, 2px 2px 3px rgba(0,0,0,.2);
|
||||
}
|
||||
.dark .base-select::picker(select) {
|
||||
background: #0D151E;
|
||||
color: #DDD;
|
||||
border-color: #34373b;
|
||||
|
||||
box-shadow: 2px 2px 3px rgba(0,0,0,.5), inset 0.5px 1px 1px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.button option,
|
||||
.button optgroup {
|
||||
background: #f6f6f6;
|
||||
@@ -483,7 +511,7 @@ pre.textbox {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.option {
|
||||
.option, .base-select option {
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
@@ -494,24 +522,33 @@ pre.textbox {
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
.option.sel, .option.cur {
|
||||
.base-select option {
|
||||
padding: 0 4px;
|
||||
}
|
||||
.option.sel, .option.cur, .base-select option:checked {
|
||||
border-color: #999999;
|
||||
}
|
||||
.option:hover,
|
||||
.option.sel:hover,
|
||||
.option.cur:hover {
|
||||
.option.cur:hover,
|
||||
.base-select option:hover {
|
||||
border-color: #888888;
|
||||
background-color: #D5D5D5;
|
||||
color: black;
|
||||
}
|
||||
.base-select option::checkmark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dark .option {
|
||||
.dark .option, .dark .base-select option {
|
||||
background: transparent;
|
||||
color: #DDD;
|
||||
box-shadow: none;
|
||||
}
|
||||
.dark .option:hover,
|
||||
.dark .option.sel:hover,
|
||||
.dark .option.cur:hover {
|
||||
.dark .option.cur:hover,
|
||||
.dark .base-select option:hover {
|
||||
border-color: #777777;
|
||||
background-color: rgba(100, 100, 100, 0.5);
|
||||
color: #FFFFFF;
|
||||
|
||||
@@ -505,6 +505,158 @@
|
||||
.typetile-Stellar {
|
||||
background: linear-gradient(90deg, hsl(330, 66%, 58%), hsl(126, 79%, 45%) 40%, hsl(231, 98%, 65%));
|
||||
}
|
||||
.tint-Normal.tint-Normal {
|
||||
background-color: #d3d7d8;
|
||||
color: #535a58;
|
||||
}
|
||||
.tint-Fire.tint-Fire {
|
||||
background-color: #ecc4c8;
|
||||
color: #8a2730;
|
||||
}
|
||||
.tint-Fighting.tint-Fighting {
|
||||
background-color: #f0cfad;
|
||||
color: #8a4f00;
|
||||
}
|
||||
.tint-Water.tint-Water {
|
||||
background-color: #c1d4f2;
|
||||
color: #1d4f9c;
|
||||
}
|
||||
.tint-Flying.tint-Flying {
|
||||
background-color: #c9dcf1;
|
||||
color: #38618a;
|
||||
}
|
||||
.tint-Grass.tint-Grass {
|
||||
background-color: #c4dcbd;
|
||||
color: #2a6b21;
|
||||
}
|
||||
.tint-Poison.tint-Poison {
|
||||
background-color: #d3c1e6;
|
||||
color: #653090;
|
||||
}
|
||||
.tint-Electric.tint-Electric {
|
||||
background-color: #ece1ac;
|
||||
color: #735800;
|
||||
}
|
||||
.tint-Ground.tint-Ground {
|
||||
background-color: #dbc7b7;
|
||||
color: #704016;
|
||||
}
|
||||
.tint-Psychic.tint-Psychic {
|
||||
background-color: #edc4d6;
|
||||
color: #9b2f58;
|
||||
}
|
||||
.tint-Rock.tint-Rock {
|
||||
background-color: #d8d4bd;
|
||||
color: #6b633c;
|
||||
}
|
||||
.tint-Ice.tint-Ice {
|
||||
background-color: #c2e4ed;
|
||||
color: #247083;
|
||||
}
|
||||
.tint-Bug.tint-Bug {
|
||||
background-color: #d2d9b1;
|
||||
color: #5b6615;
|
||||
}
|
||||
.tint-Dragon.tint-Dragon {
|
||||
background-color: #c5caee;
|
||||
color: #3544a2;
|
||||
}
|
||||
.tint-Ghost.tint-Ghost {
|
||||
background-color: #cec2d8;
|
||||
color: #4f2e5f;
|
||||
}
|
||||
.tint-Dark.tint-Dark {
|
||||
background-color: #cac3c9;
|
||||
color: #49393a;
|
||||
}
|
||||
.tint-Steel.tint-Steel {
|
||||
background-color: #c5dbe3;
|
||||
color: #2f6b7a;
|
||||
}
|
||||
.tint-Fairy.tint-Fairy {
|
||||
background-color: #ebc7eb;
|
||||
color: #9a409a;
|
||||
}
|
||||
.tint-Stellar.tint-Stellar {
|
||||
background-color: #d7d0e8;
|
||||
color: #594b83;
|
||||
}
|
||||
.dark .tint-Normal.tint-Normal {
|
||||
background-color: #575d5c;
|
||||
color: #e4e8e8;
|
||||
}
|
||||
.dark .tint-Fire.tint-Fire {
|
||||
background-color: #66383d;
|
||||
color: #ffd6da;
|
||||
}
|
||||
.dark .tint-Fighting.tint-Fighting {
|
||||
background-color: #674a2f;
|
||||
color: #ffe0bd;
|
||||
}
|
||||
.dark .tint-Water.tint-Water {
|
||||
background-color: #344f75;
|
||||
color: #d8e6ff;
|
||||
}
|
||||
.dark .tint-Flying.tint-Flying {
|
||||
background-color: #4d6070;
|
||||
color: #deedff;
|
||||
}
|
||||
.dark .tint-Grass.tint-Grass {
|
||||
background-color: #365536;
|
||||
color: #dcf0d6;
|
||||
}
|
||||
.dark .tint-Poison.tint-Poison {
|
||||
background-color: #513d68;
|
||||
color: #eadcff;
|
||||
}
|
||||
.dark .tint-Electric.tint-Electric {
|
||||
background-color: #615838;
|
||||
color: #fff0b8;
|
||||
}
|
||||
.dark .tint-Ground.tint-Ground {
|
||||
background-color: #5d4535;
|
||||
color: #f0d8c7;
|
||||
}
|
||||
.dark .tint-Psychic.tint-Psychic {
|
||||
background-color: #653b50;
|
||||
color: #ffd9e8;
|
||||
}
|
||||
.dark .tint-Rock.tint-Rock {
|
||||
background-color: #5b5747;
|
||||
color: #eee8cf;
|
||||
}
|
||||
.dark .tint-Ice.tint-Ice {
|
||||
background-color: #3f6470;
|
||||
color: #d8f5ff;
|
||||
}
|
||||
.dark .tint-Bug.tint-Bug {
|
||||
background-color: #555a34;
|
||||
color: #eef5c9;
|
||||
}
|
||||
.dark .tint-Dragon.tint-Dragon {
|
||||
background-color: #3f4771;
|
||||
color: #dce0ff;
|
||||
}
|
||||
.dark .tint-Ghost.tint-Ghost {
|
||||
background-color: #4c3a59;
|
||||
color: #eadcff;
|
||||
}
|
||||
.dark .tint-Dark.tint-Dark {
|
||||
background-color: #4a4148;
|
||||
color: #eee2eb;
|
||||
}
|
||||
.dark .tint-Steel.tint-Steel {
|
||||
background-color: #3f5d66;
|
||||
color: #dceff5;
|
||||
}
|
||||
.dark .tint-Fairy.tint-Fairy {
|
||||
background-color: #643f64;
|
||||
color: #ffdfff;
|
||||
}
|
||||
.dark .tint-Stellar.tint-Stellar {
|
||||
background-color: #514b62;
|
||||
color: #e7ddff;
|
||||
}
|
||||
.typeicon-Normal {
|
||||
background: scroll #9FA19F url(https://play.pokemonshowdown.com/sprites/typeicons/Normal.png) no-repeat 2px center / 16px;
|
||||
}
|
||||
|
||||
@@ -435,19 +435,22 @@
|
||||
width: 52px;
|
||||
height: 100px;
|
||||
} */
|
||||
.setdetails .detailcell {
|
||||
.setdetails .detailcell, .set-form .detailcell {
|
||||
padding: 2px 4px;
|
||||
display: block;
|
||||
font-size: 9pt;
|
||||
text-align: center;
|
||||
}
|
||||
.set-form .detailcell {
|
||||
padding-top: 1px;
|
||||
}
|
||||
.setdetails .detailcell + .detailcell {
|
||||
border-top: 1px solid #CCC;
|
||||
}
|
||||
.dark .setdetails .detailcell + .detailcell {
|
||||
border-color: #555;
|
||||
}
|
||||
.setdetails label {
|
||||
.setdetails label, .set-form .detailcell label {
|
||||
float: none;
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
@@ -468,11 +471,12 @@
|
||||
display: block;
|
||||
height: 15px;
|
||||
}
|
||||
.statrow label {
|
||||
.statrow em {
|
||||
float: left;
|
||||
width: 20px;
|
||||
height: 5px;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 7pt;
|
||||
padding: 0;
|
||||
@@ -491,17 +495,21 @@
|
||||
border: 1px solid #888888;
|
||||
border-width: 0 1px 2px 0;
|
||||
}
|
||||
.statrow em {
|
||||
/* more specificity to outweigh `.label strong` */
|
||||
.statrow.statrow strong {
|
||||
float: left;
|
||||
font-size: 7pt;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
width: 22px;
|
||||
height: 5px;
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
}
|
||||
.statrow small {
|
||||
float: left;
|
||||
font-size: 7pt;
|
||||
height: 5px;
|
||||
}
|
||||
.statrow .statrow-head em {
|
||||
color: #555555;
|
||||
@@ -534,7 +542,7 @@ you can't delete it by pressing Backspace */
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* button editor */
|
||||
/* wizard editor */
|
||||
|
||||
.set-button {
|
||||
position: relative;
|
||||
@@ -558,7 +566,7 @@ you can't delete it by pressing Backspace */
|
||||
/* (there's no box-sizing:margin-box) */
|
||||
margin: -1px 0 0 -1px;
|
||||
}
|
||||
.set-button .button {
|
||||
.set-wizard .button {
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
@@ -568,7 +576,7 @@ you can't delete it by pressing Backspace */
|
||||
overflow: hidden;
|
||||
padding: 3px;
|
||||
}
|
||||
.tiny-layout .set-button .button,
|
||||
.tiny-layout .set-wizard .button,
|
||||
.tiny-layout .set-button .label {
|
||||
font-size: 11px;
|
||||
}
|
||||
@@ -576,7 +584,10 @@ you can't delete it by pressing Backspace */
|
||||
color: #2f4f6e;
|
||||
}
|
||||
.dark .set-button .label {
|
||||
color: #a1b0be;
|
||||
color: #adc0d2;
|
||||
}
|
||||
.set-button.set-form .label {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.set-button .set-nickname {
|
||||
@@ -588,10 +599,127 @@ you can't delete it by pressing Backspace */
|
||||
padding: 0 3px;
|
||||
}
|
||||
.tiny-layout .set-button .set-nickname {
|
||||
width: 90px;
|
||||
width: 23%;
|
||||
}
|
||||
|
||||
.set-button .sprite {
|
||||
/* table editor mode */
|
||||
|
||||
.set-form table, .set-form :where(.set-nickname) {
|
||||
background-color: #c8d3e9;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.dark .set-form table, .dark .set-form :where(.set-nickname) {
|
||||
background-color: #3f4654;
|
||||
}
|
||||
.set-form table {
|
||||
height: 105px;
|
||||
}
|
||||
.set-form .border-collapse {
|
||||
margin: 0 3px 1px 0;
|
||||
}
|
||||
.set-form .moverow + .moverow {
|
||||
margin-top: 3px;
|
||||
}
|
||||
.set-form .overfull .moverow + .moverow {
|
||||
margin-top: -2px;
|
||||
}
|
||||
.set-form .overfull .moverow + .moverow .textbox {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.set-form .overfull .moverow:not(:last-child) .textbox {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.set-form .overfull .moverow .textbox, .set-form .overfull .moverow {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
height: 18px;
|
||||
}
|
||||
.set-form .overfull5 .moverow .textbox, .set-form .overfull5 .moverow {
|
||||
height: 19.4px;
|
||||
}
|
||||
.set-form td {
|
||||
vertical-align: top;
|
||||
}
|
||||
.set-button.set-form .textbox {
|
||||
height: 20px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
.set-button.set-form .set-details .textbox {
|
||||
height: 34px;
|
||||
padding: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.set-button.set-form .set-stats .textbox {
|
||||
height: 89px;
|
||||
}
|
||||
|
||||
.set-button .set-field.incomplete {
|
||||
color: #CC3311;
|
||||
border-color: #CC3311;
|
||||
}
|
||||
.set-button button.label {
|
||||
display: block;
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.set-form .set-moves .label.cur,
|
||||
.set-form .set-moves .label:focus-visible {
|
||||
text-decoration: underline;
|
||||
outline: 0;
|
||||
}
|
||||
.set-form .set-moves .button {
|
||||
display: none;
|
||||
padding: 0 3px;
|
||||
font-size: 10px;
|
||||
vertical-align: top;
|
||||
margin-top: 0;
|
||||
}
|
||||
.set-form .set-moves .button.cur,
|
||||
.set-form .set-moves .label:hover .button {
|
||||
display: inline-block;
|
||||
}
|
||||
.set-button.set-form .label .textbox {
|
||||
margin-top: 0;
|
||||
}
|
||||
.set-button.set-form .set-nickname .label {
|
||||
font-size: 10px;
|
||||
}
|
||||
.set-button.set-form .set-nickname {
|
||||
padding: 0;
|
||||
}
|
||||
.set-button.set-form .set-nickname span {
|
||||
padding-left: 3px;
|
||||
}
|
||||
.set-button.set-form .set-details {
|
||||
height: 69px;
|
||||
}
|
||||
.set-button.set-form .itemicon {
|
||||
float: right;
|
||||
margin-top: -12px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
/* .set-button.set-form .set-pokemon .label {
|
||||
text-shadow: #c8d3e9 1px 1px 0, #c8d3e9 1px -1px 0, #c8d3e9 -1px 1px 0, #c8d3e9 -1px -1px 0;
|
||||
}
|
||||
.dark .set-button.set-form .set-pokemon .label {
|
||||
text-shadow: #3f4654 1px 1px 0, #3f4654 1px -1px 0, #3f4654 -1px 1px 0, #3f4654 -1px -1px 0;
|
||||
} */
|
||||
.set-button.set-form .set-pokemon .label span {
|
||||
visibility: hidden;
|
||||
}
|
||||
.set-button.set-form .statrow {
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.set-wizard .sprite {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 97px;
|
||||
@@ -604,65 +732,86 @@ you can't delete it by pressing Backspace */
|
||||
border-bottom-left-radius: 3px;
|
||||
background: linear-gradient(to bottom, transparent 0%, transparent 70%, #d3d3d3 100%);
|
||||
}
|
||||
.set-button .cur .sprite-inner {
|
||||
.set-wizard .cur .sprite-inner {
|
||||
background: linear-gradient(to bottom, transparent 0%, transparent 70%, #f8f8f8 100%);
|
||||
}
|
||||
.dark .set-button .sprite-inner {
|
||||
.dark .set-wizard .sprite-inner {
|
||||
background: linear-gradient(to bottom, transparent 0%, transparent 70%, #2b2c31 100%);
|
||||
}
|
||||
.dark .set-button .cur .sprite-inner {
|
||||
.dark .set-wizard .cur .sprite-inner {
|
||||
background: linear-gradient(to bottom, transparent 0%, transparent 70%, #555555 100%);
|
||||
}
|
||||
.set-button .detailcell {
|
||||
.set-form .sprite-inner {
|
||||
padding-top: 69px;
|
||||
padding-left: 0;
|
||||
height: auto;
|
||||
background: none;
|
||||
}
|
||||
.set-wizard .detailcell {
|
||||
float: left;
|
||||
height: 50px;
|
||||
}
|
||||
.dark .set-button .button-first.cur,
|
||||
.dark .set-button .button-middle.cur,
|
||||
.dark .set-button .button-last.cur {
|
||||
.set-form .detailcell {
|
||||
float: left;
|
||||
height: 27px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.dark .set-wizard .button-first.cur,
|
||||
.dark .set-wizard .button-middle.cur,
|
||||
.dark .set-wizard .button-last.cur {
|
||||
box-shadow: none;
|
||||
}
|
||||
.set-button .detailcell + .detailcell {
|
||||
.set-wizard .detailcell + .detailcell,
|
||||
.set-form .detailcell + .detailcell {
|
||||
border-left: 1px solid #888;
|
||||
margin-left: 20px;
|
||||
padding-left: 3px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
.tiny-layout .set-button .detailcell + .detailcell {
|
||||
margin-left: 3px;
|
||||
.set-form .detailcell + .detailcell {
|
||||
margin-left: 2px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
.set-button .set-pokemon .button {
|
||||
.tiny-layout .detailcell + .detailcell {
|
||||
margin-left: 0;
|
||||
padding-left: 4px;
|
||||
}
|
||||
.set-wizard .set-pokemon .button {
|
||||
padding: 0;
|
||||
}
|
||||
.set-button .set-ability .button, .set-button .set-item .button {
|
||||
.set-wizard .set-ability .button, .set-wizard .set-item .button {
|
||||
height: 40px;
|
||||
}
|
||||
.set-item .itemicon {
|
||||
float: right;
|
||||
}
|
||||
.set-button .set-moves .button {
|
||||
.set-wizard .set-moves .button {
|
||||
line-height: 18px;
|
||||
}
|
||||
.set-button .set-moves .button.overfull {
|
||||
.set-wizard .set-moves .button.overfull {
|
||||
line-height: normal;
|
||||
}
|
||||
.set-button .set-details .button {
|
||||
.set-wizard .set-details .button {
|
||||
height: 61px;
|
||||
}
|
||||
.set-button .set-stats, .set-button .set-stats .button {
|
||||
.set-button .set-stats, .set-wizard .set-stats .button {
|
||||
width: 138px;
|
||||
}
|
||||
.set-button .set-stats .button {
|
||||
.set-wizard .set-stats .button {
|
||||
padding: 3px;
|
||||
}
|
||||
.tiny-layout .set-button .set-stats, .tiny-layout .set-button .set-stats .button {
|
||||
.tiny-layout .set-button .set-stats, .tiny-layout .set-button .set-stats button {
|
||||
width: 40px;
|
||||
}
|
||||
.tiny-layout .set-button .set-stats label {
|
||||
.tiny-layout .set-button .set-stats button {
|
||||
padding-top: 1px;
|
||||
}
|
||||
.tiny-layout .set-button .set-stats em {
|
||||
display: none;
|
||||
}
|
||||
.tiny-layout .set-button .set-stats .statgraph {
|
||||
transform: scale(0.5);
|
||||
transform-origin: 0 0;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.team-focus-editor {
|
||||
@@ -674,6 +823,9 @@ you can't delete it by pressing Backspace */
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.team-focus-editor .set-button {
|
||||
z-index: 1;
|
||||
}
|
||||
.team-focus-editor .tabbar {
|
||||
/* note to self: make this scrollable later */
|
||||
overflow: auto;
|
||||
|
||||
Reference in New Issue
Block a user