A stylesheet for my userscript extension of the same name
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
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;
}
}