Last active
December 10, 2015 15:46
-
-
Save mattantonelli/34d012f964520d3e29e0 to your computer and use it in GitHub Desktop.
Pitch Black Stylish theme for Soundcloud with some personal color tweaks. Functional as of 12/9/15.
This file contains hidden or 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
| @namespace url(http://www.w3.org/1999/xhtml); | |
| /*** GENERAL ***/ | |
| html, .social-sign-in-separator span, .readMoreBadge__countWrapper { | |
| background: #000 !important} | |
| body, .site, .dashbox, .listenContent__inner, .sound__soundActions, .l-footer, .activity__sharingNote-container, .commentForm, .commentForm__inputWrapper, .createPlaylist:hover, .createPlaylist.focused, .uploadStatus, .activeUpload__section, .activeUpload__quietTeaser, .activeUpload__blockTable.threeCell, .autoTagger__fields, .sc-background-light, .addToPlaylistTabs .tabs__tabs, .g-modal-section, .addToPlaylistItem__actions, .createPlaylistSuggestion__addContainer, .conversation__actions, .conversation__form, .inbox__item:before, .inboxItem.active, .inboxItem:hover, .g-form-section.highlight:hover, .advancedFields__quietTeaser, .sharePanel .tabs__tabs, .embedPanel__tabLink, .manageSounds__upsellWrapper, .uploadMain__foot, .searchTitle__content { | |
| background: transparent !important} | |
| .commentForm, .commentForm__inputWrapper, .sc-button-group, .sound__footer.sc-border-light-bottom, .header__soundInput, .listenEngagement, .searchTitle__content { | |
| border: none !important} | |
| .conversation__actions, .conversation__form, .listenEngagement { | |
| box-shadow: none !important} | |
| .dashbox, .listenDetails__login, article.whoToFollowModule, .header__goProWrapper, .header__right > a.header__link, .statsBadge__upsell, .editAccessTab__quietTeaser, .stream > .stream__header { | |
| display: none !important} | |
| #flashAudioObject-container { | |
| visibility: hidden !important} | |
| body, .sc-text, .resultCounts, .g-nav-link, h3.conversationBadge__senderName, .sc-type-h3, .conversation .sc-link-dark, .active .trackItem__trackTitle { | |
| color: #BBB !important} | |
| .sc-link-verylight, .sc-text-verylight { | |
| color: #444 !important} | |
| .sc-link-light:hover, .g-nav-item.active > .g-nav-link { | |
| color: #FFF !important} | |
| .sc-link-dark, .dropdownList__loading, .sound__uploadTime, .compactTrackListItem__trackTitle { | |
| color: #666 !important} | |
| .sc-link-dark:hover, .sc-link-verylight:hover, .trackPreviewItem__titleLink:hover, .g-tabs-item:not(.active) .g-tabs-link:hover, .g-link-problem:hover, .activeUpload__sectionTitle, .blockCheckbox__title, .autoTagger__title { | |
| color: #DDD !important} | |
| .userBadge.large .userBadge__title, .userBadge.large .userBadge__usernameLink { | |
| color: #06C !important} | |
| .active .soundTitle__title, .active .compactTrackListItem__trackTitle, .userBadge.large .userBadge__usernameLink:hover, .g-nav-link:hover, .listenInfoTeaser__description a:hover { | |
| color: #F60 !important} | |
| /* | |
| #app h1:not(.sc-type-h2), h1.widgetCustomizationContent__title { | |
| color: #06C !important; | |
| text-shadow: 0 1px #38F; | |
| position: relative} | |
| .g-modal-title-h1 { | |
| color: #DDD !important; | |
| text-shadow: 0 1px #000; | |
| position: relative} | |
| #app h1:not(.sc-type-h2):after, h1.widgetCustomizationContent__title:after, .g-modal-title-h1:after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| height: 100%; | |
| width: 100%; | |
| background: linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,.8))} | |
| #app h1.userNetworkTop__title:after, #app h1.groupNetworkTop__title:after, #app h1.listenNetworkTop__title:after, .g-modal-title-h1:after, #app div.l-front h1:after, #app h1.uploadMain__title:after {background: none} | |
| #app h1.userNetworkTop__title, #app h1.groupNetworkTop__title, #app h1.listenNetworkTop__title, .g-modal-title-h1 {-webkit-mask-image: linear-gradient(#000 40%, rgba(0,0,0,.2)) !important} | |
| #app h1.stream__noticeTitle:after {background: linear-gradient(rgba(17,17,17,0) 40%, #111)} | |
| h1.widgetCustomizationContent__title:after, .g-modal-title-h1:after {background: linear-gradient(rgba(21,21,21,0) 25%, #151515)} | |
| */ | |
| #app h1 { | |
| -webkit-mask-image: linear-gradient(#000 35%, rgba(0,0,0,.2)) !important; | |
| mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICA8bWFzayBpZD0iMSIgbWFza1VuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgbWFza0NvbnRlbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giPg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZyIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgyPSIwIiB5Mj0iMSI+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSJ3aGl0ZSIgb2Zmc2V0PSIwLjM1Ii8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSJ3aGl0ZSIgc3RvcC1vcGFjaXR5PSIwLjIiIG9mZnNldD0iMSIvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnKSIvPg0KICA8L21hc2s+DQo8L3N2Zz4=#1) !important;} | |
| #app h1.header__logo {mask: none !important} | |
| h1.header__logo {background: linear-gradient(#F70 40%, #510) !important; box-shadow: inset 0 0 1px #111, inset 1px 0 #111, inset -1px 0 #111 !important;} | |
| #app h1, #app h1 * { | |
| color: #06C !important; | |
| text-shadow: 0 1px #38F !important} | |
| #app h1 a:hover { | |
| color: #18F !important; | |
| text-shadow: 0 1px #4AF, 0 0 6px #18F !important} | |
| .fullListenHero__title .soundTitle__title { | |
| text-shadow: 0 0 10px #000 !important; | |
| font-family: "Champagne & Limousines","eurofurence light","Interstate","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Garuda,Verdana,Tahoma,sans-serif !important} | |
| .waveform__emptyMessage, .waveform__playHint { | |
| color: #EEE !important; | |
| text-shadow: 0 0 5px !important} | |
| a {text-shadow: 0 0 #000; transition: 0.2s color, text-shadow} | |
| .sc-link-dark:hover, .sc-link-light:hover, .trackPreviewItem__titleLink:hover {text-shadow: 0 0 7px} | |
| ::-moz-selection {background-color: rgba(35,35,35,.7) !important; color: #F60 !important; text-shadow: 0 1px #000 !important} | |
| ::selection {background-color: rgba(35,35,35,.7) !important; color: #F60 !important; text-shadow: 0 1px #000 !important} | |
| :focus {outline: none !important} | |
| .sc-border-light-top, .sc-border-dark-top, .sc-border-light-bottom, .sc-border-dark-bottom, .sc-border-light-right, .sc-border-dark, .sidebarHeader, .commentsThread__item, .ownActivity__user, .userInfo, .userInfo__container, | |
| .archive-title, .page-title, .widget-title, .entry-content th, .comment-content th, .widget-area .widget, .sc-border-light, .newMessageForm.compact, .l-listen-wrapper .l-about-rows { | |
| border-color: #111 !important} | |
| .g-tabs, .g-tabs-item.active, .site-content article, .commentItem.large.isReply, .listenInfoTeaser__separator, .collection.m-overview .collection__section, .conversation__form { | |
| border-color: #333 !important} | |
| .activeUpload__sectionHead, .listenInfoModal__heading, .composeMessage__bottomWrapper { | |
| border-color: #222 !important; | |
| box-shadow: 0 1px #000 !important} | |
| /*** GRAYSCALE | |
| .waveform:not(:hover), .sc-button-play:not(:hover), a:not(:hover) .sc-artwork, .compactTrackListItem:not(.active):not(:hover):not(:focus) .sc-artwork { | |
| filter: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9IjEiPjxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwLjMzMzMgMC4zMzMzIDAuMzMzMyAwIDAgMC4zMzMzIDAuMzMzMyAwLjMzMzMgMCAwIDAuMzMzMyAwLjMzMzMgMC4zMzMzIDAgMCAwIDAgMCAxIDAiLz48L2ZpbHRlcj48L3N2Zz4=#1) !important; | |
| transform: translate3d(0,0,0) !important; | |
| -webkit-filter: grayscale(100%) !important; | |
| -webkit-transform: translate3d(0,0,0) !important; | |
| -webkit-transition: -webkit-filter 0.6s !important} | |
| h1.header__logo {background: transparent !important} | |
| h1.header__logo > a {border: none !important} | |
| ***/ | |
| /*** BUTTONS & CO ***/ | |
| .sc-button:not(.sc-button-play), .sc-buylink, .categoriesButton { | |
| -moz-appearance: none !important; | |
| -webkit-appearance: none !important; | |
| background: #111 !important; | |
| border: 1px solid #292929 !important; | |
| box-shadow: inset 0 0 2px #000 !important; | |
| color: #777 !important; | |
| text-shadow: 0 1px #000 !important; | |
| border-radius: 0 !important; | |
| transition: color, border-color, background-color, ease 0.3s !important} | |
| .sc-button.blockButton {background-color: transparent !important; border: none !important; box-shadow: none !important} | |
| .sc-button.sc-button-selected, .sc-button.uploadButton.sc-button-selected {border-color: #000 !important} | |
| .sc-buylink, .sc-button-small.sc-button-text {padding: 2px 7px !important} | |
| .sc-buylink:before {margin-left: 5px !important} | |
| .sc-buylink:before, .sc-button-medium:not(.sc-button-selected):before {opacity: 0.4} | |
| .sc-button:hover, .sc-buylink:hover, .categoriesButton:hover { | |
| border-color: #444 !important; | |
| color: #999 !important} | |
| .sc-button:active, .sc-buylink:active, .categoriesButton:active { | |
| background-color: #333 !important; | |
| transition-duration: 0.1s !important} | |
| .sc-button-play { | |
| background: #000 !important; | |
| border: 1px solid #F50 !important; | |
| box-shadow: 0 0 5px #920 !important; | |
| transition: ease 0.3s !important} | |
| .sc-button-play:before {margin-top: -1px !important} | |
| .sc-button-play:hover { | |
| border-color: #F71 !important; | |
| box-shadow: 0 0 8px #F60 !important} | |
| .soundTitle.single .soundTitle__playButton .sc-button-large {margin-top: 6px !important} | |
| .sc-toggle { | |
| background: linear-gradient(#222,#111) !important; | |
| border: 2px solid #191919 !important} | |
| .sc-toggle:before {box-shadow: inset 0 0 2px #000 !important} | |
| .sc-toggle-handle { | |
| background: #111 !important; | |
| box-shadow: inset 0 0 2px #000 !important} | |
| input, input[type="checkbox"], input[type="radio"], textarea, .sc-input, input.widgetCustomization__colorInput { | |
| -moz-appearance: none !important; | |
| -webkit-appearance: none !important; | |
| background: #222 !important; | |
| border: 1px solid #292929 !important; | |
| box-shadow: inset 0 0 2px #000 !important; | |
| color: #777 !important; | |
| text-shadow: 0 1px #000 !important; | |
| border-radius: 0 !important; | |
| transition: color, border-color, background-color, ease 0.3s !important} | |
| input[type="checkbox"], input[type="radio"] {min-width: 12px !important; min-height: 12px !important} | |
| input[type="radio"] {border-radius: 20px !important} | |
| input[type="checkbox"]:active:hover, input[type="radio"]:active:hover { | |
| background: #222 !important; | |
| border: 1px solid #292929 !important; | |
| color: #F70 !important} | |
| .tokenInput__input {border: none !important} | |
| input:hover, input:focus, .sc-input:hover, .sc-input:focus, textarea:hover, textarea:focus {background: #333 !important} | |
| input:focus, .sc-input:focus, textarea:focus {color: #AAA !important} | |
| .commentForm .commentForm__input {border-color: #333 !important} | |
| .sc-button.uploadButton { | |
| background: transparent !important; | |
| border-color: #1C1C1C !important; | |
| border-radius: 5px !important; | |
| box-shadow: 0 1px 0 #3E3E3E, inset 0 1px 0 #464646 !important; | |
| padding-top: 1px !important; | |
| height: 25px !important} | |
| .sc-button.uploadButton:hover {box-shadow: 0 1px 0 #3E3E3E, inset 0 0 3px #090909 !important} | |
| .radioGroup__active, .activeUpload__licenseSummary {background-color: #222 !important} | |
| a.shuffleButton { | |
| background-position: 0 0 !important; | |
| color: #DDD !important; | |
| opacity: 0.3} | |
| a.shuffleButton:hover {opacity: 0.6 !important} | |
| a.shuffleButton.active {opacity: 1} | |
| /* WEBKIT CHECKBOX & SELCET FIX */ | |
| @media screen and (-webkit-min-device-pixel-ratio:0) { | |
| input[type="checkbox"]:checked, input[type="radio"]:checked {border-color: #F80 !important} | |
| select { | |
| padding-right: 12px !important; | |
| background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAKCAYAAABrGwT5AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAApSURBVChTYxjiYObMmf+hTBSASxwDoCskWiMMwDSQrBEGyNY4FAADAwDdpBOHzViE2AAAAABJRU5ErkJggg==) rgba(35,35,35,.7) no-repeat right center !important}} | |
| /*** DIALOG, POPUP & CO ***/ | |
| .dialog, .imageLink.zoom, .modal__modal, #ghostery-purple-bubble { | |
| background: #151515 !important; | |
| border: 1px solid #333 !important; | |
| border-radius: 0 !important; | |
| box-shadow: 0 0 10px #000, 0 0 10px #000 !important} | |
| .dialog__arrow { | |
| background: #151515 !important; | |
| border-color: #3C3C3C !important} | |
| #ghostery-purple-bubble * {background: transparent !important} | |
| .g-selectable { | |
| background: linear-gradient(#191919, #141414) !important; | |
| color: #999 !important} | |
| .g-selectable:hover {background: linear-gradient(#222, #1B1B1B) !important} | |
| .g-selectable.g-selected { | |
| background: transparent !important; | |
| color: #555 !important} | |
| .dropdownList { | |
| background: #151515 !important; | |
| border-color: #333 !important} | |
| .dropdownMenu > div, #ui-datepicker-div { | |
| background: #1C1C1C !important; | |
| border-color: #292929 !important; | |
| box-shadow: 0 1px 1px #000 !important; | |
| text-shadow: 0 1px #000 !important} | |
| .dropdownMenu > li:hover, .dropdownMenu li.selected {background-color: rgba(35,35,35,.6) !important; color: #F60 !important} | |
| #suggestionsList li:hover * {color: #F60 !important} | |
| #suggestionsList li > * > * > * > * {color: #555 !important} | |
| .dropdownMenu li.separator {border-bottom: 1px solid #292929 !important} | |
| /* .dropdownMenu li,*/ .dropdownMenu ul.sc-list-nostyle {background: transparent !important; border: none !important} | |
| .userNav__button.selected:before {border-bottom-color: #F60 !important} | |
| .userNav__button.selected:after {border-bottom-color: #000 !important} | |
| .gritter-item-wrapper { | |
| background: linear-gradient(#282828, #1C1C1C) !important; | |
| color: #CCC !important; | |
| text-shadow: 0 1px #000 !important; | |
| border-color: #333 !important; | |
| box-shadow: 0 0 10px #000, 0 0 10px #000, inset 0 0 3px #111 !important} | |
| .gritter-image {top: 0 !important; left: 0 !important} | |
| .modal {background: repeating-linear-gradient(-45deg, rgba(11,11,11,.8), rgba(11,11,11,.8) 60px, rgba(16,16,16,.8) 60px, rgba(16,16,16,.8) 120px) !important} | |
| /* .dialog > .dialog__content > .userRichBadge > .userRichBadge__avatar > .userAvatarBadge.userRichBadge__avatar.sc-media-image.letterbox */ | |
| .userRichBadge .userAvatarBadge__avatar {margin: 0 !important} | |
| /* .dialog.sc-border-box.g-z-index-overlay {padding-bottom: 0 !important} */ | |
| /*** BOTTOM BAR PLAYER ***/ | |
| .playControls__inner {background: #2d2d2d !important} | |
| .playbackTimeline__duration {color: #999 !important;} | |
| .playbackTimeline__progressBackground {background: #999 !important} | |
| .playbackTimeline__progressBackground, .playbackTimeline__progressBar { | |
| box-shadow: 0 0 2px #111 !important; | |
| height: 6px !important; | |
| border-radius: 3px !important; | |
| margin-top: -3px !important} | |
| .playbackTimeline__progressHandle { | |
| box-shadow: 0 0 2px #111, inset 0 0 2px #000 !important; | |
| margin-left: -4px !important; | |
| margin-top: -4px !important} | |
| .playControls .playControls__icon, .playControls .volume__speakerIcon {filter: invert(66.5%) !important; -webkit-filter: invert(66.5%) !important; transition: 0.3s !important} | |
| .playControls .playControls__icon:hover, .playControls .volume__speakerIcon:hover {filter: invert(100%) !important; -webkit-filter: invert(100%) !important} | |
| .volume__sliderWrapper {background: #222 !important; border-color: #2d2d2d !important;} | |
| .volume__sliderWrapper::after {border-color: #222 !important;} | |
| .volume__sliderWrapper::before {border-color: #222 #222 #000 #000 !important;} | |
| /*** CONTENT ***/ | |
| header.header {background: linear-gradient(#222, #2D2D2D) !important; box-shadow: 0 4px 8px #000 !important; height: 46px !important} | |
| .left .header__navMenu > li > a {box-shadow: inset 0 0 1px rgba(99,99,99,0.5) !important} | |
| .sc-ministats-small.sc-ministats-sounds:not(.sc-ministats-inverted)::before, .g-tabs-item.active .g-tabs-link, .sc-buylink:before, .sc-button-medium:not(.sc-button-selected):before, .sc-button-small:not(.sc-button-selected):not(.sc-button-play):before, .sc-button-small.sc-button-reply:before { | |
| filter: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9IjEiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+PGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9Ii0xIDAgMCAwIDEgMCAtMSAwIDAgMSAwIDAgLTEgMCAxIDAgMCAwIDEgMCIvPjwvZmlsdGVyPjwvc3ZnPg==#1) !important; | |
| filter: invert(100%) !important; | |
| transform: translate3d(0,0,0) !important; | |
| -webkit-filter: invert(100%) !important; | |
| -webkit-transform: translate3d(0,0,0) !important} | |
| .sc-button-small:not(.sc-button-selected):not(.sc-button-play):before {opacity: 0.4 !important} | |
| /* .waveform__layer .sceneLayer:nth-child(1) {opacity: 0.6 !important} */ | |
| .fullListenHero__foreground {background: rgba(0,0,0,0.5) !important} | |
| .userNetworkTop__inner, .listenNetworkTop__inner, .groupNetworkTop__inner, .search__headerInner, .searchTitle__content, .l-fixed-top-one-column > .l-top { | |
| background: linear-gradient(#000, rgba(0,0,0,.95), rgba(0,0,0,.82)) !important; | |
| box-shadow: 0 6px 8px #000 !important} | |
| /* .peopleHeader__tab, .sc-ministats-group .sc-ministats, .tagInput .tokenInput__tokenRemove, .tagInput__genreRemove, .tagInput__addTag, .listenInfoModal__extras.hasStats .listenInfoModal__duration { | |
| border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAFCAQAAAAujU4UAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAVSURBVAjXY/jPwBC6iiH0P4j8zwAAKDwFUcVg7GcAAAAASUVORK5CYII=) 0 1 0 0 !important} | |
| .g-tabs-link { | |
| border: none !important} | |
| .g-tabs-item.active { | |
| background: #000 !important; | |
| border-bottom-color: #000 !important; | |
| margin-top: 1px !important} | |
| .g-tabs-item.active .g-tabs-link { | |
| color: #222 !important; | |
| text-shadow: 0 0 7px #000 !important} */ | |
| .listenNetworkInfo .g-tabs:before { | |
| background: linear-gradient(to left, #333, #000); | |
| width: 20px; | |
| height: 1px; | |
| left: 10px; | |
| bottom: 0px; | |
| position: absolute} | |
| /* #content .listenNetworkInfo:after { | |
| background: linear-gradient(to left, #333, #F00); | |
| width: 20px; | |
| height: 2px; | |
| left: 0px; | |
| bottom: 0px; | |
| position: absolute} | |
| .groupNetworkTop__inner {padding-bottom: 0 !important; height: 96px !important;} | |
| .groupNetworkTop__inner .g-tabs:before {left: -20px} | |
| .userNetworkTop__inner {padding-right: 0px !important;} | |
| .sidebarHeader {border-bottom: 1px solid #111 !important} */ | |
| .tabs li.current a { | |
| background: #000 !important; | |
| color: #DDD !important; | |
| box-shadow: inset 0 6px 4px -6px #999, inset 6px 0 4px -6px #777, inset -6px 0 4px -6px #777 !important} | |
| .soundBadge { | |
| background: transparent !important; | |
| border-color: transparent !important; | |
| border-radius: 0 !important} | |
| .soundBadge__additional, .trackItemWithEdit__additional, .compactTrackListItem__additional, .commentItem__controls, .trackItem__additional { | |
| background: linear-gradient(to right, rgba(0,0,0,.1), rgba(0,0,0,1) 17px) !important} | |
| .soundBadge:not(.active):not(.compact):hover .soundBadge__additional, .trackItem.hover:not(.active) .trackItem__additional, .trackItemWithEdit.hover, .hover .trackItemWithEdit__additional, .compactTrackListItem:hover .compactTrackListItem__additional, .commentsList__item:hover { | |
| background: #111 !important; | |
| box-shadow: inset 0 20px 20px -20px #000, inset 0 -20px 20px -20px #000 !important} | |
| .active .soundBadge__additional, .active .compactTrackListItem__additional, .active .trackItem__additional, .active .trackItemWithEdit__additional, .commentItem:hover .commentItem__controls { | |
| background: none !important} | |
| .soundBadge.active, .compactTrackListItem.active, .trackItem.active, .trackItemWithEdit.active, .carousel.active, .carousel.hover, .uploadMain__chooserContainer, .activeUpload__form { | |
| background: repeating-linear-gradient(-45deg, #151515, #151515 20px, #111 20px, #111 40px) !important; | |
| border-color: #151515 !important; | |
| box-shadow: inset 0 0 20px #000 !important} | |
| .soundBadge.active.compact {margin-right: -6px !important; margin-left: 6px !important} | |
| .uploadStatus.complete .uploadStatus__progress {border-color: #151515 !important} | |
| .soundBadge:not(.active):not(.compact):hover, .trackList__item.sc-pointer:hover, .compactTrackListItem:hover, .compactTrackListItem:not(.active):focus, .compactTrackListItem:not(.active):active, .compactTrackList__moreLink:hover, .compactTrackList__moreLink:focus, .trackItem.hover:not(.active) { | |
| background: #111 !important; | |
| box-shadow: inset 0 0 20px #000 !important} | |
| .g-type-shrinkwrap-inline, .g-type-shrinkwrap-inline:hover, .g-type-shrinkwrap-inline:visited, .g-type-shrinkwrap-block, .g-type-shrinkwrap-block:hover, .g-type-shrinkwrap-block:visited { | |
| background: rgba(0,0,0,.75) !important; | |
| box-shadow: 4px 0 rgba(0,0,0,.75), -4px 0 rgba(0,0,0,.75) !important} | |
| /* .soundTitle__usernameHeroContainer .soundTitle__username {color: #BBB !important} */ | |
| .listenContent__parentLink, .sortable-placeholder, .announcement, .stream__notice, .commentFormDisabled, .autoTagger__wrapper, .newItemNotification { | |
| background: #111 !important; | |
| border: 2px dashed #333 !important; | |
| box-shadow: inset 0 0 20px #000 !important} | |
| .listenContent__parentLink, .announcement {border-top: none !important} | |
| .commentFormDisabled {border-width: 1px !important} | |
| .sc-tag { | |
| background: #333 !important; | |
| border-color: #393939 !important; | |
| box-shadow: inset -1px 1px rgba(0,0,0,.15) !important} | |
| .sc-tag-selected { | |
| background: #DC3F00 !important; | |
| border-color: #DC3F00 !important} | |
| .sc-tag:before {border-color: transparent #333 transparent !important} | |
| .sc-tag-selected:before {border-color: transparent #DC3F00 transparent !important} | |
| .tagInput__inputWrapper:before { | |
| background: none !important; | |
| width: 0 !important; | |
| height: 0 !important; | |
| border: 9px solid !important; | |
| border-left: none !important; | |
| border-color: transparent #393939 transparent !important} | |
| .sc-tag:after { | |
| background: #000 !important; | |
| border-color: #393939 !important; | |
| box-shadow: 0 0 1px rgba(0,0,0,.5) !important} | |
| .sc-tag-selected:after {border-color: #DC3F00 !important} | |
| .sc-tag:hover {opacity: 0.7 !important} | |
| .sc-label-private, .groupInfo__status.sc-background-orange { | |
| background: repeating-linear-gradient(-45deg, #D50, #D50 6px, #B40 6px, #B40 12px) !important; | |
| border: 1px solid transparent !important; | |
| border-radius: 4px !important; | |
| box-shadow: inset -1px 1px rgba(0,0,0,.15) !important} | |
| .listenInfoTeaser__descriptionFade, .truncatedAudioInfo.m-overflow.m-collapsed .truncatedAudioInfo__wrapper::after {background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)) !important} | |
| .tokenInput__token {background: #2C2C2C !important} | |
| .trackPreview__post {background: #000 !important} | |
| .trackPreview__post:before {background: linear-gradient(to right, transparent, #000) !important} | |
| .progressBar__outer {background-color: #333 !important} | |
| .uploadStatus__upload {border-color: #333 !important} | |
| .tagInput { | |
| background: #222 !important; | |
| border-color: #292929 !important; | |
| border-radius: 0 !important; | |
| border-bottom: none !important;} | |
| .g-form-section-head {border-color: rgba(99,99,99,.1) !important; box-shadow: 0 1px #000 !important} | |
| .g-options-row.three-cell {background: transparent !important} | |
| a.sound__coverArt > .image { | |
| transition: transform 0.6s !important; | |
| -webkit-transition: -webkit-filter 0.6s !important; | |
| -webkit-filter: saturate(1)} | |
| a.sound__coverArt:hover > .image { | |
| transform: perspective(100px) rotateX(-20deg) translate3d(0,7px,0); | |
| -webkit-filter: saturate(5)} | |
| .ownActivity__trackImg {border-color: #111 !important} | |
| .playlist > .sound__coverArt {background: none !important} | |
| .playlist > .sound__coverArt > .image {box-shadow: 0 0 1px rgba(255,255,255,.35) !important} | |
| .playlist > .sound__coverArt > .image:before, .playlist > .sound__coverArt > .image:after { | |
| content: ''; | |
| position: absolute; | |
| z-index: -1 !important; | |
| top: 0; | |
| left: 0; | |
| height: 100%; | |
| width: 100%; | |
| background: #222; | |
| box-shadow: inset 0 0 1px #666; | |
| transform: rotate(10deg); | |
| -webkit-transform: rotate(10deg); | |
| transition: transform ease 1s; | |
| -webkit-transition: -webkit-transform ease 1s} | |
| .playlist > .sound__coverArt .image:after { | |
| background: #333; | |
| transform: rotate(-10deg); | |
| -webkit-transform: rotate(-10deg)} | |
| .playlist > .sound__coverArt:hover .image:before { | |
| transform: rotate(-10deg); | |
| -webkit-transform: rotate(-10deg)} | |
| .playlist > .sound__coverArt:hover .image:after { | |
| transform: rotate(10deg); | |
| -webkit-transform: rotate(10deg)} | |
| .header__userMenu > li > a.selected:before {border-bottom-color: #555 !important} | |
| .header__userMenu > li > a.selected:after {border-bottom-color: #0C0C0C !important} | |
| .userInfo.isPremium .userInfo__title {padding-right: 0px !important} | |
| .social-sign-in-separator {background: #333 !important} | |
| .inboxItem__link:hover, .inboxItem.unread .inboxItem__link, .inboxItem.active .inboxItem__link {background: linear-gradient(to left, transparent, #222) !important} | |
| .inboxItem__link:focus {background: transparent !important} | |
| /* .waveform__layer.waveform__scene > canvas:first-child { | |
| filter: blur(3px) !important; | |
| -webkit-filter: blur(3px) !important; | |
| filter: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0iMSI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMyIgLz48L2ZpbHRlcj48L3N2Zz4=#1) !important;} | |
| */ | |
| /*** LAYOUT CHANGE ***/ | |
| .fullListenHero__waveform {bottom: 130px !important} | |
| .listenEngagement__commentForm > *, .listenEngagement__footer > * {z-index: 11 !important} | |
| .l-about-main .l-about-top .listenEngagement__commentForm {margin-top: -133px !important} | |
| .l-about-row.l-listen__mainContent {margin-top: -14px !important} | |
| .sc-hyphenate {word-break: normal !important} | |
| .fullListenHero__info .relativeTime:before {content: attr(title) " (" !important} | |
| .fullListenHero__info .relativeTime:after {content: " ago)" !important} | |
| .fullListenHero__info {width: 250px !important} | |
| .truncatedAudioInfo.m-overflow.m-collapsed .truncatedAudioInfo__wrapper {max-height: 232px !important} | |
| /* | |
| .listenInfoTeaser__description {max-height: 235px !important; transition-duration: 1s !important; transition-delay: 2s !important} | |
| .listenInfoTeaser__description:hover {max-height: 1000px !important} | |
| .listenInfoTeaser__descriptionFade {top: 204px !important; transition-duration: 1s !important; transition-delay: 2s !important} | |
| .listenInfoTeaser__description:hover .listenInfoTeaser__descriptionFade {top: 969px !important} | |
| .listenInfoTeaser__description:after { | |
| transition: 0.5s opacity, border-color !important; | |
| transition-delay: 0s, 2s !important; | |
| border: 10px solid; | |
| border-color: #F60 transparent transparent; | |
| opacity: 0 !important; | |
| content: ""; | |
| left: 50%; | |
| position: absolute; | |
| bottom: -10px} | |
| .listenInfoTeaser__description:hover:after {opacity: 1 !important; border-color: transparent !important} | |
| */ | |
| /*** FRONTPAGE ***/ | |
| .frontTeaser__phone {background: transparent !important} | |
| .l-front h1, .l-front h1 *, .l-front h2, .l-front h2 * {text-shadow: 0 0 8px #000, 0 1px 2px #000 !important} | |
| .l-front h1 a, .l-front h2 a {text-decoration: underline !important} | |
| /*** IMAGES ***/ | |
| .loading, .loading.dark {background-image: url(http://abload.de/img/throbber-cloud-greysc11uhe.gif) !important; opacity: 0.8} | |
| .image__hasPlaceholder {background: #222 !important} | |
| .image__hasPlaceholder-200 {background: url(http://abload.de/img/cloudx200uvuof.png) center no-repeat transparent !important} | |
| img[src*="/default/cloudx50-"], .sound__coverArt img[src*="/default/cloudx120-"] {width: 0 !important; height: 50px !important; padding-left: 50px !important; background: url(http://abload.de/img/cloud_50bvb7w.png) center no-repeat transparent !important} | |
| img[src*="/default/cloudx120-"], .sound__coverArt img[src*="/default/cloudx120-"] /* .l-fixed-narrow-fluid .sound__coverArt img[src*="cloudx120-1ec56ce9.png"], .l-fixed-fluid .sound__coverArt img[src*="cloudx120-1ec56ce9.png"], .sound__coverArt img.image__full[src*="cloudx120-1ec56ce9.png"], img.imageUpload__preview[src*="cloudx120-1ec56ce9.png"] */ {width: 0 !important; height: 120px !important; padding-left: 120px !important; background: url(http://abload.de/img/cloud_120jwrp2.png) center no-repeat transparent !important} | |
| img[src*="/default/cloudx200-"] {width: 0 !important; height: 200px !important; padding-left: 200px !important; background: url(http://abload.de/img/cloudx200uvuof.png) center no-repeat transparent !important} | |
| img[src*="/default/cloudx500-"] {width: 0 !important; height: 500px !important; padding-left: 500px !important; background: url(http://abload.de/img/cloudx200uvuof.png) center no-repeat transparent !important} | |
| img[src*="/default/userx40-"][width="40"] {width: 0 !important; height: 40px !important; padding-left: 40px !important; background: url(http://abload.de/img/user_400wyk0.png) !important} | |
| img[src*="/default/userx50-"][width="50"] {width: 0 !important; height: 50px !important; padding-left: 50px !important; background: url(http://abload.de/img/user_50uml4w.png) !important} | |
| img[src*="/default/userx120-"] {width: 0 !important; height: 120px !important; padding-left: 120px !important; background: url(http://abload.de/img/user_120c2yb5.png) !important} | |
| img[src*="/default/userx120-"][width="100"] {width: 0 !important; height: 100px !important; padding-left: 100px !important; background: url(http://abload.de/img/user_1007up61.png) !important} | |
| img[src*="/default/userx200-"] {width: 0 !important; height: 200px !important; padding-left: 200px !important; background: url(http://abload.de/img/user_200skzbp.png) !important} | |
| .soundBadge.playlist .soundBadge__avatarLink {background-image: url(http://abload.de/img/playlist-cover-bg_smaabxf1.png) !important} | |
| .paging-eof:before, .premiumBottomContent__quota:after, .premiumContentFooter:before {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAOCAAAAAB4YAGaAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACpSURBVBgZpcFPS4NwAMfhr+4iQVYqgsHoHzOLMEdMNtouu3QoPQwPHSxC6vP+X8IgEn78sAXteaT/c9OXrquvHf2l4Vvtaael+FE7+pX7PMKjd6UhI7fSyeGXz5jeZll4skVPPscfCefcYWh9WW7amIycnDmmtSwzLih5pGSF6VWWe06Z8kDBAlMlS/oekZEx4RbTmSwH6REJMQHhG73P5lIDQgWKFGpPW9o1Q19pzVZlAAAAAElFTkSuQmCC) !important} | |
| .g-back-link {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAANCAYAAACQN/8FAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACASURBVChTpZGxCoNAEAUXhKAEFMQipb+VOk2KEFGQFGn888ssvhDvjhAkD6bZmeLg7NtCCD1c4KhTPkVPWOAKldRnSeSM0Eiv45BGA/yM7lBLr+OQRjfIogL8He/I6aXjIU4wb8IJOul4iL/jVjoewuOHwl2xf2MplU/xGQ5mZi9fWef4MrlQWQAAAABJRU5ErkJggg==) !important} | |
| .soundBadge__remove, .soundBadge__remove.sc-button, .stream__hideNotice, .mobileApps__dismiss, .announcement__dismiss img, .modal__closeButton, .gritter-close, .g-button-remove { | |
| -moz-appearance: none !important; | |
| background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPAQMAAAABGAcJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAGUExURf///93d3RxnYCYAAAABdFJOUwBA5thmAAAAIklEQVQI12NggAEBAQYOBQYWBwamBgZGBhAJZANFgOIwAAAu6AIeipbA5wAAAABJRU5ErkJggg==) no-repeat center #000 !important; | |
| border: 1px solid #333 !important; | |
| border-radius: 20px !important; | |
| box-shadow: 0 0 2px #000 !important; | |
| opacity: 0.5 !important} | |
| .announcement__dismiss img {width: 0 !important; padding-left: 15px !important; margin-top: -3px !important} | |
| .gritter-close {height: 15px !important; top: 13px !important} | |
| .g-button-remove {width: 19px !important; height: 19px !important;} | |
| .soundBadge__remove:hover, .stream__hideNotice:hover, .announcement__dismiss:hover img, .mobileApps__dismiss:hover, .modal__closeButton:hover, .gritter-close:hover, .g-button-remove:hover {opacity: 1 !important} | |
| .emptyNetworkPage.emptyComments .emptyNetworkPage__image {opacity: 0.08 !important} | |
| .blockCheckbox__icon {background-image: url(http://abload.de/img/big-checkboxyayvg.png) !important} | |
| .soundBadge.dragHandle.editing {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAKCAYAAAC5Sw6hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAApSURBVChTY3BwcPhPDcygrKz8nxqYoaGhgSoYqyA5eDSMCOPBFkbK/wEctxZKLh9yPQAAAABJRU5ErkJggg==) no-repeat 16px center !important} | |
| /*** CUSTOM ***/ | |
| .searchTitle { background-color: #000 !important; border-bottom: none !important; } | |
| #app h1, #app h1 * { color: #999 !important; text-shadow: none !important; } | |
| #app h1 { color: #999 !important; text-shadow: none !important; mask: none !important; -webkit-mask-image: none !important; } | |
| .commentPopover__body { color: #666 !important; } | |
| .g-tabs-item > a:not(.active) { color: #666 !important; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment