Added evil microsoft typescript

1 files changed, 513 insertions, 0 deletions

diff --git a/style.css b/style.css
new file mode 100644
index 0000000..a7a1762
--- /dev/null
+++ b/style.css
@@ -0,0 +1,513 @@
+
+html, body {
+	margin: 0;
+	height: 100%;
+}
+
+body {
+	background: #f0f0f0;
+	color: black;
+	font-family: Roboto, sans-serif;
+	overflow: hidden;
+}
+
+.noselect {
+    user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+}
+
+#page {
+	display: flex;
+	flex: 1 0 0;
+	align-items: stretch;
+
+    user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+}
+
+#page > * {
+	flex: 1 0 0;
+}
+
+/* Disable the black outline that Chromium browsers put on focused buttons */
+input:focus,
+button:focus 
+{
+    outline:0;
+}
+
+#header {
+	background: white;
+	margin: 0;
+	padding: 0;
+    height: 3rem;
+	font-size: 2em;
+    display: flex;
+    align-items: stretch;
+    user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+}
+
+#topmenu {
+    font-size: 1.3rem;
+    list-style-type: none;
+    display: flex;
+    margin: 0;
+    padding: 0;
+}
+
+#topmenu > li {
+    cursor: pointer;
+    padding: 10px;
+}
+
+#topmenu > li:hover {
+    background: #eee;
+}
+
+.logo {
+	font-family: monospace;
+	margin: 0;
+    align-self: center;
+    padding-left: 2rem;
+}
+
+#hero {
+	flex: 1.5 0 0;
+	position: relative;
+	font-size: 3.5rem;
+}
+
+.vcenter {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+#hero .bg {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: -5;
+}
+
+#hero > * > p {
+	color: #676d75;
+	margin: 0rem;
+	padding: 0.5rem;
+	white-space: nowrap;
+	text-align: center;
+}
+
+#hero .big {
+	font-size: 1.2em;
+}
+
+.blue {
+	color: #231179;
+	font-weight: bold;
+}
+
+form {
+	background: #fbfbfb;
+	margin: 4.5rem;
+	padding-top: 0;
+	box-shadow: 0 0.8rem 1.3rem rgba(0,0,0,0.2);
+	border-radius: 0.5rem;
+	border: 1px solid #b9b9b9;
+}
+
+.vert {
+	justify-content: center;
+	display: flex;
+	flex-direction: column;
+}
+
+.vert2 {
+	display: flex;
+	flex-direction: column;
+}
+
+.overlay {
+	display: grid;
+}
+
+.overlay > * {
+	grid-row: 1;
+	grid-column: 1;
+}
+
+form > .content {
+	margin: 2rem;
+	margin-top: 1rem;
+	margin-bottom: 1.7rem;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+form > h2 {
+	color: #4d4d4d;
+	margin: 0;
+	text-align: center;
+	padding: 1rem;
+	background: #f0f0f0;
+	border-top-left-radius: 0.5rem;
+	border-top-right-radius: 0.5rem;
+    align-content: center;
+}
+
+
+.window h3 button,
+.window > h2 button 
+{
+    border: none;
+    padding: 0.3rem 1rem;
+    background: inherit;
+    border-radius: 0;
+}
+
+.window h3 button:not(.pathentry):hover {
+    background: white;
+}
+
+.window h3 .separator {
+    flex: 0 0 1px;
+    align-self: stretch;
+    background: #bbb;
+}
+
+.window > h2 > *:first-child {
+	border-top-left-radius: 0.5rem;
+}
+form p {
+	margin: 1rem 0px 0.3rem 0px;
+}
+
+.hero_form_error {
+	animation: fadein 0.2s;
+	background-color: #ff4d4d;
+	color: #ffffff;
+	padding-left: 0.5rem;
+	border-bottom-left-radius: 0.5rem;
+	border-bottom-right-radius: 0.5rem;
+	margin-top: -0.2rem;
+
+}
+@keyframes fadein {
+	from { opacity: 0; }
+	to   { opacity: 1; }
+}
+
+.content > input {
+	min-width: 300px;
+}
+
+button,
+input:not([type=file]) 
+{
+	border: 1px solid #bbb;
+	padding: 0.5rem 0.8rem;
+	font-size: inherit;
+	font-family: inherit;
+	border-radius: 0.3rem;
+	background: #fcfcfc;
+}
+
+input[type=button], button, input[type=submit] {
+	cursor: pointer;
+}
+
+input[type=submit] {
+	margin-top: 2rem;
+	width: 100%;
+	display: block;
+	padding: 0.7rem;
+	font-size: 1.1em;
+	box-shadow: 0 0.2rem 0.6rem #eee;
+	background: #231179;
+	color: white;
+	outline: none;
+}
+
+
+input:hover,
+button:hover 
+{
+    background: white;
+}
+
+input:focus {
+	border-color: black;
+}
+
+input[type=submit]:hover {
+	background: #5b4d9d;
+}
+
+.bgbottom {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	z-index: -100;
+}
+
+
+#arrows {
+	position: relative;
+}
+
+#arrows > img {
+	position: absolute;
+	bottom: 0;
+	z-index: -200;
+}
+
+#signupform {
+    display: none;
+}
+
+.window {
+    overflow: hidden;
+    box-sizing: border-box;
+	margin: 0rem;
+	padding: 0;
+	box-shadow: 0 0.8rem 1.3rem rgba(0,0,0,0.2);
+	border-radius: 0.5rem;
+	border: 1px solid #b9b9b9;
+
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 800px;
+    height: 600px;
+    
+    transition: opacity 0.3s;
+    display: flex;
+    flex-direction: column;
+}
+
+.window.focus {
+    border-color: black;
+}
+
+.foldercontents, .filecontents, .filecontentsroot {
+	background: rgba(250, 250, 250, .9);
+    flex: 1 0 0;
+}
+
+.filecontents, .filecontentsroot {
+	background: white;
+}
+
+.filecontents {
+    font-family: monospace;
+}
+
+.filecontents.imgview {
+    background-color: black;
+    background-repeat: no-repeat;
+    background-position: center; 
+    background-size: contain;
+}
+
+.filecontentsroot, .foldercontents {
+    display: flex;
+    flex-direction: column;
+}
+
+.filecontents {
+    overflow-y: scroll;
+}
+[contenteditable] {
+  outline: 0px solid transparent;
+}
+
+pre {
+    font-size: 1.3rem;
+    min-height: 100%;
+    margin: 0.3rem;
+    box-sizing: border-box;
+}
+
+.window h3,
+.window > h2 {
+	color: #4d4d4d;
+	background: #f0f0f0;
+	margin: 0;
+
+
+    display: flex;
+    align-items: stretch;
+    font-weight: normal;
+    padding: 0rem;
+    border-bottom: 1px solid #bbb;
+}
+
+.window > h2 {
+    font-size: 1.3rem;
+	border-top-left-radius: 0.5rem;
+	border-top-right-radius: 0.5rem;
+    cursor: grab;
+
+    user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+}
+
+.window h3 {
+    font-size: 1.2rem;
+}
+
+.window.dragged {
+    /* opacity: 0.9; */
+}
+
+.files {
+    padding: 0.3rem;
+    display: grid;
+
+    grid-gap: 0rem;
+    grid-auto-rows: 8rem;
+    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
+}
+
+.file {
+    box-sizing: border-box;
+    padding: 0.5rem;
+    cursor: pointer;
+    color: #333;
+    user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border: 1px solid rgba(0,0,0,0);
+    border-radius: 0.1rem;
+}
+
+.file.dragged {
+    border: none;
+    pointer-events: none;
+}
+
+.file:hover:not(.dragged) {
+    background: rgba(255,255,255, 0.5);
+    color: black;
+    border-color: #ddd;
+}
+
+.file > img {
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 0;
+}
+
+.file:hover > img {
+    filter: brightness(120%);
+}
+
+.path {
+    display: flex;
+    align-items: stretch;
+    flex: 1 0 0;
+}
+
+.path > .separator {
+    user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    padding: 0 0.1rem;
+    align-self: center;
+}
+
+.pathentry:last-child {
+    cursor: inherit;
+}
+
+.pathentry:not(:last-child):hover {
+    text-decoration: underline;
+}
+
+.context {
+    background: white;
+    position: absolute;
+    z-index: 1000;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    top: 0;
+    left: 0;
+
+    border: 1px solid #ccc;
+	box-shadow: 0 0.3rem 0.5rem rgba(0,0,0,0.2);
+}
+
+.context > li {
+    padding: 0.4rem 1.5rem;
+    margin: 0;
+
+    user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+}
+
+.context > li:hover {
+    background: #2e91db;
+    color: white;
+}
+
+.backdrop {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+
+    user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    background-image: url("/img/backdrop.jpg");
+    background-size: cover;
+}
+
+.share_dialog_contents {
+    display: flex;
+    flex-direction: column;
+    background: white;
+	background: rgba(255,255,255, 0.9);
+}
+
+.window > h2 .close_button {
+    border-left: 1px solid #ccc;
+}
+
+.close_button:hover {
+    background: white;
+}
+
+
+.wndtitle {
+    display: flex;
+    align-items: center;
+    flex: 1 1 0;
+    padding-left: 0.8rem;
+}
+
+iframe {
+    margin: 0;
+    border: 0;
+}
+
+.filename {
+    word-wrap: break-word;
+    word-break: break-word;
+}