#system-status-container { --color-operational: #22cc44; --color-down: #ff3333; --color-degraded-performance: #ff8800; --color-partial-outage: #d4730d; --color-major-outage: #d73a49; --color-delayed: #ffbb00; --color-maintenance: #6f42c1; --color-issue: #e67e22; --color-unauthorized: #b7791f; --color-unknown: #bbb; --color-background: #f9f9fa; --color-text: #24292e; --borderss: #0003; --service-name: #333; --note-before: #22cc44; --status-operational: #090; font-family: "BB Text"; } .theme-dark #system-status-container { --color-operational: #22cc44; --color-down: #ff3333; --color-degraded-performance: #ff8800; --color-partial-outage: #d4730d; --color-major-outage: #d73a49; --color-delayed: #ffbb00; --color-maintenance: #8b5cf6; --color-issue: #f59e0b; --color-unauthorized: #d69e2e; --color-unknown: #888; --color-background: #f9f9fa; --color-text: #24292e; --borderss: #fff4; --service-name: #ccc; --note-before: #22cc44; --status-operational: #4b0 } .bbss-wrapper { --color-operational: #22cc44; --color-down: #ff3333; --color-degraded-performance: #ff8800; --color-partial-outage: #d4730d; --color-major-outage: #d73a49; --color-delayed: #ffbb00; --color-maintenance: #6f42c1; --color-issue: #e67e22; --color-unauthorized: #b7791f; --color-unknown: #bbb; --service-name: #333; --note-before: #22cc44; --status-operational: #090; --borderss: #0003; font-family: "BB Text", Sans-Serif; font-weight: 400; font-size: 14px; letter-spacing: -0.01em; line-height: 1.428572 } .theme-dark .bbss-wrapper { --color-operational: #22cc44; --color-down: #ff3333; --color-degraded-performance: #ff8800; --color-partial-outage: #d4730d; --color-major-outage: #d73a49; --color-delayed: #ffbb00; --color-maintenance: #8b5cf6; --color-issue: #f59e0b; --color-unauthorized: #d69e2e; --color-unknown: #888; --service-name: #ccc; --note-before: #22cc44; --status-operational: #4b0; --borderss: #fff4 } .bbss-title { margin: 0 0 16px } #system-status-container a:hover { text-decoration: underline } #system-status-container:active a { text-decoration: none } .theme-dark #system-status-container a, .theme-dark #contactLink { color: #09f } .last-access-time { color: #333 } .theme-dark #system-status-container .contact, .theme-dark .last-access-time { color: #ccc } #system-status-container .contact { padding-top: 32px } .loading-container { padding: 120px 0 160px; display: flex; align-items: center; justify-content: center; flex-direction: column } .loading-section { width: 40px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center } .loading-text-section .Loading-text { color: var(--global-black, #000); margin-top: 16px; font-size: 17px; letter-spacing: -0.022em } .theme-dark .Loading-text { color: var(--global-white, #fff) } .loading-section .dots { position: relative; display: flex; justify-content: center; align-items: center } .loading-section .dots span { position: absolute; height: 10px; width: 4px; background-color: #80b200; border-radius: 2px; transform: rotate(calc(var(--i)* -30deg - 150deg)) translateY(15px); animation: bbss-animate .84s linear infinite; animation-delay: calc(-0.07s* var(--i) + .5s) } .theme-dark .loading-section .dots span { background-color: #8BBB00 } @keyframes bbss-animate { 0% { opacity: 1 } 100% { opacity: 0 } } .status-divider { display: flex; align-items: center; border-bottom: 1px solid var(--borderss) } .status-item { display: flex; align-items: center; border-top: 1px solid var(--borderss); padding: 6px 8px 6px 10px; position: relative } .service-name { color: var(--service-name); display: flex; width: 25%; overflow-wrap: break-word } .service-status { display: flex; width: 25%; overflow-wrap: break-word } .service-description { display: flex; width: 50%; overflow-wrap: break-word; color: var(--service-name) } .service-name::before, .note::before, .bbss-inline-note::before { content: ''; width: 16px; height: 16px; background-repeat: no-repeat; background-size: contain; vertical-align: middle; position: relative; mask: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOC4yLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiMyMkNDNDQ7fQ0KPC9zdHlsZT4NCjxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjgiIGN5PSI4IiByPSI4Ii8+DQo8L3N2Zz4NCg=='); -webkit-mask: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOC4yLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiMyMkNDNDQ7fQ0KPC9zdHlsZT4NCjxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjgiIGN5PSI4IiByPSI4Ii8+DQo8L3N2Zz4NCg==') } .service-name::before { margin-top: 2px; margin-right: 10px } .note { color: var(--service-name); align-content: center; display: flex; justify-content: flex-end; vertical-align: middle; position: relative } .note::before { margin-right: 8px; background-color: var(--note-before) } .status-operational { color: var(--status-operational) } .status-operational .service-name::before { background-color: var(--color-operational) } .status-major-outage { color: var(--color-major-outage) } .status-major-outage .service-name::before { background-color: var(--color-major-outage) } .status-partial-outage { color: var(--color-partial-outage) } .status-partial-outage .service-name::before { background-color: var(--color-partial-outage) } .status-degraded-performance { color: var(--color-degraded-performance) } .status-degraded-performance .service-name::before { background-color: var(--color-degraded-performance) } .status-delayed { color: var(--color-delayed) } .status-delayed .service-name::before { background-color: var(--color-delayed) } .status-down { color: var(--color-down) } .status-down .service-name::before { background-color: var(--color-down) } .status-maintenance { color: var(--color-maintenance) } .status-maintenance .service-name::before { background-color: var(--color-maintenance) } .status-issue { color: var(--color-issue) } .status-issue .service-name::before { background-color: var(--color-issue) } .status-unauthorized { color: var(--color-unauthorized) } .status-unauthorized .service-name::before { background-color: var(--color-unauthorized) } .status-unknown-status { color: var(--color-unknown) } .status-unknown-status .service-name::before { background-color: var(--color-unknown) } .bbss-inline-status-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; width: 100% } .bbss-inline-meta { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--service-name) } .bbss-inline-item { display: inline-flex; align-items: center; white-space: nowrap } .bbss-inline-item strong { margin-right: 4px } .bbss-source-tag { opacity: .8 } .bbss-inline-note { display: inline-flex; align-items: center; color: var(--service-name); white-space: nowrap } .bbss-inline-note::before { display: inline-block; margin-right: 8px; flex-shrink: 0; background-color: var(--color-operational, #22cc44) } .bbss-inline-note.status-operational::before { background-color: var(--color-operational) } .bbss-inline-note.status-major-outage::before { background-color: var(--color-major-outage) } .bbss-inline-note.status-partial-outage::before { background-color: var(--color-partial-outage) } .bbss-inline-note.status-degraded-performance::before { background-color: var(--color-degraded-performance) } .bbss-inline-note.status-delayed::before { background-color: var(--color-delayed) } .bbss-inline-note.status-down::before { background-color: var(--color-down) } .bbss-inline-note.status-maintenance::before { background-color: var(--color-maintenance) } .bbss-inline-note.status-issue::before { background-color: var(--color-issue) } .bbss-inline-note.status-unauthorized::before { background-color: var(--color-unauthorized) } .bbss-inline-note.status-unknown-status::before { background-color: var(--color-unknown) } .bbss-inline-note.mini::before { width: 16px; height: 16px; margin-top: -2px; margin-right: 6px } .bbss-inline-meta-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--service-name); flex: 1 1 auto } .bbss-inline-meta-right { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex: 0 0 auto; margin-left: auto } .bbss-inline-generated { display: block; margin: 4px 0 } button.bbss-info-button { margin-left: auto; flex-shrink: 0; border: none; background: transparent; color: var(--color-unknown) !important; width: 24px; height: 24px; border-radius: 50% !important; cursor: pointer; font-size: 14px; line-height: 1em !important } button.bbss-info-button:hover, button.bbss-info-button:focus, button.bbss-info-button:active { background: transparent; color: #1d1d1f !important } .theme-dark button.bbss-info-button:hover, .theme-dark button.bbss-info-button:focus, .theme-dark button.bbss-info-button:active { color: #f5f5f7 !important } .bbss-issue-popup { position: absolute; right: 0; top: calc(100% + 0px); z-index: 99999; box-sizing: border-box; width: max-content; min-width: 220px; max-width: min(300px, calc(100vw - 24px)); background: #e5e5e8; color: #333; border-radius: 10px; padding: 14px 14px 12px 14px; font-family: "BB Text", sans-serif; overflow-wrap: anywhere } .theme-dark .bbss-issue-popup { background: #454548; color: #eee } .bbss-issue-popup::after { content: ''; position: absolute; top: -8px; right: 10px; left: auto; transform: none; border-width: 0 10px 10px 10px; border-style: solid; border-color: transparent transparent #e5e5e8 transparent } .theme-dark .bbss-issue-popup::after { border-color: transparent transparent #454548 transparent } .bbss-issue-popup a:focus-visible, .bbss-issue-popup button:focus-visible, .bbss-issue-popup span:focus-visible { outline: 2px solid #0070ee; outline-offset: 2px } .bbss-issue-popup.bbss-popup-bottom, .bbss-issue-popup.bbss-popup-top { transform: none } .bbss-info-button:focus-visible { outline: 2px solid #0070ee; outline-offset: 0 } .bbss-popup-title { margin-bottom: 8px; font-size: 14px; font-weight: 600; letter-spacing: -.016em; line-height: 1.428572 } .bbss-popup-row { display: flex; gap: 6px; margin-bottom: 3px; font-size: 12px; letter-spacing: -.01em; line-height: 1.33334 } .bbss-popup-label { font-weight: 600; opacity: .8 } .bbss-popup-value { opacity: .9; word-break: break-word } #system-status-container a:focus-visible { outline: 2px solid #0070ee; outline-offset: 1px } @media only screen and (max-height:750px) and (max-width:1024px) { .loading-container { padding: 40px 0 80px } } @media (max-width:880px) { .bbss-issue-popup { position: absolute; right: 8px } .bbss-issue-popup.bbss-popup-bottom { transform: translateX(8px) } .status-item { display: block; padding: 8px 40px 8px 32px } .service-name, .service-status, .service-description { display: inline; width: auto } .service-description { display: none } .service-name::before { position: absolute; left: 8px; top: 50%; margin-top: -1px; transform: translateY(-50%); border-radius: 50% } .service-name::after { content: " - " } .service-status::after { display: none } button.bbss-info-button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%) } }