lutaml 0.10.7 → 0.10.8
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.
- checksums.yaml +4 -4
- data/.rubocop_todo.yml +2 -40
- data/lib/lutaml/uml_repository/static_site/generator.rb +30 -0
- data/lib/lutaml/version.rb +1 -1
- data/templates/static_site/assets/images/lutaml-full.svg +1 -0
- data/templates/static_site/assets/images/lutaml-icon.svg +1 -0
- data/templates/static_site/assets/scripts/ui/sidebar.js +57 -148
- data/templates/static_site/assets/styles/00-variables.css +128 -128
- data/templates/static_site/assets/styles/01-reset.css +20 -30
- data/templates/static_site/assets/styles/02-base.css +105 -110
- data/templates/static_site/assets/styles/03-layout.css +51 -101
- data/templates/static_site/assets/styles/04-components.css +636 -587
- data/templates/static_site/assets/styles/05-utilities.css +8 -74
- data/templates/static_site/assets/styles/06-diagrams.css +42 -293
- data/templates/static_site/components/content.liquid +225 -322
- data/templates/static_site/components/header.liquid +99 -119
- data/templates/static_site/components/sidebar.liquid +69 -39
- data/templates/static_site/multi_file.liquid +9 -6
- data/templates/static_site/single_file.liquid +9 -4
- metadata +3 -1
|
@@ -1,144 +1,144 @@
|
|
|
1
|
-
/*
|
|
1
|
+
/* LutaML UML Browser — Branded Design System */
|
|
2
2
|
|
|
3
3
|
:root {
|
|
4
|
-
/*
|
|
5
|
-
--color-
|
|
6
|
-
--color-
|
|
7
|
-
--color-
|
|
8
|
-
--color-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
--color-
|
|
13
|
-
--color-accent:
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
--color-
|
|
17
|
-
--color-
|
|
18
|
-
|
|
19
|
-
--color-
|
|
20
|
-
--color-
|
|
21
|
-
--color-
|
|
22
|
-
|
|
23
|
-
--color-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
--
|
|
27
|
-
--
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
--
|
|
31
|
-
--
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
--
|
|
37
|
-
|
|
4
|
+
/* Primary — LutaML Blue (#5b9cd4) */
|
|
5
|
+
--color-primary: #5b9cd4;
|
|
6
|
+
--color-primary-light: #7db5e2;
|
|
7
|
+
--color-primary-dark: #26489e;
|
|
8
|
+
--color-primary-alpha: rgba(91, 156, 212, 0.12);
|
|
9
|
+
|
|
10
|
+
/* Accent — Golden Yellow (#dbab3e) */
|
|
11
|
+
--color-accent: #dbab3e;
|
|
12
|
+
--color-accent-light: #f0ca6e;
|
|
13
|
+
--color-accent-alpha: rgba(219, 171, 62, 0.12);
|
|
14
|
+
|
|
15
|
+
/* Semantic */
|
|
16
|
+
--color-teal: #60c3a7;
|
|
17
|
+
--color-teal-alpha: rgba(96, 195, 167, 0.12);
|
|
18
|
+
--color-orange: #ea5624;
|
|
19
|
+
--color-orange-alpha: rgba(234, 86, 36, 0.12);
|
|
20
|
+
--color-red: #b31f24;
|
|
21
|
+
--color-red-alpha: rgba(179, 31, 36, 0.12);
|
|
22
|
+
--color-green: #7cc242;
|
|
23
|
+
--color-green-alpha: rgba(124, 194, 66, 0.12);
|
|
24
|
+
|
|
25
|
+
/* Backgrounds — Warm Stones */
|
|
26
|
+
--bg-primary: #FAFAF9;
|
|
27
|
+
--bg-secondary: #F5F5F4;
|
|
28
|
+
--bg-elevated: #FFFFFF;
|
|
29
|
+
--bg-overlay: rgba(28, 25, 23, 0.5);
|
|
30
|
+
--bg-hover: rgba(28, 25, 23, 0.04);
|
|
31
|
+
--bg-active: rgba(28, 25, 23, 0.06);
|
|
32
|
+
|
|
33
|
+
/* Text — Warm Grays */
|
|
34
|
+
--text-primary: #1C1917;
|
|
35
|
+
--text-secondary: #57534E;
|
|
36
|
+
--text-muted: #A8A29E;
|
|
37
|
+
|
|
38
|
+
/* Borders */
|
|
39
|
+
--border-light: #E7E5E4;
|
|
40
|
+
--border-medium: #D6D3D1;
|
|
41
|
+
--border-focus: #5b9cd4;
|
|
42
|
+
|
|
43
|
+
/* Badge Colors */
|
|
44
|
+
--badge-class: #26489e;
|
|
45
|
+
--badge-class-bg: rgba(38, 72, 158, 0.12);
|
|
46
|
+
--badge-enum: #dbab3e;
|
|
47
|
+
--badge-enum-bg: rgba(219, 171, 62, 0.15);
|
|
48
|
+
--badge-datatype: #60c3a7;
|
|
49
|
+
--badge-datatype-bg: rgba(96, 195, 167, 0.15);
|
|
50
|
+
--badge-interface: #5b9cd4;
|
|
51
|
+
--badge-interface-bg: rgba(91, 156, 212, 0.12);
|
|
52
|
+
--badge-package: #ea5624;
|
|
53
|
+
--badge-package-bg: rgba(234, 86, 36, 0.12);
|
|
54
|
+
--badge-diagram: #7cc242;
|
|
55
|
+
--badge-diagram-bg: rgba(124, 194, 66, 0.12);
|
|
56
|
+
--badge-abstract: #b31f24;
|
|
57
|
+
--badge-abstract-bg: rgba(179, 31, 36, 0.12);
|
|
38
58
|
|
|
39
|
-
/*
|
|
40
|
-
--
|
|
41
|
-
--
|
|
42
|
-
--
|
|
43
|
-
--space-lg: 1.5rem;
|
|
44
|
-
--space-xl: 2rem;
|
|
45
|
-
--space-2xl: 3rem;
|
|
59
|
+
/* Shadows */
|
|
60
|
+
--shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);
|
|
61
|
+
--shadow-md: 0 4px 6px -1px rgba(28, 25, 23, 0.07), 0 2px 4px -1px rgba(28, 25, 23, 0.04);
|
|
62
|
+
--shadow-lg: 0 10px 15px -3px rgba(28, 25, 23, 0.08), 0 4px 6px -2px rgba(28, 25, 23, 0.04);
|
|
46
63
|
|
|
47
64
|
/* Typography */
|
|
48
|
-
--font-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
--
|
|
54
|
-
--
|
|
55
|
-
--
|
|
56
|
-
--
|
|
57
|
-
--
|
|
58
|
-
--
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
--
|
|
62
|
-
--
|
|
63
|
-
--
|
|
64
|
-
--font-weight-bold: 700;
|
|
65
|
-
|
|
66
|
-
--line-height-tight: 1.25;
|
|
67
|
-
--line-height-base: 1.5;
|
|
68
|
-
--line-height-relaxed: 1.75;
|
|
65
|
+
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
66
|
+
--font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Consolas', monospace;
|
|
67
|
+
|
|
68
|
+
/* Type Scale */
|
|
69
|
+
--text-xs: 0.75rem;
|
|
70
|
+
--text-sm: 0.875rem;
|
|
71
|
+
--text-base: 1rem;
|
|
72
|
+
--text-lg: 1.125rem;
|
|
73
|
+
--text-xl: 1.25rem;
|
|
74
|
+
--text-2xl: 1.5rem;
|
|
75
|
+
--text-3xl: 1.875rem;
|
|
76
|
+
|
|
77
|
+
/* Line Heights */
|
|
78
|
+
--leading-tight: 1.25;
|
|
79
|
+
--leading-normal: 1.5;
|
|
80
|
+
--leading-relaxed: 1.75;
|
|
69
81
|
|
|
70
|
-
/*
|
|
71
|
-
--
|
|
72
|
-
--
|
|
73
|
-
--
|
|
74
|
-
--
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
--
|
|
78
|
-
--
|
|
79
|
-
--
|
|
80
|
-
|
|
82
|
+
/* Spacing */
|
|
83
|
+
--space-1: 0.25rem;
|
|
84
|
+
--space-2: 0.5rem;
|
|
85
|
+
--space-3: 0.75rem;
|
|
86
|
+
--space-4: 1rem;
|
|
87
|
+
--space-5: 1.25rem;
|
|
88
|
+
--space-6: 1.5rem;
|
|
89
|
+
--space-8: 2rem;
|
|
90
|
+
--space-10: 2.5rem;
|
|
91
|
+
--space-12: 3rem;
|
|
92
|
+
|
|
93
|
+
/* Border Radius */
|
|
94
|
+
--radius-sm: 0.25rem;
|
|
95
|
+
--radius-md: 0.375rem;
|
|
96
|
+
--radius-lg: 0.5rem;
|
|
97
|
+
--radius-xl: 0.75rem;
|
|
81
98
|
|
|
82
99
|
/* Transitions */
|
|
83
|
-
--transition-fast:
|
|
84
|
-
--transition-
|
|
85
|
-
--transition-slow:
|
|
100
|
+
--transition-fast: 100ms ease;
|
|
101
|
+
--transition-normal: 150ms ease;
|
|
102
|
+
--transition-slow: 200ms ease-out;
|
|
103
|
+
|
|
104
|
+
/* Layout */
|
|
105
|
+
--sidebar-width: 280px;
|
|
106
|
+
--header-height: 56px;
|
|
86
107
|
|
|
87
108
|
/* Z-index */
|
|
88
109
|
--z-sidebar: 10;
|
|
89
110
|
--z-header: 20;
|
|
90
|
-
--z-search-overlay:
|
|
91
|
-
--z-modal:
|
|
111
|
+
--z-search-overlay: 100;
|
|
112
|
+
--z-modal: 200;
|
|
92
113
|
}
|
|
93
114
|
|
|
94
|
-
/* Dark
|
|
115
|
+
/* Dark Mode */
|
|
95
116
|
#app.dark {
|
|
96
|
-
|
|
97
|
-
--
|
|
98
|
-
--
|
|
99
|
-
--
|
|
100
|
-
--
|
|
101
|
-
--
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
--
|
|
105
|
-
--
|
|
106
|
-
|
|
107
|
-
--
|
|
108
|
-
--
|
|
109
|
-
--
|
|
110
|
-
|
|
111
|
-
--
|
|
112
|
-
--
|
|
113
|
-
--
|
|
114
|
-
|
|
115
|
-
--
|
|
116
|
-
--
|
|
117
|
-
|
|
118
|
-
--
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
--
|
|
123
|
-
--color-sidebar-border: #3e3e42;
|
|
124
|
-
--color-sidebar-hover: #2d2d30;
|
|
125
|
-
--color-sidebar-active: #37373d;
|
|
126
|
-
|
|
127
|
-
/* Header */
|
|
128
|
-
--color-header-bg: #1e1e1e;
|
|
129
|
-
--color-header-text: #e0e0e0;
|
|
130
|
-
|
|
131
|
-
/* Shadows (darker for dark mode) */
|
|
132
|
-
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
133
|
-
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
|
|
134
|
-
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
|
|
135
|
-
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
|
|
117
|
+
--bg-primary: #1a1a24;
|
|
118
|
+
--bg-secondary: #232736;
|
|
119
|
+
--bg-elevated: #2d3344;
|
|
120
|
+
--bg-overlay: rgba(0, 0, 0, 0.7);
|
|
121
|
+
--bg-hover: rgba(255, 255, 255, 0.06);
|
|
122
|
+
--bg-active: rgba(255, 255, 255, 0.10);
|
|
123
|
+
|
|
124
|
+
--text-primary: #e8edf4;
|
|
125
|
+
--text-secondary: #a8b4c8;
|
|
126
|
+
--text-muted: #6b7a8f;
|
|
127
|
+
|
|
128
|
+
--border-light: #3a4256;
|
|
129
|
+
--border-medium: #4a5572;
|
|
130
|
+
--border-focus: #5b9cd4;
|
|
131
|
+
|
|
132
|
+
--badge-class-bg: rgba(91, 156, 212, 0.2);
|
|
133
|
+
--badge-class: #5b9cd4;
|
|
134
|
+
--badge-enum-bg: rgba(219, 171, 62, 0.2);
|
|
135
|
+
--badge-datatype-bg: rgba(96, 195, 167, 0.2);
|
|
136
|
+
--badge-interface-bg: rgba(91, 156, 212, 0.2);
|
|
137
|
+
--badge-package-bg: rgba(234, 86, 36, 0.2);
|
|
138
|
+
--badge-diagram-bg: rgba(124, 194, 66, 0.2);
|
|
139
|
+
--badge-abstract-bg: rgba(179, 31, 36, 0.2);
|
|
140
|
+
|
|
141
|
+
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
|
|
142
|
+
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
|
|
143
|
+
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
|
|
136
144
|
}
|
|
137
|
-
|
|
138
|
-
/* Responsive breakpoints (for media queries) */
|
|
139
|
-
/* Use these in @media rules:
|
|
140
|
-
@media (min-width: 640px) { ... } - Small devices and up
|
|
141
|
-
@media (min-width: 768px) { ... } - Tablets and up
|
|
142
|
-
@media (min-width: 1024px) { ... } - Desktop and up
|
|
143
|
-
@media (min-width: 1280px) { ... } - Large desktop and up
|
|
144
|
-
*/
|
|
@@ -7,73 +7,63 @@
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
html {
|
|
10
|
+
font-size: 16px;
|
|
10
11
|
-webkit-text-size-adjust: 100%;
|
|
11
|
-
font-
|
|
12
|
-
|
|
13
|
-
color: var(--color-text);
|
|
14
|
-
background-color: var(--color-bg);
|
|
12
|
+
-webkit-font-smoothing: antialiased;
|
|
13
|
+
-moz-osx-font-smoothing: grayscale;
|
|
15
14
|
}
|
|
16
15
|
|
|
17
16
|
body {
|
|
18
17
|
min-height: 100vh;
|
|
19
|
-
|
|
18
|
+
font-family: var(--font-sans);
|
|
19
|
+
font-size: var(--text-base);
|
|
20
|
+
line-height: var(--leading-normal);
|
|
21
|
+
color: var(--text-primary);
|
|
22
|
+
background-color: var(--bg-primary);
|
|
20
23
|
}
|
|
21
24
|
|
|
22
|
-
|
|
23
|
-
ul, ol {
|
|
24
|
-
list-style: none;
|
|
25
|
-
}
|
|
25
|
+
ul, ol { list-style: none; }
|
|
26
26
|
|
|
27
|
-
/* Make images easier to work with */
|
|
28
27
|
img, picture, video, canvas, svg {
|
|
29
28
|
display: block;
|
|
30
29
|
max-width: 100%;
|
|
31
30
|
}
|
|
32
31
|
|
|
33
|
-
/* Inherit fonts for inputs and buttons */
|
|
34
32
|
input, button, textarea, select {
|
|
35
33
|
font: inherit;
|
|
36
34
|
color: inherit;
|
|
37
35
|
}
|
|
38
36
|
|
|
39
|
-
/* Remove default button styles */
|
|
40
37
|
button {
|
|
41
38
|
background: none;
|
|
42
39
|
border: none;
|
|
43
40
|
cursor: pointer;
|
|
44
|
-
|
|
41
|
+
font-family: inherit;
|
|
42
|
+
font-size: inherit;
|
|
45
43
|
}
|
|
46
44
|
|
|
47
|
-
/* Remove default anchor styles */
|
|
48
45
|
a {
|
|
49
|
-
color:
|
|
46
|
+
color: var(--color-primary);
|
|
50
47
|
text-decoration: none;
|
|
48
|
+
transition: color var(--transition-fast);
|
|
51
49
|
}
|
|
52
50
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
51
|
+
a:hover {
|
|
52
|
+
color: var(--color-primary-dark);
|
|
53
|
+
text-decoration: underline;
|
|
56
54
|
}
|
|
57
55
|
|
|
58
|
-
|
|
56
|
+
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
|
|
57
|
+
|
|
59
58
|
table {
|
|
60
59
|
border-collapse: collapse;
|
|
61
60
|
border-spacing: 0;
|
|
62
61
|
}
|
|
63
62
|
|
|
64
|
-
/* Smooth scrolling */
|
|
65
|
-
html {
|
|
66
|
-
scroll-behavior: smooth;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
/* Reduce motion for users who prefer it */
|
|
70
63
|
@media (prefers-reduced-motion: reduce) {
|
|
71
|
-
*,
|
|
72
|
-
*::before,
|
|
73
|
-
*::after {
|
|
64
|
+
*, *::before, *::after {
|
|
74
65
|
animation-duration: 0.01ms !important;
|
|
75
66
|
animation-iteration-count: 1 !important;
|
|
76
67
|
transition-duration: 0.01ms !important;
|
|
77
|
-
scroll-behavior: auto !important;
|
|
78
68
|
}
|
|
79
|
-
}
|
|
69
|
+
}
|
|
@@ -1,149 +1,144 @@
|
|
|
1
|
-
/*
|
|
1
|
+
/* Typography */
|
|
2
2
|
|
|
3
|
-
body {
|
|
4
|
-
font-family: var(--font-family-sans);
|
|
5
|
-
font-size: var(--font-size-base);
|
|
6
|
-
line-height: var(--line-height-base);
|
|
7
|
-
color: var(--color-text);
|
|
8
|
-
background-color: var(--color-bg);
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
/* Headings */
|
|
12
3
|
h1, h2, h3, h4, h5, h6 {
|
|
13
|
-
font-weight:
|
|
14
|
-
line-height: var(--
|
|
15
|
-
color: var(--
|
|
16
|
-
margin-bottom: var(--space-md);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
h1 { font-size: var(--font-size-3xl); }
|
|
20
|
-
h2 { font-size: var(--font-size-2xl); }
|
|
21
|
-
h3 { font-size: var(--font-size-xl); }
|
|
22
|
-
h4 { font-size: var(--font-size-lg); }
|
|
23
|
-
h5, h6 { font-size: var(--font-size-base); }
|
|
24
|
-
|
|
25
|
-
/* Paragraphs */
|
|
26
|
-
p {
|
|
27
|
-
margin-bottom: var(--space-md);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
/* Links */
|
|
31
|
-
a {
|
|
32
|
-
color: var(--color-link);
|
|
33
|
-
text-decoration: none;
|
|
34
|
-
transition: color var(--transition-fast);
|
|
4
|
+
font-weight: 600;
|
|
5
|
+
line-height: var(--leading-tight);
|
|
6
|
+
color: var(--text-primary);
|
|
35
7
|
}
|
|
36
8
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}
|
|
9
|
+
h1 { font-size: var(--text-2xl); }
|
|
10
|
+
h2 { font-size: var(--text-xl); }
|
|
11
|
+
h3 { font-size: var(--text-lg); }
|
|
12
|
+
h4 { font-size: var(--text-base); color: var(--text-secondary); }
|
|
41
13
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
border-radius: 2px;
|
|
14
|
+
code, pre {
|
|
15
|
+
font-family: var(--font-mono);
|
|
16
|
+
font-size: 0.9em;
|
|
46
17
|
}
|
|
47
18
|
|
|
48
|
-
/* Code */
|
|
49
19
|
code {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
color: var(--color-code-text);
|
|
54
|
-
padding: 0.2em 0.4em;
|
|
55
|
-
border-radius: var(--border-radius);
|
|
20
|
+
background: var(--bg-secondary);
|
|
21
|
+
padding: 0.125em 0.375em;
|
|
22
|
+
border-radius: var(--radius-sm);
|
|
56
23
|
}
|
|
57
24
|
|
|
58
25
|
pre {
|
|
59
|
-
background
|
|
60
|
-
padding: var(--space-
|
|
61
|
-
border-radius: var(--
|
|
26
|
+
background: var(--bg-secondary);
|
|
27
|
+
padding: var(--space-4);
|
|
28
|
+
border-radius: var(--radius-md);
|
|
62
29
|
overflow-x: auto;
|
|
63
|
-
margin-bottom: var(--space-md);
|
|
64
30
|
}
|
|
65
31
|
|
|
66
32
|
pre code {
|
|
67
33
|
background: none;
|
|
68
34
|
padding: 0;
|
|
69
|
-
color: inherit;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
/* Definition Lists */
|
|
73
|
-
dl {
|
|
74
|
-
display: grid;
|
|
75
|
-
grid-template-columns: auto 1fr;
|
|
76
|
-
gap: var(--space-sm) var(--space-md);
|
|
77
|
-
margin-bottom: var(--space-lg);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
dt {
|
|
81
|
-
font-weight: var(--font-weight-medium);
|
|
82
|
-
color: var(--color-text-secondary);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
dd {
|
|
86
|
-
color: var(--color-text);
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
/* Tables */
|
|
90
|
-
table {
|
|
91
|
-
width: 100%;
|
|
92
|
-
margin-bottom: var(--space-lg);
|
|
93
35
|
}
|
|
94
36
|
|
|
95
|
-
/* Keyboard Hints */
|
|
96
37
|
kbd {
|
|
97
38
|
display: inline-block;
|
|
98
|
-
padding:
|
|
99
|
-
font-
|
|
100
|
-
font-
|
|
101
|
-
background
|
|
102
|
-
border: 1px solid var(--
|
|
103
|
-
border-radius:
|
|
104
|
-
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
|
|
39
|
+
padding: 2px 5px;
|
|
40
|
+
font-family: var(--font-mono);
|
|
41
|
+
font-size: 10px;
|
|
42
|
+
background: var(--bg-elevated);
|
|
43
|
+
border: 1px solid var(--border-medium);
|
|
44
|
+
border-radius: var(--radius-sm);
|
|
105
45
|
}
|
|
106
46
|
|
|
107
|
-
/* Mark (highlighting) */
|
|
108
47
|
mark {
|
|
109
|
-
background
|
|
110
|
-
color:
|
|
111
|
-
padding: 0
|
|
48
|
+
background: var(--color-accent-alpha);
|
|
49
|
+
color: var(--color-accent);
|
|
50
|
+
padding: 0 2px;
|
|
112
51
|
border-radius: 2px;
|
|
113
52
|
}
|
|
114
53
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
54
|
+
/* Scrollbars */
|
|
55
|
+
::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
56
|
+
::-webkit-scrollbar-track { background: transparent; }
|
|
57
|
+
::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 4px; }
|
|
58
|
+
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
|
|
59
|
+
|
|
60
|
+
/* Animations */
|
|
61
|
+
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
|
62
|
+
@keyframes slideIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
|
|
63
|
+
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
|
64
|
+
|
|
65
|
+
/* Buttons */
|
|
66
|
+
.btn {
|
|
67
|
+
display: inline-flex;
|
|
68
|
+
align-items: center;
|
|
69
|
+
justify-content: center;
|
|
70
|
+
gap: var(--space-2);
|
|
71
|
+
padding: var(--space-2) var(--space-4);
|
|
72
|
+
font-size: var(--text-sm);
|
|
73
|
+
font-weight: 500;
|
|
74
|
+
border-radius: var(--radius-md);
|
|
75
|
+
transition: all var(--transition-fast);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.btn-primary {
|
|
79
|
+
background: var(--color-primary);
|
|
80
|
+
color: white;
|
|
118
81
|
}
|
|
119
82
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
outline: 2px solid var(--color-accent);
|
|
123
|
-
outline-offset: 2px;
|
|
83
|
+
.btn-primary:hover {
|
|
84
|
+
background: var(--color-primary-dark);
|
|
124
85
|
}
|
|
125
86
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
87
|
+
.btn-secondary {
|
|
88
|
+
background: var(--bg-secondary);
|
|
89
|
+
color: var(--text-primary);
|
|
90
|
+
border: 1px solid var(--border-medium);
|
|
130
91
|
}
|
|
131
92
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
width: 8px;
|
|
135
|
-
height: 8px;
|
|
93
|
+
.btn-secondary:hover {
|
|
94
|
+
background: var(--bg-hover);
|
|
136
95
|
}
|
|
137
96
|
|
|
138
|
-
|
|
139
|
-
|
|
97
|
+
.btn-ghost {
|
|
98
|
+
color: var(--text-secondary);
|
|
140
99
|
}
|
|
141
100
|
|
|
142
|
-
|
|
143
|
-
background: var(--
|
|
144
|
-
|
|
101
|
+
.btn-ghost:hover {
|
|
102
|
+
background: var(--bg-hover);
|
|
103
|
+
color: var(--text-primary);
|
|
145
104
|
}
|
|
146
105
|
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
106
|
+
/* Input */
|
|
107
|
+
.input {
|
|
108
|
+
width: 100%;
|
|
109
|
+
padding: var(--space-2) var(--space-3);
|
|
110
|
+
font-size: var(--text-sm);
|
|
111
|
+
background: var(--bg-elevated);
|
|
112
|
+
border: 1px solid var(--border-light);
|
|
113
|
+
border-radius: var(--radius-md);
|
|
114
|
+
color: var(--text-primary);
|
|
115
|
+
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.input:focus {
|
|
119
|
+
outline: none;
|
|
120
|
+
border-color: var(--border-focus);
|
|
121
|
+
box-shadow: 0 0 0 3px var(--color-primary-alpha);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.input::placeholder { color: var(--text-muted); }
|
|
125
|
+
|
|
126
|
+
/* Badge */
|
|
127
|
+
.badge {
|
|
128
|
+
display: inline-flex;
|
|
129
|
+
align-items: center;
|
|
130
|
+
padding: 0.125rem 0.5rem;
|
|
131
|
+
font-size: var(--text-xs);
|
|
132
|
+
font-weight: 500;
|
|
133
|
+
border-radius: var(--radius-sm);
|
|
134
|
+
text-transform: uppercase;
|
|
135
|
+
letter-spacing: 0.025em;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* Cards */
|
|
139
|
+
.card {
|
|
140
|
+
background: var(--bg-elevated);
|
|
141
|
+
border: 1px solid var(--border-light);
|
|
142
|
+
border-radius: var(--radius-lg);
|
|
143
|
+
box-shadow: var(--shadow-sm);
|
|
144
|
+
}
|