Last active
November 3, 2023 03:04
-
-
Save al3xtjames/321c7750cf952551e47c4824c0aae387 to your computer and use it in GitHub Desktop.
SoundCloud Quite Dark user style by pawelos076232, with additional fixes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ==UserStyle== | |
| @name SoundCloud - Quite Dark | |
| @namespace USO Archive | |
| @author pawelos076232 | |
| @description `Quite dark style for the SoundCloud` | |
| @version 20231102.0.1 | |
| @license NO-REDISTRIBUTION | |
| @preprocessor uso | |
| @updateURL https://gist.githubusercontent.com/al3xtjames/321c7750cf952551e47c4824c0aae387/raw/soundcloud-quite-dark.user.css?cache=false | |
| ==/UserStyle== */ | |
| @-moz-document regexp("http(s)?://(|www.)?soundcloud.com/((?!jobs|settings/connections).*)") { | |
| /*! | |
| || Name: SoundCloud - Quite Dark || | |
| || Author: pawelos076232 || | |
| || License: No Redistribution || | |
| || Version: 1.4.6 || | |
| */ | |
| :root { | |
| color-scheme: dark; | |
| } | |
| .l-footer:after { | |
| white-space: pre; | |
| content: "\A\ASoundCloud - Quite Dark v1.4.6 \A style by pawelos076232" | |
| } | |
| html[lang="pl"] .l-footer:after { | |
| content: "\A\AU\017Cywasz styl SoundCloud - Quite Dark v1.4.6 \A stworzony z mi\0142\o\015B ci\0105 \2764\ przez pawelos076232" !important | |
| } | |
| body.sc-classic { | |
| background: #0a0a0a url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABNgAAABkCAAAAABxmtK9AAABFElEQVR42u3UMREAAAgDMSoB/2argZVLJPzw2QH4JcYGGBuAsQEYG4CxARgbYGwAxgZgbADGBmBsgLEBGBuAsQEYG4CxAcYGYGwAxgZgbADGBmBsgLEBGBuAsQEYG4CxAcYGYGwAxgZgbADGBhgbgLEBGBuAsQEYG2BsAMYGYGwAxgZgbADGBhgbgLEBGBuAsQEYG2BsAMYGYGwAxgZgbICxARgbgLEBGBuAsQHGBmBsAMYGYGwAxgZgbICxARgbgLEBGBuAsQHGBmBsAMYGYGwAxgYYG4CxARgbgLEBGBtgbBoAxgZgbADGBmBsAMYGGBuAsQEYG4CxARgbYGwAxgZgbADGBmBsgLEBGBuAsQEYG8BdAY8JBwnfLuOyAAAAAElFTkSuQmCC) repeat-y 50% 0 | |
| } | |
| @media(max-width:959px) { | |
| body.sc-classic { | |
| background: #111 | |
| } | |
| } | |
| .header__logo { | |
| background: transparent | |
| } | |
| .sc-classic .searchTitle { | |
| background-color: #111 | |
| } | |
| .frontMobileTeaser, | |
| .sidebarInfoBox, | |
| .sc-classic .banner.m-promotion { | |
| background: #0a0a0a | |
| } | |
| .sc-background-dark { | |
| background-color: #1a1a1a | |
| } | |
| .sc-classic .header { | |
| background: #030303 | |
| } | |
| .g-dark-bg, | |
| .g-dark-list, | |
| .unreadConversations, | |
| .profileMenu__list { | |
| background-color: #222 | |
| } | |
| .sc-classic .headerMenu.m-light { | |
| background-color: #111; | |
| border-color: #333 | |
| } | |
| .sc-classic .m-light .headerMenu__link:focus, | |
| .sc-classic .m-light .headerMenu__link:hover { | |
| background-color: #0a0a0a | |
| } | |
| .sc-classic .m-light .headerMenu__link, | |
| .sc-classic .m-light .headerMenu__link:focus, | |
| .sc-classic .m-light .headerMenu__link:hover { | |
| color: #ccc | |
| } | |
| .sc-classic .m-light a[class*="profileMenu__"]:after { | |
| filter: invert(1) | |
| } | |
| .sc-classic .m-light .headerMenu__list { | |
| border-color: #1c1c1c | |
| } | |
| .sc-classic .dropdownContent__container { | |
| background-color: #111; | |
| border-color: #333 | |
| } | |
| .sc-classic .dropdownContent__listItem, | |
| .sc-classic .dropdownContent__header, | |
| .sc-classic .dropdownContent__main { | |
| border-bottom-color: #1c1c1c | |
| } | |
| .sc-classic .notificationBadge__link:focus, | |
| .sc-classic .notificationBadge__link:focus:after { | |
| border-color: #333 | |
| } | |
| .sc-classic .notificationBadge__main { | |
| color: #999 | |
| } | |
| .sc-classic .notificationBadge--unread { | |
| background-color: #070707 | |
| } | |
| .sc-classic .activitiesListFull__item + .activitiesListFull__item { | |
| border-top-color: #333 | |
| } | |
| .header__navMenu > li > a.selected, | |
| .header > li > a:focus, | |
| .userNav__item.selected, | |
| .userNav__button.selected, | |
| .header__navMenu > li > a.header__moreButton.selected { | |
| background-color: #222 | |
| } | |
| .sc-classic .g-tabs-link, | |
| .sc-classic .g-tabs-link:visited { | |
| color: #ccc | |
| } | |
| .sc-classic .g-tabs-link:hover, | |
| .sc-classic .g-tabs-link:focus { | |
| color: #ccc; | |
| border-color: #ccc | |
| } | |
| body, | |
| textarea, | |
| select, | |
| button, | |
| input, | |
| .sc-text, | |
| a:hover, | |
| a.sc-ministats:hover, | |
| a.sc-link-dark, | |
| a.sc-link-light:hover, | |
| .sc-buylink, | |
| .sc-buylink:visited, | |
| .sc-classic .commentPopover.darkText .commentPopover__body, | |
| .sc-classic .moreActions__group, | |
| .sc-classic .moreActions__link, | |
| .blockCheckbox__title, | |
| .sc-classic .truncatedAudioInfo__collapse:focus, | |
| .statsBadge__upsell-text > span, | |
| .localeSelector__body, | |
| .localeSelectorContent__link:hover, | |
| .sc-button-nostyle, | |
| .sc-classic .commentBadge:hover .commentBadge__title a { | |
| color: #ccc | |
| } | |
| a.sc-link-dark:hover, | |
| a.sc-link-medium:hover, | |
| .sc-buylink:hover, | |
| .sc-classic .insightsSidebarModule__title { | |
| color: white | |
| } | |
| .sc-background-light { | |
| background-color: #0a0a0a | |
| } | |
| .dashbox__box { | |
| border-color: #1a1a1a | |
| } | |
| .dashbox__box, | |
| .dashbox__box:hover, | |
| .dashbox__box:focus, | |
| .dashbox__box:visited { | |
| color: #ccc | |
| } | |
| .loading:not(.dark) { | |
| filter: invert(1) !important | |
| } | |
| .emptyNetworkPage__image, | |
| .noConversations__image, | |
| .personalRecommended__empty { | |
| filter: invert(0.93) | |
| } | |
| .sc-classic .truncatedUserDescription.m-overflow.m-collapsed .truncatedUserDescription__wrapper::after { | |
| background: #111; | |
| background: linear-gradient(rgba(17, 17, 17, 0), #111) | |
| } | |
| .readMoreTile__countWrapper { | |
| background-color: #111 | |
| } | |
| .audibleTilePlaceholder:before { | |
| border-color: #333 | |
| } | |
| .l-signin .l-main { | |
| border-color: #1a1a1a | |
| } | |
| .sc-button-google:before { | |
| background-color: #111 | |
| } | |
| .sc-classic .sc-button-follow.m-boldIcon::before, | |
| .sc-classic .sc-button-small.sc-button-follow::before{ | |
| background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iI2NjYyIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNMTAuNSA1YzMuMjUgMCAzLjk0NCAzLjIzNiAyLjUgNyAzLjcxNyAxLjUzNCA0IDQuODUgNCA2SDRjMC0xLjE1LjI4My00LjQ2NiA0LTYtMS40NDUtMy43NzUtLjc1LTcgMi41LTd6TTE4IDRhMSAxIDAgMDExIDF2MWgxYTEgMSAwIDAxMCAyaC0xdjFhMSAxIDAgMDEtMiAwVjcuOTk5TDE2IDhhMSAxIDAgMDEwLTJsMS0uMDAxVjVhMSAxIDAgMDExLTF6Ii8+PC9zdmc+) | |
| } | |
| .waveform__emptyMessage { | |
| color: white; | |
| text-shadow: 1px 1px 1px #111 | |
| } | |
| .g-geoblocked-icon:before { | |
| filter: invert(1) | |
| } | |
| .sc-classic .profileUploadFooter { | |
| background-color: #111 | |
| } | |
| .uploadTarget__frame { | |
| background: #111 | |
| } | |
| .uploadedTarget__messageHighlight { | |
| color: #ccc | |
| } | |
| a.compactTrackList__moreLink:focus { | |
| outline-color: #333 | |
| } | |
| .artistShortcutTile__badge { | |
| border-color: #111 | |
| } | |
| .sc-classic .dropbar__content, | |
| .sc-classic .listenContent__inner { | |
| background-color: #111 | |
| } | |
| .sc-classic .compactTrackListItem.clickToPlay.active, | |
| .sc-classic .compactTrackListItem.clickToPlay:hover, | |
| .sc-classic .compactTrackListItem.clickToPlay:focus, | |
| .sc-classic .compactTrackList__moreLink:hover, | |
| .sc-classic .compactTrackList__moreLink:focus, | |
| .sc-classic .trackItem.hover, | |
| .sc-classic .trackItem.active, | |
| .chartTrack.m-playing, | |
| .chartTrack:hover, | |
| .sc-classic .listenLogin { | |
| background-color: #0a0a0a | |
| } | |
| .sc-classic .compactTrackListItem.clickToPlay.active .compactTrackListItem__additional, | |
| .sc-classic .compactTrackListItem.clickToPlay:hover .compactTrackListItem__additional, | |
| .sc-classic .compactTrackListItem.clickToPlay:focus .compactTrackListItem__additional, | |
| .sc-classic .trackItem:not(.m-disabled).hover .trackItem__additional, | |
| .sc-classic .trackItem:not(.m-disabled).active .trackItem__additional { | |
| background: #0a0a0a; | |
| background: linear-gradient(to right, rgba(13, 13, 13, 0.1), #0a0a0a 17px) | |
| } | |
| .sc-classic .createPlaylistSuggestion__addContainer { | |
| background: linear-gradient(to right, rgba(17, 17, 17, 0.1), #111 20px) | |
| } | |
| .sc-classic .truncatedAudioInfo.m-overflow.m-collapsed .truncatedAudioInfo__wrapper::after { | |
| background: #111; | |
| background: linear-gradient(rgba(17, 17, 17, 0), rgba(17, 17, 17, 0.5) 90%, #111) | |
| } | |
| .sc-snippet-badge-grey { | |
| border-color: #333 | |
| } | |
| .sc-classic .soundBadge__additional { | |
| background: #111; | |
| background: linear-gradient(to right, rgba(17, 17, 17, 0.1), #111 17px) | |
| } | |
| .image__whiteOutline .image__full { | |
| border-color: #111 | |
| } | |
| .l-footer.standard, | |
| .sc-classic .l-fixed-top-one-column > .l-top, | |
| .sc-classic .sound__soundActions { | |
| background: #111 | |
| } | |
| .sc-buylink-itunes:before, | |
| .license__icon { | |
| filter: invert(1) | |
| } | |
| .sc-classic .repostOverlay__container { | |
| background-color: #111; | |
| border-color: #1a1a1a | |
| } | |
| .repostOverlay__youReposted { | |
| color: #ccc | |
| } | |
| .sc-ministats-small.sc-ministats-reposts.repostOverlay__messageRepostIcon:before { | |
| filter: invert(1) | |
| } | |
| .sc-classic .listenEngagement { | |
| border-color: #111; | |
| box-shadow: 0 1px 0 0 #1c1c1c | |
| } | |
| .sc-classic .commentForm__wrapper { | |
| background: #0a0a0a; | |
| border-color: #1a1a1a | |
| } | |
| .sc-classic .commentForm__input { | |
| background: #111; | |
| border-color: #1a1a1a | |
| } | |
| .sc-classic .commentForm.m-active .commentForm__wrapper { | |
| background: #1a1a1a; | |
| border-color: #333 | |
| } | |
| .sc-classic .commentItem.m-creatorComment, | |
| .sc-classic .commentFormDisabled { | |
| background-color: #0a0a0a | |
| } | |
| .sc-classic .commentForm.m-small.m-active .commentForm__input { | |
| border-color: #333 !important | |
| } | |
| .commentItem__body, .commentItem__username, .commentItem__usernameLink, .commentItem__usernameLink:hover, .commentItem__usernameLink:visited, .commentItem__replyButton, .commentItem__replyButton:hover, .commentItem__replyButton:visited { | |
| color: #ccc | |
| } | |
| .commentItem__createdAt, .commentItem__separator, .commentItem__timestamp { | |
| color: #999 | |
| } | |
| .compact__bubble { | |
| background-color: #111 | |
| } | |
| .compact__bubble:before { | |
| border-top-color: #111 | |
| } | |
| .sc-classic .playbackTimeline__progressBackground { | |
| background-color: #333 | |
| } | |
| .sc-classic .volume.expanded .volume__sliderWrapper { | |
| border-color: #333 | |
| } | |
| .sc-classic .volume__sliderWrapper:before { | |
| border-color: transparent transparent #333 #333 | |
| } | |
| .sc-classic .volume__sliderWrapper:after { | |
| border-color: transparent transparent #0a0a0a #0a0a0a | |
| } | |
| .sc-classic .queue { | |
| box-shadow: 0 0 4px rgba(100, 100, 100, 0.25) | |
| } | |
| .sc-classic .queue, | |
| .sc-classic .queue__itemWrapper { | |
| background-color: #111 | |
| } | |
| .sc-classic .queueItemView:hover, | |
| .sc-classic .queueItemView.m-active { | |
| background: #070707 | |
| } | |
| .sc-classic .queueItemView:hover.m-active { | |
| background: #0a0a0a | |
| } | |
| .sc-classic .queue__panel { | |
| border-bottom-color: #1a1a1a | |
| } | |
| .sc-classic .queue__hide:focus, | |
| .sc-classic .queue__hide:hover, | |
| .sc-classic .queue__hide { | |
| background-color: transparent !important; | |
| filter: invert(0.85) | |
| } | |
| .sc-classic .queueItemView__more.sc-button-small.sc-button-more:before { | |
| filter: invert(0.85) | |
| } | |
| .sc-classic .queueFallback__stationMode { | |
| border-top-color: #1a1a1a | |
| } | |
| .sc-classic .queue__itemsHeight { | |
| background-image: none !important | |
| } | |
| .removeFromNextUp, | |
| .removeFromNextUp:hover { | |
| background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0Jz48cGF0aCBmaWxsPScjZmZmJyBmaWxsLXJ1bGU9J25vbnplcm8nIGQ9J00xNS41IDkuMjA1bC0uNzA1LS43MDVMMTIgMTEuMjk1IDkuMjA1IDguNWwtLjcwNS43MDVMMTEuMjk1IDEyIDguNSAxNC43OTVsLjcwNS43MDVMMTIgMTIuNzA1bDIuNzk1IDIuNzk1LjcwNS0uNzA1TDEyLjcwNSAxMnonLz48L3N2Zz4=) | |
| } | |
| .sc-classic .playControls__inner, | |
| .sc-classic .playControls__bg { | |
| background-color: #0a0a0a; | |
| border-top-color: #2b2b2b | |
| } | |
| .skipControl__previous, | |
| .playControl, | |
| .playControl.playing, | |
| .skipControl__next, | |
| .sc-classic .volume__button, | |
| .sc-ministats-small.sc-ministats-sounds:before, | |
| .shuffleControl::before, | |
| .repeatControl.m-none, | |
| .playbackSoundBadge:not(.m-queueVisible) .playbackSoundBadge__showQueue, | |
| .sc-classic .playControls__castControl > #castbutton { | |
| filter: invert(0.85) | |
| } | |
| .sc-classic .volume__sliderWrapper { | |
| background-color: #0a0a0a | |
| } | |
| .sc-toggle { | |
| border-color: #1a1a1a; | |
| background: #1a1a1a | |
| } | |
| .sc-toggle-handle { | |
| background: #111 | |
| } | |
| .sc-classic .playbackTimeline__duration, | |
| .sc-classic .compactTrackListItem__content, | |
| .sc-classic .compactTrackListItem__number, | |
| .sc-classic .compactTrackListItem__trackTitle, | |
| .sc-classic .queueItemView__title { | |
| color: #ccc | |
| } | |
| .sc-classic .playbackSoundBadge__titleLink:hover, | |
| .sc-classic .playbackSoundBadge__titleLink:focus, | |
| .sc-classic a.playbackSoundBadge__lightLink:hover, | |
| .sc-classic a.playbackSoundBadge__lightLink:focus { | |
| color: white | |
| } | |
| .g-dark textarea, | |
| .g-dark select, | |
| .g-dark input[type="text"], | |
| .g-dark input[type="password"], | |
| .g-dark input[type="search"] { | |
| color: #999; | |
| background: #1a1a1a | |
| } | |
| .g-dark input[type="search"]:focus { | |
| background: #111 | |
| } | |
| .frontContent__actions input[type="search"], | |
| .frontContent__actions input[type="search"]:focus { | |
| background: #0a0a0a | |
| } | |
| textarea, | |
| select, | |
| input { | |
| background: #111; | |
| border-color: #333 | |
| } | |
| .sc-input, | |
| .sc-select { | |
| border-color: #333 | |
| } | |
| .sc-radio-radio { | |
| background-color: #0a0a0a; | |
| border-color: #3d3d3d | |
| } | |
| .sc-radio-input:checked + .sc-radio-radio { | |
| box-shadow: inset 0 0 0 2px #0a0a0a | |
| } | |
| .sc-radio-input:checked:focus + .sc-radio-radio { | |
| box-shadow: inset 0 0 0 3px #0a0a0a | |
| } | |
| .sc-radio-input:disabled + .sc-radio-radio, | |
| .sc-radio:hover .sc-radio-input:disabled + .sc-radio-radio { | |
| background-color: #1a1a1a; | |
| border-color: #333 | |
| } | |
| textarea:focus, | |
| select:focus, | |
| input[type="text"]:focus, | |
| input[type="email"]:focus, | |
| input[type="tel"]:focus, | |
| input[type="url"]:focus, | |
| input[type="date"]:focus, | |
| input[type="password"]:focus, | |
| input[type="search"]:focus, | |
| .sc-classic .tokenInput.focused .tokenInput__wrapper { | |
| border-color: #4d4d4d | |
| } | |
| .sc-button:not(.sc-button-play):not(.sc-button-cta):not(.g-button-transparent-inverted):not(.sc-button-active):not(.sc-button-selected):not(.sc-button-nostyle):not(.sc-button-follow.m-boldIcon):not(.playbackSoundBadge__like):not(.premiumContent__button):not(.premiumContent__hint):not(.sc-button-transparent):not(.hintButton) { | |
| border-color: #1a1a1a; | |
| background-color: #111; | |
| color: #ccc | |
| } | |
| .sc-button-active:not(.sc-button-nostyle):not(:hover):not(.sc-button-transparent), | |
| .sc-button-selected:not(.sc-button-nostyle):not(.playbackSoundBadge__like):not(:hover):not(.sc-button-transparent):not(.sc-button-follow.m-boldIcon) { | |
| border-color: #1a1a1a; | |
| background-color: #111 | |
| } | |
| .sc-button-active:hover:not(.sc-button-transparent):not(.hintButton), | |
| .sc-button-selected:hover:not(.sc-button-transparent):not(.hintButton) { | |
| background-color: #111 | |
| } | |
| .sc-button:hover:not(.sc-button-active):not(.sc-button-selected):not(.sc-button-follow.sc-button-medium):not(.sc-button-insights):not(#authorize):not(.premiumButton):not(.premiumContent__button):not(.sc-button-transparent), | |
| .sc-button:focus:not(.sc-button-active):not(.sc-button-selected):not(.sc-button-follow):not(#authorize):not(.sc-button-transparent), | |
| .sc-button-focus:not(.sc-button-active):not(.sc-button-selected) { | |
| color: #ccc; | |
| border-color: #333 | |
| } | |
| .sc-button-small:not(.sc-button-facebook):not(.sc-button-google):not(.sc-button-selected):not(.sc-button-active):not(.sc-button-nostyle):not(.sc-button-follow):not(.playButton):before, | |
| .sc-button-medium:not(.sc-button-facebook):not(.sc-button-google):not(.sc-button-selected):not(.sc-button-active):not(.sc-button-insights.sc-button-primary):not(.sc-button-follow):before, | |
| .sc-icon-large.sc-icon-check, | |
| .g-button-remove, | |
| .compactUpload__cancel, | |
| .featureHeader__closeButton { | |
| filter: invert(1) | |
| } | |
| .sc-button-selected:before, | |
| .sc-button-active:before, | |
| .sc-button-small.sc-button-play:before, | |
| .sc-button-small.sc-button-lightfg:before, | |
| .sc-button-medium.sc-button-lightfg:before { | |
| filter: none | |
| } | |
| .sc-button-lightfg.sc-button-transparent:before { | |
| filter: none !important | |
| } | |
| .sc-classic .moreActions__button, | |
| .sc-classic .moreActions__button:not(:disabled), | |
| .sc-classic .moreActions__link { | |
| background-color: #111 | |
| } | |
| .sc-classic .moreActions__button:hover, | |
| .sc-classic .moreActions__button:focus:not(:disabled), | |
| .sc-classic .moreActions__button:hover:not(:disabled), | |
| .sc-classic .moreActions__link:hover, | |
| .sc-classic .moreActions__button:focus { | |
| background-color: #0a0a0a | |
| } | |
| .sc-classic .moreActions__button:not(:last-child), | |
| .sc-classic .moreActions__link { | |
| border-bottom-color: #1a1a1a | |
| } | |
| .sc-classic .moreActions { | |
| border-color: #1a1a1a; | |
| background: #111 | |
| } | |
| .sc-classic .moreActions__group:not(:first-child) { | |
| border-top-color: #1a1a1a | |
| } | |
| .sc-button.sc-button-translucent:not(.sc-button-cta) { | |
| background-color: rgba(0, 0, 0, 0.8) | |
| } | |
| .sc-button.sc-button-translucent:not(.sc-button-cta):hover, | |
| .sc-button.sc-button-translucent:not(.sc-button-cta):focus, | |
| .sc-button.sc-button-translucent.sc-button-active:not(.sc-button-cta) { | |
| background-color: black | |
| } | |
| .sc-classic .textfield__clear { | |
| background: #1a1a1a | |
| } | |
| .sc-classic .textfield__clear:hover { | |
| background: #333 | |
| } | |
| .gritter-close, | |
| .mobileApps__dismiss { | |
| filter: invert(0.93) | |
| } | |
| .sc-classic .linkMenu { | |
| box-shadow: 0 1px 8px rgba(150, 150, 150, 0.2); | |
| background-color: #111 | |
| } | |
| .sc-tag, | |
| .sc-tag:visited { | |
| background: #3d3d3d; | |
| border-color: #4d4d4d; | |
| color: #ddd | |
| } | |
| .sc-icon-large.sc-icon-sound-dark, | |
| .sc-icon-large.sc-icon-set-dark { | |
| filter: invert(1) | |
| } | |
| .sc-classic .sc-border-light-right, | |
| .sc-classic .ownActivity.large .ownActivity__user, | |
| .sc-classic .l-listen-wrapper .l-about-rows { | |
| border-right-color: #1c1c1c | |
| } | |
| .l-oscp > .l-sidebar, | |
| .sc-border-light-left { | |
| border-left-color: #1c1c1c | |
| } | |
| .sc-border-light-bottom, | |
| .sc-classic .g-tabs, | |
| .sc-classic .g-modal-title-h1, | |
| .sc-classic .g-form-section-head, | |
| .sc-classic .collection.m-overview .collection__section:not(:last-child), | |
| .sc-classic .searchTitle__text, | |
| .chartsMain_listHeader, | |
| .statsOverview__main:before, | |
| .statsOverview__top:before, | |
| .sc-border-dark-bottom, | |
| .selectionModule, | |
| .sc-classic .mixedSelectionModule { | |
| border-bottom-color: #1c1c1c | |
| } | |
| .sc-border-light-top, | |
| .currentPlan__noActivity, | |
| .subscriptions__noActivity { | |
| border-top-color: #1c1c1c | |
| } | |
| .paging-eof:before { | |
| filter: invert(0.935) | |
| } | |
| .tabs__heading { | |
| border-bottom-color: #1a1a1a | |
| } | |
| .chartTracksEnd { | |
| border-top-color: #1a1a1a | |
| } | |
| .sc-classic .modal__modal, | |
| .sc-classic .audibleEditForm__form, | |
| .sc-classic .tabs__tabs, | |
| .sc-classic .tabs__headingContainer, | |
| .sc-classic .tagInput__wrapper, | |
| .sc-classic .g-modal-section, | |
| .sc-classic .tokenInput__wrapper, | |
| .localeSelectorContent { | |
| background: #111 | |
| } | |
| .sc-classic .tokenInput__wrapper { | |
| border: 1px solid #333 | |
| } | |
| .sc-classic .recipientChooser .tokenInput__wrapper { | |
| background-color: #111 | |
| } | |
| .embedPanel__tabLink, | |
| .embedPanel__upsellTabLink { | |
| background-color: #1a1a1a | |
| } | |
| .sc-classic .composeMessage__bottomWrapper { | |
| border-color: #333 | |
| } | |
| .sc-classic .modal.modalWhiteout { | |
| background-color: rgba(0, 0, 0, 0.9) | |
| } | |
| .sc-classic .modal.modalWhiteout > .modal__closeButton { | |
| filter: invert(1) | |
| } | |
| .sc-classic .permalinkTextfield__input:disabled { | |
| color: #ccc | |
| } | |
| .sc-classic .editTrackItem__additional { | |
| background: #111; | |
| background: linear-gradient(to right, rgba(0, 0, 0, 0.1), #111 17px) | |
| } | |
| .tokenInput__token { | |
| background: #0a0a0a; | |
| border-color: #1a1a1a | |
| } | |
| .laiFvd { | |
| background-color: rgba(6, 6, 6, 0.9) | |
| } | |
| .dfeCma { | |
| color: #ccc | |
| } | |
| .fnCoOQ { | |
| background-color: #111 | |
| } | |
| .lhoFxS { | |
| filter: invert(1) | |
| } | |
| .sc-classic .dialog, | |
| .sc-classic .dialog__arrow { | |
| border-color: #333; | |
| background: #111 | |
| } | |
| .sc-classic .gritter-item-wrapper { | |
| color: #ccc; | |
| background: #111; | |
| box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 2px black; | |
| border-color: #333 | |
| } | |
| .callout__bubble, | |
| .callout__bubble::before { | |
| background-color: #111 | |
| } | |
| .callout__captionBody { | |
| color: #999 | |
| } | |
| #onetrust-consent-sdk #onetrust-banner-sdk { | |
| background-color: #0c0c0c | |
| } | |
| #onetrust-consent-sdk #onetrust-pc-btn-handler, | |
| #onetrust-consent-sdk #onetrust-pc-btn-handler.cookie-setting-link { | |
| color: white; | |
| border-color: white; | |
| background-color: #0c0c0c | |
| } | |
| #onetrust-banner-sdk #onetrust-pc-btn-handler.cookie-setting-link { | |
| background-color: #111; | |
| border-color: #0c0c0c | |
| } | |
| #onetrust-banner-sdk #onetrust-policy-text, | |
| #onetrust-banner-sdk .ot-dpd-desc, | |
| #onetrust-banner-sdk .ot-b-addl-desc { | |
| color: white | |
| } | |
| #onetrust-consent-sdk #onetrust-accept-btn-handler, | |
| #onetrust-banner-sdk #onetrust-reject-all-handler { | |
| background-color: white; | |
| border-color: white; | |
| color: #111 | |
| } | |
| #onetrust-banner-sdk #onetrust-accept-btn-handler, | |
| #onetrust-banner-sdk #onetrust-reject-all-handler { | |
| border-color: #0c0c0c | |
| } | |
| .sc-classic .uploadMain__chooserContainer, | |
| .sc-classic .uploadMain__foot, | |
| .activeUpload__form, | |
| .activeUpload__shareContainer, | |
| .sc-classic .quotaMeterWrapper { | |
| background-color: #111 | |
| } | |
| .suggestedTags__listItem.selected { | |
| background-color: #0a0a0a | |
| } | |
| .suggestedTags { | |
| background-color: #111; | |
| border-color: #333 | |
| } | |
| .creatorsNavigation__onSoundCloudLink { | |
| color: #333 !important; | |
| filter: invert(1) | |
| } | |
| .progressBar__outer { | |
| background-color: #1a1a1a | |
| } | |
| .blockCheckbox__icon { | |
| filter: invert(1) hue-rotate(180deg) | |
| } | |
| .sc-classic .uploadMain__title { | |
| color: #ccc | |
| } | |
| .uploadMain.hasActiveUploads .uploadMain__chooserContainer { | |
| border-color: #1c1c1c | |
| } | |
| .quotaMeter__dropdownButton:after { | |
| filter: invert(0.5) | |
| } | |
| .uploadLoggedOut__header.m-eu { | |
| background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjQwIDYzIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzExMX08L3N0eWxlPjwvZGVmcz48cG9seWdvbiBjbGFzcz0iY2xzLTEiIHBvaW50cz0iMTI0MCAwIDAgNjMgMTI0MCA2MyIvPjwvc3ZnPgo=) 100% 100%/1240px 63px no-repeat, url(https://a-v2.sndcdn.com/assets/images/img-upload-hero-eu-42a9dcf5.jpg) 100% 100%/1240px 460px no-repeat | |
| } | |
| .uploadLoggedOut__testimonials { | |
| background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjQwIDYzIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzExMX08L3N0eWxlPjwvZGVmcz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0wIDYzTDEyNDAgLjU5VjBMMCAuNTdWNjN6IiAvPjwvc3ZnPgo=) 0 0 no-repeat, url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjQwIDYzIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzExMX08L3N0eWxlPjwvZGVmcz48cG9seWdvbiBjbGFzcz0iY2xzLTEiIHBvaW50cz0iMTI0MCAwIDAgNjMgMTI0MCA2MyIvPjwvc3ZnPgo=) 100% 100%/1240px 63px no-repeat, #070707 | |
| } | |
| .uploadLoggedOut__testimonialListItem { | |
| background: #111 | |
| } | |
| .sc-classic .conversation__actions { | |
| background: #111; | |
| box-shadow: 0 1px 0 #111 | |
| } | |
| .spotlightResults { | |
| background-color: #111 | |
| } | |
| .sc-classic .inboxItem:hover, | |
| .sc-classic .inboxItem:focus, | |
| .sc-classic .inboxItem.unread, | |
| .sc-classic .inboxItem.active, | |
| .sc-classic .inbox__item:before, | |
| .spotlightResults__item.selected { | |
| background-color: #0a0a0a | |
| } | |
| .sc-classic .conversation__form { | |
| border-top-color: #1a1a1a | |
| } | |
| .composeMessage__searchViewWrapper::after { | |
| background: rgba(17, 17, 17, 0.8) | |
| } | |
| .suggestedUsers { | |
| background-color: #0a0a0a; | |
| color: #999 | |
| } | |
| .suggestedUsers__listItem.selected { | |
| color: #ccc; | |
| background-color: #333 | |
| } | |
| .sc-classic .composeTextfield .textfield__input, | |
| .sc-classic .conversationMessage__body { | |
| color: #999 | |
| } | |
| .userAudibleSearchResults { | |
| background-color: #111 | |
| } | |
| .userAudibleSearchResults .loading { | |
| filter: invert(1) !important | |
| } | |
| .userAudibleSearchResultItem { | |
| color: #999 !important | |
| } | |
| .userAudibleSearchResults__item.selected { | |
| background-color: #0a0a0a | |
| } | |
| .trackManager__upsellWrapper, | |
| .audibleEditForm__audio { | |
| background-color: #111 | |
| } | |
| .soundBadge:hover:not(.compact), | |
| .soundBadge.hover:not(.compact), | |
| .soundBadge.selected:not(.compact), | |
| .soundBadge.active:not(.compact) { | |
| background-color: #0a0a0a | |
| } | |
| .soundBadge:hover:not(.compact) .soundBadge__additional, | |
| .soundBadge.hover:not(.compact) .soundBadge__additional, | |
| .soundBadge.selected:not(.compact) .soundBadge__additional, | |
| .soundBadge.active:not(.compact) .soundBadge__additional { | |
| background: #0d0d0d; | |
| background: linear-gradient(to right, rgba(13, 13, 13, 0.1), #0a0a0a 17px) | |
| } | |
| .g-upsell-container { | |
| background: #0a0a0a; | |
| border-color: #1a1a1a | |
| } | |
| .sc-button:disabled, | |
| .sc-button:disabled:hover, | |
| .sc-button-disabled, | |
| .sc-button-disabled:hover, | |
| .sc-button-disabled:focus, | |
| .sc-button.sc-pending, | |
| .sc-button.sc-pending:hover, | |
| .sc-button.sc-pending:focus { | |
| background-color: #0a0a0a; | |
| border-color: #1a1a1a | |
| } | |
| .sc-button-dropdown.sc-button-dropdown-plain:not(.sc-button-disabled):not(:disabled) { | |
| border-color: #333; | |
| color: #ccc | |
| } | |
| .sc-button-dropdown.sc-button-dropdown-plain:hover:not(.sc-button-disabled):not(:disabled) { | |
| border-color: #555 | |
| } | |
| .sc-button-dropdown:focus:not(.sc-button-disabled):not(:disabled) { | |
| box-shadow: 0 0 0 4px #1a1a1a | |
| } | |
| .editTracksDropdown { | |
| background-color: #111 | |
| } | |
| .editTrackModalButton:not(:disabled):hover, | |
| .editTrackModalButton:not(:disabled):focus { | |
| background-color: #0a0a0a | |
| } | |
| .sc-border-light { | |
| border-color: #1c1c1c | |
| } | |
| .stats__empty { | |
| background: #111; | |
| color: #999 | |
| } | |
| .stats__pager, | |
| .ui-datepicker .ui-datepicker-prev, | |
| .ui-datepicker .ui-datepicker-next, | |
| .sc-icon-large.sc-stats-icon:not(.sc-stats-icon-play-orange):not(.sc-stats-icon-like-orange):not(.sc-stats-icon-comment-orange):not(.sc-stats-icon-repost-orange):not(.sc-stats-icon-download-orange):not(.sc-stats-icon-rss-orange) { | |
| filter: invert(1) | |
| } | |
| .stats__expand { | |
| background-color: #111; | |
| box-shadow: 0 -3px 6px -5px rgba(255, 255, 255, 0.2) | |
| } | |
| .statsDateSelect { | |
| background: #111 | |
| } | |
| .stats__expand:hover, | |
| .stats__expand:focus { | |
| border-color: #333 | |
| } | |
| .statsBarChart__bottom { | |
| stroke: #1c1c1c | |
| } | |
| .stats__xAxis text { | |
| fill: #ccc | |
| } | |
| .statsDateSelect__calendar .ui-datepicker td a, | |
| .userStatsLegend__item.active { | |
| color: #ccc | |
| } | |
| .statsDateSelect__calendar .ui-datepicker-calendar .ui-state-disabled, | |
| .statsDateSelect__calendar .ui-datepicker-calendar .ui-state-disabled:hover { | |
| color: #5b5b5b | |
| } | |
| .statsDateSelect__calendar .ui-datepicker-current-day, | |
| .statsDateSelect__calendar td:hover { | |
| background: #171a20 | |
| } | |
| .statsDateSelect__rangeTitle, | |
| .statsDateSelect__range { | |
| border-bottom-color: #171a20 | |
| } | |
| .topStatsModule__item, | |
| .topStatsModule__item:last-child, | |
| .topStatsItemPlaceholder.track .topStatsItemPlaceholder__visual, | |
| .sc-border-dark, | |
| .sc-border-dark-top { | |
| border-color: #1a1a1a | |
| } | |
| .topStatsItemPlaceholder__text::before, | |
| .topStatsItemPlaceholder__text::after, | |
| .topStats__wrapperEligible:hover, | |
| .topStats__wrapperEligible:focus { | |
| background-color: #0a0a0a | |
| } | |
| .topStats__wrapperEligible:focus .topStatsItemPlaceholder__text::before, | |
| .topStats__wrapperEligible:focus .topStatsItemPlaceholder__text::before, | |
| .topStats__wrapperEligible:hover .topStatsItemPlaceholder__text::before, | |
| .topStats__wrapperEligible:hover .topStatsItemPlaceholder__text::after, | |
| .dateSelectStats__datepicker .ui-datepicker-today a { | |
| background-color: #1a1a1a | |
| } | |
| .sc-background-white, | |
| .dateSelectStats__datepicker { | |
| background-color: #111 | |
| } | |
| .statsOverview__separator { | |
| background-color: #0a0a0a | |
| } | |
| .statsDropbarTabs__icon.g-stats-icon:not(.g-stats-icon-orange) { | |
| filter: invert(1) | |
| } | |
| .statsBarChart [data-rank=rank-0] .inactive { | |
| fill: #2a2a2a | |
| } | |
| .g-nav-item-search:not(.active) > .g-nav-link, | |
| .g-nav-item-sounds:not(.active) > .g-nav-link, | |
| .g-nav-item-people:not(.active) > .g-nav-link, | |
| .g-nav-item-sets:not(.active) > .g-nav-link { | |
| filter: invert(1) | |
| } | |
| .premiumProductInfo.m-highlighted { | |
| background-color: #0a0a0a | |
| } | |
| .premiumContent__fixedWrapper { | |
| background-color: #070707 | |
| } | |
| .premiumContent__fixedBackground { | |
| background-color: #070707 !important | |
| } | |
| .premiumProductInfo { | |
| border-color: #1a1a1a | |
| } | |
| .premiumProductInfo__bestValueRibbon, | |
| .premiumProductInfo__buyButton > .sc-button { | |
| background: #111 | |
| } | |
| .products__cell.price { | |
| background-color: #111 | |
| } | |
| .products__cell { | |
| border-color: #333 | |
| } | |
| .sc-classic .l-fluid-fixed .l-user-main { | |
| /* seems like this is a bug? missing on SC without any userstyles */ | |
| padding-top: 20px; | |
| } | |
| } | |
| @-moz-document url-prefix("https://insights-ui.soundcloud.com/") { | |
| :root { | |
| --raven: #ccc; | |
| --charcoal: #999; | |
| --ash: #666; | |
| --platinum: #ccc; | |
| --silver: #1c1c1c; | |
| --mist: #1c1c1c; | |
| --snow: #f8f8f8; | |
| --white: #111; | |
| --black: #fff; | |
| --cod: #111; | |
| --fog: hsla(0, 0, 5%, 0.3); | |
| --smoke: rgba(0, 0, 0, 0.8); | |
| --milkglass: rgba(100, 100, 100, 0.1); | |
| --darkmode-1: #201e20; | |
| --darkmode-2: #171517; | |
| --darkmode-3: #121012; | |
| --text-color-main: var(--raven); | |
| --text-color-secondary: var(--charcoal); | |
| --icon-color: var(--charcoal); | |
| --background-color: var(--mist); | |
| --container-background-color: var(--white); | |
| --divider-color-outer: var(--silver); | |
| --divider-color-inner: var(--mist); | |
| --datalist-placeholder-fill-color: var(--mist); | |
| --datalist-placeholder-border-color: var(--silver); | |
| --graph-curve-disabled: var(--ash); | |
| --graph-gradient-disabled: var(--ash); | |
| --graph-marker: var(--silver); | |
| --graph-legend-background: hsla(0, 0, 0, 0.75); | |
| --pills-color: var(--text-color-main); | |
| --pills-inverted-color: var(--white); | |
| --total-counts-background-color: var(--fog); | |
| --secondary-button-border: var(--platinum); | |
| --secondary-button-border-highlighted: var(--ash) | |
| } | |
| } | |
| @-moz-document regexp("http(s)?://(|www.)?soundcloud.com/connect?.*") { | |
| #oauth, | |
| #oauth2_authorization, | |
| body #main-wrapper, | |
| .sessions__formContainer { | |
| background: #111 | |
| } | |
| html, | |
| body, | |
| form, | |
| fieldset, | |
| #oauth #main-wrapper .authorize-text, | |
| #oauth2_authorization #main-wrapper .authorize-text { | |
| color: #ccc | |
| } | |
| .userbadge.context { | |
| border-color: #222 | |
| } | |
| } | |
| @-moz-document url-prefix("https://secure.soundcloud.com/web-auth") { | |
| body, | |
| fieldset, | |
| form { | |
| background: #111; | |
| color: #ccc | |
| } | |
| input, | |
| select, | |
| textarea { | |
| background: #111; | |
| border-color: #333 | |
| } | |
| .sc-input { | |
| border-color: #333 | |
| } | |
| button, | |
| input, | |
| select, | |
| textarea { | |
| color: #ccc | |
| } | |
| a.sc-link-dark, | |
| a:hover { | |
| color: #ccc | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment