Initial commit. Files are uploaded to the filesystem.

assets/css/breakpoints.css

@@ -0,0 +1,10 @@
+@custom-media --small-60 (max-width: 350px);
+@custom-media --small-50 (max-width: 410px);
+@custom-media --small-40 (max-width: 480px);
+@custom-media --small-30 (max-width: 540px);
+@custom-media --small-20 (max-width: 650px);
+@custom-media --small-15 (max-width: 720px);
+@custom-media --small-10 (max-width: 768px);
+@custom-media --small (max-width: 900px);
+@custom-media --compact (max-width: 1200px);
+@custom-media --big (max-width: 1500px);

assets/css/code.css

@@ -0,0 +1,6 @@
+code {
+  font-family: monospace;
+  background-color: #eaeaea;
+  padding: 3px 5px;
+  border-radius: 4px;
+}

assets/css/forms.css

@@ -0,0 +1,48 @@
+.form {
+	width: 100%;
+	max-width: 30rem;
+	display: flex;
+	flex-direction: column;
+}
+
+.form-section {
+	margin-bottom: 1rem;
+}
+
+.form-row {
+	display: flex;
+	flex-wrap: wrap;
+	margin-bottom: .5rem;
+
+	.input {
+		flex-grow: 1;
+	}
+}
+
+.form-column {
+	display: flex;
+	flex-grow: 1;
+	flex-direction: column;
+	min-width: 10rem;
+}
+
+.form-actions {
+	display: flex;
+	margin-bottom: .5rem;
+	justify-content: flex-end;
+	margin-top: .5rem;
+}
+
+.form-heading {
+	color: var(--primary-light-10);
+	margin: 0 0 .75rem 0;
+}
+
+.form-error {
+	background: var(--error);
+	color: var(--text-light);
+	padding: 1rem;
+	border-radius: .25rem;
+	text-align: center;
+	font-weight: bold;
+}

assets/css/inputs.css

