SoundDark 0.3.1 - fix colors

[nuqbe]

Hi @michioxd,
i found some another bad colors.

• I'm attaching screenshots
• I use latest Microsoft Edge - Version 129.0.2792.89 (Official build) (64-bit)

---

1.) Lines of notification

After click on "View all notifications" dashed lines are white.

.sc-classic .activitiesListFull__item+.activitiesListFull__item {
    border-top: 1px solid #f2f2f2;
}

• activities-list-full.css

Set to "#333333"

---

2.) Text "Not available..." on track in Feed

.waveform__emptyMessage {
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 5px;
    color: #000;
    font-size: 12px;
    text-shadow: 1px 1px 1px #fff;
}

• waveform.css

Set "color: #000;" to "#666" and "text-shadow: 1px 1px 1px #fff;" to "#ffffff00"

---

3.) Playlist "clickToPlay" hover

.sc-classic .compactTrackListItem.clickToPlay.active .compactTrackListItem__additional, .sc-classic .compactTrackListItem.clickToPlay:focus .compactTrackListItem__additional, .sc-classic .compactTrackListItem.clickToPlay:hover .compactTrackListItem__additional {
    background: #f2f2f2;
    background: linear-gradient(90deg, hsla(0, 0%, 94.9%, .1), #f2f2f2 17px);
}

• compact-track-list-item.css

Set "background: #f2f2f2;" to "background: #f2f2f200"
Set "background: linear-gradient(90deg, hsla(0, 0%, 94.9%, .1), #f2f2f2 17px)" to "background: linear-gradient(90deg, hsl(0deg 0% 94.9% / 0%), #f2f2f200 17px);"

.sc-classic .compactTrackListItem.clickToPlay.active .compactTrackListItem__additional, .sc-classic .compactTrackListItem.clickToPlay:focus .compactTrackListItem__additional, .sc-classic .compactTrackListItem.clickToPlay:hover .compactTrackListItem__additional {
    background-color: #111;
    background: linear-gradient(90deg, hsla(0, 0%, 94.9%, .1), #111 17px) !important;
}

• sounddark.css

Set "background: #111;" to "background: #11111100;"
Set "background: linear-gradient(90deg, hsla(0, 0%, 94.9%, .1), #111 17px) !important;" to "background: linear-gradient(90deg, hsl(0deg 0% 94.9% / 0%), #11111100 17px) !important;"

---

4.) Playlist "edit" popup - tracklist time "TrackItem"

.sc-classic .editTrackItem__additional {
    background: linear-gradient(90deg, hsla(0, 0%, 100%, .1), #111 17px) !important;
}

• sounddark.css

Set to "background: linear-gradient(90deg, hsl(0deg 0% 100% / 0%), #111 17px) !important;"

.sc-classic .editTrackItem.m-active .editTrackItem__additional, .sc-classic .editTrackItem.m-hover .editTrackItem__additional {
    background: #444 !important;
    background: linear-gradient(90deg, hsla(0, 0%, 94.9%, .1), #444 17px) !important;
}

• sounddark.css

Set "background: linear-gradient(90deg, hsla(0, 0%, 94.9%, .1), #444 17px) !important;" to "background: linear-gradient(90deg, hsl(0deg 0% 94.9% / 0%), #444 17px) !important;"

---

5.) "Next Pro" creator badge could have the same black 0.80 transparent background color as the others "profileHeaderInfo"

It looks much better.

.creatorBadge__custom {
    background-color: #303030;
    border-radius: 0;
}

• profile-header-info.css

Set "#303030" to "rgba(0, 0, 0, 0.8)"

._1ozuTlP-hfWO7D0pIn34Tn {
    background-color: #303030;
}

._3haHlSiCHsAG1ZxIEtrkPa {
    background-color: #f3f3f3;

• CreatorBadge.module.css

Set "#303030" to "#30303000" and "#f3f3f3" to "#f3f3f300"

---

6.) "title box" style

Maybe it would be great to modify "title box":

to the same style as "dropdownMenu g-z-index-header-menu" "headerMenu profileMenu m-light":

or same style as:

---

7.) Subpage "Two Factor Authentication" in profile settings

---

8.) "Cookie Manager" popup

8.) (a) Cookies bar on homepage

Although it disappears when you click "Reject All" (unless cookies are deleted) but it's worth mentioning and fixing.

---

nuqbe💗

[nuqbe]

9.) Search results "Albums/Playlists" - playlist, tracklist "Not available..." TrackItem hover

.sc-classic .compactTrackListItem.clickToPlay.active .compactTrackListItem__additional, .sc-classic .compactTrackListItem.clickToPlay:focus .compactTrackListItem__additional, .sc-classic .compactTrackListItem.clickToPlay:hover .compactTrackListItem__additional {
    background: #f2f2f2;
    background: linear-gradient(90deg, hsla(0, 0%, 94.9%, .1), #f2f2f2 17px);
}

• compact-track-list-item.css

Set "background: #f2f2f2;" to "background: #f2f2f200;"
Set "background: linear-gradient(90deg, hsla(0, 0%, 94.9%, .1), #f2f2f2 17px);" to "background: linear-gradient(90deg, hsl(0deg 0% 94.9% / 0%), #f2f2f200 17px);"

.sc-classic .compactTrackListItem.clickToPlay.active .compactTrackListItem__additional, .sc-classic .compactTrackListItem.clickToPlay:focus .compactTrackListItem__additional, .sc-classic .compactTrackListItem.clickToPlay:hover .compactTrackListItem__additional {
    background-color: #111;
    background: linear-gradient(90deg, hsla(0, 0%, 94.9%, .1), #111 17px) !important;
}

• sounddark.css

Set "background-color: #111;" to "background-color: #222222;"
Set "background: linear-gradient(90deg, hsla(0, 0%, 94.9%, .1), #111 17px) !important;" to "background: linear-gradient(90deg, hsl(0deg 0% 94.9% / 0%), #11111100 17px) !important;"

---

💗

[michioxd]

Hi, thanks for your contribute. Please try to open a pull request instead of open issues and put your code in this. Some example for you if you want to open a PR.

Why you have to open PR? Check out contributors.