1 files changed, 147 insertions, 0 deletions
diff --git a/root/static/style/browser/text$x-scss.scss b/root/static/style/browser/text$x-scss.scss
new file mode 100644
index 0000000..89628fd
--- /dev/null
+++ b/root/static/style/browser/text$x-scss.scss
@@ -0,0 +1,147 @@
+.browser {
+  display: flex;
+  flex: 1;
+
+  border-top: 0.2rem solid $gray-bright;
+}
+
+.view {
+  display: flex;
+  flex-direction: column;
+
+  flex: 1 0 auto;
+  min-width: 0;
+  max-width: calc(100vw - 1rem);
+
+  &.inspector {
+    top: 0;
+    position: sticky;
+    max-height: calc(100vh - 3rem);
+    color: #c5c8c6;
+
+    @include left-border;
+    border-color: $gray-dark;
+    background: $gray-dark;
+
+    nav {
+      background: inherit;
+    }
+
+    .subnav {
+      display: flex;
+      flex: 0;
+      background: $gray-darker;
+      border-bottom: 2px solid $gray-dark;
+      padding: 0.5em;
+    }
+
+    .content {
+      margin: 0;
+      padding: 0;
+      display: flex;
+      align-self: stretch;
+      background: $gray-darker;
+
+      > * {
+        display: block;
+        margin: 0;
+        padding: 1em;
+        border-radius: 0;
+        border: 0;
+        flex: 1;
+      }
+    }
+
+    .children {
+      margin: 0;
+      padding: 1em;
+
+      align-self: stretch;
+      background: $gray-darker;
+    }
+  }
+
+  nav {
+    position: sticky;
+    top: 0;
+
+    @media print {
+      position: relative;
+      display: none;
+    }
+
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background: $gray-bright;
+    z-index: 1000;
+
+    > span:first-of-type {
+      flex: 1 0 auto;
+    }
+
+    > * {
+      margin: 1em;
+      white-space: nowrap;
+    }
+
+    &.thin > * {
+      margin: 0.5em 1em;
+    }
+
+    > .inspect-btn {
+      @include media-small() { display: none; }
+    }
+
+    .tight {
+      margin-left: 0;
+    }
+  }
+
+  .error-wrap {
+    flex: 0 0 auto;
+    padding: 1em 2em;
+    overflow: hidden;
+
+    color: $gray-darker;
+    background: $gray-fail;
+
+    &.empty {
+      display: none;
+    }
+
+    > span {
+      display: inline-block;
+      margin-bottom: 0.5em;
+
+      font-weight: bold;
+      color: #f00;
+    }
+
+    > pre {
+      margin: 0;
+    }
+  }
+
+  .content {
+    flex: 1 0 auto;
+    overflow: auto;
+    padding: 1em 2em;
+    margin: 0 1em;
+    align-self: flex-start;
+    min-width: 30vw;
+    background: $white;
+
+    position: relative;
+  }
+}
+
+.content {
+  opacity: 1;
+  transition: opacity 150ms;
+
+  body.loading & {
+    opacity: 0;
+  }
+}