@@ -0,0 +1,297 @@
+.input {
+	box-sizing: border-box;
+    padding: .5rem .75rem;
+    font-size: 1rem;
+    flex-basis: 0;
+	color: inherit;
+    border: solid 1px var(--glass-weak-30);
+    border-radius: .25rem;
+	background: var(--background-base-10);
+	font: inherit;
+
+    &:focus {
+		outline: none;
+		border-color: var(--primary-light-10);
+    }
+}
+
+.input-inline {
+	border-radius: 0;
+	border: none;
+	border-bottom: solid 1px var(--grey-light-30);
+	background: var(--background);
+}
+
+.button {
+	display: inline-flex;
+	flex-shrink: 0;
+	align-items: stretch;
+	box-sizing: border-box;
+    padding: .5rem;
+    border: none;
+    border-radius: .25rem;
+    background: var(--background);
+	box-shadow: 0 0 3px var(--shadow-weak-30);
+	color: var(--glass);
+    font-size: .9rem;
+    font-weight: bold;
+
+	.icon {
+		height: auto;
+		padding: 0 .75rem 0 .25rem;
+		fill: var(--glass);
+	}
+
+	&:hover {
+		cursor: pointer;
+		background: var(--primary);
+		color: var(--text-light);
+
+		.icon {
+			fill: var(--text-light);
+		}
+	}
+
+    &:focus {
+		outline: none;
+    }
+}
+
+.button-label {
+	margin-right: .25rem;
+}
+
+.button-submit {
+    background: var(--primary);
+	color: var(--text-light);
+	justify-content: center;
+
+    &:hover:not(:disabled) {
+		background: var(--primary-dark-10);
+    }
+
+	&:disabled {
+		background: var(--glass);
+	}
+}
+
+.button-primary {
+    background: var(--primary);
+	color: var(--text-light);
+	justify-content: center;
+
+    &:hover:not(:disabled) {
+		background: var(--primary-dark-10);
+    }
+
+	&:disabled {
+		background: var(--glass);
+	}
+}
+
+.button-inline {
+    border: none;
+    background: none;
+	color: var(--grey-dark-20);
+	padding: 0 0 .5rem 0;
+    font-size: 1rem;
+    font-weight: bold;
+
+	.icon {
+		fill: var(--grey-dark-20);
+		padding-left: none;
+	}
+
+	&:hover {
+		cursor: pointer;
+		background: none;
+		color: var(--primary);
+
+		.icon {
+			fill: var(--primary);
+		}
+	}
+
+    &:focus {
+		outline: none;
+    }
+}
+
+.button-cancel {
+    background: none;
+    color: var(--glass);
+	font-weight: normal;
+
+    &:hover:not(:disabled) {
+		color: var(--error);
+		cursor: pointer;
+    }
+
+	&:disabled {
+		color: var(--glass);
+	}
+}
+
+.radio {
+	margin: 0 .5rem 0 0;
+}
+
+.filter-section {
+	width: 100%;
+	margin-bottom: .25rem;
+}
+
+.label-values {
+	flex-shrink: 0;
+	font-weight: normal;
+}
+
+.filter-split {
+	display: flex;
+	align-items: center;
+}
+
+.toggle-container,
+.range-container {
+	display: flex;
+	flex-grow: 1;
+	align-items: center;
+	padding: .5rem 0;
+
+	&.on {
+		.toggle-label.on {
+			color: var(--enabled);
+
+			.icon {
+				fill: var(--enabled);
+			}
+		}
+
+		.toggle {
+			background-color: var(--enabled-background);
+
+			&::-webkit-slider-thumb {
+				background: var(--enabled);
+			}
+
+			&::-moz-range-thumb {
+				background: var(--enabled);
+			}
+		}
+	}
+
+	&.off {
+		.toggle-label.off {
+			color: var(--disabled);
+
+			.icon {
+				fill: var(--disabled);
+			}
+		}
+
+		.toggle {
+			background-color: var(--disabled-background);
+
+			&::-webkit-slider-thumb {
+				background: var(--disabled);
+			}
+
+			&::-moz-range-thumb {
+				background: var(--disabled);
+			}
+		}
+	}
+}
+
+.toggle-label {
+	display: inline-flex;
+	justify-content: center;
+	min-width: 1.5rem;
+	flex-shrink: 0;
+	padding: 0 .5rem;
+	color: var(--glass);
+	font-weight: bold;
+	font-size: .9rem;
+
+	&.on {
+		text-align: right;
+	}
+
+	.icon {
+		fill: var(--glass);
+	}
+
+	&:hover {
+		cursor: pointer;
+
+		&.on {
+			color: var(--enabled);
+
+			.icon {
+				fill: var(--enabled);
+			}
+		}
+
+		&.off {
+			color: var(--disabled);
+
+			.icon {
+				fill: var(--disabled);
+			}
+		}
+	}
+}
+
+.filter-label {
+	display: flex;
+	justify-content: space-between;
+	padding: .5rem 0 .25rem .25rem;
+	color: var(--glass);
+	font-weight: bold;
+	font-size: .9rem;
+
+	.label {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		text-transform: capitalize;
+	}
+
+	.checkbox {
+		margin: 0 .75rem 0 0;
+	}
+
+	.icon {
+		margin: 0 .5rem 0 0;
+	}
+}
+
+.toggle {
+	width: 0;
+	flex-grow: 1;
+	height: 1.25rem;
+	appearance: none;
+	border-radius: 1rem;
+	background-color: var(--glass-weak-40);
+	background-image: radial-gradient(circle, var(--glass-weak-10) .3rem, transparent calc(.3rem + 1px));
+	cursor: pointer;
+
+	&::-webkit-slider-thumb {
+		appearance: none;
+		background: var(--disabled-handle);
+		width: 1.25rem;
+		height: 1.25rem;
+		border-radius: .625rem;
+		box-shadow: 0 0 3px var(--shadow-weak-10);
+	}
+
+	&::-moz-range-thumb {
+		appearance: none;
+		background: var(--disabled-handle);
+		width: 1.25rem;
+		height: 1.25rem;
+		border: none;
+		border-radius: .625rem;
+		box-shadow: 0 0 3px var(--shadow-weak-10);
+	}
+}

assets/css/links.css

@@ -0,0 +1,3 @@
+a {
+  text-decoration: none;
+}

assets/css/markdown.css

@@ -0,0 +1,21 @@
+.markdown-body {
+	margin: 0 auto;
+	max-width: 50rem;
+	flex-grow: 1;
+	padding: 1rem;
+	line-height: 1.5;
+	text-align: justify;
+
+	& h1 {
+		margin: 0;
+	}
+
+	& h2 {
+		color: var(--primary);
+		margin: 1rem 0 0 0;
+	}
+
+	& p {
+		margin: 0;
+	}
+}

