maciejpi/nordabiz
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

style: Sprint 3 - Chat page + Fluent CSS niebieski primary

Browse Source 
Zmiany graficzne:
- chat.html: wszystkie #7c3aed → #2E4872
- chat.html: wszystkie #5b21b6 → #1e3050
- fluent-nordabiz.css: zmienne Fluent na NordaBiz blue
- Sidebar, header, avatary, input focus, send button - niebieski

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Maciej Pienczyn 2026-01-30 14:21:19 +01:00
parent 1da42f25ad
commit b680e3f61c
2 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
static/css/fluent-nordabiz.css
View File

@ -7,10 +7,10 @@
* BRAND COLOR OVERRIDES (NordaBiz Blue instead of Microsoft Blue) * BRAND COLOR OVERRIDES (NordaBiz Blue instead of Microsoft Blue)
* ============================================================ */ * ============================================================ */
:root { :root {
--fluent-primary: #2563eb; --fluent-primary: #2E4872;
--fluent-primary-hover: #1e40af; --fluent-primary-hover: #1e3050;
--fluent-primary-pressed: #1e3a8a; --fluent-primary-pressed: #162438;
--fluent-primary-light: #eff6ff; --fluent-primary-light: #EDF0F5;
} }
/* ============================================================ /* ============================================================

34
templates/chat.html
View File

@ -66,7 +66,7 @@
.new-chat-btn { .new-chat-btn {
width: 100%; width: 100%;
padding: var(--spacing-md); padding: var(--spacing-md);
background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); background: linear-gradient(135deg, #1e3050 0%, #2E4872 100%);
color: white; color: white;
border: none; border: none;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
@ -191,7 +191,7 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: var(--spacing-md) var(--spacing-lg); padding: var(--spacing-md) var(--spacing-lg);
background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); background: linear-gradient(135deg, #1e3050 0%, #2E4872 100%);
color: white; color: white;
position: relative; position: relative;
z-index: 50; z-index: 50;
@ -258,7 +258,7 @@
} }
.message.assistant .message-avatar { .message.assistant .message-avatar {
background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); background: linear-gradient(135deg, #1e3050 0%, #2E4872 100%);
color: white; color: white;
} }
@ -298,7 +298,7 @@
} }
.thinking-badge-level { .thinking-badge-level {
color: #7c3aed; color: #2E4872;
font-weight: 500; font-weight: 500;
} }
@ -355,7 +355,7 @@
/* 💬 Linki do FORUM - fioletowy */ /* 💬 Linki do FORUM - fioletowy */
.message-content a.forum-link { .message-content a.forum-link {
background: #f5f3ff; background: #f5f3ff;
color: #7c3aed; color: #2E4872;
} }
.message-content a.forum-link:hover { .message-content a.forum-link:hover {
background: #ede9fe; background: #ede9fe;
@ -439,7 +439,7 @@
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 50%; border-radius: 50%;
background: #7c3aed; background: #2E4872;
animation: typingBounce 1.4s infinite; animation: typingBounce 1.4s infinite;
} }
@ -494,8 +494,8 @@
} }
.suggestion-chip:hover { .suggestion-chip:hover {
border-color: #7c3aed; border-color: #2E4872;
color: #7c3aed; color: #2E4872;
background: #f5f3ff; background: #f5f3ff;
} }
@ -529,13 +529,13 @@
.chat-input:focus { .chat-input:focus {
outline: none; outline: none;
border-color: #7c3aed; border-color: #2E4872;
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
} }
.send-btn { .send-btn {
padding: var(--spacing-md) var(--spacing-lg); padding: var(--spacing-md) var(--spacing-lg);
background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); background: linear-gradient(135deg, #1e3050 0%, #2E4872 100%);
color: white; color: white;
border: none; border: none;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
@ -672,7 +672,7 @@
.thinking-dropdown-header strong { .thinking-dropdown-header strong {
display: block; display: block;
color: #5b21b6; color: #1e3050;
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
margin-bottom: 4px; margin-bottom: 4px;
} }
@ -700,7 +700,7 @@
.thinking-option.active { .thinking-option.active {
background: #f5f3ff; background: #f5f3ff;
border-left: 3px solid #7c3aed; border-left: 3px solid #2E4872;
} }
.thinking-option-header { .thinking-option-header {
@ -723,7 +723,7 @@
.thinking-option-badge { .thinking-option-badge {
font-size: 10px; font-size: 10px;
padding: 2px 6px; padding: 2px 6px;
background: #7c3aed; background: #2E4872;
color: white; color: white;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
font-weight: 500; font-weight: 500;
@ -924,7 +924,7 @@
} }
.model-name { .model-name {
background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); background: linear-gradient(135deg, #1e3050 0%, #2E4872 100%);
color: white; color: white;
padding: var(--spacing-sm) var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius); border-radius: var(--radius);
@ -1011,7 +1011,7 @@
} }
.timeline-item.current::before { .timeline-item.current::before {
background: #7c3aed; background: #2E4872;
box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2); box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2);
} }
@ -1045,7 +1045,7 @@
} }
.timeline-badge.upgrade { .timeline-badge.upgrade {
background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); background: linear-gradient(135deg, #1e3050 0%, #2E4872 100%);
color: white; color: white;
} }
@ -1192,7 +1192,7 @@
} }
.video-help-tips li strong { .video-help-tips li strong {
color: #5b21b6; color: #1e3050;
} }
@media (max-width: 768px) { @media (max-width: 768px) {