Merge toolbar-fixes.css and user-theme.css into globals.css

Consolidate two override CSS files into globals.css to reduce the number of separate stylesheets. Both files were primarily overriding rules already in globals.css (81% and 55% overlap respectively). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-18 13:44:46 +02:00
parent 2f3e1bff1b
commit ec00024615
4 changed files with 245 additions and 241 deletions
@@ -3388,3 +3388,248 @@ button:disabled {
  padding: 6px 7px !important;
  font-size: 12px !important;
 }
+
+/* --- Toolbar Fixes (merged from toolbar-fixes.css) --- */
+
+.editToolbar .button:first-child,
+.editToolbar button:first-child {
+  display: inline-flex !important;
+}
+
+.editToolbar button,
+.editToolbar .button {
+  visibility: visible !important;
+  opacity: 1 !important;
+  pointer-events: auto !important;
+}
+
+.editToolbar .topEditModeButton,
+.editToolbar button[aria-label="Bearbeitungsmodus aktivieren"],
+.editToolbar button[aria-label="Bearbeitungsmodus deaktivieren"] {
+  display: none !important;
+}
+
+.topBar {
+  position: relative;
+  z-index: 5000;
+}
+
+.topBar .profileMenu {
+  position: relative;
+  z-index: 5400;
+}
+
+.topBar .profileDropdown {
+  z-index: 5500;
+}
+
+.topBar .topEditModeButton {
+  position: absolute;
+  top: 50%;
+  right: 78px;
+  z-index: 5350;
+  transform: translateY(-50%);
+}
+
+.topEditModeButton {
+  width: 42px;
+  height: 42px;
+  display: inline-grid;
+  place-items: center;
+  padding: 0;
+  color: var(--text);
+  background: var(--surface-strong);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  cursor: pointer;
+  box-shadow: var(--shadow);
+  font-size: 0;
+}
+
+.topEditModeButton:hover {
+  border-color: var(--accent);
+}
+
+.topEditModeButtonActive {
+  color: var(--accent-text);
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+.lockIcon {
+  position: relative;
+  width: 22px;
+  height: 24px;
+  display: block;
+  color: currentColor;
+}
+
+.lockIconBody {
+  position: absolute;
+  left: 3px;
+  bottom: 2px;
+  width: 16px;
+  height: 13px;
+  background: transparent;
+  border: 2px solid currentColor;
+  border-radius: 4px;
+}
+
+.lockIconBody::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 4px;
+  width: 3px;
+  height: 3px;
+  background: currentColor;
+  border-radius: 999px;
+  transform: translateX(-50%);
+}
+
+.lockIconBody::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 7px;
+  width: 2px;
+  height: 4px;
+  background: currentColor;
+  border-radius: 999px;
+  transform: translateX(-50%);
+}
+
+.lockIconShackle {
+  position: absolute;
+  width: 12px;
+  height: 11px;
+  background: transparent;
+  border: 2px solid currentColor;
+  border-bottom: 0;
+  border-radius: 10px 10px 0 0;
+}
+
+.lockIconClosed .lockIconShackle {
+  left: 5px;
+  top: 1px;
+  transform: none;
+}
+
+.lockIconOpen .lockIconShackle {
+  left: 9px;
+  top: 1px;
+  transform: rotate(35deg);
+  transform-origin: left bottom;
+}
+
+.dashboardWorkspace,
+.widgetGridShell,
+.emptyDashboard,
+.react-grid-layout,
+.react-grid-item {
+  z-index: auto;
+}
+
+.react-grid-item.react-draggable-dragging,
+.react-grid-item.resizing {
+  z-index: 300;
+}
+
+.gridItemMenuOpen {
+  z-index: 400 !important;
+}
+
+@media (max-width: 760px) {
+  .topBar .topEditModeButton {
+    right: 72px;
+  }
+
+  .topEditModeButton {
+    width: 38px;
+    height: 38px;
+  }
+
+  .lockIcon {
+    transform: scale(0.9);
+  }
+}
+
+/* --- User Theme (merged from user-theme.css) --- */
+
+:root {
+  --accent-text-fallback: #ffffff;
+}
+
+.app {
+  --accent-text: var(--accent-text, var(--accent-text-fallback));
+}
+
+.button,
+.adminInlineButton,
+.favoriteAddButton,
+.searchWidgetForm .button {
+  border-color: color-mix(in srgb, var(--accent) 70%, var(--border) 30%);
+}
+
+.button:not(.buttonSecondary):not(.favoriteRemoveButton):not(.logoutButton),
+.adminInlineButton,
+.favoriteAddButton,
+.searchWidgetForm .button {
+  color: var(--accent-text, #ffffff);
+  background: var(--accent);
+}
+
+.button:not(.buttonSecondary):not(.favoriteRemoveButton):not(.logoutButton):hover,
+.adminInlineButton:hover,
+.favoriteAddButton:hover,
+.searchWidgetForm .button:hover {
+  border-color: var(--accent);
+  filter: brightness(1.05);
+}
+
+.buttonSecondary,
+.profileDropdown .button,
+.widgetMenuButton,
+.widgetDragHandle {
+  color: var(--text);
+  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface-strong) 58%);
+  border-color: color-mix(in srgb, var(--accent) 28%, var(--border) 72%);
+}
+
+.buttonSecondary:hover,
+.profileDropdown .button:hover,
+.widgetMenuButton:hover,
+.widgetDragHandle:hover {
+  border-color: var(--accent);
+}
+
+.input:focus,
+.select:focus,
+textarea:focus,
+.fileInput:focus,
+.colorInput:focus {
+  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
+  border-color: var(--accent);
+}
+
+.topEditModeButtonActive {
+  color: var(--accent-text, #ffffff);
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+.favoriteTile:hover,
+.widgetCard:hover {
+  border-color: color-mix(in srgb, var(--accent) 65%, var(--border) 35%);
+}
+
+.favoriteIconPlaceholder {
+  color: var(--accent-text, #ffffff);
+  background: var(--accent);
+}
+
+.equalsButton {
+  color: var(--accent-text, #ffffff) !important;
+  background: var(--accent) !important;
+  border-color: var(--accent) !important;
+}