assets/css/reset.css

@@ -0,0 +1,7 @@
+body {
+  margin: 0;
+  font-family: sans-serif;
+}
+* {
+  box-sizing: border-box;
+}

assets/css/states.css

@@ -0,0 +1,67 @@
+.noselect {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.nolist {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+        display: inline-block;
+        padding: 0;
+        margin: 0;
+    }
+}
+
+.nolink {
+	display: inline-block;
+	color: inherit;
+	text-decoration: none;
+}
+
+.nolink-active {
+	display: inline-block;
+	color: inherit;
+	text-decoration: none;
+
+	&:hover {
+		text-decoration: underline;
+	}
+}
+
+.nobutton {
+	background: none;
+	border: none;
+	font-size: 1rem;
+	padding: 0;
+}
+
+.nobar {
+	scrollbar-width: none;
+	-mis-overflow-style: none;
+
+	&::-webkit-scrollbar {
+		background: transparent;
+		width: 0px;
+		height: 0px;
+	}
+}
+
+.ellipsis {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.noshrink {
+	flex-shrink: 0;
+}
+
+.capitalize {
+	text-transform: capitalize;
+}

assets/css/style.css

@@ -0,0 +1,34 @@
+@import 'reset';
+@import 'links';
+@import 'code';
+@import 'theme';
+@import 'states';
+@import 'inputs';
+@import 'forms';
+@import 'markdown';
+@import 'tooltip';
+
+html,
+body,
+#app {
+    height: 100%;
+}
+
+body {
+    margin: 0;
+	font-family: Arial, Helvetica, sans-serif;
+}
+
+.link {
+    color: var(--link);
+    text-decoration: none;
+
+	&:hover {
+		text-decoration: underline;
+	}
+}
+
+.heading {
+	margin: 0 0 1rem 0;
+	color: var(--primary);
+}

assets/css/theme.css

