feat: implement dashboard mobile responsiveness v3 overhaul #80
@@ -194,23 +194,89 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.card-layout {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 1.5rem;
|
||||
@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);
|
||||
}
|
||||
|
||||
.book-title, .chapter-name {
|
||||
.card-layout {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
text-align: left;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.author-name {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.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"
|
||||
============================================================ */
|
||||
|
||||
@@ -110,6 +110,32 @@
|
||||
</button>
|
||||
</div>
|
||||
</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>
|
||||
</AuthorizeView>
|
||||
|
||||
|
||||
@@ -194,7 +194,11 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.reader-mobile-dock {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.nexus-mobile-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -418,4 +422,123 @@
|
||||
.theme-light .nexus-mobile-topbar {
|
||||
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);
|
||||
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 NavigationManager NavigationManager
|
||||
@inject ISyncService SyncService
|
||||
@inject IJSRuntime JS
|
||||
@using Microsoft.JSInterop
|
||||
@attribute [Authorize]
|
||||
@implements IDisposable
|
||||
|
||||
@@ -54,55 +56,86 @@
|
||||
<section class="integration-card glass-panel">
|
||||
<div class="panel-header">
|
||||
<h4>Integracja Wiedzy</h4>
|
||||
<NexusIcon Name="arrow-right" Size="16" />
|
||||
</div>
|
||||
<div class="graph-placeholder">
|
||||
<div class="graph-node central" title="Ośrodek Wiedzy Nexus Reader"></div>
|
||||
|
||||
@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>
|
||||
<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>
|
||||
|
||||
@if (_hoveredConcept != null)
|
||||
@if (_showSimplifiedList)
|
||||
{
|
||||
<div class="concept-detail-toast">
|
||||
<span class="concept-type">@_hoveredConcept.Type</span>
|
||||
<p class="concept-content">@_hoveredConcept.Content</p>
|
||||
<div class="concepts-linear-stack">
|
||||
@if (_profile?.MappedConcepts != null && _profile.MappedConcepts.Any())
|
||||
{
|
||||
<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>
|
||||
}
|
||||
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 class="graph-placeholder">
|
||||
<div class="graph-node central" title="Ośrodek Wiedzy Nexus Reader"></div>
|
||||
|
||||
@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">
|
||||
<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>
|
||||
|
||||
@@ -173,6 +206,32 @@
|
||||
private UserProfileDto? _profile;
|
||||
private MappedConceptDto? _hoveredConcept;
|
||||
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()
|
||||
{
|
||||
|
||||
@@ -524,14 +524,17 @@
|
||||
}
|
||||
|
||||
/* Mobile Dashboard Overrides */
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
.dashboard-content {
|
||||
padding: 1.25rem 0.75rem;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
padding: 1.5rem 1rem;
|
||||
padding: 24px 16px;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.profile-visual {
|
||||
@@ -575,6 +578,14 @@
|
||||
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 {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 1.25rem !important;
|
||||
@@ -725,5 +736,190 @@
|
||||
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 {
|
||||
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;
|
||||
--accent: #00ff99;
|
||||
--accent-glow: rgba(0, 255, 153, 0.3);
|
||||
--border: rgba(255, 255, 255, 0.05);
|
||||
|
||||
/* Legacy mapping for backwards compatibility */
|
||||
--nexus-neon: var(--accent);
|
||||
@@ -152,6 +153,7 @@
|
||||
--text-muted: #a1a1aa;
|
||||
--accent: #00ff99;
|
||||
--accent-glow: rgba(0, 255, 153, 0.3);
|
||||
--border: rgba(255, 255, 255, 0.05);
|
||||
|
||||
/* Legacy mapping for backwards compatibility */
|
||||
--nexus-bg: var(--bg-base);
|
||||
@@ -169,6 +171,7 @@
|
||||
--text-muted: #78716c;
|
||||
--accent: #10b981;
|
||||
--accent-glow: rgba(16, 185, 129, 0.2);
|
||||
--border: rgba(0, 0, 0, 0.08);
|
||||
|
||||
/* Legacy mapping for backwards compatibility */
|
||||
--nexus-bg: var(--bg-base);
|
||||
|
||||
Reference in New Issue
Block a user