bbpro/dist/image.a05aaebc.css

BrowserBox - remote browser isolation tool

.bang-el:not(.bang-styled):not([incremental-load]) {
  visibility: hidden;
}

:not(:defined) {
  visibility: hidden;
}

:not(script, noscript, style, datalist, option, head, head *, select, meter, input, label), input:not([type="radio"], input[type="checkbox"], input[type="range"]) {
  all: unset;
}

p, h1, h2, h3, h4, h5, h6, blockquote, div, article, section, nav, header, main, aside, footer, br, hr {
  display: block;
}

p {
  padding: .5em 0;
}

:root, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

form fieldset {
  flex-direction: column;
  display: flex;
}

:root {
  --special: pink;
  --special: peachpuff;
  --special: lavendar;
  --special: deepskyblue;
  --special: gold;
  --special: turquoise;
  --special: darkturquoise;
  --special: lightsteelblue;
  --special: mediumaquamarine;
  --special: mediumturquoise;
  --special: palegreen;
  --special: paleturquoise;
  --special: thistle;
  --special: tomato;
  --special: whitesmoke;
  --special: skyblue;
  --special-contrast: dodgerblue;
  --neutral: whitesmoke;
  --light-contrast: whitesmoke;
  --light-super-contrast: lavender;
  --light-ultra-contrast: silver;
  --dark-contrast: #28292a;
  --dark-super-contrast: #38393a;
  --dark-ultra-contrast: #464848;
  --contrast: var(--light-contrast);
  --super-contrast: var(--light-super-contrast);
  --ultra-contrast: var(--light-ultra-contrast);
  --light-text: var(--dark-super-contrast);
  --inactive-bg: silver;
  --inactive-fg: darkslategray;
  --ft: 16px;
  --lh: 1.618;
  --dark: #15141a;
  --light: #fbfbfe;
  --bg: var(--light);
  --fg: var(--dark);
  --fg-pure: black;
  --bg-pure: white;
  --nav-loading-gap: 2px;
  --mid: gray;
  accent-color: var(--special);
  font: normal normal 400 var(--ft) / var(--lh) system-ui;
  color: var(--fg);
  background: var(--bg);
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --special: teal;
    --special: darkcyan;
    --special: steelblue;
    --bg: var(--dark);
    --fg: var(--light);
    --special: royalblue;
    --light-text: var(--light-super-contrast);
    --contrast: var(--dark-contrast);
    --super-contrast: var(--dark-super-contrast);
    --ultra-contrast: var(--dark-ultra-contrast);
    --fg-pure: white;
    --bg-pure: black;
  }

  span.tab-selector bb-favicon {
    filter: invert();
  }

  aside.modals legend img, button img {
    filter: invert();
  }
}

button {
  cursor: default;
  box-sizing: border-box;
  text-align: center;
  background: none;
  border: thin solid #0000;
  margin: 0 .5em;
  padding: 0;
  transition: all .1s;
}

nav button {
  aspect-ratio: 1;
  border-radius: 100%;
}

button:hover:not([disabled]) {
  background: radial-gradient(var(--contrast) 90%, var(--super-contrast));
}

input {
  padding: 1px .25rem;
  background: var(--super-contrast) !important;
}

a, a:link, a:visited {
  cursor: pointer;
  color: var(--special-contrast);
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  color: var(--fg);
  accent-color: var(--fg);
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
  width: 24px;
  height: 24px;
  margin-left: .4em;
}

form.url input[type="search"] {
  border-radius: 2em;
  padding: 0 1em;
}

[hidden] {
  display: none;
}

[disabled] {
  cursor: not-allowed;
  background: var(--contrast);
  filter: grayscale();
  opacity: .6;
}

input:focus {
  background: var(--contrast);
}

button, bb-select-tab {
  box-sizing: border-box;
  border: thin solid #0000;
}

:is(button, bb-select-tab):active:not([disabled]) {
  background: var(--special);
}

:is(button, bb-select-tab):focus:not(:active) {
  border: thin dotted var(--special);
}

a:hover {
  text-decoration: underline;
}

button:not(:active, :hover, :focus) {
  opacity: .618;
}

::selection {
  background-color: var(--special);
}

:root, body, main, bb-view {
  height: 100%;
  max-height: 100%;
}

:root {
  overscroll-behavior: none;
  display: block;
  position: relative;
  overflow: hidden;
}

body {
  display: flex;
}

iframe {
  display: none;
}

hr {
  border-bottom: thin solid var(--ultra-contrast);
}

main, bb-view {
  width: 100%;
  position: relative;
}

