Skip to content

daylight-surfing (SPOTIFY) by coolslutguy420

Screenshot of daylight-surfing (SPOTIFY)

Details

Authorcoolslutguy420

LicenseNo License

Categoryspotify

Created

Updated

Size9.0 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

8/12/2022 UPDATE: FINALLY MADE IT TO WHERE ITS JUST FOR SPOTIFY AND DOESN'T AFFECT EVERY SITE... long overdue but good to have been done later than never. Also, you don't need any extra other styles. Its totally optional. I also fixed the playbar at the bottom (for the most part)


Just a nifty little neat looking color theme for the spotify web browser version.
-->!!! Be cautious of the lack of a visible song position bar being existent. For sure I will fix this in the near future. I want to have a place to keep this userstyle first though. <--!!!

Forked from the original daylight surfing global userskin you can check out here: https://uso.kkx.one/style/46630

Amazing really, that a skin like this has lasted against the tests of time as it has existed all the way back as from 2011.

though, I should really let you know its optionally good to combine this userskin along with the following other userskins below:

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name           daylight-surfing (spotify)
@namespace      USO Archive
@author         coolslutguy420
@description    fork of the original daylight surfing style https://uso.kkx.one/style/46630 
@version        20120215.11.12
@license        CC-BY-SA-4.0
@preprocessor   uso
==/UserStyle== */
@namespace html url(http://www.w3.org/1999/xhtml);
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* http://userstyles.org/styles/46630/daylight-surfing-global */
/* Browser Background */

 
@-moz-document domain(open.spotify.com) {


/*No background images. try to exclude icons, other misc items. */

*:not(:empty):not([onclick*="open"]):not(SPAN):not([class*="stars"]):not([id*="stars"]):not([id="rating"]):not([class="rating"]):not([class*="SPRITE"]):not([id*="SPRITE"]):not([id*="lbImage"]):not([style*="url"]):not([id*="utton"]):not([class*="utton"]):not([id*="menu"]):not([class*="menu"]):not([type*="submit"])

{ background-image: none !important }

/* Basic Bodies */
HTML, BODY { background: none #C7C7C7 !important }

/* Make descendents of the body element transparent.  Formerly "DIV + SPAN" rules. */
BODY * {background-color: transparent !important}

/* Give id's BG hopefully */
DIV[id] {background-color: inherit !important}

/* Filter non-icons */
SPAN:not(:empty):not([class*="icon"]):not([id*="icon"]):not([class*="star"]):not([id*="star"]):not([id*="rating"]):not([class*="rating"]):not([class*="Sprite"]):not([class*="sprite"]) {

background: none transparent !important;
border-color: #D8D8D8 !important}

/* Try to contrast containers */
html:root > BODY > * > * > * > *:not(INPUT):not([onclick]) > DIV:not(:empty):not([id])

{background: none #C0C0C0 !important}


/* :::::::: Text Presentation :::::::: */

SUMMARY, DETAILS {background-color: inherit !important}

ABBR, PROGRESS, TIME, LABEL,
.date {color: #2A0D33 !important}

MARK,
CODE, PRE,
BLOCKQUOTE,
[class*="quote"],
TD[style*="inset"][class="alt2"]   { background-color: #D8D0CB !important }


/* :::::::: Headings + Header :::::::: */

/* Header gradient rules */

HEADER, #header {background: -moz-linear-gradient(#ACACAC,#C7C7C7) transparent !important;}
#header h1 {background-color: transparent !important;}

H1, H2  { 

background: none #B6AEA3 !important;
border-radius: 5px !important;
-moz-border-radius: 5px !important;
-webkit-border-radius: 5px !important;} 


H3, H4 {

background: none #B4A9AE !important;
border-radius: 5px !important;
-moz-border-radius: 5px !important;
-webkit-border-radius: 5px !important;} 

H5, H6 {background: none #A9B4B4 !important}


/* :::::::: Lists :::::::: */

DT     {background-color: #B3AEAB !important}
DL, DD {background-color: #BABABA !important}
LI, UL {background-color: inherit !important}

LI A:not([class*="icon"]):not([id*="icon"]):not([onclick]),
DT A:not([class*="icon"]):not([id*="icon"]):not([onclick])

{background-image: none !important; text-indent: 0 !important}

/* :::::::: list Item highlight :::::::: */

LI[class*="item"] A:hover,
LI[class*="item"]:hover,

[class*="menuitem"]:hover  /* Not list item, but still useful*/

{background-color: #B1B3B0 !important}


/* :::::::: Tables, cells :::::::: */

TABLE {background-color: #BABABA !important; border-color: #ACACAC !important}
TABLE TABLE {background: #C2C2C2 !important;}

TH, CAPTION {background-color: #ABABAB !important}

/* :::::::: Input :::::::: */

/*Basic*/

INPUT *, TEXTAREA * {color: #1C1C1C !important;} /* anonymous divs */

HTML BODY INPUT:not([type="image"]), button,
HTML BODY TEXTAREA {

background: none #ABABAB !important; 
-moz-appearance: none !important;
-webkit-appearance: none !important;
color:  #1C1C1C  !important;
border: solid 1px #737373 !important;
border-radius: 0 !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
opacity: 1 !important;}

/* Style reset. */

HTML BODY INPUT[type="checkbox"] {-moz-appearance: checkbox !important; -webkit-appearance: checkbox !important;}
HTML BODY INPUT[type="radio"]    {-moz-appearance: radio !important; -webkit-appearance: radio !important;}

/* :::::::: Custom styling :::::::: */

HTML:root INPUT[type="button"],
HTML:root INPUT[type="submit"],
HTML:root INPUT[type="reset"],
HTML:root BUTTON {

color: #0E0E0E !important;
background-color: #BBB9A9 !important;

-moz-box-shadow: inset 0 1px rgba(0,0,0,0.2), inset 0 10px rgba(0,0,0,0.1), inset 0 10px 20px rgba(0,0,0,0.15), inset 0 -15px 30px rgba(216,216,216,0.2) !important;
-webkit-box-shadow: inset 0 1px rgba(0,0,0,0.2), inset 0 10px rgba(0,0,0,0.1), inset 0 10px 20px rgba(0,0,0,0.15), inset 0 -15px 30px rgba(216,216,216,0.2) !important;}

HTML:root INPUT[type="button"]:hover,
HTML:root INPUT[type="submit"]:hover,
HTML:root INPUT[type="reset"]:hover,
HTML:root BUTTON:hover {

color: black !important;
background-color: #AEAC95 !important;
border-color: #877F6C !important;

-moz-box-shadow: inset 0 1px rgba(0,0,0,0.3), inset 0 10px rgba(0,0,0,0.2), inset 0 10px 20px rgba(0,0,0,0.25), inset 0 -15px 30px rgba(216,216,216,0.3) !important;
-webkit-box-shadow:  inset 0 1px rgba(0,0,0,0.3), inset 0 10px rgba(0,0,0,0.2), inset 0 10px 20px rgba(0,0,0,0.25), inset 0 -15px 30px rgba(216,216,216,0.3) !important;}

HTML:root INPUT[type="image"] {opacity: .85 !important}
HTML:root INPUT[type="image"]:hover {opacity: .95 !important}

/* Drop-down menu */

SELECT, OPTION, optgroup{

background: none #A8A8A8 !important;
border-color:#909090 !important;
color:#0B0B0B !important;
-moz-appearance: none !important;}

/* :::::::: Misc :::::::: */

ADDRESS {background: none #ACACAC !important}
HR   {background: none #9E9E9E !important}
.current {color: #000000 !important;} /*currently viewed page*/

/* Remove Rounded Corners, Borders, Spacer, Padding images */

IMG[src*="spacer"]:empty,
[id*="round"]:empty,
[id*="bottom"]:empty, [class*="bottom"]:empty, [class*="Bottom"]:empty,
[id*="top"]:empty, [class*="top"]:empty, [class*="Top"]:empty,
[class*="spacer"]:empty

{background-image: none !important;}

/* Menus and Navigation */

NAV, 
MENU,

/*Common naming conventions - in case previous declarations fail to give solid BG*/

HTML BODY [class*="open"],
HTML BODY [id*="Dropdown"],
HTML BODY [id*="dropdown"],
HTML BODY [class*="Dropdown"],
HTML BODY [class*="dropdown"],
HTML BODY [id*="menu"]:not(SELECT),
HTML BODY [class*="menu"]:NOT(SELECT),
HTML BODY [class*="tooltip"],
HTML BODY [class*="popup"], 
HTML BODY [id*="popup"],

/* Notes, details, etc.  Maybe useful */

HTML BODY [class*="note"],
HTML BODY [class*="detail"],
HTML BODY [class*="description"]

{background-color: #BABABA !important}

/* Also common */
[class*="content"], [class*="container"] {background-color: #C0C0C0 !important}

/* Headers, Logos */

[id*="masthead"] a,[id*="header"] a,
[id*="logo"] a, [class*="logo"] a

{text-indent: 0 !important;}

/* Instead of increasing specificity rating by using :not, set rules separately */

HTML:root BODY [class*="layer"],
HTML:root BODY #lightbox-nav,
HTML:root BODY #imageContainer {background-color: transparent !important}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/* Universal - sets color of text, border */

* {
color: black !important; 
border-color: #9E9E9E !important;
outline-color: #9E9E9E !important;
text-shadow: none !important;}

html *:after,
html *:before

{color: black !important;
border-color: #818181 !important;
background: none transparent !important}


/* Link */

a:link,
a:link *:not(IMG){ 

color: #422C06 !important;
background-color: transparent !important;
border-color: #818181 !important;}

a:visited, 
a:visited * {color: #2A3F14 !important;}

a:hover,
a:hover *:not(IMG){

color: #0012D8 !important; 
background-color: #AAAFA9 !important;
border-color: #565656 !important}

html [href*="#"]:hover {color: #0012D8 !important; background-color: transparent !important;}


/* Event Handlers/Attributes */

[onclick],
[ondblclick],
[onmousedown]

{color: #1B2338 !important;
text-indent: 0 !important}

[onclick]:hover,
[ondblclick]:hover,
[onmousedown]:hover

{color: #000058 !important;}

/* Make images transparent */

IMG  { opacity:  .95 !important;}
IMG:hover  { opacity: 1 !important; background-color: #646464 !important; }
svg {background: none #818181 !important;}

/* Highlight */
::-moz-selection {background-color: #857A85 !important; color: #07063B !important;}

/* :::::::: Specific Fixes :::::::: */

/* google search link fix */
.g .r {background-color: transparent !important;}

/* google result hover highlight*/
div.vsc:hover > .vspi, div.vso > .vspi {background: none transparent !important; border: none !important;}

}

/* :::::::: About... :::::::: */

Reviews

No reviews yet.