scoresaber-reloaded/public/assets/ssr.css

:root {
  --background: #222;
  --foreground: #2e2e2e;
  --textColor: #eee;
  --ppColour: #8992e8;
  --alternate: #72a8ff;
  --selected: #3273dc;
  --hover: #333;
  --highlight: #484848;
  --decrease: #f94022;
  --increase: #42b129;
  --dimmed: #3e3e3e;
  --faded: #666;
  --color-ahead: rgb(0, 128, 0);
  --color-behind: rgb(128, 0, 0);
  --color-highlight: darkgreen;
  --error: red;

  --transparency: 0.95;
}

html {
  height: --webkit-fill-available;
}

body {
  color: var(--textColor);
  margin: 0 auto;
  padding: 0 1rem;
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

select {
  color: var(--textColor);
  background-color: var(--foreground);
  outline: none;
}

.main-background {
  position: fixed;
  display: block;
  background: var(--background-image) !important;
  filter: blur(4px) brightness(0.8);

  background-size: cover !important;
}

.ssr-page-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;

  position: relative;
  opacity: var(--transparency);
}

.box {
  padding: 1rem;
}

.inc {
  color: var(--increase);
}

.dec {
  color: var(--decrease);
}

*[title]:not([title=""]):not(.clickable) {
  cursor: help;
}

.scoresaber-icon {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("./scoresaber-logo.svg");
}

.beatsavior-icon {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' width='72.723976mm' height='63.291668mm' viewBox='0 0 72.723976 63.291668' version='1.1' id='svg3827' sodipodi:docname='bsicon_ter.svg' inkscape:version='0.92.4 (5da689c313, 2019-01-14)'%3E%3Cdefs id='defs3821' /%3E%3Csodipodi:namedview id='base' pagecolor='%23ffffff' bordercolor='%23666666' borderopacity='1.0' inkscape:pageopacity='0.0' inkscape:pageshadow='2' inkscape:zoom='1.4' inkscape:cx='40.905424' inkscape:cy='61.353566' inkscape:document-units='mm' inkscape:current-layer='layer1' showgrid='false' inkscape:window-width='1920' inkscape:window-height='1017' inkscape:window-x='-8' inkscape:window-y='-8' inkscape:window-maximized='1' /%3E%3Cmetadata id='metadata3824'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3Cdc:title%3E%3C/dc:title%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cg inkscape:label='Calque 1' inkscape:groupmode='layer' id='layer1' style='opacity:1' transform='translate(-0.72553574,-0.71711111)'%3E%3Crect style='fill:%23000200;fill-opacity:1;stroke:%23000000;stroke-width:1.98928511;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal' id='rect4531' width='63.5' height='10.583332' x='5.4550524' y='10.242103' inkscape:export-xdpi='81.844757' inkscape:export-ydpi='81.844757' /%3E%3Crect style='fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:3.35483217;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal' id='rect4533' width='6.6145835' height='6.6145835' x='25.298788' y='11.565023' inkscape:export-xdpi='81.844757' inkscape:export-ydpi='81.844757' /%3E%3Crect style='fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:3.92078424;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal' id='rect4533-5' width='6.6145835' height='6.6145835' x='42.496708' y='11.565023' inkscape:export-xdpi='81.844757' inkscape:export-ydpi='81.844757' /%3E%3Cg id='g4614' transform='rotate(-23.417079,-23.695385,307.31208)' inkscape:export-xdpi='81.844757' inkscape:export-ydpi='81.844757'%3E%3Crect y='86.127083' x='125.67709' height='1.3229166' width='50.270832' id='rect4610' style='fill:%230000ff;fill-opacity:1;stroke:%230000ff;stroke-width:2.64583325;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' /%3E%3Crect y='85.333328' x='109.80208' height='2.6458333' width='15.875' id='rect4605' style='fill:%23000000;fill-opacity:1;stroke:%23000000;stroke-width:2.64583325;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' /%3E%3C/g%3E%3Cg transform='rotate(-156.98422,82.908484,73.919009)' id='g4614-3' inkscape:export-xdpi='81.844757' inkscape:export-ydpi='81.844757'%3E%3Crect y='86.127083' x='125.67709' height='1.3229166' width='50.270832' id='rect4610-6' style='fill:%23ff0000;fill-opacity:1;stroke:%23ff0000;stroke-width:2.64583325;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' /%3E%3Crect y='85.333328' x='109.80208' height='2.6458333' width='15.875' id='rect4605-7' style='fill:%23000000;fill-opacity:1;stroke:%23000000;stroke-width:2.64583325;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

.accsaber-icon {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("./accsaber-logo.png");
}

.grid-transition-helper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.grid-transition-helper > * {
  grid-column: 1/1;
}

.grid-transition-helper > .row-0 {
  grid-row: 1/1;
}

.grid-transition-helper > .row-1 {
  grid-row: 2/2;
}

.grid-transition-helper > .row-2 {
  grid-row: 3/3;
}

.grid-transition-helper > .row-3 {
  grid-row: 4/4;
}

.grid-transition-helper > .row-4 {
  grid-row: 5/5;
}

.grid-transition-helper > .row-5 {
  grid-row: 6/6;
}

.grid-transition-helper > .row-6 {
  grid-row: 7/7;
}

.grid-transition-helper > .row-7 {
  grid-row: 8/8;
}

.grid-transition-helper > .row-8 {
  grid-row: 9/9;
}

.grid-transition-helper > .row-9 {
  grid-row: 10/10;
}

.grid-transition-helper > .row-10 {
  grid-row: 11/11;
}

.grid-transition-helper > .row-11 {
  grid-row: 12/12;
}

.has-pointer-events {
  pointer-events: fill;
}

.mobile-only {
  display: none;
}

.tablet-only {
  display: none;
}

.up-to-tablet {
  display: none;
}

@media screen and (max-width: 767px) {
  .mobile-only {
    display: block;
  }

  .tablet-and-up {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  .above-tablet {
    display: none;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .tablet-only {
    display: block;
  }
}

@media screen and (max-width: 1023px) {
  .up-to-tablet {
    display: block;
  }

  .desktop-and-up {
    display: none !important;
  }
}

@media screen and (min-width: 1750px) {
  body:not(.slim) .ssr-page-container {
    max-width: 1750px !important;
  }
}

@media screen and (max-width: 360px) {
  body {
    padding: 0;
  }
}

@media screen and (max-width: 320px) {
  html {
    font-size: 15px;
  }
}