main {
  grid-template: "info info info info info" 1rem
                 "tabs tabs tabs tabs tabs" 2rem
                 "ctrl ctrl ctrl ctrl ctrl" 2rem
                 "screen screen screen screen screen" minmax(0, 1fr)
                 / auto 1fr auto auto auto;
  display: grid;
}

main.no-chrome {
  grid-template: "screen screen screen screen screen" 1fr
  / auto 1fr auto auto auto;
  width: 100%;
  height: 100%;
  display: grid;
  position: relative;
}

main.no-chrome :is(header, nav) {
  display: none;
}

bb-top-bar {
  grid-area: info;
  max-height: 1rem;
}

header.topbar {
  color: #555;
  max-height: 100%;
  font-size: smaller;
}

header.topbar span {
  vertical-align: super;
  font-size: .8rem;
  line-height: 1.3;
}

header.topbar span.network-status.offline {
  color: red;
}

header.topbar span.connection-status {
  color: orange;
}

header.topbar span.webrtc-status {
  color: #1e90ff;
  opacity: .8;
}

header.topbar span.audio-status {
  color: purple;
  opacity: .8;
}

bb-tabs {
  grid-area: tabs;
  max-width: 100%;
  position: relative;
}

nav.targets {
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow: scroll hidden;
}

nav.targets::-webkit-scrollbar {
  display: none;
}

nav.targets {
  white-space: nowrap;
  width: auto;
  height: 100%;
  max-height: 100%;
  display: flex;
}

nav.targets bb-select-tab {
  border-top: thin solid var(--ultra-contrast);
  border-right: thin solid var(--ultra-contrast);
  background: var(--contrast);
  border-top-left-radius: .25em;
  border-top-right-radius: .25em;
  width: min(30%, 300px);
  min-width: 125px;
  padding-left: .5em;
  overflow: hidden;
}

nav.targets bb-select-tab.active {
  background: var(--super-contrast);
}

nav.targets span:not(.new) {
  padding-left: .25rem;
}

nav.targets span.new button {
  box-sizing: border-box;
  width: 2rem;
}

span.tab-selector button.close {
  opacity: .618;
  background: none;
  border-color: #0000;
}

span.tab-selector button.close:is(:active, :hover, :focus) {
  opacity: 1;
}

span.tab-selector {
  text-overflow: ellipsis;
  align-items: center;
  width: 100%;
  height: 100%;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

span.tab-selector:not(.active) {
  opacity: .618;
}

span.tab-selector:not(.active):hover {
  opacity: .85;
}

span.tab-selector a {
  text-overflow: ellipsis;
  flex-grow: 1;
  max-width: 100%;
  overflow: hidden;
}

bb-favicon, img.favicon {
  vertical-align: middle;
  width: 1.25rem;
}

button img {
  pointer-events: none;
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(.618);
}

bb-favicon {
  align-items: center;
  height: 100%;
  margin-right: .25rem;
  display: flex;
}

bb-omni-box {
  grid-area: omni;
}

nav.history {
  grid-area: history;
  width: calc(2px + 4rem);
  padding-left: 2px;
}

nav.url {
  align-items: center;
  height: 100%;
  display: flex;
}

nav.url form {
  width: 100%;
  display: flex;
}

nav.url form input:not(:focus) {
  opacity: .618;
}

nav.url form input {
  flex-grow: 1;
}

nav.url form * {
  margin: 0;
}

bb-resize-button {
  grid-area: reset;
}

bb-settings-button {
  grid-area: menu;
  height: 100%;
  padding-right: 1px;
}

nav.viewport-reset-button {
  width: 2rem;
  height: 100%;
}

nav.settings-button, nav.sidebar-menu-button {
  grid-area: menu;
  width: 2rem;
  height: 100%;
}

article.tab-viewport {
  flex-direction: column;
  grid-area: screen;
  display: flex;
  position: relative;
}

article.tab-viewport canvas {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  height: 100%;
}

article.tab-viewport select {
  opacity: .75;
  z-index: 1000;
  text-align: center;
  min-width: 10em;
  padding: .5em;
  font-size: xx-large;
  position: absolute;
  top: 19.1%;
  left: 50%;
  transform: translate(-50%, -50%);
}

article.tab-viewport select:not(.open) {
  display: none;
}

bb-loading-indicator, aside.loading-indicator {
  max-height: var(--nav-loading-gap);
  height: var(--nav-loading-gap);
  width: 100%;
  position: absolute;
  top: 0;
}

bb-loading-indicator {
  transform: translate(0, -150%);
}

aside.loading-indicator {
  overflow: hidden;
}

aside.loading-indicator meter {
  height: var(--nav-loading-gap);
  vertical-align: top;
  background: none;
  width: 105%;
  height: 30px;
  position: absolute;
  top: -14px;
  left: -2.5%;
}

aside.loading-indicator meter::-webkit-meter-bar {
  background: none;
}

aside.loading-indicator meter::-webkit-meter-optimum-value {
  background: var(--special-contrast);
}

aside.loading-indicator meter::-moz-meter-optimum-value {
  background: var(--special-contrast);
}

nav.keyinput {
  position: absolute;
  top: 0;
  right: 0;
}

nav.sidebar-menu {
  display: none;
}

nav :is(form, button) {
  height: 100%;
}

nav button {
  margin: 0;
}

bb-ctrl {
  grid-area: ctrl;
}

div.ctrl {
  grid-template-columns: auto 1fr 1fr auto auto;
  grid-template-areas: "history omni omni reset menu";
  grid-template-rows: calc(2rem - var(--nav-loading-gap));
  display: grid;
}

bb-context-menu {
  visibility: hidden;
  z-index: 10;
  background: var(--bg);
  color: var(--fg);
  -webkit-user-select: none;
  user-select: none;
  box-shadow: 1px 1px 1px var(--fg);
  -webkit-touch-callout: none;
  flex-direction: column;
  padding: .25rem 0;
  display: flex;
  position: fixed;
}

aside.context-menu menu {
  flex-direction: column;
  display: flex;
}

aside.context-menu li {
  cursor: default;
  padding: 0 1.5rem;
  font-size: smaller;
}

aside.context-menu li:hover {
  background-color: var(--ultra-contrast);
}

aside.context-menu li:active {
  background-color: var(--special);
}

aside.context-menu #load-test {
  display: contents;
}

