.achieve sub { display: none; } .leaderboard { margin-bottom: 30px; } .leaderboard h3 { margin: .5em 0 .25em 0; } .leaderboard ol { list-style: none; padding: 0; margin: 0; border-top: 1px solid #ececec; animation: fadein .5s; } .leaderboard ol.schools.empty::before { content: 'No schools competed in this division during this period.'; padding: 2em 0; font-weight: 300; font-style: italic; text-align: center; display: block; } .leaderboard.compact ol.schools.empty::before { font-size: 90%; } .leaderboard li { padding: 0; margin: 0; position: relative; overflow: hidden; } .leaderboard li.leader .rank { background-color: #539007; } .leaderboard li.myself { background-color: #efefef; } .leaderboard li.myself .rank { background-color: #539007; } .leaderboard li .school { display: block; padding: 15px 0 0 0; } .leaderboard.compact li .school { padding-top: 7px; } .leaderboard li .name { font-weight: bold; color: #333; font-size: 15px; display: block; padding: 0 4em 0 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .leaderboard.compact li .name { font-size: 11px; padding-right: 65px; } .leaderboard li .name a { text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 10px 0 10px 5px; line-height: 54px; } .leaderboard.compact li .name a { padding: 5px 0 5px 5px; line-height: 32px; } .leaderboard.compact li .name a img { width: 35px; height: 35px; display: inline-block; vertical-align: middle; margin-right: 10px; border-radius: 3px; } .leaderboard li .name .icon { display: inline-block; font-size: 70px; vertical-align: middle; font-weight: normal; margin-top: -14px; margin-bottom: -8px; margin-right: 5px; } .leaderboard.compact li .name .icon { font-size: 43px; margin-top: -4px; margin-bottom: -4px; } .leaderboard li a { text-decoration: none; } .leaderboard li .location { color: #666; font-size: 12px; display: block; } .leaderboard.compact li .location { font-size: 10px; } .leaderboard li .rank { display: block; width: 60px; height: 60px; overflow: hidden; line-height: 56px; background-color: #ccc; color: white; text-align: center; font-size: 34px; font-weight: bold; float: left; margin: 6px 11px 6px 0px; border-radius: 3px; padding: 2px; } .leaderboard .individuals li .rank { margin-right: 0; } .leaderboard.compact li .rank { width: 35px; height: 35px; margin: 5px 0px 5px 3px; line-height: 31px; font-size: 17px; } .leaderboard.compact .schools li .rank { margin-right: 5px; } .leaderboard li .date { position: absolute; right: 0; top: 50%; margin: -0.75em 10px 0 0; font-size: 15px; font-weight: bold; color: #333; } .leaderboard li .points { position: absolute; right: 0px; top: 50%; margin: -0.75em 10px 0 0; font-size: 20px; font-weight: bold; color: #333; } .leaderboard.compact li .points { font-size: 16px; margin-right: 2px; } .leaderboard li.updated { animation: pulse 1s; } .leaderboard ol.rt { position: relative; } .leaderboard ol.rt li { position: absolute; top: 0; left: 0; width: 100%; } .leaderboard ol.rt.animated li { -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -ms-transition: -ms-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; position: absolute; top: 0; left: 0; width: 100%; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes pulse {50% { background-color:rgba(77, 181, 56,.25); } 100% { background-color:rgba(77, 181, 56,0); } } @-webkit-keyframes pulse {50% { background-color:rgba(77, 181, 56,.25); } 100% { background-color:rgba(77, 181, 56,0); } } @keyframes pulse {50% { background-color:rgba(77, 181, 56,.25); } 100% { background-color:rgba(77, 181, 56,0); } } .leaderboard ol.schools > li:empty { --row-height: 70px; --points-height: 1em; --points-width: 7ex; --points-position: 100% 50%; --points-skeleton: linear-gradient(#eeeeee40 0, #eeeeee40 100%); --rank-width: 60px; --rank-position: 5px 50%; --rank-skeleton: linear-gradient(#eeeeee40 0, #eeeeee40 100%); --name-height: .9em; --name-width: 12ex; --name-position: calc(var(--rank-width) + (var(--row-height) - var(--rank-width))) .8em; --name-skeleton: linear-gradient(#eeeeee40 0, #eeeeee40 100%); --location-height: .4em; --location-width: 8ex; --location-position: calc(var(--rank-width) + (var(--row-height) - var(--rank-width))) 1.9em; --location-skeleton: linear-gradient(#eeeeee40 0, #eeeeee40 100%); font-size: 20px; background-repeat: no-repeat; background-image: var(--name-skeleton), var(--location-skeleton), var(--points-skeleton), var(--rank-skeleton); background-size: var(--name-width) var(--name-height), var(--location-width) var(--location-height), var(--points-width) var(--points-height), var(--rank-width) var(--rank-width); background-position: var(--name-position), var(--location-position), var(--points-position), var(--rank-position); min-height: var(--row-height); } .leaderboard.loading ol { position: relative; } .leaderboard.loading ol::after { content: ''; display: block; width: 100%; background-repeat: no-repeat; background-image: linear-gradient( -80deg, rgba(255,255,255, 0) 0, rgba(255,255,255, .9) 50%, rgba(255,255,255, 0) 100% ); background-position: -300% 0; background-size: 200px 100%; z-index: 1; position: absolute; top: -2em; bottom: -2em; left: 0; animation: loadleaders 2s infinite; } .leaderboard.loading::before { content: ''; background-color: #eeeeee40; display: block; width: 12ex; height: 1.2em; margin: .5em 0; } .leaderboard.loading::after { content: ''; background-color: #eeeeee40; display: block; width: 12ex; height: .75em; margin: .3em 0; float: right; } .leaderboard.loading.noheading::after, .leaderboard.loading.noheading::before { display: none; } .leaderboard.compact.loading { font-size: 14px; } .leaderboard.compact.loading ol > li:empty { --row-height: 45px; --rank-width: 35px; font-size: 15px; } .leaderboard ol.individuals > li:empty { --row-height: 70px; --points-height: .9em; --points-width: 12ex; --points-position: 100% 50%; --points-skeleton: linear-gradient(#eeeeee40 0, #eeeeee40 100%); --rank-width: 60px; --rank-position: 5px 50%; --rank-skeleton: linear-gradient(#eeeeee40 0, #eeeeee40 100%); --name-height: .9em; --name-width: 12ex; --name-position: calc(var(--rank-width) + var(--profile-diameter) + 20px) 50%; --name-skeleton: linear-gradient(#eeeeee40 0, #eeeeee40 100%); --profile-diameter: 2.6em; --profile-position: calc(var(--rank-width) + .15em + (var(--row-height) - var(--rank-width))) 50%; --profile-skeleton: radial-gradient(circle 1.3em, #eeeeee40 99%, transparent 0); background-image: var(--name-skeleton), var(--profile-skeleton), var(--points-skeleton), var(--rank-skeleton); background-size: var(--name-width) var(--name-height), var(--profile-diameter) var(--profile-diameter), var(--points-width) var(--points-height), var(--rank-width) var(--rank-width); background-position: var(--name-position), var(--profile-position), var(--points-position), var(--rank-position); min-height: var(--row-height); font-size: 20px; background-repeat: no-repeat; } @keyframes loadleaders { to { background-position: 300% 0; } }