Reinitialized commit. Update and actors overview with some filters.

assets/css/breakpoints.css

@@ -0,0 +1 @@
+@custom-media --compact (max-width: 1200px);

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,67 @@
+.input {
+	box-sizing: border-box;
+    padding: .5rem .75rem;
+    font-size: 1rem;
+    flex-basis: 0;
+    border: solid 1px var(--grey-light-30);
+    border-radius: .25rem;
+	background: var(--grey-light-60);
+	font: inherit;
+
+    &:focus {
+		outline: none;
+		border-color: var(--primary-faded);
+    }
+}
+
+.button {
+    padding: .5rem 1rem;
+    border: none;
+    border-radius: .25rem;
+    background: var(--grey-light-30);
+    font-size: 1rem;
+    font-weight: bold;
+
+	&:hover {
+		cursor: pointer;
+		background: var(--primary);
+		color: var(--text-light);
+	}
+
+    &:focus {
+		outline: none;
+    }
+}
+
+.button-submit {
+    background: var(--primary-light-30);
+    color: var(--text-light);
+
+    &:hover:not(:disabled) {
+		background: var(--primary);
+		cursor: pointer;
+    }
+
+	&:disabled {
+		background: var(--shadow-weak-10);
+	}
+}
+
+.button-cancel {
+    background: none;
+    color: var(--shadow-strong-10);
+	font-weight: normal;
+
+    &:hover:not(:disabled) {
+		color: var(--error);
+		cursor: pointer;
+    }
+
+	&:disabled {
+		color: var(--shadow-weak-10);
+	}
+}
+
+.radio {
+	margin: 0 .5rem 0 0;
+}

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/states.css

@@ -0,0 +1,53 @@
+.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;
+	}
+}

assets/css/style.css

@@ -0,0 +1,36 @@
+@import 'theme';
+@import 'states';
+@import 'inputs';
+@import 'forms';
+@import 'markdown';
+@import 'tooltip';
+
+html,
+body,
+#app {
+    height: 100%;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    color: var(--text);
+	font-family: sans-serif;
+}
+
+.link {
+    color: var(--link);
+    text-decoration: none;
+
+	&:hover {
+		text-decoration: underline;
+	}
+}
+
+.heading {
+	margin: 0 0 1rem 0;
+	color: var(--primary-light-20);
+}

assets/css/theme.css

@@ -0,0 +1,55 @@
+:root {
+    --primary: #f65596;
+    --primary-strong: #f90071;
+    --primary-faded: #ffcce4;
+
+    --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;
+
+    --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);
+
+    --text: #222;
+    --text-light: #fff;
+
+    --link: #48f;
+	--error: #f66;
+
+    --male: #0af;
+    --female: #f0a;
+}

assets/css/tooltip.css

@@ -0,0 +1,6 @@
+.tooltip {}
+
+.menu-item {
+	display: block;
+	padding: .5rem;
+}