CINXE.COM
Buffer - Publishing
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Buffer - Publishing</title> <link rel="icon" href="/favicon.svg" /> <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin /> <link rel="preconnect" href="https://stats.pusher.com/" /> <link rel="preconnect" href="//icons.buffer.com/" crossorigin /> <link href="https://fonts.googleapis.com/css?family=Poppins:800|Roboto:300,400,500,700|Barlow+Condensed:500&display=swap" rel="stylesheet" /> <link href="//icons.buffer.com/0.16.4/buffer-icons.css" rel="stylesheet" type="text/css" /> <meta name="google" content="notranslate" /> <style> :root { --scrollbar-thumb-color: rgba(89, 98, 106, 0.2); --scrollbar-thumb-hover-color: rgba(89, 98, 106, 0.4); --scrollbar-track-color: transparent; --scrollbar-width: 0.5rem; } * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html, body, #root { font-family: var(--font-family-primary); margin: 0; display: flex; flex-direction: column; background-color: var(--color-bg-neutral); } html, body { height: 100vh; scrollbar-width: thin; scrollbar-color: rgba(89, 98, 106, 0.2) transparent; scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); color: var(--color-text-neutral); background-color: var(--color-bg-neutral); } body { overflow: auto; } #root { height: 100%; overflow: auto; } #root > .app-root { flex: 1; } /** * HACK: This is a temporary fix to prevent the body from scrolling on certain pages. We should look at the page layout holistocally. * After all the legacy pages are removed, we should remove this hack and fix the root cause. */ #root > .app-root:has([data-temporary-hack-disable-root-scroll]) { overflow: hidden; } #navigator { display: flex; flex-direction: column; } ::-webkit-scrollbar { --fix: ; /* fix to force the browser to apply the styles */ width: 0.5rem; width: var(--scrollbar-width); height: 0.5rem; height: var(--scrollbar-width); } ::-webkit-scrollbar-track { background: transparent; background: var(--scrollbar-track-color); } ::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(89, 98, 106, 0.2); background: var(--scrollbar-thumb-color); } ::-webkit-scrollbar-thumb:hover { border-radius: 10px; background: rgba(89, 98, 106, 0.4); background: var(--scrollbar-thumb-hover-color); } [data-hide-scrollbar] { -ms-overflow-style: none; scrollbar-width: none; /* firefox */ } [data-hide-scrollbar]::-webkit-scrollbar { display: none; } input[type='number'] { -moz-appearance: textfield; } input[type='number']::-webkit-outer-spin-button, input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } @keyframes placeHolderShimmer { 0% { background-position: -500px 0; } 100% { background-position: 500px 0; } } @keyframes fade { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; transform: translateY(0); } 25% { opacity: 0; transform: translateY(4px) scale(1.1); } 50% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; transform: translateY(0); } } /* @todo: remove this class once analyze-shared-components is fixed */ .DayPicker-Weekdays { display: block; } #browser-message .browser-message-popover { font-family: Roboto, sans-serif; position: absolute; top: 0px; left: 0px; display: flex; flex-direction: column; height: 80vh; width: 70vw; justify-content: center; align-items: center; } #browser-message .browser-message-in { padding: 1.5rem; font-size: 0.875rem; line-height: 1.5; background-color: rgb(255, 255, 255); border: 0.063rem solid rgb(230, 235, 239); border-radius: 0.126rem; transition: box-shadow 0.2s linear 0s; text-align: center; } #browser-message .browser-message-in span { display: block; } #browser-message a { -webkit-text-decoration: none; text-decoration: none; color: #168eea; } #pendo-base { pointer-events: initial; } #beacon-container { z-index: 2; } </style> <script type="module" crossorigin src="/index-H9UUSMDD.js"></script> <link rel="modulepreload" crossorigin href="/vendor-Q5z9PYJk.js"> <link rel="modulepreload" crossorigin href="/common-BnCKQD35.js"> <link rel="stylesheet" crossorigin href="/vendor-DmBy1fEQ.css"> <link rel="stylesheet" crossorigin href="/common-BkXkWHCQ.css"> <link rel="stylesheet" crossorigin href="/index-BuWqoc50.css"> </head> <body> <div id="root"> <div style=" display: inline-block; width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin: -50px 0px 0px -50px; " > <div style=" opacity: 1; position: absolute; top: 0px; left: 0px; animation: 2s ease 0ms infinite normal none running fade; display: block; " > <svg width="100%" height="100%" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 100px; height: 100px; fill: rgb(89, 98, 106)" > <g class="shuttleGray"> <path d="M1.10241622,4.34038738 L7.75166358,7.40469806 C7.88821853,7.46764349 8.11178147,7.46764349 8.24833642,7.40469806 L14.8975838,4.34038738 C15.0341387,4.27744195 15.0341387,4.17446518 14.8975838,4.11151975 L8.24833642,1.04720908 C8.11178147,0.984263641 7.88821853,0.984263641 7.75166358,1.04720908 L1.10241622,4.11151975 C0.965861261,4.17446518 0.965861261,4.27744195 1.10241622,4.34038738" ></path> </g> </svg> </div> <div style=" opacity: 1; position: absolute; top: 0px; left: 0px; animation: 2s ease 150ms infinite normal none running fade; display: block; " > <svg width="100%" height="100%" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 100px; height: 100px; fill: rgb(89, 98, 106)" > <g class="shuttleGray"> <path d="M14.8975838,7.88556618 L13.3049713,7.1516585 C13.1684163,7.08871306 12.9449081,7.08871306 12.8082985,7.1516585 L8.24833642,9.25308448 C8.11178147,9.31602991 7.88821853,9.31602991 7.75166358,9.25308448 L3.19170155,7.1516585 C3.0550919,7.08871306 2.83158366,7.08871306 2.6950287,7.1516585 L1.10241622,7.88556618 C0.965861261,7.94851162 0.965861261,8.05154307 1.10241622,8.1144885 L7.75166358,11.1787445 C7.88821853,11.2416899 8.11178147,11.2416899 8.24833642,11.1787445 L14.8975838,8.1144885 C15.0341387,8.05154307 15.0341387,7.94851162 14.8975838,7.88556618" ></path> </g> </svg> </div> <div style=" opacity: 1; position: absolute; top: 0px; left: 0px; animation: 2s ease 300ms infinite normal none running fade; display: block; " > <svg width="100%" height="100%" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 100px; height: 100px; fill: rgb(89, 98, 106)" > <g class="shuttleGray"> <path d="M14.8975838,11.6596673 L13.3049713,10.9257049 C13.1684163,10.8627595 12.9449081,10.8627595 12.8082985,10.9257049 L8.24833642,13.0271856 C8.11178147,13.090131 7.88821853,13.090131 7.75166358,13.0271856 L3.19170155,10.9257049 C3.0550919,10.8627595 2.83158366,10.8627595 2.6950287,10.9257049 L1.10241622,11.6596673 C0.965861261,11.7226127 0.965861261,11.8255895 1.10241622,11.8885349 L7.75166358,14.9528456 C7.88821853,15.015791 8.11178147,15.015791 8.24833642,14.9528456 L14.8975838,11.8885349 C15.0341387,11.8255895 15.0341387,11.7226127 14.8975838,11.6596673" ></path> </g> </svg> </div> </div> </div> <!-- Here is where all "floating" elements of Popcorn will end up, it has a very high z-index to ensure it's always on top of any other element --> <div id="portals-container" style="z-index: 9998"></div> <div id="composer-container" style="z-index: 2000; isolation: isolate" ></div> </body> </html>