demo.css 5.7 KB

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