diff --git a/Gemfile b/Gemfile index e5f811a..ce9f29f 100644 --- a/Gemfile +++ b/Gemfile @@ -32,7 +32,7 @@ gem 'tinymce-rails', '~> 3.5.9' gem 'sass', '~> 3.3.4' gem 'sass-rails', '~> 3.2.6' -gem 'font-awesome-sass', '~> 4.0.3.1' +gem 'font-awesome-sass', '~> 4.1.0.0' gem 'bourbon', '~> 3.1.8' gem 'neat', '~> 1.6.0' gem 'haml' diff --git a/Gemfile.lock b/Gemfile.lock index 91e8fde..39ff4d7 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -111,7 +111,7 @@ GEM faraday (0.9.0) multipart-post (>= 1.2, < 3) ffi (1.9.3) - font-awesome-sass (4.0.3.1) + font-awesome-sass (4.1.0) sass (~> 3.2) gruff (0.3.7) haml (4.0.5) @@ -277,7 +277,7 @@ DEPENDENCIES exceptional (~> 2.0.33) factory_girl_rails (~> 4.4.1) faraday (~> 0.9.0) - font-awesome-sass (~> 4.0.3.1) + font-awesome-sass (~> 4.1.0.0) gruff (~> 0.3.6) haml jquery-rails (~> 2.0.2) diff --git a/app/assets/images/themes/flat/layout/forum-bg-pattern.png b/app/assets/images/themes/flat/layout/forum-bg-pattern.png new file mode 100644 index 0000000..9b0f171 Binary files /dev/null and b/app/assets/images/themes/flat/layout/forum-bg-pattern.png differ diff --git a/app/assets/images/themes/flat/layout/forum-bg-pattern@2x.png b/app/assets/images/themes/flat/layout/forum-bg-pattern@2x.png new file mode 100644 index 0000000..cad04a3 Binary files /dev/null and b/app/assets/images/themes/flat/layout/forum-bg-pattern@2x.png differ diff --git a/app/assets/images/themes/flat/layout/forum-category-highlight.png b/app/assets/images/themes/flat/layout/forum-category-highlight.png new file mode 100644 index 0000000..0d00675 Binary files /dev/null and b/app/assets/images/themes/flat/layout/forum-category-highlight.png differ diff --git a/app/assets/images/themes/flat/layout/forum-category.png b/app/assets/images/themes/flat/layout/forum-category.png new file mode 100644 index 0000000..61f4eaa Binary files /dev/null and b/app/assets/images/themes/flat/layout/forum-category.png differ diff --git a/app/assets/stylesheets/errors.css.scss b/app/assets/stylesheets/themes/default/errors.css.scss similarity index 100% rename from app/assets/stylesheets/errors.css.scss rename to app/assets/stylesheets/themes/default/errors.css.scss diff --git a/app/assets/stylesheets/themes/flat/_variables.scss b/app/assets/stylesheets/themes/flat/_variables.scss new file mode 100644 index 0000000..ba89a31 --- /dev/null +++ b/app/assets/stylesheets/themes/flat/_variables.scss @@ -0,0 +1,117 @@ +/* + Theme Path +*/ + +$theme-name: 'flat'; +$theme-path: "themes/#{$theme-name}"; + +/* + Neat Overrides +*/ + +$max-width: 1140px; +$gutter: em(20); + +/* + Grid Debugging +*/ + +// $visual-grid: true; +// $visual-grid-index: 10000; +// $visual-grid-opacity: 0.5; + +/* + Neat Breakpoints +*/ + +$medium-screen: 640px; +$large-screen: 860px; + +$medium-screen-up: new-breakpoint(min-width $medium-screen 4); +$large-screen-up: new-breakpoint(min-width $large-screen 8); + +/* + Typography +*/ + +$open-sans: 'Open Sans', sans-serif; +$montserrat: 'Montserrat', sans-serif; +$fontawesome: 'FontAwesome'; +$sans-serif: $open-sans; + +$base-font-family: $sans-serif; +$header-font-family: $montserrat; + +/* + Sizes +*/ + +$base-font-size: 14px; +$base-line-height: $base-font-size * 1.5; +$base-border-radius: 3px; + +/* + Colours +*/ + +$red: #de8650; +$green: darken(#68cc90, 10); +$blue: #3379A9; +$gold: #FFD700; + +$dark-blue: darken($blue, 15); +$deep-blue: darken($dark-blue, 15); +$dark-gray: #21262A; + +$medium-gray: #2F383D; + +$light-blue: darken(#2FB0E7, 5); +$light-gray: darken(#ECF1F5, 5); +$light-red: #e56c69; +$light-yellow: #FFF6BF; +$light-green: #1f7f5c; + +$base-body-color: white; +$base-font-color: black; +$base-accent-color: $blue; +$base-link-color: $base-accent-color; +$hover-link-color: lighten($base-accent-color, 15); +$base-border-color: $light-gray; + +$content-color: lighten($light-gray, 5%); +$error-color: $light-red; +$notice-color: $light-yellow; +$success-color: $light-green; + +$background-primary: $medium-gray; + +$navbar-primary: $blue; +$navbar-secondary: $light-blue; +$navbar-border: lighten($dark-gray, 10); +$navbar-text: white; + +$flash-text: white; +$flash-notice: $blue; +$flash-success: $green; +$flash-warning: $red; +$flash-error: #e56c69; + +$input-font-size: $base-font-size; +$input-primary: white; +$input-secondary: $blue; +$input-text: #232323; +$input-border-width: 2px; +$input-border-colour: darken($light-gray, 10%); +$input-padding: 9px; +$input-border-radius: $base-border-radius; + +$button-primary: $blue; +$button-secondary: $green; +$button-text: white; + +/* + Shadows +*/ + +$content-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15); +$light-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1); diff --git a/app/assets/stylesheets/themes/flat/components/_breadcrumbs.scss b/app/assets/stylesheets/themes/flat/components/_breadcrumbs.scss new file mode 100644 index 0000000..b2dd4ee --- /dev/null +++ b/app/assets/stylesheets/themes/flat/components/_breadcrumbs.scss @@ -0,0 +1,17 @@ +/* + Breadcrumbs +*/ + +.breadcrumbs { + @include span-columns(12); + margin-bottom: 20px; + + a { + display: inline-block; + font-size: $base-font-size + 2px; + } + + .fa { + margin: 0 10px; + } +} diff --git a/app/assets/stylesheets/themes/flat/components/_comments.scss b/app/assets/stylesheets/themes/flat/components/_comments.scss new file mode 100644 index 0000000..796ab21 --- /dev/null +++ b/app/assets/stylesheets/themes/flat/components/_comments.scss @@ -0,0 +1,115 @@ +/* + Thread List +*/ + +#comments-thread { + @include span-columns(12); + + h3 { + margin: 1em 0; + } +} + +/* + Comment +*/ + +.comment { + $comment-gutter: 1.4em; + $comment-image-padding: 3px; + $comment-image-width: 4em; + $comment-color: $base-font-color; + $comment-background: $light-gray; + $comment-detail-color: transparentize($comment-color, .5); + $comment-image-vert-alignment: top; + + position: relative; + width: 100%; + margin-bottom: $base-line-height; + padding-bottom: 1em; + border-bottom: 1px solid $light-gray; + + .comment-image, + .comment-content { + display: table-cell; + vertical-align: $comment-image-vert-alignment; + } + + .comment-image { + padding-right: $comment-gutter; + + > img { + width: $comment-image-width; + height: auto; + border-radius: $base-border-radius; + padding: $comment-image-padding; + background: $comment-background; + display: block; + max-width: none; + } + + .comment-reverse-order & { + padding-right: 0; + padding-left: 10px; + } + } + + .comment-content { + width: 100%; + position: relative; + + h1 { + font-size: 1em; + margin-bottom: .5em; + } + + a.user, + a.team { + display: inline-block; + } + + a.user { + margin-right: 10px; + } + + a.team { + margin-left: 10px; + } + + p { + margin-bottom: .5em; + } + + p.comment-detail { + font-style: italic; + font-size: .9em; + color: $comment-detail-color; + margin-top: 10px; + } + + .controls { + position: absolute; + top: - 5px; + right: 0; + } + } +} + +/* + Comment Form +*/ + +.comment-form { + @include span-columns(12); + margin-bottom: 20px; + + h1, + h5 { + margin-top: 0; + margin-bottom: 1em; + } + + .fields { + margin-bottom: 20px; + } +} diff --git a/app/assets/stylesheets/themes/flat/components/_flashes.scss b/app/assets/stylesheets/themes/flat/components/_flashes.scss new file mode 100644 index 0000000..8729f09 --- /dev/null +++ b/app/assets/stylesheets/themes/flat/components/_flashes.scss @@ -0,0 +1,65 @@ +/* + Flash Messages +*/ + +.flash { + @include span-columns(12); + margin-bottom: 20px; + font-weight: 600; + + &.notice { + @include flash; + } + + &.success { + @include flash($flash-success); + + &:before { + content: "\f00c"; + } + } + + &.error { + @include flash($flash-error); + + &:before { + content: "\f00d"; + } + } + + &.warning, + &.alert { + @include flash($flash-warning); + + &:before { + content: "\f071"; + } + } +} + +/* + Error Messages +*/ + +div#errors { + @extend .flash.error; + @include span-columns(12); + margin-bottom: 20px; + + strong { + @include span-columns(12); + margin-bottom: 10px; + } + + ul.errors { + @include span-columns(12); + + li { + margin-bottom: 0; + + &:last-child { + margin-bottom: 0; + } + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/themes/flat/components/_forms.scss b/app/assets/stylesheets/themes/flat/components/_forms.scss new file mode 100644 index 0000000..4c70a55 --- /dev/null +++ b/app/assets/stylesheets/themes/flat/components/_forms.scss @@ -0,0 +1,321 @@ +/* + Forms +*/ + +$input-height: 35px; + +form { + + .inline { + float: left; + display: inline-block; + width: auto; + margin-bottom: 20px; + + input { + margin-bottom: 0; + } + } + + .fields { + > .field_with_errors:first-child, + > label { + padding: 9px 0; + line-height: $input-font-size; + } + + > .field_with_errors { + + input, + input[type=text], + textarea { + border: $input-border-width solid $flash-error; + + &:hover, + &:focus { + border-color: $flash-error; + } + + &:focus { + color: $input-text; + } + } + } + + .select-wrapper { + $select-padding: 6px; + $select-height: $input-height - 4px; + + border-radius: $input-border-radius; + background-color: $input-primary; + border: $input-border-colour solid $input-border-width; + position: relative; + display: inline-block; + margin-right: 10px; + float: left; + max-width: 100%; + + select { + @include appearance(none); + font-size: $input-font-size; + font-family: $open-sans; + float: left; + display: block; + width: auto; + position: relative; + line-height: $select-height/2 + 4px; + vertical-align: middle; + max-height: $select-height; + margin-left: 0; + border: 0; + margin: 0; + padding: $select-padding ($select-height + 10) $select-padding $input-padding; + font-size: $input-font-size; + max-width: 100%; + + option { + font-size: $input-font-size; + } + + &:focus { + outline: none; + } + } + + &:after { + font-family: $fontawesome; + pointer-events: none; + content: $fa-var-chevron-down; + font-weight: normal; + font-style: normal; + position: absolute; + top: 0; + right: 0; + text-align: center; + padding-top: 6px; + width: $select-height; + height: $select-height - 4px; + border-left: $input-border-width solid $input-border-colour; + color: $input-border-colour; + } + + &:hover { + border: $input-border-width solid lighten($input-secondary, 20%); + + &:after { + border-left: $input-border-width solid lighten($input-secondary, 20%); + color: $base-font-color; + } + } + + &:focus { + border: $input-border-width solid $input-secondary; + color: $input-secondary; + } + } + + input[type=text], + input[type=password], + input[type=email], + textarea { + border-radius: $input-border-radius; + background-color: $input-primary; + color: $input-text; + font-size: $input-font-size; + padding: 0 $input-padding; + height: $input-height; + border: $input-border-colour solid $input-border-width; + + &:hover { + border: $input-border-width solid lighten($input-secondary, 20%); + } + + &:focus { + border: $input-border-width solid $input-secondary; + outline: none; + } + + &[disabled] { + + &:hover { + border-color: $input-border-colour; + cursor: not-allowed; + } + } + } + + textarea { + padding: $input-padding; + font-family: $open-sans; + } + + .inputs label.checkbox, + > label.checkbox { + position: relative; + width: $input-height; + height: $input-height; + overflow: hidden; + + &:before { + @include box-sizing(border-box); + content: ""; + display: block; + border-radius: $input-border-radius; + width: $input-height; + height: $input-height; + padding: $input-padding; + background-color: $input-primary; + border: $input-border-colour solid $input-border-width; + margin: 0; + } + + &:hover { + + &:before { + border: $input-border-width solid lighten($input-secondary, 20%); + } + } + } + + input[type=checkbox] { + display: none; + + &:checked { + + & + label.checkbox:before { + content: $fa-var-check; + pointer-events: none; + font-family: $fontawesome; + font-weight: normal; + font-style: normal; + color: $light-blue; + } + } + } + + textarea { + height: auto; + width: 100%; + } + } + + .controls { + margin-bottom: 20px; + + button, + input[type=submit] { + @include button($button-primary); + border-radius: $input-border-radius; + border: $input-border-width solid $button-primary; + margin-bottom: 0; + line-height: 30px; + outline: none; + } + } +} + +form.square { + @include span-columns(12); + margin: 20px 0; + + .horizontal { + @include span-columns(12); + margin-bottom: 20px; + + &.small { + @include span-columns(6); + } + + &.medium { + @include span-columns(9); + } + + &.large { + @include span-columns(12); + } + + > .field_with_errors:first-child, + > label, + > .label { + @include span-columns(3); + padding: 9px 0; + line-height: $input-font-size; + + &.checkbox { + width: $input-height; + padding: 0; + } + } + + input[type=text], + input[type=password], + input[type=email], + textarea { + @include span-columns(9); + } + + .inputs { + @include span-columns(9); + + input[type=text], + input[type=password], + input[type=email] { + width: 100%; + } + } + + &.wide { + + > .field_with_errors { + width: 100%; + } + + label { + width: 100%; + } + + textarea, + .mceLayout { + width: 100%; + } + } + } + + .controls { + @include span-columns(9); + @include shift(3); + font-weight: 400; + + &.inline { + margin-left: 0; + width: auto; + } + + input[type=submit], + button { + font-weight: 400; + } + } +} + +form.search { + margin-bottom: 10px; + + .query { + @include span-columns(7 of 9); + + input { + width: 100%; + } + } + + .controls { + @include span-columns(2 of 9); + @include shift(0); + @include omega; + + input { + width: 100%; + } + } +} diff --git a/app/assets/stylesheets/themes/flat/components/_gather.scss b/app/assets/stylesheets/themes/flat/components/_gather.scss new file mode 100644 index 0000000..94684e0 --- /dev/null +++ b/app/assets/stylesheets/themes/flat/components/_gather.scss @@ -0,0 +1,191 @@ +/* + Gather Page +*/ + +#gather { + @include span-columns(12); + + .previous a, + .next a { + display: inline-block; + float: none; + margin: 0; + + i { + vertical-align: middle; + } + } + + .previous { + @include span-columns(6); + margin-bottom: $container-padding; + + i { + margin-right: 10px; + } + } + + .next { + @include span-columns(6); + @include omega; + text-align: right; + + i { + margin-left: 10px; + } + } + + .shoutbox-messages { + @include span-columns(12); + + .timestamp { + margin: 0 5px 5px; + } + } + + .new-shout { + @include span-columns(12); + margin: 20px 0; + + .shout_input { + width: 400px; + margin-right: 20px; + } + + .fields, + .controls { + float: left; + display: block; + } + } +} + +#gather-info { + @include span-columns(12); + margin: 20px 0; + border-bottom: 2px solid $light-gray; + + .info { + @include span-columns(4); + + h6 { + margin-bottom: 10px; + } + + &:nth-child(3) { + @include omega; + } + } + + ul { + list-style-type: disc; + + li { + margin-left: 20px; + } + } + + .hide { + @include span-columns(12); + padding: 20px 0; + text-align: center; + + a { + display: inline-block; + float: none; + + i { + margin-right: 10px; + } + } + } +} + +#gather-area { + @include span-columns(12); + + $column-border-width: 10px; + $column-border-radius: 5px; + + .gather-columns { + @include span-columns(12); + @include row(table); + margin-left: - $column-border-width; + width: $max-width - ($column-border-width*2); + } + + .data { + @include span-columns(4); + @include pad; + border-radius: $column-border-width + $column-border-radius; + padding-bottom: 20px; + background: lighten($light-gray, 5%); + padding: 20px; + border: $column-border-width solid white; + + h4 { + padding-bottom: 20px; + text-align: center; + } + + &:nth-child(3) { + @include reset-display; + @include omega; + } + + ul { + margin-bottom: 10px; + } + } + + .players { + + .captain { + color: $gold; + margin: 0 10px; + } + + .delete { + display: inline-block; + padding: 0 10px; + } + } +} + +#gather-stats { + @include span-columns(12); + display: block; + clear: both; + padding: 20px 0; + margin: 20px 0; + border-top: 2px solid $light-gray; + border-bottom: 2px solid $light-gray; + position: relative; + + .admin { + top: 20px; + right: 0; + margin: 0; + position: absolute; + } + + p { + @include clearfix; + } +} + +/* + Gather Archive +*/ + +table.gathers { + + .date { + width: 30%; + } + + .team1, + .team2 { + width: 35%; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/themes/flat/components/_lists.scss b/app/assets/stylesheets/themes/flat/components/_lists.scss new file mode 100644 index 0000000..370267a --- /dev/null +++ b/app/assets/stylesheets/themes/flat/components/_lists.scss @@ -0,0 +1,31 @@ +ul, ol { + margin: 0; + padding: 0; + list-style-type: none; + + &%default-ul { + list-style-type: disc; + margin-bottom: $base-line-height / 2; + padding-left: $base-line-height; + } + + &%default-ol { + list-style-type: decimal; + margin-bottom: $base-line-height / 2; + padding-left: $base-line-height; + } +} + +dl { + line-height: $base-line-height; + margin-bottom: $base-line-height / 2; + + dt { + font-weight: bold; + margin-top: $base-line-height / 2; + } + + dd { + margin: 0; + } +} diff --git a/app/assets/stylesheets/themes/flat/components/_pagination.scss b/app/assets/stylesheets/themes/flat/components/_pagination.scss new file mode 100644 index 0000000..da205a7 --- /dev/null +++ b/app/assets/stylesheets/themes/flat/components/_pagination.scss @@ -0,0 +1,8 @@ +/* + Pagination +*/ + +.pagination { + @include span-columns(12); + margin: 10px 0; +} \ No newline at end of file diff --git a/app/assets/stylesheets/themes/flat/components/_shoutbox.scss b/app/assets/stylesheets/themes/flat/components/_shoutbox.scss new file mode 100644 index 0000000..b749092 --- /dev/null +++ b/app/assets/stylesheets/themes/flat/components/_shoutbox.scss @@ -0,0 +1,49 @@ +/* + Shoutbox Messages +*/ + +#shoutbox { + display: table; +} + +.shoutmsg { + display: table-row; + margin-bottom: 5px; + clear: both; + position: relative; + + .destroy { + position: absolute; + top: 0; + right: -10px; + } + + .user { + display: table-cell; + min-width: 30%; + + .username { + clear: right; + display: block; + } + + .time { + clear: left; + display: block; + color: #5a5a5a; + } + } + + .message { + max-width: 66%; + display: table-cell; + + .contents { + word-wrap: break-word; + word-break: break-all; + position: relative; + display: block; + padding: 0 10px; + } + } +} diff --git a/app/assets/stylesheets/themes/flat/components/_tables.scss b/app/assets/stylesheets/themes/flat/components/_tables.scss new file mode 100644 index 0000000..d7592ca --- /dev/null +++ b/app/assets/stylesheets/themes/flat/components/_tables.scss @@ -0,0 +1,53 @@ +/* + Generic Tables +*/ + +table { + border-collapse: collapse; + margin: ($base-line-height / 2) 0; + table-layout: fixed; + width: 100%; +} + +th { + border-bottom: 1px solid darken($base-border-color, 15%); + font-weight: bold; + padding: 0.5em 0; + text-align: left; +} + +td { + border-bottom: 1px solid $base-border-color; + padding: 0.5em 0; +} + +tr, td, th { + vertical-align: middle; +} + +/* + Striped Tables +*/ + +table.striped > tbody, +table.striped > thead { + > tr { + td:first-child, + th:first-child { + padding-left: ($base-line-height / 2); + } + + td:last-child, + th:last-child { + padding-right: ($base-line-height / 2); + } + } + + > tr:nth-child(2n) td { + background-color: transparentize($light-blue, 0.9); + } + + .actions { + text-align: right; + } +} diff --git a/app/assets/stylesheets/themes/flat/components/_tabs.scss b/app/assets/stylesheets/themes/flat/components/_tabs.scss new file mode 100644 index 0000000..51b6041 --- /dev/null +++ b/app/assets/stylesheets/themes/flat/components/_tabs.scss @@ -0,0 +1,76 @@ +/* + Tabs +*/ + +.tabbed { + $tabs-border-width: 1px; + $tabs-border-colour: $light-blue; + $tabs-padding-horizontal: 16px; + $tabs-height: 35px; + + ul.tabs { + @include span-columns(12); + display: block; + font-family: $montserrat; + height: $tabs-height; + max-height: $tabs-height; + position: relative; + + li { + float: left; + display: block; + + a { + @include linear-gradient($blue, $dark-blue); + background-color: $blue; + border: $tabs-border-width solid $tabs-border-colour; + border-right: 0; + padding: 0 $tabs-padding-horizontal; + float: left; + display: block; + color: white; + font-weight: 400; + line-height: $tabs-height; + + &:hover { + cursor: pointer; + } + } + + &:first-child a { + border-radius: $base-border-radius 0 0 0; + } + + &:last-child a { + border-right: $tabs-border-width solid $tabs-border-colour; + border-radius: 0 $base-border-radius 0 0; + } + + &.activeli { + z-index: 100; + + a { + @include linear-gradient($light-blue, $blue); + background-color: $light-blue; + } + } + } + } + + .tabbed-contents { + @include span-columns(12); + border: $tabs-border-width solid $tabs-border-colour; + border-radius: 0 $base-border-radius $base-border-radius $base-border-radius; + background: lighten($light-gray, 10%); + box-shadow: $light-shadow; + padding: 20px; + } + + @for $i from 1 through $grid-columns { + ul.tabs-#{$i} { + li { + @include span-columns($i); + } + } + } +} diff --git a/app/assets/stylesheets/themes/flat/errors.css.scss b/app/assets/stylesheets/themes/flat/errors.css.scss new file mode 100644 index 0000000..07c3490 --- /dev/null +++ b/app/assets/stylesheets/themes/flat/errors.css.scss @@ -0,0 +1,55 @@ +/* + Libraries & Configuration +*/ + +@import "bourbon"; +@import "variables"; +@import "neat"; +@import "neat-helpers"; + +/* + Layout +*/ + +@import "layout/body"; +@import "layout/typography"; + +/* + Error Page +*/ + +html, +body { + height: 100%; +} + +html { + @include linear-gradient($dark-blue, $deep-blue); +} + +body { + color: white; + background: transparent; +} + +#error { + display: table; + height: 100%; + margin: 0 auto; + max-width: 60%; + width: 90%; + text-align: center; + text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.75); + + #code h1 { + font-size: 48px; + margin: 1em 0; + } + + .message { + padding-top: 50px; + display: table-cell; + vertical-align: middle; + padding-bottom: 100px; + } +} diff --git a/app/assets/stylesheets/themes/flat/layout/_body.scss b/app/assets/stylesheets/themes/flat/layout/_body.scss new file mode 100644 index 0000000..1673c1b --- /dev/null +++ b/app/assets/stylesheets/themes/flat/layout/_body.scss @@ -0,0 +1,129 @@ +/* + Main Containers +*/ + +$container-padding: 1.7em; + +html, +body { + margin: 0; + padding: 0; + width: 100%; + min-height: 100%; +} + +body#tinymce { + padding: 10px; +} + +#container { + min-height: 100%; + @include background-image(linear-gradient($deep-blue 0px, $dark-blue 500px)); +} + +.wrapper { + @include outer-container; +} + +#content { + @include span-columns(12); + padding: $container-padding 0; + + &.full { + box-shadow: $content-shadow; + padding: $container-padding; + background: $content-color; + border-radius: $base-border-radius; + margin: $container-padding 0; + } + + &.no-body { + &.full { + background: transparent; + box-shadow: none; + padding: $container-padding 0; + } + + #main { + box-shadow: none; + border-radius: 0; + background: transparent; + padding: 0; + } + } +} + +#forums { + @include span-columns(12); +} + +#main { + @include span-columns(9 of 12); + border-radius: $base-border-radius; + box-shadow: $content-shadow; + background: $content-color; + padding: 20px; +} + +#sidebar { + @include span-columns(3 of 12); + @include omega(); +} + +/* + Heading styles +*/ + +h1, h2, h3, h4, h5, h6 { + + &.title { + margin-bottom: 1em; + } + + &.fancy { + clear: both; + text-align: center; + position: relative; + background-color: $content-color; + + &:before { + content: ""; + display: block; + border-top: 2px solid $medium-gray; + width: 100%; + height: 2px; + position: absolute; + top: 50%; + z-index: 1; + } + + span { + background: inherit; + padding: 0 .5em; + position: relative; + display: inline-block; + z-index: 1; + } + } +} + +/* + Text +*/ + +#main { + ul.disc, + ol { + list-style-type: disc; + margin: 20px 0; + + li { + margin-left: 40px; + display: list-item; + } + } + + ol { + list-style-type: decimal; + } +} diff --git a/app/assets/stylesheets/themes/flat/layout/_footer.scss b/app/assets/stylesheets/themes/flat/layout/_footer.scss new file mode 100644 index 0000000..45ca04b --- /dev/null +++ b/app/assets/stylesheets/themes/flat/layout/_footer.scss @@ -0,0 +1,65 @@ +.footer { + $footer-background: $dark-gray; + $footer-color: white; + $footer-link-color: transparentize($footer-color, .6); + $footer-disclaimer-color: transparentize($footer-color, .6); + + background: $footer-background; + + .content { + padding: $container-padding*2 0; + } + + .footer-links { + @include clearfix; + margin-bottom: $base-line-height; + } + + ul { + margin-bottom: $base-line-height*2; + + @include media($medium-screen) { + @include span-columns(3); + @include omega(4n); + @include clearfix; + } + } + + li { + text-align: center; + + @include media($medium-screen) { + text-align: center; + } + } + + li a { + color: $footer-link-color; + + &:hover { + color: transparentize($footer-color, 0); + } + } + + li h3 { + color: $footer-color; + font-size: 1em; + font-weight: 800; + margin-bottom: .4em; + } + + hr { + border: 1px solid transparentize($footer-disclaimer-color, .3); + margin: 0 auto $base-line-height; + width: 12em; + } + + p { + color: $footer-disclaimer-color; + font-size: .9em; + line-height: 1.5em; + margin: auto; + max-width: 35em; + text-align: center; + } +} diff --git a/app/assets/stylesheets/themes/flat/layout/_hacks.scss b/app/assets/stylesheets/themes/flat/layout/_hacks.scss new file mode 100644 index 0000000..ca49d1e --- /dev/null +++ b/app/assets/stylesheets/themes/flat/layout/_hacks.scss @@ -0,0 +1,9 @@ +/* + Firefox select hacks +*/ + +select { + -moz-appearance: none; + text-indent: 0.01px; + text-overflow: ''; +} \ No newline at end of file diff --git a/app/assets/stylesheets/themes/flat/layout/_header.scss b/app/assets/stylesheets/themes/flat/layout/_header.scss new file mode 100644 index 0000000..1a3b49e --- /dev/null +++ b/app/assets/stylesheets/themes/flat/layout/_header.scss @@ -0,0 +1,148 @@ +/* + Banner +*/ + +header .banner { + height: 140px; + + #logo { + @include span-columns(9 of 12); + min-height: 200px; + position: relative; + + img { + height: 200px; + position: absolute; + top: 15px; + left: -40px; + z-index: 1; + } + } + + #authentication { + @include span-columns(5 of 12); + @include shift(7); + padding: 10px 0; + color: white; + position: relative; + + .logged { + padding-top: 10px; + } + + form.dark { + @include span-columns(12); + margin-top: 20px; + } + + .buttons { + @include span-columns(12); + + .login, + .register { + @include span-columns(6); + } + + .login { + input { + @include button; + float: right; + margin-right: 0; + } + } + + .register { + @include omega; + } + } + + .register a { + display: block; + float: right; + clear: both; + } + + a { + color: white; + + &:hover { + color: $light-blue; + } + } + + form { + display: inline; + } + + &.admin { + + } + + .fields { + @include span-columns(12); + + input { + @include span-columns(6); + margin-bottom: 10px; + } + } + + .controls { + margin-top: 10px; + text-align: right; + + input { + @include span-columns(12); + margin-bottom: 10px; + } + + a { + @include span-columns(12); + text-align: left; + } + } + + .password-reset { + float: right; + } + + .links { + position: absolute; + right: 0; + padding-right: 105px; + + li { + text-align: right; + } + + li i { + display: inline-block; + width: 1em; + text-align: center; + margin: 0 10px; + } + } + + .avatar { + box-shadow: $content-shadow; + border-radius: $base-border-radius; + border: 2px solid $blue; + width: 100px; + height: 100px; + float: right; + background: { + size: cover; + position: center; + repeat: no-repeat; + } + } + } + + &.authenticated { + + #authentication { + @include span-columns(3 of 12); + @include shift(9); + } + } +} diff --git a/app/assets/stylesheets/themes/flat/layout/_helpers.scss b/app/assets/stylesheets/themes/flat/layout/_helpers.scss new file mode 100644 index 0000000..3a007d8 --- /dev/null +++ b/app/assets/stylesheets/themes/flat/layout/_helpers.scss @@ -0,0 +1,37 @@ +/* + Global Helpers +*/ + +img.flag { + display: inline-block; + vertical-align: - 6px; + margin-right: 10px; +} + +.actions-bottom { + @include span-columns(12); + margin-top: 20px; +} + +fieldset { + border: 2px solid $light-gray; + + > br:first-child, + > br:last-child { + display: none; + } + + legend { + padding: 0 10px; + + &+br { + display: none; + } + } + + blockquote { + border: 0; + padding: 0; + margin: 0; + } +} diff --git a/app/assets/stylesheets/themes/flat/layout/_navigation.scss b/app/assets/stylesheets/themes/flat/layout/_navigation.scss new file mode 100644 index 0000000..5a1ee0f --- /dev/null +++ b/app/assets/stylesheets/themes/flat/layout/_navigation.scss @@ -0,0 +1,194 @@ +/* + Navigation +*/ + +$navigation-height: 50px; + +#menu { + @include span-columns(12); + font-family: $montserrat; + height: $navigation-height; + + #logo { + position: absolute; + top: 20px; + margin-left: -60px; + } +} + +ul.navigation { + border-radius: $base-border-radius; + z-index: 100; + position: relative; + margin: 0; + padding: 0; + list-style: none; + float: right; + background-color: $light-blue; + max-width: $max-width; + max-height: $navigation-height; + + > li { + float: left; + border-right: 1px solid $dark-blue; + + &:first-child a { + border-radius: $base-border-radius 0 0 $base-border-radius; + } + + &:last-child { + border-right: 0; + + a { + border-radius: 0 $base-border-radius $base-border-radius 0; + } + } + + .count { + position: absolute; + top: 16px; + right: 12px; + border-radius: $base-border-radius; + background-color: $light-blue; + display: inline-block; + color: white; + line-height: 18px; + padding: 0 4px; + font-size: 12px; + font-weight: bold; + } + + a { + font-weight: 400; + font-size: 15px; + height: $navigation-height; + line-height: $navigation-height; + padding: 0 50px 0 20px; + } + + > a { + width: 100%; + color: white; + float: left; + position: relative; + background-color: $navbar-primary; + + &:hover, + &.active { + background-color: $navbar-secondary; + + .count { + background-color: lighten($light-blue, 20); + } + } + + &.gathers { + padding-right: 65px; + } + } + + &.icon { + + a:after { + @extend .fa; + content: ''; + display: block; + position: absolute; + right: 20px; + top: 0; + line-height: 50px; + font-size: 14px; + } + + a { + &.news:after { + content: $fa-var-list-alt; + } + + &.contests:after { + content: $fa-var-trophy; + } + + &.articles:after { + content: $fa-var-file-text-o; + } + + &.forums:after { + content: $fa-var-comments-o; + } + + &.teams:after { + content: $fa-var-users; + } + + &.users:after { + content: $fa-var-user; + } + } + + i { + color: white; + max-height: $navigation-height; + position: absolute; + top: 0; + right: 0; + font-size: 18px; + line-height: 1em; + padding: $navigation-height/3; + } + } + + &.dropdown { + position: relative; + + ul { + position: absolute; + box-shadow: $content-shadow; + visibility: hidden; + pointer-events: none; + opacity: 0; + z-index: 10; + top: $navigation-height; + left: 0; + min-width: 100%; + background-color: $navbar-primary; + list-style: none; + padding: 0; + margin: 0; + } + + &:hover { + + ul { + visibility: visible; + opacity: 1; + pointer-events: auto; + + + li { + border-bottom: 1px solid $navbar-secondary; + + &:first-child { + border-top: 1px solid $navbar-secondary; + } + + &:last-child { + border-bottom: none; + } + + a { + white-space: nowrap; + display: block; + color: $navbar-text; + padding: 0 20px; + } + + &:hover a { + background: $light-blue; + } + } + } + } + } + } +} diff --git a/app/assets/stylesheets/themes/flat/layout/_sidebar.scss b/app/assets/stylesheets/themes/flat/layout/_sidebar.scss new file mode 100644 index 0000000..6123e5e --- /dev/null +++ b/app/assets/stylesheets/themes/flat/layout/_sidebar.scss @@ -0,0 +1,95 @@ +#sidebar { + + .widget { + @include span-columns(12); + @include omega; + background: #0d0f10; + margin-bottom: $container-padding; + padding: 20px; + border-radius: $base-border-radius; + box-shadow: $light-shadow; + margin-bottom: $container-padding; + color: white; + + h4 { + @include span-columns(12); + margin-bottom: 20px; + color: $light-blue; + } + + .widget-content-wrapper { + @include span-columns(12); + font-size: 12px; + } + + .separator { + color: white; + background: $dark-gray; + padding: 0 20px; + margin: 0 -20px; + margin-bottom: 12px; + font-weight: 600; + line-height: 35px; + + a { + color: white; + float: right; + } + } + + &:last-child { + margin-bottom: 0; + } + } + + .calendar { + .time { + color: lighten($medium-gray, 20%); + float: right; + margin-left: 10px; + } + } + + .shoutbox { + .transcript { + margin-bottom: 20px; + } + + input { + @include span-columns(12); + margin-bottom: 10px; + } + } + + .highlights, + .posts { + ol { + margin-bottom: 20px; + + &:last-child { + margin-bottom: 0; + } + } + } + + .poll { + .question { + @include span-columns(12); + margin-bottom: 20px; + + h5 { + margin-bottom: 1em; + } + } + + .bar { + display: block; + background: $blue; + height: 10px; + } + + .button { + margin-bottom: 0; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/themes/flat/layout/_typography.scss b/app/assets/stylesheets/themes/flat/layout/_typography.scss new file mode 100644 index 0000000..a9490e8 --- /dev/null +++ b/app/assets/stylesheets/themes/flat/layout/_typography.scss @@ -0,0 +1,116 @@ +/* + Typography +*/ + +@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700); +@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700); + +body { + color: $base-font-color; + font-family: $base-font-family; + font-size: $base-font-size; + -webkit-font-smoothing: antialiased; + line-height: $base-line-height; +} + +h1, h2, h3, h4, h5, h6 { + font-family: $header-font-family; + line-height: 1.25em; + margin: 0; + text-rendering: optimizeLegibility; // Fix the character spacing for headings + + a { + color: $dark-blue; + } +} + +h1 { + font-size: $base-font-size * 2.25; // 16 * 2.25 = 36px +} + +h2 { + font-size: $base-font-size * 2; // 16 * 2 = 32px +} + +h3 { + font-size: $base-font-size * 1.75; // 16 * 1.75 = 28px +} + +h4 { + font-size: $base-font-size * 1.5; // 16 * 1.5 = 24px +} + +h5 { + font-size: $base-font-size * 1.25; // 16 * 1.25 = 20px +} + +h6 { + font-size: $base-font-size; +} + +p { + margin: 0 0 ($base-line-height * .5); +} + +a { + color: $base-link-color; + text-decoration: none; + font-weight: 600; + @include transition(color 0.1s linear); + + &:hover { + color: $hover-link-color; + } + + &:active, &:focus { + color: $hover-link-color; + outline: none; + } +} + +hr { + border-bottom: 1px solid $base-border-color; + border-left: none; + border-right: none; + border-top: none; + margin: $base-line-height 0; +} + +img { + margin: 0; + max-width: 100%; +} + +abbr, acronym { + border-bottom: 1px dotted $base-border-color; + cursor: help; +} + +address { + display: block; + margin: 0 0 ($base-line-height / 2); +} + +hgroup { + margin-bottom: $base-line-height / 2; +} + +del { + color: lighten($base-font-color, 15); +} + +blockquote { + border-left: 2px solid $base-border-color; + color: lighten($base-font-color, 15); + margin: $base-line-height 0; + padding-left: $base-line-height / 2; +} + +cite { + color: lighten($base-font-color, 25); + font-style: italic; + + &:before { + content: '\2014 \00A0'; + } +} diff --git a/app/assets/stylesheets/themes/flat/mixins/_buttons.scss b/app/assets/stylesheets/themes/flat/mixins/_buttons.scss new file mode 100644 index 0000000..9436b1f --- /dev/null +++ b/app/assets/stylesheets/themes/flat/mixins/_buttons.scss @@ -0,0 +1,42 @@ +/* + Buttons +*/ + +@mixin button($background: $button-primary, $text: $button-text) { + $button-height: 35px; + + @include linear-gradient($blue, $dark-blue); + border-radius: $base-border-radius; + font-family: $montserrat; + font-size: 14px; + background-color: $background; + color: $text; + height: $button-height; + padding: 0 $button-height/2; + line-height: $button-height; + float: left; + margin: 0 $button-height/2 $button-height/2 0; + border: 0; + cursor: pointer; + font-weight: 400; + + &:hover { + color: lighten($light-blue, 30); + } +} + +button, +a.button, +.button { + @include button; + + &.tiny { + @include linear-gradient($light-blue, $blue); + background-color: transparent; + border-radius: 14px; + line-height: 25px; + height: 25px; + padding: 0 12px; + margin: 0 10px 0 0; + } +} diff --git a/app/assets/stylesheets/themes/flat/mixins/_flashes.scss b/app/assets/stylesheets/themes/flat/mixins/_flashes.scss new file mode 100644 index 0000000..820eb04 --- /dev/null +++ b/app/assets/stylesheets/themes/flat/mixins/_flashes.scss @@ -0,0 +1,47 @@ +/* + Flash Messages +*/ + +@mixin flash($background: $flash-notice, $text: $flash-text) { + $flash-height: 35px; + + background-color: $background; + color: $text; + padding: 7px 7px 7px 44px; + position: relative; + border-radius: $base-border-radius; + + &:before { + @include box-sizing(border-box); + border-radius: $base-border-radius 0 0 $base-border-radius; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + content: "\f05a"; + background-color: darken($background, 10%); + display: block; + position: absolute; + top: 0; + left: 0; + float: left; + width: $flash-height; + height: 100%; + padding: 7px; + text-align: center; + } +} + +/* + Text Highlights +*/ + +.highlight { + font-size: 12px; + line-height: 18px; + border-radius: $base-border-radius; + background: $blue; + color: white; + display: inline-block; + font-style: italic; + padding: 0 3px; +} diff --git a/app/assets/stylesheets/themes/flat/pages/_bans.scss b/app/assets/stylesheets/themes/flat/pages/_bans.scss new file mode 100644 index 0000000..e91ba24 --- /dev/null +++ b/app/assets/stylesheets/themes/flat/pages/_bans.scss @@ -0,0 +1,23 @@ +/* + Bans List +*/ + +#bans { + + h1 { + margin-bottom: 1em; + } + + table.bans { + + .type, + .expiry { + width: 20%; + } + + .actions { + width: 10%; + text-align: right; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/themes/flat/pages/_categories.scss b/app/assets/stylesheets/themes/flat/pages/_categories.scss new file mode 100644 index 0000000..d9107dc --- /dev/null +++ b/app/assets/stylesheets/themes/flat/pages/_categories.scss @@ -0,0 +1,18 @@ +/* + Categories List +*/ + +.categories { + + table.categories { + + .actions { + width: 20%; + text-align: right; + + i { + margin-left: 5px; + } + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/themes/flat/pages/_contests.scss b/app/assets/stylesheets/themes/flat/pages/_contests.scss new file mode 100644 index 0000000..5be59fd --- /dev/null +++ b/app/assets/stylesheets/themes/flat/pages/_contests.scss @@ -0,0 +1,335 @@ +/* + Contester +*/ + +div#matches { + @include span-columns(12); + margin: 20px 0; +} + +/* + Contest List +*/ + +table.contest { + margin-bottom: 40px; + + .fa-chevron-up { + color: $light-green; + } + + .fa-chevron-down { + color: $light-red; + } + + .fa-trophy { + color: $gold; + text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.75); + } + + tbody td { + &:first-child { + text-align: center; + } + + &:nth-child(2) { + text-align: center; + } + + &:nth-child(4) { + text-align: left; + } + + &.actions { + text-align: right; + + i { + padding-left: 5px; + } + } + } + + thead { + + .movement, + .flag, + .awards { + width: 5%; + } + + .team { + width: 35%; + } + + .score, + .win, + .loss, + .draw, + .actions { + width: 10%; + } + } +} + +div.widget.contest { + + a.button { + margin: 20px 0 0; + text-align: center; + width: 100%; + } +} + +/* + Standings +*/ + +div.standings { + @include span-columns(12); +} + +/* + Brackets +*/ + +table.brackets { + margin: 20px 0 40px 0; + width: auto; + + td { + padding: 0; + border-bottom: 0; + text-align: left; + + a { + display: block; + width: 100%; + } + } + + .empty { + padding: 0; + } + + .flag { + width: 44px; + + img { + width: 24px; + margin-left: 10px; + } + } + + .team { + padding: 5px 0; + background-color: $light-gray; + border-right: 1px solid $medium-gray; + clear: both; + + table { + margin: 0; + } + + > a { + padding-left: 10px; + } + } + + .bracket { + padding: 0 10px 0 0; + width: 158px; + } + + .connector { + border-right: 1px solid $medium-gray; + } + + > tbody > tr > td { + width: 150px; + } +} + +/* + Contest Page +*/ + +#contest { + + table.weeks { + + .week { + width: 50%; + } + + .date { + width: 30%; + } + + .score { + width: 10%; + text-align: right; + } + } + + table.matches { + + .team { + width: 50%; + } + + .date { + width: 50%; + text-align: right; + } + } + + table.predictions { + + .user { + width: 50%; + } + + .result { + width: 50%; + text-align: right; + } + } +} + +/* + Contest Form Page +*/ + +#contest.contest-manage { + + table.maps { + + .name { + width: 50%; + } + + .download { + width: 40%; + } + + .actions { + width: 10%; + text-align: right; + } + } + + table.brackets-list { + width: 100%; + + .bracket, + .slots { + width: 45%; + } + + .actions { + width: 10%; + text-align: right; + } + } + + table.weeks { + + .name { + width: 30%; + } + + .date, + .map1, + .map2 { + width: 20%; + } + + .actions { + width: 10%; + text-align: right; + } + } + + #matches { + margin: 0; + } + + table.matches { + + .team { + width: 50%; + } + + .date { + text-align: left; + width: 20%; + } + + .score { + width: 10%; + } + + .actions { + width: 15%; + text-align: right; + } + } +} + +/* + Contest List +*/ + +#contests { + @include span-columns(12); + + div.current { + @include span-columns(12); + margin-bottom: 20px; + + table { + + .name { + width: 40%; + } + + .date { + width: 20%; + } + + .status { + width: 30%; + } + + .actions { + width: 10%; + text-align: right; + } + } + } + + div.previous { + @include span-columns(12); + margin-bottom: 20px; + + table { + + .name { + width: 40%; + } + + .date { + width: 20%; + } + + .winner { + width: 30%; + } + + .actions { + width: 10%; + text-align: right; + } + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/themes/flat/pages/_files.scss b/app/assets/stylesheets/themes/flat/pages/_files.scss new file mode 100644 index 0000000..30d2479 --- /dev/null +++ b/app/assets/stylesheets/themes/flat/pages/_files.scss @@ -0,0 +1,90 @@ +/* + File Page +*/ + +#file { + + .actions, + .files-list { + @include span-columns(12); + margin: 20px 0; + } +} + +/* + Files List +*/ + +#files { + + .file { + @include span-columns(12); + padding-top: 20px; + margin-bottom: 20px; + position: relative; + border-top: 3px solid $light-gray; + + .actions { + position: absolute; + top: 20px; + right: 0; + } + + .comments { + float: right; + + i { + margin-right: 10px; + } + } + } + + .controls { + @include span-columns(12); + margin-top: 20px; + } +} + +/* + Movies List +*/ + +#movies { + + .filters { + @include span-columns(12); + margin-bottom: 20px; + } +} + +table.movie { + + .controls { + @include span-columns(12); + margin: 20px 0; + } +} + +.movie-full { + + .title { + display: none; + } + + #player { + display: block; + position: relative; + width: 100%; + height: 0px; + padding-bottom: 56%; + padding-top: 50px; + margin-bottom: 20px; + + object { + position: absolute; + width: 100%; + height: 100%; + top: 0; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/themes/flat/pages/_forums.scss b/app/assets/stylesheets/themes/flat/pages/_forums.scss new file mode 100644 index 0000000..a849afe --- /dev/null +++ b/app/assets/stylesheets/themes/flat/pages/_forums.scss @@ -0,0 +1,326 @@ +/* + Forums +*/ + +#forums { + position: relative; + + .topic-controls { + position: absolute; + top: 40px; + right: 0; + width: auto; + + a:last-child { + margin-right: 0; + } + } + + .pagination { + margin-bottom: 20px; + } +} + +.no-body #forums { + + h1, + h2 { + color: white; + + a { + color: white; + } + } + + .breadcrumbs, + .pagination { + color: white; + + a { + color: $light-blue; + } + } +} + +/* + Categories +*/ + +div#categories { + + div.category { + margin-bottom: 20px; + } + + /* + Tables + */ + + table.category { + table-layout: auto; + margin: 0; + background: $content-color; + padding: 20px; + box-shadow: $light-shadow; + border-radius: $base-border-radius; + border: 0; + + thead th { + @include linear-gradient($blue, $dark-blue); + padding-top: 0.75em; + padding-bottom: 0.75em; + font-family: $montserrat; + font-size: 16px; + color: white; + + &:first-child { + border-radius: $base-border-radius 0 0 0; + } + + &:last-child { + border-radius: 0 $base-border-radius 0 0; + } + } + } + + .bullet { + width: 10%; + + background: { + image: image-url("#{$theme-path}/layout/forum-category.png"); + position: center center; + repeat: no-repeat; + } + + &.updated { + background-image: image-url("#{$theme-path}/layout/forum-category-highlight.png"); + } + } + + .forum { + width: 45%; + padding-right: 10px; + } + + .actions { + width: 10%; + text-align: center; + } + + .topics, + .posts { + width: 10%; + } + + .last { + width: 15%; + } +} + +/* + Topics +*/ + +#topics { + table-layout: auto; + margin-bottom: 20px; + background: $content-color; + padding: 20px; + box-shadow: $light-shadow; + border-radius: $base-border-radius; + border: 0; + + .unread { + color: $red; + } + + thead th { + @include linear-gradient($blue, $dark-blue); + padding-top: 0.75em; + padding-bottom: 0.75em; + font-family: $montserrat; + font-size: 16px; + color: white; + + &:first-child { + border-radius: $base-border-radius 0 0 0; + } + + &:last-child { + border-radius: 0 $base-border-radius 0 0; + } + } + + .topic { + width: 55%; + } + + .author { + width: 10%; + } + + .replies, + .views { + width: 10%; + } + + .last { + width: 15%; + } +} + +.statistics { + padding: 20px; + background: $content-color; + margin: 20px 0; + box-shadow: $light-shadow; + border-radius: $base-border-radius; + + h4 { + margin-bottom: 1em; + } +} + +#topic { + position: relative; + + h2 { + margin-bottom: 20px; + } + + .pagination { + margin-top: 0; + } + + #reply { + @include span-columns(12); + padding: 20px; + margin-bottom: 20px; + display: none; + background: $content-color; + border-radius: $base-border-radius; + box-shadow: $light-shadow; + + form { + margin-bottom: 0; + + .controls { + margin-bottom: 0; + } + } + } +} + +/* + Posts +*/ + +#posts { + @include span-columns(12); + + .post { + @include span-columns(12); + margin-bottom: 20px; + border-radius: $base-border-radius; + background: $content-color; + padding: 20px; + box-shadow: $light-shadow; + + .avatar { + @include span-columns(3); + + h5 { + text-align: center; + margin-bottom: 1em; + } + + .image, + .team { + @include span-columns(12); + text-align: center; + margin-bottom: 10px; + } + + .admin { + color: $red; + } + } + + .content { + @include span-columns(9); + @include omega; + + .text, + .signature { + @include span-columns(12); + padding: 20px 0; + } + + .text { + margin-top: 20px; + + fieldset { + border-color: darken($light-gray, 10); + border-radius: $base-border-radius; + } + } + } + + .header { + @include span-columns(12); + + .time { + @include span-columns(6); + } + + .posts { + @include span-columns(6); + text-align: right; + } + } + + .base { + @include span-columns(12); + padding-top: 20px; + border-top: 1px solid $light-gray; + + .user { + @include span-columns(3); + } + + .signature { + @include span-columns(9); + @include omega; + position: relative; + + .controls { + position: absolute; + top: 0; + right: 0; + + a:last-child { + margin-right: 0; + } + } + } + } + } +} + +/* + Forms +*/ + +#forums .add-acl { + + h4 { + margin: 1em 0; + } + + .permissions, + .controls { + display: inline; + width: auto; + float: none; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/themes/flat/pages/_groups.scss b/app/assets/stylesheets/themes/flat/pages/_groups.scss new file mode 100644 index 0000000..90333cd --- /dev/null +++ b/app/assets/stylesheets/themes/flat/pages/_groups.scss @@ -0,0 +1,57 @@ +/* + Groups List +*/ + +table.groups { + + .name { + width: 50%; + } + + .created { + width: 20%; + } + + .founder { + width: 20%; + } + + .actions { + width: 10%; + text-align: right; + } +} + +/* + Groups Page +*/ + +#group { + + table.roles { + + .name, + .username { + width: 20%; + } + + .role { + width: 60%; + } + + .fields { + margin: 0; + float: left; + } + + .controls { + margin: 0; + float: right; + + .remove { + margin-bottom: 0; + margin-right: 0; + } + } + } +} diff --git a/app/assets/stylesheets/themes/flat/pages/_issues.scss b/app/assets/stylesheets/themes/flat/pages/_issues.scss new file mode 100644 index 0000000..902a4c7 --- /dev/null +++ b/app/assets/stylesheets/themes/flat/pages/_issues.scss @@ -0,0 +1,32 @@ +/* + Issues List +*/ + +table.issues { + + .date { + width: 25%; + } + + .title { + width: 35%; + } + + .assigned, + .author { + width: 15%; + } + + .actions { + width: 10%; + text-align: right; + } +} + +/* + Issues Page +*/ + +#issue { + +} \ No newline at end of file diff --git a/app/assets/stylesheets/themes/flat/pages/_matches.scss b/app/assets/stylesheets/themes/flat/pages/_matches.scss new file mode 100644 index 0000000..8ce9e99 --- /dev/null +++ b/app/assets/stylesheets/themes/flat/pages/_matches.scss @@ -0,0 +1,326 @@ +/* + Matches Listing +*/ + +table#matches { + width: 100%; + display: table; + table-layout: auto; + margin-bottom: 20px; + + .opponent { + width: 30%; + } + + .date, + .maps { + width: 20%; + } + + .score { + width: 10%; + text-align: right; + } +} + +/* + Match Page +*/ + +div#match { + $title-height: 100px; + + @include span-columns(12); + border-bottom: 3px solid $light-gray; + + .contesters, + .details, + .referee, + .predictions, + .report { + @include span-columns(12); + } + + .contesters { + margin-bottom: 20px; + + .vs { + margin: 0 auto; + display: block; + font: $title-height/2 $montserrat; + border-radius: 50px; + background: $blue; + width: $title-height; + height: $title-height; + text-align: center; + line-height: $title-height; + color: white; + font-style: italic; + text-transform: uppercase; + padding-right: 10px; + font-weight: bold; + } + + .team-1, + .team-2 { + max-height: $title-height; + overflow: hidden; + } + + .team-1 { + @include span-columns(5); + line-height: $title-height; + text-align: right; + } + + .team-2 { + @include span-columns(5); + line-height: $title-height; + text-align: left; + } + + .versus { + @include span-columns(2); + position: relative; + font-weight: bold; + + &.split:before { + content: ""; + display: block; + position: absolute; + background: white; + width: 1px; + height: $title-height; + margin: 0 auto; + left: 50%; + top: 0; + } + + .score-1, + .score-2 { + font: $title-height/2 $montserrat; + color: white; + width: 50%; + position: absolute; + top: 0; + text-align: center; + line-height: $title-height; + font-weight: bold; + } + + .score-1 { + padding-left: $title-height/6; + left: 0; + } + + .score-2 { + padding-right: $title-height/6; + right: 0; + } + } + } + + .details { + margin-bottom: 20px; + text-align: center; + + .contest, + .date { + text-align: center; + } + + .date { + font-style: italic; + font-weight: normal; + } + + .contest { + margin-bottom: 10px; + } + } + + .lineups { + @include span-columns(12); + margin: 20px 0 40px; + + h3 { + text-align: center; + margin-bottom: 1em; + } + + i { + color: $gold; + } + + .team-1, + .team-2 { + position: relative; + + .player { + @include span-columns(12); + line-height: 40px; + margin-bottom: 10px; + } + + .players { + position: relative; + } + + .controls { + top: 0; + position: absolute; + z-index: 100; + + input { + margin: 0; + } + } + + form { + + label.checkbox { + padding: 0; + } + } + } + + .team-1 { + @include span-columns(6); + text-align: right; + + .flag { + margin: 0 0 0 10px; + } + + .controls { + left: 0; + } + + form { + + label.checkbox { + float: right; + margin-left: 1em; + } + } + } + + .team-2 { + @include span-columns(6); + @include omega; + + .controls { + right: 0; + } + + form { + + label.checkbox { + float: left; + margin-right: 1em; + } + } + } + + &.shift .team-2 { + @include shift(6); + } + + .mercenaries { + @include span-columns(12); + + input { + margin: 0; + } + } + } + + .scoring { + @include span-columns(12); + border-top: 3px solid $light-gray; + + h3 { + margin-bottom: 1em; + } + + .scores input { + width: auto; + margin-left: 0; + text-align: center; + width: 40px; + } + } + + .predictions { + text-align: center; + + h4 { + margin-bottom: 1em; + } + + input { + text-align: center; + } + + .add { + @include span-columns(12); + text-align: center; + + input { + float: none; + margin: 20px 0 0 0; + } + } + + .team-1 { + @include span-columns(6); + text-align: right; + + .highlight { + margin-left: 10px; + } + } + + .team-2 { + @include span-columns(6); + @include omega; + text-align: left; + + .highlight { + margin-right: 10px; + } + } + } + + .report { + margin: 20px 0; + padding-top: 20px; + border-top: 3px solid $light-gray; + + textarea { + margin: 20px 0; + width: 100%; + height: 600px; + } + + .mceLayout { + margin: 20px 0; + } + } +} + +/* + Map Page +*/ + +div#map { + + .preview { + @include span-columns(12); + text-align: center; + + img { + margin: 20px 0; + } + } +} diff --git a/app/assets/stylesheets/themes/flat/pages/_news.scss b/app/assets/stylesheets/themes/flat/pages/_news.scss new file mode 100644 index 0000000..cd9b9ee --- /dev/null +++ b/app/assets/stylesheets/themes/flat/pages/_news.scss @@ -0,0 +1,197 @@ +/* + Articles +*/ + +div.article { + @include span-columns(12); + border-bottom: 3px solid $light-gray; + padding-bottom: 20px; + + h1 { + margin: 1em 0; + + a { + color: black; + } + } + + .content { + @include span-columns(12); + margin-bottom: 40px; + + ul { + @extend ul.disc; + } + } + + .author { + @include span-columns(6); + + a { + font-weight: bold; + } + } + + .comments { + @include span-columns(6); + @include omega; + text-align: right; + + .fa { + margin-right: 10px; + } + } + + .actions { + @include span-columns(12); + @include omega; + margin-top: 10px; + } + + &.preview { + @include span-columns(12); + border-radius: $base-border-radius; + background: $content-color; + padding: 20px; + margin-bottom: $container-padding; + box-shadow: $light-shadow; + border: 0; + + .content { + margin-bottom: 10px; + } + + h2 { + margin: 0 0 .5em 0; + } + } +} + +div.article-links { + @include span-columns(12); + + .previous { + @include span-columns(6); + + .fa { + padding-right: 10px; + } + } + + .next { + @include span-columns(6); + @include omega; + text-align: right; + + .fa { + padding-left: 10px; + } + } +} + +table.articles.archive { + + .title { + width: 50%; + } + + .date { + width: 20%; + } + + .author { + width: 20%; + } +} + +/* + Article Form +*/ + +form.article { + + h4 { + margin-bottom: 20px; + } +} + +.files { + + .files-list { + margin: 20px 0 40px; + } + + form { + @include span-columns(12); + margin: 20px 0; + + .fields { + margin-bottom: 20px; + } + } +} + +/* + Articles Page +*/ + +#articles { + @include span-columns(12); + + h3 { + @include span-columns(12); + margin-top: 1em; + } + + .article-list { + @include span-columns(12); + margin-bottom: 10px; + + .new { + @extend .highlight; + margin-right: 10px; + } + + .title { + @include span-columns(6); + } + + .meta { + @include span-columns(6); + @include omega; + text-align: right; + } + } + + .button.new { + margin-top: 20px; + } +} + +/* + Admin Articles Page +*/ + +div.admin.articles { + + .title { + width: 40%; + } + + .category { + width: 20%; + } + + .created { + width: 20%; + } + + .author { + width: 10%; + } + + .actions { + width: 10%; + text-align: right; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/themes/flat/pages/_polls.scss b/app/assets/stylesheets/themes/flat/pages/_polls.scss new file mode 100644 index 0000000..68b91a3 --- /dev/null +++ b/app/assets/stylesheets/themes/flat/pages/_polls.scss @@ -0,0 +1,52 @@ +/* + Polls List +*/ + +table.polls { + + .questions { + width: 30%; + } + + .date { + width: 30%; + } + + .votes, + .user { + width: 15%; + } + + .actions { + width: 10%; + text-align: right; + } +} + +/* + Poll Forms +*/ + +#poll { + .inputs { + + .question { + @include span-columns(9); + } + + .destroy { + @include span-columns(3); + @include omega; + + .checkbox { + float: left; + } + + .remove { + display: inline-block; + line-height: 40px; + margin-left: 10px; + } + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/themes/flat/pages/_servers.scss b/app/assets/stylesheets/themes/flat/pages/_servers.scss new file mode 100644 index 0000000..408d234 --- /dev/null +++ b/app/assets/stylesheets/themes/flat/pages/_servers.scss @@ -0,0 +1,51 @@ +/* + Servers +*/ + +#servers { + @include span-columns(12); + margin-bottom: 20px; + + div.server { + @include span-columns(12); + margin-bottom: 20px; + padding-bottom: 20px; + border-bottom: 3px solid $light-gray; + position: relative; + + .connect { + position: absolute; + top: 0; + right: 0; + margin: 0; + } + + &:last-child { + margin-bottom: 0; + border-bottom: 0; + } + } +} + +/* + Server Form +*/ + +form.server { + + .inputs { + @include span-columns(12); + + input { + max-width: 100%; + } + + .ip { + @include span-columns(9); + } + + .port { + @include span-columns(3); + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/themes/flat/pages/_teams.scss b/app/assets/stylesheets/themes/flat/pages/_teams.scss new file mode 100644 index 0000000..6c12f38 --- /dev/null +++ b/app/assets/stylesheets/themes/flat/pages/_teams.scss @@ -0,0 +1,108 @@ +/* + Teams Listing +*/ + +#teams { + @include span-columns(12); + + table { + table-layout: auto; + } + + .country { + width: 5%; + } + + .name { + width: 45%; + } + + .irc { + width: 25%; + } + + .members { + width: 10%; + } + + .actions { + width: 15%; + text-align: right; + } + + &.edit { + @include span-columns(12); + + h1 { + margin-bottom: 1em; + } + + .tabbed-contents { + margin-bottom: 20px; + } + } +} + +/* + Team Profiles +*/ + +#team-profile { + + .logo { + @include span-columns(12); + margin: 20px 0; + text-align: center; + + img { + display: inline-block; + float: none; + width: auto; + } + } + + .controls { + @include span-columns(12); + margin: 20px 0; + } +} + + +#members { + table-layout: auto; + + .country, + .age { + width: 5%; + } + + .member { + width: 20%; + } + + .steamid { + width: 15%; + } + + .rank { + width: 10%; + } + + .note { + width: 30%; + } + + .joined { + width: 10%; + } + + .joined { + text-align: right; + } + + &.short { + .rank { + width: 40%; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/themes/flat/pages/_users.scss b/app/assets/stylesheets/themes/flat/pages/_users.scss new file mode 100644 index 0000000..f951af4 --- /dev/null +++ b/app/assets/stylesheets/themes/flat/pages/_users.scss @@ -0,0 +1,216 @@ +/* + Users Listing +*/ + +#users { + table-layout: auto; + + .country, + .age { + width: 5%; + } + + .username, + .name { + width: 30%; + } + + .steamid { + width: 20%; + } + + .actions { + text-align: right; + } +} + +/* + Profile +*/ + +#user { + @include span-columns(12); + + .tabbed-contents { + margin-bottom: 20px; + } +} + +#profile { + + .controls { + @include shift(0); + } + + .tab { + + h4 { + margin-bottom: 1em; + } + + .fields:last-child { + margin-bottom: 0; + } + } +} + +#user-profile { + + .photo { + @include span-columns(12); + margin: 20px 0; + text-align: center; + + img { + display: inline-block; + float: none; + width: auto; + } + } + + #user-data { + @include span-columns(12); + margin-bottom: 20px; + + h2, + h3, + h4 { + margin-bottom: 1em; + } + + .group { + @include span-columns(6); + + dd a { + float: none; + display: block; + } + } + + .achievements { + margin-bottom: 20px; + } + + tbody td { + &:first-child, + &:nth-child(2) { + text-align: left; + } + } + } + + table.predictions { + + .prediction { + text-align: right; + } + } +} + +#profile-edit { + + h1 { + margin-bottom: 1em; + } + + form { + margin-top: 0; + } +} + +/* + Agenda +*/ + +#agenda { + + h4 { + margin-bottom: 1em; + } + + table { + margin-bottom: 20px; + } + + form { + @include span-columns(12); + margin-bottom: 20px; + } + + .tab { + :last-child { + margin-bottom: 0; + } + } + + #teams { + + table { + margin-bottom: 40px; + } + } +} + +/* + Messages +*/ + +#messages { + h1 { + margin-bottom: 1em; + } + + .tab { + + :last-child { + margin-bottom: 0; + } + } + + .message { + @include span-columns(12); + margin-bottom: 20px; + + .subject { + margin-bottom: 1em; + } + + .content { + margin-bottom: 20px; + } + + a.message { + display: inline; + margin: 0; + float: none; + } + + &.highlight { + font-weight: bold; + } + } + + .back { + margin-top: 20px; + } +} + +/* + Staff List +*/ + +table.staff { + table-layout: auto; + + .country { + width: 6%; + } + + .username { + width: 20%; + } + + .age { + width: 5%; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/themes/flat/theme.css.scss b/app/assets/stylesheets/themes/flat/theme.css.scss new file mode 100644 index 0000000..9e54cac --- /dev/null +++ b/app/assets/stylesheets/themes/flat/theme.css.scss @@ -0,0 +1,62 @@ +/* + Libraries & Configuration +*/ + +@import "bourbon"; +@import "variables"; +@import "neat"; +@import "neat-helpers"; +@import "font-awesome"; + +/* + Mixins +*/ + +@import "mixins/buttons"; +@import "mixins/flashes"; + +/* + Layout +*/ + +@import "layout/hacks"; +@import "layout/body"; +@import "layout/typography"; +@import "layout/header"; +@import "layout/navigation"; +@import "layout/sidebar"; +@import "layout/footer"; +@import "layout/helpers"; + +/* + Components +*/ + +@import "components/lists"; +@import "components/tables"; +@import "components/forms"; +@import "components/flashes"; +@import "components/comments"; +@import "components/gather"; +@import "components/breadcrumbs"; +@import "components/pagination"; +@import "components/tabs"; +@import "components/shoutbox"; + +/* + Pages +*/ + +@import "pages/news"; +@import "pages/categories"; +@import "pages/contests"; +@import "pages/forums"; +@import "pages/teams"; +@import "pages/users"; +@import "pages/matches"; +@import "pages/files"; +@import "pages/bans"; +@import "pages/polls"; +@import "pages/issues"; +@import "pages/servers"; +@import "pages/groups"; diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 69152be..b74a394 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -10,7 +10,7 @@ module ApplicationHelper end def active_theme - 'default' + 'flat' end def theme_stylesheet_link_tag diff --git a/app/views/application/_navigation.html.erb b/app/views/application/_navigation.html.erb index 61cc218..1eaa6e6 100644 --- a/app/views/application/_navigation.html.erb +++ b/app/views/application/_navigation.html.erb @@ -10,7 +10,7 @@ <% end %>
  • - <%= active_link_to controller: "contests", action: "current", class: 'contests' do %> + <%= active_link_to({ controller: "contests", action: "current" }, class: 'contests') do %> Contests <% end %>
  • - <%= active_link_to controller: "teams", action: :index, class: 'teams' do %> + <%= active_link_to({ controller: "teams", action: :index }, class: 'teams') do %> Teams <% end %>
  • - <%= active_link_to controller: "users", action: :index, class: 'users' do %> + <%= active_link_to({ controller: "users", action: :index }, class: 'users') do %> Users <% end %> -
    + <% if cuser.profile %> +
    + <% end %> diff --git a/config/application.rb b/config/application.rb index 8f8caf2..4244fc7 100644 --- a/config/application.rb +++ b/config/application.rb @@ -9,7 +9,7 @@ module Ensl config.exceptions_app = self.routes # Additional assets - config.assets.precompile += %w{errors.css} + config.assets.precompile += Dir.glob("#{config.root}/app/assets/stylesheets/themes/*").map { |path| ["#{path}/theme.css", "#{path}/errors.css"] }.flatten # Custom directories with classes and modules you want to be autoloadable. config.autoload_paths += Dir["#{config.root}/app/services/**/", "#{config.root}/app/models/concerns/"]