mirror of
https://github.com/smogon/pokemon-showdown-client.git
synced 2026-03-21 17:50:29 -05:00
b5630d3ff2
Some checks failed
Node.js CI / build (22.x) (push) Has been cancelled
- New export format
- NOT FINAL, wow did Twitter freak out when they saw this
- I have not made a decision on whether to keep this new export format
- Stub details form
- Checkbox for old export format
- 510 EV limit
- Show full search results (with windowing)
- Choosing generations rather than specific formats
- Searching/filtering/sorting results
- Reverse sorting filter columns (move types/categories and
pokemon types/abilities) is now possible even on oldclient
Bugfixes:
- Gen 1 (no item) species selection
- "Add pokemon" button positioning
- Dark mode results
- Width (to fit the final column of results)
- Highlighted line width
417 lines
7.2 KiB
CSS
417 lines
7.2 KiB
CSS
.dexlist, .dexlist li {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: block;
|
|
clear: both;
|
|
word-wrap: normal;
|
|
}
|
|
|
|
.dexlist li > a {
|
|
display: block;
|
|
height: 30px;
|
|
padding: 0 0 0 4px;
|
|
border: 1px solid transparent;
|
|
margin: 0 5px 1px 5px;
|
|
text-decoration: none;
|
|
}
|
|
.dexlist li > a.cur {
|
|
border-color: #CCCCCC;
|
|
background: #F2F2F2;
|
|
}
|
|
.dexlist .filter,
|
|
.searchboxwrapper .filter {
|
|
padding:1px 3px;
|
|
border-radius: 3px;
|
|
border: 1px solid #777;
|
|
background: #EEE;
|
|
color: black;
|
|
font-size: 9pt;
|
|
font-family: Verdana, sans-serif;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
}
|
|
.dexlist .filter:hover,
|
|
.searchboxwrapper .filter:hover {
|
|
color: #777777;
|
|
text-decoration: line-through;
|
|
}
|
|
.searchboxwrapper .filter.noclear:hover {
|
|
color: black;
|
|
text-decoration: none;
|
|
cursor: default;
|
|
}
|
|
.dexlist .filter i,
|
|
.searchboxwrapper .filter i {
|
|
color: #999999;
|
|
}
|
|
.dexlist .filter:hover i,
|
|
.searchboxwrapper .filter:hover i {
|
|
color: #BB2222;
|
|
}
|
|
.resultheader,
|
|
.dexlist li.resultheader,
|
|
.dexlist .result {
|
|
height: 32px;
|
|
padding: 1px 0 0 0;
|
|
contain: strict;
|
|
}
|
|
.result p,
|
|
.resultheader p,
|
|
.dexlist .result p {
|
|
padding: 7px 0 0 8px;
|
|
margin: 0;
|
|
}
|
|
.dexlist h3,
|
|
.dexentry h3,
|
|
.resultheader h3 {
|
|
margin: 5px 0 0 -1px;
|
|
padding: 3px 8px;
|
|
font-family: Verdana, sans-serif;
|
|
font-size: 10pt;
|
|
|
|
background: #DAE5F0;
|
|
color: black;
|
|
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);
|
|
}
|
|
.dexlist li > em {
|
|
display: block;
|
|
padding: 0 8px;
|
|
font-size: 10pt;
|
|
}
|
|
.dexlist .col {
|
|
float: left;
|
|
padding-top: 7px;
|
|
height: 22px;
|
|
font-size: 9pt;
|
|
color: #444444;
|
|
}
|
|
.dexlist .iconcol {
|
|
padding-top: 0px;
|
|
width: 40px;
|
|
height: 30px;
|
|
}
|
|
.dexlist .iconcol span {
|
|
display: block;
|
|
width: 40px;
|
|
height: 30px;
|
|
background: transparent none no-repeat scroll 0px -8px;
|
|
}
|
|
.dexlist .itemiconcol {
|
|
padding-top: 3px;
|
|
width: 24px;
|
|
height: 27px;
|
|
}
|
|
.dexlist .itemiconcol span {
|
|
display: block;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: transparent none no-repeat scroll 0px 0px;
|
|
}
|
|
.dexlist .numcol {
|
|
width: 24px;
|
|
padding-right: 5px;
|
|
text-align: right;
|
|
color: #999999;
|
|
padding-top: 8px;
|
|
font-size: 8pt;
|
|
white-space: nowrap;
|
|
}
|
|
.dexlist .statcol,
|
|
.dexlist .bstcol,
|
|
.dexlist .labelcol,
|
|
.dexlist .widelabelcol,
|
|
.dexlist .pplabelcol {
|
|
padding-top: 1px;
|
|
height: 28px;
|
|
width: 24px;
|
|
text-align: right;
|
|
font-size: 8pt;
|
|
}
|
|
.dexlist .labelcol {
|
|
text-align: center;
|
|
width: 30px;
|
|
margin-left: -2px;
|
|
}
|
|
.dexlist .widelabelcol {
|
|
text-align: center;
|
|
width: 50px;
|
|
}
|
|
.dexlist .pplabelcol {
|
|
text-align: center;
|
|
width: 18px;
|
|
padding-right: 5px;
|
|
}
|
|
.dexlist .bstcol {
|
|
padding-left: 2px;
|
|
}
|
|
.dexlist .labelcol em,
|
|
.dexlist .widelabelcol em,
|
|
.dexlist .pplabelcol em,
|
|
.dexlist .statcol em,
|
|
.dexlist .bstcol em {
|
|
color: #999999;
|
|
font-size: 7pt;
|
|
font-style: normal;
|
|
}
|
|
.dexlist .stattitlecol {
|
|
padding-top: 2px;
|
|
width: 20px;
|
|
text-align: right;
|
|
font-size: 7pt;
|
|
color: #999999;
|
|
}
|
|
.dexlist .namecol {
|
|
padding-top: 6px;
|
|
height: 23px;
|
|
width: 120px;
|
|
color: #000000;
|
|
font-size: 10pt;
|
|
}
|
|
.dexlist .pokemonnamecol {
|
|
padding-top: 6px;
|
|
height: 23px;
|
|
width: 127px;
|
|
color: #000000;
|
|
font-size: 10pt;
|
|
white-space: nowrap;
|
|
}
|
|
.dexlist .shortpokemonnamecol {
|
|
padding-top: 6px;
|
|
height: 23px;
|
|
width: 118px;
|
|
color: #000000;
|
|
font-size: 10pt;
|
|
white-space: nowrap;
|
|
}
|
|
.dexlist .movenamecol {
|
|
padding-top: 6px;
|
|
height: 23px;
|
|
width: 152px;
|
|
color: #000000;
|
|
font-size: 10pt;
|
|
}
|
|
.dexlist .shortmovenamecol {
|
|
padding-top: 6px;
|
|
height: 23px;
|
|
width: 112px;
|
|
color: #000000;
|
|
font-size: 10pt;
|
|
}
|
|
.dexlist .tagcol {
|
|
padding-top: 6px;
|
|
height: 24px;
|
|
width: 34px;
|
|
border-right: 1px solid #CCCCCC;
|
|
margin-right: 5px;
|
|
text-align: center;
|
|
color: #000000;
|
|
font-size: 10pt;
|
|
}
|
|
.dexlist .tagcol.shorttagcol {
|
|
margin-right: 1px;
|
|
}
|
|
.dexlist .typecol {
|
|
width: 70px;
|
|
}
|
|
.dexlist .abilitycol {
|
|
padding-top: 8px;
|
|
height: 21px;
|
|
font-size: 8pt;
|
|
width: 86px;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
.dexlist .twoabilitycol {
|
|
padding-top: 1px;
|
|
height: 28px;
|
|
font-size: 8pt;
|
|
width: 86px;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
.dexlist .hacol {
|
|
font-style: italic;
|
|
}
|
|
.dexlist .unreleasedhacol {
|
|
font-style: italic;
|
|
text-decoration: line-through;
|
|
}
|
|
.dexlist b {
|
|
color: #4488CC;
|
|
text-decoration: underline;
|
|
}
|
|
.dexlist small {
|
|
font-size: 8pt;
|
|
}
|
|
.dexlist small b {
|
|
font-weight: normal;
|
|
}
|
|
.dexlist .illegalcol em {
|
|
padding: 2px 4px;
|
|
height: auto;
|
|
border: 1px solid #AA2222;
|
|
color: #AA2222;
|
|
border-radius: 4px;
|
|
}
|
|
.dexlist .filtercol em {
|
|
padding: 2px 4px;
|
|
height: auto;
|
|
border: 1px solid #22AA22;
|
|
color: #22AA22;
|
|
border-radius: 4px;
|
|
}
|
|
.dexlist .typecol img {
|
|
opacity: 0.6;
|
|
margin-right: 1px;
|
|
}
|
|
.dexlist .typecol img.b {
|
|
opacity: 1;
|
|
outline: #4488CC solid 1px;
|
|
outline-offset: 0;
|
|
background: #4488CC;
|
|
}
|
|
.dexlist .itemdesccol,
|
|
.dexlist .abilitydesccol,
|
|
.dexlist .movedesccol {
|
|
white-space: nowrap;
|
|
padding-top: 8px;
|
|
font-size: 8pt;
|
|
width: 488px;
|
|
height: 21px;
|
|
overflow: hidden;
|
|
color: #777777;
|
|
}
|
|
.dexlist .movedesccol {
|
|
width: 284px;
|
|
}
|
|
.dexlist .itemdesccol {
|
|
width: 464px;
|
|
}
|
|
|
|
.dexlist .sortrow {
|
|
background: #D0D0D0;
|
|
border-bottom: 1px solid #888;
|
|
height: 20px;
|
|
color: black;
|
|
}
|
|
.dexlist .sortcol {
|
|
font-family: Verdana, sans-serif;
|
|
font-size: 8pt;
|
|
background: transparent;
|
|
color: black;
|
|
float: left;
|
|
border-radius: 0;
|
|
border: 0;
|
|
padding: 0 0 0 0;
|
|
text-align: center;
|
|
height: 20px;
|
|
}
|
|
.dexlist .sortcol.cur {
|
|
font-weight: bold;
|
|
background: #E0E0E0;
|
|
}
|
|
.dexlist .sortcol:hover {
|
|
background: #F0F0F0;
|
|
}
|
|
.dexlist .sortcol.numsortcol.cur,
|
|
.dexlist .sortcol.numsortcol.cur:hover {
|
|
background: #D0D0D0;
|
|
cursor: default;
|
|
}
|
|
.dexlist .numsortcol {
|
|
width: 80px;
|
|
}
|
|
.dexlist .pnamesortcol {
|
|
width: 127px;
|
|
}
|
|
.dexlist .typesortcol {
|
|
width: 70px;
|
|
}
|
|
.dexlist .abilitysortcol {
|
|
width: 172px;
|
|
}
|
|
.dexlist .statsortcol {
|
|
width: 24px;
|
|
text-align: right;
|
|
}
|
|
.dexlist .movenamesortcol {
|
|
width: 159px;
|
|
}
|
|
.dexlist .movetypesortcol {
|
|
width: 35px;
|
|
}
|
|
.dexlist .powersortcol {
|
|
width: 30px;
|
|
}
|
|
.dexlist .accuracysortcol {
|
|
width: 49px;
|
|
}
|
|
.dexlist .ppsortcol {
|
|
width: 23px;
|
|
}
|
|
|
|
.dexlist .result a {
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.dexlist .result a.cur {
|
|
border-color: #555555;
|
|
background: rgba(248, 248, 248, 0.4);
|
|
}
|
|
.dexlist .result a:hover,
|
|
.dexlist .result a.hover {
|
|
border-color: #D8D8D8;
|
|
background: #F8F8F8;
|
|
}
|
|
.dexlist .result a.cur:hover,
|
|
.dexlist .result a.cur.hover {
|
|
border-color: #555555;
|
|
background: #F8F8F8;
|
|
}
|
|
|
|
/* dark mode */
|
|
|
|
.dark .dexlist h3, .dark .dexentry h3, .dark .resultheader h3 {
|
|
background: #636363;
|
|
color: #F1F1F1;
|
|
border: 1px solid #A9A9A9;
|
|
text-shadow: 1px 1px 0 rgb(40, 43, 45);
|
|
box-shadow: inset 0px 1px 0 rgb(49, 49, 49);
|
|
border-right: none;
|
|
}
|
|
|
|
.dark .dexlist .result a.hover,
|
|
.dark .dexlist .result a:hover {
|
|
border-color: #777777;
|
|
background: rgba(100, 100, 100, 0.5);
|
|
color: #FFFFFF;
|
|
}
|
|
.dark .dexlist .result a.cur {
|
|
border-color: #BBBBBB;
|
|
background: rgba(100, 100, 100, 0.2);
|
|
}
|
|
.dark .dexlist .result a.cur:hover {
|
|
border-color: #BBBBBB;
|
|
background: rgba(100, 100, 100, 0.4);
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.dark .dexlist .namecol,
|
|
.dark .dexlist .pokemonnamecol,
|
|
.dark .dexlist .movenamecol {
|
|
color: #DDD;
|
|
}
|
|
.dark .dexlist .col {
|
|
color: #DDD;
|
|
}
|
|
.dark .dexlist .cur .col {
|
|
color: #FFF;
|
|
}
|
|
.dark .dexlist a:hover .col {
|
|
color: #FFF;
|
|
}
|