Implemented stylesheet structure+font change

15 files changed, 517 insertions, 0 deletions

diff --git a/res/css/partials/base.scss b/res/css/partials/base.scss
new file mode 100644
index 00000000..ba9413d1
--- /dev/null
+++ b/res/css/partials/base.scss
@@ -0,0 +1,39 @@
+@import "../modules/colors";
+@import "../modules/mixins";
+
+//Globals
+html, body {
+  height: 100%;
+}
+
+body {
+  overflow-y: hidden;
+  overflow-x:auto;
+  margin: 0;
+  min-width: 980px;
+  padding: 0;
+  color: #FFF;
+  font-size: 14px;
+  background-color:#080808;
+}
+
+a{
+  text-decoration: none;
+  font-style: italic;
+}
+
+a:link {
+  color: #FFF;
+}
+
+a:visited {
+  color: #FFF;
+}
+
+a:hover {
+  color: #EDE275;
+}
+
+a:active {
+  color: #FFF;
+}
\ No newline at end of file
diff --git a/res/css/partials/buttons.scss b/res/css/partials/buttons.scss
new file mode 100644
index 00000000..945dce46
--- /dev/null
+++ b/res/css/partials/buttons.scss
@@ -0,0 +1,63 @@
+.onoffswitch {
+  z-index:100;
+  position: fixed;
+  width: 160px;
+  top:35px;
+  right: 180px;
+  -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
+}
+
+.onoffswitch-checkbox {
+  display: none;
+}
+
+.onoffswitch-label {
+  display: block; overflow: hidden; cursor: pointer;
+  border: 2px solid #303030; border-radius: 5px;
+}
+
+.onoffswitch-inner {
+  display: block; width: 200%; margin-left: -100%;
+  -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
+  -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
+}
+
+.onoffswitch-inner:before, .onoffswitch-inner:after {
+  display: block; float: left; width: 50%; height: 20px; padding: 0; line-height: 20px;
+  font-size: 14px; color: white; font-weight: bold;
+  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
+}
+
+.onoffswitch-inner:before {
+  content: "TIMELINE VIEW";
+  padding-left: 5px;
+  background-color: #080808; color: #FFFFFF;
+}
+
+.onoffswitch-inner:after {
+  content: "GRAPH VIEW";
+  padding-right: 5px;
+  background-color: #080808; color: #FFFFFF;
+  text-align: right;
+}
+
+.onoffswitch-switch {
+  display: block; width: 35px; margin: 0px;
+  background: #3D3D3D;
+  border: 1px solid #FFFFFF; border-radius: 5px;
+  position: absolute; top: 0; bottom: 0; right: 125px;
+  -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
+  -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
+  background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
+  background-image: -webkit-linear-gradient(rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
+  background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
+  background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
+}
+
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
+  margin-left: 0;
+}
+
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
+  right: 0px;
+}
diff --git a/res/css/partials/dev-area.scss b/res/css/partials/dev-area.scss
new file mode 100644
index 00000000..7d344a55
--- /dev/null
+++ b/res/css/partials/dev-area.scss
@@ -0,0 +1,25 @@
+.debug-ui {
+  position:fixed;
+  bottom:70px;
+  left:10px;
+  text-decoration: none;
+}
+
+.debug-ui-row {
+  float: left;
+  width: 100%;
+}
+
+.debug-ui-left {
+  float: left;
+  width: 50%;
+}
+
+.debug-ui-right {
+  float: right;
+  width: 50%;
+}
+
+.debug{
+
+}
\ No newline at end of file
diff --git a/res/css/partials/graph-view.scss b/res/css/partials/graph-view.scss
new file mode 100644
index 00000000..10120964
--- /dev/null
+++ b/res/css/partials/graph-view.scss
@@ -0,0 +1,179 @@
+.node {
+  stroke: #fff;
+  stroke-width: 1px;
+  font-size: 16px;
+  z-index:100;
+}
+
+.ghostnode{
+
+}
+
+.circle {
+  stroke: #fff;
+  stroke-width: 1.5px;
+  z-index: 100;
+  pointer-events:all;
+  box-shadow: 0 0 0px #FFFF8F;
+}
+
+.nodetext {
+
+  fill: #FFFFFF;
+  font-size:17px;
+  z-index:3;
+}
+
+.linklabel{
+  stroke: #EEEEEE;
+  font-size:14px;
+
+}
+
+.link {
+  fill: none;
+  stroke: #404040;
+  z-index:1;
+}
+
+.ghostlink {
+  opacity: 0.0;
+  fill: none;
+  stroke-width: 15px;
+  z-index:2; /* higher than link, lower than node */
+}
+
+.circle.chosen {
+  stroke: #EDE275;
+}
+.circle.enter {
+  stroke: #EDE275;
+}
+.circle.bubble {
+  stroke: #101010;
+}
+.circle.exit {
+  stroke: #EDE275;
+}
+.circle.chainlink {
+  stroke: #AAA;
+}
+
+.circle.temp {
+  box-shadow: 0 0 40px #FFFF8F;
+}
+
+.circle.temp, .circle.chosen {
+  stroke-width: 3px;
+}
+
+.circle.temp.empty {
+  stroke-width: 1.5px;
+}
+
+/* Per node and edge type (type is a property of nodes and links) styling
+ * note that this should be automatically generated somehow for user settings.
+ */
+
+.circle.person {
+  fill: #FCB924;
+}
+
+
+.circle.club {
+  fill: #009DDC;
+}
+
+.circle.skill {
+  fill: #62BB47;
+}
+
+.circle.interest {
+  fill: #f9f5f1;
+}
+
+.circle.third-internship-proposal {
+  fill: #202020;
+}
+
+.circle.internship {
+  fill: #933E99;
+}
+
+.circle.empty {
+  fill: #080808;
+}
+
+.circle.chainlink {
+  fill: #fff;
+}
+
+.circle.bubble {
+  fill: rgba(0,0,0,0.2);
+}
+
+
+/* Selected parts of the graph, right now by clicking, later with search. */
+
+.notselected {
+  opacity: 0.2;
+}
+
+.graph.link.temp_and {
+  stroke-dasharray: 3,3;
+}
+
+.highlightlink {
+  fill: none;
+  stroke: #EDE275;
+  stroke-width: 2px;
+  z-index:1;
+  pointer-events: none;
+}
+
+.link.enter, .link.exit, .link.selected {
+  fill: none;
+  stroke: #EDE275;
+  stroke-width: 4px;
+  z-index:1;
+  pointer-events: none;
+}
+
+#editbox input{
+  width:130px;
+}
+
+.overlay {
+  fill:none;
+  pointer-events: all;
+  z-index:0;
+
+}
+
+.editinfo{
+  position: fixed;
+  top:-40px;
+  z-index:5;
+}
+
+.editlinkinfo{
+  position: fixed;
+  top:-40px;
+  z-index:5;
+}
+
+#editlinkname{
+  width:inherit;
+  height:inherit;
+
+  font-size: 17px;
+
+}
+
+#editname{
+  width:inherit;
+  height:inherit;
+
+  font-size: 17px;
+
+}
\ No newline at end of file
diff --git a/res/css/partials/grid.scss b/res/css/partials/grid.scss
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/res/css/partials/grid.scss
diff --git a/res/css/partials/info-box.scss b/res/css/partials/info-box.scss
new file mode 100644
index 00000000..0b0a4c08
--- /dev/null
+++ b/res/css/partials/info-box.scss
@@ -0,0 +1,19 @@
+.subtitle{
+  font-style:italic;
+  color: #bbb;
+  font-size: 12px;
+  float:right;
+}
+
+.edge_info, .info {
+  background-color: rgba(17,17,17,0.8);
+  position:fixed;
+  top:150px;
+  width:250px;
+  right:10px;
+  font-size: 18px;
+  border: 1px solid;
+  padding: 5px;
+  line-height: 45px;
+  border-color: #303030;
+}
\ No newline at end of file
diff --git a/res/css/partials/input-bubble.scss b/res/css/partials/input-bubble.scss
new file mode 100644
index 00000000..679dcd53
--- /dev/null
+++ b/res/css/partials/input-bubble.scss
@@ -0,0 +1,15 @@
+.typeselection{
+  position:fixed;
+  left:0;
+  top:-300px;
+  pointer-events:none;
+}
+
+.typeselection td{
+  padding-top: 5px;
+  padding-left: 200px;
+}
+
+#keys{
+  opacity: 0.5;
+}
\ No newline at end of file
diff --git a/res/css/partials/input-field.scss b/res/css/partials/input-field.scss
new file mode 100644
index 00000000..5b4e478f
--- /dev/null
+++ b/res/css/partials/input-field.scss
@@ -0,0 +1,42 @@
+input{
+  background-color: rgba(17,17,17,0.8);
+  color: white;
+  border-width: 1px;
+  border-color: #303030;
+  font-size:14px;
+
+  outline:none;
+  border-color:#303030;
+  box-shadow:0 0 0px #303030;
+  -webkit-transition: all 0.04s ease-in-out;
+  -moz-transition: all 0.04s ease-in-out;
+  -ms-transition: all 0.04s ease-in-out;
+  -o-transition: all 0.04s ease-in-out;
+}
+
+#textinputui {
+  position: fixed;
+  display: block;
+  top: 40px;
+  left: 20px;
+  right: 400px;
+}
+
+#textanalyser{
+  float: left;
+  height:30px;
+  max-width: 70%;
+  width:900px;
+}
+
+input:focus {
+}
+
+#suggestion{
+  list-style-type: none;
+}
+
+#suggestion td{
+  padding-top: 5px;
+  padding-left: 200px;
+}
\ No newline at end of file
diff --git a/res/css/partials/metro-view.scss b/res/css/partials/metro-view.scss
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/res/css/partials/metro-view.scss
diff --git a/res/css/partials/reset.scss b/res/css/partials/reset.scss
new file mode 100644
index 00000000..d9f27b5a
--- /dev/null
+++ b/res/css/partials/reset.scss
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
diff --git a/res/css/partials/search-bar.scss b/res/css/partials/search-bar.scss
new file mode 100644
index 00000000..1353f2fd
--- /dev/null
+++ b/res/css/partials/search-bar.scss
@@ -0,0 +1,9 @@
+#search {
+  height: 30px;
+  max-width: 100%;
+}
+
+#searchdiv {
+  width: 200px;
+  float: right;
+}
diff --git a/res/css/partials/task-alert.scss b/res/css/partials/task-alert.scss
new file mode 100644
index 00000000..0cd101b7
--- /dev/null
+++ b/res/css/partials/task-alert.scss
@@ -0,0 +1,7 @@
+.help{
+  font-size: 20px;
+  position: fixed;
+  top: 5px;
+  left: 10px;
+  margin-left: 12px;
+}
diff --git a/res/css/partials/timeline-view.scss b/res/css/partials/timeline-view.scss
new file mode 100644
index 00000000..04eefda0
--- /dev/null
+++ b/res/css/partials/timeline-view.scss
@@ -0,0 +1,34 @@
+.history-timeline {
+  pointer-events: none;
+  z-index: -1;
+  position: absolute;
+  width: 100%;
+  justify-content: center;
+  bottom: 100px;
+}
+
+#gantbox{
+  position:absolute;
+  background-color: rgba(200,200,200,0.1);
+  height:100%;
+  width: 100%;
+  overflow: auto;
+  z-index:0;
+}
+
+.missingdates{
+  position:fixed;
+  bottom:60px;
+  left:160px;
+}
+
+.axis{
+  stroke: #ccc;
+  fill: #ccc;
+}
+
+.axis path,.axis line {
+  fill: none;
+  stroke: #ccc;
+  shape-rendering: crispEdges;
+}
diff --git a/res/css/partials/top-bar.scss b/res/css/partials/top-bar.scss
new file mode 100644
index 00000000..c43f6cce
--- /dev/null
+++ b/res/css/partials/top-bar.scss
@@ -0,0 +1,14 @@
+.logo {
+  position:fixed;
+  top:10px;
+  right:10px;
+  opacity: 0.7;
+
+}
+
+.poweredby{
+  position:fixed;
+  bottom:10px;
+  right:10px;
+  vertical-align: middle;
+}
\ No newline at end of file
diff --git a/res/css/partials/typography.scss b/res/css/partials/typography.scss
new file mode 100644
index 00000000..77aa003f
--- /dev/null
+++ b/res/css/partials/typography.scss
@@ -0,0 +1,23 @@
+//Font weights
+$light: 100;
+$regular: 400;
+$bold: 600;
+
+// Base font
+$base-font-family: 'Source Sans Pro', sans-serif;
+$base-font-weight: $regular;
+$base-font-size: 13px;
+$base-line-height: 1.4;
+
+// Fixed Font
+$fixed-font-family: monospace;
+$fixed-font-size: 85%;
+$fixed-line-height: $base-line-height;
+
+// Headings
+$header-font-weight: $bold;
+
+@font-face {
+  font-family: 'MyWebFont';
+  src: url(../../font/SourceSansPro-Regular.ttf) format('ttf');
+}
\ No newline at end of file