sqlight: sqlite playground

assets/module.css/button_set.module.css

@@ -0,0 +1,135 @@
+$width: 1px;
+$radius: 4px;
+
+.-buttonReset {
+  color: var(--font-color);
+  border: none;
+  background: inherit;
+  background-color: transparent; /* IE 11 */
+  padding: 0;
+  font: inherit;
+  line-height: inherit;
+  text-align: inherit;
+}
+
+.set {
+  display: flex;
+}
+
+.-border {
+  border-width: $width 0;
+  border-style: solid;
+
+  &:first-child {
+    border-top-left-radius: $radius;
+    border-bottom-left-radius: $radius;
+    border-left-width: $width;
+  }
+
+  &:last-child {
+    border-top-right-radius: $radius;
+    border-bottom-right-radius: $radius;
+    border-right-width: $width;
+  }
+}
+
+.-button {
+  --button-gap: 0.5em;
+  --button-side-padding: 1.25em;
+  --button-height: 3em;
+  --button-side-icon-nudge: 0.25em;
+
+  composes: -buttonReset;
+  display: grid;
+  grid-auto-flow: column;
+  gap: var(--button-gap);
+  align-content: center;
+  align-items: center;
+  padding: 0 var(--button-side-padding);
+  height: var(--button-height);
+  font-weight: 600;
+  text-decoration: none;
+  text-transform: uppercase;
+  white-space: nowrap;
+
+  &:enabled {
+    cursor: pointer;
+  }
+}
+
+.small {
+  --button-gap: 0.25em;
+  --button-side-padding: 0.75em;
+  --button-height: 2.5em;
+  --button-side-icon-nudge: 0.125em;
+}
+
+.primary {
+  composes: -border -button;
+  background-color: var(--button-primary-bg-color);
+  border-color: var(--button-primary-border-color);
+  color: var(--button-primary-color);
+  font-weight: 700;
+
+  &:disabled {
+    background-color: var(--button-primary-bg-color-light);
+    border-color: var(--button-primary-border-color-light);
+  }
+
+  &:hover:enabled {
+    background-color: var(--button-primary-border-color);
+  }
+
+  &:active:enabled {
+    box-shadow: inset 0 0 5px var(--button-primary-active-color);
+  }
+}
+
+.secondary {
+  composes: -border -button;
+  background: var(--button-secondary-bg-color);
+  border-color: var(--button-secondary-border-color);
+  color: var(--button-secondary-color);
+
+  &:disabled {
+    background: inherit;
+    background-color: var(--button-secondary-bg-color-light);
+    border-color: var(--button-secondary-border-color-light);
+    color: var(--button-secondary-color-light);
+  }
+
+  &:visited {
+    color: var(--button-secondary-color);
+  }
+
+  &:hover:enabled {
+    background: inherit;
+    background-color: var(--button-secondary-border-color);
+  }
+
+  &:active:enabled {
+    box-shadow: inset 0 0 5px var(--button-secondary-active-color);
+  }
+}
+
+.iconLeft {
+  transform: translate(calc(-1 * var(--button-side-icon-nudge)), 0);
+}
+
+.iconRight {
+  transform: translate(var(--button-side-icon-nudge), 0);
+}
+
+.rule {
+  composes: -border;
+  background-color: var(--button-secondary-border-color);
+  width: 1px;
+  border-color: var(--button-secondary-border-color);
+}
+
+.icon {
+  composes: secondary;
+  padding: 0;
+  aspect-ratio: 1/1;
+  justify-items: center;
+}

assets/module.css/config_element.module.css

