re-add theme as ptrs broken fixed ipad theme
This commit is contained in:
Mark Gregory
@@ -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; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user