From 657d7071828e6639cc2261b80e87418efea64df6 Mon Sep 17 00:00:00 2001 From: Luke Shumaker Date: Mon, 28 Apr 2014 12:40:14 -0400 Subject: go to town on the CSS --- app/assets/stylesheets/alerts.css.scss | 3 - app/assets/stylesheets/application.css | 2 +- .../stylesheets/application/scaffolds.css.scss | 293 +++++++++++++++++++++ app/assets/stylesheets/brackets.css.scss | 3 - app/assets/stylesheets/games.css.scss | 3 - app/assets/stylesheets/main.css.scss | 1 - app/assets/stylesheets/matches.css.scss | 31 +-- app/assets/stylesheets/pms.css.scss | 11 - app/assets/stylesheets/scaffolds.css.scss | 247 ----------------- app/assets/stylesheets/search.css.scss | 3 - app/assets/stylesheets/servers.css.scss | 20 +- app/assets/stylesheets/sessions.css.scss | 3 - app/assets/stylesheets/teams.css.scss | 3 - app/assets/stylesheets/tournaments.css.scss | 43 ++- app/assets/stylesheets/users.css.scss | 41 --- app/views/layouts/application.html.erb | 20 +- 16 files changed, 326 insertions(+), 401 deletions(-) create mode 100644 app/assets/stylesheets/application/scaffolds.css.scss delete mode 100644 app/assets/stylesheets/scaffolds.css.scss diff --git a/app/assets/stylesheets/alerts.css.scss b/app/assets/stylesheets/alerts.css.scss index c01a620..e69de29 100644 --- a/app/assets/stylesheets/alerts.css.scss +++ b/app/assets/stylesheets/alerts.css.scss @@ -1,3 +0,0 @@ -// Place all the styles related to the alerts controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 0a0365d..1c8b233 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -6,7 +6,7 @@ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path. * *= require_self - *= require_tree . + *= require_tree ./application */ /* If you put any styles in this file directly, I will knife you. */ diff --git a/app/assets/stylesheets/application/scaffolds.css.scss b/app/assets/stylesheets/application/scaffolds.css.scss new file mode 100644 index 0000000..28600b8 --- /dev/null +++ b/app/assets/stylesheets/application/scaffolds.css.scss @@ -0,0 +1,293 @@ +@import "bootstrap"; +@import "colors"; + +/* Layout ***********************************************************/ + +html { + height: 100%; + + body { + background: asset-url("bg.png", image) repeat scroll 0 0 $page-color; + color: $page-color; + font-family: verdana, arial, helvetica, sans-serif; + font-size: 13px; + line-height: 18px; + height: 100%; + background-color: $toolbar-color; + border-radius: 0px 0px 5px 5px; + box-shadow: 0px 0px 5px black; + + header > nav { + @extend .navbar; + @extend .navbar-inverse; + color: white; + + .navbar-brand { + @extend .no-dec; + a{ + color: white; + &:hover, &:active, &:focus { + color: white; + font-weight: normal; + text-decoration: none; + } + } + } + + #log-buttons { + margin-top: 8px; + form { display: inline; } + #alerts-ajax { + display: none; + } + } + + form.search { + @extend .navbar-form; + @extend .navbar-right; + input[type="submit"] { + @extend .btn-warning; margin-top: -3px; margin-right: 8px; + } + input[type="text"], input[type="search"] { + background-color: #303030; + border: 2px solid #ED9C28; + border-radius: 5px; + color: #FFF; + font-weight: bold; + height: 30px; + padding: 0px 5px; + } + } + } + + #notice { + background-color: rgba(0,0,0,0.5); + border-radius: 7px; + padding: 10px; + width: 80%; + margin: 0px auto; + text-align: center; + + p { + color: lightgreen !important; + font-weight: bold; + } + } + + .wrapper { + width: 80%; + margin-top: 10px; + min-height: 80%; + height: auto !important; + height: 99%; + margin: 0 auto; + } + + + footer { + clear: both; + border-top: solid 1px $orange; + text-align: center; + margin: 0 auto; + width: 90%; + } + } +} + +/* General styles ***************************************************/ + +h1, h2, h3, h4, h5, p, li, label{ + color: $orange; +} + +h1, h2, h3, h4, h5 { + text-shadow: 0px 0px 2px $darker-orange; +} + +p, ol, ul, td { + font-family: verdana, arial, helvetica, sans-serif; + font-size: 13px; + line-height: 18px; +} + +fieldset { + border: solid 1px $orange; + border-radius: .5em; + padding: 1em; + margin: 1em 0; + legend { + color: $orange; + display: block; + margin: 0; + padding: .25em .5em; + width: auto; + border: solid 1px $orange; + border-radius: .5em; + } +} + +a, button, input[type="submit"] { + @extend .btn; + &.user { @extend .btn-info; } + &.signup { @extend .btn-success; } + &.signin { @extend .btn-warning; } + &.signout { @extend .btn-danger; } + &.server { @extend .btn-warning; } + &.create-alert { + color: white; + background-color: rgb(255, 69, 0); + border-color: rgb(255, 69, 0); + } + &.alerts { + @extend .navbar-right; + @extend .glyphicon; + @extend .glyphicon-exclamation-sign; + color: white; + background-color: hsl(0, 69%, 22%) !important; + } + font-weight: bold !important; +} + +input, textarea{ + -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1); + -moz-box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1); + box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1); + + border: 3px inset #A5A5A5; + padding: 8px; + color: $orange !important; + background: rgba(0,0,0,0.5); + margin: 0 0 5px 0; +} + +select { + background-color: #333; + padding: 5px; + border: none; + color: $orange !important; +} + +pre { + text-align: left; + background-color: #eee; + padding: 10px; + font-size: 11px; +} + +a { + color: $link-yellow; + &:hover { + color: white; + + } +} + +p, li { + color: #DD9125; +} + +td, th { + color: #DD9125; +} + +svg { + min-width: 600px; +} + +div.field, div.actions { + margin-bottom: 10px; +} + +#error_explanation { + width: 450px; + border: 2px solid red; + padding: 7px; + padding-bottom: 0; + margin-bottom: 20px; + background-color: #f0f0f0; + h2 { + text-align: left; + font-weight: bold; + padding: 5px 5px 5px 15px; + font-size: 12px; + margin: -7px; + margin-bottom: 0px; + background-color: #c00; + color: #fff; + } + ul li { + font-size: 12px; + list-style: square; + } +} +.field_with_errors { + padding: 1px; + background-color: #FF4C4C; + box-shadow: 0px 0px 5px red; + display: table; +} +.errors { + background-color: rgba(0,0,0,0.5);; + color: red; + border-radius: 7px; + padding: 10px; +} + +/* Specific styles **************************************************/ + +.tournament-listing { + div.row { + margin-left: 2%; + } + p.message { + margin-top: 10px; + } +} + +.user-listing { + margin: 10px 0px; + border-radius: 5px; + box-shadow: 0px 0px 3px #B8B8B8; + background-color: rgba(0, 0, 0, 0.6); + border: 1px solid #AAAAAA; + min-height: 100px; + padding: 8px 4px; + display: inline-table; + + /* AKA the listing title */ + h3 { + margin-top: 0px; + color: #F0AD4E; + font-weight: bold; + } + + h3:hover { + color: #D09D3E; + } + + .things { + padding: 0px 10px; + } + + p { + margin: 0; + } + div.row { + margin-left: 2%; + } +} + +// Limitation: Only one box can be expanded at a time +.collapsible { + .collapsed { display: block; } + .expanded { display: none; } + &:target { + .collapsed { display: none; } + .expanded { display: block; } + } +} + +.simple_captcha { + background-color: rgba(255, 255, 255, 0.7); + margin: 10px 0px; +} diff --git a/app/assets/stylesheets/brackets.css.scss b/app/assets/stylesheets/brackets.css.scss index 481e6e6..e69de29 100644 --- a/app/assets/stylesheets/brackets.css.scss +++ b/app/assets/stylesheets/brackets.css.scss @@ -1,3 +0,0 @@ -// Place all the styles related to the brackets controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ diff --git a/app/assets/stylesheets/games.css.scss b/app/assets/stylesheets/games.css.scss index db1b7bc..e69de29 100644 --- a/app/assets/stylesheets/games.css.scss +++ b/app/assets/stylesheets/games.css.scss @@ -1,3 +0,0 @@ -// Place all the styles related to the games controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ diff --git a/app/assets/stylesheets/main.css.scss b/app/assets/stylesheets/main.css.scss index 3859f53..15f5ac5 100644 --- a/app/assets/stylesheets/main.css.scss +++ b/app/assets/stylesheets/main.css.scss @@ -10,5 +10,4 @@ p { line-height: 1.5em; } - } diff --git a/app/assets/stylesheets/matches.css.scss b/app/assets/stylesheets/matches.css.scss index f4b31e4..e3ad6e7 100644 --- a/app/assets/stylesheets/matches.css.scss +++ b/app/assets/stylesheets/matches.css.scss @@ -1,8 +1,4 @@ -// Place all the styles related to the matches controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ - -#boxes li { +#peer_review_boxes li { cursor: move; position: relative; float: left; @@ -14,7 +10,9 @@ padding-top: 10px; background-color: rgb(238, 238, 255); } -#numeric li { + +// Nothing uses this one right now +#peer_review_numeric li { cursor: move; position: relative; float: left; @@ -27,23 +25,6 @@ background-color: rgb(238, 238, 255); } -#match-stats { - padding-bottom: 10px; - border-bottom: thick dashed #F0AD4E; -} - -#match-winner { - margin: 0 auto; - text-align: center; - font-size: 2em; -} - -#current-id { - display: none; -} - - - /**** INDEX PAGE - TABLE AND GRAPH ****/ #matches-table { @extend .table; @@ -53,7 +34,3 @@ color: #333; } } - -svg { - min-width: 600px; -} diff --git a/app/assets/stylesheets/pms.css.scss b/app/assets/stylesheets/pms.css.scss index a14299e..e69de29 100644 --- a/app/assets/stylesheets/pms.css.scss +++ b/app/assets/stylesheets/pms.css.scss @@ -1,11 +0,0 @@ -// Place all the styles related to the pms controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ - -p, li { - color: #DD9125; -} -td, th { - padding: 0px; - color: #DD9125; -} \ No newline at end of file diff --git a/app/assets/stylesheets/scaffolds.css.scss b/app/assets/stylesheets/scaffolds.css.scss deleted file mode 100644 index d9bb164..0000000 --- a/app/assets/stylesheets/scaffolds.css.scss +++ /dev/null @@ -1,247 +0,0 @@ -@import "bootstrap"; -@import "colors"; - -.tournament-listing { - div.row { - margin-left: 2%; - } - p.message { - margin-top: 10px; - } -} - -.user-listing { - div.row { - margin-left: 2%; - } -} - -header > nav { - @extend .navbar; - @extend .navbar-inverse; - color: white; - - #log-buttons { - margin-top: 8px; - form { display: inline; } - } - form.search { - @extend .navbar-form; - @extend .navbar-right; - input[type="submit"] { - @extend .btn-warning; margin-top: -3px; margin-right: 8px; - } - } -} - -#alerts-ajax { - display: none; -} - -.btn-custom-orange { - color: white; - background-color: rgb(255, 69, 0); - border-color: rgb(255, 69, 0); -} -.btn-custom-foxtrot { - color: white; - background-color: hsl(0, 69%, 22%) !important; -} - - - -a, input[type="submit"] { - @extend .btn; - &.user { @extend .btn-info; } - &.signup { @extend .btn-success; } - &.signin { @extend .btn-warning; } - &.signout { @extend .btn-danger; } - &.server { @extend .btn-warning; } - &.create-alert {@extend .btn-custom-orange;} - &.alerts { @extend .navbar-right; @extend .glyphicon; @extend .glyphicon-exclamation-sign; @extend .btn-custom-foxtrot;} - font-weight: bold !important; -} - - -input[type="text"], input[type="password"], textarea{ - -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1); - -moz-box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1); - box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1); - - border: 3px inset #A5A5A5; - padding: 8px; - color: $orange !important; - background: rgba(0,0,0,0.5); - margin: 0 0 5px 0; -} - -select { - background-color: #333; - padding: 5px; - border: none; - color: #DD9125 !important; -} - -p.errors { - background-color: rgba(0,0,0,0.5);; - color: red; - border-radius: 7px; - padding: 10px; -} - -#error_explanation { - width: 450px; - border: 2px solid red; - padding: 7px; - padding-bottom: 0; - margin-bottom: 20px; - background-color: #f0f0f0; - h2 { - text-align: left; - font-weight: bold; - padding: 5px 5px 5px 15px; - font-size: 12px; - margin: -7px; - margin-bottom: 0px; - background-color: #c00; - color: #fff; - } - ul li { - font-size: 12px; - list-style: square; - } -} - -// Limitation: Only one box can be expanded at a time -.collapsible { - .collapsed { display: block; } - .expanded { display: none; } - &:target { - .collapsed { display: none; } - .expanded { display: block; } - } -} - -pre { - text-align: left; -} - - -#query{ - background-color: #303030; - border: 2px solid #ED9C28; - border-radius: 5px; - color: #FFF; - font-weight: bold; - height: 30px; - padding: 0px 5px; -} - -html{ - height: 100%; -} - -body { - background: asset-url("bg.png", image) repeat scroll 0 0 $page-color; - color: $page-color; - font-family: verdana, arial, helvetica, sans-serif; - font-size: 13px; - line-height: 18px; - height: 100%; -} - -h1, h2, h3, h4, h5, p, li, label{ - color: $orange; -} - -h1, h2, h3, h4, h5 { - text-shadow: 0px 0px 2px $darker-orange; -} - -p, ol, ul, td { - font-family: verdana, arial, helvetica, sans-serif; - font-size: 13px; - line-height: 18px; -} - -/* NAVBAR */ - -.navbar-brand { - @extend .no-dec; - a{ - color: white; - &:hover, &:active, &:focus { - color: white; - font-weight: normal; - text-decoration: none; - } - } -} - -.navbar-inverse, header > nav { - background-color: $toolbar-color; - border-radius: 0px 0px 5px 5px; - box-shadow: 0px 0px 5px black; -} - -pre { - background-color: #eee; - padding: 10px; - font-size: 11px; -} - -a { - color: $link-yellow; - &:hover { - color: white; - - } -} - -div { - &.field, &.actions { - margin-bottom: 10px; - } -} - -#notice { - background-color: rgba(0,0,0,0.5); - border-radius: 7px; - padding: 10px; - width: 80%; - margin: 0px auto; - text-align: center; - - p { - color: lightgreen !important; - font-weight: bold; - } -} - -.field_with_errors { - padding: 1px; - background-color: #FF4C4C; - box-shadow: 0px 0px 5px red; - display: table; -} - -.wrapper { - width: 80%; - margin-top: 10px; - min-height: 80%; - height: auto !important; - height: 99%; - margin: 0 auto; -} - -button, input[type="submit"] { - @extend .btn; -} - -footer { - clear: both; - border-top: solid 1px $orange; - text-align: center; - margin: 0 auto; - width: 90%; -} diff --git a/app/assets/stylesheets/search.css.scss b/app/assets/stylesheets/search.css.scss index 22fd394..e69de29 100644 --- a/app/assets/stylesheets/search.css.scss +++ b/app/assets/stylesheets/search.css.scss @@ -1,3 +0,0 @@ -// Place all the styles related to the search controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ diff --git a/app/assets/stylesheets/servers.css.scss b/app/assets/stylesheets/servers.css.scss index fd0f61d..cd74f58 100644 --- a/app/assets/stylesheets/servers.css.scss +++ b/app/assets/stylesheets/servers.css.scss @@ -2,26 +2,8 @@ // They will automatically be included in application.css. // You can use Sass (SCSS) here: http://sass-lang.com/ -@import "colors"; - .edit_server { - - color: #FFF; - - fieldset { - color: $orange; - legend { - color: $orange; - border-color: $orange; - } - } - - input[type="submit"] { - color: $page-color; - } - li { list-style: none; } - -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/sessions.css.scss b/app/assets/stylesheets/sessions.css.scss index 7bef9cf..e69de29 100644 --- a/app/assets/stylesheets/sessions.css.scss +++ b/app/assets/stylesheets/sessions.css.scss @@ -1,3 +0,0 @@ -// Place all the styles related to the sessions controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ diff --git a/app/assets/stylesheets/teams.css.scss b/app/assets/stylesheets/teams.css.scss index 320d00d..e69de29 100644 --- a/app/assets/stylesheets/teams.css.scss +++ b/app/assets/stylesheets/teams.css.scss @@ -1,3 +0,0 @@ -// Place all the styles related to the teams controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ diff --git a/app/assets/stylesheets/tournaments.css.scss b/app/assets/stylesheets/tournaments.css.scss index e62c228..498bdb3 100644 --- a/app/assets/stylesheets/tournaments.css.scss +++ b/app/assets/stylesheets/tournaments.css.scss @@ -4,24 +4,6 @@ @import "colors"; -.new_tournament, .edit_tournament { - td, th { - padding: 5px; - } - legend { - color: $orange - } -} - -p.default-field { - display: inline; -} - -span.default-explanation { - color: gray; - font-style: italic; -} - #players-needed { text-align: center; font-style: italic; @@ -41,15 +23,20 @@ span.default-explanation { } - -#tournament-users{ - - li { - color: #10A010; - } - - .black { - color: white; +#tournament-users { + ul { + list-style: none; + padding: 0; + margin: 0; + li { + padding-left: 1em; + text-indent: -.7em; + &:before { + content: "• "; + color: #10A010; + } + color: white; + } } } @@ -104,4 +91,4 @@ div.leave-buttons { form { display: inline; } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/users.css.scss b/app/assets/stylesheets/users.css.scss index 5df7aee..e69de29 100644 --- a/app/assets/stylesheets/users.css.scss +++ b/app/assets/stylesheets/users.css.scss @@ -1,41 +0,0 @@ -// Place all the styles related to the users controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ - - -/*** FOR NEW USER - AKA SIGN UP ***/ -.simple_captcha { - background-color: rgba(255, 255, 255, 0.7); - margin: 10px 0px; -} - - -div.user-listing { - margin: 10px 0px; - border-radius: 5px; - box-shadow: 0px 0px 3px #B8B8B8; - background-color: rgba(0, 0, 0, 0.6); - border: 1px solid #AAAAAA; - min-height: 100px; - padding: 8px 4px; - display: inline-table; - - /* AKA the listing title */ - h3 { - margin-top: 0px; - color: #F0AD4E; - font-weight: bold; - } - - h3:hover { - color: #D09D3E; - } - - .things { - padding: 0px 10px; - } - - p { - margin: 0; - } -} \ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index f3535e9..af26e29 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,13 +1,17 @@ - Leaguer - <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> - <%= javascript_include_tag "application", "data-turbolinks-track" => true %> - <%= javascript_include_tag "#{params[:controller]}", "data-turbolinks-track" => true %> - <%= javascript_include_tag "#{params[:controller]}/#{params[:action]}", "data-turbolinks-track" => true %> - <%= csrf_meta_tags %> - <%= yield :head %> + Leaguer + + <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> + <%= stylesheet_link_tag "#{params[:controller]}", media: "all", "data-turbolinks-track" => true %> + + <%= javascript_include_tag "application", "data-turbolinks-track" => true %> + <%= javascript_include_tag "#{params[:controller]}", "data-turbolinks-track" => true %> + <%= javascript_include_tag "#{params[:controller]}/#{params[:action]}", "data-turbolinks-track" => true %> + + <%= csrf_meta_tags %> + <%= yield :head %>
@@ -48,7 +52,7 @@ <% if notice %>

<%= notice %>

<% end %>
- <%= yield %> + <%= yield %>