Commit

2016-03-25 15:36:39 +01:00
commit 35f065e19e
21 changed files with 4157 additions and 0 deletions
@@ -0,0 +1,239 @@
+body, html, div {
+  padding: 0;
+  margin: 0;
+  color: #777;
+}
+
+body, html {
+  background-color: #555;
+  background-size: cover;
+  font-family: sans-serif;
+
+  height: 100%;
+  width: 100%;
+
+  overflow: hidden;
+}
+
+a {
+  display: inline-block;
+
+  padding: 0.125em 0.25em;
+
+  background-color: rgba(64, 64, 64, 0.5);
+  color: #ccc;
+  text-decoration: none;
+
+  cursor: pointer;
+}
+
+hr {
+  border: 1px solid rgba(96, 96, 96, 0.5);
+}
+
+div.ngn4-panel {
+  background-color: rgba(0, 0, 0, 0.75);
+}
+
+div.ngn4-menu {
+  position: absolute;
+  left: 0;
+  right: 0;
+
+  overflow-y: visible;
+}
+
+div.ngn4-menu h1 {
+  margin: 0;
+  padding: 0.25em 0.5em;
+  display: inline-block;
+  font-size: 1em;
+}
+
+div.ngn4-geninfo {
+  padding: 0.5em;
+  position: absolute;
+  left: 15%;
+  right: 15%;
+  top: 4em;
+  min-height: calc(100% - 7em);
+
+  text-align: center;
+
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+div.ngn4-geninfo#loading-screen {
+  overflow-y: hidden;
+}
+
+div.ngn4-geninfo a {
+  margin: 0.25em;
+
+  border: 1px solid #000;
+}
+
+div.ngn4-geninfo a.selected {
+  background-color: rgba(192, 128, 32, 0.125);
+  color: #fff;
+
+  border: 1px solid #c82;
+}
+
+div.ngn4-footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  background-color: rgba(192, 128, 32, 0.8);
+  color: #fff;
+
+  font-size: 1.5em;
+  padding: 0.5em;
+}
+
+div.ngn4-footer a {
+  border: 1px solid #000;
+}
+
+.vertical-center center {
+  vertical-align: middle;
+
+  position: absolute;
+  top: calc(50% - 0.5em);
+  height: 100%;
+  width: 100%;
+
+  font-size: 3em;
+}
+
+#gi-name {
+  padding-top: 2em;
+  color: #aaa;
+  font-size: 2em;
+}
+
+#gi-race {
+  color: #555;
+  font-size: 0.9em;
+}
+
+#gi-button {
+  background-color: rgba(32, 32, 32, 0.9);
+  color: #ccc;
+  border: 1px solid #000;
+
+  font-size: 1.5em;
+  margin: 0.5em;
+}
+
+#gi-button:focus {
+  border: 1px solid #c82;
+  outline: 0;
+}
+
+
+/* DROPDOWN FUNCTIONALITY */
+#menu-items div.item {
+  position: relative;
+  display: inline-block;
+
+  margin: 0;
+  padding: 0.25em 0.5em;
+  background: none;
+
+  color: #ccc;
+  text-decoration: none;
+
+  cursor: pointer;
+}
+
+#menu-items div.item div {
+  display: none;
+  position: absolute;
+  top: 1.65em;
+  margin-left: -0.5em;
+  min-width: 12ch;
+  z-index: 10;
+  background: none;
+}
+
+#menu-items div.item:hover {
+  background-color: rgba(192, 128, 32, 0.5);
+  color: #fff;
+}
+
+#menu-items div.item:hover div {
+    display: block;
+}
+
+#menu-items div.item div a {
+  padding: 0.25em;
+  margin: 0;
+  background-color: rgba(0, 0, 0, 0.75);
+  display: block;
+}
+
+#menu-items div.item div a:hover {
+    background-color: rgba(192, 128, 32, 0.75);
+    color: #fff;
+}
+
+@media screen and (max-width: 980px) {
+  body {
+    font-size: 1em;
+  }
+
+  div.ngn4-geninfo {
+    position: absolute;
+    left: 0.5em;
+    right: 0.5em;
+    top: 3em;
+    height: calc(100% - 4.5em);
+
+    overflow-y: auto;
+  }
+
+  div.ngn4-menu {
+    overflow-y: visible;
+    white-space: nowrap;
+  }
+
+  div.ngn4-menu .item, div.ngn4-menu h1 {
+    font-size: 1.5em;
+  }
+
+  div.ngn4-footer {
+    font-size: 0.75em;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+
+    overflow-y: auto;
+  }
+
+  div.ngn4-footer a {
+    padding: 1em;
+  }
+
+  #gi-name {
+    padding-top: 0.25em;
+  }
+
+  #gi-button {
+    padding: 0.5em;
+  }
+}
+
+.noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none;   /* Chrome/Safari/Opera */
+  -khtml-user-select: none;    /* Konqueror */
+  -moz-user-select: none;      /* Firefox */
+  -ms-user-select: none;       /* IE/Edge */
+  user-select: none;           /* non-prefixed version, currently
+                                  not supported by any browser */
+}