/* Disable navigation away from the page; keep in-page tabs working */ a[href]:not([data-toggle]):not([href^="#"]):not([href=""]):not([href="javascript:void(0)"]) { pointer-events: none; cursor: default; } button.unlock-private-content { pointer-events: none; cursor: default; } /* Sign in / Sign up stay clickable — the click handler answers with an error dialog instead. A dead button reads as a broken page; a refusal doesn't. */ a[href*="/login"], [data-login-button], [data-signup-button] { /* !important: the blanket link-disabling rule above is more specific */ pointer-events: auto !important; cursor: pointer !important; } /* Language switcher: the entries link to myfxbook, so the blanket rule above disables them. The click handler intercepts them and reloads with ?lang=. */ li[lang][location] a, li[lang][location] { pointer-events: auto !important; cursor: pointer !important; } /* Languages we have no template for are hidden by inject-data.js */ li[lang][location].lang-unavailable { display: none !important; } li[lang][location].lang-current > a { font-weight: 600; } /* Auth error dialog. Deliberately not using Bootstrap's .modal/.modal-backdrop classes: those are neutralised above to kill the ad-blocker popup. */ .auth-error-modal { display: none; } .auth-error-modal.is-open { display: block; } .auth-error-modal__backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5); z-index: 100000; } .auth-error-modal__box { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100001; width: calc(100% - 32px); max-width: 380px; padding: 24px; background: #ffffff; border-radius: 4px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); text-align: center; font-family: Roboto, Arial, Helvetica, sans-serif; } .auth-error-modal__title { margin-bottom: 12px; font-size: 18px; font-weight: 500; color: #333333; } .auth-error-modal__text { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: #666666; } .auth-error-modal__btn { padding: 9px 28px; border: 0; border-radius: 3px; font-size: 14px; color: #ffffff; background: #f7941e; cursor: pointer; } .auth-error-modal__btn:hover { background: #e0850f; } .ad-blocker-popup-modal, #webNotificationModal { display: none !important; } /* Ads never load on this clone, so myfxbook's scripts decide an ad blocker is present and open the modal above. Hiding the modal isn't enough: Bootstrap still appends its own backdrop to and locks scrolling, which greys out the whole page with no dialog in sight. The mobile menu reuses the same backdrop class (with its own id), so leave that one alone. */ .modal-backdrop:not(#mobile-menu-backdrop) { display: none !important; } body.modal-open { overflow: auto !important; padding-right: 0 !important; } /* Footer ticker: keep visible but don't cover page content */ .footer-toolbar-main-div { z-index: 10040; } .page-container-bg-solid .page-container, .page-container-bg-solid .page-content { padding-bottom: 48px; } /* Hide sponsor ads and empty reserved ad slots */ .toolbar-sponsor-div, .sponsor-header-ad, .ad-disclaimer, .ads-margin, .desktop-top-ad, .mobile-top-ad, .responsive-ad-height, #wallpaper-ad, .popupAdStyle, .popupAdMobile { display: none !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } .system-user-properties h1.font-24 { margin-top: 0; margin-bottom: 8px; } /* Title + action buttons on one row, metadata under the title — desktop only. On a phone these nowrap rules push the action buttons and the broker line past the screen edge; the page then grows wider than the viewport and the browser zooms the whole thing out until the text is unreadable. */ @media (min-width: 992px) { .timeframe-select-inner { align-items: flex-start !important; } .system-portfolio-buttons { justify-content: flex-end; padding-top: 2px; } .system-portfolio-buttons .display-flex { flex-wrap: nowrap; } .portfolio-resolve-account-type { white-space: nowrap; } } /* ---------- Phones and small tablets ---------- */ /* Last-resort guard: nothing may widen the page past the screen. `clip`, not `hidden`, because hidden turns the element into a scroll container and breaks position: sticky further down the page. */ html, body { overflow-x: clip; } @media (max-width: 991px) { /* The account header block is sticky. On myfxbook their scripts collapse it to a slim bar once you scroll; those scripts don't run on the clone, so on a phone the full block — badges plus buttons, ~140px — would ride over the charts. Let it scroll away with the page instead. */ #sticky-account-extras { position: static !important; } /* Broker cards swipe sideways rather than spilling off-screen */ .broker-footer-cards-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding-bottom: 6px; } .broker-footer-card { flex: 0 0 auto; scroll-snap-align: start; } /* The mobile ticker bar was sized for live content and ran 473px wide, which on its own stretched the page past a 375px screen. */ #footerToolbarMobile { max-width: 100%; overflow: hidden; } /* "Terms | Privacy | Site Map | Site Map Calendar" stays on one line and the last link ends up cut off at the screen edge; let the row wrap. Each link keeps nowrap so a label never splits in two. */ #termsPrivacySiteMap { flex-wrap: wrap; white-space: normal; row-gap: 4px; } /* --- Account header, phone layout --- The saved pages are myfxbook's desktop markup. On narrow screens their CSS flips the header with column-reverse, which lifts the action-button column (bell, Discuss, Add to watch, Custom Analysis) above the title; on their own phone page those buttons simply aren't there. Same for Share / Subscribe under the badges. None of them do anything on the clone. */ .timeframe-select-inner > .col-md-4, #sticky-account-extras .col-md-4 { display: none !important; } /* Owner line and badges stay on one row and scroll sideways, like the original phone page, instead of wrapping onto two or three lines. */ .timeframe-select-inner .system-user-properties > .display-flex.flex-wrap-wrap, #sticky-account-extras .portfolio-account-extras { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .timeframe-select-inner .system-user-properties > .display-flex.flex-wrap-wrap::-webkit-scrollbar, #sticky-account-extras .portfolio-account-extras::-webkit-scrollbar { display: none; } .timeframe-select-inner .system-user-properties > .display-flex.flex-wrap-wrap > *, #sticky-account-extras .portfolio-account-extras > * { flex: 0 0 auto; } /* Flex children default to min-width:auto, which would let the scrolling rows push their parents wider instead of scrolling inside them. */ #sticky-account-extras .system-user-properties { min-width: 0; max-width: 100%; } .portfolio-resolve-account-type { white-space: nowrap; } } /* The markup marks the title `bold`, but a myfxbook rule knocks it back to 500 — visibly lighter than on their site, especially in Cyrillic. That rule wins even against a more specific selector (their CDN sheet can't be inspected from script, cross-origin), so it has to be !important. */ .system-user-properties h1.font-24.bold { font-weight: 700 !important; } /* Stand-in for the owner avatar, which myfxbook won't serve to this domain (see fallbackAvatars in inject-data.js). */ .avatar-fallback { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; background: #3d6fd8; color: #ffffff; font-size: 12px; font-weight: 700; line-height: 1; } /* Empty sponsor strip under the header: the ad inside is hidden above, but myfxbook's CSS still shows the 41px bar despite its display-none class. */ .page-header .sponsor-line { display: none !important; } /* Sticky "Open an account with Pepperstone" bar at the bottom of the phone layout — a doubleclick ad, and its link is disabled on the clone anyway. */ .open-account.touchable { display: none !important; } /* CookieYes is registered for myfxbook.com: on this domain it errors out and leaves a floating button plus an off-screen preference panel behind. The build strips its script; this hides markup already baked into the pages. */ .cky-consent-container, .cky-modal, .cky-overlay, .cky-btn-revisit-wrapper, #ckyPreferenceCenter { display: none !important; } /* Chart area matches original portlet height */ .info-and-chart-static-height #chart1, .info-and-chart-static-height #chart2, .info-and-chart-static-height #chart3, .info-and-chart-static-height #chart4, .info-and-chart-static-height #chart5 { min-height: 360px; } .info-and-chart-static-height .highcharts-contextmenu, .highcharts-exporting-group { display: none !important; } /* Placeholder shown between page load and the first render. The templates ship with myfxbook's own charts already drawn inside these containers; the build strips them, and this fills the gap until /api/dashboard answers. */ .chart-skeleton { height: 320px; margin: 10px 6px; border-radius: 6px; background: linear-gradient(100deg, #f4f5f7 30%, #ecedf1 50%, #f4f5f7 70%); background-size: 220% 100%; animation: chart-skeleton-shimmer 1.25s ease-in-out infinite; } #monthlyCont .chart-skeleton { height: 240px; } @keyframes chart-skeleton-shimmer { from { background-position: 180% 0; } to { background-position: -40% 0; } } @media (prefers-reduced-motion: reduce) { .chart-skeleton { animation: none; } } /* Monthly Analytics: the three panes that need a month selection keep the original placeholder, since the clone has no backend to select against */ .monthly-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: #999999; font-size: 13px; } /* Stats sidebar: prevent value text wrapping */ #infoStats .table-small td:last-child { white-space: nowrap; text-align: right; } #infoStats .table-small td:first-child { white-space: nowrap; }