Skip to content

Commit 51fad77

Browse files
author
Paweł Kędzia
committed
Merge branch 'features/web'
2 parents f78410d + f48de25 commit 51fad77

File tree

6 files changed

+491
-15
lines changed

6 files changed

+491
-15
lines changed

‎llm_router_web/web/static/style-ancient.css‎

Lines changed: 257 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
1+
/* ancient-theme.css – styl w klimacie pergaminu i średniowiecznego rękopisu */
2+
:root {
3+
/* Kolory „papieru pergaminowego” i „atramentu” */
4+
--bg: #f8f0e3; /* tło */
5+
--fg: #3b2b25; /* tekst */
6+
--muted: #7a5c4f; /* przyciemnione elementy */
7+
--card: #fff8e1; /* tło kart / paneli */
8+
--accent: #5c4033; /* akcent (przyciski, linki) */
9+
--danger: #a02b2b; /* przyciski niebezpieczeństwa */
10+
--danger-soft: #c96d6d; /* tło przycisków niebezpiecznych */
11+
--ok: #3b7a34; /* przyciski pozytywne */
12+
}
13+
14+
/* ---------- Typografia ---------- */
15+
body {
16+
background: var(--bg);
17+
color: var(--fg);
18+
font-family: "Libre Baskerville", "Goudy Old Style", Georgia, serif;
19+
line-height: 1.6;
20+
margin: 0;
21+
}
22+
23+
/* nagłówki – trochę większe, z delikatnym zdobieniem */
24+
h1, h2, h3, h4, h5, h6 {
25+
font-family: "Cinzel", "Times New Roman", serif;
26+
color: var(--accent);
27+
margin-top: 1.2em;
28+
margin-bottom: 0.6em;
29+
}
30+
31+
/* linki – podkreślenie przypominające ręczne pismo */
32+
a {
33+
color: var(--accent);
34+
text-decoration: underline dotted;
35+
}
36+
37+
a:hover {
38+
color: var(--ok);
39+
}
40+
41+
/* ---------- Kontenery i karty ---------- */
42+
.container {
43+
max-width: 1100px;
44+
padding: 0 2rem;
45+
margin: 2rem auto;
46+
}
47+
48+
/* panele – lekko cieniowane, z obramowaniem w stylu pergaminu */
49+
50+
/*.panel {*/
51+
/* !* już istnieje: overflow‑x:auto; overflow‑y:visible; *!*/
52+
/* !* dodatkowo: zapewniamy, że panel nie rozciąga się w pionie*/
53+
/* (zachowujemy dotychczasowy wygląd). *!*/
54+
/* overflow-x: auto;*/
55+
/* overflow-y: visible;*/
56+
/*}*/
57+
58+
/*!* Usuń wymuszenie 100 % szerokości i pozwól tabeli rosnąć*/
59+
/* w poziomie, ale nie pozwól jej być węższą niż panel. *!*/
60+
/*.panel .table {*/
61+
/* width: auto; !* naturalna szerokość tabeli *!*/
62+
/* min-width: 100%; !* nie pozwalamy, by była węższa niż panel *!*/
63+
/* max-width: none; !* wyłącz ewentualne ograniczenia z poprzednich reguł *!*/
64+
/* table-layout: auto; !* zachowujemy automatyczny układ kolumn *!*/
65+
/*}*/
66+
67+
/*!* Opcjonalnie – lekki odstęp po prawej stronie, by przycisk przewijania nie przylegał do krawędzi *!*/
68+
/*.panel .table th,*/
69+
/*.panel .table td {*/
70+
/* white-space: nowrap; !* zachowuje czytelność w trybie pergaminu *!*/
71+
/*}*/
72+
73+
/*!* Zapewniamy, że wewnętrzne elementy (np. przyciski w tabeli) nie wyłamują się poza tabelę *!*/
74+
/*.panel .table .btn,*/
75+
/*.panel .table .btn-small {*/
76+
/* max-width: none; !* przyciski mogą się rozciągać w komórce *!*/
77+
/*}*/
78+
79+
/* ---------- Tabele ---------- */
80+
.table {
81+
width: 100%;
82+
border-collapse: separate;
83+
border-spacing: 0;
84+
background: var(--card);
85+
border: 2px solid var(--muted);
86+
}
87+
88+
.table th,
89+
.table td {
90+
padding: 0.75rem 1rem;
91+
border-bottom: 1px solid var(--muted);
92+
}
93+
94+
.table th {
95+
background: var(--accent);
96+
color: #fff;
97+
font-family: "Cinzel", serif;
98+
text-align: left;
99+
}
100+
101+
.table tr:last-child td {
102+
border-bottom: none;
103+
}
104+
105+
/* ---------- Formularze ---------- */
106+
input,
107+
select,
108+
textarea {
109+
font-family: inherit;
110+
font-size: 1rem;
111+
background: #fff;
112+
border: 1px solid var(--muted);
113+
border-radius: 4px;
114+
padding: 0.5rem 0.75rem;
115+
color: var(--fg);
116+
}
117+
118+
input:focus,
119+
select:focus,
120+
textarea:focus {
121+
outline: none;
122+
border-color: var(--accent);
123+
box-shadow: 0 0 3px var(--accent);
124+
}
125+
126+
/* ---------- Przycisk podstawowy ---------- */
127+
.btn {
128+
background: var(--accent);
129+
color: #fff;
130+
border: none;
131+
border-radius: 4px;
132+
padding: 0.5rem 1rem;
133+
cursor: pointer;
134+
font-family: "Cinzel", serif;
135+
font-size: 0.95rem;
136+
transition: transform 0.1s ease-in-out, opacity 0.2s;
137+
}
138+
139+
.btn:hover {
140+
opacity: 0.85;
141+
transform: translateY(-1px);
142+
}
143+
144+
.btn:active {
145+
transform: translateY(1px);
146+
}
147+
148+
/* Przycisk drugorzędny */
149+
.btn-secondary {
150+
background: #e5d8c5;
151+
color: var(--fg);
152+
}
153+
154+
/* Przycisk niebezpieczny */
155+
.danger {
156+
background: var(--danger-soft);
157+
color: #fff;
158+
}
159+
160+
/* Przycisk pozytywny */
161+
.success {
162+
background: var(--ok);
163+
color: #fff;
164+
}
165+
166+
/* ---------- Kody i bloki pre‑formatowane ---------- */
167+
pre,
168+
.pre {
169+
background: #fff8e1;
170+
border: 1px solid var(--muted);
171+
border-radius: 6px;
172+
padding: 1rem;
173+
overflow: auto;
174+
font-family: "Courier Prime", "Courier New", monospace;
175+
font-size: 0.95rem;
176+
}
177+
178+
/* Inline code */
179+
code {
180+
background: rgba(0, 0, 0, 0.05);
181+
color: var(--accent);
182+
padding: 0.2rem 0.4rem;
183+
border-radius: 3px;
184+
font-family: "Courier Prime", monospace;
185+
}
186+
187+
/* ---------- Flasy (komunikaty) ---------- */
188+
.flash {
189+
padding: 0.75rem 1rem;
190+
border-radius: 4px;
191+
margin: 0.5rem 0;
192+
}
193+
194+
.flash.success {
195+
background: var(--ok);
196+
color: #fff;
197+
}
198+
199+
.flash.error {
200+
background: var(--danger);
201+
color: #fff;
202+
}
203+
204+
.flash.info {
205+
background: var(--accent);
206+
color: #fff;
207+
}
208+
209+
/* ---------- Pasek nawigacji (topbar) ---------- */
210+
.topbar {
211+
background: var(--accent);
212+
color: #fff;
213+
height: 64px;
214+
display: flex;
215+
align-items: center;
216+
justify-content: space-between;
217+
padding: 0 1.5rem;
218+
border-bottom: 2px solid var(--muted);
219+
}
220+
221+
.logo a {
222+
color: #fff;
223+
font-family: "Cinzel", serif;
224+
font-size: 1.4rem;
225+
}
226+
227+
/* ---------- Menu w topbarze ---------- */
228+
.menu a {
229+
background: var(--card);
230+
color: var(--fg);
231+
padding: 0.5rem 1rem;
232+
border-radius: 4px;
233+
margin-left: 0.5rem;
234+
}
235+
236+
.menu a:hover,
237+
.menu a.active {
238+
background: var(--accent);
239+
color: #fff;
240+
}
241+
242+
/* ---------- Responsywność (minimalna) ---------- */
243+
@media (max-width: 768px) {
244+
.topbar, .menu {
245+
flex-direction: column;
246+
height: auto;
247+
padding: 0.5rem;
248+
}
249+
250+
.menu a {
251+
margin: 0.25rem 0;
252+
}
253+
254+
.container {
255+
padding: 0 1rem;
256+
}
257+
}

‎llm_router_web/web/static/style-dark.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,11 @@ input, select, textarea {
5252
.danger {
5353
background: var(--danger);
5454
color: #fff;
55+
}
56+
57+
/* ----- Dark‑theme – niewielka korekta listy wyboru ----- */
58+
#theme-select {
59+
background: #161b22;
60+
border-color: #30363d;
61+
color: #c9d1d9;
5562
}

0 commit comments

Comments
 (0)