From 9bbb2ac43e9859c460b3a509404fa927288a1cc9 Mon Sep 17 00:00:00 2001 From: MaZderMind Date: Sat, 18 Oct 2014 18:29:33 +0200 Subject: room list style & content --- assets/css/src/lustige-styles.scss | 290 ++++++------------------------------- 1 file changed, 47 insertions(+), 243 deletions(-) (limited to 'assets/css/src') diff --git a/assets/css/src/lustige-styles.scss b/assets/css/src/lustige-styles.scss index 6271b16..8ca0ccf 100644 --- a/assets/css/src/lustige-styles.scss +++ b/assets/css/src/lustige-styles.scss @@ -266,282 +266,78 @@ a.inverted { } } -/* promoted videos */ -.promoted { +/* banner area */ +.banner { width: 100%; height: 300px; overflow: hidden; text-align: center; - background-image: url('assets/img/promoted_bg.jpg'); - .carousel.slide { - height: 290px; + background-image: url('../img/promoted_bg.jpg'); + position: relative; + + img { position: relative; - top: -112px; - } - .carousel-inner { - height: 100%; - } - .item:hover { - text-decoration: none; - } - .item img { + z-index: 1; height: 190px; display: inline-block; margin-top: 12px; border: 1px solid $transparent-white; + background-color: $transparent-white; } + .titlebar { width: 100%; height: 112px; background-color: $transparent-white; - position: relative; - top: 188px; - } - .carousel-caption { - position: relative; - top: 0; - height: 90px; - overflow: hidden; - left: initial; - right: initial; - padding: 0; - } - .title { + position: absolute; + line-height: 112px; + bottom: 0; color: white; - margin: 0.7em; - margin-bottom: 0; - } - .subtitle { - font-size: 18px; - color: $brand-primary; - margin: 0 0.8em; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; + font-size: 30px; + text-shadow: 0 1px 2px rgba(0,0,0,0.6); } } -/* browse folders and conferences */ -.thumbnail { - display: block; - float: left; - text-align: center; - font-size: 16px; - min-width: 130px; - margin: 5px; - height: 135px; - - .header { - text-align: left; - } - - &:hover, &:focus, &:active { - text-decoration: none; - } - - &.folder { - background-color: $brand-primary; - color: white; - - .header { - margin-bottom: $padding-large-vertical; - } - - .fa.fa-folder { - font-size: 40px; - padding: 10px 0; - } - - &:hover, &:focus, &:active { - background-color: $gray-dark; - } - - .caption { - color: white; - } - } - - &.conference { - color: $gray-dark; - - img { - height: 64px; - margin: $padding-small-vertical auto; - } - - .caption { - color: white; - background-color: $gray-dark; - -webkit-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - } - - &:hover, &:focus, &:active { - color: $brand-primary; - .caption { - background-color: $brand-primary; - } - } - } -} - -/* events overview */ -.event-previews, .event-previews-tags, .event-previews-search { - .event-preview { - margin: 16px 0; - display: block; - clear: both; - height: 120px; - - .video-thumbnail { - float: left; - height: 120px; - width: 160px; - } - - &:hover, &:focus, &:active { - text-decoration: none; - .caption h3 { - color: $link-color; - } - .metadata li { - color: $link-color; - } - } - - .metadata { - text-align: left; - border: none; - li { - padding: $padding-xs-vertical; - padding-right: $padding-xs-horizontal; - color: $gray-dark; - min-width: inherit; - } - } - - .caption { - margin-left: 160px; - padding-left: $padding-large-horizontal; - h3 { - margin-top: 0; - color: black; - } - } - } -} - -.events-header { - clear: both; - img { - float: left; - max-height: 40px; - margin-right: $padding-small-horizontal; - } - #sorting { - margin: $padding-large-vertical 0; - float: right; - } -} - -/* event overview for tags */ -.event-previews-tags .event-preview, -.event-previews-search .event-preview { - height: auto; +.rooms { + .room-group { + background-color: $gray-dark; overflow: hidden; - - /* search results numbering */ - h3 .number::after { - content: '.'; - } - .conference-logo { - float: left; - width: 100px; - height: auto; - } - .caption { - margin-left: 100px; - } - - .metadata { - margin-bottom: 0; - } -} - + margin-bottom: 2em; -.search { - h1 { - margin-bottom: 10px; - } - .statistics { - margin-top: 15px; - display: none; - &.visible { - display: block; + h2 { + margin: 0.6em 1.2em; } - } - .paging { - display: none; - clear: both; - font-size: 24px; - margin: 50px 0 0 80px; - - &.visible { - display: block; + ul { + list-style-type: none; } li { - display: block; - text-align: center; - float: left; list-style-type: none; - padding: 0 5px; + width: 49%; + margin-bottom: 1%; + height: 3em; + float: left; - a:hover { - text-decoration: none; + a { + color: white; + display: block; + width: 100%; + height: 100%; + line-height: 100%; + font-size: 1.75em; + font-weight: bold; } - &.next, &.prev { - display: none; - &.visible { display: block; } - } - &.next { margin-left: 12px; } - &.prev { margin-right: 12px; } - &.active { - background-color: #555; - border-radius: 5px; - a, a:hover { - color: #eee; - } + + &:nth-child(2n+1) { + margin-right: 1%; } } } - /* search results listing */ - ol.event-previews-search { - list-style-type: none; - &, >li { - margin: 0; - padding: 0; - } - - >li.no-results { - margin: 30px 0; - } - } } -/* Font classes - Tags */ -.tag-cloud { margin-top: 1.5em; } -.tag-cloud .xtiny { font-size: 0.9em; text-decoration:none; } -.tag-cloud .tiny { font-size: 1.1em; font-weight:lighter; } -.tag-cloud .normal{ font-size: 1.3em; text-decoration:none; } -.tag-cloud .large { font-size: 1.5em; text-decoration:none; } -.tag-cloud .xlarge { font-size: 1.75em; font-weight:bold; } - - /* and now for medium screens: */ @media all and (min-width: $screen-sm-min) and (max-width: $container-desktop) { @@ -606,11 +402,12 @@ a.inverted { /* promoted videos */ .promoted { height: 230px; - .item img { + img { height: 120px; + width: auto; } .titlebar { - top: 118px; + //padding-top: 20px; } } @@ -678,3 +475,10 @@ a.inverted { } } } + + + + + + + -- cgit v1.2.3