1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/static/less/theme.less Fri Dec 20 22:30:44 2013 +0100
1.3 @@ -0,0 +1,247 @@
1.4 +
1.5 +//
1.6 +// Load core variables and mixins
1.7 +// --------------------------------------------------
1.8 +
1.9 +@import "variables.less";
1.10 +@import "mixins.less";
1.11 +
1.12 +
1.13 +
1.14 +//
1.15 +// Buttons
1.16 +// --------------------------------------------------
1.17 +
1.18 +// Common styles
1.19 +.btn-default,
1.20 +.btn-primary,
1.21 +.btn-success,
1.22 +.btn-info,
1.23 +.btn-warning,
1.24 +.btn-danger {
1.25 + text-shadow: 0 -1px 0 rgba(0,0,0,.2);
1.26 + @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
1.27 + .box-shadow(@shadow);
1.28 +
1.29 + // Reset the shadow
1.30 + &:active,
1.31 + &.active {
1.32 + .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
1.33 + }
1.34 +}
1.35 +
1.36 +// Mixin for generating new styles
1.37 +.btn-styles(@btn-color: #555) {
1.38 + #gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%));
1.39 + .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners
1.40 + background-repeat: repeat-x;
1.41 + border-color: darken(@btn-color, 14%);
1.42 +
1.43 + &:hover,
1.44 + &:focus {
1.45 + background-color: darken(@btn-color, 12%);
1.46 + background-position: 0 -15px;
1.47 + }
1.48 +
1.49 + &:active,
1.50 + &.active {
1.51 + background-color: darken(@btn-color, 12%);
1.52 + border-color: darken(@btn-color, 14%);
1.53 + }
1.54 +}
1.55 +
1.56 +// Common styles
1.57 +.btn {
1.58 + // Remove the gradient for the pressed/active state
1.59 + &:active,
1.60 + &.active {
1.61 + background-image: none;
1.62 + }
1.63 +}
1.64 +
1.65 +// Apply the mixin to the buttons
1.66 +.btn-default { .btn-styles(@btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; }
1.67 +.btn-primary { .btn-styles(@btn-primary-bg); }
1.68 +.btn-success { .btn-styles(@btn-success-bg); }
1.69 +.btn-warning { .btn-styles(@btn-warning-bg); }
1.70 +.btn-danger { .btn-styles(@btn-danger-bg); }
1.71 +.btn-info { .btn-styles(@btn-info-bg); }
1.72 +
1.73 +
1.74 +
1.75 +//
1.76 +// Images
1.77 +// --------------------------------------------------
1.78 +
1.79 +.thumbnail,
1.80 +.img-thumbnail {
1.81 + .box-shadow(0 1px 2px rgba(0,0,0,.075));
1.82 +}
1.83 +
1.84 +
1.85 +
1.86 +//
1.87 +// Dropdowns
1.88 +// --------------------------------------------------
1.89 +
1.90 +.dropdown-menu > li > a:hover,
1.91 +.dropdown-menu > li > a:focus {
1.92 + #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
1.93 + background-color: darken(@dropdown-link-hover-bg, 5%);
1.94 +}
1.95 +.dropdown-menu > .active > a,
1.96 +.dropdown-menu > .active > a:hover,
1.97 +.dropdown-menu > .active > a:focus {
1.98 + #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
1.99 + background-color: darken(@dropdown-link-active-bg, 5%);
1.100 +}
1.101 +
1.102 +
1.103 +
1.104 +//
1.105 +// Navbar
1.106 +// --------------------------------------------------
1.107 +
1.108 +// Default navbar
1.109 +.navbar-default {
1.110 + #gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg);
1.111 + .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
1.112 + border-radius: @navbar-border-radius;
1.113 + @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
1.114 + .box-shadow(@shadow);
1.115 +
1.116 + .navbar-nav > .active > a {
1.117 + #gradient > .vertical(@start-color: darken(@navbar-default-bg, 5%); @end-color: darken(@navbar-default-bg, 2%));
1.118 + .box-shadow(inset 0 3px 9px rgba(0,0,0,.075));
1.119 + }
1.120 +}
1.121 +.navbar-brand,
1.122 +.navbar-nav > li > a {
1.123 + text-shadow: 0 1px 0 rgba(255,255,255,.25);
1.124 +}
1.125 +
1.126 +// Inverted navbar
1.127 +.navbar-inverse {
1.128 + #gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg);
1.129 + .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
1.130 +
1.131 + .navbar-nav > .active > a {
1.132 + #gradient > .vertical(@start-color: @navbar-inverse-bg; @end-color: lighten(@navbar-inverse-bg, 2.5%));
1.133 + .box-shadow(inset 0 3px 9px rgba(0,0,0,.25));
1.134 + }
1.135 +
1.136 + .navbar-brand,
1.137 + .navbar-nav > li > a {
1.138 + text-shadow: 0 -1px 0 rgba(0,0,0,.25);
1.139 + }
1.140 +}
1.141 +
1.142 +// Undo rounded corners in static and fixed navbars
1.143 +.navbar-static-top,
1.144 +.navbar-fixed-top,
1.145 +.navbar-fixed-bottom {
1.146 + border-radius: 0;
1.147 +}
1.148 +
1.149 +
1.150 +
1.151 +//
1.152 +// Alerts
1.153 +// --------------------------------------------------
1.154 +
1.155 +// Common styles
1.156 +.alert {
1.157 + text-shadow: 0 1px 0 rgba(255,255,255,.2);
1.158 + @shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
1.159 + .box-shadow(@shadow);
1.160 +}
1.161 +
1.162 +// Mixin for generating new styles
1.163 +.alert-styles(@color) {
1.164 + #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 7.5%));
1.165 + border-color: darken(@color, 15%);
1.166 +}
1.167 +
1.168 +// Apply the mixin to the alerts
1.169 +.alert-success { .alert-styles(@alert-success-bg); }
1.170 +.alert-info { .alert-styles(@alert-info-bg); }
1.171 +.alert-warning { .alert-styles(@alert-warning-bg); }
1.172 +.alert-danger { .alert-styles(@alert-danger-bg); }
1.173 +
1.174 +
1.175 +
1.176 +//
1.177 +// Progress bars
1.178 +// --------------------------------------------------
1.179 +
1.180 +// Give the progress background some depth
1.181 +.progress {
1.182 + #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
1.183 +}
1.184 +
1.185 +// Mixin for generating new styles
1.186 +.progress-bar-styles(@color) {
1.187 + #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 10%));
1.188 +}
1.189 +
1.190 +// Apply the mixin to the progress bars
1.191 +.progress-bar { .progress-bar-styles(@progress-bar-bg); }
1.192 +.progress-bar-success { .progress-bar-styles(@progress-bar-success-bg); }
1.193 +.progress-bar-info { .progress-bar-styles(@progress-bar-info-bg); }
1.194 +.progress-bar-warning { .progress-bar-styles(@progress-bar-warning-bg); }
1.195 +.progress-bar-danger { .progress-bar-styles(@progress-bar-danger-bg); }
1.196 +
1.197 +
1.198 +
1.199 +//
1.200 +// List groups
1.201 +// --------------------------------------------------
1.202 +
1.203 +.list-group {
1.204 + border-radius: @border-radius-base;
1.205 + .box-shadow(0 1px 2px rgba(0,0,0,.075));
1.206 +}
1.207 +.list-group-item.active,
1.208 +.list-group-item.active:hover,
1.209 +.list-group-item.active:focus {
1.210 + text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%);
1.211 + #gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%));
1.212 + border-color: darken(@list-group-active-border, 7.5%);
1.213 +}
1.214 +
1.215 +
1.216 +
1.217 +//
1.218 +// Panels
1.219 +// --------------------------------------------------
1.220 +
1.221 +// Common styles
1.222 +.panel {
1.223 + .box-shadow(0 1px 2px rgba(0,0,0,.05));
1.224 +}
1.225 +
1.226 +// Mixin for generating new styles
1.227 +.panel-heading-styles(@color) {
1.228 + #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 5%));
1.229 +}
1.230 +
1.231 +// Apply the mixin to the panel headings only
1.232 +.panel-default > .panel-heading { .panel-heading-styles(@panel-default-heading-bg); }
1.233 +.panel-primary > .panel-heading { .panel-heading-styles(@panel-primary-heading-bg); }
1.234 +.panel-success > .panel-heading { .panel-heading-styles(@panel-success-heading-bg); }
1.235 +.panel-info > .panel-heading { .panel-heading-styles(@panel-info-heading-bg); }
1.236 +.panel-warning > .panel-heading { .panel-heading-styles(@panel-warning-heading-bg); }
1.237 +.panel-danger > .panel-heading { .panel-heading-styles(@panel-danger-heading-bg); }
1.238 +
1.239 +
1.240 +
1.241 +//
1.242 +// Wells
1.243 +// --------------------------------------------------
1.244 +
1.245 +.well {
1.246 + #gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg);
1.247 + border-color: darken(@well-bg, 10%);
1.248 + @shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
1.249 + .box-shadow(@shadow);
1.250 +}