enhancement
(User-visible)
New theme in collaboration with paxxon.ch.
Open Issues
Layout theme variables:
"Space of the menus" => the top menu bar is not positioned as a grid or flex-box but has inline "style" attributes that cannot be changed by any CSS- We are introducing theme variables for the header areas. (see #24169)
Font upload:
@font-face => We need to add a link tag to link the fonts we need, either from a local resource or from Google Fonts- We are allowing fonts to be uploaded as theme resources (the "Icons" tab will become "Resources"). (see #24210)
Multiple input fields:
<select> The multiple input fields are difficult to style because there are more pseudo-selectors.- This has since been implemented using CSS.
Hover classes:
Some hover classes are loaded via JavaScript or possibly .jsp; either way, this makes it difficult to style them using a standard element inspector.- We are replacing these instances with hover pseudo-classes. (see #24209)
Missing Theme Variables:
Some buttons do not have different theme variables for the active and inactive states.(see #24241)
Future Work
Inline SVGs:
- SVGs can change color, but only if they are used to replace the current buttons; they cannot change color if they are loaded as the `src` attribute of a tag.
- We enable the inlining of SVG icons via a special form of ThemeIcon (e.g., `inline:/path/to/Icon.svg`) that embeds the content of the Icon.svg resource into the page. (see #24395)
Even selector in CSS Grid:
- The "grid" CSS specification does not provide an "even" selector for rows.
- ? Anyone have a counterproposal? ?
Inline styles:
- In general, there are too many style attributes that override CSS styles: `tags = Array.from(document.querySelectorAll("div")).filter((e) => { return e.style.length !== 0; }); ` output: 90+
- These styles result from client-side rendering and cannot be replaced (so easily).
Input Types:
- <INPUT> The `type` attribute is not set correctly. All input types are "text"; there should be several "number" and some "date" input fields. This makes handling them easier.
- We’re updating the type of date and integer input fields to HTML5 using a switch in a theme variable. (see #24207)
Lists:
- Lists are implemented as <div> tags (dfEntryTitle), which have a bullet in another <div> tag with absolute positioning (dfListRemove).
- The list buttons can actually be active elements that allow individual entries to be deleted. Therefore, this is not possible using standard HTML elements.
Test
ThemeEditor_Ticket-24071_Theme-dezent.script.xml