dark.css 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. /***************** Dark theme ******************/
  2. #modx-leftbar .x-tab-panel-noborder {margin: 0}
  3. /*menu*/
  4. .dark-theme #modx-navbar {
  5. background: #272e3c none !important;
  6. box-shadow: none;
  7. }
  8. .dark-theme #modx-navbar ul.modx-subnav li a {
  9. background-color: #2b3948;
  10. }
  11. .dark-theme #modx-navbar ul.modx-subnav li a:hover {
  12. background: #1f2736;
  13. }
  14. .dark-theme #modx-navbar ul.modx-subnav .has-subnav:after {
  15. border: none;
  16. color: #97aab4;
  17. content: "";
  18. font-family: FontAwesome;
  19. position: absolute;
  20. right: 10px;
  21. top: 40%;
  22. }
  23. /*tree*/
  24. .dark-theme #modx-leftbar {background-color: #202735 !important;}
  25. .dark-theme #modx-leftbar-tabpanel .x-tab-panel-body-noborder,
  26. .dark-theme #modx-leftbar-tabpanel .x-tree .x-panel-body {
  27. background-color: #202735;
  28. border-radius: 0;
  29. }
  30. /*collapse button*/
  31. .dark-theme #modx-leftbar-tabs-xsplit .x-layout-mini-east {left: -2px;}
  32. .dark-theme #modx-leftbar-tabs-xcollapsed .x-layout-mini,
  33. .dark-theme #modx-leftbar-tabs-xsplit .x-layout-mini {
  34. top: 43px !important;
  35. }
  36. /*tabs*/
  37. .dark-theme #modx-leftbar .x-tab-panel-header {background: #202735 !important;}
  38. .dark-theme #modx-leftbar-tabpanel .x-tab-strip li {color: #a0a0a0;}
  39. .dark-theme #modx-leftbar-tabpanel .x-tab-strip li:hover {color: #dfdfdf;}
  40. .dark-theme #modx-leftbar-tabpanel .x-tab-strip li.x-tab-strip-active {
  41. background-color: #323e4c; /*#219a8f*/
  42. box-shadow: 0 -5px 0 #3A9ABA, -1px 0 0 transparent, 0 1px 2px #555, 0 0 7px #151515;
  43. color: #fff;
  44. }
  45. .dark-theme #modx-leftbar-tabpanel .x-tab-strip li.x-tab-strip-active::before {background: transparent;}
  46. /*toolbar*/
  47. .dark-theme #modx-leftbar-tabpanel > .x-tab-panel-bwrap > .x-tab-panel-body {border-radius: 0;}
  48. .dark-theme #modx-leftbar-tabpanel .x-toolbar-cell .x-btn-noicon,
  49. .dark-theme #modx-leftbar .x-toolbar-ct .x-toolbar-right #emptifier.x-btn {
  50. background-color: transparent;
  51. color: #FFF !important;
  52. margin-right: 10px;
  53. opacity: 0.6;
  54. }
  55. .dark-theme #modx-leftbar .x-toolbar-ct .x-toolbar-right #emptifier.x-item-disabled {
  56. opacity: 0.3;
  57. }
  58. .dark-theme #modx-leftbar-tabpanel .x-toolbar-cell .x-btn-noicon:hover,
  59. .dark-theme #modx-leftbar .x-toolbar-ct .x-toolbar-right #emptifier.x-btn:not(.x-item-disabled):hover {
  60. opacity: 0.9;
  61. }
  62. .dark-theme #modx-resource-tree-tbar,
  63. .dark-theme #modx-tree-element .x-panel-tbar {
  64. background: #323e4c !important; /*26313E*/
  65. }
  66. .dark-theme #modx-resource-tree-tbar .x-toolbar-left .x-btn:first-child,
  67. .dark-theme #modx-tree-element .x-toolbar-left .x-btn:first-child {
  68. margin-left: 5px !important;
  69. }
  70. /*tree nodes*/
  71. .dark-theme #modx-leftbar-tabpanel .x-tree-node .x-tree-node-el,
  72. .dark-theme #modx-leftbar-tabpanel .x-tree-node .x-tree-node-el span,
  73. .dark-theme #modx-leftbar-tabpanel .x-tree-node .x-tree-node-el .icon {
  74. background-color: #202735;
  75. color: #d7d7d7;
  76. }
  77. /*selected node*/
  78. .dark-theme #modx-leftbar-tabpanel .x-tree-node .x-tree-selected,
  79. .dark-theme #modx-leftbar-tabpanel .x-tree-node .x-tree-selected span,
  80. .dark-theme #modx-leftbar-tabpanel .x-tree-node .x-tree-selected .icon {
  81. background-color: #343b4c;
  82. }
  83. /*hover a node*/
  84. .dark-theme #modx-leftbar-tabpanel .x-tree-node .x-tree-node-el.x-tree-node-over,
  85. .dark-theme #modx-leftbar-tabpanel .x-tree-node .x-tree-node-el.x-tree-node-over span,
  86. .dark-theme #modx-leftbar-tabpanel .x-tree-node .x-tree-node-el.x-tree-node-over .icon {
  87. background-color: #111e2d;
  88. }
  89. /*hidden in menu*/
  90. .dark-theme #modx-leftbar-tabpanel .x-tree-node .hidemenu,
  91. .dark-theme #modx-leftbar-tabpanel .x-tree-node .hidemenu span,
  92. .dark-theme #modx-leftbar-tabpanel .x-tree-node .hidemenu .icon {
  93. color: #d7d7d7 !important;
  94. opacity: 0.7;
  95. font-style: normal;
  96. }
  97. /*unpublished*/
  98. .dark-theme #modx-leftbar-tabpanel .x-tree-node .unpublished ,
  99. .dark-theme #modx-leftbar-tabpanel .x-tree-node .unpublished span {
  100. font-style: italic;
  101. }
  102. /*disabled elements nodes*/
  103. .dark-theme #modx-leftbar-tabpanel .x-tree-node .element-node-disabled,
  104. .dark-theme #modx-leftbar-tabpanel .x-tree-node .element-node-disabled span,
  105. .dark-theme #modx-leftbar-tabpanel .x-tree-node .element-node-disabled i.icon {
  106. opacity: 0.7;
  107. }
  108. .dark-theme #modx-leftbar-tabpanel .x-tree-node .element-node-disabled,
  109. .dark-theme #modx-leftbar-tabpanel .x-tree-node .element-node-disabled span {
  110. font-style: italic;
  111. }
  112. /*deleted resources nodes*/
  113. .dark-theme #modx-leftbar-tabpanel .x-tree-node .deleted,
  114. .dark-theme #modx-leftbar-tabpanel .x-tree-node .deleted span,
  115. .dark-theme #modx-leftbar-tabpanel .x-tree-node .deleted i.icon,
  116. .dark-theme #modx-leftbar-tabpanel .x-tree-node .deleted i.icon-large {
  117. color: #ff675d !important;
  118. opacity: 0.85;
  119. }
  120. /*favorites*/
  121. .dark-theme #modx-leftbar-tabpanel .x-tree-node .x-element-favorite > a span,
  122. .dark-theme #modx-leftbar-tabpanel .x-tree-node .x-element-favorite > .icon {
  123. color: #85e6af !important;
  124. }
  125. /*root*/
  126. .dark-theme #modx-leftbar-tabpanel .tree-pseudoroot-node.x-tree-node-el,
  127. .dark-theme #modx-leftbar-tabpanel .tree-pseudoroot-node.x-tree-node-el span,
  128. .dark-theme #modx-leftbar-tabpanel .tree-pseudoroot-node.x-tree-node-el .icon,
  129. .dark-theme #modx-leftbar-tabpanel .tree-pseudoroot-node.x-tree-node-el.x-tree-node-expanded,
  130. .dark-theme #modx-leftbar-tabpanel .tree-pseudoroot-node.x-tree-node-el.x-tree-node-expanded span,
  131. .dark-theme #modx-leftbar-tabpanel .tree-pseudoroot-node.x-tree-node-el.x-tree-node-expanded .icon {
  132. background-color: #111e2d;
  133. }
  134. .dark-theme #modx-leftbar-tabpanel .tree-pseudoroot-node.x-tree-node-el.x-tree-node-over,
  135. .dark-theme #modx-leftbar-tabpanel .tree-pseudoroot-node.x-tree-node-el.x-tree-node-over span,
  136. .dark-theme #modx-leftbar-tabpanel .tree-pseudoroot-node.x-tree-node-el.x-tree-node-over .icon {
  137. background-color: #111222;
  138. }
  139. .dark-theme .tree-pseudoroot-node.x-tree-node-el.ec-over {
  140. background-color: transparent;
  141. }
  142. .dark-theme #modx-leftbar-tabpanel .x-tree-arrows .x-tree-elbow-plus:hover,
  143. .dark-theme #modx-leftbar-tabpanel .x-tree-arrows .x-tree-elbow-minus:hover,
  144. .dark-theme #modx-leftbar-tabpanel .x-tree-arrows .x-tree-elbow-end-plus:hover,
  145. .dark-theme #modx-leftbar-tabpanel .x-tree-arrows .x-tree-elbow-end-minus:hover {
  146. background-color: #404952;
  147. }
  148. /*node toolbar*/
  149. .dark-theme #modx-leftbar-tabpanel .tree-pseudoroot-node.x-tree-node-el .modx-tree-node-tool-ct {
  150. right: 16px;
  151. }
  152. .dark-theme #modx-leftbar-tabpanel .tree-pseudoroot-node.x-tree-node-el .modx-tree-node-tool-ct,
  153. .dark-theme #modx-leftbar-tabpanel .tree-pseudoroot-node.x-tree-node-el .modx-tree-node-tool-ct .x-btn {
  154. color: #a0a0a0 !important;
  155. opacity: 0.8;
  156. }
  157. .dark-theme #modx-leftbar-tabpanel .tree-pseudoroot-node.x-tree-node-el .modx-tree-node-tool-ct .x-btn-over {
  158. color: #FFF !important;
  159. }
  160. /*mask*/
  161. .dark-theme #modx-leftbar-tabpanel .ext-el-mask {background-color: #111;}
  162. /*horizontal scrollbar*/
  163. .tree-pseudoroot-node.x-tree-node-el + .x-tree-node-ct,
  164. .tree-pseudoroot-node.x-tree-node-el + div > .x-tree-node-ct {
  165. overflow-x: hidden;
  166. }
  167. .dark-theme .primary-button.x-btn,
  168. .dark-theme .actions button.primary-button,
  169. .dark-theme .primary-button.inline-button,
  170. .dark-theme .primary-button.x-superboxselect-item,
  171. .dark-theme .primary-button.x-form-trigger,
  172. .dark-theme .primary-button.x-date-mp-ok,
  173. .dark-theme .primary-button.x-date-mp-cancel {
  174. background-color: #3697CD;
  175. background-image: linear-gradient(#3697cd, #306797);
  176. color: #fff;
  177. }
  178. .dark-theme .primary-button.x-btn:hover,
  179. .dark-theme .actions button.primary-button:hover,
  180. .dark-theme .primary-button.inline-button:hover,
  181. .dark-theme .primary-button.x-superboxselect-item:hover,
  182. .dark-theme .primary-button.x-form-trigger:hover,
  183. .dark-theme .primary-button.x-date-mp-ok:hover,
  184. .dark-theme .primary-button.x-date-mp-cancel:hover {
  185. background-color: #306797 !important;
  186. background-image: linear-gradient(#306797, #305888);
  187. }