bb-modals, aside.modals, ::backdrop, dialog::backdrop {
  z-index: 2147483647;
  background: #1e1e1e80;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

aside.modals :is(article, dialog) {
  box-sizing: border-box;
  box-shadow: 1px 1px 1px var(--contrast);
  background: var(--bg);
  flex-direction: row;
  justify-content: space-around;
  min-width: max(30%, 300px);
  max-width: min(600px, 61.8%);
  min-height: 130px;
  max-height: min(61.8%, 400px);
  margin: 0 auto;
  padding: .81em .81em .4em 1.31em;
  display: flex;
  position: relative;
  overflow: hidden auto;
}

aside.modals :is(article, dialog):not(.notice) {
  word-break: break-all;
}

aside.modals p:last-of-type {
  justify-content: end;
  display: flex;
}

aside.modals :is(a, button) {
  margin: 0 2px;
  padding: .25em .81em;
}

bb-modals:not(.open), aside.modals :is(article, dialog):not(.open) {
  display: none;
}

aside.modals :is(article, dialog) :is(form, fieldset) {
  border: 0;
  width: 100%;
  height: 100%;
  display: flex;
}

aside.modals :is(article, dialog) fieldset {
  flex-direction: column;
  justify-content: space-between;
}

aside.modals legend {
  color: var(--contrast);
  width: 100%;
  margin-bottom: 1em;
}

aside.modals legend h1 {
  color: var(--fg);
  filter: contrast(.4);
  align-items: center;
  display: flex;
}

aside.modals legend h1 img {
  margin-top: -2px;
  padding-right: .5em;
}

aside.modals legend i {
  color: var(--mid);
  margin-top: 1.5em;
  font-size: smaller;
  font-style: italic;
  display: block;
}

aside.modals h1 {
  color: var(--light-text);
}

aside.modals:not(.active), aside.modals > article:not(.open) {
  display: none;
}

aside.modals :is(textarea, input:not([type="checkbox"], [type="radio"], [type="range"]), select) {
  box-sizing: border-box;
  width: 100%;
}

aside.modals input[type="range"].radio {
  width: 2rem;
}

aside.modals form p:last-of-type {
  text-align: right;
}

nav.keyinput {
  opacity: 0;
  pointer-events: none;
}

span.tab-selector button.close {
  aspect-ratio: 1;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 1.2rem;
  margin: .5rem;
  padding: 0;
}

span.tab-selector button.close img {
  transform: scale(.7);
}

.switch {
  width: 60px;
  height: 34px;
  display: inline-block;
  position: relative;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  cursor: pointer;
  background-color: #ccc;
  transition: all .2s;
  position: absolute;
  inset: 0;
}

.slider:before {
  content: "";
  background-color: #fff;
  width: 26px;
  height: 26px;
  transition: all .2s;
  position: absolute;
  bottom: 4px;
  left: 4px;
}

input:checked + .slider {
  background-color: #2196f3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

#debugBox {
  display: none;
}



/*# sourceMappingURL=image.a05aaebc.css.map */