style changes and refactoring

This commit is contained in:
2012-09-03 12:09:35 +02:00
parent 81a2423f6b
commit 39449f240a
36 changed files with 527 additions and 159 deletions
@@ -0,0 +1,3 @@
$qbrown: #634227
$wood: image-url('textures/wood6.png')
$background-brown: #57351f
@@ -15,3 +15,8 @@ body
$navbar-inner-teint: 200
background-color: rgba($navbar-inner-teint, $navbar-inner-teint, $navbar-inner-teint, 0.8)
background-image: url()
.brand
padding: 3px 0
.container
.brand
padding-left: 7px
+286
View File
@@ -0,0 +1,286 @@
@import compass
@import mixins
// Contents:
// =General
// =Breadcrumbs
// =Headings
// =Navigation
// =Forms
// =Tables
// =Pagination
// =Misc
$color: #c6c6c6
$bg: #2f2f2f
$link: #0088cc
$warning: #faa732
$success: #5bb75b
$error: #fc5b5e
// ds original: #FB292D
$info: #3a87ad
$input-bg: #666666
// ds default: #444
$input-border: #111111
// default: white
$input-placeholder: #666666
$input-color: white
//=General ========================================
// Everything with the inset panel just extends .well
.well
+inset-panel-dark
body
background: $bg
color: $color
//=Breadcrumbs =======================================
.breadcrumb
@extend .well
border: 0
//over bs
li
text-shadow: 0 1px 0 #000
//over bs
//=Headings ======================================
.page-header
+horizontal-rule-dark
h1,h2,h3,h4,h5,h6
color: white
h6
color: #999
//=Navigation
.nav .dropdown-menu
.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
.nav > .open.active > a:hover
background-color: darken($bg, 5%)
border-color: $bg $bg transparent $bg
.nav > .dropdown.active > a:hover
color: #fff
.nav-tabs .active .dropdown-toggle .caret,
.nav-pills .active .dropdown-toggle .caret
border-top-color: #fff
.nav-tabs
border-bottom: 1px solid #666
& > .active > a,
& > .active > a:hover
background-color: $bg
color: #fff
border-color: #666 #666 transparent #666
& > li > a:hover
border-color: $bg $bg #666666 $bg
background-color: darken($bg, 5%)
color: lighten($link, 10%)
&.nav-stacked
& > li > a,
& > li > a:hover
border-color: #666
.nav-pills
& > li > a:hover
background-color: darken($bg, 5%)
color: lighten($link, 10%)
.nav-list > li > a,
.nav-list .nav-header
text-shadow: 0 1px 0 #000
.nav-list > li > a:hover
background-color: darken($bg, 10%)
color: lighten($link, 10%)
.nav-list .active
& > a:hover
background-color: #0088cc
color: white
.tabs-below .nav-tabs
border-top: 1px solid #666
.tabs-left .nav-tabs
border-right: 1px solid #666
.tabs-right .nav-tabs
border-left: 1px solid #666
.tabs-below .nav-tabs > li > a:hover
border-top: 1px solid #666
.tabs-left .nav-tabs > li > a:hover
border-color: transparent #666 transparent transparent
.tabs-right .nav-tabs > li > a:hover
border-color: transparent transparent transparent #666
.tabs-below .nav-tabs .active > a,
.tabs-below .nav-tabs .active > a:hover
border-color: transparent #666 #666 #666
.tabs-left .nav-tabs .active > a,
.tabs-left .nav-tabs .active > a:hover
border-color: #666 transparent #666 #666
.tabs-right .nav-tabs .active > a,
.tabs-right .nav-tabs .active > a:hover
border-color: #666 #666 #666 transparent
//=Forms ========================================
+placeholder($input-placeholder)
.input-prepend .add-on,
.input-append .add-on
background: #444
color: $color
border-color: #111
text-shadow: 0 1px 0 black
label
color: $color
input,
input[type="file"],
select,
textarea
color: $input-color
//background-color: $input-bg;
border-color: $input-border
@extend .well
.search-query
-webkit-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0, rgba(0, 0, 0, 0) 0 1px 7px 0px inset
legend
color: white
+horizontal-rule-dark
.form-actions
border-top-color: #222
background-color: #444
.help-inline
color: #999
.control-group
&.warning
+controls($warning)
&.success
+controls($success)
&.error
+controls($error)
//=Tables ========================================
.table
thead
color: white
td
border-top-color: #666
.table-striped
tbody tr:nth-child(2n+1)
td, th
background-color: #444
.table-bordered
border: 1px solid #666
th + th,
td + td,
th + td,
td + th
border-left: 1px solid #666
//=Pagination
.pagination a:hover
color: lighten($link, 10%)
background-color: darken($bg, 5%)
.pagination .active a
color: #fff
background-color: darken($bg, 5%)
.pagination a
border-color: #666
//=Pager
.pager a
background-color: $bg
border-color: #666
&:hover
background-color: darken($bg, 5%)
color: lighten($link, 10%)
//=Alerts
=alert($color)
color: #fff
background-color: $color
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25)
border-color: darken($color, 25%)
h4
color: darken($color, 20%)
.alert
+alert($warning)
.alert-success
+alert($success)
.alert-error
+alert($error)
.alert-info
+alert($info)
//=Modals
.modal
background-color: #444
.modal-header
border-bottom: 1px solid #222
.modal-body p
color: $color
.modal-footer
background-color: darken(#444444, 5%)
border-top: 1px solid #222
+box-shadow(0 1px 0 #333333 inset)
//=Progress bars
.progress
@extend .well
//=Misc ========================================
blockquote
border-left-color: #111
&.pull-right
border-right-color: #111
hr
+horizontal-rule-dark
border-top: none
code
@extend .well
border: none
//over bs
pre
@extend .well
border: none
//over bs
color: $color
+41
View File
@@ -0,0 +1,41 @@
=placeholder($color: $input-placeholder)
\:-moz-placeholder
color: $color
\::-webkit-input-placeholder
color: $color
=controls($color)
& > label,
.help-block,
.help-inline
color: $color
input, select, textarea
//color: lighten($color, 20%);
color: $color
border-color: $color
input:focus,
select:focus,
textarea:focus
border-color: $color
+box-shadow(0 0 6px $color)
=inset-panel-dark
+box-shadow(rgba(white, 0.1) 0 1px 0, rgba(black, 0.8) 0 1px 7px 0px inset)
background: darken(#2f2f2f, 6)
background-color: rgba(black, 0.3)
=horizontal-rule-dark
+box-shadow(rgba(white, 0.07) 0 1px 0)
border-bottom: 1px solid #121212
=horizontal-rule-top-dark
+box-shadow(rgba(white, 0.07) 0 1px 0 inset)
border-top: 1px solid #121212
=vertical-rule-dark
+box-shadow(rgba(white, 0.07) 1px 0 0)
border-right: 1px solid #121212
=vertical-rule-left-dark
+box-shadow(rgba(white, 0.07) 1px 0 0 inset)
border-left: 1px solid #121212
+3 -1
View File
@@ -8,6 +8,8 @@
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require 'bootstrap_and_overrides'
*= require 'bootstrap_overrides'
*= require_directory .
*= require_self
*/
@@ -1,14 +1,16 @@
@import compass
@import constants
$side-spacing: 5px
$qbrown: #634227
html
background-image: image-url('textures/wood6.png')
background-image: $wood
background-color: $background-brown
body
padding-left: $side-spacing
padding-right: $side-spacing
background-image: image-url('textures/wood6.png')
//background-image: image-url('textures/wood6.png')
background-color: transparent
.home-panel
margin-left: 20px
margin-right: 20px
@@ -0,0 +1,13 @@
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require_directory .
*/
@@ -0,0 +1,7 @@
ul#qr-list
list-style: none
li
float: left
margin-right: 20px
border: 1px solid black
margin-bottom: 20px
@@ -1,3 +1,9 @@
@import constants
html
background-color: $background-brown
background-image: $wood
body
background-color: transparent
table
thead
th
@@ -84,3 +90,6 @@ table
padding: 0
li
float: left
img.home-qr
float: left
margin: 0 20px 20px 0
@@ -1,5 +1,6 @@
/*
*= require_self
*= require 'bootstrap_and_overrides'
*= require 'bootstrap_overrides'
*= require_directory .
*= require 'phone/bootstrap_overrides'
*= require_self
*/
@@ -1,8 +1,12 @@
$side-spacing: 0px
@import constants
html
background-image: $wood
background-color: $background-brown
body
padding-left: $side-spacing
padding-right: $side-spacing
background-image: image-url('textures/wood6.png')
background-color: transparent
//padding-top: 50px
.navbar-fixed-top
margin-left: -$side-spacing