This repository has no description
1/* src/components/common/RelatedPagesNav.css */
2
3.related-pages-container {
4 border-radius: 6px;
5 background-color: var(--navbar-bg, #fff);
6 overflow: hidden;
7 transition: all 0.3s ease;
8 border: 1px solid var(--card-border, #e2e8f0);
9 }
10
11 .related-pages-title {
12 padding: 15px;
13 margin: 0 !important;
14 font-weight: 600;
15 color: var(--text);
16 border-bottom: 1px solid var(--card-border, #e2e8f0);
17 background-color: var(--background);
18 }
19
20 .related-pages-title h3 {
21 padding: 15px;
22 margin: 0 !important;
23 font-weight: 600;
24 color: var(--text);
25 border-bottom: 1px solid var(--card-border, #e2e8f0);
26 background-color: var(--background);
27 }
28
29 .related-pages-links {
30 display: flex;
31 flex-direction: column;
32 }
33
34 .related-page-link {
35 display: flex;
36 justify-content: space-between;
37 align-items: center;
38 text-decoration: none;
39 padding: 15px;
40 transition: all 0.2s ease;
41 color: var(--text);
42 border-bottom: 1px solid var(--card-border, #e2e8f0);
43 }
44
45 .related-page-link:last-child {
46 border-bottom: none;
47 }
48
49 .related-page-link:hover {
50 background-color: var(--background, #f8f9fa);
51 text-decoration: none;
52 }
53
54 .related-page-content {
55 flex: 1;
56 }
57
58 .related-page-content h4 {
59 margin: 0 0 5px 0;
60 font-weight: 500;
61 color: var(--button-bg, #3B9AF8);
62 }
63
64 .related-page-content p {
65 margin: 0;
66 font-size: 0.9em;
67 opacity: 0.8;
68 }
69
70 .related-page-arrow {
71 font-size: 1.2em;
72 color: var(--button-bg, #3B9AF8);
73 margin-left: 10px;
74 }
75
76 /* Dark mode specific overrides */
77 .dark-mode .related-pages-container {
78 background-color: var(--navbar-bg);
79 border-color: var(--card-border);
80 }
81
82 .dark-mode .related-pages-title {
83 border-bottom-color: var(--card-border);
84 }
85
86 .dark-mode .related-page-link {
87 border-bottom-color: var(--card-border);
88 }
89
90 .dark-mode .related-page-link:hover {
91 background-color: #2d2d2d;
92 }
93
94 .dark-mode .related-page-content h4 {
95 color: var(--button-bg);
96 }
97
98 .dark-mode .related-page-arrow {
99 color: var(--button-bg);
100 }