.spinner { width: 36px; height: 0; padding-bottom: 36px; border-radius: 50%; position: relative; transform: translate(0%, -50%) rotate(0deg); will-change: transform; animation: spin 1600ms linear normal infinite; background-color: transparent; clip: rect(0, 18px, 36px, 0); } .spinner::before, .spinner::after { content: ' '; height: 100%; width: 100%; border: 4px solid #fff; border-radius: 50%; clip: rect(0, 18px, 36px, 0); left: 0; position: absolute; top: 0; box-sizing: border-box; animation: shape-shift-before 1600ms linear normal infinite; } .spinner::after { animation: shape-shift-after 1600ms linear normal infinite; } @-moz-keyframes spin { 0% { transform: translate(0%, -50%) rotate(0deg); clip: rect(0, 18px, 36px, 0); } 25% { transform: translate(0%, -50%) rotate(90deg); clip: rect(0, 18px, 36px, 0); } 25.01% { transform: translate(0%, -50%) rotate(90deg); clip: rect(auto, auto, auto, auto); } 50% { transform: translate(0%, -50%) rotate(180deg); clip: rect(auto, auto, auto, auto); } 100% { transform: translate(0%, -50%) rotate(730deg); clip: rect(0, 18px, 36px, 0); } } @-webkit-keyframes spin { 0% { transform: translate(0%, -50%) rotate(0deg); clip: rect(0, 18px, 36px, 0); } 25% { transform: translate(0%, -50%) rotate(90deg); clip: rect(0, 18px, 36px, 0); } 25.01% { transform: translate(0%, -50%) rotate(90deg); clip: rect(auto, auto, auto, auto); } 50% { transform: translate(0%, -50%) rotate(180deg); clip: rect(auto, auto, auto, auto); } 100% { transform: translate(0%, -50%) rotate(730deg); clip: rect(0, 18px, 36px, 0); } } @-o-keyframes spin { 0% { transform: translate(0%, -50%) rotate(0deg); clip: rect(0, 18px, 36px, 0); } 25% { transform: translate(0%, -50%) rotate(90deg); clip: rect(0, 18px, 36px, 0); } 25.01% { transform: translate(0%, -50%) rotate(90deg); clip: rect(auto, auto, auto, auto); } 50% { transform: translate(0%, -50%) rotate(180deg); clip: rect(auto, auto, auto, auto); } 100% { transform: translate(0%, -50%) rotate(730deg); clip: rect(0, 18px, 36px, 0); } } @keyframes spin { 0% { transform: translate(0%, -50%) rotate(0deg); clip: rect(0, 18px, 36px, 0); } 25% { transform: translate(0%, -50%) rotate(90deg); clip: rect(0, 18px, 36px, 0); } 25.01% { transform: translate(0%, -50%) rotate(90deg); clip: rect(auto, auto, auto, auto); } 50% { transform: translate(0%, -50%) rotate(180deg); clip: rect(auto, auto, auto, auto); } 100% { transform: translate(0%, -50%) rotate(730deg); clip: rect(0, 18px, 36px, 0); } } @-moz-keyframes shape-shift-before { 0% { transform: rotate(180deg); } 25% { transform: rotate(360deg); } 50% { transform: rotate(360deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(180deg); } } @-webkit-keyframes shape-shift-before { 0% { transform: rotate(180deg); } 25% { transform: rotate(360deg); } 50% { transform: rotate(360deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(180deg); } } @-o-keyframes shape-shift-before { 0% { transform: rotate(180deg); } 25% { transform: rotate(360deg); } 50% { transform: rotate(360deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(180deg); } } @keyframes shape-shift-before { 0% { transform: rotate(180deg); } 25% { transform: rotate(360deg); } 50% { transform: rotate(360deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(180deg); } } @-moz-keyframes shape-shift-after { 0% { transform: rotate(180deg); } 25% { transform: rotate(360deg); } 50% { transform: rotate(540deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(180deg); } } @-webkit-keyframes shape-shift-after { 0% { transform: rotate(180deg); } 25% { transform: rotate(360deg); } 50% { transform: rotate(540deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(180deg); } } @-o-keyframes shape-shift-after { 0% { transform: rotate(180deg); } 25% { transform: rotate(360deg); } 50% { transform: rotate(540deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(180deg); } } @keyframes shape-shift-after { 0% { transform: rotate(180deg); } 25% { transform: rotate(360deg); } 50% { transform: rotate(540deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(180deg); } } :root { --filter: none; } html, body { padding: 0; margin: 0; overflow: hidden; width: 100%; height: 100%; font-family: Arial, Helvetica, 'Lucida Grande', 'DejaVu Sans', Verdana, sans-serif; font-size: 16px; color: white; } #screen { border: 0px none; background-color: #00acec; height: 100%; width: 100%; outline: 0px solid transparent; cursor: default; } #logo-white, #logo-black { display: none; } #splash { z-index: 250; height: 100%; width: 100%; top: 0px; bottom: 0px; position: absolute; display: table; } #brand { display: table; right: 0px; bottom: 0px; position: absolute; width: 100px; height: 28px; margin: 18px; z-index: 251; background-position: top left; background-size: 100px 28px; background-repeat: no-repeat; } .leaflet-layer, .leaflet-control-zoom-in, .leaflet-control-zoom-out, .leaflet-control-attribution { -webkit-filter: none; filter: none } [leaflet-dark-mode] .leaflet-layer, [leaflet-dark-mode] .leaflet-control-zoom-in, [leaflet-dark-mode] .leaflet-control-zoom-out, [leaflet-dark-mode] .leaflet-control-attribution { -webkit-filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%); filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%); } [leaflet-light-mode] .leaflet-layer, [leaflet-light-mode] .leaflet-control-zoom-in, [leaflet-light-mode] .leaflet-control-zoom-out, [leaflet-light-mode] .leaflet-control-attribution { -webkit-filter: none!important; filter: none!important; } @media (prefers-color-scheme: dark) { .leaflet-layer, .leaflet-control-zoom-in, .leaflet-control-zoom-out, .leaflet-control-attribution { -webkit-filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%); filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%); } } :root { --APPStyle: BJE; } @media (prefers-color-scheme: dark) { canvas { background-color: #0f0f0f; } #splash { background-color: #0f0f0f; } #launch { display: none; } #launch-dark { display: block; } } #splash { background-color: #00acec; } #qrcode-as { background-image: url(../qrcodes/bje-apple-qrcode.png) } #qrcode-ps { background-image: url(../qrcodes/bje-playstore-qrcode.png) } .link-abb { display: none; } .link-bje { display: block; } .launch { background-repeat: no-repeat; background-position-x: center; background-size: contain; position: relative; } #launch { display: block; background-image: url(../splash-bje.svg); } #launch-dark { display: none; background-image: url(../splash-bje-dark.svg); } .spinner-container { position: absolute; left: 50%; bottom: 168px; transform: translateX(-50%); }