_code.scss 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. // Code formatting.
  2. @include color-mode(dark, true) {
  3. --td-pre-bg: #{adjust-color($gray-900, $lightness: -2.5%)};
  4. }
  5. .td-content {
  6. // Highlighted code.
  7. .highlight {
  8. margin: 2rem 0;
  9. padding: 0;
  10. position: relative;
  11. .click-to-copy {
  12. display: block;
  13. text-align: right;
  14. }
  15. pre {
  16. margin: 0;
  17. padding: 1rem;
  18. border-radius: inherit;
  19. // Default click-to-copy button
  20. button.td-click-to-copy {
  21. position: absolute;
  22. color: var(--bs-tertiary-color);
  23. border-width: 0;
  24. background-color: transparent;
  25. background-image: none;
  26. --bs-btn-box-shadow: 0;
  27. padding: var(--bs-btn-padding-y) calc(var(--bs-btn-padding-x) / 2);
  28. right: 4px;
  29. top: 2px;
  30. &:hover {
  31. color: var(--bs-secondary-color);
  32. background-color: var(--bs-dark-bg-subtle);
  33. }
  34. &:active {
  35. color: var(--bs-secondary-color);
  36. background-color: var(--bs-dark-bg-subtle);
  37. transform: translateY(2px);
  38. }
  39. }
  40. }
  41. }
  42. // Inline code
  43. p code,
  44. li > code,
  45. table code {
  46. color: inherit;
  47. padding: 0.2em 0.4em;
  48. margin: 0;
  49. font-size: 85%;
  50. word-break: normal;
  51. background-color: var(--td-pre-bg);
  52. border-radius: $border-radius;
  53. br {
  54. display: none;
  55. }
  56. }
  57. // Code blocks
  58. pre {
  59. word-wrap: normal;
  60. background-color: var(--td-pre-bg);
  61. border: solid var(--bs-border-color);
  62. border-width: 1px;
  63. padding: $spacer;
  64. > code {
  65. background-color: inherit !important;
  66. padding: 0;
  67. margin: 0;
  68. font-size: 100%;
  69. word-break: normal;
  70. white-space: pre;
  71. border: 0;
  72. }
  73. }
  74. pre.mermaid {
  75. background-color: inherit;
  76. font-size: 0;
  77. padding: 0;
  78. }
  79. }