calsquash-rankings-style.css

/* Box model */
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

/* Page layout */
body {
    margin: 0;
}

#container {
    margin: 0 auto;
    max-width: 864px;
    text-align: left;
    padding: 16px 0;
}

#container > :not(.full-width) {
    /* Everything but full-width elements should have a margin */
    margin-left: 16px;
    margin-right: 16px;
}

#container > .full-width {
    /* On small screens, full-width elements should have no margin and be centered */
    margin: 0 auto;
}

@media all and (min-width: 600px) {
    /* On large screens, everything can have a large margin, including full-width
       elements. Full-width elements should also not be centered */
    #container > :not(.full-width), #container > .full-width {
        margin-left: 32px;
        margin-right: 32px;
    }
}

/* Text */
body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    line-height: 1.3em;
    color: #24292e;
    background-color: #fff;
}

p { margin: 0 0 1em 0; }

/* Links */
a {
    text-decoration: none;
    color: #0366d6;
}
a:hover { text-decoration: underline; }

/* Headings */
h2 {
    margin: 1em 0 0.5em 0;
    font-weight: 600;
    padding-bottom: 0.3em;
    font-size: 1.5em;
    border-bottom: 1px solid #eaecef;
}

/* Header */
.breadcrumb {
    margin: 0 0 1.5em 0;
    color: #586069;
}
.project, .file { font-weight: 600; }
.file { color: #24292e; }

/* Tables */
table {
    border-spacing: 0;
    border-collapse: collapse;
}
tr { border-top: 1px solid #c6cbd1; }
th, td {
    padding: 5px;
    border: 1px solid #dfe2e5;
}
@media all and (min-width: 600px) {
    th, td { padding: 6px 13px; }
}
th { font-weight: 600; }
tr:nth-child(2n) { background-color: #f6f8fa; }

th.numeric-heading { text-align: right; }
td.numeric {
    text-align: right;
    font-variant-numeric: lining-nums tabular-nums;
}

th abbr { cursor: inherit; }
th abbr[title] {
    border-bottom: none;
    text-decoration: none;
}
@media all and (min-width: 600px) {
    th abbr span { display: none; }
    th abbr:before { content: attr(title); }
}

/* Player stats SVG */
.skill_line {
    fill: none;
    stroke: #0D47A1;
    stroke-width: 2;
}

.skill_point {
    fill: #0D47A1;
}

.win_point {
    fill: #43A047;
}

.loss_point {
    fill: #F57C00;
}

.skill_interval {
    fill: #90CAF9;
    fill-opacity: 0.2;
}

.axis {
    font: 14px sans-serif;
}

.grid line, .grid .domain {
    stroke: lightgrey;
    stroke-opacity: 0.7;
}

.axis .domain {
    stroke: black;
    stroke-width: 1;
}

.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: block;
    max-width: 276px;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: 0.875rem;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.3rem;
    pointer-events: none;
}

.popover .arrow {
    position: absolute;
    display: block;
    width: 1rem;
    height: 0.5rem;
    margin: 0 0.3rem;
}

.popover .arrow::before, .popover .arrow::after {
    position: absolute;
    display: block;
    content: "";
    border-color: transparent;
    border-style: solid;
}

.bs-popover-top, .bs-popover-auto[x-placement^="top"] {
    margin-bottom: 0.5rem;
}

.bs-popover-top .arrow, .bs-popover-auto[x-placement^="top"] .arrow {
    bottom: calc((0.5rem + 1px) * -1);
}

.bs-popover-top .arrow::before, .bs-popover-auto[x-placement^="top"] .arrow::before,
.bs-popover-top .arrow::after, .bs-popover-auto[x-placement^="top"] .arrow::after {
    border-width: 0.5rem 0.5rem 0;
}

.bs-popover-top .arrow::before, .bs-popover-auto[x-placement^="top"] .arrow::before {
    bottom: 0;
    border-top-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-top .arrow::after, .bs-popover-auto[x-placement^="top"] .arrow::after {
    bottom: 1px;
    border-top-color: #fff;
}

.bs-popover-right, .bs-popover-auto[x-placement^="right"] {
    margin-left: 0.5rem;
}

.bs-popover-right .arrow, .bs-popover-auto[x-placement^="right"] .arrow {
    left: calc((0.5rem + 1px) * -1);
    width: 0.5rem;
    height: 1rem;
    margin: 0.3rem 0;
}

.bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before,
.bs-popover-right .arrow::after, .bs-popover-auto[x-placement^="right"] .arrow::after {
    border-width: 0.5rem 0.5rem 0.5rem 0;
}

.bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before {
    left: 0;
    border-right-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-right .arrow::after, .bs-popover-auto[x-placement^="right"] .arrow::after {
    left: 1px;
    border-right-color: #fff;
}

.bs-popover-bottom, .bs-popover-auto[x-placement^="bottom"] {
    margin-top: 0.5rem;
}

.bs-popover-bottom .arrow, .bs-popover-auto[x-placement^="bottom"] .arrow {
    top: calc((0.5rem + 1px) * -1);
}

.bs-popover-bottom .arrow::before, .bs-popover-auto[x-placement^="bottom"] .arrow::before,
.bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^="bottom"] .arrow::after {
    border-width: 0 0.5rem 0.5rem 0.5rem;
}

.bs-popover-bottom .arrow::before, .bs-popover-auto[x-placement^="bottom"] .arrow::before {
    top: 0;
    border-bottom-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^="bottom"] .arrow::after {
    top: 1px;
    border-bottom-color: #fff;
}

.bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 1rem;
    margin-left: -0.5rem;
    content: "";
    border-bottom: 1px solid #f7f7f7;
}

.bs-popover-left, .bs-popover-auto[x-placement^="left"] {
    margin-right: 0.5rem;
}

.bs-popover-left .arrow, .bs-popover-auto[x-placement^="left"] .arrow {
    right: calc((0.5rem + 1px) * -1);
    width: 0.5rem;
    height: 1rem;
    margin: 0.3rem 0;
}

.bs-popover-left .arrow::before, .bs-popover-auto[x-placement^="left"] .arrow::before,
.bs-popover-left .arrow::after, .bs-popover-auto[x-placement^="left"] .arrow::after {
    border-width: 0.5rem 0 0.5rem 0.5rem;
}

.bs-popover-left .arrow::before, .bs-popover-auto[x-placement^="left"] .arrow::before {
    right: 0;
    border-left-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-left .arrow::after, .bs-popover-auto[x-placement^="left"] .arrow::after {
    right: 1px;
    border-left-color: #fff;
}

.popover-header {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0;
    font-size: 1rem;
    color: inherit;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px);
}

.popover-header:empty {
    display: none;
}

.popover-body {
    padding: 0.5rem 0.75rem;
    color: #212529;
}