Skip to content

Song Maker Plus by CCGameing

Details

AuthorCCGameing

LicenseNo License

CategoryChrome Music Lab

Created

Updated

Size4.8 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A stylesheet for my userscript extension of the same name

Notes

Changes instances of "#settings-modal" to ".settings-modal"

Source code

/* ==UserStyle==
@name           musiclab.chromeexperiments.com - Mar 2024
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */
@-moz-document domain("musiclab.chromeexperiments.com") {
    /* Insert code here... */
    
    
    .settings-modal {
        display: flex;
        align-items: center;
        min-height: 100vh;
    }

    .settings-modal .expandable-inner {
        width: 100%;
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 30px;
    }

    .settings-modal .setting-column--left {
        float: left;
    }

    .settings-modal .setting-column--right {
        float: right;
    }

    .settings-modal .setting-column {
        width: 46%;
    }

    .settings-modal .select-wrap {
        display: inline-block;
        float: right;
        position: relative;
        overflow: hidden;
        background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSI4cHgiIHZpZXdCb3g9IjAgMCAxMiA4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgoJPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0OC4yICg0NzMyNykgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+Cgk8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KCTxkZWZzPjwvZGVmcz4KCTxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgoJCTxnIGlkPSJDYXJldCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYuMDAwMDAwLCAtOC4wMDAwMDApIj4KCQkJPGcgaWQ9ImljX2tleWJvYXJkX2Fycm93X3JpZ2h0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMi4wMDAwMDAsIDEyLjAwMDAwMCkgcm90YXRlKDkwLjAwMDAwMCkgdHJhbnNsYXRlKC0xMi4wMDAwMDAsIC0xMi4wMDAwMDApICI+CgkJCQk8ZyBpZD0iSWNvbi0yNHB4Ij4KCQkJCQk8cGF0aCBkPSJNOC45NDI3ODI3LDE1Ljk4NjQ0NyBMMTMuMTcsMTEuNzUgTDguOTQyNzgyNyw3LjUxMzU1Mjk3IEM4Ljc0Nzg4NCw3LjMxODIyODcyIDguNzQ4MDU2NDUsNy4wMDE5NDM1NSA4Ljk0MzE2ODA1LDYuODA2ODMxOTUgTDkuNjQ2NDQ2NjEsNi4xMDM1NTMzOSBDOS44NDE3MDg3Niw1LjkwODI5MTI0IDEwLjE1ODI5MTIsNS45MDgyOTEyNCAxMC4zNTM1NTM0LDYuMTAzNTUzMzkgTDE1LjY0NjQ0NjYsMTEuMzk2NDQ2NiBDMTUuODQxNzA4OCwxMS41OTE3MDg4IDE1Ljg0MTcwODgsMTEuOTA4MjkxMiAxNS42NDY0NDY2LDEyLjEwMzU1MzQgTDEwLjM1MzU1MzQsMTcuMzk2NDQ2NiBDMTAuMTU4MjkxMiwxNy41OTE3MDg4IDkuODQxNzA4NzYsMTcuNTkxNzA4OCA5LjY0NjQ0NjYxLDE3LjM5NjQ0NjYgTDguOTQzMTY4MDUsMTYuNjkzMTY4IEM4Ljc0ODA1NjQ1LDE2LjQ5ODA1NjUgOC43NDc4ODQsMTYuMTgxNzcxMyA4Ljk0Mjc4MjcsMTUuOTg2NDQ3IFoiIGlkPSJTaGFwZSIgZmlsbD0iIzY2NiIgZmlsbC1ydWxlPSJub256ZXJvIj48L3BhdGg+CgkJCQkJPHBvbHlnb24gaWQ9IlNoYXBlIiBwb2ludHM9IjAgMCAyNCAwIDI0IDI0IDAgMjQiPjwvcG9seWdvbj4KCQkJCTwvZz4KCQkJPC9nPgoKCQk8L2c+Cgk8L2c+Cjwvc3ZnPgo=") no-repeat right center;
        padding-right: 24px;
        top: -2px;
    }

    .settings-modal .select-wrap .dupe {
        font-size: 21px;
        white-space: nowrap;
        position: absolute;
        opacity: 0;
        pointer-events: none;
        font-family: "Poppins", sans-serif;
        letter-spacing: .1ex;
    }

    .settings-modal .setting-group {
        border-bottom: 1px #f5f5f5 solid;
        padding: 30px 0;
        position: relative;
        height: 96px;
        font-size: 19px;
    }

    .settings-modal .setting-group label {
        float: left;
        line-height: 35px;
        color: #666;
    }

    .settings-modal .setting-group select {
        background: transparent;
        border: none;
        height: 29px;
        color: #16a8f0;
        font-size: 21px;
        margin-left: 20px;
        width: calc(100% + 20px);
        -webkit-appearance: none;
        transition: opacity .2s;
        font-family: "Poppins", sans-serif;
        letter-spacing: .1ex;
    }

    .settings-modal .setting-group .quantity {
        float: right;
    }

    .settings-modal .quantity {
        height: 35px;
        overflow: hidden;
    }

    .settings-modal .quantity-cover {
        display: inline-block;
        line-height: 35px;
        float: right;
        color: #16a8f0;
        font-size: 21px;
        padding: 0 8px;
        width: 3em;
        border: 0;
        text-align: right;
        margin: 0;
        font-family: "Poppins", sans-serif;
        letter-spacing: .1ex;
    }

    .settings-modal .quantity-label {
        display: inline-block;
        line-height: 35px;
        float: right;
        margin-right: 10px;
        color: #16a8f0;
    }

    .settings-modal .quantity input:not(.quantity-cover) {
        visibility: hidden;
        height: 1px;
        width: 1px;
        z-index: -1;
        position: absolute;
    }

    .settings-modal .quantity-button {
        width: 30px;
        height: 30px;
        border-radius: 15px;
        background: #fff;
        cursor: pointer;
        display: inline-block;
        position: relative;
        float: right;
        margin-left: 10px;
    }
    
    
}

Reviews

No reviews yet.