mirror of
https://github.com/smogon/pokemon-showdown-client.git
synced 2026-05-05 21:16:26 -05:00
cea3623dac
Replays can now be downloaded into .html files. The .html files mainly contain replay log data; the actual replay player is downloaded online. Also included is a textual log and some minimal CSS to make it look pretty, for offline viewing. This strategy helps keep the replay file reasonably small; of the 30 KB or so for a 50-turn battle, around 10 KB is the log data, and around 20 KB is the textual log.
150 lines
2.4 KiB
CSS
150 lines
2.4 KiB
CSS
.replay a {
|
|
display: block;
|
|
padding: 3px 5px;
|
|
border: 1px solid #ACC3D0;
|
|
background: #EEF2F5;
|
|
color: #214065;
|
|
text-decoration: none;
|
|
font-size: 8pt;
|
|
}
|
|
.replay a strong {
|
|
display: block;
|
|
font-size: 11pt;
|
|
color: #214065;
|
|
}
|
|
.replay a em {
|
|
color: #808185;
|
|
}
|
|
.replay a.replay-link {
|
|
float: right;
|
|
margin: -15px 15px 0 0;
|
|
}
|
|
.replay a:visited strong {
|
|
color: #808185;
|
|
}
|
|
.replay a:hover,
|
|
.replay a:visited:hover {
|
|
border: 1px solid #7CA0B0;
|
|
background: #DEE4EA;
|
|
color: #102025;
|
|
}
|
|
.replay a:hover strong,
|
|
.replay a:visited:hover strong {
|
|
color: #102025;
|
|
}
|
|
|
|
.replay-controls {
|
|
position:absolute;top:373px;left:5px;right:0px;text-align:left;
|
|
}
|
|
.replay-controls-2 {
|
|
position:absolute;top:415px;left:5px;right:0px;text-align:left;
|
|
}
|
|
.replay-wrapper {
|
|
position: relative;
|
|
padding-top: 460px !important;
|
|
font-family: Verdana, sans-serif;
|
|
font-size: 10pt;
|
|
}
|
|
.replay-controls button {
|
|
font-family: Verdana, sans-serif;
|
|
font-size: 10pt;
|
|
cursor: pointer;
|
|
}
|
|
.replay-controls button:disabled {
|
|
cursor: default;
|
|
}
|
|
.replay-controls button i {
|
|
display: block;
|
|
}
|
|
|
|
.linklist {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.linklist a {
|
|
display: block;
|
|
margin: 2px 0px 8px 0px;
|
|
padding: 3px 7px 6px 7px;
|
|
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;
|
|
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
.linklist a small {
|
|
font-size: 8pt;
|
|
color: #6699CC;
|
|
}
|
|
.linklist a:hover {
|
|
border: 1px solid #8899AA;
|
|
background: #F1F4F9;
|
|
color: #224466;
|
|
}
|
|
.linklist a.cur,
|
|
.linklist a.cur:hover {
|
|
background: #D1DCEB none;
|
|
border: 1px solid #6A80A6;
|
|
}
|
|
|
|
.error {
|
|
padding: 6px 12px;
|
|
margin: 1em 0;
|
|
border: 2px solid #DD4422;
|
|
background: #FFF8F2;
|
|
color: #000000;
|
|
}
|
|
.error strong {
|
|
color: #802010;
|
|
}
|
|
|
|
.urlbox,
|
|
input.urlbox,
|
|
input[disabled=disabled].urlbox {
|
|
cursor: text;
|
|
display: block;
|
|
padding: 3px 4px 2px 4px;
|
|
margin: 10px 14px 10px 14px;
|
|
border: 1px solid #AAAAAA;
|
|
background: #F5F5F5 !important;
|
|
color: #111111 !important;
|
|
font-family: Consolas, monospace;
|
|
font-size: 10pt;
|
|
}
|
|
|
|
body.dark {
|
|
background: #444444;
|
|
color: #CCCCCC;
|
|
}
|
|
|
|
.dark .urlbox {
|
|
border: 1px solid #AAAAAA;
|
|
background: #555555 !important;
|
|
color: #CCCCCC !important;
|
|
}
|
|
|
|
.dark a {
|
|
color: #4488EE;
|
|
}
|
|
|
|
.dark .pfx-panel {
|
|
background: #444444;
|
|
color: #CCCCCC;
|
|
box-shadow: none;
|
|
}
|
|
.dark .pfx-topbar,
|
|
.dark .footer {
|
|
display: none;
|
|
}
|
|
|
|
.pfx-body-padded {
|
|
padding: 0 10px;
|
|
}
|