mirror of
https://github.com/smogon/pokemon-showdown-client.git
synced 2026-05-24 00:46:31 -05:00
7fa72c1d20
The teambuilder is now running on search.js! Not all new features I'd like to be in are in, but we've now reached feature parity, and most of the bugs I found during testing have been fixed. New in search.js is on-demand DOM loading, which basically means much faster performance because instead of trying to load every single row of e.g. the pokemon list at once, we just load the part that's visible, and load the rest only when you scroll it into view. Also new in search.js is a dexsearch-like feature, replacing the old details-search system. The new filter system is simpler and more powerful and has the same API as /dexsearch, although not all the more advanced dexsearch features are supported. On-demand DOM loading makes teambuilder loading pretty much completely instantaneous. There are other small differences in how selection of pokemon/items/abilities/moves works, but it should overall make more sense.
276 lines
4.8 KiB
CSS
276 lines
4.8 KiB
CSS
.utilichart, .utilichart li {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: block;
|
|
clear: both;
|
|
word-wrap: normal;
|
|
}
|
|
|
|
.utilichart li > a, .utilitychart li > div {
|
|
display: block;
|
|
height: 30px;
|
|
padding: 0 0 0 4px;
|
|
border: 1px solid transparent;
|
|
margin: 0 5px 1px 5px;
|
|
text-decoration: none;
|
|
}
|
|
.utilichart li > a.cur {
|
|
border-color: #CCCCCC;
|
|
background: #F2F2F2;
|
|
}
|
|
.utilichart .filter {
|
|
padding:1px 3px;
|
|
border-radius: 3px;
|
|
border: 1px solid #777;
|
|
background: #EEE;
|
|
font-size: 9pt;
|
|
font-family: Verdana, sans-serif;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
}
|
|
.utilichart .filter:hover {
|
|
color: #777777;
|
|
text-decoration: line-through;
|
|
}
|
|
.utilichart .filter i {
|
|
color: #999999;
|
|
}
|
|
.utilichart .filter:hover i {
|
|
color: #BB2222;
|
|
}
|
|
.resultheader,
|
|
.utilichart li.resultheader,
|
|
.utilichart .result {
|
|
height: 32px;
|
|
padding: 1px 0 0 0;
|
|
}
|
|
.result p,
|
|
.resultheader p,
|
|
.utilichart .result p {
|
|
padding: 7px 0 0 8px;
|
|
margin: 0;
|
|
}
|
|
.utilichart h3,
|
|
.dexentry h3,
|
|
.resultheader h3 {
|
|
margin: 5px 0 0 -1px;
|
|
padding: 3px 8px;
|
|
font-family: Verdana, sans-serif;
|
|
font-size: 10pt;
|
|
|
|
background: #DAE5F0;
|
|
border: 1px solid #AAAAAA;
|
|
text-shadow: 1px 1px 0 rgba(255,255,255,.6);
|
|
/* box-shadow: inset 1px 1px 0 rgba(255,255,255,.6), 0px 2px 2px rgba(0,0,0,.15); */
|
|
box-shadow: inset 1px 1px 0 rgba(255,255,255,.6);
|
|
}
|
|
.utilichart li > em {
|
|
display: block;
|
|
padding: 0 8px;
|
|
font-size: 10pt;
|
|
}
|
|
.utilichart .col {
|
|
float: left;
|
|
padding-top: 7px;
|
|
height: 22px;
|
|
font-size: 9pt;
|
|
color: #444444;
|
|
}
|
|
.utilichart .iconcol,
|
|
.utilichart .pokemoniconcol {
|
|
padding-top: 3px;
|
|
width: 32px;
|
|
}
|
|
.utilichart .iconcol span {
|
|
display: block;
|
|
width: 32px;
|
|
height: 24px;
|
|
background: transparent none no-repeat scroll 0px -8px;
|
|
}
|
|
.utilichart .itemiconcol {
|
|
padding-top: 3px;
|
|
width: 24px;
|
|
}
|
|
.utilichart .itemiconcol span {
|
|
display: block;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: transparent none no-repeat scroll 0px 0px;
|
|
}
|
|
.utilichart .numcol {
|
|
width: 24px;
|
|
padding-right: 5px;
|
|
text-align: right;
|
|
color: #999999;
|
|
padding-top: 8px;
|
|
font-size: 8pt;
|
|
}
|
|
.utilichart .statcol,
|
|
.utilichart .bstcol,
|
|
.utilichart .labelcol,
|
|
.utilichart .widelabelcol,
|
|
.utilichart .pplabelcol {
|
|
padding-top: 1px;
|
|
height: 28px;
|
|
width: 24px;
|
|
text-align: right;
|
|
font-size: 8pt;
|
|
}
|
|
.utilichart .labelcol {
|
|
text-align: center;
|
|
width: 30px;
|
|
margin-left: -2px;
|
|
}
|
|
.utilichart .widelabelcol {
|
|
text-align: center;
|
|
width: 50px;
|
|
}
|
|
.utilichart .pplabelcol {
|
|
text-align: center;
|
|
width: 18px;
|
|
padding-right: 5px;
|
|
}
|
|
.utilichart .bstcol {
|
|
padding-left: 2px;
|
|
}
|
|
.utilichart .labelcol em,
|
|
.utilichart .widelabelcol em,
|
|
.utilichart .pplabelcol em,
|
|
.utilichart .statcol em,
|
|
.utilichart .bstcol em {
|
|
color: #999999;
|
|
font-size: 7pt;
|
|
font-style: normal;
|
|
}
|
|
.utilichart .stattitlecol {
|
|
padding-top: 2px;
|
|
width: 20px;
|
|
text-align: right;
|
|
font-size: 7pt;
|
|
color: #999999;
|
|
}
|
|
.utilichart .namecol {
|
|
padding-top: 6px;
|
|
height: 23px;
|
|
width: 120px;
|
|
color: #000000;
|
|
font-size: 10pt;
|
|
}
|
|
.utilichart .pokemonnamecol {
|
|
padding-top: 6px;
|
|
height: 23px;
|
|
width: 127px;
|
|
color: #000000;
|
|
font-size: 10pt;
|
|
}
|
|
.utilichart .shortpokemonnamecol {
|
|
padding-top: 6px;
|
|
height: 23px;
|
|
width: 118px;
|
|
color: #000000;
|
|
font-size: 10pt;
|
|
}
|
|
.utilichart .movenamecol {
|
|
padding-top: 6px;
|
|
height: 23px;
|
|
width: 152px;
|
|
color: #000000;
|
|
font-size: 10pt;
|
|
}
|
|
.utilichart .shortmovenamecol {
|
|
padding-top: 6px;
|
|
height: 23px;
|
|
width: 112px;
|
|
color: #000000;
|
|
font-size: 10pt;
|
|
}
|
|
.utilichart .tagcol {
|
|
padding-top: 6px;
|
|
height: 24px;
|
|
width: 34px;
|
|
border-right: 1px solid #CCCCCC;
|
|
margin-right: 5px;
|
|
text-align: center;
|
|
color: #000000;
|
|
font-size: 10pt;
|
|
}
|
|
.utilichart .tagcol.shorttagcol {
|
|
margin-right: 1px;
|
|
}
|
|
.utilichart .typecol {
|
|
width: 70px;
|
|
}
|
|
.utilichart .abilitycol {
|
|
padding-top: 8px;
|
|
height: 21px;
|
|
font-size: 8pt;
|
|
width: 90px;
|
|
text-align: center;
|
|
}
|
|
.utilichart .twoabilitycol {
|
|
padding-top: 1px;
|
|
height: 28px;
|
|
font-size: 8pt;
|
|
width: 90px;
|
|
text-align: center;
|
|
}
|
|
.utilichart .hiddenabilitycol {
|
|
font-style: italic;
|
|
}
|
|
.utilichart .unreleasedhiddenabilitycol {
|
|
font-style: italic;
|
|
text-decoration: line-through;
|
|
}
|
|
.utilichart b {
|
|
color: #4488CC;
|
|
text-decoration: underline;
|
|
}
|
|
.utilichart small {
|
|
font-size: 8pt;
|
|
}
|
|
.utilichart small b {
|
|
font-weight: normal;
|
|
}
|
|
.utilichart .illegalcol em {
|
|
padding: 2px 4px;
|
|
height: auto;
|
|
border: 1px solid #AA2222;
|
|
color: #AA2222;
|
|
border-radius: 4px;
|
|
}
|
|
.utilichart .filtercol em {
|
|
padding: 2px 4px;
|
|
height: auto;
|
|
border: 1px solid #22AA22;
|
|
color: #22AA22;
|
|
border-radius: 4px;
|
|
}
|
|
.utilichart .typecol img {
|
|
opacity: 0.6;
|
|
margin-right: 1px;
|
|
}
|
|
.utilichart .typecol img.b {
|
|
opacity: 1;
|
|
outline: #4488CC solid 1px;
|
|
outline-offset: 0;
|
|
background: #4488CC;
|
|
}
|
|
.utilichart .itemdesccol,
|
|
.utilichart .abilitydesccol,
|
|
.utilichart .movedesccol {
|
|
white-space: nowrap;
|
|
padding-top: 8px;
|
|
font-size: 8pt;
|
|
width: 488px;
|
|
height: 21px;
|
|
overflow: hidden;
|
|
color: #777777;
|
|
}
|
|
.utilichart .movedesccol {
|
|
width: 284px;
|
|
}
|
|
.utilichart .itemdesccol {
|
|
width: 464px;
|
|
}
|