From 95cca5ad62bd0c21dcab300eb2b9e658d3e20b01 Mon Sep 17 00:00:00 2001 From: Ryan Cramer Date: Fri, 18 Jul 2025 16:28:44 -0400 Subject: [PATCH] Add new AdminThemeUikit CSS toggles for bolder repeater item headers, input focused states, and page list buttons --- .../AdminThemeUikit/AdminThemeUikit.module | 1 + .../AdminThemeUikit/themes/default/config.php | 10 ++- .../AdminThemeUikit/themes/default/init.php | 11 +++ .../default/toggles/InputfieldTable.css | 17 +++++ .../default/toggles/useBoldItemHeaders.css | 71 +++++++++++++++++++ .../themes/default/toggles/useInputFocus.css | 36 ++++++++++ .../default/toggles/usePageListButtons.css | 38 ++++++++++ 7 files changed, 182 insertions(+), 2 deletions(-) create mode 100644 wire/modules/AdminTheme/AdminThemeUikit/themes/default/toggles/InputfieldTable.css create mode 100644 wire/modules/AdminTheme/AdminThemeUikit/themes/default/toggles/useBoldItemHeaders.css create mode 100644 wire/modules/AdminTheme/AdminThemeUikit/themes/default/toggles/useInputFocus.css create mode 100644 wire/modules/AdminTheme/AdminThemeUikit/themes/default/toggles/usePageListButtons.css 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