packages/annotated/shell/src/index.css [1:130]:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

html,
body,
#app,
.full {
  height: 100%;
  width: 100%;
  margin: 0;
}

/* for use with react-frame-component */
.frame-root,
.frame-content {
  height: 100%;
  width: 100%;
  margin: 0;
}

.mosaic-window-body {
  padding: 5px;
}

.mosaic {
  position: relative;
}

.mosaic-w-navbar {
  height: calc(100% - 50px) !important;
}

.pop {
  animation: pop 0.2s linear 1;
  will-change: transform;
}
@keyframes pop {
  50% {
    transform: scale(1.15);
  }
}

.grid-background {
  /* modified from: https://stackoverflow.com/a/25709375 */
  background: linear-gradient(
      -90deg,
      rgba(92, 112, 128, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(rgba(92, 112, 128, 0.05) 1px, transparent 1px),
    linear-gradient(-90deg, rgba(92, 112, 128, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(92, 112, 128, 0.05) 1px, transparent 1px),
    linear-gradient(
      transparent 3px,
      #f5f8fa 3px,
      #f5f8fa 78px,
      transparent 78px
    ),
    linear-gradient(-90deg, rgba(92, 112, 128, 0.1) 1px, transparent 1px),
    linear-gradient(
      -90deg,
      transparent 3px,
      #f5f8fa 3px,
      #f5f8fa 78px,
      transparent 78px
    ),
    linear-gradient(rgba(92, 112, 128, 0.1) 1px, transparent 1px), #f5f8fa !important;

  background-size: 4px 4px, 4px 4px, 80px 80px, 80px 80px, 80px 80px, 80px 80px,
    80px 80px, 80px 80px !important;
  background-position-x: 5px !important;
  background-position-y: 5px !important;
}

.loading-placeholder {
  background-color: rgba(92, 112, 128, 0.3);
  border: 1px solid rgba(92, 112, 128, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  font-weight: bold;
}

.debug-panel .bp3-tabs,
.debug-panel .bp3-tab-panel {
  height: 100%;
}

/** vvvv Custom styles for MovableRect */
div.movable-rect-frame div.rect {
  border-width: 2px;
  opacity: 1;
  background-color: rgba(235, 86, 72, 0.3);
  border-style: dashed;
}

div.movable-rect-frame.keyframe div.rect {
  /* border: 2px solid cyan; */
  border-style: solid;
}

div.movable-rect-frame.selected div.rect {
  /* opacity: 1; */
  background-color: transparent;
  border-color: cyan;
}

div.movable-rect-frame.selected div.square {
  border: 2px solid cyan;
}

div.movable-rect-frame.immovable .square {
  border: 2px solid transparent;
  background: none;
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -



packages/annotation-toolkit/src/index.css [1:130]:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

html,
body,
#app,
.full {
  height: 100%;
  width: 100%;
  margin: 0;
}

/* for use with react-frame-component */
.frame-root,
.frame-content {
  height: 100%;
  width: 100%;
  margin: 0;
}

.mosaic-window-body {
  padding: 5px;
}

.mosaic {
  position: relative;
}

.mosaic-w-navbar {
  height: calc(100% - 50px) !important;
}

.pop {
  animation: pop 0.2s linear 1;
  will-change: transform;
}
@keyframes pop {
  50% {
    transform: scale(1.15);
  }
}

.grid-background {
  /* modified from: https://stackoverflow.com/a/25709375 */
  background: linear-gradient(
      -90deg,
      rgba(92, 112, 128, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(rgba(92, 112, 128, 0.05) 1px, transparent 1px),
    linear-gradient(-90deg, rgba(92, 112, 128, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(92, 112, 128, 0.05) 1px, transparent 1px),
    linear-gradient(
      transparent 3px,
      #f5f8fa 3px,
      #f5f8fa 78px,
      transparent 78px
    ),
    linear-gradient(-90deg, rgba(92, 112, 128, 0.1) 1px, transparent 1px),
    linear-gradient(
      -90deg,
      transparent 3px,
      #f5f8fa 3px,
      #f5f8fa 78px,
      transparent 78px
    ),
    linear-gradient(rgba(92, 112, 128, 0.1) 1px, transparent 1px), #f5f8fa !important;

  background-size: 4px 4px, 4px 4px, 80px 80px, 80px 80px, 80px 80px, 80px 80px,
    80px 80px, 80px 80px !important;
  background-position-x: 5px !important;
  background-position-y: 5px !important;
}

.loading-placeholder {
  background-color: rgba(92, 112, 128, 0.3);
  border: 1px solid rgba(92, 112, 128, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  font-weight: bold;
}

.debug-panel .bp3-tabs,
.debug-panel .bp3-tab-panel {
  height: 100%;
}

/** vvvv Custom styles for MovableRect */
div.movable-rect-frame div.rect {
  border-width: 2px;
  opacity: 1;
  background-color: rgba(235, 86, 72, 0.3);
  border-style: dashed;
}

div.movable-rect-frame.keyframe div.rect {
  /* border: 2px solid cyan; */
  border-style: solid;
}

div.movable-rect-frame.selected div.rect {
  /* opacity: 1; */
  background-color: transparent;
  border-color: cyan;
}

div.movable-rect-frame.selected div.square {
  border: 2px solid cyan;
}

div.movable-rect-frame.immovable .square {
  border: 2px solid transparent;
  background: none;
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -