|
1 | 1 | /* Custom styles for StringSight documentation */ |
2 | 2 |
|
| 3 | +/* Pastel Dreamland Adventure Color Palette */ |
| 4 | +:root { |
| 5 | + /* Pastel Dreamland Adventure palette colors */ |
| 6 | + --pastel-lavender: #D4B5E8; /* Light muted lavender/pastel purple */ |
| 7 | + --pastel-pink-soft: #FFD1DC; /* Soft light pink */ |
| 8 | + --pastel-pink-vibrant: #FFB6C1; /* Slightly more vibrant pastel pink */ |
| 9 | + --pastel-blue-soft: #B0E0E6; /* Light soft blue */ |
| 10 | + --pastel-blue-vibrant: #87CEEB; /* Slightly more vibrant pastel blue */ |
| 11 | + --pastel-white: #FFF8F8; /* Soft white background */ |
| 12 | + --pastel-dark: #6B5B7D; /* Dark purple for text */ |
| 13 | +} |
| 14 | + |
| 15 | +/* Override Material theme colors with Pastel Dreamland Adventure palette */ |
| 16 | +[data-md-color-scheme="default"] { |
| 17 | + --md-primary-fg-color: var(--pastel-pink-vibrant); |
| 18 | + --md-primary-fg-color--light: var(--pastel-pink-soft); |
| 19 | + --md-primary-fg-color--dark: var(--pastel-pink-vibrant); |
| 20 | + --md-accent-fg-color: var(--pastel-lavender); |
| 21 | + --md-default-bg-color: var(--pastel-white); |
| 22 | + --md-default-fg-color--light: var(--pastel-dark); |
| 23 | +} |
| 24 | + |
| 25 | +[data-md-color-scheme="slate"] { |
| 26 | + --md-primary-fg-color: var(--pastel-lavender); |
| 27 | + --md-primary-fg-color--light: var(--pastel-pink-soft); |
| 28 | + --md-primary-fg-color--dark: var(--pastel-lavender); |
| 29 | + --md-accent-fg-color: var(--pastel-pink-vibrant); |
| 30 | + --md-default-bg-color: #4A3D5C; |
| 31 | + --md-default-fg-color--light: var(--pastel-white); |
| 32 | + --md-code-bg-color: #5A4D6C; |
| 33 | + --md-code-fg-color: var(--pastel-white); |
| 34 | +} |
| 35 | + |
3 | 36 | /* Code block styling */ |
4 | 37 | .md-typeset code { |
5 | | - background-color: #f5f5f5; |
| 38 | + background-color: rgba(212, 181, 232, 0.2); |
6 | 39 | border-radius: 3px; |
7 | 40 | padding: 2px 4px; |
8 | 41 | font-size: 0.85em; |
| 42 | + color: var(--pastel-dark); |
| 43 | +} |
| 44 | + |
| 45 | +[data-md-color-scheme="slate"] .md-typeset code { |
| 46 | + background-color: rgba(212, 181, 232, 0.3); |
| 47 | + color: var(--pastel-white); |
9 | 48 | } |
10 | 49 |
|
11 | 50 | /* Inline code styling */ |
12 | 51 | .md-typeset :not(pre) > code { |
13 | | - background-color: #f5f5f5; |
| 52 | + background-color: rgba(212, 181, 232, 0.2); |
14 | 53 | border-radius: 3px; |
15 | 54 | padding: 2px 4px; |
16 | 55 | font-size: 0.85em; |
| 56 | + color: var(--pastel-dark); |
| 57 | +} |
| 58 | + |
| 59 | +[data-md-color-scheme="slate"] .md-typeset :not(pre) > code { |
| 60 | + background-color: rgba(212, 181, 232, 0.3); |
| 61 | + color: var(--pastel-white); |
17 | 62 | } |
18 | 63 |
|
19 | 64 | /* Admonition styling */ |
|
24 | 69 |
|
25 | 70 | /* Custom callout boxes */ |
26 | 71 | .callout { |
27 | | - background-color: #f8f9fa; |
28 | | - border-left: 4px solid #007bff; |
| 72 | + background-color: rgba(255, 182, 193, 0.15); |
| 73 | + border-left: 4px solid var(--pastel-pink-vibrant); |
29 | 74 | padding: 1rem; |
30 | 75 | margin: 1rem 0; |
31 | 76 | border-radius: 0 6px 6px 0; |
32 | 77 | } |
33 | 78 |
|
34 | 79 | .callout-info { |
35 | | - border-left-color: #17a2b8; |
36 | | - background-color: #d1ecf1; |
| 80 | + border-left-color: var(--pastel-blue-vibrant); |
| 81 | + background-color: rgba(176, 224, 230, 0.2); |
37 | 82 | } |
38 | 83 |
|
39 | 84 | .callout-warning { |
40 | | - border-left-color: #ffc107; |
41 | | - background-color: #fff3cd; |
| 85 | + border-left-color: var(--pastel-pink-vibrant); |
| 86 | + background-color: rgba(255, 182, 193, 0.2); |
42 | 87 | } |
43 | 88 |
|
44 | 89 | .callout-danger { |
45 | | - border-left-color: #dc3545; |
46 | | - background-color: #f8d7da; |
| 90 | + border-left-color: var(--pastel-lavender); |
| 91 | + background-color: rgba(212, 181, 232, 0.2); |
47 | 92 | } |
48 | 93 |
|
49 | 94 | .callout-success { |
50 | | - border-left-color: #28a745; |
51 | | - background-color: #d4edda; |
| 95 | + border-left-color: var(--pastel-blue-soft); |
| 96 | + background-color: rgba(176, 224, 230, 0.2); |
52 | 97 | } |
53 | 98 |
|
54 | 99 | /* Table styling */ |
|
58 | 103 | } |
59 | 104 |
|
60 | 105 | .md-typeset table th { |
61 | | - background-color: #f8f9fa; |
| 106 | + background-color: rgba(255, 182, 193, 0.2); |
62 | 107 | font-weight: 600; |
| 108 | + color: var(--pastel-dark); |
| 109 | +} |
| 110 | + |
| 111 | +[data-md-color-scheme="slate"] .md-typeset table th { |
| 112 | + background-color: rgba(212, 181, 232, 0.3); |
| 113 | + color: var(--pastel-white); |
63 | 114 | } |
64 | 115 |
|
65 | 116 | /* Button styling */ |
|
75 | 126 | } |
76 | 127 |
|
77 | 128 | .md-nav__link:hover { |
78 | | - background-color: #f5f5f5; |
| 129 | + background-color: rgba(255, 182, 193, 0.15); |
| 130 | +} |
| 131 | + |
| 132 | +[data-md-color-scheme="slate"] .md-nav__link:hover { |
| 133 | + background-color: rgba(212, 181, 232, 0.25); |
79 | 134 | } |
80 | 135 |
|
81 | 136 | /* Search styling */ |
|
85 | 140 |
|
86 | 141 | /* Footer styling */ |
87 | 142 | .md-footer { |
88 | | - border-top: 1px solid #e0e0e0; |
| 143 | + border-top: 1px solid rgba(212, 181, 232, 0.3); |
| 144 | + background-color: #4A3D5C; |
| 145 | +} |
| 146 | + |
| 147 | +[data-md-color-scheme="default"] .md-footer { |
| 148 | + background-color: var(--pastel-white); |
| 149 | + border-top-color: rgba(255, 182, 193, 0.3); |
89 | 150 | } |
90 | 151 |
|
91 | 152 | /* Custom header styling */ |
92 | 153 | .md-header { |
93 | | - box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
| 154 | + box-shadow: 0 2px 4px rgba(212, 181, 232, 0.2); |
| 155 | + background-color: var(--pastel-pink-vibrant); |
| 156 | +} |
| 157 | + |
| 158 | +[data-md-color-scheme="slate"] .md-header { |
| 159 | + background-color: var(--pastel-lavender); |
| 160 | + box-shadow: 0 2px 4px rgba(74, 61, 92, 0.3); |
94 | 161 | } |
95 | 162 |
|
96 | 163 | /* Responsive adjustments */ |
|
0 commit comments