docs.css 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
  1. /*
  2. * Public client handbook. Deliberately close to client-package/docs/assets/docs.css
  3. * so both viewers look like the same product; the additions here are the ones a
  4. * single long page needs: a grouped sidebar and anchor offsets.
  5. */
  6. :root {
  7. color-scheme: light;
  8. --docs-bg: #f5f6f8;
  9. --docs-surface: #fff;
  10. --docs-text: #1a1a1a;
  11. --docs-muted: #5c6370;
  12. --docs-accent: #003366;
  13. --docs-border: #d8dde6;
  14. --docs-code-bg: #eef1f5;
  15. font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  16. line-height: 1.6;
  17. }
  18. *,
  19. *::before,
  20. *::after {
  21. box-sizing: border-box;
  22. }
  23. body {
  24. margin: 0;
  25. background: var(--docs-bg);
  26. color: var(--docs-text);
  27. }
  28. .docs-header {
  29. background: var(--docs-accent);
  30. color: #fff;
  31. }
  32. .docs-header-inner {
  33. max-width: 78rem;
  34. margin: 0 auto;
  35. padding: 0.75rem 1.25rem;
  36. display: flex;
  37. align-items: baseline;
  38. justify-content: space-between;
  39. gap: 1rem;
  40. flex-wrap: wrap;
  41. }
  42. .docs-brand {
  43. color: inherit;
  44. text-decoration: none;
  45. font-weight: 600;
  46. }
  47. .docs-brand:hover {
  48. text-decoration: underline;
  49. }
  50. .docs-header-links {
  51. display: flex;
  52. gap: 1rem;
  53. font-size: 0.9rem;
  54. }
  55. .docs-header-links a {
  56. color: inherit;
  57. opacity: 0.9;
  58. }
  59. .docs-layout {
  60. max-width: 78rem;
  61. margin: 0 auto;
  62. padding: 1.25rem;
  63. display: grid;
  64. grid-template-columns: minmax(13rem, 18rem) 1fr;
  65. gap: 1.5rem;
  66. align-items: start;
  67. }
  68. @media (max-width: 900px) {
  69. .docs-layout {
  70. grid-template-columns: 1fr;
  71. }
  72. .docs-nav {
  73. position: static;
  74. max-height: none;
  75. }
  76. }
  77. .docs-nav {
  78. background: var(--docs-surface);
  79. border: 1px solid var(--docs-border);
  80. border-radius: 0.5rem;
  81. padding: 1rem;
  82. position: sticky;
  83. top: 1rem;
  84. max-height: calc(100vh - 2rem);
  85. overflow-y: auto;
  86. }
  87. .docs-nav-title {
  88. margin: 1rem 0 0.4rem;
  89. font-size: 0.7rem;
  90. text-transform: uppercase;
  91. letter-spacing: 0.06em;
  92. color: var(--docs-muted);
  93. }
  94. .docs-nav-title:first-child {
  95. margin-top: 0;
  96. }
  97. .docs-nav ul {
  98. margin: 0;
  99. padding: 0;
  100. list-style: none;
  101. }
  102. .docs-nav a {
  103. display: block;
  104. padding: 0.25rem 0.45rem;
  105. border-radius: 0.25rem;
  106. color: var(--docs-accent);
  107. text-decoration: none;
  108. font-size: 0.87rem;
  109. overflow-wrap: anywhere;
  110. }
  111. .docs-nav a:hover {
  112. background: var(--docs-code-bg);
  113. }
  114. .docs-nav-code a {
  115. font-family: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
  116. font-size: 0.78rem;
  117. }
  118. .docs-main {
  119. background: var(--docs-surface);
  120. border: 1px solid var(--docs-border);
  121. border-radius: 0.5rem;
  122. padding: 1.5rem 2rem;
  123. min-width: 0;
  124. }
  125. /* The nav jumps to anchors that sit right above a heading. */
  126. .markdown-body a[id] {
  127. display: block;
  128. position: relative;
  129. top: -0.75rem;
  130. }
  131. .markdown-body h1,
  132. .markdown-body h2,
  133. .markdown-body h3,
  134. .markdown-body h4 {
  135. line-height: 1.25;
  136. margin-top: 1.6em;
  137. margin-bottom: 0.5em;
  138. scroll-margin-top: 1rem;
  139. }
  140. .markdown-body h1 {
  141. padding-bottom: 0.3em;
  142. border-bottom: 2px solid var(--docs-border);
  143. }
  144. .markdown-body h2 {
  145. padding-bottom: 0.2em;
  146. border-bottom: 1px solid var(--docs-border);
  147. }
  148. .markdown-body h1:first-child {
  149. margin-top: 0;
  150. }
  151. .markdown-body p,
  152. .markdown-body ul,
  153. .markdown-body ol,
  154. .markdown-body pre,
  155. .markdown-body table {
  156. margin: 0.75em 0;
  157. }
  158. .markdown-body a {
  159. color: var(--docs-accent);
  160. }
  161. .markdown-body code {
  162. font-family: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
  163. font-size: 0.9em;
  164. background: var(--docs-code-bg);
  165. padding: 0.1em 0.35em;
  166. border-radius: 0.2em;
  167. }
  168. .markdown-body pre {
  169. background: var(--docs-code-bg);
  170. padding: 1rem;
  171. overflow-x: auto;
  172. border-radius: 0.35rem;
  173. line-height: 1.45;
  174. }
  175. .markdown-body pre code {
  176. padding: 0;
  177. background: none;
  178. font-size: 0.82rem;
  179. }
  180. .markdown-body table {
  181. border-collapse: collapse;
  182. width: 100%;
  183. font-size: 0.95rem;
  184. display: block;
  185. overflow-x: auto;
  186. }
  187. .markdown-body th,
  188. .markdown-body td {
  189. border: 1px solid var(--docs-border);
  190. padding: 0.4rem 0.6rem;
  191. text-align: left;
  192. }
  193. .markdown-body th {
  194. background: var(--docs-code-bg);
  195. }
  196. .markdown-body blockquote {
  197. margin: 1em 0;
  198. padding-left: 1em;
  199. border-left: 4px solid var(--docs-border);
  200. color: var(--docs-muted);
  201. }
  202. .markdown-body hr {
  203. border: 0;
  204. border-top: 1px solid var(--docs-border);
  205. margin: 2em 0;
  206. }
  207. /*
  208. * The Markdown source is in the page as plain text so that the page is readable
  209. * without JavaScript and so that tools which extract text from HTML get the
  210. * whole document. With JavaScript on, marked replaces it.
  211. */
  212. .handbook-source {
  213. background: none;
  214. padding: 0;
  215. white-space: pre-wrap;
  216. font-size: 0.85rem;
  217. }
  218. html.has-js .handbook-source {
  219. display: none;
  220. }
  221. .docs-note {
  222. background: var(--docs-code-bg);
  223. border-left: 4px solid var(--docs-accent);
  224. padding: 0.75rem 1rem;
  225. margin: 0 0 1.5rem;
  226. font-size: 0.9rem;
  227. }
  228. .docs-note p {
  229. margin: 0.25rem 0;
  230. }
  231. .docs-footer {
  232. max-width: 78rem;
  233. margin: 0 auto;
  234. padding: 0 1.25rem 2rem;
  235. color: var(--docs-muted);
  236. font-size: 0.85rem;
  237. }
  238. .docs-footer a {
  239. color: var(--docs-accent);
  240. }
  241. /* Swagger UI page: same frame, the widget brings its own styling. */
  242. .swagger-frame {
  243. max-width: 78rem;
  244. margin: 0 auto;
  245. padding: 1.25rem;
  246. }
  247. .swagger-frame .swagger-ui .topbar {
  248. display: none;
  249. }
  250. .swagger-frame > .docs-note {
  251. margin-bottom: 0;
  252. }