Skip to content

Instantly share code, notes, and snippets.

@I-NOZex I-NOZex/userContent.css
Last active Jul 3, 2019

Embed
What would you like to do?
Deezer dark mode using userContent file [Firefox Only] (info on how to use userContent.css file: https://davidwalsh.name/firefox-user-stylesheet )
/******* DEZEER DARK MODE *************/
#dzr-app .c0110:not(.c0124).c0123 {
color: #007FEB!important;
background-color: #272727!important;
border-color: #007FEB!important;
}
#dzr-app .c0110:not(.c0124):hover {
background-color: #090909!important;
border-color: #272727!important;
}
#dzr-app .c0110 {
color: #fff!important;
border-color: #303030!important;
background-color: #121212!important;
}
#dzr-app .c0110:not(.c0124):active {
background-color: #121212!important;
}
#dzr-app .catalog-header-infos .heading-3 {
color: #727272!important;
}
#dzr-app .cell-play-icons::after {
background-color: #090909!important;
border-radius: 50%!important;
bottom: 0!important;
content: ""!important;
left: 0!important;
position: absolute!important;
right: 0!important;
top: 0!important;
}
#dzr-app .popper-content {
background-color: #fff!important;
background-color: var(--default-background-color)!important;
border-radius: 4px!important;
-webkit-box-shadow: 0 2px 10px 0 rgba(25,25,34,.24)!important;
box-shadow: 0 2px 10px 0 rgba(25,25,34,.24)!important;
color: #52525d!important;
color: var(--popper-default-text-color)!important;
padding: 16px!important;
position: relative!important;
width: 240px!important;
border: 1px solid #2a2a2a!important;
}
#dzr-app .popper[x-placement="top"] .popper-arrow {
border-bottom-width: 0!important;
border-top-color: #fff!important;
border-top-color: var(--default-background-color)!important;
bottom: 4px!important;
left: calc(50% - 6px)!important;
margin-bottom: 0!important;
margin-top: 0!important;
border-top-color: #2a2a2a!important;
}
#dzr-app .marquee-gradient-left {
background-image: -webkit-gradient(linear,left top,right top,from(#121212),to(hsla(0,0%,100%,0)))!important;
background-image: linear-gradient(90deg,#121212,hsla(0,0%,100%,0))!important;
left: 0;
}
#dzr-app .marquee-gradient-right {
background-image: -webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(#121212))!important;
background-image: linear-gradient(90deg,hsla(0,0%,100%,0),#121212)!important;
right: 0;
}
:root {
--main-background-color: #272727!important;
--default-background-color: #121212!important;
--main-inverse-background-color: #000!important;
--primary-color: #007feb!important;
--primary-hover-color: #0b66cd!important;
--premium-color: #1daaa2!important;
--orange-color: #f60!important;
--download-color: #00d000!important;
--family-color: #fe447d!important;
--main-text-color: #e5e5e5!important;
--neutral-text-color: #52525d!important;
--default-text-color: #72727d!important;
--secondary-text-color: #92929d!important;
--main-inverse-text-color: #fff!important;
--default-inverse-text-color: #c2c2ca!important;
--fix-light-text-color: #fff!important;
--fix-dark-text-color: #32323d!important;
--label-album-color: var(--secondary-text-color)!important;
--label-album-background-color: #efeff2!important;
--label-new-color: #ff8000!important;
--label-new-background-color: rgba(var(--label-new-color),.1)!important;
--sticker-default-background-color: #32323d!important;
--main-border-color: #2a2a2a!important;
--default-border-color: #303030!important;
--secondary-border-color: #f8f8f9!important;
--shadow-border-color: var(--main-background-color)!important;
--main-hover-color: #f2f2f2!important;
--default-hover-color: #3a3a3a!important;
--fix-light-hover-color: var(--default-hover-color)!important;
--fix-dark-color: #32323d!important;
--player-background-color: #121212!important;
--lyrics-color: var(--main-text-color)!important;
--lyrics-active-color: #191922!important;
--lyrics-gradient-color: 255,255,255!important;
--marquee-gradient-left-color: linear-gradient(90deg,#fff,rgba(#FFFFFF,0))!important;
--marquee-gradient-right-color: linear-gradient(90deg,rgba(#FFFFFF,0),#fff)!important;
--input-background-color: #121212!important;
--input-border-color: var(--default-border-color)!important;
--input-disabled-background-color: #efeff2!important;
--input-placeholder-color: #92929d!important;
--input-placeholder-focus-color: #d1d1d7!important;
--input-text-color: var(--main-text-color)!important;
--input-border-color: #d1d1d7!important;
--datagrid-border-color: #efeff2!important;
--datagrid-row-hover-color: #3a3a3a!important;
--datagrid-idle-color: #92929d!important;
--datagrid-action-hover-color: #42424d!important;
--datagrid-disabled-color: #c2c2ca!important;
--popper-main-text-color: #32323d!important;
--popper-default-text-color: rgb(170, 170, 170)!important;
--popper-link-background-color: var(--main-hover-color)!important;
--popper-link-hover-background-color: #e2e2e6!important;
--switch-active-color: #32323d!important;
--thumbnail-background-color: #121212 !important
--thumbnail-hover-overlay-color: var(--default-hover-color)!important;
--thumbnail-livestream-background: var(--main-background-color)!important;
--viewmore-background-color: #efeff2!important;
--viewmore-hover-background-color: #dedee3!important;
--slide-background-color: var(--main-background-color)!important;
--slide-border-color: var(--default-border-color)!important;
--slide-hover-overlay-color: var(--thumbnail-hover-overlay-color)!important;
--nanocard-background-color: #121212!important;
--nanocard-active-background-color: var(--main-background-color)!important;
--navbar-default-color: var(--secondary-text-color)!important;
--navbar-active-color: var(--main-text-color)!important;
--navbar-disable-color: #d1d1d7!important;
--scroller-shadow-color: rgba(25,25,34,0.12)!important;
--modal-dialog-background-color: #fff!important;
--modal-shadow-color: rgba(10,10,22,0.3)!important;
--modal-backdrop-background-color: #191922!important;
--onboarding-progress-background-color: #e8e8ec!important;
--onboarding-artist-placeholder-background-color: #dfdee4!important;
--onboarding-channel-text-color: #fff!important;
--onboarding-selected-item-icon-color: #fff!important;
--onboarding-header-shadow-color: rgba(0,0,0,0.2)!important;
--onboarding-footer-shadow-color: rgba(0,0,0,0.2)!important;
--slider-track-default-color: #dedee3!important;
--slider-track-active-color: var(--main-text-color)!important;
--tag-400-background-color: #222!important;
--tag-400-foreground-color: #2692ee!important;
--tag-400-hover-background-color: #090909!important;
--tag-400-hover-foreground: #2279d6!important;
--tag-600-background-color: #1a1a1a!important;
--tag-600-foreground-color: #0574dd!important;
--tag-600-hover-background-color: #090909!important;
--tag-600-hover-foreground: #0b64ca!important;
--tag-800-background-color: #333!important;
--tag-800-foreground-color: #0b66cd!important;
--tag-800-hover-background-color: #090909!important;
--tag-800-hover-foreground: #1159bc!important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.