dark.css 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. @import url("dark-chroma.css");
  2. a {
  3. color: #A1A1EA;
  4. }
  5. .highlight > * {
  6. border-color: #505050;
  7. }
  8. :not(pre) > code {
  9. /* inline code elements */
  10. background-color: rgba(90, 90, 90, 0.25);
  11. }
  12. a > code {
  13. background-color: rgba(65, 65, 170, 0.3);
  14. }
  15. .section-list li > * {
  16. background-color: rgba(90, 90, 90, 0.25);
  17. }
  18. .section-list li > a {
  19. background-color: rgba(65, 65, 170, 0.3);
  20. }
  21. body {
  22. color: rgb(210, 210, 210);
  23. background-color: rgb(27, 27, 27);
  24. }
  25. blockquote {
  26. color: rgb(170, 170, 170);
  27. border-left: 0.25em solid #444;
  28. }
  29. hr {
  30. border: 1px solid rgb(110, 110, 110);
  31. }
  32. img.color-adapting-image,
  33. figure.color-adapting-image img {
  34. filter: invert(85%) hue-rotate(180deg);
  35. /* hue rotate trick from: https://medium.com/@mwichary/dark-theme-in-a-day-3518dde2955a */
  36. }
  37. .header {
  38. background-color: rgb(40, 40, 40); /* still want a background color before the image loads */
  39. background-image: url(../../images/header-bg-dark.jpg);
  40. }
  41. .links, .links li {
  42. border-color: #383838;
  43. }
  44. .main {
  45. background-color: rgb(14, 14, 14);
  46. box-shadow: none;
  47. }
  48. .footer {
  49. color: rgb(160, 160, 160);
  50. }
  51. .title-header-date {
  52. color: rgb(150, 150, 150);
  53. }
  54. .title-list-date {
  55. color: rgb(150, 150, 150);
  56. }
  57. .table-of-contents {
  58. border-color: #505050;
  59. background-color: #1A1A1A;
  60. }
  61. .notice {
  62. border-width: 2px;
  63. border-style: solid;
  64. border-top: 0;
  65. }
  66. .notice .notice-title .notice-title-icon {
  67. filter: invert(80%);
  68. }
  69. .notice.note {
  70. background-color: #001320;
  71. border-color: #00487B;
  72. }
  73. .notice.note .notice-title {
  74. background-color: #00487B;
  75. }
  76. .notice.tip {
  77. background-color: #132000;
  78. border-color: #105600;
  79. }
  80. .notice.tip .notice-title {
  81. background-color: #105600;
  82. }
  83. .notice.warning {
  84. background-color: #200000;
  85. border-color: #700000;
  86. }
  87. .notice.warning .notice-title {
  88. background-color: #700000;
  89. }
  90. @media only screen and (max-width: 400pt) {
  91. .links {
  92. background-color: rgb(23, 23, 23);
  93. }
  94. }