fl-builder-ui-skin-dark.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392
  1. body.fl-builder-ui-skin--dark .fl-builder-bar .fl-builder-bar-content,
  2. .fl-builder-ui-skin--dark .fl-lightbox,
  3. .fl-builder-ui-skin--dark .fl-builder-panel,
  4. .fl-builder-ui-skin--dark .fl-builder--main-menu-panel,
  5. .fl-builder-ui-skin--dark .fl-builder--search-results-panel,
  6. .fl-builder-ui-skin--dark .fl-builder--preview-actions {
  7. background:#23282d;
  8. color:#b4b9be;
  9. border-color: #1d1d1d;
  10. }
  11. .fl-builder-ui-skin--dark .fl-builder--panel-header {
  12. background:#1d2227;
  13. color:#b4b9be;
  14. border-bottom-color: #1d1d1d;
  15. border-top-color: #1d1d1d;
  16. }
  17. .fl-builder-ui-skin--dark .fl-builder-panel.fl-builder-ui-pinned .fl-builder--panel-header {
  18. border-top-color: #1d2227;
  19. }
  20. /* Panel arrows */
  21. .fl-builder-ui-skin--dark .fl-builder--main-menu-panel:before {
  22. border-bottom-color:#1d1d1d;
  23. }
  24. .fl-builder-ui-skin--dark .fl-builder--panel-arrow polygon {
  25. fill: #1d1d1d;
  26. }
  27. .fl-builder-ui-skin--dark .fl-builder-panel-search .fl-builder-panel-search-input {
  28. background: #1e2228;
  29. }
  30. .fl-builder-ui-skin--dark .fl-responsive-preview-content {
  31. background:#131619;
  32. }
  33. .fl-builder-ui-skin--dark .fl-form-table th {
  34. background:#23282d !important;
  35. color:#7d8690;
  36. }
  37. .fl-builder-ui-skin--dark .fl-builder-button,
  38. .fl-builder-ui-skin--dark .fl-builder--preview-actions .device-icons {
  39. background: #383f46;
  40. }
  41. .fl-builder-ui-skin--dark .fl-builder-button:focus {
  42. background: #131a22;
  43. }
  44. .fl-builder-ui-skin--dark .fl-builder-button.fl-builder-button-primary {
  45. color: white !important;
  46. fill: white !important;
  47. background: #00A0D2;
  48. }
  49. .fl-builder-ui-skin--dark .fl-builder-button.fl-builder-button-silent:focus {
  50. border: 2px solid #00a0d2 !important;
  51. }
  52. .fl-builder-ui-skin--dark .fl-builder-content-panel-button,
  53. .fl-builder-ui-skin--dark .fl-builder-content-panel--button:hover {
  54. color: #00A0D2 !important;
  55. }
  56. .fl-builder-ui-skin--dark .fl-builder--menu > a:hover,
  57. .fl-builder-ui-skin--dark .fl-builder--menu > button:hover {
  58. background: #101215 !important;
  59. }
  60. .fl-builder-ui-skin--dark .fl-builder--menu > a:focus,
  61. .fl-builder-ui-skin--dark .fl-builder--menu > button:focus {
  62. background: #101215 !important;
  63. color: #ffffff !important;
  64. }
  65. .fl-builder-ui-skin--dark .fl-builder-bar-title {
  66. border-color: #101215;
  67. }
  68. .fl-builder-ui-skin--dark .fl-builder-bar-title:hover {
  69. background-color:#181b1f;
  70. }
  71. .fl-builder-simple.fl-builder-ui-skin--dark .fl-builder-bar-title:hover {
  72. background-color:transparent;
  73. }
  74. .fl-builder-ui-skin--dark .fl-builder-layout-title {
  75. color: #c6cdd6;
  76. }
  77. .fl-builder-ui-skin--dark .fl-builder-layout-pretitle,
  78. .fl-builder-ui-skin--dark .fl-builder-bar-title-caret i,
  79. .fl-builder-ui-skin--dark .fl-theme-builder-preview-select .fl-theme-builder-preview-select-title {
  80. color: #7d8690;
  81. }
  82. .fl-builder-ui-skin--dark button.fl-builder-button.fl-builder-bar-title-caret:focus {
  83. background-color: #101215 !important;
  84. }
  85. .fl-builder-ui-skin--dark .fl-builder--search:before {
  86. color: rgba(162, 173, 184, 0.73);
  87. }
  88. .fl-builder-ui-skin--dark .fl-builder--search input:focus::-webkit-input-placeholder {
  89. color: rgba(162, 173, 184, 0.73) !important;
  90. }
  91. .fl-builder-ui-skin--dark .fl-builder--search .search-clear {
  92. color: rgba(162, 173, 184, 0.5);
  93. background-color: #e4e4e4;
  94. background: linear-gradient(to left, #383f46, #383f46 75%, rgba(56, 63, 70, 0) );
  95. }
  96. .fl-builder-ui-skin--dark .fl-builder--menu hr {
  97. background-color: #23282d !important;
  98. border:none;
  99. }
  100. .fl-builder-ui-skin--dark .fl-builder--tabs {
  101. border-color: #383f46 !important;
  102. }
  103. .fl-builder-ui-skin--dark .fl-builder--tabs > *.is-showing,
  104. .fl-builder-ui-skin--dark .fl-builder-settings-tabs a.fl-active,
  105. .fl-builder-ui-skin--dark .fl-builder-settings-tabs-more.fl-contains-active {
  106. color: #ffffff !important;
  107. fill: #ffffff !important;
  108. background: #383f46;
  109. }
  110. .fl-builder-ui-skin--dark .fl-builder--tabs > *:focus {
  111. background-color: #101215 !important;
  112. color: #ffffff !important;
  113. }
  114. .fl-builder-ui-skin--dark .fl-builder--tabs > *.is-showing:focus {
  115. color: #00a0d2 !important;
  116. }
  117. .fl-builder-ui-skin--dark .fl-builder--menu-item:hover {
  118. background: #383f46;
  119. color: #a8b3bf;
  120. }
  121. .fl-builder-ui-skin--dark .fl-builder--menu * .fl-builder--menu-item-accessory {
  122. color:#7d8690;
  123. }
  124. .fl-builder-ui-skin--dark .fl-builder-blocks-section-group-name {
  125. color: #7d8690;
  126. }
  127. .fl-builder-ui-skin--dark .fl-builder--category-select{
  128. background: #171b1f;
  129. }
  130. .fl-builder-ui-skin--dark .fl-builder--selector-display {
  131. color: #c6cdd6;
  132. background: #171b1f url(../img/svg/select-arrow-down-alt2-light.svg) no-repeat center right 10px !important
  133. }
  134. .fl-builder-ui-skin--dark .fl-builder--selector-display-label,
  135. .fl-builder-ui-skin--dark .fl-builder-panel-search-input input {
  136. border-color: #5b656f;
  137. color: #b5becb;
  138. }
  139. .fl-builder-ui-skin--dark .fl-builder-panel-search-input input {
  140. background: #171b1f !important;
  141. }
  142. .fl-builder-ui-skin--dark .fl-builder--selector-display-label:focus,
  143. .fl-builder-ui-skin--dark .fl-builder-panel-search-input input:focus {
  144. border-color: #00a0d2;
  145. }
  146. .fl-builder-ui-skin--dark .fl-builder--group-label {
  147. color: #171b1f !important;
  148. background: #5b656f;
  149. }
  150. .fl-builder-ui-skin--dark .fl-builder--category-select .fl-builder--selector-menu {
  151. border-color: #101215 !important;
  152. color: #7c858e;
  153. background-color: #101215;
  154. }
  155. .fl-builder-ui-skin--dark .fl-builder--category-select .fl-builder--selector-menu:before {
  156. border-bottom-color: #101215;
  157. }
  158. .fl-builder-ui-skin--dark .fl-builder--menu > span,
  159. .fl-builder-ui-skin--dark .fl-builder--menu > a,
  160. .fl-builder-ui-skin--dark .fl-builder--menu > button {
  161. color: #a1adb9;
  162. }
  163. .fl-builder-ui-skin--dark .fl-builder--category-select .fl-builder--selector-menu .fl-builder--menu-item:hover {
  164. background: #23282d !important;
  165. color: #a1adb9;
  166. }
  167. .fl-builder-ui-skin--dark .fl-builder--category-select .fl-builder--selector-menu .fl-builder--menu-item:focus {
  168. background: #23282d !important;
  169. color: #00a0d2 !important;
  170. }
  171. .fl-builder-ui-skin--dark .fl-builder-panel-drag-handle {
  172. fill: #5b656f;
  173. }
  174. .fl-builder-ui-skin--dark .fl-builder-blocks-section .fl-builder-blocks-section-title,
  175. .fl-builder-ui-skin--dark .fl-builder--template-collection-section-name,
  176. .fl-builder-ui-skin--dark .fl-builder--user-templates-section-name {
  177. color: #969ea7;
  178. background: #171b1f;
  179. }
  180. .fl-builder-ui-skin--dark .fl-builder-blocks-section-content .fl-builder-block,
  181. .fl-builder-ui-skin--dark .fl-user-template {
  182. color: #b8c2ce;
  183. }
  184. .fl-builder-ui-skin--dark .fl-builder-block:hover .fl-builder-block-content,
  185. .fl-builder-ui-skin--dark .fl-user-template:hover {
  186. background: #171b1f;
  187. color: #ffffff;
  188. }
  189. .fl-builder-ui-skin--dark .fl-builder-block:hover i,
  190. .fl-builder-ui-skin--dark .fl-user-template:hover i {
  191. color: #6d7782 !important;
  192. }
  193. .fl-builder-ui-skin--dark .fl-builder-block:hover a:hover i,
  194. .fl-builder-ui-skin--dark .fl-user-template:hover a:hover i {
  195. color: #9eacbb !important;
  196. }
  197. .fl-builder-ui-skin--dark .fl-builder-block .fl-builder-block-icon {
  198. fill: #b5becb;
  199. }
  200. .fl-builder-ui-skin--dark .fl-builder-block-visual.fl-cols-visual .fl-cols-visual-col,
  201. .fl-builder-ui-skin--dark .fl-builder-block:hover .fl-builder-block-visual.fl-cols-visual .fl-cols-visual-col {
  202. background: #7d8690;
  203. }
  204. .fl-builder-ui-skin--dark .fl-builder-settings-section,
  205. .fl-builder-ui-skin--dark .fl-builder-blocks-section {
  206. border-top: 2px solid #171b1f;
  207. }
  208. .fl-builder-ui-skin--dark .fl-user-templates {
  209. border-color: #101215;
  210. }
  211. .fl-builder-ui-skin--dark .fl-builder--template-thumbnail {
  212. border-color: #393f44;
  213. }
  214. .fl-builder-ui-skin--dark .fl-builder--menu a.fl-template-collection {
  215. color: #a8b3bf;
  216. }
  217. .fl-builder-ui-skin--dark .fl-lightbox-header-wrap {
  218. background: #1d2227;
  219. border-bottom-color: #131a22;
  220. }
  221. .fl-builder-ui-skin--dark .fl-lightbox .fl-lightbox-header h1 {
  222. color: white !important
  223. }
  224. .fl-builder-ui-skin--dark .fl-form-table th label {
  225. color: #a8b3bf !important;
  226. }
  227. .fl-builder-ui-skin--dark .fl-builder-settings-tabs {
  228. border-color: #383f46 !important;
  229. }
  230. .fl-builder-ui-skin--dark .fl-builder-settings-fields h3.fl-builder-settings-title {
  231. background: #1b2025;
  232. }
  233. .fl-builder-ui-skin--dark h3.fl-builder-settings-title .fl-builder-settings-title-text-wrap {
  234. color: #a8b3bf;
  235. background-color: #1b2025;
  236. }
  237. .fl-builder-ui-skin--dark .fl-lightbox *:not(i) {
  238. color: #7d8690 !important;
  239. }
  240. .fl-builder-ui-skin--dark .fl-builder-button {
  241. color: #c6cdd6 !important;
  242. fill: #c6cdd6 !important;
  243. }
  244. .fl-builder-ui-skin--dark .fl-builder-content-panel-button,
  245. .fl-builder-ui-skin--dark .fl-builder-content-panel--button:hover {
  246. color: #00A0D2 !important;
  247. fill: #00A0D2 !important;
  248. }
  249. .fl-builder-ui-skin--dark .fl-lightbox .fl-builder-button.fl-builder-button-primary {
  250. color: #ffffff !important;
  251. }
  252. .fl-builder-ui-skin--dark .fl-color-picker {
  253. background: #131a22;
  254. }
  255. .fl-color-picker-color.fl-color-picker-empty .fl-color-picker-icon {
  256. fill:#6f7881;
  257. }
  258. .fl-builder-ui-skin--dark .fl-color-picker-clear {
  259. background-color: #191d21;
  260. }
  261. .fl-builder-ui-skin--dark .fl-color-picker-clear:hover {
  262. background-color: #373f46;
  263. }
  264. .fl-builder-ui-skin--dark span.fl-builder-block-no-node-templates:hover {
  265. background: #1d2025;
  266. }
  267. .fl-builder-ui-skin--dark .fl-builder-settings-tab-description {
  268. background: #1d2227;
  269. }
  270. .fl-builder-ui-skin--dark .fl-builder-panel-search button svg .filled-shape {
  271. fill: #b5becb;
  272. }
  273. .fl-builder-ui-skin--dark .fl-builder-settings-fields textarea,
  274. .fl-builder-ui-skin--dark .fl-builder-settings-fields input[type=text],
  275. .fl-builder-ui-skin--dark .fl-builder-settings-fields input[type=password],
  276. .fl-builder-ui-skin--dark .fl-builder-settings-fields input[type=file],
  277. .fl-builder-ui-skin--dark .fl-builder-settings-fields input[type=email],
  278. .fl-builder-ui-skin--dark .fl-builder-settings-fields input[type=number],
  279. .fl-builder-ui-skin--dark .fl-builder-settings-fields input[type=search],
  280. .fl-builder-ui-skin--dark .fl-builder-settings-fields input[type=tel],
  281. .fl-builder-ui-skin--dark .fl-builder-settings-fields input[type=url],
  282. .fl-builder-ui-skin--dark .fl-builder-settings-fields select,
  283. .fl-builder-ui-skin--dark .fl-builder-custom-field {
  284. background-color: #131a22 !important;
  285. }
  286. .fl-builder-ui-skin--dark .fl-builder-settings-fields textarea:focus,
  287. .fl-builder-ui-skin--dark .fl-builder-settings-fields input[type=text]:focus,
  288. .fl-builder-ui-skin--dark .fl-builder-settings-fields input[type=password]:focus,
  289. .fl-builder-ui-skin--dark .fl-builder-settings-fields input[type=file]:focus,
  290. .fl-builder-ui-skin--dark .fl-builder-settings-fields input[type=email]:focus,
  291. .fl-builder-ui-skin--dark .fl-builder-settings-fields input[type=number]:focus,
  292. .fl-builder-ui-skin--dark .fl-builder-settings-fields input[type=search]:focus,
  293. .fl-builder-ui-skin--dark .fl-builder-settings-fields input[type=tel]:focus,
  294. .fl-builder-ui-skin--dark .fl-builder-settings-fields input[type=url]:focus,
  295. .fl-builder-ui-skin--dark .fl-builder-settings-fields select:focus {
  296. border-color: #00a0d2 !important;
  297. color: white !important;
  298. }
  299. .fl-builder-ui-skin--dark .fl-builder-settings-fields select {
  300. background-image: url(../img/svg/select-arrow-down-alt2-light.svg) !important;
  301. }
  302. .fl-builder-ui-skin--dark .fl-photo-field select,
  303. .fl-builder-ui-skin--dark .fl-builder-custom-field select {
  304. border-color: #7d8690 !important;
  305. }
  306. .fl-builder-ui-skin--dark .fl-field i.fl-field-responsive-toggle {
  307. color: #6b747d;
  308. }
  309. .fl-builder-ui-skin--dark .fl-field i.fl-field-responsive-toggle:hover {
  310. color: #a8b3bf;
  311. }
  312. .fl-builder-ui-skin--dark .fl-builder--main-menu-panel-view-title {
  313. color: #a8b3bf;
  314. }
  315. .fl-builder-ui-skin--dark .fl-builder--saving-indicator {
  316. color: #858f99;
  317. }
  318. .fl-builder-ui-skin--dark .fl-icons-list i:hover {
  319. background-color: #16191d;
  320. color:white;
  321. }
  322. .fl-builder-ui-skin--dark .fl-color-picker-clear .fl-color-picker-icon-remove:before,
  323. .fl-builder-ui-skin--dark .fl-color-picker-clear .fl-color-picker-icon-remove:after{
  324. background:#6f7881;
  325. }
  326. .fl-builder-ui-skin--dark .fl-builder--user-templates-section-content {
  327. border-color: #1d1d1d;
  328. }
  329. .fl-builder-ui-skin--dark .fl-theme-builder-preview-select.fl-builder-button {
  330. background:transparent;
  331. border-right-color: #101215 !important;
  332. }
  333. .fl-builder-ui-skin--dark .fl-theme-builder-preview-select.fl-builder-button:hover {
  334. background:#181b1f;
  335. }
  336. .fl-builder-ui-skin--dark .fl-theme-builder-preview-select .fl-theme-builder-preview-select-title span {
  337. color:#c6cdd6;
  338. }
  339. .fl-builder-ui-skin--dark .fl-builder-settings-tabs-overflow-menu {
  340. background: #131a22;
  341. border-color: #131a22;
  342. border-top-color: #353c43;
  343. }
  344. .fl-builder-ui-skin--dark .fl-builder-settings-tabs-overflow-menu:before {
  345. border-bottom-color: #353c43;
  346. }
  347. .fl-builder-ui-skin--dark .fl-builder-settings-tabs-overflow-menu > a:hover,
  348. .fl-builder-ui-skin--dark .fl-builder-settings-tabs-overflow-menu > a:focus,
  349. .fl-builder-ui-skin--dark .fl-builder-settings-tabs-overflow-menu > a:active {
  350. background: #383f46;
  351. }
  352. .fl-builder-ui-skin--dark .fl-builder-settings-tabs-overflow-menu > a.fl-active,
  353. .fl-builder-ui-skin--dark .fl-builder-settings-tabs-overflow-menu > a:hover.fl-active {
  354. color:white !important;
  355. background: #383f46;
  356. }
  357. .fl-builder-ui-skin--dark ul.as-selections {
  358. background-color: #121a23;
  359. }
  360. .fl-builder-ui-skin--dark .fl-custom-query .fl-builder-settings-section {
  361. border-top: 2px solid #1b2026 !important;
  362. }
  363. /* Powerpack fix */
  364. .fl-builder-ui-skin--dark .pp-preview-button {
  365. background: #23282d;
  366. border: 2px solid #101215;
  367. }
  368. .fl-builder-ui-skin--dark .pp-preview-button .pp-preview-button-wrap .fa {
  369. color: #b8bfc7;
  370. }