mirror/processwire
1
0
Fork 0
mirror of https://github.com/processwire/processwire.git synced 2025-08-12 17:54:44 +02:00
Code Issues Releases Wiki Activity

Update AdminThemeUikit Konkat default theme to use --pw- namespaced CSS variables.

Browse Source 
Co-authored-by: ocorreiododiogo <ocorreiododiogo@gmail.com>
Co-authored-by: jploch <jploch@users.noreply.github.com>
This commit is contained in:
Ryan Cramer
2025-07-23 15:22:16 -04:00
parent 7d5ad4b277
commit 8b39c92b31
21 changed files with 3721 additions and 3684 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
wire/modules/AdminTheme/AdminThemeUikit/AdminThemeUikit.module
View File

@@ -141,7 +141,7 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
'defaultMainColor' => 'red', 'defaultMainColor' => 'red',
'defaultMainColorCustom' => '#eb1d61', 'defaultMainColorCustom' => '#eb1d61',
'defaultMainColorCustomDark' => '', 'defaultMainColorCustomDark' => '',
'defaultToggles' => [], 'defaultToggles' => [ 'useInputFocus' ],
'defaultCustomCss' => '', 'defaultCustomCss' => '',
'defaultCustomCssFile' => '', 'defaultCustomCssFile' => '',
]); ]);
@@ -1326,30 +1326,39 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
$themeInfos = $this->themeInfos; $themeInfos = $this->themeInfos;
if(isset($themeInfos['z'])) { if(empty($themeInfos) || isset($themeInfos['z'])) {
// wakeup $session = $this->wire()->session;
$config = $this->wire()->config; $themeInfos = $session->getFor($this, 'themeInfos');
$thisPath = $config->paths($this); if(empty($themeInfos)) {
$themesPath = $thisPath . 'themes/'; // wakeup
$rootLen = strlen($config->paths->root); $config = $this->wire()->config;
if(is_dir($themesPath)) { $thisPath = $config->paths($this);
foreach(new \DirectoryIterator($themesPath) as $file) { $themesPath = $thisPath . 'themes/';
if(!$file->isDir() || $file->isDot()) continue; $rootLen = strlen($config->paths->root);
$basename = $file->getBasename(); if(is_dir($themesPath)) {
if(strpos($basename, '.') === 0) continue; foreach(new \DirectoryIterator($themesPath) as $file) {
$themePath = $thisPath . "themes/$basename/"; if(!$file->isDir() || $file->isDot()) continue;
$themeUrl = $config->urls->root . substr($themePath, $rootLen); $basename = $file->getBasename();
$themeInfos[$basename] = [ if(strpos($basename, '.') === 0) continue;
'name' => $basename, $themePath = $thisPath . "themes/$basename/";
'path' => $themePath, $themeUrl = $config->urls->root . substr($themePath, $rootLen);
'url' => $themeUrl $themeInfo = ['name' => $basename, 'path' => $themePath, 'url' => $themeUrl];
]; $infoFile = $themePath . 'info.php';
if(is_file($infoFile)) {
$a = include($infoFile);
$themeInfo = array_merge($a, $themeInfo);
}
$themeInfos[$basename] = $themeInfo;
}
} }
unset($themeInfos['z']);
$this->themeInfos = $themeInfos;
$session->setFor($this, 'themeInfos', $themeInfos);
} }
unset($themeInfos['z']);
$this->themeInfos = $themeInfos;
} }
if($themeName === 'all') return $themeInfos;
return $themeName && isset($themeInfos[$themeName]) ? $themeInfos[$themeName] : []; return $themeName && isset($themeInfos[$themeName]) ? $themeInfos[$themeName] : [];
} }

16
wire/modules/AdminTheme/AdminThemeUikit/config.php
View File

