theme-hue.css 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. :root{
  2. --MAIN-TEXT-color:#323232; /* Color of text by default */
  3. --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */
  4. --MAIN-LINK-color:#1C90F3; /* Color of links */
  5. --MAIN-LINK-HOVER-color:#167ad0; /* Color of hovered links */
  6. --MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */
  7. --MENU-HEADER-BG-color:#fff; /* Background color of menu header */
  8. --MENU-HEADER-BORDER-color:#33a1ff; /*Color of menu header border */
  9. --MENU-SEARCH-BG-color:#fff; /* Search field background color (by default borders + icons) */
  10. --MENU-SEARCH-BOX-color: #33a1ff; /* Override search field border color */
  11. --MENU-SEARCH-BOX-ICONS-color: #a1d2fd; /* Override search field icons color */
  12. --MENU-SECTIONS-ACTIVE-BG-color:#fff; /* Background color of the active section and its childs */
  13. --MENU-SECTIONS-BG-color:#fff; /* Background color of other sections */
  14. --MENU-SECTIONS-LINK-color: #000; /* Color of links in menu */
  15. --MENU-SECTIONS-LINK-HOVER-color: #00BFFF; /* Color of links in menu, when hovered */
  16. --MENU-SECTION-ACTIVE-CATEGORY-color: blue; /* Color of active category text */
  17. --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff; /* Color of background for the active category (only) */
  18. --MENU-VISITED-color: #33a1ff; /* Color of 'page visited' icons in menu */
  19. --MENU-SECTION-HR-color: #20272b; /* Color of <hr> separator in menu */
  20. }
  21. body {
  22. color: var(--MAIN-TEXT-color) !important;
  23. }
  24. textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus {
  25. border-color: none;
  26. box-shadow: none;
  27. }
  28. h1 {
  29. font-size: 2.5rem;
  30. }
  31. h2, h3, h4, h5 {
  32. color: var(--MAIN-TITLES-TEXT-color) !important;
  33. }
  34. a {
  35. color: var(--MAIN-LINK-color);
  36. }
  37. .anchor {
  38. color: var(--MAIN-ANCHOR-color);
  39. }
  40. a:hover {
  41. color: var(--MAIN-LINK-HOVER-color);
  42. }
  43. #sidebar ul li.visited > a .read-icon {
  44. color: var(--MENU-VISITED-color);
  45. }
  46. #body a.highlight:after {
  47. display: block;
  48. content: "";
  49. height: 1px;
  50. width: 0%;
  51. -webkit-transition: width 0.5s ease;
  52. -moz-transition: width 0.5s ease;
  53. -ms-transition: width 0.5s ease;
  54. transition: width 0.5s ease;
  55. background-color: var(--MAIN-LINK-HOVER-color);
  56. }
  57. #sidebar {
  58. background-color: var(--MENU-SECTIONS-BG-color);
  59. }
  60. #sidebar #header-wrapper {
  61. background: var(--MENU-HEADER-BG-color);
  62. color: var(--MENU-SEARCH-BOX-color);
  63. border-color: var(--MENU-HEADER-BORDER-color);
  64. }
  65. #sidebar .searchbox {
  66. border-color: var(--MENU-SEARCH-BOX-color);
  67. background: var(--MENU-SEARCH-BG-color);
  68. }
  69. #sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
  70. background: var(--MENU-SECTIONS-ACTIVE-BG-color);
  71. }
  72. #sidebar .searchbox * {
  73. color: var(--MENU-SEARCH-BOX-ICONS-color);
  74. }
  75. #sidebar a {
  76. color: var(--MENU-SECTIONS-LINK-color);
  77. }
  78. #sidebar a:hover {
  79. color: var(--MENU-SECTIONS-LINK-HOVER-color);
  80. }
  81. #sidebar ul li.active > a {
  82. background: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color);
  83. color: var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important;
  84. }
  85. #sidebar hr {
  86. border-color: var(--MENU-SECTION-HR-color);
  87. }
  88. .toc {
  89. position: unset;
  90. width: auto;
  91. border-left: none;
  92. }
  93. .toc .wrapper{
  94. margin-left: 20px;
  95. }
  96. .toc ul {
  97. list-style: none;
  98. margin: 0;
  99. padding: 0 5px;
  100. }
  101. .toc ul li a {
  102. color: var(--MENU-SECTIONS-LINK-color);;
  103. }
  104. .toc h1, .toc h2, .toc h3, .toc h4, .toc h5, .toc h6 {
  105. font-family: "Novacento Sans Wide", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
  106. color: #222;
  107. }
  108. .toc ul li a.active {
  109. color: var(--MENU-SECTION-ACTIVE-CATEGORY-color);
  110. }
  111. .toc header {
  112. padding-right: 15px;
  113. }
  114. #body-inner {
  115. width: 100%;
  116. }
  117. @media (min-width: 992px) {
  118. h1 {
  119. font-size: 3.25rem;
  120. }
  121. #body-inner {
  122. width: calc(100% - 300px);
  123. }
  124. .toc {
  125. position: fixed;
  126. top: 100px;
  127. right: 0;
  128. border-left: thin solid #ccc;
  129. }
  130. }