Skip to content

Commit f7d2310

Browse files
ehsan6shaehsan6sha
committed
corrected translation
1 parent 9c096fe commit f7d2310

File tree

8 files changed

+212
-142
lines changed

8 files changed

+212
-142
lines changed

‎docs/website/api.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
66
<title>Fula API Documentation</title>
77
<link rel="stylesheet" href="css/styles.css">
8+
<link rel="stylesheet" href="css/i18n.css">
89
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
910
<script>
1011
(function() {

‎docs/website/css/i18n.css‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
/* Language Selector Styles */
2+
3+
.language-selector {
4+
position: relative;
5+
display: inline-block;
6+
margin-right: 12px;
7+
}
8+
9+
.language-selector-btn {
10+
display: flex;
11+
align-items: center;
12+
gap: 6px;
13+
padding: 8px 12px;
14+
background: var(--bg-code, #1e2430);
15+
border: 1px solid var(--border-color, #30363d);
16+
border-radius: 8px;
17+
color: var(--text-primary, #c9d1d9);
18+
cursor: pointer;
19+
font-size: 0.9rem;
20+
font-family: inherit;
21+
transition: all 0.2s ease;
22+
}
23+
24+
.language-selector-btn:hover {
25+
background: var(--bg-sidebar, #161b22);
26+
border-color: var(--accent-blue, #58a6ff);
27+
}
28+
29+
.language-icon {
30+
font-size: 1.1rem;
31+
}
32+
33+
.language-arrow {
34+
font-size: 0.65rem;
35+
opacity: 0.6;
36+
transition: transform 0.2s ease;
37+
margin-left: 2px;
38+
}
39+
40+
.language-selector.open .language-arrow {
41+
transform: rotate(180deg);
42+
}
43+
44+
.language-dropdown {
45+
position: absolute;
46+
top: calc(100% + 6px);
47+
left: 0;
48+
background: var(--bg-sidebar, #161b22);
49+
border: 1px solid var(--border-color, #30363d);
50+
border-radius: 10px;
51+
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
52+
min-width: 200px;
53+
max-height: 400px;
54+
overflow-y: auto;
55+
z-index: 9999;
56+
/* Hidden by default */
57+
display: none;
58+
}
59+
60+
.language-selector.open .language-dropdown {
61+
display: block;
62+
}
63+
64+
.language-option {
65+
display: flex;
66+
align-items: center;
67+
gap: 10px;
68+
width: 100%;
69+
padding: 12px 16px;
70+
background: transparent;
71+
border: none;
72+
color: var(--text-primary, #c9d1d9);
73+
cursor: pointer;
74+
text-align: left;
75+
font-size: 0.9rem;
76+
font-family: inherit;
77+
transition: background 0.15s ease;
78+
}
79+
80+
.language-option:first-child {
81+
border-radius: 9px 9px 0 0;
82+
}
83+
84+
.language-option:last-child {
85+
border-radius: 0 0 9px 9px;
86+
}
87+
88+
.language-option:hover {
89+
background: var(--bg-code, #1e2430);
90+
}
91+
92+
.language-option.active {
93+
background: rgba(88, 166, 255, 0.15);
94+
color: var(--accent-blue, #58a6ff);
95+
}
96+
97+
.language-option .lang-flag {
98+
font-size: 1.2rem;
99+
}
100+
101+
.language-option .lang-info {
102+
display: flex;
103+
flex-direction: column;
104+
gap: 2px;
105+
}
106+
107+
.language-option .lang-native {
108+
font-weight: 500;
109+
font-size: 0.9rem;
110+
}
111+
112+
.language-option .lang-english {
113+
font-size: 0.75rem;
114+
color: var(--text-secondary, #8b949e);
115+
}
116+
117+
.language-option.active .lang-english {
118+
color: var(--accent-blue, #58a6ff);
119+
opacity: 0.7;
120+
}
121+
122+
.language-option .lang-check {
123+
margin-left: auto;
124+
opacity: 0;
125+
color: var(--accent-blue, #58a6ff);
126+
}
127+
128+
.language-option.active .lang-check {
129+
opacity: 1;
130+
}
131+
132+
/* RTL Support */
133+
html[dir="rtl"] body {
134+
direction: rtl;
135+
}
136+
137+
html[dir="rtl"] .sidebar {
138+
left: auto;
139+
right: 0;
140+
border-right: none;
141+
border-left: 1px solid var(--border-color, #30363d);
142+
}
143+
144+
html[dir="rtl"] .content {
145+
margin-left: 0;
146+
margin-right: 280px;
147+
}
148+
149+
html[dir="rtl"] .nav-section li a {
150+
border-left: none;
151+
border-right: 3px solid transparent;
152+
padding-left: 20px;
153+
padding-right: 17px;
154+
}
155+
156+
html[dir="rtl"] .nav-section li a.active {
157+
border-right-color: var(--accent-blue, #58a6ff);
158+
}
159+
160+
html[dir="rtl"] .language-dropdown {
161+
left: auto;
162+
right: 0;
163+
}
164+
165+
html[dir="rtl"] .language-option {
166+
text-align: right;
167+
flex-direction: row-reverse;
168+
}
169+
170+
html[dir="rtl"] .language-option .lang-check {
171+
margin-left: 0;
172+
margin-right: auto;
173+
}
174+
175+
/* Mobile responsive */
176+
@media (max-width: 768px) {
177+
html[dir="rtl"] .content {
178+
margin-right: 0;
179+
}
180+
181+
html[dir="rtl"] .sidebar {
182+
transform: translateX(100%);
183+
}
184+
185+
html[dir="rtl"] .sidebar.open {
186+
transform: translateX(0);
187+
}
188+
189+
.language-selector-btn .language-selector-current {
190+
display: none;
191+
}
192+
193+
.language-selector-btn .language-arrow {
194+
display: none;
195+
}
196+
}

‎docs/website/css/styles.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -516,6 +516,7 @@ footer {
516516
display: flex;
517517
align-items: center;
518518
justify-content: space-between;
519+
gap: 8px;
519520
padding: 0 20px 20px;
520521
border-bottom: 1px solid var(--border-color);
521522
margin-bottom: 20px;
@@ -525,6 +526,15 @@ footer {
525526
padding: 0;
526527
border: none;
527528
margin: 0;
529+
flex: 1;
530+
}
531+
532+
.sidebar-header .language-selector {
533+
flex-shrink: 0;
534+
}
535+
536+
.sidebar-header .theme-toggle {
537+
flex-shrink: 0;
528538
}
529539

530540
/* Mobile Overlay */

‎docs/website/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<title>Introduction - Fula API Documentation</title>
77
<link rel="stylesheet" href="css/styles.css">
88
<link rel="stylesheet" href="css/intro.css">
9+
<link rel="stylesheet" href="css/i18n.css">
910
<script>
1011
(function() {
1112
// Load saved theme

‎docs/website/js/i18n.js‎

Lines changed: 1 addition & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -18,146 +18,7 @@
1818
const STORAGE_KEY = 'fula-docs-language';
1919
const DEFAULT_LANGUAGE = 'en';
2020

21-
// Inject required CSS for language selector
22-
function injectStyles() {
23-
if (document.getElementById('i18n-styles')) return;
24-
const style = document.createElement('style');
25-
style.id = 'i18n-styles';
26-
style.textContent = `
27-
.language-selector {
28-
position: relative;
29-
display: inline-block;
30-
margin-right: 12px;
31-
}
32-
.language-selector-btn {
33-
display: flex;
34-
align-items: center;
35-
gap: 6px;
36-
padding: 8px 12px;
37-
background: var(--bg-code, #1e2430);
38-
border: 1px solid var(--border-color, #30363d);
39-
border-radius: 8px;
40-
color: var(--text-primary, #c9d1d9);
41-
cursor: pointer;
42-
font-size: 0.9rem;
43-
font-family: inherit;
44-
transition: all 0.2s ease;
45-
}
46-
.language-selector-btn:hover {
47-
background: var(--bg-sidebar, #161b22);
48-
border-color: var(--accent-blue, #58a6ff);
49-
}
50-
.language-icon { font-size: 1.1rem; }
51-
.language-arrow {
52-
font-size: 0.65rem;
53-
opacity: 0.6;
54-
transition: transform 0.2s ease;
55-
margin-left: 2px;
56-
}
57-
.language-selector.open .language-arrow {
58-
transform: rotate(180deg);
59-
}
60-
.language-dropdown {
61-
position: absolute;
62-
top: calc(100% + 6px);
63-
left: 0;
64-
background: var(--bg-sidebar, #161b22);
65-
border: 1px solid var(--border-color, #30363d);
66-
border-radius: 10px;
67-
box-shadow: 0 12px 32px rgba(0,0,0,0.4);
68-
min-width: 200px;
69-
max-height: 400px;
70-
overflow-y: auto;
71-
opacity: 0;
72-
visibility: hidden;
73-
transform: translateY(-8px) scale(0.96);
74-
transition: all 0.2s ease;
75-
z-index: 9999;
76-
}
77-
.language-selector.open .language-dropdown {
78-
opacity: 1;
79-
visibility: visible;
80-
transform: translateY(0) scale(1);
81-
}
82-
.language-option {
83-
display: flex;
84-
align-items: center;
85-
gap: 10px;
86-
width: 100%;
87-
padding: 12px 16px;
88-
background: transparent;
89-
border: none;
90-
color: var(--text-primary, #c9d1d9);
91-
cursor: pointer;
92-
text-align: left;
93-
font-size: 0.9rem;
94-
font-family: inherit;
95-
transition: background 0.15s ease;
96-
}
97-
.language-option:first-child { border-radius: 9px 9px 0 0; }
98-
.language-option:last-child { border-radius: 0 0 9px 9px; }
99-
.language-option:hover {
100-
background: var(--bg-code, #1e2430);
101-
}
102-
.language-option.active {
103-
background: rgba(88, 166, 255, 0.15);
104-
color: var(--accent-blue, #58a6ff);
105-
}
106-
.language-option .lang-flag { font-size: 1.2rem; }
107-
.language-option .lang-info {
108-
display: flex;
109-
flex-direction: column;
110-
gap: 2px;
111-
}
112-
.language-option .lang-native {
113-
font-weight: 500;
114-
font-size: 0.9rem;
115-
}
116-
.language-option .lang-english {
117-
font-size: 0.75rem;
118-
color: var(--text-secondary, #8b949e);
119-
}
120-
.language-option.active .lang-english {
121-
color: var(--accent-blue, #58a6ff);
122-
opacity: 0.7;
123-
}
124-
.language-option .lang-check {
125-
margin-left: auto;
126-
opacity: 0;
127-
color: var(--accent-blue, #58a6ff);
128-
}
129-
.language-option.active .lang-check { opacity: 1; }
130-
131-
/* RTL Support */
132-
html[dir="rtl"] body { direction: rtl; }
133-
html[dir="rtl"] .sidebar {
134-
left: auto;
135-
right: 0;
136-
border-right: none;
137-
border-left: 1px solid var(--border-color, #30363d);
138-
}
139-
html[dir="rtl"] .content { margin-left: 0; margin-right: 280px; }
140-
html[dir="rtl"] .nav-section li a {
141-
border-left: none;
142-
border-right: 3px solid transparent;
143-
padding-left: 20px;
144-
padding-right: 17px;
145-
}
146-
html[dir="rtl"] .nav-section li a.active { border-right-color: var(--accent-blue, #58a6ff); }
147-
html[dir="rtl"] .language-dropdown { left: auto; right: 0; }
148-
html[dir="rtl"] .language-option { text-align: right; flex-direction: row-reverse; }
149-
html[dir="rtl"] .language-option .lang-check { margin-left: 0; margin-right: auto; }
150-
151-
@media (max-width: 768px) {
152-
html[dir="rtl"] .content { margin-right: 0; }
153-
html[dir="rtl"] .sidebar { transform: translateX(100%); }
154-
html[dir="rtl"] .sidebar.open { transform: translateX(0); }
155-
.language-selector-btn .language-selector-current { display: none; }
156-
.language-selector-btn .language-arrow { display: none; }
157-
}
158-
`;
159-
document.head.appendChild(style);
160-
}
21+
// CSS is now loaded via css/i18n.css - no injection needed
16122

16223
class I18n {
16324
constructor() {
@@ -328,8 +189,6 @@
328189
}
329190

330191
function initI18n() {
331-
injectStyles();
332-
333192
// Add selector to sidebar header
334193
const sidebarHeader = document.querySelector('.sidebar-header');
335194
if (sidebarHeader && !sidebarHeader.querySelector('.language-selector')) {

0 commit comments

Comments
 (0)