diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/admin-custom.css b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/admin-custom.css new file mode 100644 index 00000000..6ca01cc5 --- /dev/null +++ b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/admin-custom.css @@ -0,0 +1,193 @@ +/* inter-regular - latin */ +@font-face { + font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: "Inter"; + font-style: normal; + font-weight: 400; + src: url("./fonts/inter-v18-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} +/* inter-italic - latin */ +@font-face { + font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: "Inter"; + font-style: italic; + font-weight: 400; + src: url("./fonts/inter-v18-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} +/* inter-600 - latin */ +@font-face { + font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: "Inter"; + font-style: normal; + font-weight: 600; + src: url("./fonts/inter-v18-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} +/* inter-600italic - latin */ +@font-face { + font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: "Inter"; + font-style: italic; + font-weight: 600; + src: url("./fonts/inter-v18-latin-600italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} + +/* -------------------------------------------------------------------- */ +/* ---- DEFAULT THEME VARIABLES (LIGHT and DARK) --------------------- */ +/* ---- (keep active while uncommenting the others to test) --------- */ +/* ----------------------------------------------------------------- */ + +:root { + color-scheme: light dark; + + --main-color: #eb1d61; + + --text-color: light-dark(black, 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); + + --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(var(--muted-color), #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-backgroud-hover: var(--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-backgroud-hover: var(--menu-item-backgroud-hover); + + --masthead-input-background: var(--inputs-background); + --masthead-input-color: var(--text-color); + --masthead-input-border: var(--border-color); + + --modal-color: rgba(0,0,0,0.7); + + --alert-text-color: var(--text-color); + --alert-primary: var(--main-background); + --alert-warning: light-dark(#fcda6d, #d57f00); + --alert-success: light-dark(#97ecb2, #139472); + --alert-danger: light-dark(#ffc3c3, #8a1919); + --notes-background: light-dark(#ffd, #bdbdbd33); + + --error-inline-text-color: light-dark(#cd0a0a, #ff1d1d); + + --code-color: light-dark(#0173b0, #e7e695); + --code-background: light-dark(#0173b020, #3c3c3c5e); + + --button-radius: 99999px; + --input-radius: 0; + +} + +@media (prefers-color-scheme: dark) { + * { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } +} + +body.light-theme, +html:has(body.light-theme) { + color-scheme: light; +} + +body.dark-theme, +html:has(body.dark-theme) { + color-scheme: dark; +} + +body.light-theme * { + -webkit-font-smoothing: auto; + -moz-osx-font-smoothing: auto; +} + +body.dark-theme * { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body.main-color-red { + --main-color: #eb1d61; +} + +body.main-color-green { + --main-color: #14ae85; +} + +body.main-color-blue { + --main-color: #2380e6; +} + +/* -------------------------------------------------------------------- */ +/* ---- THEME WITH COLOR MASTHEAD VARIABLES -------------------------- */ +/* ---- (these depend on the default theme variables) --------------- */ +/* ----------------------------------------------------------------- */ +/* +: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); +} + +/* -------------------------------------------------------------------- */ +/* ---- BORDERLESS --------------------------------------------------- */ +/* ------------------------------------------------------------------ */ +/* +:root { + --border-color: var(--main-background); + --inputs-background: var(--blocks-background); +} + +/* -------------------------------------------------------------------- */ +/* ---- MINIMAL LIGHT BLUE AND MINIMAL DARK VARIABLES ---------------- */ +/* ------------------------------------------------------------------ */ +/* +: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); + + --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); + + --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); + + --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); +} diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/admin.css b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/admin.css new file mode 100644 index 00000000..a7962974 --- /dev/null +++ b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/admin.css @@ -0,0 +1,3141 @@ +@import url(./admin-custom.css); + +html, +.pw body { + font-weight: 400; + color: var(--text-color, black); +} + +html, +.pw body, +h1, .uk-h1, h2, .uk-h2, h3, .uk-h3, h4, .uk-h4, h5, .uk-h5, h6, .uk-h6, .uk-heading-small, .uk-heading-medium, .uk-heading-large, .uk-heading-xlarge, .uk-heading-2xlarge, .uk-heading-3xlarge, +.uk-navbar-nav>li>a, .uk-navbar-item, .uk-navbar-toggle { + font-family: "Inter", system-ui, sans-serif; +} + +:focus-visible { + outline: none; +} + +.pw-container { + box-sizing: border-box; +} + +a { + text-underline-offset: 0.125em; +} + +.pw .uk-inline, +.pw #pw-content-head h1, +.pw .InputfieldHeader, +ul.InputfieldFileList li .InputfieldFileInfo .InputfieldFileName, +.pw .AjaxUpload .InputfieldFileInfo .InputfieldFileName, +.pw .uk-input, +.uk-select, +.pw .uk-textarea, +.pw .Inputfield, +.pw .uk-tab > .uk-active > a, +.pw .WireTabs.uk-tab > li.uk-active.pw-tab-muted > a, +.pw .uk-alert-primary, +.pw .uk-alert, +.pw .ui-widget-content, +.pw-table-responsive, +.pw .uk-description-list, +.ModulesList table.AdminDataList td p.module-summary, +.PageList .PageListItemOpen > a.PageListPage, +.pw .PageList .PageListItemOpen.PageListItemHover > a.PageListPage, +.pw .PageListItem a span, +.pw .PageList .PageListItemOpen > a.PageListPage, +.pw +body:not(.pw-narrow-width) +.PageList +.PageListItem.PageListItemOpen.PageListHasChildren +> a.PageListPage:before, +.pw +body:not(.pw-narrow-width) +.PageList +.PageListItem.PageListHasChildren:not(.PageListItemOpen) +> a.PageListPage:before, +.pw .PageList .PageListItem .PageListNumChildren, +.pw .detail, +table, +#pw-footer, +.uk-description-list-divider > dt:nth-child(n + 2), +.pw .uk-table-divider > tr:not(:first-child), +.pw .uk-table-divider > :not(:first-child) > tr, +.pw .uk-table-divider > :first-child > tr:not(:first-child), +.pw .uk-offcanvas-bar, +#offcanvas-nav .pw-sidebar-nav li > a, +.InputfieldHeader.InputfieldStateToggle i.toggle-icon, +._ProcessPageEditViewDropdownToggle { + color: var(--text-color); +} + +@media (hover: hover) and (pointer: fine) { + #offcanvas-nav .pw-sidebar-nav li > a:hover, + .pw .PageList .PageListItemOpen > a.PageListPage:hover, + .pw .PageList .PageListItemOpen.PageListItemHover > a.PageListPage:hover { + color: var(--text-color); + } +} + +.pw #pw-masthead .uk-navbar-nav > li.uk-active, +.pw #pw-masthead .uk-navbar-nav > li.uk-active > a { + color: var(--masthead-active-color); +} + +.uk-alert, +.pw-notices .NoticeMessage a.notice-remove { + color: var(--alert-text-color); +} + +.uk-alert, +.uk-alert-primary { + background: var(--alert-primary); + color: var(--text-color); +} + +.uk-alert-warning { + background: var(--alert-warning); + color: var(--text-color); +} +.uk-alert-success { + background: var(--alert-success); + color: var(--text-color); +} +.uk-alert-danger { + background: var(--alert-danger); + color: var(--text-color); +} + +.uk-nav-default .uk-nav-divider { + border-color: var(--border-color); +} + +.uk-modal, +.ui-widget-overlay { + opacity: 1; + background-color: var(--modal-color); +} + +.uk-modal.uk-open { + display: flex !important; + align-items: center; +} + +.pw .ui-dialog .ui-dialog-content, +.pw .ui-widget-content, +.pw .uk-modal-dialog { + background: var(--main-background); +} + +.pw .uk-modal-dialog, +.pw .ui-dialog { + outline: 1px solid var(--border-color); + border-radius: 0; +} + +.pw .uk-modal-footer { + border-top-color: var(--border-color); + background-color: transparent; +} + +.pw .uk-modal-footer.uk-text-right .uk-button { + margin-right: 0.2em; +} + +.pw .uk-modal-footer.uk-text-right .uk-button { + margin-right: 0; + margin-left: 0.2em; +} + +.pw .tox .tox-dialog-wrap__backdrop { + background-color: var(--modal-color); +} + +.pw .tox .tox-dialog, +.uk-section-muted { + background-color: var(--blocks-background); + border-color: var(--border-color); + color: var(--text-color); + border-radius: 0; + border-style: solid; + border-width: 1px; +} + +.pw .uk-button-text { + color: var(--main-color); +} + +.pw .uk-button-text .ui-priority-secondary { + color: inherit; +} + +.pw .ui-button, +.pw .ui-button.ui-state-default, +.pw .ui-button.ui-state-hover, +.tox-dialog .tox-button, +.pw .ui-button.ui-priority-secondary, +.pw .tox-dialog .tox-button:not(.tox-button--secondary):not(.tox-button--icon), +.pw .vex-dialog-button, +.pw .vex-dialog-button-primary.vex-dialog-button.vex-first, +.pw +.AdminThemeUikit +.vex.vex-theme-default +.vex-dialog-button.vex-dialog-button-primary, +.pw .uk-button, +.pw .uk-button-primary { + background-color: var(--button-background); + color: var(--button-color); + border: none; + box-shadow: 0px 0px 0 1px var(--button-border); + text-transform: none; + font-size: 1em; +} + +.pw .ui-button.ui-priority-secondary, +.pw .ui-button.ui-state-default.ui-priority-secondary, +.pw .tox-dialog .tox-button.tox-button--secondary, +.pw .vex-dialog-button-secondary.vex-dialog-button, +.pw .vex-dialog-button-secondary.vex-dialog-button.vex-last, +.pw .vex.vex-theme-default .vex-dialog-button.vex-dialog-button-secondary, +.pw .uk-button-secondary, +.pw .uk-button-default { + background-color: var(--button-muted-background); + color: var(--button-muted-color); + border: none; + box-shadow: 0px 0px 0 1px var(--button-muted-border); +} + +.pw .ui-button:focus-visible, +.pw.pw .ui-button.ui-state-hover, +.pw .vex-dialog-button:focus, +.uk-button:hover { + background-color: var(--button-hover-background); + color: var(--button-hover-color); + border: none; + box-shadow: 0px 0px 0 1px var(--button-hover-border); +} + +@media (hover: hover) and (pointer: fine) { + .pw .ui-button:hover, + .pw .tox-dialog .tox-button:hover, + .pw .tox-dialog .tox-button.tox-button--secondary:hover, + .pw .tox .tox-button--secondary:hover:not(:disabled), + .pw + .tox-dialog + .tox-button:not(.tox-button--secondary):not(.tox-button--icon):hover, + .pw.pw .ui-button.ui-state-hover, + .pw .vex-dialog-button-secondary.vex-dialog-button:hover, + .pw .vex-dialog-button-secondary.vex-dialog-button.vex-last:hover, + .pw + .vex.vex-theme-default + .vex-dialog-button.vex-dialog-button-secondary:hover, + .pw + .AdminThemeUikit + .vex.vex-theme-default + .vex-dialog-button.vex-dialog-button-primary:hover { + background-color: var(--button-hover-background); + color: var(--button-hover-color); + border: none; + box-shadow: 0px 0px 0 1px var(--button-hover-border); + } +} + +.pw .PageListPage.label > i.icon, +.pw .PageList .PageListItem > a.PageListPage.label > i.icon, +.pw .PageList .PageListItem > a.PageListPage.label > i:not(.icon) { + color: inherit; +} + +.pw .detail, +.pw .notes, +.pw .pw-detail, +.pw .pw-notes, +.pw .description, +.pw .pw-description { + color: var(--muted-color) !important; +} + +.ui-state-error-text, +.ui-widget-content .ui-state-error-text, +.ui-widget-header .ui-state-error-text { + color: var(--error-inline-text-color); +} + +.pw .langTabEmpty.uk-active, +.pw .langTabs .uk-tab > li.uk-active > a { + color: var(--text-color); +} + +a, +.uk-link { + color: var(--main-color); +} + +@media (hover: hover) and (pointer: fine) { + a:hover, + .uk-link:hover, + .uk-link-toggle:hover .uk-link { + color: var(--main-color); + } +} + +.pw .InputfieldToggleGroup label.InputfieldToggleCurrent, +.pw .InputfieldToggleGroup input:checked + label { + color: var(--button-color); +} + +.ui-button, +.InputfieldToggleCurrent, +.tox-dialog .tox-button, +.pw .vex-dialog-button { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.pw .InputfieldToggleGroup label, +.pw .InputfieldToggleGroup input:not(:checked) + label:not(.InputfieldToggleCurrent):hover { + background-color: var(--main-background); + border-color: var(--border-color); + color: var(--text-color); +} + +.pw .InputfieldToggleGroup label.InputfieldToggleCurrent, +.pw .InputfieldToggleGroup input:checked + label, +.pw .InputfieldToggleGroup label:not(.InputfieldToggleCurrent):hover { + background-color: var(--button-hover-background); + border-color: var(--button-hover-background); + color: var(--button-hover-color); +} + +.pw .InputfieldToggleGroup label:last-of-type, +.pw .InputfieldToggleGroup label:first-of-type { + border-radius: 0; + padding: 9px 12px; + min-width: 4em; + min-width: 3.5em; +} + +.pw .InputfieldToggleGroup label:last-of-type { + border-left: none; +} + +.pw .InputfieldToggleGroup label:first-of-type { + border-right: none; +} + +.pw #main .notes, +.pw .PageList .PageListItem.PageListSortItem { + background-color: var(--notes-background); +} + +strong { + font-weight: 600; +} + +h2, +.uk-h2 { + color: var(--text-color); + font-size: 1.8em; +} + +html, +body { + background-color: var(--main-background); + min-height: 100vh; +} + +html:has(body.modal-inline), +body.modal-inline { + background-color: transparent; + min-height: 0; +} + +body { + display: flex; + flex-direction: column; +} + +#main { + width: 100%; + box-sizing: border-box; + flex-grow: 1; +} + +.pw-user-nav .fa-lg { + top: 0; +} + +.pw .uk-navbar-nav > li > a { + text-transform: none; + font-size: 1em; +} + +.pw-logo-link { + display: block; + color: var(--masthead-logo-color); + position: relative; + z-index: 1; + max-width: 90px; + margin: auto; +} + +.pw-logo-link:focus-visible { + color: var(--masthead-logo-color); +} + +@media (hover: hover) and (pointer: fine) { + .pw-logo-link:hover { + color: var(--masthead-logo-color); + } +} + +.pw-logo-link svg { + /* for custom SVG logos */ + min-width: 34px; + min-height: 34px; +} + +.pw-logo-native { + /* for native PW logo */ + width: 34px; + height: 34px; +} + +.ProcessLogin .pw-logo-link { + aspect-ratio: 4/3; + display: flex; + justify-content: center; + align-items: center; +} + +a:focus-visible, +label > :focus-visible, +.ui-dialog .ui-dialog-titlebar .ui-button:focus-visible { + outline: 1px dotted var(--main-color); + outline-offset: 3px; +} + +#pw-mastheads a:focus-visible, +#pw-mastheads label > :focus-visible { + outline-color: var(--masthead-logo-color); +} + +.uk-margin-right { + margin-right: 0 !important; +} + +#pw-footer p:empty { + display: none; +} + +.pw-table-responsive, +.uk-description-list { + color: var(--text-color); + outline: 1px solid var(--border-color); + background-color: var(--blocks-background); +} + +.pw-table-responsive, +.uk-description-list { + padding: 20px 20px 35px 20px; +} + +.pw .ui-menu { + background-color: var(--blocks-background); + color: var(--text-color); + border: 1px solid var(--border-color); + border-color: var(--border-color); +} +@media (hover: hover) and (pointer: fine) { + .pw .ui-menu .ui-menu-item a:hover { + background: transparent; + } +} + +.pw +.ui-menu +.ui-menu-item +a:is(:focus, :focus-visible, .ui-state-active, .ui-state-focus) { + background: var(--menu-item-backgroud-hover); +} + +.ui-menu:focus-within .ui-menu-item .ui-widget-content:not(:focus-within), +.ui-menu:focus-within .ui-menu-item .ui-widget-content:not(:focus-within) a { + background: none; +} + +.ui-menu .ui-menu-item.separator:not(.highlight) { + border-top: 1px solid var(--border-color) !important; +} + +.ui-menu .ui-menu-item a.ui-state-focus, +.ui-menu .ui-menu-item a.ui-state-active { + background-color: transparent; +} + +.pw .ui-menu .ui-menu-item a, +.pw .ui-menu .ui-menu-item a i.fa, +.pw .ui-menu .ui-menu-item i.fa, +.pw .ui-menu.pw-button-dropdown .ui-menu-item a, +.pw .ui-menu.pw-button-dropdown .ui-menu-item a i.fa, +.pw .ui-menu.pw-button-dropdown .ui-menu-item i.fa { + color: inherit; +} + +#pw-masthead:before { + content: ""; + background-color: inherit; + position: fixed; + display: block; + width: 100%; + height: 54px; + pointer-events: none; + top: 0; +} + +#offcanvas-nav #offcanvas-nav-header { + display: block; + margin: 0; + top: 0; + right: 14px; + position: absolute; +} + +#offcanvas-nav .pw-logo { + display: none; +} + +#offcanvas-nav-close i { + color: var(--masthead-active-color); +} + +#offcanvas-nav .uk-offcanvas-bar { + background: var(--masthead-background); + padding: 0; + box-shadow: 0 4px 7px rgba(0, 0, 0, 0.175); + border-right: 1px solid var(--masthead-border-color); +} + +#offcanvas-nav .pw-sidebar-nav li > a { + padding-left: 20px; + padding-right: 20px; +} + +#offcanvas-nav .pw-search-form { + padding: 20px 20px 5px 20px; +} + +.pw #offcanvas-nav .pw-search-form { + padding-top: 42px; +} + +.pw #offcanvas-nav .pw-search-form .pw-search-input, +.pw #offcanvas-nav .pw-search-form .pw-search-input:focus { + height: 35px; +} + +.pw-sidebar-nav > li > ul > li { + border-top: 1px solid; + padding: 4px 0; +} + +.pw-sidebar-nav > li:first-child { + border-top: none; +} + +.pw-sidebar-nav > li { + border-top: 1px solid; + padding: 5px 0; +} + +.pw #pw-mastheads, +.pw #offcanvas-nav .uk-offcanvas-bar, +.pw .ui-menu[style*="top: 56px"], +.pw .ui-menu#ui-id-1, +.pw .ui-menu-item > .ui-menu { + background-color: var(--masthead-background); + color: var(--masthead-active-color); + border-color: var(--masthead-border-color); +} + +.pw .ui-menu#ui-id-1 { + translate: 0 -1px; +} + +.pw +:is( + #pw-masthead, + #pw-masthead-mobile, + #offcanvas-nav .uk-offcanvas-bar, + .ui-menu[style*="top: 56px"], + .ui-menu#ui-id-1, + .ui-menu-item > .ui-menu + ) +.pw +.ui-menu-item +a:is(:focus, :focus-visible, .ui-state-active, .ui-state-focus) { + background: var(--masthead-menu-item-backgroud-hover); +} + +@media (hover: hover) and (pointer: fine) { + .pw + :is( + #pw-masthead, + #pw-masthead-mobile, + #offcanvas-nav .uk-offcanvas-bar, + .ui-menu[style*="top: 56px"], + .ui-menu#ui-id-1, + .ui-menu-item > .ui-menu + ) + .pw + .ui-menu-item + a:hover { + background: var(--masthead-menu-item-backgroud-hover); + } +} + +.pw +:is( + #pw-masthead, + #pw-masthead-mobile, + #offcanvas-nav .uk-offcanvas-bar, + .ui-menu[style*="top: 56px"], + .ui-menu#ui-id-1, + .ui-menu-item > .ui-menu + ) +.ui-menu-item.separator:not(.highlight):not(:first-child) { + border-top: 1px solid var(--masthead-border-color) !important; +} + +.ui-menu .ui-menu-item a small { + color: var(--muted-color) !important; +} + +:is( + .pw #pw-masthead, + .pw #pw-masthead-mobile, + .pw #offcanvas-nav .uk-offcanvas-bar, + .pw .ui-menu[style*="top: 56px"], + .pw .ui-menu#ui-id-1, + .pw .ui-menu-item > .ui-menu + ) +.ui-menu-item +a +small { + color: var(--masthead-text-color) !important; +} + +#offcanvas-toggle > i { + color: var(--masthead-active-color); +} + +@media (hover: hover) and (pointer: fine) { + #offcanvas-toggle:hover > i { + color: var(--masthead-active-color); + } +} + +.pw .Inputfield, +.InputfieldContent, +.InputfieldHeader, +.pw-table-responsive, +.uk-description-list, +.InputfieldStateCollapsed > .InputfieldHeader, +.InputfieldFieldset > .InputfieldHeader, +.InputfieldFieldset > .InputfieldContent, +.InputfieldFieldset.InputfieldStateCollapsed > .InputfieldHeader, +.pw .InputfieldImageEdit__inner, +.pw .gridImage, +.InputfieldFieldset>.InputfieldContent>.Inputfields .Inputfield { + background: var(--blocks-background); +} + +@media (hover: hover) and (pointer: fine) { + .PageList .PageListItem:not(.PageListSortItem):hover { + background: var(--blocks-background); + } +} + +.pw .gridImage__btn { + background: var(--blocks-background); + color: var(--text-color); +} + +@media (hover: hover) and (pointer: fine) { + .pw .gridImage:hover .gridImage__btn:hover { + background: var(--blocks-background); + color: var(--text-color); + } +} + +.AdminDataTable tr { + background: var(--blocks-background); +} + +.AdminDataTable tr.ui-sortable-helper { + border-bottom: 1px solid var(--border-color); +} + +.AdminDataTable td:has(>a) { + color: var(--main-color); +} + +.InputfieldPageTable .PageListStatusHidden td { + opacity: 0.67; +} + +.pw .gridImage__edit { + text-shadow: none; +} + +.pw .gridImage.gridImageEditing .gridImage__inner { + background: none; +} + +.pw +.InputfieldImage:not(.InputfieldStateCollapsed) +> .InputfieldContent +.gridImage { + border: 1px solid var(--border-color); +} + +.pw +.InputfieldImage:not(.InputfieldStateCollapsed) +> .InputfieldContent +.gridImage__overflow { + transition: opacity 0.25s ease; +} + +.pw +.InputfieldImage:not(.InputfieldStateCollapsed) +> .InputfieldContent +.gridImage.gridImage--delete +.gridImage__btn.gridImage__trash { + background: var(--blocks-background); + color: var(--alert-danger); +} + +@media (hover: hover) and (pointer: fine) { + .pw .gridImage:hover .gridImage__inner { + background-color: rgba(0, 0, 0, 0.5) !important; + } + + .InputfieldImageEditAll .gridImage:hover .gridImage__inner { + background-color: var(--blocks-background) !important; + } +} + +.pw .gridImage.gridImage--delete .gridImage__inner { + background-color: color-mix( + in srgb, + var(--alert-danger), + transparent 50% + ) !important; +} + +.pw .InputfieldImageEdit__info { + color: var(--muted-color); + font-size: 0.875rem; +} + +.pw .InputfieldImageEdit__inner, +.pw .gridImage__tooltip { + border: none; + filter: drop-shadow(1px 0px 0px var(--border-color)) + drop-shadow(-1px 0px 0px var(--border-color)) + drop-shadow(0px 1px 0px var(--border-color)) + drop-shadow(0px -1px 0px var(--border-color)); + background: var(--blocks-background); +} + +.pw .gridImage { + border: 1px solid var(--border-color); +} + +.pw .InputfieldImageEdit__imagewrapper { + border-right: 1px solid var(--border-color); +} + +.pw .InputfieldImageEdit__arrow { + border-bottom-color: var(--blocks-background); +} + +.pw .Inputfield > .InputfieldHeader { + margin-bottom: 0; + overflow: auto; +} + +.gridImage__tooltip { + background: var(--blocks-background); + color: var(--text-color); +} + +.pw .gridImage__tooltip table th, +.pw .gridImage__tooltip table td { + background-color: var(--blocks-background) !important; + color: var(--text-color); +} + +.pw .gridImage__tooltip:after { + border-color: transparent; + border-top-color: var(--blocks-background); +} + +.ui-dialog .ui-dialog-titlebar, +.ui-dialog .ui-dialog-buttonpane { + background: var(--main-background); +} + +.ui-dialog .ui-dialog-titlebar .ui-button { + background: none; +} + +.InputfieldContent .pw-table-responsive { + outline: none; + background-color: transparent; + padding: 0; +} + +#pw-masthead, +#pw-masthead-mobile, +.ui-dialog .ui-dialog-titlebar, +.pw .pw-masthead-mobile { + border-bottom: 1px solid var(--masthead-border-color); +} + +.pw .pw-sidebar-nav > li, +.pw .pw-sidebar-nav > li > ul > li, +.pw .pw-sidebar-nav > li > ul > li .pw-nav-add:first-child, +.pw .pw-sidebar-nav > li > ul > li .pw-nav-dup:first-child, +.pw .pw-sidebar-nav > li > ul > li .pw-nav-add { + border-color: var(--masthead-border-color); + border-top-color: var(--masthead-border-color); + border-bottom-color: var(--masthead-border-color); +} + +.pw #offcanvas-nav .pw-sidebar-nav li.uk-open, +.pw .pw-sidebar-nav > li > ul > li { + background-color: var(--masthead-background); +} + +.pw #offcanvas-nav .pw-sidebar-nav li > a { + color: var(--masthead-text-color); +} + +.pw #offcanvas-nav .pw-sidebar-nav li.uk-open > a { + color: var(--masthead-active-color); +} + +.pw-sidebar-nav li > a { + position: relative; +} + +.pw-sidebar-nav li:has(> a:focus-visible), +.pw-sidebar-nav li > ul > li:has(a:focus-visible) { + background-color: var(--masthead-menu-item-backgroud-hover); +} + +@media (hover: hover) and (pointer: fine) { + .pw-sidebar-nav li:has(> a:hover), + .pw-sidebar-nav li > ul > li:has(> a:hover) { + background-color: var(--masthead-menu-item-backgroud-hover); + } +} + +.pw-sidebar-nav li > a:after { + content: "\f061"; + font: normal normal normal 0.8em / 1 FontAwesome; + position: absolute; + color: var(--masthead-text-color); + border-top-color: transparent; + border-left-color: transparent; + right: 17px; + top: 50%; + translate: 0 -40%; +} + +.pw-sidebar-nav li:not(.pw-nav-dup) > a[role="button"]:after { + content: "\f107"; + font-size: 1.1em; +} + +.pw-sidebar-nav +li:not(.pw-nav-dup) +> a[role="button"][aria-expanded="true"]:after { + content: "\f106"; + font-size: 1.1em; +} + +.InputfieldStateToggle .toggle-icon.fa-angle-down { + translate: 0 -10%; +} + +.InputfieldStateToggle .toggle-icon.fa-angle-down:before { + content: "\f106"; +} + +.InputfieldStateToggle .toggle-icon.fa-angle-right:before { + content: "\f107"; +} + +.pw .pw-sidebar-nav > li > ul > li .highlight, +.pw .pw-sidebar-nav > li > ul > li .separator { + border-top: none; +} + +.ui-dialog .ui-dialog-buttonpane { + border-top: 1px solid var(--border-color); + margin-top: 0; +} + +.ui-dialog .ui-dialog-titlebar { + padding-top: 0.7em; + padding-bottom: 0.7em; +} + +.ui-dialog .ui-dialog-titlebar .ui-button { + top: 11px; +} + +.modal #main.pw-container { + margin-top: 2em; +} + +#pw-masthead .uk-navbar-nav > li.uk-active > a:after { + display: none; +} + +#pw-masthead .uk-navbar-nav > li > a.hover:after { + display: none; +} + +@media (hover: hover) and (pointer: fine) { + #pw-masthead .uk-navbar-nav > li > a:hover:after { + display: none; + } +} + +.uk-tab, +.uk-tab > .uk-active > a { + border-radius: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.pw +.uk-tab +> li:not(.uk-active) +> a +.pw +.Inputfield.InputfieldStateCollapsed +> .InputfieldHeader +.uk-breadcrumb +> *, +.pw .uk-tab > li:not(.uk-active) > a .pw .uk-table th, +.Inputfield.InputfieldStateCollapsed > .InputfieldHeader, +.uk-breadcrumb { + color: var(--muted-color); +} + +.pw .uk-nav-header { + color: var(--masthead-text-color); +} + +.pw #pw-masthead .uk-navbar-nav > li, +#pw-masthead .uk-navbar-nav > li > a, +.pw #pw-masthead .pw-search-form .uk-form-icon, +.pw #pw-masthead .pw-search-form .pw-search-input::placeholder, +.pw #offcanvas-nav .pw-search-form .uk-form-icon, +.pw #offcanvas-nav .pw-search-form .pw-search-input::placeholder { + color: var(--masthead-text-color); +} + +.uk-breadcrumb > :nth-child(n + 2):not(.uk-first-column)::before { + margin: 0 15px 0 calc(15px - 4px); +} + +.pw-search-form { + position: relative; +} + +.pw-search-form:after { + content: attr(data-shortcut); + position: absolute; + right: 10px; + font-size: 12px; + color: color-mix(in srgb, var(--masthead-text-color), transparent 40%); + bottom: 6px; + white-space: nowrap; + pointer-events: none; + transition: opacity 0.25s ease; + opacity: 0; +} + +.uk-offcanvas-bar .pw-search-form:after { + right: 29px; + bottom: 13px; +} + +.pw-search-form:has(input:focus:placeholder-shown):after { + opacity: 1; +} + +.pw-search-form .pw-search-input::placeholder { + transition: opacity 0.25s ease; +} + +.pw #pw-masthead .uk-navbar-nav > li i, +#pw-masthead .uk-navbar-nav > li > a i { + color: inherit !important; +} + +.uk-text-muted, +.pw #main .notes { + color: var(--muted-color) !important; +} + +.uk-breadcrumb > * > *, +.uk-breadcrumb > :nth-child(n + 2):not(.uk-first-column)::before { + color: inherit; +} + +body.AdminThemeUikit +.vex.vex-theme-default +.vex-dialog-button.vex-dialog-button-primary, +body.AdminThemeReno +.vex.vex-theme-default +.vex-dialog-button.vex-dialog-button-primary { + background-color: var(--text-color); + color: var(--blocks-background); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.pw .Inputfields select.uk-select:focus-visible, +.pw .Inputfields select.uk-select:not(.uk-form-blank):focus-visible { + border-color: var(--border-color); + color: var(--text-color); + background-color: var(--inputs-background); +} + +.InputfieldStateRequired > .InputfieldHeader:first-child:after { + color: var(--main-color); +} + +.Inputfields .InputfieldRepeater .InputfieldRepeaterDrag { + opacity: 1; +} + +.Inputfield { + outline: 1px solid var(--border-color); + position: relative; +} + +.Inputfield:not(.InputfieldRowLast):has(> .InputfieldHeader):before, +.Inputfield:not(.InputfieldRowLast):has(> .InputfieldHeader):after { + content: ""; + position: absolute; + display: block; + height: 1px; + width: 1px; + bottom: -1px; + background-color: inherit; + z-index: 0; + opacity: 0.5; + pointer-events: none; +} + +.Inputfield:has(> .InputfieldHeader):before { + left: -1px; +} + +.Inputfield:has(> .InputfieldHeader):after { + right: -1px; +} + +.Inputfield > .InputfieldHeader, +.Inputfield > .InputfieldContent { + position: relative; + z-index: 2; +} + +.pw .InputfieldWrapper { + outline: none; +} +.pw +.Inputfields +.InputfieldRepeater +.InputfieldRepeaterItem:not( + .InputfieldRepeaterDeletePending + ).InputfieldStateCollapsed +> .InputfieldHeader, +.pw +.Inputfields +.InputfieldRepeater +.InputfieldContent +.InputfieldRepeaterItem +> .InputfieldHeader, +.pw .InputfieldFileList > li > .InputfieldItemHeader { + background-color: var(--inputs-background) !important; + outline: 1px solid var(--border-color); + color: var(--text-color); + font-weight: inherit; + padding: 0.6em 0 0.6em 0.4em; +} + +@media (hover: hover) and (pointer: fine) { + .pw .Inputfield.InputfieldStateCollapsed:hover > .InputfieldHeader { + background: color-mix( + in srgb, + transparent, + var(--text-color) 2% + ) !important; + color: var(--text-color); + } + + .pw .uk-tab > li:not(.uk-active) > a:hover, + .uk-breadcrumb > * > :hover { + color: var(--muted-color); + } +} + +.pw ul.InputfieldFileList li .InputfieldFileData { + outline: 1px solid var(--border-color); + border: none; + margin-top: 1px; + background-color: var(--blocks-background); +} + +.pw .ui-progressbar { + background-color: var(--blocks-background); + outline: 1px solid var(--main-color); + height: 17px; + line-height: 1; + font-size: 11px; +} + +.pw .ui-progressbar .ui-progressbar-value { + background-color: var(--main-color); +} + +.pw .Inputfields :is(.InputfieldFileUpload, .InputfieldImageUpload) { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 10px; +} + +.pw .AdminThemeUikit .InputfieldImageValidExtensions { + top: 0; +} + +.pw :is(.InputfieldImageValidExtensions, .InputfieldFileValidExtensions) { + margin-left: 0; +} + +.Inputfields .InputfieldRepeater .InputfieldContent .InputfieldRepeaterItem { + margin: 0 0 8px; +} + +.Inputfields .InputfieldAsmSelect .asmListItem { + margin-top: 6px; + border-color: var(--border-color); + outline: none; +} + +.pw .asmListItemLabel, +.pw .asmListItemStatus { + padding: 0.35em; +} + +.Inputfields .InputfieldAsmSelect .asmListItem .asmListItemHandle { + top: 9px; +} + +.Inputfields .InputfieldAsmSelect .asmListItem .asmListItemRemove i { + top: 5px; +} + +.Inputfields +.InputfieldRepeater +.InputfieldRepeaterItem:not( + .InputfieldRepeaterDeletePending + ).InputfieldRepeaterOff +> .InputfieldHeader { + outline-color: var(--inputs-background); +} + +.Inputfields +.InputfieldRepeater +.InputfieldContent +.InputfieldRepeaterItem +> .InputfieldHeader +i.toggle-icon { + color: inherit; +} + +.pw span.asmListItemDesc { + padding-top: 5px; +} + +.pw .asmListItemStatus { + padding-top: 0.48em; +} + +.pw .asmListItem.rowStart:before { + border-top-color: var(--main-color); + color: var(--blocks-background); +} + +.pw .asmListItem.rowStop:not(.rowStart):before { + border-bottom: 5px solid var(--muted-color); + color: var(--blocks-background); +} + +.uk-form-small:not(textarea):not([multiple]):not([size]) { + height: 34.5px; +} + +.pw-panel-element.ui-accordion.ui-widget > .container { + background-color: var(--blocks-background); + outline: 1px solid var(--border-color); +} + +.ProcessFormBuilderAccordion .ui-accordion-header, +.pw-panel-element.ui-accordion.ui-widget > .container .ui-accordion-header, +.pw-panel-element.ui-accordion.ui-widget +> .container +.ui-accordion-content.ui-widget-content { + background-color: var(--blocks-background); +} + +.ui-accordion-header, +.ui-accordion.ui-widget .ui-accordion-header { + margin-top: 6px; +} +.pw-panel-element.ui-accordion.ui-widget .ui-accordion-header { + margin-top: 10px; +} + +.pw-panel-element.ui-accordion.ui-widget .ui-accordion-header, +.ui-accordion.ui-widget .ui-accordion-header h1, +.ui-accordion.ui-widget .ui-accordion-header h2, +.ui-accordion.ui-widget .ui-accordion-header h3, +.ui-accordion.ui-widget .ui-accordion-header h4, +.ui-accordion.ui-widget .ui-accordion-header h5, +.ui-accordion.ui-widget .ui-accordion-header a, +.InputfieldFileList > li > .InputfieldItemHeader { + color: var(--text-color); +} + +.pw-panel-element.ui-accordion .ui-accordion-header .ui-accordion-header-icon { + filter: invert(1); + left: 5px; +} + +body .pw-panel-container .pw-panel-button.ui-button, +body .pw-panel-container .pw-panel-button.ui-button i.fa { + background: var(--inputs-background); + color: var(--text-color); + text-transform: none; +} + +#debug { + background: var(--main-background); + min-height: 100vh; + padding: 15px; +} + +#debug pre { + background: var(--inputs-background); +} + +#debug.ui-accordion.ui-widget .ui-accordion-header { + border: none; + border-bottom: 1px solid transparent; + transition: border-color 0.25s ease 0.25s; + padding-left: 0.635em; +} + +.ui-accordion .ui-accordion-content { + padding-top: 0.25em; +} + +.pw #debug.ui-accordion.ui-widget .ui-accordion-header.ui-state-hover { + background-color: var(--blocks-background); +} + +#debug.ui-accordion.ui-widget .ui-accordion-header-active { + border-bottom: 1px solid var(--border-color); + transition-delay: 0s; +} + +#debug.pw-panel-element.ui-accordion +.ui-accordion-header +.ui-accordion-header-icon { + display: none; +} + +@media (hover: hover) and (pointer: fine) { + .uk-table-hover > tr:hover, + .uk-table-hover tbody tr:hover { + background-color: var(--inputs-background); + } +} + +body .pw-panel-container .pw-panel-button.ui-button { + top: 100px !important; +} + +.ui-widget-content a { + color: var(--main-color); +} + +body +.pw-panel-container +.pw-panel-button.ui-button +small.ui-button-text +> span { + display: none; +} + +.ui-accordion-header, +.ui-accordion.ui-widget .ui-accordion-header { + border: 1px solid; +} + +.ui-accordion-header, +.ui-accordion.ui-widget .ui-accordion-header, +.pw-content li.ui-state-default, +.pw-content .ui-widget-content li.ui-state-default { + background-color: var(--inputs-background); + border-color: var(--border-color); + color: var(--text-color); + font-weight: inherit; +} + +.pw .ui-accordion-header.ui-state-hover, +.pw .ui-accordion.ui-widget .ui-accordion-header.ui-state-hover, +.pw .Inputfields .InputfieldAsmSelect .asmListItem.ui-state-hover, +.pw +.Inputfields +.InputfieldRepeater +.InputfieldContent +.InputfieldRepeaterItem +> .InputfieldHeader.ui-state-hover, +.pw +.Inputfields +.InputfieldRepeater:not(.InputfieldIsColor):not(.InputfieldNoBorder) +> .InputfieldHeader, +.pw +.Inputfields +.InputfieldRepeater:not(.InputfieldIsColor):not(.InputfieldNoBorder) +> .InputfieldContent, +.pw +.Inputfields +.InputfieldRepeater +.InputfieldContent +.InputfieldRepeaterItem +> .InputfieldContent { + background-color: var(--main-background); + border-color: var(--border-color); + color: var(--text-color); +} + +@media (hover: hover) and (pointer: fine) { + .pw .InputfieldFileList > li > .InputfieldItemHeader:hover { + background-color: var(--main-background); + border-color: var(--border-color); + color: var(--text-color); + } +} + +.pw +.Inputfields +.InputfieldRepeater:not(.InputfieldIsColor):not(.InputfieldNoBorder) +> .InputfieldContent +> .Inputfields { + background-color: transparent; +} + +.pw +.Inputfields +.InputfieldRepeater:not(.InputfieldIsColor):not(.InputfieldNoBorder) +> .InputfieldHeader, +.pw +.Inputfields +.InputfieldRepeater:not(.InputfieldIsColor):not(.InputfieldNoBorder) +> .InputfieldContent { + background-color: var(--blocks-background); +} + +.pw .InputfieldNoBorder.InputfieldColumnWidth:not(.InputfieldColumnWidthFirst) { + padding-left: 0; +} + +.pw +.InputfieldNoBorder.InputfieldColumnWidth:not(.InputfieldColumnWidthFirst) +> * { + padding-left: 20px; +} + +.pw .uk-tab > * { + padding-left: 0px; +} + +.pw .Inputfield .selectize-input { + border-color: var(--border-color); + border-radius: var(--input-radius); + line-height: 21px; + background-color: var(--blocks-background); +} + +.pw .Inputfield .selectize-input:not(.has-items) { + background: var(--inputs-background); +} + +.pw .Inputfield .selectize-control.multi .selectize-input.has-items > div { + background: var(--main-background); + border-color: var(--border-color); + color: var(--text-color); +} + +.pw .Inputfield .selectize-control.multi .selectize-input.has-items > div > a { + color: var(--text-color) !important; + border-color: var(--border-color); +} + +input:focus-visible, +.pw .Inputfield .selectize-input.focus { + border-color: var(--border-color); +} + +.pw-content li.ui-state-hover a, +.pw-content .ui-widget-content li.ui-state-hover a { + color: var(--text-color); + font-weight: inherit; +} + +.Inputfields .asmFieldset, +.pw-content .Inputfields .asmFieldset, +#content .Inputfields .asmFieldset { + font-weight: 600; +} + +.Inputfields .asmListItem { + margin-bottom: 4px !important; +} + +.Inputfield select + ol { + margin-top: 4px; +} + +.Inputfields select.uk-select:not(.uk-form-blank) { + background-color: var(--blocks-background); +} + +.pw-content li.ui-state-default a, +.pw-content .ui-widget-content li.ui-state-default a { + color: var(--text-color); +} + +.InputfieldHeader, +ul.InputfieldFileList li .InputfieldFileInfo .InputfieldFileName, +.AjaxUpload .InputfieldFileInfo .InputfieldFileName { + font-weight: 600 !important; + color: var(--text-color); +} + +#pw-mastheads { + position: sticky; + width: 100%; + top: 0; + z-index: 98; +} + +.ui-menu { + padding: 5px 0; +} + +.pw .Inputfields select.uk-select:not(.uk-form-blank), +.pw .Inputfield .selectize-input, +.Inputfields +input:not([type="submit"]):not([type="file"]):not([type="checkbox"]):not( + [type="radio"] + ):not(.uk-form-blank), +.Inputfields textarea:not(.uk-form-blank) { + border-color: var(--border-color); + border-radius: var(--input-radius); +} + +.InputfieldCheckboxes ul li { + padding: 3px 0; +} + +.pw .uk-checkbox { + border-color: transparent; +} + +.pw .uk-radio, +.pw .uk-radio:is(.focus, :focus-visible) { + border-color: var(--border-color); +} + +.pw .uk-radio:checked, +.pw .uk-radio:is(.focus, :focus-visible):checked { + border-color: var(--main-color); +} + +input[type="radio"]:focus-visible:checked, +.uk-radio:focus-visible:checked { + background-color: color-mix( + in srgb, + var(--main-color), + var(--text-color) 10% + ) !important; +} + +.uk-checkbox:focus-visible, +#pw-masthead .pw-search-form .pw-search-input:focus-visible, +#offcanvas-nav +.pw-search-form +.pw-search-input:focus-visible +.Inputfields +input:not([type="submit"]):not([type="file"]):not([type="checkbox"]):not( + [type="radio"] + ):not(.uk-form-blank):focus-visible, +.Inputfields textarea:not(.uk-form-blank):focus-visible { + border-color: var(--border-color); +} + +.uk-checkbox:focus-visible { + background-color: color-mix( + in srgb, + var(--muted-color), + transparent 55% + ) !important; +} +.uk-checkbox:checked:focus-visible { + background-color: color-mix( + in srgb, + var(--main-color), + var(--text-color) 10% + ) !important; +} + +.pw .ui-menu, +.pw #offcanvas-nav .uk-offcanvas-bar, +.pw .ui-datepicker { + box-shadow: 0 5px 7.5px 2.5px rgba(0, 0, 0, 0.02); +} + +.pw-dropdown-menu[data-at="left bottom"], +.pw-dropdown-menu[data-at="left bottom"] .ui-menu, +.pw-dropdown-menu-shorter.ui-autocomplete { + position: fixed !important; + overflow-y: auto; + max-height: calc(100vh - 70px); + margin-top: -1px !important; +} + +.uk-nav a .PageListStatusHidden, +.pw-dropdown-menu a .PageListStatusHidden { + opacity: 1; +} + +.pw-dropdown-menu-shorter.ui-autocomplete { + top: 57px !important; +} + +.pw-dropdown-menu .ui-menu { + box-shadow: 5px 2.5px 7.5px 2.5px rgba(0, 0, 0, 0.015) !important; +} + +.pw-dropdown-menu .ui-menu:has(> :nth-child(15)) { + top: 62px !important; +} + +.pw-dropdown-menu, +.pw ul.ui-menu > li.ui-menu-item > ul.ui-menu { + z-index: 99 !important; + border: 1px solid var(--masthead-border-color) !important; +} + +.pw ul.pw-dropdown-menu > li.ui-menu-item > ul.ui-menu { + border: 1px solid var(--border-color) !important; +} + +.pw .ui-menu .ui-menu-item .ui-menu.navJSON .ui-menu-item.add a, +.pw .ui-menu .ui-menu-item .ui-menu.navJSON .ui-menu-item.highlight a { + border-color: var(--masthead-border-color) !important; +} + +.uk-navbar-nav > li > a, +.uk-navbar-item, +.uk-navbar-toggle { + min-height: 55px; +} +#pw-masthead, +#pw-masthead-mobile { + background: none; +} +#pw-masthead, +#pw-masthead-mobile, +#pw-mastheads { + height: 56px; +} +img.pw-logo { + max-height: 31px; + display: block; +} + +@media (hover: hover) and (pointer: fine) { + img.pw-logo-native:hover { + filter: brightness(0.85); + } +} + +.uk-checkbox, +#pw-masthead .pw-search-form .pw-search-input, +#offcanvas-nav .pw-search-form .pw-search-input, +.Inputfields +input:not([type="submit"]):not([type="file"]):not([type="checkbox"]):not( + [type="radio"] + ):not(.uk-form-blank), +.Inputfields textarea:not(.uk-form-blank) { + border-radius: var(--input-radius); +} + +#pw-masthead .pw-search-form .pw-search-input, +#offcanvas-nav .pw-search-form .pw-search-input, +#pw-masthead .pw-search-form .pw-search-input:focus, +#offcanvas-nav .pw-search-form .pw-search-input:focus, +#pw-masthead .pw-search-form .pw-search-input:focus-visible, +#offcanvas-nav .pw-search-form .pw-search-input:focus-visible { + background-color: var(--masthead-input-background); + color: var(--masthead-input-color); + border-color: var(--masthead-input-border); + height: 31px; + border-radius: 9999px; + font-size: 15px; + padding-left: 30px !important; + padding-right: 2px; +} + +#pw-masthead .pw-search-form .pw-search-input { + width: min(35vw, 350px); + max-width: min(35vw, 350px); + transition: all 0.25s ease; + box-shadow: -12px 0px 12px 0px var(--masthead-background); +} + +#offcanvas-nav .pw-search-form .pw-search-input { + min-width: 100%; +} + +#pw-masthead .pw-search-form { + position: absolute; + right: 0; +} + +#pw-masthead .uk-navbar-right { + padding-right: 45px; +} + +#pw-masthead .pw-search-form .pw-search-input:not(:focus, :focus-visible) { + max-width: 1.5em; + padding-left: 0 !important; + padding-right: 0; + border-color: transparent; + background-color: transparent; + cursor: pointer; + color: transparent; + opacity: 0; +} + +#pw-masthead +.pw-search-form +.pw-search-input:not(:focus, :focus-visible)::selection { + background-color: transparent; +} + +.pw-search-form .pw-search-input:not(:focus, :focus-visible)::placeholder { + opacity: 0; +} + +.pw-search-form .uk-form-icon { + max-width: 31px; +} + +.uk-checkbox:focus-visible, +.Inputfields +input:not([type="submit"]):not([type="file"]):not([type="checkbox"]):not( + [type="radio"] + ):not(.uk-form-blank):focus-visible, +.Inputfields textarea:not(.uk-form-blank):focus-visible { + color: inherit; + border-color: var(--border-color); + background: var(--inputs-background); + outline: none; +} + +.Inputfields +input:not([type="submit"]):not([type="file"]):not([type="checkbox"]):not( + [type="radio"] + ):not(.uk-form-blank):not(:focus-visible) { + border-color: var(--border-color); +} + +.Inputfields +.InputfieldRepeater +.InputfieldContent +.InputfieldRepeaterItem +> .InputfieldContent { + outline: none; +} + +.InputfieldRepeaterItem > .InputfieldContent { + position: relative; + z-index: 1; +} + +.pw-notices, +.pw-notices li { + margin: 0; +} + +.pw-notices .NoticeMessage { + border-bottom: 1px solid var(--border-color); +} + +.uk-tab > li.uk-active, +.WireTabs.uk-tab > li.uk-active.pw-tab-muted { + background: transparent; +} + +.uk-tab > li > a { + color: var(--muted-color); + border: none; + border-bottom: 6px solid transparent; + padding: 10px 0px; + margin-right: 30px; +} + +.uk-tab > li > a:focus-visible { + color: var(--text-color); +} + +@media (hover: hover) and (pointer: fine) { + .uk-tab > li > a:hover { + color: var(--text-color); + } +} + +.uk-tab > li:last-child > a { + margin-right: 0; +} + +.uk-tab > .uk-active > a, +.WireTabs.uk-tab > li.uk-active.pw-tab-muted > a { + color: var(--text-color); + border: none; + border-bottom: 6px solid var(--main-color); +} + +.WireTabs > * { + margin-left: -1px; +} + +.uk-tab::before { + border-bottom: 0; +} + +.Inputfields +input:not([type="submit"]):not([type="file"]):not([type="checkbox"]):not( + [type="radio"] + ):not(.uk-form-blank), +.Inputfields textarea:not(.uk-form-blank) { + background-color: var(--inputs-background); +} + +.tox.tox-tinymce-inline { + z-index: 97; +} + +body .tox.tox-tinymce-inline .tox-editor-container { + overflow: visible !important; +} + +.pw .tox.tox-tinymce-inline .tox-editor-header { + translate: -0.5px 0.5px; +} + +.InputfieldTinyMCE .InputfieldTinyMCEInline.InputfieldTinyMCEInline, +.pw .tox .tox-textarea-wrap, +.pw .tox .tox-textfield { + border: 1px solid; + border-color: var(--border-color); + background-color: var(--inputs-background); + border-radius: var(--input-radius); + color: var(--text-color); +} + +.InputfieldTinyMCE +.InputfieldTinyMCEInline.InputfieldTinyMCEInline:focus-visible, +.pw .tox .tox-textarea-wrap:focus-within, +.pw .tox .tox-textfield:focus-visible { + border-color: var(--border-color); + outline: none; + box-shadow: none; + color: var(--text-color); + background-color: var(--inputs-background); +} + +.mce-edit-focus { + outline: none; + border-color: var(--border-color); +} + +.tox-edit-area__iframe { + background-color: var(--inputs-background); +} + +.pw .tox-collection__item-label { + color: #222; +} + +.InputfieldContent .tox.tox-tinymce-inline .tox-edit-area__iframe { + background-color: var(--inputs-background); +} + +.pw-notices .uk-alert { + border-bottom: 1px solid var(--border-color); +} + +.Inputfields +.InputfieldRepeater +.InputfieldContent +.InputfieldRepeaterItem +> .InputfieldHeader.ui-state-error { + text-decoration: line-through; + background: var(--alert-danger); + color: var(--text-color); + border-color: var(--border-color); + outline-color: var(--border-color); +} + +.pw-notices .NoticeWarning a.notice-remove, +.pw-notices .NoticeError a.notice-remove { + color: var(--text-color); +} + +.PageList .PageListItem.PageListItemOpen { + border-color: transparent; + background: transparent; +} + +#pw-masthead .uk-navbar-nav > li > a.hover { + color: var(--masthead-text-color); +} +@media (hover: hover) and (pointer: fine) { + #pw-masthead .uk-navbar-nav > li > a:hover { + color: var(--masthead-text-color); + } +} + +.PageList .PageListItem > a.PageListPage, +.PageList .PageListItem.PageListItemHover > a.PageListPage, +.PageList .PageListItemOpen > a.PageListPage, +.PageListPage { + color: var(--text-color); +} +@media (hover: hover) and (pointer: fine) { + .PageList .PageListItemOpen > a.PageListPage:hover, + .PageList .PageListItemOpen.PageListItemHover > a.PageListPage:hover { + color: var(--text-color); + } +} + +.PageList .PageListItemOpen > a.PageListPage, +.PageList .PageListItemOpen.PageListItemHover > a.PageListPage, +.PageListItem a span { + color: inherit; +} +@media (hover: hover) and (pointer: fine) { + .PageList .PageListItemOpen > a.PageListPage:hover, + .PageList + .PageListItemOpen.PageListItemHover + > a.PageListPage:hover + .PageList + .PageListItemOpen.PageListItemHover + > a { + color: inherit; + } +} + +.PageList .PageListStatusHidden > a.PageListPage { + opacity: 0.4; +} + +.PageList .PageListItem:has(:focus-visible) { + background-color: var(--blocks-background); +} + +.PageList .PageListActions a, +.PageList .PageListerActions a, +.PageList .PageListMoveNote a { + border-radius: 0; +} + +.PageList .PageListItem:not(:hover):focus-within .PageListActions.actions { + visibility: visible; +} + +.PageList .PageListItem:not(:hover) .PageListActions.actions { + opacity: 0 !important; +} + +.PageList .PageListItem:not(:hover):has(a:focus-visible) .PageListActions.actions { + opacity: 1 !important; +} + +body:not(.pw-narrow-width) +.PageList +.PageListItem.PageListItemOpen.PageListHasChildren +> a.PageListPage:before, +body:not(.pw-narrow-width) +.PageList +.PageListItem.PageListHasChildren:not(.PageListItemOpen) +> a.PageListPage:before { + color: var(--text-color); +} + +.PageList .PageListActions a, +.PageList .PageListerActions a, +.PageList .PageListMoveNote a, +.PageList .PageListActions a:focus-visible, +.PageList .PageListerActions a:focus-visible, +.PageList .PageListMoveNote a:focus-visible { + background-color: transparent; + color: var(--muted-color); + font-weight: 500; + font-size: 13px; + letter-spacing: 0.5px; + translate: 0 1px; +} +@media (hover: hover) and (pointer: fine) { + .PageList .PageListActions a:hover, + .PageList .PageListerActions a:hover, + .PageList .PageListMoveNote a:hover { + background-color: transparent; + color: var(--muted-color); + font-weight: 500; + font-size: 13px; + letter-spacing: 0.5px; + translate: 0 1px; + } +} + +.PageList .PageListItem > a.PageListPage i.PageListStatusIcon, +body:not(.pw-narrow-width) .PageList .PageListItem.PageListStatusHidden, +body:not(.pw-narrow-width) +.PageList +.PageListItem.PageListStatusHidden.PageListItemOpen.PageListHasChildren +> a.PageListPage:before, +body:not(.pw-narrow-width) +.PageList +.PageListItem.PageListStatusHidden.PageListHasChildren:not(.PageListItemOpen) +> a.PageListPage:before { + color: var(--muted-color); +} + +.PageList .PageListItem > a.PageListPage { + color: var(--text-color); +} +@media (hover: hover) and (pointer: fine) { + .PageList .PageListActions a:hover, + .PageList .PageListerActions a:hover, + .PageList .PageListMoveNote a:hover, + .PageList .PageListItem > a.PageListPage:hover { + color: var(--text-color); + } +} + +.PageList .PageListItem { + border-bottom: none; +} + +.PageList a.PageListPage span { + color: inherit; +} + +.PageList .PageListStatusHidden > a.PageListPage, +.pw .PageList .PageListStatusHidden.PageListItemOpen > a.PageListPage { + opacity: 1; + color: var(--muted-color) !important; +} +@media (hover: hover) and (pointer: fine) { + .PageList .PageListStatusHidden > a.PageListPage:hover { + opacity: 1; + color: var(--muted-color) !important; + } +} + +.PageList .PageListStatusHidden > a.PageListPage { + color: var(--muted-color); +} + +#pw-content-body ul.uk-pagination > li > a { + border: 1px solid var(--border-color) !important; +} + +#pw-content-body ul.uk-pagination > li > a { + border-color: var(--border-color) !important; + background: var(--blocks-background) !important; + color: var(--muted-color) !important; + border-radius: 0 !important; +} + +#pw-content-body ul.uk-pagination > li.uk-active > a { + background: var(--text-color) !important; + color: var(--blocks-background) !important; +} + +#pw-content-body ul.uk-pagination > li:not(.uk-active) > a:focus { + background: var(--inputs-background) !important; + color: var(--muted-color) !important; +} +@media (hover: hover) and (pointer: fine) { + #pw-content-body ul.uk-pagination > li:not(.uk-active) > a:hover { + background: var(--inputs-background) !important; + color: var(--muted-color) !important; + } +} + +#pw-content-body ul.uk-pagination > li.uk-active + li > a { + border-left: none !important; +} + +.uk-pagination a { + display: block; +} +body:not(.pw-narrow-width) +.PageList +.PageListItem.PageListItemOpen.PageListNoChildren +> a.PageListPage:before { + content: "\f107"; + font-family: fontAwesome; + color: rgba(0, 0, 0, 0.25); +} +.PageList +.PageListItemOpen.PageListNoChildren ++ .PageListPlaceholder +> .PageListPlaceholderItem { + background-color: transparent !important; + height: auto; + min-height: 1.5rem; +} +.PageList +.PageListItemOpen.PageListNoChildren ++ .PageListPlaceholder +> .PageListPlaceholderItem:after { + content: "--------"; + display: inline; + color: rgba(0, 0, 0, 0.13); +} + +.PageListSortPlaceholder { + min-height: 1.5rem; + width: 100% !important; + background-color: rgba(0, 0, 0, 0.07) !important; + border-left: none !important; +} + +.pw .PageListSortItem > a.PageListPage { + background-color: transparent; +} + +.PageList .PageListItemOpen.PageListNoChildren .PageListPlaceholder { + z-index: 1; + position: relative; + background-color: transparent !important; + width: 200px !important; +} +.PageList +.PageListItemOpen.PageListNoChildren ++ .PageListPlaceholder:has(.PageListSortPlaceholder) +.PageListPlaceholderItem { + display: none; +} + +.PageListItem .PageListActions.actions { + display: inline-block !important; +} +@media (hover: hover) and (pointer: fine) { + .PageListItem:hover .PageListActions.actions { + opacity: 1 + } +} + +.PageList .PageListItem > a.PageListPage.label > i.icon { + padding: 0 0.25em 0 0; + color: var(--text-color); +} + +.PageList .PageListItem > a.PageListPage.label > i:not(.icon) { + color: inherit; +} + +.PageList +.PageListItem +.PageListActionFilter:not(.PageListActionFilterActive) +> a { + background-color: var(--inputs-background); + color: var(--text-color); + font-weight: normal; +} +@media (hover: hover) and (pointer: fine) { + .PageList + .PageListItem + .PageListActionFilter:not(.PageListActionFilterActive) + > a:hover { + background-color: var(--inputs-background); + color: var(--text-color); + font-weight: normal; + } +} + +.PageList .PageListItem .PageListActionFilter.PageListActionFilterActive > a { + color: var(--blocks-background); + background-color: var(--main-color); +} + +.PageListNumChildren { + opacity: 0.5; + font-weight: 500; +} + +.PageList .PageListItem .PageListLoading { + height: 0; + margin-top: 0.8rem; + margin-bottom: -0.8rem; + opacity: 0; +} + +.PageList .PageListItem.PageListItemOpen > .PageListLoading { + opacity: 0.5; + transition: opacity 0.5s ease; +} + +.uk-description-list dt, +.uk-description-list dt a { + font-size: inherit; + text-transform: none; +} + +.uk-description-list dd { + color: var(--text-color); +} + +.uk-description-list dt a .fa { + color: var(--muted-color); + opacity: 0.2; +} + +table, +#pw-footer, +.uk-description-list-divider > dt:nth-child(n + 2), +.uk-table-divider > tr:not(:first-child), +.uk-table-divider > :not(:first-child) > tr, +.uk-table-divider > :first-child > tr:not(:first-child) { + border-color: var(--border-color); +} + +.uk-table-divider > tbody > tr:last-child { + border-bottom-color: var(--border-color); +} + +.pw-table-resizable td, +.pw-table-resizable th { + border-left-color: var(--border-color); +} + +.uk-table th { + font-weight: normal; + color: var(--muted-color); +} + +@media (hover: hover) and (pointer: fine) { + .uk-table th .tablesorter-header-inner:hover { + color: var(--text-color); + } +} + +.uk-breadcrumb { + margin-bottom: 10px; +} +label:has(> .uk-checkbox), +.InputfieldCheckbox .InputfieldContent.uk-form-controls label { + display: inline-flex; +} + +.uk-radio, +.uk-checkbox { + transition: none; +} +.pw input[type="checkbox"], +.pw .uk-checkbox, +.Inputfield input[type="checkbox"], +td > label > input[type="checkbox"].uk-checkbox, +body .InputfieldCheckboxes input[type="checkbox"], +#main .InputfieldCheckboxes input[type="checkbox"], +body .LanguageSupport label.checkbox.detail input[type="checkbox"], +#main .LanguageSupport label.checkbox.detail input[type="checkbox"], +body .uk-form-controls-text label:only-of-type input[type="checkbox"], +#main .uk-form-controls-text label:only-of-type input[type="checkbox"], +body .InputfieldCheckboxes input.uk-checkbox, +#main .InputfieldCheckboxes input.uk-checkbox, +body .LanguageSupport label.checkbox.detail input.uk-checkbox, +#main .LanguageSupport label.checkbox.detail input.uk-checkbox, +body .uk-form-controls-text label:only-of-type input.uk-checkbox, +#main .uk-form-controls-text label:only-of-type input.uk-checkbox { + font-size: 0.65rem; + margin-top: 0; + margin-right: 0.8em; + position: relative; + -webkit-appearance: none; + appearance: none; + outline: none; + width: 3.5em; + height: 2em; + border: none; + background-color: var(--muted-color); + background-color: color-mix(in srgb, var(--muted-color), transparent 30%); + border-radius: 3em; + box-shadow: none; + flex-shrink: 0; + vertical-align: middle; + align-items: center; + top: 0; + display: inline-flex; +} +.uk-checkbox:after, +body .InputfieldCheckboxes input[type="checkbox"]:after, +#main .InputfieldCheckboxes input[type="checkbox"]:after, +body .LanguageSupport label.checkbox.detail input[type="checkbox"]:after, +#main .LanguageSupport label.checkbox.detail input[type="checkbox"]:after, +body .uk-form-controls-text label:only-of-type input[type="checkbox"]:after, +#main .uk-form-controls-text label:only-of-type input[type="checkbox"]:after, +body .InputfieldCheckboxes input.uk-checkbox:after, +#main .InputfieldCheckboxes input.uk-checkbox:after, +body .LanguageSupport label.checkbox.detail input.uk-checkbox:after, +#main .LanguageSupport label.checkbox.detail input.uk-checkbox:after, +body .uk-form-controls-text label:only-of-type input.uk-checkbox:after, +#main .uk-form-controls-text label:only-of-type input.uk-checkbox:after, +body .uk-checkbox:after, +#main .uk-checkbox:after { + content: ""; + position: relative; + background-color: var(--blocks-background); + width: 1.5em; + height: 1.5em; + border-radius: 50%; + box-shadow: none; + margin: 0 0.3em; +} +.uk-checkbox:checked, +body .InputfieldCheckboxes input[type="checkbox"]:checked, +#main .InputfieldCheckboxes input[type="checkbox"]:checked, +body .LanguageSupport label.checkbox.detail input[type="checkbox"]:checked, +#main .LanguageSupport label.checkbox.detail input[type="checkbox"]:checked, +body .uk-form-controls-text label:only-of-type input[type="checkbox"]:checked, +#main .uk-form-controls-text label:only-of-type input[type="checkbox"]:checked, +body .InputfieldCheckboxes input.uk-checkbox:checked, +#main .InputfieldCheckboxes input.uk-checkbox:checked, +body .LanguageSupport label.checkbox.detail input.uk-checkbox:checked, +#main .LanguageSupport label.checkbox.detail input.uk-checkbox:checked, +body .uk-form-controls-text label:only-of-type input.uk-checkbox:checked, +#main .uk-form-controls-text label:only-of-type input.uk-checkbox:checked, +body .uk-checkbox:checked, +#main .uk-checkbox:checked { + flex-direction: row-reverse; + background-color: var(--main-color); +} + +body .InputfieldCheckboxes .InputfieldCheckboxesStacked li, +#main .InputfieldCheckboxes .InputfieldCheckboxesStacked li, +body .InputfieldCheckbox .InputfieldCheckboxesStacked li, +#main .InputfieldCheckbox .InputfieldCheckboxesStacked li, +body .InputfieldCheckboxes .InputfieldCheckboxesColumns li, +#main .InputfieldCheckboxes .InputfieldCheckboxesColumns li, +body .InputfieldCheckbox .InputfieldCheckboxesColumns li, +#main .InputfieldCheckbox .InputfieldCheckboxesColumns li { + padding-bottom: 3px; +} + +.InputfieldCheckboxes ul li { + list-style: none !important; + margin: 0 !important; +} +.uk-checkbox:checked, +body .uk-checkbox:checked, +#main .uk-checkbox:checked { + background-image: none; +} + +input.gridImage__deletebox { + display: none !important; +} + +.uk-radio:checked { + background-color: var(--main-color) !important; +} + +.ui-dialog .ui-dialog-titlebar .ui-button, +.ui-dialog .ui-dialog-titlebar { + color: var(--text-color); + font-weight: 600; +} + +.ui-dialog .ui-dialog-titlebar .ui-button:focus, +.ui-dialog .ui-dialog-titlebar .ui-button.ui-state-hover { + color: var(--text-color); + background-color: transparent; +} +@media (hover: hover) and (pointer: fine) { + .ui-dialog .ui-dialog-titlebar .ui-button:hover { + color: var(--text-color); + background-color: transparent; + } +} + +.pw .ui-dialog .ui-dialog-titlebar .ui-button.ui-dialog-titlebar-close { + padding-top: 0px; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + right: 15px; +} + +.ProcessLogin .pw-notices { + position: fixed; + top: 0; + left: 0; + right: 0; +} + +body.ProcessLogin.pw-guest .pw-notices .notice-remove { + display: block; +} + +body.pw-guest .pw-notices > li > .uk-container { + text-align: left; +} + +.ProcessLogin #ProcessLoginForm > .Inputfields { + padding: 0 30px; + background-color: var(--blocks-background); + width: fit-content; + display: flex; + flex-direction: column; + margin-top: 0; +} + +.ProcessLogin #ProcessLoginForm { + width: fit-content; +} + +.pw .ProcessLogin #ProcessLoginForm .Inputfield, +.pw .ProcessLogin #ProcessLoginForm #wrap_login_name, +.pw .ProcessLogin #ProcessLoginForm #wrap_login_pass, +.pw .ProcessLogin #ProcessLoginForm #wrap_Inputfield_login_submit { + margin: 5px auto !important; +} + +.pw .ProcessLogin #ProcessLoginForm input, +.pw .ProcessLogin #ProcessLoginForm #wrap_login_name input, +.pw .ProcessLogin #ProcessLoginForm #wrap_login_pass input { + text-align: left; +} + +.pw .ProcessLogin #ProcessLoginForm input::placeholder { + color: var(--muted-color); +} + +.ProcessLogin #pw-masthead-mobile { + background-color: transparent; + border-bottom: none; + position: relative; + height: auto; +} + +.ProcessLogin #ProcessLoginForm .InputfieldContent { + padding-left: 0; + padding-right: 0; +} + +.ProcessLogin #ProcessLoginForm > .Inputfields input:focus-visible { + outline: none; + background-color: var(--blocks-background); +} + +.ProcessLogin .pw-logo-link > * { + scale: 1.35; +} + +html.pw:has(.ProcessLogin) { + display: flex; + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; + align-items: center; + min-height: 100vh; +} + +.ProcessLogin { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 40px; + min-width: 20vw; + min-height: 30vh; + max-width: 380px; + max-height: 900px; + border: 1px solid var(--border-color); +} + +html.pw body.ProcessLogin { + background: var(--blocks-background); + box-shadow: none; + padding: 20px; + display: flex; + justify-content: center; + align-content: center; + flex-direction: column; + position: static; + margin: auto; +} + +html.pw body.ProcessLogin #pw-mastheads { + position: static; +} + +html.pw body.ProcessLogin > #main { + margin-bottom: 0 !important; + padding: 0 !important; + max-width: 390px !important; + margin-top: 0; +} + +pre, +:not(pre) > code, +:not(pre) > kbd, +:not(pre) > samp { + color: var(--code-color, #0173b0); + background-color: var(--code-background, #0173b027); + outline: none; + border: none; + border-radius: 0; +} + +.ui-slider, +.ui-slider-horizontal { + background: #999; +} +.ui-slider .ui-slider-range, +.ui-widget .ui-slider .ui-slider-range, +.ui-widget-content .ui-slider .ui-slider-range { + background: var(--border-color); +} + +.pw .asmListItem > .asmListItemStatus > .columnWidth:not(.columnWidthOff) { + color: inherit; +} +@media (hover: hover) and (pointer: fine) { + .pw + .asmListItem + > .asmListItemStatus + > .columnWidth:not(.columnWidthOff):hover { + color: var(--main-color); + } +} + +.pw .asmListItem .columnWidthBar { + background-color: var(--main-color) !important; + z-index: 0; +} + +.pw .asmListItem > *:not(.columnWidthBar), +.pw .asmListItem .asmListItemEdit, +.pw .asmListItem .asmListItemEdit > *, +.pw .asmListItem .asmListItemStatus { + opacity: 1; + color: var(--text-color); +} + +.pw .asmListItem .asmListItemEdit > a, +.pw .asmListItem .asmListItemStatus > * { + z-index: 1; + position: relative; +} + +.ui-menu .ui-menu-item.separator:not(.highlight):first-child { + border-top: none !important; +} + +.ui-menu:has(> .ui-menu-item.add:first-child a) { + padding-top: 0; +} + +.ui-menu > .ui-menu-item.add:first-child a { + padding-top: 12px !important; + padding-bottom: 10px !important; +} +.ui-menu +.ui-menu-item.separator:not(.highlight):not( + :first-child + ).pw-pagelist-show-all { + margin-top: 10px; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; +} +.ui-menu +.ui-menu-item +.ui-menu.navJSON +.ui-menu-item:not(.add):not(.highlight):not(:first-child).pw-pagelist-show-all +> a { + margin-top: 0; + margin-bottom: 0; + padding-top: 10px; + padding-bottom: 10px; +} + +.ui-menu > .ui-menu-item.add:first-child { + margin-bottom: 8px; +} + +.ui-menu:has(> .pw-nav-add:last-child a), +.ui-menu:has(> .ui-menu-item.separator:not(:first-child):last-child a) { + padding-bottom: 0; +} + +.ui-menu > .pw-nav-add:last-child, +.ui-menu .ui-menu-item.separator:not(:first-child):last-child { + padding-bottom: 0 !important; + padding-top: 0 !important; + margin-top: 12px; +} + +.ui-menu +.ui-menu-item.separator:not(.highlight):not(:first-child).pw-pagelist-show-all ++ .pw-nav-add { + margin-top: 0; +} + +.ui-menu > .pw-nav-add:last-child a, +.ui-menu .ui-menu-item.separator:not(:first-child):last-child a { + padding-top: 10px !important; + padding-bottom: 12px !important; +} + +.uk-tab a { + background-color: transparent !important; +} + +.uk-tab > * > a { + text-transform: none; + font-size: 1em; +} + +.langTabs .ui-tabs-nav > li > a, +.langTabs .uk-tab > li > a { + margin: 0 20px 0 0; + padding: 6px 0; + border-bottom: 5px solid transparent; + opacity: 1; + background: transparent !important; + color: var(--muted-color); + text-transform: uppercase; +} + +.Inputfields .langTabsContainer .langTabs > .uk-tab { + margin-bottom: -1px; + z-index: 1; +} + +.langTabs .ui-tabs-nav > li.uk-active > a, +.langTabs .uk-tab > li.uk-active > a { + border-bottom-color: var(--main-color); +} + +.langTabs .ui-tabs-nav > li, +.langTabs .uk-tab > li { + margin: 0; +} + +.langTabs .ui-tabs-nav > li > a, +.langTabs .uk-tab > li > a, +.langTabs .ui-tabs-nav > li.langTabEmpty > a, +.langTabs .uk-tab > li.langTabEmpty > a { + color: var(--muted-color); + position: relative; +} + +.langTabs .ui-tabs-nav > li > a:focus-visible, +.langTabs .uk-tab > li > a:focus-visible { + color: var(--text-color); +} + +.langTabs .uk-tab > li:not(.langTabEmpty) > a { + color: var(--text-color); +} + +@media (hover: hover) and (pointer: fine) { + .langTabs .uk-tab > li:not(.langTabEmpty) > a:hover { + color: var(--text-color); + } +} + +body .pw-panel-container .pw-panel-button.ui-button i.fa:has(+ span) { + transform: translate(4px, -2px) scale(0.9); +} + +.pw-panel .fa-tree::before { + content: "\f0e8"; +} + +.pw-panel-button .fa { + background: transparent; + translate: -3px 0; + display: block; +} + +.pw-panel-button .fa::before { + content: "\00D7"; + font-family: inherit; + font-size: 30px; +} + +body .pw-panel-container .pw-panel-button.ui-button { + translate: -3px 0; +} + +body .pw-panel-container .pw-panel-button.ui-button, +body .pw-panel-container .pw-panel-button.ui-button i.fa { + background-color: var(--main-background); +} +@media (hover: hover) and (pointer: fine) { + body .pw-panel-container .pw-panel-button.ui-button i.fa:hover, + body .pw-panel-container .pw-panel-button.ui-button:hover { + background-color: var(--main-background); + } +} + +body .pw-panel-container:has(> iframe) .pw-panel-button.ui-button, +body .pw-panel-container:has(> iframe) .pw-panel-button.ui-button i.fa { + background-color: var(--blocks-background); +} +@media (hover: hover) and (pointer: fine) { + body .pw-panel-container:has(> iframe) .pw-panel-button.ui-button i.fa:hover, + body .pw-panel-container:has(> iframe) .pw-panel-button.ui-button:hover { + background-color: var(--blocks-background); + } +} + +.ui-button, +.uk-button, +.ui-button.ui-state-default, +.ui-button.ui-state-hover, +.pw .tox-dialog .tox-button, +.pw .vex-dialog-button, +.pw .vex.vex-theme-default .vex-dialog-button { + border-radius: var(--button-radius); +} + +.pw-button-dropdown-main, +.pw-button-dropdown-toggle { + position: relative; + z-index: 1; +} +.pw button.ui-button.pw-button-dropdown-toggle { + padding-right: 12px; + margin-left: 1px !important; + z-index: 2; +} + +button.ui-button.pw-button-dropdown-main { + padding-right: 22px; +} + +.gridImage .gridImage__inner { + transition: background-color 0.25s ease; +} +@media (hover: hover) and (pointer: fine) { + .gridImage:hover .gridImage__inner { + background-color: rgba(50, 50, 50, 0.35) !important; + } +} + +.pw .ahl, +.ahl__link, +.pw .ahl__template, +.pw .ahl__template *, +.pw .ahl__hover-content, +.pw .ahl__hover-content *, +.pw .ahl__link, +.pw .ahl__link:active, +.pw .ahl__link:visited, +.pw .ahl__link i { + color: var(--muted-color) !important; + opacity: 1 !important; +} +@media (hover: hover) and (pointer: fine) { + .pw .ahl__link:hover { + color: var(--muted-color) !important; + opacity: 1 !important; + } +} + +.ahl__template-name { + position: absolute; + right: 2.25em; + top: -0.35em; +} + +.ahl--init .toggle-icon { + background: transparent; +} + +#ProcessPageEditDelete { + background-color: transparent; +} + +#pw-masthead-mobile { + display: flex; + align-items: center; +} + +#pw-masthead-mobile > .pw-container { + margin-left: 0; +} + +#offcanvas-toggle { + position: fixed; + z-index: 9999; + top: 15px; +} + +#offcanvas-nav .pw-search-form { + padding-top: 38px; +} + +body.uk-offcanvas-container #offcanvas-toggle > .fa-bars:before { + content: "\f00d"; +} + +.Inputfields .Inputfield.pw-drag-in-file { + background: var(--inputs-background) !important; +} + +.InputfieldIsPrimary:not(.InputfieldNoBorder) { + background-color: var(--main-background); +} + +.pw .Inputfields { + background-color: transparent; +} + +.InputfieldHeader, +.InputfieldContent { + background: transparent !important; + background-color: transparent !important; +} + +.pw .InputfieldNoBorder { + background-color: transparent; + border: none; +} + +.pw .Inputfield:not(.InputfieldNoBorder, .InputfieldWrapper), +.Inputfields +.InputfieldRepeater:not(.InputfieldIsColor):not(.InputfieldNoBorder) { + background: var(--blocks-background); +} + +.pw +.Inputfield.InputfieldIsHighlight:not( + .InputfieldNoBorder, + .InputfieldWrapper + ) { + background: var(--notes-background) !important; +} + +.pw +.Inputfield.InputfieldIsWarning:not(.InputfieldNoBorde, .InputfieldWrapperr) { + background: var(--alert-danger) !important; +} +:not(.InputfieldFieldset)>.InputfieldContent>.Inputfields>.InputfieldMarkup.InputfieldHeaderHidden:not(.InputfieldNoBorder, .InputfieldWrapper), +.InputfieldForm>.Inputfields>.InputfieldMarkup.InputfieldHeaderHidden:not(.InputfieldNoBorder, .InputfieldWrapper) { + outline: 1px solid var(--border-color) !important; + padding-left: 20px; + padding-right: 20px; +} + +.pw +.Inputfield.InputfieldIsSecondary:not( + .InputfieldNoBorder, + .InputfieldWrapper + ), +.pw +.Inputfield.InputfieldIsSecondary:not( + .InputfieldNoBorder, + .InputfieldWrapper + ) { + background: var(--main-background) !important; +} + +.InputfieldNoBorder > .InputfieldHeader { + padding-right: 0; +} + +.InputfieldNoBorder > .InputfieldHeader.InputfieldStateToggle i.toggle-icon { + margin-right: 10px; +} + +.pw .InputfieldWrapper { + background: none; +} + +#ProcessListerResults #ProcessListerTable .pw-table-responsive { + outline: none; + border: 1px solid var(--border-color); +} + +.pw input[disabled="disabled"] { + opacity: 0.4; +} + +.uk-navbar-left { + gap: 22px; +} + +.uk-navbar-nav, +.uk-navbar-right, +[class*="uk-navbar-center"] { + gap: 25px; +} + +.modules_section a[style="opacity: 0.6;"] { + opacity: 1 !important; +} + +.pw .InputfieldSelector .selector-list li.selector-row { + border: none; +} + +.pw +.Inputfields +.InputfieldRepeater +.InputfieldRepeaterItem +> .InputfieldHeader.InputfieldRepeaterHeaderInit +.toggle-icon { + line-height: 1.3em; +} + +.pw +.Inputfields +.InputfieldRepeater +.InputfieldRepeaterItem:not( + .InputfieldRepeaterDeletePending + ).InputfieldRepeaterUnpublished +> .InputfieldHeader { + opacity: 1; +} + +.pw +.Inputfields +.InputfieldRepeater +.InputfieldRepeaterItem:not( + .InputfieldRepeaterDeletePending + ).InputfieldRepeaterUnpublished +> .InputfieldHeader +> * { + opacity: 0.5; +} + +.ui-priority-secondary, +.ui-widget-content .ui-priority-secondary, +.ui-widget-header .ui-priority-secondary { + opacity: 1; + filter: none; + color: var(--muted-color); +} + +a +:is( + .ui-priority-secondary, + .ui-widget-content .ui-priority-secondary, + .ui-widget-header .ui-priority-secondary + ) { + color: inherit; +} + +html.pw .Inputfield.InputfieldTinyMCE .InputfieldContent { + background-color: var(--blocks-background, #f4f4f4); +} + +.pw .tox-dialog .tox-button--naked { + border: none; + background-color: transparent; +} + +@media (hover: hover) and (pointer: fine) { + .pw .tox-dialog .tox-button--naked:hover, + .pw .tox .tox-button--naked:hover:not(:disabled) { + border: none; + background-color: transparent; + } +} + +.pw .uk-select { + height: 40px; + background-image: linear-gradient( + 45deg, + transparent 50%, + var(--text-color) 50% + ), + linear-gradient(135deg, var(--text-color) 50%, transparent 50%), + linear-gradient(45deg, var(--text-color) 50%, transparent 50%), + linear-gradient(135deg, transparent 50%, var(--text-color) 50%) !important; + background-position: calc(100% - 12px) calc(50% + 4px), + calc(100% - 8px) calc(50% + 4px), calc(100% - 8px) calc(50% - 4px), + calc(100% - 12px) calc(50% - 4px) !important; + background-size: 4px 4px, 4px 4px, 4px 4px, 4px 4px !important; + background-repeat: no-repeat !important; +} + +.fa-angle-right:before, +.fa-angle-down:before { + width: 15px; +} + +a .ModuleClass.ui-priority-secondary { + opacity: 1; +} + +.pw #ProcessPageEditChildEdit .PageEditChild { + border: none; + background-color: var(--blocks-background) !important; +} + +.pw #ProcessPageEditChildEdit .PageEditChildHidden { + outline-style: dashed; +} + +.pw #ProcessPageEditChildEdit .PageEditChild:first-child { + margin-top: 0; +} + +.pw +#ProcessPageEditChildEdit +.PageEditChildHidden +> .InputfieldHeader +.PageEditChildHideAction, +.pw +#ProcessPageEditChildEdit +.PageEditChildUnpub +> .InputfieldHeader +.PageEditChildUnpubAction { + color: var(--main-color); +} + +#offcanvas-toggle { + right: 15px; +} + +.pw .vex .vex-content, +.pw .vex.vex-theme-default .vex-content, +.pw .ui-datepicker { + background-color: var(--blocks-background); + color: var(--text-color); + border-radius: 0; + border: 1px solid var(--border-color); +} + +.ui-datepicker { + translate: 0 -1px; + padding-top: 20px; +} + +.ui-datepicker table th { + color: var(--text-color); +} + +.ui-datepicker table td .ui-state-default { + border: 1px solid transparent; + color: var(--text-color); + border-radius: 0; +} + +.pw .ui-datepicker table td .ui-state-default:hover { + background: var(--main-color); + border: 1px solid var(--main-color); + color: var(--blocks-background); +} + +.ui-datepicker table td .ui-state-highlight, +.ui-datepicker table td .ui-state-highlight:hover { + border: 1px solid var(--inputs-background); + background: var(--inputs-background); + color: var(--text-color); +} + +.ui-datepicker table td .ui-state-active, +.ui-datepicker table td .ui-state-active:hover { + background: var(--main-color); + border-color: var(--main-color); + color: var(--blocks-background); +} + +.ui-datepicker .ui-datepicker-title { + color: var(--blocks-background); +} + +.ui-datepicker .ui-datepicker-header { + border-bottom: var(--border-color); +} + +.ui-datepicker .ui-datepicker-next { + color: var(--text-color); +} + +.ui-datepicker .ui-datepicker-prev { + color: var(--text-color); +} + +.ui-datepicker .ui-datepicker-next.ui-datepicker-next-hover { + color: var(--main-color); +} + +.ui-datepicker button.ui-datepicker-current { + color: var(--blocks-background); + background: var(--main-color); + border-color: var(--main-color); +} + +.ui-datepicker button.ui-datepicker-close { + background: var(--text-color); + border-color: var(--text-color); + color: var(--blocks-color); +} + +.ui-datepicker button.ui-datepicker-close:hover { + background: var(--main-color); + border-color: var(--main-color); +} + +.ui-datepicker .ui-slider, +.ui-datepicker .ui-slider-horizontal { + background: var(--border-color); +} + +.ui-datepicker .ui-timepicker-div { + border-top: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); +} + +.ui-datepicker .ui-timepicker-div #ui_tpicker_time_Inputfield_date { + color: var(--blocks-background); +} + +.ui-datepicker .ui-datepicker-title select { + min-height: 22px; + border-radius: 0; + border-color: var(--border-color); + background-color: var(--blocks-background); + color: var(--text-color); +} + +.ui-datepicker .ui-timepicker-div:last-child { + border-bottom: none; + padding-bottom: 0 !important; +} + +.maxColHeightSpacer { + height: auto !important; +} + +[style="background:#777;height:3px;width:100%;"] { + display: none; +} + +.Inputfields .langTabsContainer .pw-notes, .Inputfields .langTabsContainer .notes { + margin-top: 15px; +} + +.pw .InputfieldIconAll .fa.fw { + background: none; +} + +.pw li.pageBreak .asmListItemLabel { + background-color: var(--blocks-background); +} + +.pw .asmListItem.pageBreak .asmListItemEdit > *, +.pw .asmListItem.pageBreak > *:not(.columnWidthBar), +.pw .asmListItem.pageBreak .asmListItemStatus, +.pw .asmListItem.pageBreak .asmListItemStatus > * { + color: var(--muted-color); +} + +.pw .asmListItem.pageBreak .asmListItemStatus > [data-was] { + display: none; +} + +.pw .InputfieldFormBuilderPageBreak .InputfieldContent { + border-bottom: none; +} + +del { + color: var(--error-inline-text-color); +} + +span.pw-diff { + color: var(--muted-color); +} + +ins { + color: var(--text-color); + font-weight: inherit; +} + +.colorpicker { + z-index: 5; +} + +#tracy-show-button { + color: black; +} + +.pw small > .uk-button { + background: transparent; + color: inherit; +} + +@media (min-width: 960px) { + h1, .uk-h1 { + font-size: 2.425rem; + } +} + +@media (min-width: 640px) { + #offcanvas-toggle { + right: 30px; + } +} diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/admin.js b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/admin.js new file mode 100644 index 00000000..5589b7b4 --- /dev/null +++ b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/admin.js @@ -0,0 +1,226 @@ +function setupCommandSearch() { + const searchInput = document.querySelector("#pw-masthead .pw-search-input"); + const sidebarSearchInput = document.querySelector( + "#offcanvas-nav .pw-search-input" + ); + let previousFocusedElement = null; + let SearchOpen = false; + + // Find the closest ancestor with class "pw-search-form" + const searchForm = searchInput.closest(".pw-search-form"); + const sidebarSearchForm = sidebarSearchInput.closest(".pw-search-form"); + + const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0; + const shortcutText = isMac ? "⌘+K" : "Ctrl+K"; + const sidebarShortcutText = isMac ? "⌘+⇧+K" : "Ctrl+⇧+K"; + + searchInput.setAttribute("placeholder", " "); + sidebarSearchInput.setAttribute("placeholder", " "); + + searchForm.setAttribute("data-shortcut", shortcutText); + sidebarSearchForm.setAttribute("data-shortcut", sidebarShortcutText); + + function openSearch() { + previousFocusedElement = document.activeElement; + searchInput.focus(); + SearchOpen = true; + closeSidebar(); + } + + function closeSearch() { + searchInput.blur(); + searchInput.value = ""; + if (previousFocusedElement) { + previousFocusedElement.focus(); + previousFocusedElement = null; + } + SearchOpen = false; + } + + function openSearchSidebar() { + let sidebarToggleEL = document.getElementById("offcanvas-toggle"); + if (sidebarToggleEL) { + let sidebarSearchInput = document.querySelector( + "#offcanvas-nav .pw-search-input" + ); + + sidebarToggleEL.click(); + if (sidebarSearchInput) { + sidebarSearchInput.focus(); + closeSearch(); + } + } + } + + function closeSidebar() { + let sidebarToggleEL = document.querySelector( + "body.uk-offcanvas-page .offcanvas-toggle" + ); + if (sidebarToggleEL) { + sidebarToggleEL.click(); + sidebarSearchInput.blur(); + } + } + + // Toggle on Ctrl/Cmd + K + document.addEventListener("keydown", (event) => { + const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0; + const isCommandKey = event.metaKey; + const isControlKey = event.ctrlKey; + + const modifierKey = isMac ? isCommandKey : isControlKey; + + if (modifierKey) { + if (event.key === "k") { + event.preventDefault(); + + // Ctrl/⌘+Shift+K focus on sidebar search + if (event.shiftKey) { + openSearchSidebar(); + } else { + // Ctrl/⌘+K focus on search + if (SearchOpen) { + closeSearch(); + } else { + openSearch(); + } + } + } + + // close search with escape + } else if (event.key === "Escape") { + closeSearch(); + let sidebarToggleEL = document.querySelector( + "body.uk-offcanvas-page .offcanvas-toggle" + ); + if (sidebarToggleEL) { + sidebarToggleEL.click(); + } + } + }); +} + + +var AdminDarkMode = { + + isInit: false, + mode: -1, + body: null, + a: null, + + init: function() { + this.body = $('body'); + if(this.body.hasClass('light-theme')) { + this.mode = 0; + } else if(this.body.hasClass('dark-theme')) { + this.mode = 1; + } + this.a = $('.toggle-light-dark-mode'); + this.updateLink(); + this.isInit = true; + }, + + get: function() { + return this.mode; + }, + + getName: function(mode) { + if(typeof mode === 'undefined') mode = this.mode; + if(mode > 0) return 'dark'; + if(mode < 0) return 'auto'; + return 'light'; + }, + + updateLink: function() { + var lightIcon = 'fa-' + this.a.attr('data-icon-light'); + var darkIcon = 'fa-' + this.a.attr('data-icon-dark'); + var autoIcon = 'fa-' + this.a.attr('data-icon-auto'); + var modeName = this.getName(); + + if(modeName != 'auto') { + // reverse of mode name for link + modeName = modeName === 'dark' ? 'light' : 'dark'; + } + + var text = this.a.attr('data-label-' + modeName); + var icon = 'fa-' + this.a.attr('data-icon-' + modeName); + var $span = this.a.children('span'); + var $icon = this.a.children('i'); + + $span.text(text); + $icon.removeClass(lightIcon + ' ' + darkIcon + ' ' + autoIcon).addClass(icon); + }, + + set: function(mode) { + this.body.removeClass(this.getName() + '-theme'); + this.body.addClass(this.getName(mode) + '-theme'); + this.mode = mode; + this.updateLink(); + $(document).trigger('admin-color-change'); + }, + + setLight: function() { + this.set(0); + }, + + setDark: function() { + this.set(1); + }, + + setAuto: function() { + this.set(-1); + }, + + save: function() { + $.post(ProcessWire.config.urls.admin, {set_admin_dark_mode: this.mode}, function(data) { + // console.log(data); + }); + }, + + toggle: function() { + var newMode = this.mode > 0 ? 0 : 1; + this.set(newMode); + this.updateLink(); + }, + + toggleDialog: function() { + + var oldMode = this.mode; + var newMode = (oldMode < 0 ? oldMode : (oldMode > 0 ? 0 : 1)); + var newModeName = this.getName(newMode); + var dialogHtml = $('#light-dark-mode-dialog').html(); + var attr = 'data-name="' + newModeName + '"'; + + dialogHtml = dialogHtml.replace(attr, attr + ' checked'); + var dialog = UIkit.modal.dialog(dialogHtml, { }); + var $panel = $(dialog.panel); + + $panel.css('transition', 'none'); + this.set(newMode); + + $panel.find('input').on('click', function() { + AdminDarkMode.set(parseInt($(this).val())); + }); + + $panel.find('button').on('click', function() { + if($(this).hasClass('uk-button-primary')) { + AdminDarkMode.save(); // Ok + } else { + AdminDarkMode.set(oldMode); // Cancel + } + }); + + $panel.find('input[value=' + newMode + ']'); + + return false; + }, + +}; + +// Call the setup function when the DOM is loaded +document.addEventListener("DOMContentLoaded", setupCommandSearch); + +$(document).ready(function () { + $(".pw-notices").insertAfter("#pw-mastheads"); + AdminDarkMode.init(); +}); diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.js b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.js new file mode 100644 index 00000000..4e74ee21 --- /dev/null +++ b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.js @@ -0,0 +1,106 @@ +$(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'); + + /** + * Get current style, 'light' or 'dark' + * + * @returns {string|string} + * + */ + 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; + } + + /** + * Get the main color code (hex or rgb), whether predefined or custom + * + * @returns {string} + * + */ + function getMainColor() { + var $wrap = $('#wrap_defaultMainColor'); + var $f = $wrap.find('input:checked'); + if($f.val() === 'custom') return $('#defaultMainColorCustom').val(); + return $f.closest('label').find('.defaultMainColorLabel').css('background-color'); + } + + /** + * Update the main color for given rgb or hex code + * + * @param value + * + */ + function setMainColor(value) { + $('#main-color-custom').remove(); + $('.pw-logo-native').css('color', value); + + var styleName = getCurrentStyleName(); + setButtonColor(styleName === 'dark' ? value : 'black'); + + $('head').append( + ""); + } + + 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'); + $('#defaultMainColor').trigger('input'); + setButtonColor(styleName === 'light' ? 'black' : getMainColor()); + }); + + $('#wrap_defaultMainColor').on('input', 'input', function() { + var value = 'main-color-' + $(this).val(); + var color; + if(value === 'main-color-custom') { + color = $('body').hasClass('dark-theme') ? $('#defaultMainColorCustomDark').val() : $('#defaultMainColorCustom').val(); + } else { + color = $(this).closest('label').find('.defaultMainColorLabel').css('background'); + } + $body.removeClass(colorClasses).addClass(value); + setMainColor(color); + }); + + $('#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); + } + }); + + $('.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); + }); + + $(document).on('admin-color-change', function() { + if($('body').hasClass('main-color-custom')) { + $('#defaultMainColorCustom, #defaultMainColorCustomDark').trigger('input'); + } + }); +}); diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.min.js b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.min.js new file mode 100644 index 00000000..168cbc71 --- /dev/null +++ b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.min.js @@ -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")return $("#defaultMainColorCustom").val();return $f.closest("label").find(".defaultMainColorLabel").css("background-color")}function setMainColor(value){$("#main-color-custom").remove();$(".pw-logo-native").css("color",value);var styleName=getCurrentStyleName();setButtonColor(styleName==="dark"?value:"black");$("head").append("")}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");$("#defaultMainColor").trigger("input");setButtonColor(styleName==="light"?"black":getMainColor())});$("#wrap_defaultMainColor").on("input","input",function(){var value="main-color-"+$(this).val();var color;if(value==="main-color-custom"){color=$("body").hasClass("dark-theme")?$("#defaultMainColorCustomDark").val():$("#defaultMainColorCustom").val()}else{color=$(this).closest("label").find(".defaultMainColorLabel").css("background")}$body.removeClass(colorClasses).addClass(value);setMainColor(color)});$("#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)}});$(".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)});$(document).on("admin-color-change",function(){if($("body").hasClass("main-color-custom")){$("#defaultMainColorCustom, #defaultMainColorCustomDark").trigger("input")}})}); \ No newline at end of file diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.php b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.php new file mode 100644 index 00000000..4e513661 --- /dev/null +++ b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.php @@ -0,0 +1,131 @@ +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->icon = 'sliders'; + +$f = $inputfields->InputfieldRadios; +$f->attr('id+name', 'defaultStyleName'); +$f->label = __('Would you like to default to light or dark mode?'); +$f->description = + __('This setting is used for users that have not specifically chosen light or dark mode.') . ' ' . + __('When “Auto” is selected, the mode will be determined from the user’s browser or OS setting.'); +$f->notes = __('Individual users can also choose light/dark/auto mode from the user tools menu.'); +$f->addOption('light', __('Light')); +$f->addOption('dark', __('Dark')); +$f->addOption('auto', __('Auto') . ' ' . + '[span.detail] ' . __('(use browser/OS setting)') . ' [/span]' ); +$f->optionColumns = 1; +$value = $adminTheme->get('defaultStyleName'); +if(empty($value)) $value = 'auto'; +$f->val($value); +$inputfields->add($f); + +$f = $inputfields->InputfieldRadios; +$f->attr('id+name', 'defaultMainColor'); +$f->label = __('Main color'); +$span = "%s"; +$f->addOption('red', sprintf($span, '#eb1d61', __('Red'))); +$f->addOption('green', sprintf($span, '#14ae85', __('Green'))); +$f->addOption('blue', sprintf($span, '#2380e6', __('Blue'))); +$f->addOption('custom', __('Custom color pickers…')); +$f->optionColumns = 1; +$f->entityEncodeText = false; +$value = $adminTheme->get('defaultMainColor'); +if(empty($value)) $value = 'red'; +$f->val($value); +$inputfields->add($f); + +$f = $inputfields->InputfieldText; +$f->attr('id+name', 'defaultMainColorCustom'); +$f->label = __('Custom main color (light mode)'); +$f->attr('type', 'color'); +$f->showIf = 'defaultMainColor=custom'; +$f->attr('style', 'width: 45px; padding: 1px 4px'); +$value = (string) $adminTheme->get($f->attr('name')); +if(empty($value)) $value = '#eb1d61'; +if(ctype_alnum(ltrim($value, '#'))) $f->val($value); +$customColorValue = $value; +$f->columnWidth = 50; +$inputfields->add($f); + +$f = $inputfields->InputfieldText; +$f->attr('id+name', 'defaultMainColorCustomDark'); +$f->label = __('Custom main color (dark mode)'); +$f->attr('type', 'color'); +$f->showIf = 'defaultMainColor=custom'; +$f->attr('style', 'width: 45px; padding: 1px 4px'); +$value = (string) $adminTheme->get($f->attr('name')); +if(empty($value)) $value = $customColorValue; +if(ctype_alnum(ltrim($value, '#'))) $f->val($value); +$f->columnWidth = 50; +$inputfields->add($f); + +$f = $inputfields->InputfieldCheckboxes; +$f->attr('id+name', 'defaultToggles'); +$f->label = __('Toggles'); +$f->addOption('noUserMenu', + __('Disable light/dark/auto setting in user tools menu?') . ' ' . + '[span.detail] ' . __('(this prevents users from making their own dark/light mode selection)') . ' [/span]' +); +$value = $adminTheme->get($f->name); +if(is_array($value)) $f->val($value); +$inputfields->add($f); + +$url = $adminTheme->url() . 'themes/default/examples/'; +$cssExamples = [ + __('Borderless') => $url . 'borderless.css', + __('Masthead') => $url . 'masthead.css', + __('Minimal') => $url . 'minimal.css', +]; +foreach($cssExamples as $label => $url) { + $cssExamples[$label] = "[$label]($url)"; +} +$cssExamples = __('Examples:') . ' ' . implode(', ', $cssExamples); + +$f = $inputfields->InputfieldURL; +$f->attr('name', 'defaultCustomCssFile'); +$f->label = __('Custom CSS file'); +$f->icon = 'css3'; +$f->description = __('Enter a local URL (without scheme) relative to installation root, i.e. `/site/templates/styles/admin.css`'); +$f->notes = $cssExamples; +$f->val((string) $adminTheme->get('defaultCustomCssFile')); +$f->allowQuotes = false; +$f->allowIDN = false; +$f->collapsed = Inputfield::collapsedBlank; +$inputfields->add($f); + +$f->addHookAfter('processInput', function(HookEvent $e) { + $f = $e->object; /** @var InputfieldURL $f */ + $value = (string) $f->val(); + if(strpos($value, '//') !== false) { + $f->error(__('Do not include scheme (http, https) in your URL')); + $f->val(''); + } else if($value) { + $file = $e->wire()->config->paths->root . ltrim($value, '/'); + if(!file_exists($file)) { + $f->error(sprintf(__('File does not exist: %s'), $file)); + } + } +}); + +if($adminTheme->wire()->config->advanced) { + $f = $inputfields->InputfieldTextarea; + $f->attr('name', 'defaultCustomCss'); + $f->label = __('Custom CSS'); + $f->icon = 'css3'; + $f->description = __('Available in advanced mode only.'); + $f->notes = $cssExamples; + $f->attr('style', 'font-family: Monaco, monospace'); + $f->collapsed = Inputfield::collapsedBlank; + $value = (string) $adminTheme->get('defaultCustomCss'); + $f->val(trim($value)); + $inputfields->add($f); +} diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/content.css b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/content.css new file mode 100644 index 00000000..bd70069f --- /dev/null +++ b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/content.css @@ -0,0 +1,258 @@ +@import url("./admin-custom.css"); + +.mce-content-body { + font-family: "Inter", system-ui, sans-serif; + line-height: 1.5; + margin: 1rem; + font-size: 16px; + color: var(--text-color, #333); + background: var(--inputs-background, #f8f8f8); +} +a { + text-underline-offset: 0.125em; +} +.mce-content-body small { + font-size: 14px; +} +.mce-content-body strong, +.mce-content-body strong em, +.mce-content-body em strong { + font-weight: bold; +} +.mce-content-body em { + font-style: italic; +} +.mce-content-body h1, +.mce-content-body h2, +.mce-content-body h3, +.mce-content-body h4, +.mce-content-body h5, +.mce-content-body h6 { + color: var(--text-color, #222); + font-weight: bold; + line-height: 1.2em; + text-transform: none; + margin: 1rem 0; +} +.mce-content-body h1 { + font-size: 2rem; +} +.mce-content-body h2 { + font-size: 1.7rem; +} +.mce-content-body h3 { + font-size: 1.5rem; +} +.mce-content-body h4 { + font-size: 1.3rem; +} +.mce-content-body h5 { + font-size: 1.2rem; +} +.mce-content-body h6 { + font-size: 1.1rem; +} +.mce-content-body hr { + border-style: solid; + border-width: 1px 0 0 0; +} +.mce-content-body code { + border-radius: 3px; + padding: 0.1rem 0.2rem; + background-color: var(--muted-color, #f5f2f0); + color: var(--text-color, #222); + font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; +} +.mce-content-body a { + color: var(--main-color, #0782c1); + text-decoration: underline; +} +.mce-content-body table:not([cellpadding]) td, +.mce-content-body table:not([cellpadding]) th { + padding: 0.4rem; +} +.mce-content-body + table[border]:not([border="0"]):not([style*="border-width"]) + td, +.mce-content-body + 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, +.mce-content-body + 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, +.mce-content-body + table[border]:not([border="0"]):not([style*="border-color"]) + th { + border-color: var(--border-color, #ccc); +} +.mce-content-body span[lang] { + font-style: italic; +} +.mce-content-body table { + border-collapse: collapse; +} +.mce-content-body blockquote { + color: var(--text-color, #333); + border-color: var(--border-color, #ccc); + font-style: italic; + font-family: Georgia, Times, "Times New Roman", serif; + margin: 0; + padding: 0 1rem; +} +.mce-content-body:not([dir="rtl"]) blockquote { + border-left: 1px solid; + margin-left: 1.5rem; + padding-left: 1rem; +} +.mce-content-body[dir="rtl"] blockquote { + border-right: 2px solid; + margin-right: 1.5rem; + padding-right: 1rem; +} +.mce-content-body figure { + display: table; + margin-top: 1rem; + margin-bottom: 1rem; +} +.mce-content-body figure:first-child { + margin-top: 0; +} +.mce-content-body figure figcaption { + margin-top: 5px; + display: table-caption; + caption-side: bottom; + line-height: 1.3em; + font-size: 14px; + color: #999; + color: var(--muted-text, #999); +} +.mce-content-body .align_right, +.mce-content-body .align-right, +.mce-content-body .right { + text-align: right; + float: none; +} +.mce-content-body .align_left, +.mce-content-body .align-left, +.mce-content-body .left { + text-align: left; + float: none; +} +.mce-content-body .align_center, +.mce-content-body .align-center, +.mce-content-body .center { + text-align: center; +} +.mce-content-body .align_full, +.mce-content-body .align-full, +.mce-content-body .full { + text-align: justify; +} +.mce-content-body img.align_right, +.mce-content-body img.align-right, +.mce-content-body img.right, +.mce-content-body figure.align_right, +.mce-content-body figure.align-right, +.mce-content-body figure.right, +.mce-content-body table.align_right, +.mce-content-body table.align-right, +.mce-content-body table.right { + text-align: initial; + float: right; + margin-left: 1rem; + margin-right: 0; + margin-top: 0; +} +.mce-content-body img.align_left, +.mce-content-body img.align-left, +.mce-content-body img.left, +.mce-content-body figure.align_left, +.mce-content-body figure.align-left, +.mce-content-body figure.left, +.mce-content-body table.align_left, +.mce-content-body table.align-left, +.mce-content-body table.left { + text-align: initial; + float: left; + margin-top: 0; + margin-left: 0; + margin-right: 1rem; +} +.mce-content-body img.align_center, +.mce-content-body img.align-center, +.mce-content-body img.center, +.mce-content-body figure.align_center, +.mce-content-body figure.align-center, +.mce-content-body figure.center, +.mce-content-body table.align_center, +.mce-content-body table.align-center, +.mce-content-body table.center { + text-align: initial; + display: block; + margin-left: auto; + margin-right: auto; +} +.mce-content-body img.align_full, +.mce-content-body img.align-full, +.mce-content-body img.full, +.mce-content-body figure.align_full, +.mce-content-body figure.align-full, +.mce-content-body figure.full, +.mce-content-body table.align_full, +.mce-content-body table.align-full, +.mce-content-body table.full { + text-align: initial; + width: 100%; +} +.mce-content-body img { + max-width: 100%; +} +.mce-content-body img.align_center, +.mce-content-body img.align-center, +.mce-content-body img.center { + display: block; +} +.mce-content-body img:hover { + opacity: 0.9; + filter: alpha(opacity=90); +} +a > .mce-content-body img { + padding: 1px; + margin: 1px; + border: none; + outline: 1px solid var(--main-color, #0782c1); +} +.mce-content-body pre { + color: #333; + border: 1px dashed var(--border-color, #ccc); + padding: 0.5rem 1rem !important; + white-space: pre-wrap; + word-wrap: break-word; + -moz-tab-size: 4; + -o-tab-size: 4; + -webkit-tab-size: 4; + tab-size: 4; +} +.mce-content-body pre code { + background-color: initial; +} +.mce-content-body pre[class*="language-"] { + font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; + font-size: 0.9375rem; + background: #f5f2f0; + margin: 0.5em 0; + padding: 0.5rem 1rem; + color: var(--muted-color, #777); +} + +/*# sourceMappingURL=wire.css.map */ diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/content.inline.css b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/content.inline.css new file mode 100644 index 00000000..961649cc --- /dev/null +++ b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/content.inline.css @@ -0,0 +1 @@ +/* intentionally blank */ diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/content.inline.min.css b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/content.inline.min.css new file mode 100644 index 00000000..961649cc --- /dev/null +++ b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/content.inline.min.css @@ -0,0 +1 @@ +/* intentionally blank */ diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/content.min.css b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/content.min.css new file mode 100644 index 00000000..f42c1437 --- /dev/null +++ b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/content.min.css @@ -0,0 +1 @@ +.mce-content-body{font-family:Inter,system-ui,sans-serif;line-height:1.5;margin:1rem;font-size:16px;color:var(--text-color,#333);background:var(--inputs-background,#f8f8f8)}a{text-underline-offset:.125em}.mce-content-body small{font-size:14px}.mce-content-body em strong,.mce-content-body strong,.mce-content-body strong em{font-weight:700}.mce-content-body em{font-style:italic}.mce-content-body h1,.mce-content-body h2,.mce-content-body h3,.mce-content-body h4,.mce-content-body h5,.mce-content-body h6{color:var(--text-color,#222);font-weight:700;line-height:1.2em;text-transform:none;margin:1rem 0}.mce-content-body h1{font-size:2rem}.mce-content-body h2{font-size:1.7rem}.mce-content-body h3{font-size:1.5rem}.mce-content-body h4{font-size:1.3rem}.mce-content-body h5{font-size:1.2rem}.mce-content-body h6{font-size:1.1rem}.mce-content-body hr{border-style:solid;border-width:1px 0 0 0}.mce-content-body code{border-radius:3px;padding:.1rem .2rem;background-color:var(--muted-color,#f5f2f0);color:var(--text-color,#222);font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace}.mce-content-body a{color:var(--main-color,#0782c1);text-decoration:underline}.mce-content-body table:not([cellpadding]) td,.mce-content-body table:not([cellpadding]) th{padding:.4rem}.mce-content-body table[border]:not([border="0"]):not([style*=border-width]) td,.mce-content-body 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,.mce-content-body 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,.mce-content-body table[border]:not([border="0"]):not([style*=border-color]) th{border-color:var(--border-color,#ccc)}.mce-content-body span[lang]{font-style:italic}.mce-content-body table{border-collapse:collapse}.mce-content-body blockquote{color:var(--text-color,#333);border-color:var(--border-color,#ccc);font-style:italic;font-family:Georgia,Times,"Times New Roman",serif;margin:0;padding:0 1rem}.mce-content-body:not([dir=rtl]) blockquote{border-left:1px solid;margin-left:1.5rem;padding-left:1rem}.mce-content-body[dir=rtl] blockquote{border-right:2px solid;margin-right:1.5rem;padding-right:1rem}.mce-content-body figure{display:table;margin-top:1rem;margin-bottom:1rem}.mce-content-body figure:first-child{margin-top:0}.mce-content-body figure figcaption{margin-top:5px;display:table-caption;caption-side:bottom;line-height:1.3em;font-size:14px;color:#999;color:var(--muted-text,#999)}.mce-content-body .align-right,.mce-content-body .align_right,.mce-content-body .right{text-align:right;float:none}.mce-content-body .align-left,.mce-content-body .align_left,.mce-content-body .left{text-align:left;float:none}.mce-content-body .align-center,.mce-content-body .align_center,.mce-content-body .center{text-align:center}.mce-content-body .align-full,.mce-content-body .align_full,.mce-content-body .full{text-align:justify}.mce-content-body figure.align-right,.mce-content-body figure.align_right,.mce-content-body figure.right,.mce-content-body img.align-right,.mce-content-body img.align_right,.mce-content-body img.right,.mce-content-body table.align-right,.mce-content-body table.align_right,.mce-content-body table.right{text-align:initial;float:right;margin-left:1rem;margin-right:0;margin-top:0}.mce-content-body figure.align-left,.mce-content-body figure.align_left,.mce-content-body figure.left,.mce-content-body img.align-left,.mce-content-body img.align_left,.mce-content-body img.left,.mce-content-body table.align-left,.mce-content-body table.align_left,.mce-content-body table.left{text-align:initial;float:left;margin-top:0;margin-left:0;margin-right:1rem}.mce-content-body figure.align-center,.mce-content-body figure.align_center,.mce-content-body figure.center,.mce-content-body img.align-center,.mce-content-body img.align_center,.mce-content-body img.center,.mce-content-body table.align-center,.mce-content-body table.align_center,.mce-content-body table.center{text-align:initial;display:block;margin-left:auto;margin-right:auto}.mce-content-body figure.align-full,.mce-content-body figure.align_full,.mce-content-body figure.full,.mce-content-body img.align-full,.mce-content-body img.align_full,.mce-content-body img.full,.mce-content-body table.align-full,.mce-content-body table.align_full,.mce-content-body table.full{text-align:initial;width:100%}.mce-content-body img{max-width:100%}.mce-content-body img.align-center,.mce-content-body img.align_center,.mce-content-body img.center{display:block}.mce-content-body img:hover{opacity:.9}a>.mce-content-body img{padding:1px;margin:1px;border:none;outline:1px solid var(--main-color,#0782c1)}.mce-content-body pre{color:#333;border:1px dashed var(--border-color,#ccc);padding:.5rem 1rem!important;white-space:pre-wrap;word-wrap:break-word;-moz-tab-size:4;-o-tab-size:4;-webkit-tab-size:4;tab-size:4}.mce-content-body pre code{background-color:initial}.mce-content-body pre[class*=language-]{font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:.9375rem;background:#f5f2f0;margin:.5em 0;padding:.5rem 1rem;color:var(--muted-color,#777)} \ No newline at end of file diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/examples/borderless.css b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/examples/borderless.css new file mode 100644 index 00000000..ce865752 --- /dev/null +++ b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/examples/borderless.css @@ -0,0 +1,8 @@ +/* -------------------------------------------------------------------- */ +/* ---- BORDERLESS --------------------------------------------------- */ +/* ------------------------------------------------------------------ */ + +:root { + --border-color: var(--main-background); + --inputs-background: var(--blocks-background); +} diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/examples/masthead.css b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/examples/masthead.css new file mode 100644 index 00000000..901dc4a1 --- /dev/null +++ b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/examples/masthead.css @@ -0,0 +1,16 @@ +/* -------------------------------------------------------------------- */ +/* ---- THEME WITH COLOR MASTHEAD VARIABLES -------------------------- */ +/* ---- (these depend on the default theme variables) --------------- */ +/* ----------------------------------------------------------------- */ + +: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); +} diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/examples/minimal.css b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/examples/minimal.css new file mode 100644 index 00000000..34f6290a --- /dev/null +++ b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/examples/minimal.css @@ -0,0 +1,37 @@ +/* -------------------------------------------------------------------- */ +/* ---- MINIMAL LIGHT BLUE AND MINIMAL DARK VARIABLES ---------------- */ +/* ------------------------------------------------------------------ */ + +: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); + + --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); + + --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); + + --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); +} diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/fonts/inter-v18-latin-600.woff2 b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/fonts/inter-v18-latin-600.woff2 new file mode 100644 index 00000000..fb50a02b Binary files /dev/null and b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/fonts/inter-v18-latin-600.woff2 differ diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/fonts/inter-v18-latin-600italic.woff2 b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/fonts/inter-v18-latin-600italic.woff2 new file mode 100644 index 00000000..feee055b Binary files /dev/null and b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/fonts/inter-v18-latin-600italic.woff2 differ diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/fonts/inter-v18-latin-italic.woff2 b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/fonts/inter-v18-latin-italic.woff2 new file mode 100644 index 00000000..ec07ef7d Binary files /dev/null and b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/fonts/inter-v18-latin-italic.woff2 differ diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/fonts/inter-v18-latin-regular.woff2 b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/fonts/inter-v18-latin-regular.woff2 new file mode 100644 index 00000000..33002f12 Binary files /dev/null and b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/fonts/inter-v18-latin-regular.woff2 differ diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/init.php b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/init.php new file mode 100644 index 00000000..b0f11ab6 --- /dev/null +++ b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/init.php @@ -0,0 +1,121 @@ +getThemeInfo(); +$toggles = $adminTheme->defaultToggles; + +$useDarkModeSwitcher = + $user->isLoggedin() + && !in_array('noUserMenu', $toggles) + && $user->hasPermission('page-edit'); + +/** + * Update TinyMCE to use our custom skin and content_css + * + */ +$adminTheme->addHookAfter('InputfieldTinyMCESettings::prepareSettingsForOutput', function(HookEvent $e) use($themeInfo) { + $o = $e->object; /** @var InputfieldTinyMCESettings $o */ + $f = $o->inputfield; + $settings = $e->return; + $rootUrl = $e->wire()->config->urls->root; + $url = $rootUrl . ltrim($themeInfo['url'], '/'); + + if($rootUrl != '/' && strpos($url, $rootUrl) === 0) $url = substr($url, strlen($rootUrl)-1); + + if(empty($settings['content_css']) || strpos($settings['content_css'], 'document.css') === false) { + $a = [ + 'content_css' => $url . 'content.css', + 'content_css_url' => $url . 'content.css', + 'skin_url' => rtrim($url, '/'), + 'skin' => 'custom', + 'toolbar_sticky_offset' => 55, // applies to inline mode only + ]; + $settings = array_merge($settings, $a); + $f->setArray($a); + } else { + // leave document mode as-is + } + + $e->return = $settings; +}); + +/** + * Add a light/dark toggle to the user tools menu + * + */ +if($useDarkModeSwitcher) { + $adminTheme->addHookAfter('getUserNavArray', function(HookEvent $e) { + $adminTheme = $e->object; /** @var AdminThemeUikit $adminTheme */ + $navArray = $e->return; /** @var array $navArray */ + $lightLabel = __('Light mode', __FILE__); + $darkLabel = __('Dark mode', __FILE__); + $autoLabel = __('Auto', __FILE__); + $cancelLabel = $adminTheme->_('Cancel'); + $okLabel = $adminTheme->_('Ok'); + $dialogTitle = __('Light/dark mode'); + array_unshift($navArray, [ + 'url' => '#toggle-light-dark-mode', + 'title' => __('Light/dark', __FILE__), + 'target' => '_top', + 'icon' => 'adjust', + 'class' => 'toggle-light-dark-mode', + 'onclick' => 'return AdminDarkMode.toggleDialog();', + 'data-label-light' => $lightLabel, + 'data-label-dark' => $darkLabel, + 'data-label-auto' => $dialogTitle, + 'data-icon-light' => 'sun-o', + 'data-icon-dark' => 'moon-o', + 'data-icon-auto' => 'adjust', + ]); + $e->return = $navArray; + $adminTheme->addExtraMarkup('body', ' + + '); + }); + + $setDarkMode = $input->post('set_admin_dark_mode'); + if($setDarkMode !== null && $config->ajax && $page->process == 'ProcessHome') { + $setDarkMode = (int) $setDarkMode; + if($setDarkMode === 0 || $setDarkMode === 1 || $setDarkMode === -1) { + $user->meta('adminDarkMode', (int) $setDarkMode); + header('content-type: application/json'); + return die(json_encode([ + 'status' => 'ok', + 'adminDarkMode' => (int) $setDarkMode + ])); + } + } +} + +/** + * Add notes to InputfieldTinyMCE module config indicating which settings are overridden + * + */ +if($page->process == 'ProcessModule' && $input->get('name') === 'InputfieldTinyMCE') { + $page->wire()->addHookAfter('InputfieldTinyMCE::getModuleConfigInputfields', function(HookEvent $e) { + $inputfields = $e->arguments(0); /** @var InputfieldWrapper $inputfields */ + $a = [ 'skin', 'content_css', 'content_css_url' ]; + $note = __('PLEASE NOTE: this setting is currently overridden by AdminThemeUikit “default” theme.', __FILE__); + foreach($a as $name) { + $f = $inputfields->get($name); + if($f && $f->val() != 'document') $f->notes = $note; + } + }); +} diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/install.css b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/install.css new file mode 100644 index 00000000..5fb290cd --- /dev/null +++ b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/install.css @@ -0,0 +1,21 @@ +body:has(#pw-content-body > form[action="./install.php"]) #pw-mastheads { + visibility: hidden; +} + +body:has(#pw-content-body > form[action="./install.php"]) #pw-content-head h1 { + background-image: url('data:image/svg+xml,'); + background-repeat: no-repeat; + background-position: left center; + background-size: 37px; + padding-left: 51px; +} + +body #pw-content-body > form[action="./install.php"] > h2 i { + margin-right: 7px; +} + +.pw +body:has(#pw-content-body > form[action="./install.php"]) +#pw-masthead-mobile { + visibility: hidden; +} diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/logo.svg b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/logo.svg new file mode 100644 index 00000000..582519a2 --- /dev/null +++ b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/logo.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/ready.php b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/ready.php new file mode 100644 index 00000000..38a0bd2d --- /dev/null +++ b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/ready.php @@ -0,0 +1,65 @@ +getThemeInfo(); +$customCss = $adminTheme->get('defaultCustomCss'); +$customCssFile = $adminTheme->get('defaultCustomCssFile'); + +$mainColors = [ + 'red' => '#eb1d61', + 'green' => '#14ae85', + 'blue' => '#2380e6', + 'custom' => $adminTheme->get('defaultMainColorCustom'), + 'customDark' => $adminTheme->get('defaultMainColorCustomDark'), +]; + +$config->styles->append($themeInfo['url'] . 'admin.css'); +$config->scripts->append($themeInfo['url'] . 'admin.js'); + +if($customCssFile) { + $config->styles->append($config->urls->root . ltrim($customCssFile, '/')); +} + +if($page->process == 'ProcessModule' && $input->get('name') === $adminTheme->className()) { + $darkMode = null; +} else { + $darkMode = $user->meta('adminDarkMode'); +} + +if($darkMode === 1) { + $styleName = 'dark'; +} else if($darkMode === 0) { + $styleName = 'light'; +} else { + $styleName = $adminTheme->get('defaultStyleName'); + if(empty($styleName)) $styleName = 'light'; +} + +$adminTheme->addBodyClass("$styleName-theme"); + +$mainColor = $adminTheme->get('defaultMainColor'); +if(empty($mainColor)) $mainColor = 'red'; +$adminTheme->addBodyClass("main-color-$mainColor"); + +$mainColorCode = isset($mainColors[$mainColor]) ? $mainColors[$mainColor] : $mainColors['red']; +if(strpos($mainColorCode, '#') === 0 && ctype_alnum(ltrim($mainColorCode, '#'))) { + $mainDarkCode = $mainColors['customDark']; + if($mainColor === 'custom' && strpos($mainDarkCode, '#') === 0 && ctype_alnum(ltrim($mainDarkCode, '#'))) { + $css = "--main-color: light-dark($mainColorCode, $mainDarkCode);"; + } else { + $css = "--main-color: $mainColorCode"; + } + $adminTheme->addExtraMarkup('head', + "" + ); +} + +if($customCss) { + $customCss = htmlspecialchars($customCss, ENT_NOQUOTES); + $adminTheme->addExtraMarkup('head', ""); +} diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/skin.min.css b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/skin.min.css new file mode 100644 index 00000000..d224a29e --- /dev/null +++ b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/skin.min.css @@ -0,0 +1,4094 @@ +.tox { + box-shadow: none; + box-sizing: content-box; + color: var(--text-color, #222f3e); + cursor: auto; + font-family: "Inter", system-ui, sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; + -webkit-tap-highlight-color: transparent; + text-decoration: none; + text-shadow: none; + text-transform: none; + vertical-align: initial; + white-space: normal; +} +.tox :not(svg):not(rect) { + box-sizing: inherit; + color: inherit; + cursor: inherit; + direction: inherit; + font-family: inherit; + font-size: inherit; + font-style: inherit; + font-weight: inherit; + line-height: inherit; + -webkit-tap-highlight-color: inherit; + text-align: inherit; + text-decoration: inherit; + text-shadow: inherit; + text-transform: inherit; + vertical-align: inherit; + white-space: inherit; +} +.tox :not(svg):not(rect) { + background: 0 0; + border: 0; + box-shadow: none; + float: none; + height: auto; + margin: 0; + max-width: none; + outline: 0; + padding: 0; + position: static; + width: auto; +} +.tox:not([dir="rtl"]) { + direction: ltr; + text-align: left; +} +.tox[dir="rtl"] { + direction: rtl; + text-align: right; +} +.tox-tinymce { + border: 1px solid var(--border-color, #ccc); + border-radius: 0; + box-shadow: none; + box-sizing: border-box; + display: flex; + flex-direction: column; + font-family: "Inter", system-ui, sans-serif; + overflow: hidden; + position: relative; + visibility: inherit !important; +} +.tox.tox-tinymce-inline { + border: none; + box-shadow: none; + overflow: initial; +} +.tox.tox-tinymce-inline .tox-editor-container { + overflow: initial; +} +.tox.tox-tinymce-inline .tox-editor-header { + background-color: var(--blocks-background, #fff); + border: 1px solid var(--border-color, #ccc); + border-radius: 0; + box-shadow: none; + overflow: hidden; +} +.tox-tinymce-aux { + font-family: "Inter", system-ui, sans-serif; + z-index: 1300; +} +.tox-tinymce :focus, +.tox-tinymce-aux :focus { + outline: 0; +} +button::-moz-focus-inner { + border: 0; +} +.tox[dir="rtl"] .tox-icon--flip svg { + transform: rotateY(180deg); +} +.tox .accessibility-issue__header { + align-items: center; + display: flex; + margin-bottom: 4px; +} +.tox .accessibility-issue__description { + align-items: stretch; + border-radius: 3px; + display: flex; + justify-content: space-between; +} +.tox .accessibility-issue__description > div { + padding-bottom: 4px; +} +.tox .accessibility-issue__description > div > div { + align-items: center; + display: flex; + margin-bottom: 4px; +} +.tox .accessibility-issue__description > div > div .tox-icon svg { + display: block; +} +.tox .accessibility-issue__repair { + margin-top: 16px; +} +.tox + .tox-dialog__body-content + .accessibility-issue--info + .accessibility-issue__description { + background-color: rgba(30, 113, 170, 0.1); + color: var(--text-color, #222f3e); +} +.tox .tox-dialog__body-content .accessibility-issue--info .tox-form__group h2 { + color: #207ab7; +} +.tox .tox-dialog__body-content .accessibility-issue--info .tox-icon svg { + fill: #207ab7; +} +.tox + .tox-dialog__body-content + .accessibility-issue--info + a.tox-button--naked.tox-button--icon { + background-color: var(--main-color, #207ab7); + color: var(--blocks-background, #fff); +} +.tox + .tox-dialog__body-content + .accessibility-issue--info + a.tox-button--naked.tox-button--icon:focus, +.tox + .tox-dialog__body-content + .accessibility-issue--info + a.tox-button--naked.tox-button--icon:hover { + background-color: var(--main-color, #1c6ca1); +} +.tox + .tox-dialog__body-content + .accessibility-issue--info + a.tox-button--naked.tox-button--icon:active { + background-color: var(--main-color, #185d8c); +} +.tox + .tox-dialog__body-content + .accessibility-issue--warn + .accessibility-issue__description { + background-color: rgba(255, 165, 0, 0.08); + color: var(--text-color, #222f3e); +} +.tox .tox-dialog__body-content .accessibility-issue--warn .tox-form__group h2 { + color: #8f5d00; +} +.tox .tox-dialog__body-content .accessibility-issue--warn .tox-icon svg { + fill: #8f5d00; +} +.tox + .tox-dialog__body-content + .accessibility-issue--warn + a.tox-button--naked.tox-button--icon { + background-color: #ffe89d; + color: var(--text-color, #222f3e); +} +.tox + .tox-dialog__body-content + .accessibility-issue--warn + a.tox-button--naked.tox-button--icon:focus, +.tox + .tox-dialog__body-content + .accessibility-issue--warn + a.tox-button--naked.tox-button--icon:hover { + background-color: #f2d574; + color: var(--text-color, #222f3e); +} +.tox + .tox-dialog__body-content + .accessibility-issue--warn + a.tox-button--naked.tox-button--icon:active { + background-color: #e8c657; + color: var(--text-color, #222f3e); +} +.tox + .tox-dialog__body-content + .accessibility-issue--error + .accessibility-issue__description { + background-color: rgba(204, 0, 0, 0.1); + color: var(--text-color, #222f3e); +} +.tox .tox-dialog__body-content .accessibility-issue--error .tox-form__group h2 { + color: #c00; +} +.tox .tox-dialog__body-content .accessibility-issue--error .tox-icon svg { + fill: #c00; +} +.tox + .tox-dialog__body-content + .accessibility-issue--error + a.tox-button--naked.tox-button--icon { + background-color: #f2bfbf; + color: var(--text-color, #222f3e); +} +.tox + .tox-dialog__body-content + .accessibility-issue--error + a.tox-button--naked.tox-button--icon:focus, +.tox + .tox-dialog__body-content + .accessibility-issue--error + a.tox-button--naked.tox-button--icon:hover { + background-color: #e9a4a4; + color: var(--text-color, #222f3e); +} +.tox + .tox-dialog__body-content + .accessibility-issue--error + a.tox-button--naked.tox-button--icon:active { + background-color: #ee9494; + color: var(--text-color, #222f3e); +} +.tox + .tox-dialog__body-content + .accessibility-issue--success + .accessibility-issue__description { + background-color: rgba(120, 171, 70, 0.1); + color: var(--text-color, #222f3e); +} +.tox + .tox-dialog__body-content + .accessibility-issue--success + .accessibility-issue__description + > :last-child { + display: none; +} +.tox + .tox-dialog__body-content + .accessibility-issue--success + .tox-form__group + h2 { + color: #527530; +} +.tox .tox-dialog__body-content .accessibility-issue--success .tox-icon svg { + fill: #527530; +} +.tox .tox-dialog__body-content .accessibility-issue__header .tox-form__group h1, +.tox + .tox-dialog__body-content + .tox-form__group + .accessibility-issue__description + h2 { + font-size: 14px; + margin-top: 0; +} +.tox:not([dir="rtl"]) + .tox-dialog__body-content + .accessibility-issue__header + .tox-button { + margin-left: 4px; +} +.tox:not([dir="rtl"]) + .tox-dialog__body-content + .accessibility-issue__header + > :nth-last-child(2) { + margin-left: auto; +} +.tox:not([dir="rtl"]) + .tox-dialog__body-content + .accessibility-issue__description { + padding: 4px 4px 4px 8px; +} +.tox[dir="rtl"] + .tox-dialog__body-content + .accessibility-issue__header + .tox-button { + margin-right: 4px; +} +.tox[dir="rtl"] + .tox-dialog__body-content + .accessibility-issue__header + > :nth-last-child(2) { + margin-right: auto; +} +.tox[dir="rtl"] .tox-dialog__body-content .accessibility-issue__description { + padding: 4px 8px 4px 4px; +} +.tox .tox-advtemplate .tox-form__grid { + flex: 1; +} +.tox .tox-advtemplate .tox-form__grid > div:first-child { + display: flex; + flex-direction: column; + width: 30%; +} +.tox .tox-advtemplate .tox-form__grid > div:first-child > div:nth-child(2) { + flex-basis: 0; + flex-grow: 1; + overflow: auto; +} +@media only screen and (max-width: 767px) { + body:not(.tox-force-desktop) + .tox + .tox-advtemplate + .tox-form__grid + > div:first-child { + width: 100%; + } +} +.tox .tox-advtemplate iframe { + border-color: var(--border-color, #ccc); + border-radius: 0; + border-style: solid; + border-width: 1px; + margin: 0 10px; +} +.tox .tox-anchorbar { + display: flex; + flex: 0 0 auto; +} +.tox .tox-bottom-anchorbar { + display: flex; + flex: 0 0 auto; +} +.tox .tox-bar { + display: flex; + flex: 0 0 auto; +} +.tox .tox-button { + background-color: #207ab7; + background-image: none; + background-position: 0 0; + background-repeat: repeat; + border-color: #207ab7; + border-radius: 3px; + border-style: solid; + border-width: 1px; + box-shadow: none; + box-sizing: border-box; + color: var(--blocks-background, #fff); + cursor: pointer; + display: inline-block; + font-family: "Inter", system-ui, sans-serif; + font-size: 14px; + font-style: normal; + font-weight: 700; + letter-spacing: normal; + line-height: 24px; + margin: 0; + outline: 0; + padding: 4px 16px; + position: relative; + text-align: center; + text-decoration: none; + text-transform: none; + white-space: nowrap; +} +.tox .tox-button::before { + border-radius: 3px; + bottom: -1px; + box-shadow: inset 0 0 0 2px var(--blocks-background, #fff), + 0 0 0 1px var(--main-color, #207ab7), + 0 0 0 3px var(--muted-color, rgba(32, 122, 183, 0.25)); + content: ""; + left: -1px; + opacity: 0; + pointer-events: none; + position: absolute; + right: -1px; + top: -1px; +} +.tox .tox-button[disabled] { + background-color: var(--main-color, #207ab7); + background-image: none; + border-color: var(--main-color, #207ab7); + box-shadow: none; + color: rgba(255, 255, 255, 0.5); + cursor: not-allowed; +} +.tox .tox-button:focus:not(:disabled) { + background-color: var(--inputs-background); + background-image: none; + border-color: var(--inputs-background); + box-shadow: none; + color: var(--blocks-background); +} +.tox .tox-button:focus-visible:not(:disabled)::before { + opacity: 1; +} +.tox .tox-button:hover:not(:disabled) { + background-color: var(--inputs-background); + background-image: none; + border-color: var(--inputs-background); + box-shadow: none; + color: var(--blocks-background); +} +.tox .tox-button:active:not(:disabled) { + background-color: var(--inputs-background); + background-image: none; + border-color: var(--inputs-background); + box-shadow: none; + color: var(--blocks-background); +} +.tox .tox-button.tox-button--enabled { + background-color: var(--inputs-background); + background-image: none; + border-color: var(--inputs-background); + box-shadow: none; + color: var(--blocks-background); +} +.tox .tox-button.tox-button--enabled[disabled] { + background-color: var(--inputs-background); + background-image: none; + border-color: var(--inputs-background); + box-shadow: none; + color: rgba(255, 255, 255, 0.5); + cursor: not-allowed; +} +.tox .tox-button.tox-button--enabled:focus:not(:disabled) { + background-color: var(--inputs-background); + background-image: none; + border-color: var(--inputs-background); + box-shadow: none; + color: var(--blocks-background); +} +.tox .tox-button.tox-button--enabled:hover:not(:disabled) { + background-color: var(--inputs-background); + background-image: none; + border-color: var(--inputs-background); + box-shadow: none; + color: var(--blocks-background); +} +.tox .tox-button.tox-button--enabled:active:not(:disabled) { + background-color: var(--inputs-background); + background-image: none; + border-color: var(--inputs-background); + box-shadow: none; + color: var(--blocks-background); +} +.tox .tox-button--icon-and-text, +.tox .tox-button.tox-button--icon-and-text, +.tox .tox-button.tox-button--secondary.tox-button--icon-and-text { + display: flex; + padding: 5px 4px; +} +.tox .tox-button--icon-and-text .tox-icon svg, +.tox .tox-button.tox-button--icon-and-text .tox-icon svg, +.tox .tox-button.tox-button--secondary.tox-button--icon-and-text .tox-icon svg { + display: block; + fill: currentColor; +} +.tox .tox-button--secondary { + background-color: var(--inputs-background); + background-image: none; + background-position: 0 0; + background-repeat: repeat; + border-color: var(--inputs-background); + border-radius: 3px; + border-style: solid; + border-width: 1px; + box-shadow: none; + color: var(--text-color, #222f3e); + font-size: 14px; + font-style: normal; + font-weight: 700; + letter-spacing: normal; + outline: 0; + padding: 4px 16px; + text-decoration: none; + text-transform: none; +} +.tox .tox-button--secondary[disabled] { + background-color: var(--inputs-background); + background-image: none; + border-color: var(--inputs-background); + box-shadow: none; + color: var(--text-color, rgba(34, 47, 62, 0.5)); +} +.tox .tox-button--secondary:focus:not(:disabled) { + background-color: var(--inputs-background); + background-image: none; + border-color: var(--inputs-background); + box-shadow: none; + color: var(--text-color, #222f3e); +} +.tox .tox-button--secondary:hover:not(:disabled) { + background-color: var(--inputs-background); + background-image: none; + border-color: var(--inputs-background); + box-shadow: none; + color: var(--text-color, #222f3e); +} +.tox .tox-button--secondary:active:not(:disabled) { + background-color: var(--inputs-background); + background-image: none; + border-color: var(--inputs-background); + box-shadow: none; + color: var(--text-color, #222f3e); +} +.tox .tox-button--secondary.tox-button--enabled { + background-color: var(--inputs-background); + background-image: none; + border-color: var(--inputs-background); + box-shadow: none; + color: var(--text-color, #222f3e); +} +.tox .tox-button--secondary.tox-button--enabled[disabled] { + background-color: var(--inputs-background); + background-image: none; + border-color: var(--inputs-background); + box-shadow: none; + color: var(--text-color, rgba(34, 47, 62, 0.5)); +} +.tox .tox-button--secondary.tox-button--enabled:focus:not(:disabled) { + background-color: var(--inputs-background); + background-image: none; + border-color: var(--inputs-background); + box-shadow: none; + color: var(--text-color, #222f3e); +} +.tox .tox-button--secondary.tox-button--enabled:hover:not(:disabled) { + background-color: var(--inputs-background); + background-image: none; + border-color: var(--inputs-background); + box-shadow: none; + color: var(--text-color, #222f3e); +} +.tox .tox-button--secondary.tox-button--enabled:active:not(:disabled) { + background-color: var(--inputs-background); + background-image: none; + border-color: var(--inputs-background); + box-shadow: none; + color: var(--text-color, #222f3e); +} +.tox .tox-button--icon, +.tox .tox-button.tox-button--icon, +.tox .tox-button.tox-button--secondary.tox-button--icon { + padding: 4px; +} +.tox .tox-button--icon .tox-icon svg, +.tox .tox-button.tox-button--icon .tox-icon svg, +.tox .tox-button.tox-button--secondary.tox-button--icon .tox-icon svg { + display: block; + fill: currentColor; +} +.tox .tox-button-link { + background: 0; + border: none; + box-sizing: border-box; + cursor: pointer; + display: inline-block; + font-family: "Inter", system-ui, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.3; + margin: 0; + padding: 0; + white-space: nowrap; +} +.tox .tox-button-link--sm { + font-size: 14px; +} +.tox .tox-button--naked { + background-color: transparent; + border-color: transparent; + box-shadow: unset; + color: var(--text-color, #222f3e); +} +.tox .tox-button--naked[disabled] { + background-color: var(--inputs-background); + border-color: var(--inputs-background); + box-shadow: none; + color: var(--text-color, rgba(34, 47, 62, 0.5)); +} +.tox .tox-button--naked:hover:not(:disabled) { + background-color: var(--inputs-background); + border-color: var(--inputs-background); + box-shadow: none; + color: var(--text-color, #222f3e); +} +.tox .tox-button--naked:focus:not(:disabled) { + background-color: var(--inputs-background); + border-color: var(--inputs-background); + box-shadow: none; + color: var(--text-color, #222f3e); +} +.tox .tox-button--naked:active:not(:disabled) { + background-color: var(--inputs-background); + border-color: var(--inputs-background); + box-shadow: none; + color: var(--text-color, #222f3e); +} +.tox .tox-button--naked .tox-icon svg { + fill: currentColor; +} +.tox .tox-button--naked.tox-button--icon:hover:not(:disabled) { + color: var(--text-color, #222f3e); +} +.tox .tox-checkbox { + align-items: center; + border-radius: 3px; + cursor: pointer; + display: flex; + height: 36px; + min-width: 36px; +} +.tox .tox-checkbox__input { + height: 1px; + overflow: hidden; + position: absolute; + top: auto; + width: 1px; +} +.tox .tox-checkbox__icons { + align-items: center; + border-radius: 3px; + box-shadow: 0 0 0 2px transparent; + box-sizing: content-box; + display: flex; + height: 24px; + justify-content: center; + padding: calc(4px - 1px); + width: 24px; +} +.tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg { + display: block; + fill: rgba(34, 47, 62, 0.3); +} +.tox .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg { + display: none; + fill: #207ab7; +} +.tox .tox-checkbox__icons .tox-checkbox-icon__checked svg { + display: none; + fill: #207ab7; +} +.tox .tox-checkbox--disabled { + color: var(--text-color, rgba(34, 47, 62, 0.5)); + cursor: not-allowed; +} +.tox + .tox-checkbox--disabled + .tox-checkbox__icons + .tox-checkbox-icon__checked + svg { + fill: var(--text-color, rgba(34, 47, 62, 0.5)); +} +.tox + .tox-checkbox--disabled + .tox-checkbox__icons + .tox-checkbox-icon__unchecked + svg { + fill: var(--text-color, rgba(34, 47, 62, 0.5)); +} +.tox + .tox-checkbox--disabled + .tox-checkbox__icons + .tox-checkbox-icon__indeterminate + svg { + fill: var(--text-color, rgba(34, 47, 62, 0.5)); +} +.tox + input.tox-checkbox__input:checked + + .tox-checkbox__icons + .tox-checkbox-icon__unchecked + svg { + display: none; +} +.tox + input.tox-checkbox__input:checked + + .tox-checkbox__icons + .tox-checkbox-icon__checked + svg { + display: block; +} +.tox + input.tox-checkbox__input:indeterminate + + .tox-checkbox__icons + .tox-checkbox-icon__unchecked + svg { + display: none; +} +.tox + input.tox-checkbox__input:indeterminate + + .tox-checkbox__icons + .tox-checkbox-icon__indeterminate + svg { + display: block; +} +.tox input.tox-checkbox__input:focus + .tox-checkbox__icons { + border-radius: 3px; + box-shadow: inset 0 0 0 1px #207ab7; + padding: calc(4px - 1px); +} +.tox:not([dir="rtl"]) .tox-checkbox__label { + margin-left: 4px; +} +.tox:not([dir="rtl"]) .tox-checkbox__input { + left: -10000px; +} +.tox:not([dir="rtl"]) .tox-bar .tox-checkbox { + margin-left: 4px; +} +.tox[dir="rtl"] .tox-checkbox__label { + margin-right: 4px; +} +.tox[dir="rtl"] .tox-checkbox__input { + right: -10000px; +} +.tox[dir="rtl"] .tox-bar .tox-checkbox { + margin-right: 4px; +} +.tox .tox-collection--toolbar .tox-collection__group { + display: flex; + padding: 0; +} +.tox .tox-collection--grid .tox-collection__group { + display: flex; + flex-wrap: wrap; + max-height: 208px; + overflow-x: hidden; + overflow-y: auto; + padding: 0; +} +.tox .tox-collection--list .tox-collection__group { + border-bottom-width: 0; + border-color: var(--border-color, #ccc); + border-left-width: 0; + border-right-width: 0; + border-style: solid; + border-top-width: 1px; + padding: 4px 0; +} +.tox .tox-collection--list .tox-collection__group:first-child { + border-top-width: 0; +} +.tox .tox-collection__group-heading { + background-color: #e6e6e6; + color: var(--var(--muted-color, rgba(34, 47, 62, 0.7))); + cursor: default; + font-size: 12px; + font-style: normal; + font-weight: 400; + margin-bottom: 4px; + margin-top: -4px; + padding: 4px 8px; + text-transform: none; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} +.tox .tox-collection__item { + align-items: center; + border-radius: 3px; + color: var(--text-color, #222f3e); + display: flex; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} +.tox .tox-collection--list .tox-collection__item { + padding: 4px 8px; +} +.tox .tox-collection--toolbar .tox-collection__item { + border-radius: 3px; + padding: 4px; +} +.tox .tox-collection--grid .tox-collection__item { + border-radius: 3px; + padding: 4px; +} +.tox .tox-collection--list .tox-collection__item--enabled { + background-color: var(--blocks-background, #fff); + color: var(--text-color, #222f3e); +} +.tox .tox-collection--list .tox-collection__item--active { + background-color: var(--inputs-background, #dee0e2); +} +.tox .tox-collection--toolbar .tox-collection__item--enabled { + background-color: var(--inputs-background, #c8cbcf); + color: var(--text-color, #222f3e); +} +.tox .tox-collection--toolbar .tox-collection__item--active { + background-color: var(--inputs-background, #dee0e2); +} +.tox .tox-collection--grid .tox-collection__item--enabled { + background-color: var(--inputs-background, #c8cbcf); + color: var(--text-color, #222f3e); +} +.tox + .tox-collection--grid + .tox-collection__item--active:not(.tox-collection__item--state-disabled) { + background-color: var(--inputs-background, #dee0e2); + color: var(--text-color, #222f3e); +} +.tox + .tox-collection--list + .tox-collection__item--active:not(.tox-collection__item--state-disabled) { + color: var(--text-color, #222f3e); +} +.tox + .tox-collection--toolbar + .tox-collection__item--active:not(.tox-collection__item--state-disabled) { + color: var(--text-color, #222f3e); +} +.tox .tox-collection__item-checkmark, +.tox .tox-collection__item-icon { + align-items: center; + display: flex; + height: 24px; + justify-content: center; + width: 24px; +} +.tox .tox-collection__item-checkmark svg, +.tox .tox-collection__item-icon svg { + fill: currentColor; +} +.tox .tox-collection--toolbar-lg .tox-collection__item-icon { + height: 48px; + width: 48px; +} +.tox .tox-collection__item-label { + color: currentColor; + display: inline-block; + flex: 1; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 24px; + max-width: 100%; + text-transform: none; + word-break: break-all; +} +.tox .tox-collection__item-accessory { + color: var(--muted-color, rgba(34, 47, 62, 0.7)); + display: inline-block; + font-size: 14px; + height: 24px; + line-height: 24px; + text-transform: none; +} +.tox .tox-collection__item-caret { + align-items: center; + display: flex; + min-height: 24px; +} +.tox .tox-collection__item-caret::after { + content: ""; + font-size: 0; + min-height: inherit; +} +.tox .tox-collection__item-caret svg { + fill: var(--text-color, #222f3e); +} +.tox .tox-collection__item--state-disabled { + background-color: transparent; + color: var(--text-color, rgba(34, 47, 62, 0.5)); + cursor: not-allowed; +} +.tox .tox-collection__item--state-disabled .tox-collection__item-caret svg { + fill: var(--text-color, rgba(34, 47, 62, 0.5)); +} +.tox + .tox-collection--list + .tox-collection__item:not(.tox-collection__item--enabled) + .tox-collection__item-checkmark + svg { + display: none; +} +.tox + .tox-collection--list + .tox-collection__item:not(.tox-collection__item--enabled) + .tox-collection__item-accessory + + .tox-collection__item-checkmark { + display: none; +} +.tox .tox-collection--horizontal { + background-color: var(--blocks-background); + border: 1px solid var(--border-color, #ccc); + border-radius: 3px; + box-shadow: 0 0 2px 0 rgba(34, 47, 62, 0.2), + 0 4px 8px 0 rgba(34, 47, 62, 0.15); + display: flex; + flex: 0 0 auto; + flex-shrink: 0; + flex-wrap: nowrap; + margin-bottom: 0; + overflow-x: auto; + padding: 0; +} +.tox .tox-collection--horizontal .tox-collection__group { + align-items: center; + display: flex; + flex-wrap: nowrap; + margin: 0; + padding: 0 4px; +} +.tox .tox-collection--horizontal .tox-collection__item { + height: 34px; + margin: 3px 0 2px 0; + padding: 0 4px; +} +.tox .tox-collection--horizontal .tox-collection__item-label { + white-space: nowrap; +} +.tox .tox-collection--horizontal .tox-collection__item-caret { + margin-left: 4px; +} +.tox .tox-collection__item-container { + display: flex; +} +.tox .tox-collection__item-container--row { + align-items: center; + flex: 1 1 auto; + flex-direction: row; +} +.tox + .tox-collection__item-container--row.tox-collection__item-container--align-left { + margin-right: auto; +} +.tox + .tox-collection__item-container--row.tox-collection__item-container--align-right { + justify-content: flex-end; + margin-left: auto; +} +.tox + .tox-collection__item-container--row.tox-collection__item-container--valign-top { + align-items: flex-start; + margin-bottom: auto; +} +.tox + .tox-collection__item-container--row.tox-collection__item-container--valign-middle { + align-items: center; +} +.tox + .tox-collection__item-container--row.tox-collection__item-container--valign-bottom { + align-items: flex-end; + margin-top: auto; +} +.tox .tox-collection__item-container--column { + align-self: center; + flex: 1 1 auto; + flex-direction: column; +} +.tox + .tox-collection__item-container--column.tox-collection__item-container--align-left { + align-items: flex-start; +} +.tox + .tox-collection__item-container--column.tox-collection__item-container--align-right { + align-items: flex-end; +} +.tox + .tox-collection__item-container--column.tox-collection__item-container--valign-top { + align-self: flex-start; +} +.tox + .tox-collection__item-container--column.tox-collection__item-container--valign-middle { + align-self: center; +} +.tox + .tox-collection__item-container--column.tox-collection__item-container--valign-bottom { + align-self: flex-end; +} +.tox:not([dir="rtl"]) + .tox-collection--horizontal + .tox-collection__group:not(:last-of-type) { + border-right: 1px solid var(--border-color, #ccc); +} +.tox:not([dir="rtl"]) + .tox-collection--list + .tox-collection__item + > :not(:first-child) { + margin-left: 8px; +} +.tox:not([dir="rtl"]) + .tox-collection--list + .tox-collection__item + > .tox-collection__item-label:first-child { + margin-left: 4px; +} +.tox:not([dir="rtl"]) .tox-collection__item-accessory { + margin-left: 16px; + text-align: right; +} +.tox:not([dir="rtl"]) .tox-collection .tox-collection__item-caret { + margin-left: 16px; +} +.tox[dir="rtl"] + .tox-collection--horizontal + .tox-collection__group:not(:last-of-type) { + border-left: 1px solid var(--border-color, #ccc); +} +.tox[dir="rtl"] + .tox-collection--list + .tox-collection__item + > :not(:first-child) { + margin-right: 8px; +} +.tox[dir="rtl"] + .tox-collection--list + .tox-collection__item + > .tox-collection__item-label:first-child { + margin-right: 4px; +} +.tox[dir="rtl"] .tox-collection__item-accessory { + margin-right: 16px; + text-align: left; +} +.tox[dir="rtl"] .tox-collection .tox-collection__item-caret { + margin-right: 16px; + transform: rotateY(180deg); +} +.tox[dir="rtl"] .tox-collection--horizontal .tox-collection__item-caret { + margin-right: 4px; +} +.tox .tox-color-picker-container { + display: flex; + flex-direction: row; + height: 225px; + margin: 0; +} +.tox .tox-sv-palette { + box-sizing: border-box; + display: flex; + height: 100%; +} +.tox .tox-sv-palette-spectrum { + height: 100%; +} +.tox .tox-sv-palette, +.tox .tox-sv-palette-spectrum { + width: 225px; +} +.tox .tox-sv-palette-thumb { + background: 0 0; + border: 1px solid #000; + border-radius: 50%; + box-sizing: content-box; + height: 12px; + position: absolute; + width: 12px; +} +.tox .tox-sv-palette-inner-thumb { + border: 1px solid #fff; + border-radius: 50%; + height: 10px; + position: absolute; + width: 10px; +} +.tox .tox-hue-slider { + box-sizing: border-box; + height: 100%; + width: 25px; +} +.tox .tox-hue-slider-spectrum { + background: linear-gradient( + to bottom, + red, + #ff0080, + #f0f, + #8000ff, + #00f, + #0080ff, + #0ff, + #00ff80, + #0f0, + #80ff00, + #ff0, + #ff8000, + red + ); + height: 100%; + width: 100%; +} +.tox .tox-hue-slider, +.tox .tox-hue-slider-spectrum { + width: 20px; +} +.tox .tox-hue-slider-spectrum:focus, +.tox .tox-sv-palette-spectrum:focus { + outline: #08f solid; +} +.tox .tox-hue-slider-thumb { + background: var(--blocks-background); + border: 1px solid #000; + box-sizing: content-box; + height: 4px; + width: 100%; +} +.tox .tox-rgb-form { + display: flex; + flex-direction: column; + justify-content: space-between; +} +.tox .tox-rgb-form div { + align-items: center; + display: flex; + justify-content: space-between; + margin-bottom: 5px; + width: inherit; +} +.tox .tox-rgb-form input { + width: 6em; +} +.tox .tox-rgb-form input.tox-invalid { + border: 1px solid red !important; +} +.tox .tox-rgb-form .tox-rgba-preview { + border: 1px solid #000; + flex-grow: 2; + margin-bottom: 0; +} +.tox:not([dir="rtl"]) .tox-sv-palette { + margin-right: 15px; +} +.tox:not([dir="rtl"]) .tox-hue-slider { + margin-right: 15px; +} +.tox:not([dir="rtl"]) .tox-hue-slider-thumb { + margin-left: -1px; +} +.tox:not([dir="rtl"]) .tox-rgb-form label { + margin-right: 0.5em; +} +.tox[dir="rtl"] .tox-sv-palette { + margin-left: 15px; +} +.tox[dir="rtl"] .tox-hue-slider { + margin-left: 15px; +} +.tox[dir="rtl"] .tox-hue-slider-thumb { + margin-right: -1px; +} +.tox[dir="rtl"] .tox-rgb-form label { + margin-left: 0.5em; +} +.tox .tox-toolbar .tox-swatches, +.tox .tox-toolbar__overflow .tox-swatches, +.tox .tox-toolbar__primary .tox-swatches { + margin: 2px 0 3px 4px; +} +.tox .tox-collection--list .tox-collection__group .tox-swatches-menu { + border: 0; + margin: -4px 0; +} +.tox .tox-swatches__row { + display: flex; +} +.tox .tox-swatch { + height: 30px; + transition: transform 0.15s, box-shadow 0.15s; + width: 30px; +} +.tox .tox-swatch:focus, +.tox .tox-swatch:hover { + box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.3) inset; + transform: scale(0.8); +} +.tox .tox-swatch--remove { + align-items: center; + display: flex; + justify-content: center; +} +.tox .tox-swatch--remove svg path { + stroke: #e74c3c; +} +.tox .tox-swatches__picker-btn { + align-items: center; + background-color: transparent; + border: 0; + cursor: pointer; + display: flex; + height: 30px; + justify-content: center; + outline: 0; + padding: 0; + width: 30px; +} +.tox .tox-swatches__picker-btn svg { + fill: var(--text-color, #222f3e); + height: 24px; + width: 24px; +} +.tox .tox-swatches__picker-btn:hover { + background: var(--inputs-background, #dee0e2); +} +.tox div.tox-swatch:not(.tox-swatch--remove) svg { + display: none; + fill: var(--text-color, #222f3e); + height: 24px; + margin: calc((30px - 24px) / 2) calc((30px - 24px) / 2); + width: 24px; +} +.tox div.tox-swatch:not(.tox-swatch--remove) svg path { + fill: var(--blocks-background); + paint-order: stroke; + stroke: var(--text-color, #222f3e); + stroke-width: 2px; +} +.tox div.tox-swatch:not(.tox-swatch--remove).tox-collection__item--enabled svg { + display: block; +} +.tox:not([dir="rtl"]) .tox-swatches__picker-btn { + margin-left: auto; +} +.tox[dir="rtl"] .tox-swatches__picker-btn { + margin-right: auto; +} +.tox .tox-comment-thread { + background: var(--blocks-background); + position: relative; +} +.tox .tox-comment-thread > :not(:first-child) { + margin-top: 8px; +} +.tox .tox-comment { + background: var(--blocks-background); + border: 1px solid var(--border-color, #ccc); + border-radius: 3px; + box-shadow: 0 4px 8px 0 rgba(34, 47, 62, 0.1); + padding: 8px 8px 16px 8px; + position: relative; +} +.tox .tox-comment__header { + align-items: center; + color: var(--text-color, #222f3e); + display: flex; + justify-content: space-between; +} +.tox .tox-comment__date { + color: var(--text-color, #222f3e); + font-size: 12px; + line-height: 18px; +} +.tox .tox-comment__body { + color: var(--text-color, #222f3e); + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 1.3; + margin-top: 8px; + position: relative; + text-transform: initial; +} +.tox .tox-comment__body textarea { + resize: none; + white-space: normal; + width: 100%; +} +.tox .tox-comment__expander { + padding-top: 8px; +} +.tox .tox-comment__expander p { + color: var(--muted-color, rgba(34, 47, 62, 0.7)); + font-size: 14px; + font-style: normal; +} +.tox .tox-comment__body p { + margin: 0; +} +.tox .tox-comment__buttonspacing { + padding-top: 16px; + text-align: center; +} +.tox .tox-comment-thread__overlay::after { + background: var(--blocks-background); + bottom: 0; + content: ""; + display: flex; + left: 0; + opacity: 0.9; + position: absolute; + right: 0; + top: 0; + z-index: 5; +} +.tox .tox-comment__reply { + display: flex; + flex-shrink: 0; + flex-wrap: wrap; + justify-content: flex-end; + margin-top: 8px; +} +.tox .tox-comment__reply > :first-child { + margin-bottom: 8px; + width: 100%; +} +.tox .tox-comment__edit { + display: flex; + flex-wrap: wrap; + justify-content: flex-end; + margin-top: 16px; +} +.tox .tox-comment__gradient::after { + background: linear-gradient(rgba(255, 255, 255, 0), #fff); + bottom: 0; + content: ""; + display: block; + height: 5em; + margin-top: -40px; + position: absolute; + width: 100%; +} +.tox .tox-comment__overlay { + background: var(--blocks-background); + bottom: 0; + display: flex; + flex-direction: column; + flex-grow: 1; + left: 0; + opacity: 0.9; + position: absolute; + right: 0; + text-align: center; + top: 0; + z-index: 5; +} +.tox .tox-comment__loading-text { + align-items: center; + color: var(--text-color, #222f3e); + display: flex; + flex-direction: column; + position: relative; +} +.tox .tox-comment__loading-text > div { + padding-bottom: 16px; +} +.tox .tox-comment__overlaytext { + bottom: 0; + flex-direction: column; + font-size: 14px; + left: 0; + padding: 1em; + position: absolute; + right: 0; + top: 0; + z-index: 10; +} +.tox .tox-comment__overlaytext p { + background-color: var(--blocks-background); + box-shadow: 0 0 8px 8px #fff; + color: var(--text-color, #222f3e); + text-align: center; +} +.tox .tox-comment__overlaytext div:nth-of-type(2) { + font-size: 0.8em; +} +.tox .tox-comment__busy-spinner { + align-items: center; + background-color: var(--blocks-background); + bottom: 0; + display: flex; + justify-content: center; + left: 0; + position: absolute; + right: 0; + top: 0; + z-index: 20; +} +.tox .tox-comment__scroll { + display: flex; + flex-direction: column; + flex-shrink: 1; + overflow: auto; +} +.tox .tox-conversations { + margin: 8px; +} +.tox:not([dir="rtl"]) .tox-comment__edit { + margin-left: 8px; +} +.tox:not([dir="rtl"]) .tox-comment__buttonspacing > :last-child, +.tox:not([dir="rtl"]) .tox-comment__edit > :last-child, +.tox:not([dir="rtl"]) .tox-comment__reply > :last-child { + margin-left: 8px; +} +.tox[dir="rtl"] .tox-comment__edit { + margin-right: 8px; +} +.tox[dir="rtl"] .tox-comment__buttonspacing > :last-child, +.tox[dir="rtl"] .tox-comment__edit > :last-child, +.tox[dir="rtl"] .tox-comment__reply > :last-child { + margin-right: 8px; +} +.tox .tox-user { + align-items: center; + display: flex; +} +.tox .tox-user__avatar svg { + fill: var(--muted-color, rgba(34, 47, 62, 0.7)); +} +.tox .tox-user__avatar img { + border-radius: 50%; + height: 36px; + object-fit: cover; + vertical-align: middle; + width: 36px; +} +.tox .tox-user__name { + color: var(--text-color, #222f3e); + font-size: 14px; + font-style: normal; + font-weight: 700; + line-height: 18px; + text-transform: none; +} +.tox:not([dir="rtl"]) .tox-user__avatar img, +.tox:not([dir="rtl"]) .tox-user__avatar svg { + margin-right: 8px; +} +.tox:not([dir="rtl"]) .tox-user__avatar + .tox-user__name { + margin-left: 8px; +} +.tox[dir="rtl"] .tox-user__avatar img, +.tox[dir="rtl"] .tox-user__avatar svg { + margin-left: 8px; +} +.tox[dir="rtl"] .tox-user__avatar + .tox-user__name { + margin-right: 8px; +} +.tox .tox-dialog-wrap { + align-items: center; + bottom: 0; + display: flex; + justify-content: center; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 1100; +} +.tox .tox-dialog-wrap__backdrop { + background-color: rgba(255, 255, 255, 0.75); + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + z-index: 1; +} +.tox .tox-dialog-wrap__backdrop--opaque { + background-color: var(--blocks-background); +} +.tox .tox-dialog { + background-color: var(--blocks-background); + border-color: var(--border-color, #ccc); + border-radius: 3px; + border-style: solid; + border-width: 1px; + box-shadow: 0 16px 16px -10px rgba(34, 47, 62, 0.15), + 0 0 40px 1px rgba(34, 47, 62, 0.15); + display: flex; + flex-direction: column; + max-height: 100%; + max-width: 480px; + overflow: hidden; + position: relative; + width: 95vw; + z-index: 2; +} +@media only screen and (max-width: 767px) { + body:not(.tox-force-desktop) .tox .tox-dialog { + align-self: flex-start; + margin: 8px auto; + max-height: calc(100vh - 8px * 2); + width: calc(100vw - 16px); + } +} +.tox .tox-dialog-inline { + z-index: 1100; +} +.tox .tox-dialog__header { + align-items: center; + background-color: var(--blocks-background); + border-bottom: none; + color: var(--text-color, #222f3e); + display: flex; + font-size: 16px; + justify-content: space-between; + padding: 8px 16px 0 16px; + position: relative; +} +.tox .tox-dialog__header .tox-button { + z-index: 1; +} +.tox .tox-dialog__draghandle { + cursor: grab; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; +} +.tox .tox-dialog__draghandle:active { + cursor: grabbing; +} +.tox .tox-dialog__dismiss { + margin-left: auto; +} +.tox .tox-dialog__title { + font-family: "Inter", system-ui, sans-serif; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 1.3; + margin: 0; + text-transform: none; +} +.tox .tox-dialog__body { + color: var(--text-color, #222f3e); + display: flex; + flex: 1; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 1.3; + min-width: 0; + text-align: left; + text-transform: none; +} +@media only screen and (max-width: 767px) { + body:not(.tox-force-desktop) .tox .tox-dialog__body { + flex-direction: column; + } +} +.tox .tox-dialog__body-nav { + align-items: flex-start; + display: flex; + flex-direction: column; + flex-shrink: 0; + padding: 16px 16px; +} +@media only screen and (min-width: 768px) { + .tox .tox-dialog__body-nav { + max-width: 11em; + } +} +@media only screen and (max-width: 767px) { + body:not(.tox-force-desktop) .tox .tox-dialog__body-nav { + flex-direction: row; + -webkit-overflow-scrolling: touch; + overflow-x: auto; + padding-bottom: 0; + } +} +.tox .tox-dialog__body-nav-item { + border-bottom: 2px solid transparent; + color: var(--muted-color, rgba(34, 47, 62, 0.7)); + display: inline-block; + flex-shrink: 0; + font-size: 14px; + line-height: 1.3; + margin-bottom: 8px; + max-width: 13em; + text-decoration: none; +} +.tox .tox-dialog__body-nav-item:focus { + background-color: rgba(32, 122, 183, 0.1); +} +.tox .tox-dialog__body-nav-item--active { + border-bottom: 2px solid #207ab7; + color: #207ab7; +} +.tox .tox-dialog__body-content { + box-sizing: border-box; + display: flex; + flex: 1; + flex-direction: column; + max-height: min(650px, calc(100vh - 110px)); + overflow: auto; + -webkit-overflow-scrolling: touch; + padding: 16px 16px; +} +.tox .tox-dialog__body-content > * { + margin-bottom: 0; + margin-top: 16px; +} +.tox .tox-dialog__body-content > :first-child { + margin-top: 0; +} +.tox .tox-dialog__body-content > :last-child { + margin-bottom: 0; +} +.tox .tox-dialog__body-content > :only-child { + margin-bottom: 0; + margin-top: 0; +} +.tox .tox-dialog__body-content a { + color: #207ab7; + cursor: pointer; + text-decoration: underline; +} +.tox .tox-dialog__body-content a:focus, +.tox .tox-dialog__body-content a:hover { + color: var(--inputs-background); + text-decoration: underline; +} +.tox .tox-dialog__body-content a:focus-visible { + border-radius: 1px; + outline: 2px solid #207ab7; + outline-offset: 2px; +} +.tox .tox-dialog__body-content a:active { + color: #092335; + text-decoration: underline; +} +.tox .tox-dialog__body-content svg { + fill: var(--text-color, #222f3e); +} +.tox .tox-dialog__body-content strong { + font-weight: 700; +} +.tox .tox-dialog__body-content ul { + list-style-type: disc; +} +.tox .tox-dialog__body-content dd, +.tox .tox-dialog__body-content ol, +.tox .tox-dialog__body-content ul { + padding-inline-start: 2.5rem; +} +.tox .tox-dialog__body-content dl, +.tox .tox-dialog__body-content ol, +.tox .tox-dialog__body-content ul { + margin-bottom: 16px; +} +.tox .tox-dialog__body-content dd, +.tox .tox-dialog__body-content dl, +.tox .tox-dialog__body-content dt, +.tox .tox-dialog__body-content ol, +.tox .tox-dialog__body-content ul { + display: block; + margin-inline-end: 0; + margin-inline-start: 0; +} +.tox .tox-dialog__body-content .tox-form__group h1 { + color: var(--text-color, #222f3e); + font-size: 20px; + font-style: normal; + font-weight: 700; + letter-spacing: normal; + margin-bottom: 16px; + margin-top: 2rem; + text-transform: none; +} +.tox .tox-dialog__body-content .tox-form__group h2 { + color: var(--text-color, #222f3e); + font-size: 16px; + font-style: normal; + font-weight: 700; + letter-spacing: normal; + margin-bottom: 16px; + margin-top: 2rem; + text-transform: none; +} +.tox .tox-dialog__body-content .tox-form__group p { + margin-bottom: 16px; +} +.tox .tox-dialog__body-content .tox-form__group h1:first-child, +.tox .tox-dialog__body-content .tox-form__group h2:first-child, +.tox .tox-dialog__body-content .tox-form__group p:first-child { + margin-top: 0; +} +.tox .tox-dialog__body-content .tox-form__group h1:last-child, +.tox .tox-dialog__body-content .tox-form__group h2:last-child, +.tox .tox-dialog__body-content .tox-form__group p:last-child { + margin-bottom: 0; +} +.tox .tox-dialog__body-content .tox-form__group h1:only-child, +.tox .tox-dialog__body-content .tox-form__group h2:only-child, +.tox .tox-dialog__body-content .tox-form__group p:only-child { + margin-bottom: 0; + margin-top: 0; +} +.tox .tox-dialog__body-content .tox-form__group .tox-label.tox-label--center { + text-align: center; +} +.tox .tox-dialog__body-content .tox-form__group .tox-label.tox-label--end { + text-align: end; +} +.tox .tox-dialog--width-lg { + height: 650px; + max-width: 1200px; +} +.tox .tox-dialog--fullscreen { + height: 100%; + max-width: 100%; +} +.tox .tox-dialog--fullscreen .tox-dialog__body-content { + max-height: 100%; +} +.tox .tox-dialog--width-md { + max-width: 800px; +} +.tox .tox-dialog--width-md .tox-dialog__body-content { + overflow: auto; +} +.tox .tox-dialog__body-content--centered { + text-align: center; +} +.tox .tox-dialog__footer { + align-items: center; + background-color: var(--blocks-background); + border-top: 1px solid var(--border-color, #ccc); + display: flex; + justify-content: space-between; + padding: 8px 16px; +} +.tox .tox-dialog__footer-end, +.tox .tox-dialog__footer-start { + display: flex; +} +.tox .tox-dialog__busy-spinner { + align-items: center; + background-color: rgba(255, 255, 255, 0.75); + bottom: 0; + display: flex; + justify-content: center; + left: 0; + position: absolute; + right: 0; + top: 0; + z-index: 3; +} +.tox .tox-dialog__table { + border-collapse: collapse; + width: 100%; +} +.tox .tox-dialog__table thead th { + font-weight: 700; + padding-bottom: 8px; +} +.tox .tox-dialog__table thead th:first-child { + padding-right: 8px; +} +.tox .tox-dialog__table tbody tr { + border-bottom: 1px solid #404040; +} +.tox .tox-dialog__table tbody tr:last-child { + border-bottom: none; +} +.tox .tox-dialog__table td { + padding-bottom: 8px; + padding-top: 8px; +} +.tox .tox-dialog__table td:first-child { + padding-right: 8px; +} +.tox .tox-dialog__iframe { + min-height: 200px; +} +.tox .tox-dialog__iframe.tox-dialog__iframe--opaque { + background: var(--blocks-background); +} +.tox .tox-navobj-bordered { + position: relative; +} +.tox .tox-navobj-bordered::before { + border: 1px solid var(--border-color, #ccc); + border-radius: 3px; + content: ""; + inset: 0; + opacity: 1; + pointer-events: none; + position: absolute; + z-index: 1; +} +.tox .tox-navobj-bordered-focus.tox-navobj-bordered::before { + border-color: #207ab7; + box-shadow: none; + outline: 2px solid rgba(32, 122, 183, 0.25); +} +.tox .tox-dialog__popups { + position: absolute; + width: 100%; + z-index: 1100; +} +.tox .tox-dialog__body-iframe { + display: flex; + flex: 1; + flex-direction: column; +} +.tox .tox-dialog__body-iframe .tox-navobj { + display: flex; + flex: 1; +} +.tox .tox-dialog__body-iframe .tox-navobj :nth-child(2) { + flex: 1; + height: 100%; +} +.tox .tox-dialog-dock-fadeout { + opacity: 0; + visibility: hidden; +} +.tox .tox-dialog-dock-fadein { + opacity: 1; + visibility: visible; +} +.tox .tox-dialog-dock-transition { + transition: visibility 0s linear 0.3s, opacity 0.3s ease; +} +.tox .tox-dialog-dock-transition.tox-dialog-dock-fadein { + transition-delay: 0s; +} +@media only screen and (max-width: 767px) { + body:not(.tox-force-desktop) .tox:not([dir="rtl"]) .tox-dialog__body-nav { + margin-right: 0; + } +} +@media only screen and (max-width: 767px) { + body:not(.tox-force-desktop) + .tox:not([dir="rtl"]) + .tox-dialog__body-nav-item:not(:first-child) { + margin-left: 8px; + } +} +.tox:not([dir="rtl"]) .tox-dialog__footer .tox-dialog__footer-end > *, +.tox:not([dir="rtl"]) .tox-dialog__footer .tox-dialog__footer-start > * { + margin-left: 8px; +} +.tox[dir="rtl"] .tox-dialog__body { + text-align: right; +} +@media only screen and (max-width: 767px) { + body:not(.tox-force-desktop) .tox[dir="rtl"] .tox-dialog__body-nav { + margin-left: 0; + } +} +@media only screen and (max-width: 767px) { + body:not(.tox-force-desktop) + .tox[dir="rtl"] + .tox-dialog__body-nav-item:not(:first-child) { + margin-right: 8px; + } +} +.tox[dir="rtl"] .tox-dialog__footer .tox-dialog__footer-end > *, +.tox[dir="rtl"] .tox-dialog__footer .tox-dialog__footer-start > * { + margin-right: 8px; +} +body.tox-dialog__disable-scroll { + overflow: hidden; +} +.tox .tox-dropzone-container { + display: flex; + flex: 1; +} +.tox .tox-dropzone { + align-items: center; + background: var(--blocks-background); + border: 2px dashed var(--border-color, #ccc); + box-sizing: border-box; + display: flex; + flex-direction: column; + flex-grow: 1; + justify-content: center; + min-height: 100px; + padding: 10px; +} +.tox .tox-dropzone p { + color: var(--muted-color, rgba(34, 47, 62, 0.7)); + margin: 0 0 16px 0; +} +.tox .tox-edit-area { + display: flex; + flex: 1; + overflow: hidden; + position: relative; +} +.tox .tox-edit-area::before { + border: 2px solid #2d6adf; + border-radius: 4px; + content: ""; + inset: 0; + opacity: 0; + pointer-events: none; + position: absolute; + transition: opacity 0.15s; + z-index: 1; +} +.tox .tox-edit-area__iframe { + background-color: var(--inputs-background, #fff); + border: 0; + box-sizing: border-box; + flex: 1; + height: 100%; + position: absolute; + width: 100%; +} +.tox.tox-edit-focus .tox-edit-area::before { + opacity: 1; +} +.tox.tox-inline-edit-area { + border: 1px dotted var(--border-color, #ccc); +} +.tox .tox-editor-container { + display: flex; + flex: 1 1 auto; + flex-direction: column; + overflow: hidden; +} +.tox .tox-editor-header { + display: grid; + grid-template-columns: 1fr min-content; + z-index: 2; +} +.tox:not(.tox-tinymce-inline) .tox-editor-header { + background-color: var(--blocks-background); + border-bottom: none; + box-shadow: none; + padding: 4px 0; +} +.tox:not(.tox-tinymce-inline) + .tox-editor-header:not(.tox-editor-dock-transition) { + transition: box-shadow 0.5s; +} +.tox:not(.tox-tinymce-inline).tox-tinymce--toolbar-bottom .tox-editor-header { + border-top: 1px solid var(--border-color, #ccc); + box-shadow: none; +} +.tox:not(.tox-tinymce-inline).tox-tinymce--toolbar-sticky-on + .tox-editor-header { + background-color: var(--blocks-background); + box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.25); + padding: 4px 0; +} +.tox:not( + .tox-tinymce-inline + ).tox-tinymce--toolbar-sticky-on.tox-tinymce--toolbar-bottom + .tox-editor-header { + box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.25); +} +.tox.tox:not(.tox-tinymce-inline) .tox-editor-header.tox-editor-header--empty { + background: 0 0; + border: none; + box-shadow: none; + padding: 0; +} +.tox-editor-dock-fadeout { + opacity: 0; + visibility: hidden; +} +.tox-editor-dock-fadein { + opacity: 1; + visibility: visible; +} +.tox-editor-dock-transition { + transition: visibility 0s linear 0.25s, opacity 0.25s ease; +} +.tox-editor-dock-transition.tox-editor-dock-fadein { + transition-delay: 0s; +} +.tox .tox-control-wrap { + flex: 1; + position: relative; +} +.tox + .tox-control-wrap:not(.tox-control-wrap--status-invalid) + .tox-control-wrap__status-icon-invalid, +.tox + .tox-control-wrap:not(.tox-control-wrap--status-unknown) + .tox-control-wrap__status-icon-unknown, +.tox + .tox-control-wrap:not(.tox-control-wrap--status-valid) + .tox-control-wrap__status-icon-valid { + display: none; +} +.tox .tox-control-wrap svg { + display: block; +} +.tox .tox-control-wrap__status-icon-wrap { + position: absolute; + top: 50%; + transform: translateY(-50%); +} +.tox .tox-control-wrap__status-icon-invalid svg { + fill: #c00; +} +.tox .tox-control-wrap__status-icon-unknown svg { + fill: orange; +} +.tox .tox-control-wrap__status-icon-valid svg { + fill: green; +} +.tox:not([dir="rtl"]) .tox-control-wrap--status-invalid .tox-textfield, +.tox:not([dir="rtl"]) .tox-control-wrap--status-unknown .tox-textfield, +.tox:not([dir="rtl"]) .tox-control-wrap--status-valid .tox-textfield { + padding-right: 32px; +} +.tox:not([dir="rtl"]) .tox-control-wrap__status-icon-wrap { + right: 4px; +} +.tox[dir="rtl"] .tox-control-wrap--status-invalid .tox-textfield, +.tox[dir="rtl"] .tox-control-wrap--status-unknown .tox-textfield, +.tox[dir="rtl"] .tox-control-wrap--status-valid .tox-textfield { + padding-left: 32px; +} +.tox[dir="rtl"] .tox-control-wrap__status-icon-wrap { + left: 4px; +} +.tox .tox-autocompleter { + max-width: 25em; +} +.tox .tox-autocompleter .tox-menu { + box-sizing: border-box; + max-width: 25em; +} +.tox .tox-autocompleter .tox-autocompleter-highlight { + font-weight: 700; +} +.tox .tox-color-input { + display: flex; + position: relative; + z-index: 1; +} +.tox .tox-color-input .tox-textfield { + z-index: -1; +} +.tox .tox-color-input span { + border-color: rgba(34, 47, 62, 0.2); + border-radius: 3px; + border-style: solid; + border-width: 1px; + box-shadow: none; + box-sizing: border-box; + height: 24px; + position: absolute; + top: 6px; + width: 24px; +} +.tox .tox-color-input span:focus:not([aria-disabled="true"]), +.tox .tox-color-input span:hover:not([aria-disabled="true"]) { + border-color: #207ab7; + cursor: pointer; +} +.tox .tox-color-input span::before { + background-image: linear-gradient( + 45deg, + rgba(0, 0, 0, 0.25) 25%, + transparent 25% + ), + linear-gradient(-45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.25) 75%), + linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.25) 75%); + background-position: 0 0, 0 6px, 6px -6px, -6px 0; + background-size: 12px 12px; + border: 1px solid #fff; + border-radius: 3px; + box-sizing: border-box; + content: ""; + height: 24px; + left: -1px; + position: absolute; + top: -1px; + width: 24px; + z-index: -1; +} +.tox .tox-color-input span[aria-disabled="true"] { + cursor: not-allowed; +} +.tox:not([dir="rtl"]) .tox-color-input .tox-textfield { + padding-left: 36px; +} +.tox:not([dir="rtl"]) .tox-color-input span { + left: 6px; +} +.tox[dir="rtl"] .tox-color-input .tox-textfield { + padding-right: 36px; +} +.tox[dir="rtl"] .tox-color-input span { + right: 6px; +} +.tox .tox-label, +.tox .tox-toolbar-label { + color: var(--text-color, rgba(34, 47, 62, 0.7)); + display: block; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 1.3; + padding: 0 8px 0 0; + text-transform: none; + white-space: nowrap; +} +.tox .tox-toolbar-label { + padding: 0 8px; +} +.tox[dir="rtl"] .tox-label { + padding: 0 0 0 8px; +} +.tox .tox-form { + display: flex; + flex: 1; + flex-direction: column; +} +.tox .tox-form__group { + box-sizing: border-box; + margin-bottom: 4px; +} +.tox .tox-form-group--maximize { + flex: 1; +} +.tox .tox-form__group--error { + color: #c00; +} +.tox .tox-form__group--collection { + display: flex; +} +.tox .tox-form__grid { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; +} +.tox .tox-form__grid--2col > .tox-form__group { + width: calc(50% - (8px / 2)); +} +.tox .tox-form__grid--3col > .tox-form__group { + width: calc(100% / 3 - (8px / 2)); +} +.tox .tox-form__grid--4col > .tox-form__group { + width: calc(25% - (8px / 2)); +} +.tox .tox-form__controls-h-stack { + align-items: center; + display: flex; +} +.tox .tox-form__group--inline { + align-items: center; + display: flex; +} +.tox .tox-form__group--stretched { + display: flex; + flex: 1; + flex-direction: column; +} +.tox .tox-form__group--stretched .tox-textarea { + flex: 1; +} +.tox .tox-form__group--stretched .tox-navobj { + display: flex; + flex: 1; +} +.tox .tox-form__group--stretched .tox-navobj :nth-child(2) { + flex: 1; + height: 100%; +} +.tox:not([dir="rtl"]) .tox-form__controls-h-stack > :not(:first-child) { + margin-left: 4px; +} +.tox[dir="rtl"] .tox-form__controls-h-stack > :not(:first-child) { + margin-right: 4px; +} +.tox .tox-lock.tox-locked .tox-lock-icon__unlock, +.tox .tox-lock:not(.tox-locked) .tox-lock-icon__lock { + display: none; +} +.tox .tox-listboxfield .tox-listbox--select, +.tox .tox-textarea, +.tox .tox-textarea-wrap .tox-textarea:focus, +.tox .tox-textfield, +.tox .tox-toolbar-textfield { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: var(--blocks-background); + border-color: var(--border-color, #ccc); + border-radius: 3px; + border-style: solid; + border-width: 1px; + box-shadow: none; + box-sizing: border-box; + color: var(--text-color, #222f3e); + font-family: "Inter", system-ui, sans-serif; + font-size: 16px; + line-height: 24px; + margin: 0; + min-height: 34px; + outline: 0; + padding: 5px 4.75px; + resize: none; + width: 100%; +} +.tox .tox-textarea[disabled], +.tox .tox-textfield[disabled] { + background-color: #f2f2f2; + color: rgba(34, 47, 62, 0.85); + cursor: not-allowed; +} +.tox .tox-custom-editor:focus-within, +.tox .tox-listboxfield .tox-listbox--select:focus, +.tox .tox-textarea-wrap:focus-within, +.tox .tox-textarea:focus, +.tox .tox-textfield:focus { + background-color: var(--blocks-background); + border-color: #207ab7; + box-shadow: none; + outline: 2px solid rgba(32, 122, 183, 0.25); +} +.tox .tox-toolbar-textfield { + border-width: 0; + margin-bottom: 3px; + margin-top: 2px; + max-width: 250px; +} +.tox .tox-naked-btn { + background-color: transparent; + border: 0; + border-color: transparent; + box-shadow: unset; + color: #207ab7; + cursor: pointer; + display: block; + margin: 0; + padding: 0; +} +.tox .tox-naked-btn svg { + display: block; + fill: var(--text-color, #222f3e); +} +.tox:not([dir="rtl"]) .tox-toolbar-textfield + * { + margin-left: 4px; +} +.tox[dir="rtl"] .tox-toolbar-textfield + * { + margin-right: 4px; +} +.tox .tox-listboxfield { + cursor: pointer; + position: relative; +} +.tox .tox-listboxfield .tox-listbox--select[disabled] { + background-color: #f2f2f2; + color: rgba(34, 47, 62, 0.85); + cursor: not-allowed; +} +.tox .tox-listbox__select-label { + cursor: default; + flex: 1; + margin: 0 4px; +} +.tox .tox-listbox__select-chevron { + align-items: center; + display: flex; + justify-content: center; + width: 16px; +} +.tox .tox-listbox__select-chevron svg { + fill: var(--text-color, #222f3e); +} +.tox .tox-listboxfield .tox-listbox--select { + align-items: center; + display: flex; +} +.tox:not([dir="rtl"]) .tox-listboxfield svg { + right: 8px; +} +.tox[dir="rtl"] .tox-listboxfield svg { + left: 8px; +} +.tox .tox-selectfield { + cursor: pointer; + position: relative; +} +.tox .tox-selectfield select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: var(--blocks-background); + border-color: var(--border-color, #ccc); + border-radius: 3px; + border-style: solid; + border-width: 1px; + box-shadow: none; + box-sizing: border-box; + color: var(--text-color, #222f3e); + font-family: "Inter", system-ui, sans-serif; + font-size: 16px; + line-height: 24px; + margin: 0; + min-height: 34px; + outline: 0; + padding: 5px 4.75px; + resize: none; + width: 100%; +} +.tox .tox-selectfield select[disabled] { + background-color: #f2f2f2; + color: rgba(34, 47, 62, 0.85); + cursor: not-allowed; +} +.tox .tox-selectfield select::-ms-expand { + display: none; +} +.tox .tox-selectfield select:focus { + background-color: var(--blocks-background); + border-color: #207ab7; + box-shadow: none; + outline: 2px solid rgba(32, 122, 183, 0.25); +} +.tox .tox-selectfield svg { + pointer-events: none; + position: absolute; + top: 50%; + transform: translateY(-50%); +} +.tox:not([dir="rtl"]) .tox-selectfield select[size="0"], +.tox:not([dir="rtl"]) .tox-selectfield select[size="1"] { + padding-right: 24px; +} +.tox:not([dir="rtl"]) .tox-selectfield svg { + right: 8px; +} +.tox[dir="rtl"] .tox-selectfield select[size="0"], +.tox[dir="rtl"] .tox-selectfield select[size="1"] { + padding-left: 24px; +} +.tox[dir="rtl"] .tox-selectfield svg { + left: 8px; +} +.tox .tox-textarea-wrap { + border-color: var(--border-color, #ccc); + border-radius: 3px; + border-style: solid; + border-width: 1px; + display: flex; + flex: 1; + overflow: hidden; +} +.tox .tox-textarea { + -webkit-appearance: textarea; + -moz-appearance: textarea; + appearance: textarea; + white-space: pre-wrap; +} +.tox .tox-textarea-wrap .tox-textarea { + border: none; +} +.tox .tox-textarea-wrap .tox-textarea:focus { + border: none; +} +.tox-fullscreen { + border: 0; + height: 100%; + margin: 0; + overflow: hidden; + overscroll-behavior: none; + padding: 0; + touch-action: pinch-zoom; + width: 100%; +} +.tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle { + display: none; +} +.tox-shadowhost.tox-fullscreen, +.tox.tox-tinymce.tox-fullscreen { + left: 0; + position: fixed; + top: 0; + z-index: 1200; +} +.tox.tox-tinymce.tox-fullscreen { + background-color: transparent; +} +.tox-fullscreen .tox.tox-tinymce-aux, +.tox-fullscreen ~ .tox.tox-tinymce-aux { + z-index: 1201; +} +.tox .tox-help__more-link { + list-style: none; + margin-top: 1em; +} +.tox .tox-imagepreview { + background-color: #666; + height: 380px; + overflow: hidden; + position: relative; + width: 100%; +} +.tox .tox-imagepreview.tox-imagepreview__loaded { + overflow: auto; +} +.tox .tox-imagepreview__container { + display: flex; + left: 100vw; + position: absolute; + top: 100vw; +} +.tox .tox-imagepreview__image { + background: url(data:image/gif;base64,R0lGODdhDAAMAIABAMzMzP///ywAAAAADAAMAAACFoQfqYeabNyDMkBQb81Uat85nxguUAEAOw==); +} +.tox .tox-image-tools .tox-spacer { + flex: 1; +} +.tox .tox-image-tools .tox-bar { + align-items: center; + display: flex; + height: 60px; + justify-content: center; +} +.tox .tox-image-tools .tox-imagepreview, +.tox .tox-image-tools .tox-imagepreview + .tox-bar { + margin-top: 8px; +} +.tox .tox-image-tools .tox-croprect-block { + background: #000; + opacity: 0.5; + position: absolute; + zoom: 1; +} +.tox .tox-image-tools .tox-croprect-handle { + border: 2px solid #fff; + height: 20px; + left: 0; + position: absolute; + top: 0; + width: 20px; +} +.tox .tox-image-tools .tox-croprect-handle-move { + border: 0; + cursor: move; + position: absolute; +} +.tox .tox-image-tools .tox-croprect-handle-nw { + border-width: 2px 0 0 2px; + cursor: nw-resize; + left: 100px; + margin: -2px 0 0 -2px; + top: 100px; +} +.tox .tox-image-tools .tox-croprect-handle-ne { + border-width: 2px 2px 0 0; + cursor: ne-resize; + left: 200px; + margin: -2px 0 0 -20px; + top: 100px; +} +.tox .tox-image-tools .tox-croprect-handle-sw { + border-width: 0 0 2px 2px; + cursor: sw-resize; + left: 100px; + margin: -20px 2px 0 -2px; + top: 200px; +} +.tox .tox-image-tools .tox-croprect-handle-se { + border-width: 0 2px 2px 0; + cursor: se-resize; + left: 200px; + margin: -20px 0 0 -20px; + top: 200px; +} +.tox .tox-insert-table-picker { + display: flex; + flex-wrap: wrap; + width: 170px; +} +.tox .tox-insert-table-picker > div { + border-color: var(--border-color, #ccc); + border-style: solid; + border-width: 0 1px 1px 0; + box-sizing: border-box; + height: 17px; + width: 17px; +} +.tox .tox-collection--list .tox-collection__group .tox-insert-table-picker { + margin: 0 -4px; +} +.tox .tox-insert-table-picker .tox-insert-table-picker__selected { + background-color: rgba(32, 122, 183, 0.5); + border-color: rgba(32, 122, 183, 0.5); +} +.tox .tox-insert-table-picker__label { + color: var(--muted-color, rgba(34, 47, 62, 0.7)); + display: block; + font-size: 14px; + padding: 4px; + text-align: center; + width: 100%; +} +.tox:not([dir="rtl"]) .tox-insert-table-picker > div:nth-child(10n) { + border-right: 0; +} +.tox[dir="rtl"] .tox-insert-table-picker > div:nth-child(10n + 1) { + border-right: 0; +} +.tox .tox-menu { + background-color: var(--blocks-background); + border: 1px solid var(--border-color, #ccc); + border-radius: 3px; + box-shadow: 0 4px 8px 0 rgba(34, 47, 62, 0.1); + display: inline-block; + overflow: hidden; + vertical-align: top; + z-index: 1150; +} +.tox .tox-menu.tox-collection.tox-collection--list { + padding: 0 0; +} +.tox .tox-menu.tox-collection.tox-collection--toolbar { + padding: 4px; +} +.tox .tox-menu.tox-collection.tox-collection--grid { + padding: 4px; +} +@media only screen and (min-width: 768px) { + .tox .tox-menu .tox-collection__item-label { + overflow-wrap: break-word; + word-break: normal; + } + .tox .tox-dialog__popups .tox-menu .tox-collection__item-label { + word-break: break-all; + } +} +.tox .tox-menu__label blockquote, +.tox .tox-menu__label code, +.tox .tox-menu__label h1, +.tox .tox-menu__label h2, +.tox .tox-menu__label h3, +.tox .tox-menu__label h4, +.tox .tox-menu__label h5, +.tox .tox-menu__label h6, +.tox .tox-menu__label p { + margin: 0; +} +.tox .tox-menubar { + background-color: var(--blocks-background, #fff); + display: flex; + flex: 0 0 auto; + flex-shrink: 0; + flex-wrap: wrap; + grid-column: 1/-1; + grid-row: 1; + padding: 0 4px 0 4px; +} +.tox .tox-promotion + .tox-menubar { + grid-column: 1; +} +.tox .tox-promotion { + background-color: var(--blocks-background, #fff); + grid-column: 2; + grid-row: 1; + padding-inline-end: 8px; + padding-inline-start: 4px; + padding-top: 5px; +} +.tox .tox-promotion-link { + align-items: unsafe center; + background-color: var(--inputs-background, #e8f1f8); + border-radius: 5px; + color: var(--main-color, #086be6); + cursor: pointer; + display: flex; + font-size: 14px; + height: 26.6px; + padding: 4px 8px; + white-space: nowrap; +} +.tox .tox-mbtn { + align-items: center; + background: 0 0; + border: 0; + border-radius: 3px; + box-shadow: none; + color: var(--text-color, #222f3e); + display: flex; + flex: 0 0 auto; + font-size: 14px; + font-style: normal; + font-weight: 400; + height: 34px; + justify-content: center; + margin: 2px 0 3px 0; + outline: 0; + overflow: hidden; + padding: 0 4px; + text-transform: none; + width: auto; +} +.tox .tox-mbtn[disabled] { + background-color: transparent; + border: 0; + box-shadow: none; + color: var(--text-color, rgba(34, 47, 62, 0.5)); + cursor: not-allowed; +} +.tox .tox-mbtn:focus:not(:disabled) { + background: var(--inputs-background, #dee0e2); + border: 0; + box-shadow: none; + color: var(--text-color, #222f3e); +} +.tox .tox-mbtn--active { + background: var(--inputs-background, #c8cbcf); + border: 0; + box-shadow: none; + color: var(--text-color, #222f3e); +} +.tox .tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active) { + background: var(--inputs-background, #dee0e2); + border: 0; + box-shadow: none; + color: var(--text-color, #222f3e); +} +.tox .tox-mbtn__select-label { + cursor: default; + font-weight: 400; + margin: 0 4px; +} +.tox .tox-mbtn[disabled] .tox-mbtn__select-label { + cursor: not-allowed; +} +.tox .tox-mbtn__select-chevron { + align-items: center; + display: flex; + justify-content: center; + width: 16px; + display: none; +} +.tox .tox-notification { + border-radius: 3px; + border-style: solid; + border-width: 1px; + box-shadow: none; + box-sizing: border-box; + display: grid; + font-size: 14px; + font-weight: 400; + grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr); + margin-top: 4px; + opacity: 0; + padding: 4px; + transition: transform 0.1s ease-in, opacity 150ms ease-in; +} +.tox .tox-notification p { + font-size: 14px; + font-weight: 400; +} +.tox .tox-notification a { + cursor: pointer; + text-decoration: underline; +} +.tox .tox-notification--in { + opacity: 1; +} +.tox .tox-notification--success { + background-color: #e4eeda; + border-color: #d7e6c8; + color: var(--text-color, #222f3e); +} +.tox .tox-notification--success p { + color: var(--text-color, #222f3e); +} +.tox .tox-notification--success a { + color: #517342; +} +.tox .tox-notification--success svg { + fill: var(--text-color, #222f3e); +} +.tox .tox-notification--error { + background-color: #f5cccc; + border-color: #f0b3b3; + color: var(--text-color, #222f3e); +} +.tox .tox-notification--error p { + color: var(--text-color, #222f3e); +} +.tox .tox-notification--error a { + color: #77181f; +} +.tox .tox-notification--error svg { + fill: var(--text-color, #222f3e); +} +.tox .tox-notification--warn, +.tox .tox-notification--warning { + background-color: var(--blocks-background) 5cc; + border-color: var(--blocks-background) 0b3; + color: var(--text-color, #222f3e); +} +.tox .tox-notification--warn p, +.tox .tox-notification--warning p { + color: var(--text-color, #222f3e); +} +.tox .tox-notification--warn a, +.tox .tox-notification--warning a { + color: #7a6e25; +} +.tox .tox-notification--warn svg, +.tox .tox-notification--warning svg { + fill: var(--text-color, #222f3e); +} +.tox .tox-notification--info { + background-color: #d6e7fb; + border-color: #c1dbf9; + color: var(--text-color, #222f3e); +} +.tox .tox-notification--info p { + color: var(--text-color, #222f3e); +} +.tox .tox-notification--info a { + color: #2a64a6; +} +.tox .tox-notification--info svg { + fill: var(--text-color, #222f3e); +} +.tox .tox-notification__body { + align-self: center; + color: var(--text-color, #222f3e); + font-size: 14px; + grid-column-end: 3; + grid-column-start: 2; + grid-row-end: 2; + grid-row-start: 1; + text-align: center; + white-space: normal; + word-break: break-all; + word-break: break-word; +} +.tox .tox-notification__body > * { + margin: 0; +} +.tox .tox-notification__body > * + * { + margin-top: 1rem; +} +.tox .tox-notification__icon { + align-self: center; + grid-column-end: 2; + grid-column-start: 1; + grid-row-end: 2; + grid-row-start: 1; + justify-self: end; +} +.tox .tox-notification__icon svg { + display: block; +} +.tox .tox-notification__dismiss { + align-self: start; + grid-column-end: 4; + grid-column-start: 3; + grid-row-end: 2; + grid-row-start: 1; + justify-self: end; +} +.tox .tox-notification .tox-progress-bar { + grid-column-end: 4; + grid-column-start: 1; + grid-row-end: 3; + grid-row-start: 2; + justify-self: center; +} +.tox .tox-pop { + display: inline-block; + position: relative; +} +.tox .tox-pop--resizing { + transition: width 0.1s ease; +} +.tox .tox-pop--resizing .tox-toolbar, +.tox .tox-pop--resizing .tox-toolbar__group { + flex-wrap: nowrap; +} +.tox .tox-pop--transition { + transition: 0.15s ease; + transition-property: left, right, top, bottom; +} +.tox .tox-pop--transition::after, +.tox .tox-pop--transition::before { + transition: all 0.15s, visibility 0s, opacity 75ms ease 75ms; +} +.tox .tox-pop__dialog { + background-color: var(--blocks-background); + border: 1px solid var(--border-color, #ccc); + border-radius: 3px; + box-shadow: 0 0 2px 0 rgba(34, 47, 62, 0.2), + 0 4px 8px 0 rgba(34, 47, 62, 0.15); + min-width: 0; + overflow: hidden; +} +.tox .tox-pop__dialog > :not(.tox-toolbar) { + margin: 4px 4px 4px 8px; +} +.tox .tox-pop__dialog .tox-toolbar { + background-color: transparent; + margin-bottom: -1px; +} +.tox .tox-pop::after, +.tox .tox-pop::before { + border-style: solid; + content: ""; + display: block; + height: 0; + opacity: 1; + position: absolute; + width: 0; +} +.tox .tox-pop.tox-pop--inset::after, +.tox .tox-pop.tox-pop--inset::before { + opacity: 0; + transition: all 0s 0.15s, visibility 0s, opacity 75ms ease; +} +.tox .tox-pop.tox-pop--bottom::after, +.tox .tox-pop.tox-pop--bottom::before { + left: 50%; + top: 100%; +} +.tox .tox-pop.tox-pop--bottom::after { + border-color: var(--blocks-background) transparent transparent transparent; + border-width: 8px; + margin-left: -8px; + margin-top: -1px; +} +.tox .tox-pop.tox-pop--bottom::before { + border-color: var(--border-color, #ccc) transparent transparent transparent; + border-width: 9px; + margin-left: -9px; +} +.tox .tox-pop.tox-pop--top::after, +.tox .tox-pop.tox-pop--top::before { + left: 50%; + top: 0; + transform: translateY(-100%); +} +.tox .tox-pop.tox-pop--top::after { + border-color: transparent transparent #fff transparent; + border-width: 8px; + margin-left: -8px; + margin-top: 1px; +} +.tox .tox-pop.tox-pop--top::before { + border-color: transparent transparent var(--border-color, #ccc) transparent; + border-width: 9px; + margin-left: -9px; +} +.tox .tox-pop.tox-pop--left::after, +.tox .tox-pop.tox-pop--left::before { + left: 0; + top: calc(50% - 1px); + transform: translateY(-50%); +} +.tox .tox-pop.tox-pop--left::after { + border-color: transparent #fff transparent transparent; + border-width: 8px; + margin-left: -15px; +} +.tox .tox-pop.tox-pop--left::before { + border-color: transparent var(--border-color, #ccc) transparent transparent; + border-width: 10px; + margin-left: -19px; +} +.tox .tox-pop.tox-pop--right::after, +.tox .tox-pop.tox-pop--right::before { + left: 100%; + top: calc(50% + 1px); + transform: translateY(-50%); +} +.tox .tox-pop.tox-pop--right::after { + border-color: transparent transparent transparent #fff; + border-width: 8px; + margin-left: -1px; +} +.tox .tox-pop.tox-pop--right::before { + border-color: transparent transparent transparent var(--border-color, #ccc); + border-width: 10px; + margin-left: -1px; +} +.tox .tox-pop.tox-pop--align-left::after, +.tox .tox-pop.tox-pop--align-left::before { + left: 20px; +} +.tox .tox-pop.tox-pop--align-right::after, +.tox .tox-pop.tox-pop--align-right::before { + left: calc(100% - 20px); +} +.tox .tox-sidebar-wrap { + display: flex; + flex-direction: row; + flex-grow: 1; + min-height: 0; +} +.tox .tox-sidebar { + background-color: var(--blocks-background); + display: flex; + flex-direction: row; + justify-content: flex-end; +} +.tox .tox-sidebar__slider { + display: flex; + overflow: hidden; +} +.tox .tox-sidebar__pane-container { + display: flex; +} +.tox .tox-sidebar__pane { + display: flex; +} +.tox .tox-sidebar--sliding-closed { + opacity: 0; +} +.tox .tox-sidebar--sliding-open { + opacity: 1; +} +.tox .tox-sidebar--sliding-growing, +.tox .tox-sidebar--sliding-shrinking { + transition: width 0.5s ease, opacity 0.5s ease; +} +.tox .tox-selector { + background-color: #4099ff; + border-color: #4099ff; + border-style: solid; + border-width: 1px; + box-sizing: border-box; + display: inline-block; + height: 10px; + position: absolute; + width: 10px; +} +.tox.tox-platform-touch .tox-selector { + height: 12px; + width: 12px; +} +.tox .tox-slider { + align-items: center; + display: flex; + flex: 1; + height: 24px; + justify-content: center; + position: relative; +} +.tox .tox-slider__rail { + background-color: transparent; + border: 1px solid var(--border-color, #ccc); + border-radius: 3px; + height: 10px; + min-width: 120px; + width: 100%; +} +.tox .tox-slider__handle { + background-color: #207ab7; + border: 2px solid #185d8c; + border-radius: 3px; + box-shadow: none; + height: 24px; + left: 50%; + position: absolute; + top: 50%; + transform: translateX(-50%) translateY(-50%); + width: 14px; +} +.tox .tox-form__controls-h-stack > .tox-slider:not(:first-of-type) { + margin-inline-start: 8px; +} +.tox .tox-form__controls-h-stack > .tox-form__group + .tox-slider { + margin-inline-start: 32px; +} +.tox .tox-form__controls-h-stack > .tox-slider + .tox-form__group { + margin-inline-start: 32px; +} +.tox .tox-source-code { + overflow: auto; +} +.tox .tox-spinner { + display: flex; +} +.tox .tox-spinner > div { + animation: tam-bouncing-dots 1.5s ease-in-out 0s infinite both; + background-color: var(--muted-color, rgba(34, 47, 62, 0.7)); + border-radius: 100%; + height: 8px; + width: 8px; +} +.tox .tox-spinner > div:nth-child(1) { + animation-delay: -0.32s; +} +.tox .tox-spinner > div:nth-child(2) { + animation-delay: -0.16s; +} +@keyframes tam-bouncing-dots { + 0%, + 100%, + 80% { + transform: scale(0); + } + 40% { + transform: scale(1); + } +} +.tox:not([dir="rtl"]) .tox-spinner > div:not(:first-child) { + margin-left: 4px; +} +.tox[dir="rtl"] .tox-spinner > div:not(:first-child) { + margin-right: 4px; +} +.tox .tox-statusbar { + align-items: center; + background-color: var(--blocks-background, #fff); + border-top: 1px solid var(--border-color, #ccc); + color: var(--muted-color, rgba(34, 47, 62, 0.7)); + display: flex; + flex: 0 0 auto; + font-size: 12px; + font-weight: 400; + height: 18px; + overflow: hidden; + padding: 0 8px; + position: relative; + text-transform: uppercase; +} +.tox .tox-statusbar__path { + display: flex; + flex: 1 1 auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.tox .tox-statusbar__right-container { + display: flex; + justify-content: flex-end; + white-space: nowrap; +} +.tox .tox-statusbar__help-text { + text-align: center; +} +.tox .tox-statusbar__text-container { + display: flex; + flex: 1 1 auto; + justify-content: space-between; + overflow: hidden; +} +@media only screen and (min-width: 768px) { + .tox + .tox-statusbar__text-container.tox-statusbar__text-container-3-cols + > .tox-statusbar__help-text, + .tox + .tox-statusbar__text-container.tox-statusbar__text-container-3-cols + > .tox-statusbar__path, + .tox + .tox-statusbar__text-container.tox-statusbar__text-container-3-cols + > .tox-statusbar__right-container { + flex: 0 0 calc(100% / 3); + } +} +.tox .tox-statusbar__text-container.tox-statusbar__text-container--flex-end { + justify-content: flex-end; +} +.tox .tox-statusbar__text-container.tox-statusbar__text-container--flex-start { + justify-content: flex-start; +} +.tox + .tox-statusbar__text-container.tox-statusbar__text-container--space-around { + justify-content: space-around; +} +.tox .tox-statusbar__path > * { + display: inline; + white-space: nowrap; +} +.tox .tox-statusbar__wordcount { + flex: 0 0 auto; + margin-left: 1ch; +} +@media only screen and (max-width: 767px) { + .tox .tox-statusbar__text-container .tox-statusbar__help-text { + display: none; + } + .tox .tox-statusbar__text-container .tox-statusbar__help-text:only-child { + display: block; + } +} +.tox .tox-statusbar a, +.tox .tox-statusbar__path-item, +.tox .tox-statusbar__wordcount { + color: var(--muted-color, rgba(34, 47, 62, 0.7)); + text-decoration: none; +} +.tox .tox-statusbar a:focus:not(:disabled):not([aria-disabled="true"]), +.tox .tox-statusbar a:hover:not(:disabled):not([aria-disabled="true"]), +.tox .tox-statusbar__path-item:focus:not(:disabled):not([aria-disabled="true"]), +.tox .tox-statusbar__path-item:hover:not(:disabled):not([aria-disabled="true"]), +.tox .tox-statusbar__wordcount:focus:not(:disabled):not([aria-disabled="true"]), +.tox + .tox-statusbar__wordcount:hover:not(:disabled):not([aria-disabled="true"]) { + color: var(--text-color, #222f3e); + cursor: pointer; +} +.tox .tox-statusbar__branding svg { + fill: rgba(34, 47, 62, 0.8); + height: 1.14em; + vertical-align: -0.28em; + width: 3.6em; +} +.tox + .tox-statusbar__branding + a:focus:not(:disabled):not([aria-disabled="true"]) + svg, +.tox + .tox-statusbar__branding + a:hover:not(:disabled):not([aria-disabled="true"]) + svg { + fill: var(--text-color, #222f3e); +} +.tox .tox-statusbar__resize-handle { + align-items: flex-end; + align-self: stretch; + cursor: nwse-resize; + display: flex; + flex: 0 0 auto; + justify-content: flex-end; + margin-left: auto; + margin-right: -8px; + padding-bottom: 3px; + padding-left: 1ch; + padding-right: 3px; +} +.tox .tox-statusbar__resize-handle svg { + display: block; + fill: var(--border-color, rgba(34, 47, 62, 0.5)); +} +.tox .tox-statusbar__resize-handle:focus svg { + background-color: var(--inputs-background, #dee0e2); + border-radius: 1px 1px -4px 1px; + box-shadow: 0 0 0 2px var(--inputs-background, #dee0e2); +} +.tox:not([dir="rtl"]) .tox-statusbar__path > * { + margin-right: 4px; +} +.tox:not([dir="rtl"]) .tox-statusbar__branding { + margin-left: 2ch; +} +.tox[dir="rtl"] .tox-statusbar { + flex-direction: row-reverse; +} +.tox[dir="rtl"] .tox-statusbar__path > * { + margin-left: 4px; +} +.tox .tox-throbber { + z-index: 1299; +} +.tox .tox-throbber__busy-spinner { + align-items: center; + background-color: rgba(255, 255, 255, 0.6); + bottom: 0; + display: flex; + justify-content: center; + left: 0; + position: absolute; + right: 0; + top: 0; +} +.tox .tox-tbtn { + align-items: center; + background: 0 0; + border: 0; + border-radius: 3px; + box-shadow: none; + color: var(--text-color, #222f3e); + display: flex; + flex: 0 0 auto; + font-size: 14px; + font-style: normal; + font-weight: 400; + height: 34px; + justify-content: center; + margin: 3px 0 2px 0; + outline: 0; + overflow: hidden; + padding: 0; + text-transform: none; + width: 34px; +} +.tox .tox-tbtn svg { + display: block; + fill: var(--text-color, #222f3e); +} +.tox .tox-tbtn.tox-tbtn-more { + padding-left: 5px; + padding-right: 5px; + width: inherit; +} +.tox .tox-tbtn:focus { + background: var(--inputs-background, #dee0e2); + border: 0; + box-shadow: none; +} +.tox .tox-tbtn:hover { + background: var(--inputs-background, #dee0e2); + border: 0; + box-shadow: none; + color: var(--text-color, #222f3e); +} +.tox .tox-tbtn:hover svg { + fill: var(--text-color, #222f3e); +} +.tox .tox-tbtn:active { + background: var(--inputs-background, #c8cbcf); + border: 0; + box-shadow: none; + color: var(--text-color, #222f3e); +} +.tox .tox-tbtn:active svg { + fill: var(--text-color, #222f3e); +} +.tox .tox-tbtn--disabled .tox-tbtn--enabled svg { + fill: var(--text-color, rgba(34, 47, 62, 0.5)); +} +.tox .tox-tbtn--disabled, +.tox .tox-tbtn--disabled:hover, +.tox .tox-tbtn:disabled, +.tox .tox-tbtn:disabled:hover { + background: 0 0; + border: 0; + box-shadow: none; + color: var(--text-color, rgba(34, 47, 62, 0.5)); + cursor: not-allowed; +} +.tox .tox-tbtn--disabled svg, +.tox .tox-tbtn--disabled:hover svg, +.tox .tox-tbtn:disabled svg, +.tox .tox-tbtn:disabled:hover svg { + fill: var(--text-color, rgba(34, 47, 62, 0.5)); +} +.tox .tox-tbtn--enabled, +.tox .tox-tbtn--enabled:hover { + background: var(--inputs-background, #c8cbcf); + border: 0; + box-shadow: none; + color: var(--text-color, #222f3e); +} +.tox .tox-tbtn--enabled:hover > *, +.tox .tox-tbtn--enabled > * { + transform: none; +} +.tox .tox-tbtn--enabled svg, +.tox .tox-tbtn--enabled:hover svg { + fill: var(--text-color, #222f3e); +} +.tox .tox-tbtn--enabled.tox-tbtn--disabled svg, +.tox .tox-tbtn--enabled:hover.tox-tbtn--disabled svg { + fill: var(--text-color, rgba(34, 47, 62, 0.5)); +} +.tox .tox-tbtn:focus:not(.tox-tbtn--disabled) { + color: var(--text-color, #222f3e); +} +.tox .tox-tbtn:focus:not(.tox-tbtn--disabled) svg { + fill: var(--text-color, #222f3e); +} +.tox .tox-tbtn:active > * { + transform: none; +} +.tox .tox-tbtn--md { + height: 51px; + width: 51px; +} +.tox .tox-tbtn--lg { + flex-direction: column; + height: 68px; + width: 68px; +} +.tox .tox-tbtn--return { + align-self: stretch; + height: unset; + width: 16px; +} +.tox .tox-tbtn--labeled { + padding: 0 4px; + width: unset; +} +.tox .tox-tbtn__vlabel { + display: block; + font-size: 10px; + font-weight: 400; + letter-spacing: -0.025em; + margin-bottom: 4px; + white-space: nowrap; +} +.tox .tox-number-input { + border-radius: 3px; + display: flex; + margin: 3px 0 2px 0; + padding: 0 4px; + width: auto; +} +.tox .tox-number-input .tox-input-wrapper { + background: 0 0; + display: flex; + pointer-events: none; + text-align: center; +} +.tox .tox-number-input .tox-input-wrapper:focus { + background: var(--inputs-background, #dee0e2); +} +.tox .tox-number-input input { + border-radius: 3px; + color: var(--text-color, #222f3e); + font-size: 14px; + margin: 2px 0; + pointer-events: all; + width: 60px; +} +.tox .tox-number-input input:hover { + background: var(--inputs-background, #dee0e2); + color: var(--text-color, #222f3e); +} +.tox .tox-number-input input:focus { + background: var(--blocks-background); + color: var(--text-color, #222f3e); +} +.tox .tox-number-input input:disabled { + background: 0 0; + border: 0; + box-shadow: none; + color: var(--text-color, rgba(34, 47, 62, 0.5)); + cursor: not-allowed; +} +.tox .tox-number-input button { + background: 0 0; + color: var(--text-color, #222f3e); + height: 34px; + text-align: center; + width: 24px; +} +.tox .tox-number-input button svg { + display: block; + fill: var(--text-color, #222f3e); + margin: 0 auto; + transform: scale(0.67); +} +.tox .tox-number-input button:focus { + background: var(--inputs-background, #dee0e2); +} +.tox .tox-number-input button:hover { + background: var(--inputs-background, #dee0e2); + border: 0; + box-shadow: none; + color: var(--text-color, #222f3e); +} +.tox .tox-number-input button:hover svg { + fill: var(--text-color, #222f3e); +} +.tox .tox-number-input button:active { + background: var(--inputs-background, #c8cbcf); + border: 0; + box-shadow: none; + color: var(--text-color, #222f3e); +} +.tox .tox-number-input button:active svg { + fill: var(--text-color, #222f3e); +} +.tox .tox-number-input button:disabled { + background: 0 0; + border: 0; + box-shadow: none; + color: var(--text-color, rgba(34, 47, 62, 0.5)); + cursor: not-allowed; +} +.tox .tox-number-input button:disabled svg { + fill: var(--text-color, rgba(34, 47, 62, 0.5)); +} +.tox .tox-number-input button.minus { + border-radius: 3px 0 0 3px; +} +.tox .tox-number-input button.plus { + border-radius: 0 3px 3px 0; +} +.tox .tox-number-input:focus:not(:active) > .tox-input-wrapper, +.tox .tox-number-input:focus:not(:active) > button { + background: var(--inputs-background, #dee0e2); +} +.tox .tox-tbtn--select { + margin: 3px 0 2px 0; + padding: 0 4px; + width: auto; +} +.tox .tox-tbtn__select-label { + cursor: default; + font-weight: 400; + height: initial; + margin: 0 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.tox .tox-tbtn__select-chevron { + align-items: center; + display: flex; + justify-content: center; + width: 16px; +} +.tox .tox-tbtn__select-chevron svg { + fill: var(--text-color, rgba(34, 47, 62, 0.5)); +} +.tox .tox-tbtn--bespoke { + background: 0 0; +} +.tox .tox-tbtn--bespoke + .tox-tbtn--bespoke { + margin-inline-start: 0; +} +.tox .tox-tbtn--bespoke .tox-tbtn__select-label { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 7em; +} +.tox .tox-tbtn--disabled .tox-tbtn__select-label, +.tox .tox-tbtn--select:disabled .tox-tbtn__select-label { + cursor: not-allowed; +} +.tox .tox-split-button { + border: 0; + border-radius: 3px; + box-sizing: border-box; + display: flex; + margin: 3px 0 2px 0; + overflow: hidden; +} +.tox .tox-split-button:hover { + box-shadow: 0 0 0 1px var(--inputs-background, #dee0e2) inset; +} +.tox .tox-split-button:focus { + background: var(--inputs-background, #dee0e2); + box-shadow: none; + color: var(--text-color, #222f3e); +} +.tox .tox-split-button > * { + border-radius: 0; +} +.tox .tox-split-button__chevron { + width: 16px; +} +.tox .tox-split-button__chevron svg { + fill: var(--text-color, rgba(34, 47, 62, 0.5)); +} +.tox .tox-split-button .tox-tbtn { + margin: 0; +} +.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:focus, +.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:hover, +.tox .tox-split-button.tox-tbtn--disabled:focus, +.tox .tox-split-button.tox-tbtn--disabled:hover { + background: 0 0; + box-shadow: none; + color: var(--text-color, rgba(34, 47, 62, 0.5)); +} +.tox.tox-platform-touch .tox-split-button .tox-tbtn--select { + padding: 0 0; +} +.tox.tox-platform-touch + .tox-split-button + .tox-tbtn:not(.tox-tbtn--select):first-child { + width: 30px; +} +.tox.tox-platform-touch .tox-split-button__chevron { + width: 20px; +} +.tox + .tox-split-button.tox-tbtn--disabled + svg + #tox-icon-highlight-bg-color__color, +.tox .tox-split-button.tox-tbtn--disabled svg #tox-icon-text-color__color { + opacity: 0.6; +} +.tox .tox-toolbar-overlord { + background-color: var(--blocks-background, #fff); +} +.tox .tox-toolbar, +.tox .tox-toolbar__overflow, +.tox .tox-toolbar__primary { + background-attachment: local; + background-color: var(--blocks-background, #fff); + background-position: center top 39px; + background-repeat: no-repeat; + background-size: calc(100% - 4px * 2) calc(100% - 39px); + display: flex; + flex: 0 0 auto; + flex-shrink: 0; + flex-wrap: wrap; + padding: 0 0; + transform: perspective(1px); +} +.tox .tox-toolbar-overlord > .tox-toolbar, +.tox .tox-toolbar-overlord > .tox-toolbar__overflow, +.tox .tox-toolbar-overlord > .tox-toolbar__primary { + background-position: center top 0; + background-size: calc(100% - 4px * 2) calc(100% - 0px); +} +.tox .tox-toolbar__overflow.tox-toolbar__overflow--closed { + height: 0; + opacity: 0; + padding-bottom: 0; + padding-top: 0; + visibility: hidden; +} +.tox .tox-toolbar__overflow--growing { + transition: height 0.3s ease, opacity 0.2s linear 0.1s; +} +.tox .tox-toolbar__overflow--shrinking { + transition: opacity 0.3s ease, height 0.2s linear 0.1s, + visibility 0s linear 0.3s; +} +.tox .tox-anchorbar, +.tox .tox-toolbar-overlord { + grid-column: 1/-1; +} +.tox .tox-menubar + .tox-toolbar, +.tox .tox-menubar + .tox-toolbar-overlord { + border-top: 1px solid var(--border-color, #ccc); + margin-top: -1px; + padding-bottom: 0; + padding-top: 0; +} +.tox .tox-toolbar--scrolling { + flex-wrap: nowrap; + overflow-x: auto; +} +.tox .tox-pop .tox-toolbar { + border-width: 0; +} +.tox .tox-toolbar--no-divider { + background-image: none; +} +.tox + .tox-toolbar-overlord + .tox-toolbar:not(.tox-toolbar--scrolling):first-child, +.tox .tox-toolbar-overlord .tox-toolbar__primary { + background-position: center top 39px; +} +.tox .tox-editor-header > .tox-toolbar--scrolling, +.tox .tox-toolbar-overlord .tox-toolbar--scrolling:first-child { + background-image: none; +} +.tox.tox-tinymce-aux .tox-toolbar__overflow { + background-color: var(--blocks-background, #fff); + background-position: center top 43px; + background-size: calc(100% - 8px * 2) calc(100% - 51px); + border: none; + border-radius: 3px; + box-shadow: 0 0 2px 0 rgba(34, 47, 62, 0.2), + 0 4px 8px 0 rgba(34, 47, 62, 0.15); + overscroll-behavior: none; + padding: 4px 0; +} +.tox-pop .tox-pop__dialog .tox-toolbar { + background-position: center top 43px; + background-size: calc(100% - 4px * 2) calc(100% - 51px); + padding: 4px 0; +} +.tox .tox-toolbar__group { + align-items: center; + display: flex; + flex-wrap: wrap; + margin: 0 0; + padding: 0 4px 0 4px; +} +.tox .tox-toolbar__group--pull-right { + margin-left: auto; +} +.tox .tox-toolbar--scrolling .tox-toolbar__group { + flex-shrink: 0; + flex-wrap: nowrap; +} +.tox:not([dir="rtl"]) .tox-toolbar__group:not(:last-of-type) { + border-right: 1px solid var(--border-color, #ccc); +} +.tox[dir="rtl"] .tox-toolbar__group:not(:last-of-type) { + border-left: 1px solid var(--border-color, #ccc); +} +.tox .tox-tooltip { + display: inline-block; + padding: 8px; + position: relative; +} +.tox .tox-tooltip__body { + background-color: var(--text-color, #222f3e); + border-radius: 3px; + box-shadow: 0 2px 4px rgba(34, 47, 62, 0.3); + color: rgba(255, 255, 255, 0.75); + font-size: 14px; + font-style: normal; + font-weight: 400; + padding: 4px 8px; + text-transform: none; +} +.tox .tox-tooltip__arrow { + position: absolute; +} +.tox .tox-tooltip--down .tox-tooltip__arrow { + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-top: 8px solid var(--text-color, #222f3e); + bottom: 0; + left: 50%; + position: absolute; + transform: translateX(-50%); +} +.tox .tox-tooltip--up .tox-tooltip__arrow { + border-bottom: 8px solid var(--text-color, #222f3e); + border-left: 8px solid transparent; + border-right: 8px solid transparent; + left: 50%; + position: absolute; + top: 0; + transform: translateX(-50%); +} +.tox .tox-tooltip--right .tox-tooltip__arrow { + border-bottom: 8px solid transparent; + border-left: 8px solid var(--text-color, #222f3e); + border-top: 8px solid transparent; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); +} +.tox .tox-tooltip--left .tox-tooltip__arrow { + border-bottom: 8px solid transparent; + border-right: 8px solid var(--text-color, #222f3e); + border-top: 8px solid transparent; + left: 0; + position: absolute; + top: 50%; + transform: translateY(-50%); +} +.tox .tox-tree { + display: flex; + flex-direction: column; +} +.tox .tox-tree .tox-trbtn { + align-items: center; + background: 0 0; + border: 0; + border-radius: 4px; + box-shadow: none; + color: var(--text-color, #222f3e); + display: flex; + flex: 0 0 auto; + font-size: 14px; + font-style: normal; + font-weight: 400; + height: 28px; + margin-bottom: 4px; + margin-top: 4px; + outline: 0; + overflow: hidden; + padding: 0; + padding-left: 8px; + text-transform: none; +} +.tox .tox-tree .tox-trbtn .tox-tree__label { + cursor: default; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.tox .tox-tree .tox-trbtn svg { + display: block; + fill: var(--text-color, #222f3e); +} +.tox .tox-tree .tox-trbtn:focus { + background: var(--inputs-background, #dee0e2); + border: 0; + box-shadow: none; +} +.tox .tox-tree .tox-trbtn:hover { + background: var(--inputs-background, #dee0e2); + border: 0; + box-shadow: none; + color: var(--text-color, #222f3e); +} +.tox .tox-tree .tox-trbtn:hover svg { + fill: var(--text-color, #222f3e); +} +.tox .tox-tree .tox-trbtn:active { + background: #b1d0e6; + border: 0; + box-shadow: none; + color: var(--text-color, #222f3e); +} +.tox .tox-tree .tox-trbtn:active svg { + fill: var(--text-color, #222f3e); +} +.tox .tox-tree .tox-trbtn--disabled, +.tox .tox-tree .tox-trbtn--disabled:hover, +.tox .tox-tree .tox-trbtn:disabled, +.tox .tox-tree .tox-trbtn:disabled:hover { + background: 0 0; + border: 0; + box-shadow: none; + color: var(--text-color, rgba(34, 47, 62, 0.5)); + cursor: not-allowed; +} +.tox .tox-tree .tox-trbtn--disabled svg, +.tox .tox-tree .tox-trbtn--disabled:hover svg, +.tox .tox-tree .tox-trbtn:disabled svg, +.tox .tox-tree .tox-trbtn:disabled:hover svg { + fill: var(--text-color, rgba(34, 47, 62, 0.5)); +} +.tox .tox-tree .tox-trbtn--enabled, +.tox .tox-tree .tox-trbtn--enabled:hover { + background: var(--inputs-background, #b1d0e6); + border: 0; + box-shadow: none; + color: var(--text-color, #222f3e); +} +.tox .tox-tree .tox-trbtn--enabled:hover > *, +.tox .tox-tree .tox-trbtn--enabled > * { + transform: none; +} +.tox .tox-tree .tox-trbtn--enabled svg, +.tox .tox-tree .tox-trbtn--enabled:hover svg { + fill: var(--text-color, #222f3e); +} +.tox .tox-tree .tox-trbtn:focus:not(.tox-trbtn--disabled) { + color: var(--text-color, #222f3e); +} +.tox .tox-tree .tox-trbtn:focus:not(.tox-trbtn--disabled) svg { + fill: var(--text-color, #222f3e); +} +.tox .tox-tree .tox-trbtn:active > * { + transform: none; +} +.tox .tox-tree .tox-trbtn--return { + align-self: stretch; + height: unset; + width: 16px; +} +.tox .tox-tree .tox-trbtn--labeled { + padding: 0 4px; + width: unset; +} +.tox .tox-tree .tox-trbtn__vlabel { + display: block; + font-size: 10px; + font-weight: 400; + letter-spacing: -0.025em; + margin-bottom: 4px; + white-space: nowrap; +} +.tox .tox-tree .tox-tree--directory { + display: flex; + flex-direction: column; +} +.tox .tox-tree .tox-tree--directory .tox-tree--directory__label { + font-weight: 700; +} +.tox .tox-tree .tox-tree--directory .tox-tree--directory__label .tox-mbtn { + margin-left: auto; +} +.tox .tox-tree .tox-tree--directory .tox-tree--directory__label .tox-mbtn svg { + fill: transparent; +} +.tox + .tox-tree + .tox-tree--directory + .tox-tree--directory__label + .tox-mbtn.tox-mbtn--active + svg, +.tox + .tox-tree + .tox-tree--directory + .tox-tree--directory__label + .tox-mbtn:focus + svg { + fill: var(--text-color, #222f3e); +} +.tox + .tox-tree + .tox-tree--directory + .tox-tree--directory__label:focus + .tox-mbtn + svg, +.tox + .tox-tree + .tox-tree--directory + .tox-tree--directory__label:hover + .tox-mbtn + svg { + fill: var(--text-color, #222f3e); +} +.tox + .tox-tree + .tox-tree--directory + .tox-tree--directory__label:hover:has(.tox-mbtn:hover) { + background-color: transparent; + color: var(--text-color, #222f3e); +} +.tox + .tox-tree + .tox-tree--directory + .tox-tree--directory__label:hover:has(.tox-mbtn:hover) + .tox-chevron + svg { + fill: var(--text-color, #222f3e); +} +.tox .tox-tree .tox-tree--directory .tox-tree--directory__label .tox-chevron { + margin-right: 6px; +} +.tox + .tox-tree + .tox-tree--directory + .tox-tree--directory__label:has(+ .tox-tree--directory__children--growing) + .tox-chevron, +.tox + .tox-tree + .tox-tree--directory + .tox-tree--directory__label:has(+ .tox-tree--directory__children--shrinking) + .tox-chevron { + transition: transform 0.5s ease-in-out; +} +.tox + .tox-tree + .tox-tree--directory + .tox-tree--directory__label:has(+ .tox-tree--directory__children--growing) + .tox-chevron, +.tox + .tox-tree + .tox-tree--directory + .tox-tree--directory__label:has(+ .tox-tree--directory__children--open) + .tox-chevron { + transform: rotate(90deg); +} +.tox .tox-tree .tox-tree--leaf__label { + font-weight: 400; +} +.tox .tox-tree .tox-tree--leaf__label .tox-mbtn { + margin-left: auto; +} +.tox .tox-tree .tox-tree--leaf__label .tox-mbtn svg { + fill: transparent; +} +.tox .tox-tree .tox-tree--leaf__label .tox-mbtn.tox-mbtn--active svg, +.tox .tox-tree .tox-tree--leaf__label .tox-mbtn:focus svg { + fill: var(--text-color, #222f3e); +} +.tox .tox-tree .tox-tree--leaf__label:hover .tox-mbtn svg { + fill: var(--text-color, #222f3e); +} +.tox .tox-tree .tox-tree--leaf__label:hover:has(.tox-mbtn:hover) { + background-color: transparent; + color: var(--text-color, #222f3e); +} +.tox + .tox-tree + .tox-tree--leaf__label:hover:has(.tox-mbtn:hover) + .tox-chevron + svg { + fill: var(--text-color, #222f3e); +} +.tox .tox-tree .tox-tree--directory__children { + overflow: hidden; + padding-left: 16px; +} +.tox + .tox-tree + .tox-tree--directory__children.tox-tree--directory__children--growing, +.tox + .tox-tree + .tox-tree--directory__children.tox-tree--directory__children--shrinking { + transition: height 0.5s ease-in-out; +} +.tox .tox-tree .tox-trbtn.tox-tree--leaf__label { + display: flex; + justify-content: space-between; +} +.tox .tox-view-wrap, +.tox .tox-view-wrap__slot-container { + background-color: var(--blocks-background); + display: flex; + flex: 1; + flex-direction: column; +} +.tox .tox-view { + display: flex; + flex: 1 1 auto; + flex-direction: column; + overflow: hidden; +} +.tox .tox-view__header { + align-items: center; + display: flex; + font-size: 16px; + justify-content: space-between; + padding: 8px 8px 0 8px; + position: relative; +} +.tox .tox-view--mobile.tox-view__header, +.tox .tox-view--mobile.tox-view__toolbar { + padding: 8px; +} +.tox .tox-view--scrolling { + flex-wrap: nowrap; + overflow-x: auto; +} +.tox .tox-view__toolbar { + display: flex; + flex-direction: row; + gap: 8px; + justify-content: space-between; + padding: 8px 8px 0 8px; +} +.tox .tox-view__toolbar__group { + display: flex; + flex-direction: row; + gap: 12px; +} +.tox .tox-view__header-end, +.tox .tox-view__header-start { + display: flex; +} +.tox .tox-view__pane { + height: 100%; + padding: 8px; + width: 100%; +} +.tox .tox-view__pane_panel { + border: 1px solid var(--border-color, #ccc); + border-radius: 3px; +} +.tox:not([dir="rtl"]) .tox-view__header .tox-view__header-end > *, +.tox:not([dir="rtl"]) .tox-view__header .tox-view__header-start > * { + margin-left: 8px; +} +.tox[dir="rtl"] .tox-view__header .tox-view__header-end > *, +.tox[dir="rtl"] .tox-view__header .tox-view__header-start > * { + margin-right: 8px; +} +.tox .tox-well { + border: 1px solid var(--border-color, #ccc); + border-radius: 3px; + padding: 8px; + width: 100%; +} +.tox .tox-well > :first-child { + margin-top: 0; +} +.tox .tox-well > :last-child { + margin-bottom: 0; +} +.tox .tox-well > :only-child { + margin: 0; +} +.tox .tox-custom-editor { + border: 1px solid var(--border-color, #ccc); + border-radius: 3px; + display: flex; + flex: 1; + overflow: hidden; + position: relative; +} +.tox .tox-dialog-loading::before { + background-color: rgba(0, 0, 0, 0.5); + content: ""; + height: 100%; + position: absolute; + width: 100%; + z-index: 1000; +} +.tox .tox-tab { + cursor: pointer; +} +.tox .tox-dialog__content-js { + display: flex; + flex: 1; +} +.tox .tox-dialog__body-content .tox-collection { + display: flex; + flex: 1; +} +.tox:not(.tox-tinymce-inline) .tox-editor-header { + background-color: none; + padding: 0; +} +.tox.tox-tinymce--toolbar-bottom .tox-editor-header, +.tox.tox-tinymce-inline .tox-editor-header { + margin-bottom: -1px; +} +.tox.tox-tinymce-inline .tox-editor-container { + overflow: hidden; +} +.tox:not(.tox-tinymce-inline).tox-tinymce--toolbar-bottom .tox-editor-header { + border-top: none; + box-shadow: none; +} +.tox.tox.tox-tinymce--toolbar-sticky-on .tox-editor-header { + background-color: transparent; + box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.25); + padding: 0; +} +.tox.tox.tox-tinymce--toolbar-sticky-on.tox-tinymce--toolbar-bottom + .tox-editor-header { + box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.25); +} +.tox .tox-collection--list .tox-collection__group .tox-insert-table-picker { + margin: -4px 0; +} +.tox .tox-menu.tox-collection.tox-collection--list { + padding: 0; +} +.tox .tox-pop { + box-shadow: none; +} +.tox .tox-number-input, +.tox .tox-split-button, +.tox .tox-tbtn, +.tox .tox-tbtn--select { + margin: 2px 0 3px 0; +} +.tox .tox-toolbar, +.tox .tox-toolbar__overflow, +.tox .tox-toolbar__primary { + background: var(--blocks-background, #fff); +} +.tox .tox-menubar + .tox-toolbar-overlord { + border-top: none; +} +.tox .tox-menubar + .tox-toolbar, +.tox .tox-menubar + .tox-toolbar-overlord .tox-toolbar__primary { + border-top: 1px solid var(--border-color, #ccc); + margin-top: -1px; +} +.tox.tox-tinymce-aux .tox-toolbar__overflow { + border: 1px solid var(--border-color, #ccc); + padding: 0; +} +.tox .tox-pop .tox-pop__dialog .tox-toolbar { + padding: 0; +} +.tox:not(.tox-tinymce-inline) + .tox-editor-header:not(:first-child) + .tox-menubar { + border-top: 1px solid var(--border-color, #ccc); +} +.tox:not(.tox-tinymce-inline) + .tox-editor-header:not(:first-child) + .tox-toolbar-overlord:first-child + .tox-toolbar__primary, +.tox:not(.tox-tinymce-inline) + .tox-editor-header:not(:first-child) + .tox-toolbar:first-child { + border-top: 1px solid var(--border-color, #ccc); +} +.tox .tox-toolbar__group { + padding: 0 4px 0 4px; +} +.tox .tox-collection__item { + border-radius: 0; + cursor: pointer; +} +.tox .tox-statusbar a:focus:not(:disabled):not([aria-disabled="true"]), +.tox .tox-statusbar a:hover:not(:disabled):not([aria-disabled="true"]), +.tox .tox-statusbar__path-item:focus:not(:disabled):not([aria-disabled="true"]), +.tox .tox-statusbar__path-item:hover:not(:disabled):not([aria-disabled="true"]), +.tox .tox-statusbar__wordcount:focus:not(:disabled):not([aria-disabled="true"]), +.tox + .tox-statusbar__wordcount:hover:not(:disabled):not([aria-disabled="true"]) { + color: var(--var(--muted-color, rgba(34, 47, 62, 0.7))); + text-decoration: underline; +} +.tox .tox-statusbar__branding svg { + vertical-align: -0.25em; +} +.tox:not([dir="rtl"]) .tox-statusbar__branding { + margin-left: 1ch; +} +.tox .tox-statusbar__resize-handle { + padding-bottom: 0; + padding-right: 0; +} +.tox .tox-button::before { + display: none; +} + +.tox .tox-menubar, +.tox .tox-toolbar, +.tox .tox-toolbar__overflow, +.tox .tox-toolbar__primary { + background-image: none !important; +} + +.tox-editor-header, +.tox:not(.tox-tinymce-inline) .tox-editor-header { + border-bottom: 1px solid var(--border-color, #ccc); +} + +.tox .tox-textfield::placeholder { + color: var(--muted-color, #ccc); +}