[Firemonkey] quick configure for css scripts

[advait404]

Hello, I wanted to know if CSS scripts can be easily configured like in stylus. For example, in the script Collapsing Sidebars for Discord, there is a configure option which shows a popup that allows easy changing of the width and transition time. Can this also be done in firemonkey?

[erosman]

Previously #293

CSS scripts can be configured by editing the script e.g. changing the values.

ATM, similar to other userscript managers, there is no Graphical-User-Interface like Stylus.

If there is a popular demand, then I can work on it.

[advait404]

Thank you for the reply!
I think having a simplistic GUI for this would be very useful. Personally, I am not very confident about editing css values, and the more casual users may prefer to use a quick setting instead of finding where each value can be changed. I really hope firemonkey has this feature if its not difficult to implement.

[erosman]

Notes

• There are multiple formats for the default value which adds to the processing
• The replacement in the actual CSS requires re-writing the CSS and replacing the variables with Regular Expressions

TBH, it is possible to apply variables natively using var() without the need for Regular Expression replace(). The process of handling user-style is leftover from the legacy Firefox era and then continued in Stylish and then ported to Stylus.

It is possible to implement a GUI for quick configure in FireMonkey but I would implement it differently and natively. The problem is that the existing userStyles wont be compatible until they are updated.
It has been the experience that userScripts & userStyles developers often favour adhering to the legacy code.

For example, @-moz-document was once implemented, but it was removed long time ago.
(read FireMonkey Help under UserStyle)

https://github.com/openstyles/stylus/wiki/Writing-UserCSS

@var  <type>  <name>    <label>         <default value>
@var  text    myBorder  "Border style"  3px dotted blue

default value 
[default, min, max, step, units]

https://gist.github.com/akeeton/c99a0a92ed327ddb64e99dd79fc11cc2

@var            color bg-color-main        "Main background color"      #222
@var            color bg-color-highlight   "Highlight background color" #333
@var            color font-color-main      "Main font color"            #eee
@var            color font-color-highlight "Highlight font color"       #fff

body {
  color: /*[[font-color-main]]*/;
  background-color: /*[[bg-color-main]]*/;
}

https://gitlab.com/GrantMoyer/collapsing-sidebars-for-discord/-/blob/master/collapsing_sidebars.user.css

@var            number max-collapse-width   "Maximum Collapsing Width"  [950, 0, 1450, 1, 'px']
@var            number transition-duration "Transition Duration"        [0.25, 0, 10, 0.01, 's']

[erosman]

For example, here is Collapsing Sidebars for Discord as userCSS for FireMonkey.
📌 Note; userCSS performance is much better than userStyle.

/* ==UserCSS==
@name           Collapsing Sidebars for Discord
@namespace      https://gitlab.com/GrantMoyer
@version        1.1.0
@description    Makes the sidebars on discord collapse when not hovered
@author         Grant Moyer
@homepageURL    https://gitlab.com/GrantMoyer/collapsing-sidebars-for-discord
@updateURL      https://gitlab.com/GrantMoyer/collapsing-sidebars-for-discord/-/raw/master/collapsing_sidebars.user.css
@license        CC0-1.0

@match          https://discord.com/channels*
==/UserCSS== */


:root {
  --channel-list-width: 50px;
  --online-list-width: 70px;
  --transition-duration: 0.25s;
}

@media (max-width: 950px) {
  [class*='sidebar-']:not(:hover) [class*='icons-'] {
    margin-left: -26px;
    margin-top: 6px;
    margin-bottom: -6px;
  }

  [class*='sidebar-']:not(:hover) [class*='iconSpacing-'] {
    background-color: var(--background-tertiary);
    padding-top: 2px;
    padding-left: 2px;
    padding-right: 2px;
  }

  [class*='sidebar-']:not(:hover) [class*='list-'] {
    padding-left: 4px;
  }

  [class*='sidebar-']:not(:hover) {
    width: var(--channel-list-width);
    margin-right: 0;
  }

  [class*='sidebar-'] {
    margin-right: calc(-240px + var(--channel-list-width));
  }

  [class*='sidebar-']:not(:hover) [class*='children-'] {
    opacity: 0;
  }

  [class*='membersWrap-'] {
    margin-left: calc(-240px + var(--online-list-width));
  }

  [class*='members-']:not(:hover) {
    width: var(--online-list-width);
    margin-left: calc(240px - var(--online-list-width));
  }

  [class*='members-']:not(:hover) [class*='icon-'] {
    position: absolute;
    left: 0px;
    padding: 2px;
    background-color: var(--background-tertiary);
    border-radius: 50%;
  }
}

[class*='membersWrap-'] {
  transition: margin var(--transition-duration);
}

[class*='members-'] {
  transition: width var(--transition-duration), margin var(--transition-duration);
}
[class*='icons-'] {
  transition: margin var(--transition-duration);
}

[class*='iconSpacing-'] {
  transition: margin var(--transition-duration), background-color var(--transition-duration), padding var(--transition-duration);
  border-radius: 50%;
}

[class*='list-'] {
  transition: padding var(--transition-duration);
}

[class*='sidebar-'] {
  transition: width var(--transition-duration), margin var(--transition-duration);
  z-index: 1000;
}

[class*='sidebar-'] [class*='children-'] {
  transition: opacity var(--transition-duration);
}

[erosman]

I am going to work on implementing @var for both userScript & userCSS

ref: #293