mirror of
https://github.com/processwire/processwire.git
synced 2025-08-12 17:54:44 +02:00
Update AdminThemeUikit Konkat default theme to use --pw- namespaced CSS variables.
Co-authored-by: ocorreiododiogo <ocorreiododiogo@gmail.com> Co-authored-by: jploch <jploch@users.noreply.github.com>
This commit is contained in:
Ryan Cramer
@@ -141,7 +141,7 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
|
||||
'defaultMainColor' => 'red',
|
||||
'defaultMainColorCustom' => '#eb1d61',
|
||||
'defaultMainColorCustomDark' => '',
|
||||
'defaultToggles' => [],
|
||||
'defaultToggles' => [ 'useInputFocus' ],
|
||||
'defaultCustomCss' => '',
|
||||
'defaultCustomCssFile' => '',
|
||||
]);
|
||||
@@ -1326,7 +1326,10 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
|
||||
|
||||
$themeInfos = $this->themeInfos;
|
||||
|
||||
if(isset($themeInfos['z'])) {
|
||||
if(empty($themeInfos) || isset($themeInfos['z'])) {
|
||||
$session = $this->wire()->session;
|
||||
$themeInfos = $session->getFor($this, 'themeInfos');
|
||||
if(empty($themeInfos)) {
|
||||
// wakeup
|
||||
$config = $this->wire()->config;
|
||||
$thisPath = $config->paths($this);
|
||||
@@ -1339,16 +1342,22 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
|
||||
if(strpos($basename, '.') === 0) continue;
|
||||
$themePath = $thisPath . "themes/$basename/";
|
||||
$themeUrl = $config->urls->root . substr($themePath, $rootLen);
|
||||
$themeInfos[$basename] = [
|
||||
'name' => $basename,
|
||||
'path' => $themePath,
|
||||
'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);
|
||||
}
|
||||
}
|
||||
|
||||
if($themeName === 'all') return $themeInfos;
|
||||
|
||||
return $themeName && isset($themeInfos[$themeName]) ? $themeInfos[$themeName] : [];
|
||||
}
|
||||
|
||||
@@ -44,24 +44,24 @@ class AdminThemeUikitConfigHelper extends Wire {
|
||||
$layout = $adminTheme->layout;
|
||||
$userTemplateURL = $config->urls->admin . 'setup/template/edit?id=3';
|
||||
|
||||
$adminTheme->getThemeInfo(); // init
|
||||
$themeInfos = $adminTheme->themeInfos;
|
||||
$themeInfos = $adminTheme->getThemeInfo('all'); // init
|
||||
|
||||
if(count($themeInfos)) {
|
||||
$configFiles = [];
|
||||
$f = $inputfields->InputfieldRadios;
|
||||
$f->attr('id+name', 'themeName');
|
||||
$f->label = $this->_('Theme name');
|
||||
$f->label = $this->_('Uikit style theme');
|
||||
$f->notes =
|
||||
$this->_('After changing the theme, please submit/save before configuring it.') . ' ' .
|
||||
$this->_('When using `admin.less` customization, you should use the “Original” theme.');
|
||||
$this->_('After changing the style theme, please submit/save before configuring it.') . ' ' .
|
||||
$this->_('When using `admin.less` customization, the “Core original” style is required.');
|
||||
$f->icon = 'photo';
|
||||
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';
|
||||
if(is_file($configFile)) $configFiles[$name] = $configFile;
|
||||
}
|
||||
$f->addOption('', $this->_('Original'));
|
||||
$f->addOption('', $this->_('Core original'));
|
||||
$value = $adminTheme->themeName;
|
||||
$f->val($value);
|
||||
$f->themeOffset = 1;
|
||||
@@ -72,7 +72,7 @@ class AdminThemeUikitConfigHelper extends Wire {
|
||||
$inputfields->add($fs);
|
||||
$fs->themeOffset = 1;
|
||||
$fs->attr('name', "_theme_$name");
|
||||
$fs->label = $this->_('Theme style settings:') . ' ' . $name;
|
||||
$fs->label = $themeInfos[$name]['title'] . ' ' . $this->_('theme settings');
|
||||
$fs->showIf = "themeName=$name";
|
||||
$this->wire()->files->render($configFile, [ 'inputfields' => $fs ]);
|
||||
}
|
||||
|
||||
@@ -39,53 +39,53 @@
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
--main-color: #eb1d61;
|
||||
--pw-main-color: #eb1d61;
|
||||
|
||||
--text-color: light-dark(#111, white);
|
||||
--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);
|
||||
--main-background:light-dark(#eee, #222);
|
||||
--inputs-background:light-dark(#f8f8f8, #161616);
|
||||
--blocks-background: light-dark(white, black);
|
||||
--pw-text-color: light-dark(#111, white);
|
||||
--pw-muted-color: light-dark(rgba(0, 0, 0, 0.55), rgba(255, 255, 255, 0.6));
|
||||
--pw-border-color: light-dark(rgba(0, 0, 0, 0.16), #444);
|
||||
--pw-main-background:light-dark(#eee, #222);
|
||||
--pw-inputs-background:light-dark(#f8f8f8, #161616);
|
||||
--pw-blocks-background: light-dark(white, black);
|
||||
|
||||
--button-background: light-dark(var(--text-color), var(--main-color));
|
||||
--button-color: light-dark(var(--blocks-background), var(--text-color));
|
||||
--button-border: transparent;
|
||||
--button-muted-background: light-dark(#737373, #404040);
|
||||
--button-muted-color: light-dark(var(--blocks-background), var(--text-color));;
|
||||
--button-muted-border: transparent;
|
||||
--button-hover-background: light-dark(var(--main-color), var(--text-color));
|
||||
--button-hover-color: var(--blocks-background);
|
||||
--button-hover-border: transparent;
|
||||
--menu-item-background-hover: var(--main-background);
|
||||
--pw-button-background: light-dark(var(--pw-text-color), var(--pw-main-color));
|
||||
--pw-button-color: light-dark(var(--pw-blocks-background), var(--pw-text-color));
|
||||
--pw-button-border: transparent;
|
||||
--pw-button-muted-background: light-dark(#737373, #404040);
|
||||
--pw-button-muted-color: light-dark(var(--pw-blocks-background), var(--pw-text-color));;
|
||||
--pw-button-muted-border: transparent;
|
||||
--pw-button-hover-background: light-dark(var(--pw-main-color), var(--pw-text-color));
|
||||
--pw-button-hover-color: var(--pw-blocks-background);
|
||||
--pw-button-hover-border: transparent;
|
||||
--pw-menu-item-background-hover: var(--pw-main-background);
|
||||
|
||||
--masthead-background: var(--blocks-background);
|
||||
--masthead-active-color: var(--text-color);
|
||||
--masthead-text-color: var(--muted-color);
|
||||
--masthead-border-color: var(--border-color);
|
||||
--masthead-logo-color: var(--main-color);
|
||||
--masthead-menu-item-background-hover: var(--menu-item-background-hover);
|
||||
--pw-masthead-background: var(--pw-blocks-background);
|
||||
--pw-masthead-active-color: var(--pw-text-color);
|
||||
--pw-masthead-text-color: var(--pw-muted-color);
|
||||
--pw-masthead-border-color: var(--pw-border-color);
|
||||
--pw-masthead-logo-color: var(--pw-main-color);
|
||||
--pw-masthead-menu-item-background-hover: var(--pw-menu-item-background-hover);
|
||||
|
||||
--masthead-input-background: var(--inputs-background);
|
||||
--masthead-input-color: var(--text-color);
|
||||
--masthead-input-border: var(--border-color);
|
||||
--pw-masthead-input-background: var(--pw-inputs-background);
|
||||
--pw-masthead-input-color: var(--pw-text-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);
|
||||
--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);
|
||||
--pw-error-inline-text-color: light-dark(#cd0a0a, #ff7171);
|
||||
|
||||
--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);
|
||||
--code-background: light-dark(var(--inputs-background), #3c3c3c5e);
|
||||
--pw-alert-text-color: var(--pw-text-color);
|
||||
--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;
|
||||
--input-radius: 0;
|
||||
--pw-button-radius: 99999px;
|
||||
--pw-input-radius: 0;
|
||||
|
||||
}
|
||||
|
||||
@@ -129,15 +129,15 @@ body.main-color-blue {
|
||||
/* ----------------------------------------------------------------- */
|
||||
/*
|
||||
:root {
|
||||
--masthead-background: var(--main-color);
|
||||
--masthead-active-color: white;
|
||||
--masthead-text-color: rgba(255,255,255,0.8);
|
||||
--masthead-border-color: var(--main-background);
|
||||
--masthead-logo-color: white;
|
||||
--masthead-input-background: var(--masthead-background);
|
||||
--masthead-input-color: var(--masthead-active-color);
|
||||
--masthead-input-border: var(--masthead-text-color);
|
||||
--masthead-menu-item-background-hover: rgba(255,255,255,.2);
|
||||
--pw-masthead-background: var(--pw-main-color);
|
||||
--pw-masthead-active-color: white;
|
||||
--pw-masthead-text-color: rgba(255,255,255,0.8);
|
||||
--pw-masthead-border-color: var(--pw-main-background);
|
||||
--pw-masthead-logo-color: white;
|
||||
--pw-masthead-input-background: var(--pw-masthead-background);
|
||||
--pw-masthead-input-color: var(--pw-masthead-active-color);
|
||||
--pw-masthead-input-border: var(--pw-masthead-text-color);
|
||||
--pw-masthead-menu-item-background-hover: rgba(255,255,255,.2);
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------- */
|
||||
@@ -145,8 +145,8 @@ body.main-color-blue {
|
||||
/* ------------------------------------------------------------------ */
|
||||
/*
|
||||
:root {
|
||||
--border-color: var(--main-background);
|
||||
--inputs-background: var(--blocks-background);
|
||||
--pw-border-color: var(--pw-main-background);
|
||||
--pw-inputs-background: var(--pw-blocks-background);
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------- */
|
||||
@@ -154,35 +154,35 @@ body.main-color-blue {
|
||||
/* ------------------------------------------------------------------ */
|
||||
/*
|
||||
:root {
|
||||
--text-color: light-dark(blue, white);
|
||||
--main-color: var(--text-color);
|
||||
--main-background:light-dark(white, #222);
|
||||
--border-color: light-dark(var(--text-color), var(--text-color));
|
||||
--text-background: var(--main-background);
|
||||
--inputs-background: var(--text-background);
|
||||
--blocks-background: var(--text-background);
|
||||
--muted-color: light-dark(#7c8efd, #8b8b8b);
|
||||
--pw-text-color: light-dark(blue, white);
|
||||
--pw-main-color: var(--pw-text-color);
|
||||
--pw-main-background:light-dark(white, #222);
|
||||
--pw-border-color: light-dark(var(--pw-text-color), var(--pw-text-color));
|
||||
--pw-text-background: var(--pw-main-background);
|
||||
--pw-inputs-background: var(--pw-text-background);
|
||||
--pw-blocks-background: var(--pw-text-background);
|
||||
--pw-muted-color: light-dark(#7c8efd, #8b8b8b);
|
||||
|
||||
--button-background: var(--text-background);
|
||||
--button-color: light-dark(var(--text-color), var(--text-color));
|
||||
--button-muted-color: var(--muted-color);
|
||||
--button-border: var(--button-color);
|
||||
--button-muted-background: var(--button-background);
|
||||
--button-muted-border: var(--button-muted-color);
|
||||
--button-hover-background: var(--button-color);
|
||||
--button-hover-color: var(--button-background);
|
||||
--button-hover-border: var(--button-color);
|
||||
--pw-button-background: var(--pw-text-background);
|
||||
--pw-button-color: light-dark(var(--pw-text-color), var(--pw-text-color));
|
||||
--pw-button-muted-color: var(--pw-muted-color);
|
||||
--pw-button-border: var(--pw-button-color);
|
||||
--pw-button-muted-background: var(--pw-button-background);
|
||||
--pw-button-muted-border: var(--pw-button-muted-color);
|
||||
--pw-button-hover-background: var(--pw-button-color);
|
||||
--pw-button-hover-color: var(--pw-button-background);
|
||||
--pw-button-hover-border: var(--pw-button-color);
|
||||
|
||||
--masthead-background: var(--text-background);
|
||||
--masthead-active-color: light-dark(var(--text-color), var(--text-color));
|
||||
--masthead-text-color: var(--masthead-active-color);
|
||||
--masthead-border-color: var(--masthead-active-color);
|
||||
--masthead-logo-color: var(--masthead-active-color);
|
||||
--pw-masthead-background: var(--pw-text-background);
|
||||
--pw-masthead-active-color: light-dark(var(--pw-text-color), var(--pw-text-color));
|
||||
--pw-masthead-text-color: var(--pw-masthead-active-color);
|
||||
--pw-masthead-border-color: var(--pw-masthead-active-color);
|
||||
--pw-masthead-logo-color: var(--pw-masthead-active-color);
|
||||
|
||||
--alert-text-color: var(--text-color);
|
||||
--alert-primary: light-dark(#ffd, var(--text-background));
|
||||
--alert-warning: light-dark(#fcda6d, #d57f00);
|
||||
--alert-success: light-dark(#97ecb2, #139472);
|
||||
--alert-danger: light-dark(#ec9797, #8a1919);
|
||||
--notes-background: light-dark(#ffd, #bdbdbd33);
|
||||
--pw-alert-text-color: var(--pw-text-color);
|
||||
--pw-alert-primary: light-dark(#ffd, var(--pw-text-background));
|
||||
--pw-alert-warning: light-dark(#fcda6d, #d57f00);
|
||||
--pw-alert-success: light-dark(#97ecb2, #139472);
|
||||
--pw-alert-danger: light-dark(#ec9797, #8a1919);
|
||||
--pw-notes-background: light-dark(#ffd, #bdbdbd33);
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -60,7 +60,7 @@ $(document).ready(function() {
|
||||
"<style type='text/css' id='main-color-custom'>" +
|
||||
":root { " +
|
||||
".main-color-custom { " +
|
||||
"--main-color: " + value + "; " +
|
||||
"--pw-main-color: " + value + "; " +
|
||||
"} " +
|
||||
"} " +
|
||||
"</style>");
|
||||
|
||||
1
wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.min.js
vendored
Normal file
1
wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.min.js
vendored
Normal 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()});
|
||||
@@ -11,13 +11,12 @@ if($adminTheme->themeName === 'default') {
|
||||
$adminTheme->wire()->config->scripts->add($adminTheme->url() . 'themes/default/config.js');
|
||||
}
|
||||
|
||||
$inputfields->label = __('Default theme settings');
|
||||
$inputfields->description = __('This default theme is created by Diogo Oliveira and Jan Ploch at [KONKAT Studio](https://konkat.studio/).');
|
||||
$inputfields->description = __('Created by Diogo Oliveira and Jan Ploch at [KONKAT Studio](https://konkat.studio/).');
|
||||
$inputfields->icon = 'sliders';
|
||||
|
||||
$f = $inputfields->InputfieldRadios;
|
||||
$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 = [];
|
||||
$value = $adminTheme->get('defaultStyleName');
|
||||
if(empty($value)) $value = 'auto';
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
line-height: 1.5;
|
||||
margin: 1rem;
|
||||
font-size: 16px;
|
||||
color: var(--text-color, #333);
|
||||
/*background: var(--inputs-background, #f8f8f8);*/
|
||||
color: var(--pw-text-color, #333);
|
||||
/*background: var(--pw-inputs-background, #f8f8f8);*/
|
||||
background: transparent;
|
||||
}
|
||||
a {
|
||||
@@ -29,7 +29,7 @@ a {
|
||||
.mce-content-body h4,
|
||||
.mce-content-body h5,
|
||||
.mce-content-body h6 {
|
||||
color: var(--text-color, #222);
|
||||
color: var(--pw-text-color, #222);
|
||||
font-weight: bold;
|
||||
line-height: 1.2em;
|
||||
text-transform: none;
|
||||
@@ -60,12 +60,12 @@ a {
|
||||
.mce-content-body code {
|
||||
border-radius: 3px;
|
||||
padding: 0.1rem 0.2rem;
|
||||
/* background-color: var(--muted-color, #f5f2f0); */
|
||||
color: var(--text-color, #222);
|
||||
/* background-color: var(--pw-muted-color, #f5f2f0); */
|
||||
color: var(--pw-text-color, #222);
|
||||
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
||||
}
|
||||
.mce-content-body a {
|
||||
color: var(--main-color, #0782c1);
|
||||
color: var(--pw-main-color, #0782c1);
|
||||
text-decoration: underline;
|
||||
}
|
||||
.mce-content-body table:not([cellpadding]) td,
|
||||
@@ -73,28 +73,28 @@ a {
|
||||
padding: 0.4rem;
|
||||
}
|
||||
.mce-content-body
|
||||
table[border]:not([border="0"]):not([style*="border-width"])
|
||||
td,
|
||||
table[border]:not([border="0"]):not([style*="border-width"])
|
||||
td,
|
||||
.mce-content-body
|
||||
table[border]:not([border="0"]):not([style*="border-width"])
|
||||
th {
|
||||
table[border]:not([border="0"]):not([style*="border-width"])
|
||||
th {
|
||||
border-width: 1px;
|
||||
}
|
||||
.mce-content-body
|
||||
table[border]:not([border="0"]):not([style*="border-style"])
|
||||
td,
|
||||
table[border]:not([border="0"]):not([style*="border-style"])
|
||||
td,
|
||||
.mce-content-body
|
||||
table[border]:not([border="0"]):not([style*="border-style"])
|
||||
th {
|
||||
table[border]:not([border="0"]):not([style*="border-style"])
|
||||
th {
|
||||
border-style: solid;
|
||||
}
|
||||
.mce-content-body
|
||||
table[border]:not([border="0"]):not([style*="border-color"])
|
||||
td,
|
||||
table[border]:not([border="0"]):not([style*="border-color"])
|
||||
td,
|
||||
.mce-content-body
|
||||
table[border]:not([border="0"]):not([style*="border-color"])
|
||||
th {
|
||||
border-color: var(--border-color, #ccc);
|
||||
table[border]:not([border="0"]):not([style*="border-color"])
|
||||
th {
|
||||
border-color: var(--pw-border-color, #ccc);
|
||||
}
|
||||
.mce-content-body span[lang] {
|
||||
font-style: italic;
|
||||
@@ -103,8 +103,8 @@ a {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.mce-content-body blockquote {
|
||||
color: var(--text-color, #333);
|
||||
border-color: var(--border-color, #ccc);
|
||||
color: var(--pw-text-color, #333);
|
||||
border-color: var(--pw-border-color, #ccc);
|
||||
font-style: italic;
|
||||
font-family: Georgia, Times, "Times New Roman", serif;
|
||||
margin: 0;
|
||||
@@ -135,7 +135,7 @@ a {
|
||||
line-height: 1.3em;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
color: var(--muted-text, #999);
|
||||
color: var(--pw-muted-text, #999);
|
||||
}
|
||||
.mce-content-body .align_right,
|
||||
.mce-content-body .align-right,
|
||||
@@ -231,10 +231,10 @@ a > .mce-content-body img {
|
||||
padding: 1px;
|
||||
margin: 1px;
|
||||
border: none;
|
||||
outline: 1px solid var(--main-color, #0782c1);
|
||||
outline: 1px solid var(--pw-main-color, #0782c1);
|
||||
}
|
||||
.mce-content-body pre {
|
||||
/*border: 1px dashed var(--border-color, #ccc);*/
|
||||
/*border: 1px dashed var(--pw-border-color, #ccc);*/
|
||||
/*padding: 0.5rem 1rem !important;*/
|
||||
border: 0;
|
||||
white-space: pre-wrap;
|
||||
@@ -269,6 +269,6 @@ a > .mce-content-body img {
|
||||
background: #f5f2f0;
|
||||
margin: 0.5em 0;
|
||||
padding: 0.5rem 1rem;
|
||||
color: var(--muted-color, #777);
|
||||
color: var(--pw-muted-color, #777);
|
||||
}
|
||||
*/
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -3,6 +3,6 @@
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
:root {
|
||||
--border-color: var(--main-background);
|
||||
--inputs-background: var(--blocks-background);
|
||||
--pw-border-color: var(--pw-main-background);
|
||||
--pw-inputs-background: var(--pw-blocks-background);
|
||||
}
|
||||
|
||||
@@ -4,13 +4,13 @@
|
||||
/* ----------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--masthead-background: var(--main-color);
|
||||
--masthead-active-color: white;
|
||||
--masthead-text-color: rgba(255,255,255,0.8);
|
||||
--masthead-border-color: var(--main-background);
|
||||
--masthead-logo-color: white;
|
||||
--masthead-input-background: var(--masthead-background);
|
||||
--masthead-input-color: var(--masthead-active-color);
|
||||
--masthead-input-border: var(--masthead-text-color);
|
||||
--masthead-menu-item-backgroud-hover: rgba(255,255,255,.2);
|
||||
--pw-masthead-background: var(--pw-main-color);
|
||||
--pw-masthead-active-color: white;
|
||||
--pw-masthead-text-color: rgba(255,255,255,0.8);
|
||||
--pw-masthead-border-color: var(--pw-main-background);
|
||||
--pw-masthead-logo-color: white;
|
||||
--pw-masthead-input-background: var(--pw-masthead-background);
|
||||
--pw-masthead-input-color: var(--pw-masthead-active-color);
|
||||
--pw-masthead-input-border: var(--pw-masthead-text-color);
|
||||
--pw-masthead-menu-item-backgroud-hover: rgba(255,255,255,.2);
|
||||
}
|
||||
|
||||
@@ -3,35 +3,35 @@
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
:root {
|
||||
--text-color: light-dark(blue, white);
|
||||
--main-color: var(--text-color);
|
||||
--main-background:light-dark(white, #222);
|
||||
--border-color: light-dark(var(--text-color), var(--text-color));
|
||||
--text-background: var(--main-background);
|
||||
--inputs-background: var(--text-background);
|
||||
--blocks-background: var(--text-background);
|
||||
--muted-color: light-dark(#7c8efd, #8b8b8b);
|
||||
--pw-text-color: light-dark(blue, white);
|
||||
--pw-main-color: var(--pw-text-color);
|
||||
--pw-main-background:light-dark(white, #222);
|
||||
--pw-border-color: light-dark(var(--pw-text-color), var(--pw-text-color));
|
||||
--pw-text-background: var(--pw-main-background);
|
||||
--pw-inputs-background: var(--pw-text-background);
|
||||
--pw-blocks-background: var(--pw-text-background);
|
||||
--pw-muted-color: light-dark(#7c8efd, #8b8b8b);
|
||||
|
||||
--button-background: var(--text-background);
|
||||
--button-color: light-dark(var(--text-color), var(--text-color));
|
||||
--button-muted-color: var(--muted-color);
|
||||
--button-border: var(--button-color);
|
||||
--button-muted-background: var(--button-background);
|
||||
--button-muted-border: var(--button-muted-color);
|
||||
--button-hover-background: var(--button-color);
|
||||
--button-hover-color: var(--button-background);
|
||||
--button-hover-border: var(--button-color);
|
||||
--pw-button-background: var(--pw-text-background);
|
||||
--pw-button-color: light-dark(var(--pw-text-color), var(--pw-text-color));
|
||||
--pw-button-muted-color: var(--pw-muted-color);
|
||||
--pw-button-border: var(--pw-button-color);
|
||||
--pw-button-muted-background: var(--pw-button-background);
|
||||
--pw-button-muted-border: var(--pw-button-muted-color);
|
||||
--pw-button-hover-background: var(--pw-button-color);
|
||||
--pw-button-hover-color: var(--pw-button-background);
|
||||
--pw-button-hover-border: var(--pw-button-color);
|
||||
|
||||
--masthead-background: var(--text-background);
|
||||
--masthead-active-color: light-dark(var(--text-color), var(--text-color));
|
||||
--masthead-text-color: var(--masthead-active-color);
|
||||
--masthead-border-color: var(--masthead-active-color);
|
||||
--masthead-logo-color: var(--masthead-active-color);
|
||||
--pw-masthead-background: var(--pw-text-background);
|
||||
--pw-masthead-active-color: light-dark(var(--pw-text-color), var(--pw-text-color));
|
||||
--pw-masthead-text-color: var(--pw-masthead-active-color);
|
||||
--pw-masthead-border-color: var(--pw-masthead-active-color);
|
||||
--pw-masthead-logo-color: var(--pw-masthead-active-color);
|
||||
|
||||
--alert-text-color: var(--text-color);
|
||||
--alert-primary: light-dark(#ffd, var(--text-background));
|
||||
--alert-warning: light-dark(#fcda6d, #d57f00);
|
||||
--alert-success: light-dark(#97ecb2, #139472);
|
||||
--alert-danger: light-dark(#ec9797, #8a1919);
|
||||
--notes-background: light-dark(#ffd, #bdbdbd33);
|
||||
--pw-alert-text-color: var(--pw-text-color);
|
||||
--pw-alert-primary: light-dark(#ffd, var(--pw-text-background));
|
||||
--pw-alert-warning: light-dark(#fcda6d, #d57f00);
|
||||
--pw-alert-success: light-dark(#97ecb2, #139472);
|
||||
--pw-alert-danger: light-dark(#ec9797, #8a1919);
|
||||
--pw-notes-background: light-dark(#ffd, #bdbdbd33);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
<?php namespace ProcessWire;
|
||||
|
||||
return [
|
||||
'title' => 'Konkat default',
|
||||
'author' => 'Konkat Studio',
|
||||
];
|
||||
@@ -59,9 +59,9 @@ if(strpos($mainColorCode, '#') === 0 && ctype_alnum(ltrim($mainColorCode, '#')))
|
||||
$mainDarkCode = $mainColors['customDark'];
|
||||
$use2Colors = $mainColor === 'custom' && in_array('use2Colors', $adminTheme->defaultToggles);
|
||||
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 {
|
||||
$css = "--main-color: $mainColorCode";
|
||||
$css = "--pw-main-color: $mainColorCode";
|
||||
}
|
||||
$adminTheme->addExtraMarkup('head',
|
||||
"<style id='main-color-custom' type='text/css'>:root { $css }</style>"
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -13,5 +13,5 @@
|
||||
.InputfieldTableRowDeleteLink:hover,
|
||||
.InputfieldTableActionRow:hover {
|
||||
/* make table action links highlight with main color when hovered */
|
||||
color: var(--main-color);
|
||||
color: var(--pw-main-color);
|
||||
}
|
||||
|
||||
@@ -7,10 +7,10 @@
|
||||
.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);
|
||||
--pw-main-background: var(--pw-main-color);
|
||||
--pw-border-color: var(--pw-main-color);
|
||||
--pw-text-color: rgba(255,255,255,0.9);
|
||||
background-color: var(--pw-main-background);
|
||||
margin-top: 0;
|
||||
margin-bottom: 1px !important;
|
||||
}
|
||||
@@ -22,22 +22,22 @@
|
||||
/* highlight hovered items */
|
||||
filter: brightness(1.05);
|
||||
filter: brightness(0.95);
|
||||
border-color: var(--main-color);
|
||||
border-color: var(--pw-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;
|
||||
--pw-inputs-background: var(--pw-main-color);
|
||||
--pw-blocks-background: var(--pw-main-color);
|
||||
--pw-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);
|
||||
--pw-inputs-background: var(--pw-main-color);
|
||||
--pw-main-background: var(--pw-main-color);
|
||||
filter: brightness(1.05);
|
||||
}
|
||||
.ui-accordion.ui-widget .ui-accordion-content {
|
||||
@@ -54,10 +54,10 @@
|
||||
.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);
|
||||
--pw-inputs-background: var(--pw-main-color);
|
||||
--pw-border-color: var(--pw-main-color);
|
||||
--pw-text-color: rgba(255,255,255,0.9);
|
||||
--pw-muted-color: rgba(255,255,255,0.8);
|
||||
}
|
||||
|
||||
.InputfieldRepeaterItem > .InputfieldHeader:hover {
|
||||
|
||||
@@ -4,22 +4,22 @@
|
||||
select.uk-select:focus {
|
||||
/* have inputs show a focused state */
|
||||
/*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 {
|
||||
/* make <select> elements have same background color as text inputs */
|
||||
background-color: var(--inputs-background);
|
||||
background-color: var(--pw-inputs-background);
|
||||
}
|
||||
|
||||
/*** TinyMCE ***/
|
||||
.InputfieldTinyMCE .tox-edit-area {
|
||||
background: var(--inputs-background);
|
||||
background: var(--pw-inputs-background);
|
||||
}
|
||||
.InputfieldTinyMCE .mce-edit-focus,
|
||||
.InputfieldTinyMCEFocused .tox-edit-area__iframe {
|
||||
--inputs-background: var(--blocks-background);
|
||||
background: var(--blocks-background);
|
||||
--inputs-background: var(--pw-blocks-background);
|
||||
background: var(--pw-blocks-background);
|
||||
|
||||
}
|
||||
.InputfieldTinyMCEFocused .tox .tox-toolbar,
|
||||
@@ -27,7 +27,7 @@ select.uk-select:focus {
|
||||
.InputfieldTinyMCEFocused .tox .tox-statusbar,
|
||||
.InputfieldTinyMCEFocused .tox .tox-toolbar__overflow,
|
||||
.InputfieldTinyMCEFocused .tox .tox-toolbar__primary {
|
||||
--blocks-background: var(--inputs-background);
|
||||
--blocks-background: var(--pw-inputs-background);
|
||||
}
|
||||
|
||||
.pw .InputfieldTinyMCEFocused .tox .tox-menubar .tox-mbtn:hover,
|
||||
|
||||
@@ -1,21 +1,35 @@
|
||||
#pw-content-body .PageList .PageListActions a,
|
||||
#pw-content-body .PageListerActions > a,
|
||||
.PageList .PageListItem .PageListActions > li > a {
|
||||
/* make PageList items use action links that look like buttons */
|
||||
display: inline-block;
|
||||
line-height: 1.3;
|
||||
background-color: var(--main-color);
|
||||
background-color: var(--pw-main-color);
|
||||
color: #fff;
|
||||
padding: 2px 6px;
|
||||
font-weight: bold;
|
||||
text-transform: lowercase;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#pw-content-body .PageList .PageListActions a:hover,
|
||||
#pw-content-body .PageListerActions > a:hover,
|
||||
.PageList .PageListItem .PageListActions > li > a:hover {
|
||||
/* highlight selected action when hovered */
|
||||
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 {
|
||||
/* adjust width to actions */
|
||||
/*
|
||||
@@ -26,8 +40,8 @@
|
||||
|
||||
#pw-content-body .PageList ul.uk-pagination > li.uk-active > a {
|
||||
/* update active pagination to use main color */
|
||||
--blocks-background: #fff;
|
||||
--text-color: var(--main-color);
|
||||
background: var(--pw-main-color) !important;
|
||||
--pw-text-color: #fff;
|
||||
}
|
||||
|
||||
.PageList .PageListItem:not(:hover) .PageListActions.actions {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -275,3 +275,6 @@ p.version {
|
||||
}
|
||||
}
|
||||
|
||||
#save_edits {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user