@@ -0,0 +1,75 @@
+.container {
+  display: flex;
+  align-items: center;
+}
+
+.name {
+  flex: 1;
+}
+
+.notDefault {
+  composes: name;
+  color: var(--header-tint);
+  font-weight: 600;
+}
+
+.value {
+  flex: 1;
+}
+
+.select {
+  width: 100%;
+  background: var(--button-secondary-bg-color);
+  border-color: var(--button-secondary-border-color);
+  color: var(--button-secondary-color);
+
+  & option {
+    background-color: var(--button-secondary-bg-color-top);
+    border-color: var(--button-secondary-border-color);
+    color: var(--button-secondary-color);
+  }
+}
+
+.toggle {
+  display: flex;
+
+  & label {
+    $border: 1px solid #bbb;
+
+    flex: 1;
+    cursor: pointer;
+    border: $border;
+    border-right-width: 0;
+    border-top-left-radius: var(--header-border-radius);
+    border-bottom-left-radius: var(--header-border-radius);
+    padding: 0 1em;
+    color: #777;
+    font-weight: 600;
+    text-align: center;
+    text-transform: uppercase;
+
+    & ~ label {
+      border-left: $border;
+      border-right-width: 1px;
+      border-radius: 0 var(--header-border-radius) var(--header-border-radius) 0;
+    }
+
+    &:hover {
+      background: hsl(208deg 100% 43% / 10%);
+    }
+  }
+
+  & input {
+    display: none;
+
+    &:checked + label {
+      border-color: var(--header-tint);
+      background: var(--header-tint);
+      color: #fff;
+
+      & ~ label {
+        border-left-width: 0;
+      }
+    }
+  }
+}

assets/module.css/editor.module.css

@@ -0,0 +1,42 @@
+.-autoSize {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+}
+
+.-bodyMonospace {
+  font-size: inherit;
+  line-height: 1.25;
+
+  /* http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/
+   * ACE uses Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
+   */
+  font-family: 'Source Code Pro', monospace;
+  font-optical-sizing: auto;
+}
+
+.container {
+  composes: -autoSize;
+  position: relative;
+}
+
+.-advanced {
+  composes: -bodyMonospace -autoSize;
+  position: absolute;
+}
+
+.ace {
+  composes: -advanced;
+}
+
+.monaco {
+  composes: -advanced;
+}
+
+.simple {
+  composes: -advanced;
+  border: none;
+  color: inherit;
+  background-color: inherit;
+}

assets/module.css/header.module.css

@@ -0,0 +1,12 @@
+.container,
+.left,
+.right {
+  display: flex;
+  gap: 0.5em;
+}
+
+.container {
+  font-size: var(--secondary-font-size);
+  padding: 1.25em 0;
+  justify-content: space-between;
+}

assets/module.css/icon.module.css

@@ -0,0 +1,4 @@
+.icon {
+  fill: currentcolor;
+  display: block;
+}

assets/module.css/index.module.css

