add a bit of css to make editable backend titles obvious

Author: mcmonkey4eva

src/wwwroot/css/site.css

@@ -158,6 +158,17 @@ body {
     border: 1px solid #000000 !important;
     background-color: var(--green) !important;
 }
+.backend-toggle-switch {
+    float: none !important;
+    vertical-align: middle !important;
+}
+.backend-title-editable {
+    border: 1px solid var(--shadow);
+    border-radius: 0.5rem;
+    background-color: var(--background);
+    padding: 0.3rem;
+    padding-bottom: 0.4rem;
+}
 .auto-slider-fade-contain {
     display: inline-block;
     width: calc(min(100%, 50rem) - 5rem - 2px);

src/wwwroot/js/genpage/backends.js

@@ -29,7 +29,7 @@ function addBackendToHtml(backend, disable, spot = null) {
     togglerSpan.className = 'form-check form-switch display-inline-block';
     let toggleSwitch = document.createElement('input');
     toggleSwitch.type = 'checkbox';
-    toggleSwitch.className = 'backend-toggle-switch form-check-input';
+    toggleSwitch.className = 'form-check-input backend-toggle-switch';
     toggleSwitch.title = 'Enable/Disable backend';
     toggleSwitch.checked = backend.enabled;
     toggleSwitch.addEventListener('change', () => {
@@ -107,13 +107,15 @@ function addBackendToHtml(backend, disable, spot = null) {
         saveButton.style.display = 'inline-block';
         editButton.disabled = true;
         actualCardTitle.contentEditable = true;
+        actualCardTitle.classList.add('backend-title-editable');
         for (let entry of cardBody.querySelectorAll('[data-name]')) {
             entry.disabled = false;
         }
     });
     saveButton.addEventListener('click', () => {
         saveButton.style.display = 'none';
         actualCardTitle.contentEditable = false;
+        actualCardTitle.classList.remove('backend-title-editable');
         for (let entry of cardBody.querySelectorAll('[data-name]')) {
             let name = entry.dataset.name;
             let value = entry.type == 'checkbox' ? entry.checked : entry.value;