1 files changed, 73 insertions, 22 deletions
diff --git a/themes/base.less b/themes/base.less
index 83602c3b..3cef3d11 100644
--- a/themes/base.less
+++ b/themes/base.less
@@ -10,32 +10,83 @@ body {
   color: @text-muted;
 }
 
-#shifts {
-  td {
-    &.free {
-      border: 1px solid @brand-danger;
-      .bg-danger();
-    }
-    &.occupied {
-      border: 1px solid @brand-success;
-      .bg-success();
-    }
-    &.collides {
-      border: 1px solid @brand-warning;
-      .bg-warning();
-    }
-    &.own {
-      border: 1px solid @gray-light;
-    }
-  }
+.panel-primary .panel-heading a {
+  color: @panel-primary-text;
+}
+
+.panel-default .panel-heading a {
+  color: @panel-default-text;
 }
 
-.row-day {
-  border-top: 2px solid @gray-light;
+.panel-info .panel-heading a {
+  color: @panel-info-text;
 }
 
-.row-header {
-  min-width: 90px;
+.panel-success .panel-heading a {
+  color: @panel-success-text;
+}
+
+.panel-warning .panel-heading a {
+  color: @panel-warning-text;
+}
+
+.panel-danger .panel-heading a {
+  color: @panel-danger-text;
+}
+
+.shift-calendar {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-itmes: stretch;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-itmes: stretch;
+  width: 100%;
+  
+	.lane {
+	  background: @table-bg-accent;
+	  flex-grow: 1;
+	  min-width: 300px;
+	  width: 300px;
+	  flex-grow: 1;
+	  
+		.header {
+		  background: @panel-bg;
+		  height: 30px;
+		  padding: 5px;
+		}
+  
+	  .tick {
+	    height: 30px;
+	    border-top: 1px solid darken(@table-bg-accent, 2%);
+	  }
+    
+    .tick.hour {
+      border-top: 2px solid @table-border-color;
+      font-size: 0.9em;
+      padding-left: 5px;
+    }
+    
+    .tick.day {
+      border-top: 2px solid @brand-primary;
+      font-size: 0.9em;
+      padding-left: 5px;
+    }
+	}
+	
+	.lane.time {
+	  flex-grow: 0;
+	  min-width: 100px;
+	  width: 100px;
+	  flex-grow: 0;
+	}
+	
+	.shift {
+	  margin: 0 5px 5px 0;
+	  overflow: hidden;
+	}
 }
 
 .space-top {