@@ -0,0 +1,231 @@
+/* Non-theme variables */
+:root {
+  /* Fonts */
+  --primary-font: 'Open Sans', sans-serif;
+  --primary-font-size: 18px;
+  --secondary-font-size: calc(0.75 * var(--primary-font-size));
+
+  /* Header */
+  --header-transition: 0.2s ease-in-out;
+  --header-border-radius: 4px;
+
+  /* Border */
+  --border: 1px solid var(--border-color);
+}
+
+@define-mixin light-theme-vars {
+  --positive-luminance: white;
+  --negative-luminance: black;
+
+  /* Fonts */
+  --font-color: #444;
+  --font-color-high-contrast: var(--negative-luminance);
+
+  /* Links */
+  --link-color: #00e;
+  --link-color-visited: #551a8b;
+
+  /* Background */
+  --background-color: #e1e1db;
+  --background-color-high-contrast: var(--positive-luminance);
+
+  /* Code */
+  --code-background-color: #eee;
+
+  /* Border */
+  --border-color: #bbb;
+
+  /* Header */
+  --header-link-color: var(--negative-luminance);
+  --header-main-border: #dedede;
+  --header-tint: #428bca;
+  --header-accent-border: #bdbdbd;
+
+  /* The big red button */
+  --button-primary-color: var(--positive-luminance);
+  --button-primary-bg-color: #a42;
+  --button-primary-border-color: #80331a;
+  --button-primary-bg-color-light: color-mix(
+    in hsl,
+    var(--button-primary-bg-color),
+    var(--positive-luminance)
+  );
+  --button-primary-border-color-light: color-mix(
+    in hsl,
+    var(--button-primary-border-color),
+    var(--positive-luminance)
+  );
+
+  /* Clicked */
+  --button-primary-active-color: color-mix(
+    in hsl,
+    var(--positive-luminance),
+    var(--negative-luminance) 30%
+  );
+
+  /* Not the big red button */
+  --button-secondary-color: #444;
+  --button-secondary-bg-color-top: #fff;
+  --button-secondary-bg-color-bottom: #f9f9f9;
+  --button-secondary-bg-color: linear-gradient(
+    to bottom,
+    var(--button-secondary-bg-color-top),
+    var(--button-secondary-bg-color-bottom)
+  );
+  --button-secondary-border-color: color-mix(
+    in hsl,
+    var(--button-secondary-bg-color-bottom),
+    var(--negative-luminance) 20%
+  );
+
+  /* Disabled */
+  --button-secondary-bg-color-light: color-mix(
+    in hsl,
+    var(--button-secondary-bg-color-bottom),
+    var(--positive-luminance)
+  );
+  --button-secondary-border-color-light: color-mix(
+    in hsl,
+    var(--button-secondary-border-color),
+    var(--positive-luminance)
+  );
+  --button-secondary-color-light: color-mix(
+    in hsl,
+    var(--button-secondary-color),
+    var(--positive-luminance)
+  );
+
+  /* Clicked */
+  --button-secondary-active-color: color-mix(
+    in hsl,
+    var(--negative-luminance),
+    var(--positive-luminance) 30%
+  );
+
+  /* Output tabs */
+  --output-background-tab: #fcfcfc;
+  --output-current-tab: #f9ffff;
+
+  /* Output compiler highlighting */
+  --output-highlight-warning-color: #f79a06;
+  --output-highlight-warning-bg-color: inherit;
+  --output-highlight-error-color: #bf1b1b;
+  --output-highlight-error-bg-color: inherit;
+}
+
+@define-mixin dark-theme-vars {
+  --positive-luminance: black;
+  --negative-luminance: white;
+
+  /* Fonts */
+  --font-color: #dcdbd8;
+  --font-color-high-contrast: #dcdbd8;
+
+  /* Links */
+  --link-color: #b2dcff;
+  --link-color-visited: #eecaff;
+
+  /* Background */
+  --background-color: #444;
+  --background-color-high-contrast: #181818;
+
+  /* Code */
+  --code-background-color: #3c3c3c;
+
+  /* Border */
+  --border-color: #5e5e5e;
+
+  /* Header */
+  --header-main-border: #363b3d;
+  --header-accent-border: #bdbdbd;
+
+  /* The big red button */
+  --button-primary-color: #dcdbd8;
+  --button-primary-bg-color: #5d2310;
+  --button-primary-border-color: #612714;
+
+  /* Not the big red button */
+  --button-secondary-color: #dcdbd8;
+  --button-secondary-bg-color-top: #17191a;
+  --button-secondary-bg-color-bottom: #1a1c1d;
+  --button-secondary-border-color: color-mix(
+    in hsl,
+    var(--button-secondary-bg-color-bottom),
+    var(--negative-luminance) 40%
+  );
+
+  /* Output tabs */
+  --output-background-tab: #343434;
+  --output-current-tab: #191b1c;
+
+  /* Output compiler highlighting */
+  --output-highlight-warning-color: #ffe800;
+  --output-highlight-warning-bg-color: #330;
+  --output-highlight-error-color: #f5f5f5;
+  --output-highlight-error-bg-color: #820000;
+}
+
+:root,
+[data-theme='light']:root {
+  @mixin light-theme-vars;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    @mixin dark-theme-vars;
+  }
+}
+
+[data-theme='dark']:root {
+  @mixin dark-theme-vars;
+}
+
+/* Modify normalized styles */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: var(--primary-font);
+  font-optical-sizing: auto;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+a {
+  color: var(--link-color);
+}
+
+a:visited {
+  color: var(--link-color-visited);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+body {
+  color: var(--font-color);
+  background-color: var(--background-color);
+  padding: 0 1em;
+  font-family: var(--primary-font);
+  font-optical-sizing: auto;
+  font-size: var(--primary-font-size);
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+:global(.language-rust_errors) {
+  & :global(.warning) {
+    color: var(--output-highlight-warning-color);
+    background-color: var(--output-highlight-warning-bg-color);
+  }
+
+  & :global(.error) {
+    color: var(--output-highlight-error-color);
+    background-color: var(--output-highlight-error-bg-color);
+  }
+}

assets/module.css/loader.module.css

@@ -0,0 +1,23 @@
+@keyframes loader-fade {
+  0% {
+    opacity: 0;
+  }
+
+  75% {
+    opacity: 1;
+  }
+}
+
+.dot {
+  opacity: 0;
+  animation: loader-fade 1s;
+  animation-iteration-count: infinite;
+
+  &:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+
+  &:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+}

assets/module.css/menu_group.module.css

@@ -0,0 +1,22 @@
+.container {
+  padding: 0.75em 1em 0;
+  width: 27em;
+  line-height: normal;
+
+  &:last-child {
+    padding-bottom: 0.75em;
+  }
+}
+
+.title {
+  margin: 0;
+  border-bottom: 1px solid var(--header-main-border);
+  padding-bottom: 10px;
+  font-weight: 700;
+  font-size: var(--secondary-font-size);
+  text-transform: uppercase;
+}
+
+.content {
+  padding: 1em 0.25em;
+}

assets/module.css/menu_item.module.css

@@ -0,0 +1,7 @@
+.container {
+  margin-bottom: 1em;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}

assets/module.css/output.module.css

@@ -0,0 +1,53 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.tabs {
+  display: flex;
+}
+
+.tab {
+  color: var(--font-color);
+  flex: 1 1 auto;
+  cursor: pointer;
+  border: var(--border);
+  border-right: none;
+  background-color: var(--output-background-tab);
+  line-height: 1.5;
+
+  &:last-of-type {
+    border-right: var(--border);
+  }
+}
+
+.tabSelected {
+  composes: tab;
+  cursor: default;
+  border-bottom: none;
+  background-color: var(--output-current-tab);
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.tabClose {
+  composes: tab;
+  flex: 0 0 auto;
+}
+
+.body {
+  border: var(--border);
+  border-top: none;
+  background-color: var(--output-current-tab);
+  padding: 0.5em;
+  height: 100%;
+  overflow: scroll;
+}
+
+.stdin {
+  margin-top: 0.25em;
+}

assets/module.css/output/execute.module.css

@@ -0,0 +1,32 @@
+.-buttonReset {
+  color: var(--font-color);
+  border: none;
+  background: inherit;
+  background-color: transparent; /* IE 11 */
+  padding: 0;
+  font: inherit;
+  line-height: inherit;
+  text-align: inherit;
+}
+
+.-buttonAsLink {
+  composes: -buttonReset;
+  cursor: pointer;
+  color: var(--link-color);
+  user-select: text;
+  text-decoration: underline;
+}
+
+.addMain {
+  composes: -buttonAsLink;
+}
+
+.table {
+  border-collapse: collapse;
+}
+
+.tdAndTh {
+  border: 1px solid #dddddd;
+  text-align: left;
+  padding: 8px;
+}

assets/module.css/output/header.module.css

@@ -0,0 +1,21 @@
+.container {
+  display: flex;
+  color: var(--font-color);
+  white-space: nowrap;
+
+  &::before,
+  &::after {
+    flex: 1 1 auto;
+    margin: auto;
+    border-top: var(--border);
+    content: '';
+  }
+
+  &::before {
+    margin-right: 2%;
+  }
+
+  &::after {
+    margin-left: 2%;
+  }
+}

assets/module.css/output/section.module.css

@@ -0,0 +1,14 @@
+.-bodyMonospace {
+  font-size: inherit;
+  line-height: 1.25;
+
+  /* http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/
+   * ACE uses Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
+   */
+  font-family: 'Source Code Pro', monospace;
+  font-optical-sizing: auto;
+}
+
+.code {
+  composes: -bodyMonospace;
+}

assets/module.css/output/share.module.css

@@ -0,0 +1,51 @@
+.-buttonReset {
+  color: var(--font-color);
+  border: none;
+  background: inherit;
+  background-color: transparent; /* IE 11 */
+  padding: 0;
+  font: inherit;
+  line-height: inherit;
+  text-align: inherit;
+}
+
+.container {
+  display: flex;
+
+  --copied-duration: 1s ease-in-out;
+}
+
+.button {
+  composes: -buttonReset;
+  transition: color var(--copied-duration);
+  cursor: pointer;
+  margin: 0 0.25em 0 0.5em;
+}
+
+.text {
+  visibility: hidden;
+  opacity: 0;
+  transition:
+    visibility var(--copied-duration),
+    opacity var(--copied-duration),
+    color var(--copied-duration);
+}
+
+.active {
+  composes: container;
+
+  & .button {
+    transition: color 0s;
+    color: green;
+  }
+
+  & .text {
+    visibility: visible;
+    opacity: 1;
+    transition:
+      visibility 0s,
+      opacity 0s,
+      color 0s;
+    color: green;
+  }
+}

assets/module.css/playground.module.css

@@ -0,0 +1,69 @@
+.-autoSize {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 1em;
+  height: 100vh;
+}
+
+.-resizeableArea {
+  composes: -autoSize;
+  display: grid;
+}
+
+.resizeableAreaRowOutputUnfocused {
+  composes: -resizeableArea;
+  grid-template-rows: 1fr auto;
+}
+
+.resizeableAreaRowOutputFocused {
+  composes: -resizeableArea;
+  grid-template-rows: 1fr 12px 1fr;
+}
+
+.resizeableAreaColumnOutputUnfocused {
+  composes: -resizeableArea;
+  grid-template-columns: 1fr auto;
+}
+
+.resizeableAreaColumnOutputFocused {
+  composes: -resizeableArea;
+  grid-template-columns: 1fr 12px 1fr;
+}
+
+.-gutter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.splitRowsGutter {
+  composes: -gutter;
+  cursor: row-resize;
+}
+
+.splitRowsGutterHandle {
+  transform: rotate(90deg);
+  pointer-events: none;
+}
+
+.splitColumnsGutter {
+  composes: -gutter;
+  cursor: col-resize;
+}
+
+.editor {
+  composes: -autoSize;
+  border: 4px solid var(--border-color);
+  border-radius: 4px;
+}
+
+.output {
+  composes: -autoSize;
+}

assets/module.css/pop_button.module.css

@@ -0,0 +1,35 @@
+$arrow-height: 10px;
+$arrow-width: 20px;
+
+.container {
+  z-index: 10;
+  font-size: var(--secondary-font-size);
+
+  & button:enabled {
+    cursor: pointer;
+  }
+}
+
+.arrow {
+  fill: var(--background-color-high-contrast);
+}
+
+.-content {
+  margin: $arrow-height;
+  box-shadow:
+    5px 5px 20px -3px rgb(0 0 0 / 25%),
+    0 0 5px -2px rgb(0 0 0 / 90%);
+  border-radius: var(--header-border-radius);
+  background: var(--background-color-high-contrast);
+  color: var(--font-color);
+}
+
+.contentBottom {
+  composes: -content;
+  margin-top: 0;
+}
+
+.contentTop {
+  composes: -content;
+  margin-bottom: 0;
+}

assets/module.css/selectable_menu_item.module.css

@@ -0,0 +1,64 @@
+.-buttonReset {
+  color: var(--font-color);
+  border: none;
+  background: inherit;
+  background-color: transparent; /* IE 11 */
+  padding: 0;
+  font: inherit;
+  line-height: inherit;
+  text-align: inherit;
+}
+
+.-menuItemFullButton {
+  composes: -buttonReset;
+  transition: color var(--header-transition);
+  width: 100%;
+  user-select: text;
+}
+
+.-menuItemTitle {
+  font-weight: 600;
+}
+
+.container {
+  composes: -menuItemFullButton;
+
+  &:hover {
+    color: var(--header-tint);
+  }
+}
+
+.selected {
+  composes: container;
+  color: var(--header-tint);
+  font-weight: 600;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+}
+
+.name {
+  composes: -menuItemTitle;
+}
+
+.description {
+  padding-left: 2em;
+}
+
+.checkmark {
+  opacity: 0;
+  transition: opacity 0.15s ease-in-out;
+  margin-right: 0.5em;
+}
+
+.selected .checkmark,
+.selected:hover .checkmark {
+  opacity: 1;
+}
+
+.container:hover .checkmark {
+  opacity: 0.5;
+  color: var(--header-tint);
+}