A UserCSS script that changes the appearance of Prolific. It includes a variety of interface options.
Prolific Styliser by tylrt
Details
Authortylrt
LicenseGPL 3.0 or later
Categoryprolific
Created
Updated
Size183 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Prolific Styliser is a UserCSS script for Prolific. It can partially restore an older look of Prolific, among other things.
Screenshots: https://imgur.com/a/8ZQm2CP
How to use:
- Download Stylus for Firefox or Chrome-based browsers¹. This script will also work in any CSS injector that supports the Stylus preprocessor language.
- Install this script.
- A. On desktop: while on app.prolific.co, click the Stylus icon.
B. On mobile: while on app.prolific.co, find Stylus in your mobile menu under extensions. - Click the gear icon next to "Prolific Styliser" to change its settings.
Note: Prolific Styliser uses new lines (\n) in its settings labels to better categorize options, which Stylus pop-ups don't display by default because they lack a defined white-space property. A script such as Stylus Label Breaker will allow for this.
A list of features:
Toggles:
- Classic appearance
- Old logo
- Display available balance on the toolbar
- Flat study list
- Swap
[no]and[yes]button order - Wider non-dashboard pages²
- Flip dashboard panels²
Dropdowns:
- Preset themes (including dark themes)
- Animation level (reduced, normal, or extra)
- Study list header state (normal and compact forms, plus stickied)
- Icon sizes
Other:
- Banner height
- Custom font
- Font size adjustment
- Study list width²
- Actions panel width²
- Study list entry paddings and margins
¹ Some browser examples: Firefox & Iceraven³; Chrome, Edge, Opera, Vivaldi, & Kiwi³
² Only works at desktop resolutions
³ Android browsers
Questions or issues: tylrt@pm.me, or leave a comment below.
What's New:
0.2.0 ~ 2023-10-04
-- Added .com URL
-- @navadjust: account menu now adjusts to value
-- @fontchoice: ID boxes
-- @cashmoney: more accurate placement; consistent sizing
0.1.5 ~ 2023-07-14
-- @classicons: mobile account page reverted
-- @cashmoney: better alignment math
-- UI fixes: mail indicator / disabled pagination hover
-- meta: bold italic fonts don't render on certain devices
0.1.4 ~ 2023-07-14
-- @var: label tweaks
-- @oldlogo: submission received screen logo
-- @cashmoney: alignment / behavior tweaks
-- Institution icon borders are now transparent
-- meta: border-radius construction
0.1.3 ~ 2023-07-07
-- @cashmoney: desktop tweaks
-- @listswap:
@headstate:sticky/stuffy mobile fix
-- Not interested / report padding
0.1.2 ~ 2023-07-05
-- @var: label tweaks
-- @listswap:
@headstate:sticky/stuffy loading mask fix
0.1.1 ~ 2023-07-05
-- @cashmoney: desktop alignment
" " " more padding
-- @oldlogo: lined up with the new logo
0.1.0 ~ 2023-07-05
-- Initial release
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Prolific Styliser
@namespace tylrt.neocities.org/css/prolific
@version 0.2.0
@description A UserCSS script that changes the appearance of Prolific. It includes a variety of interface options.
@author Tylrt <tylrt@pm.me>
@license GPL-3.0-or-later
@homepageURL https://tylrt.neocities.org/css/
@preprocessor stylus
@var select theme "ɢᴇɴᴇʀᴀʟ ꜰᴇᴀᴛᴜʀᴇꜱ —\n\n Theme chooser" [
"default:Default*",
"copidark:Copious Dark",
"colorthrush:Colorthrush",
"gopackgo:Green Rayless"
]
@var select animation " Animation level" [
"0:Reduced animations",
"1:Mostly standard",
"2:Extra flourishes*"
]
@var checkbox classicons " Classic mode" 1
@var checkbox oldlogo " Old logo" 1
@var number navadjust " Banner height (px)" [60, 45, 100, 0.5, 'px']
@var checkbox cashmoney " Display available balance on banner" 1
@var checkbox fontchoice " Custom font-family" 1
@var text fontfam " (wrap 'multi-word fonts')" blinkmacsystemfont,-apple-system,'Segoe UI',Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif
@var number fontsizer " Font size adjustment (px)" [0, -10, 10, .1, 'px']
@var checkbox buttonswap " Button order as: [Yes] [No]" 1
@var checkbox nogobyebye " Hide Delete Account option" 0
@var select headstate "\nᴅᴀꜱʜʙᴏᴀʀᴅ ꜰᴇᴀᴛᴜʀᴇꜱ —\n\n List header state" [
"hidden:Hide it",
"normal:Normal",
"sticky:Stickied",
"compact:Compact",
"stuffy:Stuffied*"
]
@var checkbox flatlist " Flat study list" 1
@var number card-yin " Study card vertical padding (px)" [0, 0, 100, 0.5, 'px']
@var number card-xin " Study card horizontal padding (px)" [0, 0, 100, 0.5, 'px']
@var number card-yout " Study card vertical margin (px, cards only)" [4, 0, 100, 0.5, 'px']
@var number card-xout " Study card horizontal margin (px, cards only)" [16, 0, 100, 0.5, 'px']
@var number study-xin " Study details horizontal padding (px)" [32, 0, 200, 1, 'px']
@var number studyspace " Study details letter spacing (px)" [0, -1, 1, 0.05, 'px']
@var checkbox widescreen "\nꜰᴜʟʟ ᴅɪꜱᴘʟᴀʏ ꜰᴇᴀᴛᴜʀᴇꜱ —\n\n Wider non-dashboard pages" 0
@var checkbox byeborders " Remove the left border from study cards" 0
@var number listwidth " Study list width (%)" [50, 25, 75, 0.5, '%']
@var number boxwidth " Study actions panel width (%)" [50, 25, 75, 0.5, '%']
@var checkbox listswap " Flip study list & details panel" 0
@var checkbox boxswap " Flip study details & study actions panel" 0
@var select cardicon " Host icon size @ study cards" [
"0px:Hidden",
"16px:16px",
"32px:32px",
"48px:48px (Normal)",
"64px:64px*",
"84px:84px",
"96px:96px"
]
@var select detailsicon " Host icon size @ study details" [
"0px:Hidden",
"16px:16px",
"32px:32px",
"48px:48px",
"64px:64px (Normal)",
"84px:84px",
"96px:96px",
"128px:128px*"
]
==/UserStyle== */
ii = !important
@-moz-document domain("app.prolific.co"), domain("app.prolific.com") {
/* Prolific Styliser */
boo = transparent
row-row = row-reverse
/* Notes: ----------------------------------------
What's New:
0.2.0 ~ 2023-10-04
-- Added .com URL
-- @navadjust: account menu now adjusts to value
-- @fontchoice: ID boxes
-- @cashmoney: more accurate placement; consistent sizing
0.1.5 ~ 2023-07-14
-- @classicons: mobile account page reverted
-- @cashmoney: better alignment math
-- UI fixes: mail indicator / disabled pagination hover
-- meta: bold italic fonts don't render on certain devices
0.1.4 ~ 2023-07-14
-- @var: label tweaks
-- @oldlogo: submission received screen logo
-- @cashmoney: alignment / behavior tweaks
-- Institution icon borders are now transparent
-- meta: border-radius construction
0.1.3 ~ 2023-07-07
-- @cashmoney: desktop tweaks
-- @listswap:
@headstate:sticky/stuffy mobile fix
-- Not interested / report padding
0.1.2 ~ 2023-07-05
-- @var: label tweaks
-- @listswap:
@headstate:sticky/stuffy loading mask fix
0.1.1 ~ 2023-07-05
-- @cashmoney: desktop alignment
" " " more padding
-- @oldlogo: lined up with the new logo
0.1.0 ~ 2023-07-05
-- Initial release */
/* Theme storage
(can't take the credit for this idea) */
sets = {
'default': { acau-4: #f5d56c, acau-3: #3498db, acau-2: #9b59b6, acau-1: #39b685, acda-700: #451c1c, acda-600: #681f1f, acda-500: #982020, acda-400: #d92929, acda-300: #f47171, acda-200: #ffafaf, acda-100: #ffd5d5, acda-50: #ffe7e7, acal-700: #63431b, acal-600: #7d4e14, acal-500: #a25f0e, acal-400: #d47e15, acal-300: #edb065, acal-200: #ffd9a9, acal-100: #ffefd4, acal-50: #fff5ea, acsu-700: #003d18, acsu-600: #00451b, acsu-500: #005a24, acsu-400: #008033, acsu-300: #54b27a, acsu-200: #a8ddbd, acsu-100: #dcf6e6, acsu-50: #f3fff8, acne-900: #000, acne-800: #191d22, acne-700: #333b46, acne-600: #4d5a6b, acne-500: #67778e, acne-400: #8395ab, acne-350: #9eb0c2, acne-300: #b7c7d5, acne-250: #cddae4, acne-200: #e0e8ee, acne-150: #eef3f6, acne-100: #f8fafc, acne-50: #fff, acac-900: #001b29, acac-800: #032a3a, acac-700: #073b4c, acac-600: #0e4f5e, acac-500: #15656f, acac-400: #1f7d81, acac-300: #43999f, acac-200: #72b8bd, acac-100: #abdadc, acac-50: #f0fafa, acpr-900: #083759, acpr-800: #08436d, acpr-700: #094f81, acpr-600: #0d5c95, acpr-500: #146aa8, acpr-400: #207bbc, acpr-300: #4192cd, acpr-200: #6daede, acpr-100: #a4cfee, acpr-75: #c8e2f5, acpr-50: #e3f3ff, asda-700: #451c1c, asda-600: #681f1f, asda-500: #982020, asda-400: #d92929, asda-300: #f47171, asda-200: #ffafaf, asda-100: #ffd5d5, asda-50: #ffe7e7, asal-700: #63431b, asal-600: #7d4e14, asal-500: #a25f0e, asal-400: #d47e15, asal-300: #edb065, asal-200: #ffd9a9, asal-100: #ffefd4, asal-50: #fff5ea, assu-600: #00451b, assu-500: #005a24, assu-400: #008033, assu-300: #54b27a, assu-200: #a8ddbd, assu-100: #dcf6e6, assu-50: #f3fff8, asne-900: #000, asne-700: #333b46, asne-600: #4d5a6b, asne-500: #67778e, asne-400: #8395ab, asne-350: #9eb0c2, asne-300: #b7c7d5, asne-250: #cddae4, asne-200: #e0e8ee, asne-150: #eef3f6, asne-100: #f8fafc, asne-50: #fff, asac-800: #032a3a, asac-700: #073b4c, asac-500: #15656f, asac-400: #1f7d81, asac-300: #43999f, asac-200: #72b8bd, asac-100: #abdadc, asac-50: #f0fafa, aspr-900: #083759, aspr-700: #094f81, aspr-600: #0d5c95, aspr-500: #146aa8, aspr-400: #207bbc, aspr-300: #4192cd, aspr-200: #6daede, aspr-100: #a4cfee, aspr-50: #e3f3ff, aone-050: #f4f8fb, aosc-025: #fff, aoco-025: #207bbc, aosc-050: #fff, aoco-050: #207bbc, amda-lt3: #e46969, amda-lt5: #ec9494, amda-lt7: #f4bfbf, amda-lt8: #f7d4d4, amda-lt9: #f0a9a9, amda-dk2: #ae2121, amal-lt3: #e1a55b, amal-lt5: #eabf8a, amal-lt7: #f2d8b9, amal-lt8: #f6e5d0, amal-lt9: #fbf2e8, amal-dk2: #aa6511, amsu-lt3: #4da670, amsu-lt5: #80c099, amsu-lt7: #b3d9c2, amsu-lt8: #cce6d6, amsu-lt9: #e6f2eb, amsu-dk2: #006629, ampr-lt3: #63a3d0, ampr-lt5: #90bdde, ampr-lt7: #bcd7eb, ampr-lt8: #d2e5f2, ampr-lt9: #e9f2f8, ampr-dk2: #1a6296, aebg-col: #f2f3f5, abco-000: #dcdfe6, abco-lt0: #e4e7ed, abco-ltr: #0d0903, abco-xlt: #14110a, abco-dk0: #1b1812, abco-dkr: #232019, afco-000: #f0f2f5, afco-lt0: #f5f7fa, afco-ltr: #fafafa, afco-xlt: #050505, afco-dk0: #0a0805, afco-dkr: #0f0d0a }
'copidark': { acau-4: #f5d56c, acau-3: #3498db, acau-2: #9b59b6, acau-1: #39b685, acda-700: #451c1c, acda-600: #f26262, acda-500: #ff7676, acda-400: #c33434, acda-300: #f47171, acda-200: #ffafaf, acda-100: #ffd5d5, acda-50: #6e1919, acal-700: #63431b, acal-600: #7d4e14, acal-500: #f3b76d, acal-400: #a55d07, acal-300: #edb065, acal-200: #ffd9a9, acal-100: #4d3000, acal-50: #743f05, acsu-700: #003d18, acsu-600: #00451b, acsu-500: #00d053, acsu-400: #01a234, acsu-300: #54b27a, acsu-200: #a8ddbd, acsu-100: #00451b, acsu-50: #f6fffb, acne-900: #000, acne-800: #cacaca, acne-700: #c1c1c1, acne-600: #97a4b4, acne-500: #aeafaf, acne-400: #7a7a7a, acne-350: #9eb0c2, acne-300: #1a1a1a, acne-250: #cddae4, acne-200: #e0e8ee21, acne-150: #121212b3, acne-100: #122e3a, acne-50: #fff, acac-900: #001b29, acac-800: #032a3a, acac-700: #073b4c, acac-600: #0e4f5e, acac-500: #15656f, acac-400: #1f7d81, acac-300: #43999f, acac-200: #3f90ca, acac-100: #083759, acac-50: #f0fafa, acpr-900: #083759, acpr-800: #08436d, acpr-700: #094f81, acpr-600: #2a8ed5, acpr-500: #cdcdcd, acpr-400: #739ad5, acpr-300: #265c80, acpr-200: #0d5c95, acpr-100: #a4cfee, acpr-75: #c8e2f5, acpr-50: #0e4266de, asda-700: #451c1c, asda-600: #c33434, asda-500: #a53939, asda-400: #681f1f, asda-300: #f47171, asda-200: #ffafaf, asda-100: #ffd5d5, asda-50: #6e1919, asal-700: #63431b, asal-600: #7d4e14, asal-500: #f3b76d, asal-400: #a55d07, asal-300: #edb065, asal-200: #ffd9a9, asal-100: #4d3000, asal-50: #743f05, assu-600: #00451b, assu-500: #018e39, assu-400: #045128, assu-300: #54b27a, assu-200: #a8ddbd, assu-100: #00451b, assu-50: #f6fffb, asne-900: #000, asne-700: #0f1e29, asne-600: #4d5a6b, asne-500: #5e5e5e, asne-400: #3f3f3f, asne-350: #9eb0c2, asne-300: #0b0b0b, asne-250: #cddae4...