Merge pull request #5 from Rychard/GnomeApp

Create Javascript SPA / Routing via HTTP Method

GnomeApp/Content/css/gnomoria.custom.css

@@ -0,0 +1,143 @@
+/*
+    Colors: 
+        Header Bar - #09192A
+        Page Background: #E5EBF2
+        Headings - #333
+        Menu Item Border: #1B2835
+        Menu Item: Active - #225081
+        Header Bar: Icons: #77C0FD
+*/
+
+body {
+    background-color: #09192A;
+}
+
+.page-host {
+    background-color: #E5EBF2;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 60px;
+    bottom: 0;
+    margin: 0 0 0 260px;
+    overflow: auto;
+}
+
+section {
+    margin: 0 20px;
+}
+
+.navbar-brand {
+    color: #FFF !important;
+    width: 260px;
+    text-align: left;
+    height: 60px;
+    font-size: 30px;
+    font-weight: 700;
+    text-transform: uppercase;
+    line-height: 30px;
+}
+
+.navbar-nav li.loader {
+    margin: 12px 20px 0 0;
+    visibility: hidden;
+    color: #FFF;
+}
+
+.navbar-nav li.loader i {
+    vertical-align: middle;
+    margin-left: 5px;
+}
+
+.navbar-nav li.loader.active {
+    visibility: visible;
+}
+
+.loadingIndicator {
+    position: absolute; 
+    top: 0.1em; 
+    left: 0.1em; 
+    font: 0.8em Arial; 
+    background-color: #229; 
+    color: White; 
+    padding: 0.2em 0.5em 0.2em 0.5em; 
+    display: none;
+}
+
+.navbar-side {
+    z-index: 1;
+    top: 60px;
+    position: absolute;
+    width: 260px;
+}
+
+.sidebar-collapse > .nav > li {
+    border-bottom: 1px solid #6b6b6b;
+    border-bottom: 1px solid rgba(107, 107, 107, 0.2);
+}
+
+.sidebar-collapse > .nav > li:hover {
+    background-color: #3C6A9B!important;
+}
+
+.sidebar-collapse > .nav > li > a {
+    padding: 15px 10px;
+}
+
+.sidebar-collapse .nav > li > a {
+    color: #fff;
+    background: transparent;
+    text-shadow: none;
+}
+
+.sidebar-collapse .nav > li.staticText {
+    padding: 15px 10px;
+    color: #fff;
+    background: transparent;
+    text-shadow: none;
+}
+
+.sidebar-collapse .nav > li.staticText:hover {
+    background-color: transparent !important;
+}
+.active-menu {
+  background-color: #225081!important;
+}
+
+#main-menu > li > a > i {
+    margin-right: 10px;
+}
+
+table thead tr th {
+    background-color: #F7F7F7;
+}
+
+.active-row {
+    background-color: #fafad2;
+}
+
+.test {
+    color: #2c77ba;
+    color: #58B3F0;                
+    color: #C6E2EE;
+    color: #1F98C7;
+    color: #78C1DD;
+    color: #000000;
+    color: #111111;
+    color: #222222;
+    color: #252525;
+    color: #333333;
+    color: #555555;
+    color: #666666;
+    color: #777777;
+    color: #999999;
+    color: #AAAAAA;
+    color: #BBBBBB;
+    color: #CCCCCC;
+    color: #DDDDDD;
+    color: #E8E8E8;
+    color: #EEEEEE;
+    color: #F5F5F5;
+    color: #F9F9F9;
+    color: #FFFFFF;
+}

GnomeApp/Content/durandal.css

