demo.css 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306
  1. /*!
  2. * Tabler v1.0.0-beta17 (https://tabler.io)
  3. * @version 1.0.0-beta17
  4. * @link https://tabler.io
  5. * Copyright 2018-2023 The Tabler Authors
  6. * Copyright 2018-2023 codecalm.net Paweł Kuna
  7. * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
  8. */
  9. pre.highlight,
  10. .highlight pre {
  11. max-height: 30rem;
  12. margin: 1.5rem 0;
  13. overflow: auto;
  14. border-radius: var(--tblr-border-radius);
  15. }
  16. pre.highlight,
  17. .highlight pre {
  18. scrollbar-color: rgba(var(--tblr-scrollbar-color, var(--tblr-body-color-rgb)), 0.16) transparent;
  19. }
  20. pre.highlight::-webkit-scrollbar,
  21. .highlight pre::-webkit-scrollbar {
  22. width: 1rem;
  23. height: 1rem;
  24. -webkit-transition: background 0.3s;
  25. transition: background 0.3s;
  26. }
  27. @media (prefers-reduced-motion: reduce) {
  28. pre.highlight::-webkit-scrollbar,
  29. .highlight pre::-webkit-scrollbar {
  30. -webkit-transition: none;
  31. transition: none;
  32. }
  33. }
  34. pre.highlight::-webkit-scrollbar-thumb,
  35. .highlight pre::-webkit-scrollbar-thumb {
  36. border-radius: 1rem;
  37. border: 5px solid transparent;
  38. box-shadow: inset 0 0 0 1rem rgba(var(--tblr-scrollbar-color, var(--tblr-body-color-rgb)), 0.16);
  39. }
  40. pre.highlight::-webkit-scrollbar-track,
  41. .highlight pre::-webkit-scrollbar-track {
  42. background: transparent;
  43. }
  44. pre.highlight:hover::-webkit-scrollbar-thumb,
  45. .highlight pre:hover::-webkit-scrollbar-thumb {
  46. box-shadow: inset 0 0 0 1rem rgba(var(--tblr-scrollbar-color, var(--tblr-body-color-rgb)), 0.32);
  47. }
  48. pre.highlight::-webkit-scrollbar-corner,
  49. .highlight pre::-webkit-scrollbar-corner {
  50. background: transparent;
  51. }
  52. .highlight {
  53. margin: 0;
  54. }
  55. .highlight code > * {
  56. margin: 0 !important;
  57. padding: 0 !important;
  58. }
  59. .highlight .c, .highlight .c1 {
  60. color: #a0aec0;
  61. }
  62. .highlight .nt, .highlight .nc, .highlight .nx {
  63. color: #ff8383;
  64. }
  65. .highlight .na, .highlight .p {
  66. color: #ffe484;
  67. }
  68. .highlight .s, .highlight .dl, .highlight .s2 {
  69. color: #b5f4a5;
  70. }
  71. .highlight .k {
  72. color: #93ddfd;
  73. }
  74. .highlight .s1, .highlight .mi {
  75. color: #d9a9ff;
  76. }
  77. .example {
  78. padding: 2rem;
  79. margin: 1rem 0 2rem;
  80. border: var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);
  81. border-radius: 3px 3px 0 0;
  82. position: relative;
  83. min-height: 12rem;
  84. display: flex;
  85. align-items: center;
  86. overflow-x: auto;
  87. }
  88. .example-centered {
  89. justify-content: center;
  90. }
  91. .example-centered .example-content {
  92. flex: 0 auto;
  93. }
  94. .example-content {
  95. font-size: 0.875rem;
  96. line-height: 1.4285714286;
  97. color: var(--tblr-body-color);
  98. flex: 1;
  99. max-width: 100%;
  100. }
  101. .example-content .page-header {
  102. margin-bottom: 0;
  103. }
  104. .example-bg {
  105. background: #f1f5f9;
  106. }
  107. .example-code {
  108. margin: 2rem 0;
  109. border: var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);
  110. border-top: none;
  111. }
  112. .example-code pre {
  113. margin: 0;
  114. border: 0;
  115. border-radius: 0 0 3px 3px;
  116. }
  117. .example + .example-code {
  118. margin-top: -2rem;
  119. }
  120. .example-column {
  121. margin: 0 auto;
  122. }
  123. .example-column > .card:last-of-type {
  124. margin-bottom: 0;
  125. }
  126. .example-column-1 {
  127. max-width: 26rem;
  128. }
  129. .example-column-2 {
  130. max-width: 52rem;
  131. }
  132. .example-modal-backdrop {
  133. background: #1d273b;
  134. opacity: 0.24;
  135. position: absolute;
  136. width: 100%;
  137. left: 0;
  138. top: 0;
  139. height: 100%;
  140. border-radius: 2px 2px 0 0;
  141. }
  142. @media not print {
  143. .theme-dark .example {
  144. background-color: #1a2234;
  145. border-color: #243049;
  146. }
  147. .theme-dark .example-content {
  148. color: #f8fafc;
  149. }
  150. .theme-dark .example-code {
  151. border-color: #243049;
  152. border-top: none;
  153. }
  154. }
  155. @media not print {
  156. @media (prefers-color-scheme: dark) {
  157. .theme-dark-auto .example {
  158. background-color: #1a2234;
  159. border-color: #243049;
  160. }
  161. .theme-dark-auto .example-content {
  162. color: #f8fafc;
  163. }
  164. .theme-dark-auto .example-code {
  165. border-color: #243049;
  166. border-top: none;
  167. }
  168. }
  169. }
  170. .card-sponsor {
  171. background: #dbe7f6 no-repeat center/100% 100%;
  172. border-color: #548ed2;
  173. min-height: 316px;
  174. }
  175. body.no-transitions * {
  176. transition: none !important;
  177. }
  178. .dropdown-menu-demo {
  179. display: inline-block;
  180. width: 100%;
  181. position: relative;
  182. top: 0;
  183. margin-bottom: 1rem !important;
  184. }
  185. .demo-icon-preview {
  186. position: -webkit-sticky;
  187. position: sticky;
  188. top: 0;
  189. }
  190. .demo-icon-preview svg,
  191. .demo-icon-preview i {
  192. width: 15rem;
  193. height: 15rem;
  194. font-size: 15rem;
  195. stroke-width: 1.5;
  196. margin: 0 auto;
  197. display: block;
  198. }
  199. @media (max-width: 575.98px) {
  200. .demo-icon-preview svg,
  201. .demo-icon-preview i {
  202. width: 10rem;
  203. height: 10rem;
  204. font-size: 10rem;
  205. }
  206. }
  207. .demo-icon-preview-icon pre {
  208. margin: 0;
  209. -webkit-user-select: all;
  210. -moz-user-select: all;
  211. user-select: all;
  212. }
  213. .demo-dividers > p {
  214. opacity: 0.2;
  215. -webkit-user-select: none;
  216. -moz-user-select: none;
  217. -ms-user-select: none;
  218. user-select: none;
  219. }
  220. .demo-icons-list {
  221. display: flex;
  222. flex-wrap: wrap;
  223. padding: 0;
  224. margin: 0 -2px -1px 0;
  225. list-style: none;
  226. }
  227. .demo-icons-list > * {
  228. flex: 1 0 4rem;
  229. }
  230. .demo-icons-list-wrap {
  231. overflow: hidden;
  232. }
  233. .demo-icons-list-item {
  234. display: flex;
  235. flex-direction: column;
  236. align-items: center;
  237. justify-content: center;
  238. aspect-ratio: 1;
  239. text-align: center;
  240. padding: 0.5rem;
  241. border-right: var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);
  242. border-bottom: var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);
  243. color: inherit;
  244. cursor: pointer;
  245. }
  246. .demo-icons-list-item .icon {
  247. width: 1.5rem;
  248. height: 1.5rem;
  249. font-size: 1.5rem;
  250. }
  251. .demo-icons-list-item:hover {
  252. text-decoration: none;
  253. }
  254. .settings-btn {
  255. position: fixed;
  256. right: -1px;
  257. top: 10rem;
  258. border-top-right-radius: 0;
  259. border-bottom-right-radius: 0;
  260. box-shadow: rgba(var(--tblr-body-color-rgb), 0.04) 0 2px 4px 0;
  261. }
  262. .settings-scheme {
  263. display: inline-block;
  264. border-radius: 50%;
  265. height: 3rem;
  266. width: 3rem;
  267. position: relative;
  268. border: var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);
  269. box-shadow: rgba(var(--tblr-body-color-rgb), 0.04) 0 2px 4px 0;
  270. }
  271. .settings-scheme-light {
  272. background: linear-gradient(135deg, #ffffff 50%, #f8fafc 50%);
  273. }
  274. .settings-scheme-mixed {
  275. background-image: linear-gradient(135deg, #1d273b 50%, #fff 50%);
  276. }
  277. .settings-scheme-transparent {
  278. background: #f8fafc;
  279. }
  280. .settings-scheme-dark {
  281. background: #1d273b;
  282. }
  283. .settings-scheme-colored {
  284. background-image: linear-gradient(135deg, var(--tblr-primary) 50%, #f8fafc 50%);
  285. }