├── assets ├── src │ ├── css │ │ ├── widgets │ │ │ ├── all.css │ │ │ └── table.css │ │ ├── base.css │ │ ├── app.css │ │ ├── components │ │ │ ├── all.css │ │ │ ├── counter.css │ │ │ ├── froala.css │ │ │ ├── badge.css │ │ │ ├── nested-form.css │ │ │ ├── menu.css │ │ │ ├── button-group.css │ │ │ ├── button.css │ │ │ ├── form.css │ │ │ └── fancy-layout.css │ │ ├── custom.css │ │ └── darkmode.css │ └── js │ │ ├── composables │ │ └── state.js │ │ ├── darkmode.js │ │ ├── menu.js │ │ ├── app.js │ │ └── winter.sidepaneltab.js ├── images │ └── background.jpg └── dist │ └── manifest.json ├── updates └── version.yaml ├── skins ├── tailwindui │ ├── layouts │ │ ├── _flash-messages.php │ │ ├── _context-sidenav.php │ │ ├── _flyout-container.php │ │ ├── _breakpoint-debugger.php │ │ ├── partials │ │ │ ├── notices │ │ │ │ └── _impersonation.php │ │ │ └── menu │ │ │ │ ├── top │ │ │ │ ├── _icon-classes.php │ │ │ │ ├── _mobile-menu.php │ │ │ │ └── _quick-actions.php │ │ │ │ ├── _header-search.php │ │ │ │ └── side │ │ │ │ └── _item-contents.php │ │ ├── _branding.php │ │ ├── auth-simple.php │ │ ├── auth-split.php │ │ ├── _head_auth.php │ │ ├── _head.php │ │ ├── _menu-side.php │ │ ├── default.php │ │ └── _menu-top.php │ └── views │ │ └── backend │ │ └── controllers │ │ └── auth │ │ ├── signin.php │ │ ├── restore.php │ │ ├── reset.php │ │ ├── signin-split.php │ │ └── signin-simple.php └── TailwindUI.php ├── .gitignore ├── postcss.config.mjs ├── config └── config.php ├── package.json ├── lang ├── fr │ └── lang.php └── en │ └── lang.php ├── LICENSE ├── composer.json ├── models ├── preference │ └── fields.yaml └── brandsetting │ └── fields.yaml ├── vite.config.mjs ├── tailwind.config.js ├── README.md ├── composer.lock └── Plugin.php /assets/src/css/widgets/all.css: -------------------------------------------------------------------------------- 1 | @import 'table.css'; 2 | -------------------------------------------------------------------------------- /updates/version.yaml: -------------------------------------------------------------------------------- 1 | 1.0.1: First version of TailwindUI 2 | -------------------------------------------------------------------------------- /assets/src/css/base.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /assets/images/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wintercms/wn-tailwindui-plugin/HEAD/assets/images/background.jpg -------------------------------------------------------------------------------- /skins/tailwindui/layouts/_flash-messages.php: -------------------------------------------------------------------------------- 1 |
makeLayoutPartial('flash_messages') ?>
2 | -------------------------------------------------------------------------------- /assets/src/css/app.css: -------------------------------------------------------------------------------- 1 | @import 'base.css'; 2 | @import 'components/all.css'; 3 | @import 'widgets/all.css'; 4 | @import 'custom.css'; 5 | @import 'darkmode.css'; 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /vendor 3 | 4 | # Editor ignores 5 | nbproject 6 | .idea 7 | .vscode 8 | _ide_helper.php 9 | 10 | # laravel mix temp files 11 | /mix.webpack.js 12 | -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | 'postcss-import': {}, 4 | 'tailwindcss/nesting': {}, 5 | 'tailwindcss': {}, 6 | 'autoprefixer': {}, 7 | }, 8 | }; 9 | -------------------------------------------------------------------------------- /skins/tailwindui/views/backend/controllers/auth/signin.php: -------------------------------------------------------------------------------- 1 | owner, $context->mainMenuCode); 4 | 5 | if ($contextSidenav) { 6 | echo $this->makePartial($contextSidenav); 7 | } 8 | ?> 9 | -------------------------------------------------------------------------------- /assets/src/js/composables/state.js: -------------------------------------------------------------------------------- 1 | import { readonly, ref } from 'vue'; 2 | 3 | export const useState = (initialState) => { 4 | const state = ref(initialState); 5 | const setState = (newState) => { 6 | state.value = newState; 7 | }; 8 | 9 | return [readonly(state), setState]; 10 | }; 11 | -------------------------------------------------------------------------------- /assets/dist/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "assets/src/css/app.css": { 3 | "file": "assets/app-Dy0DEgki.css", 4 | "src": "assets/src/css/app.css", 5 | "isEntry": true 6 | }, 7 | "assets/src/js/app.js": { 8 | "file": "assets/app-Ca5XhrW-.js", 9 | "name": "app", 10 | "src": "assets/src/js/app.js", 11 | "isEntry": true 12 | } 13 | } -------------------------------------------------------------------------------- /skins/tailwindui/layouts/_flyout-container.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | data-control="flyout" 5 | data-flyout-width="400" 6 | data-flyout-toggle="#layout-sidenav" 7 | 8 | > 9 | 10 |
11 | 12 | -------------------------------------------------------------------------------- /assets/src/css/components/counter.css: -------------------------------------------------------------------------------- 1 | @layer components { 2 | .counter { 3 | @apply text-xs bg-red-500 rounded-full font-semibold text-white; 4 | position: absolute; 5 | top: 0; 6 | right: 0; 7 | padding: .25em .5em; 8 | text-align: center; 9 | } 10 | span + .counter { 11 | top: 50%; 12 | right: 1em; 13 | transform: translateY(-50%); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /skins/TailwindUI.php: -------------------------------------------------------------------------------- 1 | skinPath . '/layouts' 18 | ]; 19 | } 20 | } -------------------------------------------------------------------------------- /config/config.php: -------------------------------------------------------------------------------- 1 | env('TAILWIND_SHOW_BREAKPOINT_DEBUGGER', false), 16 | 17 | ]; 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "winter-tailwindui", 3 | "private": true, 4 | "version": "1.0.1", 5 | "dependencies": { 6 | "@headlessui/vue": "~1.4.x", 7 | "@heroicons/vue": "~1.0.x", 8 | "vue": "^3.2.45" 9 | }, 10 | "devDependencies": { 11 | "@tailwindcss/forms": "^0.5.3", 12 | "@tailwindcss/typography": "^0.5.9", 13 | "autoprefixer": "^10.4.13", 14 | "postcss": "^8.4.20", 15 | "postcss-import": "^15.1.0", 16 | "tailwindcss": "^3.2.4", 17 | "vue-loader": "^16.2.0", 18 | "@vitejs/plugin-vue": "^5.0.5" 19 | } 20 | } -------------------------------------------------------------------------------- /assets/src/css/components/froala.css: -------------------------------------------------------------------------------- 1 | .fr-view { 2 | /* headings */ 3 | h1 { 4 | @apply text-3xl; 5 | } 6 | 7 | h2 { 8 | @apply text-2xl; 9 | } 10 | 11 | h3 { 12 | @apply text-xl; 13 | } 14 | 15 | h4 { 16 | @apply text-base font-semibold; 17 | } 18 | 19 | /* lists */ 20 | ul, ol { 21 | @apply space-y-1 list-inside; 22 | } 23 | 24 | ul { 25 | @apply list-disc; 26 | } 27 | 28 | ol { 29 | @apply list-decimal; 30 | } 31 | 32 | /* links */ 33 | a { 34 | @apply text-blue-600 hover:text-blue-600 hover:underline; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /assets/src/js/darkmode.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Dark Mode / Theme Appearance switcher 3 | */ 4 | window.updateColorScheme = function (scheme) { 5 | const docEl = document.documentElement; 6 | if (scheme !== undefined) { 7 | docEl.setAttribute('data-color-scheme', scheme); 8 | } 9 | 10 | const colorScheme = docEl.getAttribute('data-color-scheme') || 'light'; 11 | 12 | if ( 13 | colorScheme === 'dark' || ( 14 | colorScheme === 'auto' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches 15 | ) 16 | ) { 17 | docEl.classList.add('dark'); 18 | } else { 19 | docEl.classList.remove('dark'); 20 | } 21 | } 22 | updateColorScheme(); 23 | -------------------------------------------------------------------------------- /assets/src/css/components/badge.css: -------------------------------------------------------------------------------- 1 | @layer components { 2 | .badge { 3 | @apply inline-flex flex-row content-center bg-gray-100 text-gray-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300; 4 | 5 | &.primary { 6 | @apply bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800; 7 | } 8 | 9 | &.success { 10 | @apply bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900; 11 | } 12 | 13 | &.warning { 14 | @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900; 15 | } 16 | 17 | &.danger { 18 | @apply bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900; 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /skins/tailwindui/layouts/_breakpoint-debugger.php: -------------------------------------------------------------------------------- 1 | 2 |
sm
3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /skins/tailwindui/layouts/partials/notices/_impersonation.php: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | 5 | 6 | \BackendAuth::getImpersonator()->email, 8 | 'impersonatee' => \BackendAuth::getUser()->email, 9 | ])); ?> 10 | 11 |
12 | 13 | 14 | 15 |
16 | 17 | -------------------------------------------------------------------------------- /skins/tailwindui/layouts/partials/menu/top/_icon-classes.php: -------------------------------------------------------------------------------- 1 | iconSvg): ?> 2 | svg-icon 3 | 4 | icon ?> 5 | 6 | 7 | inline-block mr-2 8 | iconSvg): ?> 9 | w-7.5 h-7.5 10 | 11 | icon-inline 12 | 13 | 14 | 15 | block mx-auto mb-1 16 | iconSvg): ?> 17 | w-7.5 h-7.5 18 | 19 | icon-tile h-7.5 20 | 21 | 22 | 23 | block mx-auto 24 | iconSvg): ?> 25 | w-7.5 h-7.5 26 | 27 | icon-only 28 | 29 | 30 | -------------------------------------------------------------------------------- /lang/fr/lang.php: -------------------------------------------------------------------------------- 1 | [ 5 | 'name' => 'Tailwind UI', 6 | 'description' => 'Skin basé sur TailwindUI pour le backend de Winter CMS.', 7 | ], 8 | 9 | 'branding' => [ 10 | 'auth_layout' => [ 11 | 'label' => "Disposition de l'authentification", 12 | 'simple' => 'Simple (centrée)', 13 | 'split' => 'Barre latérale gauche (fractionnée)', 14 | ], 15 | 'menu_location' => [ 16 | 'label' => 'Emplacement du menu', 17 | 'top' => 'Haut', 18 | 'side' => 'Côté', 19 | ], 20 | 'menu_icons' => [ 21 | 'label' => 'Emplacement des icônes', 22 | 'tile' => 'Au dessus', 23 | 'inline' => 'Sur le côte', 24 | 'hidden' => 'Cachés (texte seulement)', 25 | 'only' => 'Seuls (pas de texte)', 26 | ], 27 | ], 28 | ]; 29 | -------------------------------------------------------------------------------- /assets/src/css/components/nested-form.css: -------------------------------------------------------------------------------- 1 | @layer components { 2 | .nested-form > .form-widget > .layout-row > .control-tabs.primary-tabs { 3 | .title { 4 | &:before, 5 | &:after { 6 | transform: none !important; 7 | display: none !important; 8 | } 9 | 10 | > span { 11 | border: none !important; 12 | } 13 | } 14 | 15 | .nav-tabs > li { 16 | margin-right: -1.5px !important; 17 | 18 | &:first-child { 19 | padding-left: 0 !important; 20 | } 21 | 22 | > a { 23 | border-left: 1.5px solid !important; 24 | border-top: 1.5px solid !important; 25 | border-right: 1.5px solid !important; 26 | border-radius: 7px 7px 0 0 !important; 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /assets/src/js/menu.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function () { 2 | 3 | const fnmap = { 4 | toggle: 'toggle', 5 | show: 'add', 6 | hide: 'remove', 7 | } 8 | 9 | const collapseTriggers = Array.from( 10 | document.querySelectorAll('[data-toggle="collapse"]'), 11 | ); 12 | 13 | const collapse = (elm, selector, cmd) => { 14 | elm.classList[fnmap[cmd]]('open'); 15 | const targets = Array.from(document.querySelectorAll(selector)); 16 | targets.forEach((target) => { 17 | target.classList[fnmap[cmd]]('show'); 18 | }); 19 | }; 20 | 21 | document.addEventListener( 22 | 'click', 23 | (ev) => { 24 | const elm = ev.target; 25 | 26 | if (collapseTriggers.includes(elm)) { 27 | const selector = elm.getAttribute('data-target'); 28 | collapse(elm, selector, 'toggle'); 29 | } 30 | }, 31 | false, 32 | ); 33 | }); 34 | -------------------------------------------------------------------------------- /skins/tailwindui/layouts/partials/menu/_header-search.php: -------------------------------------------------------------------------------- 1 | 6 | 22 | -------------------------------------------------------------------------------- /assets/src/css/components/menu.css: -------------------------------------------------------------------------------- 1 | @layer components { 2 | .quick-link { 3 | @apply relative p-1 mr-2 rounded-full text-gray-400 hover:text-white placeholder:focus:outline-none focus:no-underline focus:text-white hover:no-underline; 4 | 5 | &-light { 6 | @apply text-gray-400 hover:text-gray-500 focus:text-gray-500 focus:outline-none focus:no-underline; 7 | } 8 | } 9 | 10 | .sidemenu { 11 | button[data-toggle="collapse"] { 12 | svg { 13 | @apply text-gray-200 ml-3 flex-shrink-0 h-5 w-5 transform group-hover:text-white transition ease-in-out duration-150 pointer-events-none; 14 | } 15 | 16 | &.open svg { 17 | @apply text-white rotate-90; 18 | } 19 | } 20 | 21 | li.active a { 22 | @apply bg-gray-700 text-white hover:text-white hover:bg-gray-600 focus:text-white; 23 | } 24 | 25 | li[data-menu-item] { 26 | svg { 27 | @apply pointer-events-none; 28 | } 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Winter CMS 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. 22 | -------------------------------------------------------------------------------- /assets/src/css/components/button-group.css: -------------------------------------------------------------------------------- 1 | @layer components { 2 | .btn-group { 3 | 4 | .btn { 5 | @apply 6 | border-solid 7 | border-t-0 8 | border-b-0; 9 | 10 | &.btn-default { 11 | @apply border-gray-200; 12 | } 13 | 14 | &.btn-primary { 15 | @apply border-primary; 16 | } 17 | 18 | &.btn-success { 19 | @apply border-green-500; 20 | } 21 | 22 | &.btn-danger { 23 | @apply border-red-500; 24 | } 25 | 26 | &.btn-warning { 27 | @apply border-yellow-400; 28 | } 29 | 30 | &.btn-info { 31 | @apply border-blue-400; 32 | } 33 | 34 | &.btn-outline { 35 | @apply border-gray-300; 36 | } 37 | 38 | &:first-child { 39 | @apply border-l-0 border-r-0; 40 | } 41 | 42 | &:last-child { 43 | @apply border-solid border-l-0 border-r-0; 44 | } 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "winter/wn-tailwindui-plugin", 3 | "type": "winter-plugin", 4 | "description": "Provides a TailwindUI-based skin for the Winter CMS backend.", 5 | "homepage": "https://github.com/wintercms/wn-tailwindui-plugin", 6 | "keywords": ["cms", "wintercms", "tailwind", "tailwindui", "skin"], 7 | "license": "MIT", 8 | "authors": [ 9 | { 10 | "name": "Joseph Blythe", 11 | "homepage": "https://spatialmedia.io/" 12 | }, 13 | { 14 | "name": "Luke Towers", 15 | "email": "wintercms@luketowers.ca" 16 | }, 17 | { 18 | "name": "Winter CMS Maintainers", 19 | "homepage": "https://wintercms.com", 20 | "role": "Maintainer" 21 | } 22 | ], 23 | "support": { 24 | "issues": "https://github.com/wintercms/wn-tailwindui-plugin/issues", 25 | "discord": "https://discord.gg/D5MFSPH6Ux", 26 | "source": "https://github.com/wintercms/wn-tailwindui-plugin" 27 | }, 28 | "require": { 29 | "php": ">=7.2", 30 | "composer/installers": "~1.11", 31 | "mexitek/phpcolors": "^1.0" 32 | }, 33 | "config": { 34 | "allow-plugins": { 35 | "composer/installers": true 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /lang/en/lang.php: -------------------------------------------------------------------------------- 1 | [ 5 | 'name' => 'Tailwind UI', 6 | 'description' => 'Provides a TailwindUI-based skin for the Winter CMS backend.', 7 | ], 8 | 9 | 'branding' => [ 10 | 'background_image' => [ 11 | 'label' => 'Background Image', 12 | 'comment' => 'The background image used on the Split Layout for the login screen.', 13 | ], 14 | 'auth_layout' => [ 15 | 'label' => 'Authentication Layout', 16 | 'simple' => 'Simple (Centred)', 17 | 'split' => 'Left sidebar (Split)', 18 | ], 19 | 'menu_location' => [ 20 | 'label' => 'Menu Location', 21 | 'top' => 'Top', 22 | 'side' => 'Side', 23 | ], 24 | 'menu_icons' => [ 25 | 'label' => 'Icon Location', 26 | 'tile' => 'Above', 27 | 'inline' => 'Beside', 28 | 'hidden' => 'Hidden (text only)', 29 | 'only' => 'Only (no text)', 30 | ], 31 | ], 32 | 33 | 'permissions' => [ 34 | 'manage_own_appearance' => [ 35 | 'dark_mode' => 'Change own dark mode preference', 36 | 'menu_location' => 'Change own menu location', 37 | 'item_location' => 'Change own menu item icon location', 38 | ], 39 | ], 40 | 41 | 'preferences' => [ 42 | 'appearance' => 'Appearance', 43 | 'dark_mode' => [ 44 | 'auto' => 'Follow system preferences', 45 | 'light' => 'Light theme', 46 | 'dark' => 'Dark theme', 47 | ], 48 | ], 49 | ]; 50 | -------------------------------------------------------------------------------- /skins/tailwindui/layouts/_branding.php: -------------------------------------------------------------------------------- 1 | addMonths(1), function () use ($colorString) { 11 | $color = new Color($colorString); 12 | $luminance = $color->getHsl()['L'] * 100; 13 | return [ 14 | 'dark' => $color->darken(($luminance / 4)), 15 | 'darker' => $color->darken(($luminance / 4) * 2), 16 | 'darkest' => $color->darken(($luminance / 4) * 3), 17 | 'light' => $color->lighten((100 - $luminance) / 4), 18 | 'lighter' => $color->lighten((100 - $luminance) / 4 * 2), 19 | 'lightest' => $color->lighten((100 - $luminance) / 4 * 3), 20 | ]; 21 | }); 22 | }; 23 | 24 | $colorVariations = [ 25 | 'primary' => [ 26 | 'value' => $primary, 27 | 'variations' => $getVariations($primary), 28 | ], 29 | 'secondary' => [ 30 | 'value' => $secondary, 31 | 'variations' => $getVariations($secondary), 32 | ], 33 | ]; 34 | ?> 35 | -------------------------------------------------------------------------------- /skins/tailwindui/layouts/auth-simple.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | makeLayoutPartial('head_auth') ?> 5 | fireViewEvent('backend.layout.extendHead', ['layout' => 'auth']) ?> 6 | 7 | 8 |
9 |
10 | <?= e(Backend\Models\BrandSetting::get('app_name')); ?> 11 |

12 |
13 | 14 |
15 |
16 | 17 |
18 |
19 |
20 | 21 | 22 | 27 |
makeLayoutPartial('flash_messages') ?>
28 | 29 | 30 | -------------------------------------------------------------------------------- /models/preference/fields.yaml: -------------------------------------------------------------------------------- 1 | tabs: 2 | fields: 3 | dark_mode: 4 | label: 'winter.tailwindui::lang.preferences.appearance' 5 | type: 'dropdown' 6 | tab: 'winter.tailwindui::lang.preferences.appearance' 7 | default: light 8 | permissions: winter.tailwindui.manage_own_appearance.dark_mode 9 | options: 10 | auto: ['winter.tailwindui::lang.preferences.dark_mode.auto', 'icon-computer'] 11 | light: ['winter.tailwindui::lang.preferences.dark_mode.light', 'icon-sun'] 12 | dark: ['winter.tailwindui::lang.preferences.dark_mode.dark', 'icon-moon'] 13 | menu_location: 14 | label: winter.tailwindui::lang.branding.menu_location.label 15 | tab: 'winter.tailwindui::lang.preferences.appearance' 16 | type: balloon-selector 17 | span: left 18 | permissions: winter.tailwindui.manage_own_appearance.menu_location 19 | options: 20 | top: winter.tailwindui::lang.branding.menu_location.top 21 | side: winter.tailwindui::lang.branding.menu_location.side 22 | icon_location: 23 | label: winter.tailwindui::lang.branding.menu_icons.label 24 | tab: 'winter.tailwindui::lang.preferences.appearance' 25 | type: balloon-selector 26 | span: left 27 | permissions: winter.tailwindui.manage_own_appearance.item_location 28 | options: 29 | tile: winter.tailwindui::lang.branding.menu_icons.tile 30 | inline: winter.tailwindui::lang.branding.menu_icons.inline 31 | hidden: winter.tailwindui::lang.branding.menu_icons.hidden 32 | only: winter.tailwindui::lang.branding.menu_icons.only 33 | -------------------------------------------------------------------------------- /skins/tailwindui/views/backend/controllers/auth/restore.php: -------------------------------------------------------------------------------- 1 | 'space-y-6']) ?> 2 | 3 | 4 | 5 |
6 | 9 |
10 | 18 | 19 | 20 | 23 | 24 |
25 |
26 | 27 |
28 | 29 |
30 | 33 |
34 | 35 |
36 | 37 | 38 | 39 |
40 |
41 | 42 | 43 | 44 | fireViewEvent('backend.auth.extendRestoreView') ?> 45 | -------------------------------------------------------------------------------- /skins/tailwindui/views/backend/controllers/auth/reset.php: -------------------------------------------------------------------------------- 1 | 'space-y-6']) ?> 2 | 3 | 4 | 5 | 6 | 7 |
8 | 11 |
12 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 | 29 |
30 | 31 |
32 | 35 |
36 | 37 |
38 | 39 | 40 | 41 |
42 |
43 | 44 | 45 | -------------------------------------------------------------------------------- /vite.config.mjs: -------------------------------------------------------------------------------- 1 | import vue from '@vitejs/plugin-vue'; 2 | import laravel from 'laravel-vite-plugin'; 3 | import { defineConfig } from 'vite'; 4 | 5 | export default defineConfig({ 6 | build: { 7 | outDir: 'assets/dist', 8 | terserOptions: { 9 | format: { 10 | comments: false 11 | } 12 | } 13 | }, 14 | resolve: { 15 | alias:{ 16 | vue: 'vue/dist/vue.esm-bundler.js' 17 | } 18 | }, 19 | plugins: [ 20 | laravel({ 21 | publicDirectory: 'assets/dist', 22 | input: [ 23 | 'assets/src/css/app.css', 24 | 'assets/src/js/app.js', 25 | ], 26 | refresh: { 27 | paths: [ 28 | './**/*.htm', 29 | './**/*.block', 30 | 'assets/src/**/*.css', 31 | 'assets/src/**/*.js', 32 | ] 33 | }, 34 | }), 35 | vue({ 36 | template: { 37 | transformAssetUrls: { 38 | // The Vue plugin will re-write asset URLs, when referenced 39 | // in Single File Components, to point to the Laravel web 40 | // server. Setting this to `null` allows the Laravel plugin 41 | // to instead re-write asset URLs to point to the Vite 42 | // server instead. 43 | base: null, 44 | 45 | // The Vue plugin will parse absolute URLs and treat them 46 | // as absolute paths to files on disk. Setting this to 47 | // `false` will leave absolute URLs un-touched so they can 48 | // reference assets in the public directory as expected. 49 | includeAbsolute: false, 50 | }, 51 | }, 52 | }), 53 | ], 54 | }); 55 | -------------------------------------------------------------------------------- /models/brandsetting/fields.yaml: -------------------------------------------------------------------------------- 1 | tabs: 2 | fields: 3 | auth_layout: 4 | label: winter.tailwindui::lang.branding.auth_layout.label 5 | tab: backend::lang.branding.navigation 6 | type: balloon-selector 7 | span: left 8 | default: split 9 | options: 10 | simple: winter.tailwindui::lang.branding.auth_layout.simple 11 | split: winter.tailwindui::lang.branding.auth_layout.split 12 | background_image: 13 | label: winter.tailwindui::lang.branding.background_image.label 14 | commentAbove: winter.tailwindui::lang.branding.background_image.comment 15 | tab: backend::lang.branding.navigation 16 | span: right 17 | type: fileupload 18 | mode: image 19 | imageHeight: 200 20 | trigger: 21 | action: show 22 | field: auth_layout 23 | condition: value[split] 24 | menu_location: 25 | label: winter.tailwindui::lang.branding.menu_location.label 26 | tab: backend::lang.branding.navigation 27 | type: balloon-selector 28 | span: left 29 | default: side 30 | options: 31 | top: winter.tailwindui::lang.branding.menu_location.top 32 | side: winter.tailwindui::lang.branding.menu_location.side 33 | icon_location: 34 | label: winter.tailwindui::lang.branding.menu_icons.label 35 | tab: backend::lang.branding.navigation 36 | type: balloon-selector 37 | span: left 38 | default: inline 39 | options: 40 | tile: winter.tailwindui::lang.branding.menu_icons.tile 41 | inline: winter.tailwindui::lang.branding.menu_icons.inline 42 | hidden: winter.tailwindui::lang.branding.menu_icons.hidden 43 | only: winter.tailwindui::lang.branding.menu_icons.only 44 | -------------------------------------------------------------------------------- /skins/tailwindui/layouts/auth-split.php: -------------------------------------------------------------------------------- 1 | 2 | background_image)) { 7 | $backgroundImage = $brandSettings->background_image->path; 8 | } 9 | ?> 10 | 11 | 12 | makeLayoutPartial('head_auth') ?> 13 | fireViewEvent('backend.layout.extendHead', ['layout' => 'auth']) ?> 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 | <?= e(Backend\Models\BrandSetting::get('app_name')); ?> 22 |

23 |
24 | 25 |
26 |
27 | 28 |
29 |
30 |
31 |
32 | 33 | 36 |
37 | 38 | 39 | 44 |
makeLayoutPartial('flash_messages') ?>
45 | 46 | 47 | -------------------------------------------------------------------------------- /assets/src/css/components/button.css: -------------------------------------------------------------------------------- 1 | @layer components { 2 | .btn { 3 | @apply text-sm text-center font-medium shadow-none rounded-md px-5 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed; 4 | 5 | &.btn-default:not(.ml-btn), 6 | &.btn-secondary { 7 | @apply 8 | text-gray-700 9 | bg-gray-200 10 | hover:bg-gray-300 11 | focus:bg-gray-300 12 | focus:ring-gray-200 13 | active:bg-gray-200 14 | dark:text-black 15 | dark:bg-gray-400 16 | dark:hover:bg-gray-500 17 | dark:focus:ring-gray-500; 18 | } 19 | 20 | &.btn-default.ml-btn { 21 | @apply hover:text-gray-900 mr-[8px] w-[initial]; 22 | } 23 | 24 | &.btn-primary { 25 | @apply text-white bg-primary hover:bg-primary-light focus:bg-primary-light dark:bg-primary dark:hover:bg-primary-dark; 26 | } 27 | 28 | &.btn-success { 29 | @apply text-white bg-green-500 hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700; 30 | } 31 | 32 | &.btn-danger { 33 | @apply text-white bg-red-500 hover:bg-red-700 dark:text-white dark:bg-red-600 dark:hover:bg-red-700; 34 | } 35 | 36 | &.btn-warning { 37 | @apply text-white bg-yellow-400 hover:bg-yellow-500; 38 | } 39 | 40 | &.btn-info { 41 | @apply text-white bg-blue-400 hover:bg-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700; 42 | } 43 | 44 | &.btn-outline { 45 | @apply 46 | text-gray-700 47 | bg-transparent 48 | hover:bg-gray-200 49 | focus:bg-gray-200 50 | active:bg-gray-300 51 | dark:bg-gray-400 52 | dark:hover:bg-gray-500; 53 | } 54 | 55 | &.btn-link { 56 | @apply dark:text-primary-light hover:text-primary-lighter; 57 | } 58 | 59 | &.btn-xs { 60 | @apply text-xs px-1 py-0.5; 61 | } 62 | 63 | &.btn-sm { 64 | @apply text-xs px-2 py-1.5; 65 | } 66 | 67 | &.btn-md { 68 | @apply text-sm px-3 py-2.5; 69 | } 70 | 71 | &.btn-lg { 72 | @apply text-base px-4 py-3.5; 73 | } 74 | 75 | &.btn-xl { 76 | @apply text-lg px-5 py-4; 77 | } 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | const defaultTheme = require('tailwindcss/defaultTheme') 2 | 3 | module.exports = { 4 | content: [ 5 | './skins/tailwindui/**/*.php', 6 | './assets/src/js/**/*.{js,vue}', 7 | ], 8 | theme: { 9 | extend: { 10 | colors: { 11 | primary: 'var(--primary)', 12 | 'primary-dark': 'var(--primary-dark)', 13 | 'primary-darker': 'var(--primary-darker)', 14 | 'primary-darkest': 'var(--primary-darkest)', 15 | 'primary-light': 'var(--primary-light)', 16 | 'primary-lighter': 'var(--primary-lighter)', 17 | 'primary-lightest': 'var(--primary-lightest)', 18 | secondary: 'var(--secondary)', 19 | 'secondary-dark': 'var(--secondary-dark)', 20 | 'secondary-darker': 'var(--secondary-darker)', 21 | 'secondary-darkest': 'var(--secondary-darkest)', 22 | 'secondary-light': 'var(--secondary-light)', 23 | 'secondary-lighter': 'var(--secondary-lighter)', 24 | 'secondary-lightest': 'var(--secondary-lightest)', 25 | }, 26 | boxShadow: { 27 | 'bottom': '0px 0px 3px rgba(0, 0, 0, 0.25)', 28 | }, 29 | fontFamily: { 30 | sans: ['Inter var'], 31 | }, 32 | fontSize: { 33 | 'xxs': '.725rem', 34 | }, 35 | gridTemplateColumns: { 36 | 'layout-inline': '180px 1fr', 37 | 'layout-only': '71px 1fr', 38 | 'layout-hidden': '148px 1fr', 39 | 'layout-tile': '124px 1fr', 40 | }, 41 | width: { 42 | '7.5': '1.875rem', // 30px 43 | }, 44 | height: { 45 | '7.5': '1.875rem', // 30px 46 | }, 47 | maxWidth: { 48 | '1/2': '50%', 49 | '1/3': '33%', 50 | '1/4': '25%', 51 | 'vw': '100vw', 52 | }, 53 | minWidth: { 54 | '6': '1.5rem', 55 | '12': '3rem', 56 | '16': '4rem', 57 | }, 58 | transitionDuration: { 59 | '0': '0ms', 60 | '2000': '2000ms', 61 | }, 62 | zIndex: { 63 | 'topmenu': '99', 64 | 'sidemenu': '100', 65 | }, 66 | }, 67 | }, 68 | plugins: [ 69 | require('@tailwindcss/forms'), 70 | require('@tailwindcss/typography'), 71 | ], 72 | darkMode: 'class', 73 | } 74 | -------------------------------------------------------------------------------- /assets/src/css/components/form.css: -------------------------------------------------------------------------------- 1 | @layer base { 2 | [type='text'], 3 | [type='email'], 4 | [type='url'], 5 | [type='password'], 6 | [type='number'], 7 | [type='date'], 8 | [type='datetime-local'], 9 | [type='month'], 10 | [type='search'], 11 | [type='tel'], 12 | [type='time'], 13 | [type='week'], 14 | [multiple], 15 | textarea, 16 | select { 17 | @apply block 18 | w-full 19 | border 20 | rounded-md 21 | border-gray-300 22 | text-gray-900 23 | bg-gray-50 24 | focus:outline-none 25 | focus:ring-primary 26 | focus:border-primary 27 | focus:z-[9] 28 | disabled:opacity-50 29 | disabled:cursor-not-allowed 30 | dark:bg-gray-700 31 | dark:border-gray-600 32 | dark:placeholder-gray-400 33 | dark:text-white 34 | dark:focus:ring-primary 35 | dark:focus:border-primary; 36 | } 37 | 38 | [type='text'], 39 | [type='email'], 40 | [type='url'], 41 | [type='password'], 42 | [type='number'], 43 | [type='date'], 44 | [type='datetime-local'], 45 | [type='month'], 46 | [type='search'], 47 | [type='tel'], 48 | [type='time'], 49 | [type='week'], 50 | [multiple], 51 | textarea { 52 | &.xs { 53 | @apply text-xs px-3 py-2; 54 | } 55 | 56 | &.sm { 57 | @apply text-sm px-3 py-2; 58 | } 59 | 60 | &.md { 61 | @apply text-base px-5 py-2.5; 62 | } 63 | 64 | &.lg { 65 | @apply text-lg px-5 py-3; 66 | } 67 | 68 | &.xl { 69 | @apply text-xl px-6 py-3.5; 70 | } 71 | } 72 | 73 | select { 74 | &.xs { 75 | @apply text-xs; 76 | } 77 | 78 | &.sm { 79 | @apply text-sm; 80 | } 81 | 82 | &.md { 83 | @apply text-base; 84 | } 85 | 86 | &.lg { 87 | @apply text-lg; 88 | } 89 | 90 | &.xl { 91 | @apply text-xl; 92 | } 93 | } 94 | 95 | [type='checkbox'], 96 | [type='radio'] { 97 | @apply text-primary 98 | focus:ring-primary 99 | focus:border-primary 100 | disabled:opacity-50 101 | disabled:cursor-not-allowed 102 | dark:bg-gray-700 103 | dark:border-gray-600 104 | dark:placeholder-gray-400 105 | dark:text-primary 106 | dark:focus:ring-primary 107 | dark:focus:border-primary; 108 | } 109 | 110 | label { 111 | @apply text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300 cursor-pointer; 112 | } 113 | } 114 | 115 | .custom-switch input { 116 | opacity: 0 !important; 117 | } 118 | -------------------------------------------------------------------------------- /skins/tailwindui/layouts/_head_auth.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <?= e(trans('backend::lang.auth.title')) ?> 9 | 10 | addCss($style, [ 20 | 'build' => 'core', 21 | 'order' => 1, 22 | ]); 23 | } 24 | $scripts = [ 25 | Backend::skinAsset('assets/js/vendor/jquery.min.js'), 26 | Backend::skinAsset('assets/js/vendor/jquery-migrate.min.js'), 27 | Url::asset('modules/system/assets/js/framework.js'), 28 | Url::asset('modules/system/assets/js/framework.extras.js'), 29 | Url::asset('modules/system/assets/ui/storm-min.js'), 30 | Backend::skinAsset('assets/js/winter-min.js'), 31 | Url::asset('modules/backend/assets/js/auth/auth.js'), 32 | Url::asset('modules/system/assets/js/lang/lang.'.App::getLocale().'.js'), 33 | ]; 34 | foreach ($scripts as $script) { 35 | $this->addJs($script, [ 36 | 'build' => 'core', 37 | 'order' => 1, 38 | ]); 39 | } 40 | ?> 41 | 42 | 43 | 59 | 60 | 61 | 62 | 63 | 64 | addCss('/modules/system/assets/css/framework.extras.css'); 67 | ?> 68 | 69 | makeAssets() ?> 70 | 71 | makeLayoutPartial('branding') ?> 72 | makeLayoutPartial('custom_styles') ?> 73 | -------------------------------------------------------------------------------- /skins/tailwindui/views/backend/controllers/auth/signin-split.php: -------------------------------------------------------------------------------- 1 | 2 | 'space-y-6']) ?> 3 | 4 | 5 | 6 |
7 | 10 |
11 | 18 | 19 | 20 | 23 | 24 |
25 |
26 | 27 | 28 |
29 | 32 |
33 | 41 | 42 | 43 | 44 | 45 | 46 | 47 |
48 |
49 | 50 |
51 | 52 | 53 |
54 | 60 | 61 | 64 |
65 | 66 | 67 | 68 |
69 | 70 | 71 | 72 |
73 |
74 | 75 | 76 |
77 | 80 |
81 | 82 | 83 | fireViewEvent('backend.auth.extendSigninView') ?> 84 | -------------------------------------------------------------------------------- /assets/src/js/app.js: -------------------------------------------------------------------------------- 1 | import { createApp, onMounted } from 'vue'; 2 | import './darkmode'; 3 | import './menu'; 4 | import './winter.sidepaneltab'; 5 | 6 | import { 7 | Disclosure, 8 | DisclosureButton, 9 | DisclosurePanel, 10 | Menu, 11 | MenuButton, 12 | MenuItem, 13 | MenuItems 14 | } from '@headlessui/vue'; 15 | 16 | import { 17 | BellIcon, 18 | ChevronDownIcon, MenuIcon, PlusSmIcon, SearchIcon, 19 | XIcon 20 | } from '@heroicons/vue/outline'; 21 | 22 | // TODO: for now we are mounting multiple vue apps as plugins can inject 83 | 84 | 85 | makeAssets() ?> 86 | 87 | makeLayoutPartial('branding') ?> 88 | makeLayoutPartial('custom_styles') ?> 89 | -------------------------------------------------------------------------------- /skins/tailwindui/views/backend/controllers/auth/signin-simple.php: -------------------------------------------------------------------------------- 1 | 2 | 'space-y-6']) ?> 3 | 4 | 5 | 6 |
7 |
8 | 9 |
10 | 20 | 21 | 22 | 25 | 26 |
27 |
28 | 29 |
30 | 31 | 32 |
33 | 43 | 44 | 45 | 46 | 47 | 48 | 49 |
50 |
51 |
52 | 53 |
54 | 55 | 56 |
57 | 63 | 64 | 67 |
68 | 69 | 70 | 71 |
72 | 73 | 74 | 75 |
76 |
77 | 78 | 79 |
80 | 88 |
89 | 90 | 91 | fireViewEvent('backend.auth.extendSigninView') ?> 92 | -------------------------------------------------------------------------------- /assets/src/css/components/fancy-layout.css: -------------------------------------------------------------------------------- 1 | @layer components { 2 | 3 | .layout.fancy-layout :not(.nested-form) > .form-widget > .layout-row { 4 | 5 | /* form fields */ 6 | > .form-tabless-fields { 7 | label { 8 | @apply normal-case text-white text-sm; 9 | } 10 | 11 | input[type=text] { 12 | @apply 13 | bg-white 14 | bg-opacity-10 15 | text-lg 16 | font-light 17 | px-2 18 | py-1.5 19 | mt-1 20 | focus:bg-opacity-20 21 | !important; 22 | } 23 | 24 | &[disabled="disabled"] { 25 | @apply bg-white bg-opacity-20 cursor-not-allowed; 26 | } 27 | } 28 | 29 | /* form actions */ 30 | .form-buttons { 31 | @apply flex justify-start items-center p-0 my-2; 32 | 33 | span.btn-text { 34 | @apply 35 | flex 36 | items-center 37 | text-white 38 | text-sm 39 | px-0 40 | py-1.5 !important; 41 | 42 | a { 43 | @apply text-white hover:no-underline ml-2 !important; 44 | } 45 | } 46 | 47 | .btn { 48 | &:not(:last-child) { 49 | @apply mr-2; 50 | } 51 | 52 | &.btn-default { 53 | @apply 54 | text-white 55 | opacity-100 56 | rounded-md 57 | px-5 58 | py-1.5 59 | mt-0 60 | hover:opacity-80; 61 | 62 | &.empty { 63 | @apply bg-transparent; 64 | } 65 | 66 | &[class*="oc-icon-"] { 67 | 68 | } 69 | } 70 | 71 | &.btn-primary { 72 | @apply flex items-center; 73 | 74 | @apply 75 | text-white 76 | opacity-100 77 | bg-transparent 78 | rounded-md 79 | border 80 | border-solid 81 | border-transparent 82 | px-4 83 | py-1.5 84 | mt-0 85 | hover:border-white; 86 | } 87 | 88 | &.empty { 89 | @apply mt-0; 90 | } 91 | } 92 | 93 | /* right aligned buttons */ 94 | &-right { 95 | @apply flex flex-grow items-center justify-end; 96 | 97 | .btn { 98 | &.btn-primary { 99 | @apply 100 | text-primary 101 | bg-white 102 | rounded-md 103 | px-4 104 | py-1.5 105 | opacity-100 106 | !important; 107 | } 108 | } 109 | } 110 | } 111 | 112 | /* secondary tabs */ 113 | > .control-tabs.secondary-tabs { 114 | 115 | > div > ul.nav-tabs { 116 | @apply flex items-center bg-secondary; 117 | 118 | > li { 119 | @apply flex items-center; 120 | 121 | > a { 122 | @apply flex items-center text-white px-4 py-2.5; 123 | 124 | > .title [class*="icon-"] { 125 | @apply mr-1; 126 | } 127 | } 128 | 129 | &.active > a { 130 | @apply bg-white text-secondary; 131 | } 132 | } 133 | } 134 | 135 | /* override for winter.css */ 136 | &.secondary-content-tabs > div > ul.nav-tabs > li { 137 | @apply ml-0; 138 | } 139 | } 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /skins/tailwindui/layouts/_menu-side.php: -------------------------------------------------------------------------------- 1 | listItems('mysettings'); 4 | $appName = e(Backend\Models\BrandSetting::get('app_name')); 5 | 6 | if (in_array($iconLocation, ['only', 'tile'])) { 7 | $itemMode = 'tile'; 8 | $logoImage = Backend\Models\BrandSetting::getFavicon(); 9 | } else { 10 | $itemMode = 'inline'; 11 | $logoImage = Backend\Models\BrandSetting::getLogo(); 12 | } 13 | ?> 14 | 99 | -------------------------------------------------------------------------------- /skins/tailwindui/layouts/default.php: -------------------------------------------------------------------------------- 1 | 2 | get('dark_mode', 'light')); 4 | ?> 5 | 6 | 7 | makeLayoutPartial('head') ?> 8 | fireViewEvent('backend.layout.extendHead', ['layout' => 'default']) ?> 9 | 17 | 18 | 19 | 24 | 25 | makeLayoutPartial('partials/notices/impersonation') ?> 26 | 27 |
28 | 29 | 30 |
31 | makeLayoutPartial('menu-top') ?> 32 |
33 | 34 | 35 | 36 | 37 | makeLayoutPartial('menu-side') ?> 38 | 39 | 40 | 41 |
42 | 43 | 44 | 45 |
46 | makeLayoutPartial('menu-top') ?> 47 |
48 | 49 | 50 |
51 |
52 | 53 | makeLayoutPartial('context-sidenav') ?> 54 | 55 | 56 | 57 |
63 | 64 |
65 | 66 | 67 |
68 |
69 | 70 | 71 |
72 | 73 |
74 | 75 | 76 | 77 |
78 |
79 | 80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 | 89 | 90 | makeLayoutPartial('flash-messages') ?> 91 | 92 | 93 | makeLayoutPartial('breakpoint-debugger') ?> 94 | 95 | 96 | 97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /assets/src/css/custom.css: -------------------------------------------------------------------------------- 1 | /* overrides for storm */ 2 | html { 3 | font-size: 100%; 4 | } 5 | 6 | @media (min-width: 640px) { 7 | .sm\:block { 8 | display: block !important; 9 | visibility: visible !important; 10 | } 11 | } 12 | 13 | @media (min-width: 640px) { 14 | .sm\:flex { 15 | display: flex !important; 16 | visibility: visible !important; 17 | } 18 | } 19 | 20 | @media (min-width: 768px) { 21 | .md\:block { 22 | display: block !important; 23 | visibility: visible !important; 24 | } 25 | } 26 | 27 | @media (min-width: 768px) { 28 | .md\:flex { 29 | display: flex !important; 30 | visibility: visible !important; 31 | } 32 | } 33 | 34 | @media (min-width: 768px) { 35 | .md\:table-cell { 36 | display: table-cell !important; 37 | visibility: visible !important; 38 | } 39 | } 40 | 41 | .icon-tile, 42 | .icon-only, 43 | .icon-inline { 44 | @apply w-full; 45 | &[class^='icon-']:before { 46 | @apply block mx-auto text-center; 47 | font-size: 1.5rem; 48 | } 49 | } 50 | 51 | a.bg-primary:hover { 52 | @apply bg-primary-dark; 53 | } 54 | 55 | div[id^='headlessui-menu-items-'] { 56 | /* all menus have z-index of 50 */ 57 | z-index: 999 !important; 58 | 59 | a:hover { 60 | @apply no-underline; /* all menu item links have no text-decoration: underline; */ 61 | } 62 | } 63 | 64 | /* widgets */ 65 | .widget-welcome div.welcome-logo { 66 | @apply bg-gray-300 w-[200px] p-4 float-left rounded-md; 67 | } 68 | 69 | .btn:active { 70 | @apply shadow-none; 71 | } 72 | 73 | .btn-group.open .dropdown-toggle { 74 | @apply shadow-none; 75 | } 76 | 77 | .open .dropdown-toggle { 78 | &.btn-default, 79 | &.btn-secondary { 80 | @apply text-gray-700 bg-gray-300 border-none; 81 | } 82 | } 83 | 84 | /* winter.css overrides */ 85 | .layout-sidenav-container { 86 | width: 120px; 87 | 88 | &-inline { 89 | @apply w-[250px] max-w-[250px]; 90 | } 91 | 92 | &-tile { 93 | @apply w-[120px] max-w-[120px]; 94 | } 95 | } 96 | 97 | .layout > .layout-row.h-auto { 98 | height: auto !important; 99 | } 100 | 101 | /* collapse styles */ 102 | .collapsible { 103 | display: block; 104 | max-height: 0px; 105 | overflow: hidden; 106 | transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); 107 | 108 | &.show { 109 | max-height: 99em; 110 | transition: max-height 0.5s ease-in-out; 111 | } 112 | } 113 | 114 | /* mediamanager */ 115 | div[data-control='media-manager-crop-tool'] { 116 | img { 117 | max-width: initial; 118 | } 119 | } 120 | 121 | .control-toolbar { 122 | label { 123 | display: inline-block; 124 | } 125 | } 126 | 127 | .toolbar-widget { 128 | .clear-input-text { 129 | background-color: white; 130 | } 131 | } 132 | 133 | /* layout styles */ 134 | 135 | .default-layout { 136 | 137 | @apply grid w-full h-screen; 138 | 139 | @media screen { 140 | 141 | &-top { 142 | @apply grid-cols-1; 143 | 144 | .layout-content > .layout { 145 | height: calc(100vh - 4rem); 146 | @apply max-w-full; 147 | } 148 | } 149 | 150 | &-side { 151 | 152 | .layout-topmenu + .layout { 153 | height: calc(100vh - 4rem); 154 | } 155 | 156 | &-inline { 157 | @apply md:grid-cols-layout-inline print:grid-cols-1; 158 | 159 | #layout-sidenav-2 { 160 | width: 180px; 161 | } 162 | } 163 | 164 | &-only { 165 | @apply md:grid-cols-layout-only; 166 | } 167 | 168 | &-hidden { 169 | @apply md:grid-cols-layout-hidden; 170 | } 171 | 172 | &-tile { 173 | @apply md:grid-cols-layout-tile; 174 | } 175 | } 176 | } 177 | } 178 | 179 | /* Hide buttons when loading indicator is showing. @see CA-1820. */ 180 | .loading-indicator ~ .btn, 181 | .loading-indicator ~ .btn-text { 182 | @apply hidden; 183 | } 184 | 185 | /* fixes froala control checkbox label alignment */ 186 | .fr-checkbox-line > label { 187 | @apply inline-block; 188 | } 189 | 190 | /* fixes input group form control addons to be inline with input */ 191 | .input-group { 192 | .form-control + .input-group-addon { 193 | @apply px-5 py-1.5; 194 | } 195 | } 196 | 197 | /* Froala richtext editor */ 198 | .field-richeditor { 199 | .fr-toolbar .fr-command.fr-btn { 200 | &.fr-active { 201 | @apply font-semibold text-primary; 202 | } 203 | } 204 | 205 | .fr-view { 206 | @apply prose max-w-none; 207 | } 208 | } 209 | 210 | .field-markdowneditor { 211 | .editor-preview { 212 | @apply prose max-w-none; 213 | } 214 | } 215 | 216 | /* Fix for winter dropdowns not being clickable */ 217 | .dropdown-overlay { 218 | pointer-events: none !important; 219 | } 220 | -------------------------------------------------------------------------------- /skins/tailwindui/layouts/partials/menu/top/_mobile-menu.php: -------------------------------------------------------------------------------- 1 | 2 |
3 | 7 |
8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | sideMenu); ?> 18 |
26 | 33 | aria-current="page" 34 | 35 | > 36 | 37 | iconSvg): ?> 38 | 43 | 44 | 45 | 46 | 47 | label)) ?> 48 | 49 | 50 | 51 | 69 | 70 |
71 | 72 | 73 | 74 | 122 | 123 | 124 |
125 | 126 |
127 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tailwind UI Backend Skin 2 | 3 | ![Tailwind_UI_Plugin](https://user-images.githubusercontent.com/7253840/176566244-ff859f12-77a5-465e-9462-6380a47652a6.png) 4 | 5 | [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/wintercms/wn-tailwindui-plugin/blob/main/LICENSE) 6 | 7 | [Tailwind UI](https://tailwindui.com/) is a Tailwind CSS component library designed by the authors of [Tailwind CSS](https://tailwindcss.com/). This is a [Winter CMS](https://wintercms.com) plugin that provides a custom, TailwindUI-based skin for the backend. 8 | 9 | Supports: 10 | - Multiple authentication page layouts (Simple, Left Sidebar) 11 | - Backend Menu location customization (Top, Side) 12 | - Backend Menu Icon location customization (Above, Beside, Hidden (Text Only), Only (No Text)) 13 | - Background image for login page 14 | - Dark mode 15 | 16 | ## Installation 17 | 18 | This plugin is available for installation via [Composer](http://getcomposer.org/). 19 | 20 | ```bash 21 | composer require winter/wn-tailwindui-plugin 22 | ``` 23 | 24 | After installing the plugin you will need to run the migrations and (if you are using a [public folder](https://wintercms.com/docs/develop/docs/setup/configuration#using-a-public-folder)) [republish your public directory](https://wintercms.com/docs/develop/docs/console/setup-maintenance#mirror-public-files). 25 | 26 | ```bash 27 | php artisan migrate 28 | ``` 29 | 30 | ## Screenshots 31 | 32 | | Before | After | 33 | |---|---| 34 | | ![stock-winter](https://github.com/wintercms/wn-tailwindui-plugin/assets/7253840/096dffdc-6c21-4e8a-ae3d-5d09fa1dd251) | ![tailwind-ui-light](https://github.com/wintercms/wn-tailwindui-plugin/assets/7253840/fad97b4b-8c29-4615-bdc3-b04886b2e467) | 35 | 36 | ### Dark Mode! 37 | 38 | Dark mode and user preferences are also supported. 39 | 40 | ![tailwind-ui-dark](https://github.com/wintercms/wn-tailwindui-plugin/assets/7253840/b6c866d5-f64a-4788-88f7-61364c7599b4) 41 | 42 | ![tailwind-preferences](https://github.com/wintercms/wn-tailwindui-plugin/assets/7253840/6c21966a-07d3-4427-a6b6-2902c8c38527) 43 | 44 | ## Getting started 45 | 46 | Use composer to install the plugin: 47 | 48 | ```bash 49 | composer require winter/wn-tailwindui-plugin 50 | ``` 51 | 52 | Then, run the migrations to ensure the plugin is enabled: 53 | 54 | ```bash 55 | php artisan migrate 56 | ``` 57 | 58 | ## Configuration 59 | 60 | Configuration for this plugin is handled through a [configuration file](https://wintercms.com/docs/plugin/settings#file-configuration). In order to modify the configuration values and get started you can either add the values to your `.env` environment file or copy the `plugins/winter/tailwindui/config/config.php` file to `config/winter/tailwindui/config.php` and make your changes there. 61 | 62 | Environment File Supported Values: 63 | - `TAILWIND_SHOW_BREAKPOINT_DEBUGGER=false` 64 | 65 | ## Using Tailwind in other Plugins 66 | 67 | The following steps should be taken in order to ensure the best compatibility between plugins when using Tailwind with other plugins in the Backend: 68 | 69 | - Use [Laravel Mix](https://wintercms.com/docs/v1.2/docs/console/asset-compilation) to handle compiling your plugin's Tailwind styles 70 | - In your `tailwind.config.js` file, take the following actions: 71 | - Extend the Winter.TailwindUI plugin's configuration rather than the default Tailwind configuration (ex: `const config = require('../../winter/tailwindui/tailwind.config.js');`). 72 | - Ensure that the [Preflight Tailwind plugin](https://tailwindcss.com/docs/preflight#disabling-preflight) is disabled (ex: `config.corePlugins = {preflight: false};`). 73 | - Set `config.content` to include only your plugin's paths (ex: `config.content = ['./formwidgets/**/*.{vue,php,htm}', './components/**/*.{php,htm}', './assets/src/js/**/*.{js,vue}'];`). 74 | - In your `package.json` file, include [postcss-prefixwrap](https://www.npmjs.com/package/postcss-prefixwrap) to wrap your plugin's generated styles in a plugin-specific class to prevent overriding the styles elsewhere in the backend (ex. `"postcss-prefixwrap": "~1.29.x",`). 75 | - In your `winter.mix.js` file, use postcss-prefixwrap when compiling the Tailwind styles (ex. `mix.postCss('assets/src/css/example.css', 'assets/dist/css/example.css', [..., require('postcss-prefixwrap')('.plugin-authorname-pluginname'), ...])`). 76 | 77 | ### Example `tailwind.config.js`: 78 | 79 | ```js 80 | // Extend the base tailwind config to avoid conflicts 81 | const config = require('../../winter/tailwindui/tailwind.config.js'); 82 | 83 | config.content = [ 84 | './formwidgets/**/*.{vue,php,htm}', 85 | './components/**/*.{php,htm}', 86 | './assets/src/js/**/*.{js,vue}', 87 | ]; 88 | 89 | config.corePlugins = { 90 | preflight: false, 91 | }; 92 | 93 | module.exports = config; 94 | ``` 95 | 96 | ### Example `winter.mix.js`: 97 | 98 | ```js 99 | const mix = require('laravel-mix'); 100 | 101 | mix.setPublicPath(__dirname) 102 | 103 | // Compile Tailwind 104 | .postCss( 105 | 'assets/src/css/myplugin.css', 106 | 'assets/dist/css/myplugin.css', 107 | [ 108 | require('postcss-import'), 109 | require('tailwindcss/nesting'), 110 | require('tailwindcss'), 111 | require('autoprefixer'), 112 | require('postcss-prefixwrap')('.myauthor-pluginname', { 113 | // Don't prefix wrap modals because we can't put the wrapping class on a high enough parent element to apply the styles 114 | ignoredSelectors: ['.modal'], 115 | }) 116 | ] 117 | ); 118 | ``` 119 | 120 | ### Example `package.json`: 121 | 122 | ```json 123 | { 124 | "name": "myauthor-pluginname", 125 | "version": "0.0.1", 126 | "private": true, 127 | "version": "1.0.0", 128 | "devDependencies": { 129 | "postcss": "~8.4.x", 130 | "postcss-prefixwrap": "~1.29.x", 131 | "postcss-import": "~14.1.x", 132 | "tailwindcss": "~3.0.x", 133 | "@tailwindcss/typography": "0.5.8" 134 | } 135 | } 136 | ``` 137 | 138 | ### Future Ideas 139 | 140 | It would be ideal if it was also possible for other plugins to detect the classes that have already been generated by this plugin and prune them from their compiled styles. Pull Requests welcome to add that ability in the future if anyone has the time / motivation to do so. 141 | 142 | ## Credits 143 | This plugin was originally written by Joseph Blythe & Luke Towers for [Spatial Media](https://spatialmedia.io). 144 | 145 | It has since been modified and re-released under the Winter namespace as a first party plugin for Winter CMS maintained by the Winter CMS team. 146 | 147 | If you would like to contribute to this plugin's development, please feel free to submit issues or pull requests to the plugin's repository here: https://github.com/wintercms/wn-tailwindui-plugin 148 | 149 | If you would like to support Winter CMS, please visit [WinterCMS.com](https://wintercms.com/support) 150 | -------------------------------------------------------------------------------- /skins/tailwindui/layouts/partials/menu/side/_item-contents.php: -------------------------------------------------------------------------------- 1 | sideMenu); ?> 2 |
11 | 24 | 25 | iconSvg): ?> 26 | <?= $iconLocation === 'only' ? e(trans($item->label)) : '' ?> 32 | 33 | 37 | 38 | 39 | 40 | 41 | 42 | label)) ?> 43 | 44 | 45 | counter): ?> 46 | counterLabel): ?> 50 | title="counterLabel)) ?>" 51 | 52 | > 53 | counter) ?> 54 | 55 | 56 | 57 | 58 | 76 | 77 |
78 | 79 | 150 | 151 | -------------------------------------------------------------------------------- /composer.lock: -------------------------------------------------------------------------------- 1 | { 2 | "_readme": [ 3 | "This file locks the dependencies of your project to a known state", 4 | "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", 5 | "This file is @generated automatically" 6 | ], 7 | "content-hash": "eb1d5ec0fb2f595aa35be10dc6b1ed0f", 8 | "packages": [ 9 | { 10 | "name": "composer/installers", 11 | "version": "v1.12.0", 12 | "source": { 13 | "type": "git", 14 | "url": "https://github.com/composer/installers.git", 15 | "reference": "d20a64ed3c94748397ff5973488761b22f6d3f19" 16 | }, 17 | "dist": { 18 | "type": "zip", 19 | "url": "https://api.github.com/repos/composer/installers/zipball/d20a64ed3c94748397ff5973488761b22f6d3f19", 20 | "reference": "d20a64ed3c94748397ff5973488761b22f6d3f19", 21 | "shasum": "" 22 | }, 23 | "require": { 24 | "composer-plugin-api": "^1.0 || ^2.0" 25 | }, 26 | "replace": { 27 | "roundcube/plugin-installer": "*", 28 | "shama/baton": "*" 29 | }, 30 | "require-dev": { 31 | "composer/composer": "1.6.* || ^2.0", 32 | "composer/semver": "^1 || ^3", 33 | "phpstan/phpstan": "^0.12.55", 34 | "phpstan/phpstan-phpunit": "^0.12.16", 35 | "symfony/phpunit-bridge": "^4.2 || ^5", 36 | "symfony/process": "^2.3" 37 | }, 38 | "type": "composer-plugin", 39 | "extra": { 40 | "class": "Composer\\Installers\\Plugin", 41 | "branch-alias": { 42 | "dev-main": "1.x-dev" 43 | } 44 | }, 45 | "autoload": { 46 | "psr-4": { 47 | "Composer\\Installers\\": "src/Composer/Installers" 48 | } 49 | }, 50 | "notification-url": "https://packagist.org/downloads/", 51 | "license": [ 52 | "MIT" 53 | ], 54 | "authors": [ 55 | { 56 | "name": "Kyle Robinson Young", 57 | "email": "kyle@dontkry.com", 58 | "homepage": "https://github.com/shama" 59 | } 60 | ], 61 | "description": "A multi-framework Composer library installer", 62 | "homepage": "https://composer.github.io/installers/", 63 | "keywords": [ 64 | "Craft", 65 | "Dolibarr", 66 | "Eliasis", 67 | "Hurad", 68 | "ImageCMS", 69 | "Kanboard", 70 | "Lan Management System", 71 | "MODX Evo", 72 | "MantisBT", 73 | "Mautic", 74 | "Maya", 75 | "OXID", 76 | "Plentymarkets", 77 | "Porto", 78 | "RadPHP", 79 | "SMF", 80 | "Starbug", 81 | "Thelia", 82 | "Whmcs", 83 | "WolfCMS", 84 | "agl", 85 | "aimeos", 86 | "annotatecms", 87 | "attogram", 88 | "bitrix", 89 | "cakephp", 90 | "chef", 91 | "cockpit", 92 | "codeigniter", 93 | "concrete5", 94 | "croogo", 95 | "dokuwiki", 96 | "drupal", 97 | "eZ Platform", 98 | "elgg", 99 | "expressionengine", 100 | "fuelphp", 101 | "grav", 102 | "installer", 103 | "itop", 104 | "joomla", 105 | "known", 106 | "kohana", 107 | "laravel", 108 | "lavalite", 109 | "lithium", 110 | "magento", 111 | "majima", 112 | "mako", 113 | "mediawiki", 114 | "miaoxing", 115 | "modulework", 116 | "modx", 117 | "moodle", 118 | "osclass", 119 | "pantheon", 120 | "phpbb", 121 | "piwik", 122 | "ppi", 123 | "processwire", 124 | "puppet", 125 | "pxcms", 126 | "reindex", 127 | "roundcube", 128 | "shopware", 129 | "silverstripe", 130 | "sydes", 131 | "sylius", 132 | "symfony", 133 | "tastyigniter", 134 | "typo3", 135 | "wordpress", 136 | "yawik", 137 | "zend", 138 | "zikula" 139 | ], 140 | "support": { 141 | "issues": "https://github.com/composer/installers/issues", 142 | "source": "https://github.com/composer/installers/tree/v1.12.0" 143 | }, 144 | "funding": [ 145 | { 146 | "url": "https://packagist.com", 147 | "type": "custom" 148 | }, 149 | { 150 | "url": "https://github.com/composer", 151 | "type": "github" 152 | }, 153 | { 154 | "url": "https://tidelift.com/funding/github/packagist/composer/composer", 155 | "type": "tidelift" 156 | } 157 | ], 158 | "time": "2021-09-13T08:19:44+00:00" 159 | }, 160 | { 161 | "name": "mexitek/phpcolors", 162 | "version": "v1.0.4", 163 | "source": { 164 | "type": "git", 165 | "url": "https://github.com/mexitek/phpColors.git", 166 | "reference": "4043974240ca7dc3c2bec3c158588148b605b206" 167 | }, 168 | "dist": { 169 | "type": "zip", 170 | "url": "https://api.github.com/repos/mexitek/phpColors/zipball/4043974240ca7dc3c2bec3c158588148b605b206", 171 | "reference": "4043974240ca7dc3c2bec3c158588148b605b206", 172 | "shasum": "" 173 | }, 174 | "require": { 175 | "php": "^7.2|^8.0" 176 | }, 177 | "require-dev": { 178 | "nette/tester": "^2.3", 179 | "squizlabs/php_codesniffer": "^3.5" 180 | }, 181 | "type": "library", 182 | "autoload": { 183 | "classmap": [ 184 | "src" 185 | ] 186 | }, 187 | "notification-url": "https://packagist.org/downloads/", 188 | "license": [ 189 | "MIT" 190 | ], 191 | "authors": [ 192 | { 193 | "name": "Arlo Carreon", 194 | "homepage": "http://arlocarreon.com", 195 | "role": "creator" 196 | } 197 | ], 198 | "description": "A series of methods that let you manipulate colors. Just incase you ever need different shades of one color on the fly.", 199 | "homepage": "http://mexitek.github.com/phpColors/", 200 | "keywords": [ 201 | "color", 202 | "css", 203 | "design", 204 | "frontend", 205 | "ui" 206 | ], 207 | "support": { 208 | "issues": "https://github.com/mexitek/phpColors/issues", 209 | "source": "https://github.com/mexitek/phpColors" 210 | }, 211 | "time": "2021-11-26T13:19:08+00:00" 212 | } 213 | ], 214 | "packages-dev": [], 215 | "aliases": [], 216 | "minimum-stability": "stable", 217 | "stability-flags": [], 218 | "prefer-stable": false, 219 | "prefer-lowest": false, 220 | "platform": { 221 | "php": ">=7.2" 222 | }, 223 | "platform-dev": [], 224 | "plugin-api-version": "2.3.0" 225 | } 226 | -------------------------------------------------------------------------------- /assets/src/js/winter.sidepaneltab.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Side Panel Tabs 3 | */ 4 | 5 | +function ($) { "use strict"; 6 | 7 | var SidePanelTab = function(element, options) { 8 | this.options = options 9 | this.$el = $(element) 10 | this.init() 11 | } 12 | 13 | SidePanelTab.prototype.init = function() { 14 | var self = this 15 | this.tabOpenDelay = 200 16 | this.tabOpenTimeout = undefined 17 | this.panelOpenTimeout = undefined 18 | this.$sideNav = $('[data-control="sidenav"][data-menu-code="' + this.$el.data('menu-code') + '"') 19 | this.$sideNavItems = $('ul li', this.$sideNav) 20 | this.$sidePanelItems = $('[data-content-id]', this.$el) 21 | this.sideNavWidth = this.$sideNavItems.outerWidth() 22 | this.mainNavHeight = $('#layout-mainmenu').outerHeight() 23 | this.panelVisible = false 24 | this.visibleItemId = false 25 | this.$fixButton = $('') 26 | 27 | this.$fixButton.click(function() { 28 | self.fixPanel() 29 | return false 30 | }) 31 | $('.fix-button-container', this.$el).append(this.$fixButton) 32 | 33 | this.$sideNavItems.click(function() { 34 | const $this = $(this); 35 | 36 | if (!$this.data('menu-item')) { 37 | return 38 | } 39 | 40 | self.$sideNavItems.removeClass('active'); 41 | $this.toggleClass('active'); 42 | 43 | if ($this.data('no-side-panel')) { 44 | return 45 | } 46 | 47 | if (Modernizr.touchevents && $(window).width() < self.options.breakpoint) { 48 | if ($this.data('menu-item') == self.visibleItemId && self.panelVisible) { 49 | self.hideSidePanel() 50 | return 51 | } 52 | else { 53 | self.displaySidePanel() 54 | } 55 | } 56 | 57 | self.displayTab(this) 58 | 59 | return false 60 | }) 61 | 62 | if (!Modernizr.touchevents) { 63 | // The side panel now opens only when a menu item is hovered and 64 | // when the item doesn't have the "data-no-side-panel" attribute. 65 | // TODO: remove the comment and the code below if no issues noticed. 66 | // self.$sideNav.mouseenter(function() { 67 | // if ($(window).width() < self.options.breakpoint || !self.panelFixed()) { 68 | // self.panelOpenTimeout = setTimeout(function() { 69 | // self.displaySidePanel() 70 | // }, self.tabOpenDelay) 71 | // } 72 | // }) 73 | 74 | self.$sideNav.mouseleave(function() { 75 | clearTimeout(self.panelOpenTimeout) 76 | }) 77 | 78 | self.$el.mouseleave(function() { 79 | self.hideSidePanel() 80 | }) 81 | 82 | self.$sideNavItems.mouseenter(function() { 83 | if ($(window).width() < self.options.breakpoint || !self.panelFixed()) { 84 | if ($(this).data('no-side-panel')) { 85 | self.hideSidePanel() 86 | return 87 | } 88 | 89 | var _this = this 90 | self.tabOpenTimeout = setTimeout(function() { 91 | self.displaySidePanel() 92 | self.displayTab(_this) 93 | }, self.tabOpenDelay) 94 | } 95 | }) 96 | 97 | self.$sideNavItems.mouseleave(function() { 98 | clearTimeout(self.tabOpenTimeout) 99 | }) 100 | 101 | $(window).resize(function() { 102 | self.updatePanelPosition() 103 | self.updateActiveTab() 104 | }) 105 | } 106 | else { 107 | $('#layout-body').click(function() { 108 | if (self.panelVisible) { 109 | self.hideSidePanel() 110 | return false 111 | } 112 | }) 113 | 114 | self.$el.on('close.oc.sidePanel', function() { 115 | self.hideSidePanel() 116 | }) 117 | } 118 | 119 | this.updateActiveTab() 120 | } 121 | 122 | SidePanelTab.prototype.displayTab = function(menuItem) { 123 | var menuItemId = $(menuItem).data('menu-item') 124 | 125 | this.visibleItemId = menuItemId 126 | 127 | if ($.wn.sideNav !== undefined) { 128 | $.wn.sideNav.setActiveItem(menuItemId) 129 | } 130 | 131 | this.$sidePanelItems.each(function() { 132 | var $el = $(this) 133 | $el.toggleClass('hide', $el.data('content-id') != menuItemId) 134 | }) 135 | 136 | $(window).trigger('resize') 137 | } 138 | 139 | SidePanelTab.prototype.displaySidePanel = function() { 140 | $(document.body).addClass('display-side-panel') 141 | 142 | this.$el.appendTo('#layout-canvas') 143 | this.panelVisible = true 144 | this.$el.css({ 145 | left: 0, 146 | top: this.mainNavHeight, 147 | }) 148 | 149 | this.updatePanelPosition() 150 | $(window).trigger('resize') 151 | } 152 | 153 | SidePanelTab.prototype.hideSidePanel = function() { 154 | $(document.body).removeClass('display-side-panel') 155 | if (this.$el.next('#layout-body').length == 0) { 156 | $('#layout-body').before(this.$el) 157 | } 158 | 159 | this.panelVisible = false 160 | 161 | this.updateActiveTab() 162 | } 163 | 164 | SidePanelTab.prototype.updatePanelPosition = function() { 165 | if (!this.panelFixed() || Modernizr.touchevents) { 166 | this.$el.height($(document).height() - this.mainNavHeight) 167 | } 168 | else { 169 | this.$el.css('height', '') 170 | } 171 | 172 | if (this.panelVisible && $(window).width() > this.options.breakpoint && this.panelFixed()) { 173 | this.hideSidePanel() 174 | } 175 | } 176 | 177 | SidePanelTab.prototype.updateActiveTab = function() { 178 | if ($.wn.sideNav === undefined) { 179 | return 180 | } 181 | 182 | if (!this.panelVisible && ($(window).width() < this.options.breakpoint || !this.panelFixed())) { 183 | $.wn.sideNav.unsetActiveItem() 184 | } 185 | else { 186 | $.wn.sideNav.setActiveItem(this.visibleItemId) 187 | } 188 | } 189 | 190 | SidePanelTab.prototype.panelFixed = function() { 191 | return !($(window).width() < this.options.breakpoint) && 192 | !$(document.body).hasClass('side-panel-not-fixed') 193 | } 194 | 195 | SidePanelTab.prototype.fixPanel = function() { 196 | $(document.body).toggleClass('side-panel-not-fixed') 197 | 198 | var self = this 199 | 200 | window.setTimeout(function() { 201 | var fixed = self.panelFixed() 202 | 203 | if (fixed) { 204 | self.updateActiveTab() 205 | $(document.body).addClass('side-panel-fix-shadow') 206 | } else { 207 | $(document.body).removeClass('side-panel-fix-shadow') 208 | self.hideSidePanel() 209 | } 210 | 211 | if (typeof(localStorage) !== 'undefined') 212 | localStorage.ocSidePanelFixed = fixed ? 1 : 0 213 | }, 0) 214 | } 215 | 216 | SidePanelTab.DEFAULTS = { 217 | breakpoint: 769 218 | } 219 | 220 | // PLUGIN DEFINITION 221 | // ============================ 222 | 223 | var old = $.fn.sidePanelTab 224 | 225 | $.fn.sidePanelTab = function (option) { 226 | return this.each(function() { 227 | var $this = $(this) 228 | var data = $this.data('oc.sidePanelTab') 229 | var options = $.extend({}, SidePanelTab.DEFAULTS, $this.data(), typeof option == 'object' && option) 230 | if (!data) $this.data('oc.sidePanelTab', (data = new SidePanelTab(this, options))) 231 | if (typeof option == 'string') data[option].call(data) 232 | }) 233 | } 234 | 235 | $.fn.sidePanelTab.Constructor = SidePanelTab 236 | 237 | // NO CONFLICT 238 | // ================= 239 | 240 | $.fn.sidePanelTab.noConflict = function() { 241 | $.fn.sidePanelTab = old 242 | return this 243 | } 244 | 245 | // DATA-API 246 | // ============ 247 | 248 | $(document).ready(function(){ 249 | $('[data-control=layout-sidepanel]').sidePanelTab() 250 | }) 251 | 252 | // STORED PREFERENCES 253 | // ==================== 254 | 255 | $(document).ready(function() { 256 | if (Modernizr.touchevents || (typeof(localStorage) !== 'undefined')) { 257 | if (localStorage.ocSidePanelFixed == 0) { 258 | $(document.body).addClass('side-panel-not-fixed') 259 | $(window).trigger('resize') 260 | } 261 | else if (localStorage.ocSidePanelFixed == 1) { 262 | $(document.body).removeClass('side-panel-not-fixed') 263 | $(window).trigger('resize') 264 | } 265 | } 266 | }) 267 | }(window.jQuery); 268 | -------------------------------------------------------------------------------- /skins/tailwindui/layouts/partials/menu/top/_quick-actions.php: -------------------------------------------------------------------------------- 1 | 10 | 37 | 38 |
39 | 45 | 54 | 55 | 56 | 57 | attributes) ?> 61 | class="quick-link" 62 | > 63 | 64 | iconSvg): ?> 65 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 79 |
80 | 83 | 84 | Open user menu 85 | <?= e(trans('backend::lang.account.signed_in_as', ['full_name' => $this->user->full_name])) ?> 91 | 92 |
93 | 94 | 102 | 105 |
106 |
107 |
108 |
109 | <?= $this->user->full_name ?> 110 |
111 |
112 |

113 | null])) ?> 114 |

115 |

116 | user->full_name ?> 117 |

118 |
119 |
120 |
121 |
122 | $items): ?> 123 |
124 | 125 | 126 | 130 | 131 | label)) ?> 132 | 133 | 134 | 135 |
136 | 137 | hasAccess('winter.tailwindui.manage_own_appearance.dark_mode')) : ?> 138 |
139 | 'px-4 py-1']) ?> 140 |
141 | 142 | 152 | 153 | 154 | 164 | 165 | 166 | 176 | 177 |
178 | 179 |
180 | 181 |
182 | 183 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 |
196 | 197 | 198 | 199 |
200 | -------------------------------------------------------------------------------- /Plugin.php: -------------------------------------------------------------------------------- 1 | 'winter.tailwindui::lang.plugin.name', 35 | 'description' => 'winter.tailwindui::lang.plugin.description', 36 | 'author' => 'Winter CMS', 37 | 'icon' => 'icon-leaf', 38 | ]; 39 | } 40 | 41 | /** 42 | * Returns the permissions provided by this plugin 43 | */ 44 | public function registerPermissions(): array 45 | { 46 | return [ 47 | 'winter.tailwindui.manage_own_appearance.dark_mode' => [ 48 | 'label' => 'winter.tailwindui::lang.permissions.manage_appearance.dark_mode', 49 | 'tab' => 'winter.tailwindui::lang.plugin.name', 50 | 'roles' => [UserRole::CODE_PUBLISHER, UserRole::CODE_DEVELOPER], 51 | ], 52 | 'winter.tailwindui.manage_own_appearance.menu_location' => [ 53 | 'label' => 'winter.tailwindui::lang.permissions.manage_appearance.menu_location', 54 | 'tab' => 'winter.tailwindui::lang.plugin.name', 55 | 'roles' => [UserRole::CODE_PUBLISHER, UserRole::CODE_DEVELOPER], 56 | ], 57 | 'winter.tailwindui.manage_own_appearance.item_location' => [ 58 | 'label' => 'winter.tailwindui::lang.permissions.manage_appearance.item_location', 59 | 'tab' => 'winter.tailwindui::lang.plugin.name', 60 | 'roles' => [UserRole::CODE_PUBLISHER, UserRole::CODE_DEVELOPER], 61 | ], 62 | ]; 63 | } 64 | 65 | /** 66 | * Boot method, called right before the request route. 67 | */ 68 | public function boot() 69 | { 70 | // Only apply skin modifications to the backend context 71 | if ($this->app->runningInBackend()) { 72 | $this->applyBackendSkin(); 73 | $this->extendBackendControllers(); 74 | $this->extendBackendWidgets(); 75 | $this->extendBrandSettingsForm(); 76 | $this->extendBackendAuthController(); 77 | } 78 | } 79 | 80 | /** 81 | * Guess the override view path for the provided object 82 | */ 83 | protected function guessOverrideViewPath(object $object): string 84 | { 85 | $path = strtolower(get_class($object)); 86 | $cleanPath = str_replace("\\", "/", $path); 87 | if (!in_array(Str::before($cleanPath, '/'), ['backend', 'cms', 'system'])) { 88 | $cleanPath = 'plugins/' . $cleanPath; 89 | } 90 | return '$/winter/tailwindui/skins/tailwindui/views/' . $cleanPath; 91 | } 92 | 93 | /** 94 | * Apply the TailwindUI backend skin as the selected backend skin 95 | */ 96 | protected function applyBackendSkin() 97 | { 98 | Config::set('cms.backendSkin', \Winter\TailwindUI\Skins\TailwindUI::class); 99 | Config::set('brand.backgroundImage', '/plugins/winter/tailwindui/assets/images/background.jpg'); 100 | 101 | // Set a default logo that will work with the default dark sidebar as a fallback 102 | // @TODO: add support for light / dark modes / variations of all primary branding (logo, favicon, colour scheme) and apply as necessary 103 | if (empty(Config::get('brand.logoPath'))) { 104 | // Config::set('brand.logoPath', '~/modules/backend/assets/images/winter-logo-white.svg'); 105 | // Config::set('brand.logoPath', '~/modules/backend/assets/images/winter-logo.svg'); 106 | } 107 | } 108 | 109 | /** 110 | * Extend all backend controllers to inject view overrides and apply custom 111 | * brand settings data 112 | */ 113 | protected function extendBackendControllers(): void 114 | { 115 | // Add our view override paths 116 | BaseBackendController::extend(function (\Backend\Classes\Controller $controller) { 117 | $controller->addViewPath($this->guessOverrideViewPath($controller)); 118 | 119 | $controller->addVite('assets/src/css/app.css', 'Winter.TailwindUI'); 120 | 121 | $this->extendBrandSettingsData(); 122 | 123 | $controller->addDynamicMethod('onTailwindUISetTheme', function () { 124 | $user = BackendAuth::user(); 125 | if (!$user || !$user->hasAccess('winter.tailwindui.manage_own_appearance.dark_mode')) { 126 | abort(403, "You do not have permission to do that."); 127 | } 128 | 129 | $darkMode = post('dark_mode'); 130 | $prefs = PreferenceModel::instance(); 131 | $prefs->set('dark_mode', $darkMode); 132 | return [ 133 | 'dark_mode' => $darkMode, 134 | ]; 135 | }); 136 | }); 137 | 138 | // Extend the Settings controller to force the page to reload after updating branding 139 | SettingsController::extend(function ($controller) { 140 | $controller->bindEvent('ajax.beforeRunHandler', function ($handler) use ($controller) { 141 | if ($handler === 'onSave' && !empty(Request::post('BrandSetting'))) { 142 | $controller->update_onSave(...CoreBackendController::$params); 143 | return redirect()->refresh(); 144 | } 145 | }); 146 | }); 147 | 148 | // Extend the Preferences controller to force the page to reload after updating preferences 149 | PreferencesController::extend(function ($controller) { 150 | $controller->bindEvent('ajax.beforeRunHandler', function ($handler) use ($controller) { 151 | if ($handler === 'onSave' && !empty(Request::post('Preference'))) { 152 | $controller->update_onSave(...CoreBackendController::$params); 153 | return redirect()->refresh(); 154 | } 155 | }); 156 | }); 157 | } 158 | 159 | /** 160 | * Extends backend widgets to use the custom views provided by this plugin 161 | */ 162 | protected function extendBackendWidgets(): void 163 | { 164 | WidgetBase::extend(function ($widget) { 165 | // @TODO: BlogMarkdown and all ML overrides break this 166 | $widget->addViewPath($this->guessOverrideViewPath($widget) . '/partials'); 167 | }); 168 | } 169 | 170 | /** 171 | * Populate brand settings data with initial values if not set 172 | */ 173 | protected function extendBrandSettingsData(): void 174 | { 175 | $settings = BrandSetting::instance(); 176 | $userSettings = (!is_null(BackendAuth::user())) 177 | ? PreferenceModel::instance() 178 | : null; 179 | 180 | // Initialize the backend branding data from the config if it's not set already 181 | $fieldDefaults = []; 182 | $fields = Yaml::parseFile(plugins_path('winter/tailwindui/models/brandsetting/fields.yaml')); 183 | if (!empty($fields['tabs'])) { 184 | foreach ($fields['tabs']['fields'] as $name => $config) { 185 | if (isset($config['default'])) { 186 | $fieldDefaults[$name] = $config['default']; 187 | } 188 | } 189 | } 190 | 191 | if (!empty($fieldDefaults)) { 192 | foreach ($fieldDefaults as $name => $default) { 193 | // Check the current user for an overridden preference 194 | $userValue = (!is_null($userSettings)) ? $userSettings->get($name) : null; 195 | 196 | if (!empty($userValue)) { 197 | $settings->setSettingsValue($name, $userValue); 198 | $settings->attributes[$name] = $userValue; 199 | 200 | // Apply defaults from brand config if no value is set in the DB 201 | } elseif (empty($settings->getSettingsValue($name))) { 202 | $settings->setSettingsValue($name, $this->app->config->get("brand.$name", $default)); 203 | $settings->attributes[$name] = $this->app->config->get("brand.$name", $default); 204 | } 205 | } 206 | } 207 | 208 | // Set the default values for the User Preferences 209 | if ($userSettings) { 210 | $applyDefaults = [ 211 | 'dark_mode', 212 | ]; 213 | $preferenceDefaults = []; 214 | $preferenceFields = Yaml::parseFile(plugins_path('winter/tailwindui/models/preference/fields.yaml')); 215 | if (!empty($preferenceFields['tabs'])) { 216 | foreach ($preferenceFields['tabs']['fields'] as $name => $config) { 217 | if (isset($config['default']) && in_array($name, $applyDefaults)) { 218 | $preferenceDefaults[$name] = $config['default']; 219 | } 220 | } 221 | } 222 | 223 | if (!empty($preferenceDefaults)) { 224 | foreach ($preferenceDefaults as $name => $default) { 225 | // Check the current user for an overridden preference 226 | $userValue = $userSettings->get($name); 227 | 228 | if (empty($userSettings->get($name))) { 229 | $userSettings->setSettingsValue($name, $this->app->config->get("brand.$name", $default)); 230 | $userSettings->attributes[$name] = $this->app->config->get("brand.$name", $default); 231 | } 232 | } 233 | } 234 | } 235 | } 236 | 237 | /** 238 | * Extend the brand settings form to include the settings provided by this plugin 239 | */ 240 | protected function extendBrandSettingsForm(): void 241 | { 242 | BrandSetting::extend(function($model) { 243 | $model->addAttachOneRelation('background_image', [\System\Models\File::class]); 244 | }); 245 | 246 | Event::listen('backend.form.extendFields', function ($form) { 247 | // Only extend the desired form 248 | if (!( 249 | $form instanceof \Backend\Widgets\Form 250 | && !$form->isNested 251 | && ( 252 | ( 253 | $form->getController() instanceof SettingsController 254 | && $form->model instanceof BrandSetting 255 | ) 256 | || ( 257 | $form->getController() instanceof PreferencesController 258 | && $form->model instanceof PreferenceModel 259 | ) 260 | ) 261 | )) { 262 | return; 263 | } 264 | 265 | $fields = [ 266 | BrandSetting::class => Yaml::parseFile(plugins_path('winter/tailwindui/models/brandsetting/fields.yaml')), 267 | PreferenceModel::class => Yaml::parseFile(plugins_path('winter/tailwindui/models/preference/fields.yaml')), 268 | ]; 269 | 270 | if (!empty($fields[get_class($form->model)]['tabs'])) { 271 | $form->addTabFields($fields[get_class($form->model)]['tabs']['fields']); 272 | } 273 | 274 | // Remove fields that are no longer relevant 275 | $form->removeField('menu_mode'); 276 | }); 277 | } 278 | 279 | /** 280 | * Extend the backend auth controller to change the layout based on the 281 | * brand settings provided by this plugin 282 | */ 283 | protected function extendBackendAuthController(): void 284 | { 285 | AuthController::extend(function ($controller) { 286 | $controller->bindEvent('page.beforeDisplay', function () use ($controller) { 287 | $authLayout = BrandSetting::get('auth_layout'); 288 | $controller->layout = "auth-$authLayout"; 289 | }); 290 | }); 291 | } 292 | } 293 | -------------------------------------------------------------------------------- /skins/tailwindui/layouts/_menu-top.php: -------------------------------------------------------------------------------- 1 | listItems('mysettings'); 5 | ?> 6 | 7 | 19 |
20 |
28 | 29 | 30 | 33 | 34 | Open main menu 35 | 36 | 37 | 38 | 39 | fireViewEvent('backend.partials.menuTop.extend', [ 40 | 'menuLocation' => $menuLocation, 41 | 'iconLocation' => $iconLocation, 42 | ]); ?> 43 | 44 | 45 |
48 | 260 |
261 | 262 | 263 |
264 | makeLayoutPartial('partials/menu/top/quick-actions', [ 265 | 'mySettings' => $mySettings, 266 | 'menuLocation' => $menuLocation, 267 | ]); ?> 268 |
269 |
270 |
271 | 272 | 273 | makeLayoutPartial('partials/menu/top/mobile-menu', [ 274 | 'iconLocation' => $iconLocation, 275 | ]); ?> 276 | 277 | -------------------------------------------------------------------------------- /assets/src/css/darkmode.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-btn: #21262d; 6 | --drk-bg-color-inset: #010409; 7 | --drk-bg-color-selection: #2c434e; 8 | --drk-color: #c9d1d9; 9 | --drk-color-danger: #f85149; 10 | --drk-border-color: #30363d; 11 | --drk-box-shadow: 0 8px 24px #010409; 12 | } 13 | 14 | @layer components { 15 | .btn-darkmode { 16 | @apply rounded-sm py-1 w-full text-center text-sm text-gray-700 hover:text-white hover:bg-gray-200 hover:text-gray-900 hover:no-underline dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-700; 17 | 18 | > i { 19 | @apply text-sm text-center min-w-[1.25em] 20 | } 21 | } 22 | 23 | html[data-color-scheme="auto"] .btn-darkmode[data-request-data="dark_mode: 'auto'"], 24 | html[data-color-scheme="dark"] .btn-darkmode[data-request-data="dark_mode: 'dark'"], 25 | html[data-color-scheme="light"] .btn-darkmode[data-request-data="dark_mode: 'light'"] 26 | { 27 | @apply 28 | bg-gray-300 text-gray-700 29 | dark:text-gray-300 dark:bg-gray-700; 30 | } 31 | } 32 | 33 | .dark { 34 | body { 35 | color: var(--drk-color); 36 | background: var(--drk-bg-color-a); 37 | } 38 | 39 | .layout.control-tabs.wn-logo-transparent:not(.has-tabs):after, 40 | .flex-layout-column.wn-logo-transparent:not(.has-tabs):after, 41 | .layout-cell.wn-logo-transparent:after { 42 | background: transparent; 43 | } 44 | 45 | 46 | nav#layout-mainmenu { 47 | background-color: var(--drk-bg-color-b); 48 | } 49 | 50 | nav#layout-mainmenu.navbar ul li.active { 51 | border-top: solid 3px #3498db; 52 | margin-top: 2px; 53 | } 54 | 55 | nav#layout-mainmenu ul li .mainmenu-accountmenu { 56 | background: var(--drk-bg-color-b); 57 | } 58 | 59 | nav#layout-mainmenu ul li .mainmenu-accountmenu:after { 60 | border-bottom-color: var(--drk-bg-color-b); 61 | } 62 | 63 | nav#layout-mainmenu ul li .mainmenu-accountmenu li a { 64 | color: var(--drk-color); 65 | } 66 | 67 | nav#layout-mainmenu ul li .mainmenu-accountmenu li a:hover, 68 | nav#layout-mainmenu ul li .mainmenu-accountmenu li a:focus { 69 | background: #1f6feb; 70 | color: #f0f6fc; 71 | } 72 | 73 | nav#layout-mainmenu ul li .mainmenu-accountmenu li:first-child a:hover, 74 | nav#layout-mainmenu ul li .mainmenu-accountmenu li:first-child a:focus { 75 | border-radius: 3px 3px 0 0; 76 | } 77 | 78 | nav#layout-mainmenu ul li .mainmenu-accountmenu li:last-child a:hover, 79 | nav#layout-mainmenu ul li .mainmenu-accountmenu li:last-child a:focus { 80 | border-radius: 0 0 3px 3px; 81 | } 82 | 83 | nav#layout-mainmenu ul li .mainmenu-accountmenu li:first-child a:hover:after, 84 | nav#layout-mainmenu ul li .mainmenu-accountmenu li:first-child a:focus:after, 85 | nav#layout-mainmenu ul li .mainmenu-accountmenu li:first-child a:active:after { 86 | border-bottom-color: #1f6feb; 87 | } 88 | 89 | nav#layout-mainmenu ul li .mainmenu-accountmenu li.divider { 90 | background-color: var(--drk-border-color); 91 | } 92 | 93 | 94 | /* sidenav */ 95 | nav.layout-sidenav { 96 | background: var(--drk-bg-color-b); 97 | border-top: 1px solid var(--drk-border-color); 98 | } 99 | 100 | #layout-sidenav li.active { 101 | background: var(--drk-bg-color-btn); 102 | border-left: solid 4px #3498db; 103 | } 104 | 105 | #layout-sidenav li.active a:hover { 106 | background: var(--drk-bg-color-btn); 107 | } 108 | 109 | #layout-sidenav ul li a:hover { 110 | background: rgb(110 118 129 / 10%); 111 | } 112 | 113 | .sidenav-tree { 114 | background-color: var(--drk-bg-color-b); 115 | } 116 | 117 | .sidenav-tree ul.top-level > li > div.group:before, 118 | .sidenav-tree ul.top-level > li > div.group:after { 119 | border-top-color: #13171d; 120 | } 121 | 122 | /* .layout-sidenav-container { 123 | border-right: solid 1px var(--drk-border-color); 124 | } */ 125 | /* End sidenav */ 126 | 127 | .close { 128 | color: #fff; 129 | } 130 | 131 | .close:hover, 132 | .close:focus { 133 | color: #fff; 134 | } 135 | 136 | .table-striped.widget-calcs { 137 | color: #bbb; 138 | } 139 | 140 | .table > thead > tr > th { 141 | border-bottom-color: var(--drk-border-color); 142 | } 143 | 144 | .table-striped > tbody > tr:nth-child(odd) > td { 145 | background-color: #1d242e; 146 | } 147 | 148 | .table > tbody > tr > td { 149 | border-top-color: var(--drk-border-color); 150 | } 151 | 152 | .text-muted { 153 | color: #8b949e; 154 | } 155 | 156 | input.form-control.icon.search.growable:focus, 157 | input.form-control[name="search"]:focus { 158 | border-color: #1f6feb; 159 | outline: none; 160 | box-shadow: 0 0 0 3px #0c2d6b; 161 | } 162 | 163 | .toolbar-widget { 164 | .clear-input-text { 165 | color: var(--drk-color); 166 | background-color: var(--drk-bg-color-inset); 167 | &:hover, &:focus { 168 | color: var(--drk-color); 169 | } 170 | } 171 | } 172 | 173 | .field-recordfinder .btn { 174 | color: #fff; 175 | } 176 | 177 | .select2-dropdown { 178 | color: var(--drk-color); 179 | background-color: var(--drk-bg-color-b); 180 | border: 1px solid var(--drk-border-color); 181 | box-shadow: var(--drk-box-shadow); 182 | } 183 | 184 | .select2-container--default .select2-selection { 185 | background-color: #010409; 186 | border: 1px solid var(--drk-border-color); 187 | box-shadow: 0 0 transparent; 188 | } 189 | 190 | .select2-container--default .select2-selection--single .select2-selection__rendered { 191 | color: var(--drk-color); 192 | } 193 | 194 | .select2-container--default .select2-selection--single .select2-selection__arrow b:before { 195 | color: #f0f8ff; 196 | } 197 | 198 | .select2-container--default .select2-search--dropdown .select2-search__field { 199 | color: var(--drk-color); 200 | background-color: var(--drk-bg-color-a); 201 | border: 1px solid var(--drk-border-color); 202 | box-shadow: none; 203 | } 204 | 205 | .select2-container--default .select2-search--dropdown .select2-search__field:focus { 206 | border-color: #1f6feb; 207 | outline: none; 208 | box-shadow: 0 0 0 3px #0c2d6b; 209 | } 210 | 211 | .select2-container--default .select2-results__option--highlighted[aria-selected] { 212 | background-color: rgb(110 118 129 / 10%); 213 | color: var(--drk-color); 214 | } 215 | 216 | .select2-container--default .select2-results__option[aria-selected="true"] { 217 | color: #fff; 218 | background-color: rgb(110 118 129 / 10%); 219 | } 220 | 221 | .control-balloon-selector ul li { 222 | background: #373838; 223 | color: var(--drk-color); 224 | } 225 | 226 | .control-balloon-selector ul li.active { 227 | background: #005087 !important; 228 | } 229 | 230 | 231 | /* tooltip */ 232 | .tooltip-inner { 233 | background: #d1d1d1; 234 | color: #000; 235 | } 236 | 237 | .tooltip.top .tooltip-arrow { 238 | border-top-color: #d1d1d1; 239 | } 240 | 241 | .tooltip.bottom .tooltip-arrow { 242 | border-bottom-color: #d1d1d1; 243 | } 244 | 245 | .tooltip.left .tooltip-arrow { 246 | border-left-color: #d1d1d1; 247 | } 248 | 249 | .tooltip.right .tooltip-arrow { 250 | border-right-color: #d1d1d1; 251 | } 252 | 253 | /* End tooltip */ 254 | 255 | 256 | /* Dashboard */ 257 | .report-widget { 258 | background: var(--drk-bg-color-c); 259 | } 260 | 261 | .report-widget h3 { 262 | color: #c8c8c8; 263 | } 264 | 265 | .report-container > ul .item .content .widget-control { 266 | color: #646464; 267 | text-shadow: 0 1px 0 #a5a5a5; 268 | } 269 | 270 | .report-container > ul .item .content .widget-control:hover { 271 | color: var(--drk-color); 272 | } 273 | 274 | .widget-welcome .welcome-logo { 275 | background: inherit; 276 | } 277 | 278 | .widget-welcome .welcome-message { 279 | color: #bbbbbb; 280 | } 281 | 282 | .widget-welcome .welcome-message strong { 283 | color: #c8c8c8; 284 | } 285 | 286 | .control-status-list > ul li { 287 | color: #bbb; 288 | border-bottom-color: var(--drk-border-color); 289 | } 290 | 291 | .control-status-list > ul li:last-child { 292 | border-bottom: none; 293 | } 294 | 295 | .control-status-list > ul li .status-text.success { 296 | color: #31ac5f; 297 | } 298 | 299 | .text-success { 300 | color: #31ac5f; 301 | } 302 | 303 | .control-status-list > ul li .status-text.warning { 304 | color: #ce9178; 305 | } 306 | 307 | .report-widget a:not(.btn) { 308 | color: #00b0b3; 309 | } 310 | 311 | .report-widget a:not(.btn):hover, 312 | .report-widget a:not(.btn):focus { 313 | color: #00ffff; 314 | } 315 | 316 | .report-widget a:not(.btn).status-label.primary { 317 | color: #fff; 318 | } 319 | 320 | .control-chart div.chart-legend table { 321 | color: #bbb; 322 | } 323 | 324 | .dropdown-menu .dropdown-container > ul { 325 | background-color: var(--drk-bg-color-c); 326 | box-shadow: var(--drk-box-shadow); 327 | } 328 | 329 | .dropdown-menu .dropdown-container > ul:after { 330 | border-bottom-color: var(--drk-bg-color-c); 331 | } 332 | 333 | .dropdown-menu .dropdown-container > ul li.first-item a:hover:after, 334 | .dropdown-menu .dropdown-container > ul li.first-item a:focus:after, 335 | .dropdown-menu .dropdown-container > ul li.first-item a:active:after { 336 | border-bottom-color: #1f6feb; 337 | } 338 | 339 | .dropdown-menu .dropdown-container > ul li a { 340 | color: var(--drk-color); 341 | border-left: 1px solid var(--drk-border-color); 342 | border-right: 1px solid var(--drk-border-color); 343 | } 344 | 345 | .dropdown.dropup .dropdown-menu .dropdown-container > ul:before { 346 | border-top-color: var(--drk-border-color); 347 | } 348 | 349 | .dropdown.dropup .dropdown-menu .dropdown-container > ul:after { 350 | border-top-color: var(--drk-bg-color-c); 351 | } 352 | 353 | .dropdown-menu .divider { 354 | background-color: var(--drk-border-color); 355 | } 356 | 357 | .dropdown-menu .dropdown-container > ul:first-child { 358 | border-top: 1px solid var(--drk-border-color); 359 | } 360 | 361 | .dropdown-menu .dropdown-container > ul:last-child { 362 | border-bottom: 1px solid var(--drk-border-color); 363 | } 364 | 365 | .dropdown-menu .dropdown-container > ul li a:hover, 366 | .dropdown-menu .dropdown-container > ul li a:focus { 367 | color: #f0f6fc; 368 | background-color: #1f6feb; 369 | } 370 | 371 | .dropdown.dropup .dropdown-menu .dropdown-container > ul li.last-item a:hover:after, 372 | .dropdown.dropup .dropdown-menu .dropdown-container > ul li.last-item a:focus:after, 373 | .dropdown.dropup .dropdown-menu .dropdown-container > ul li.last-item a:active:after { 374 | border-top-color: #1f6feb; 375 | } 376 | 377 | .report-container .manage-widgets:hover { 378 | border-color: #0f5acc; 379 | color: #f0f6fc; 380 | background-color: #1f6feb; 381 | } 382 | 383 | .report-container .dropdown.open .manage-widgets { 384 | background-color: #1f6feb; 385 | color: #f0f6fc; 386 | border-color: #0f5acc; 387 | } 388 | 389 | /* END Dashboard */ 390 | 391 | 392 | 393 | /* CMS */ 394 | .control-scrollpanel { 395 | background-color: var(--drk-bg-color-c); 396 | border-right: solid 1px var(--drk-border-color); 397 | } 398 | 399 | .control-treeview { 400 | ol li { 401 | > div { 402 | background-color: var(--drk-bg-color-b); 403 | a { 404 | color: #c5c5c5; 405 | } 406 | .submenu { 407 | filter: grayscale(100%); 408 | ::before, 409 | ::after { 410 | filter: grayscale(100%); 411 | } 412 | } 413 | } 414 | 415 | > div:hover, 416 | &.dragged div { 417 | background-color: #9a9a9a !important; 418 | } 419 | } 420 | } 421 | 422 | .control-filelist { 423 | ul li { 424 | a:hover { 425 | background: rgb(110 118 129 / 10%); 426 | } 427 | a span.title { 428 | color: #c5c5c5; 429 | } 430 | a span.description strong { 431 | color: #569cd6; 432 | } 433 | 434 | &.active { 435 | a, 436 | a:hover, 437 | a:focus { 438 | background: var(--drk-bg-color-b); 439 | } 440 | } 441 | &.group { 442 | > h4 a, 443 | > div.group > h4 a { 444 | color: #fff; 445 | } 446 | } 447 | } 448 | 449 | &.component-list ul li div.group i { 450 | color: #fff; 451 | background: var(--drk-bg-color-c); 452 | border-top: 1px solid var(--drk-border-color); 453 | } 454 | 455 | p.no-data { 456 | color: #d16969; 457 | } 458 | 459 | &.filelist-hero { 460 | ul li { 461 | background: var(--drk-bg-color-b); 462 | 463 | &.separator { 464 | background: var(--drk-bg-color-a); 465 | border-bottom-color: var(--drk-border-color); 466 | &:before { 467 | border-top-color: var(--drk-bg-color-a); 468 | } 469 | &:after { 470 | border-top-color: var(--drk-border-color); 471 | } 472 | } 473 | 474 | h5 { 475 | color: var(--drk-color); 476 | } 477 | 478 | > a { 479 | border-bottom-color: var(--drk-border-color); 480 | } 481 | } 482 | 483 | &.single-level ul li:hover > a { 484 | background: #202833; 485 | } 486 | } 487 | } 488 | 489 | .layout.control-tabs.oc-logo-transparent:not(.has-tabs):after, 490 | .flex-layout-column.oc-logo-transparent:not(.has-tabs):after, 491 | .layout-cell.oc-logo-transparent:after { 492 | background-color: transparent; 493 | } 494 | 495 | .fancy-layout :not(.nested-form) > .form-widget > .layout-row > .control-tabs.secondary-tabs > div > ul.nav-tabs > li.active > a { 496 | color: var(--drk-color); 497 | } 498 | .fancy-layout .control-tabs.has-tabs > div.tab-content, 499 | .fancy-layout.control-tabs.has-tabs > div.tab-content { 500 | background: var(--drk-bg-color-a) !important; 501 | } 502 | 503 | #layout-side-panel div.control-toolbar input.form-control { 504 | box-shadow: none; 505 | } 506 | 507 | /* Froala richtext editor */ 508 | .field-richeditor { 509 | .fr-view { 510 | @apply prose-invert; 511 | } 512 | } 513 | 514 | .field-markdowneditor { 515 | .editor-preview { 516 | @apply prose-invert; 517 | } 518 | } 519 | 520 | .control-assetlist ul li a.link { 521 | color: var(--drk-color); 522 | } 523 | 524 | .control-assetlist ul li a.link:hover { 525 | background: #000; 526 | } 527 | 528 | .control-assetlist ul li.active a.link, 529 | .control-assetlist ul li a.link:hover { 530 | background: var(--drk-bg-color-b); 531 | } 532 | 533 | .control-assetlist p.parent.parent a.link:after { 534 | font-size: 7px; 535 | color: #fff; 536 | } 537 | 538 | .control-assetlist p.parent a.link:hover { 539 | background: #000 !important; 540 | } 541 | 542 | .control-assetlist p.parent.parent a.link { 543 | background-color: var(--drk-bg-color-a); 544 | color: var(--drk-color); 545 | } 546 | 547 | .component-list .components div.layout div.layout-row div.layout-cell { 548 | border-top: 1px solid var(--drk-border-color); 549 | background: var(--drk-bg-color-b); 550 | } 551 | 552 | .draggable-component-item:hover, 553 | .component-list .components div.layout-cell:hover, 554 | .component-list .components div.layout div.layout-row div.layout-cell:hover, 555 | div.control-componentlist div.components div.layout-cell:hover { 556 | background: #202833; 557 | } 558 | 559 | div.control-componentlist div.components div.layout-cell { 560 | background: var(--drk-bg-color-b); 561 | } 562 | 563 | div.control-componentlist div.components div.layout-cell:hover { 564 | background: var(--drk-bg-color-c); 565 | } 566 | 567 | div.control-componentlist div.components div.layout-cell > div.popover-highlight { 568 | background: var(--drk-bg-color-c) !important; 569 | border: 1px solid var(--drk-border-color); 570 | } 571 | 572 | .draggable-component-item > div:after, 573 | .component-list .components div.layout-cell > div:after, 574 | div.control-componentlist div.components div.layout-cell > div:after { 575 | color: var(--drk-bg-color-b); 576 | text-shadow: 0 0 1px #6fc2f1; 577 | } 578 | 579 | .component-list .components div.layout div.layout-row div.layout-cell > div:before { 580 | color: var(--drk-bg-color-b); 581 | text-shadow: 0 0 1px #6fc2f1; 582 | } 583 | 584 | div.control-componentlist div.components div.layout-cell > div:before, 585 | .component-list .components div.layout-cell > div span.name, 586 | div.control-componentlist div.components div.layout-cell > div span.name, 587 | div.control-componentlist div.components div.layout-cell > div a.remove { 588 | color: var(--drk-color); 589 | } 590 | 591 | .component-list .components div.layout-cell > div span.description, 592 | div.control-componentlist div.components div.layout-cell > div span.description { 593 | color: #bdb884; 594 | } 595 | 596 | div.control-componentlist div.components div.layout-cell > div span.alias { 597 | color: #7fffd4; 598 | } 599 | 600 | #cms-master-tabs .form-buttons .btn.btn-primary { 601 | color: #fff; 602 | border: none; 603 | } 604 | 605 | #cms-master-tabs .form-buttons .btn.btn-primary:hover { 606 | background-color: transparent; 607 | } 608 | 609 | .fancy-layout .form-buttons .btn { 610 | border: 0; 611 | } 612 | 613 | #cms-master-tabs.fancy-layout .control-tabs.primary-tabs > div > ul.nav-tabs > li a span.title { 614 | margin: -2px 0px; 615 | background: var(--drk-bg-color-a); 616 | padding: 5px 5px 3px 5px; 617 | } 618 | 619 | .fancy-layout .control-tabs.secondary-tabs > div > ul.nav-tabs { 620 | background-color: var(--drk-bg-color-b); 621 | } 622 | 623 | #cms-master-tabs .control-tabs.primary-tabs > div > ul.nav-tabs > li a > span.title > span { 624 | border-top: solid 2px #555; 625 | margin-top: -5px; 626 | } 627 | 628 | #cms-master-tabs .control-tabs.secondary-tabs > div > ul.nav-tabs > li a > span.title > span { 629 | border-top: 0; 630 | } 631 | 632 | /* END - CMS */ 633 | 634 | 635 | /* backend/media */ 636 | .whiteboard { 637 | background: var(--drk-bg-color-b); 638 | } 639 | 640 | .nav.selector-group li.active a { 641 | color: #d16969; 642 | } 643 | 644 | ul.tree-path li.root a { 645 | color: #ce9178; 646 | } 647 | 648 | table.name-value-list td { 649 | color: #31ac5f; 650 | } 651 | 652 | div.panel.border-left { 653 | border-left-color: var(--drk-border-color); 654 | } 655 | 656 | div.panel.border-right { 657 | border-right-color: var(--drk-border-color); 658 | } 659 | 660 | div.panel.border-bottom { 661 | border-bottom-color: var(--drk-border-color); 662 | } 663 | 664 | div.panel.triangle-down:after { 665 | border-top-color: var(--drk-bg-color-b); 666 | } 667 | 668 | div.panel.triangle-down:before { 669 | border-top-color: var(--drk-border-color); 670 | } 671 | 672 | div[data-control="media-manager"] .sidebar-image-placeholder { 673 | box-sizing: content-box; 674 | background-image: -webkit-linear-gradient(45deg, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef), 675 | -webkit-linear-gradient(45deg, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef); 676 | background-position: 0 0, 10px 10px; 677 | background-size: 21px 21px; 678 | background-color: #d2d2d2; 679 | } 680 | 681 | div[data-control="media-manager"] .sidebar-image-placeholder i.icon-level-up { 682 | color: #d16969; 683 | } 684 | 685 | div[data-control="media-manager"] .sidebar-image-placeholder p { 686 | color: #d16969; 687 | background: #fff; 688 | } 689 | 690 | #MediaManager-manager-filters .nav > li > a:hover, 691 | #MediaManager-manager-filters .nav > li > a:focus { 692 | background: var(--drk-bg-color-btn); 693 | color: var(--drk-color); 694 | } 695 | 696 | div[data-control="media-manager"] .media-list.list li { 697 | background: #555; 698 | border: 1px solid #777; 699 | } 700 | 701 | div[data-control="media-manager"] .media-list li h4 { 702 | color: #ff9800; 703 | } 704 | 705 | div[data-control="media-manager"] .media-list li[data-item-type="folder"] h4 { 706 | color: #d16969; 707 | } 708 | 709 | div[data-control="media-manager"] .media-list li[data-item-type="file"] h4 { 710 | color: #ffc107; 711 | } 712 | 713 | div[data-control="media-manager"] table.table tr[data-item-type=folder] i.icon-folder { 714 | color: #ce9178; 715 | } 716 | 717 | div[data-control="media-manager"] table.table tr[data-item-type=folder].selected i.icon-folder { 718 | color: inherit; 719 | } 720 | 721 | tr[data-item-type="file"] .item-title { 722 | color: #00ffff; 723 | } 724 | 725 | [data-control="preview-sidebar"] .panel [data-label="title"] { 726 | color: #d16969; 727 | } 728 | 729 | div[data-control="media-manager"] .upload-progress { 730 | background: inherit; 731 | } 732 | 733 | div[data-control="media-manager"] .upload-progress h5 { 734 | color: var(--drk-color); 735 | } 736 | 737 | /* END - backend/media */ 738 | 739 | 740 | /* List - Список */ 741 | .list-scrollable-container:after, 742 | .list-scrollable-container:before { 743 | background: var(--drk-bg-color-a); 744 | } 745 | 746 | .list-widget table { 747 | border-left: 1px solid var(--drk-border-color); 748 | } 749 | 750 | .control-table .control-scrollbar table.data tr:last-child td { 751 | border-bottom-color: var(--drk-border-color); 752 | } 753 | 754 | .control-filter { 755 | color: #fff; 756 | background-color: #1a2938; 757 | border-top: 1px solid #34495e; 758 | border-bottom: 1px solid #34495e; 759 | } 760 | 761 | table.table.data { 762 | border-bottom-color: var(--drk-border-color); 763 | } 764 | 765 | table.table.data thead { 766 | background: var(--drk-bg-color-b); 767 | } 768 | 769 | table.table.data tbody td, 770 | table.table.data tbody th { 771 | color: var(--drk-color); 772 | border-top: 1px solid var(--drk-border-color); 773 | } 774 | 775 | table.table.data tbody tr.active td { 776 | color: var(--drk-color); 777 | } 778 | 779 | table.table.data tbody tr.active td, 780 | table.table.data tbody tr.active th { 781 | background-color: #0e253c; 782 | } 783 | 784 | table.table.data tbody tr.rowlink:not(.nolink):active td { 785 | background: #395169 !important; 786 | color: var(--drk-color); 787 | ; 788 | } 789 | 790 | table.table.data tbody tr.rowlink:not(.nolink):hover td, 791 | table.table.data tbody tr:not(.no-data).selected td { 792 | background: #192634 !important; 793 | color: var(--drk-color); 794 | ; 795 | } 796 | 797 | table.table.data tbody tr:nth-child(even) td, 798 | table.table.data tbody tr:nth-child(even) th { 799 | background-color: #0c121a; 800 | } 801 | 802 | table.table.data thead td > a, 803 | table.table.data thead th > a, 804 | table.table.data thead td > span, 805 | table.table.data thead th > span { 806 | color: #deb887; 807 | } 808 | 809 | .control-list table.table.data .list-setup a { 810 | color: #deb887; 811 | } 812 | 813 | table.table.data thead td > a:hover, 814 | table.table.data thead th > a:hover, 815 | table.table.data thead td > span:hover, 816 | table.table.data thead th > span:hover { 817 | color: #daeb60; 818 | } 819 | 820 | .control-filter a, 821 | .control-filter .custom-checkbox label { 822 | color: #c3c3c3; 823 | } 824 | 825 | .control-filter > .filter-scope:hover, 826 | .control-filter > .filter-scope.active, 827 | .control-filter > .filter-scope:hover.custom-checkbox label, 828 | .control-filter > .filter-scope.active.custom-checkbox label { 829 | color: #cddc39; 830 | } 831 | 832 | .control-filter > .filter-scope:hover .filter-label, 833 | .control-filter > .filter-scope.active .filter-label { 834 | color: #cddc39; 835 | } 836 | 837 | .control-filter > .filter-has-popover:hover { 838 | color: #ffeb3b; 839 | } 840 | 841 | .control-filter > .filter-has-popover:hover .filter-label { 842 | color: #cddc39; 843 | } 844 | 845 | .control-filter-popover .filter-items { 846 | background-color: #353535; 847 | border-bottom-color: #3e71a5; 848 | } 849 | 850 | .control-filter-popover .filter-items a, 851 | .control-filter-popover .filter-active-items a { 852 | color: #999; 853 | } 854 | 855 | .control-filter-popover .filter-items, 856 | .control-filter-popover .filter-active-items { 857 | background-color: var(--drk-bg-color-b); 858 | } 859 | 860 | .control-filter-popover .filter-items a:hover, 861 | .control-filter-popover .filter-active-items a:hover { 862 | background-color: var(--drk-bg-color-c); 863 | color: var(--drk-color); 864 | } 865 | 866 | 867 | table.table.data thead td, 868 | table.table.data thead th { 869 | border-top: 1px solid #34495e !important; 870 | border-bottom: 1px solid #34495e !important; 871 | border-color: #0180ff; 872 | } 873 | 874 | table.table.data .list-checkbox { 875 | border-right: 1px solid #0180ff; 876 | } 877 | 878 | .table > thead > tr > td.active, 879 | .table > tbody > tr > td.active, 880 | .table > tfoot > tr > td.active, 881 | .table > thead > tr > th.active, 882 | .table > tbody > tr > th.active, 883 | .table > tfoot > tr > th.active, 884 | .table > thead > tr.active > td, 885 | .table > tbody > tr.active > td, 886 | .table > tfoot > tr.active > td, 887 | .table > thead > tr.active > th, 888 | .table > tbody > tr.active > th, 889 | .table > tfoot > tr.active > th { 890 | background-color: #1e1600; 891 | } 892 | 893 | table.table.data thead th.sort-asc.active { 894 | background: #1e261e; 895 | } 896 | 897 | table.table.data thead th.sort-desc.active { 898 | background: #34495e; 899 | } 900 | 901 | table.table.data tbody tr.active:nth-child(even) td, 902 | table.table.data tbody tr.active:nth-child(even) th { 903 | background-color: #0e253c; 904 | } 905 | 906 | .field-checkboxlist .field-checkboxlist-inner { 907 | background-color: var(--drk-bg-color-b); 908 | border-color: var(--drk-border-color); 909 | box-shadow: none; 910 | } 911 | 912 | .field-checkboxlist .checkboxlist-controls > div > a:hover > i { 913 | color: #1f99dc; 914 | } 915 | 916 | .custom-checkbox label:before, 917 | .custom-radio label:before { 918 | background-color: #8a8a8a; 919 | border: 1px solid #d6d6d6; 920 | box-shadow: none; 921 | } 922 | 923 | .field-fileupload.style-file-single { 924 | background-color: #000; 925 | border-color: var(--drk-border-color); 926 | -webkit-box-shadow: none; 927 | box-shadow: none; 928 | } 929 | 930 | .field-fileupload.style-file-multi .upload-object:nth-child(odd) { 931 | background-color: #3b3b3b; 932 | } 933 | 934 | .field-fileupload.style-file-multi .upload-object:nth-child(even) { 935 | background-color: #565656; 936 | } 937 | 938 | .field-fileupload.style-file-multi .upload-files-container { 939 | border: 1px solid #777; 940 | } 941 | 942 | .field-fileupload.style-file-multi .upload-object { 943 | border-bottom: 1px solid #777; 944 | } 945 | 946 | .field-fileupload.style-file-multi .upload-object .info h4, 947 | .field-fileupload.style-file-multi .upload-object .info p { 948 | color: #d6d6d6; 949 | } 950 | 951 | .field-fileupload .upload-object.is-error .info h4 { 952 | color: #ed1700; 953 | } 954 | 955 | .control-list p.no-data { 956 | color: #d7ba7d; 957 | } 958 | 959 | 960 | /* breadcrumb */ 961 | .control-breadcrumb { 962 | background-color: var(--drk-bg-color-c); 963 | border: solid 1px var(--drk-border-color); 964 | } 965 | 966 | .control-breadcrumb li { 967 | background-color: var(--drk-bg-color-b); 968 | } 969 | 970 | .control-breadcrumb li:before { 971 | border-left: 15px solid var(--drk-bg-color-c); 972 | } 973 | 974 | .control-breadcrumb li:after { 975 | border-left: 15px solid var(--drk-bg-color-b); 976 | } 977 | 978 | .control-breadcrumb li:last-child { 979 | background-color: transparent; 980 | color: var(--drk-color); 981 | } 982 | 983 | /* END - breadcrumb */ 984 | 985 | 986 | 987 | /* Form */ 988 | .loading-indicator-container .loading-indicator { 989 | background-color: var(--drk-bg-color-a); 990 | } 991 | 992 | label { 993 | color: var(--drk-color); 994 | } 995 | 996 | .help-block { 997 | color: #a0a0a0; 998 | } 999 | 1000 | .form-control { 1001 | color: var(--drk-color); 1002 | background-color: #010409; 1003 | border-color: var(--drk-border-color); 1004 | box-shadow: 0 0 transparent; 1005 | } 1006 | 1007 | .custom-switch input:checked~span { 1008 | background-color: #238636; 1009 | } 1010 | 1011 | div[data-control="sensitive"] a[data-toggle], 1012 | div[data-control="sensitive"] a[data-copy] { 1013 | background-color: var(--drk-bg-color-inset); 1014 | color: var(--drk-color); 1015 | border-color: var(--drk-border-color); 1016 | } 1017 | 1018 | .field-recordfinder { 1019 | border-color: var(--drk-border-color); 1020 | } 1021 | 1022 | .field-section h4 { 1023 | color: #fa8072; 1024 | } 1025 | 1026 | .form-control[disabled], 1027 | .form-control[readonly], 1028 | fieldset[disabled] .form-control { 1029 | background-color: #010409 !important; 1030 | color: var(--drk-color); 1031 | } 1032 | 1033 | .field-codeeditor { 1034 | border: 2px solid #27709c; 1035 | } 1036 | 1037 | .field-repeater .field-repeater-add-item { 1038 | border-color: var(--drk-border-color); 1039 | } 1040 | 1041 | .field-repeater li.field-repeater-item { 1042 | background: var(--drk-bg-color-b); 1043 | border-color: var(--drk-border-color); 1044 | box-shadow: none; 1045 | } 1046 | 1047 | .field-fileupload.style-image-multi .upload-object { 1048 | background: #313131; 1049 | border: 1px solid #7b7b7b; 1050 | } 1051 | 1052 | .field-fileupload .upload-object h4 { 1053 | color: #d7ba7d; 1054 | } 1055 | 1056 | .field-mediafinder.style-image-single .find-button { 1057 | background: #43474a; 1058 | border: 2px dotted #898989; 1059 | } 1060 | 1061 | .field-fileupload.style-image-single .upload-button, 1062 | .field-fileupload.style-image-multi .upload-button { 1063 | background-color: #43474a; 1064 | } 1065 | 1066 | .field-mediafinder.style-image-single .find-button .find-button-icon:before { 1067 | color: var(--drk-color); 1068 | } 1069 | 1070 | .field-mediafinder.style-file-single { 1071 | background-color: #43474a; 1072 | border: 1px solid var(--drk-border-color); 1073 | box-shadow: inset 0 1px 0 #6a6a6a, 0 1px 0 #6a6a6a; 1074 | } 1075 | 1076 | .field-mediafinder.style-file-single .find-button { 1077 | color: #bbb; 1078 | } 1079 | 1080 | .field-mediafinder.style-file-single .find-button:hover { 1081 | color: var(--drk-color); 1082 | background-color: var(--drk-bg-color-btn); 1083 | } 1084 | 1085 | .field-mediafinder .find-object h4 { 1086 | color: #ff7f50; 1087 | } 1088 | 1089 | .select2-container--default .select2-selection--multiple .select2-selection__choice { 1090 | color: var(--drk-color); 1091 | background: rgb(56 139 253 / 15%); 1092 | border-color: var(--drk-border-color); 1093 | } 1094 | 1095 | .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field { 1096 | color: var(--drk-color); 1097 | } 1098 | 1099 | .field-fileupload .upload-object .info h4 a, 1100 | .field-fileupload .upload-object .meta a.upload-remove-button, 1101 | .field-fileupload .upload-object .meta a.drag-handle { 1102 | color: #ef0319; 1103 | } 1104 | 1105 | .form-preview { 1106 | background: #343434; 1107 | border: 1px solid #626262; 1108 | } 1109 | 1110 | .nested-form.panel-styles { 1111 | background: var(--drk-bg-color-c); 1112 | border-color: var(--drk-border-color); 1113 | box-shadow: inset 0 1px 0 rgb(0 154 247 / 25%), 0 1px 0 rgb(30 94 145); 1114 | } 1115 | 1116 | .field-section { 1117 | border-bottom-color: var(--drk-border-color); 1118 | } 1119 | 1120 | /* END - Form */ 1121 | 1122 | /* texteditors */ 1123 | .fr-box.fr-basic .fr-wrapper, 1124 | .ace-github, 1125 | .field-markdowneditor { 1126 | background: var(--drk-bg-color-b); 1127 | } 1128 | .fr-box.fr-basic .fr-element, 1129 | .ace-github, 1130 | .ace-github .ace_cursor { 1131 | color: var(--drk-color); 1132 | } 1133 | .ace-github .ace_marker-layer .ace_selection { 1134 | background: var(--drk-bg-color-selection); 1135 | } 1136 | 1137 | /* control-popover */ 1138 | div.control-popover > div { 1139 | background: var(--drk-bg-color-c); 1140 | border: 1px solid var(--drk-border-color); 1141 | box-shadow: var(--drk-box-shadow); 1142 | } 1143 | 1144 | div.control-popover.placement-bottom > div:before { 1145 | border-bottom-color: var(--drk-border-color); 1146 | } 1147 | 1148 | div.control-popover.placement-bottom > div:after { 1149 | border-bottom-color: #010409; 1150 | } 1151 | 1152 | div.control-popover .popover-head { 1153 | background: var(--drk-bg-color-b); 1154 | color: var(--drk-color); 1155 | border-top-right-radius: 6px; 1156 | border-top-left-radius: 6px; 1157 | } 1158 | 1159 | div.control-popover .popover-head h3 { 1160 | font-weight: 600; 1161 | } 1162 | 1163 | div.control-popover .popover-head p { 1164 | color: #bdb884; 1165 | } 1166 | 1167 | div.control-popover .popover-head .close { 1168 | color: #8b8b8b; 1169 | } 1170 | 1171 | div.control-popover.placement-left .popover-head:before { 1172 | border-left-color: var(--drk-border-color); 1173 | right: -9px; 1174 | } 1175 | 1176 | div.control-popover.placement-left .popover-head:after { 1177 | position: absolute; 1178 | content: ''; 1179 | display: block; 1180 | width: 0; 1181 | height: 0; 1182 | border-top: 7.5px solid transparent; 1183 | border-bottom: 7.5px solid transparent; 1184 | border-left: 8px solid #f9f9f9; 1185 | right: -8px; 1186 | top: 7px; 1187 | border-left-color: var(--drk-bg-color-b); 1188 | z-index: 602; 1189 | } 1190 | 1191 | div.control-popover.placement-bottom .popover-head:before { 1192 | border-bottom-color: var(--drk-bg-color-b); 1193 | } 1194 | 1195 | div.control-popover.placement-bottom .popover-head:after { 1196 | content: ''; 1197 | display: block; 1198 | width: 0; 1199 | height: 0; 1200 | border-left: 8.5px solid transparent; 1201 | border-right: 8.5px solid transparent; 1202 | border-bottom: 9px solid var(--drk-border-color); 1203 | left: 14px; 1204 | top: -10px; 1205 | position: absolute; 1206 | } 1207 | 1208 | .inspector-fields th { 1209 | color: #c5c5c5; 1210 | } 1211 | 1212 | .inspector-fields td, 1213 | .inspector-fields th { 1214 | border-bottom-color: var(--drk-border-color); 1215 | } 1216 | 1217 | .inspector-fields td { 1218 | border-left-color: var(--drk-border-color); 1219 | background: var(--drk-bg-color-c); 1220 | } 1221 | 1222 | .inspector-fields td.text.active { 1223 | background: var(--drk-bg-color-c); 1224 | } 1225 | 1226 | .inspector-fields input[type=text] { 1227 | background: var(--drk-bg-color-c); 1228 | color: var(--drk-color); 1229 | } 1230 | 1231 | .inspector-fields td div.external-param-editor-container.editor-visible div.external-editor div.controls input { 1232 | background: var(--drk-bg-color-c); 1233 | } 1234 | 1235 | .select2-dropdown.ocInspectorDropdown .select2-search { 1236 | border-bottom-color: var(--drk-border-color); 1237 | } 1238 | 1239 | div.control-popover .select2-container--default .select2-selection { 1240 | background-color: var(--drk-bg-color-c); 1241 | } 1242 | 1243 | div.control-popover.popover-danger .popover-head { 1244 | background-image: linear-gradient(rgb(248 81 73 / 15%), rgb(248 81 73 / 15%)); 1245 | } 1246 | 1247 | div.control-popover.popover-danger > div { 1248 | background-image: linear-gradient(rgb(248 81 73 / 15%), rgb(248 81 73 / 15%)); 1249 | border-color: #9f0700; 1250 | } 1251 | 1252 | div.control-popover.popover-danger.placement-top .popover-head:before { 1253 | display: none; 1254 | } 1255 | 1256 | div.control-popover.popover-danger.placement-top > div:after { 1257 | border-top-color: #9f0700; 1258 | } 1259 | 1260 | 1261 | /* alert */ 1262 | .sweet-alert { 1263 | background-color: var(--drk-bg-color-a); 1264 | color: var(--drk-color); 1265 | border: solid 1px var(--drk-border-color); 1266 | box-shadow: var(--drk-box-shadow); 1267 | } 1268 | 1269 | .sweet-alert h2 { 1270 | color: var(--drk-color); 1271 | } 1272 | 1273 | 1274 | /* Modals */ 1275 | .modal-content { 1276 | background: var(--drk-bg-color-a); 1277 | color: var(--drk-color); 1278 | border: solid 1px var(--drk-border-color); 1279 | box-shadow: var(--drk-box-shadow); 1280 | } 1281 | 1282 | .modal-header { 1283 | color: #e0dfdf; 1284 | } 1285 | 1286 | .list-preview { 1287 | background: var(--drk-bg-color-c); 1288 | border-color: var(--drk-border-color); 1289 | } 1290 | 1291 | .control-simplelist { 1292 | background: var(--drk-bg-color-c); 1293 | } 1294 | 1295 | div.popover-overlay { 1296 | background: rgb(0 0 0 / 50%); 1297 | } 1298 | 1299 | 1300 | /* Flash message */ 1301 | .flash-message { 1302 | background: var(--drk-bg-color-a); 1303 | color: var(--drk-color); 1304 | border-style: solid; 1305 | border-width: 1px; 1306 | box-shadow: var(--drk-box-shadow); 1307 | } 1308 | 1309 | .flash-message.success { 1310 | background-image: linear-gradient(rgb(46 160 67 / 15%), rgb(46 160 67 / 15%)); 1311 | border-color: rgb(46 160 67 / 40%); 1312 | } 1313 | 1314 | .flash-message.info { 1315 | background-image: linear-gradient(rgb(56 139 253 / 15%), rgb(56 139 253 / 15%)); 1316 | border-color: rgb(56 139 253 / 40%); 1317 | } 1318 | 1319 | .flash-message.warning { 1320 | background-image: linear-gradient(rgb(187 128 9 / 15%), rgb(187 128 9 / 15%)); 1321 | border-color: rgb(187 128 9 / 40%); 1322 | } 1323 | 1324 | .flash-message.error { 1325 | background-image: linear-gradient(rgb(248 81 73 / 15%), rgb(248 81 73 / 15%)); 1326 | border-color: rgb(248 81 73 / 40%); 1327 | } 1328 | 1329 | 1330 | /* Callout */ 1331 | .callout > .header { 1332 | background: var(--drk-bg-color-a); 1333 | color: var(--drk-color); 1334 | border-style: solid; 1335 | } 1336 | 1337 | .callout.callout-success > .header { 1338 | background-image: linear-gradient(rgb(46 160 67 / 15%), rgb(46 160 67 / 15%)); 1339 | border-color: rgb(46 160 67 / 40%); 1340 | } 1341 | 1342 | .callout.callout-info > .header { 1343 | background-image: linear-gradient(rgb(56 139 253 / 15%), rgb(56 139 253 / 15%)); 1344 | border-color: rgb(56 139 253 / 40%); 1345 | } 1346 | 1347 | .callout.callout-warning > .header { 1348 | background-image: linear-gradient(rgb(187 128 9 / 15%), rgb(187 128 9 / 15%)); 1349 | border-color: rgb(187 128 9 / 40%); 1350 | } 1351 | 1352 | .callout.callout-danger > .header { 1353 | background-image: linear-gradient(rgb(248 81 73 / 15%), rgb(248 81 73 / 15%)); 1354 | border-color: rgb(248 81 73 / 40%); 1355 | } 1356 | 1357 | .callout .content { 1358 | background: var(--drk-bg-color-a); 1359 | color: var(--drk-color); 1360 | } 1361 | 1362 | .callout .content a { 1363 | color: #58a6ff; 1364 | } 1365 | 1366 | .callout .content ::marker { 1367 | color: var(--drk-color); 1368 | } 1369 | 1370 | .callout.callout-success > .content { 1371 | background-image: linear-gradient(rgb(46 160 67 / 15%), rgb(46 160 67 / 15%)); 1372 | border-color: rgb(46 160 67 / 40%); 1373 | } 1374 | 1375 | .callout.callout-info > .content { 1376 | background-image: linear-gradient(rgb(56 139 253 / 15%), rgb(56 139 253 / 15%)); 1377 | border-color: rgb(56 139 253 / 40%); 1378 | } 1379 | 1380 | .callout.callout-warning > .content { 1381 | background-image: linear-gradient(rgb(187 128 9 / 15%), rgb(187 128 9 / 15%)); 1382 | border-color: rgb(187 128 9 / 40%); 1383 | } 1384 | 1385 | .callout.callout-warning > .header+.content { 1386 | background-color: var(--drk-bg-color-a); 1387 | background-image: none; 1388 | } 1389 | 1390 | .callout.callout-danger > .content { 1391 | background-image: linear-gradient(rgb(248 81 73 / 15%), rgb(248 81 73 / 15%)); 1392 | border-color: rgb(248 81 73 / 40%); 1393 | } 1394 | 1395 | 1396 | /* permission editor */ 1397 | .permissioneditor table th { 1398 | color: var(--drk-color); 1399 | border-bottom: 1px solid var(--drk-border-color); 1400 | font-weight: 600; 1401 | font-size: 16px; 1402 | } 1403 | 1404 | .permissioneditor table td { 1405 | border-bottom: 1px solid var(--drk-bg-color-b); 1406 | } 1407 | 1408 | .permissioneditor table tr:hover td { 1409 | background: var(--drk-bg-color-b); 1410 | } 1411 | 1412 | .permissioneditor table td.permission-name { 1413 | color: #3fb950; 1414 | } 1415 | 1416 | 1417 | /* theme-selector-layout - /backend/cms/themes */ 1418 | .theme-selector-layout .theme-thumbnail { 1419 | background: #10161e; 1420 | } 1421 | 1422 | .theme-selector-layout .layout-row.active .theme-thumbnail { 1423 | background: #081934; 1424 | } 1425 | 1426 | .theme-selector-layout .layout-row.active .thumbnail-container:after { 1427 | border-left-color: #081934; 1428 | } 1429 | 1430 | .theme-selector-layout .layout-row.links .theme-thumbnail { 1431 | border-bottom: 1px solid var(--drk-border-color); 1432 | } 1433 | 1434 | .theme-selector-layout .create-new-theme, 1435 | .theme-selector-layout .find-more-themes { 1436 | background: #263baf; 1437 | color: var(--drk-color); 1438 | } 1439 | 1440 | .theme-selector-layout .create-new-theme:hover, 1441 | .theme-selector-layout .find-more-themes:hover { 1442 | background: #283fc2; 1443 | } 1444 | 1445 | .theme-selector-layout .theme-description h3 { 1446 | color: #f9e23d; 1447 | } 1448 | 1449 | .theme-selector-layout .theme-description p.description { 1450 | color: var(--drk-color); 1451 | } 1452 | 1453 | .theme-selector-layout .layout-row.links .theme-description { 1454 | border-bottom: 1px solid var(--drk-border-color); 1455 | } 1456 | 1457 | 1458 | /* Tabs */ 1459 | .control-tabs.primary-tabs { 1460 | > div > ul.nav-tabs > li a > span.title { 1461 | padding: 2px 25px 0px 25px; 1462 | } 1463 | 1464 | > ul.nav-tabs, 1465 | > div > ul.nav-tabs, 1466 | > div > div > ul.nav-tabs { 1467 | &:before { 1468 | border-bottom: 2px solid #555; 1469 | } 1470 | 1471 | li { 1472 | a > span.title { 1473 | background-color: var(--drk-bg-color-a) !important; 1474 | 1475 | &:before { 1476 | border-left: 2px solid #555; 1477 | } 1478 | 1479 | &:after { 1480 | border-right: 2px solid #555; 1481 | } 1482 | 1483 | &:before, 1484 | &:after { 1485 | background: var(--drk-bg-color-a) !important; 1486 | border-width: 2px !important; 1487 | border: none; 1488 | } 1489 | } 1490 | 1491 | &.active { 1492 | a { 1493 | --drk-bg-color-a: #555; 1494 | 1495 | &:before { 1496 | background-color: var(--drk-bg-color-a); 1497 | } 1498 | 1499 | > span.title { 1500 | &:before, 1501 | &:after { 1502 | border-color: #555; 1503 | } 1504 | 1505 | span { 1506 | color: #fff; 1507 | } 1508 | } 1509 | } 1510 | } 1511 | } 1512 | } 1513 | } 1514 | 1515 | .control-tabs > ul.nav-tabs > li.active a, 1516 | .control-tabs > div > ul.nav-tabs > li.active a, 1517 | .control-tabs > div > div > ul.nav-tabs > li.active a, 1518 | .control-tabs > ul.nav-tabs > li.active a:hover, 1519 | .control-tabs > div > ul.nav-tabs > li.active a:hover, 1520 | .control-tabs > div > div > ul.nav-tabs > li.active a:hover { 1521 | color: #ffd700; 1522 | } 1523 | 1524 | .control-tabs > div > ul.nav-tabs > li a { 1525 | color: #8194a5; 1526 | } 1527 | 1528 | .control-tabs > div > ul.nav-tabs > li a:hover { 1529 | color: #b2bfca; 1530 | } 1531 | 1532 | .layout-cell.w-300.form-sidebar.control-scrollpanel { 1533 | background-color: var(--drk-bg-color-c); 1534 | border-left: 1px solid var(--drk-border-color); 1535 | } 1536 | 1537 | .control-tabs.content-tabs > .tab-content > .tab-pane div.list-header, 1538 | .control-tabs.content-tabs > .tab-content > .tab-pane div.padded-container, 1539 | .control-tabs.content-tabs > .tab-content > .tab-pane div.toolbar-widget { 1540 | background: #15232c; 1541 | } 1542 | 1543 | .control-tabs.content-tabs > ul.nav-tabs li.active { 1544 | background: var(--drk-bg-color-c); 1545 | } 1546 | 1547 | .control-tabs.content-tabs > ul.nav-tabs li { 1548 | border-top-color: var(--drk-border-color); 1549 | border-right-color: var(--drk-border-color); 1550 | } 1551 | 1552 | .control-tabs.content-tabs > ul.nav-tabs li:first-child { 1553 | border-left-color: var(--drk-border-color); 1554 | } 1555 | 1556 | .control-tabs.content-tabs > ul.nav-tabs:before { 1557 | background: #565656; 1558 | } 1559 | 1560 | .control-tabs > div > ul.nav-tabs > li a > span.title > span { 1561 | border-top: 2px solid #555; 1562 | } 1563 | 1564 | .control-tabs.primary-tabs > div > ul.nav-tabs > li.active a > span.title:before, 1565 | .control-tabs.primary-tabs > div > ul.nav-tabs > li.active a > span.title:after { 1566 | background: var(--drk-bg-color-a); 1567 | } 1568 | 1569 | .control-tabs > div > ul.nav-tabs > li a > span.title > span { 1570 | margin-top: -2px; 1571 | } 1572 | 1573 | .control-tabs.secondary-tabs > div > ul.nav-tabs > li a > span.title > span { 1574 | border-top: 0; 1575 | } 1576 | 1577 | /* End - Tabs */ 1578 | 1579 | 1580 | /* control-table */ 1581 | .control-table .table-container { 1582 | border-color: var(--drk-border-color); 1583 | } 1584 | 1585 | .control-table .toolbar { 1586 | background: var(--drk-bg-color-b); 1587 | border-bottom-color: var(--drk-border-color); 1588 | } 1589 | 1590 | .control-table.active .toolbar { 1591 | border-bottom-color: #028dff; 1592 | } 1593 | 1594 | .control-table .toolbar a.btn { 1595 | color: var(--drk-color); 1596 | border: 0; 1597 | } 1598 | 1599 | .control-table table.headers th { 1600 | color: var(--drk-color); 1601 | background: #0d1520; 1602 | border-right-color: var(--drk-border-color); 1603 | } 1604 | 1605 | .control-table.active table.headers:after { 1606 | border-bottom-color: var(--drk-border-color); 1607 | } 1608 | 1609 | .control-table table.data tr { 1610 | background-color: var(--drk-bg-color-b); 1611 | } 1612 | 1613 | .control-table table.data tr:nth-child(2n) { 1614 | background-color: #121922; 1615 | } 1616 | 1617 | .control-table table.data td { 1618 | border-color: var(--drk-border-color); 1619 | } 1620 | 1621 | .control-table td[data-column-type=string] input[type=text] { 1622 | background: var(--drk-bg-color-inset); 1623 | } 1624 | 1625 | .control-table table td, 1626 | .control-table table th { 1627 | color: var(--drk-color); 1628 | } 1629 | 1630 | .control-table td[data-column-type=checkbox] div[data-checkbox-element] { 1631 | background-color: #3c3a3a; 1632 | border-color: var(--drk-border-color); 1633 | } 1634 | 1635 | 1636 | /* eventlogs */ 1637 | .plugin-exception-beautifier .beautifier-message-container { 1638 | background: var(--drk-bg-color-c); 1639 | } 1640 | 1641 | .plugin-exception-beautifier .beautifier-formatted-content, 1642 | .plugin-exception-beautifier .beautifier-raw-content { 1643 | background: var(--drk-bg-color-c); 1644 | } 1645 | 1646 | .plugin-exception-beautifier .beautifier-class { 1647 | color: #7d8f5a; 1648 | } 1649 | 1650 | .plugin-exception-beautifier .beautifier-stacktrace-line:nth-child(odd) { 1651 | background-color: var(--drk-bg-color-b); 1652 | } 1653 | 1654 | .plugin-exception-beautifier .beautifier-stacktrace-line:nth-child(even) { 1655 | background-color: var(--drk-bg-color-a); 1656 | } 1657 | 1658 | .plugin-exception-beautifier .beautifier-stacktrace-line-number { 1659 | color: var(--drk-color); 1660 | } 1661 | 1662 | .plugin-exception-beautifier .beautifier-file { 1663 | color: #03a9f4; 1664 | } 1665 | 1666 | .plugin-exception-beautifier .beautifier-line-number { 1667 | color: red; 1668 | } 1669 | 1670 | /* Import/Export */ 1671 | .import-behavior .import-file-columns, 1672 | .import-behavior .import-db-columns { 1673 | background: var(--drk-bg-color-c); 1674 | } 1675 | 1676 | .import-behavior ul li.dragged, 1677 | .import-behavior .import-file-columns > ul > li, 1678 | .import-behavior .import-db-columns > ul > li { 1679 | background: var(--drk-bg-color-a); 1680 | border-color: var(--drk-border-color); 1681 | } 1682 | 1683 | .field-fileupload.style-file-single .upload-button:hover { 1684 | color: var(--drk-color); 1685 | } 1686 | 1687 | .export-behavior .export-columns { 1688 | background: #010409; 1689 | border: solid 1px var(--drk-border-color); 1690 | } 1691 | 1692 | .import-behavior .import-file-columns > ul div.import-column-name a.column-label { 1693 | color: var(--drk-color); 1694 | } 1695 | 1696 | .import-behavior .import-column-bindings > ul { 1697 | background: var(--drk-bg-color-c); 1698 | } 1699 | 1700 | .import-behavior .import-column-bindings > ul:after { 1701 | border-left-color: var(--drk-bg-color-a); 1702 | } 1703 | 1704 | .import-behavior .import-column-bindings > ul:before { 1705 | color: #8b7964; 1706 | } 1707 | 1708 | .import-behavior .import-column-bindings > ul > li:not(.dragged) { 1709 | background: var(--drk-bg-color-b); 1710 | } 1711 | 1712 | .import-behavior .import-file-columns > ul div.import-column-name a.column-ignore-button { 1713 | background: var(--drk-border-color); 1714 | } 1715 | 1716 | .import-behavior .import-column-bindings > ul > li:hover .column-icon { 1717 | color: var(--drk-color); 1718 | } 1719 | 1720 | /* Winter.Notes */ 1721 | .field-notes .field-notes-list { 1722 | background-color: var(--drk-bg-color-b); 1723 | } 1724 | 1725 | .field-notes .field-notes-form { 1726 | background-color: var(--drk-bg-color-a); 1727 | } 1728 | 1729 | .field-notes .field-notes-list > ul .checked { 1730 | background-color: var(--drk-bg-color-c); 1731 | color: var(--drk-color); 1732 | } 1733 | 1734 | .field-notes .toolbar .btn-icon { 1735 | background: var(--drk-bg-color-btn); 1736 | border-color: var(--drk-border-color); 1737 | } 1738 | 1739 | .field-notes .toolbar .btn-icon:hover { 1740 | background: #0654ca; 1741 | } 1742 | 1743 | .field-notes .toolbar [class*=" oc-icon-"]:before { 1744 | color: var(--drk-color); 1745 | } 1746 | 1747 | .field-notes .field-notes-list > ul > li a { 1748 | color: var(--drk-color); 1749 | } 1750 | 1751 | .field-notes .field-notes-list > ul > li div h4 span { 1752 | color: #777; 1753 | } 1754 | 1755 | .field-notes .field-notes-list > ul > li a h3 { 1756 | font-weight: 600; 1757 | } 1758 | 1759 | .field-notes .field-notes-list > ul > li { 1760 | border-color: var(--drk-border-color); 1761 | } 1762 | 1763 | 1764 | /* Widget Winter.User Statistics */ 1765 | .user-statistics-widget { 1766 | background: #000; 1767 | } 1768 | 1769 | .table-user-statistics { 1770 | margin-top: 20px; 1771 | } 1772 | 1773 | .users-statistics-item-total, 1774 | .users-statistics-item-activated, 1775 | .users-statistics-item-banned { 1776 | background: inherit; 1777 | } 1778 | 1779 | .users-statistics-item-total { 1780 | color: aqua 1781 | } 1782 | 1783 | .users-statistics-item-activated { 1784 | color: greenyellow 1785 | } 1786 | 1787 | .users-statistics-item-banned { 1788 | color: orangered 1789 | } 1790 | 1791 | .table-user-statistics td:not(:first-child) { 1792 | color: cyan 1793 | } 1794 | 1795 | 1796 | /* Winter.Builder */ 1797 | .fancy-layout.control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs > li.active[data-tab-id="welcome"] a > span.title, 1798 | .fancy-layout.control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs > li.active[data-tab-id="welcome"] a > span.title:before, 1799 | .fancy-layout.control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs > li.active[data-tab-id="welcome"] a > span.title:after { 1800 | background: var(--drk-bg-color-a); 1801 | } 1802 | 1803 | #layout-side-panel div.control-toolbar.separator, 1804 | .compact-toolbar div.control-toolbar.separator { 1805 | border-bottom-color: var(--drk-border-color); 1806 | } 1807 | 1808 | #layout-side-panel div.control-toolbar input.form-control, 1809 | .compact-toolbar div.control-toolbar input.form-control { 1810 | -webkit-box-shadow: inset 0 1px 0 var(--drk-border-color); 1811 | box-shadow: inset 0 1px 0 var(--drk-border-color); 1812 | } 1813 | 1814 | #layout-side-panel .sidepanel-content-header { 1815 | background: #184d70; 1816 | color: var(--drk-color); 1817 | } 1818 | 1819 | #layout-side-panel .sidepanel-content-header:after { 1820 | border-top-color: #184d70; 1821 | } 1822 | 1823 | #layout-side-panel.layout-cell.w-350 { 1824 | background: var(--drk-bg-color-c); 1825 | } 1826 | 1827 | .inspector-header { 1828 | background: var(--drk-bg-color-b); 1829 | color: var(--drk-color); 1830 | border-bottom-color: var(--drk-border-color); 1831 | } 1832 | 1833 | .inspector-header h3 { 1834 | font-weight: 600; 1835 | } 1836 | 1837 | .inspector-header span:hover, 1838 | .inspector-header a:hover { 1839 | color: var(--drk-color); 1840 | } 1841 | 1842 | .inspector-header span, 1843 | .inspector-header a { 1844 | color: var(--drk-color); 1845 | } 1846 | 1847 | .inspector-fields { 1848 | background: var(--drk-bg-color-c); 1849 | } 1850 | 1851 | .inspector-fields tr.group th { 1852 | background: var(--drk-bg-color-b); 1853 | } 1854 | 1855 | .inspector-fields th > div a.expandControl span:after { 1856 | color: var(--drk-color); 1857 | } 1858 | 1859 | .inspector-fields td.trigger-cell a.trigger { 1860 | color: #707070; 1861 | } 1862 | 1863 | .inspector-fields .select2-container--default .select2-selection { 1864 | background-color: var(--drk-bg-color-c); 1865 | } 1866 | 1867 | .inspector-fields tr.invalid th { 1868 | color: var(--drk-color-danger) !important; 1869 | } 1870 | 1871 | .fancy-layout .form-tabless-fields a.btn.btn-primary { 1872 | border: none; 1873 | color: var(--drk-color); 1874 | background: transparent; 1875 | } 1876 | 1877 | #builder-master-tabs .control-tabs > div > ul.nav-tabs > li a > span.title > span { 1878 | border-top: 0; 1879 | } 1880 | 1881 | .control-table table.headers:after { 1882 | border-bottom-color: var(--drk-border-color); 1883 | } 1884 | 1885 | 1886 | /* Winter.Docs */ 1887 | #docs-content h1, 1888 | #docs-content h2 { 1889 | border-bottom-color: var(--drk-border-color); 1890 | } 1891 | 1892 | #docs-content table tr { 1893 | background-color: var(--drk-bg-color-b); 1894 | } 1895 | 1896 | #docs-content table tr:nth-child(2n) { 1897 | background-color: var(--drk-bg-color-c); 1898 | } 1899 | 1900 | #docs-content table th, 1901 | #docs-content table td { 1902 | border-color: var(--drk-border-color); 1903 | } 1904 | 1905 | #docs-content blockquote { 1906 | background: var(--drk-bg-color-b); 1907 | border-color: var(--drk-border-color); 1908 | color: var(--drk-color); 1909 | } 1910 | 1911 | #docs-content code { 1912 | display: inline-block; 1913 | padding: 0.2em 0.4em; 1914 | margin: 0; 1915 | font-size: 85%; 1916 | background: rgb(110 118 129 / 40%); 1917 | border-radius: 6px; 1918 | color: #c9d1d9; 1919 | border: 0; 1920 | } 1921 | 1922 | #docs-content pre code { 1923 | background: #2c2f38; 1924 | } 1925 | } 1926 | --------------------------------------------------------------------------------