diff --git a/wire/modules/AdminTheme/AdminThemeUikit/AdminThemeUikit.module b/wire/modules/AdminTheme/AdminThemeUikit/AdminThemeUikit.module
index 10a36ea7..02e32070 100644
--- a/wire/modules/AdminTheme/AdminThemeUikit/AdminThemeUikit.module
+++ b/wire/modules/AdminTheme/AdminThemeUikit/AdminThemeUikit.module
@@ -50,6 +50,7 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
'version' => 36,
'summary' => 'Uikit v3 admin theme',
'autoload' => 'template=admin',
+ 'icon' => 'smile-o',
);
}
diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.php b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.php
index 690fe77e..4bbca13b 100644
--- a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.php
+++ b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.php
@@ -42,15 +42,21 @@ $inputfields->add($f);
$f = $inputfields->InputfieldCheckboxes;
$f->attr('id+name', 'defaultToggles');
$f->label = __('Toggles');
+$f->addOption('useBoldItemHeaders', __('Use bold headers for repeaters, files, images, etc.'));
+$f->addOption('usePageListButtons', __('Use buttons for page-list action links'));
+$f->addOption('useInputFocus',
+ __('Highlight focused inputs') . ' ' .
+ '[span.detail] ' . __('(additional clarity for currently focused input)') . ' [/span]'
+);
$f->addOption('noUserMenu',
__('Disable light/dark/auto setting in user tools menu?') . ' ' .
- '[span.detail] ' . __('(this prevents users from making their own dark/light mode selection)') . ' [/span]'
+ '[span.detail] ' . __('(prevents users from making their own dark/light mode selection)') . ' [/span]'
);
$togcbxAttr = [];
if(!empty($settings['noTogcbx'])) $togcbxAttr = [ 'disabled' => 'disabled' ];
$f->addOption('useTogcbx',
__('Use toggle style checkboxes globally?') . ' ' .
- '[span.detail] ' . __('(use toggle rather than marker style checkboxes)') . ' [/span]',
+ '[span.detail] ' . __('(use toggle rather than checkmark style checkboxes)') . ' [/span]',
$togcbxAttr
);
$f->addOption('use2Colors',
diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/init.php b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/init.php
index f2432691..9ee7f75a 100644
--- a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/init.php
+++ b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/init.php
@@ -2,6 +2,7 @@
/** @var AdminThemeUikit $adminTheme */
/** @var WireInput $input */
+/** @var Modules $modules */
/** @var Config $config */
/** @var Page $page */
/** @var User $user */
@@ -9,6 +10,8 @@
$themeInfo = $adminTheme->getThemeInfo();
$toggles = $adminTheme->defaultToggles;
$settings = $config->AdminThemeUikit;
+$themeUrl = $config->urls('AdminThemeUikit') . 'themes/default/';
+$cssToggles = [ 'useBoldItemHeaders', 'usePageListButtons', 'useInputFocus' ];
$useDarkModeSwitcher =
$user->isLoggedin()
@@ -16,6 +19,14 @@ $useDarkModeSwitcher =
&& empty($settings['noDarkMode'])
&& $user->hasPermission('page-edit');
+foreach($cssToggles as $name) {
+ if(!in_array($name, $toggles)) continue;
+ $config->styles->add($themeUrl . "toggles/$name.css");
+}
+if($modules->isInstalled('InputfieldTable')) {
+ $config->styles->add($themeUrl . "toggles/InputfieldTable.css");
+}
+
/**
* Update TinyMCE to use our custom skin and content_css
*
diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/toggles/InputfieldTable.css b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/toggles/InputfieldTable.css
new file mode 100644
index 00000000..74c0c755
--- /dev/null
+++ b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/toggles/InputfieldTable.css
@@ -0,0 +1,17 @@
+/* make InputfieldTable
have same background color as its container */
+.Inputfield > .InputfieldContent .AdminDataTable tr {
+ background-color: transparent;
+}
+
+/* more specific to InputfieldTable, if needed
+.InputfieldTable .AdminDataTable tr {
+ background-color: transparent;
+}
+*/
+
+.InputfieldTableRowSortHandle:hover,
+.InputfieldTableRowDeleteLink:hover,
+.InputfieldTableActionRow:hover {
+ /* make table action links highlight with main color when hovered */
+ color: var(--main-color);
+}
diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/toggles/useBoldItemHeaders.css b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/toggles/useBoldItemHeaders.css
new file mode 100644
index 00000000..a13861b5
--- /dev/null
+++ b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/toggles/useBoldItemHeaders.css
@@ -0,0 +1,71 @@
+/*** AsmSelect, PageAutocomplete, PageListSelect, accordions ***************/
+
+.pw .Inputfields .InputfieldPageAutocomplete li,
+.pw .Inputfields .InputfieldPageAutocomplete li a,
+.pw .Inputfields .InputfieldPageListSelectMultiple ol li,
+.pw .Inputfields .InputfieldAsmSelect .asmListItem,
+.pw .Inputfields .InputfieldAsmSelect .asmListItem.ui-state-default,
+.pw .Inputfields .InputfieldAsmSelect .asmListItem.ui-state-hover {
+ /* make asmSelect/autocomplete/pageListSelect use the main-color */
+ --main-background: var(--main-color);
+ --border-color: var(--main-color);
+ --text-color: rgba(255,255,255,0.9);
+ background-color: var(--main-background);
+ margin-top: 0;
+ margin-bottom: 1px !important;
+}
+
+.pw .Inputfields .InputfieldPageAutocomplete li:hover,
+.pw .Inputfields .InputfieldPageAutocomplete li:hover a,
+.pw .Inputfields .InputfieldPageListSelectMultiple ol li:hover,
+.pw .Inputfields .InputfieldAsmSelect .asmListItem.ui-state-hover {
+ /* highlight hovered items */
+ filter: brightness(1.05);
+ filter: brightness(0.95);
+ border-color: var(--main-color);
+}
+
+.pw .ui-accordion-header {
+ /* accordion items like the debug mode tools */
+ --inputs-background: var(--main-color);
+ --blocks-background: var(--main-color);
+ --text-color: #fff;
+ border: 0;
+ margin-top: 3px !important;
+}
+
+.pw .ui-accordion-header:hover,
+.pw .ui-accordion-header.ui-state-hover {
+ --inputs-background: var(--main-color);
+ --main-background: var(--main-color);
+ filter: brightness(1.05);
+}
+.ui-accordion.ui-widget .ui-accordion-content {
+ padding: 20px;
+}
+
+.asmListItemStatus .columnWidth {
+ /* percent width indicator in AsmSelect field lists */
+ color: rgba(255,255,255,0.65);
+}
+
+/*** Repeaters *********************************************************/
+
+.pw .Inputfields .InputfieldRepeater .InputfieldContent .InputfieldRepeaterItem > .InputfieldHeader,
+.pw .InputfieldFileList > li > .InputfieldItemHeader {
+ /* make InputfieldRepeater item headers use the main color */
+ --inputs-background: var(--main-color);
+ --border-color: var(--main-color);
+ --text-color: rgba(255,255,255,0.9);
+ --muted-color: rgba(255,255,255,0.8);
+}
+
+.InputfieldRepeaterItem > .InputfieldHeader:hover {
+ /* make hovered repeater header slightly highlighted */
+ filter: brightness(1.05);
+}
+
+.pw .Inputfields .InputfieldRepeater .InputfieldContent .InputfieldRepeaterItem {
+ /* large margin not needed when using bolder headers */
+ margin-bottom: 2px;
+}
diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/toggles/useInputFocus.css b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/toggles/useInputFocus.css
new file mode 100644
index 00000000..5a5a4970
--- /dev/null
+++ b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/toggles/useInputFocus.css
@@ -0,0 +1,36 @@
+.Inputfields input:focus:not([type="submit"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not(.uk-form-blank),
+.Inputfields textarea:focus,
+.pw .Inputfields .Inputfield select.uk-select:focus,
+select.uk-select:focus {
+ /* have inputs show a focused state */
+ /*border-color: var(--muted-color) !important;*/
+ background-color: var(--blocks-background) !important;
+}
+
+.InputfieldForm .Inputfields .Inputfield select.uk-select {
+ /* make