Userstyles editor

Added by hideheader@userstyles, Created: Dec 22, 2015, Updated: Dec 23, 2015
  • With the style applied
  • 'Additional screenshots'

Description:

Rearranges the Userstyles editor. Now it works on the 'upload failed' pages too, after a fashion, and works better than it did on narrow (600-900px) viewports.

Basically, the editor page needs more structure than it has in order to do this right.

More info
The style works more or less the same way in both Chrome and Firefox.
  • The 'Save' button is moved to the left edge of the header.
  • The style name becomes the title in the header.
  • The 'house rules' are moved to the left column, under the menu.
  • Description and Additional Info (which should be renamed 'Notes') are resized to resemble the style page
  • Edit boxes are fixed width, and resizeable vertically but not horizontally.
  • License options are collapsed and only the active license is shown, except when hovering over a license.
Screenshots
  • Primary Screenshot assumes the position it has in the style pages.
  • Automatically generated, user-supplied, and 'no screenshots' are overlaid in a single control. The radio buttons choose which is visible.
  • Additional Screenshots are presented like the Primary Screenshot instead of as table rows.
  • All screenshots are resized and cropped to 350 x 265px as in the style pages.
  • All are given a patterned background.
Style Settings
  • Up/down/remove buttons are only shown when hovering over a style setting or option, and only for that setting or option.
  • Disabled up/down/remove buttons are grayed out and unresponsive instead of hidden completely.
  • When hovering over the up/down/remove buttons, the corresponding setting or option is outlined.
  • 'Default' radio buttons are moved to the left edge of drop-down and image settings.
  • Install keys are aligned in a column and displayed in fixed font to emphasize their role.
  • Option install keys are aggressively grayed out, as they have no use on the edit page.
  • Default values for color settings and text settings are moved below the setting label and keyword, and the line with the label and keyword is given a gray background, as in drop-down and image settings.
  • Install key and image URL inputs are frameless when not focused.
It doesn't however work on the 'upload error' page yet. Fixed 12/24 - ho ho ho!

There are examples of clip-path in Chrome and Firefox, of using @supports to choose browser-specific hacks, and of course some browser-specific hacks.

Installs:
Applies to:
https?://userstyles.org/styles/(create|update), https?://userstyles.org/styles/(new|create|update|\d+/edit)

Related styles:

WARNING: This webware is not functioning properly. Please enable javascript in your browser and try again.