diff --git a/AdminStyleRock.js b/AdminStyleRock.js new file mode 100644 index 0000000..c271f32 --- /dev/null +++ b/AdminStyleRock.js @@ -0,0 +1,36 @@ +// add darkmode toggle to navbar +(() => { + if (!ProcessWire.config.asrDarkmodeToggle) return; + document.addEventListener("DOMContentLoaded", function () { + const navbarRight = document.querySelector( + "#pw-masthead nav.uk-navbar .uk-navbar-right" + ); + if (!navbarRight) return; + navbarRight.insertAdjacentHTML( + "afterbegin", + '
' + + '' + + '' + + "
" + ); + }); + + // handle clicks on darkmode toggle + document.addEventListener("click", function (e) { + let el = e.target.closest("[data-darkmode]"); + if (!el) return; + var darkModeValue = el.getAttribute("data-darkmode"); + localStorage.setItem("asr-darkmode", darkModeValue); + toggleDarkMode(); + }); + + function toggleDarkMode() { + const isDarkMode = localStorage.getItem("asr-darkmode") == "1"; + if (isDarkMode) { + document.documentElement.classList.add("asr-dark"); + } else { + document.documentElement.classList.remove("asr-dark"); + } + } + toggleDarkMode(); +})(); diff --git a/AdminStyleRock.module.php b/AdminStyleRock.module.php index 7c40b74..eeaa119 100644 --- a/AdminStyleRock.module.php +++ b/AdminStyleRock.module.php @@ -11,6 +11,11 @@ class AdminStyleRock extends WireData implements Module, ConfigurableModule { const prefix = "adminstylerock_"; + const primary = "#e83561"; + const primary_h = 345; + const primary_s = '80%'; + const primary_l = '56%'; + const saturation = '5%'; const field_adminlogo = self::prefix . "adminlogo"; @@ -38,15 +43,22 @@ public function ready() { // add alfred style overrides $this->addHookAfter('RockFrontend::addAlfredStyles', $this, 'addAlfredStyles'); + $this->addHookAfter('Page::render', $this, 'addCssVariables'); + if ($this->wire->user->isSuperuser()) $this->addKitchenSink(); // do everything below only on admin pages if ($this->wire->page->template != 'admin') return; + $this->wire->adminTheme->addBodyClass('AdminStyleRock'); + + // add AdminStyleRock JS to backend $config = $this->wire()->config; - $min = !$config->debug; + $config->scripts->add($config->urls($this) . "AdminStyleRock.js"); + $config->js('asrDarkmodeToggle', !$this->noDarkmodeToggle); - $style = $config->paths($this) . "styles/rock.less"; + $style = $config->paths($this) . "styles/_rock.less"; $compiled = $config->paths->assets . "admin"; + $min = !$config->debug; if ($min) $compiled .= ".min.css"; else $compiled .= ".css"; @@ -54,18 +66,29 @@ public function ready() $vars = []; if ($this->rockprimary) $vars = ['rock-primary' => $this->rockprimary]; + // check if a file was changed + $mCSS = @filemtime($compiled); + $mLESS = 0; + $files = $this->wire->files->find(__DIR__ . "/styles", [ + 'extensions' => 'less', + ]); + foreach ($files as $file) { + if ($mLESS > $mCSS) continue; + $mLESS = max($mLESS, filemtime($file)); + } + $config->AdminThemeUikit = [ 'style' => $style, 'compress' => $min, 'customCssFile' => $compiled, - 'recompile' => @(filemtime($style) > filemtime($compiled)), + 'recompile' => $mLESS > $mCSS, 'vars' => $vars, ]; // attach hook to set logo url - $this->addHookAfter('AdminThemeUikit::renderFile', $this, "renderFile"); - $this->addHookAfter("Pages::saved", $this, "addUploadedLogo"); - $this->addHookAfter("ProcessPageEdit::buildForm", $this, "hideLogofield"); + wire()->addHookAfter('AdminThemeUikit::renderFile', $this, "renderFile"); + wire()->addHookAfter("Pages::saved", $this, "addUploadedLogo"); + wire()->addHookAfter("ProcessPageEdit::buildForm", $this, "hideLogofield"); } public function addAlfredStyles(HookEvent $event) @@ -79,12 +102,159 @@ public function addAlfredStyles(HookEvent $event) $name = 'rockfrontend'; } - $rf->styles($name)->add(__DIR__ . "/styles/alfred.less"); + $rf->styles($name)->add(__DIR__ . "/styles/_alfred.less"); if ($this->rockprimary) { $rf->styles($name)->setVar('alfred-primary', $this->rockprimary); } } + protected function addCssVariables(HookEvent $event): void + { + /** @var Page $page */ + $page = $event->object; + if ($page->template != 'admin') return; + if ($this->wire->config->ajax) return; + if ($this->wire->config->external) return; + + // add styles from styles.php + $styles = $this->wire->files->render(__DIR__ . "/styles.php", [ + 'h' => $this->rockprimary_h === null ? self::primary_h : $this->rockprimary_h, + 's' => $this->rockprimary_s === null ? self::primary_s : $this->rockprimary_s, + 'l' => $this->rockprimary_l === null ? self::primary_l : $this->rockprimary_l, + 'saturation' => $this->saturation === null ? self::saturation : $this->saturation, + ]); + $event->return = str_replace( + "", + "$styles", + $event->return + ); + } + + protected function addKitchenSink(): void + { + if ($this->wire->input->get->name !== 'AdminStyleRock') return; + + if ($this->wire->input->debug) { + $this->message("Demo Alert Message"); + $this->warning("Demo Alert Warning"); + $this->error("Demo Alert Error"); + } + + $this->addHookAfter('InputfieldForm::render', function ($event) { + if ($event->object->id !== 'ModuleEditForm') return; + + $form = new InputfieldForm(); + + $fs = new InputfieldFieldset(); + $fs->name = "kitchensink"; + $fs->label = 'Kitchen Sink'; + $fs->icon = 'paint-brush'; + $fs->notes = "Kitchen Sink Demo Note"; + $fs->collapsed = $this->wire->input->debug + ? Inputfield::collapsedNo + : Inputfield::collapsedYesAjax; + $fs->description = 'This is a preview of several fields to help with custom development. + In RockFrontend you can enable livereload also for module pages like this, which is handy when working on the style to get live preview. + You can add &debug=1 to this page\'s url to open Kitchen Sink by default and to show demo alerts.'; + $fs->entityEncodeText = false; + $form->add($fs); + + $fs->add([ + 'type' => 'text', + 'label' => 'Demo Text Input', + 'notes' => 'Demo Note', + 'name' => 'demotext', + 'columnWidth' => 33, + ]); + $fs->add([ + 'type' => 'select', + 'label' => 'Demo Select', + 'options' => [ + 'option1' => 'Option 1', + 'option2' => 'Option 2', + 'option3' => 'Option 3', + ], + 'value' => 'option1', + 'name' => 'demoselect', + 'columnWidth' => 33, + ]); + $fs->add([ + 'type' => 'checkbox', + 'label' => 'Demo Checkbox', + 'checkboxLabel' => 'Demo Checkbox Label', + 'name' => 'democheckbox', + 'columnWidth' => 34, + ]); + $fs->add([ + 'type' => 'asmSelect', + 'label' => 'Demo ASM Select', + 'name' => 'demoasm', + 'options' => [ + 'option1' => 'ASM Option 1', + 'option2' => 'ASM Option 2', + 'option3' => 'ASM Option 3', + ], + 'value' => ['option1'], // Default selected value + 'description' => 'This is a demo ASM Select field.', + ]); + $fs->add([ + 'type' => 'textarea', + 'label' => 'Demo Textarea', + 'name' => 'demotextarea', + 'columnWidth' => 33, + ]); + $fs->add([ + 'type' => 'radios', + 'label' => 'Demo Radios', + 'name' => 'demoradios', + 'options' => [ + 'option1' => 'Option 1', + 'option2' => 'Option 2', + 'option3' => 'Option 3', + ], + 'columnWidth' => 33, + ]); + $fs->add([ + 'type' => 'toggle', + 'label' => 'Demo Toggle', + 'value' => 'yes', + 'name' => 'demotoggle', + 'columnWidth' => 34, + ]); + $this->wire->modules->get('JqueryUI')->use('vex'); + $fs->add([ + 'type' => 'markup', + 'label' => 'VEX Demo', + 'value' => ' + + VEX Demo + + ', + 'columnWidth' => 40, + ]); + $fs->add([ + 'type' => 'markup', + 'label' => 'UIkit Notifications', + 'value' => ' + + + + + ', + 'columnWidth' => 60, + ]); + + $event->return = $form->render() . $event->return; + }); + } + public function addUploadedLogo(HookEvent $event): void { /** @var Page $page */ @@ -165,11 +335,6 @@ public function setLogoUrl($url, $m = 'AdminThemeUikit') $modules->saveConfig($m, $data); } - public function ___install() - { - $this->setLogoUrl($this->wire->config->urls($this) . "baumrock.svg"); - } - /** * Config inputfields * @param InputfieldWrapper $inputfields @@ -178,16 +343,42 @@ public function getModuleConfigInputfields($inputfields) { $this->iframe($inputfields); - // add main color + $inputfields->add([ + 'type' => 'markup', + 'label' => 'Color Palette', + 'icon' => 'paint-brush', + 'value' => $this->wire->files->render(__DIR__ . "/colorpicker.php", [ + 'rockprimary' => $this->rockprimary ?: self::primary, + 'saturation' => substr($this->saturation ?: self::saturation, 0, -1), + ]), + ]); + $inputfields->add([ 'type' => 'text', 'name' => 'rockprimary', - 'icon' => 'paint-brush', - 'notes' => 'eg #00ff00 or rgba(0,0,0,1)', - 'value' => $this->rockprimary, - 'label' => 'Primary Color', - 'description' => 'This color is used as @rock-primary of the rock.less style' - . ' and as @alfred-primary for the alfred.less frontend editing style', + 'value' => $this->rockprimary ?: self::primary, + 'columnWidth' => 50, + ]); + $inputfields->add([ + 'type' => 'text', + 'name' => 'saturation', + 'value' => $this->saturation ?: self::saturation, + 'columnWidth' => 50, + ]); + $inputfields->add([ + 'type' => 'hidden', + 'name' => 'rockprimary_h', + 'value' => $this->rockprimary_h, + ]); + $inputfields->add([ + 'type' => 'hidden', + 'name' => 'rockprimary_s', + 'value' => $this->rockprimary_s, + ]); + $inputfields->add([ + 'type' => 'hidden', + 'name' => 'rockprimary_l', + 'value' => $this->rockprimary_l, ]); /** @var RockMigrations $rm */ @@ -210,6 +401,14 @@ public function getModuleConfigInputfields($inputfields) } $inputfields->add($f); + $inputfields->add([ + 'type' => 'checkbox', + 'name' => 'noDarkmodeToggle', + 'icon' => 'moon-o', + 'checked' => $this->noDarkmodeToggle ? 'checked' : '', + 'label' => 'Don\'t add darkmode-toggle to backend navbar', + ]); + return $inputfields; } @@ -244,4 +443,14 @@ public function iframe($inputfields) $this->wire->session->asriframe = $iframe; } } + + public function ___uninstall() + { + $modules = $this->wire('modules'); + $adminThemeUikit = $modules->get('AdminThemeUikit'); + if ($adminThemeUikit) { + $adminThemeUikit->logoURL = ''; + $modules->saveConfig('AdminThemeUikit', 'logoURL', ''); + } + } } diff --git a/colorpicker.php b/colorpicker.php new file mode 100644 index 0000000..085294a --- /dev/null +++ b/colorpicker.php @@ -0,0 +1,160 @@ + +
+
+ --rock-primary + --rock-primary +
+
+ --rock-gray-100 + --rock-gray-100 +
+
+ --rock-gray-200 + --rock-gray-200 +
+
+ --rock-gray-300 + --rock-gray-300 +
+
+ --rock-gray-400 + --rock-gray-400 +
+
+ --rock-gray-500 + --rock-gray-500 +
+
+ --rock-gray-600 + --rock-gray-600 +
+
+ --rock-gray-700 + --rock-gray-700 +
+
+ --rock-gray-800 + --rock-gray-800 +
+
+ --rock-gray-900 + --rock-gray-900 +
+
+
Primary Color
+
Saturation for grays
+ \ No newline at end of file diff --git a/styles.php b/styles.php new file mode 100644 index 0000000..c89680b --- /dev/null +++ b/styles.php @@ -0,0 +1,22 @@ + \ No newline at end of file diff --git a/styles/alfred.less b/styles/_alfred.less similarity index 100% rename from styles/alfred.less rename to styles/_alfred.less diff --git a/styles/_rock.less b/styles/_rock.less new file mode 100644 index 0000000..b4e5d78 --- /dev/null +++ b/styles/_rock.less @@ -0,0 +1,27 @@ +// define primary color (if not set via config) +@rock-primary: #e83561; + +// @ryan +// early stage idea +// can we move those colors to the base theme (eg --pw-gray-200)? +// then all styles could inherit those colors +// and all module developers could rely on them. +// the problem now is that modules use their own colors +// often based on reno, which make the style break when +// someone uses AdminStyleRock or any other style/theme + +// benefits when using css variables: no need to recompile the admin style! +// live preview of colors + +// benefits of 9 shades of gray +// easier for module authors to choose a color +// easier for module authors to stick to conventions + +@import "overrides.less"; + +@import "general.less"; +@import "forms.less"; +@import "buttons.less"; +@import "notifications.less"; +@import "pagelist.less"; +@import "darkmode.less"; diff --git a/styles/buttons.less b/styles/buttons.less new file mode 100644 index 0000000..c057e7e --- /dev/null +++ b/styles/buttons.less @@ -0,0 +1,3 @@ +button.ui-button.ui-priority-secondary { + background-color: lighten(@global-color, 20%) !important; +} diff --git a/styles/contrast.less b/styles/contrast.less new file mode 100644 index 0000000..abd837c --- /dev/null +++ b/styles/contrast.less @@ -0,0 +1 @@ +// Improve the contrast that is not great by default in uikit diff --git a/styles/darkmode.less b/styles/darkmode.less new file mode 100644 index 0000000..90bb7b4 --- /dev/null +++ b/styles/darkmode.less @@ -0,0 +1,72 @@ +// Invert all elements on the body while attempting to not alter the hue substantially. +html.asr-dark { + body { + filter: invert(93%) hue-rotate(180deg); + } + + // Workarounds and optical adjustments. + + // Firefox workaround: Set the background colour for the html + // element separately because, unlike other browsers, Firefox + // doesn’t apply the filter to the root element’s background. + background-color: #151515; + + // Do not invert media (revert the invert). + img, + video, + iframe, + svg { + filter: invert(100%) hue-rotate(180deg); + } + + // Videos running fullscreen are no longer affected by the + // filter on the body so we need to also unset the + // revert we applied earlier so we’re left with no filter again. + video:fullscreen { + filter: none; + } + + // Improve contrast on icons. + .icon { + filter: invert(6%) hue-rotate(180deg); + } + + svg { + filter: invert(6%); + } + + // Re-enable code block backgrounds. + pre { + filter: invert(6%); + } + + // Improve contrast on list item markers. + li::marker { + color: #666; + } + + // Do not invert PW-Styles and other Elements like. + .uk-alert-danger, + input, + button, + .uk-checkbox, + .uk-button { + // filter: invert(100%) hue-rotate(180deg); + } +} + +// toggle visibility classes +.asr-show-dark { + display: none; +} +.asr-show-light { + display: initial; +} +html.asr-dark { + .asr-show-light { + display: none; + } + .asr-show-dark { + display: initial; + } +} diff --git a/styles/forms.less b/styles/forms.less new file mode 100644 index 0000000..e7c2f84 --- /dev/null +++ b/styles/forms.less @@ -0,0 +1,139 @@ +/* +GUIDE: +Primary Color for action items (buttons and links) +Input has dark gray border-bottom +Inputfields and buttons are round. Guide lines are square. + +@ryan +can we introduce an input-bg color that is used for checkboxes, radios, +asm select, page select etc? +*/ + +/* +##### Variables ##### +*/ +html { + // background color for inputs (radio, checkbox, asm select) + --rock-input-bg: var(--rock-gray-800); + --rock-fields-border: var(--rock-gray-100); +} + +// remove padding from tabs in page edit screen +// @ryan can we move that from core to reno? +.uk-tab > * { + padding-left: 0; +} + +// inputfield highlight to make them more visible +// only action items are primary color (buttons, links) +// inputfields, checkboxes, radios are dark gray +.uk-input, +.uk-select, +.uk-textarea, +.uk-checkbox, +.uk-radio, +.uk-button-default, +.InputfieldTinyMCE .InputfieldTinyMCEInline:not(.fake-important), +.Inputfield .selectize-control.single .selectize-input:not(.fake-important) { + border-radius: 5px; + border: 1px solid var(--rock-gray-400); +} +.uk-checkbox { + border-radius: 2px; +} +.uk-radio { + border-radius: 100%; +} +:not(.fake-important) { + .uk-radio:checked, + .uk-checkbox:checked, + .uk-checkbox:indeterminate { + background-color: var(--rock-input-bg); + } +} +.Inputfield .selectize-control.single .selectize-input:not(.fake-important) { + // make selectize have the same background as all other inputfields + background-color: white; +} + +// make 10px gray borders around all inputfields +ul.Inputfields { + row-gap: 10px; + padding: 10px; + background: var(--rock-gray-100); +} +.InputfieldContent > ul.Inputfields, +.InputfieldWrapper > ul.Inputfields { + // remove padding for nested items + padding: 0; +} +.InputfieldRepeaterItem > .InputfieldContent > ul.Inputfields { + // add space inside repeater items + padding: 10px; + background: var(--rock-gray-100); +} + +// repeater adjustments +// no additional gap for repeaters +.InputfieldRepeater > .InputfieldContent > ul.Inputfields { + row-gap: 0; +} +.Inputfields + .InputfieldRepeater + .InputfieldContent + .InputfieldRepeaterItem + > .InputfieldHeader { + outline: 0; + background-color: var(--rock-input-bg); +} + +// page field +.pw-content li.ui-state-default, +.pw-content .ui-widget-content li.ui-state-default { + background: var(--rock-input-bg) !important; +} + +// move notes closer to their inputfields +// and make the border highlight less aggressive +p.notes:not(.fake-important) { + margin-top: 10px; + border-left: 0; + padding-left: 5px; + + // background is transparent black + // this makes it work both on white inputfields and on + // gray fieldsets, where gray-100 would not stand out at all + background-color: rgba(0, 0, 0, 0.05); +} + +// make ASM list items gray +// @ryan could we add a dedicated class for all these items? +.Inputfields { + .asmListItem { + border: 0; + } + .asmListItemLabel { + background-color: var(--rock-input-bg); + } +} +.InputfieldPageListSelectMultiple > ol > li:not(.fake-important) { + border: 0; + background-color: var(--rock-input-bg); +} + +// Toggle +.InputfieldToggleGroup label:not(.InputfieldToggleCurrent) { + opacity: 0.5; +} +.InputfieldToggleCurrent { + outline: 2px solid #3e3e3e; + font-weight: bold; + z-index: 1; +} + +// button colors from css variables +.ui-button, +.ui-button.ui-state-default, +.ui-button.ui-state-hover { + background: var(--rock-primary); +} diff --git a/styles/general.less b/styles/general.less new file mode 100644 index 0000000..e1e4204 --- /dev/null +++ b/styles/general.less @@ -0,0 +1,22 @@ +// improve contrast of all texts +@global-color: #111; +@global-muted-color: #666; + +@global-primary-background: @rock-primary; +@global-link-color: @rock-primary; +@global-link-hover-color: lighten(@rock-primary, 5%); +@base-selection-background: darken(@rock-primary, 5%); + +html { + --rock-global-color: @global-color; +} + +.uk-tooltip-inner { + overflow-wrap: break-word; +} + +// make links use css variables for live coloring +a, +.uk-link { + color: var(--rock-primary); +} diff --git a/styles/notifications.less b/styles/notifications.less new file mode 100644 index 0000000..d76845e --- /dev/null +++ b/styles/notifications.less @@ -0,0 +1,59 @@ +/* +##### Notifications ##### + +GUIDE: +For regular notifications we use a neutral gray to make it work with all primary colors. +This color is slightly darker to make it stand out from the regular masthead. +All notifications have the global dark text color for best visibility (no red text on red background). +*/ + +// background colors +@alert-primary-background: var(--rock-gray-100); +@alert-success-background: #c8e6c9; +@alert-warning-background: #ffe0b2; +@alert-danger-background: #ffcdd2; + +// text color is uniform for all alerts +@alert-primary-color: @global-color; +@alert-danger-color: @global-color; +@alert-warning-color: @global-color; +#notices { + .pw-notice-group-toggle, + i.fa { + color: @global-color; + } +} + +// remove spacing: https://i.imgur.com/l6TJIIJ.png +.pw-notices { + margin: 0; + > li { + margin: 0; + margin-top: 1px; + } +} + +// vex dialogs +.vex-dialog-button.vex-dialog-button-primary { + background: @global-primary-background !important; +} + +// regular uikit notification popups +.uk-notification-message { + color: @global-color; + border: 1px solid white; + box-shadow: 0 0px 30px rgba(0, 0, 0, 0.2); + + &.uk-notification-message-primary { + background: @alert-primary-background; + } + &.uk-notification-message-warning { + background: @alert-warning-background; + } + &.uk-notification-message-success { + background: @alert-success-background; + } + &.uk-notification-message-danger { + background: @alert-danger-background; + } +} diff --git a/styles/overrides.less b/styles/overrides.less new file mode 100644 index 0000000..39ca9f1 --- /dev/null +++ b/styles/overrides.less @@ -0,0 +1,37 @@ +/** + * Things that we had to override from the default backend + * that should ideally be removed from the core style + */ + +// overrides for rockpagebuilder +// @ryan as long as we have no standard classes all modules +// have to use custom colors and it will never be possible to support different styles! +// Problem with image overlay color: https://i.imgur.com/PQVxVvA.png +.rpb-buttons { + .uk-badge { + background: var(--rock-gray-800); + } +} +li.rpb-item + > label:not(.fake-important):not(.fake-important):not(.fake-important) { + background: var(--rock-input-bg); + color: white; + i { + color: white; + } + &:hover { + background: var(--rock-input-bg); + color: white; + } +} +li.rpb-item > .InputfieldContent:not(.fake-important) { + padding-top: 7px; +} +.rpb-items > ul.Inputfields { + padding: 0; + background-color: transparent; +} + +body.modal #ProcessPageEdit { + margin: 0; +} diff --git a/styles/pagelist.less b/styles/pagelist.less new file mode 100644 index 0000000..b3792ba --- /dev/null +++ b/styles/pagelist.less @@ -0,0 +1,317 @@ +/* +##### PageList Variables ##### + +@ryan: Could we move some variables to the core theme, so we could +get rid of the --rock prefix and we could build on a common backend standard, +which would be extremely helpful (eg link color in Fluency or Breadcrumbs) +*/ +.PageListRoot { + // border width of tree lines + --rock-pagelist-line-width: 1px; + --rock-pagelist-status-width: 3px; + + // indentation matches position of chevron + --rock-level-indent: 30px; + --rock-first-level-indent: 3px; + + // pagelist items height + --rock-pagelist-padding-y: 7px; + + // text color + --rock-pagelist-color: var(--rock-gray-800); + --rock-pagelist-hover-color: black; + + // opacity of special pages (hidden/unpub) + --rock-special-opacity: 0.8; + --rock-muted-background: var(--rock-gray-100); + + // indentation guide line color + --rock-line-color: var(--rock-gray-200); + + // status colors + --rock-status-public: var(--rock-gray-600); + --rock-status-hidden: orange; + --rock-status-unpublished: var(--rock-gray-300); + --rock-status-nofile: var(--rock-gray-200); + + // sort-placeholder height + --rock-sortplaceholder-height: 41px; + + // action button opacity (on hover) + --rock-action-hover-opacity: 0.8; +} + +// gray border around the whole page tree +body.ProcessPageList { + #PageListContainer { + border: 10px solid var(--rock-gray-100); + padding: 15px; + padding-top: 5px; + } + .PageList { + margin: 0; + } +} + +#PageListContainer { + /* + ##### Overrides ##### + @ryan: Could these be removed from the core? + */ + + // remove pagelist lines + .PageList .PageListItem { + border-bottom: none; + border-bottom-width: 0; + } + + /* + ##### Text style and color ##### + + GUIDE: + No text decoration for better readability. + Good contrast for better readability. + Status indicators done left of the text by symbol + color. + + @ryan: Crazy selectors necessary to override basic stuff. + */ + + // remove core text decorations + .PageListRoot { + .PageList .PageListStatusUnpublished a.PageListPage > span, + .PageList .PageListStatusUnpublished a.PageListPage { + text-decoration: none; + } + } + // set list item text color and font weight + .PageList .PageListItem > a.PageListPage, + .PageList .PageListItemOpen > a.PageListPage, + .PageList .PageListTriggerOpen > a.PageListPage { + font-weight: normal; + color: var(--rock-pagelist-color); + } + // set list item hover color + .PageList .PageListItem > a.PageListPage:hover, + .PageList .PageListItem.PageListItemHover > a.PageListPage, + .PageList .PageListItem.PageListItemOpen.PageListItemHover > a.PageListPage { + color: var(--rock-pagelist-hover-color); + } + + /* + ##### Action Buttons ##### + + GUIDE: + By default buttons are a dark gray with good contrast and white text. + By default buttons have opacity = 1 to make them as readable as possible. + We add opacity on hover to indicate hover state (works with all primary colors). + */ + + // default button and text color + .PageList .uk-pagination a, + .PageList .PageListActions a { + color: white; + background-color: var(--rock-gray-800); + opacity: 1; + } + // button hover color + .PageList .uk-pagination a:hover, + .PageList .PageListActions a:hover { + background-color: var(--rock-gray-800); + opacity: var(--rock-action-hover-opacity); + } + // primary action color + .PageList .uk-pagination .uk-active a, + .PageList .PageListActions li.PageListActionEdit a { + background-color: var(--rock-primary) !important; + } + // move button + .PageList .PageListMoveNote a { + background-color: var(--rock-primary); + &:hover { + opacity: var(--rock-action-hover-opacity); + } + } + // pagination and more button + .PageList > ul.PageListActions, + ul.uk-pagination { + padding-left: 5px; + } + + // pagination and read more links + .PageList > .uk-pagination, + .PageList > .PageListActions { + margin: 5px !important; + align-items: stretch; + > li > a { + height: 100%; + } + } + + /* + ##### Vertical Spacing ##### + + GUIDE + Spacing is applied as padding on the tags. + This is to make hover-effects for the action buttons apply directly on line change and not only when the new line's anchor is hovered. + */ + .PageList .PageListItem > a { + display: inline-block; + padding-top: var(--rock-pagelist-padding-y); + padding-bottom: var(--rock-pagelist-padding-y); + } + + /* + ##### Horizontal Spacing / Indentation ##### + */ + .PageListRoot > .PageList { + // this moves the vertical line directly below the chevron toggle + .PageList { + margin-left: var(--rock-level-indent); + } + // root level indent line + > .PageList { + margin-left: var(--rock-first-level-indent); + } + } + + /* + ##### Indentation Lines ##### + + GUIDE + Indentation lines help to see levels on more complex trees. + Line width is adjustable via variables. + */ + + // default line width and style + .PageList .PageList { + border-left-width: var(--rock-pagelist-line-width); + border-left-style: solid; + } + .PageList .PageListItem { + border-left-width: var(--rock-pagelist-status-width); + border-left-style: solid; + } + // default line color + .PageList .PageList { + border-left-color: var(--rock-line-color); + } + // using :not(.fake-important) to increase specificity + .PageList .PageListItem:not(.fake-important) { + border-left-color: var(--rock-status-public); + &::before { + color: var(--rock-status-public); + } + &.PageListStatusHidden { + border-left-color: var(--rock-status-hidden); + // &::before { + // color: var(--rock-status-hidden); + // } + } + &.PageListStatusUnpublished { + border-left-color: var(--rock-status-unpublished); + // &::before { + // color: var(--rock-status-unpublished); + // } + } + // nofile comes last to have priority over hidden/unpub + &.PageListNotPublic, + &.PageListNoFile { + border-left-color: var(--rock-status-nofile); + // &::before { + // color: var(--rock-line-color); + // } + } + } + // no line on the root item + .PageListRoot > .PageList > .PageListItem { + border-left-width: 0px; + } + + /* + ##### Page Status Indicators ##### + + GUIDE + Page Status Indicators are realised with both color and symbol to make it as accessible + as possible (think of people not seeing well or not seeing colors!). + -- means published + -/ means hidden + -X means unpublished + + Most often the most important distinction is whether a page is viewable or not. + This is not always easy, because ProcessWire supports complex access levels! + But the most important fact is most likely whether a page is viewable by guest users or not. + That's why this style adds a muted background to all pages that are not viewable by guests. + */ + + // reset padding + .PageList .PageListItem { + padding: 0; + } + + // default style of the before pseudo element + .PageListItem::before { + display: inline-block; + // use a monospace font for status indicators to result in equal width + font-family: "Courier New", Courier, monospace; + // move toggle a little to the right + margin-right: 5px; + // default symbol is -- + content: "--"; + } + .PageListStatusHidden::before { + content: "=="; + } + .PageListStatusUnpublished::before { + content: "-X"; + } + .PageListNoFile::before { + content: "-N"; + } + .PageListID1::before, + .PageListPlaceholderItem::before { + content: ""; + margin-right: 0; + } + // make label of special pages italic + // but don't make action buttons italic as well + .PageListStatusHidden, + .PageListStatusUnpublished, + .PageListNotPublic, + .PageListNoFile { + > a.label { + font-style: italic; + // make sure the chevron is not italic + &::before { + font-style: normal; + } + } + } + // special page opacity + .PageList .PageListItem { + &.PageListStatusHidden, + &.PageListStatusUnpublished, + &.PageListNotPublic, + &.PageListNoFile { + > a.PageListPage { + opacity: var(--rock-special-opacity); + } + } + } + // light muted background + .PageList .PageListItem { + &.PageListStatusUnpublished, + &.PageListNotPublic, + &.PageListNoFile { + background-color: var(--rock-muted-background); + } + } + + /* + ##### Sorting ##### + */ + .PageListSortPlaceholder { + // set the height of the placeholder to the same as other lines + // this is at the moment hardcoded and should be made dynamic + height: var(--rock-sortplaceholder-height) !important; + } +} diff --git a/styles/rock.less b/styles/rock.less deleted file mode 100644 index 5acf0fe..0000000 --- a/styles/rock.less +++ /dev/null @@ -1,86 +0,0 @@ -// v1.5 - -// ############################################################## -// theme variables to easily style this theme -// use these variables in /site/templates/admin.less to customize - -// main color for this style -// at the moment this should be a dark color with good contrast -// to white. at a later point it might be possible to extend this -// style so that it adapts contrasting colors automatically -@rock-primary: #00bb86; -// ############################################################## - -/* ##### Main color ##### */ - -html { - --rock-primary: @rock-primary; -} -@global-primary-background: @rock-primary; -@global-link-color: @rock-primary; -@global-link-hover-color: lighten(@rock-primary, 5%); -@base-selection-background: @rock-primary; - -/* ##### fix tooltip issue ##### */ -.uk-tooltip-inner { - overflow-wrap: break-word; -} - -/* ##### PageEdit ##### */ - -// remove padding from tabs in page edit screen -.uk-tab > * { - padding-left: 0; -} - -/* ##### Inputfields ##### */ - -// notes -p.notes { - .uk-background-muted; - padding-left: 5px; - border-left: 3px solid @global-secondary-background; -} - -.InputfieldToggleGroup label:not(.InputfieldToggleCurrent) { - opacity: 0.5; -} -.InputfieldToggleCurrent { - outline: 2px solid #3e3e3e; - font-weight: bold; - z-index: 1; -} - -/* ##### Buttons ##### */ - -button.ui-button.ui-priority-secondary { - background-color: lighten(@global-color, 20%) !important; -} - -// vex dialogs -.vex-dialog-button.vex-dialog-button-primary { - background: @global-primary-background !important; -} - -/* ##### Notices ##### */ - -// primary alert should be neutral grey instead of primary color -// this prevents red primary alert when rock-primary color is red -// which would be confusing as it would be the same for error messages! -// see https://i.imgur.com/dxhDz81.png -@alert-primary-background: @global-muted-background; -@alert-primary-color: @global-color; - -// remove spacing: https://i.imgur.com/l6TJIIJ.png -.pw-notices { - margin: 0; - > li { - margin: 0; - margin-top: 1px; - } -} - -// make notification bug darker to stand out from masthead -#NotificationBug { - background-color: @global-color; -} diff --git a/styles/todos.md b/styles/todos.md new file mode 100644 index 0000000..42da28b --- /dev/null +++ b/styles/todos.md @@ -0,0 +1,2 @@ +- notifications & alerts darkmode +- forms/inputfields \ No newline at end of file