mirror of
https://github.com/wekan/wekan.git
synced 2026-11-08 11:25:19 -05:00
Lauri Ojansivu
22c7d5376b
The Font popup now has a color wheel for the text color and one for the text background color, each with an Unset button to go back to default. Values are free choices (native <input type=color>), validated server-side as #rrggbb hex (models/lib/uiFonts isHexColor6) so only a strict hex ever reaches a CSS value — no injection surface. An unset/invalid value clears that color. - profile.uiTextColor / profile.uiTextBgColor schema (hex-validated) + getters; setUiColors(textColor, bgColor) method ($set valid hex, $unset otherwise). - changeFontPopup: two color wheels + reset buttons; live preview reflects font, size, text color and background color. - Applied UI-wide via --wekan-ui-text-color / --wekan-ui-bg-color CSS variables + has-ui-text-color / has-ui-bg-color body classes (uiFont.js + uiFont.css). - i18n text-color / text-background-color; tests extended (hex + negatives + source guards). Part of #4759.
41 lines
1.5 KiB
CSS
41 lines
1.5 KiB
CSS
/* Member Settings / Font (#4759): apply the user's chosen UI font. The class lives
|
|
* on <body> and the --wekan-ui-font variable is set by uiFont.js only for a
|
|
* validated, whitelisted font. Form controls are listed explicitly because their
|
|
* UA default font-family does not inherit. Icon fonts (Font Awesome etc.) set their
|
|
* own font-family on the element, so they are unaffected. */
|
|
body.has-ui-font,
|
|
body.has-ui-font button,
|
|
body.has-ui-font input,
|
|
body.has-ui-font textarea,
|
|
body.has-ui-font select,
|
|
body.has-ui-font .wekan-form-control {
|
|
font-family: var(--wekan-ui-font) !important;
|
|
}
|
|
|
|
/* Font size preset (#4759): scale the root font size. Elements using relative units
|
|
* (em/rem/%) scale with it; the variable is a percentage set by uiFont.js only for a
|
|
* known preset. 'default'/unset removes it. */
|
|
body.has-ui-font-size {
|
|
font-size: var(--wekan-ui-font-size) !important;
|
|
}
|
|
|
|
/* Text color (#4759): the variable is a validated hex set by uiFont.js. Icon fonts
|
|
* keep their own color rules; this recolors ordinary UI text + form controls. */
|
|
body.has-ui-text-color,
|
|
body.has-ui-text-color button,
|
|
body.has-ui-text-color input,
|
|
body.has-ui-text-color textarea,
|
|
body.has-ui-text-color select,
|
|
body.has-ui-text-color .wekan-form-control {
|
|
color: var(--wekan-ui-text-color) !important;
|
|
}
|
|
|
|
/* Text background color (#4759). */
|
|
body.has-ui-bg-color,
|
|
body.has-ui-bg-color input,
|
|
body.has-ui-bg-color textarea,
|
|
body.has-ui-bg-color select,
|
|
body.has-ui-bg-color .wekan-form-control {
|
|
background-color: var(--wekan-ui-bg-color) !important;
|
|
}
|