pyc-website
main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
variables.less
(19762B)
1 //
2 // Variables
3 // --------------------------------------------------
4
5
6 // Global values
7 // --------------------------------------------------
8
9 // Grays
10 // -------------------------
11
12 @gray-darker: lighten(#000, 13.5%); // #222
13 @gray-dark: lighten(#000, 20%); // #333
14 @gray: lighten(#000, 33.5%); // #555
15 @gray-light: lighten(#000, 60%); // #999
16 @gray-lighter: lighten(#000, 93.5%); // #eee
17
18 // Brand colors
19 // -------------------------
20
21 @brand-primary: #428bca;
22 @brand-success: #5cb85c;
23 @brand-warning: #f0ad4e;
24 @brand-danger: #d9534f;
25 @brand-info: #5bc0de;
26
27 // Scaffolding
28 // -------------------------
29
30 @body-bg: #fff;
31 @text-color: @gray-dark;
32
33 // Links
34 // -------------------------
35
36 @link-color: @brand-primary;
37 @link-hover-color: darken(@link-color, 15%);
38
39 // Typography
40 // -------------------------
41
42 @font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
43 @font-family-serif: Georgia, "Times New Roman", Times, serif;
44 @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
45 @font-family-base: @font-family-sans-serif;
46
47 @font-size-base: 14px;
48 @font-size-large: ceil(@font-size-base * 1.25); // ~18px
49 @font-size-small: ceil(@font-size-base * 0.85); // ~12px
50
51 @font-size-h1: floor(@font-size-base * 2.6); // ~36px
52 @font-size-h2: floor(@font-size-base * 2.15); // ~30px
53 @font-size-h3: ceil(@font-size-base * 1.7); // ~24px
54 @font-size-h4: ceil(@font-size-base * 1.25); // ~18px
55 @font-size-h5: @font-size-base;
56 @font-size-h6: ceil(@font-size-base * 0.85); // ~12px
57
58 @line-height-base: 1.428571429; // 20/14
59 @line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
60
61 @headings-font-family: @font-family-base;
62 @headings-font-weight: 500;
63 @headings-line-height: 1.1;
64 @headings-color: inherit;
65
66
67 // Iconography
68 // -------------------------
69
70 @icon-font-path: "../fonts/";
71 @icon-font-name: "glyphicons-halflings-regular";
72
73
74 // Components
75 // -------------------------
76 // Based on 14px font-size and 1.428 line-height (~20px to start)
77
78 @padding-base-vertical: 6px;
79 @padding-base-horizontal: 12px;
80
81 @padding-large-vertical: 10px;
82 @padding-large-horizontal: 16px;
83
84 @padding-small-vertical: 5px;
85 @padding-small-horizontal: 10px;
86
87 @padding-xs-vertical: 1px;
88 @padding-xs-horizontal: 5px;
89
90 @line-height-large: 1.33;
91 @line-height-small: 1.5;
92
93 @border-radius-base: 4px;
94 @border-radius-large: 6px;
95 @border-radius-small: 3px;
96
97 @component-active-color: #fff;
98 @component-active-bg: @brand-primary;
99
100 @caret-width-base: 4px;
101 @caret-width-large: 5px;
102
103 // Tables
104 // -------------------------
105
106 @table-cell-padding: 8px;
107 @table-condensed-cell-padding: 5px;
108
109 @table-bg: transparent; // overall background-color
110 @table-bg-accent: #f9f9f9; // for striping
111 @table-bg-hover: #f5f5f5;
112 @table-bg-active: @table-bg-hover;
113
114 @table-border-color: #ddd; // table and cell border
115
116
117 // Buttons
118 // -------------------------
119
120 @btn-font-weight: normal;
121
122 @btn-default-color: #333;
123 @btn-default-bg: #fff;
124 @btn-default-border: #ccc;
125
126 @btn-primary-color: #fff;
127 @btn-primary-bg: @brand-primary;
128 @btn-primary-border: darken(@btn-primary-bg, 5%);
129
130 @btn-success-color: #fff;
131 @btn-success-bg: @brand-success;
132 @btn-success-border: darken(@btn-success-bg, 5%);
133
134 @btn-warning-color: #fff;
135 @btn-warning-bg: @brand-warning;
136 @btn-warning-border: darken(@btn-warning-bg, 5%);
137
138 @btn-danger-color: #fff;
139 @btn-danger-bg: @brand-danger;
140 @btn-danger-border: darken(@btn-danger-bg, 5%);
141
142 @btn-info-color: #fff;
143 @btn-info-bg: @brand-info;
144 @btn-info-border: darken(@btn-info-bg, 5%);
145
146 @btn-link-disabled-color: @gray-light;
147
148
149 // Forms
150 // -------------------------
151
152 @input-bg: #fff;
153 @input-bg-disabled: @gray-lighter;
154
155 @input-color: @gray;
156 @input-border: #ccc;
157 @input-border-radius: @border-radius-base;
158 @input-border-focus: #66afe9;
159
160 @input-color-placeholder: @gray-light;
161
162 @input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
163 @input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
164 @input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
165
166 @legend-color: @gray-dark;
167 @legend-border-color: #e5e5e5;
168
169 @input-group-addon-bg: @gray-lighter;
170 @input-group-addon-border-color: @input-border;
171
172
173 // Dropdowns
174 // -------------------------
175
176 @dropdown-bg: #fff;
177 @dropdown-border: rgba(0,0,0,.15);
178 @dropdown-fallback-border: #ccc;
179 @dropdown-divider-bg: #e5e5e5;
180
181 @dropdown-link-color: @gray-dark;
182 @dropdown-link-hover-color: darken(@gray-dark, 5%);
183 @dropdown-link-hover-bg: #f5f5f5;
184
185 @dropdown-link-active-color: @component-active-color;
186 @dropdown-link-active-bg: @component-active-bg;
187
188 @dropdown-link-disabled-color: @gray-light;
189
190 @dropdown-header-color: @gray-light;
191
192
193 // COMPONENT VARIABLES
194 // --------------------------------------------------
195
196
197 // Z-index master list
198 // -------------------------
199 // Used for a bird's eye view of components dependent on the z-axis
200 // Try to avoid customizing these :)
201
202 @zindex-navbar: 1000;
203 @zindex-dropdown: 1000;
204 @zindex-popover: 1010;
205 @zindex-tooltip: 1030;
206 @zindex-navbar-fixed: 1030;
207 @zindex-modal-background: 1040;
208 @zindex-modal: 1050;
209
210 // Media queries breakpoints
211 // --------------------------------------------------
212
213 // Extra small screen / phone
214 // Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
215 @screen-xs: 480px;
216 @screen-xs-min: @screen-xs;
217 @screen-phone: @screen-xs-min;
218
219 // Small screen / tablet
220 // Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
221 @screen-sm: 768px;
222 @screen-sm-min: @screen-sm;
223 @screen-tablet: @screen-sm-min;
224
225 // Medium screen / desktop
226 // Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
227 @screen-md: 992px;
228 @screen-md-min: @screen-md;
229 @screen-desktop: @screen-md-min;
230
231 // Large screen / wide desktop
232 // Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
233 @screen-lg: 1200px;
234 @screen-lg-min: @screen-lg;
235 @screen-lg-desktop: @screen-lg-min;
236
237 // So media queries don't overlap when required, provide a maximum
238 @screen-xs-max: (@screen-sm-min - 1);
239 @screen-sm-max: (@screen-md-min - 1);
240 @screen-md-max: (@screen-lg-min - 1);
241
242
243 // Grid system
244 // --------------------------------------------------
245
246 // Number of columns in the grid system
247 @grid-columns: 12;
248 // Padding, to be divided by two and applied to the left and right of all columns
249 @grid-gutter-width: 30px;
250
251 // Navbar collapse
252
253 // Point at which the navbar becomes uncollapsed
254 @grid-float-breakpoint: @screen-sm-min;
255 // Point at which the navbar begins collapsing
256 @grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
257
258
259 // Navbar
260 // -------------------------
261
262 // Basics of a navbar
263 @navbar-height: 50px;
264 @navbar-margin-bottom: @line-height-computed;
265 @navbar-border-radius: @border-radius-base;
266 @navbar-padding-horizontal: floor(@grid-gutter-width / 2);
267 @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
268
269 @navbar-default-color: #777;
270 @navbar-default-bg: #f8f8f8;
271 @navbar-default-border: darken(@navbar-default-bg, 6.5%);
272
273 // Navbar links
274 @navbar-default-link-color: #777;
275 @navbar-default-link-hover-color: #333;
276 @navbar-default-link-hover-bg: transparent;
277 @navbar-default-link-active-color: #555;
278 @navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
279 @navbar-default-link-disabled-color: #ccc;
280 @navbar-default-link-disabled-bg: transparent;
281
282 // Navbar brand label
283 @navbar-default-brand-color: @navbar-default-link-color;
284 @navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%);
285 @navbar-default-brand-hover-bg: transparent;
286
287 // Navbar toggle
288 @navbar-default-toggle-hover-bg: #ddd;
289 @navbar-default-toggle-icon-bar-bg: #ccc;
290 @navbar-default-toggle-border-color: #ddd;
291
292
293 // Inverted navbar
294 //
295 // Reset inverted navbar basics
296 @navbar-inverse-color: @gray-light;
297 @navbar-inverse-bg: #222;
298 @navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
299
300 // Inverted navbar links
301 @navbar-inverse-link-color: @gray-light;
302 @navbar-inverse-link-hover-color: #fff;
303 @navbar-inverse-link-hover-bg: transparent;
304 @navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
305 @navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
306 @navbar-inverse-link-disabled-color: #444;
307 @navbar-inverse-link-disabled-bg: transparent;
308
309 // Inverted navbar brand label
310 @navbar-inverse-brand-color: @navbar-inverse-link-color;
311 @navbar-inverse-brand-hover-color: #fff;
312 @navbar-inverse-brand-hover-bg: transparent;
313
314 // Inverted navbar toggle
315 @navbar-inverse-toggle-hover-bg: #333;
316 @navbar-inverse-toggle-icon-bar-bg: #fff;
317 @navbar-inverse-toggle-border-color: #333;
318
319
320 // Navs
321 // -------------------------
322
323 @nav-link-padding: 10px 15px;
324 @nav-link-hover-bg: @gray-lighter;
325
326 @nav-disabled-link-color: @gray-light;
327 @nav-disabled-link-hover-color: @gray-light;
328
329 @nav-open-link-hover-color: #fff;
330
331 // Tabs
332 @nav-tabs-border-color: #ddd;
333
334 @nav-tabs-link-hover-border-color: @gray-lighter;
335
336 @nav-tabs-active-link-hover-bg: @body-bg;
337 @nav-tabs-active-link-hover-color: @gray;
338 @nav-tabs-active-link-hover-border-color: #ddd;
339
340 @nav-tabs-justified-link-border-color: #ddd;
341 @nav-tabs-justified-active-link-border-color: @body-bg;
342
343 // Pills
344 @nav-pills-border-radius: @border-radius-base;
345 @nav-pills-active-link-hover-bg: @component-active-bg;
346 @nav-pills-active-link-hover-color: @component-active-color;
347
348
349 // Pagination
350 // -------------------------
351
352 @pagination-bg: #fff;
353 @pagination-border: #ddd;
354
355 @pagination-hover-bg: @gray-lighter;
356
357 @pagination-active-bg: @brand-primary;
358 @pagination-active-color: #fff;
359
360 @pagination-disabled-color: @gray-light;
361
362
363 // Pager
364 // -------------------------
365
366 @pager-border-radius: 15px;
367 @pager-disabled-color: @gray-light;
368
369
370 // Jumbotron
371 // -------------------------
372
373 @jumbotron-padding: 30px;
374 @jumbotron-color: inherit;
375 @jumbotron-bg: @gray-lighter;
376 @jumbotron-heading-color: inherit;
377 @jumbotron-font-size: ceil(@font-size-base * 1.5);
378
379
380 // Form states and alerts
381 // -------------------------
382
383 @state-success-text: #3c763d;
384 @state-success-bg: #dff0d8;
385 @state-success-border: darken(spin(@state-success-bg, -10), 5%);
386
387 @state-info-text: #31708f;
388 @state-info-bg: #d9edf7;
389 @state-info-border: darken(spin(@state-info-bg, -10), 7%);
390
391 @state-warning-text: #8a6d3b;
392 @state-warning-bg: #fcf8e3;
393 @state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
394
395 @state-danger-text: #a94442;
396 @state-danger-bg: #f2dede;
397 @state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
398
399
400 // Tooltips
401 // -------------------------
402 @tooltip-max-width: 200px;
403 @tooltip-color: #fff;
404 @tooltip-bg: #000;
405
406 @tooltip-arrow-width: 5px;
407 @tooltip-arrow-color: @tooltip-bg;
408
409
410 // Popovers
411 // -------------------------
412 @popover-bg: #fff;
413 @popover-max-width: 276px;
414 @popover-border-color: rgba(0,0,0,.2);
415 @popover-fallback-border-color: #ccc;
416
417 @popover-title-bg: darken(@popover-bg, 3%);
418
419 @popover-arrow-width: 10px;
420 @popover-arrow-color: #fff;
421
422 @popover-arrow-outer-width: (@popover-arrow-width + 1);
423 @popover-arrow-outer-color: rgba(0,0,0,.25);
424 @popover-arrow-outer-fallback-color: #999;
425
426
427 // Labels
428 // -------------------------
429
430 @label-default-bg: @gray-light;
431 @label-primary-bg: @brand-primary;
432 @label-success-bg: @brand-success;
433 @label-info-bg: @brand-info;
434 @label-warning-bg: @brand-warning;
435 @label-danger-bg: @brand-danger;
436
437 @label-color: #fff;
438 @label-link-hover-color: #fff;
439
440
441 // Modals
442 // -------------------------
443 @modal-inner-padding: 20px;
444
445 @modal-title-padding: 15px;
446 @modal-title-line-height: @line-height-base;
447
448 @modal-content-bg: #fff;
449 @modal-content-border-color: rgba(0,0,0,.2);
450 @modal-content-fallback-border-color: #999;
451
452 @modal-backdrop-bg: #000;
453 @modal-header-border-color: #e5e5e5;
454 @modal-footer-border-color: @modal-header-border-color;
455
456
457 // Alerts
458 // -------------------------
459 @alert-padding: 15px;
460 @alert-border-radius: @border-radius-base;
461 @alert-link-font-weight: bold;
462
463 @alert-success-bg: @state-success-bg;
464 @alert-success-text: @state-success-text;
465 @alert-success-border: @state-success-border;
466
467 @alert-info-bg: @state-info-bg;
468 @alert-info-text: @state-info-text;
469 @alert-info-border: @state-info-border;
470
471 @alert-warning-bg: @state-warning-bg;
472 @alert-warning-text: @state-warning-text;
473 @alert-warning-border: @state-warning-border;
474
475 @alert-danger-bg: @state-danger-bg;
476 @alert-danger-text: @state-danger-text;
477 @alert-danger-border: @state-danger-border;
478
479
480 // Progress bars
481 // -------------------------
482 @progress-bg: #f5f5f5;
483 @progress-bar-color: #fff;
484
485 @progress-bar-bg: @brand-primary;
486 @progress-bar-success-bg: @brand-success;
487 @progress-bar-warning-bg: @brand-warning;
488 @progress-bar-danger-bg: @brand-danger;
489 @progress-bar-info-bg: @brand-info;
490
491
492 // List group
493 // -------------------------
494 @list-group-bg: #fff;
495 @list-group-border: #ddd;
496 @list-group-border-radius: @border-radius-base;
497
498 @list-group-hover-bg: #f5f5f5;
499 @list-group-active-color: @component-active-color;
500 @list-group-active-bg: @component-active-bg;
501 @list-group-active-border: @list-group-active-bg;
502
503 @list-group-link-color: #555;
504 @list-group-link-heading-color: #333;
505
506
507 // Panels
508 // -------------------------
509 @panel-bg: #fff;
510 @panel-inner-border: #ddd;
511 @panel-border-radius: @border-radius-base;
512 @panel-footer-bg: #f5f5f5;
513
514 @panel-default-text: @gray-dark;
515 @panel-default-border: #ddd;
516 @panel-default-heading-bg: #f5f5f5;
517
518 @panel-primary-text: #fff;
519 @panel-primary-border: @brand-primary;
520 @panel-primary-heading-bg: @brand-primary;
521
522 @panel-success-text: @state-success-text;
523 @panel-success-border: @state-success-border;
524 @panel-success-heading-bg: @state-success-bg;
525
526 @panel-warning-text: @state-warning-text;
527 @panel-warning-border: @state-warning-border;
528 @panel-warning-heading-bg: @state-warning-bg;
529
530 @panel-danger-text: @state-danger-text;
531 @panel-danger-border: @state-danger-border;
532 @panel-danger-heading-bg: @state-danger-bg;
533
534 @panel-info-text: @state-info-text;
535 @panel-info-border: @state-info-border;
536 @panel-info-heading-bg: @state-info-bg;
537
538
539 // Thumbnails
540 // -------------------------
541 @thumbnail-padding: 4px;
542 @thumbnail-bg: @body-bg;
543 @thumbnail-border: #ddd;
544 @thumbnail-border-radius: @border-radius-base;
545
546 @thumbnail-caption-color: @text-color;
547 @thumbnail-caption-padding: 9px;
548
549
550 // Wells
551 // -------------------------
552 @well-bg: #f5f5f5;
553
554
555 // Badges
556 // -------------------------
557 @badge-color: #fff;
558 @badge-link-hover-color: #fff;
559 @badge-bg: @gray-light;
560
561 @badge-active-color: @link-color;
562 @badge-active-bg: #fff;
563
564 @badge-font-weight: bold;
565 @badge-line-height: 1;
566 @badge-border-radius: 10px;
567
568
569 // Breadcrumbs
570 // -------------------------
571 @breadcrumb-bg: #f5f5f5;
572 @breadcrumb-color: #ccc;
573 @breadcrumb-active-color: @gray-light;
574 @breadcrumb-separator: "/";
575
576
577 // Carousel
578 // ------------------------
579
580 @carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
581
582 @carousel-control-color: #fff;
583 @carousel-control-width: 15%;
584 @carousel-control-opacity: .5;
585 @carousel-control-font-size: 20px;
586
587 @carousel-indicator-active-bg: #fff;
588 @carousel-indicator-border-color: #fff;
589
590 @carousel-caption-color: #fff;
591
592
593 // Close
594 // ------------------------
595 @close-font-weight: bold;
596 @close-color: #000;
597 @close-text-shadow: 0 1px 0 #fff;
598
599
600 // Code
601 // ------------------------
602 @code-color: #c7254e;
603 @code-bg: #f9f2f4;
604
605 @pre-bg: #f5f5f5;
606 @pre-color: @gray-dark;
607 @pre-border-color: #ccc;
608 @pre-scrollable-max-height: 340px;
609
610 // Type
611 // ------------------------
612 @text-muted: @gray-light;
613 @abbr-border-color: @gray-light;
614 @headings-small-color: @gray-light;
615 @blockquote-small-color: @gray-light;
616 @blockquote-border-color: @gray-lighter;
617 @page-header-border-color: @gray-lighter;
618
619 // Miscellaneous
620 // -------------------------
621
622 // Hr border color
623 @hr-border: @gray-lighter;
624
625 // Horizontal forms & lists
626 @component-offset-horizontal: 180px;
627
628
629 // Container sizes
630 // --------------------------------------------------
631
632 // Small screen / tablet
633 @container-tablet: ((720px + @grid-gutter-width));
634 @container-sm: @container-tablet;
635
636 // Medium screen / desktop
637 @container-desktop: ((940px + @grid-gutter-width));
638 @container-md: @container-desktop;
639
640 // Large screen / wide desktop
641 @container-large-desktop: ((1140px + @grid-gutter-width));
642 @container-lg: @container-large-desktop;