From d0f72ac8a44ed2302425f4c07a026aa18e389eb1 Mon Sep 17 00:00:00 2001 From: Mark Gregory Date: Mon, 7 Sep 2026 18:06:45 +0100 Subject: [PATCH] re-add theme as ptrs broken fixed ipad theme --- .../themes/backend/assets/css/helpdesk.css | 83 +++++++++++++++ .../components/settings/layout.blade.php | 29 +++-- .../livewire/settings/appearance.blade.php | 23 ++-- .../settings/delete-user-form.blade.php | 47 ++++---- .../views/livewire/settings/profile.blade.php | 40 ++++--- .../backend/views/partials/head.blade.php | 53 +++++++++- .../views/partials/settings-heading.blade.php | 9 +- storage/logs/browser.log | 100 ++++++++++++++++++ 8 files changed, 304 insertions(+), 80 deletions(-) diff --git a/resources/themes/backend/assets/css/helpdesk.css b/resources/themes/backend/assets/css/helpdesk.css index ca3ca42..c6bf534 100755 --- a/resources/themes/backend/assets/css/helpdesk.css +++ b/resources/themes/backend/assets/css/helpdesk.css @@ -2439,3 +2439,86 @@ html:not(.dark) .hd-priority-legend > div { color:#475467 !important; } /* Safari 12 does not support inset shorthand. */ .ios12 .hd-sidebar-backdrop { top:72px; right:0; bottom:0; left:0; } + +/* ============================================================ + Stable account/settings UI for legacy WebKit and modern browsers. + These controls deliberately avoid Flux layout primitives so Safari 12 + receives the same usable profile/settings experience. + ============================================================ */ +.hd-settings-heading { margin:0 0 26px; padding:0 0 20px; border-bottom:1px solid #303845; } +.hd-settings-heading h1 { margin:0; color:#f8fafc; font-size:1.9rem; line-height:1.15; font-weight:800; } +.hd-settings-heading p { margin:7px 0 0; color:#9ca3af; font-size:.95rem; } +.hd-account-settings { display:-webkit-flex; display:flex; -webkit-align-items:flex-start; align-items:flex-start; width:100%; max-width:980px; } +.hd-settings-nav { width:190px; min-width:190px; margin-right:34px; padding:5px; border:1px solid #303845; border-radius:12px; background:#151a22; } +.hd-settings-nav a { display:block; min-height:42px; box-sizing:border-box; padding:11px 12px; border-radius:8px; color:#aeb7c5; font-size:.88rem; font-weight:650; text-decoration:none; } +.hd-settings-nav a:hover { background:#202732; color:#fff; } +.hd-settings-nav a.is-active { background:#263244; color:#fff; box-shadow:inset 3px 0 #3b82f6; } +.hd-settings-panel { -webkit-flex:1 1 auto; flex:1 1 auto; min-width:0; max-width:620px; } +.hd-settings-panel-header { margin-bottom:22px; } +.hd-settings-panel-header h2 { margin:0; color:#f8fafc; font-size:1.2rem; font-weight:750; } +.hd-settings-panel-header p { margin:5px 0 0; color:#9ca3af; font-size:.84rem; } +.hd-settings-form { display:block; width:100%; } +.hd-settings-field { display:block; margin:0 0 18px; color:#dce2ea; } +.hd-settings-field > span { display:block; margin-bottom:7px; font-size:.78rem; font-weight:700; } +.hd-settings-field input { box-sizing:border-box; width:100%; height:44px; padding:0 12px; border:1px solid #424a56; border-radius:9px; background:#252a31; color:#f3f4f6; font:inherit; font-size:16px; -webkit-appearance:none; appearance:none; } +.hd-settings-field input:focus { border-color:#3b82f6; outline:none; box-shadow:0 0 0 3px rgba(59,130,246,.16); } +.hd-settings-error { display:block; margin-top:6px; color:#fca5a5; font-size:.72rem; } +.hd-settings-note { margin:0 0 18px; color:#9ca3af; font-size:.8rem; } +.hd-settings-link { padding:0; border:0; background:none; color:#93c5fd; font:inherit; cursor:pointer; text-decoration:underline; } +.hd-settings-actions { display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:10px; margin-top:10px; } +.hd-settings-button { box-sizing:border-box; min-height:40px; padding:9px 15px; border:1px solid #48515e; border-radius:9px; background:#252b34; color:#e5e7eb; font:inherit; font-size:.82rem; font-weight:700; line-height:1.2; cursor:pointer; text-decoration:none; -webkit-appearance:none; appearance:none; } +.hd-settings-button-primary { border-color:#3b82f6; background:#2563eb; color:#fff; } +.hd-settings-button-danger { border-color:#dc2626; background:#dc2626; color:#fff; } +.hd-native-appearance { display:-webkit-flex; display:flex; width:100%; margin-top:6px; } +.hd-native-appearance button { -webkit-flex:1 1 0; flex:1 1 0; min-width:0; height:86px; margin-right:10px; border:1px solid #3a4350; border-radius:11px; background:#1a2029; color:#cbd5e1; font:inherit; font-weight:700; cursor:pointer; -webkit-appearance:none; appearance:none; } +.hd-native-appearance button:last-child { margin-right:0; } +.hd-native-appearance button svg { display:block; width:24px !important; height:24px !important; margin:0 auto 8px; fill:currentColor; } +.hd-native-appearance button.is-active { border-color:#3b82f6; background:#1d355b; color:#bfdbfe; box-shadow:inset 0 0 0 1px #3b82f6; } +.hd-delete-account { margin-top:36px; padding-top:25px; border-top:1px solid #303845; } +.hd-delete-account h3,.hd-delete-confirm h4 { margin:0; color:#f8fafc; font-size:1rem; } +.hd-delete-account p,.hd-delete-confirm p { margin:5px 0 16px; color:#9ca3af; font-size:.8rem; line-height:1.5; } +.hd-delete-details > summary { display:inline-block; list-style:none; } +.hd-delete-details > summary::-webkit-details-marker { display:none; } +.hd-delete-confirm { margin-top:14px; padding:18px; border:1px solid #4b3135; border-radius:11px; background:#23181a; } + +html:not(.dark) .hd-settings-heading { border-bottom-color:#d8dee7; } +html:not(.dark) .hd-settings-heading h1, +html:not(.dark) .hd-settings-panel-header h2, +html:not(.dark) .hd-delete-account h3, +html:not(.dark) .hd-delete-confirm h4 { color:#111827; } +html:not(.dark) .hd-settings-heading p, +html:not(.dark) .hd-settings-panel-header p, +html:not(.dark) .hd-settings-note, +html:not(.dark) .hd-delete-account p, +html:not(.dark) .hd-delete-confirm p { color:#667085; } +html:not(.dark) .hd-settings-nav { border-color:#d8dee7; background:#fff; } +html:not(.dark) .hd-settings-nav a { color:#475467; } +html:not(.dark) .hd-settings-nav a:hover { background:#eef2f7; color:#111827; } +html:not(.dark) .hd-settings-nav a.is-active { background:#e9f0fb; color:#1d4ed8; } +html:not(.dark) .hd-settings-field { color:#344054; } +html:not(.dark) .hd-settings-field input { border-color:#c9d1dc; background:#fff; color:#1f2937; } +html:not(.dark) .hd-settings-button { border-color:#c9d1dc; background:#fff; color:#344054; } +html:not(.dark) .hd-settings-button-primary { border-color:#2563eb; background:#2563eb; color:#fff; } +html:not(.dark) .hd-settings-button-danger { border-color:#dc2626; background:#dc2626; color:#fff; } +html:not(.dark) .hd-native-appearance button { border-color:#c9d1dc; background:#fff; color:#475467; } +html:not(.dark) .hd-native-appearance button.is-active { border-color:#2563eb; background:#eff6ff; color:#1d4ed8; } +html:not(.dark) .hd-delete-account { border-top-color:#d8dee7; } +html:not(.dark) .hd-delete-confirm { border-color:#fecaca; background:#fff7f7; } + +/* iOS 12 account dropdown: anchor to the viewport so it cannot be displaced + by the old flex implementation in the top bar. */ +.ios12 .hd-topbar-main .hd-account-menu { margin-left:auto; position:static; } +.ios12 .hd-topbar-main .hd-account-dropdown { position:fixed; top:66px; right:14px; left:auto; width:300px; max-width:calc(100vw - 28px); } +.ios12 .hd-account-button { min-width:150px; -webkit-justify-content:flex-end; justify-content:flex-end; } +.ios12 .hd-account-dropdown-copy { display:block; } +.ios12 .hd-account-dropdown-copy strong, +.ios12 .hd-account-dropdown-copy span, +.ios12 .hd-account-dropdown-copy small { display:block; } + +@media(max-width:760px) { + .hd-account-settings { display:block; } + .hd-settings-nav { width:100%; min-width:0; margin:0 0 22px; box-sizing:border-box; } + .hd-settings-panel { max-width:none; } + .hd-native-appearance { display:block; } + .hd-native-appearance button { width:100%; margin:0 0 10px; } +} diff --git a/resources/themes/backend/views/components/settings/layout.blade.php b/resources/themes/backend/views/components/settings/layout.blade.php index d4fc5e5..3e9009f 100755 --- a/resources/themes/backend/views/components/settings/layout.blade.php +++ b/resources/themes/backend/views/components/settings/layout.blade.php @@ -1,20 +1,17 @@ -
-
- - {{ __('Profile') }} - {{ __('Security') }} - {{ __('Appearance') }} - -
+