├── LICENSE ├── Plugin.php ├── README.md ├── assets ├── css │ └── dark.css ├── images │ ├── bitmap-icons_dark.png │ └── table-icons_dark.gif └── js │ └── script.js ├── composer.json ├── lang ├── en │ └── lang.php ├── ru │ └── lang.php └── uk │ └── lang.php └── updates └── version.yaml /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 WebVPF 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /Plugin.php: -------------------------------------------------------------------------------- 1 | 'webvpf.darkbackend::lang.plugin.name', 13 | 'description' => 'webvpf.darkbackend::lang.plugin.desc', 14 | 'author' => 'WebVPF', 15 | 'icon' => 'icon-adjust', 16 | 'homepage' => 'https://github.com/WebVPF/wn-darkbackend-plugin', 17 | ]; 18 | } 19 | 20 | public function boot(): void 21 | { 22 | if (!App::runningInBackend()) { 23 | return; 24 | } 25 | 26 | Event::listen('backend.page.beforeDisplay', function($controller, $action, $params) { 27 | $controller->addCss('/plugins/webvpf/darkbackend/assets/css/dark.css', 'WebVPF.DarkBackend'); 28 | $controller->addJs('/plugins/webvpf/darkbackend/assets/js/script.js', 'WebVPF.DarkBackend'); 29 | }); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Dark Backend 2 | 3 | Plugin for Winter CMS 4 | 5 | This plugin adds a dark theme switch to the user’s menu in backend of site. Now you can switch to dark theme for backend in one click. 6 | 7 | ![switch](https://user-images.githubusercontent.com/61043464/215638267-6c700e9d-cf2b-483b-adff-de563603b06b.jpg) 8 | 9 | See [Plugin screenshot gallery](https://github.com/WebVPF/wn-darkbackend-plugin/issues/6) 10 | 11 | ## Installation Сomposer: 12 | 13 | ```bash 14 | composer require webvpf/wn-darkbackend-plugin 15 | ``` 16 | 17 | ## Styles 18 | 19 | When dark mode is enabled, the plugin script adds `dark` class for `body` tag. Therefore, to override the standard styles, you need to add `body.dark` before the selector name. 20 | 21 | ```css 22 | body.dark .className { 23 | 24 | } 25 | ``` 26 | 27 | ### CSS Variables 28 | 29 | The plugin adds css variables to the backend: 30 | 31 | ```css 32 | :root { 33 | --drk-bg-color-a: #0d1117; 34 | --drk-bg-color-b: #161b22; 35 | --drk-bg-color-c: #1b222c; 36 | --drk-bg-color-fancy: #183b4e; 37 | --drk-bg-color-inset: #010409; 38 | --drk-color-a: #c9d1d9; 39 | --drk-color-b: #8b949e; 40 | --drk-color-c: #757575; 41 | --drk-color-danger: #f85149; 42 | --drk-border-color: #30363d; 43 | --drk-btn-bg-color: #21262d; 44 | --drk-hover-bg-color-a: #1f242c; 45 | --drk-hover-bg-color-b: #263850; 46 | --drk-box-shadow: 0 8px 24px #010409; 47 | } 48 | ``` 49 | 50 | An example of using css variables: 51 | 52 | ```css 53 | body.dark .myClassName { 54 | background: var(--drk-bg-color-a); 55 | } 56 | ``` 57 | 58 | ### Logo 59 | 60 | You can upload your logo for backend customization in **Customize back-end** 61 | 62 | Backend --> Settings --> Customize back-end --> Brand 63 | 64 | If your logo is not suitable for the dark theme, then you can upload a separate dark theme logo to the media and write the following styles in **Customize back-end** 65 | 66 | Backend --> Settings --> Customize back-end --> Styles 67 | 68 | ```css 69 | body.dark .wn-logo { 70 | background-image: url(/storage/app/media/logo-backend-dark.png); 71 | } 72 | body.dark .wn-logo-transparent { 73 | background-image: url(/storage/app/media/logo-backend-dark.png) !important; 74 | } 75 | ``` 76 | 77 | ![screen logo](https://user-images.githubusercontent.com/61043464/211161041-750dd82d-52ea-49a5-a96d-d8cfbbd43acc.jpg) 78 | 79 | ## Events 80 | 81 | Turning dark mode on and off triggers `modeDarkEnabled` and `modeDarkDisabled` events. You can set listeners for these events: 82 | 83 | ```js 84 | document.addEventListener('modeDarkEnabled', () => { 85 | // code when dark mode is enabled 86 | }); 87 | 88 | document.addEventListener('modeDarkDisabled', () => { 89 | // code when dark mode is disabled 90 | }); 91 | ``` 92 | 93 | ## Translation for switch text 94 | 95 | Write a comment here: https://github.com/WebVPF/wn-darkbackend-plugin/issues/1 where specify language code and translation for text **Dark Theme** in your language. 96 | 97 | ### How to find out language code 98 | 99 | Open backend home page and in page code look at the value of `lang` attribute for `` tag (e.g.: `lang="en"`). This is your language code. 100 | 101 | --- 102 | 103 | Protect your eyes! 104 | -------------------------------------------------------------------------------- /assets/css/dark.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --drk-bg-color-a: #0d1117; 3 | --drk-bg-color-b: #161b22; 4 | --drk-bg-color-c: #1b222c; 5 | --drk-bg-color-fancy: #113040; 6 | --drk-bg-color-inset: #010409; 7 | --drk-color-a: #c9d1d9; 8 | --drk-color-b: #8b949e; 9 | --drk-color-c: #757575; 10 | --drk-color-danger: #f85149; 11 | --drk-border-color: #30363d; 12 | --drk-btn-bg-color: #21262d; 13 | --drk-hover-bg-color-a: #1f242c; 14 | --drk-hover-bg-color-b: #263850; 15 | --drk-box-shadow: 0 8px 24px #010409; 16 | } 17 | 18 | body.dark { 19 | color: var(--drk-color-a); 20 | background: var(--drk-bg-color-a); 21 | } 22 | body.dark .layout.control-tabs.wn-logo-transparent:not(.has-tabs):after, 23 | body.dark .flex-layout-column.wn-logo-transparent:not(.has-tabs):after, 24 | body.dark .layout-cell.wn-logo-transparent:after { 25 | background: transparent; 26 | } 27 | body.dark a { 28 | color: #58a6ff; 29 | } 30 | body.dark a:hover, 31 | body.dark a:focus { 32 | color: #008cff; 33 | } 34 | body.dark .text-muted { 35 | color: var(--drk-color-b); 36 | } 37 | body.dark hr { 38 | border-color: var(--drk-border-color); 39 | } 40 | body.dark .close { 41 | color: #fff; 42 | } 43 | body.dark .close:hover, 44 | body.dark .close:focus { 45 | color: #fff; 46 | } 47 | 48 | 49 | 50 | body.dark .nav>li>a:hover, 51 | body.dark .nav>li>a:focus { 52 | background: var(--drk-hover-bg-color-a); 53 | color: var(--drk-color-a); 54 | } 55 | 56 | /* mainmenu */ 57 | body.dark nav#layout-mainmenu { 58 | background-color: var(--drk-bg-color-b); 59 | } 60 | body.dark nav#layout-mainmenu.navbar ul li.active { 61 | border-top: solid 3px #3498db; 62 | margin-top: 2px; 63 | } 64 | body.dark nav#layout-mainmenu ul li .mainmenu-accountmenu { 65 | background: var(--drk-bg-color-b); 66 | } 67 | body.dark nav#layout-mainmenu ul li .mainmenu-accountmenu:after { 68 | border-bottom-color: var(--drk-bg-color-b); 69 | } 70 | body.dark nav#layout-mainmenu ul li .mainmenu-accountmenu li a { 71 | color: var(--drk-color-a); 72 | } 73 | body.dark nav#layout-mainmenu ul li .mainmenu-accountmenu li a:hover, 74 | body.dark nav#layout-mainmenu ul li .mainmenu-accountmenu li a:focus { 75 | background: var(--drk-hover-bg-color-a); 76 | color: #f0f6fc; 77 | } 78 | body.dark nav#layout-mainmenu ul li .mainmenu-accountmenu li:first-child a:hover, 79 | body.dark nav#layout-mainmenu ul li .mainmenu-accountmenu li:first-child a:focus { 80 | border-radius: 3px 3px 0 0; 81 | } 82 | body.dark nav#layout-mainmenu ul li .mainmenu-accountmenu li:last-child a:hover, 83 | body.dark nav#layout-mainmenu ul li .mainmenu-accountmenu li:last-child a:focus { 84 | border-radius: 0 0 3px 3px; 85 | } 86 | body.dark nav#layout-mainmenu ul li .mainmenu-accountmenu li:first-child a:hover:after, 87 | body.dark nav#layout-mainmenu ul li .mainmenu-accountmenu li:first-child a:focus:after, 88 | body.dark nav#layout-mainmenu ul li .mainmenu-accountmenu li:first-child a:active:after { 89 | border-bottom-color: var(--drk-hover-bg-color-a); 90 | } 91 | body.dark nav#layout-mainmenu ul li .mainmenu-accountmenu li.divider { 92 | background-color: var(--drk-border-color); 93 | } 94 | /* END - mainmenu */ 95 | 96 | /* sidenav */ 97 | body.dark nav.layout-sidenav { 98 | background: var(--drk-bg-color-b); 99 | border-top: 1px solid var(--drk-border-color); 100 | } 101 | body.dark #layout-sidenav li.active { 102 | background: var(--drk-btn-bg-color); 103 | border-left: solid 4px #3498db; 104 | } 105 | body.dark #layout-sidenav li.active a:hover { 106 | background: var(--drk-btn-bg-color); 107 | } 108 | body.dark #layout-sidenav ul li a:hover { 109 | background: var(--drk-hover-bg-color-a); 110 | } 111 | body.dark .sidenav-tree { 112 | background-color: var(--drk-bg-color-b); 113 | } 114 | body.dark .sidenav-tree ul.top-level >li >div.group:before, 115 | body.dark .sidenav-tree ul.top-level >li >div.group:after { 116 | border-top-color: #13171d; 117 | } 118 | body.dark .sidenav-tree ul.top-level>li>ul li.active { 119 | border-left-color: #3498db; 120 | } 121 | body.dark .sidenav-tree ul.top-level>li>ul li a span.header { 122 | color: var(--drk-color-a); 123 | } 124 | body.dark .sidenav-tree ul.top-level>li>ul li a span.description { 125 | color: var(--drk-color-c); 126 | } 127 | body.dark .sidenav-tree div.scrollbar-thumb { 128 | background: #1e304a !important; 129 | } 130 | body.dark .control-assetlist ul li:hover { 131 | background: var(--drk-bg-color-b); 132 | } 133 | body.dark .control-assetlist ul li div.controls a.control { 134 | color: var(--drk-color-a); 135 | } 136 | /* body.dark .layout-sidenav-container { 137 | border-right: solid 1px var(--drk-border-color); 138 | } */ 139 | /* END - sidenav */ 140 | 141 | 142 | 143 | body.dark .table-striped.widget-calcs { 144 | color: #bbb; 145 | } 146 | body.dark .table >thead >tr >th { 147 | border-bottom-color: var(--drk-border-color); 148 | } 149 | body.dark .table-striped >tbody >tr:nth-child(odd) >td { 150 | background-color: #1d242e; 151 | } 152 | body.dark .table >tbody >tr >td { 153 | border-top-color: var(--drk-border-color); 154 | } 155 | body.dark input.form-control.icon.search.growable:focus, 156 | body.dark input.form-control[name="search"]:focus { 157 | border-color: #1f6feb; 158 | outline: none; 159 | box-shadow: 0 0 0 3px #0c2d6b; 160 | } 161 | body.dark .clear-input-text { 162 | color: var(--drk-color-a); 163 | background-color: var(--drk-btn-bg-color); 164 | } 165 | body.dark .clear-input-text:hover, 166 | body.dark .clear-input-text:focus { 167 | color: var(--drk-color-a); 168 | } 169 | 170 | 171 | /* Dashboard */ 172 | body.dark .report-widget { 173 | background: var(--drk-bg-color-c); 174 | } 175 | body.dark .report-widget h3 { 176 | color: var(--drk-color-b); 177 | } 178 | body.dark .report-container > ul .item .content .widget-control { 179 | color: var(--drk-color-c); 180 | text-shadow: 0 1px 0 #000; 181 | } 182 | body.dark .report-container > ul .item .content .widget-control:hover { 183 | color: var(--drk-color-a); 184 | } 185 | body.dark .widget-welcome .welcome-logo { 186 | background: inherit; 187 | } 188 | body.dark .widget-welcome .welcome-message { 189 | color: #bbb; 190 | } 191 | body.dark .widget-welcome .welcome-message strong { 192 | color: #ccc; 193 | } 194 | body.dark .control-status-list >ul li { 195 | color: #bbb; 196 | border-bottom-color: var(--drk-border-color); 197 | } 198 | body.dark .control-status-list >ul li:last-child { 199 | border-bottom: none; 200 | } 201 | body.dark .control-status-list >ul li .status-text.success { 202 | color: #31ac5f; 203 | } 204 | body.dark .text-success { 205 | color: #31ac5f; 206 | } 207 | body.dark .control-status-list >ul li .status-text.warning { 208 | color: #ce9178; 209 | } 210 | body.dark .report-widget a:not(.btn) { 211 | color: #6ea8fe; 212 | } 213 | body.dark .report-widget a:not(.btn):hover, 214 | body.dark .report-widget a:not(.btn):focus { 215 | color: #8bb9fe; 216 | } 217 | body.dark .report-widget a:not(.btn).status-label.primary { 218 | color: #fff; 219 | } 220 | 221 | 222 | body.dark .dropdown-menu .dropdown-container >ul { 223 | background-color: var(--drk-bg-color-c); 224 | box-shadow: var(--drk-box-shadow); 225 | } 226 | body.dark .dropdown-menu .dropdown-container>ul:before { 227 | border-bottom-color: var(--drk-border-color); 228 | } 229 | body.dark .dropdown-menu .dropdown-container >ul:after { 230 | border-bottom-color: var(--drk-bg-color-c); 231 | } 232 | body.dark .dropdown-menu .dropdown-container >ul li.first-item a:hover:after, 233 | body.dark .dropdown-menu .dropdown-container >ul li.first-item a:focus:after, 234 | body.dark .dropdown-menu .dropdown-container >ul li.first-item a:active:after { 235 | border-bottom-color: #1f6feb; 236 | } 237 | body.dark .dropdown-menu .dropdown-container >ul li a { 238 | color: var(--drk-color-a); 239 | border-left: 1px solid var(--drk-border-color); 240 | border-right: 1px solid var(--drk-border-color); 241 | } 242 | body.dark .dropdown.dropup .dropdown-menu .dropdown-container >ul:before { 243 | border-top-color: var(--drk-border-color); 244 | } 245 | body.dark .dropdown.dropup .dropdown-menu .dropdown-container >ul:after { 246 | border-top-color: var(--drk-bg-color-c); 247 | } 248 | body.dark .dropdown-menu .divider { 249 | background-color: var(--drk-border-color); 250 | } 251 | body.dark .dropdown-menu .dropdown-container >ul:first-child { 252 | border-top: 1px solid var(--drk-border-color); 253 | } 254 | body.dark .dropdown-menu .dropdown-container >ul:last-child { 255 | border-bottom: 1px solid var(--drk-border-color); 256 | } 257 | body.dark .dropdown-menu .dropdown-container >ul li a:hover, 258 | body.dark .dropdown-menu .dropdown-container >ul li a:focus { 259 | color: #f0f6fc; 260 | background-color: #1f6feb; 261 | } 262 | body.dark .dropdown.dropup .dropdown-menu .dropdown-container >ul li.last-item a:hover:after, 263 | body.dark .dropdown.dropup .dropdown-menu .dropdown-container >ul li.last-item a:focus:after, 264 | body.dark .dropdown.dropup .dropdown-menu .dropdown-container >ul li.last-item a:active:after { 265 | border-top-color: #1f6feb; 266 | } 267 | body.dark .dropdown-menu .dropdown-container>ul li a[class^="wn-icon-"]:before, 268 | body.dark .dropdown-menu .dropdown-container>ul li a[class*=" wn-icon-"]:before, 269 | body.dark .dropdown-menu .dropdown-container>ul li a[class^="oc-icon-"]:before, 270 | body.dark .dropdown-menu .dropdown-container>ul li a[class*=" oc-icon-"]:before { 271 | color: var(--drk-color-a); 272 | } 273 | 274 | 275 | body.dark .report-container .dropdown.open .manage-widgets { 276 | background-color: #1f6feb; 277 | color: #f0f6fc; 278 | border-color: #0f5acc; 279 | } 280 | body.dark .report-container .manage-widgets { 281 | border-color: var(--drk-border-color); 282 | } 283 | body.dark .report-container .manage-widgets:hover { 284 | border-color: #0f5acc; 285 | color: #f0f6fc; 286 | background-color: #1f6feb; 287 | } 288 | /* END - Dashboard */ 289 | 290 | 291 | 292 | /* CMS */ 293 | body.dark .control-scrollpanel { 294 | background-color: var(--drk-bg-color-c); 295 | border-right: solid 1px var(--drk-border-color); 296 | } 297 | body.dark .control-filelist ul li a:hover { 298 | background: var(--drk-hover-bg-color-a); 299 | } 300 | body.dark .control-filelist ul li a span.title { 301 | color: var(--drk-color-a); 302 | } 303 | body.dark .control-filelist ul li.group >h4 a, 304 | body.dark .control-filelist ul li.group >div.group >h4 a, 305 | body.dark .control-filelist.component-list ul li div.group i { 306 | color: var(--drk-color-a); 307 | } 308 | body.dark .control-filelist ul li a span.description strong { 309 | color: #569cd6; 310 | } 311 | body.dark .control-filelist ul li.active >a, 312 | body.dark .control-filelist ul li.active >a:hover, 313 | body.dark .control-filelist ul li.active >a:focus { 314 | background: var(--drk-bg-color-b); 315 | } 316 | body.dark .control-filelist ul li>div.controls a.control { 317 | color: var(--drk-color-a); 318 | } 319 | body.dark .layout.control-tabs.oc-logo-transparent:not(.has-tabs):after, 320 | body.dark .flex-layout-column.oc-logo-transparent:not(.has-tabs):after, 321 | body.dark .layout-cell.oc-logo-transparent:after { 322 | background-color: transparent; 323 | } 324 | body.dark #layout-side-panel div.control-toolbar input.form-control { 325 | box-shadow: none; 326 | } 327 | body.dark #layout-side-panel .fix-button { 328 | background: #0f5acc; 329 | } 330 | body.dark .control-assetlist ul li a.link { 331 | color: var(--drk-color-a); 332 | } 333 | body.dark .control-assetlist ul li a.link:hover { 334 | background: #000; 335 | } 336 | body.dark .control-assetlist ul li.active a.link, 337 | body.dark .control-assetlist ul li a.link:hover { 338 | background: var(--drk-bg-color-b); 339 | } 340 | body.dark .control-assetlist p.parent.parent a.link:after { 341 | font-size: 7px; 342 | color: #fff; 343 | } 344 | body.dark .control-assetlist p.parent a.link:hover { 345 | background: #000 !important; 346 | } 347 | body.dark .control-filelist.component-list ul li div.group { 348 | background: var(--drk-bg-color-c); 349 | border-top: 1px solid var(--drk-border-color); 350 | } 351 | body.dark .control-filelist p.no-data { 352 | color: #d16969; 353 | } 354 | body.dark .control-assetlist p.parent.parent a.link { 355 | background-color: var(--drk-bg-color-a); 356 | color: var(--drk-color-a); 357 | } 358 | body.dark .component-list .components div.layout div.layout-row div.layout-cell { 359 | border-top: 1px solid var(--drk-border-color); 360 | background: var(--drk-bg-color-b); 361 | } 362 | body.dark .draggable-component-item:hover, 363 | body.dark .component-list .components div.layout-cell:hover, 364 | body.dark .component-list .components div.layout div.layout-row div.layout-cell:hover, 365 | body.dark div.control-componentlist div.components div.layout-cell:hover { 366 | background: #202833; 367 | } 368 | body.dark div.control-componentlist div.components div.layout-cell { 369 | background: var(--drk-bg-color-b); 370 | } 371 | body.dark div.control-componentlist div.components div.layout-cell:hover { 372 | background: var(--drk-bg-color-c); 373 | } 374 | body.dark div.control-componentlist div.components div.layout-cell > div.popover-highlight { 375 | background: var(--drk-bg-color-c) !important; 376 | border: 1px solid var(--drk-border-color); 377 | } 378 | body.dark .draggable-component-item >div:after, 379 | body.dark .component-list .components div.layout-cell >div:after, 380 | body.dark div.control-componentlist div.components div.layout-cell >div:after { 381 | color: var(--drk-bg-color-b); 382 | text-shadow: 0 0 1px #6fc2f1; 383 | } 384 | body.dark .component-list .components div.layout div.layout-row div.layout-cell >div:before { 385 | color: var(--drk-bg-color-b); 386 | text-shadow: 0 0 1px #6fc2f1; 387 | } 388 | body.dark .draggable-component-item >div, 389 | body.dark .component-list .components div.layout-cell >div, 390 | body.dark div.control-componentlist div.components div.layout-cell >div { 391 | border-right-color: var(--drk-bg-color-fancy); 392 | } 393 | body.dark div.control-componentlist div.components div.layout-cell > div:before, 394 | body.dark .component-list .components div.layout-cell > div span.name, 395 | body.dark div.control-componentlist div.components div.layout-cell > div span.name, 396 | body.dark div.control-componentlist div.components div.layout-cell > div a.remove { 397 | color: #AC885B; 398 | } 399 | body.dark .component-list .components div.layout-cell > div span.description, 400 | body.dark div.control-componentlist div.components div.layout-cell > div span.description { 401 | color: var(--drk-color-c); 402 | } 403 | body.dark div.control-componentlist div.components div.layout-cell > div span.alias { 404 | color: #8F9D6A; 405 | } 406 | body.dark #cms-master-tabs .form-buttons .btn.btn-primary:hover { 407 | background-color: transparent; 408 | } 409 | body.dark .control-componentlist.has-components { 410 | background-color: var(--drk-bg-color-fancy); 411 | } 412 | /* END - CMS */ 413 | 414 | 415 | /* Media manager */ 416 | body.dark [data-control="media-manager"] .control-toolbar { 417 | border-bottom: solid 1px var(--drk-border-color); 418 | } 419 | body.dark [data-control="media-manager"] [data-control="left-sidebar"] { 420 | background: var(--drk-bg-color-b); 421 | } 422 | body.dark [data-control="media-manager"] .panel.padding-less.border-bottom.triangle-down { 423 | background: var(--drk-bg-color-b); 424 | } 425 | body.dark [data-control="media-manager"] [data-command="toggle-sidebar"].btn-icon:before { 426 | color: var(--drk-color-c); 427 | } 428 | body.dark [data-control="media-manager"] [data-command="toggle-sidebar"].btn-icon:hover:before { 429 | color: var(--drk-color-b); 430 | } 431 | body.dark [data-control="media-manager"] table.table.data tbody td { 432 | color: var(--drk-color-b); 433 | } 434 | body.dark div.control-scrollpad>.scrollpad-scrollbar { 435 | background-color: rgba(27, 69, 223, .1); 436 | } 437 | body.dark div.control-scrollpad>.scrollpad-scrollbar .drag-handle { 438 | background-color: #3498db; 439 | } 440 | body.dark .whiteboard { 441 | background: var(--drk-bg-color-a); 442 | } 443 | body.dark [data-control="media-manager"] .nav.selector-group li { 444 | padding-right: 10px; 445 | } 446 | body.dark [data-control="media-manager"] .nav.selector-group li a { 447 | color: var(--drk-color-c); 448 | border-radius: 0 17px 17px 0; 449 | } 450 | body.dark [data-control="media-manager"] .nav.selector-group li.active { 451 | border-left-color: #3498db; 452 | } 453 | body.dark [data-control="media-manager"] .nav.selector-group li.active a { 454 | background: var(--drk-bg-color-c); 455 | color: var(--drk-color-a); 456 | } 457 | body.dark ul.tree-path li.root a { 458 | color: var(--drk-color-b); 459 | } 460 | body.dark div.panel.border-top { 461 | border-top-color: var(--drk-border-color); 462 | } 463 | body.dark div.panel.border-left { 464 | border-left-color: var(--drk-border-color); 465 | } 466 | body.dark div.panel.border-right { 467 | border-right-color: var(--drk-border-color); 468 | } 469 | body.dark div.panel.border-bottom { 470 | border-bottom-color: var(--drk-border-color); 471 | } 472 | body.dark div.panel.triangle-down:after { 473 | border-top-color: var(--drk-bg-color-b); 474 | } 475 | body.dark div.panel.triangle-down:before { 476 | border-top-color: var(--drk-border-color); 477 | } 478 | body.dark div[data-control="media-manager"] .list-container table.table.data tbody tr:not(.no-data):active td { 479 | background: var(--drk-bg-color-c) !important; 480 | } 481 | body.dark div[data-control="media-manager"] table.table.data tbody tr:not(.no-data).selected td { 482 | background: #20324a !important; 483 | } 484 | body.dark div[data-control="media-manager"] .sidebar-image-placeholder { 485 | background-image: -webkit-linear-gradient(45deg,var(--drk-bg-color-b) 25%,transparent 25%,transparent 75%,var(--drk-bg-color-b) 75%,var(--drk-bg-color-b)), 486 | -webkit-linear-gradient(45deg,var(--drk-bg-color-b) 25%,transparent 25%,transparent 75%,var(--drk-bg-color-b) 75%,var(--drk-bg-color-b)); 487 | background-position: 0 0,10px 10px; 488 | background-size: 21px 21px; 489 | background-color: var(--drk-bg-color-a); 490 | border-color: var(--drk-border-color); 491 | } 492 | body.dark div[data-control="media-manager"] .sidebar-image-placeholder i.icon-crop { 493 | color: var(--drk-color-b); 494 | } 495 | body.dark div[data-control="media-manager"] .sidebar-image-placeholder i.icon-level-up { 496 | color: var(--drk-color-a); 497 | } 498 | /* body.dark div[data-control="media-manager"] .sidebar-image-placeholder p { 499 | color: #d16969; 500 | background: #fff; 501 | } */ 502 | body.dark div[data-control="media-manager"] .media-list.list li { 503 | background: var(--drk-bg-color-c); 504 | border-color: var(--drk-border-color); 505 | } 506 | body.dark div[data-control="media-manager"] .media-list.list li[data-root] { 507 | background: var(--drk-bg-color-a); 508 | } 509 | body.dark div[data-control="media-manager"] .media-list.list li.selected { 510 | background: var(--drk-bg-color-a) !important; 511 | border-color: #1F99DC; 512 | } 513 | body.dark:not(.no-select) div[data-control="media-manager"] .media-list.list li:hover, 514 | body.dark:not(.no-select) div[data-control="media-manager"] .media-list.list li:focus { 515 | background: var(--drk-bg-color-c) !important; 516 | border-color: #1F99DC; 517 | } 518 | body.dark div[data-control="media-manager"] .media-list.list li[data-root]:hover { 519 | background: var(--drk-bg-color-a) !important; 520 | } 521 | body.dark div[data-control="media-manager"] .media-list.list li[data-root] .icon-container, 522 | body.dark div[data-control="media-manager"] .media-list.list li[data-root]:hover .icon-container { 523 | border-color: transparent !important; 524 | } 525 | body.dark:not(.no-select) div[data-control="media-manager"] .media-list.tiles li:hover .icon-container { 526 | background: var(--drk-bg-color-c) !important; 527 | border-color: #1F99DC; 528 | } 529 | body.dark:not(.no-select) div[data-control="media-manager"] .media-list.tiles li:hover .icon-container i, 530 | body.dark:not(.no-select) div[data-control="media-manager"] .media-list.tiles li:hover .icon-container p { 531 | color: #1F99DC; 532 | } 533 | body.dark:not(.no-select) div[data-control="media-manager"] .media-list.list li:hover i { 534 | color: #1F99DC; 535 | } 536 | body.dark:not(.no-select) div[data-control="media-manager"] .media-list.list li:hover p.size { 537 | color: var(--drk-color-a); 538 | } 539 | body.dark div[data-control="media-manager"] .media-list.tiles li .icon-container { 540 | background: var(--drk-bg-color-c); 541 | border-color: var(--drk-border-color); 542 | } 543 | body.dark div[data-control="media-manager"] .media-list.tiles li.selected .icon-container, 544 | body.dark div[data-control="media-manager"] .media-list.tiles li.selected:hover .icon-container { 545 | background: var(--drk-hover-bg-color-b) !important; 546 | } 547 | body.dark div[data-control="media-manager"] .media-list.tiles li[data-root] .icon-container { 548 | background: var(--drk-bg-color-a); 549 | } 550 | body.dark div[data-control="media-manager"] .media-list.list li .icon-container { 551 | border-color: var(--drk-border-color); 552 | } 553 | body.dark div[data-control="media-manager"] .media-list.list li .icon-container.image { 554 | border-color: var(--drk-border-color) !important; 555 | } 556 | body.dark div[data-control="media-manager"] .media-list li h4 { 557 | color: var(--drk-color-a); 558 | } 559 | body.dark div[data-control="media-manager"] .media-list li[data-item-type="folder"] h4 { 560 | color: var(--drk-color-b); 561 | } 562 | body.dark div[data-control="media-manager"] .media-list li p.size { 563 | color: var(--drk-color-c); 564 | } 565 | body.dark div[data-control="media-manager"] .media-list li[data-item-type="file"] h4 { 566 | color: var(--drk-color-a); 567 | } 568 | body.dark div[data-control="media-manager"] .media-list li[data-item-type=folder] i { 569 | color: var(--drk-color-c); 570 | } 571 | body.dark div[data-control="media-manager"] table.table tr[data-item-type=folder] i.icon-folder { 572 | color: #ce9178; 573 | } 574 | body.dark div[data-control="media-manager"] table.table tr[data-item-type=folder][data-root] i.icon-folder:before { 575 | color: var(--drk-color-b); 576 | } 577 | body.dark div[data-control="media-manager"] table.table tr[data-item-type=folder].selected i.icon-folder { 578 | color: inherit; 579 | } 580 | /* body.dark tr[data-item-type="file"] .item-title { 581 | color: #00ffff; 582 | } */ 583 | body.dark [data-control="preview-sidebar"] .panel [data-label="title"] { 584 | color: #45c962; 585 | } 586 | body.dark table.name-value-list td { 587 | color: var(--drk-color-c); 588 | } 589 | body.dark table.name-value-list th { 590 | color: var(--drk-color-b); 591 | } 592 | body.dark div[data-control="media-manager"] .upload-progress { 593 | background: inherit; 594 | } 595 | body.dark div[data-control="media-manager"] .upload-progress h5 { 596 | color: var(--drk-color-a); 597 | } 598 | body.dark div[data-control="media-manager"] .upload-progress .progress-controls .controls a { 599 | color: #31ac5f; 600 | } 601 | /* END - Media manager */ 602 | 603 | 604 | /* List */ 605 | body.dark .list-scrollable-container:after, 606 | body.dark .list-scrollable-container:before { 607 | background: var(--drk-bg-color-a); 608 | } 609 | body.dark .list-widget table { 610 | border-left: 1px solid var(--drk-border-color); 611 | } 612 | body.dark .control-table .control-scrollbar table.data tr:last-child td { 613 | border-bottom-color: var(--drk-border-color); 614 | } 615 | body.dark .control-filter { 616 | color: var(--drk-color-a); 617 | background-color: var(--drk-bg-color-c); 618 | border-color: var(--drk-border-color); 619 | } 620 | body.dark table.table.data { 621 | border-bottom-color: var(--drk-border-color); 622 | } 623 | body.dark table.table.data thead { 624 | background: var(--drk-bg-color-b); 625 | } 626 | body.dark table.table.data tbody td, 627 | body.dark table.table.data tbody th { 628 | color: var(--drk-color-a); 629 | border-top: 1px solid #21262d; 630 | } 631 | 632 | body.dark table.table.data tbody tr.rowlink:not(.nolink):active td { 633 | background: #395169 !important; 634 | color: var(--drk-color-a); 635 | } 636 | body.dark table.table.data tbody tr.rowlink:not(.nolink):hover td, 637 | body.dark table.table.data tbody tr:not(.no-data).selected td { 638 | background: var(--drk-bg-color-b) !important; 639 | color: var(--drk-color-a); 640 | } 641 | body.dark table.table.data tbody tr:nth-child(even) td, 642 | body.dark table.table.data tbody tr:nth-child(even) th { 643 | background-color: transparent; 644 | } 645 | body.dark table.table.data thead td >a, 646 | body.dark table.table.data thead th >a, 647 | body.dark table.table.data thead td >span, 648 | body.dark table.table.data thead th >span { 649 | color: #858585; 650 | } 651 | body.dark .control-list table.table.data .list-setup a { 652 | color: #858585; 653 | } 654 | body.dark table.table.data thead td >a:hover, 655 | body.dark table.table.data thead th >a:hover, 656 | body.dark table.table.data thead td >span:hover, 657 | body.dark table.table.data thead th >span:hover { 658 | color: var(--drk-color-a); 659 | } 660 | 661 | body.dark .control-filter a, 662 | body.dark .control-filter .custom-checkbox label { 663 | color: var(--drk-color-c); 664 | } 665 | body.dark .control-filter >.filter-scope:hover, 666 | body.dark .control-filter >.filter-scope.active, 667 | body.dark .control-filter >.filter-scope:hover.custom-checkbox label, 668 | body.dark .control-filter >.filter-scope.active.custom-checkbox label { 669 | color: var(--drk-color-a); 670 | } 671 | body.dark .control-filter >.filter-scope:hover .filter-label, 672 | body.dark .control-filter >.filter-scope.active .filter-label { 673 | color: var(--drk-color-a); 674 | } 675 | body.dark .control-filter >.filter-has-popover:hover { 676 | color: #ffeb3b; 677 | } 678 | body.dark .control-filter >.filter-has-popover:hover .filter-label { 679 | color: var(--drk-color-a); 680 | } 681 | body.dark .control-filter-popover .filter-items { 682 | background-color: #353535; 683 | border-bottom-color: #3e71a5; 684 | } 685 | body.dark .control-filter-popover .filter-items a, 686 | body.dark .control-filter-popover .filter-active-items a { 687 | color: #999; 688 | } 689 | body.dark .control-filter-popover .filter-items, 690 | body.dark .control-filter-popover .filter-active-items { 691 | background-color: var(--drk-bg-color-b); 692 | } 693 | body.dark .control-filter-popover .filter-items a:hover, 694 | body.dark .control-filter-popover .filter-active-items a:hover { 695 | background-color: var(--drk-bg-color-c); 696 | color: var(--drk-color-a); 697 | } 698 | 699 | 700 | body.dark table.table.data thead td, 701 | body.dark table.table.data thead th { 702 | border-top: 1px solid #21262d !important; 703 | border-bottom: 1px solid #21262d !important; 704 | } 705 | body.dark table.table.data .list-checkbox { 706 | border-right-color: var(--drk-border-color); 707 | } 708 | body.dark .table >thead >tr >td.active, 709 | body.dark .table >tbody >tr >td.active, 710 | body.dark .table >tfoot >tr >td.active, 711 | body.dark .table >thead >tr >th.active, 712 | body.dark .table >tbody >tr >th.active, 713 | body.dark .table >tfoot >tr >th.active, 714 | body.dark .table >thead >tr.active >td, 715 | body.dark .table >tbody >tr.active >td, 716 | body.dark .table >tfoot >tr.active >td, 717 | body.dark .table >thead >tr.active >th, 718 | body.dark .table >tbody >tr.active >th, 719 | body.dark .table >tfoot >tr.active >th { 720 | background-color: var(--drk-hover-bg-color-b); 721 | } 722 | body.dark table.table.data thead th.sort-asc.active, 723 | body.dark table.table.data thead th.sort-desc.active { 724 | background: var(--drk-bg-color-c); 725 | } 726 | body.dark table.table.data thead td.active>span:after, 727 | body.dark table.table.data thead th.active>span:after, 728 | body.dark table.table.data thead td.active>a:after, 729 | body.dark table.table.data thead th.active>a:after { 730 | color: #7ee787; 731 | } 732 | body.dark table.table.data tbody tr.active:nth-child(even) td, 733 | body.dark table.table.data tbody tr.active:nth-child(even) th { 734 | background-color: #20324a; 735 | } 736 | 737 | body.dark .control-list p.no-data { 738 | color: var(--drk-color-a); 739 | } 740 | 741 | 742 | /* breadcrumb */ 743 | body.dark .control-breadcrumb { 744 | background-color: var(--drk-bg-color-c); 745 | border: solid 1px var(--drk-border-color); 746 | } 747 | body.dark .control-breadcrumb li { 748 | background-color: var(--drk-bg-color-b); 749 | } 750 | body.dark .control-breadcrumb li:before { 751 | border-left: 15px solid var(--drk-bg-color-c); 752 | } 753 | body.dark .control-breadcrumb li:after { 754 | border-left: 15px solid var(--drk-bg-color-b); 755 | } 756 | body.dark .control-breadcrumb li:last-child { 757 | background-color: transparent; 758 | color: var(--drk-color-a); 759 | } 760 | /* body.dark .control-breadcrumb li a { 761 | color: #00bcd4; 762 | } */ 763 | /* END - breadcrumb */ 764 | 765 | 766 | 767 | /************************************************** 768 | ************* Controls ******************* 769 | **************************************************/ 770 | 771 | /* Button */ 772 | body.dark .btn { 773 | transition: .2s cubic-bezier(0.3, 0, 0.5, 1); 774 | transition-property: color,background-color,border-color; 775 | } 776 | body.dark .btn-primary, 777 | body.dark a.btn-primary { 778 | color: #1f6feb; 779 | background: var(--drk-btn-bg-color); 780 | border: 1px solid #024366; 781 | } 782 | body.dark .btn-primary:hover, 783 | body.dark .btn-primary:focus, 784 | body.dark .btn-primary:active, 785 | body.dark a.btn-primary:hover, 786 | body.dark a.btn-primary:focus, 787 | body.dark a.btn-primary:active { 788 | background: #0654ca; 789 | border-color: #064363; 790 | color: #f0f6fc; 791 | } 792 | body.dark .btn-default, 793 | body.dark a.btn-default { 794 | color: var(--drk-color-b); 795 | background: var(--drk-btn-bg-color); 796 | border: solid 1px var(--drk-border-color); 797 | } 798 | body.dark .btn-default.on, 799 | body.dark a.btn-default.on { 800 | background: var(--drk-hover-bg-color-b); 801 | color: var(--drk-color-a); 802 | } 803 | body.dark .btn-default:hover, 804 | body.dark .btn-default:focus, 805 | body.dark .btn-default:active, 806 | body.dark a.btn-default:hover, 807 | body.dark a.btn-default:focus, 808 | body.dark a.btn-default:active { 809 | background-color: var(--drk-hover-bg-color-b); 810 | color: var(--drk-color-a); 811 | } 812 | body.dark .btn-success, 813 | body.dark a.btn-success { 814 | color: #2ea043; 815 | background: var(--drk-btn-bg-color); 816 | border: solid 1px #074a14; 817 | } 818 | body.dark .btn-success:hover, 819 | body.dark .btn-success:focus, 820 | body.dark .btn-success:active, 821 | body.dark a.btn-success:hover, 822 | body.dark a.btn-success:focus, 823 | body.dark a.btn-success:active { 824 | color: var(--drk-color-a); 825 | background-color: #2ea043; 826 | } 827 | body.dark .btn-info, 828 | body.dark a.btn-info { 829 | color: #5bc0de; 830 | background: var(--drk-btn-bg-color); 831 | border: 1px solid #23444e; 832 | } 833 | body.dark .btn-info:hover, 834 | body.dark .btn-info:focus, 835 | body.dark .btn-info:active, 836 | body.dark a.btn-info:hover, 837 | body.dark a.btn-info:focus, 838 | body.dark a.btn-info:active { 839 | background: #5bc0de; 840 | color: #fff; 841 | } 842 | body.dark .btn-warning, 843 | body.dark a.btn-warning { 844 | color: #f0ad4e; 845 | background: var(--drk-btn-bg-color); 846 | border: 1px solid #3e3b37; 847 | } 848 | body.dark .btn-warning:hover, 849 | body.dark .btn-warning:focus, 850 | body.dark .btn-warning:active, 851 | body.dark a.btn-warning:hover, 852 | body.dark a.btn-warning:focus, 853 | body.dark a.btn-warning:active { 854 | color: #fff; 855 | background-color: #f0ad4e; 856 | } 857 | body.dark .btn-danger, 858 | body.dark a.btn-danger { 859 | color: var(--drk-color-danger); 860 | background-color: var(--drk-btn-bg-color); 861 | border-color: rgb(240 246 252 / 10%); 862 | border: 1px solid #66322e; 863 | } 864 | body.dark .btn-danger:hover, 865 | body.dark .btn-danger:focus, 866 | body.dark .btn-danger:active, 867 | body.dark a.btn-danger:hover, 868 | body.dark a.btn-danger:focus, 869 | body.dark a.btn-danger:active { 870 | color: #f0f6fc; 871 | background-color: #da3633; 872 | border-color: var(--drk-color-danger); 873 | box-shadow: 0 0 transparent, 0 0 transparent; 874 | } 875 | body.dark .btn-link { 876 | color: #58a6ff; 877 | border: none; 878 | background-color: transparent; 879 | } 880 | body.dark .btn-link:hover, 881 | body.dark .btn-link:focus, 882 | body.dark .btn-icon:hover:before { 883 | color: #51a6ec; 884 | } 885 | body.dark .btn-secondary, 886 | body.dark a.btn-secondary { 887 | color: var(--drk-color-a); 888 | background-color: #0d1117; 889 | border: 1px solid #242930; 890 | } 891 | body.dark .btn-secondary:hover, 892 | body.dark .btn-secondary:focus { 893 | background-color: #30363d; 894 | } 895 | body.dark .btn-secondary[disabled] { 896 | color: rgb(151 151 151); 897 | } 898 | body.dark .btn-secondary.disabled, 899 | body.dark .btn-secondary[disabled], 900 | body.dark .btn-secondary.disabled:hover, 901 | body.dark .btn-secondary[disabled]:hover, 902 | body.dark .btn-secondary.disabled:focus, 903 | body.dark .btn-secondary[disabled]:focus, 904 | body.dark .btn-secondary.disabled:active, 905 | body.dark .btn-secondary[disabled]:active, 906 | body.dark .btn-secondary.disabled.active, 907 | body.dark .btn-secondary[disabled].active { 908 | background: #333942; 909 | } 910 | /* END - Button */ 911 | 912 | /* tooltip */ 913 | body.dark .tooltip-inner { 914 | background: #d1d1d1; 915 | color: #000; 916 | } 917 | body.dark .tooltip.top .tooltip-arrow { 918 | border-top-color: #d1d1d1; 919 | } 920 | body.dark .tooltip.bottom .tooltip-arrow { 921 | border-bottom-color: #d1d1d1; 922 | } 923 | body.dark .tooltip.left .tooltip-arrow { 924 | border-left-color: #d1d1d1; 925 | } 926 | body.dark .tooltip.right .tooltip-arrow { 927 | border-right-color: #d1d1d1; 928 | } 929 | /* End - tooltip */ 930 | 931 | /* Pie chart */ 932 | body.dark .control-chart div.chart-legend table { 933 | color: var(--drk-color-b); 934 | } 935 | /* END - Pie chart */ 936 | 937 | /* Line chart */ 938 | body.dark .flot-tick-label.tickLabel { 939 | color: var(--drk-color-b); 940 | } 941 | /* END - Line chart */ 942 | 943 | /************************************************** 944 | ********** END - Controls **************** 945 | **************************************************/ 946 | 947 | 948 | 949 | /********************************************** 950 | ************* Forms ****************** 951 | **********************************************/ 952 | 953 | body.dark input::placeholder, 954 | body.dark textarea::placeholder { 955 | color: var(--drk-color-c); 956 | } 957 | body.dark label { 958 | color: var(--drk-color-a); 959 | } 960 | body.dark .form-control { 961 | color: var(--drk-color-a); 962 | background-color: #010409; 963 | border-color: var(--drk-border-color); 964 | box-shadow: 0 0 transparent; 965 | } 966 | body.dark .form-control:focus { 967 | border-color: #1f6feb; 968 | box-shadow: 0 0 0 3px #0c2d6b; 969 | } 970 | body.dark .form-control[readonly]:focus { 971 | box-shadow: none; 972 | border-color: var(--drk-border-color); 973 | } 974 | body.dark .form-control[disabled], 975 | body.dark .form-control[readonly], 976 | body.dark fieldset[disabled] .form-control { 977 | background-color: var(--drk-bg-color-c) !important; 978 | color: var(--drk-color-b); 979 | } 980 | body.dark .form-control.icon { 981 | background-image: url('../images/bitmap-icons_dark.png'); 982 | } 983 | body.dark .form-preview { 984 | background: var(--drk-bg-color-b); 985 | border-color: var(--drk-border-color); 986 | } 987 | 988 | /********************************************** 989 | ************* Fields ***************** 990 | **********************************************/ 991 | 992 | /* Balloon Selector */ 993 | body.dark .control-balloon-selector ul li { 994 | background: rgba(110,118,129,0.4); 995 | color: var(--drk-color-a); 996 | } 997 | body.dark .control-balloon-selector ul li.active, 998 | body.dark .control-balloon-selector:not(.control-disabled) ul li:hover { 999 | background: #004ba9 !important; 1000 | color: #fff; 1001 | } 1002 | /* END - Balloon Selector */ 1003 | 1004 | /* Checkbox */ 1005 | body.dark .custom-checkbox label:before, 1006 | body.dark .custom-radio label:before { 1007 | background-color: #3b3b3b; 1008 | border-color: #858585; 1009 | box-shadow: none; 1010 | } 1011 | body.dark .custom-checkbox input[type=checkbox]:checked + label:before { 1012 | border-color: #004ba9; 1013 | background-color: #004ba9; 1014 | } 1015 | /* END - Checkbox */ 1016 | 1017 | /* Checkbox List */ 1018 | body.dark .field-checkboxlist .field-checkboxlist-inner { 1019 | background-color: var(--drk-bg-color-b); 1020 | border-color: var(--drk-border-color); 1021 | box-shadow: none; 1022 | } 1023 | body.dark .field-checkboxlist .checkboxlist-controls >div >a:hover >i { 1024 | color: #1f99dc; 1025 | } 1026 | /* END - Checkbox List */ 1027 | 1028 | /* Dropdown */ 1029 | body.dark .select2-dropdown { 1030 | color: var(--drk-color-a); 1031 | background-color: var(--drk-bg-color-b); 1032 | border: 1px solid var(--drk-border-color); 1033 | box-shadow: var(--drk-box-shadow); 1034 | } 1035 | body.dark .select2-container--default .select2-selection { 1036 | background-color: #010409; 1037 | border: 1px solid var(--drk-border-color); 1038 | box-shadow: 0 0 transparent; 1039 | } 1040 | body.dark .select2-container--default .select2-selection--single .select2-selection__rendered { 1041 | color: var(--drk-color-a); 1042 | } 1043 | body.dark .select2-container--default .select2-selection--single .select2-selection__arrow b:before { 1044 | color: #f0f8ff; 1045 | } 1046 | body.dark .select2-container--default .select2-search--dropdown .select2-search__field { 1047 | color: var(--drk-color-a); 1048 | background-color: var(--drk-bg-color-a); 1049 | border: 1px solid var(--drk-border-color); 1050 | box-shadow: none; 1051 | } 1052 | body.dark .select2-container--default .select2-search--dropdown .select2-search__field:focus { 1053 | border-color: #1f6feb; 1054 | outline: none; 1055 | box-shadow: 0 0 0 3px #0c2d6b; 1056 | } 1057 | body.dark .select2-container--default .select2-results__option--highlighted[aria-selected] { 1058 | background-color: var(--drk-hover-bg-color-a); 1059 | color: var(--drk-color-a); 1060 | } 1061 | body.dark .select2-container--default .select2-results__option[aria-selected="true"] { 1062 | color: #fff; 1063 | background-color: var(--drk-hover-bg-color-a); 1064 | } 1065 | body.dark .select2-container--default .select2-selection--multiple .select2-selection__choice { 1066 | background: var(--drk-hover-bg-color-b); 1067 | color: var(--drk-color-b); 1068 | border-radius: 14px; 1069 | border: 0; 1070 | padding: 2px 6px 0px 14px; 1071 | } 1072 | body.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { 1073 | color: var(--drk-color-a); 1074 | } 1075 | body.dark .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field { 1076 | color: var(--drk-color-a); 1077 | } 1078 | body.dark .select2-dropdown.ocInspectorDropdown .select2-search { 1079 | border-bottom-color: var(--drk-border-color); 1080 | } 1081 | body.dark div.control-popover .select2-container--default .select2-selection { 1082 | background-color: var(--drk-bg-color-b); 1083 | } 1084 | /* END - Dropdown */ 1085 | 1086 | /* Email */ 1087 | /* END - Email */ 1088 | 1089 | /* Hint */ 1090 | /* END - Hint */ 1091 | 1092 | /* Number */ 1093 | /* END - Number */ 1094 | 1095 | /* Password */ 1096 | /* END - Password */ 1097 | 1098 | /* Radio List */ 1099 | body.dark .custom-checkbox input[type=radio]:checked + label:before, 1100 | body.dark .custom-radio input[type=radio]:checked + label:before { 1101 | border-color: #21b70b; 1102 | } 1103 | body.dark .custom-checkbox input[type=radio]:checked + label:after, 1104 | body.dark .custom-radio input[type=radio]:checked + label:after { 1105 | background-color: #adff2f; 1106 | } 1107 | /* END - Radio List */ 1108 | 1109 | /* Range */ 1110 | /* END - Range */ 1111 | 1112 | /* Section */ 1113 | body.dark .field-section { 1114 | border-bottom-color: var(--drk-border-color); 1115 | } 1116 | body.dark .field-section h4 { 1117 | color: var(--drk-color-a); 1118 | } 1119 | /* END - Section */ 1120 | 1121 | /* Switch */ 1122 | body.dark .custom-switch input:checked ~ span { 1123 | background-color: #238636; 1124 | } 1125 | /* END - Switch */ 1126 | 1127 | /* Text */ 1128 | /* END - Text */ 1129 | 1130 | /* Textarea */ 1131 | /* END - Textarea */ 1132 | 1133 | /**************************************************** 1134 | ************* END - Fields ***************** 1135 | ****************************************************/ 1136 | 1137 | /*************************************************** 1138 | ************* Form widgets **************** 1139 | ***************************************************/ 1140 | 1141 | /* Code editor */ 1142 | body.dark .field-codeeditor { 1143 | border-color: var(--drk-border-color); 1144 | } 1145 | body.dark .field-codeeditor.editor-focus { 1146 | border-color: #27709c; 1147 | } 1148 | body.dark .editor-code.ace_editor.ace_dark { 1149 | background: var(--drk-bg-color-b); 1150 | } 1151 | body.dark .editor-code.ace_dark .ace_gutter { 1152 | background: var(--drk-bg-color-c); 1153 | color: var(--drk-color-c); 1154 | } 1155 | body.dark .fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.control-tabs>.tab-content>.tab-pane>.form-group>.field-codeeditor { 1156 | border-top: solid 1px var(--drk-border-color) !important; 1157 | } 1158 | /* END - Code editor */ 1159 | 1160 | /* Color picker */ 1161 | body.dark .field-colorpicker [data-color-preview] { 1162 | border-color: var(--drk-border-color); 1163 | box-shadow: none; 1164 | } 1165 | /* END - Color picker */ 1166 | 1167 | /* Data table */ 1168 | body.dark .control-table .table-container { 1169 | border-color: var(--drk-border-color); 1170 | } 1171 | body.dark .control-table .toolbar { 1172 | background: var(--drk-bg-color-b); 1173 | border-bottom-color: var(--drk-border-color); 1174 | } 1175 | body.dark .control-table.active .toolbar { 1176 | border-bottom-color: #028dff; 1177 | } 1178 | body.dark .control-table .toolbar a.btn { 1179 | color: var(--drk-color-a); 1180 | border: 0; 1181 | } 1182 | body.dark .control-table .toolbar a.table-icon:before { 1183 | background: transparent url(../images/table-icons_dark.gif) no-repeat 0 0; 1184 | } 1185 | body.dark .control-table table.headers th { 1186 | color: var(--drk-color-a); 1187 | background: #0d1520; 1188 | border-right-color: var(--drk-border-color); 1189 | } 1190 | body.dark .control-table.active table.headers:after { 1191 | border-bottom-color: var(--drk-border-color); 1192 | } 1193 | body.dark .control-table table.data tr { 1194 | background-color: var(--drk-bg-color-b); 1195 | } 1196 | body.dark .control-table table.data tr:nth-child(2n) { 1197 | background-color: #121922; 1198 | } 1199 | body.dark .control-table table.data td { 1200 | border-color: var(--drk-border-color); 1201 | } 1202 | body.dark .control-table table td, 1203 | body.dark .control-table table th { 1204 | color: var(--drk-color-a); 1205 | } 1206 | body.dark .control-table td[data-column-type=string] input[type=text] { 1207 | background: var(--drk-bg-color-inset); 1208 | } 1209 | body.dark .control-table td[data-column-type=checkbox] div[data-checkbox-element] { 1210 | background-color: #3c3a3a; 1211 | border-color: var(--drk-border-color); 1212 | } 1213 | body.dark .control-table td[data-column-type=checkbox] div[data-checkbox-element].checked:before { 1214 | color: var(--drk-color-a); 1215 | } 1216 | body.dark .control-table td[data-column-type=dropdown] [data-view-container]:hover:after { 1217 | color: #fff; 1218 | } 1219 | body.dark .control-table table.headers:after { 1220 | border-bottom-color: var(--drk-border-color); 1221 | } 1222 | body.dark .control-table td[data-column-type=dropdown] [data-dropdown-open=true] { 1223 | background: var(--drk-bg-color-a); 1224 | } 1225 | body.dark .table-control-dropdown-list { 1226 | background: var(--drk-bg-color-b); 1227 | border-color: var(--drk-border-color); 1228 | } 1229 | body.dark .table-control-dropdown-list ul { 1230 | border-color: var(--drk-border-color); 1231 | } 1232 | body.dark .table-control-dropdown-list li { 1233 | color: var(--drk-color-a); 1234 | } 1235 | body.dark .table-control-dropdown-list li:hover { 1236 | background: var(--drk-bg-color-c); 1237 | } 1238 | /* END - Data table */ 1239 | 1240 | /* Date picker */ 1241 | /* END - Date picker */ 1242 | 1243 | /* File upload */ 1244 | body.dark .field-fileupload .upload-object h4 { 1245 | color: var(--drk-color-a); 1246 | } 1247 | body.dark .field-fileupload .upload-object p.size { 1248 | color: var(--drk-color-c); 1249 | } 1250 | body.dark .field-fileupload.style-image-single .upload-button, 1251 | body.dark .field-fileupload.style-image-multi .upload-button { 1252 | background-color: var(--drk-bg-color-c); 1253 | border-color: var(--drk-border-color); 1254 | } 1255 | body.dark .field-fileupload.style-image-single .upload-button:hover, 1256 | body.dark .field-fileupload.style-image-multi .upload-button:hover { 1257 | border-color: #1F99DC; 1258 | } 1259 | body.dark .field-fileupload.style-image-multi .upload-button .upload-button-icon:before { 1260 | color: var(--drk-color-c); 1261 | } 1262 | body.dark .field-fileupload.style-image-single .upload-button:hover .upload-button-icon:before { 1263 | color: #1F99DC; 1264 | } 1265 | body.dark .field-fileupload.style-image-single .upload-button .upload-button-icon:before { 1266 | color: var(--drk-color-c); 1267 | } 1268 | body.dark .field-fileupload.style-image-single .upload-object .icon-container { 1269 | background: var(--drk-bg-color-a); 1270 | border-color: var(--drk-border-color); 1271 | } 1272 | body.dark .field-fileupload .upload-object .info h4 a, 1273 | body.dark .field-fileupload .upload-object .meta a.upload-remove-button, 1274 | body.dark .field-fileupload .upload-object .meta a.drag-handle { 1275 | color: #ef0319; 1276 | } 1277 | body.dark .field-fileupload .upload-object.is-error .info h4 { 1278 | color: #ed1700; 1279 | } 1280 | body.dark .field-fileupload.style-file-single { 1281 | background-color: var(--drk-bg-color-c); 1282 | border-color: var(--drk-border-color); 1283 | box-shadow: inset 0 1px 0 #2c2c2c, 0 1px 0 #2c2c2c; 1284 | } 1285 | body.dark .field-fileupload.style-file-single .upload-button { 1286 | color: var(--drk-color-b); 1287 | } 1288 | body.dark .field-fileupload.style-file-single .upload-button:hover { 1289 | color: var(--drk-color-a); 1290 | } 1291 | body.dark .field-fileupload.style-image-multi .upload-object { 1292 | background: var(--drk-bg-color-c); 1293 | border-color: var(--drk-border-color); 1294 | } 1295 | body.dark .field-fileupload.style-file-multi .upload-object { 1296 | background: var(--drk-bg-color-c); 1297 | border-color: var(--drk-border-color); 1298 | } 1299 | body.dark .field-fileupload.style-file-multi .upload-object:hover { 1300 | background: var(--drk-bg-color-b) !important; 1301 | } 1302 | body.dark .field-fileupload.style-image-multi .upload-object:hover { 1303 | background: var(--drk-bg-color-b) !important; 1304 | border-color: #4da7e8; 1305 | } 1306 | body.dark .field-fileupload.style-file-multi .upload-object .info h4, 1307 | body.dark .field-fileupload.style-file-multi .upload-object .info p { 1308 | color: #d6d6d6; 1309 | } 1310 | body.dark .field-fileupload.style-file-multi .upload-files-container { 1311 | border-color: var(--drk-border-color); 1312 | } 1313 | body.dark .field-fileupload.style-image-multi .upload-object .icon-container { 1314 | border-color: var(--drk-border-color); 1315 | } 1316 | body.dark .field-fileupload.style-image-multi .upload-button:hover .upload-button-icon:before { 1317 | color: #1F99DC; 1318 | } 1319 | /* END - File upload */ 1320 | 1321 | /* Icon Picker */ 1322 | /* END - Icon Picker */ 1323 | 1324 | /* Markdown editor */ 1325 | body.dark .field-markdowneditor { 1326 | background: var(--drk-bg-color-a); 1327 | border-color: var(--drk-border-color); 1328 | } 1329 | body.dark .field-markdowneditor.editor-focus { 1330 | border-color: #27709c; 1331 | } 1332 | body.dark .field-markdowneditor .control-toolbar.editor-toolbar { 1333 | background: var(--drk-bg-color-b); 1334 | border-color: var(--drk-border-color); 1335 | } 1336 | body.dark .field-markdowneditor .control-toolbar.editor-toolbar .toolbar-item .btn { 1337 | color: var(--drk-color-c); 1338 | } 1339 | body.dark .field-markdowneditor .control-toolbar.editor-toolbar .toolbar-item .btn:hover { 1340 | background-color: var(--drk-hover-bg-color-b); 1341 | color: var(--drk-color-a); 1342 | } 1343 | body.dark .field-markdowneditor .control-toolbar.editor-toolbar .toolbar-item .btn.active, 1344 | body.dark .field-markdowneditor .control-toolbar.editor-toolbar .toolbar-item .btn:active { 1345 | background-color: var(--drk-hover-bg-color-b); 1346 | color: var(--drk-color-a); 1347 | } 1348 | body.dark .field-markdowneditor .ace-github { 1349 | background: var(--drk-bg-color-a); 1350 | color: var(--drk-color-a); 1351 | } 1352 | body.dark .field-markdowneditor .ace-github .ace_cursor { 1353 | color: #27709c; 1354 | } 1355 | body.dark .field-markdowneditor .ace-github .ace_marker-layer .ace_bracket { 1356 | border-color: #27709c; 1357 | } 1358 | body.dark .field-markdowneditor .ace-github .ace_marker-layer .ace_selection { 1359 | background: var(--drk-hover-bg-color-b); 1360 | } 1361 | body.dark .field-markdowneditor .ace-github .ace_marker-layer .ace_selected-word { 1362 | background: var(--drk-hover-bg-color-b); 1363 | border-color: #31527e; 1364 | } 1365 | body.dark .field-markdowneditor .ace-github .ace_string { 1366 | color: #a5d6ff; 1367 | } 1368 | body.dark .field-markdowneditor .ace-github .ace_constant { 1369 | color: #7ee787; 1370 | } 1371 | body.dark .field-markdowneditor .ace-github .ace_constant.ace_numeric { 1372 | color: #79c0ff; 1373 | } 1374 | body.dark .field-markdowneditor .ace-github .ace_storage.ace_type { 1375 | color: #ff7b72; 1376 | } 1377 | body.dark .field-markdowneditor .ace-github .ace_keyword { 1378 | color: #ff7b72; 1379 | } 1380 | body.dark .field-markdowneditor .ace-github .ace_keyword.ace_operator { 1381 | color: #79c0ff; 1382 | } 1383 | body.dark .field-markdowneditor .ace-github .ace_identifier { 1384 | color: #d2a8ff; 1385 | } 1386 | body.dark .field-markdowneditor .ace-github .ace_variable.ace_language { 1387 | color: #c9d1d9; 1388 | } 1389 | body.dark .field-markdowneditor .ace-github .ace_entity.ace_name.ace_function { 1390 | color: #d2a8ff; 1391 | } 1392 | body.dark .field-markdowneditor .ace-github .ace_support.ace_type { 1393 | color: #79c0ff; 1394 | } 1395 | body.dark .field-markdowneditor.mode-split .editor-write .editor-code { 1396 | border-right-color: var(--drk-border-color); 1397 | } 1398 | body.dark .field-markdowneditor .editor-preview { 1399 | color: var(--drk-color-a); 1400 | } 1401 | body.dark .field-markdowneditor .editor-preview pre.prettyprint { 1402 | background-color: #161b22; 1403 | } 1404 | body.dark .field-markdowneditor .editor-preview pre .com { 1405 | color: var(--drk-color-b); 1406 | } 1407 | body.dark .field-markdowneditor .editor-preview pre .pln { 1408 | color: #c9d1d9; 1409 | } 1410 | body.dark .field-markdowneditor .editor-preview pre .language-js .str, 1411 | body.dark .field-markdowneditor .editor-preview pre .language-javascript .str { 1412 | color: #a5d6ff; 1413 | } 1414 | body.dark .field-markdowneditor .editor-preview pre .language-js .kwd, 1415 | body.dark .field-markdowneditor .editor-preview pre .language-javascript .kwd { 1416 | color: #ff7b72; 1417 | } 1418 | body.dark .field-markdowneditor .editor-preview pre .language-js .lit, 1419 | body.dark .field-markdowneditor .editor-preview pre .language-javascript .lit { 1420 | color: #79c0ff; 1421 | } 1422 | 1423 | body.dark .field-markdowneditor .editor-preview pre .language-css .pln { 1424 | color: #79c0ff; 1425 | } 1426 | body.dark .field-markdowneditor .editor-preview pre .language-css .kwd { 1427 | color: #d2a8ff; 1428 | } 1429 | body.dark .field-markdowneditor .editor-preview pre .language-css .lit { 1430 | color: #79c0ff; 1431 | } 1432 | body.dark .field-markdowneditor .editor-preview pre .language-html .dec { 1433 | color: #79c0ff; 1434 | } 1435 | body.dark .field-markdowneditor .editor-preview pre .language-html .tag { 1436 | color: #7ee787; 1437 | } 1438 | body.dark .field-markdowneditor .editor-preview pre .language-html .atn { 1439 | color: #79c0ff; 1440 | } 1441 | body.dark .field-markdowneditor .editor-preview pre .language-html .atv { 1442 | color: #a5d6ff; 1443 | } 1444 | /* END - Markdown editor */ 1445 | 1446 | /* Media finder */ 1447 | body.dark .field-mediafinder.style-image-single .find-object .icon-container { 1448 | /* max-width: max-content; */ 1449 | background: var(--drk-bg-color-b); 1450 | border-color: var(--drk-border-color); 1451 | } 1452 | body.dark .field-mediafinder.style-image-single .find-button { 1453 | background: var(--drk-bg-color-c); 1454 | border: 2px dotted var(--drk-border-color); 1455 | } 1456 | body.dark .field-mediafinder.style-image-single .find-button:hover { 1457 | border-color: #1F99DC; 1458 | } 1459 | body.dark .field-mediafinder.style-image-single .find-button .find-button-icon:before { 1460 | color: var(--drk-color-c); 1461 | } 1462 | body.dark .field-mediafinder.style-image-single .find-button:hover .find-button-icon:before { 1463 | color: #1F99DC; 1464 | } 1465 | body.dark .field-mediafinder.style-file-single { 1466 | background-color: var(--drk-bg-color-c); 1467 | border-color: var(--drk-border-color); 1468 | box-shadow: inset 0 1px 0 #2c2c2c, 0 1px 0 #2c2c2c; 1469 | } 1470 | body.dark .field-mediafinder.style-file-single .find-button { 1471 | color: #bbb; 1472 | } 1473 | body.dark .field-mediafinder.style-file-single .find-button:hover { 1474 | color: var(--drk-color-a); 1475 | background-color: var(--drk-hover-bg-color-b); 1476 | } 1477 | body.dark .field-mediafinder .find-object h4 { 1478 | color: #ff7f50; 1479 | } 1480 | /* END - Media finder */ 1481 | 1482 | /* Nested Form */ 1483 | body.dark .nested-form.panel-styles { 1484 | background: var(--drk-bg-color-a); 1485 | border-color: var(--drk-border-color); 1486 | box-shadow: inset 0 1px 0 var(--drk-border-color), 0 1px 0 var(--drk-border-color); 1487 | } 1488 | /* END - Nested Form */ 1489 | 1490 | /* Record finder */ 1491 | body.dark .field-recordfinder { 1492 | background-color: var(--drk-bg-color-c); 1493 | border-color: var(--drk-border-color); 1494 | box-shadow: inset 0 1px 0 #2c2c2c, 0 1px 0 #2c2c2c; 1495 | } 1496 | body.dark .field-recordfinder .form-control { 1497 | background-color: var(--drk-bg-color-c); 1498 | } 1499 | body.dark .field-recordfinder .btn { 1500 | color: var(--drk-color-a); 1501 | } 1502 | /* END - Record finder */ 1503 | 1504 | /* Relation */ 1505 | body.dark .relation-behavior .control-list { 1506 | border-color: var(--drk-border-color); 1507 | } 1508 | /* END - Relation */ 1509 | 1510 | /* Repeater */ 1511 | body.dark .field-repeater .field-repeater-add-item { 1512 | border-color: var(--drk-border-color); 1513 | } 1514 | body.dark .field-repeater .field-repeater-add-item:hover, 1515 | body.dark .field-repeater .field-repeater-add-item:focus { 1516 | background-color: var(--drk-bg-color-b); 1517 | } 1518 | body.dark .field-repeater li.field-repeater-item { 1519 | background: var(--drk-bg-color-b); 1520 | border-color: var(--drk-border-color); 1521 | box-shadow: none; 1522 | } 1523 | body.dark .field-repeater li.field-repeater-item:before { 1524 | color: #283fc2; 1525 | } 1526 | body.dark .field-repeater li.field-repeater-item .repeater-item-handle { 1527 | background: var(--drk-bg-color-fancy); 1528 | color: var(--drk-color-a); 1529 | } 1530 | /* END - Repeater */ 1531 | 1532 | /* Rich editor */ 1533 | /* END - Rich editor */ 1534 | 1535 | /* Sensitive */ 1536 | /* END - Sensitive */ 1537 | 1538 | /* Tag list */ 1539 | /* END - Tag list */ 1540 | 1541 | /***************************************************** 1542 | ************* END - Form widgets ************ 1543 | *****************************************************/ 1544 | 1545 | body.dark .loading-indicator-container .loading-indicator { 1546 | background-color: var(--drk-bg-color-a); 1547 | } 1548 | 1549 | body.dark .help-block { 1550 | color: var(--drk-color-b); 1551 | } 1552 | body.dark div[data-control="sensitive"] a[data-toggle], 1553 | body.dark div[data-control="sensitive"] a[data-copy] { 1554 | border-color: var(--drk-border-color); 1555 | } 1556 | body.dark div[data-control="sensitive"] a[data-toggle]:hover, 1557 | body.dark div[data-control="sensitive"] a[data-toggle]:focus { 1558 | background-color: var(--drk-hover-bg-color-a); 1559 | } 1560 | /************************************************** 1561 | ************* END - Forms **************** 1562 | **************************************************/ 1563 | 1564 | 1565 | 1566 | /************************************************** 1567 | ************* fancy layout *************** 1568 | **************************************************/ 1569 | 1570 | body.dark.fancy-layout .form-tabless-fields, 1571 | body.dark .fancy-layout .form-tabless-fields { 1572 | background-color: var(--drk-bg-color-fancy); 1573 | } 1574 | body.dark.fancy-layout .form-tabless-fields .form-control:focus, 1575 | body.dark .fancy-layout .form-tabless-fields .form-control:focus { 1576 | border-color: transparent; 1577 | box-shadow: none; 1578 | } 1579 | body.dark.fancy-layout.control-tabs.master-tabs>div>div.tabs-container, 1580 | body.dark .fancy-layout.control-tabs.master-tabs>div>div.tabs-container { 1581 | background: #102b38; 1582 | } 1583 | body.dark .fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.form-tabless-fields .loading-indicator-container .loading-indicator { 1584 | background: var(--drk-bg-color-fancy); 1585 | } 1586 | body.dark .fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.form-tabless-fields input[type=text].form-control[disabled], 1587 | body.dark .fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.form-tabless-fields .form-control[readonly], 1588 | body.dark .fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.form-tabless-fields fieldset[disabled] .form-control { 1589 | background: var(--drk-bg-color-fancy) !important; 1590 | } 1591 | body.dark.fancy-layout .control-tabs.has-tabs>div.tab-content, 1592 | body.dark.fancy-layout.control-tabs.has-tabs>div.tab-content, 1593 | body.dark .fancy-layout .control-tabs.has-tabs >div.tab-content, 1594 | body.dark .fancy-layout.control-tabs.has-tabs >div.tab-content { 1595 | background-color: var(--drk-bg-color-a); 1596 | } 1597 | body.dark.fancy-layout .control-tabs.primary-tabs>div>ul.nav-tabs, 1598 | body.dark.fancy-layout.control-tabs.primary-tabs>div>ul.nav-tabs { 1599 | background: transparent; 1600 | } 1601 | body.dark .fancy-layout .control-tabs.primary-tabs>div>ul.nav-tabs, 1602 | body.dark .fancy-layout.control-tabs.primary-tabs>div>ul.nav-tabs { 1603 | background: var(--drk-bg-color-fancy); 1604 | } 1605 | body.dark .fancy-layout .control-tabs.secondary-tabs>div>ul.nav-tabs>li a, 1606 | body.dark .fancy-layout.control-tabs.secondary-tabs>div>ul.nav-tabs>li a { 1607 | color: var(--drk-color-c); 1608 | } 1609 | body.dark .fancy-layout .control-tabs.secondary-tabs>div>ul.nav-tabs>li a:hover, 1610 | body.dark .fancy-layout.control-tabs.secondary-tabs>div>ul.nav-tabs>li a:hover { 1611 | color: var(--drk-color-a); 1612 | } 1613 | body.dark .fancy-layout .control-tabs.secondary-tabs>div>ul.nav-tabs>li.active a, 1614 | body.dark .fancy-layout.control-tabs.secondary-tabs>div>ul.nav-tabs>li.active a { 1615 | color: #fff; 1616 | } 1617 | body.dark.fancy-layout .control-tabs.primary-tabs >div >ul.nav-tabs >li a span.title, 1618 | body.dark.fancy-layout.control-tabs.primary-tabs >div >ul.nav-tabs >li a span.title, 1619 | body.dark .fancy-layout .control-tabs.primary-tabs >div >ul.nav-tabs >li a span.title, 1620 | body.dark .fancy-layout.control-tabs.primary-tabs >div >ul.nav-tabs >li a span.title { 1621 | background: transparent; 1622 | } 1623 | body.dark.fancy-layout .control-tabs.primary-tabs >div >ul.nav-tabs >li.active a span.title, 1624 | body.dark.fancy-layout.control-tabs.primary-tabs >div >ul.nav-tabs >li.active a span.title, 1625 | body.dark .fancy-layout .control-tabs.primary-tabs >div >ul.nav-tabs >li.active a span.title, 1626 | body.dark .fancy-layout.control-tabs.primary-tabs >div >ul.nav-tabs >li.active a span.title { 1627 | background: transparent; 1628 | } 1629 | body.dark .fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.primary-tabs>div>ul.nav-tabs>li.active a span.title, 1630 | body.dark *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.fancy-layout.primary-tabs>div>ul.nav-tabs>li.active a span.title { 1631 | background: var(--drk-bg-color-a); 1632 | } 1633 | body.dark .fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.primary-tabs>div>ul.nav-tabs>li a span.title, 1634 | body.dark *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.fancy-layout.primary-tabs>div>ul.nav-tabs>li a span.title, 1635 | body.dark .fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.primary-tabs>div>ul.nav-tabs>li a span.title:before, 1636 | body.dark *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.fancy-layout.primary-tabs>div>ul.nav-tabs>li a span.title:before, 1637 | body.dark .fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.primary-tabs>div>ul.nav-tabs>li a span.title:after, 1638 | body.dark *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.fancy-layout.primary-tabs>div>ul.nav-tabs>li a span.title:after { 1639 | background: var(--drk-bg-color-c); 1640 | } 1641 | body.dark.fancy-layout .form-buttons .btn, 1642 | body.dark .fancy-layout .form-buttons .btn { 1643 | border: 0; 1644 | background: transparent; 1645 | color: var(--drk-color-b); 1646 | } 1647 | body.dark.fancy-layout .form-buttons .btn:hover, 1648 | body.dark .fancy-layout .form-buttons .btn:hover { 1649 | color: var(--drk-color-a); 1650 | } 1651 | body.dark.fancy-layout .control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li.active a>span.title, 1652 | body.dark.fancy-layout.control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li.active a>span.title, 1653 | body.dark.fancy-layout .control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li.active a>span.title:before, 1654 | body.dark.fancy-layout.control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li.active a>span.title:before, 1655 | body.dark.fancy-layout .control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li.active a>span.title:after, 1656 | body.dark.fancy-layout.control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li.active a>span.title:after, 1657 | body.dark .fancy-layout .control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li.active a>span.title, 1658 | body.dark .fancy-layout.control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li.active a>span.title, 1659 | body.dark .fancy-layout .control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li.active a>span.title:before, 1660 | body.dark .fancy-layout.control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li.active a>span.title:before, 1661 | body.dark .fancy-layout .control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li.active a>span.title:after, 1662 | body.dark .fancy-layout.control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li.active a>span.title:after { 1663 | background: var(--drk-bg-color-fancy); 1664 | } 1665 | body.dark.fancy-layout .control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li a>span.title, 1666 | body.dark.fancy-layout.control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li a>span.title, 1667 | body.dark.fancy-layout .control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li a>span.title:before, 1668 | body.dark.fancy-layout.control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li a>span.title:before, 1669 | body.dark.fancy-layout .control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li a>span.title:after, 1670 | body.dark.fancy-layout.control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li a>span.title:after, 1671 | body.dark .fancy-layout .control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li a>span.title, 1672 | body.dark .fancy-layout.control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li a>span.title, 1673 | body.dark .fancy-layout .control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li a>span.title:before, 1674 | body.dark .fancy-layout.control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li a>span.title:before, 1675 | body.dark .fancy-layout .control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li a>span.title:after, 1676 | body.dark .fancy-layout.control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li a>span.title:after { 1677 | background-color: #346281; 1678 | color: #b3b3b3; 1679 | } 1680 | body.dark.fancy-layout .control-tabs.primary-tabs.master-area>div>ul.nav-tabs, 1681 | body.dark.fancy-layout.control-tabs.primary-tabs.master-area>div>ul.nav-tabs, 1682 | body.dark .fancy-layout .control-tabs.primary-tabs.master-area>div>ul.nav-tabs, 1683 | body.dark .fancy-layout.control-tabs.primary-tabs.master-area>div>ul.nav-tabs { 1684 | background: var(--drk-bg-color-fancy); 1685 | } 1686 | body.dark .fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.primary-tabs.master-area>div>ul.nav-tabs, 1687 | body.dark *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.fancy-layout.primary-tabs.master-area>div>ul.nav-tabs { 1688 | background: var(--drk-bg-color-fancy); 1689 | } 1690 | body.dark.fancy-layout .control-tabs.primary-tabs >ul.nav-tabs >li a >span.title:before, 1691 | body.dark .fancy-layout .control-tabs.primary-tabs >ul.nav-tabs >li a >span.title:before, 1692 | body.dark.fancy-layout .control-tabs.primary-tabs >div >ul.nav-tabs >li a >span.title:before, 1693 | body.dark .fancy-layout .control-tabs.primary-tabs >div >ul.nav-tabs >li a >span.title:before, 1694 | body.dark.fancy-layout .control-tabs.primary-tabs >div >div >ul.nav-tabs >li a >span.title:before, 1695 | body.dark .fancy-layout .control-tabs.primary-tabs >div >div >ul.nav-tabs >li a >span.title:before, 1696 | body.dark.fancy-layout .control-tabs.primary-tabs >ul.nav-tabs >li a >span.title:after, 1697 | body.dark .fancy-layout .control-tabs.primary-tabs >ul.nav-tabs >li a >span.title:after, 1698 | body.dark.fancy-layout .control-tabs.primary-tabs >div >ul.nav-tabs >li a >span.title:after, 1699 | body.dark .fancy-layout .control-tabs.primary-tabs >div >ul.nav-tabs >li a >span.title:after, 1700 | body.dark.fancy-layout .control-tabs.primary-tabs >div >div >ul.nav-tabs >li a >span.title:after, 1701 | body.dark .fancy-layout .control-tabs.primary-tabs >div >div >ul.nav-tabs >li a >span.title:after { 1702 | background: transparent; 1703 | } 1704 | body.dark.breadcrumb-fancy .control-breadcrumb, 1705 | body.dark .control-breadcrumb.breadcrumb-fancy { 1706 | background-color: #112d3a; 1707 | border: 0; 1708 | } 1709 | body.dark.breadcrumb-fancy .control-breadcrumb li, 1710 | body.dark .control-breadcrumb.breadcrumb-fancy li { 1711 | background-color: #102b38; 1712 | } 1713 | body.dark.breadcrumb-fancy .control-breadcrumb li::after, 1714 | body.dark .control-breadcrumb.breadcrumb-fancy li::after { 1715 | border-left-color: #102b38; 1716 | } 1717 | body.dark.breadcrumb-fancy .control-breadcrumb li:last-child, 1718 | body.dark .control-breadcrumb.breadcrumb-fancy li:last-child { 1719 | background-color: #112d3a; 1720 | } 1721 | body.dark.breadcrumb-fancy .control-breadcrumb li:last-child::before, 1722 | body.dark .control-breadcrumb.breadcrumb-fancy li:last-child::before { 1723 | border-left-color: #112d3a; 1724 | } 1725 | body.dark.breadcrumb-fancy .control-breadcrumb li:not(:last-child)::before, 1726 | body.dark .control-breadcrumb.breadcrumb-fancy li:not(:last-child)::before { 1727 | border-left-color: #4a4a4a; 1728 | } 1729 | body.dark.breadcrumb-fancy .control-breadcrumb li a, 1730 | body.dark .control-breadcrumb.breadcrumb-fancy li a { 1731 | color: var(--drk-color-a); 1732 | } 1733 | 1734 | body.dark .fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.secondary-tabs.has-tabs>div.tab-content { 1735 | background: var(--drk-bg-color-a); 1736 | } 1737 | body.dark .fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.secondary-tabs>div>ul.nav-tabs { 1738 | background: var(--drk-bg-color-c); 1739 | } 1740 | body.dark .fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.form-tabless-fields, 1741 | body.dark.fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.form-tabless-fields { 1742 | background: var(--drk-bg-color-fancy); 1743 | } 1744 | body.dark.fancy-layout .nested-form .form-tabless-fields, 1745 | body.dark .fancy-layout .nested-form .form-tabless-fields { 1746 | background-color: var(--drk-bg-color-a); 1747 | } 1748 | body.dark.fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.primary-tabs.has-tabs>div.tab-content, 1749 | body.dark .fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.primary-tabs.has-tabs>div.tab-content, 1750 | body.dark *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.fancy-layout.primary-tabs.has-tabs>div.tab-content { 1751 | background: var(--drk-bg-color-a); 1752 | } 1753 | body.dark.fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.primary-tabs.master-area>div>ul.nav-tabs, 1754 | body.dark *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.fancy-layout.primary-tabs.master-area>div>ul.nav-tabs { 1755 | background: var(--drk-bg-color-fancy); 1756 | } 1757 | body.dark.fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.primary-tabs>div>ul.nav-tabs>li.active a span.title, 1758 | body.dark *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.fancy-layout.primary-tabs>div>ul.nav-tabs>li.active a span.title { 1759 | background: var(--drk-bg-color-a); 1760 | } 1761 | body.dark.fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.primary-tabs>div>ul.nav-tabs>li.active a span.title:before, 1762 | body.dark *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.fancy-layout.primary-tabs>div>ul.nav-tabs>li.active a span.title:before, 1763 | body.dark.fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.primary-tabs>div>ul.nav-tabs>li.active a span.title:after, 1764 | body.dark *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.fancy-layout.primary-tabs>div>ul.nav-tabs>li.active a span.title:after { 1765 | background: var(--drk-bg-color-a); 1766 | } 1767 | body.dark.fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.secondary-tabs.has-tabs>div.tab-content { 1768 | background: var(--drk-bg-color-a); 1769 | } 1770 | body.dark.fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.secondary-tabs>div>ul.nav-tabs { 1771 | background: var(--drk-bg-color-c); 1772 | } 1773 | body.dark.fancy-layout .control-tabs.secondary-tabs>div>ul.nav-tabs, 1774 | body.dark.fancy-layout.control-tabs.secondary-tabs>div>ul.nav-tabs { 1775 | background: var(--drk-bg-color-c) 1776 | } 1777 | /**************************************** 1778 | ******** END - fancy layout ******** 1779 | ****************************************/ 1780 | 1781 | 1782 | 1783 | /* reorder Tree List */ 1784 | body.dark .control-treelist ol ol { 1785 | border-left-color: #1f6feb; 1786 | } 1787 | body.dark .control-treelist li>div.record:before { 1788 | color: #1f6feb; 1789 | } 1790 | body.dark .control-treelist li>div.record>span { 1791 | color: var(--drk-color-b); 1792 | } 1793 | body.dark .control-treelist li>div.record>a.move { 1794 | color: var(--drk-color-b); 1795 | } 1796 | body.dark .control-treelist li>div.record>a.move:hover { 1797 | color: #1f6feb; 1798 | } 1799 | body.dark .control-treelist li.dragged>div.record { 1800 | background: var(--drk-bg-color-c) !important; 1801 | } 1802 | body.dark .control-treelist li.dragged>div.record>a.move:before, 1803 | body.dark .control-treelist li.dragged>div.record>span { 1804 | color: #fff; 1805 | } 1806 | /* END - reorder Tree List */ 1807 | 1808 | /* control-popover */ 1809 | body.dark div.control-popover >div { 1810 | background: var(--drk-bg-color-c); 1811 | border: 1px solid var(--drk-border-color); 1812 | box-shadow: var(--drk-box-shadow); 1813 | } 1814 | body.dark div.control-popover.placement-bottom >div:before { 1815 | border-bottom-color: var(--drk-border-color); 1816 | } 1817 | body.dark div.control-popover.placement-bottom >div:after { 1818 | border-bottom-color: #010409; 1819 | } 1820 | body.dark div.control-popover .popover-head { 1821 | background: var(--drk-bg-color-b); 1822 | color: var(--drk-color-a); 1823 | border-top-right-radius: 6px; 1824 | border-top-left-radius: 6px; 1825 | border-color: var(--drk-border-color); 1826 | } 1827 | body.dark div.control-popover .popover-head h3 { 1828 | font-weight: 600; 1829 | } 1830 | body.dark div.control-popover .popover-head p { 1831 | color: var(--drk-color-b); 1832 | } 1833 | body.dark div.control-popover .popover-head .close { 1834 | color: var(--drk-color-a); 1835 | } 1836 | body.dark div.control-popover.placement-left .popover-head:before { 1837 | border-left-color: var(--drk-border-color); 1838 | right: -9px; 1839 | } 1840 | body.dark div.control-popover.placement-left .popover-head:after { 1841 | position: absolute; 1842 | content: ''; 1843 | display: block; 1844 | width: 0; 1845 | height: 0; 1846 | border-top: 7.5px solid transparent; 1847 | border-bottom: 7.5px solid transparent; 1848 | border-left: 8px solid #f9f9f9; 1849 | right: -8px; 1850 | top: 7px; 1851 | border-left-color: var(--drk-bg-color-b); 1852 | z-index: 602; 1853 | } 1854 | body.dark div.control-popover.placement-bottom .popover-head:before { 1855 | border-bottom-color: var(--drk-bg-color-b); 1856 | } 1857 | body.dark div.control-popover.placement-bottom .popover-head:after { 1858 | content: ''; 1859 | display: block; 1860 | width: 0; 1861 | height: 0; 1862 | border-left: 8.5px solid transparent; 1863 | border-right: 8.5px solid transparent; 1864 | border-bottom: 9px solid var(--drk-border-color); 1865 | left: 14px; 1866 | top: -10px; 1867 | position: absolute; 1868 | } 1869 | 1870 | /* 1871 | * inspector 1872 | */ 1873 | body.dark .inspector-header { 1874 | background: var(--drk-bg-color-b); 1875 | color: var(--drk-color-a); 1876 | border-bottom-color: var(--drk-border-color); 1877 | } 1878 | body.dark .inspector-header h3 { 1879 | font-weight: 600; 1880 | } 1881 | body.dark .inspector-header span:hover, 1882 | body.dark .inspector-header a:hover { 1883 | color: var(--drk-color-a); 1884 | } 1885 | body.dark .inspector-header span, 1886 | body.dark .inspector-header a { 1887 | color: var(--drk-color-a); 1888 | } 1889 | body.dark .inspector-fields { 1890 | background: var(--drk-bg-color-b); 1891 | } 1892 | body.dark .inspector-fields tr.group th { 1893 | background: var(--drk-bg-color-c); 1894 | } 1895 | body.dark .inspector-fields th >div a.expandControl span:after { 1896 | color: var(--drk-color-a); 1897 | } 1898 | body.dark .inspector-fields td.trigger-cell a.trigger { 1899 | color: var(--drk-color-c); 1900 | } 1901 | body.dark .inspector-fields .select2-container--default .select2-selection { 1902 | background-color: var(--drk-bg-color-b); 1903 | } 1904 | body.dark .inspector-fields tr.invalid th { 1905 | color: var(--drk-color-danger) !important; 1906 | } 1907 | body.dark .inspector-fields th { 1908 | color: var(--drk-color-b); 1909 | } 1910 | body.dark .inspector-fields td, 1911 | body.dark .inspector-fields th { 1912 | border-bottom-color: var(--drk-border-color); 1913 | } 1914 | body.dark .inspector-fields td { 1915 | border-left-color: var(--drk-border-color); 1916 | background: var(--drk-bg-color-b); 1917 | } 1918 | body.dark .inspector-fields td.text.active { 1919 | background: var(--drk-bg-color-b); 1920 | } 1921 | body.dark .inspector-fields input[type=text] { 1922 | background: var(--drk-bg-color-b); 1923 | color: var(--drk-color-a); 1924 | } 1925 | body.dark .inspector-fields td div.external-param-editor-container.editor-visible div.external-editor div.controls input { 1926 | background: var(--drk-bg-color-c); 1927 | } 1928 | 1929 | 1930 | body.dark div.control-popover.popover-danger .popover-head { 1931 | background-image: linear-gradient(rgb(248 81 73 / 15%), rgb(248 81 73 / 15%)); 1932 | } 1933 | body.dark div.control-popover.popover-danger >div { 1934 | background-image: linear-gradient(rgb(248 81 73 / 15%), rgb(248 81 73 / 15%)); 1935 | border-color: #9f0700; 1936 | } 1937 | body.dark div.control-popover.popover-danger.placement-top .popover-head:before { 1938 | display: none; 1939 | } 1940 | body.dark div.control-popover.popover-danger.placement-top >div:after { 1941 | border-top-color: #9f0700; 1942 | } 1943 | 1944 | 1945 | /* alert */ 1946 | body.dark .sweet-alert { 1947 | background-color: var(--drk-bg-color-a); 1948 | color: var(--drk-color-a); 1949 | border: solid 1px var(--drk-border-color); 1950 | box-shadow: var(--drk-box-shadow); 1951 | } 1952 | body.dark .sweet-alert h2 { 1953 | color: var(--drk-color-a); 1954 | } 1955 | 1956 | 1957 | /* Modals */ 1958 | body.dark .modal-content { 1959 | background: var(--drk-bg-color-a); 1960 | color: var(--drk-color-a); 1961 | border: solid 1px var(--drk-border-color); 1962 | box-shadow: var(--drk-box-shadow); 1963 | } 1964 | body.dark .modal-header { 1965 | color: #e0dfdf; 1966 | } 1967 | body.dark .list-preview { 1968 | background: var(--drk-bg-color-c); 1969 | border-color: var(--drk-border-color); 1970 | } 1971 | body.dark .control-simplelist { 1972 | background: var(--drk-bg-color-c); 1973 | } 1974 | 1975 | body.dark div.popover-overlay { 1976 | background: rgb(0 0 0 / 50%); 1977 | } 1978 | 1979 | 1980 | /* Flash message */ 1981 | body.dark .flash-message { 1982 | background: var(--drk-bg-color-a); 1983 | color: var(--drk-color-a); 1984 | border-style: solid; 1985 | border-width: 1px; 1986 | box-shadow: var(--drk-box-shadow); 1987 | } 1988 | body.dark .flash-message.success { 1989 | background-image: linear-gradient(rgb(46 160 67 / 15%), rgb(46 160 67 / 15%)); 1990 | border-color: rgb(46 160 67 / 40%); 1991 | } 1992 | body.dark .flash-message.info { 1993 | background-image: linear-gradient(rgba(56,139,253,0.15), rgba(56,139,253,0.15)); 1994 | border-color: rgb(56 139 253 / 40%); 1995 | } 1996 | body.dark .flash-message.warning { 1997 | background-image: linear-gradient(rgb(187 128 9 / 15%), rgb(187 128 9 / 15%)); 1998 | border-color: rgb(187 128 9 / 40%); 1999 | } 2000 | body.dark .flash-message.error { 2001 | background-image: linear-gradient(rgb(248 81 73 / 15%), rgb(248 81 73 / 15%)); 2002 | border-color: rgb(248 81 73 / 40%); 2003 | } 2004 | 2005 | 2006 | /* Callout */ 2007 | body.dark .callout >.header { 2008 | background: var(--drk-bg-color-a); 2009 | color: var(--drk-color-a); 2010 | border-style: solid; 2011 | } 2012 | body.dark .callout.callout-success >.header { 2013 | background-image: linear-gradient(rgb(46 160 67 / 15%), rgb(46 160 67 / 15%)); 2014 | border-color: rgb(46 160 67 / 40%); 2015 | } 2016 | body.dark .callout.callout-info >.header { 2017 | background-image: linear-gradient(rgba(56,139,253,0.15), rgba(56,139,253,0.15)); 2018 | border-color: rgb(56 139 253 / 40%); 2019 | } 2020 | body.dark .callout.callout-warning >.header { 2021 | background-image: linear-gradient(rgb(187 128 9 / 15%), rgb(187 128 9 / 15%)); 2022 | border-color: rgb(187 128 9 / 40%); 2023 | } 2024 | body.dark .callout.callout-danger >.header { 2025 | background-image: linear-gradient(rgb(248 81 73 / 15%), rgb(248 81 73 / 15%)); 2026 | border-color: rgb(248 81 73 / 40%); 2027 | } 2028 | body.dark .callout .content { 2029 | background: var(--drk-bg-color-a); 2030 | color: var(--drk-color-a); 2031 | } 2032 | body.dark .callout .content a { 2033 | color: #58a6ff; 2034 | } 2035 | body.dark .callout .content ::marker { 2036 | color: var(--drk-color-a); 2037 | } 2038 | body.dark .callout.callout-success >.content { 2039 | background-image: linear-gradient(rgb(46 160 67 / 15%), rgb(46 160 67 / 15%)); 2040 | border-color: rgb(46 160 67 / 40%); 2041 | } 2042 | body.dark .callout.callout-info >.content { 2043 | background-image: linear-gradient(rgba(56,139,253,0.15), rgba(56,139,253,0.15)); 2044 | border-color: rgb(56 139 253 / 40%); 2045 | } 2046 | body.dark .callout.callout-warning >.content { 2047 | background-image: linear-gradient(rgb(187 128 9 / 15%), rgb(187 128 9 / 15%)); 2048 | border-color: rgb(187 128 9 / 40%); 2049 | } 2050 | body.dark .callout.callout-warning >.header + .content { 2051 | background-color: var(--drk-bg-color-a); 2052 | background-image: none; 2053 | } 2054 | body.dark .callout.callout-danger >.content { 2055 | background-image: linear-gradient(rgb(248 81 73 / 15%), rgb(248 81 73 / 15%)); 2056 | border-color: rgb(248 81 73 / 40%); 2057 | } 2058 | 2059 | 2060 | /* permission editor */ 2061 | body.dark .permissioneditor table th { 2062 | color: var(--drk-color-a); 2063 | border-color: var(--drk-border-color); 2064 | font-weight: 600; 2065 | font-size: 16px; 2066 | } 2067 | body.dark .permissioneditor table td { 2068 | border-color: var(--drk-border-color); 2069 | } 2070 | body.dark .permissioneditor table tr:hover td { 2071 | background: var(--drk-bg-color-b); 2072 | } 2073 | body.dark .permissioneditor table td.permission-name { 2074 | color: #7ee787; 2075 | } 2076 | 2077 | 2078 | /* theme-selector - /backend/cms/themes */ 2079 | body.dark .theme-selector-layout .theme-thumbnail { 2080 | background: #10161e; 2081 | } 2082 | body.dark .theme-selector-layout .layout-row.active .theme-thumbnail { 2083 | background: var(--drk-bg-color-c); 2084 | } 2085 | body.dark .theme-selector-layout .layout-row.active .thumbnail-container:after { 2086 | border-left-color: var(--drk-bg-color-c); 2087 | } 2088 | body.dark .theme-selector-layout .layout-row.links .theme-thumbnail { 2089 | border-color: var(--drk-border-color); 2090 | } 2091 | body.dark .theme-selector-layout .create-new-theme, 2092 | body.dark .theme-selector-layout .find-more-themes { 2093 | background: var(--drk-btn-bg-color); 2094 | color: #bbb; 2095 | } 2096 | body.dark .theme-selector-layout .create-new-theme:hover, 2097 | body.dark .theme-selector-layout .find-more-themes:hover { 2098 | background: var(--drk-hover-bg-color-b); 2099 | color: var(--drk-color-a); 2100 | } 2101 | body.dark .theme-selector-layout .theme-description h3 { 2102 | color: var(--drk-color-a); 2103 | } 2104 | body.dark .theme-selector-layout .theme-description p.description { 2105 | color: #bbb; 2106 | } 2107 | body.dark .theme-selector-layout .layout-row.links .theme-description { 2108 | border-color: var(--drk-border-color); 2109 | } 2110 | 2111 | 2112 | /* Tabs */ 2113 | body.dark .control-tabs>ul.nav-tabs>li a>span.title>span, 2114 | body.dark .control-tabs>div>ul.nav-tabs>li a>span.title>span, 2115 | body.dark .control-tabs>div>div>ul.nav-tabs>li a>span.title>span { 2116 | border-color: var(--drk-border-color); 2117 | } 2118 | body.dark .control-tabs.primary-tabs >ul.nav-tabs >li a >span.title:before, 2119 | body.dark .control-tabs.primary-tabs >div >ul.nav-tabs >li a >span.title:before, 2120 | body.dark .control-tabs.primary-tabs >div >div >ul.nav-tabs >li a >span.title:before, 2121 | body.dark .control-tabs.primary-tabs >ul.nav-tabs >li a >span.title:after, 2122 | body.dark .control-tabs.primary-tabs >div >ul.nav-tabs >li a >span.title:after, 2123 | body.dark .control-tabs.primary-tabs >div >div >ul.nav-tabs >li a >span.title:after { 2124 | background: var(--drk-bg-color-a); 2125 | } 2126 | body.dark .control-tabs.primary-tabs >ul.nav-tabs >li.active a >span.title:before, 2127 | body.dark .control-tabs.primary-tabs >div >ul.nav-tabs >li.active a >span.title:before, 2128 | body.dark .control-tabs.primary-tabs >div >div >ul.nav-tabs >li.active a >span.title:before, 2129 | body.dark .control-tabs.primary-tabs >ul.nav-tabs >li.active a >span.title:after, 2130 | body.dark .control-tabs.primary-tabs >div >ul.nav-tabs >li.active a >span.title:after, 2131 | body.dark .control-tabs.primary-tabs >div >div >ul.nav-tabs >li.active a >span.title:after { 2132 | border-color: var(--drk-border-color); 2133 | } 2134 | body.dark .fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.primary-tabs>div>ul.nav-tabs>li.active a span.title:before, 2135 | body.dark *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.fancy-layout.primary-tabs>div>ul.nav-tabs>li.active a span.title:before, 2136 | body.dark .fancy-layout *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.primary-tabs>div>ul.nav-tabs>li.active a span.title:after, 2137 | body.dark *:not(.nested-form)>.form-widget>.layout-row>.control-tabs.fancy-layout.primary-tabs>div>ul.nav-tabs>li.active a span.title:after { 2138 | background: var(--drk-bg-color-a); 2139 | } 2140 | body.dark .control-tabs.primary-tabs >ul.nav-tabs >li.active a >span.title span, 2141 | body.dark .control-tabs.primary-tabs >div >ul.nav-tabs >li.active a >span.title span, 2142 | body.dark .control-tabs.primary-tabs >div >div >ul.nav-tabs >li.active a >span.title span { 2143 | color: var(--drk-color-a); 2144 | border-top-color: var(--drk-border-color); 2145 | } 2146 | body.dark .control-tabs.primary-tabs >ul.nav-tabs >li.active a:before, 2147 | body.dark .control-tabs.primary-tabs >div >ul.nav-tabs >li.active a:before, 2148 | body.dark .control-tabs.primary-tabs >div >div >ul.nav-tabs >li.active a:before { 2149 | background-color: var(--drk-bg-color-a); 2150 | } 2151 | body.dark .control-tabs >div >ul.nav-tabs >li a >span.title >span, 2152 | body.dark .control-tabs.primary-tabs >ul.nav-tabs:before, 2153 | body.dark .control-tabs.primary-tabs >div >ul.nav-tabs:before, 2154 | body.dark .control-tabs.primary-tabs >div >div >ul.nav-tabs:before, 2155 | body.dark .control-tabs.primary-tabs>ul.nav-tabs>li a>span.title:before, 2156 | body.dark .control-tabs.primary-tabs >div >ul.nav-tabs >li a >span.title:before, 2157 | body.dark .control-tabs.primary-tabs >div >div >ul.nav-tabs >li a >span.title:before, 2158 | body.dark .control-tabs.primary-tabs >ul.nav-tabs >li a >span.title:after, 2159 | body.dark .control-tabs.primary-tabs >div >ul.nav-tabs >li a >span.title:after, 2160 | body.dark .control-tabs.primary-tabs >div >div >ul.nav-tabs >li a >span.title:after { 2161 | border-color: var(--drk-border-color); 2162 | } 2163 | body.dark .control-tabs.secondary-tabs>ul.nav-tabs>li, 2164 | body.dark .control-tabs.secondary-tabs>div>ul.nav-tabs>li, 2165 | body.dark .control-tabs.secondary-tabs>div>div>ul.nav-tabs>li { 2166 | border-color: var(--drk-color-c); 2167 | } 2168 | body.dark .control-tabs >div >ul.nav-tabs >li a { 2169 | color: var(--drk-color-c); 2170 | } 2171 | body.dark .control-tabs >div >ul.nav-tabs >li a:hover { 2172 | color: var(--drk-color-a); 2173 | } 2174 | body.dark .control-tabs >ul.nav-tabs >li.active a, 2175 | body.dark .control-tabs >div >ul.nav-tabs >li.active a, 2176 | body.dark .control-tabs >div >div >ul.nav-tabs >li.active a, 2177 | body.dark .control-tabs >ul.nav-tabs >li.active a:hover, 2178 | body.dark .control-tabs >div >ul.nav-tabs >li.active a:hover, 2179 | body.dark .control-tabs >div >div >ul.nav-tabs >li.active a:hover { 2180 | color: var(--drk-color-a); 2181 | } 2182 | body.dark .control-tabs >ul.nav-tabs >li.active a:hover { 2183 | background: transparent; 2184 | } 2185 | body.dark .layout-cell.w-300.form-sidebar.control-scrollpanel { 2186 | background-color: var(--drk-bg-color-c); 2187 | border-left: 1px solid var(--drk-border-color); 2188 | } 2189 | 2190 | body.dark .control-tabs.content-tabs >.tab-content >.tab-pane div.list-header, 2191 | body.dark .control-tabs.content-tabs >.tab-content >.tab-pane div.padded-container, 2192 | body.dark .control-tabs.content-tabs >.tab-content >.tab-pane div.toolbar-widget { 2193 | background: var(--drk-bg-color-a); 2194 | } 2195 | body.dark .control-tabs.content-tabs >ul.nav-tabs:before { 2196 | background: var(--drk-border-color); 2197 | } 2198 | body.dark .control-tabs.content-tabs >ul.nav-tabs li { 2199 | border-color: var(--drk-border-color); 2200 | } 2201 | body.dark .control-tabs.content-tabs >ul.nav-tabs li:first-child { 2202 | border-left-color: var(--drk-border-color); 2203 | } 2204 | body.dark .control-tabs.content-tabs >ul.nav-tabs li.active { 2205 | background: var(--drk-bg-color-a); 2206 | } 2207 | body.dark .control-tabs.content-tabs.tabs-flush>ul.nav-tabs li.active:last-child { 2208 | border-color: var(--drk-border-color); 2209 | } 2210 | body.dark .control-tabs>ul.nav-tabs>li a, 2211 | body.dark .control-tabs>div>ul.nav-tabs>li a, 2212 | body.dark .control-tabs>div>div>ul.nav-tabs>li a { 2213 | color: var(--drk-color-c); 2214 | } 2215 | body.dark .control-tabs>ul.nav-tabs>li a:hover, 2216 | body.dark .control-tabs>ul.nav-tabs>li a:focus, 2217 | body.dark .control-tabs>div>ul.nav-tabs>li a:hover, 2218 | body.dark .control-tabs>div>ul.nav-tabs>li a:focus, 2219 | body.dark .control-tabs>div>div>ul.nav-tabs>li a:hover, 2220 | body.dark .control-tabs>div>div>ul.nav-tabs>li a:focus { 2221 | background: transparent; 2222 | } 2223 | body.dark .control-tabs.primary-tabs >div >ul.nav-tabs >li.active a >span.title:before, 2224 | body.dark .control-tabs.primary-tabs >div >ul.nav-tabs >li.active a >span.title:after { 2225 | background: var(--drk-bg-color-a); 2226 | } 2227 | /* End - Tabs */ 2228 | 2229 | 2230 | /* Scoreboard */ 2231 | body.dark .title-value h4 { 2232 | color: var(--drk-color-b); 2233 | } 2234 | body.dark .title-value p { 2235 | color: var(--drk-color-a); 2236 | } 2237 | /* End - Tabs */ 2238 | 2239 | 2240 | /* eventlogs */ 2241 | body.dark .plugin-exception-beautifier .beautifier-message-container { 2242 | background: var(--drk-bg-color-a); 2243 | } 2244 | body.dark .plugin-exception-beautifier .beautifier-formatted-content, 2245 | body.dark .plugin-exception-beautifier .beautifier-raw-content { 2246 | background: var(--drk-bg-color-c); 2247 | } 2248 | body.dark .plugin-exception-beautifier .beautifier-class { 2249 | color: #777; 2250 | } 2251 | body.dark .plugin-exception-beautifier .beautifier-stacktrace-line-function { 2252 | color: #bd93f9; 2253 | } 2254 | body.dark .plugin-exception-beautifier .beautifier-stacktrace-line:nth-child(odd) { 2255 | background-color: var(--drk-bg-color-b); 2256 | } 2257 | body.dark .plugin-exception-beautifier .beautifier-stacktrace-line:nth-child(even) { 2258 | background-color: var(--drk-bg-color-a); 2259 | } 2260 | body.dark .plugin-exception-beautifier .beautifier-stacktrace-line-number { 2261 | color: var(--drk-color-a); 2262 | } 2263 | body.dark .plugin-exception-beautifier .beautifier-file { 2264 | color: #87cefa; 2265 | } 2266 | body.dark .plugin-exception-beautifier .beautifier-line-number { 2267 | color: #8f8f8f; 2268 | } 2269 | body.dark .plugin-exception-beautifier .beautifier-function { 2270 | color: #a5c261; 2271 | } 2272 | body.dark .plugin-exception-beautifier .beautifier-toggle-stacktrace { 2273 | background: var(--drk-hover-bg-color-b); 2274 | color: var(--drk-color-b); 2275 | } 2276 | 2277 | /* Import/Export */ 2278 | body.dark .import-behavior .import-file-columns, 2279 | body.dark .import-behavior .import-db-columns { 2280 | background: var(--drk-bg-color-c); 2281 | } 2282 | body.dark .import-behavior ul li.dragged, 2283 | body.dark .import-behavior .import-file-columns > ul > li, 2284 | body.dark .import-behavior .import-db-columns > ul > li { 2285 | background: var(--drk-bg-color-a); 2286 | border-color: var(--drk-border-color); 2287 | } 2288 | body.dark .export-behavior .export-columns { 2289 | background: #010409; 2290 | border: solid 1px var(--drk-border-color); 2291 | } 2292 | body.dark .import-behavior .import-file-columns > ul div.import-column-name a.column-label { 2293 | color: var(--drk-color-a); 2294 | } 2295 | body.dark .import-behavior .import-column-bindings > ul { 2296 | background: var(--drk-bg-color-c); 2297 | } 2298 | body.dark .import-behavior .import-column-bindings > ul:after { 2299 | border-left-color: var(--drk-bg-color-a); 2300 | } 2301 | body.dark .import-behavior .import-column-bindings > ul:before { 2302 | color: #8b7964; 2303 | } 2304 | body.dark .import-behavior .import-column-bindings > ul > li:not(.dragged) { 2305 | background: var(--drk-bg-color-b); 2306 | } 2307 | body.dark .import-behavior .import-file-columns > ul div.import-column-name a.column-ignore-button { 2308 | background: var(--drk-border-color); 2309 | } 2310 | body.dark .import-behavior .import-column-bindings > ul > li:hover .column-icon { 2311 | color: var(--drk-color-a); 2312 | } 2313 | 2314 | /* Winter.Notes */ 2315 | body.dark .field-notes .field-notes-list { 2316 | background-color: var(--drk-bg-color-b); 2317 | } 2318 | body.dark .field-notes .field-notes-form { 2319 | background-color: var(--drk-bg-color-a); 2320 | } 2321 | body.dark .field-notes .field-notes-list > ul .checked { 2322 | background-color: var(--drk-bg-color-c); 2323 | color: var(--drk-color-a); 2324 | } 2325 | body.dark .field-notes .toolbar .btn-icon { 2326 | background: var(--drk-btn-bg-color); 2327 | border-color: var(--drk-border-color); 2328 | } 2329 | body.dark .field-notes .toolbar .btn-icon:hover { 2330 | background: #0654ca; 2331 | } 2332 | body.dark .field-notes .toolbar [class*=" oc-icon-"]:before { 2333 | color: var(--drk-color-a); 2334 | } 2335 | body.dark .field-notes .field-notes-list > ul > li a { 2336 | color: var(--drk-color-a); 2337 | } 2338 | body.dark .field-notes .field-notes-list > ul > li div h4 span { 2339 | color: var(--drk-color-c); 2340 | } 2341 | body.dark .field-notes .field-notes-list > ul > li a h3 { 2342 | font-weight: 600; 2343 | } 2344 | body.dark .field-notes .field-notes-list > ul > li { 2345 | border-color: var(--drk-border-color); 2346 | } 2347 | 2348 | 2349 | /* Widget Winter.User Statistics */ 2350 | body.dark .user-statistics-widget { 2351 | background: #000; 2352 | } 2353 | body.dark .table-user-statistics { 2354 | margin-top: 20px; 2355 | } 2356 | body.dark .users-statistics-item-total, 2357 | body.dark .users-statistics-item-activated, 2358 | body.dark .users-statistics-item-banned { 2359 | background: inherit; 2360 | } 2361 | body.dark .users-statistics-item-total {color: aqua} 2362 | body.dark .users-statistics-item-activated {color: greenyellow} 2363 | body.dark .users-statistics-item-banned {color: orangered} 2364 | body.dark .table-user-statistics td:not(:first-child) {color: cyan} 2365 | 2366 | 2367 | /* Winter.Builder */ 2368 | body.dark .fancy-layout.control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li.active[data-tab-id="welcome"] a>span.title, 2369 | body.dark .fancy-layout.control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li.active[data-tab-id="welcome"] a>span.title:before, 2370 | body.dark .fancy-layout.control-tabs.master-tabs>div>div.tabs-container>ul.nav-tabs>li.active[data-tab-id="welcome"] a>span.title:after { 2371 | background: var(--drk-bg-color-a); 2372 | } 2373 | body.dark #layout-side-panel div.control-toolbar.separator, 2374 | body.dark .compact-toolbar div.control-toolbar.separator { 2375 | border-bottom-color: var(--drk-border-color); 2376 | } 2377 | body.dark #layout-side-panel div.control-toolbar input.form-control, 2378 | body.dark .compact-toolbar div.control-toolbar input.form-control { 2379 | -webkit-box-shadow: inset 0 1px 0 var(--drk-border-color); 2380 | box-shadow: inset 0 1px 0 var(--drk-border-color); 2381 | } 2382 | body.dark .control-filelist.filelist-hero ul li { 2383 | background: var(--drk-bg-color-b); 2384 | } 2385 | body.dark .control-filelist.filelist-hero.single-level ul li:hover >a { 2386 | background: #202833; 2387 | } 2388 | body.dark .control-filelist.filelist-hero ul li.separator { 2389 | background: var(--drk-bg-color-a); 2390 | border-bottom-color: var(--drk-border-color); 2391 | } 2392 | body.dark .control-filelist.filelist-hero ul li.separator:before { 2393 | border-top-color: var(--drk-bg-color-a); 2394 | } 2395 | body.dark .control-filelist.filelist-hero ul li.separator:after { 2396 | border-top-color: var(--drk-border-color); 2397 | } 2398 | body.dark .control-filelist.filelist-hero ul li.separator h5 { 2399 | color: var(--drk-color-a); 2400 | } 2401 | body.dark .control-filelist.filelist-hero ul li >a { 2402 | border-bottom-color: var(--drk-border-color); 2403 | } 2404 | body.dark .control-filelist.component-list ul li div.group span.description { 2405 | color: var(--drk-color-c); 2406 | } 2407 | /* body.dark .builder-building-area { 2408 | background: var(--drk-bg-color-a); 2409 | } */ 2410 | body.dark #layout-side-panel .sidepanel-content-header { 2411 | background: #184d70; 2412 | color: var(--drk-color-a); 2413 | } 2414 | body.dark #layout-side-panel .sidepanel-content-header:after { 2415 | border-top-color: #184d70; 2416 | } 2417 | body.dark #layout-side-panel.layout-cell.w-350 { 2418 | background: var(--drk-bg-color-c); 2419 | } 2420 | body.dark .fancy-layout .form-tabless-fields .loading-indicator-container .loading-indicator { 2421 | background: var(--drk-bg-color-fancy); 2422 | } 2423 | body.dark .fancy-layout .control-tabs.secondary-tabs.secondary-content-tabs.primary-collapsed>div>ul.nav-tabs, 2424 | body.dark .fancy-layout.control-tabs.secondary-tabs.secondary-content-tabs.primary-collapsed>div>ul.nav-tabs { 2425 | background: var(--drk-bg-color-fancy); 2426 | } 2427 | body.dark #builder-master-tabs .control-tabs >div >ul.nav-tabs >li a >span.title >span { 2428 | border-top: 0; 2429 | } 2430 | body.dark div.control-table .toolbar a.builder-custom-table-button:before { 2431 | color: var(--drk-color-a); 2432 | } 2433 | 2434 | /* Winter.Docs */ 2435 | body.dark #docs-content h1, 2436 | body.dark #docs-content h2 { 2437 | border-bottom-color: var(--drk-border-color); 2438 | } 2439 | body.dark #docs-content table tr { 2440 | background-color: var(--drk-bg-color-b); 2441 | } 2442 | body.dark #docs-content table tr:nth-child(2n) { 2443 | background-color: var(--drk-bg-color-c); 2444 | } 2445 | body.dark #docs-content table th, 2446 | body.dark #docs-content table td { 2447 | border-color: var(--drk-border-color); 2448 | } 2449 | body.dark #docs-content blockquote { 2450 | background: var(--drk-bg-color-b); 2451 | border-color: var(--drk-border-color); 2452 | color: var(--drk-color-a); 2453 | } 2454 | body.dark #docs-content code { 2455 | display: inline-block; 2456 | padding: 0.2em 0.4em; 2457 | margin: 0; 2458 | font-size: 85%; 2459 | background: rgb(110 118 129 / 40%); 2460 | border-radius: 6px; 2461 | color: #c9d1d9; 2462 | border: 0; 2463 | } 2464 | body.dark #docs-content pre code { 2465 | background: #2c2f38; 2466 | } 2467 | 2468 | /* Winter.Redirect */ 2469 | body.dark .row .report-widget { 2470 | box-shadow: none; 2471 | } 2472 | body.dark .row .report-widget h3 { 2473 | border-color: var(--drk-border-color); 2474 | } 2475 | body.dark .control-status-list>ul li .status-icon.info, 2476 | body.dark .control-status-list>ul li .status-label.info { 2477 | background: #0dcaf0; 2478 | color: #000; 2479 | } 2480 | body.dark .status-code-info { 2481 | color: #0dcaf0; 2482 | } 2483 | body.dark .sparkline { 2484 | background-color: var(--drk-bg-color-a); 2485 | } 2486 | -------------------------------------------------------------------------------- /assets/images/bitmap-icons_dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebVPF/wn-darkbackend-plugin/fc614cad30b7cf8c0e01e4ae685f5b642a0ffa8c/assets/images/bitmap-icons_dark.png -------------------------------------------------------------------------------- /assets/images/table-icons_dark.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebVPF/wn-darkbackend-plugin/fc614cad30b7cf8c0e01e4ae685f5b642a0ffa8c/assets/images/table-icons_dark.gif -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | const darkBackend = { 2 | keyStorage: 'backendTheme', 3 | 4 | event() { 5 | document.addEventListener('modeDarkEnabled', this.enable.bind(this)); 6 | document.addEventListener('modeDarkDisabled', this.disable.bind(this)); 7 | }, 8 | 9 | createCheck() { 10 | let eventEnable = new Event('modeDarkEnabled'), 11 | eventDisable = new Event('modeDarkDisabled'); 12 | 13 | let checkTheme = document.createElement('input'); 14 | checkTheme.id = 'darkTheme'; 15 | checkTheme.setAttribute('type', 'checkbox'); 16 | 17 | if (localStorage.getItem(this.keyStorage) === 'dark') { 18 | checkTheme.setAttribute('checked', 'checked') 19 | } 20 | 21 | checkTheme.addEventListener('input', () => { 22 | document.dispatchEvent( checkTheme.checked ? eventEnable : eventDisable ) 23 | }); 24 | 25 | return checkTheme 26 | }, 27 | 28 | createToggle() { 29 | let lang = document.querySelector('html').getAttribute('lang'), 30 | textCheckbox = { 31 | en: 'Dark Theme', 32 | ru: 'Тёмная тема', 33 | uk: 'Темна тема' 34 | }, 35 | txtLang = textCheckbox[lang] ? textCheckbox[lang] : textCheckbox['en']; 36 | 37 | let toggleTheme = document.createElement('li'); 38 | toggleTheme.innerHTML = `
39 | 40 |
`; 41 | 42 | toggleTheme.querySelector('label').before( this.createCheck() ); 43 | 44 | return toggleTheme 45 | }, 46 | 47 | disable() { 48 | document.querySelector('body').classList.remove('dark'); 49 | 50 | localStorage.removeItem(this.keyStorage); 51 | }, 52 | 53 | enable() { 54 | document.querySelector('body').classList.add('dark'); 55 | 56 | localStorage.setItem(this.keyStorage, 'dark'); 57 | }, 58 | 59 | init() { 60 | document.addEventListener('DOMContentLoaded', () => { 61 | if (localStorage.getItem(this.keyStorage) === 'dark') { 62 | document.querySelector('body').classList.add('dark') 63 | } 64 | 65 | document.querySelector('.mainmenu-accountmenu li.divider').before( this.createToggle() ) 66 | }); 67 | 68 | this.event() 69 | } 70 | } 71 | 72 | darkBackend.init(); 73 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webvpf/wn-darkbackend-plugin", 3 | "type": "winter-plugin", 4 | "description": "Dark Theme for Backend Winter CMS", 5 | "homepage": "https://github.com/WebVPF/wn-darkbackend-plugin", 6 | "keywords": ["winter cms", "wintercms", "wintercms-plugin"], 7 | "license": "MIT", 8 | "authors": [ 9 | { 10 | "name": "WebVPF", 11 | "role": "Author" 12 | } 13 | ], 14 | "support": { 15 | "issues": "https://github.com/WebVPF/wn-darkbackend-plugin/issues", 16 | "source": "https://github.com/WebVPF/wn-darkbackend-plugin" 17 | }, 18 | "require": { 19 | "composer/installers": "~1.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /lang/en/lang.php: -------------------------------------------------------------------------------- 1 | [ 5 | 'name' => 'DarkBackend', 6 | 'desc' => 'Dark Theme for Backend Winter CMS', 7 | ], 8 | ]; 9 | -------------------------------------------------------------------------------- /lang/ru/lang.php: -------------------------------------------------------------------------------- 1 | [ 5 | 'name' => 'DarkBackend', 6 | 'desc' => 'Тёмная тема для бэкенда Winter CMS', 7 | ], 8 | ]; 9 | -------------------------------------------------------------------------------- /lang/uk/lang.php: -------------------------------------------------------------------------------- 1 | [ 5 | 'name' => 'DarkBackend', 6 | 'desc' => 'Темна тема для бекенду Winter CMS', 7 | ], 8 | ]; 9 | -------------------------------------------------------------------------------- /updates/version.yaml: -------------------------------------------------------------------------------- 1 | 1.0.1: First version of DarkBackend 2 | 1.0.2: Styles update and description in README file 3 | 1.0.3: Fixes dialogs and icon colors in some inputs 4 | 1.0.4: Adjusts main text color 5 | 1.0.5: Fixes color of disabled/readonly inputs and dropdowns 6 | 1.0.6: Update styles 7 | 1.0.7: Update styles 8 | 1.0.8: Fixed styles of component blocks 9 | 1.0.9: Improving media manager styles 10 | 1.0.10: Improving styles 11 | 1.0.11: Improving styles 12 | 1.0.12: Improving styles 13 | 1.0.13: Improving styles 14 | 1.0.14: Improving styles 15 | 1.0.15: Winter CMS 16 | 1.0.16: Improving styles 17 | 1.0.17: Improving styles 18 | 1.0.18: Add tooltip styles 19 | 1.0.19: Improving styles 20 | 1.0.20: Improving styles 21 | 1.0.21: Added plugin version to css file path. Improving styles 22 | 1.0.22: Improving styles 23 | 1.0.23: Improving styles 24 | 1.0.24: Stylized account menu 25 | 1.0.25: Improving styles 26 | 1.0.26: Improving styles 27 | 1.0.27: Stylized Callout 28 | 1.1.0: New dark theme 29 | 1.1.1: Improving styles, remove custom.css, ES6 syntax 30 | 1.1.2: Added styles for Winter.Notes, Improving styles 31 | 1.1.3: Improving styles 32 | 1.1.4: Improving styles 33 | 1.1.5: Improving styles 34 | 1.1.6: Improving styles 35 | 1.1.7: Added styles for Winter.Docs, Improving styles 36 | 1.1.8: Improving styles 37 | 1.1.9: Improving styles 38 | 1.1.10: Added styles for Import & Export widgets 39 | 1.1.11: Improving Import styles 40 | 1.1.12: Improving styles 41 | 1.1.13: Improving styles 42 | 1.2.0: JavaScript rewritten, events added 43 | 1.2.1: Removed borders on dashboard widgets 44 | 1.2.2: Set context in calling methods from listeners 45 | 1.2.3: Improving styles 46 | 1.2.4: Improving styles 47 | 1.2.5: Improving styles 48 | 1.2.6: Improving styles 49 | 1.2.7: Improving styles 50 | 1.2.8: New CSS variables 51 | 1.2.9: Improving styles 52 | 1.2.10: Improving styles 53 | 1.2.11: media-manager, fileupload 54 | 1.2.12: Improving styles 55 | 1.2.13: Improving styles 56 | 1.2.14: Improving styles 57 | 1.2.15: Improving styles 58 | 1.2.16: Improving styles 59 | 1.2.17: Added placeholder styles for input and textarea 60 | 1.2.18: Improving styles. Added styles for Winter.Redirect 61 | 1.2.19: Improving media-manager styles. Fixes and improvements. 62 | --------------------------------------------------------------------------------