From ec000246158c59c4a740cee9c49e555eb9881579 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 18 Jun 2026 13:44:46 +0200 Subject: [PATCH] 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 --- src/app/globals.css | 245 ++++++++++++++++++++++++++++++++++++++ src/app/layout.tsx | 2 - src/app/toolbar-fixes.css | 162 ------------------------- src/app/user-theme.css | 77 ------------ 4 files changed, 245 insertions(+), 241 deletions(-) delete mode 100644 src/app/toolbar-fixes.css delete mode 100644 src/app/user-theme.css diff --git a/src/app/globals.css b/src/app/globals.css index 7e8fc56..94df047 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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; +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a302bac..a76100d 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -8,8 +8,6 @@ import "./favorites-widget.css"; import "./admin.css"; import "./note-widget.css"; import "./calendar-scale.css"; -import "./toolbar-fixes.css"; -import "./user-theme.css"; import "./widget-density.css"; import "./clock-widget.css"; import "./search-widget.css"; diff --git a/src/app/toolbar-fixes.css b/src/app/toolbar-fixes.css deleted file mode 100644 index 474f068..0000000 --- a/src/app/toolbar-fixes.css +++ /dev/null @@ -1,162 +0,0 @@ -.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); - } -} diff --git a/src/app/user-theme.css b/src/app/user-theme.css deleted file mode 100644 index 5c5db2d..0000000 --- a/src/app/user-theme.css +++ /dev/null @@ -1,77 +0,0 @@ -: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; -}