CSS Code
This is the CSS code that is inserted automatically into the head section of your page when you embed the HTML Widget code. You DO NOT need to embed this CSS into your pages yourself.
- You should find this a good starting point and you can add custom CSS to enhance e.g. if you wanted to have a specific font size you could add style="font-size:12px" to the widget itself or .gms-wrapper { font-size: 12px; } to your own CSS files.
- If you find the default CSS unworkable, even with your own additions, then you can disable this CSS by adding the data attribute data-css="no" to the HTML Widget. When disabled you may copy this code and use as a starting point for your own custom CSS.
/* This styling applies to all GMS tables */
.gms-table { width: 100%; margin: 0; border-collapse: collapse }
.gms-table th { text-align: left; background-color: silver }
.gms-table th, .gms-table td { border: 1px solid; padding: 3px 10px; border-color: silver }
.gms-footnote, .gms-filter { margin: 0 0 2rem }
.gms-clubteam:not(.gms-button), .gms-boldteam { font-weight: 700 }
.gms-filter > div { margin: 0 0 1rem }
.gms-filter fieldset { width: fit-content }
.gms-filter legend { padding: 0px }
/* This styling sets alignment for specific tables */
.gms-table-results th:nth-child(4), .gms-table-results td:nth-child(4) { text-align: center }
.gms-table-league td:nth-child(n+3), .gms-table-league th:nth-child(n+3) { text-align: right }
.gms-table-fixtures td:first-child, .gms-table-results td:first-child, .gms-table-league.gms-table-custom td:last-child { white-space: nowrap }
/* The following will highlight team or club win, draw and loss on results */
.gms-form { display: inline-block; width: 1.25rem; text-align: center }
.gms-win { background-color: green }
.gms-draw { background-color: dimgray }
.gms-loss { background-color: red }
.gms-win, .gms-draw, .gms-loss { color: white; font-weight: 700 }
/* Helps makes GMS feed responsive depending on screen size and input device */
@media screen and (max-width: 767px) { .gms-table { overflow-x: auto; display: block; white-space: nowrap } .gms-nomobile { display: none } }
@media not screen and (max-width: 767px) { .gms-mobile { display: none } }
@media (hover: hover) and (pointer: fine) { .gms-detaillink { cursor: pointer } .gms-detaillink:hover { background-color: yellow } }
/* Styling for fixtures and results displayed as list and fixture details */
.gms-list > * + * { margin-top: 1.5rem; margin-bottom: 1.5rem }
.gms-list + .gms-footnote { margin-top: 1rem }
.gms-card { text-align: center; padding: 3px 3px; border-radius: 0.5rem; position: relative }
.gms-card, .gms-cardtime, .gms-cardnoscore, .gms-fixturedetails > div { border: 1px solid; border-color: silver }
.gms-cardtitle, .gms-cancel, .gms-card .gms-directions-card { font-weight: 700; font-size: larger }
.gms-cancel { position: absolute; right: 0.5rem; top: 0 }
.gms-cardfixture, .gms-cardscorers { display: flex; gap: 0.5rem; align-items: center }
.gms-cardhome { flex: 1 1 0%; text-align: right }
.gms-carddivide { padding: 0.25rem 0.5rem }
.gms-cardtime, .gms-cardnoscore { font-weight: 700; border-radius: 0.375rem; background-color: white }
.gms-cardaway { flex: 1 1 0%; text-align: left }
.gms-cardscorers { font-size: smaller }
.gms-cardstatus { background-color: black; color: white; margin: 0.25rem auto; width:fit-content; padding: 0.25rem 0.5rem }
.gms-directions-card { font-weight: 700; max-width: max-content; margin-left: auto; margin-right: auto; padding: 0.5rem; color: white; background-color: black; border-radius: 0.375rem; display: flex; flex-direction: column; row-gap: 0.75rem }
.gms-directions-btns { display: flex; gap: 0.5rem }
.gms-directions-btns svg { width: 2rem; height: 2rem; pointer-events: none }
.gms-map-google, .gms-map-apple { background-color: white }
.gms-map-waze { background-color: #05c8f7 }
.gms-fixture .gms-card > *, .gms-cardform { margin-top: 0.5rem; margin-bottom: 0.5rem }
.gms-fixturedetails { display: flex; flex-wrap: wrap; gap: 1rem }
.gms-fixturedetails > div { flex-grow: 1; padding: 0.5rem 0.5rem; border-radius: 0.5rem }
.gms-fixturedetails img { display: inline; width: 1.5rem; height: 1.5rem; vertical-align: middle; margin-right: 0.25rem }
.gms-fixturedetails ul { list-style-type: none; padding: 0; margin: 0 }
.gms-players li { display: flex; align-items: center }
.gms-players svg { width: 1rem; height: 1rem }
/* Creates a loader image for the AJAX wait */
.gms-loader { margin: 1rem auto; border: 16px solid silver; border-top: 16px solid black; border-radius: 50%; width: 120px; height: 120px; animation: gms-spin 1s linear infinite } @keyframes gms-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }