Soundgasm Change Theme のソースコード

Soundgasm Change Theme

Theme for Soundgasm
右端で折り返す
// ==UserScript==
// @name         Soundgasm Change Theme
// @namespace    AnimeRaupe
// @version      2.3
// @description  Theme for Soundgasm
// @author       AnimeRaupe
// @match        ://*.soundgasm.net/*
// @grant        none
// @license      MIT
// @run-at       document-end
// ==/UserScript==

(function () {
    const style = document.createElement('style');
    style.textContent = `

/* ================= GLOBAL BACKGROUND ================= */
body,
.jp-audio,
.jp-details {
    background: #18141f !important;
}

/* ================= PLAYER CONTAINER ================= */
.jp-audio {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ================= PLAYER LEFT ================= */
.jp-gui.jp-interface{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 50px 0px;
    box-sizing: border-box;
    height: 200px;

    background: #18141f;
    border: 2px solid #7c4dff;
    border-radius: 4px;
}

.jp-description {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0px 20px;
    box-sizing: border-box;

    background: #18141f;
    border: 2px solid #7c4dff;
    border-radius: 4px;
}

.sound-details {
    border: solid 1px #7c4dff;
    padding: 10px;
    border-radius: 10px;
    margin: 5px 0;
}

/* ================= PROGRESS BAR ================= */
.jp-progress {
    height: 10px;
    background: #18141f;
    padding-left: 0px;
}

.jp-seek-bar {
    height: 10px;
    border-radius: 10px;
    background: #2a2438;
    padding-left: 0px;
}

.jp-play-bar {
    border-radius: 10px;
    background: #9a7cff;
    padding-left: 0px;
}

/* ================= CONTROLS ================= */
.jp-controls {
    display: flex;
    gap: 14px;
    background: #18141f;
}

.jp-controls button {
    filter: brightness(1.15);
}

.jp-volume-bar {
    top: 55px;
}

.jp-repeat {
    top: 25px;
}

.jp-volume-controls button {
    top: 50px;
}

/* ================= TEXT & LINKS ================= */
body, body * {
    color: #bd54ff !important;
}

a, a * {
    color: #cf82ff !important;
}

a:hover {
    color: #eac9ff !important;
}

/* ================= HEADER LAYOUT ================= */
header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
}

header .logo {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

header nav {
    display: flex !important;
    gap: 16px !important;
    margin: 0 !important;
}

    `;
    document.head.appendChild(style);
})();