toc.css 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. .elv-toc {
  2. font-size: 1rem; /* Reset */
  3. }
  4. @media (min-width: 64em) { /* 1024px */
  5. .elv-toc {
  6. position: absolute;
  7. left: -17rem;
  8. width: 16rem;
  9. }
  10. }
  11. .elv-toc-list {
  12. padding-left: 0;
  13. padding-right: 0;
  14. list-style: none;
  15. }
  16. /* Nested lists */
  17. .elv-toc-list ul {
  18. padding: 0;
  19. display: none;
  20. margin-bottom: 1.5em;
  21. list-style: none;
  22. }
  23. .elv-toc-list ul li {
  24. padding-left: 0.875em; /* 14px /16 */
  25. }
  26. @media (min-width: 64em) and (min-height: 48em) { /* 1024 x 768px */
  27. .elv-toc-list ul {
  28. display: block;
  29. }
  30. }
  31. /* List items */
  32. .elv-toc-list a:not(:hover) {
  33. text-decoration: none;
  34. }
  35. .elv-toc-list li {
  36. padding-top: 0;
  37. padding-bottom: 0;
  38. margin: .1em 0 .5em;
  39. }
  40. /* Top level links */
  41. .elv-toc-list > li > a {
  42. font-weight: 400;
  43. font-size: 1.0625em; /* 17px /16 */
  44. color: #222;
  45. }
  46. /* Active links */
  47. .elv-toc-list li.elv-toc-active > a {
  48. font-weight: 700;
  49. text-decoration: underline;
  50. }
  51. .elv-toc-active > a:after {
  52. content: " ⬅";
  53. line-height: .5;
  54. }
  55. /* Show only active nested lists */
  56. .elv-toc-list ul.elv-toc-active,
  57. .elv-toc-list li.elv-toc-active > ul {
  58. display: block;
  59. }