URL UI, history UI
This commit is contained in:
39
README.md
39
README.md
@@ -19,51 +19,16 @@ TODO:
|
||||
10. < input type=**datetime** />, essentially a type "date" but with a vertical separator, then `mm | ss | FORMAT` layout for time.
|
||||
11. **< table >** component. [🔗 Related Godot proposal](https://github.com/godotengine/godot-proposals/issues/97)
|
||||
12. **< canvas >** component should be theoretically impossible by exposing Godot `_draw()` APIs to Lua.
|
||||
13. `grid` display property for CSS, using `GridContainer` in Godot.
|
||||
|
||||
Issues:
|
||||
1. **< br />** counts as 1 element in **WebsiteContainer**, therefore despite being (0,0) in size, it counts as double in spacing
|
||||
2. **Tween** API doesn't modify CSS, it operates independently at Godot level.
|
||||
3. Certain properties like `scale` and `rotate` don't apply to the `active` pseudo-class because they rely on mouse_enter and mouse_exit events
|
||||
4. `<div style="bg-[#3b82f6] w-[100px] h-[100px] flex hover:scale-110 transition hover:rotate-45">Box</div>` something like this has the "Box" text (presumably the PanelContainer) as the target of the hover, not the div itself (which has the w/h size)
|
||||
5. font in button doesn't comply with CSS, its the projects default
|
||||
|
||||
Notes:
|
||||
- **< input />** is sort-of inline in normal web. We render it as a block element (new-line).
|
||||
- A single `RichTextLabel` for inline text tags should stop, we should use invididual ones so it's easier to style and achieve separation through a `vboxcontainer`.
|
||||
- Fonts use **Flash of Unstyled Text (FOUT)** as opposed to **Flash of Invisible Text (FOIT)**, meaning the text with custom fonts will render with a generic font (sans-serif) while the custom ones downloads.
|
||||
|
||||
Supported styles:
|
||||
|
||||
- **Font style:**
|
||||
- `font-bold`
|
||||
- `font-italic`
|
||||
- `underline`
|
||||
- **Font size:**
|
||||
- `text-xs` → 12
|
||||
- `text-sm` → 14
|
||||
- `text-base` → 16
|
||||
- `text-lg` → 18
|
||||
- `text-xl` → 20
|
||||
- `text-2xl` → 24
|
||||
- `text-3xl` → 30
|
||||
- `text-4xl` → 36
|
||||
- `text-5xl` → 48
|
||||
- `text-6xl` → 60
|
||||
- **Font family:**
|
||||
- `font-mono`
|
||||
- **Text color:**
|
||||
- `text-[color]`
|
||||
- **Background color:**
|
||||
- `bg-[color]`
|
||||
- **Flexbox**
|
||||
- `flex` / `inline-flex` (display: flex/inline-flex)
|
||||
- `flex-row`, `flex-row-reverse`, `flex-col`, `flex-col-reverse` (flex-direction)
|
||||
- `flex-nowrap`, `flex-wrap`, `flex-wrap-reverse` (flex-wrap)
|
||||
- `justify-start`, `justify-end`, `justify-center`, `justify-between`, `justify-around`, `justify-evenly` (justify-content)
|
||||
- `items-start`, `items-end`, `items-center`, `items-baseline`, `items-stretch` (align-items)
|
||||
- `content-start`, `content-end`, `content-center`, `content-between`, `content-around`, `content-evenly`, `content-stretch` (align-content)
|
||||
- `gap-{size}`, `row-gap-{size}`, `col-gap-{size}` (gap, row-gap, column-gap)
|
||||
- `flex-grow-{n}` (flex-grow)
|
||||
- `flex-shrink-{n}` (flex-shrink)
|
||||
- `basis-{size}` (flex-basis)
|
||||
- `self-auto`, `self-start`, `self-end`, `self-center`, `self-stretch`, `self-baseline` (align-self)
|
||||
- `order-{n}` (order)
|
||||
|
||||
Reference in New Issue
Block a user