@@ -0,0 +1,132 @@
+:root {
+    --primary-dark-10: #e54485;
+    --primary: #f65596;
+    --primary-light-10: #f075a6;
+    --primary-light-20: #f2a6c4;
+    --primary-light-30: #f7c9dc;
+
+	--primary: #D81159;
+	--primary-dark-10: #8F2D56;
+	--secondary: #73D2DE;
+	--secondary-dark-10: 218380;
+
+    --grey-dark-50: #111;
+    --grey-dark-40: #222;
+    --grey-dark-30: #444;
+    --grey-dark-20: #666;
+    --grey-dark-10: #888;
+    --grey: #aaa;
+    --grey-light-10: #bbb;
+    --grey-light-20: #ccc;
+    --grey-light-30: #ddd;
+    --grey-light-40: #eee;
+    --grey-light-50: #fafafa;
+    --grey-light-60: #fcfcfc;
+
+    --background-dark-20: #eee;
+    --background-dark-10: #f8f8f8;
+    --background: #fff;
+
+	--background-base: #fff;
+	--background-base-10: #fafafa;
+	--background-base-20: #f0f0f0;
+	--background-level-10: #fff;
+	--background-level-20: #eee;
+	--background-level-30: #eee;
+	--background-dim: var(--shadow-weak-10);
+	--background-error: rgba(255, 0, 0, .1);
+
+    --shadow-weak-50: rgba(0, 0, 0, .02);
+    --shadow-weak-40: rgba(0, 0, 0, .05);
+    --shadow-weak-30: rgba(0, 0, 0, .1);
+    --shadow-weak-20: rgba(0, 0, 0, .2);
+    --shadow-weak-10: rgba(0, 0, 0, .35);
+    --shadow: rgba(0, 0, 0, .5);
+    --shadow-strong-10: rgba(0, 0, 0, .6);
+    --shadow-strong-20: rgba(0, 0, 0, .75);
+    --shadow-strong-30: rgba(0, 0, 0, .9);
+
+    --highlight-weak-40: rgba(255, 255, 255, .05);
+    --highlight-weak-30: rgba(255, 255, 255, .1);
+    --highlight-weak-20: rgba(255, 255, 255, .2);
+    --highlight-weak-10: rgba(255, 255, 255, .35);
+    --highlight: rgba(255, 255, 255, .5);
+    --highlight-strong-10: rgba(255, 255, 255, .6);
+    --highlight-strong-20: rgba(255, 255, 255, .75);
+    --highlight-strong-30: rgba(255, 255, 255, .9);
+
+    --glass-weak-50: rgba(0, 0, 0, .02);
+    --glass-weak-40: rgba(0, 0, 0, .05);
+    --glass-weak-30: rgba(0, 0, 0, .1);
+    --glass-weak-20: rgba(0, 0, 0, .2);
+    --glass-weak-10: rgba(0, 0, 0, .35);
+    --glass: rgba(0, 0, 0, .5);
+    --glass-strong-10: rgba(0, 0, 0, .6);
+    --glass-strong-20: rgba(0, 0, 0, .75);
+    --glass-strong-30: rgba(0, 0, 0, .9);
+
+    --text: #222;
+    --text-light: #fff;
+
+    /* --link: #48f; */
+    --link: var(--primary);
+
+    --male: #0af;
+    --female: #f0a;
+
+	--enabled: #5c2;
+	--enabled-background: rgba(0, 255, 0, .1);
+	--disabled: #c20;
+	--disabled-background: rgba(255, 0, 0, .1);
+	--disabled-handle: var(--grey-light-10);
+
+	--error: #f66;
+    --alert: #f00;
+    --warn: #e80;
+    --success: #5c2;
+    --notice: #25c;
+
+    --approve: #3a1;
+	--reject: #a22;
+
+	--gold: #d5b522;
+}
+
+.dark {
+    --background-dark-20: #000;
+    --background-dark-10: #111;
+    --background: #222;
+
+	--background-base: #252525;
+	--background-base-10: #1a1a1a;
+	--background-base-20: #050505;
+	--background-level-10: #fff;
+	--background-level-20: #eee;
+	--background-level-30: #eee;
+	--background-dim: var(--shadow-weak-10);
+
+	--text: #fcfcfc;
+
+    --glass-weak-50: rgba(255, 255, 255, .02);
+    --glass-weak-40: rgba(255, 255, 255, .05);
+    --glass-weak-30: rgba(255, 255, 255, .1);
+    --glass-weak-20: rgba(255, 255, 255, .2);
+    --glass-weak-10: rgba(255, 255, 255, .35);
+    --glass: rgba(255, 255, 255, .5);
+    --glass-strong-10: rgba(255, 255, 255, .6);
+    --glass-strong-20: rgba(255, 255, 255, .75);
+    --glass-strong-30: rgba(255, 255, 255, .9);
+
+    --grey-dark-50: #101010;
+    --grey-dark-40: #1f1f1f;
+    --grey-dark-30: #3c3c3c;
+    --grey-dark-20: #606060;
+    --grey-dark-10: #808080;
+    --grey: #aaa;
+    --grey-light-10: #bbb;
+    --grey-light-20: #ccc;
+    --grey-light-30: #ddd;
+    --grey-light-40: #eee;
+    --grey-light-50: #fafafa;
+    --grey-light-60: #fcfcfc;
+}

assets/css/tooltip.css