@@ -44,24 +44,24 @@ class AdminThemeUikitConfigHelper extends Wire {
$layout = $adminTheme->layout; $layout = $adminTheme->layout;
$userTemplateURL = $config->urls->admin . 'setup/template/edit?id=3'; $userTemplateURL = $config->urls->admin . 'setup/template/edit?id=3';
$adminTheme->getThemeInfo(); // init $themeInfos = $adminTheme->getThemeInfo('all'); // init
$themeInfos = $adminTheme->themeInfos;
if(count($themeInfos)) { if(count($themeInfos)) {
$configFiles = []; $configFiles = [];
$f = $inputfields->InputfieldRadios; $f = $inputfields->InputfieldRadios;
$f->attr('id+name', 'themeName'); $f->attr('id+name', 'themeName');
$f->label = $this->_('Theme name'); $f->label = $this->_('Uikit style theme');
$f->notes = $f->notes =
$this->_('After changing the theme, please submit/save before configuring it.') . ' ' . $this->_('After changing the style theme, please submit/save before configuring it.') . ' ' .
$this->_('When using `admin.less` customization, you should use the “Original” theme.'); $this->_('When using `admin.less` customization, the “Core original” style is required.');
$f->icon = 'photo'; $f->icon = 'photo';
foreach($themeInfos as $name => $info) { foreach($themeInfos as $name => $info) {
$f->addOption($name, ucfirst($name), [ 'data-url' => $info['url'] ]); $label = (isset($info['title']) ? $info['title'] : ucfirst($name));
$f->addOption($name, $label, [ 'data-url' => $info['url'] ]);
$configFile = $info['path'] . 'config.php'; $configFile = $info['path'] . 'config.php';
if(is_file($configFile)) $configFiles[$name] = $configFile; if(is_file($configFile)) $configFiles[$name] = $configFile;
} }
$f->addOption('', $this->_('Original')); $f->addOption('', $this->_('Core original'));
$value = $adminTheme->themeName; $value = $adminTheme->themeName;
$f->val($value); $f->val($value);
$f->themeOffset = 1; $f->themeOffset = 1;
@@ -72,7 +72,7 @@ class AdminThemeUikitConfigHelper extends Wire {
$inputfields->add($fs); $inputfields->add($fs);
$fs->themeOffset = 1; $fs->themeOffset = 1;
$fs->attr('name', "_theme_$name"); $fs->attr('name', "_theme_$name");
$fs->label = $this->_('Theme style settings:') . ' ' . $name; $fs->label = $themeInfos[$name]['title'] . ' ' . $this->_('theme settings');
$fs->showIf = "themeName=$name"; $fs->showIf = "themeName=$name";
$this->wire()->files->render($configFile, [ 'inputfields' => $fs ]); $this->wire()->files->render($configFile, [ 'inputfields' => $fs ]);
} }

154
wire/modules/AdminTheme/AdminThemeUikit/themes/default/admin-custom.css
View File

@@ -39,53 +39,53 @@
:root { :root {
color-scheme: light dark; color-scheme: light dark;
--main-color: #eb1d61; --pw-main-color: #eb1d61;
--text-color: light-dark(#111, white); --pw-text-color: light-dark(#111, white);
--muted-color: light-dark(rgba(0, 0, 0, 0.55), rgba(255, 255, 255, 0.6)); --pw-muted-color: light-dark(rgba(0, 0, 0, 0.55), rgba(255, 255, 255, 0.6));
--border-color: light-dark(rgba(0, 0, 0, 0.16), #444); --pw-border-color: light-dark(rgba(0, 0, 0, 0.16), #444);
--main-background:light-dark(#eee, #222); --pw-main-background:light-dark(#eee, #222);
--inputs-background:light-dark(#f8f8f8, #161616); --pw-inputs-background:light-dark(#f8f8f8, #161616);
--blocks-background: light-dark(white, black); --pw-blocks-background: light-dark(white, black);
--button-background: light-dark(var(--text-color), var(--main-color)); --pw-button-background: light-dark(var(--pw-text-color), var(--pw-main-color));
--button-color: light-dark(var(--blocks-background), var(--text-color)); --pw-button-color: light-dark(var(--pw-blocks-background), var(--pw-text-color));
--button-border: transparent; --pw-button-border: transparent;
--button-muted-background: light-dark(#737373, #404040); --pw-button-muted-background: light-dark(#737373, #404040);
--button-muted-color: light-dark(var(--blocks-background), var(--text-color));; --pw-button-muted-color: light-dark(var(--pw-blocks-background), var(--pw-text-color));;
--button-muted-border: transparent; --pw-button-muted-border: transparent;
--button-hover-background: light-dark(var(--main-color), var(--text-color)); --pw-button-hover-background: light-dark(var(--pw-main-color), var(--pw-text-color));
--button-hover-color: var(--blocks-background); --pw-button-hover-color: var(--pw-blocks-background);
--button-hover-border: transparent; --pw-button-hover-border: transparent;
--menu-item-background-hover: var(--main-background); --pw-menu-item-background-hover: var(--pw-main-background);
--masthead-background: var(--blocks-background); --pw-masthead-background: var(--pw-blocks-background);
--masthead-active-color: var(--text-color); --pw-masthead-active-color: var(--pw-text-color);
--masthead-text-color: var(--muted-color); --pw-masthead-text-color: var(--pw-muted-color);
--masthead-border-color: var(--border-color); --pw-masthead-border-color: var(--pw-border-color);
--masthead-logo-color: var(--main-color); --pw-masthead-logo-color: var(--pw-main-color);
--masthead-menu-item-background-hover: var(--menu-item-background-hover); --pw-masthead-menu-item-background-hover: var(--pw-menu-item-background-hover);
--masthead-input-background: var(--inputs-background); --pw-masthead-input-background: var(--pw-inputs-background);
--masthead-input-color: var(--text-color); --pw-masthead-input-color: var(--pw-text-color);
--masthead-input-border: var(--border-color); --pw-masthead-input-border: var(--pw-border-color);
--modal-color: rgba(0,0,0,0.7); --pw-modal-color: rgba(0,0,0,0.7);
--alert-text-color: var(--text-color); --pw-error-inline-text-color: light-dark(#cd0a0a, #ff7171);
--alert-primary: var(--main-background);
--alert-warning: light-dark(#fff0be, #d57f00);
--alert-success: light-dark(#c1e7cd, #139472);
--alert-danger: light-dark(#fee6e6, #8a1919);
--notes-background: light-dark(#ffd, #bdbdbd33);
--error-inline-text-color: light-dark(#cd0a0a, #ff1d1d); --pw-code-color: light-dark(#0173b0, #e7e695);
--pw-code-background: light-dark(var(--pw-inputs-background), #3c3c3c5e);
--code-color: light-dark(#0173b0, #e7e695); --pw-alert-text-color: var(--pw-text-color);
--code-background: light-dark(var(--inputs-background), #3c3c3c5e); --pw-alert-primary: var(--pw-main-background);
--pw-alert-warning: light-dark(#fff0be, #d57f00);
--pw-alert-success: light-dark(#c1e7cd, #139472);
--pw-alert-danger: light-dark(#fee6e6, #8a1919);
--pw-notes-background: light-dark(#ffd, #bdbdbd33);
--button-radius: 99999px; --pw-button-radius: 99999px;
--input-radius: 0; --pw-input-radius: 0;
} }
@@ -129,15 +129,15 @@ body.main-color-blue {
/* ----------------------------------------------------------------- */ /* ----------------------------------------------------------------- */
/* /*
:root { :root {
--masthead-background: var(--main-color); --pw-masthead-background: var(--pw-main-color);
--masthead-active-color: white; --pw-masthead-active-color: white;
--masthead-text-color: rgba(255,255,255,0.8); --pw-masthead-text-color: rgba(255,255,255,0.8);
--masthead-border-color: var(--main-background); --pw-masthead-border-color: var(--pw-main-background);
--masthead-logo-color: white; --pw-masthead-logo-color: white;
--masthead-input-background: var(--masthead-background); --pw-masthead-input-background: var(--pw-masthead-background);
--masthead-input-color: var(--masthead-active-color); --pw-masthead-input-color: var(--pw-masthead-active-color);
--masthead-input-border: var(--masthead-text-color); --pw-masthead-input-border: var(--pw-masthead-text-color);
--masthead-menu-item-background-hover: rgba(255,255,255,.2); --pw-masthead-menu-item-background-hover: rgba(255,255,255,.2);
} }
/* -------------------------------------------------------------------- */ /* -------------------------------------------------------------------- */
@@ -145,8 +145,8 @@ body.main-color-blue {
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
/* /*
:root { :root {
--border-color: var(--main-background); --pw-border-color: var(--pw-main-background);
--inputs-background: var(--blocks-background); --pw-inputs-background: var(--pw-blocks-background);
} }
/* -------------------------------------------------------------------- */ /* -------------------------------------------------------------------- */
@@ -154,35 +154,35 @@ body.main-color-blue {
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
/* /*
:root { :root {
--text-color: light-dark(blue, white); --pw-text-color: light-dark(blue, white);
--main-color: var(--text-color); --pw-main-color: var(--pw-text-color);
--main-background:light-dark(white, #222); --pw-main-background:light-dark(white, #222);
--border-color: light-dark(var(--text-color), var(--text-color)); --pw-border-color: light-dark(var(--pw-text-color), var(--pw-text-color));
--text-background: var(--main-background); --pw-text-background: var(--pw-main-background);
--inputs-background: var(--text-background); --pw-inputs-background: var(--pw-text-background);
--blocks-background: var(--text-background); --pw-blocks-background: var(--pw-text-background);
--muted-color: light-dark(#7c8efd, #8b8b8b); --pw-muted-color: light-dark(#7c8efd, #8b8b8b);
--button-background: var(--text-background); --pw-button-background: var(--pw-text-background);
--button-color: light-dark(var(--text-color), var(--text-color)); --pw-button-color: light-dark(var(--pw-text-color), var(--pw-text-color));
--button-muted-color: var(--muted-color); --pw-button-muted-color: var(--pw-muted-color);
--button-border: var(--button-color); --pw-button-border: var(--pw-button-color);
--button-muted-background: var(--button-background); --pw-button-muted-background: var(--pw-button-background);
--button-muted-border: var(--button-muted-color); --pw-button-muted-border: var(--pw-button-muted-color);
--button-hover-background: var(--button-color); --pw-button-hover-background: var(--pw-button-color);
--button-hover-color: var(--button-background); --pw-button-hover-color: var(--pw-button-background);
--button-hover-border: var(--button-color); --pw-button-hover-border: var(--pw-button-color);
--masthead-background: var(--text-background); --pw-masthead-background: var(--pw-text-background);
--masthead-active-color: light-dark(var(--text-color), var(--text-color)); --pw-masthead-active-color: light-dark(var(--pw-text-color), var(--pw-text-color));
--masthead-text-color: var(--masthead-active-color); --pw-masthead-text-color: var(--pw-masthead-active-color);
--masthead-border-color: var(--masthead-active-color); --pw-masthead-border-color: var(--pw-masthead-active-color);
--masthead-logo-color: var(--masthead-active-color); --pw-masthead-logo-color: var(--pw-masthead-active-color);
--alert-text-color: var(--text-color); --pw-alert-text-color: var(--pw-text-color);
--alert-primary: light-dark(#ffd, var(--text-background)); --pw-alert-primary: light-dark(#ffd, var(--pw-text-background));
--alert-warning: light-dark(#fcda6d, #d57f00); --pw-alert-warning: light-dark(#fcda6d, #d57f00);
--alert-success: light-dark(#97ecb2, #139472); --pw-alert-success: light-dark(#97ecb2, #139472);
--alert-danger: light-dark(#ec9797, #8a1919); --pw-alert-danger: light-dark(#ec9797, #8a1919);
--notes-background: light-dark(#ffd, #bdbdbd33); --pw-notes-background: light-dark(#ffd, #bdbdbd33);
} }

1887
wire/modules/AdminTheme/AdminThemeUikit/themes/default/admin.css
View File

File diff suppressed because one or more lines are too long

2
wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.js
View File

@@ -60,7 +60,7 @@ $(document).ready(function() {
"<style type='text/css' id='main-color-custom'>" + "<style type='text/css' id='main-color-custom'>" +
":root { " + ":root { " +
".main-color-custom { " + ".main-color-custom { " +
"--main-color: " + value + "; " + "--pw-main-color: " + value + "; " +
"} " + "} " +
"} " + "} " +
"</style>"); "</style>");

1
wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.min.js vendored Normal file
View File

@@ -0,0 +1 @@
$(document).ready(function(){var colorClasses="main-color-red main-color-blue main-color-green main-color-custom";var styleClasses="light-theme dark-theme";var $body=$("body");function getCurrentStyleName(){if($body.hasClass("dark-theme"))return"dark";if($body.hasClass("light-theme"))return"light";var bgcolor=$("#pw-mastheads").css("background-color");bgcolor=bgcolor.replace(/[^0-9]/g,"").substring(0,3);$body.removeClass("auto-theme");var styleName=bgcolor==="000"?"dark":"light";$body.addClass(styleName+"-theme");return styleName}function getMainColor(){var $wrap=$("#wrap_defaultMainColor");var $f=$wrap.find("input:checked");if($f.val()==="custom"){if($("body").hasClass("dark-theme")){return $("#defaultMainColorCustomDark").val()}else{return $("#defaultMainColorCustom").val()}}return $f.closest("label").find(".defaultMainColorLabel").css("background-color")}function setMainColor(value){if(typeof value==="undefined")value=getMainColor();console.log("setMainColor",value);$("#main-color-custom").remove();$(".pw-logo-native").css("color",value);var styleName=getCurrentStyleName();setButtonColor(styleName==="dark"?value:"black");$("head").append("<style type='text/css' id='main-color-custom'>"+":root { "+".main-color-custom { "+"--pw-main-color: "+value+"; "+"} "+"} "+"</style>")}function updateToggles(){var $use2Colors=$("#defaultToggles_use2Colors");var hidden=!$("#defaultMainColor_custom").prop("checked");$use2Colors.parent("label").prop("hidden",hidden);if($("#defaultToggles_useTogcbx").prop("checked")){$("body").addClass("pw-togcbx")}else{$("body").removeClass("pw-togcbx")}}function setButtonColor(value){$(".ui-button").css("background-color",value)}$("#wrap_defaultStyleName").on("input","input",function(){var styleName=$(this).val();$body.removeClass(styleClasses).addClass(styleName+"-theme");var color=getMainColor();setMainColor(color);setButtonColor(styleName==="light"?"black":color)});$("#wrap_defaultMainColor").on("input","input",function(){var value="main-color-"+$(this).val();var color;if(value==="main-color-custom"){if($("#defaultToggles_use2Colors").prop("checked")){color=$("body").hasClass("dark-theme")?$("#defaultMainColorCustomDark").val():$("#defaultMainColorCustom").val()}else{color=$("#defaultMainColorCustom").val()}}else{color=$(this).closest("label").find(".defaultMainColorLabel").css("background")}$body.removeClass(colorClasses).addClass(value);setMainColor(color);updateToggles()});$("#defaultMainColorCustom, #defaultMainColorCustomDark").on("input",function(){var value=$(this).val();$body.removeClass(colorClasses).addClass("main-color-custom");if($(this).attr("id")==="defaultMainColorCustomDark"){if($("body").hasClass("dark-theme"))setMainColor(value)}else{if($("body").hasClass("light-theme")){setMainColor(value)}else if(!$("#defaultToggles_use2Colors").prop("checked")){setMainColor(value)}}});$(".ui-button").on("mouseover",function(){var color=getCurrentStyleName()==="dark"?"white":getMainColor();$(this).css("background-color",color)}).on("mouseout",function(){var color=getCurrentStyleName()==="dark"?getMainColor():"black";$(this).css("background-color",color)});$("#defaultToggles_use2Colors").on("change",function(){if($(this).prop("checked")){$("#defaultMainColorCustomDark").trigger("input")}else{$("#defaultMainColorCustom").trigger("input")}});$("#defaultToggles_useTogcbx").on("change",updateToggles);updateToggles()});

5
wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.php
View File

@@ -11,13 +11,12 @@ if($adminTheme->themeName === 'default') {
$adminTheme->wire()->config->scripts->add($adminTheme->url() . 'themes/default/config.js'); $adminTheme->wire()->config->scripts->add($adminTheme->url() . 'themes/default/config.js');
} }
$inputfields->label = __('Default theme settings'); $inputfields->description = __('Created by Diogo Oliveira and Jan Ploch at [KONKAT Studio](https://konkat.studio/).');
$inputfields->description = __('This default theme is created by Diogo Oliveira and Jan Ploch at [KONKAT Studio](https://konkat.studio/).');
$inputfields->icon = 'sliders'; $inputfields->icon = 'sliders';
$f = $inputfields->InputfieldRadios; $f = $inputfields->InputfieldRadios;
$f->attr('id+name', 'defaultStyleName'); $f->attr('id+name', 'defaultStyleName');
$f->label = __('Would you like to default to light or dark mode?'); $f->label = __('Would you like a default of light or dark mode?');
$darkAttr = []; $darkAttr = [];
$value = $adminTheme->get('defaultStyleName'); $value = $adminTheme->get('defaultStyleName');
if(empty($value)) $value = 'auto'; if(empty($value)) $value = 'auto';

250
wire/modules/AdminTheme/AdminThemeUikit/themes/default/content.css
View File

@@ -1,27 +1,27 @@
@import url("./admin-custom.css"); @import url("./admin-custom.css");
.mce-content-body { .mce-content-body {
font-family: "Inter", system-ui, sans-serif; font-family: "Inter", system-ui, sans-serif;
line-height: 1.5; line-height: 1.5;
margin: 1rem; margin: 1rem;
font-size: 16px; font-size: 16px;
color: var(--text-color, #333); color: var(--pw-text-color, #333);
/*background: var(--inputs-background, #f8f8f8);*/ /*background: var(--pw-inputs-background, #f8f8f8);*/
background: transparent; background: transparent;
} }
a { a {
text-underline-offset: 0.125em; text-underline-offset: 0.125em;
} }
.mce-content-body small { .mce-content-body small {
font-size: 14px; font-size: 14px;
} }
.mce-content-body strong, .mce-content-body strong,
.mce-content-body strong em, .mce-content-body strong em,
.mce-content-body em strong { .mce-content-body em strong {
font-weight: bold; font-weight: bold;
} }
.mce-content-body em { .mce-content-body em {
font-style: italic; font-style: italic;
} }
.mce-content-body h1, .mce-content-body h1,
.mce-content-body h2, .mce-content-body h2,
@@ -29,135 +29,135 @@ a {
.mce-content-body h4, .mce-content-body h4,
.mce-content-body h5, .mce-content-body h5,
.mce-content-body h6 { .mce-content-body h6 {
color: var(--text-color, #222); color: var(--pw-text-color, #222);
font-weight: bold; font-weight: bold;
line-height: 1.2em; line-height: 1.2em;
text-transform: none; text-transform: none;
margin: 1rem 0; margin: 1rem 0;
} }
.mce-content-body h1 { .mce-content-body h1 {
font-size: 2rem; font-size: 2rem;
} }
.mce-content-body h2 { .mce-content-body h2 {
font-size: 1.7rem; font-size: 1.7rem;
} }
.mce-content-body h3 { .mce-content-body h3 {
font-size: 1.5rem; font-size: 1.5rem;
} }
.mce-content-body h4 { .mce-content-body h4 {
font-size: 1.3rem; font-size: 1.3rem;
} }
.mce-content-body h5 { .mce-content-body h5 {
font-size: 1.2rem; font-size: 1.2rem;
} }
.mce-content-body h6 { .mce-content-body h6 {
font-size: 1.1rem; font-size: 1.1rem;
} }
.mce-content-body hr { .mce-content-body hr {
border-style: solid; border-style: solid;
border-width: 1px 0 0 0; border-width: 1px 0 0 0;
} }
.mce-content-body code { .mce-content-body code {
border-radius: 3px; border-radius: 3px;
padding: 0.1rem 0.2rem; padding: 0.1rem 0.2rem;
/* background-color: var(--muted-color, #f5f2f0); */ /* background-color: var(--pw-muted-color, #f5f2f0); */
color: var(--text-color, #222); color: var(--pw-text-color, #222);
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
} }
.mce-content-body a { .mce-content-body a {
color: var(--main-color, #0782c1); color: var(--pw-main-color, #0782c1);
text-decoration: underline; text-decoration: underline;
} }
.mce-content-body table:not([cellpadding]) td, .mce-content-body table:not([cellpadding]) td,
.mce-content-body table:not([cellpadding]) th { .mce-content-body table:not([cellpadding]) th {
padding: 0.4rem; padding: 0.4rem;
} }
.mce-content-body .mce-content-body
table[border]:not([border="0"]):not([style*="border-width"]) table[border]:not([border="0"]):not([style*="border-width"])
td, td,
.mce-content-body .mce-content-body
table[border]:not([border="0"]):not([style*="border-width"]) table[border]:not([border="0"]):not([style*="border-width"])
th { th {
border-width: 1px; border-width: 1px;
} }
.mce-content-body .mce-content-body
table[border]:not([border="0"]):not([style*="border-style"]) table[border]:not([border="0"]):not([style*="border-style"])
td, td,
.mce-content-body .mce-content-body
table[border]:not([border="0"]):not([style*="border-style"]) table[border]:not([border="0"]):not([style*="border-style"])
th { th {
border-style: solid; border-style: solid;
} }
.mce-content-body .mce-content-body
table[border]:not([border="0"]):not([style*="border-color"]) table[border]:not([border="0"]):not([style*="border-color"])
td, td,
.mce-content-body .mce-content-body
table[border]:not([border="0"]):not([style*="border-color"]) table[border]:not([border="0"]):not([style*="border-color"])
th { th {
border-color: var(--border-color, #ccc); border-color: var(--pw-border-color, #ccc);
} }
.mce-content-body span[lang] { .mce-content-body span[lang] {
font-style: italic; font-style: italic;
} }
.mce-content-body table { .mce-content-body table {
border-collapse: collapse; border-collapse: collapse;
} }
.mce-content-body blockquote { .mce-content-body blockquote {
color: var(--text-color, #333); color: var(--pw-text-color, #333);
border-color: var(--border-color, #ccc); border-color: var(--pw-border-color, #ccc);
font-style: italic; font-style: italic;
font-family: Georgia, Times, "Times New Roman", serif; font-family: Georgia, Times, "Times New Roman", serif;
margin: 0; margin: 0;
padding: 0 1rem; padding: 0 1rem;
} }
.mce-content-body:not([dir="rtl"]) blockquote { .mce-content-body:not([dir="rtl"]) blockquote {
border-left: 1px solid; border-left: 1px solid;
margin-left: 1.5rem; margin-left: 1.5rem;
padding-left: 1rem; padding-left: 1rem;
} }
.mce-content-body[dir="rtl"] blockquote { .mce-content-body[dir="rtl"] blockquote {
border-right: 2px solid; border-right: 2px solid;
margin-right: 1.5rem; margin-right: 1.5rem;
padding-right: 1rem; padding-right: 1rem;
} }
.mce-content-body figure { .mce-content-body figure {
display: table; display: table;
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.mce-content-body figure:first-child { .mce-content-body figure:first-child {
margin-top: 0; margin-top: 0;
} }
.mce-content-body figure figcaption { .mce-content-body figure figcaption {
margin-top: 5px; margin-top: 5px;
display: table-caption; display: table-caption;
caption-side: bottom; caption-side: bottom;
line-height: 1.3em; line-height: 1.3em;
font-size: 14px; font-size: 14px;
color: #999; color: #999;
color: var(--muted-text, #999); color: var(--pw-muted-text, #999);
} }
.mce-content-body .align_right, .mce-content-body .align_right,
.mce-content-body .align-right, .mce-content-body .align-right,
.mce-content-body .right { .mce-content-body .right {
text-align: right; text-align: right;
float: none; float: none;
} }
.mce-content-body .align_left, .mce-content-body .align_left,
.mce-content-body .align-left, .mce-content-body .align-left,
.mce-content-body .left { .mce-content-body .left {
text-align: left; text-align: left;
float: none; float: none;
} }
.mce-content-body .align_center, .mce-content-body .align_center,
.mce-content-body .align-center, .mce-content-body .align-center,
.mce-content-body .center { .mce-content-body .center {
text-align: center; text-align: center;
} }
.mce-content-body .align_full, .mce-content-body .align_full,
.mce-content-body .align-full, .mce-content-body .align-full,
.mce-content-body .full { .mce-content-body .full {
text-align: justify; text-align: justify;
} }
.mce-content-body img.align_right, .mce-content-body img.align_right,
.mce-content-body img.align-right, .mce-content-body img.align-right,
@@ -168,11 +168,11 @@ a {
.mce-content-body table.align_right, .mce-content-body table.align_right,
.mce-content-body table.align-right, .mce-content-body table.align-right,
.mce-content-body table.right { .mce-content-body table.right {
text-align: initial; text-align: initial;
float: right; float: right;
margin-left: 1rem; margin-left: 1rem;
margin-right: 0; margin-right: 0;
margin-top: 0; margin-top: 0;
} }
.mce-content-body img.align_left, .mce-content-body img.align_left,
.mce-content-body img.align-left, .mce-content-body img.align-left,
@@ -183,11 +183,11 @@ a {
.mce-content-body table.align_left, .mce-content-body table.align_left,
.mce-content-body table.align-left, .mce-content-body table.align-left,
.mce-content-body table.left { .mce-content-body table.left {
text-align: initial; text-align: initial;
float: left; float: left;
margin-top: 0; margin-top: 0;
margin-left: 0; margin-left: 0;
margin-right: 1rem; margin-right: 1rem;
} }
.mce-content-body img.align_center, .mce-content-body img.align_center,
.mce-content-body img.align-center, .mce-content-body img.align-center,
@@ -198,10 +198,10 @@ a {
.mce-content-body table.align_center, .mce-content-body table.align_center,
.mce-content-body table.align-center, .mce-content-body table.align-center,
.mce-content-body table.center { .mce-content-body table.center {
text-align: initial; text-align: initial;
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.mce-content-body img.align_full, .mce-content-body img.align_full,
.mce-content-body img.align-full, .mce-content-body img.align-full,
@@ -212,54 +212,54 @@ a {
.mce-content-body table.align_full, .mce-content-body table.align_full,
.mce-content-body table.align-full, .mce-content-body table.align-full,
.mce-content-body table.full { .mce-content-body table.full {
text-align: initial; text-align: initial;
width: 100%; width: 100%;
} }
.mce-content-body img { .mce-content-body img {
max-width: 100%; max-width: 100%;
} }
.mce-content-body img.align_center, .mce-content-body img.align_center,
.mce-content-body img.align-center, .mce-content-body img.align-center,
.mce-content-body img.center { .mce-content-body img.center {
display: block; display: block;
} }
.mce-content-body img:hover { .mce-content-body img:hover {
opacity: 0.9; opacity: 0.9;
filter: alpha(opacity=90); filter: alpha(opacity=90);
} }
a > .mce-content-body img { a > .mce-content-body img {
padding: 1px; padding: 1px;
margin: 1px; margin: 1px;
border: none; border: none;
outline: 1px solid var(--main-color, #0782c1); outline: 1px solid var(--pw-main-color, #0782c1);
} }
.mce-content-body pre { .mce-content-body pre {
/*border: 1px dashed var(--border-color, #ccc);*/ /*border: 1px dashed var(--pw-border-color, #ccc);*/
/*padding: 0.5rem 1rem !important;*/ /*padding: 0.5rem 1rem !important;*/
border: 0; border: 0;
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
-moz-tab-size: 4; -moz-tab-size: 4;
-o-tab-size: 4; -o-tab-size: 4;
-webkit-tab-size: 4; -webkit-tab-size: 4;
tab-size: 4; tab-size: 4;
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
font-size: 15px; font-size: 15px;
color: light-dark(#333, #fff); color: light-dark(#333, #fff);
background: light-dark(#eee, #333); background: light-dark(#eee, #333);
font-size: 0.9375rem; font-size: 0.9375rem;
margin: 0.5em 0; margin: 0.5em 0;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: 4px; border-radius: 4px;
} }
.mce-content-body code { .mce-content-body code {
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
font-size: 15px; font-size: 15px;
color: light-dark(#333, #fff); color: light-dark(#333, #fff);
background-color: light-dark(#eee, #333); background-color: light-dark(#eee, #333);
} }
.mce-content-body pre code { .mce-content-body pre code {
background-color: initial; background-color: initial;
} }
/* /*
@@ -269,6 +269,6 @@ a > .mce-content-body img {
background: #f5f2f0; background: #f5f2f0;
margin: 0.5em 0; margin: 0.5em 0;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
color: var(--muted-color, #777); color: var(--pw-muted-color, #777);
} }
*/ */

2
wire/modules/AdminTheme/AdminThemeUikit/themes/default/content.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
wire/modules/AdminTheme/AdminThemeUikit/themes/default/examples/borderless.css
View File

@@ -3,6 +3,6 @@
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
:root { :root {
--border-color: var(--main-background); --pw-border-color: var(--pw-main-background);
--inputs-background: var(--blocks-background); --pw-inputs-background: var(--pw-blocks-background);
} }

18
wire/modules/AdminTheme/AdminThemeUikit/themes/default/examples/masthead.css
View File

@@ -4,13 +4,13 @@
/* ----------------------------------------------------------------- */ /* ----------------------------------------------------------------- */
:root { :root {
--masthead-background: var(--main-color); --pw-masthead-background: var(--pw-main-color);
--masthead-active-color: white; --pw-masthead-active-color: white;
--masthead-text-color: rgba(255,255,255,0.8); --pw-masthead-text-color: rgba(255,255,255,0.8);
--masthead-border-color: var(--main-background); --pw-masthead-border-color: var(--pw-main-background);
--masthead-logo-color: white; --pw-masthead-logo-color: white;
--masthead-input-background: var(--masthead-background); --pw-masthead-input-background: var(--pw-masthead-background);
--masthead-input-color: var(--masthead-active-color); --pw-masthead-input-color: var(--pw-masthead-active-color);
--masthead-input-border: var(--masthead-text-color); --pw-masthead-input-border: var(--pw-masthead-text-color);
--masthead-menu-item-backgroud-hover: rgba(255,255,255,.2); --pw-masthead-menu-item-backgroud-hover: rgba(255,255,255,.2);
} }

56
wire/modules/AdminTheme/AdminThemeUikit/themes/default/examples/minimal.css
View File

@@ -3,35 +3,35 @@
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
:root { :root {
--text-color: light-dark(blue, white); --pw-text-color: light-dark(blue, white);
--main-color: var(--text-color); --pw-main-color: var(--pw-text-color);
--main-background:light-dark(white, #222); --pw-main-background:light-dark(white, #222);
--border-color: light-dark(var(--text-color), var(--text-color)); --pw-border-color: light-dark(var(--pw-text-color), var(--pw-text-color));
--text-background: var(--main-background); --pw-text-background: var(--pw-main-background);
--inputs-background: var(--text-background); --pw-inputs-background: var(--pw-text-background);
--blocks-background: var(--text-background); --pw-blocks-background: var(--pw-text-background);
--muted-color: light-dark(#7c8efd, #8b8b8b); --pw-muted-color: light-dark(#7c8efd, #8b8b8b);
--button-background: var(--text-background); --pw-button-background: var(--pw-text-background);
--button-color: light-dark(var(--text-color), var(--text-color)); --pw-button-color: light-dark(var(--pw-text-color), var(--pw-text-color));
--button-muted-color: var(--muted-color); --pw-button-muted-color: var(--pw-muted-color);
--button-border: var(--button-color); --pw-button-border: var(--pw-button-color);
--button-muted-background: var(--button-background); --pw-button-muted-background: var(--pw-button-background);
--button-muted-border: var(--button-muted-color); --pw-button-muted-border: var(--pw-button-muted-color);
--button-hover-background: var(--button-color); --pw-button-hover-background: var(--pw-button-color);
--button-hover-color: var(--button-background); --pw-button-hover-color: var(--pw-button-background);
--button-hover-border: var(--button-color); --pw-button-hover-border: var(--pw-button-color);
--masthead-background: var(--text-background); --pw-masthead-background: var(--pw-text-background);
--masthead-active-color: light-dark(var(--text-color), var(--text-color)); --pw-masthead-active-color: light-dark(var(--pw-text-color), var(--pw-text-color));
--masthead-text-color: var(--masthead-active-color); --pw-masthead-text-color: var(--pw-masthead-active-color);
--masthead-border-color: var(--masthead-active-color); --pw-masthead-border-color: var(--pw-masthead-active-color);
--masthead-logo-color: var(--masthead-active-color); --pw-masthead-logo-color: var(--pw-masthead-active-color);
--alert-text-color: var(--text-color); --pw-alert-text-color: var(--pw-text-color);
--alert-primary: light-dark(#ffd, var(--text-background)); --pw-alert-primary: light-dark(#ffd, var(--pw-text-background));
--alert-warning: light-dark(#fcda6d, #d57f00); --pw-alert-warning: light-dark(#fcda6d, #d57f00);
--alert-success: light-dark(#97ecb2, #139472); --pw-alert-success: light-dark(#97ecb2, #139472);
--alert-danger: light-dark(#ec9797, #8a1919); --pw-alert-danger: light-dark(#ec9797, #8a1919);
--notes-background: light-dark(#ffd, #bdbdbd33); --pw-notes-background: light-dark(#ffd, #bdbdbd33);
} }

6
wire/modules/AdminTheme/AdminThemeUikit/themes/default/info.php Normal file
View File

@@ -0,0 +1,6 @@
<?php namespace ProcessWire;
return [
'title' => 'Konkat default',
'author' => 'Konkat Studio',
];

4
wire/modules/AdminTheme/AdminThemeUikit/themes/default/ready.php
View File

@@ -59,9 +59,9 @@ if(strpos($mainColorCode, '#') === 0 && ctype_alnum(ltrim($mainColorCode, '#')))
$mainDarkCode = $mainColors['customDark']; $mainDarkCode = $mainColors['customDark'];
$use2Colors = $mainColor === 'custom' && in_array('use2Colors', $adminTheme->defaultToggles); $use2Colors = $mainColor === 'custom' && in_array('use2Colors', $adminTheme->defaultToggles);
if($use2Colors && strpos($mainDarkCode, '#') === 0 && ctype_alnum(ltrim($mainDarkCode, '#'))) { if($use2Colors && strpos($mainDarkCode, '#') === 0 && ctype_alnum(ltrim($mainDarkCode, '#'))) {
$css = "--main-color: light-dark($mainColorCode, $mainDarkCode);"; $css = "--pw-main-color: light-dark($mainColorCode, $mainDarkCode);";
} else { } else {
$css = "--main-color: $mainColorCode"; $css = "--pw-main-color: $mainColorCode";
} }
$adminTheme->addExtraMarkup('head', $adminTheme->addExtraMarkup('head',
"<style id='main-color-custom' type='text/css'>:root { $css }</style>" "<style id='main-color-custom' type='text/css'>:root { $css }</style>"

4882
wire/modules/AdminTheme/AdminThemeUikit/themes/default/skin.min.css vendored
View File

File diff suppressed because it is too large Load Diff

2
wire/modules/AdminTheme/AdminThemeUikit/themes/default/toggles/InputfieldTable.css
View File

@@ -13,5 +13,5 @@
.InputfieldTableRowDeleteLink:hover, .InputfieldTableRowDeleteLink:hover,
.InputfieldTableActionRow:hover { .InputfieldTableActionRow:hover {
/* make table action links highlight with main color when hovered */ /* make table action links highlight with main color when hovered */
color: var(--main-color); color: var(--pw-main-color);
} }

28
wire/modules/AdminTheme/AdminThemeUikit/themes/default/toggles/useBoldItemHeaders.css
View File

@@ -7,10 +7,10 @@
.pw .Inputfields .InputfieldAsmSelect .asmListItem.ui-state-default, .pw .Inputfields .InputfieldAsmSelect .asmListItem.ui-state-default,
.pw .Inputfields .InputfieldAsmSelect .asmListItem.ui-state-hover { .pw .Inputfields .InputfieldAsmSelect .asmListItem.ui-state-hover {
/* make asmSelect/autocomplete/pageListSelect use the main-color */ /* make asmSelect/autocomplete/pageListSelect use the main-color */
--main-background: var(--main-color); --pw-main-background: var(--pw-main-color);
--border-color: var(--main-color); --pw-border-color: var(--pw-main-color);
--text-color: rgba(255,255,255,0.9); --pw-text-color: rgba(255,255,255,0.9);
background-color: var(--main-background); background-color: var(--pw-main-background);
margin-top: 0; margin-top: 0;
margin-bottom: 1px !important; margin-bottom: 1px !important;
} }
@@ -22,22 +22,22 @@
/* highlight hovered items */ /* highlight hovered items */
filter: brightness(1.05); filter: brightness(1.05);
filter: brightness(0.95); filter: brightness(0.95);
border-color: var(--main-color); border-color: var(--pw-main-color);
} }
.pw .ui-accordion-header { .pw .ui-accordion-header {
/* accordion items like the debug mode tools */ /* accordion items like the debug mode tools */
--inputs-background: var(--main-color); --pw-inputs-background: var(--pw-main-color);
--blocks-background: var(--main-color); --pw-blocks-background: var(--pw-main-color);
--text-color: #fff; --pw-text-color: #fff;
border: 0; border: 0;
margin-top: 3px !important; margin-top: 3px !important;
} }
.pw .ui-accordion-header:hover, .pw .ui-accordion-header:hover,
.pw .ui-accordion-header.ui-state-hover { .pw .ui-accordion-header.ui-state-hover {
--inputs-background: var(--main-color); --pw-inputs-background: var(--pw-main-color);
--main-background: var(--main-color); --pw-main-background: var(--pw-main-color);
filter: brightness(1.05); filter: brightness(1.05);
} }
.ui-accordion.ui-widget .ui-accordion-content { .ui-accordion.ui-widget .ui-accordion-content {
@@ -54,10 +54,10 @@
.pw .Inputfields .InputfieldRepeater .InputfieldContent .InputfieldRepeaterItem > .InputfieldHeader, .pw .Inputfields .InputfieldRepeater .InputfieldContent .InputfieldRepeaterItem > .InputfieldHeader,
.pw .InputfieldFileList > li > .InputfieldItemHeader { .pw .InputfieldFileList > li > .InputfieldItemHeader {
/* make InputfieldRepeater item headers use the main color */ /* make InputfieldRepeater item headers use the main color */
--inputs-background: var(--main-color); --pw-inputs-background: var(--pw-main-color);
--border-color: var(--main-color); --pw-border-color: var(--pw-main-color);
--text-color: rgba(255,255,255,0.9); --pw-text-color: rgba(255,255,255,0.9);
--muted-color: rgba(255,255,255,0.8); --pw-muted-color: rgba(255,255,255,0.8);
} }
.InputfieldRepeaterItem > .InputfieldHeader:hover { .InputfieldRepeaterItem > .InputfieldHeader:hover {

12
wire/modules/AdminTheme/AdminThemeUikit/themes/default/toggles/useInputFocus.css
View File

@@ -4,22 +4,22 @@
select.uk-select:focus { select.uk-select:focus {
/* have inputs show a focused state */ /* have inputs show a focused state */
/*border-color: var(--muted-color) !important;*/ /*border-color: var(--muted-color) !important;*/
background-color: var(--blocks-background) !important; background-color: var(--pw-blocks-background) !important;
} }
.InputfieldForm .Inputfields .Inputfield select.uk-select { .InputfieldForm .Inputfields .Inputfield select.uk-select {
/* make <select> elements have same background color as text inputs */ /* make <select> elements have same background color as text inputs */
background-color: var(--inputs-background); background-color: var(--pw-inputs-background);
} }
/*** TinyMCE ***/ /*** TinyMCE ***/
.InputfieldTinyMCE .tox-edit-area { .InputfieldTinyMCE .tox-edit-area {
background: var(--inputs-background); background: var(--pw-inputs-background);
} }
.InputfieldTinyMCE .mce-edit-focus, .InputfieldTinyMCE .mce-edit-focus,
.InputfieldTinyMCEFocused .tox-edit-area__iframe { .InputfieldTinyMCEFocused .tox-edit-area__iframe {
--inputs-background: var(--blocks-background); --inputs-background: var(--pw-blocks-background);
background: var(--blocks-background); background: var(--pw-blocks-background);
} }
.InputfieldTinyMCEFocused .tox .tox-toolbar, .InputfieldTinyMCEFocused .tox .tox-toolbar,
@@ -27,7 +27,7 @@ select.uk-select:focus {
.InputfieldTinyMCEFocused .tox .tox-statusbar, .InputfieldTinyMCEFocused .tox .tox-statusbar,
.InputfieldTinyMCEFocused .tox .tox-toolbar__overflow, .InputfieldTinyMCEFocused .tox .tox-toolbar__overflow,
.InputfieldTinyMCEFocused .tox .tox-toolbar__primary { .InputfieldTinyMCEFocused .tox .tox-toolbar__primary {
--blocks-background: var(--inputs-background); --blocks-background: var(--pw-inputs-background);
} }
.pw .InputfieldTinyMCEFocused .tox .tox-menubar .tox-mbtn:hover, .pw .InputfieldTinyMCEFocused .tox .tox-menubar .tox-mbtn:hover,

20
wire/modules/AdminTheme/AdminThemeUikit/themes/default/toggles/usePageListButtons.css
View File

@@ -1,21 +1,35 @@
#pw-content-body .PageList .PageListActions a,
#pw-content-body .PageListerActions > a,
.PageList .PageListItem .PageListActions > li > a { .PageList .PageListItem .PageListActions > li > a {
/* make PageList items use action links that look like buttons */ /* make PageList items use action links that look like buttons */
display: inline-block; display: inline-block;
line-height: 1.3; line-height: 1.3;
background-color: var(--main-color); background-color: var(--pw-main-color);
color: #fff; color: #fff;
padding: 2px 6px; padding: 2px 6px;
font-weight: bold; font-weight: bold;
text-transform: lowercase; text-transform: lowercase;
position: relative; position: relative;
top: -1px; top: -1px;
border-radius: 3px;
} }
#pw-content-body .PageList .PageListActions a:hover,
#pw-content-body .PageListerActions > a:hover,
.PageList .PageListItem .PageListActions > li > a:hover { .PageList .PageListItem .PageListActions > li > a:hover {
/* highlight selected action when hovered */ /* highlight selected action when hovered */
filter: brightness(1.08); filter: brightness(1.08);
} }
#pw-content-body .PageList ul.uk-pagination > li:first-child > a {
border-top-left-radius: var(--pw-button-radius) !important;
border-bottom-left-radius: var(--pw-button-radius) !important;
}
#pw-content-body .PageList ul.uk-pagination > li:last-child > a {
border-top-right-radius: var(--pw-button-radius) !important;
border-bottom-right-radius: var(--pw-button-radius) !important;
}
.PageList .PageListItem:hover { .PageList .PageListItem:hover {
/* adjust width to actions */ /* adjust width to actions */
/* /*
@@ -26,8 +40,8 @@
#pw-content-body .PageList ul.uk-pagination > li.uk-active > a { #pw-content-body .PageList ul.uk-pagination > li.uk-active > a {
/* update active pagination to use main color */ /* update active pagination to use main color */
--blocks-background: #fff; background: var(--pw-main-color) !important;
--text-color: var(--main-color); --pw-text-color: #fff;
} }
.PageList .PageListItem:not(:hover) .PageListActions.actions { .PageList .PageListItem:not(:hover) .PageListActions.actions {

2
wire/modules/Process/ProcessPageLister/ProcessPageLister.css
View File

File diff suppressed because one or more lines are too long

3
wire/modules/Process/ProcessPageLister/ProcessPageLister.scss
View File

@@ -275,3 +275,6 @@ p.version {
} }
} }
#save_edits {
display: inline-block;
}