Adds customisable fonts, colors and backgrounds for spotify web player
New Spotify Customisable Background (2022) by diego
Details
Authordiego
LicenseNo License
Categoryuserstyles
Created
Updated
Size26 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name New Spotify Customisable Background (2022)
@lastdate abr-2022
@author Diego
@namespace github.com/openstyles/stylus
@version 1.0.0
@license unlicense
@preprocessor default
@var select mainBackground "Main Background*" {
'Solid Black' : '#000000',
'Custom Solid Color' : 'var(--solid-color)',
'Custom 2-Colors Gradient' : 'linear-gradient(336deg, var(--solid-color), var(--solid-color-2))',
'Custom 3-Colors Gradient*' : 'linear-gradient(217deg, var(--solid-color-3), var(--solid-color), var(--solid-color-2))',
'Polygons (by DavidRockDesign)' : 'url(https://cdn.pixabay.com/photo/2016/06/02/02/33/triangles-1430105__340.png)',
'Small Memory (by Mikael Gustafsson)' : 'url(https://i0.wp.com/abglt.org.br/wp-content/uploads/2020/10/wallpaper-pc1-scaled-1.jpg?fit=2560%2C1440&ssl=1)',
'Dark trees' : 'url(https://wallpaperaccess.com/full/334698.jpg)',
}
@var color solid-color "Background* (Main Custom Color)" #DD1C1ACC
@var color solid-color-2 "Background* (2nd Color)" #086788CC
@var color solid-color-3 "Background* (3rd Color)" #F15922CC
@var select mainFontFamily "Main Font" {
'Acme' : "'Acme', sans-serif",
'Alegreya Sans SC*' : "'Alegreya Sans SC', sans-serif",
'Amaranth' : "'Amaranth', sans-serif",
'Arials' : "'Arials', sans-serif",
'Merriweather' : "'Merriweather', sans-serif",
'Oswald' : "'Oswald', sans-serif",
'Pathway Gothic One' : "'Pathway Gothic One', sans-serif",
'Philosopher' : "'Philosopher', sans-serif",
'Play' : "'Play', sans-serif",
'Roboto' : "'Roboto', sans-serif",
'Ubuntu' : "'Ubuntu', sans-serif",
}
@var color mainFontColor "Main Font color" #FFF
@var select lyricsFamily "Lyrics Font" {
'Amatic SC' : "'Amatic SC', cursive",
'Annie Use Your Telescope' : "'Annie Use Your Telescope', cursive",
'Architects Daughter' : "'Architects Daughter', cursive",
'Caveat' : "'Caveat', cursive",
'Grape Nuts' : "'Grape Nuts', cursive",
'Indie Flower' : "'Indie Flower', cursive",
'Lavishly Yours' : "'Lavishly Yours', cursive",
'Nothing You Could Do' : "'Nothing You Could Do', cursive",
'Pinyon Script' : "'Pinyon Script', cursive",
'Reenie Beanie*' : "'Reenie Beanie', cursive",
'Rubik Wet Paint' : "'Rubik Wet Paint', cursive",
'Sacramento' : "'Sacramento', cursive",
'Send Flowers' : "'Send Flowers', cursive",
'Shadows Into Light' : "'Shadows Into Light', cursive",
}
@var color lyricsFontColor "Lyrics Font color" #FFF
@var color lyricsBackgroundTop "Lyrics Background Top Color" #495057
@var color lyricsBackgroundBottom "Lyrics Background Bottom Color" #212529
@var color accentColor "Icons Color" #CC1B1D
==/UserStyle== */
@-moz-document domain(open.spotify.com) {
/* Importing sans-serif fonts (main)*/
@font-face {
font-family: 'Alegreya Sans SC';
font-style: normal;
font-weight: 100;
src: url(https://fonts.gstatic.com/s/alegreyasanssc/v18/mtGn4-RGJqfMvt7P8FUr0Q1j-Hf1DipV9QRE.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Acme';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/acme/v17/RrQfboBx-C5_XxrBbg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Amaranth';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/amaranth/v16/KtkuALODe433f0j1zMnFHdA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v47/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUZiZQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Pathway Gothic One';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/pathwaygothicone/v13/MwQrbgD32-KAvjkYGNUUxAtW7pEBwx-tS1Zf.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Philosopher';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/philosopher/v17/vEFV2_5QCwIS4_Dhez5jcWBuT00.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Play';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/play/v16/6aez4K2oVqwIvtU2Hw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1MmgVxIIzI.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v19/4iCs6KVjbNBYlgoKfw72.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Importing cursive fonts (serif) */
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/merriweather/v28/u-440qyriQwlOrhSvowK_l5-fCZM.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Importing cursive fonts (lyrics) */
@font-face {
font-family: 'Reenie Beanie';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/reeniebeanie/v14/z7NSdR76eDkaJKZJFkkjuvWxXPq1qw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Rubik Wet Paint';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/rubikwetpaint/v1/HTx0L20uMDGHgdULcpTF3Oe4d_-1_Db2.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Amatic SC';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/amaticsc/v23/TUZyzwprpvBS1izr_vOECuSf.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Annie Use Your Telescope';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/annieuseyourtelescope/v16/daaLSS4tI2qYYl3Jq9s_Hu74xwktnlKxH6osGVGTkz3A.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Architects Daughter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/architectsdaughter/v17/KtkxAKiDZI_td1Lkx62xHZHDtgO_Y-bvTYlg4w.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/caveat/v14/WnznHAc5bAfYB2QRah7pcpNvOx-pjfJ9eIWpYQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
...