From 58f69e634e954fc9e2d3f767722ffbae32ee0047 Mon Sep 17 00:00:00 2001 From: MaZderMind Date: Sat, 4 Apr 2015 20:40:58 +0200 Subject: Move Styles completely into their own assemblies --- assets/css/_closed.less | 8 +++ assets/css/_error.less | 25 +++++++++ assets/css/_feedback.less | 21 ++++++++ assets/css/_multiview.less | 33 ++++++++++++ assets/css/_overview.less | 110 +++++++++++++++++++------------------- assets/css/_relive.less | 47 +++++++++++------ assets/css/_relive_player.less | 10 ---- assets/css/_room.less | 116 +++++++++++++++++++++-------------------- assets/css/_structure.less | 109 +++----------------------------------- 9 files changed, 239 insertions(+), 240 deletions(-) create mode 100644 assets/css/_closed.less create mode 100644 assets/css/_error.less create mode 100644 assets/css/_feedback.less create mode 100644 assets/css/_multiview.less delete mode 100644 assets/css/_relive_player.less diff --git a/assets/css/_closed.less b/assets/css/_closed.less new file mode 100644 index 0000000..bea3ffd --- /dev/null +++ b/assets/css/_closed.less @@ -0,0 +1,8 @@ +body.closed { + p { + margin-top: 50px; + } + h1, h2, p { + text-align: center; + } +} diff --git a/assets/css/_error.less b/assets/css/_error.less new file mode 100644 index 0000000..c779c29 --- /dev/null +++ b/assets/css/_error.less @@ -0,0 +1,25 @@ +body.e404, +body.e500 { + > .container { + text-align: center; + h1 { + font-size: @jumbo-font-size; + margin: 50px 0 50px 0; + } + + img { + background-color: @brand-primary; + max-width: 80%; + } + } +} + +body.e500 { + pre { + text-align: left; + } + + img { + .rotate(180deg); + } +} diff --git a/assets/css/_feedback.less b/assets/css/_feedback.less new file mode 100644 index 0000000..6d9056a --- /dev/null +++ b/assets/css/_feedback.less @@ -0,0 +1,21 @@ +body.feedback { + .feedback-thankyou, + .feedback-error { + font-size: @jumbo-font-size; + text-align: center; + padding: 30px; + + display: none; + + .well(); + } +} + +body.feedback-read { + td { + white-space: nowrap; + &.issuetext { + white-space: normal; + } + } +} diff --git a/assets/css/_multiview.less b/assets/css/_multiview.less new file mode 100644 index 0000000..59b8e37 --- /dev/null +++ b/assets/css/_multiview.less @@ -0,0 +1,33 @@ +body.multiview { + .cell { + background-color: white; + + h2 { + font-size: 14px; + padding: 10px; + margin: 0; + } + + .meter { + background-color: gray; + height: 45px; + position: relative; + + .bar { + background-color: red; + position: absolute; + bottom: 0; + } + } + + .timer { + background-color: #909090; + height: 30px; + + text-align: right; + font-size: 22px; + padding-right: 5px; + color: white; + } + } +} diff --git a/assets/css/_overview.less b/assets/css/_overview.less index 86098b3..9337cb0 100644 --- a/assets/css/_overview.less +++ b/assets/css/_overview.less @@ -1,80 +1,82 @@ -.room { - text-align: center; +body.overview { + .room { + text-align: center; - .panel-heading { - display: none; - } + .panel-heading { + display: none; + } - &.has-preview { - .title { - text-align: left; - line-height: 120px; + &.has-preview { + .title { + text-align: left; + line-height: 120px; + } } - } - &.has-schedule.has-preview { - text-align: left; + &.has-schedule.has-preview { + text-align: left; - .panel-heading { - display: block; - } - .title { - display: none; - line-height: inherit; + .panel-heading { + display: block; + } + .title { + display: none; + line-height: inherit; + } } - } - .preview { - float: left; - margin-right: @padding-base-horizontal; + .preview { + float: left; + margin-right: @padding-base-horizontal; - @media (max-width: @screen-xs-min) { - margin-bottom: @padding-base-vertical; + @media (max-width: @screen-xs-min) { + margin-bottom: @padding-base-vertical; + } } - } - a.title { - font-size: 2.5em; - display: block; - } + a.title { + font-size: 2.5em; + display: block; + } - .program-schedule .talk { - display: inline; - margin-right: @padding-base-horizontal; - } - - &.has-schedule.has-preview { .program-schedule .talk { - display: block; + display: inline; + margin-right: @padding-base-horizontal; } - @media (max-width: @screen-xs-min) { - .program-schedule { - clear: both; + &.has-schedule.has-preview { + .program-schedule .talk { + display: block; + } + + @media (max-width: @screen-xs-min) { + .program-schedule { + clear: both; + } } } - } - &.has-preview { - .program-schedule .next-talk { - margin-top: @padding-base-vertical; + &.has-preview { + .program-schedule .next-talk { + margin-top: @padding-base-vertical; + } } } -} -.recordings a { - font-size: @jumbo-font-size; - line-height: @jumbo-line-height; + .recordings a { + font-size: @jumbo-font-size; + line-height: @jumbo-line-height; - @media (max-width: @screen-xs-min) { - font-size: @jumbo-font-size-xs; - } + @media (max-width: @screen-xs-min) { + font-size: @jumbo-font-size-xs; + } - display: block; - text-align: center; + display: block; + text-align: center; - &:hover { - text-decoration: none; + &:hover { + text-decoration: none; + } } } diff --git a/assets/css/_relive.less b/assets/css/_relive.less index a4e3f43..bd28747 100644 --- a/assets/css/_relive.less +++ b/assets/css/_relive.less @@ -1,25 +1,40 @@ -.recording { - .preview { - @media (max-width: @screen-xs-min) { - margin-bottom: @padding-large-vertical; +body.relive { + .recording { + .preview { + @media (max-width: @screen-xs-min) { + margin-bottom: @padding-large-vertical; + } + + @media (min-width: @screen-xs-min) { + float: left; + margin-right: @padding-base-horizontal; + } } - @media (min-width: @screen-xs-min) { - float: left; - margin-right: @padding-base-horizontal; + .metadata { + list-style-type: none; + padding-left: 0; + margin-top: 5px; + @media (min-width: @screen-xs-min) { + margin-left: 213px; + } + + li { + padding: 5px 0; + } } } +} - .metadata { - list-style-type: none; - padding-left: 0; - margin-top: 5px; - @media (min-width: @screen-xs-min) { - margin-left: 213px; - } +body.relive-player { + .player-wrap { + padding: 50px 0; + border: 1px solid #ddd; + border-radius: @border-radius-large; + margin-bottom: 25px; - li { - padding: 5px 0; + .video-wrap { + margin: 0 auto; } } } diff --git a/assets/css/_relive_player.less b/assets/css/_relive_player.less deleted file mode 100644 index 6161180..0000000 --- a/assets/css/_relive_player.less +++ /dev/null @@ -1,10 +0,0 @@ -.player-wrap { - padding: 50px 0; - border: 1px solid #ddd; - border-radius: @border-radius-large; - margin-bottom: 25px; - - .video-wrap { - margin: 0 auto; - } -} diff --git a/assets/css/_room.less b/assets/css/_room.less index 0c7327d..cd6d4c9 100644 --- a/assets/css/_room.less +++ b/assets/css/_room.less @@ -1,85 +1,87 @@ -@media (min-width: @screen-sm-min) { - .tab-content { - border-left: 1px solid #ddd; - border-bottom: 1px solid #ddd; - border-right: 1px solid #ddd; +body.room { + @media (min-width: @screen-sm-min) { + .tab-content { + border-left: 1px solid #ddd; + border-bottom: 1px solid #ddd; + border-right: 1px solid #ddd; + } } -} - -.player-wrap.tab-content { - padding: 40px 0; -} -.video.hd .player-wrap.tab-content { - padding: 0; -} + .player-wrap.tab-content { + padding: 40px 0; + } -@media (max-width: @screen-md-max) { - .video.sd .player-wrap.tab-content { + .video.hd .player-wrap.tab-content { padding: 0; } -} -.player-wrap { - margin-bottom: 60px; - overflow: hidden; -} - -.video-wrap { - margin: 0 auto; -} + @media (max-width: @screen-md-max) { + .video.sd .player-wrap.tab-content { + padding: 0; + } + } -.functions-wrap -{ - > .tab-pane { + .player-wrap { + margin-bottom: 60px; overflow: hidden; } - #switcher { - .row { - margin-bottom: @padding-large-vertical; + .video-wrap { + margin: 0 auto; + } + + .functions-wrap + { + > .tab-pane { + overflow: hidden; } - .btn-group { - margin-bottom: @padding-base-vertical; + #switcher { + .row { + margin-bottom: @padding-large-vertical; + } + + .btn-group { + margin-bottom: @padding-base-vertical; + } } - } - #chat { - text-align: center; + #chat { + text-align: center; - > div { - margin: 25px; + > div { + margin: 25px; - > a { - font-size: 18px; + > a { + font-size: 18px; - @media (min-width: @screen-sm-min) { - font-size: @jumbo-font-size; - } + @media (min-width: @screen-sm-min) { + font-size: @jumbo-font-size; + } - &.twitterlink { - @twitter: #55ACEE; // Twitter-Blue - .button-variant(white; @twitter; darken(@twitter, 5%);); + &.twitterlink { + @twitter: #55ACEE; // Twitter-Blue + .button-variant(white; @twitter; darken(@twitter, 5%);); + } } } } - } - #feedback { - padding: floor(@grid-gutter-width/2) 0; + #feedback { + padding: floor(@grid-gutter-width/2) 0; - .feedback-error, - .feedback-thankyou { - font-size: @jumbo-font-size; - text-align: center; - padding: 30px; + .feedback-error, + .feedback-thankyou { + font-size: @jumbo-font-size; + text-align: center; + padding: 30px; - display: none; + display: none; + } } - } - #schedule { - @import "_schedule.less"; + #schedule { + @import "_schedule.less"; + } } } diff --git a/assets/css/_structure.less b/assets/css/_structure.less index 4bf1c21..5d8957c 100644 --- a/assets/css/_structure.less +++ b/assets/css/_structure.less @@ -77,106 +77,9 @@ body { } } -body.overview { - @import "_overview.less"; -} -body.room { - @import "_room.less"; -} -body.relive { - @import "_relive.less"; -} -body.relive-player { - @import "_relive_player.less"; -} - -body.e404, -body.e500 { - > .container { - text-align: center; - h1 { - font-size: @jumbo-font-size; - margin: 50px 0 50px 0; - } - - img { - background-color: @brand-primary; - max-width: 80%; - } - } -} - -body.e500 { - pre { - text-align: left; - } - - img { - .rotate(180deg); - } -} - -body.feedback { - .feedback-thankyou, - .feedback-error { - font-size: @jumbo-font-size; - text-align: center; - padding: 30px; - - display: none; - - .well(); - } -} - -body.feedback-read { - td { - white-space: nowrap; - &.issuetext { - white-space: normal; - } - } -} - -body.multiview { - .cell { - background-color: white; - - h2 { - font-size: 14px; - padding: 10px; - margin: 0; - } - - .meter { - background-color: gray; - height: 45px; - position: relative; - - .bar { - background-color: red; - position: absolute; - bottom: 0; - } - } - - .timer { - background-color: #909090; - height: 30px; - - text-align: right; - font-size: 22px; - padding-right: 5px; - color: white; - } - } -} - -body.closed { - p { - margin-top: 50px; - } - h1, h2, p { - text-align: center; - } -} \ No newline at end of file +@import "_error.less"; +@import "_overview.less"; +@import "_room.less"; +@import "_relive.less"; +@import "_multiview.less"; +@import "_closed.less"; -- cgit v1.2.3