mirror of
https://github.com/smogon/pokemon-showdown-client.git
synced 2026-05-05 21:16:26 -05:00
e646c23bc2
Chat room titles now turn orange and their icon changes when someone talks in them. This is subtler than the highlight notification, and should make it easier to keep up with rooms. This change involves a refactor of the notification system, which also happens to improve room-switching performance by only running updateTopbar once instead of 3-5 times like it would before.
2471 lines
46 KiB
CSS
2471 lines
46 KiB
CSS
/*********************************************************
|
|
* Global
|
|
*********************************************************/
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body {
|
|
color: white;
|
|
font-size: 11pt;
|
|
font-family: Verdana, Helvetica, Arial, sans-serif;
|
|
|
|
/* license: CC-BY source: http://commons.wikimedia.org/wiki/File:%22La_piedra%22_(2809466426).jpg */
|
|
background: #344b6c url(../fx/client-bg-charizards.jpg) no-repeat left center fixed;
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
-o-background-size: cover;
|
|
background-size: cover;
|
|
}
|
|
|
|
.pad {
|
|
margin: 0;
|
|
padding: 5px 15px;
|
|
}
|
|
.label {
|
|
font-size: 9pt;
|
|
font-weight: bold;
|
|
display: block;
|
|
}
|
|
.optlabel {
|
|
font-size: 9pt;
|
|
display: block;
|
|
}
|
|
.label strong {
|
|
font-size: 11pt;
|
|
display: block;
|
|
}
|
|
.label .textbox {
|
|
display: block;
|
|
}
|
|
.textbox {
|
|
border: 1px solid #AAAAAA;
|
|
border-radius: 3px;
|
|
padding: 2px 3px;
|
|
font-family: Verdana, Helvetica, Arial, sans-serif;
|
|
font-size: 9pt;
|
|
|
|
box-shadow: inset 0px 1px 2px #CCCCCC, 1px 1px 0 rgba(255,255,255,.6);
|
|
background: #F8FBFD;
|
|
color: black;
|
|
}
|
|
.textbox:hover {
|
|
border-color: #474747;
|
|
box-shadow: inset 0px 1px 2px #D2D2D2, 1px 1px 0 rgba(255,255,255,.6);
|
|
background: #FFFFFF;
|
|
}
|
|
.textbox:focus {
|
|
outline: 0 none;
|
|
border: 1px solid #004488;
|
|
box-shadow: inset 0px 1px 2px #D2D2D2, 0px 0px 5px #2266AA;
|
|
background: #FFFFFF;
|
|
}
|
|
a.subtle {
|
|
text-decoration: none;
|
|
color: black;
|
|
}
|
|
a.subtle:hover {
|
|
text-decoration: underline;
|
|
color: #6688CC;
|
|
}
|
|
.buttonbar {
|
|
margin-top: 1em;
|
|
text-align: center;
|
|
}
|
|
|
|
/*********************************************************
|
|
* Header
|
|
*********************************************************/
|
|
|
|
.header {
|
|
position: relative;
|
|
height: 50px;
|
|
background: url(../fx/client-topbar-bg.png) repeat-x left top scroll;
|
|
}
|
|
.header h1 {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.header .logo {
|
|
float: left;
|
|
margin: 2px 0 0 2px;
|
|
}
|
|
|
|
.userbar {
|
|
position: absolute;
|
|
top: 14px;
|
|
right: 14px;
|
|
font-weight: bold;
|
|
}
|
|
.userbar .username {
|
|
color: black;
|
|
text-shadow: 1px 1px 0 #f8f8f8, 1px -1px 0 #f8f8f8, -1px 1px 0 #f8f8f8, -1px -1px 0 #f8f8f8;
|
|
}
|
|
.username {
|
|
cursor: pointer;
|
|
}
|
|
.userbar button {
|
|
cursor: pointer;
|
|
}
|
|
.userbar button.icon {
|
|
height: 21px;
|
|
width: 23px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
padding: 0;
|
|
}
|
|
.userbar button.icon i {
|
|
margin: 0 -5px;
|
|
}
|
|
|
|
.tabbar {
|
|
position: absolute;
|
|
bottom: 1px;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
display: block;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0 0 0 0;
|
|
height: 37px;
|
|
text-align: left;
|
|
|
|
color: white;
|
|
text-shadow: 0 1px 0 black;
|
|
font-size: 10pt;
|
|
|
|
line-height: 100%;
|
|
}
|
|
.maintabbarbottom {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: -6px;
|
|
height: 6px;
|
|
background: #f8f8f8;
|
|
border: solid 1px #AAAAAA;
|
|
border-left: 0;
|
|
margin: -1px 0 0 0;
|
|
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
|
|
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
|
|
box-shadow: 0 1px 2px rgba(0,0,0,.2);
|
|
}
|
|
.tabbar.maintabbar {
|
|
margin-left: 144px;
|
|
margin-right: 165px;
|
|
overflow: hidden;
|
|
}
|
|
.maintabbar .inner {
|
|
width: 400%;
|
|
}
|
|
.maintabbar .overflow {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 12;
|
|
}
|
|
.maintabbar .overflow button {
|
|
height: 36px;
|
|
margin: 0;
|
|
}
|
|
|
|
.tabbar li,
|
|
.tabbar ul {
|
|
display: block;
|
|
float: left;
|
|
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.tabbar a.button {
|
|
outline: none;
|
|
display: inline-block;
|
|
height: 28px;
|
|
min-width: 52px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
text-shadow: 0 1px 0 rgba(255,255,255,.4);
|
|
border-radius: 5px;
|
|
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 -1px 2px rgba(255,255,255,1);
|
|
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 -1px 2px rgba(255,255,255,1);
|
|
box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 -1px 2px rgba(255,255,255,1);
|
|
white-space: nowrap;
|
|
|
|
/* default colors */
|
|
color: #222222;
|
|
text-shadow: 0 1px 0 white;
|
|
border: solid 1px #AAAAAA;
|
|
background: #e3e3e3;
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e3e3e3));
|
|
background: -moz-linear-gradient(top, #f6f6f6, #e3e3e3);
|
|
background: linear-gradient(top, #f6f6f6, #e3e3e3);
|
|
|
|
position: relative;
|
|
padding: 3px 2px 3px 2px;
|
|
margin: 0 -1px 0 0;
|
|
top: 1px;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
font-size: 11px;
|
|
}
|
|
.tabbar a.button i {
|
|
display: block;
|
|
text-align: center;
|
|
margin: 1px auto 0 auto;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
height: 14px;
|
|
}
|
|
.tabbar a.button span {
|
|
display: block;
|
|
overflow: hidden;
|
|
}
|
|
.tabbar a.button i.text {
|
|
font-size: 11px;
|
|
margin-right: 8px;
|
|
padding-left: 0;
|
|
overflow: hidden;
|
|
font-weight: bold;
|
|
}
|
|
.tabbar a.button i.text + span {
|
|
margin-right: -6px;
|
|
}
|
|
.tabbar a.button:hover {
|
|
background: #cfcfcf;
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#cfcfcf));
|
|
background: -moz-linear-gradient(top, #f2f2f2, #cfcfcf);
|
|
background: linear-gradient(top, #f2f2f2, #cfcfcf);
|
|
border-color: #606060;
|
|
|
|
z-index: 10;
|
|
}
|
|
.tabbar a.button:active {
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#cfcfcf), to(#f2f2f2));
|
|
background: -moz-linear-gradient(top, #cfcfcf, #f2f2f2);
|
|
background: linear-gradient(top, #cfcfcf, #f2f2f2);
|
|
}
|
|
.tabbar a.button.notifying {
|
|
border-color: #AA8866;
|
|
background: #e3c3a3;
|
|
}
|
|
.tabbar a.button.notifying:hover {
|
|
border-color: #604020;
|
|
background: #cfaf8f;
|
|
}
|
|
.tabbar a.button.subtle-notifying {
|
|
color: #AA6600;
|
|
}
|
|
.tabbar a.button.subtle-notifying .icon-comment-alt:before,
|
|
.tabbar a.button.notifying .icon-comment-alt:before {
|
|
content: "\f0e6";
|
|
}
|
|
.tabbar a.button.cur,
|
|
.tabbar a.button.cur:hover {
|
|
color: #777777;
|
|
background: #f8f8f8;
|
|
box-shadow: none;
|
|
border-color: #AAAAAA;
|
|
border-bottom: 0;
|
|
cursor: default;
|
|
padding-top: 3px;
|
|
padding-bottom: 5px;
|
|
top: 0px;
|
|
}
|
|
.tabbar li:first-child a.button {
|
|
border-top-left-radius: 5px;
|
|
margin-left: 6px;
|
|
}
|
|
.tabbar li:last-child a.button {
|
|
border-top-right-radius: 5px;
|
|
}
|
|
.tabbar a.closable {
|
|
padding-right: 8px;
|
|
}
|
|
.tabbar .closebutton {
|
|
display: inline-block;
|
|
margin: 0 0 0 -18px;
|
|
width: 18px;
|
|
position: relative;
|
|
z-index: 11;
|
|
top: 5px;
|
|
vertical-align: top;
|
|
}
|
|
.tabbar a.cur + .closebutton {
|
|
top: 4px;
|
|
}
|
|
.closebutton,
|
|
.minimizebutton {
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
color: #999999;
|
|
text-shadow: none;
|
|
border: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
}
|
|
.closebutton:hover,
|
|
.minimizebutton:hover {
|
|
color: #BB2222;
|
|
}
|
|
.closebutton:active,
|
|
.minimizebutton:active {
|
|
color: #661111;
|
|
}
|
|
|
|
/*********************************************************
|
|
* Rooms
|
|
*********************************************************/
|
|
|
|
.ps-room {
|
|
position: absolute;
|
|
display: block;
|
|
top: 56px;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
border-left: 1px solid #AAAAAA;
|
|
margin-left: -1px;
|
|
}
|
|
.scrollable {
|
|
overflow: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
overflow-scrolling: touch;
|
|
}
|
|
.ps-room.ps-room-light {
|
|
background: rgba(242,247,250,.85);
|
|
color: black;
|
|
}
|
|
.ps-room.ps-room-opaque {
|
|
background: #EEF2F5;
|
|
color: black;
|
|
}
|
|
|
|
.ps-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: #CCCCCC;
|
|
background: rgba(212, 212, 212, .5);
|
|
|
|
overflow: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
overflow-scrolling: touch;
|
|
z-index: 20;
|
|
}
|
|
.ps-popup {
|
|
position: absolute;
|
|
top: auto; right: auto; left: auto; bottom: auto;
|
|
text-align: left;
|
|
background: #E1E8E8;
|
|
color: black;
|
|
border: 1px solid #999999;
|
|
padding: 2px 10px;
|
|
|
|
border-radius: 6px;
|
|
box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #DDDDDD, 2px 2px 3px rgba(0,0,0,.2);
|
|
z-index: 20;
|
|
}
|
|
.ps-overlay .ps-popup {
|
|
position: static;
|
|
margin: 80px auto 20px auto;
|
|
max-width: 320px;
|
|
}
|
|
.ps-popup p,
|
|
.ps-popup h3 {
|
|
margin: 7px 0;
|
|
}
|
|
.ps-popup h3 {
|
|
font-size: 12pt;
|
|
}
|
|
p.or {
|
|
font-size: 12pt;
|
|
font-style: italic;
|
|
font-weight: bold;
|
|
color: #444444;
|
|
margin: 20px 0;
|
|
text-align: center;
|
|
}
|
|
p.or:before,
|
|
p.or:after {
|
|
content: "";
|
|
font-size: 10px;
|
|
padding: 0 0 0 85px;
|
|
margin: 0 9px 0 0;
|
|
border-bottom: 1px solid #777777;
|
|
position: relative;
|
|
top: -7px;
|
|
}
|
|
p.or:after {
|
|
margin: 0 0 0 9px;
|
|
}
|
|
.ps-popup p.error {
|
|
font-weight: bold;
|
|
color: #EE4422;
|
|
}
|
|
|
|
.popupmenu, popupmenu li {
|
|
margin: -2px 0 -1px 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
font-size: 8pt;
|
|
}
|
|
.popupmenu h3 {
|
|
margin: 5px 0 0 -2px;
|
|
padding: 1px 0;
|
|
font-size: 8pt;
|
|
color: #579;
|
|
}
|
|
.popupmenu li:first-child h3 {
|
|
margin-top: 0;
|
|
}
|
|
.popupmenu button {
|
|
display: block;
|
|
cursor: pointer;
|
|
font-size: 8pt;
|
|
font-family: Verdana, Helvetica, Arial, sans-serif;
|
|
margin: 0 0 0 6px;
|
|
padding: 0 4px;
|
|
border: 0;
|
|
border-radius: 2px;
|
|
background: transparent;
|
|
color: black;
|
|
width: 204px;
|
|
height: 19px;
|
|
text-align: left;
|
|
|
|
box-sizing: border-box;
|
|
}
|
|
@media (max-height:590px) {
|
|
.popupmenu button {
|
|
height: 17px;
|
|
}
|
|
.popupmenu h3 {
|
|
margin-top: 2px;
|
|
}
|
|
.popupmenu, popupmenu li {
|
|
margin: -3px 0 -2px 0;
|
|
}
|
|
}
|
|
@media (max-height:518px) {
|
|
.popupmenu button {
|
|
height: 16px;
|
|
}
|
|
.popupmenu h3 {
|
|
margin-top: 1px;
|
|
}
|
|
}
|
|
|
|
.popupmenu button.sel {
|
|
padding: 0 3px;
|
|
border: 1px solid #AAAAAA;
|
|
}
|
|
.popupmenu button:hover,
|
|
.popupmenu button.sel:hover {
|
|
padding: 0 3px;
|
|
border: 1px solid #888888;
|
|
background: #D5D5D5;
|
|
}
|
|
.select {
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
width: 230px;
|
|
height: 32px;
|
|
padding: 0 5px;
|
|
font-size: 9pt;
|
|
text-align: left;
|
|
font-family: Verdana, Helvetica, Arial, sans-serif;
|
|
|
|
border-radius: 4px;
|
|
border: 1px solid #888888;
|
|
background: #EEEEEE;
|
|
box-shadow: inset 0 1px 0 #FFFFFF;
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#edf2f8), to(#d7e3ec));
|
|
background: linear-gradient(to bottom, #edf2f8, #d7e3ec);
|
|
color: black;
|
|
}
|
|
.select.teamselect {
|
|
height: 43px;
|
|
}
|
|
.select:hover {
|
|
border-color: #555555;
|
|
background: #FFFFFF;
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#dce4ec), to(#c6d3e0));
|
|
background: linear-gradient(to bottom, #dce4ec, #c6d3e0);
|
|
}
|
|
.select:active {
|
|
border-color: #777777;
|
|
background: #DDDDDD;
|
|
box-shadow: none;
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#d1dce6), to(#e7edf2));
|
|
background: linear-gradient(to bottom, #d1dce6, #e7edf2);
|
|
}
|
|
.select:after {
|
|
float: right;
|
|
font-size: 14px;
|
|
content: "\f0d7";
|
|
font-family: FontAwesome;
|
|
-webkit-font-smoothing: antialiased;
|
|
color: #777777;
|
|
}
|
|
.select:disabled {
|
|
border-color: #999999;
|
|
background: rgba(220,220,220,.65);
|
|
color: #555555;
|
|
box-shadow: none;
|
|
}
|
|
.select:disabled:after {
|
|
content: "";
|
|
}
|
|
.select.preselected,
|
|
.select:disabled.preselected {
|
|
color: black;
|
|
}
|
|
|
|
/*********************************************************
|
|
* Main menu
|
|
*********************************************************/
|
|
|
|
.leftmenu {
|
|
padding: 40px 0 0 0;
|
|
width: 324px;
|
|
}
|
|
.rightmenu {
|
|
position: absolute;
|
|
top: 40px;
|
|
right: 25px;
|
|
}
|
|
.activitymenu {
|
|
position: absolute;
|
|
left: 325px;
|
|
top: 40px;
|
|
}
|
|
.mainmenu {
|
|
padding: 0 0 30px 0;
|
|
}
|
|
|
|
.battleform {
|
|
width: 230px;
|
|
text-align: left;
|
|
margin: 0 auto;
|
|
}
|
|
.battleform .buttonbar {
|
|
text-align: center;
|
|
}
|
|
|
|
.mainmenuwrapper {
|
|
position: relative;
|
|
min-height: 100%;
|
|
}
|
|
.mainmenufooter {
|
|
position: absolute;
|
|
bottom: 15px;
|
|
left: 20px;
|
|
color: #BBBBBB;
|
|
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black;
|
|
}
|
|
.mainmenufooter blockquote {
|
|
margin: 0 0 1em 0;
|
|
padding: 0;
|
|
}
|
|
.mainmenufooter small {
|
|
font-size: 9pt;
|
|
}
|
|
.mainmenufooter a {
|
|
text-decoration: underline;
|
|
color: #6688CC;
|
|
}
|
|
.mainmenufooter a:hover {
|
|
text-decoration: underline;
|
|
color: #99BBFF;
|
|
}
|
|
|
|
.pmbox {
|
|
width: 270px;
|
|
margin: 0 auto;
|
|
min-height: 2px;
|
|
}
|
|
.pm-window {
|
|
margin-bottom: 12px;
|
|
}
|
|
.pm-window h3 {
|
|
background: rgba(248,248,248,.8);
|
|
color: #777777;
|
|
margin: 0;
|
|
padding: 2px 5px;
|
|
font-size: 11pt;
|
|
border: 1px solid #AAAAAA;
|
|
border-top-left-radius: 5px;
|
|
border-top-right-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
.pm-window h3:hover {
|
|
color: #333333;
|
|
}
|
|
.pm-window h3.pm-minimized {
|
|
border-radius: 5px;
|
|
}
|
|
.pm-window h3.pm-notifying {
|
|
border-color: #AA8866;
|
|
background: #E3C3A3;
|
|
}
|
|
.pm-window h3.pm-notifying:hover {
|
|
border-color: #604020;
|
|
background: #CFAF8F;
|
|
}
|
|
.pm-window h3 .closebutton,
|
|
.pm-window h3 .minimizebutton {
|
|
float: right;
|
|
padding-right: 1px;
|
|
}
|
|
.pm-window h3 small {
|
|
color: #888888;
|
|
font-weight: normal;
|
|
vertical-align: 1px;
|
|
}
|
|
.pm-log {
|
|
min-height: 100px;
|
|
max-height: 300px;
|
|
background: rgba(242,247,250,.925);
|
|
color: black;
|
|
word-wrap: break-word;
|
|
border: 1px solid #AAAAAA;
|
|
border-top: 0;
|
|
border-bottom: 0;
|
|
|
|
overflow: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
overflow-scrolling: touch;
|
|
}
|
|
.pm-log-add {
|
|
border: 1px solid #AAAAAA;
|
|
border-bottom-left-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
background: rgba(242,247,250,.85);
|
|
}
|
|
.pm-window.collapsed .pm-log,
|
|
.pm-window.collapsed .pm-log-add {
|
|
display: none;
|
|
}
|
|
.pm-window.focused h3,
|
|
.pm-window.focused .pm-log,
|
|
.pm-window.focused .pm-log-add {
|
|
border-color: #555555;
|
|
}
|
|
.pm-window.focused h3,
|
|
.pm-window.focused h3:hover {
|
|
background: #f8f8f8;
|
|
color: #222222;
|
|
cursor: default;
|
|
}
|
|
.challenge {
|
|
margin-top: -1px;
|
|
background: #fcd2b3;
|
|
border: 1px solid #f57b21;
|
|
color: #682f05;
|
|
padding: 1px 5px;
|
|
}
|
|
.challenge p {
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.tiny-layout .leftmenu,
|
|
.tiny-layout .rightmenu,
|
|
.tiny-layout .activitymenu {
|
|
position: static;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
width: auto;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.tiny-layout .leftmenu {
|
|
padding-top: 30px;
|
|
}
|
|
.tiny-layout .activitymenu {
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.mainmessage {
|
|
display: block;
|
|
padding: 10px 15px;
|
|
margin: 30px 40px;
|
|
max-width: 400px;
|
|
border-radius: 20px;
|
|
|
|
background: rgba(201, 207, 219, .8);
|
|
color: black;
|
|
}
|
|
.menugroup {
|
|
display: block;
|
|
padding: 10px 0;
|
|
margin: 0 27px 30px 27px;
|
|
max-width: 400px;
|
|
border-radius: 20px;
|
|
|
|
background: rgba(201, 207, 219, .6);
|
|
color: white;
|
|
text-shadow: 0 1px 0 black;
|
|
}
|
|
.menugroup {
|
|
background: rgba(201, 207, 219, .4);
|
|
text-align: center;
|
|
}
|
|
|
|
.mainmessage p,
|
|
.menugroup p {
|
|
margin: 10px 0;
|
|
}
|
|
.menugroup .button {
|
|
box-sizing: border-box;
|
|
font-size: 12pt;
|
|
font-family: Verdana, Helvetica, Arial, sans-serif;
|
|
|
|
display: inline-block;
|
|
padding: 5px 7px 3px 7px;
|
|
|
|
width: 200px;
|
|
|
|
outline: none;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
text-shadow: 0 -1px 0 hsl(210,40%,10%);
|
|
border-radius: 5px;
|
|
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 1px 1px rgba(255,255,255,.8);
|
|
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 1px 1px rgba(255,255,255,.8);
|
|
box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 1px 1px rgba(255,255,255,.8);
|
|
|
|
/* default colors */
|
|
color: #FFFFFF;
|
|
border: solid 1px #AAAAAA;
|
|
background: #779EC5;
|
|
background: hsl(210,40%,62%);
|
|
background: -webkit-gradient(linear, left top, left bottom, from(hsl(210,40%,72%)), to(hsl(210,40%,52%)));
|
|
background: -moz-linear-gradient(top, hsl(210,40%,72%), hsl(210,40%,52%));
|
|
background: linear-gradient(top, hsl(210,40%,72%), hsl(210,40%,52%));
|
|
border-color: hsl(210,40%,40%);
|
|
}
|
|
.menugroup button.big {
|
|
width: 230px;
|
|
padding: 6px 7px 6px 7px;
|
|
font-size: 14pt;
|
|
}
|
|
.menugroup .button:hover {
|
|
background: #5485B6;
|
|
background: hsl(210,40%,52%);
|
|
background: -webkit-gradient(linear, left top, left bottom, from(hsl(210,40%,62%)), to(hsl(210,40%,42%)));
|
|
background: -moz-linear-gradient(top, hsl(210,40%,62%), hsl(210,40%,42%));
|
|
background: linear-gradient(top, hsl(210,40%,62%), hsl(210,40%,42%));
|
|
border-color: hsl(210,40%,21%);
|
|
}
|
|
.menugroup .button:active {
|
|
box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 -1px 1px rgba(255,255,255,.3), inset 0 1px 1px rgba(0,0,0,.4);
|
|
background: #406B96;
|
|
background: hsl(210,40%,42%);
|
|
background: -webkit-gradient(linear, left top, left bottom, from(hsl(210,40%,42%)), to(hsl(210,40%,58%)));
|
|
background: -moz-linear-gradient(top, hsl(210,40%,42%), hsl(210,40%,58%));
|
|
background: linear-gradient(top, hsl(210,40%,42%), hsl(210,40%,58%));
|
|
border-color: hsl(210,40%,21%);
|
|
}
|
|
.menugroup .button.disabled,
|
|
.menugroup .button.disabled:hover,
|
|
.menugroup .button.disabled:active {
|
|
cursor: default;
|
|
background: #EEEEEE;
|
|
border: 1px solid #CCCCCC;
|
|
color: #999999;
|
|
text-shadow: none;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,.1);
|
|
}
|
|
|
|
.rightmenu {
|
|
width: 294px;
|
|
}
|
|
.rightmenu .menugroup .button {
|
|
width: 180px;
|
|
}
|
|
@media (max-width:895px) {
|
|
.mainmenu {
|
|
padding-bottom: 1px;
|
|
}
|
|
.rightmenu {
|
|
position: static;
|
|
top: 0;
|
|
right: 0;
|
|
padding-bottom: 30px;
|
|
}
|
|
.rightmenu {
|
|
width: 324px;
|
|
}
|
|
.rightmenu .menugroup .button {
|
|
width: 200px;
|
|
}
|
|
}
|
|
|
|
/*********************************************************
|
|
* Ladder
|
|
*********************************************************/
|
|
|
|
.ladder table, .ladder td, .ladder th {
|
|
border-collapse: collapse;
|
|
border: 1px solid #BBBBBB;
|
|
}
|
|
.ladder td, .ladder th {
|
|
padding: 3px 5px;
|
|
}
|
|
.ladder th {
|
|
text-align: left;
|
|
font-size: 9pt;
|
|
background: #EEEEEE;
|
|
}
|
|
.ladder span {
|
|
color: gray;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.roomlist {
|
|
text-align: left;
|
|
}
|
|
.roomlist a.ilink {
|
|
display: block;
|
|
margin: 2px 7px 4px 7px;
|
|
padding: 1px 4px 2px 4px;
|
|
border: 1px solid #BBCCDD;
|
|
background: #F8FBFD;
|
|
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
color: #336699;
|
|
text-shadow: #ffffff 0px -1px 0;
|
|
box-shadow: 1px 1px 1px #D5D5D5;
|
|
cursor: pointer;
|
|
font-size: 10pt;
|
|
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
.roomlist a.ilink small {
|
|
font-size: 8pt;
|
|
}
|
|
.roomlist a.ilink:hover {
|
|
border: 1px solid #8899AA;
|
|
background: #F1F4F9;
|
|
color: #224466;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.ps-popup.credits {
|
|
max-width: 380px;
|
|
margin-top: 20px;
|
|
padding: 5px 60px;
|
|
}
|
|
.credits h2 {
|
|
font-size: 11pt;
|
|
font-style: italic;
|
|
margin-bottom: 0;
|
|
color: #6688AA;
|
|
}
|
|
.credits ul {
|
|
padding-left: 1.5em;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
color: #88AACC;
|
|
}
|
|
.credits ul li p {
|
|
color: black;
|
|
}
|
|
.credits li small {
|
|
font-size: 10pt;
|
|
display: block;
|
|
color: #555555;
|
|
}
|
|
|
|
/*********************************************************
|
|
* Chat
|
|
*********************************************************/
|
|
|
|
.chat-log {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 40px;
|
|
font-size: 10pt;
|
|
background: rgba(242,247,250,.5);
|
|
color: black;
|
|
word-wrap: break-word;
|
|
|
|
overflow: auto;
|
|
overflow-x: hidden;
|
|
-webkit-overflow-scrolling: touch;
|
|
overflow-scrolling: touch;
|
|
}
|
|
.chat-log-add {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
min-height: 36px;
|
|
padding: 3px 4px 0 4px;
|
|
border-top: 1px solid #AAAAAA;
|
|
}
|
|
.chat-log .notice,
|
|
.chat-log .chat,
|
|
.pm-log .chat {
|
|
padding: 4px 0 2px 0;
|
|
font-size: 9pt;
|
|
}
|
|
.chat em {
|
|
padding: 0 4px 0 3px;
|
|
font-style: normal;
|
|
}
|
|
.chat small {
|
|
font-weight: normal;
|
|
font-size: 8pt;
|
|
color: #888888;
|
|
}
|
|
.chat.timer {
|
|
color: #992222;
|
|
}
|
|
.debug {
|
|
display: none;
|
|
}
|
|
.highlighted {
|
|
background-color: #FFDDAA;
|
|
}
|
|
.revealed {
|
|
background-color: #C8FDEA;
|
|
}
|
|
.message-pm {
|
|
color: #007100;
|
|
}
|
|
.message-pm .pmnote {
|
|
cursor: pointer;
|
|
}
|
|
.chat-log .inner,
|
|
.pm-log .inner {
|
|
padding: 4px 8px 6px 8px;
|
|
}
|
|
a.ilink {
|
|
text-decoration: none;
|
|
color: #224488;
|
|
}
|
|
a.ilink:hover {
|
|
text-decoration: underline;
|
|
color: #6688CC;
|
|
}
|
|
|
|
.chatbox {
|
|
margin: 0 10px 0 80px;
|
|
padding: 5px 0 0 0;
|
|
}
|
|
.chatbox.nolabel {
|
|
margin: 0 14px 0 6px;
|
|
padding: 5px 0 5px 0;
|
|
}
|
|
.chatbox label {
|
|
float: left;
|
|
margin-left: -78px;
|
|
padding-top: 2px;
|
|
width: 73px;
|
|
text-align: right;
|
|
overflow: hidden;
|
|
white-space: pre;
|
|
|
|
font-weight: bold;
|
|
font-size: 8pt;
|
|
}
|
|
.chatbox textarea {
|
|
display: block;
|
|
height: 1.1em;
|
|
width: 100%;
|
|
resize: none;
|
|
font-size: 9pt;
|
|
font-family: Verdana, Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
/* Tournaments */
|
|
|
|
.tournaments-info > ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.tournament-wrapper {
|
|
display: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2em;
|
|
line-height: 2em;
|
|
text-align: center;
|
|
border-bottom: 1px #aaa solid;
|
|
}
|
|
.tournament-wrapper.active {
|
|
display: block;
|
|
}
|
|
.tournament-wrapper.active + .chat-log {
|
|
top: 2.4em;
|
|
}
|
|
|
|
.tournament-title {
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tournament-status, .tournament-toggle {
|
|
position: absolute;
|
|
top: 0;
|
|
padding: 0 0.5em;
|
|
font-weight: normal;
|
|
font-size: 80%;
|
|
background-color: rgba(242, 247, 250, 0.85);
|
|
border-right: 1px #aaa solid;
|
|
}
|
|
.tournament-status {
|
|
left: 0;
|
|
}
|
|
.tournament-toggle {
|
|
right: 0;
|
|
border-left: 1px #aaa solid;
|
|
}
|
|
|
|
.tournament-box {
|
|
position: absolute;
|
|
top: 2em;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1;
|
|
line-height: 1em;
|
|
border-bottom: 1px #aaa solid;
|
|
border-right: 1px #aaa solid;
|
|
background-color: rgba(242, 247, 250, 0.85);
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.2s ease-in-out;
|
|
-o-transition: max-height 0.2s ease-in-out;
|
|
-moz-transition: max-height 0.2s ease-in-out;
|
|
-webkit-transition: max-height 0.2s ease-in-out;
|
|
}
|
|
|
|
.tournament-bracket {
|
|
max-height: 200px;
|
|
padding: 10px;
|
|
overflow: hidden;
|
|
font-size: 8pt;
|
|
}
|
|
.tournament-bracket-overflowing {
|
|
height: 200px;
|
|
padding: 0;
|
|
position: relative;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.tournament-popout-link {
|
|
position: absolute;
|
|
bottom: 0.5em;
|
|
right: 0.5em;
|
|
}
|
|
.tournament-popout-bracket {
|
|
/* Actual max-width and -height setting is in client-chat-tournament.js (BracketPopup)
|
|
max-width: 80%;
|
|
max-height: 80%;*/
|
|
max-width: inherit !important;
|
|
position: relative !important;
|
|
left: 0;
|
|
top: 0;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
font-size: 8pt;
|
|
text-align: center;
|
|
}
|
|
.tournament-popout-bracket > *[class^='tournament-bracket-'] {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
.tournament-popout-bracket > .buttonbar {
|
|
position: absolute;
|
|
right: 0.5em;
|
|
bottom: 0;
|
|
}
|
|
|
|
.tournament-bracket-table {
|
|
margin: 0 auto;
|
|
empty-cells: hide;
|
|
border-bottom: 1px #aaa solid;
|
|
border-collapse: collapse;
|
|
}
|
|
.tournament-bracket-table td, .tournament-bracket-table th {
|
|
border: 1px #aaa solid;
|
|
padding: 5px;
|
|
}
|
|
.tournament-bracket-table td {
|
|
white-space: nowrap;
|
|
}
|
|
.tournament-bracket-table .empty,
|
|
.tournament-bracket-table .tournament-bracket-table-cell-null {
|
|
border-width: 0;
|
|
}
|
|
.tournament-bracket-table-cell-result-win {
|
|
background-color: rgba(0, 255, 0, 0.2)
|
|
}
|
|
.tournament-bracket-table-cell-result-draw {
|
|
background-color: rgba(255, 255, 0, 0.2)
|
|
}
|
|
.tournament-bracket-table-cell-result-loss {
|
|
background-color: rgba(255, 0, 0, 0.2)
|
|
}
|
|
|
|
.tournament-bracket-tree-link {
|
|
fill: none;
|
|
stroke: #aaa;
|
|
}
|
|
.tournament-bracket-tree-link-active {
|
|
stroke: #aa0;
|
|
stroke-width: 3px;
|
|
}
|
|
.tournament-bracket-tree-node > rect {
|
|
/* Note: Due to SVG limitations, dimensions and border radii are in client-chat-tournament.js (nodeSize) */
|
|
fill: rgba(225, 232, 242, 0.7);
|
|
stroke: rgba(178, 183, 191, 0.7);
|
|
}
|
|
.tournament-bracket-tree-node-win > rect {
|
|
fill: rgba(0, 255, 0, 0.2);
|
|
stroke: rgba(0, 255, 0, 0.5);
|
|
}
|
|
.tournament-bracket-tree-node-draw > rect {
|
|
fill: rgba(255, 255, 0, 0.2);
|
|
stroke: rgba(255, 255, 0, 0.5);
|
|
}
|
|
.tournament-bracket-tree-node-loss > rect {
|
|
fill: rgba(255, 0, 0, 0.2);
|
|
stroke: rgba(255, 0, 0, 0.5);
|
|
}
|
|
.tournament-bracket-tree-node > text {
|
|
font-size: 0.8em;
|
|
text-anchor: middle;
|
|
dominant-baseline: central;
|
|
}
|
|
.tournament-bracket-tree-node > text > a {
|
|
fill: #248;
|
|
}
|
|
.tournament-bracket-tree-node > text > a:hover {
|
|
fill: #68c;
|
|
}
|
|
.tournament-bracket-tree-node-match-team {
|
|
font-weight: bold;
|
|
}
|
|
.tournament-bracket-tree-node-match-team-draw, .tournament-bracket-tree-node-match-team-loss {
|
|
fill: #aaa;
|
|
}
|
|
|
|
.tournament-tools {
|
|
padding: 10px;
|
|
display: none;
|
|
border-top: 1px #aaa solid;
|
|
}
|
|
.tournament-tools.active {
|
|
display: block;
|
|
}
|
|
|
|
.tournament-join,
|
|
.tournament-leave {
|
|
display: none;
|
|
}
|
|
.tournament-join.active,
|
|
.tournament-leave.active {
|
|
display: inline;
|
|
}
|
|
|
|
.tournament-nomatches,
|
|
.tournament-challenge,
|
|
.tournament-challengeby,
|
|
.tournament-challenging,
|
|
.tournament-challenged {
|
|
display: none;
|
|
}
|
|
.tournament-nomatches.active,
|
|
.tournament-challenge.active,
|
|
.tournament-challengeby.active,
|
|
.tournament-challenging.active,
|
|
.tournament-challenged.active {
|
|
display: block;
|
|
}
|
|
|
|
div[class^='tournament-message-'], div[class*=' tournament-message-'] {
|
|
font-weight: bold;
|
|
}
|
|
.tournament-message-end-bracket {
|
|
font-weight: normal !important;
|
|
max-height: 400px;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
}
|
|
.tournament-message-end-bracket-overflowing {
|
|
height: 400px;
|
|
position: relative;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
/* Messages */
|
|
/* deprecated: moved to battle.css */
|
|
/* TODO: delete this section in like two months */
|
|
|
|
.message-announce {
|
|
background: #6688AA;
|
|
color: white;
|
|
padding: 1px 4px 2px;
|
|
}
|
|
.message-announce a,
|
|
.broadcast-green a,
|
|
.broadcast-blue a,
|
|
.broadcast-red a {
|
|
/* Readable link colour */
|
|
color: #DDEEFF;
|
|
}
|
|
.broadcast-green {
|
|
background-color: #559955;
|
|
color: white;
|
|
padding: 2px 4px;
|
|
}
|
|
.broadcast-blue {
|
|
background-color: #6688AA;
|
|
color: white;
|
|
padding: 2px 4px;
|
|
}
|
|
.infobox {
|
|
border: 1px solid #6688AA;
|
|
padding: 2px 4px;
|
|
}
|
|
.infobox-limited {
|
|
max-height: 200px;
|
|
overflow: hidden;
|
|
}
|
|
.broadcast-red {
|
|
background-color: #AA5544;
|
|
color: white;
|
|
padding: 2px 4px;
|
|
}
|
|
.message-learn-canlearn {
|
|
font-weight: bold;
|
|
color: #228822;
|
|
text-decoration: underline;
|
|
}
|
|
.message-learn-cannotlearn {
|
|
font-weight: bold;
|
|
color: #CC2222;
|
|
text-decoration: underline;
|
|
}
|
|
.message-effect-weak {
|
|
font-weight: bold;
|
|
color: #CC2222;
|
|
}
|
|
.message-effect-resist {
|
|
font-weight: bold;
|
|
color: #6688AA;
|
|
}
|
|
.message-effect-immune {
|
|
font-weight: bold;
|
|
color: #666666;
|
|
}
|
|
.message-learn-list {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
.message-throttle-notice {
|
|
color: red;
|
|
}
|
|
|
|
/* Userlist */
|
|
|
|
.userlist {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 145px;
|
|
border-right: 1px solid #AAAAAA;
|
|
|
|
overflow: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
overflow-scrolling: touch;
|
|
}
|
|
.chat-log.hasuserlist,
|
|
.chat-log-add.hasuserlist,
|
|
.tournament-wrapper.hasuserlist {
|
|
left: 146px;
|
|
}
|
|
.userlist,
|
|
.userlist li {
|
|
display: block;
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-align: left;
|
|
}
|
|
.userlist li {
|
|
border-bottom: 1px solid #CCCCCC;
|
|
height: 19px;
|
|
font: 10pt Verdana, sans-serif;
|
|
white-space: nowrap;
|
|
}
|
|
.userlist li em.group {
|
|
font-style: normal;
|
|
font-size: 8pt;
|
|
color: #AAAAAA;
|
|
display: block;
|
|
float: left;
|
|
text-align: center;
|
|
padding: 1px 0 0 1px;
|
|
width: 14px;
|
|
}
|
|
.userlist li button {
|
|
box-sizing: border-box;
|
|
display: block;
|
|
height: auto;
|
|
background: transparent;
|
|
border: 0;
|
|
padding: 1px 0;
|
|
margin: 0;
|
|
height: 19px;
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
font: 9pt Verdana, sans-serif;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
.userlist li button:hover {
|
|
background: #dce4ec;
|
|
}
|
|
.userlist li button:active {
|
|
background: #ccd4dc;
|
|
}
|
|
.userlist li.cur {
|
|
background: white;
|
|
}
|
|
.userlist li.cur button,
|
|
.userlist li.cur button:hover {
|
|
background: white;
|
|
margin: 0 0 0 -1px;
|
|
}
|
|
|
|
/*********************************************************
|
|
* Battle
|
|
*********************************************************/
|
|
|
|
.ps-room .battle-log {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 640px;
|
|
right: 0;
|
|
bottom: 40px;
|
|
height: auto;
|
|
width: auto;
|
|
|
|
word-wrap: break-word;
|
|
border-right: 0;
|
|
border-top: 0;
|
|
border-bottom: 0;
|
|
}
|
|
.ps-room .battle-log-add {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 640px;
|
|
right: 0;
|
|
top: auto;
|
|
min-height: 36px;
|
|
height: auto;
|
|
width: auto;
|
|
|
|
padding: 3px 4px 0 4px;
|
|
border-right: 0;
|
|
border-bottom: 0;
|
|
}
|
|
.ps-room .battle {
|
|
border-top: 0;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.ps-room .battle-controls {
|
|
position: absolute;
|
|
top: 370px;
|
|
left: 0;
|
|
width: 640px;
|
|
}
|
|
|
|
.battle-controls p {
|
|
margin: 2px 0 8px 0;
|
|
padding: 0 8px;
|
|
}
|
|
.battle-controls .whatdo {
|
|
margin-top: -2px;
|
|
padding: 0 8px;
|
|
font-size: 9pt;
|
|
color: #555555;
|
|
}
|
|
.battle-controls .whatdo small {
|
|
float: right;
|
|
padding: 1px 2px;
|
|
border: 1px solid #999999;
|
|
border-radius: 4px;
|
|
}
|
|
.battle-controls .whatdo small.weak {
|
|
color: #AAAA22;
|
|
border-color: #AAAA22;
|
|
}
|
|
.battle-controls .whatdo small.critical {
|
|
color: #EE4433;
|
|
border-color: #EE4433;
|
|
}
|
|
@media (max-width:750px) {
|
|
.battle-log,
|
|
.battle-log-add {
|
|
display: none;
|
|
}
|
|
}
|
|
.shiftselect button,
|
|
.moveselect button,
|
|
.switchselect button {
|
|
background: transparent;
|
|
border: 0;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
color: #555555;
|
|
font-size: 12pt;
|
|
display: block;
|
|
margin: 0;
|
|
padding: 9px 7px 1px 7px;
|
|
}
|
|
.shiftselect button {
|
|
color: #445588;
|
|
cursor: pointer;
|
|
}
|
|
.moveselect button {
|
|
color: #884422;
|
|
cursor: default;
|
|
}
|
|
.switchselect button {
|
|
color: #445588;
|
|
cursor: default;
|
|
}
|
|
.switchmenu button {
|
|
position: relative;
|
|
display: block;
|
|
float: left;
|
|
width: 100px;
|
|
margin-right: 6px;
|
|
font: 9pt Verdana, sans-serif;
|
|
padding: 5px 5px 5px 0;
|
|
white-space: pre;
|
|
overflow: hidden;
|
|
}
|
|
.switchmenu button .pokemonicon {
|
|
float: left;
|
|
margin: -4px 0;
|
|
opacity: 0.8;
|
|
}
|
|
.switchmenu button .hpbar {
|
|
position: absolute;
|
|
display: block;
|
|
border: 1px solid #AAA;
|
|
background: #EEE;
|
|
height: 2px;
|
|
bottom: 2px; left: 2px; right: 2px;
|
|
border-radius: 2px;
|
|
opacity: .6;
|
|
}
|
|
|
|
/* The declaration order of these three hpbar* classes is significant. */
|
|
|
|
.switchmenu button .hpbar span {
|
|
display: block;
|
|
height: 1px;
|
|
background: #0A6;
|
|
border-top: 1px solid #3C0;
|
|
border-radius: 1px;
|
|
}
|
|
.switchmenu button .hpbar-yellow span {
|
|
border-top-color: #a5aa53;
|
|
background-color: #a2a822;
|
|
}
|
|
.switchmenu button .hpbar-red span {
|
|
border-top-color: #faa;
|
|
background-color: #f55;
|
|
}
|
|
|
|
/****************/
|
|
|
|
.switchmenu button .status {
|
|
position: absolute;
|
|
display: block;
|
|
right: 2px;
|
|
bottom: 1px;
|
|
width: 5px;
|
|
height: 5px;
|
|
padding: 0;
|
|
border-radius: 2px;
|
|
border: 1px solid #C2C2C2;
|
|
opacity: 1.0;
|
|
}
|
|
.status {
|
|
color: white;
|
|
border-radius: 3px;
|
|
padding: 0 2px;
|
|
}
|
|
.status.brn {
|
|
background: #EE5533;
|
|
}
|
|
.status.psn, .status.tox {
|
|
background: #A4009A;
|
|
}
|
|
.status.par {
|
|
background: #9AA400;
|
|
}
|
|
.status.slp {
|
|
background: #AA77AA;
|
|
}
|
|
.status.frz {
|
|
background: #009AA4;
|
|
}
|
|
|
|
.movemenu button {
|
|
float: left;
|
|
display: block;
|
|
width: 153px;
|
|
margin-right: 6px;
|
|
height: 40px;
|
|
font: 10pt/100% Verdana, sans-serif;
|
|
position: relative;
|
|
padding: 6px 4px 0 4px;
|
|
}
|
|
.movemenu button small {
|
|
color: #777777;
|
|
}
|
|
.movemenu button small.type {
|
|
padding-top: 3px;
|
|
float: left;
|
|
font-size: 7pt;
|
|
}
|
|
.movemenu button small.pp {
|
|
padding-top: 3px;
|
|
float: right;
|
|
font-size: 7pt;
|
|
}
|
|
|
|
.switchmenu,
|
|
.movemenu {
|
|
display: block;
|
|
margin-right: -10px;
|
|
padding-left: 5px;
|
|
}
|
|
.switchmenu button,
|
|
.movemenu button {
|
|
position: relative;
|
|
outline: none;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
text-shadow: 0 1px 0 rgba(255,255,255,.4);
|
|
border-radius: 5px;
|
|
margin-top: 2px;
|
|
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 -1px 2px rgba(255,255,255,1);
|
|
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 -1px 2px rgba(255,255,255,1);
|
|
box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 -1px 2px rgba(255,255,255,1);
|
|
|
|
/* default colors */
|
|
color: #111111;
|
|
border: solid 1px #AAAAAA;
|
|
background: #e3e3e3;
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e3e3e3));
|
|
background: -moz-linear-gradient(top, #f6f6f6, #e3e3e3);
|
|
background: linear-gradient(top, #f6f6f6, #e3e3e3);
|
|
}
|
|
.switchmenu button:hover,
|
|
.movemenu button:hover {
|
|
background: #cfcfcf;
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#cfcfcf));
|
|
background: -moz-linear-gradient(top, #f2f2f2, #cfcfcf);
|
|
background: linear-gradient(top, #f2f2f2, #cfcfcf);
|
|
border-color: #606060;
|
|
}
|
|
.switchmenu button:active,
|
|
.movemenu button:active {
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#cfcfcf), to(#f2f2f2));
|
|
background: -moz-linear-gradient(top, #cfcfcf, #f2f2f2);
|
|
background: linear-gradient(top, #cfcfcf, #f2f2f2);
|
|
}
|
|
|
|
.switchmenu button.disabled,
|
|
.switchmenu button:disabled,
|
|
.movemenu button:disabled {
|
|
cursor: default;
|
|
background: #F3F3F3 !important;
|
|
border-color: #CCCCCC !important;
|
|
-webkit-box-shadow: none !important;
|
|
-moz-box-shadow: none !important;
|
|
box-shadow: none !important;
|
|
color: #777777 !important;
|
|
}
|
|
|
|
@media (max-height:571px) {
|
|
.controls {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 0;
|
|
right: 0;
|
|
background: #444444;
|
|
background: rgba(40,40,40,.85);
|
|
color: #FFFFFF;
|
|
padding: 4px 8px;
|
|
}
|
|
.battle-controls .whatdo {
|
|
color: #FFFFFF;
|
|
}
|
|
.battle-controls .whatdo small.weak {
|
|
color: #DDDD55;
|
|
border-color: #DDDD55;
|
|
}
|
|
.battle-controls .whatdo small.critical {
|
|
color: #FF7766;
|
|
border-color: #FF7766;
|
|
}
|
|
.movemenu {
|
|
display: none;
|
|
padding: 0 100px 0 90px;
|
|
}
|
|
.switchmenu {
|
|
display: none;
|
|
padding: 0 70px 0 210px;
|
|
}
|
|
.moveselect {
|
|
position: absolute;
|
|
left: 20px;
|
|
bottom: 20px;
|
|
}
|
|
.switchselect {
|
|
position: absolute;
|
|
right: 20px;
|
|
bottom: 20px;
|
|
}
|
|
.shiftselect {
|
|
position: absolute;
|
|
right: 150px;
|
|
bottom: 20px;
|
|
}
|
|
.moveselect button, .switchselect button, .shiftselect button {
|
|
cursor: pointer;
|
|
padding: 4px 8px;
|
|
border-radius: 6px;
|
|
background: #E5E5E5;
|
|
}
|
|
|
|
.battle-controls .whatdo {
|
|
padding-bottom: 50px;
|
|
}
|
|
.battle-controls .move-controls .whatdo,
|
|
.battle-controls .switch-controls .whatdo {
|
|
padding-bottom: 5px;
|
|
}
|
|
.move-controls .movemenu,
|
|
.switch-controls .switchmenu {
|
|
display: block;
|
|
margin-right: 0;
|
|
}
|
|
.move-controls .moveselect button,
|
|
.switch-controls .switchselect button,
|
|
.shiftselect button {
|
|
background: #BBBBBB;
|
|
}
|
|
.controls .timer {
|
|
float: right;
|
|
margin-top: -25px;
|
|
}
|
|
}
|
|
|
|
/****************/
|
|
|
|
#tooltipwrapper {
|
|
position: absolute;
|
|
top: 400px;
|
|
left: 100px;
|
|
text-align: left;
|
|
color: black;
|
|
}
|
|
#tooltipwrapper .tooltipinner {
|
|
position: relative;
|
|
}
|
|
#tooltipwrapper .tooltip {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 300px;
|
|
border: 1px solid #888888;
|
|
background: #EEEEEE;
|
|
background: rgba(240,240,240,.9);
|
|
border-radius: 5px;
|
|
}
|
|
#tooltipwrapper .tooltip h2 {
|
|
padding: 2px 4px;
|
|
margin: 0;
|
|
border-bottom: 1px solid #888888;
|
|
font-size: 10pt;
|
|
}
|
|
#tooltipwrapper .tooltip h2 small {
|
|
font-weight: normal;
|
|
}
|
|
#tooltipwrapper .tooltip p {
|
|
padding: 2px 4px;
|
|
margin: 0;
|
|
font-size: 8pt;
|
|
}
|
|
#tooltipwrapper .tooltip p.section {
|
|
border-top: 1px solid #888888;
|
|
}
|
|
|
|
/*********************************************************
|
|
* Teambuilder
|
|
*********************************************************/
|
|
|
|
.teamedit {
|
|
position: absolute;
|
|
display: block;
|
|
top: 45px;
|
|
left: 10px;
|
|
right: 10px;
|
|
bottom: 10px;
|
|
width: auto;
|
|
height: auto;
|
|
text-align: left;
|
|
font-size: inherit;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.teambar {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 92px;
|
|
}
|
|
.teambar button {
|
|
display: block;
|
|
background: #F3F3F3;
|
|
color: black;
|
|
border: 1px solid #AAAAAA;
|
|
padding: 0;
|
|
margin: -1px 2px 0 0;
|
|
height: 42px;
|
|
float: left;
|
|
width: 88px;
|
|
cursor: pointer;
|
|
white-space: pre;
|
|
font-size: 8pt;
|
|
font-family: Verdana, Arial, sans-serif;
|
|
}
|
|
.teambar button .pokemonicon {
|
|
margin: 0 auto;
|
|
}
|
|
.teambar button:hover {
|
|
background: #DCDCDC;
|
|
border-color: #757575;
|
|
}
|
|
.teambar button:active {
|
|
background: #CCCCCC;
|
|
border-color: #373737;
|
|
}
|
|
.teambar button:disabled,
|
|
.teambar button:disabled:hover,
|
|
.teambar button:disabled:active {
|
|
color: #000000;
|
|
background: #FCFCFC;
|
|
border-color: #AAAAAA;
|
|
opacity: .5;
|
|
cursor: default;
|
|
}
|
|
.teamchart,
|
|
.teamchart li {
|
|
list-style-type: none;
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.teamchart {
|
|
padding: 0 10px 10px 10px;
|
|
}
|
|
.teamchart li {
|
|
padding-top: 20px;
|
|
position: relative;
|
|
}
|
|
.teamchart li.format-select {
|
|
padding: 4px 0 10px;
|
|
}
|
|
.teamchart li.format-select label {
|
|
display: block;
|
|
font-size: 8pt;
|
|
font-weight: bold;
|
|
}
|
|
.teamchart li.format-select select,
|
|
.teamchart li.format-select option {
|
|
font: 12pt Verdana, sans-serif;
|
|
}
|
|
|
|
.majorbutton {
|
|
font-size: 14pt;
|
|
}
|
|
|
|
.setmenu {
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 130px;
|
|
width: 503px;
|
|
text-align: right;
|
|
}
|
|
.setmenu button {
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 4px;
|
|
padding: 3px 6px;
|
|
}
|
|
.setmenu button:hover {
|
|
border: 1px solid #888888;
|
|
padding: 2px 5px;
|
|
background: #D5D5D5;
|
|
}
|
|
.setmenu-left {
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 5px;
|
|
text-align: left;
|
|
}
|
|
.setchart-nickname {
|
|
position: absolute;
|
|
left: -5px;
|
|
top: 5px;
|
|
border: 1px solid #999999;
|
|
background: #CBD6E1;
|
|
border-radius: 5px;
|
|
padding: 1px 0 0 0;
|
|
width: 110px;
|
|
|
|
box-shadow: inset 1px 1px 0 rgba(255,255,255,.6);
|
|
}
|
|
.setchart {
|
|
border: 1px solid #999999;
|
|
background: #DAE5F0;
|
|
border-radius: 5px;
|
|
padding: 2px 0 0 3px;
|
|
height: 127px;
|
|
width: 626px;
|
|
margin-top: 8px;
|
|
|
|
background-image: linear-gradient(top, rgb(218,229,240) 10%, rgb(203,214,225) 55%);
|
|
background-image: -o-linear-gradient(top, rgb(218,229,240) 10%, rgb(203,214,225) 55%);
|
|
background-image: -moz-linear-gradient(top, rgb(218,229,240) 10%, rgb(203,214,225) 55%);
|
|
background-image: -webkit-linear-gradient(top, rgb(218,229,240) 10%, rgb(203,214,225) 55%);
|
|
background-image: -ms-linear-gradient(top, rgb(218,229,240) 10%, rgb(203,214,225) 55%);
|
|
|
|
box-shadow: inset 1px 1px 0 rgba(255,255,255,.6);
|
|
}
|
|
.setcol {
|
|
height: 127px;
|
|
width: 112px;
|
|
float: left;
|
|
}
|
|
.setcol-icon {
|
|
background: transparent none no-repeat scroll center top;
|
|
}
|
|
.setcol-details {
|
|
width: 234px;
|
|
}
|
|
.setcell {
|
|
float: left;
|
|
}
|
|
.setcell-details {
|
|
float: none;
|
|
}
|
|
.setcol-icon .itemicon {
|
|
display: block;
|
|
margin-left: 88px;
|
|
margin-top: 60px;
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: transparent none no-repeat scroll center center;
|
|
opacity: 0.8;
|
|
}
|
|
.setcell-pokemon {
|
|
margin-top: 0;
|
|
}
|
|
.setcell-details {
|
|
height: 84px;
|
|
}
|
|
.setcol-moves .setcell {
|
|
padding-bottom: 1px;
|
|
}
|
|
.setchart label,
|
|
.setchart-nickname label {
|
|
display: block;
|
|
font-size: 8pt;
|
|
font-weight: bold;
|
|
color: #555555;
|
|
padding-left: 2px;
|
|
|
|
text-shadow: 1px 1px 0 rgba(255,255,255,.6);
|
|
}
|
|
.setchart-nickname label {
|
|
font-size: 7pt;
|
|
margin-bottom: -1px;
|
|
}
|
|
.setcol-moves {
|
|
width: 137px;
|
|
}
|
|
.setcol-stats {
|
|
width: 142px;
|
|
}
|
|
.setdetails, .setstats {
|
|
display: block;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
border: 1px solid #AAAAAA;
|
|
border-radius: 3px;
|
|
padding: 1px;
|
|
margin: 2px 2px 1px 1px;
|
|
font-size: 7pt;
|
|
cursor: pointer;
|
|
|
|
box-shadow: inset 0px 1px 2px #CCCCCC, 1px 1px 0 rgba(255,255,255,.6);
|
|
background: #F8FBFD;
|
|
color: black;
|
|
}
|
|
.setdetails label, .setstats label {
|
|
cursor: pointer;
|
|
}
|
|
.setdetails:hover, .setstats:hover {
|
|
border-color: #474747;
|
|
box-shadow: inset 0px 1px 2px #D2D2D2, 1px 1px 0 rgba(255,255,255,.6);
|
|
background: #FFFFFF;
|
|
}
|
|
.setdetails:focus, .setstats:focus {
|
|
border: 2px solid #004488;
|
|
margin: 1px 1px 0 0;
|
|
outline: 0 none;
|
|
}
|
|
.setdetails:active, .setstats:active {
|
|
box-shadow: inset 0px 2px 2px #AAAAAA;
|
|
background: #E4E9ED;
|
|
border: 2px solid #004488;
|
|
margin: 1px 1px 0 0;
|
|
outline: 0 none;
|
|
}
|
|
.setdetails {
|
|
width: 230px;
|
|
height: 34px;
|
|
}
|
|
.setdetails:focus,.setdetails:active {
|
|
width: 232px;
|
|
height: 36px;
|
|
}
|
|
.setdetails .detailcell {
|
|
border-left: 1px solid #CCCCCC;
|
|
padding: 2px 4px;
|
|
display: block;
|
|
float: left;
|
|
font-size: 9pt;
|
|
text-align: center;
|
|
}
|
|
.setdetails .detailcell-first {
|
|
border-left: 0;
|
|
}
|
|
.setchart .setdetails label {
|
|
float: none;
|
|
display: block;
|
|
font-weight: normal;
|
|
font-size: 7pt;
|
|
text-align: center;
|
|
padding: 0;
|
|
}
|
|
.setstats {
|
|
width: 138px;
|
|
height: 108px;
|
|
}
|
|
.setstats:focus,.setstats:active {
|
|
width: 140px;
|
|
height: 110px;
|
|
}
|
|
.statrow {
|
|
display: block;
|
|
height: 15px;
|
|
}
|
|
.setchart .setstats label {
|
|
float: left;
|
|
width: 20px;
|
|
height: 5px;
|
|
text-align: right;
|
|
font-weight: normal;
|
|
font-size: 7pt;
|
|
padding: 0;
|
|
}
|
|
.setstats .statgraph {
|
|
float: left;
|
|
width: 75px;
|
|
padding: 0 0 0 3px;
|
|
height: 5px;
|
|
}
|
|
.setstats .statgraph span {
|
|
display: block;
|
|
margin-top: 3px;
|
|
height: 6px;
|
|
background: #CCCCCC;
|
|
}
|
|
.setstats em {
|
|
float: left;
|
|
font-style: normal;
|
|
width: 22px;
|
|
height: 5px;
|
|
text-align: right;
|
|
}
|
|
.setstats small {
|
|
float: left;
|
|
font-size: 7pt;
|
|
}
|
|
.setstats .statrow-head em {
|
|
color: #555555;
|
|
}
|
|
.teamnameedit {
|
|
width: 300px;
|
|
}
|
|
.label {
|
|
font-size: 9pt;
|
|
font-weight: bold;
|
|
display: block;
|
|
}
|
|
.optlabel {
|
|
font-size: 9pt;
|
|
display: block;
|
|
}
|
|
.label .textbox {
|
|
display: block;
|
|
}
|
|
.setchart input,
|
|
.setchart-nickname input,
|
|
.statform input.inputform {
|
|
display: block;
|
|
border: 1px solid #AAAAAA;
|
|
border-radius: 3px;
|
|
padding: 1px;
|
|
margin: 2px 3px 1px 1px;
|
|
font-family: Verdana, sans-serif;
|
|
font-size: 9pt;
|
|
width: 104px;
|
|
height: 20px;
|
|
|
|
box-shadow: inset 0px 1px 2px #CCCCCC, 1px 1px 0 rgba(255,255,255,.6);
|
|
background: #F8FBFD;
|
|
color: black;
|
|
}
|
|
.setchart input:hover,
|
|
.setchart-nickname input:hover,
|
|
.statform input.inputform:hover,
|
|
.textbox:hover {
|
|
border-color: #474747;
|
|
box-shadow: inset 0px 1px 2px #D2D2D2, 1px 1px 0 rgba(255,255,255,.6);
|
|
background: #FFFFFF;
|
|
}
|
|
.setchart input:focus,
|
|
.setchart-nickname input:focus,
|
|
.statform input.inputform:focus,
|
|
.textbox:focus {
|
|
outline: 0 none;
|
|
border: 1px solid #004488;
|
|
box-shadow: inset 0px 1px 2px #D2D2D2, 0px 0px 5px #2266AA;
|
|
background: #FFFFFF;
|
|
}
|
|
.setchart input.incomplete {
|
|
color: #CC3311;
|
|
border-color: #CC3311;
|
|
}
|
|
.setchart-nickname input {
|
|
}
|
|
.setchart .setcell-details input {
|
|
width: 216px;
|
|
}
|
|
.setchart .setcell-item input {
|
|
width: 114px;
|
|
}
|
|
.setchart .setcol-moves input {
|
|
width: 129px;
|
|
}
|
|
|
|
.teambuilder-clipboard-container {
|
|
height: 52px;
|
|
max-width: 640px;
|
|
font-size: 8pt;
|
|
padding: 4px;
|
|
position: relative;
|
|
|
|
border: 1px solid #FFAA00;
|
|
border-radius: 5px;
|
|
}
|
|
.teambuilder-clipboard-title {
|
|
width: 74px;
|
|
padding-top: 8px;
|
|
font-weight: bold;
|
|
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 8px;
|
|
}
|
|
.teambuilder-clipboard-data {
|
|
display: block;
|
|
width: 520px;
|
|
height: 26px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
|
|
border: 1px solid #999999;
|
|
border-radius: 5px;
|
|
background-image: linear-gradient(top, rgb(218,229,240) 10%, rgb(203,214,225) 55%);
|
|
background-image: -o-linear-gradient(top, rgb(218,229,240) 10%, rgb(203,214,225) 55%);
|
|
background-image: -moz-linear-gradient(top, rgb(218,229,240) 10%, rgb(203,214,225) 55%);
|
|
background-image: -webkit-linear-gradient(top, rgb(218,229,240) 10%, rgb(203,214,225) 55%);
|
|
background-image: -ms-linear-gradient(top, rgb(218,229,240) 10%, rgb(203,214,225) 55%);
|
|
outline: none;
|
|
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 8px;
|
|
z-index: 2;
|
|
}
|
|
.teambuilder-clipboard-data:hover {
|
|
border: 1px solid #BBBBBB;
|
|
}
|
|
.teambuilder-clipboard-data .result {
|
|
height: 26px;
|
|
}
|
|
.teambuilder-clipboard-data span {
|
|
display: block;
|
|
height: 24px;
|
|
|
|
float: left;
|
|
}
|
|
.teambuilder-clipboard-data .icon {
|
|
width: 32px;
|
|
}
|
|
.teambuilder-clipboard-data .species {
|
|
width: 118px;
|
|
padding-top: 6px;
|
|
margin-left: 4px;
|
|
}
|
|
.teambuilder-clipboard-data .ability-item {
|
|
width: 98px;
|
|
padding-left: 2px;
|
|
margin-top: -1px;
|
|
}
|
|
.teambuilder-clipboard-data .moves {
|
|
width: 126px;
|
|
padding-left: 2px;
|
|
margin-top: -1px;
|
|
}
|
|
.teambuilder-clipboard-data .section {
|
|
height: 100%;
|
|
padding: 1px;
|
|
border-right: 1px solid #999999;
|
|
float: left;
|
|
}
|
|
.teambuilder-clipboard-data .section.no-border {
|
|
border: none;
|
|
}
|
|
.teambuilder-clipboard-buttons {
|
|
display: block;
|
|
width: 520px;
|
|
|
|
position: absolute;
|
|
top: 34px;
|
|
right: 8px;
|
|
}
|
|
.teambuilder-clipboard-button-left {
|
|
float: left;
|
|
height: 22px;
|
|
}
|
|
.teambuilder-clipboard-button-right {
|
|
float: right;
|
|
height: 22px;
|
|
}
|
|
.teambuilder-results {
|
|
position: absolute;
|
|
top: 200px;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
|
|
overflow-y: scroll;
|
|
-webkit-overflow-scrolling: touch;
|
|
overflow-scrolling: touch;
|
|
}
|
|
.teamchartbox {
|
|
position: absolute;
|
|
top: 40px;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
border-top: 1px solid #AAAAAA;
|
|
|
|
overflow: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
overflow-scrolling: touch;
|
|
}
|
|
.teambuilder-results .result a {
|
|
border-radius: 4px;
|
|
padding: 1px 1px 1px 5px;
|
|
margin: 0 5px 1px 5px;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
}
|
|
.teambuilder-results .result a:hover {
|
|
padding: 0px 0px 0px 4px;
|
|
border: 1px solid #D8D8D8;
|
|
background: #F8F8F8;
|
|
}
|
|
.teambuilder-results .firstresult a,
|
|
.teambuilder-results .firstresult a:hover {
|
|
padding: 0px 0px 0px 4px;
|
|
border: 1px solid #CCCCCC;
|
|
background: #F2F2F2;
|
|
}
|
|
|
|
.teambuilder-results h3,
|
|
.teambuilder-results .utilichart h3 {
|
|
background: #DAE5F0;
|
|
margin: 6px 0;
|
|
padding: 2px 5px;
|
|
font-family: Verdana, sans-serif;
|
|
font-size: 9pt;
|
|
text-align: left;
|
|
|
|
border: 1px solid #AAAAAA;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
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);
|
|
}
|
|
|
|
.teambuilder-pokemon-import {
|
|
display: none;
|
|
position: absolute;
|
|
top: 206px;
|
|
left: 10px;
|
|
padding: 2px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.pokemonedit {
|
|
width: 626px;
|
|
text-align: left;
|
|
font-size: inherit;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.statform {
|
|
padding: 3px 13px 10px 13px;
|
|
font-size: 10pt;
|
|
}
|
|
.statform p.suggested {
|
|
margin: 5px 0;
|
|
}
|
|
.statform .col > div {
|
|
padding-top: 1px;
|
|
height: 28px;
|
|
}
|
|
.statform .col div label,
|
|
.statform .col div em,
|
|
.statform .col div b {
|
|
display: block;
|
|
padding: 5px 0 0 0;
|
|
}
|
|
.statform .col {
|
|
float: left;
|
|
width: 52px;
|
|
text-align: right;
|
|
font-size: 9pt;
|
|
}
|
|
.statform .basestatscol {
|
|
width: 38px;
|
|
}
|
|
.statform .statscol {
|
|
width: 36px;
|
|
}
|
|
.statform .statscol em,
|
|
.statform .statscol b {
|
|
font-style: normal;
|
|
font-weight: bold;
|
|
}
|
|
.statform .graphcol {
|
|
width: 185px;
|
|
}
|
|
.statform .graphcol div span {
|
|
margin: 3px 0 0 5px;
|
|
display: block;
|
|
height: 8px;
|
|
border-bottom: 1px solid #AAAAAA;
|
|
border-right: 1px solid #AAAAAA;
|
|
background: #CCCCCC;
|
|
}
|
|
.statform .evcol,
|
|
.statform .ivcol {
|
|
width: 48px;
|
|
text-align: center;
|
|
}
|
|
.statform .evslidercol {
|
|
width: 193px;
|
|
margin-right: 9px;
|
|
margin-left: 5px;
|
|
padding-top: 7px;
|
|
text-align: center;
|
|
}
|
|
.evslider {
|
|
width: 192px;
|
|
margin: 0 auto;
|
|
}
|
|
.statform .totalev b {
|
|
color: #DD2222;
|
|
}
|
|
.statform .totalev em {
|
|
font-style: normal;
|
|
}
|
|
.statform input.numform {
|
|
width: 40px;
|
|
height: 16px;
|
|
font-size: 9pt;
|
|
}
|
|
|
|
.detailsform .formrow {
|
|
padding-left: 100px;
|
|
}
|
|
.detailsform .formrow .formlabel {
|
|
float: left;
|
|
margin-left: -100px;
|
|
width: 95px;
|
|
text-align: right;
|
|
}
|
|
|
|
/*********************************************************
|
|
* Popups
|
|
*********************************************************/
|
|
|
|
.ps-popup .label {
|
|
width: 210px;
|
|
margin: 0 auto;
|
|
}
|
|
.ps-popup .textbox {
|
|
width: 200px;
|
|
}
|
|
|
|
.userdetails {
|
|
min-height: 80px;
|
|
width: 191px;
|
|
padding: 1px 1px 1px 86px;
|
|
margin: 5px 0;
|
|
}
|
|
.userdetails img {
|
|
float: left;
|
|
margin-left: -85px;
|
|
}
|
|
.userdetails .rooms {
|
|
font-size: 8pt;
|
|
}
|
|
.userdetails .offline {
|
|
color: red;
|
|
}
|
|
.trainersprite.yours {
|
|
cursor: pointer;
|
|
}
|
|
.buttonbar {
|
|
clear: both;
|
|
}
|
|
|
|
.avatarlist button {
|
|
display: block;
|
|
float: left;
|
|
margin: 2px;
|
|
width: 80px;
|
|
height: 80px;
|
|
|
|
border: 1px solid #E1E8E8;
|
|
background: transparent url(//play.pokemonshowdown.com/sprites/trainers-sheet.png) no-repeat scroll 0px 0px;
|
|
border-radius: 4px;
|
|
box-shadow: none;
|
|
cursor: pointer;
|
|
}
|
|
.avatarlist button.cur {
|
|
border-color: #999999;
|
|
}
|
|
.avatarlist button:hover,
|
|
.avatarlist button.cur:hover {
|
|
border: 1px solid #8899AA;
|
|
background-color: #F1F4F9;
|
|
box-shadow: 1px 1px 1px #D5D5D5;
|
|
}
|
|
|
|
.effect-volume,
|
|
.music-volume {
|
|
height: 39px;
|
|
}
|
|
.effect-volume label,
|
|
.music-volume label {
|
|
padding-bottom: 12px;
|
|
font-size: 8pt;
|
|
}
|
|
.effect-volume em,
|
|
.music-volume em {
|
|
display: block;
|
|
margin-top: -6px;
|
|
font-size: 9pt;
|
|
padding-left: 5px;
|
|
color: #555555;
|
|
}
|
|
|
|
/*********************************************************
|
|
* <blink>
|
|
*********************************************************/
|
|
|
|
@-webkit-keyframes blinker {
|
|
from { opacity: 1.0; }
|
|
to { opacity: 0.0; }
|
|
}
|
|
@keyframes blinker {
|
|
from { opacity: 1.0; }
|
|
to { opacity: 0.0; }
|
|
}
|
|
blink {
|
|
-webkit-animation-name: blinker;
|
|
-webkit-animation-iteration-count: infinite;
|
|
-webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
|
|
-webkit-animation-duration: 1s;
|
|
animation-name: blinker;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: cubic-bezier(1.0,0,0,1.0);
|
|
animation-duration: 1s;
|
|
text-decoration: none;
|
|
}
|