eidosui 0.1.0__py3-none-any.whl → 0.3.0__py3-none-any.whl
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.
- eidos/__init__.py +0 -57
- eidos/components/headers.py +68 -0
- eidos/components/navigation.py +78 -0
- eidos/css/styles.css +430 -0
- eidos/css/themes/dark.css +119 -0
- eidos/css/themes/eidos-variables.css +190 -0
- eidos/css/themes/light.css +80 -0
- eidos/js/eidos.js +112 -0
- eidos/plugins/__init__.py +1 -0
- eidos/plugins/markdown/__init__.py +21 -0
- eidos/plugins/markdown/components.py +53 -0
- eidos/plugins/markdown/css/markdown.css +283 -0
- eidos/plugins/markdown/extensions/__init__.py +1 -0
- eidos/plugins/markdown/extensions/alerts.py +134 -0
- eidos/plugins/markdown/renderer.py +58 -0
- eidos/styles.py +80 -0
- eidos/tags.py +99 -0
- eidos/utils.py +72 -0
- eidosui-0.3.0.dist-info/METADATA +127 -0
- eidosui-0.3.0.dist-info/RECORD +22 -0
- eidosui-0.3.0.dist-info/licenses/LICENSE +21 -0
- eidos/components/__init__.py +0 -22
- eidos/components/forms.py +0 -57
- eidos/components/typography.py +0 -85
- eidos/core/__init__.py +0 -25
- eidos/core/helpers.py +0 -87
- eidos/core/styles.py +0 -92
- eidos/core/utils.py +0 -46
- eidos/static/eidos-ui.js +0 -74
- eidos/themes/dark.css +0 -52
- eidos/themes/light.css +0 -110
- eidosui-0.1.0.dist-info/METADATA +0 -61
- eidosui-0.1.0.dist-info/RECORD +0 -14
- {eidosui-0.1.0.dist-info → eidosui-0.3.0.dist-info}/WHEEL +0 -0
eidos/__init__.py
CHANGED
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
"""
|
|
2
|
-
EidosUI - A modern, flexible Tailwind CSS-based UI library for Python web frameworks
|
|
3
|
-
|
|
4
|
-
Key Features:
|
|
5
|
-
- CSS variable-based theming (light/dark)
|
|
6
|
-
- Class-based components for maximum flexibility
|
|
7
|
-
- Mobile-first responsive design patterns
|
|
8
|
-
- Comprehensive style dataclasses with sensible defaults
|
|
9
|
-
- Built on fastapi-tags for modern Python web development
|
|
10
|
-
"""
|
|
11
|
-
|
|
12
|
-
from .core import (
|
|
13
|
-
# ThemeManager,
|
|
14
|
-
# theme_manager,
|
|
15
|
-
button_styles,
|
|
16
|
-
typography_styles,
|
|
17
|
-
form_styles,
|
|
18
|
-
merge_classes,
|
|
19
|
-
serve_eidos_static,
|
|
20
|
-
create_eidos_head_tag,
|
|
21
|
-
)
|
|
22
|
-
|
|
23
|
-
from .components import (
|
|
24
|
-
# Typography
|
|
25
|
-
H1, H2, H3, H4, H5, H6,
|
|
26
|
-
P, Text, Em, Strong, A, Code, Pre, Mark, Small,
|
|
27
|
-
|
|
28
|
-
# Forms
|
|
29
|
-
Button, Input, Textarea, Select, Label, FormGroup,
|
|
30
|
-
)
|
|
31
|
-
|
|
32
|
-
# Version info
|
|
33
|
-
__version__ = "0.1.0"
|
|
34
|
-
__author__ = "Isaac Flath"
|
|
35
|
-
|
|
36
|
-
__all__ = [
|
|
37
|
-
# Core
|
|
38
|
-
"ThemeManager",
|
|
39
|
-
"theme_manager",
|
|
40
|
-
"button_styles",
|
|
41
|
-
"typography_styles",
|
|
42
|
-
"form_styles",
|
|
43
|
-
"merge_classes",
|
|
44
|
-
"serve_eidos_static",
|
|
45
|
-
"create_eidos_head_tag",
|
|
46
|
-
|
|
47
|
-
# Typography components
|
|
48
|
-
"H1", "H2", "H3", "H4", "H5", "H6",
|
|
49
|
-
"P", "Text", "Em", "Strong", "A", "Code", "Pre", "Mark", "Small",
|
|
50
|
-
|
|
51
|
-
# Form components
|
|
52
|
-
"Button", "Input", "Textarea", "Select", "Label", "FormGroup",
|
|
53
|
-
|
|
54
|
-
# Metadata
|
|
55
|
-
"__version__",
|
|
56
|
-
"__author__",
|
|
57
|
-
]
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
from air import Meta, Script, Link
|
|
2
|
+
from ..tags import Body
|
|
3
|
+
from typing import Literal
|
|
4
|
+
|
|
5
|
+
def get_css_urls():
|
|
6
|
+
"""Return list of CSS URLs for EidosUI."""
|
|
7
|
+
return [
|
|
8
|
+
"/eidos/css/styles.css",
|
|
9
|
+
"/eidos/css/themes/eidos-variables.css",
|
|
10
|
+
"/eidos/css/themes/light.css",
|
|
11
|
+
"/eidos/css/themes/dark.css"
|
|
12
|
+
]
|
|
13
|
+
|
|
14
|
+
def EidosHeaders(
|
|
15
|
+
include_tailwind: bool = True,
|
|
16
|
+
include_lucide: bool = True,
|
|
17
|
+
include_eidos_js: bool = True,
|
|
18
|
+
theme: Literal["light", "dark"] = "light",
|
|
19
|
+
):
|
|
20
|
+
"""Complete EidosUI headers with EidosUI JavaScript support.
|
|
21
|
+
|
|
22
|
+
Args:
|
|
23
|
+
include_tailwind: Include Tailwind CSS CDN
|
|
24
|
+
include_lucide: Include Lucide Icons CDN
|
|
25
|
+
include_eidos_js: Include EidosUI JavaScript (navigation, future features)
|
|
26
|
+
theme: Initial theme
|
|
27
|
+
"""
|
|
28
|
+
headers = [
|
|
29
|
+
Meta(charset="UTF-8"),
|
|
30
|
+
Meta(name="viewport", content="width=device-width, initial-scale=1.0"),
|
|
31
|
+
]
|
|
32
|
+
|
|
33
|
+
# Core libraries
|
|
34
|
+
if include_tailwind:
|
|
35
|
+
headers.append(Script(src="https://cdn.tailwindcss.com"))
|
|
36
|
+
|
|
37
|
+
if include_lucide:
|
|
38
|
+
headers.append(Script(src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"))
|
|
39
|
+
|
|
40
|
+
# EidosUI CSS
|
|
41
|
+
for css_url in get_css_urls():
|
|
42
|
+
headers.append(Link(rel="stylesheet", href=css_url))
|
|
43
|
+
|
|
44
|
+
# EidosUI JavaScript
|
|
45
|
+
if include_eidos_js:
|
|
46
|
+
headers.append(Script(src="/eidos/js/eidos.js", defer=True))
|
|
47
|
+
|
|
48
|
+
# Initialization script
|
|
49
|
+
init_script = f"""
|
|
50
|
+
// Set theme
|
|
51
|
+
document.documentElement.setAttribute('data-theme', '{theme}');
|
|
52
|
+
"""
|
|
53
|
+
|
|
54
|
+
if include_lucide:
|
|
55
|
+
init_script += """
|
|
56
|
+
// Initialize Lucide icons
|
|
57
|
+
if (document.readyState === 'loading') {
|
|
58
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
59
|
+
if (window.lucide) lucide.createIcons();
|
|
60
|
+
});
|
|
61
|
+
} else {
|
|
62
|
+
if (window.lucide) lucide.createIcons();
|
|
63
|
+
}
|
|
64
|
+
"""
|
|
65
|
+
|
|
66
|
+
headers.append(Script(init_script))
|
|
67
|
+
|
|
68
|
+
return headers
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
from air import Div, A, I, Tag
|
|
2
|
+
from ..tags import *
|
|
3
|
+
from ..utils import stringify
|
|
4
|
+
from typing import Final, Optional, Any, Union
|
|
5
|
+
from uuid import uuid4
|
|
6
|
+
|
|
7
|
+
class ScrollspyT:
|
|
8
|
+
underline: Final[str] = 'navbar-underline'
|
|
9
|
+
bold: Final[str] = 'navbar-bold'
|
|
10
|
+
|
|
11
|
+
def NavBar(*c: Any,
|
|
12
|
+
lcontents: Tag = H3("Title"),
|
|
13
|
+
right_cls: str = 'items-center space-x-4',
|
|
14
|
+
mobile_cls: str = '',
|
|
15
|
+
sticky: bool = False,
|
|
16
|
+
scrollspy: bool = False,
|
|
17
|
+
cls: str = 'p-4',
|
|
18
|
+
scrollspy_cls: str = ScrollspyT.underline,
|
|
19
|
+
menu_id: Optional[str] = None,
|
|
20
|
+
) -> Tag:
|
|
21
|
+
"""Pure Tailwind responsive navigation bar with optional scrollspy.
|
|
22
|
+
|
|
23
|
+
Mobile menu uses best practice dropdown with:
|
|
24
|
+
- Centered text links
|
|
25
|
+
- Large touch targets
|
|
26
|
+
- Auto-close on selection
|
|
27
|
+
- Smooth animations
|
|
28
|
+
"""
|
|
29
|
+
if menu_id is None: menu_id = f"menu-{uuid4().hex[:8]}"
|
|
30
|
+
|
|
31
|
+
sticky_cls = 'sticky top-0 eidos-navbar-sticky z-50' if sticky else ''
|
|
32
|
+
|
|
33
|
+
# Mobile toggle button with hamburger/close icon
|
|
34
|
+
mobile_icon = A(
|
|
35
|
+
I(data_lucide="menu", class_="w-6 h-6", data_menu_icon="open"),
|
|
36
|
+
I(data_lucide="x", class_="w-6 h-6 hidden", data_menu_icon="close"),
|
|
37
|
+
class_="md:hidden cursor-pointer p-2 eidos-navbar-toggle rounded-lg transition-colors",
|
|
38
|
+
data_toggle=f"#{menu_id}",
|
|
39
|
+
role="button",
|
|
40
|
+
aria_label="Toggle navigation",
|
|
41
|
+
aria_expanded="false"
|
|
42
|
+
)
|
|
43
|
+
|
|
44
|
+
# Desktop navigation
|
|
45
|
+
desktop_nav = Div(
|
|
46
|
+
*c,
|
|
47
|
+
class_=stringify(right_cls, 'hidden md:flex'),
|
|
48
|
+
data_scrollspy="true" if scrollspy else None
|
|
49
|
+
)
|
|
50
|
+
|
|
51
|
+
# Mobile navigation
|
|
52
|
+
mobile_nav = Div(
|
|
53
|
+
*c,
|
|
54
|
+
class_=stringify(
|
|
55
|
+
mobile_cls,
|
|
56
|
+
'hidden md:hidden absolute top-full left-0 right-0 eidos-navbar-mobile shadow-lg border-t',
|
|
57
|
+
'flex flex-col eidos-navbar-mobile-divider' if not mobile_cls else '',
|
|
58
|
+
scrollspy_cls
|
|
59
|
+
),
|
|
60
|
+
id=menu_id,
|
|
61
|
+
data_scrollspy="true" if scrollspy else None,
|
|
62
|
+
data_mobile_menu="true"
|
|
63
|
+
)
|
|
64
|
+
|
|
65
|
+
return Div(
|
|
66
|
+
# Main navbar container with relative positioning for mobile dropdown
|
|
67
|
+
Div(
|
|
68
|
+
Div(
|
|
69
|
+
lcontents,
|
|
70
|
+
mobile_icon,
|
|
71
|
+
desktop_nav,
|
|
72
|
+
class_='flex items-center justify-between'
|
|
73
|
+
),
|
|
74
|
+
mobile_nav,
|
|
75
|
+
class_=stringify('eidos-navbar relative', cls, scrollspy_cls)
|
|
76
|
+
),
|
|
77
|
+
class_=sticky_cls
|
|
78
|
+
)
|
eidos/css/styles.css
ADDED
|
@@ -0,0 +1,430 @@
|
|
|
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
|
+
/* Button Variants - Using CSS Custom Properties to reduce redundancy */
|
|
31
|
+
.eidos-btn-primary,
|
|
32
|
+
.eidos-btn-secondary,
|
|
33
|
+
.eidos-btn-ghost,
|
|
34
|
+
.eidos-btn-outline,
|
|
35
|
+
.eidos-btn-success,
|
|
36
|
+
.eidos-btn-error,
|
|
37
|
+
.eidos-btn-cta {
|
|
38
|
+
background-color: var(--btn-bg, transparent);
|
|
39
|
+
color: var(--btn-color);
|
|
40
|
+
border: var(--btn-border, none);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.eidos-btn-primary:hover,
|
|
44
|
+
.eidos-btn-secondary:hover,
|
|
45
|
+
.eidos-btn-ghost:hover,
|
|
46
|
+
.eidos-btn-outline:hover,
|
|
47
|
+
.eidos-btn-success:hover,
|
|
48
|
+
.eidos-btn-error:hover,
|
|
49
|
+
.eidos-btn-cta:hover {
|
|
50
|
+
background-color: var(--btn-bg-hover);
|
|
51
|
+
color: var(--btn-color-hover, var(--btn-color));
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* Primary Button */
|
|
55
|
+
.eidos-btn-primary {
|
|
56
|
+
--btn-bg: var(--color-primary);
|
|
57
|
+
--btn-color: var(--color-primary-foreground);
|
|
58
|
+
--btn-bg-hover: var(--color-primary-hover);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* Secondary Button */
|
|
62
|
+
.eidos-btn-secondary {
|
|
63
|
+
--btn-bg: var(--color-secondary-light);
|
|
64
|
+
--btn-color: var(--color-secondary-dark);
|
|
65
|
+
--btn-bg-hover: var(--color-border);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Ghost Button */
|
|
69
|
+
.eidos-btn-ghost {
|
|
70
|
+
--btn-bg: transparent;
|
|
71
|
+
--btn-color: var(--color-secondary-dark);
|
|
72
|
+
--btn-bg-hover: rgba(0, 0, 0, var(--opacity-5));
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* Outline Button */
|
|
76
|
+
.eidos-btn-outline {
|
|
77
|
+
--btn-bg: transparent;
|
|
78
|
+
--btn-border: var(--border-2) solid var(--color-primary);
|
|
79
|
+
--btn-color: var(--color-primary);
|
|
80
|
+
--btn-bg-hover: var(--color-primary);
|
|
81
|
+
--btn-color-hover: var(--color-primary-foreground);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* Success Button */
|
|
85
|
+
.eidos-btn-success {
|
|
86
|
+
--btn-bg: var(--color-success);
|
|
87
|
+
--btn-color: var(--color-success-foreground);
|
|
88
|
+
--btn-bg-hover: var(--color-success-hover);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* Error Button */
|
|
92
|
+
.eidos-btn-error {
|
|
93
|
+
--btn-bg: var(--color-error);
|
|
94
|
+
--btn-color: var(--color-error-foreground);
|
|
95
|
+
--btn-bg-hover: var(--color-error-hover);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* CTA Button */
|
|
99
|
+
.eidos-btn-cta {
|
|
100
|
+
--btn-bg: var(--color-cta);
|
|
101
|
+
--btn-color: var(--color-cta-foreground);
|
|
102
|
+
--btn-bg-hover: var(--color-cta-hover);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.eidos-h1 {
|
|
106
|
+
font-size: var(--font-size-3xl);
|
|
107
|
+
font-weight: var(--font-weight-bold);
|
|
108
|
+
line-height: var(--line-height-tight);
|
|
109
|
+
margin-bottom: var(--space-md);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.eidos-h2 {
|
|
113
|
+
font-size: var(--font-size-2xl);
|
|
114
|
+
font-weight: var(--font-weight-semibold);
|
|
115
|
+
line-height: var(--line-height-snug);
|
|
116
|
+
margin-bottom: calc(var(--space-sm) * 1.6);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.eidos-h3 {
|
|
120
|
+
font-size: var(--font-size-xl);
|
|
121
|
+
font-weight: var(--font-weight-semibold);
|
|
122
|
+
line-height: var(--line-height-snug);
|
|
123
|
+
margin-bottom: calc(var(--space-sm) * 1.2);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.eidos-h4 {
|
|
127
|
+
font-size: var(--font-size-base);
|
|
128
|
+
font-weight: var(--font-weight-semibold);
|
|
129
|
+
line-height: var(--line-height-normal);
|
|
130
|
+
margin-bottom: calc(var(--space-sm) * 0.8);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.eidos-h5 {
|
|
134
|
+
font-size: var(--font-size-sm);
|
|
135
|
+
font-weight: var(--font-weight-semibold);
|
|
136
|
+
line-height: var(--line-height-relaxed);
|
|
137
|
+
margin-bottom: calc(var(--space-xs) * 0.8);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.eidos-h6 {
|
|
141
|
+
font-size: var(--font-size-xs);
|
|
142
|
+
font-weight: var(--font-weight-semibold);
|
|
143
|
+
line-height: var(--line-height-relaxed);
|
|
144
|
+
margin-bottom: calc(var(--space-xs) * 0.4);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
.eidos-body {
|
|
149
|
+
background-color: var(--color-background);
|
|
150
|
+
color: var(--color-text);
|
|
151
|
+
transition: background-color var(--transition-slow), color var(--transition-slow);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
/* Semantic HTML Elements */
|
|
155
|
+
|
|
156
|
+
/* Strong emphasis */
|
|
157
|
+
.eidos-strong {
|
|
158
|
+
font-weight: var(--font-weight-bold);
|
|
159
|
+
color: var(--color-text);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/* Italic emphasis */
|
|
163
|
+
.eidos-i {
|
|
164
|
+
font-style: italic;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
/* Small text */
|
|
168
|
+
.eidos-small {
|
|
169
|
+
font-size: var(--font-size-sm);
|
|
170
|
+
color: var(--color-text-muted);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/* Deleted text */
|
|
174
|
+
.eidos-del {
|
|
175
|
+
text-decoration: line-through;
|
|
176
|
+
color: var(--color-text-muted);
|
|
177
|
+
opacity: var(--opacity-70);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
/* Abbreviation */
|
|
181
|
+
.eidos-abbr {
|
|
182
|
+
text-decoration: underline dotted;
|
|
183
|
+
cursor: help;
|
|
184
|
+
text-decoration-thickness: var(--border);
|
|
185
|
+
text-underline-offset: 0.2em;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/* Variable */
|
|
189
|
+
.eidos-var {
|
|
190
|
+
font-family: monospace;
|
|
191
|
+
font-style: italic;
|
|
192
|
+
background-color: var(--color-surface);
|
|
193
|
+
padding: 0 var(--space-xs);
|
|
194
|
+
border-radius: var(--radius-sm);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/* Summary (for details element) */
|
|
198
|
+
.eidos-summary {
|
|
199
|
+
cursor: pointer;
|
|
200
|
+
font-weight: var(--font-weight-medium);
|
|
201
|
+
padding: var(--space-sm) var(--space-md);
|
|
202
|
+
background-color: var(--color-surface);
|
|
203
|
+
border-radius: var(--radius-md);
|
|
204
|
+
transition: all var(--transition-fast);
|
|
205
|
+
user-select: none;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.eidos-summary:hover {
|
|
209
|
+
background-color: var(--color-border);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
/* Details */
|
|
213
|
+
.eidos-details {
|
|
214
|
+
border: var(--border) solid var(--color-border);
|
|
215
|
+
border-radius: var(--radius-md);
|
|
216
|
+
margin-bottom: var(--space-md);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.eidos-details[open] .eidos-summary {
|
|
220
|
+
border-bottom: var(--border) solid var(--color-border);
|
|
221
|
+
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.eidos-details-content {
|
|
225
|
+
padding: var(--space-md);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
/* Blockquote */
|
|
229
|
+
.eidos-blockquote {
|
|
230
|
+
margin: var(--space-md) 0;
|
|
231
|
+
padding: var(--space-md) var(--space-lg);
|
|
232
|
+
border-left: var(--border-4) solid var(--color-primary);
|
|
233
|
+
background-color: var(--color-surface);
|
|
234
|
+
font-style: italic;
|
|
235
|
+
color: var(--color-text-muted);
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
/* Citation */
|
|
239
|
+
.eidos-cite {
|
|
240
|
+
font-style: italic;
|
|
241
|
+
color: var(--color-text-muted);
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
/* Code elements */
|
|
245
|
+
.eidos-code {
|
|
246
|
+
font-family: monospace;
|
|
247
|
+
font-size: var(--font-size-sm);
|
|
248
|
+
background-color: var(--color-surface);
|
|
249
|
+
padding: var(--space-xs) var(--space-sm);
|
|
250
|
+
border-radius: var(--radius-sm);
|
|
251
|
+
color: var(--color-accent);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
/* Preformatted text */
|
|
255
|
+
.eidos-pre {
|
|
256
|
+
font-family: monospace;
|
|
257
|
+
font-size: var(--font-size-sm);
|
|
258
|
+
background-color: var(--color-surface);
|
|
259
|
+
padding: var(--space-md);
|
|
260
|
+
border-radius: var(--radius-md);
|
|
261
|
+
overflow-x: auto;
|
|
262
|
+
line-height: var(--line-height-relaxed);
|
|
263
|
+
border: var(--border) solid var(--color-border);
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
/* Keyboard input */
|
|
267
|
+
.eidos-kbd {
|
|
268
|
+
font-family: monospace;
|
|
269
|
+
font-size: var(--font-size-sm);
|
|
270
|
+
background-color: var(--color-surface);
|
|
271
|
+
padding: var(--space-xs) var(--space-sm);
|
|
272
|
+
border: var(--border) solid var(--color-border);
|
|
273
|
+
border-radius: var(--radius-sm);
|
|
274
|
+
box-shadow: var(--shadow-xs);
|
|
275
|
+
display: inline-block;
|
|
276
|
+
min-width: 1.5em;
|
|
277
|
+
text-align: center;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
/* Sample output */
|
|
281
|
+
.eidos-samp {
|
|
282
|
+
font-family: monospace;
|
|
283
|
+
font-size: var(--font-size-sm);
|
|
284
|
+
color: var(--color-text-muted);
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
/* Mark/highlight */
|
|
288
|
+
.eidos-mark {
|
|
289
|
+
background-color: var(--color-warning);
|
|
290
|
+
color: var(--color-text);
|
|
291
|
+
padding: 0 var(--space-xs);
|
|
292
|
+
border-radius: var(--radius-sm);
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
/* Time */
|
|
296
|
+
.eidos-time {
|
|
297
|
+
color: var(--color-text-muted);
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
/* Address */
|
|
301
|
+
.eidos-address {
|
|
302
|
+
font-style: normal;
|
|
303
|
+
line-height: var(--line-height-relaxed);
|
|
304
|
+
color: var(--color-text-muted);
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
/* Definition list */
|
|
308
|
+
.eidos-dl {
|
|
309
|
+
margin: var(--space-md) 0;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
.eidos-dt {
|
|
313
|
+
font-weight: var(--font-weight-semibold);
|
|
314
|
+
margin-bottom: var(--space-xs);
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
.eidos-dd {
|
|
318
|
+
margin-left: var(--space-lg);
|
|
319
|
+
margin-bottom: var(--space-sm);
|
|
320
|
+
color: var(--color-text-muted);
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
/* Figure */
|
|
324
|
+
.eidos-figure {
|
|
325
|
+
margin: var(--space-lg) 0;
|
|
326
|
+
text-align: center;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.eidos-figcaption {
|
|
330
|
+
font-size: var(--font-size-sm);
|
|
331
|
+
color: var(--color-text-muted);
|
|
332
|
+
margin-top: var(--space-sm);
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
/* Horizontal rule */
|
|
336
|
+
.eidos-hr {
|
|
337
|
+
border: none;
|
|
338
|
+
border-top: var(--border) solid var(--color-border);
|
|
339
|
+
margin: var(--space-xl) 0;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
/* Navigation base styles */
|
|
343
|
+
.eidos-navbar {
|
|
344
|
+
width: 100%;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
.eidos-navbar a {
|
|
348
|
+
padding: 0.5rem 0.75rem;
|
|
349
|
+
border-radius: 0.375rem;
|
|
350
|
+
font-size: 0.875rem;
|
|
351
|
+
font-weight: 500;
|
|
352
|
+
transition: all 0.2s ease;
|
|
353
|
+
position: relative;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.eidos-navbar a:hover {
|
|
357
|
+
background-color: var(--color-border);
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
/* Sticky navbar */
|
|
361
|
+
.eidos-navbar-sticky {
|
|
362
|
+
background-color: var(--color-background);
|
|
363
|
+
box-shadow: var(--shadow-sm);
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
/* Mobile toggle button */
|
|
367
|
+
.eidos-navbar-toggle:hover {
|
|
368
|
+
background-color: var(--color-border);
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
/* Mobile menu dropdown */
|
|
372
|
+
.eidos-navbar-mobile {
|
|
373
|
+
background-color: var(--color-background);
|
|
374
|
+
border-color: var(--color-border);
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
/* Mobile menu dividers */
|
|
378
|
+
.eidos-navbar-mobile-divider > a:not(:last-child) {
|
|
379
|
+
border-bottom: var(--border) solid var(--color-border);
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
/* Underline style */
|
|
383
|
+
.navbar-underline a.eidos-active::after {
|
|
384
|
+
content: '';
|
|
385
|
+
position: absolute;
|
|
386
|
+
bottom: -2px;
|
|
387
|
+
left: 0;
|
|
388
|
+
right: 0;
|
|
389
|
+
height: 2px;
|
|
390
|
+
background-color: var(--color-primary);
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
/* Bold style */
|
|
394
|
+
.navbar-bold a.eidos-active {
|
|
395
|
+
font-weight: 700;
|
|
396
|
+
color: var(--color-primary);
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
/* Mobile menu animation */
|
|
400
|
+
[data-toggle] + * {
|
|
401
|
+
transition: all 0.3s ease;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
/* Mobile navigation styles */
|
|
405
|
+
[data-mobile-menu="true"] {
|
|
406
|
+
animation: slideDown 0.2s ease-out;
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
[data-mobile-menu="true"] a {
|
|
410
|
+
padding: 1rem 1.5rem;
|
|
411
|
+
text-align: center;
|
|
412
|
+
display: block;
|
|
413
|
+
font-weight: 500;
|
|
414
|
+
transition: all 0.2s ease;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
[data-mobile-menu="true"] a:hover {
|
|
418
|
+
background-color: var(--color-border);
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
@keyframes slideDown {
|
|
422
|
+
from {
|
|
423
|
+
transform: translateY(-0.5rem);
|
|
424
|
+
opacity: 0;
|
|
425
|
+
}
|
|
426
|
+
to {
|
|
427
|
+
transform: translateY(0);
|
|
428
|
+
opacity: 1;
|
|
429
|
+
}
|
|
430
|
+
}
|