eidosui 0.1.0__tar.gz → 0.2.0__tar.gz
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- eidosui-0.2.0/LICENSE +21 -0
- eidosui-0.2.0/PKG-INFO +124 -0
- eidosui-0.2.0/README.md +91 -0
- eidosui-0.2.0/eidos/__init__.py +2 -0
- eidosui-0.2.0/eidos/components/headers.py +29 -0
- eidosui-0.2.0/eidos/css/styles.css +337 -0
- eidosui-0.2.0/eidos/css/themes/dark.css +119 -0
- eidosui-0.2.0/eidos/css/themes/eidos-variables.css +190 -0
- eidosui-0.2.0/eidos/css/themes/light.css +80 -0
- eidosui-0.2.0/eidos/styles.py +80 -0
- eidosui-0.2.0/eidos/tags.py +99 -0
- eidosui-0.2.0/eidos/utils.py +63 -0
- {eidosui-0.1.0 → eidosui-0.2.0}/pyproject.toml +14 -15
- eidosui-0.1.0/PKG-INFO +0 -61
- eidosui-0.1.0/README.md +0 -26
- eidosui-0.1.0/eidos/__init__.py +0 -57
- eidosui-0.1.0/eidos/components/__init__.py +0 -22
- eidosui-0.1.0/eidos/components/forms.py +0 -57
- eidosui-0.1.0/eidos/components/typography.py +0 -85
- eidosui-0.1.0/eidos/core/__init__.py +0 -25
- eidosui-0.1.0/eidos/core/helpers.py +0 -87
- eidosui-0.1.0/eidos/core/styles.py +0 -92
- eidosui-0.1.0/eidos/core/utils.py +0 -46
- eidosui-0.1.0/eidos/static/eidos-ui.js +0 -74
- eidosui-0.1.0/eidos/themes/dark.css +0 -52
- eidosui-0.1.0/eidos/themes/light.css +0 -110
- {eidosui-0.1.0 → eidosui-0.2.0}/.gitignore +0 -0
eidosui-0.2.0/LICENSE
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
MIT License
|
2
|
+
|
3
|
+
Copyright (c) 2025 Feldroy
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
13
|
+
copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
21
|
+
SOFTWARE.
|
eidosui-0.2.0/PKG-INFO
ADDED
@@ -0,0 +1,124 @@
|
|
1
|
+
Metadata-Version: 2.4
|
2
|
+
Name: eidosui
|
3
|
+
Version: 0.2.0
|
4
|
+
Summary: A modern, Tailwind CSS-based UI library for Python web frameworks
|
5
|
+
Project-URL: Homepage, https://github.com/isaac-flath/EidosUI
|
6
|
+
Project-URL: Repository, https://github.com/isaac-flath/EidosUI
|
7
|
+
Project-URL: Issues, https://github.com/isaac-flath/EidosUI/issues
|
8
|
+
Project-URL: Documentation, https://github.com/isaac-flath/EidosUI#readme
|
9
|
+
Author: Isaac Flath
|
10
|
+
License-Expression: MIT
|
11
|
+
License-File: LICENSE
|
12
|
+
Keywords: components,css,fastapi,tailwind,ui,web
|
13
|
+
Classifier: Development Status :: 3 - Alpha
|
14
|
+
Classifier: Intended Audience :: Developers
|
15
|
+
Classifier: License :: OSI Approved :: MIT License
|
16
|
+
Classifier: Programming Language :: Python :: 3
|
17
|
+
Classifier: Programming Language :: Python :: 3.10
|
18
|
+
Classifier: Programming Language :: Python :: 3.11
|
19
|
+
Classifier: Programming Language :: Python :: 3.12
|
20
|
+
Classifier: Topic :: Internet :: WWW/HTTP :: Dynamic Content
|
21
|
+
Classifier: Topic :: Software Development :: Libraries :: Python Modules
|
22
|
+
Requires-Python: >=3.10
|
23
|
+
Requires-Dist: air
|
24
|
+
Requires-Dist: fastapi
|
25
|
+
Requires-Dist: uvicorn
|
26
|
+
Provides-Extra: dev
|
27
|
+
Requires-Dist: black; extra == 'dev'
|
28
|
+
Requires-Dist: isort; extra == 'dev'
|
29
|
+
Requires-Dist: mypy; extra == 'dev'
|
30
|
+
Requires-Dist: pytest; extra == 'dev'
|
31
|
+
Requires-Dist: ruff; extra == 'dev'
|
32
|
+
Description-Content-Type: text/markdown
|
33
|
+
|
34
|
+
# EidosUI 🎨
|
35
|
+
|
36
|
+
A modern, flexible Tailwind CSS-based UI library for Python web frameworks. Built for maximum developer flexibility while providing excellent defaults.
|
37
|
+
|
38
|
+
> [!CAUTION]
|
39
|
+
> This library is not ready for anything yet. IN fact, this readme is more of design ideas than anything as much of what's in here isn't implemented yet!
|
40
|
+
|
41
|
+
|
42
|
+
## Design
|
43
|
+
|
44
|
+
### Base CSS
|
45
|
+
|
46
|
+
- `styles.css` : defines all the core css logic to create classes like `edios-mark`, `eidos-small`, etc.
|
47
|
+
- `light.css`/`dark.css` : These define lots of css variables used in `styles.css` and are themes
|
48
|
+
|
49
|
+
Users would create a custom theme by copying light/dark css files and changing the variable definitions.
|
50
|
+
|
51
|
+
### Styles
|
52
|
+
|
53
|
+
This has enums that make the Base CSS clases accessible in python. For example:
|
54
|
+
|
55
|
+
`styles.typography.h1` or `styles.buttons.primary`
|
56
|
+
|
57
|
+
### Tags
|
58
|
+
|
59
|
+
```python
|
60
|
+
def H1(*content, cls: str = None, **kwargs) -> air.H1:
|
61
|
+
"""Semantic H1 heading"""
|
62
|
+
return air.H1(*content, cls=stringify(styles.typography.h1, cls), **kwargs)
|
63
|
+
|
64
|
+
def Mark(*content, cls: str = None, **kwargs) -> air.Mark:
|
65
|
+
"""Highlighted text"""
|
66
|
+
return .Mark(*content, cls=stringify(styles.typography.mark, cls), **kwargs)
|
67
|
+
|
68
|
+
def Small(*content, cls: str = , **kwargs) -> air.Small:
|
69
|
+
"""Small text"""
|
70
|
+
return air.Small(*content, cls=stringify(styles.typography.small, cls), **kwargs)
|
71
|
+
```
|
72
|
+
|
73
|
+
### Components (Not Built Yet)
|
74
|
+
|
75
|
+
Theses are things that go beyond just exposing css to python. Here's a simple example of what might be added.
|
76
|
+
|
77
|
+
```python
|
78
|
+
class Table:
|
79
|
+
def __init__(self, cls: str = None, **kwargs):
|
80
|
+
"""Create an empty table with optional styling"""
|
81
|
+
self.cls = cls
|
82
|
+
self.kwargs = kwargs
|
83
|
+
|
84
|
+
@classmethod
|
85
|
+
def from_lists(cls, data: list[list], headers: list[str] = None, cls_: str = None, **kwargs):
|
86
|
+
"""Create table from list of lists"""
|
87
|
+
thead = []
|
88
|
+
if headers:
|
89
|
+
thead = THead(Tr(*[Th(header) for header in headers]))
|
90
|
+
|
91
|
+
tbody_rows = []
|
92
|
+
for data in row_data:
|
93
|
+
tbody_rows.append(Tr(*map(Td, row_data)))
|
94
|
+
tbody = TBody(*tbody_rows)
|
95
|
+
|
96
|
+
return Table(thead+tbody, cls=cls_, **kwargs)
|
97
|
+
|
98
|
+
@classmethod
|
99
|
+
def from_dicts(cls, data: list[dict], headers: list[str] = None, cls_: str = None, **kwargs):
|
100
|
+
"""Create table from list of dictionaries"""
|
101
|
+
thead = []
|
102
|
+
if headers:
|
103
|
+
thead = THead(Tr(*[Th(header) for header in headers]))
|
104
|
+
|
105
|
+
tbody_rows = []
|
106
|
+
for row in data:
|
107
|
+
tbody_rows.append(Tr(*[Td(row.get(header, "")) for header in (headers or list(row.keys()))]))
|
108
|
+
tbody = TBody(*tbody_rows)
|
109
|
+
|
110
|
+
return Table(thead+tbody, cls=cls_, **kwargs)
|
111
|
+
|
112
|
+
# Usage examples:
|
113
|
+
Table.from_lists([["A", "B"], ["C", "D"]], headers=["Col1", "Col2"])
|
114
|
+
Table.from_dicts([{"name": "John", "age": 25}], headers=["Name", "Age"])
|
115
|
+
```
|
116
|
+
|
117
|
+
## Plugins
|
118
|
+
|
119
|
+
### edios-md
|
120
|
+
|
121
|
+
This will be installable with `pip install "eidos[markdown]"`.
|
122
|
+
|
123
|
+
This is a plugin for rendering markdown that is well scoped to just markdown rendering. This module does markdown rendering well with table of contents with scrollspy, code highlighting, latex rendering, etc. It must be used with `EidosUI` as it uses css variables from there for the styling (so it is always in sync with the theme)
|
124
|
+
|
eidosui-0.2.0/README.md
ADDED
@@ -0,0 +1,91 @@
|
|
1
|
+
# EidosUI 🎨
|
2
|
+
|
3
|
+
A modern, flexible Tailwind CSS-based UI library for Python web frameworks. Built for maximum developer flexibility while providing excellent defaults.
|
4
|
+
|
5
|
+
> [!CAUTION]
|
6
|
+
> This library is not ready for anything yet. IN fact, this readme is more of design ideas than anything as much of what's in here isn't implemented yet!
|
7
|
+
|
8
|
+
|
9
|
+
## Design
|
10
|
+
|
11
|
+
### Base CSS
|
12
|
+
|
13
|
+
- `styles.css` : defines all the core css logic to create classes like `edios-mark`, `eidos-small`, etc.
|
14
|
+
- `light.css`/`dark.css` : These define lots of css variables used in `styles.css` and are themes
|
15
|
+
|
16
|
+
Users would create a custom theme by copying light/dark css files and changing the variable definitions.
|
17
|
+
|
18
|
+
### Styles
|
19
|
+
|
20
|
+
This has enums that make the Base CSS clases accessible in python. For example:
|
21
|
+
|
22
|
+
`styles.typography.h1` or `styles.buttons.primary`
|
23
|
+
|
24
|
+
### Tags
|
25
|
+
|
26
|
+
```python
|
27
|
+
def H1(*content, cls: str = None, **kwargs) -> air.H1:
|
28
|
+
"""Semantic H1 heading"""
|
29
|
+
return air.H1(*content, cls=stringify(styles.typography.h1, cls), **kwargs)
|
30
|
+
|
31
|
+
def Mark(*content, cls: str = None, **kwargs) -> air.Mark:
|
32
|
+
"""Highlighted text"""
|
33
|
+
return .Mark(*content, cls=stringify(styles.typography.mark, cls), **kwargs)
|
34
|
+
|
35
|
+
def Small(*content, cls: str = , **kwargs) -> air.Small:
|
36
|
+
"""Small text"""
|
37
|
+
return air.Small(*content, cls=stringify(styles.typography.small, cls), **kwargs)
|
38
|
+
```
|
39
|
+
|
40
|
+
### Components (Not Built Yet)
|
41
|
+
|
42
|
+
Theses are things that go beyond just exposing css to python. Here's a simple example of what might be added.
|
43
|
+
|
44
|
+
```python
|
45
|
+
class Table:
|
46
|
+
def __init__(self, cls: str = None, **kwargs):
|
47
|
+
"""Create an empty table with optional styling"""
|
48
|
+
self.cls = cls
|
49
|
+
self.kwargs = kwargs
|
50
|
+
|
51
|
+
@classmethod
|
52
|
+
def from_lists(cls, data: list[list], headers: list[str] = None, cls_: str = None, **kwargs):
|
53
|
+
"""Create table from list of lists"""
|
54
|
+
thead = []
|
55
|
+
if headers:
|
56
|
+
thead = THead(Tr(*[Th(header) for header in headers]))
|
57
|
+
|
58
|
+
tbody_rows = []
|
59
|
+
for data in row_data:
|
60
|
+
tbody_rows.append(Tr(*map(Td, row_data)))
|
61
|
+
tbody = TBody(*tbody_rows)
|
62
|
+
|
63
|
+
return Table(thead+tbody, cls=cls_, **kwargs)
|
64
|
+
|
65
|
+
@classmethod
|
66
|
+
def from_dicts(cls, data: list[dict], headers: list[str] = None, cls_: str = None, **kwargs):
|
67
|
+
"""Create table from list of dictionaries"""
|
68
|
+
thead = []
|
69
|
+
if headers:
|
70
|
+
thead = THead(Tr(*[Th(header) for header in headers]))
|
71
|
+
|
72
|
+
tbody_rows = []
|
73
|
+
for row in data:
|
74
|
+
tbody_rows.append(Tr(*[Td(row.get(header, "")) for header in (headers or list(row.keys()))]))
|
75
|
+
tbody = TBody(*tbody_rows)
|
76
|
+
|
77
|
+
return Table(thead+tbody, cls=cls_, **kwargs)
|
78
|
+
|
79
|
+
# Usage examples:
|
80
|
+
Table.from_lists([["A", "B"], ["C", "D"]], headers=["Col1", "Col2"])
|
81
|
+
Table.from_dicts([{"name": "John", "age": 25}], headers=["Name", "Age"])
|
82
|
+
```
|
83
|
+
|
84
|
+
## Plugins
|
85
|
+
|
86
|
+
### edios-md
|
87
|
+
|
88
|
+
This will be installable with `pip install "eidos[markdown]"`.
|
89
|
+
|
90
|
+
This is a plugin for rendering markdown that is well scoped to just markdown rendering. This module does markdown rendering well with table of contents with scrollspy, code highlighting, latex rendering, etc. It must be used with `EidosUI` as it uses css variables from there for the styling (so it is always in sync with the theme)
|
91
|
+
|
@@ -0,0 +1,29 @@
|
|
1
|
+
from air import Meta, Script, Link, Html, Head, Title
|
2
|
+
from ..tags import Body
|
3
|
+
|
4
|
+
def get_css_urls():
|
5
|
+
"""Return list of CSS URLs for EidosUI."""
|
6
|
+
return [
|
7
|
+
"/eidos/css/styles.css",
|
8
|
+
"/eidos/css/themes/eidos-variables.css",
|
9
|
+
"/eidos/css/themes/light.css",
|
10
|
+
"/eidos/css/themes/dark.css"
|
11
|
+
]
|
12
|
+
def EidosHeaders(include_tailwind=True, theme="light"):
|
13
|
+
"""Standard EidosUI headers with CSS includes."""
|
14
|
+
headers = [
|
15
|
+
Meta(charset="UTF-8"),
|
16
|
+
Meta(name="viewport", content="width=device-width, initial-scale=1.0"),
|
17
|
+
]
|
18
|
+
|
19
|
+
if include_tailwind:
|
20
|
+
headers.append(Script(src="https://cdn.tailwindcss.com"))
|
21
|
+
|
22
|
+
# Add EidosUI CSS files
|
23
|
+
for css_url in get_css_urls():
|
24
|
+
headers.append(Link(rel="stylesheet", href=css_url))
|
25
|
+
|
26
|
+
# Set initial theme
|
27
|
+
headers.append(Script(f"document.documentElement.setAttribute('data-theme', '{theme}');"))
|
28
|
+
|
29
|
+
return headers
|
@@ -0,0 +1,337 @@
|
|
1
|
+
/* EidosUI Button Styles - Simplified for CDN */
|
2
|
+
|
3
|
+
/* Base Button - One size that works everywhere */
|
4
|
+
.eidos-btn {
|
5
|
+
display: inline-flex;
|
6
|
+
align-items: center;
|
7
|
+
justify-content: center;
|
8
|
+
padding: var(--space-sm) var(--space-md);
|
9
|
+
font-size: var(--font-size-base);
|
10
|
+
font-weight: var(--font-weight-medium);
|
11
|
+
line-height: var(--line-height-normal);
|
12
|
+
border-radius: var(--radius-md);
|
13
|
+
border: none;
|
14
|
+
cursor: pointer;
|
15
|
+
text-decoration: none;
|
16
|
+
transition: all var(--transition-fast);
|
17
|
+
outline: none;
|
18
|
+
user-select: none;
|
19
|
+
}
|
20
|
+
|
21
|
+
.eidos-btn:focus-visible {
|
22
|
+
outline: var(--border-2) solid currentColor;
|
23
|
+
outline-offset: var(--border-2);
|
24
|
+
}
|
25
|
+
|
26
|
+
.eidos-btn:active {
|
27
|
+
transform: scale(0.98);
|
28
|
+
}
|
29
|
+
|
30
|
+
/* Primary Button */
|
31
|
+
.eidos-btn-primary {
|
32
|
+
background-color: var(--color-primary);
|
33
|
+
color: var(--color-primary-foreground);
|
34
|
+
}
|
35
|
+
|
36
|
+
.eidos-btn-primary:hover {
|
37
|
+
background-color: var(--color-primary-hover);
|
38
|
+
}
|
39
|
+
|
40
|
+
/* Secondary Button */
|
41
|
+
.eidos-btn-secondary {
|
42
|
+
background-color: var(--color-secondary-light);
|
43
|
+
color: var(--color-secondary-dark);
|
44
|
+
}
|
45
|
+
|
46
|
+
.eidos-btn-secondary:hover {
|
47
|
+
background-color: var(--color-border);
|
48
|
+
}
|
49
|
+
|
50
|
+
/* Ghost Button */
|
51
|
+
.eidos-btn-ghost {
|
52
|
+
background-color: transparent;
|
53
|
+
color: var(--color-secondary-dark);
|
54
|
+
}
|
55
|
+
|
56
|
+
.eidos-btn-ghost:hover {
|
57
|
+
background-color: rgba(0, 0, 0, var(--opacity-5));
|
58
|
+
}
|
59
|
+
|
60
|
+
/* Outline Button */
|
61
|
+
.eidos-btn-outline {
|
62
|
+
background-color: transparent;
|
63
|
+
border: var(--border-2) solid var(--color-primary);
|
64
|
+
color: var(--color-primary);
|
65
|
+
}
|
66
|
+
|
67
|
+
.eidos-btn-outline:hover {
|
68
|
+
background-color: var(--color-primary);
|
69
|
+
color: var(--color-primary-foreground);
|
70
|
+
}
|
71
|
+
|
72
|
+
/* Success Button */
|
73
|
+
.eidos-btn-success {
|
74
|
+
background-color: var(--color-success);
|
75
|
+
color: var(--color-success-foreground);
|
76
|
+
}
|
77
|
+
|
78
|
+
.eidos-btn-success:hover {
|
79
|
+
background-color: var(--color-success-hover);
|
80
|
+
}
|
81
|
+
|
82
|
+
/* Error Button */
|
83
|
+
.eidos-btn-error {
|
84
|
+
background-color: var(--color-error);
|
85
|
+
color: var(--color-error-foreground);
|
86
|
+
}
|
87
|
+
|
88
|
+
.eidos-btn-error:hover {
|
89
|
+
background-color: var(--color-error-hover);
|
90
|
+
}
|
91
|
+
|
92
|
+
/* CTA Button */
|
93
|
+
.eidos-btn-cta {
|
94
|
+
background-color: var(--color-cta);
|
95
|
+
color: var(--color-cta-foreground);
|
96
|
+
}
|
97
|
+
|
98
|
+
.eidos-btn-cta:hover {
|
99
|
+
background-color: var(--color-cta-hover);
|
100
|
+
}
|
101
|
+
|
102
|
+
.eidos-h1 {
|
103
|
+
font-size: var(--font-size-3xl);
|
104
|
+
font-weight: var(--font-weight-bold);
|
105
|
+
line-height: var(--line-height-tight);
|
106
|
+
margin-bottom: var(--space-md);
|
107
|
+
}
|
108
|
+
|
109
|
+
.eidos-h2 {
|
110
|
+
font-size: var(--font-size-2xl);
|
111
|
+
font-weight: var(--font-weight-semibold);
|
112
|
+
line-height: var(--line-height-snug);
|
113
|
+
margin-bottom: calc(var(--space-sm) * 1.6);
|
114
|
+
}
|
115
|
+
|
116
|
+
.eidos-h3 {
|
117
|
+
font-size: var(--font-size-xl);
|
118
|
+
font-weight: var(--font-weight-semibold);
|
119
|
+
line-height: var(--line-height-snug);
|
120
|
+
margin-bottom: calc(var(--space-sm) * 1.2);
|
121
|
+
}
|
122
|
+
|
123
|
+
.eidos-h4 {
|
124
|
+
font-size: var(--font-size-base);
|
125
|
+
font-weight: var(--font-weight-semibold);
|
126
|
+
line-height: var(--line-height-normal);
|
127
|
+
margin-bottom: calc(var(--space-sm) * 0.8);
|
128
|
+
}
|
129
|
+
|
130
|
+
.eidos-h5 {
|
131
|
+
font-size: var(--font-size-sm);
|
132
|
+
font-weight: var(--font-weight-semibold);
|
133
|
+
line-height: var(--line-height-relaxed);
|
134
|
+
margin-bottom: calc(var(--space-xs) * 0.8);
|
135
|
+
}
|
136
|
+
|
137
|
+
.eidos-h6 {
|
138
|
+
font-size: var(--font-size-xs);
|
139
|
+
font-weight: var(--font-weight-semibold);
|
140
|
+
line-height: var(--line-height-relaxed);
|
141
|
+
margin-bottom: calc(var(--space-xs) * 0.4);
|
142
|
+
}
|
143
|
+
|
144
|
+
|
145
|
+
.eidos-body {
|
146
|
+
background-color: var(--color-background);
|
147
|
+
color: var(--color-text);
|
148
|
+
transition: background-color var(--transition-slow), color var(--transition-slow);
|
149
|
+
}
|
150
|
+
|
151
|
+
/* Semantic HTML Elements */
|
152
|
+
|
153
|
+
/* Strong emphasis */
|
154
|
+
.eidos-strong {
|
155
|
+
font-weight: var(--font-weight-bold);
|
156
|
+
color: var(--color-text);
|
157
|
+
}
|
158
|
+
|
159
|
+
/* Italic emphasis */
|
160
|
+
.eidos-i {
|
161
|
+
font-style: italic;
|
162
|
+
}
|
163
|
+
|
164
|
+
/* Small text */
|
165
|
+
.eidos-small {
|
166
|
+
font-size: var(--font-size-sm);
|
167
|
+
color: var(--color-text-muted);
|
168
|
+
}
|
169
|
+
|
170
|
+
/* Deleted text */
|
171
|
+
.eidos-del {
|
172
|
+
text-decoration: line-through;
|
173
|
+
color: var(--color-text-muted);
|
174
|
+
opacity: var(--opacity-70);
|
175
|
+
}
|
176
|
+
|
177
|
+
/* Abbreviation */
|
178
|
+
.eidos-abbr {
|
179
|
+
text-decoration: underline dotted;
|
180
|
+
cursor: help;
|
181
|
+
text-decoration-thickness: var(--border);
|
182
|
+
text-underline-offset: 0.2em;
|
183
|
+
}
|
184
|
+
|
185
|
+
/* Variable */
|
186
|
+
.eidos-var {
|
187
|
+
font-family: monospace;
|
188
|
+
font-style: italic;
|
189
|
+
background-color: var(--color-surface);
|
190
|
+
padding: 0 var(--space-xs);
|
191
|
+
border-radius: var(--radius-sm);
|
192
|
+
}
|
193
|
+
|
194
|
+
/* Summary (for details element) */
|
195
|
+
.eidos-summary {
|
196
|
+
cursor: pointer;
|
197
|
+
font-weight: var(--font-weight-medium);
|
198
|
+
padding: var(--space-sm) var(--space-md);
|
199
|
+
background-color: var(--color-surface);
|
200
|
+
border-radius: var(--radius-md);
|
201
|
+
transition: all var(--transition-fast);
|
202
|
+
user-select: none;
|
203
|
+
}
|
204
|
+
|
205
|
+
.eidos-summary:hover {
|
206
|
+
background-color: var(--color-border);
|
207
|
+
}
|
208
|
+
|
209
|
+
/* Details */
|
210
|
+
.eidos-details {
|
211
|
+
border: var(--border) solid var(--color-border);
|
212
|
+
border-radius: var(--radius-md);
|
213
|
+
margin-bottom: var(--space-md);
|
214
|
+
}
|
215
|
+
|
216
|
+
.eidos-details[open] .eidos-summary {
|
217
|
+
border-bottom: var(--border) solid var(--color-border);
|
218
|
+
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
219
|
+
}
|
220
|
+
|
221
|
+
.eidos-details-content {
|
222
|
+
padding: var(--space-md);
|
223
|
+
}
|
224
|
+
|
225
|
+
/* Blockquote */
|
226
|
+
.eidos-blockquote {
|
227
|
+
margin: var(--space-md) 0;
|
228
|
+
padding: var(--space-md) var(--space-lg);
|
229
|
+
border-left: var(--border-4) solid var(--color-primary);
|
230
|
+
background-color: var(--color-surface);
|
231
|
+
font-style: italic;
|
232
|
+
color: var(--color-text-muted);
|
233
|
+
}
|
234
|
+
|
235
|
+
/* Citation */
|
236
|
+
.eidos-cite {
|
237
|
+
font-style: italic;
|
238
|
+
color: var(--color-text-muted);
|
239
|
+
}
|
240
|
+
|
241
|
+
/* Code elements */
|
242
|
+
.eidos-code {
|
243
|
+
font-family: monospace;
|
244
|
+
font-size: var(--font-size-sm);
|
245
|
+
background-color: var(--color-surface);
|
246
|
+
padding: var(--space-xs) var(--space-sm);
|
247
|
+
border-radius: var(--radius-sm);
|
248
|
+
color: var(--color-accent);
|
249
|
+
}
|
250
|
+
|
251
|
+
/* Preformatted text */
|
252
|
+
.eidos-pre {
|
253
|
+
font-family: monospace;
|
254
|
+
font-size: var(--font-size-sm);
|
255
|
+
background-color: var(--color-surface);
|
256
|
+
padding: var(--space-md);
|
257
|
+
border-radius: var(--radius-md);
|
258
|
+
overflow-x: auto;
|
259
|
+
line-height: var(--line-height-relaxed);
|
260
|
+
border: var(--border) solid var(--color-border);
|
261
|
+
}
|
262
|
+
|
263
|
+
/* Keyboard input */
|
264
|
+
.eidos-kbd {
|
265
|
+
font-family: monospace;
|
266
|
+
font-size: var(--font-size-sm);
|
267
|
+
background-color: var(--color-surface);
|
268
|
+
padding: var(--space-xs) var(--space-sm);
|
269
|
+
border: var(--border) solid var(--color-border);
|
270
|
+
border-radius: var(--radius-sm);
|
271
|
+
box-shadow: var(--shadow-xs);
|
272
|
+
display: inline-block;
|
273
|
+
min-width: 1.5em;
|
274
|
+
text-align: center;
|
275
|
+
}
|
276
|
+
|
277
|
+
/* Sample output */
|
278
|
+
.eidos-samp {
|
279
|
+
font-family: monospace;
|
280
|
+
font-size: var(--font-size-sm);
|
281
|
+
color: var(--color-text-muted);
|
282
|
+
}
|
283
|
+
|
284
|
+
/* Mark/highlight */
|
285
|
+
.eidos-mark {
|
286
|
+
background-color: var(--color-warning);
|
287
|
+
color: var(--color-text);
|
288
|
+
padding: 0 var(--space-xs);
|
289
|
+
border-radius: var(--radius-sm);
|
290
|
+
}
|
291
|
+
|
292
|
+
/* Time */
|
293
|
+
.eidos-time {
|
294
|
+
color: var(--color-text-muted);
|
295
|
+
}
|
296
|
+
|
297
|
+
/* Address */
|
298
|
+
.eidos-address {
|
299
|
+
font-style: normal;
|
300
|
+
line-height: var(--line-height-relaxed);
|
301
|
+
color: var(--color-text-muted);
|
302
|
+
}
|
303
|
+
|
304
|
+
/* Definition list */
|
305
|
+
.eidos-dl {
|
306
|
+
margin: var(--space-md) 0;
|
307
|
+
}
|
308
|
+
|
309
|
+
.eidos-dt {
|
310
|
+
font-weight: var(--font-weight-semibold);
|
311
|
+
margin-bottom: var(--space-xs);
|
312
|
+
}
|
313
|
+
|
314
|
+
.eidos-dd {
|
315
|
+
margin-left: var(--space-lg);
|
316
|
+
margin-bottom: var(--space-sm);
|
317
|
+
color: var(--color-text-muted);
|
318
|
+
}
|
319
|
+
|
320
|
+
/* Figure */
|
321
|
+
.eidos-figure {
|
322
|
+
margin: var(--space-lg) 0;
|
323
|
+
text-align: center;
|
324
|
+
}
|
325
|
+
|
326
|
+
.eidos-figcaption {
|
327
|
+
font-size: var(--font-size-sm);
|
328
|
+
color: var(--color-text-muted);
|
329
|
+
margin-top: var(--space-sm);
|
330
|
+
}
|
331
|
+
|
332
|
+
/* Horizontal rule */
|
333
|
+
.eidos-hr {
|
334
|
+
border: none;
|
335
|
+
border-top: var(--border) solid var(--color-border);
|
336
|
+
margin: var(--space-xl) 0;
|
337
|
+
}
|