feat: implement dashboard mobile responsiveness v3 overhaul #80
@@ -194,23 +194,89 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 767px) {
|
||||||
|
.current-reading-card {
|
||||||
|
background: #1e1e22; /* Lighter anthracite slate for depth */
|
||||||
|
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* Ambient card shadow */
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
.card-layout {
|
.card-layout {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: stretch;
|
||||||
text-align: center;
|
text-align: left;
|
||||||
gap: 1.5rem;
|
gap: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.book-title, .chapter-name {
|
.book-cover {
|
||||||
|
align-self: center;
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.book-details {
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.book-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
text-align: left;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.author-name {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
.header-info, .chapter-progress {
|
.header-info, .chapter-progress {
|
||||||
align-items: center;
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chapter-name {
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chapter-progress {
|
||||||
|
margin: 1.25rem 0; /* Margin separator before tracking bar */
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-container {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.book-excerpt {
|
||||||
|
display: block; /* Normal display to wrap synopsis */
|
||||||
|
overflow: visible;
|
||||||
|
-webkit-line-clamp: none;
|
||||||
|
text-overflow: clip;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions .btn-nexus {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0.95rem 1.5rem; /* Larger touch target */
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .current-reading-card {
|
||||||
|
background: #ffffff; /* Pure white card surface for light theme */
|
||||||
|
border-color: rgba(45, 42, 38, 0.08);
|
||||||
|
box-shadow: 0 12px 24px rgba(139, 130, 115, 0.12);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* ============================================================
|
/* ============================================================
|
||||||
LIGHT THEME OVERRIDES — "Warm Paper / Soft Sepia"
|
LIGHT THEME OVERRIDES — "Warm Paper / Soft Sepia"
|
||||||
============================================================ */
|
============================================================ */
|
||||||
|
|||||||
@@ -110,6 +110,32 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
|
<!-- Reader Mobile Dock v3 -->
|
||||||
|
<nav class="reader-mobile-dock">
|
||||||
|
<NavLink class="dock-item" href="/dashboard" Match="NavLinkMatch.All" title="Pulpit">
|
||||||
|
<NexusIcon Name="home" Size="20" />
|
||||||
|
<span class="dock-text">Pulpit</span>
|
||||||
|
</NavLink>
|
||||||
|
<NavLink class="dock-item" href="/catalog" title="Katalog">
|
||||||
|
<NexusIcon Name="layout" Size="20" />
|
||||||
|
<span class="dock-text">Katalog</span>
|
||||||
|
</NavLink>
|
||||||
|
<NavLink class="dock-item central-action" href="/intelligence" title="Globalne AI">
|
||||||
|
<div class="central-action-glow"></div>
|
||||||
|
<div class="central-action-inner">
|
||||||
|
<NexusIcon Name="robot" Size="24" />
|
||||||
|
</div>
|
||||||
|
</NavLink>
|
||||||
|
<NavLink class="dock-item" href="/my-books" title="Moje">
|
||||||
|
<NexusIcon Name="book-open" Size="20" />
|
||||||
|
<span class="dock-text">Moje</span>
|
||||||
|
</NavLink>
|
||||||
|
<NavLink class="dock-item" href="/profile" title="Konto">
|
||||||
|
<NexusIcon Name="user" Size="20" />
|
||||||
|
<span class="dock-text">Konto</span>
|
||||||
|
</NavLink>
|
||||||
|
</nav>
|
||||||
</Authorized>
|
</Authorized>
|
||||||
</AuthorizeView>
|
</AuthorizeView>
|
||||||
|
|
||||||
|
|||||||
@@ -194,7 +194,11 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
.reader-mobile-dock {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
.nexus-mobile-topbar {
|
.nexus-mobile-topbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -418,4 +422,123 @@
|
|||||||
.theme-light .nexus-mobile-topbar {
|
.theme-light .nexus-mobile-topbar {
|
||||||
border-bottom-color: rgba(0, 0, 0, 0.08);
|
border-bottom-color: rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Content padding for bottom navigation dock */
|
||||||
|
.hub-content {
|
||||||
|
padding: 1.25rem 1.25rem calc(1.25rem + 72px + env(safe-area-inset-bottom, 0px)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reader Mobile Dock v3 */
|
||||||
|
.reader-mobile-dock {
|
||||||
|
display: flex;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: calc(64px + env(safe-area-inset-bottom, 0px));
|
||||||
|
background: rgba(26, 26, 30, 0.75); /* Translucent dark mode */
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.08); /* Microscopic border */
|
||||||
|
z-index: 150;
|
||||||
|
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dock-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
color: var(--text-muted);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.2s ease, transform 0.2s ease;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dock-item:hover, .dock-item.active {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dock-text {
|
||||||
|
display: none !important; /* Eliminate visual noise */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Central action button style */
|
||||||
|
.dock-item.central-action {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
flex: 0 0 58px;
|
||||||
|
width: 58px;
|
||||||
|
height: 58px;
|
||||||
|
margin-top: 0;
|
||||||
|
transform: translateY(-20px); /* Elevate layout */
|
||||||
|
z-index: 160;
|
||||||
|
}
|
||||||
|
|
||||||
|
.central-action-inner {
|
||||||
|
width: 58px;
|
||||||
|
height: 58px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--accent); /* brand-green */
|
||||||
|
color: #0a0a0a;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: 2px solid var(--accent); /* Crisp green edge */
|
||||||
|
box-shadow: 0 8px 24px rgba(0, 255, 153, 0.2); /* Neon drop shadow */
|
||||||
|
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dock-item.central-action:hover .central-action-inner,
|
||||||
|
.dock-item.central-action.active .central-action-inner {
|
||||||
|
transform: scale(1.08) translateY(-2px);
|
||||||
|
box-shadow: 0 12px 28px rgba(0, 255, 153, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.central-action-glow {
|
||||||
|
position: absolute;
|
||||||
|
inset: 4px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--accent);
|
||||||
|
filter: blur(10px);
|
||||||
|
opacity: 0.3;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Light Theme Overrides */
|
||||||
|
.theme-light .reader-mobile-dock {
|
||||||
|
background: rgba(255, 255, 255, 0.85); /* Translucent light mode */
|
||||||
|
border-top-color: rgba(45, 42, 38, 0.08); /* Light theme microscopic border */
|
||||||
|
box-shadow: 0 -10px 30px rgba(139, 130, 115, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .dock-item {
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .dock-item:hover, .theme-light .dock-item.active {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .central-action-inner {
|
||||||
|
background: var(--accent);
|
||||||
|
color: #ffffff;
|
||||||
|
border: 2px solid var(--accent);
|
||||||
|
box-shadow: 0 8px 24px rgba(16, 185, 129, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .dock-item.central-action:hover .central-action-inner,
|
||||||
|
.theme-light .dock-item.central-action.active .central-action-inner {
|
||||||
|
box-shadow: 0 12px 28px rgba(16, 185, 129, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .central-action-glow {
|
||||||
|
background: var(--accent);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -388,3 +388,23 @@
|
|||||||
color: var(--text-main);
|
color: var(--text-main);
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.catalog-page {
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.catalog-header {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.catalog-header h1 {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.catalog-grid, .loading-grid {
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -7,6 +7,8 @@
|
|||||||
@inject IIdentityService IdentityService
|
@inject IIdentityService IdentityService
|
||||||
@inject NavigationManager NavigationManager
|
@inject NavigationManager NavigationManager
|
||||||
@inject ISyncService SyncService
|
@inject ISyncService SyncService
|
||||||
|
@inject IJSRuntime JS
|
||||||
|
@using Microsoft.JSInterop
|
||||||
@attribute [Authorize]
|
@attribute [Authorize]
|
||||||
@implements IDisposable
|
@implements IDisposable
|
||||||
|
|
||||||
@@ -54,55 +56,86 @@
|
|||||||
<section class="integration-card glass-panel">
|
<section class="integration-card glass-panel">
|
||||||
<div class="panel-header">
|
<div class="panel-header">
|
||||||
<h4>Integracja Wiedzy</h4>
|
<h4>Integracja Wiedzy</h4>
|
||||||
<NexusIcon Name="arrow-right" Size="16" />
|
<button class="view-toggle-btn" @onclick="ToggleGraphMode" type="button" aria-label="Toggle View">
|
||||||
|
<NexusIcon Name="@(_showSimplifiedList ? "map" : "list")" Size="14" />
|
||||||
|
<span>@(_showSimplifiedList ? "Pokaż Wykres" : "Pokaż Listę")</span>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="graph-placeholder">
|
|
||||||
<div class="graph-node central" title="Ośrodek Wiedzy Nexus Reader"></div>
|
@if (_showSimplifiedList)
|
||||||
|
|
||||||
@if (_profile?.MappedConcepts != null && _profile.MappedConcepts.Any())
|
|
||||||
{
|
|
||||||
<div @key='"satellite-concepts-container"' style="display: contents;">
|
|
||||||
@for (int i = 0; i < _profile.MappedConcepts.Count; i++)
|
|
||||||
{
|
|
||||||
var concept = _profile.MappedConcepts[i];
|
|
||||||
var angle = i * (360.0 / _profile.MappedConcepts.Count);
|
|
||||||
var dist = 65;
|
|
||||||
<div @key="concept.Id" class="graph-node satellite"
|
|
||||||
style="--angle: @(angle)deg; --dist: @(dist)px;"
|
|
||||||
title="[@concept.Type] @concept.Content"
|
|
||||||
@onmouseover="() => SetHoveredConcept(concept)"
|
|
||||||
@onmouseout="ClearHoveredConcept">
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
<div @key='"satellite-placeholders-container"' style="display: contents;">
|
|
||||||
<div @key='"satellite-placeholder-0"' class="graph-node satellite" style="--angle: 0deg; --dist: 60px;"></div>
|
|
||||||
<div @key='"satellite-placeholder-1"' class="graph-node satellite" style="--angle: 120deg; --dist: 50px;"></div>
|
|
||||||
<div @key='"satellite-placeholder-2"' class="graph-node satellite" style="--angle: 240deg; --dist: 70px;"></div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
<div class="active-node-label">
|
|
||||||
@(string.IsNullOrEmpty(_hoveredConceptLabel) ? "TU JESTEŚ" : _hoveredConceptLabel)
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
@if (_hoveredConcept != null)
|
|
||||||
{
|
{
|
||||||
<div class="concept-detail-toast">
|
<div class="concepts-linear-stack">
|
||||||
<span class="concept-type">@_hoveredConcept.Type</span>
|
@if (_profile?.MappedConcepts != null && _profile.MappedConcepts.Any())
|
||||||
<p class="concept-content">@_hoveredConcept.Content</p>
|
{
|
||||||
|
<div class="concept-linear-list">
|
||||||
|
@foreach (var concept in _profile.MappedConcepts)
|
||||||
|
{
|
||||||
|
<div class="concept-linear-item">
|
||||||
|
<span class="concept-badge @concept.Type.ToLower()">@concept.Type</span>
|
||||||
|
<span class="concept-text" title="@concept.Content">@concept.Content</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<div class="concepts-empty-list">
|
||||||
|
<NexusIcon Name="info" Size="20" />
|
||||||
|
<p>Brak pojęć. Rozpocznij czytanie, aby AI wyodrębniło kluczowe koncepty.</p>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
<div class="concept-detail-toast placeholder">
|
<div class="graph-placeholder">
|
||||||
<span class="concept-type">Mapowanie AI</span>
|
<div class="graph-node central" title="Ośrodek Wiedzy Nexus Reader"></div>
|
||||||
<p class="concept-content">Najedź na węzeł, aby zbadać pojęcie wydobyte przez Nexus AI.</p>
|
|
||||||
|
@if (_profile?.MappedConcepts != null && _profile.MappedConcepts.Any())
|
||||||
|
{
|
||||||
|
<div @key='"satellite-concepts-container"' style="display: contents;">
|
||||||
|
@for (int i = 0; i < _profile.MappedConcepts.Count; i++)
|
||||||
|
{
|
||||||
|
var concept = _profile.MappedConcepts[i];
|
||||||
|
var angle = i * (360.0 / _profile.MappedConcepts.Count);
|
||||||
|
var dist = 65;
|
||||||
|
<div @key="concept.Id" class="graph-node satellite"
|
||||||
|
style="--angle: @(angle)deg; --dist: @(dist)px;"
|
||||||
|
title="[@concept.Type] @concept.Content"
|
||||||
|
@onmouseover="() => SetHoveredConcept(concept)"
|
||||||
|
@onmouseout="ClearHoveredConcept">
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<div @key='"satellite-placeholders-container"' style="display: contents;">
|
||||||
|
<div @key='"satellite-placeholder-0"' class="graph-node satellite" style="--angle: 0deg; --dist: 60px;"></div>
|
||||||
|
<div @key='"satellite-placeholder-1"' class="graph-node satellite" style="--angle: 120deg; --dist: 50px;"></div>
|
||||||
|
<div @key='"satellite-placeholder-2"' class="graph-node satellite" style="--angle: 240deg; --dist: 70px;"></div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div class="active-node-label">
|
||||||
|
@(string.IsNullOrEmpty(_hoveredConceptLabel) ? "TU JESTEŚ" : _hoveredConceptLabel)
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@if (_hoveredConcept != null)
|
||||||
|
{
|
||||||
|
<div class="concept-detail-toast">
|
||||||
|
<span class="concept-type">@_hoveredConcept.Type</span>
|
||||||
|
<p class="concept-content">@_hoveredConcept.Content</p>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<div class="concept-detail-toast placeholder">
|
||||||
|
<span class="concept-type">Mapowanie AI</span>
|
||||||
|
<p class="concept-content">Najedź na węzeł, aby zbadać pojęcie wydobyte przez Nexus AI.</p>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -173,6 +206,32 @@
|
|||||||
private UserProfileDto? _profile;
|
private UserProfileDto? _profile;
|
||||||
private MappedConceptDto? _hoveredConcept;
|
private MappedConceptDto? _hoveredConcept;
|
||||||
private string _hoveredConceptLabel = string.Empty;
|
private string _hoveredConceptLabel = string.Empty;
|
||||||
|
private bool _showSimplifiedList = false;
|
||||||
|
|
||||||
|
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||||
|
{
|
||||||
|
if (firstRender)
|
||||||
|
{
|
||||||
|
try
|
||||||
|
{
|
||||||
|
var isMobile = await JS.InvokeAsync<bool>("eval", "window.innerWidth < 768");
|
||||||
|
if (isMobile)
|
||||||
|
{
|
||||||
|
_showSimplifiedList = true;
|
||||||
|
StateHasChanged();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch
|
||||||
|
{
|
||||||
|
// Fallback for tests or prerendering
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private void ToggleGraphMode()
|
||||||
|
{
|
||||||
|
_showSimplifiedList = !_showSimplifiedList;
|
||||||
|
}
|
||||||
|
|
||||||
protected override async Task OnInitializedAsync()
|
protected override async Task OnInitializedAsync()
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -524,14 +524,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Mobile Dashboard Overrides */
|
/* Mobile Dashboard Overrides */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 767px) {
|
||||||
.dashboard-content {
|
.dashboard-content {
|
||||||
padding: 1.25rem 0.75rem;
|
padding: 1.25rem 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-header {
|
.profile-header {
|
||||||
padding: 1.5rem 1rem;
|
padding: 24px 16px;
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-visual {
|
.profile-visual {
|
||||||
@@ -575,6 +578,14 @@
|
|||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: var(--text-main);
|
||||||
|
}
|
||||||
|
|
||||||
.main-grid {
|
.main-grid {
|
||||||
grid-template-columns: 1fr !important;
|
grid-template-columns: 1fr !important;
|
||||||
gap: 1.25rem !important;
|
gap: 1.25rem !important;
|
||||||
@@ -725,5 +736,190 @@
|
|||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- Concepts Linear Stack for Mobile/Utility Switch --- */
|
||||||
|
.concepts-linear-stack {
|
||||||
|
height: 180px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow-y: auto;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.concept-linear-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.concept-linear-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 0.6rem 0.75rem;
|
||||||
|
background: rgba(255, 255, 255, 0.02);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--text-main);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.concept-linear-item:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
border-color: rgba(0, 255, 153, 0.2);
|
||||||
|
transform: translateX(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.concept-badge {
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.concept-badge.rule {
|
||||||
|
background: rgba(255, 70, 70, 0.1);
|
||||||
|
color: #ff8b8b;
|
||||||
|
border: 1px solid rgba(255, 70, 70, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.concept-badge.definition {
|
||||||
|
background: rgba(255, 176, 58, 0.1);
|
||||||
|
color: #ffd18c;
|
||||||
|
border: 1px solid rgba(255, 176, 58, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.concept-badge.table {
|
||||||
|
background: rgba(217, 70, 239, 0.1);
|
||||||
|
color: #f5d0fe;
|
||||||
|
border: 1px solid rgba(217, 70, 239, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.concept-badge.section {
|
||||||
|
background: rgba(59, 130, 246, 0.1);
|
||||||
|
color: #93c5fd;
|
||||||
|
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.concept-badge.bridge {
|
||||||
|
background: rgba(6, 182, 212, 0.1);
|
||||||
|
color: #67e8f9;
|
||||||
|
border: 1px solid rgba(6, 182, 212, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.concept-badge.concept {
|
||||||
|
background: rgba(0, 210, 196, 0.05);
|
||||||
|
color: #e0e0e0;
|
||||||
|
border: 1px solid rgba(0, 210, 196, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.concept-text {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.concepts-empty-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
text-align: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.concepts-empty-list p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-toggle-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.35rem;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
color: var(--text-muted);
|
||||||
|
padding: 0.35rem 0.75rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-toggle-btn:hover {
|
||||||
|
background: rgba(0, 255, 153, 0.08);
|
||||||
|
border-color: var(--accent);
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Light Theme Overrides for Concepts Stack --- */
|
||||||
|
.theme-light .concept-linear-item {
|
||||||
|
background: rgba(0, 0, 0, 0.02);
|
||||||
|
border-color: rgba(0, 0, 0, 0.05);
|
||||||
|
color: var(--text-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .concept-linear-item:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.04);
|
||||||
|
border-color: rgba(16, 185, 129, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .concept-badge.rule {
|
||||||
|
background: rgba(220, 38, 38, 0.05);
|
||||||
|
color: #991b1b;
|
||||||
|
border-color: rgba(220, 38, 38, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .concept-badge.definition {
|
||||||
|
background: rgba(217, 119, 6, 0.05);
|
||||||
|
color: #92400e;
|
||||||
|
border-color: rgba(217, 119, 6, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .concept-badge.table {
|
||||||
|
background: rgba(192, 132, 252, 0.05);
|
||||||
|
color: #6b21a8;
|
||||||
|
border-color: rgba(192, 132, 252, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .concept-badge.section {
|
||||||
|
background: rgba(37, 99, 235, 0.05);
|
||||||
|
color: #1e3a8a;
|
||||||
|
border-color: rgba(37, 99, 235, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .concept-badge.bridge {
|
||||||
|
background: rgba(8, 145, 178, 0.05);
|
||||||
|
color: #155e75;
|
||||||
|
border-color: rgba(8, 145, 178, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .concept-badge.concept {
|
||||||
|
background: rgba(13, 148, 136, 0.03);
|
||||||
|
color: #115e59;
|
||||||
|
border-color: rgba(13, 148, 136, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .view-toggle-btn {
|
||||||
|
background: rgba(0, 0, 0, 0.02);
|
||||||
|
border-color: rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .view-toggle-btn:hover {
|
||||||
|
background: rgba(16, 185, 129, 0.08);
|
||||||
|
border-color: var(--accent);
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -407,3 +407,37 @@
|
|||||||
.theme-light .progress-bar {
|
.theme-light .progress-bar {
|
||||||
background: #e4e1d9;
|
background: #e4e1d9;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.my-books-page {
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-books-header {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title-section h1 {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title-section .subtitle {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-book-trigger {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.9rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.books-grid, .loading-grid {
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8,6 +8,7 @@
|
|||||||
--text-muted: #a1a1aa;
|
--text-muted: #a1a1aa;
|
||||||
--accent: #00ff99;
|
--accent: #00ff99;
|
||||||
--accent-glow: rgba(0, 255, 153, 0.3);
|
--accent-glow: rgba(0, 255, 153, 0.3);
|
||||||
|
--border: rgba(255, 255, 255, 0.05);
|
||||||
|
|
||||||
/* Legacy mapping for backwards compatibility */
|
/* Legacy mapping for backwards compatibility */
|
||||||
--nexus-neon: var(--accent);
|
--nexus-neon: var(--accent);
|
||||||
@@ -152,6 +153,7 @@
|
|||||||
--text-muted: #a1a1aa;
|
--text-muted: #a1a1aa;
|
||||||
--accent: #00ff99;
|
--accent: #00ff99;
|
||||||
--accent-glow: rgba(0, 255, 153, 0.3);
|
--accent-glow: rgba(0, 255, 153, 0.3);
|
||||||
|
--border: rgba(255, 255, 255, 0.05);
|
||||||
|
|
||||||
/* Legacy mapping for backwards compatibility */
|
/* Legacy mapping for backwards compatibility */
|
||||||
--nexus-bg: var(--bg-base);
|
--nexus-bg: var(--bg-base);
|
||||||
@@ -169,6 +171,7 @@
|
|||||||
--text-muted: #78716c;
|
--text-muted: #78716c;
|
||||||
--accent: #10b981;
|
--accent: #10b981;
|
||||||
--accent-glow: rgba(16, 185, 129, 0.2);
|
--accent-glow: rgba(16, 185, 129, 0.2);
|
||||||
|
--border: rgba(0, 0, 0, 0.08);
|
||||||
|
|
||||||
/* Legacy mapping for backwards compatibility */
|
/* Legacy mapping for backwards compatibility */
|
||||||
--nexus-bg: var(--bg-base);
|
--nexus-bg: var(--bg-base);
|
||||||
|
|||||||
Reference in New Issue
Block a user