From 911e7ac836aa61641c90e3bdb10b96c614b2aa2f Mon Sep 17 00:00:00 2001 From: MaZderMind Date: Sun, 1 Mar 2015 13:01:15 +0100 Subject: program view --- assets/css/_program.less | 94 ++++++++++++++++++++++++++++++++++++++++++++++ assets/css/_room.less | 33 +++++++++------- assets/css/_structure.less | 20 +++++++++- 3 files changed, 132 insertions(+), 15 deletions(-) create mode 100644 assets/css/_program.less (limited to 'assets/css') 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 { -- cgit v1.2.3