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

Additional AdminThemeUikit CSS updates

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-18 16:24:47 -04:00
parent 96165bbff4
commit a817943b73
2 changed files with 71 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -84,8 +84,6 @@
--code-color: light-dark(#0173b0, #e7e695); --code-color: light-dark(#0173b0, #e7e695);
--code-background: light-dark(var(--inputs-background), #3c3c3c5e); --code-background: light-dark(var(--inputs-background), #3c3c3c5e);
--shadow-color: light-dark(rgba(0,0,0,0.025), rgba(255,255,255, 0.035));
--button-radius: 99999px; --button-radius: 99999px;
--input-radius: 0; --input-radius: 0;
@@ -139,7 +137,7 @@ body.main-color-blue {
--masthead-input-background: var(--masthead-background); --masthead-input-background: var(--masthead-background);
--masthead-input-color: var(--masthead-active-color); --masthead-input-color: var(--masthead-active-color);
--masthead-input-border: var(--masthead-text-color); --masthead-input-border: var(--masthead-text-color);
--masthead-menu-item-backgroud-hover: rgba(255,255,255,.2); --masthead-menu-item-background-hover: rgba(255,255,255,.2);
} }
/* -------------------------------------------------------------------- */ /* -------------------------------------------------------------------- */

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

@@ -937,7 +937,8 @@ a.uk-link-heading:hover,.uk-link-heading a:hover,.uk-link-toggle:hover .uk-link-
} }
.uk-progress { .uk-progress {
background-color: var(--border-color); background-color: var(--inputs-background);
border: 1px solid var(--border-color);
} }
.uk-progress::-webkit-progress-value { .uk-progress::-webkit-progress-value {
@@ -1041,11 +1042,6 @@ a.uk-link-heading:hover,.uk-link-heading a:hover,.uk-link-toggle:hover .uk-link-
color: var(--blocks-background) color: var(--blocks-background)
} }
.uk-alert {
background: var(--main-background);
color: var(--text-color);
}
.uk-placeholder { .uk-placeholder {
border-color: var(--border-color) border-color: var(--border-color)
} }
@@ -1572,7 +1568,11 @@ a.uk-link-heading:hover,.uk-link-heading a:hover,.uk-link-toggle:hover .uk-link-
.uk-card:hover { .uk-card:hover {
outline: none !important; outline: none !important;
border: none !important; border: none !important;
box-shadow: 0 5px 15px var(--shadow-color); box-shadow: 0 5px 15px color-mix(in srgb, var(--text-color), transparent 90%);
transition: box-shadow .25s ease;
}
.uk-card-default.uk-card-hover:hover {
box-shadow: 0 5px 15px color-mix(in srgb, var(--text-color), transparent 75%);
} }
.uk-table th, .uk-table th,
@@ -1617,8 +1617,8 @@ table.AdminDataTable:not(.uk-table) th {
} }
.ui-tooltip { .ui-tooltip {
-webkit-box-shadow: 0 0 5px var(--shadow-color); -webkit-box-shadow: 0 0 5px color-mix(in srgb, var(--text-color), transparent 98%);
box-shadow: 0 0 5px var(--shadow-color) box-shadow: 0 0 5px color-mix(in srgb, var(--text-color), transparent 98%)
} }
.ui-widget-content { .ui-widget-content {
@@ -1687,9 +1687,20 @@ table.AdminDataTable:not(.uk-table) th {
color: var(--text-color) color: var(--text-color)
} }
.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error { .pw .ui-state-error,.pw .ui-widget-content .ui-state-error,.pw .ui-widget-header .ui-state-error {
background: var(--alert-danger); background: var(--error-inline-text-color);
color: var(--text-color) color: var(--blocks-background);
}
.InputfieldStateError > .InputfieldHeader,
.InputfieldStateError > .InputfieldHeader:after {
color: var(--error-inline-text-color) !important;
}
.InputfieldHeader.ui-state-error,
.pw .Inputfields .InputfieldRepeater .InputfieldContent .InputfieldRepeaterItem > .InputfieldHeader.ui-state-error {
background-color: var(--alert-danger) !important;
color: var(--error-inline-text-color) !important;
} }
.ui-state-error:not(:input),.ui-widget-content .ui-state-error:not(:input),.ui-widget-header .ui-state-error:not(:input) { .ui-state-error:not(:input),.ui-widget-content .ui-state-error:not(:input),.ui-widget-header .ui-state-error:not(:input) {
@@ -1713,7 +1724,7 @@ table.AdminDataTable:not(.uk-table) th {
} }
.ui-widget-shadow { .ui-widget-shadow {
background: var(--shadow-color); background: color-mix(in srgb, var(--text-color), transparent 90%);
} }
.pw-content .ui-widget-content a { .pw-content .ui-widget-content a {
@@ -1818,7 +1829,7 @@ button.ui-button.pw-button-dropdown-toggle {
.ui-tooltip { .ui-tooltip {
color: var(--blocks-background); color: var(--blocks-background);
box-shadow: 0 0 7px var(--shadow-color); box-shadow: 0 0 7px color-mix(in srgb, var(--text-color), transparent 98%);
background: var(--text-color); background: var(--text-color);
border-color: var(--blocks-background) border-color: var(--blocks-background)
} }
@@ -1876,13 +1887,10 @@ button.ui-button.pw-button-dropdown-toggle {
color: inherit color: inherit
} }
.ui-menu .ui-menu-item a.uk-active, .ui-menu .ui-menu-item a.uk-active,.ui-menu .ui-menu-item a.on,
.ui-menu .ui-menu-item a.on, .ui-menu .ui-menu-item a:hover,.ui-menu .ui-menu-item a.ui-state-focus,.ui-menu .ui-menu-item a.ui-state-active {
.ui-menu .ui-menu-item a:hover,
.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active {
color: var(--text-color); color: var(--text-color);
background: var(--inputs-background); background: var(--inputs-background)
} }
.ui-menu .ui-menu-item a small { .ui-menu .ui-menu-item a small {
@@ -2050,11 +2058,14 @@ table,
font-size: 1rem; font-size: 1rem;
} }
.uk-alert, .uk-alert {
background: var(--blocks-background);
border: 1px solid var(--border-color);
}
.uk-alert-primary, .uk-alert-primary,
.uk-notification-message { .uk-notification-message {
background: var(--alert-primary); background: var(--alert-primary);
color: var(--text-color);
} }
.uk-alert-warning, .uk-alert-warning,
@@ -2178,7 +2189,7 @@ table,
background-color: var(--button-background); background-color: var(--button-background);
color: var(--button-color); color: var(--button-color);
border: none; border: none;
box-shadow: 0px 0px 0 1px var(--shadow-color); box-shadow: 0px 0px 0 1px color-mix(in srgb, var(--text-color), transparent 98%);
text-transform: none; text-transform: none;
font-size: 1em; font-size: 1em;
} }
@@ -2194,7 +2205,7 @@ table,
background-color: var(--button-muted-background); background-color: var(--button-muted-background);
color: var(--button-muted-color); color: var(--button-muted-color);
border: none; border: none;
box-shadow: 0px 0px 0 1px var(--shadow-color); box-shadow: 0px 0px 0 1px color-mix(in srgb, var(--text-color), transparent 98%);
} }
.pw .uk-button-default { .pw .uk-button-default {
@@ -2220,7 +2231,7 @@ table,
background-color: var(--button-hover-background); background-color: var(--button-hover-background);
color: var(--button-hover-color); color: var(--button-hover-color);
border: none; border: none;
box-shadow: 0px 0px 0 1px var(--shadow-color); box-shadow: 0px 0px 0 1px color-mix(in srgb, var(--text-color), transparent 98%);
} }
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
@@ -2247,7 +2258,7 @@ table,
background-color: var(--button-hover-background); background-color: var(--button-hover-background);
color: var(--button-hover-color); color: var(--button-hover-color);
border: none; border: none;
box-shadow: 0px 0px 0 1px var(--shadow-color); box-shadow: 0px 0px 0 1px color-mix(in srgb, var(--text-color), transparent 98%);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
@@ -2563,7 +2574,7 @@ a:is(:focus, :focus-visible, .ui-state-active, .ui-state-focus) {
#offcanvas-nav .uk-offcanvas-bar { #offcanvas-nav .uk-offcanvas-bar {
background: var(--masthead-background); background: var(--masthead-background);
padding: 0; padding: 0;
box-shadow: 0 4px 7px var(--shadow-color); box-shadow: 0 4px 7px color-mix(in srgb, var(--text-color), transparent 98%);
border-right: 1px solid var(--masthead-border-color) !important; border-right: 1px solid var(--masthead-border-color) !important;
} }
@@ -2609,6 +2620,10 @@ a:is(:focus, :focus-visible, .ui-state-active, .ui-state-focus) {
border-color: var(--masthead-border-color) !important; border-color: var(--masthead-border-color) !important;
} }
.pw:has(:is(.pw-primary-nav > li, .ui-menu[style*="top: 56px"], .ui-menu#ui-id-1, .ui-menu-item > .ui-menu):hover) .tracy-panel {
pointer-events: none;
}
.pw .ui-menu#ui-id-1 { .pw .ui-menu#ui-id-1 {
translate: 0 -1px; translate: 0 -1px;
} }
@@ -2733,10 +2748,6 @@ small {
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }
.AdminDataTable td>a {
color: var(--main-color);
}
.InputfieldPageTable .PageListStatusHidden td { .InputfieldPageTable .PageListStatusHidden td {
opacity: 0.67; opacity: 0.67;
} }
@@ -2798,10 +2809,10 @@ small {
.pw .InputfieldImageEdit__inner, .pw .InputfieldImageEdit__inner,
.pw .gridImage__tooltip { .pw .gridImage__tooltip {
border: none; border: none;
filter: drop-shadow(1px 0px 0px var(--shadow-color)) filter: drop-shadow(1px 0px 0px color-mix(in srgb, var(--text-color), transparent 98%))
drop-shadow(-1px 0px 0px var(--shadow-color)) drop-shadow(-1px 0px 0px color-mix(in srgb, var(--text-color), transparent 98%))
drop-shadow(0px 1px 0px var(--shadow-color)) drop-shadow(0px 1px 0px color-mix(in srgb, var(--text-color), transparent 98%))
drop-shadow(0px -1px 0px var(--shadow-color)); drop-shadow(0px -1px 0px color-mix(in srgb, var(--text-color), transparent 98%));
background: var(--blocks-background); background: var(--blocks-background);
} }
@@ -3441,7 +3452,12 @@ small.ui-button-text
.InputfieldRepeater .InputfieldRepeater
.InputfieldContent .InputfieldContent
.InputfieldRepeaterItem .InputfieldRepeaterItem
> .InputfieldHeader.ui-state-hover, > .InputfieldHeader.ui-state-hover {
background-color: var(--main-background);
border-color: var(--border-color);
color: var(--text-color);
}
.pw .pw
.Inputfields .Inputfields
.InputfieldRepeater:not(.InputfieldIsColor):not(.InputfieldNoBorder) .InputfieldRepeater:not(.InputfieldIsColor):not(.InputfieldNoBorder)
@@ -3456,9 +3472,7 @@ small.ui-button-text
.InputfieldContent .InputfieldContent
.InputfieldRepeaterItem .InputfieldRepeaterItem
> .InputfieldContent { > .InputfieldContent {
background-color: var(--main-background); background-color: transparent;
border-color: var(--border-color);
color: var(--text-color);
} }
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
@@ -3591,7 +3605,7 @@ ul.InputfieldFileList li .InputfieldFileInfo .InputfieldFileName,
position: sticky; position: sticky;
width: 100%; width: 100%;
top: 0; top: 0;
z-index: 199; z-index: 99;
} }
.ui-menu { .ui-menu {
@@ -3700,7 +3714,7 @@ input:not([type="submit"]):not([type="file"]):not([type="checkbox"]):not(
.pw .ui-menu, .pw .ui-menu,
.pw #offcanvas-nav .uk-offcanvas-bar, .pw #offcanvas-nav .uk-offcanvas-bar,
.pw .ui-datepicker { .pw .ui-datepicker {
box-shadow: 0 5px 7.5px 2.5px var(--shadow-color); box-shadow: 0 5px 7.5px 2.5px color-mix(in srgb, var(--text-color), transparent 98%);
} }
.pw-dropdown-menu[data-at="left bottom"], .pw-dropdown-menu[data-at="left bottom"],
@@ -3722,7 +3736,7 @@ input:not([type="submit"]):not([type="file"]):not([type="checkbox"]):not(
} }
.pw-dropdown-menu .ui-menu { .pw-dropdown-menu .ui-menu {
box-shadow: 5px 2.5px 7.5px 2.5px var(--shadow-color) !important; box-shadow: 5px 2.5px 7.5px 2.5px color-mix(in srgb, var(--text-color), transparent 99%) !important;
} }
.pw-dropdown-menu .ui-menu:has(> :nth-child(15)) { .pw-dropdown-menu .ui-menu:has(> :nth-child(15)) {
@@ -3731,12 +3745,12 @@ input:not([type="submit"]):not([type="file"]):not([type="checkbox"]):not(
.pw-dropdown-menu, .pw-dropdown-menu,
.pw ul.ui-menu > li.ui-menu-item > ul.ui-menu { .pw ul.ui-menu > li.ui-menu-item > ul.ui-menu {
z-index: 200 !important; z-index: 150 !important;
border: 1px solid var(--border-color) !important; border: 1px solid var(--border-color) !important;
} }
.pw .ui-front { .pw .ui-front {
z-index: 201 !important; z-index: 101 !important;
} }
.pw ul.pw-dropdown-menu > li.ui-menu-item > ul.ui-menu { .pw ul.pw-dropdown-menu > li.ui-menu-item > ul.ui-menu {
@@ -3804,7 +3818,7 @@ input:not([type="submit"]):not([type="file"]):not([type="checkbox"]):not(
width: min(35vw, 350px); width: min(35vw, 350px);
max-width: min(35vw, 350px); max-width: min(35vw, 350px);
transition: all 0.25s ease; transition: all 0.25s ease;
box-shadow: -12px 0px 12px 0px var(--shadow-color); box-shadow: -12px 0px 12px 0px color-mix(in srgb, var(--text-color), transparent 98%);
} }
#offcanvas-nav .pw-search-form .pw-search-input { #offcanvas-nav .pw-search-form .pw-search-input {
@@ -3934,7 +3948,7 @@ input:not([type="submit"]):not([type="file"]):not([type="checkbox"]):not(
} }
.tox.tox-tinymce-inline { .tox.tox-tinymce-inline {
z-index: 198; z-index: 98;
} }
body .tox.tox-tinymce-inline .tox-editor-container { body .tox.tox-tinymce-inline .tox-editor-container {
@@ -3988,6 +4002,7 @@ body .tox.tox-tinymce-inline .tox-editor-container {
} }
.pw-notices .uk-alert { .pw-notices .uk-alert {
border: none;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }
@@ -4311,8 +4326,6 @@ body:not(.pw-narrow-width)
.PageList .PageListItem .PageListLoading { .PageList .PageListItem .PageListLoading {
height: 0; height: 0;
margin-top: 0.8rem;
margin-bottom: -0.8rem;
opacity: 0; opacity: 0;
} }
@@ -4321,6 +4334,14 @@ body:not(.pw-narrow-width)
transition: opacity 0.5s ease; transition: opacity 0.5s ease;
} }
.PageListLoading[style*="block"] {
display: inline-block !important;
}
.PageListItem:not(:hover) .PageListLoading[style*="block"] {
display: none !important;
}
.uk-description-list dt, .uk-description-list dt,
.uk-description-list dt a { .uk-description-list dt a {
font-size: inherit; font-size: inherit;
@@ -5083,7 +5104,7 @@ a
} }
html.pw .Inputfield.InputfieldTinyMCE .InputfieldContent { html.pw .Inputfield.InputfieldTinyMCE .InputfieldContent {
background-color: var(--blocks-background, #f4f4f4); /* RJC background-color: var(--blocks-background, #f4f4f4); */
} }
.pw .tox-dialog .tox-button--naked { .pw .tox-dialog .tox-button--naked {