{
"event": "PreToolUse",
"tool_name": "Edit",
"tool_input": {
"file_path": "\/var\/www\/dev.campus.systemische-tools.de\/public\/css\/nav.css",
"old_string": " .nav-dropdown-content a:last-child {\n border-radius: 0;\n }\n}",
"new_string": " .nav-dropdown-content a:last-child {\n border-radius: 0;\n }\n}\n\n\/* ==========================================================================\n Dark Mode Support\n ========================================================================== *\/\n\n@media (prefers-color-scheme: dark) {\n :root {\n --nav-bg: #1a1a1a;\n --nav-text: #e0e0e0;\n --nav-hover-bg: rgba(255, 255, 255, 0.1);\n --nav-dropdown-bg: #2a2a2a;\n --nav-dropdown-text: #e0e0e0;\n --nav-dropdown-hover-bg: #3a3a3a;\n --nav-dropdown-border: #444;\n --nav-focus-color: #5dade2;\n }\n\n .main-nav {\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n }\n\n .nav-toggle-icon,\n .nav-toggle-icon::before,\n .nav-toggle-icon::after {\n background-color: var(--nav-text);\n }\n\n .nav-dropdown-btn::after {\n border-color: var(--nav-text);\n }\n\n .nav-logo {\n filter: brightness(0) invert(1);\n }\n\n @media (max-width: 768px) {\n .nav-dropdown-content {\n background-color: #252525;\n }\n\n .nav-dropdown-content a {\n border-bottom-color: #444;\n }\n }\n}"
}
}
{
"tool_response": {
"filePath": "\/var\/www\/dev.campus.systemische-tools.de\/public\/css\/nav.css",
"oldString": " .nav-dropdown-content a:last-child {\n border-radius: 0;\n }\n}",
"newString": " .nav-dropdown-content a:last-child {\n border-radius: 0;\n }\n}\n\n\/* ==========================================================================\n Dark Mode Support\n ========================================================================== *\/\n\n@media (prefers-color-scheme: dark) {\n :root {\n --nav-bg: #1a1a1a;\n --nav-text: #e0e0e0;\n --nav-hover-bg: rgba(255, 255, 255, 0.1);\n --nav-dropdown-bg: #2a2a2a;\n --nav-dropdown-text: #e0e0e0;\n --nav-dropdown-hover-bg: #3a3a3a;\n --nav-dropdown-border: #444;\n --nav-focus-color: #5dade2;\n }\n\n .main-nav {\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n }\n\n .nav-toggle-icon,\n .nav-toggle-icon::before,\n .nav-toggle-icon::after {\n background-color: var(--nav-text);\n }\n\n .nav-dropdown-btn::after {\n border-color: var(--nav-text);\n }\n\n .nav-logo {\n filter: brightness(0) invert(1);\n }\n\n @media (max-width: 768px) {\n .nav-dropdown-content {\n background-color: #252525;\n }\n\n .nav-dropdown-content a {\n border-bottom-color: #444;\n }\n }\n}",
"originalFile": "\/* ==========================================================================\n Navigation Styles\n Contract: CSS Contract v1.0\n ========================================================================== *\/\n\n\/* CSS Variables (COL-002) *\/\n:root {\n --nav-bg: #fff;\n --nav-text: #333;\n --nav-hover-bg: rgba(0, 0, 0, 0.05);\n --nav-dropdown-bg: #fff;\n --nav-dropdown-text: #333;\n --nav-dropdown-hover-bg: #f8f9fa;\n --nav-dropdown-border: #eee;\n --nav-focus-color: #3498db;\n --nav-font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n}\n\n\/* Main Navigation Container *\/\n.main-nav {\n display: flex;\n align-items: center;\n padding: 0 1rem;\n background-color: var(--nav-bg);\n font-family: var(--nav-font);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n\/* Brand \/ Logo *\/\n.nav-brand {\n display: flex;\n align-items: center;\n background-color: transparent;\n text-decoration: none;\n padding: 0.5rem 1rem;\n margin-right: 1rem;\n}\n\n.nav-brand:hover {\n background-color: var(--nav-hover-bg);\n}\n\n.nav-logo {\n height: 36px;\n width: auto;\n display: block;\n}\n\n.nav-brand:focus {\n outline: 2px solid var(--nav-focus-color);\n outline-offset: -2px;\n}\n\n\/* Mobile Menu Toggle *\/\n.nav-toggle {\n display: none;\n background: transparent;\n border: none;\n color: var(--nav-text);\n padding: 1rem;\n cursor: pointer;\n margin-left: auto;\n}\n\n.nav-toggle:focus {\n outline: 2px solid var(--nav-focus-color);\n outline-offset: -2px;\n}\n\n.nav-toggle-icon {\n display: block;\n width: 24px;\n height: 2px;\n background-color: #333;\n position: relative;\n}\n\n.nav-toggle-icon::before,\n.nav-toggle-icon::after {\n content: '';\n position: absolute;\n width: 24px;\n height: 2px;\n background-color: #333;\n left: 0;\n}\n\n.nav-toggle-icon::before { top: -7px; }\n.nav-toggle-icon::after { top: 7px; }\n\n\/* Desktop Navigation Items Container *\/\n.nav-items {\n display: flex;\n align-items: center;\n gap: 0;\n}\n\n\/* Dropdown Container *\/\n.nav-dropdown {\n position: relative;\n}\n\n\/* Dropdown Button *\/\n.nav-dropdown-btn {\n background-color: transparent;\n border: none;\n color: var(--nav-text);\n padding: 1rem 1.25rem;\n font-size: 1rem;\n font-weight: 500;\n cursor: pointer;\n font-family: inherit;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.nav-dropdown-btn::after {\n content: '';\n border: solid #333;\n border-width: 0 2px 2px 0;\n padding: 3px;\n transform: rotate(45deg);\n margin-top: -3px;\n}\n\n.nav-dropdown-btn:hover,\n.nav-dropdown:hover .nav-dropdown-btn,\n.nav-dropdown.active .nav-dropdown-btn {\n background-color: var(--nav-hover-bg);\n}\n\n.nav-dropdown-btn:focus {\n outline: 2px solid var(--nav-focus-color);\n outline-offset: -2px;\n}\n\n\/* Dropdown Content *\/\n.nav-dropdown-content {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n background-color: var(--nav-dropdown-bg);\n min-width: 200px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n border-radius: 0 0 6px 6px;\n z-index: 1000;\n}\n\n\/* Show on hover (desktop) and when active (mobile\/keyboard) *\/\n.nav-dropdown:hover .nav-dropdown-content,\n.nav-dropdown.active .nav-dropdown-content {\n display: block;\n}\n\n\/* Dropdown Links *\/\n.nav-dropdown-content a {\n display: block;\n padding: 0.75rem 1.25rem;\n color: var(--nav-dropdown-text);\n background-color: var(--nav-dropdown-bg);\n text-decoration: none;\n font-weight: 500;\n border-bottom: 1px solid var(--nav-dropdown-border);\n}\n\n.nav-dropdown-content a:last-child {\n border-bottom: none;\n border-radius: 0 0 6px 6px;\n}\n\n.nav-dropdown-content a:hover {\n background-color: var(--nav-dropdown-hover-bg);\n color: var(--nav-text);\n}\n\n.nav-dropdown-content a:focus {\n outline: 2px solid var(--nav-focus-color);\n outline-offset: -2px;\n}\n\n\/* External link indicator *\/\n.nav-dropdown-content a[target=\"_blank\"]::after {\n content: ' \\2197';\n font-size: 0.8em;\n}\n\n\/* ==========================================================================\n Mobile Styles (RES-001: Mobile-First Breakpoints)\n ========================================================================== *\/\n\n@media (max-width: 768px) {\n .main-nav {\n flex-wrap: wrap;\n }\n\n .nav-toggle {\n display: block;\n }\n\n .nav-items {\n display: none;\n flex-direction: column;\n width: 100%;\n align-items: stretch;\n }\n\n .nav-items.open {\n display: flex;\n }\n\n .nav-dropdown {\n width: 100%;\n }\n\n .nav-dropdown-btn {\n width: 100%;\n justify-content: space-between;\n padding: 1rem 1.5rem;\n }\n\n .nav-dropdown-content {\n position: static;\n box-shadow: none;\n border-radius: 0;\n background-color: #f8f9fa;\n }\n\n .nav-dropdown-content a {\n padding-left: 2.5rem;\n background-color: transparent;\n color: var(--nav-text);\n border-bottom-color: #eee;\n }\n\n .nav-dropdown-content a:hover {\n background-color: var(--nav-hover-bg);\n color: var(--nav-text);\n }\n\n .nav-dropdown-content a:last-child {\n border-radius: 0;\n }\n}\n",
"structuredPatch": [
{
"oldStart": 243,
"oldLines": 3,
"newStart": 243,
"newLines": 48,
"lines": [
" border-radius: 0;",
" }",
" }",
"+",
"+\/* ==========================================================================",
"+ Dark Mode Support",
"+ ========================================================================== *\/",
"+",
"+@media (prefers-color-scheme: dark) {",
"+ :root {",
"+ --nav-bg: #1a1a1a;",
"+ --nav-text: #e0e0e0;",
"+ --nav-hover-bg: rgba(255, 255, 255, 0.1);",
"+ --nav-dropdown-bg: #2a2a2a;",
"+ --nav-dropdown-text: #e0e0e0;",
"+ --nav-dropdown-hover-bg: #3a3a3a;",
"+ --nav-dropdown-border: #444;",
"+ --nav-focus-color: #5dade2;",
"+ }",
"+",
"+ .main-nav {",
"+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);",
"+ }",
"+",
"+ .nav-toggle-icon,",
"+ .nav-toggle-icon::before,",
"+ .nav-toggle-icon::after {",
"+ background-color: var(--nav-text);",
"+ }",
"+",
"+ .nav-dropdown-btn::after {",
"+ border-color: var(--nav-text);",
"+ }",
"+",
"+ .nav-logo {",
"+ filter: brightness(0) invert(1);",
"+ }",
"+",
"+ @media (max-width: 768px) {",
"+ .nav-dropdown-content {",
"+ background-color: #252525;",
"+ }",
"+",
"+ .nav-dropdown-content a {",
"+ border-bottom-color: #444;",
"+ }",
"+ }",
"+}"
]
}
],
"userModified": false,
"replaceAll": false
}
}