More cars, less wasted space on WEC Timing

CSS for live.fiawec.com Timing Tweaks.md

FIA WEC Timing Screen Tweaks

This is my data maximization CSS for the Stylish Chrome extension. I'm using it to Airplay two browsers side-by-side to a 39" TV (see comment below), so your application may need some tweaks.

To use, install the extension then visit live.fiawec.com. Click the Stylish icon, and choose "Write style for live.fiawec.com/this_URL". Then paste in the your preferred version of the css in the edit window (see photos of the two versions in the comments below), press save, and the page will automaticaly refresh.

The biggest change can be made just with the font size. You'll want to adjust that based on your screen and viewing distance.

If things are too crowded, adjust the padding inside the #classement td. 5px looks better, but space is precious.

Enjoy!

Update: for even more real estate, run chrome in App mode, after you have the styles the way you like them:

• Mac: Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --app=http://live.fiawec.com
• Windows: Chrome.exe --app=http://live.fiawec.com
• Linux: google-chrome --app=http://live.fiawec.com

Windows/Linux are according to the internet, YMMV.

live.fiawec.com Timing CSS

.home, .content {
    width: 100%;
}

.header, #etatCourse, #meteo, #epub {
    display: none;
}

#classement td{
    font-size: 14px;
    padding: 0 3px;
}

.tableFloatingHeaderOriginal {
    width: 100%
}

/* Hide Class, Car, Tire, and Avg Speed Columns */
#classement tr td:nth-child(4), #classement tr td:nth-child(7), 
#classement tr td:nth-child(8), #classement tr td:nth-child(13){
    display: none;
}

.tableFloatingHeaderOriginal tr th:nth-child(4), .tableFloatingHeaderOriginal tr th:nth-child(7), .tableFloatingHeaderOriginal tr th:nth-child(8), .tableFloatingHeaderOriginal tr th:nth-child(13) {
    display:none;
}

.tableFloatingHeaderOriginal tr th {
    max-width: none;
}

/* Recolor Position columns to show classes */

/* LMP1 */
[data-categorie="1"] td:nth-child(1) {
    background-color: #cc0c00 !important;
    color: white;
} 

/* LMP2 */
[data-categorie="3"] td:nth-child(1) {
    background-color: #335687 !important;
    color: white;
}

/* GTE-Pro */
[data-categorie="2"] td:nth-child(1) {
    background-color: #009e49 !important;
} 

/* GTE-Am */
[data-categorie="4"] td:nth-child(1) {
    background-color: #ff6600 !important;
}

/* Garage 56 is data-categorie="5" if you want to modify that */

live.fiawec.com Truncated Names, Even More Cars Per Screen

.home, .content {
    width: 100%;
}

.header, #etatCourse, #meteo, #epub {
    display: none;
}

#classement td{
    font-size: 14px;
    padding: 1px 5px 0 5px;
    overflow: hidden;
    white-space: nowrap;
}

#classement tr td:nth-child(5), .tableFloatingHeaderOriginal tr th:nth-child(5),
#classement tr td:nth-child(6), .tableFloatingHeaderOriginal tr th:nth-child(6){
    max-width: 120px;
}


.tableFloatingHeaderOriginal {
    width: 100%;
}


/* Hide Class, Car, Tire, and Avg Speed Columns */
#classement tr td:nth-child(4), #classement tr td:nth-child(7), 
#classement tr td:nth-child(8), #classement tr td:nth-child(13){
    display: none;
}

.tableFloatingHeaderOriginal tr th:nth-child(4), .tableFloatingHeaderOriginal tr th:nth-child(7), .tableFloatingHeaderOriginal tr th:nth-child(8), .tableFloatingHeaderOriginal tr th:nth-child(13) {
    display:none;
}

.tableFloatingHeaderOriginal tr th {
    max-width: none;
}

/* Recolor Position columns to show classes */

/* LMP1 */
[data-categorie="1"] td:nth-child(1) {
    background-color: #cc0c00 !important;
    color: white;
} 

/* LMP2 */
[data-categorie="3"] td:nth-child(1) {
    background-color: #335687 !important;
    color: white;
}

/* GTE-Pro */
[data-categorie="2"] td:nth-child(1) {
    background-color: #009e49 !important;
} 

/* GTE-Am */
[data-categorie="4"] td:nth-child(1) {
    background-color: #ff6600 !important;
}

/* Garage 56 is data-categorie="5" if you want to modify that */