| 1 | /** dashboard info and stats mini boxes **/ |
|---|
| 2 | .infobox-container { |
|---|
| 3 | text-align:center; |
|---|
| 4 | font-size:0; |
|---|
| 5 | } |
|---|
| 6 | .infobox { |
|---|
| 7 | |
|---|
| 8 | |
|---|
| 9 | display:inline-block; |
|---|
| 10 | width:210px; height:66px; |
|---|
| 11 | |
|---|
| 12 | color:#555; |
|---|
| 13 | background-color:#FFF; |
|---|
| 14 | box-shadow:none; |
|---|
| 15 | border-radius:0; |
|---|
| 16 | |
|---|
| 17 | |
|---|
| 18 | margin:-1px 0 0 -1px; |
|---|
| 19 | |
|---|
| 20 | padding:8px 3px 6px 9px; |
|---|
| 21 | border:1px dotted; |
|---|
| 22 | border-color:#D8D8D8 !important; |
|---|
| 23 | |
|---|
| 24 | vertical-align:middle; |
|---|
| 25 | text-align:left; |
|---|
| 26 | |
|---|
| 27 | position:relative; |
|---|
| 28 | |
|---|
| 29 | |
|---|
| 30 | > .infobox-icon { |
|---|
| 31 | display:inline-block; |
|---|
| 32 | vertical-align:top; |
|---|
| 33 | |
|---|
| 34 | width:44px; |
|---|
| 35 | |
|---|
| 36 | > [class*="icon-"] { |
|---|
| 37 | display:inline-block; |
|---|
| 38 | height:42px; |
|---|
| 39 | margin:0; |
|---|
| 40 | padding:1px 1px 0 2px; |
|---|
| 41 | |
|---|
| 42 | background-color:transparent; |
|---|
| 43 | border:none; |
|---|
| 44 | |
|---|
| 45 | text-align:center; |
|---|
| 46 | |
|---|
| 47 | position:relative; |
|---|
| 48 | |
|---|
| 49 | .border-radius(100%); |
|---|
| 50 | .box-shadow(~"1px 1px 0 rgba(0,0,0,0.2)"); |
|---|
| 51 | |
|---|
| 52 | &:before { |
|---|
| 53 | font-size:24px; |
|---|
| 54 | display:block; |
|---|
| 55 | padding:6px 0 7px; width:40px; text-align:center; |
|---|
| 56 | .border-radius(100%); |
|---|
| 57 | |
|---|
| 58 | color: rgba(255, 255, 255, 0.9); |
|---|
| 59 | background-color: rgba(255, 255, 255, 0.2); |
|---|
| 60 | text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.14); |
|---|
| 61 | } |
|---|
| 62 | } |
|---|
| 63 | } |
|---|
| 64 | |
|---|
| 65 | |
|---|
| 66 | .infobox-content { |
|---|
| 67 | color:#555; |
|---|
| 68 | &:first-child {/* like in small infoboxes that have no number data etc */ |
|---|
| 69 | font-weight:bold; |
|---|
| 70 | } |
|---|
| 71 | } |
|---|
| 72 | |
|---|
| 73 | |
|---|
| 74 | > .infobox-data { |
|---|
| 75 | display:inline-block; |
|---|
| 76 | |
|---|
| 77 | border:none; |
|---|
| 78 | border-top-width:0; |
|---|
| 79 | |
|---|
| 80 | font-size:13px; |
|---|
| 81 | |
|---|
| 82 | text-align:left; |
|---|
| 83 | |
|---|
| 84 | line-height:21px; |
|---|
| 85 | min-width:130px; |
|---|
| 86 | |
|---|
| 87 | padding-left:8px; |
|---|
| 88 | |
|---|
| 89 | position:relative; |
|---|
| 90 | top:0; |
|---|
| 91 | |
|---|
| 92 | > .infobox-data-number { |
|---|
| 93 | display:block; |
|---|
| 94 | font-size:22px; |
|---|
| 95 | margin:2px 0 4px; |
|---|
| 96 | |
|---|
| 97 | position:relative; |
|---|
| 98 | text-shadow:1px 1px 0 rgba(0, 0, 0, 0.15); |
|---|
| 99 | } |
|---|
| 100 | |
|---|
| 101 | > .infobox-text { |
|---|
| 102 | display:block; |
|---|
| 103 | font-size:16px; |
|---|
| 104 | margin:2px 0 4px; |
|---|
| 105 | |
|---|
| 106 | position:relative; |
|---|
| 107 | text-shadow:none; |
|---|
| 108 | } |
|---|
| 109 | } |
|---|
| 110 | |
|---|
| 111 | |
|---|
| 112 | &.no-border { |
|---|
| 113 | border:none !important; |
|---|
| 114 | } |
|---|
| 115 | } |
|---|
| 116 | |
|---|
| 117 | |
|---|
| 118 | @media only screen and (max-width: 460px) {//@screen-topbar-down |
|---|
| 119 | .infobox { |
|---|
| 120 | min-width:95%; |
|---|
| 121 | margin-top:2px; |
|---|
| 122 | margin-bottom:2px; |
|---|
| 123 | } |
|---|
| 124 | } |
|---|
| 125 | |
|---|
| 126 | |
|---|
| 127 | |
|---|
| 128 | |
|---|
| 129 | //infobox color |
|---|
| 130 | .infobox-color(@color) { |
|---|
| 131 | @infobox-class:~`"infobox-@{color}"`; |
|---|
| 132 | @infobox-bg:~`"infobox-@{color}"`; |
|---|
| 133 | @infobox-cl:@@infobox-bg; |
|---|
| 134 | |
|---|
| 135 | .@{infobox-class} { |
|---|
| 136 | color:@infobox-cl; |
|---|
| 137 | border-color:@infobox-cl; |
|---|
| 138 | > .infobox-icon > [class*="icon-"] { |
|---|
| 139 | background-color:@infobox-cl; |
|---|
| 140 | } |
|---|
| 141 | |
|---|
| 142 | &.infobox-dark { |
|---|
| 143 | background-color:@infobox-cl; |
|---|
| 144 | border-color:@infobox-cl; |
|---|
| 145 | } |
|---|
| 146 | } |
|---|
| 147 | } |
|---|
| 148 | .infobox-color(~"purple"); |
|---|
| 149 | .infobox-color(~"purple2"); |
|---|
| 150 | .infobox-color(~"pink"); |
|---|
| 151 | .infobox-color(~"blue"); |
|---|
| 152 | .infobox-color(~"blue2"); |
|---|
| 153 | .infobox-color(~"blue3"); |
|---|
| 154 | .infobox-color(~"red"); |
|---|
| 155 | .infobox-color(~"brown"); |
|---|
| 156 | .infobox-color(~"wood"); |
|---|
| 157 | .infobox-color(~"light-brown"); |
|---|
| 158 | .infobox-color(~"orange"); |
|---|
| 159 | .infobox-color(~"orange2"); |
|---|
| 160 | .infobox-color(~"green"); |
|---|
| 161 | .infobox-color(~"green2"); |
|---|
| 162 | .infobox-color(~"grey"); |
|---|
| 163 | .infobox-color(~"black"); |
|---|
| 164 | |
|---|
| 165 | |
|---|
| 166 | |
|---|
| 167 | |
|---|
| 168 | |
|---|
| 169 | |
|---|
| 170 | .infobox-dark { |
|---|
| 171 | margin:1px 1px 0 0; |
|---|
| 172 | border-color:transparent !important; |
|---|
| 173 | border:none; |
|---|
| 174 | |
|---|
| 175 | color:#FFF; |
|---|
| 176 | padding:4px; |
|---|
| 177 | > .infobox-icon > [class*="icon-"] { |
|---|
| 178 | & , &:before { |
|---|
| 179 | background-color:transparent; |
|---|
| 180 | box-shadow:none; text-shadow:none; |
|---|
| 181 | border-radius:0; |
|---|
| 182 | font-size:30px; |
|---|
| 183 | } |
|---|
| 184 | &:before { |
|---|
| 185 | .opacity(1); |
|---|
| 186 | } |
|---|
| 187 | } |
|---|
| 188 | |
|---|
| 189 | .infobox-content { |
|---|
| 190 | color:#FFF; |
|---|
| 191 | } |
|---|
| 192 | |
|---|
| 193 | } |
|---|
| 194 | |
|---|
| 195 | |
|---|
| 196 | |
|---|
| 197 | |
|---|
| 198 | |
|---|
| 199 | |
|---|
| 200 | .infobox { |
|---|
| 201 | > .infobox-progress { |
|---|
| 202 | padding-top:0; |
|---|
| 203 | display:inline-block; |
|---|
| 204 | vertical-align:top; |
|---|
| 205 | |
|---|
| 206 | width:44px; |
|---|
| 207 | } |
|---|
| 208 | |
|---|
| 209 | > .infobox-chart { |
|---|
| 210 | padding-top:0; |
|---|
| 211 | display:inline-block; |
|---|
| 212 | vertical-align:text-bottom; |
|---|
| 213 | width:44px; |
|---|
| 214 | text-align:center; |
|---|
| 215 | |
|---|
| 216 | > .sparkline { |
|---|
| 217 | font-size:24px; |
|---|
| 218 | } |
|---|
| 219 | canvas { |
|---|
| 220 | vertical-align:middle !important; |
|---|
| 221 | } |
|---|
| 222 | } |
|---|
| 223 | |
|---|
| 224 | |
|---|
| 225 | /* stat trend indicators and badges */ |
|---|
| 226 | > .stat { |
|---|
| 227 | display:inline-block; |
|---|
| 228 | position:absolute; right:20px; top:11px; |
|---|
| 229 | |
|---|
| 230 | text-shadow:none; |
|---|
| 231 | color:#ABBAC3; |
|---|
| 232 | |
|---|
| 233 | font-size:13px; font-weight:bold; |
|---|
| 234 | |
|---|
| 235 | padding-right:18px; padding-top:3px; |
|---|
| 236 | |
|---|
| 237 | &:before { |
|---|
| 238 | display:inline-block; |
|---|
| 239 | content:""; |
|---|
| 240 | |
|---|
| 241 | width:8px; height:11px; |
|---|
| 242 | background-color:#ABBAC3; |
|---|
| 243 | |
|---|
| 244 | position:absolute; right:4px; top:7px; |
|---|
| 245 | } |
|---|
| 246 | &:after { |
|---|
| 247 | display:inline-block; |
|---|
| 248 | content:""; |
|---|
| 249 | |
|---|
| 250 | position:absolute; right:1px; top:-8px; |
|---|
| 251 | |
|---|
| 252 | border:12px solid transparent; |
|---|
| 253 | border-width:8px 7px; |
|---|
| 254 | border-bottom-color:#ABBAC3; |
|---|
| 255 | } |
|---|
| 256 | |
|---|
| 257 | &.stat-success {/*pointing up*/ |
|---|
| 258 | color:#77C646; |
|---|
| 259 | &:before { |
|---|
| 260 | background-color:#77C646; |
|---|
| 261 | } |
|---|
| 262 | &:after { |
|---|
| 263 | border-bottom-color:#77C646; |
|---|
| 264 | } |
|---|
| 265 | } |
|---|
| 266 | |
|---|
| 267 | &.stat-important {/*pointing down*/ |
|---|
| 268 | color:#E4564F; |
|---|
| 269 | &:before { |
|---|
| 270 | background-color:#E4564F; |
|---|
| 271 | top:3px; |
|---|
| 272 | } |
|---|
| 273 | &:after { |
|---|
| 274 | border-top-color:#E4564F; |
|---|
| 275 | border-bottom-color:transparent; |
|---|
| 276 | bottom:-6px; top:auto; |
|---|
| 277 | } |
|---|
| 278 | } |
|---|
| 279 | } |
|---|
| 280 | &.infobox-dark > .stat { |
|---|
| 281 | color:#FFF; |
|---|
| 282 | &:before { |
|---|
| 283 | background-color:#E1E5E8; |
|---|
| 284 | } |
|---|
| 285 | &:after { |
|---|
| 286 | border-bottom-color:#E1E5E8; |
|---|
| 287 | } |
|---|
| 288 | |
|---|
| 289 | &.stat-success { |
|---|
| 290 | color:#FFF; |
|---|
| 291 | &:before { |
|---|
| 292 | background-color:#D0E29E; |
|---|
| 293 | } |
|---|
| 294 | &:after { |
|---|
| 295 | border-bottom-color:#D0E29E; |
|---|
| 296 | } |
|---|
| 297 | } |
|---|
| 298 | &.stat-important { |
|---|
| 299 | color:#FFF; |
|---|
| 300 | &:before { |
|---|
| 301 | background-color:#FF8482; |
|---|
| 302 | top:3px; |
|---|
| 303 | } |
|---|
| 304 | &:after { |
|---|
| 305 | border-top-color:#FF8482; |
|---|
| 306 | border-bottom-color:transparent; |
|---|
| 307 | bottom:-6px; top:auto; |
|---|
| 308 | } |
|---|
| 309 | } |
|---|
| 310 | } |
|---|
| 311 | |
|---|
| 312 | |
|---|
| 313 | > .badge { |
|---|
| 314 | position:absolute; right:20px; top:11px; |
|---|
| 315 | border-radius:0; |
|---|
| 316 | |
|---|
| 317 | text-shadow:none; |
|---|
| 318 | color:#FFF; |
|---|
| 319 | |
|---|
| 320 | font-size:11px; font-weight:bold; |
|---|
| 321 | line-height:15px; height:16px; |
|---|
| 322 | |
|---|
| 323 | padding:0 1px; |
|---|
| 324 | } |
|---|
| 325 | &.infobox-dark > .badge { |
|---|
| 326 | color:#FFF; |
|---|
| 327 | background-color:rgba(255,255,255,0.2) !important; |
|---|
| 328 | border:1px solid #F1F1F1; |
|---|
| 329 | |
|---|
| 330 | top:2px; right:2px; |
|---|
| 331 | |
|---|
| 332 | &.badge-success > [class*="icon-"]{ |
|---|
| 333 | color:#C6E9A1; |
|---|
| 334 | } |
|---|
| 335 | &.badge-important > [class*="icon-"]{ |
|---|
| 336 | color:#ECB792; |
|---|
| 337 | } |
|---|
| 338 | &.badge-warning > [class*="icon-"]{ |
|---|
| 339 | color:#ECB792; |
|---|
| 340 | } |
|---|
| 341 | } |
|---|
| 342 | |
|---|
| 343 | |
|---|
| 344 | } |
|---|
| 345 | |
|---|
| 346 | |
|---|
| 347 | |
|---|
| 348 | |
|---|
| 349 | .infobox-small { |
|---|
| 350 | width:135px; |
|---|
| 351 | height:52px; |
|---|
| 352 | text-align:left; |
|---|
| 353 | |
|---|
| 354 | padding-bottom:5px; |
|---|
| 355 | |
|---|
| 356 | > .infobox-icon , > .infobox-chart , > .infobox-progress { |
|---|
| 357 | display:inline-block; |
|---|
| 358 | width:40px; |
|---|
| 359 | max-width:40px; |
|---|
| 360 | height:42px; |
|---|
| 361 | line-height:38px; |
|---|
| 362 | |
|---|
| 363 | vertical-align:middle; |
|---|
| 364 | } |
|---|
| 365 | |
|---|
| 366 | > .infobox-data { |
|---|
| 367 | display:inline-block; |
|---|
| 368 | text-align:left; |
|---|
| 369 | |
|---|
| 370 | vertical-align:middle; |
|---|
| 371 | max-width:72px; min-width:0; |
|---|
| 372 | } |
|---|
| 373 | > .infobox-chart > .sparkline { |
|---|
| 374 | font-size:14px; |
|---|
| 375 | margin-left:2px; |
|---|
| 376 | } |
|---|
| 377 | } |
|---|
| 378 | |
|---|
| 379 | |
|---|
| 380 | |
|---|
| 381 | |
|---|
| 382 | |
|---|
| 383 | |
|---|
| 384 | .percentage { |
|---|
| 385 | font-size:14px; |
|---|
| 386 | font-weight:bold; |
|---|
| 387 | display:inline-block; |
|---|
| 388 | vertical-align:top; |
|---|
| 389 | |
|---|
| 390 | .infobox-small & { |
|---|
| 391 | font-size:13px; font-weight:normal; |
|---|
| 392 | margin-top:2px; margin-left:2px; |
|---|
| 393 | } |
|---|
| 394 | } |
|---|
| 395 | |
|---|
| 396 | |
|---|
| 397 | |
|---|
![(please configure the [header_logo] section in trac.ini)](/space/chrome/site/your_project_logo.png){kind=logo}
