public/assets/ss-bulma.css

@@ -7,16 +7,6 @@
     transform: rotate(359deg);
   }
 }
-
-.main-background {
-  display: none;
-  height: 100vh;
-  width: 100vw;
-  z-index: 0;
-  left: 0;
-  top: 0;
-}
-
 .tabs,
 .pagination-previous,
 .pagination-next,

public/assets/ssr.css

@@ -1,6 +1,6 @@
 :root {
   --background: #222;
-  --foreground: #2e2e2e;
+  --foreground: #252525;
   --textColor: #eee;
   --ppColour: #8992e8;
   --alternate: #72a8ff;
@@ -15,8 +15,6 @@
   --color-behind: rgb(128, 0, 0);
   --color-highlight: darkgreen;
   --error: red;
-
-  --transparency: 0.95;
 }
 
 html {
@@ -25,6 +23,7 @@ html {
 
 body {
   color: var(--textColor);
+  background-color: var(--background) !important;
   margin: 0 auto;
   padding: 0 1rem;
   min-height: 100vh;
@@ -37,22 +36,10 @@ select {
   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 {

src/App.svelte

@@ -14,9 +14,7 @@
   import RankingPage from './pages/Ranking.svelte';
   import SearchPage from './pages/Search.svelte';
   import TwitchPage from './pages/Twitch.svelte';
-  import { configStore } from './stores/config';
   import createContainerStore from './stores/container';
-  import { setGlobalCSSValue } from './utils/css';
 
   // When SSR was built (eg: 1 hour ago)
   export const buildDateAgo = moment(buildInfo.buildDate, "MMMM Do YYYY, h:mm:ss a").fromNow();
@@ -29,16 +27,12 @@
   setContext('pageContainer', containerStore);
 
   $: if (mainEl) containerStore.observe(mainEl)
-  
-  setGlobalCSSValue("background-image", "url(" + $configStore.preferences.backgroundImage + ")")
 </script>
 
-<div class="main-background" />
-
 <Router {url}>
   <Nav />
 
-  <main bind:this={mainEl}>    
+  <main bind:this={mainEl}>
     <div class="ssr-page-container">
       <Route path="/u/:initialPlayerId/*initialParams" let:params>
         <PlayerPage initialPlayerId={params.initialPlayerId} initialParams={params.initialParams}/>
@@ -92,7 +86,7 @@
     }
 
     footer {
-        padding: 1rem;
+        margin: 1rem 0;
         font-size: .75em;
         text-align: center;
     }

src/components/Others/Settings.svelte

@@ -1,24 +1,23 @@
 <script>
-  import produce from 'immer';
-  import { getContext, onMount } from 'svelte';
-  import { ROUTER } from 'svelte-routing/src/contexts';
-  import createTwitchService from '../../services/twitch';
-  import { DEFAULT_LOCALE, configStore, getSupportedLocales } from '../../stores/config';
-  import eventBus from '../../utils/broadcast-channel-pubsub';
-  import { DAY } from '../../utils/date';
-  import { exportJsonData, importDataHandler } from '../../utils/export-import';
-  import { opt } from '../../utils/js';
-  import Button from '../Common/Button.svelte';
-  import Dialog from '../Common/Dialog.svelte';
-  import File from '../Common/File.svelte';
-  import Select from "./Select.svelte";
+  import produce from 'immer'
+  import {configStore, DEFAULT_LOCALE, getSupportedLocales} from '../../stores/config'
+  import createTwitchService from '../../services/twitch'
+  import {ROUTER} from 'svelte-routing/src/contexts'
+  import {getContext, onMount} from 'svelte'
+  import {opt} from '../../utils/js'
+  import eventBus from '../../utils/broadcast-channel-pubsub'
+  import {DAY} from '../../utils/date'
+  import {exportJsonData, importDataHandler} from '../../utils/export-import'
+  import Dialog from '../Common/Dialog.svelte'
+  import Button from '../Common/Button.svelte'
+  import File from '../Common/File.svelte'
+  import Select from "./Select.svelte"
 
   export let show = false;
 
   const DEFAULT_SCORE_COMPARISON_METHOD = 'in-place';
   const DEFAULT_SECONDARY_PP_METRICS = 'attribution';
   const DEFAULT_AVATAR_ICONS = 'only-if-needed';
-  const DEFAULT_BACKGROUND_IMAGE = "/assets/background.png";
 
   let twitchToken = null;
 
@@ -46,14 +45,12 @@
   let currentScoreComparisonMethod = DEFAULT_SCORE_COMPARISON_METHOD;
   let currentSecondaryPpMetrics = DEFAULT_SECONDARY_PP_METRICS;
   let currentAvatarIcons = DEFAULT_AVATAR_ICONS;
-  let currentBackgroundImage = DEFAULT_BACKGROUND_IMAGE;
 
   function onConfigUpdated(config) {
     if (config?.locale) currentLocale = config.locale;
     if (config?.scoreComparison) currentScoreComparisonMethod = config?.scoreComparison?.method ?? DEFAULT_SCORE_COMPARISON_METHOD;
     if (config?.preferences?.secondaryPp) currentSecondaryPpMetrics = config?.preferences?.secondaryPp ?? DEFAULT_SECONDARY_PP_METRICS;
     if (config?.preferences?.avatarIcons) currentAvatarIcons = config?.preferences?.avatarIcons ?? DEFAULT_AVATAR_ICONS;
-    if (config?.preferences?.backgroundImage) currentBackgroundImage = config?.preferences?.backgroundImage ?? DEFAULT_BACKGROUND_IMAGE;
   }
 
   function onSave() {
@@ -64,7 +61,6 @@
       draft.scoreComparison.method = currentScoreComparisonMethod;
       draft.preferences.secondaryPp = currentSecondaryPpMetrics;
       draft.preferences.avatarIcons = currentAvatarIcons;
-      draft.preferences.backgroundImage = currentBackgroundImage;
     })
 
     show = false;
@@ -76,7 +72,6 @@
       currentScoreComparisonMethod = $configStore.scoreComparison.method;
       currentSecondaryPpMetrics = $configStore.preferences.secondaryPp;
       currentAvatarIcons = $configStore.preferences.avatarIcons;
-      currentBackgroundImage = $configStore.preferences.backgroundImage;
     }
 
     show = false;
@@ -203,11 +198,6 @@
                     label={twitchBtnLabel} title={twitchBtnTitle}
                     on:click={() => window.location.href = twitchService.getAuthUrl(opt($activeRoute, 'uri', ''))}/>
           </section>
-
-          <section class="option">
-            <label title="Change the image in the background of the site">Background Image</label>
-            <input bind:value={currentBackgroundImage} />
-          </section>
         </section>
       {:else}
         Loading...

src/components/Player/Charts/SsChart.svelte

@@ -1,21 +1,21 @@
 <script>
-  import Chart from 'chart.js/auto';
+  import Chart from 'chart.js/auto'
   import 'chartjs-adapter-luxon';
-  import { DateTime } from 'luxon';
-  import { getContext, onMount } from 'svelte';
-  import createBeatSaviorService from '../../../services/beatsavior';
-  import createPlayerService from '../../../services/scoresaber/player';
-  import createScoresService from '../../../services/scoresaber/scores';
-  import eventBus from '../../../utils/broadcast-channel-pubsub';
+  import {DateTime} from 'luxon';
+  import {getContext, onMount} from 'svelte'
+  import createPlayerService from '../../../services/scoresaber/player'
+  import createScoresService from '../../../services/scoresaber/scores'
+  import createBeatSaviorService from '../../../services/beatsavior'
+  import {formatNumber} from '../../../utils/format'
   import {
     dateFromString,
     formatDate,
     formatDateWithOptions,
     toSsMidnight,
-  } from '../../../utils/date';
-  import { debounce } from '../../../utils/debounce';
-  import { formatNumber } from '../../../utils/format';
-  import { onLegendClick } from './utils/legend-click-handler';
+  } from '../../../utils/date'
+  import eventBus from '../../../utils/broadcast-channel-pubsub'
+  import {debounce} from '../../../utils/debounce'
+  import {onLegendClick} from './utils/legend-click-handler'
 
   export let playerId = null;
   export let rankHistory = null;
@@ -123,7 +123,6 @@
   }
 
   async function setupChart(hash, canvas) {
-    Chart.defaults.color = '#fff'; // Jank workaround to make the text white
     if (!hash || !canvas || !rankHistory || !Object.keys(rankHistory).length || chartHash === lastHistoryHash) return;
 
     lastHistoryHash = chartHash;
@@ -135,7 +134,7 @@
     const ppColor = "#007100";
     const rankedPlayCountColor = "#3e3e3e";
     const totalPlayCountColor = "#666";
-    const activityColor = "#555"
+    const activityColor = "#333"
 
     const dtAccSaberToday = DateTime.fromJSDate(toSsMidnight(new Date()));
     const dayTimestamps = Array(CHART_DAYS).fill(0).map((_, idx) => toSsMidnight(dtAccSaberToday.minus({days: CHART_DAYS - 1 - idx}).toJSDate()).getTime());

src/stores/config.js

@@ -30,7 +30,6 @@ const DEFAULT_CONFIG = {
   preferences: {
     secondaryPp: "attribution",
     avatarIcons: "only-if-needed",
-    backgroundImage: "/assets/background.png",
   },
   locale: DEFAULT_LOCALE,
 };
@@ -39,7 +38,6 @@ const newSettingsAvailableDefinition = {
   "scoreComparison.method": "Method of displaying the comparison of scores",
   "preferences.secondaryPp": "Setting the second PP metric",
   "preferences.avatarIcons": "Showing icons on avatars",
-  "preferences.backgroundImage": "Change the background image",
   locale: "Locale selection",
 };
 

src/utils/css.js

@@ -1,4 +0,0 @@
-export function setGlobalCSSValue(name, value) {
-  var r = document.querySelector(":root");
-  r.style.setProperty("--" + name, value);
-}