Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* CSS placed here will be applied to all skins */
/* =============================================
BWTP — Best Way to Play setup boxes
============================================= */
.bwtp-infobox {
float: right;
clear: right;
margin: 0 0 14px 20px;
border: 1px solid #a2a9b1;
background: #f8f9fa;
font-family: Verdana, sans-serif;
font-size: 11px;
width: 180px;
border-collapse: collapse;
text-align: center;
}
.bwtp-infobox-title {
display: block;
background: #cee0f2;
padding: 6px 8px 5px;
font-size: 12px;
font-weight: bold;
color: #000;
border-bottom: 1px solid #a2a9b1;
}
.bwtp-infobox-image {
display: block;
text-align: center;
padding: 4px;
}
/* Shared box structure */
.bwtp-box {
font-family: Verdana, sans-serif;
font-size: 11px;
margin: 14px 0 0;
clear: both;
}
.bwtp-box + .bwtp-box {
margin-top: 8px;
}
.bwtp-header {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 14px 6px;
border-bottom: 2px solid;
}
.bwtp-medal {
font-size: 18px;
line-height: 1;
}
.bwtp-version-title {
font-size: 13px;
font-weight: bold;
line-height: 1.2;
}
.bwtp-version-sub {
font-size: 10px;
margin-top: 1px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.bwtp-grid {
display: grid;
}
.bwtp-col {
padding: 9px 13px 11px;
border-right: 1px solid;
}
.bwtp-col:last-child {
border-right: none;
}
.bwtp-col-title {
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.07em;
border-bottom: 1px solid;
padding-bottom: 4px;
margin-bottom: 7px;
}
.bwtp-row {
display: flex;
gap: 5px;
margin-bottom: 4px;
align-items: flex-start;
line-height: 1.4;
}
.bwtp-check { color: #2a6e2a; font-weight: bold; flex-shrink: 0; }
.bwtp-warn { color: #b84a00; font-weight: bold; flex-shrink: 0; }
.bwtp-note {
border-top: 1px solid;
padding: 5px 13px;
font-size: 10px;
color: #555;
font-style: italic;
}
/* Pills */
.bwtp-pill {
display: inline-block;
font-size: 9px;
font-weight: bold;
padding: 0 4px;
border-radius: 2px;
margin-left: 2px;
vertical-align: middle;
border: 1px solid;
}
.bwtp-pill-req { background: #d4edda; color: #155724; border-color: #9fd6a9; }
.bwtp-pill-opt { background: #e8e8e8; color: #444; border-color: #bbb; }
.bwtp-pill-bad { background: #fde8e8; color: #842029; border-color: #f5a0a5; }
/* Gold tier */
.bwtp-gold {
border: 2px solid #B8860B;
background: #FFFFF0;
}
.bwtp-gold .bwtp-header {
background: linear-gradient(180deg, #FFD700 0%, #DAA520 65%, #B8860B 100%);
border-color: #B8860B;
}
.bwtp-gold .bwtp-version-title { color: #2d1a00; }
.bwtp-gold .bwtp-version-sub { color: #5a3800; }
.bwtp-gold .bwtp-col { border-color: #e2c96a; }
.bwtp-gold .bwtp-col-title { color: #7a5000; border-color: #e2c96a; }
.bwtp-gold .bwtp-note { border-color: #e2c96a; background: #FFF9CC; }
/* Silver tier */
.bwtp-silver {
border: 2px solid #909090;
background: #fafafa;
}
.bwtp-silver .bwtp-header {
background: linear-gradient(180deg, #e8e8e8 0%, #c8c8c8 65%, #a0a0a0 100%);
border-color: #909090;
}
.bwtp-silver .bwtp-version-title { color: #1a1a1a; }
.bwtp-silver .bwtp-version-sub { color: #505050; }
.bwtp-silver .bwtp-col { border-color: #d0d0d0; }
.bwtp-silver .bwtp-col-title { color: #505050; border-color: #d0d0d0; }
.bwtp-silver .bwtp-note { border-color: #d0d0d0; background: #f0f0f0; }