diff options
Diffstat (limited to 'app/assets')
| -rw-r--r-- | app/assets/stylesheets/application.css | 2 | ||||
| -rw-r--r-- | app/assets/stylesheets/application/bootstrapify.scss | 66 | ||||
| -rw-r--r-- | app/assets/stylesheets/application/main.css.scss | 241 | ||||
| -rw-r--r-- | app/assets/stylesheets/application/scaffolds.css.scss | 329 | ||||
| -rw-r--r-- | app/assets/stylesheets/colors.css.scss | 4 | ||||
| -rw-r--r-- | app/assets/stylesheets/main.css.scss | 13 | ||||
| -rw-r--r-- | app/assets/stylesheets/tournaments.css.scss | 4 |
7 files changed, 312 insertions, 347 deletions
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 1c8b233..4c4405c 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 ./application + *= require ./application/main */ /* If you put any styles in this file directly, I will knife you. */ diff --git a/app/assets/stylesheets/application/bootstrapify.scss b/app/assets/stylesheets/application/bootstrapify.scss new file mode 100644 index 0000000..0416b1e --- /dev/null +++ b/app/assets/stylesheets/application/bootstrapify.scss @@ -0,0 +1,66 @@ +@import "bootstrap"; + +.btn { + @extend .btn-default; +} + +a[role="button"], button, input[type="submit"] { + @extend .btn; +} + +.navbar { + form { + @extend .navbar-form; + } + .nav { + @extend .navbar-nav; + } + ul { + @extend .nav; + } +} +form { + input[type="text"], + input[type="search"], + input[type="tel"], + input[type="url"], + input[type="email"], + input[type="password"], + input[type="datetime"], + input[type="date"], + input[type="month"], + input[type="week"], + input[type="time"], + input[type="number"], + input[type="range"], + input[type="color"], + select, textarea{ + @extend .form-control; + } + label { + @extend .control-label; + } +} + +header nav { + @extend .navbar; + @extend .navbar-default; +} + +.alert { @extend .alert-default; } +.alert-success { @extend .alert; } +.alert-info { @extend .alert; } +.alert-warning { @extend .alert; } +.alert-danger { @extend .alert; } + +.panel-primary { @extend .panel; } +.panel-success { @extend .panel; } +.panel-info { @extend .panel; } +.panel-warning { @extend .panel; } +.panel-danger { @extend .panel; } +.panel { + h1, h2, h3, h4, h5, h6 { + @extend .panel-heading; + @extend .panel-title; + } +} diff --git a/app/assets/stylesheets/application/main.css.scss b/app/assets/stylesheets/application/main.css.scss new file mode 100644 index 0000000..36e285b --- /dev/null +++ b/app/assets/stylesheets/application/main.css.scss @@ -0,0 +1,241 @@ +// See this file for a complete list of variables: +// vendor/bundle/ruby/2.0.0/gems/bootstrap-sass-3.1.1.1/vendor/assets/stylesheets/bootstrap/_variables.scss +/* +$gray-darker: lighten(#000, 13.5%) !default; // #222 +$gray-dark: lighten(#000, 20%) !default; // #333 +$gray: lighten(#000, 33.5%) !default; // #555 +$gray-light: lighten(#000, 60%) !default; // #999 +$gray-lighter: lighten(#000, 93.5%) !default; // #eee + +$brand-primary: #428bca !default; +$brand-success: #5cb85c !default; +$brand-info: #5bc0de !default; +$brand-warning: #f0ad4e !default; +$brand-danger: #d9534f !default; +*/ +$legend-border-color: #ccc; // matches the default $input-border and $btn-default-border +@import "bootstrapify"; + +/* Mixins ***********************************************************/ +/* These are just here for other things to @extend. */ +/* Ok, they're really classes, but we don't use them like it. */ + +/* More elegant version of .input-group, which is over-complicated + because it supports all kind of things we don't always need to. + This is useful because it doesn't require extra HTML elements, + where .input-group does. */ +.simple-input-group { + white-space: nowrap; + .btn, .form-control { + display: table-cell; + &:not(:last-child) { + @include border-right-radius(0); + } + &:not(:first-child) { + @include border-left-radius(0); + border-left: 0; + } + } +} + +/* IDs **************************************************************/ +/* Specific page elements */ + +#notice { + @extend .alert-success; + @extend .container; + text-align: center; +} + +#error_explanation { + @extend .panel-danger; + @extend .container; + padding-left: 0; + padding-right: 0; + ul { + list-style: disc outside none; + } +} + +#alerts-ajax { + display: none; +} + + +form#search { + @extend .navbar-right; + @extend .simple-input-group; +} + +#user-actions { + @extend .navbar-btn; + @extend .navbar-left; + * { display: table-cell; } + div { + @extend .simple-input-group; + padding-right: .25em; + } +} + +/* Classes **********************************************************/ + +/* +.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 { + color: white; + background-color: hsl(0, 69%, 22%); + } +} +*/ + +.field_with_errors { + @extend .has-error; + display: inline; + label { + @extend .control-label; + } +} + +/* Elements *********************************************************/ + +footer { + @extend .container; + margin-top: 1em; + border-top: solid 1px $hr-border; + text-align: center; +} + +fieldset { + border: solid 1px $legend-border-color; + border-radius: .5em; + padding: 1em; + margin: 1em 0; + legend { + display: block; + margin: 0; + padding: .25em .5em; + width: auto; + border: solid 1px $legend-border-color; + border-radius: .5em; + } +} + +form ul { + list-style: none; +} + +pre { + text-align: left; +} + +/* Misc *************************************************************/ + +.tournament-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; + + div.row { + margin-left: 2%; + } + p.message { + margin-top: 10px; + } + + /* AKA the listing title */ + h3 { + margin-top: 0px; + color: #F0AD4E; + font-weight: bold; + } + + h3:hover { + color: #D09D3E; + } + + /* host of the tournament */ + .host { + font-weight: bold; + color: #FFF; + } + + .col-md-8 { + padding: 0; + a { + padding: 5px 0 0 0; + } + } + + .t-game{ + font-weight: bold; + text-align: center; + } + + .t-image{ + display: block; + margin:auto; + } +} + + +.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/application/scaffolds.css.scss b/app/assets/stylesheets/application/scaffolds.css.scss deleted file mode 100644 index 4f0c781..0000000 --- a/app/assets/stylesheets/application/scaffolds.css.scss +++ /dev/null @@ -1,329 +0,0 @@ -@import "bootstrap"; -@import "colors"; - -/* Layout ***********************************************************/ - -html { - body { - background: asset-url("bg.png", image) repeat scroll 0 0 $toolbar-color; - color: $page-color; - font-family: verdana, arial, helvetica, sans-serif; - font-size: 13px; - line-height: 18px; - - 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; - float: right; - 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; - } - input[type="submit"] { - @extend .btn-warning; - } - } - } - - #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: 10px auto 0; - } - - footer { - clear: both; - border-top: solid 1px $orange; - text-align: center; - margin: 1em auto 0; - 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; - } -} - -form ul { - list-style: none; -} - -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; - background: rgba(0,0,0,0.5); - margin: 0 0 5px 0; -} - -select { - background-color: #333; - padding: 5px; - border: none; - color: $orange; -} - -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 { - 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; - - div.row { - margin-left: 2%; - } - p.message { - margin-top: 10px; - } - - /* AKA the listing title */ - h3 { - margin-top: 0px; - color: #F0AD4E; - font-weight: bold; - } - - h3:hover { - color: #D09D3E; - } - - /* host of the tournament */ - .host { - font-weight: bold; - color: #FFF; - } - - .col-md-8 { - padding: 0; - a { - padding: 5px 0 0 0; - } - } - - .t-game{ - font-weight: bold; - text-align: center; - } - - .t-image{ - display: block; - margin:auto; - } -} - - -.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/colors.css.scss b/app/assets/stylesheets/colors.css.scss index c875caa..7ab3024 100644 --- a/app/assets/stylesheets/colors.css.scss +++ b/app/assets/stylesheets/colors.css.scss @@ -1,5 +1,5 @@ $darker-orange: #9D4102; $link-yellow: #FFC50D; $orange: #DD9125; -$page-color: #444; -$toolbar-color: black; +/*$page-color: #444;*/ +/*$toolbar-color: black;*/ diff --git a/app/assets/stylesheets/main.css.scss b/app/assets/stylesheets/main.css.scss index 15f5ac5..e69de29 100644 --- a/app/assets/stylesheets/main.css.scss +++ b/app/assets/stylesheets/main.css.scss @@ -1,13 +0,0 @@ -// Place all the styles related to the main controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ - -.jumbotron { - background-color: #FFF; - box-shadow: 1px 1px 20px black; - width: 93%; - - p { - line-height: 1.5em; - } -} diff --git a/app/assets/stylesheets/tournaments.css.scss b/app/assets/stylesheets/tournaments.css.scss index 0b8aa99..92ac3e1 100644 --- a/app/assets/stylesheets/tournaments.css.scss +++ b/app/assets/stylesheets/tournaments.css.scss @@ -22,7 +22,7 @@ } } - +/* ul#tournament-users { list-style: none; padding: 0; @@ -38,7 +38,7 @@ ul#tournament-users { color: white; } } - +*/ div.leave-buttons { margin-top: 50px; form { |