alice.pds.demo.boltless.dev
This repository has no description
1/*
2 * the appview's stylesheet, compiled against the docs tailwind
3 * config (see tailwind.config.cjs). this brings in the base layer
4 * (14px root font size, link/code styles, selection color) and the
5 * component classes (.btn, .btn-create, .btn-flat, ...).
6 */
7@import "../../../input.css";
8
9/* preflight is disabled (starlight has its own reset), but tailwind's
10 * border utilities assume preflight's `border-style: solid` reset */
11.btn,
12.hero .sl-link-button,
13[class*="border-"] {
14 border-style: solid;
15}
16
17/* logo at the same size as the appview topbar logotype (h-8) */
18.site-title img {
19 @apply h-8;
20}
21
22/* markdown content, styled like the appview renders readmes:
23 * plain black/white links, bordered h1/h2, gray inline code */
24/* like `prose` links in appview readmes: underlined, medium weight.
25 * NB: the card exclusion must not say `.btn` here — tailwind's @apply
26 * of .btn/.btn-create elsewhere clones every rule that mentions .btn
27 * in its selector, re-introducing the underline through the clone */
28.sl-markdown-content a:not(.feature-card):not(:where(.not-content *)) {
29 @apply text-black underline font-medium hover:text-gray-800 dark:text-white dark:hover:text-gray-300;
30}
31
32.sl-markdown-content h1:not(:where(.not-content *)) {
33 @apply mt-3 pb-3 border-b border-gray-300 dark:border-gray-600;
34}
35
36.sl-markdown-content h2:not(:where(.not-content *)) {
37 @apply mt-3 pb-3 border-b border-gray-200 dark:border-gray-700;
38}
39
40.sl-markdown-content code:not(:where(.not-content *)) {
41 @apply font-mono rounded px-1 bg-gray-100 text-black dark:bg-gray-700 dark:text-white;
42}
43
44/* the appview's base `label` style (block, py-2, text-sm) clobbers
45 * starlight's select labels — starlight's own styles live in css
46 * cascade layers and lose to the unlayered appview css */
47starlight-theme-select label,
48starlight-lang-select label {
49 display: flex;
50 padding: 0;
51 font-size: unset;
52 color: var(--sl-color-gray-1);
53}
54
55starlight-theme-select label:hover,
56starlight-lang-select label:hover {
57 color: var(--sl-color-gray-2);
58}
59
60/* sidebar current-page pill, like the appview settings sidebar tabs */
61.sidebar-content a[aria-current="page"],
62.sidebar-content a[aria-current="page"]:hover,
63.sidebar-content a[aria-current="page"]:focus {
64 @apply bg-gray-100 text-black font-semibold dark:bg-gray-700 dark:text-white;
65}
66
67/* text links in the top bar (see components/HeaderLinks.astro) */
68a.header-link,
69a.header-link:hover {
70 @apply text-sm no-underline text-gray-500 hover:text-black dark:text-gray-400 dark:hover:text-white;
71}
72
73/* compact next/prev pagination links */
74.pagination-links a {
75 @apply p-3 gap-2 rounded no-underline hover:no-underline;
76}
77
78.pagination-links a .link-title {
79 @apply text-base font-semibold;
80}
81
82.pagination-links a svg {
83 @apply size-5;
84}
85
86/* restyle starlight's hero buttons with the appview button classes */
87.hero .sl-link-button.primary {
88 @apply btn-create text-base;
89}
90
91.hero .sl-link-button.primary:hover {
92 @apply text-white no-underline;
93}
94
95.hero .sl-link-button.minimal {
96 @apply btn-flat text-base;
97}