@@ -0,0 +1,197 @@
+/*!
+ * Durandal 2.1.0 Copyright (c) 2012 Blue Spire Consulting, Inc. All Rights Reserved.
+ * Available via the MIT license.
+ * see: http://durandaljs.com or https://github.com/BlueSpire/Durandal for details
+ */
+
+.modalBlockout {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: black;
+    opacity: 0;
+
+    pointer-events: auto;
+
+    -webkit-backface-visibility: hidden;
+
+    -webkit-transition: opacity 0.1s linear;
+    -moz-transition: opacity 0.1s linear;
+    -o-transition: opacity 0.1s linear;
+    transition: opacity 0.1s linear;
+}
+
+.modalHost {
+    top: 50%;
+    left: 50%;
+    position: fixed;
+    opacity: 0;
+
+    -webkit-backface-visibility: hidden;
+
+    -webkit-transition: opacity 0.1s linear;
+    -moz-transition: opacity 0.1s linear;
+    -o-transition: opacity 0.1s linear;
+    transition: opacity 0.1s linear;
+}
+
+.messageBox {
+    min-width: 300px;
+}
+
+.durandal-view-404 {
+    color: red;
+    margin: 8px 0;
+    padding: 8px;
+
+    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+
+    border: 1px solid #999;
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+}
+
+@-webkit-keyframes fadeOut {
+    0% {opacity: 1;}
+    100% {opacity: 0;}
+}
+
+@-moz-keyframes fadeOut {
+    0% {opacity: 1;}
+    100% {opacity: 0;}
+}
+
+@-o-keyframes fadeOut {
+    0% {opacity: 1;}
+    100% {opacity: 0;}
+}
+
+@keyframes fadeOut {
+    0% {opacity: 1;}
+    100% {opacity: 0;}
+}
+
+.entrance-out {
+    -webkit-animation-fill-mode:both;
+    -moz-animation-fill-mode:both;
+    -ms-animation-fill-mode:both;
+    -o-animation-fill-mode:both;
+    animation-fill-mode:both;
+    -webkit-animation-duration:0.1s;
+    -moz-animation-duration:0.1s;
+    -ms-animation-duration:0.1s;
+    -o-animation-duration:0.1s;
+    animation-duration:0.1s;
+    -webkit-animation-name: fadeOut;
+    -moz-animation-name: fadeOut;
+    -o-animation-name: fadeOut;
+    animation-name: fadeOut;
+}
+
+@-webkit-keyframes slideInRight {
+    0% {
+        opacity: 0;
+        -webkit-transform: translateX(20px);
+    }
+
+    100% {
+        opacity: 1;
+        -webkit-transform: translateX(0);
+    }
+}
+
+@-moz-keyframes slideInRight {
+    0% {
+        opacity: 0;
+        -moz-transform: translateX(20px);
+    }
+
+    100% {
+        opacity: 1;
+        -moz-transform: translateX(0);
+    }
+}
+
+@-o-keyframes slideInRight {
+    0% {
+        opacity: 0;
+        -o-transform: translateX(20px);
+    }
+
+    100% {
+        opacity: 1;
+        -o-transform: translateX(0);
+    }
+}
+
+@keyframes slideInRight {
+    0% {
+        opacity: 0;
+        transform: translateX(20px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+.entrance-in {
+    -webkit-animation-fill-mode:both;
+    -moz-animation-fill-mode:both;
+    -ms-animation-fill-mode:both;
+    -o-animation-fill-mode:both;
+    animation-fill-mode:both;
+    -webkit-animation-duration:0.5s;
+    -moz-animation-duration:0.5s;
+    -ms-animation-duration:0.5s;
+    -o-animation-duration:0.5s;
+    animation-duration:0.5s;
+    -webkit-animation-name: slideInRight;
+    -moz-animation-name: slideInRight;
+    -o-animation-name: slideInRight;
+    animation-name: slideInRight;
+}
+
+@-webkit-keyframes fadeIn {
+    0% {opacity: 0;}
+    100% {opacity: 1;}
+}
+
+@-moz-keyframes fadeIn {
+    0% {opacity: 0;}
+    100% {opacity: 1;}
+}
+
+@-o-keyframes fadeIn {
+    0% {opacity: 0;}
+    100% {opacity: 1;}
+}
+
+@keyframes fadeIn {
+    0% {opacity: 0;}
+    100% {opacity: 1;}
+}
+
+.entrance-in-fade {
+    -webkit-animation-fill-mode:both;
+    -moz-animation-fill-mode:both;
+    -ms-animation-fill-mode:both;
+    -o-animation-fill-mode:both;
+    animation-fill-mode:both;
+    -webkit-animation-duration:0.5s;
+    -moz-animation-duration:0.5s;
+    -ms-animation-duration:0.5s;
+    -o-animation-duration:0.5s;
+    animation-duration:0.5s;
+    -webkit-animation-name: fadeIn;
+    -moz-animation-name: fadeIn;
+    -o-animation-name: fadeIn;
+    animation-name: fadeIn;
+}