@@ -0,0 +1,205 @@
+/* Content */
+
+.v-popper__popper {
+  z-index: 10000;
+  top: 0;
+  left: 0;
+  outline: none;
+  max-width: 100%;
+}
+
+.v-popper__wrapper {
+	margin: 0 .25rem .25rem .25rem; /* arrow provides top clearance */
+}
+
+.v-popper__popper.v-popper__popper--hidden {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity .15s, visibility .15s;
+  pointer-events: none;
+}
+
+.v-popper__popper.v-popper__popper--shown {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity .15s;
+}
+
+.v-popper__popper.v-popper__popper--skip-transition,
+.v-popper__popper.v-popper__popper--skip-transition > .v-popper__wrapper {
+  transition: none !important;
+}
+
+.v-popper__backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: none;
+}
+
+.v-popper__inner {
+  position: relative;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+
+.v-popper__inner > div {
+  position: relative;
+  z-index: 1;
+  max-width: inherit;
+  max-height: inherit;
+}
+
+.v-popper__arrow-container {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+}
+
+.v-popper__popper--arrow-overflow .v-popper__arrow-container,
+.v-popper__popper--no-positioning .v-popper__arrow-container {
+  display: none;
+}
+
+.v-popper__arrow-inner,
+.v-popper__arrow-outer {
+  border-style: solid;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+}
+
+.v-popper__arrow-inner {
+  visibility: hidden;
+  border-width: 7px;
+}
+
+.v-popper__arrow-outer {
+  border-width: 6px;
+}
+
+.v-popper__popper[data-popper-placement^="top"] .v-popper__arrow-inner,
+.v-popper__popper[data-popper-placement^="bottom"] .v-popper__arrow-inner {
+  left: -2px;
+}
+
+.v-popper__popper[data-popper-placement^="top"] .v-popper__arrow-outer,
+.v-popper__popper[data-popper-placement^="bottom"] .v-popper__arrow-outer {
+  left: -1px;
+}
+
+.v-popper__popper[data-popper-placement^="top"] .v-popper__arrow-inner,
+.v-popper__popper[data-popper-placement^="top"] .v-popper__arrow-outer {
+  border-bottom-width: 0;
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+  border-bottom-color: transparent !important;
+}
+
+.v-popper__popper[data-popper-placement^="top"] .v-popper__arrow-inner {
+  top: -2px;
+}
+
+.v-popper__popper[data-popper-placement^="bottom"] .v-popper__arrow-container {
+  top: 0;
+}
+
+.v-popper__popper[data-popper-placement^="bottom"] .v-popper__arrow-inner,
+.v-popper__popper[data-popper-placement^="bottom"] .v-popper__arrow-outer {
+  border-top-width: 0;
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+  border-top-color: transparent !important;
+}
+
+.v-popper__popper[data-popper-placement^="bottom"] .v-popper__arrow-inner {
+  top: -4px;
+}
+
+.v-popper__popper[data-popper-placement^="bottom"] .v-popper__arrow-outer {
+  top: -6px;
+}
+
+.v-popper__popper[data-popper-placement^="left"] .v-popper__arrow-inner,
+.v-popper__popper[data-popper-placement^="right"] .v-popper__arrow-inner {
+  top: -2px;
+}
+
+.v-popper__popper[data-popper-placement^="left"] .v-popper__arrow-outer,
+.v-popper__popper[data-popper-placement^="right"] .v-popper__arrow-outer {
+  top: -1px;
+}
+
+.v-popper__popper[data-popper-placement^="right"] .v-popper__arrow-inner,
+.v-popper__popper[data-popper-placement^="right"] .v-popper__arrow-outer {
+  border-left-width: 0;
+  border-left-color: transparent !important;
+  border-top-color: transparent !important;
+  border-bottom-color: transparent !important;
+}
+
+.v-popper__popper[data-popper-placement^="right"] .v-popper__arrow-inner {
+  left: -4px;
+}
+
+.v-popper__popper[data-popper-placement^="right"] .v-popper__arrow-outer {
+  left: -6px;
+}
+
+.v-popper__popper[data-popper-placement^="left"] .v-popper__arrow-container {
+  right: -10px;
+}
+
+.v-popper__popper[data-popper-placement^="left"] .v-popper__arrow-inner,
+.v-popper__popper[data-popper-placement^="left"] .v-popper__arrow-outer {
+  border-right-width: 0;
+  border-top-color: transparent !important;
+  border-right-color: transparent !important;
+  border-bottom-color: transparent !important;
+}
+
+.v-popper__popper[data-popper-placement^="left"] .v-popper__arrow-inner {
+  left: -2px;
+}
+
+/* Tooltip */
+
+.v-popper--theme-tooltip .v-popper__inner {
+  background: rgba(0, 0, 0, .8);
+  color: white;
+  border-radius: 6px;
+  padding: 7px 12px 6px;
+}
+
+.v-popper--theme-tooltip .v-popper__arrow-outer {
+  border-color: rgba(0, 0, 0, .8);
+}
+
+/* Dropdown */
+
+.v-popper--theme-dropdown .v-popper__inner {
+  background: var(--background);
+  color: var(--text);
+  border-radius: 6px;
+  border: solid 1px var(--glass-weak-40);
+  box-shadow: 0 6px 30px rgba(0, 0, 0, .1);
+}
+
+.v-popper--theme-dropdown .v-popper__arrow-inner {
+  visibility: visible;
+  border-color: var(--background);
+}
+
+.v-popper--theme-dropdown .v-popper__arrow-outer {
+  border-color: var(--glass-weak-40);
+}
+
+.resize-observer {
+	width: 0;
+	height: 0;
+	overflow: hidden;
+}