components
2 weeks ago
hooks
2 weeks ago
lib
1 month ago
pages
2 weeks ago
router
1 month ago
utils
1 month ago
App.js
1 month ago
Routes.js
1 month ago
common.scss
1 month ago
index.js
1 month ago
main.scss
1 month ago
common.scss
157 lines
| 1 | // Variables |
| 2 | $slate-600: #475569; |
| 3 | $slate-500: #64748b; |
| 4 | $slate-400: #94a3b8; |
| 5 | $slate-300: #cbd5e1; |
| 6 | $slate-200: #e2e8f0; |
| 7 | $slate-100: #f1f5f9; |
| 8 | $slate-50: #f8fafc; |
| 9 | $background-blur-color: #11182780; |
| 10 | $backdrop-blur: blur(8px); |
| 11 | |
| 12 | // Base page styles |
| 13 | .toplevel_page_presto-dashboard { |
| 14 | background-color: #f8fafc; |
| 15 | |
| 16 | // Chrome heights as CSS vars — consumed by shell min-height, sticky |
| 17 | // Navbar offset, and page-level layouts that need to fill the remaining |
| 18 | // viewport (e.g. Settings sidebar). Keeping chrome math centralized. |
| 19 | // WP admin bar is 32px desktop / 46px at ≤782px. Navbar is the Topbar |
| 20 | // component's max-h-14 (3.5rem). |
| 21 | --presto-admin-bar-h: 32px; |
| 22 | --presto-navbar-h: 3.5rem; |
| 23 | |
| 24 | @media screen and (max-width: 782px) { |
| 25 | --presto-admin-bar-h: 46px; |
| 26 | } |
| 27 | #adminmenuwrap { |
| 28 | position: fixed; |
| 29 | top: var(--presto-admin-bar-h); |
| 30 | bottom: 0; |
| 31 | overflow-y: auto; |
| 32 | overflow-x: clip; |
| 33 | } |
| 34 | #wpcontent { |
| 35 | padding: 0 !important; |
| 36 | } |
| 37 | |
| 38 | #wpbody-content { |
| 39 | padding-bottom: 0; |
| 40 | font-size: 14px; |
| 41 | } |
| 42 | |
| 43 | .notice { |
| 44 | z-index: 99; |
| 45 | } |
| 46 | |
| 47 | // Hide third-party notices — CSS fallback alongside PHP suppressForeignNotices(). |
| 48 | // :not selectors preserve PP's own notices (id contains "presto"). |
| 49 | #wpbody-content > .notice:not([id*="presto"]), |
| 50 | #wpbody-content > .updated:not([id*="presto"]), |
| 51 | #wpbody-content > .update-nag, |
| 52 | #wpbody-content > .astra-notices:not([id*="presto"]), |
| 53 | #wpbody-content > .elementor-message, |
| 54 | #fs-notice, |
| 55 | #ehe-admin-cb { |
| 56 | display: none !important; |
| 57 | } |
| 58 | |
| 59 | #wpwrap { |
| 60 | background-color: #f8fafc; |
| 61 | } |
| 62 | |
| 63 | #screen-meta-links, |
| 64 | #wpfooter { |
| 65 | display: none; |
| 66 | } |
| 67 | } |
| 68 | |
| 69 | // Dashboard container — natural flow; the page scrolls, not the shell. |
| 70 | // Using `min-height` (not `height`) means any imprecision in the viewport |
| 71 | // math leaves harmless blank space instead of clipping content. Admin |
| 72 | // notices, plugin update nags, and other WP chrome above the shell are |
| 73 | // absorbed naturally because we don't claim a fixed viewport slice. |
| 74 | #presto-admin-dashboard { |
| 75 | min-height: calc(100vh - var(--presto-admin-bar-h)); |
| 76 | display: flex; |
| 77 | flex-direction: column; |
| 78 | |
| 79 | // Scoped box-sizing reset. Tailwind preflight is disabled globally |
| 80 | // (tailwind.config.js → corePlugins.preflight: false) to avoid leaking |
| 81 | // into WP admin, so browser default `content-box` applies and any |
| 82 | // bordered card silently overflows its parent. |
| 83 | &, |
| 84 | *, |
| 85 | *::before, |
| 86 | *::after { |
| 87 | box-sizing: border-box; |
| 88 | } |
| 89 | |
| 90 | input::placeholder, |
| 91 | textarea::placeholder { |
| 92 | opacity: 1; |
| 93 | color: #9ca3af; |
| 94 | } |
| 95 | } |
| 96 | |
| 97 | // Force UI floating portals (tooltips, popovers, dropdowns) render at body level |
| 98 | // via @floating-ui/react. Boost z-index so they sit above WP admin elements. |
| 99 | body > [data-floating-ui-portal]] { |
| 100 | z-index: 999999; |
| 101 | } |
| 102 | |
| 103 | // Tooltip content must always sit above dialogs (z-999999) and any stacking context. |
| 104 | [role="tooltip"]="tooltip""] { |
| 105 | z-index: 9999999 !important; |
| 106 | max-width: 240px !important; |
| 107 | } |
| 108 | |
| 109 | // Onboarding page — hide WP admin chrome for fullscreen wizard |
| 110 | html:has(> body.presto-player-onboarding-page).wp-toolbar { |
| 111 | padding-top: 0 !important; |
| 112 | box-sizing: border-box; |
| 113 | } |
| 114 | |
| 115 | body.presto-player-onboarding-page { |
| 116 | #wpcontent, |
| 117 | #wpbody { |
| 118 | padding: 0; |
| 119 | margin: 0; |
| 120 | } |
| 121 | |
| 122 | #wpadminbar, |
| 123 | #adminmenuwrap, |
| 124 | #adminmenuback, |
| 125 | #adminmenumain, |
| 126 | #wpfooter { |
| 127 | display: none !important; |
| 128 | } |
| 129 | |
| 130 | .notice, |
| 131 | .updated, |
| 132 | .error, |
| 133 | .update-nag { |
| 134 | display: none !important; |
| 135 | } |
| 136 | |
| 137 | // Sticky topbar during onboarding |
| 138 | .presto-onboarding-topbar { |
| 139 | position: sticky !important; |
| 140 | top: 0; |
| 141 | z-index: 10; |
| 142 | } |
| 143 | } |
| 144 | |
| 145 | // WhatsNew flyout |
| 146 | .whats-new-rss-flyout.presto-player-whats-new-flyout.closed { |
| 147 | visibility: hidden; |
| 148 | } |
| 149 | |
| 150 | // Skeletons one tone lighter across the dashboard. Force UI's <Skeleton /> |
| 151 | // hardcodes `bg-gray-200`; the custom skeleton in DashboardSkeleton uses the |
| 152 | // same pair. Scoping by `.animate-pulse.bg-gray-200` so only loading |
| 153 | // placeholders are affected, never genuine gray-200 backgrounds elsewhere. |
| 154 | #presto-admin-dashboard .animate-pulse.bg-gray-200 { |
| 155 | background-color: #ebedef; |
| 156 | } |
| 157 |