program view

3 files changed, 132 insertions, 15 deletions

diff --git a/assets/css/_program.less b/assets/css/_program.less
new file mode 100644
index 0000000..db87d04
--- /dev/null
+++ b/assets/css/_program.less
@@ -0,0 +1,94 @@
+.program {
+	&.scroll-container {
+		overflow: hidden;
+		overflow-x: scroll;
+	}
+
+	.scroll-element {
+		position: relative;
+	}
+
+	.room {
+		overflow: hidden;
+	}
+
+	.now {
+		position: absolute;
+		left: 0;
+		width: 150px;
+		height: 500px;
+		background-color: @program-now-bg;
+		font-size: 14px;
+
+		//z-index: -5;
+
+		span {
+			display: block;
+			position: absolute;
+			right: -28px;
+			color: @program-now;
+		}
+	}
+
+	.block {
+		overflow: hidden;
+		float: left;
+		height: 100px;
+
+		/* and now for small screens: */
+		@media all and (max-width: @screen-xs-max) {
+			height: 75px;
+		}
+
+
+		padding: 10px;
+		border: 1px solid white;
+
+		h3 {
+			margin: 0;
+			padding: 0;
+
+			/* and now for small screens: */
+			@media all and (max-width: @screen-xs-max) {
+				font-size: 22px;
+			}
+		}
+
+		h4 {
+			margin: 3px 0;
+			color: @program-room;
+			a {
+				color: @program-room;
+			}
+		}
+
+		h5 {
+			color: @program-author;
+		}
+
+		&.event h3 {
+			overflow: hidden;
+		}
+
+		&.gap {
+			background-image: url(../img/stripes/gap.png);
+			background-color: @program-gap-bg;
+			color: @program-gap;
+		}
+
+		&.daychange { 
+			background-image: url(../img/stripes/gap.png);
+			background-color: @program-daychange-bg;
+			color: @program-daychange;
+		}
+
+		&.pause {
+			background-color: @program-pause-bg;
+			color: @program-pause;
+		}
+	}
+
+	.room.highlight .block {
+		background-color: @program-selected-room;
+	}
+}
diff --git a/assets/css/_room.less b/assets/css/_room.less
index 91e71c0..17d9742 100644
--- a/assets/css/_room.less
+++ b/assets/css/_room.less
@@ -28,25 +28,30 @@
 	margin: 0 auto;
 }
 
-.functions-wrap #switcher {
-	.row {
-		margin-bottom: @padding-large-vertical;
-	}
+.functions-wrap
+{
+	#switcher {
+		.row {
+			margin-bottom: @padding-large-vertical;
+		}
 
-	.btn-group {
-		margin-bottom: @padding-base-vertical;
+		.btn-group {
+			margin-bottom: @padding-base-vertical;
+		}
 	}
-}
 
-.functions-wrap .chat {
-	text-align: center;
-	overflow: hidden;
+	#chat {
+		text-align: center;
+		overflow: hidden;
 
-	> div {
-		margin: 25px;
+		> div {
+			margin: 25px;
 
-		> a {
-			font-size: @jumbo-font-size;
+			> a {
+				font-size: @jumbo-font-size;
+			}
 		}
 	}
 }
+
+@import "_program.less";
diff --git a/assets/css/_structure.less b/assets/css/_structure.less
index 1f38fbf..8a616a8 100644
--- a/assets/css/_structure.less
+++ b/assets/css/_structure.less
@@ -5,9 +5,27 @@
 
 @img: '../img/';
 
-@jumbo-font-size: 52px;
+@jumbo-font-size:   52px;
 @jumbo-line-height: 45px;
 
+@program-now:       @brand-danger;
+@program-now-bg:    fade(lighten(@brand-danger, 20%), 60%);
+
+@program-room:      darken(@brand-primary, 15%);
+@program-author:    #444;
+
+@program-selected-room: lighten(@brand-success, 10%);
+
+@program-daychange:    white;
+@program-daychange-bg: fade(white, 30%);
+
+@program-gap:          white;
+@program-gap-bg:       fade(white, 30%);
+
+@program-pause:        white;
+@program-pause-bg:     lighten(black, 85%);
+
+
 // website configuration styles
 
 .navbar {