re-add theme as ptrs broken fixed ipad theme
This commit is contained in:
Mark Gregory
@@ -2289,236 +2289,183 @@ textarea {
|
||||
}
|
||||
|
||||
|
||||
/* ============================================================
|
||||
iOS 12 / legacy WebKit compatibility.
|
||||
The ios12 class is applied in partials/head.blade.php from the UA.
|
||||
Keep this layer deliberately simple: flexbox + fixed widths rather
|
||||
than newer Grid/Tailwind layout behaviour on the old WebKit engine.
|
||||
============================================================ */
|
||||
.ios12,
|
||||
.ios12 body,
|
||||
.ios12 button,
|
||||
.ios12 input,
|
||||
.ios12 select,
|
||||
.ios12 textarea {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
|
||||
}
|
||||
/* ========================================================================
|
||||
iOS 12 targeted corrections
|
||||
======================================================================== */
|
||||
|
||||
/* Do not rely on Font Awesome webfonts for the old iPad. */
|
||||
.hd-svg-icon {
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
vertical-align: middle;
|
||||
fill: currentColor;
|
||||
flex: 0 0 18px;
|
||||
/* Account button belongs at the extreme right of the header. */
|
||||
.hd-topbar-main > .hd-account-menu {
|
||||
margin-left: auto;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.hd-metric-icon .hd-svg-icon { width: 23px; height: 23px; }
|
||||
|
||||
/* SVG donut is reliable on Safari 12; conic-gradient is not. */
|
||||
.hd-donut { background: transparent !important; overflow: hidden; }
|
||||
.hd-donut-svg { position:absolute; left:0; top:0; width:100%; height:100%; }
|
||||
.hd-donut-track { stroke:#2f3743; }
|
||||
.hd-donut:after { display:none !important; }
|
||||
.hd-donut span { position:relative; z-index:2; }
|
||||
|
||||
/* iOS 12 iPad layout. Keep the desktop sidebar, but give the content
|
||||
enough room by reducing the sidebar and using a two-column metric row. */
|
||||
.ios12 { --hd-sidebar-width: 250px; --hd-topbar-height: 72px; }
|
||||
.ios12 .hd-topbar {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
grid-template-columns: none;
|
||||
}
|
||||
.ios12 .hd-topbar-brand {
|
||||
width: 250px;
|
||||
min-width: 250px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.ios12 .hd-topbar-main {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex: 1 1 auto;
|
||||
.hd-topbar-main > .hd-topbar-spacer {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
.ios12 .hd-top-search {
|
||||
width: 330px;
|
||||
max-width: 48%;
|
||||
}
|
||||
.ios12 .hd-shell-sidebar { width:250px; }
|
||||
.ios12 .hd-shell-main {
|
||||
margin-left:250px;
|
||||
padding-left:24px;
|
||||
padding-right:24px;
|
||||
}
|
||||
.ios12 .hd-dashboard-heading {
|
||||
display:-webkit-flex;
|
||||
display:flex;
|
||||
}
|
||||
.ios12 .hd-range-select { min-width:190px; }
|
||||
|
||||
/* Explicit flex layout replaces CSS Grid on iOS 12. */
|
||||
.ios12 .hd-metric-grid {
|
||||
display:-webkit-flex;
|
||||
display:flex;
|
||||
-webkit-flex-wrap:wrap;
|
||||
flex-wrap:wrap;
|
||||
margin-left:-7px;
|
||||
margin-right:-7px;
|
||||
/* Account settings use plain layout primitives that Safari 12 handles. */
|
||||
.hd-account-settings {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
.ios12 .hd-metric-card {
|
||||
box-sizing:border-box;
|
||||
width:calc(50% - 14px);
|
||||
margin:7px;
|
||||
min-height:118px;
|
||||
padding:16px;
|
||||
display:-webkit-flex;
|
||||
display:flex;
|
||||
.hd-account-settings-nav {
|
||||
width: 220px;
|
||||
flex: 0 0 220px;
|
||||
margin-right: 40px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
.ios12 .hd-metric-card > div {
|
||||
display:block;
|
||||
min-width:0;
|
||||
-webkit-flex:1 1 auto;
|
||||
flex:1 1 auto;
|
||||
.hd-account-settings-nav a {
|
||||
display: block;
|
||||
padding: 9px 11px;
|
||||
margin-bottom: 4px;
|
||||
border-radius: 8px;
|
||||
color: #aeb7c4;
|
||||
font-weight: 650;
|
||||
text-decoration: none;
|
||||
}
|
||||
.ios12 .hd-metric-card small,
|
||||
.ios12 .hd-metric-card strong,
|
||||
.ios12 .hd-metric-card em { display:block; }
|
||||
.ios12 .hd-metric-card small { white-space:nowrap; font-size:.84rem; }
|
||||
.ios12 .hd-metric-card strong { margin-top:2px; }
|
||||
.ios12 .hd-metric-card em { margin-top:4px; font-size:.72rem; }
|
||||
.ios12 .hd-metric-icon {
|
||||
width:46px;
|
||||
height:46px;
|
||||
min-width:46px;
|
||||
margin-right:13px;
|
||||
.hd-account-settings-nav a:hover,
|
||||
.hd-account-settings-nav a.is-active {
|
||||
background: #242b35;
|
||||
color: #fff;
|
||||
}
|
||||
.ios12 .hd-dashboard-grid { display:block; }
|
||||
.ios12 .hd-dashboard-card { margin-bottom:16px; }
|
||||
.ios12 .hd-priority-body {
|
||||
display:-webkit-flex;
|
||||
display:flex;
|
||||
-webkit-align-items:center;
|
||||
align-items:center;
|
||||
min-height:230px;
|
||||
.hd-account-settings-content {
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
align-self: stretch;
|
||||
}
|
||||
.ios12 .hd-donut { width:140px; height:140px; min-width:140px; margin:0 30px 0 10px; }
|
||||
.ios12 .hd-priority-legend { display:block; -webkit-flex:1 1 auto; flex:1 1 auto; }
|
||||
.ios12 .hd-priority-legend > div {
|
||||
display:-webkit-flex;
|
||||
display:flex;
|
||||
-webkit-justify-content:space-between;
|
||||
justify-content:space-between;
|
||||
margin:10px 0;
|
||||
.hd-account-settings-form {
|
||||
width: 100%;
|
||||
max-width: 32rem;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.ios12 .hd-chart-legend { display:-webkit-flex; display:flex; }
|
||||
.ios12 .hd-chart-legend span { display:-webkit-flex; display:flex; margin-right:18px; }
|
||||
.ios12 .hd-chart-labels { display:-webkit-flex; display:flex; -webkit-justify-content:space-between; justify-content:space-between; }
|
||||
html:not(.dark) .hd-account-settings-nav a { color: #4b5563; }
|
||||
html:not(.dark) .hd-account-settings-nav a:hover,
|
||||
html:not(.dark) .hd-account-settings-nav a.is-active { background: #e8eef7; color: #111827; }
|
||||
|
||||
/* Complete the light appearance. */
|
||||
html:not(.dark) .hd-dashboard-heading h1 { color:#111827 !important; }
|
||||
html:not(.dark) .hd-dashboard-heading p { color:#667085 !important; }
|
||||
html:not(.dark) .hd-range-select { background:#fff !important; border-color:#d8dee7 !important; color:#475467 !important; }
|
||||
html:not(.dark) .hd-range-select select { color:#1f2937 !important; }
|
||||
html:not(.dark) .hd-metric-card,
|
||||
html:not(.dark) .hd-dashboard-card { background:#fff !important; border-color:#d8dee7 !important; box-shadow:0 5px 16px rgba(15,23,42,.06) !important; }
|
||||
html:not(.dark) .hd-metric-card small,
|
||||
html:not(.dark) .hd-metric-card em { color:#667085 !important; }
|
||||
html:not(.dark) .hd-metric-card strong,
|
||||
html:not(.dark) .hd-dashboard-card > header h2 { color:#111827 !important; }
|
||||
html:not(.dark) .hd-dashboard-card > header { border-bottom-color:#e4e7ec !important; }
|
||||
html:not(.dark) .hd-dashboard-card > header span,
|
||||
html:not(.dark) .hd-dashboard-card > header a,
|
||||
html:not(.dark) .hd-chart-legend,
|
||||
html:not(.dark) .hd-chart-labels { color:#667085 !important; }
|
||||
html:not(.dark) .hd-chart-grid-lines line { stroke:#e4e7ec !important; }
|
||||
html:not(.dark) .hd-donut-track { stroke:#e4e7ec; }
|
||||
html:not(.dark) .hd-donut span,
|
||||
html:not(.dark) .hd-priority-legend strong { color:#111827 !important; }
|
||||
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; }
|
||||
/* Do not use :is() here: Safari 12 discards selectors containing it. */
|
||||
.hd-account-settings input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
|
||||
.hd-account-settings textarea,
|
||||
.hd-account-settings select,
|
||||
.hd-account-settings [data-flux-input],
|
||||
.hd-account-settings [data-flux-control],
|
||||
.hd-account-settings [data-flux-field-control],
|
||||
.hd-account-settings [data-flux-select] {
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
}
|
||||
html.dark .hd-account-settings input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
|
||||
html.dark .hd-account-settings textarea,
|
||||
html.dark .hd-account-settings select,
|
||||
html.dark .hd-account-settings [data-flux-input],
|
||||
html.dark .hd-account-settings [data-flux-control],
|
||||
html.dark .hd-account-settings [data-flux-field-control],
|
||||
html.dark .hd-account-settings [data-flux-select] {
|
||||
background: #252a31 !important;
|
||||
border-color: #424a56 !important;
|
||||
color: #f3f4f6 !important;
|
||||
}
|
||||
|
||||
/* Reliable appearance control, independent of Flux segmented radio support. */
|
||||
.hd-appearance-switch {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
padding: 4px;
|
||||
border: 1px solid #3b4350;
|
||||
border-radius: 10px;
|
||||
background: #1d232c;
|
||||
}
|
||||
.hd-appearance-choice {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
flex: 1 1 0;
|
||||
min-height: 40px;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
background: transparent;
|
||||
color: #b8c0cc;
|
||||
font: inherit;
|
||||
font-weight: 650;
|
||||
cursor: pointer;
|
||||
}
|
||||
.hd-appearance-choice + .hd-appearance-choice { margin-left: 4px; }
|
||||
.hd-appearance-choice i { margin-right: 6px; }
|
||||
.hd-appearance-choice.is-active { background: #2563eb; color: #fff; }
|
||||
html:not(.dark) .hd-appearance-switch { border-color: #d5dbe4; background: #edf1f6; }
|
||||
html:not(.dark) .hd-appearance-choice { color: #475569; }
|
||||
html:not(.dark) .hd-appearance-choice.is-active { background: #fff; color: #111827; box-shadow: 0 1px 4px rgba(15,23,42,.15); }
|
||||
|
||||
/* Helpdesk Settings: explicit layout for old WebKit instead of relying on
|
||||
Tailwind's generated modern selector/value set. */
|
||||
.hd-ios12 .hd-core-settings { display: block !important; }
|
||||
.hd-ios12 .hd-settings-hero {
|
||||
display: block !important;
|
||||
overflow: hidden !important;
|
||||
border: 1px solid #d7dde5 !important;
|
||||
border-radius: 14px !important;
|
||||
background: #fff !important;
|
||||
}
|
||||
.hd-ios12.dark .hd-settings-hero { border-color: #353d48 !important; background: #151a21 !important; }
|
||||
.hd-ios12 .hd-settings-hero-inner {
|
||||
display: block !important;
|
||||
padding: 20px !important;
|
||||
background: #172033 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.hd-ios12 .hd-settings-section-grid {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
margin: 8px -4px 0 !important;
|
||||
}
|
||||
.hd-ios12 .hd-settings-section-card {
|
||||
box-sizing: border-box !important;
|
||||
display: block !important;
|
||||
width: calc(25% - 8px) !important;
|
||||
min-width: 150px !important;
|
||||
min-height: 76px !important;
|
||||
margin: 4px !important;
|
||||
padding: 12px !important;
|
||||
border-style: solid !important;
|
||||
border-width: 1px !important;
|
||||
border-radius: 10px !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.hd-ios12 .hd-core-settings form .grid {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
margin-left: -8px !important;
|
||||
margin-right: -8px !important;
|
||||
}
|
||||
.hd-ios12 .hd-core-settings form .grid > * {
|
||||
box-sizing: border-box !important;
|
||||
flex: 1 1 260px !important;
|
||||
min-width: 0 !important;
|
||||
margin-left: 8px !important;
|
||||
margin-right: 8px !important;
|
||||
margin-bottom: 16px !important;
|
||||
}
|
||||
.hd-ios12 .hd-core-settings button,
|
||||
.hd-ios12 .hd-core-settings [role="button"] {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hd-account-settings { display: block; }
|
||||
.hd-account-settings-nav {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #d8dee7;
|
||||
}
|
||||
html.dark .hd-account-settings-nav { border-bottom-color: #343c47; }
|
||||
.hd-account-settings-nav a {
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.hd-account-settings-form { max-width: none; }
|
||||
.hd-ios12 .hd-settings-section-card { width: calc(50% - 8px) !important; min-width: 0 !important; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user