| 86 | } |
| 87 | |
| 88 | function styleSettings() { |
| 89 | const style = document.createElement("style"); |
| 90 | style.innerHTML = ` |
| 91 | .main-trackCreditsModal-container { |
| 92 | width: auto !important; |
| 93 | background-color: var(--spice-player) !important; |
| 94 | } |
| 95 | |
| 96 | .setting-row::after { |
| 97 | content: ""; |
| 98 | display: table; |
| 99 | clear: both; |
| 100 | } |
| 101 | .setting-row { |
| 102 | display: flex; |
| 103 | padding: 10px 0; |
| 104 | align-items: center; |
| 105 | justify-content: space-between; |
| 106 | } |
| 107 | .setting-row .col.description { |
| 108 | float: left; |
| 109 | padding-right: 15px; |
| 110 | width: 100%; |
| 111 | } |
| 112 | .setting-row .col.action { |
| 113 | float: right; |
| 114 | text-align: right; |
| 115 | } |
| 116 | button.switch { |
| 117 | align-items: center; |
| 118 | border: 0px; |
| 119 | border-radius: 50%; |
| 120 | background-color: rgba(var(--spice-rgb-shadow), .7); |
| 121 | color: var(--spice-text); |
| 122 | cursor: pointer; |
| 123 | display: flex; |
| 124 | margin-inline-start: 12px; |
| 125 | padding: 8px; |
| 126 | } |
| 127 | button.switch.disabled, |
| 128 | button.switch[disabled] { |
| 129 | color: rgba(var(--spice-rgb-text), .3); |
| 130 | } |
| 131 | button.reset { |
| 132 | font-weight: 700; |
| 133 | font-size: medium; |
| 134 | background-color: transparent; |
| 135 | border-radius: 500px; |
| 136 | transition-duration: 33ms; |
| 137 | transition-property: background-color, border-color, color, box-shadow, filter, transform; |
| 138 | padding-inline: 15px; |
| 139 | border: 1px solid #727272; |
| 140 | color: var(--spice-text); |
| 141 | min-block-size: 32px; |
| 142 | cursor: pointer; |
| 143 | } |
| 144 | button.reset:hover { |
| 145 | transform: scale(1.04); |