A simple script that defines the white-space property for Stylus configuration text labels.
Stylus Label Breaker by tylrt
Details
Authortylrt
LicenseGPL 3.0 or later
Categorystylus
Created
Updated
Size2.3 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Some UserCSS scripts take advantage of a preprocessor language like Stylus. They use preprocessor variables to give users options, and each user setting is allowed a plain text label. These labels accept and display almost any plain text character, even text 𝘭𝘪𝘬𝘦 𝘵𝘩𝘪𝘴. They also accept emojis. 😮
Some items that don't show are new lines (\n) and tabs (\t), at least in the Stylus add-on configuration popups; Stylus Label Breaker changes that. It sets the white-space property for the HTML tags used for the labels to an appropriate value.
With this concept, a script creator can add further distinction to labels. They can even segment them into categories.
For a mild example, Spotify Sharpener benefits from this.
Note: this is a standalone script. Your existing Stylus modification script ("Stylus Spooky Dark Edition") might already use a similar feature. But if it doesn't, this should work without breaking that.
There are added settings to adjust element placement, but you shouldn't need to touch anything.
For questions, comments, and concerns: tylrt@pm.me.
Source code
/* ==UserStyle==
@name Stylus Label Breaker
@namespace tylrt.neocities.org/css/stylus-label-breaker
@version 1.0.0
@description A simple script that defines the white-space property for Stylus configuration text labels.
@author Tylrt <tylrt@pm.me> (https://tylrt.neocities.org/)
@license gpl-3.0-or-later <https://choosealicense.com/licenses/gpl-3.0/>
@homepageURL https://tylrt.neocities.org/css/stylus-label-breaker
@supportURL https://tylrt.neocities.org/css/
@preprocessor stylus
@var select ws-prop "Label white-space value" [
"break-spaces",
"pre",
"pre-wrap*",
"pre-line"
]
@var select mover "Interactive element positioning" [
"start:Top of label",
"center:Middle of label",
"end:Bottom of label*"
]
@var number xicon "Reset icon realignment" [3, -5, 5, 0.5, 'px']
@var number range "Range number realignment" [-2, -5, 5, 0.5, 'px']
==/UserStyle== */
ii = !important
@-moz-document regexp('^(moz|chrome)-extension://.*$') {
/* Stylus Label Breaker */
oz-prevention = lb-cure
/* Sets the white-space property for labels.
Popup labels now display plain text line breaks. */
.config-body label,
#stylus-popup span {
white-space: ws-prop ii;
}
/* Allows users to position toggles/text boxes/etc. */
#stylus-popup span.current-value,
#message-box .colorview-swatch,
.config-body input,
.config-body select,
.config-body .select-resizer,
.config-body .onoffswitch,
.config-reset-icon {
align-self: mover ii;
}
/* Keeps the option reset [x] and range number in line with its interactive element.
Not every device or environment is alike, so these values are adjustable. */
if mover == "start" {
.config-reset-icon {
margin-top: xicon ii;
}
#stylus-popup span.current-value {
margin-top: range ii;
}
}
else if mover == "end" {
.config-reset-icon {
margin-bottom: xicon ii;
}
#stylus-popup span.current-value {
margin-bottom: range ii;
}
}
}