re-add theme as ptrs broken fixed ipad theme
This commit is contained in:
Mark Gregory
@@ -2287,3 +2287,155 @@ textarea {
|
||||
.overflow-x-auto {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================================
|
||||
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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
.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;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.ios12 .hd-metric-card {
|
||||
box-sizing:border-box;
|
||||
width:calc(50% - 14px);
|
||||
margin:7px;
|
||||
min-height:118px;
|
||||
padding:16px;
|
||||
display:-webkit-flex;
|
||||
display:flex;
|
||||
}
|
||||
.ios12 .hd-metric-card > div {
|
||||
display:block;
|
||||
min-width:0;
|
||||
-webkit-flex:1 1 auto;
|
||||
flex:1 1 auto;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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; }
|
||||
|
||||
/* 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; }
|
||||
|
||||
Reference in New Issue
Block a user