pyc-website

main website for pyc inc.

git clone https://9o.is/git/pyc-website.git

variables.less

(24905B)


      1 ///
      2 // Variables
      3 // --------------------------------------------------
      4 
      5 
      6 // Global values
      7 // --------------------------------------------------
      8 
      9 
     10 // Brand colors
     11 // -------------------------
     12 
     13 // Grays
     14 // -------------------------
     15 @black:                  #000;
     16 @gray-darkest:           lighten(@black, 5.5%);  // #111'ish?
     17 @gray-darker:            lighten(@black, 13.5%); // #222
     18 @gray-dark:              lighten(@black, 20%);   // #333
     19 @gray:                   lighten(@black, 33.5%); // #555
     20 @gray-light:             lighten(@black, 60%);   // #999
     21 @gray-mid-light:         lighten(@black, 75%);   // #CCC'ish?
     22 @gray-lighter:           lighten(@black, 93.5%); // #eee
     23 @gray-lightest:          lighten(@black, 95.5%); // #fafafa'ish?
     24 
     25 // COLOR PALLET
     26 // --------------------------------------------------
     27 
     28 @blueStandard:					#3276B1;
     29 @blueSky:						#0091D9;
     30 @blue: 							#57889C;
     31 @blueLight: 					#92A2A8;
     32 @blueDark: 						#4c4f53;
     33 @green: 						#356e35;
     34 @greenLight: 					#71843f;
     35 @greenDark: 					#496949;
     36 @greenBright:					#40AC2B;
     37 @red: 							#a90329;
     38 @yellow: 						#A4781B;
     39 @orange: 						#F79220; //#f7921d; //#C79121;
     40 @orangeDark: 					#A57225;
     41 @pink: 							#ac5287; 
     42 @pinkDark: 						#a8829f;
     43 @purple: 						#6E587A;
     44 @darken: 						#404040;
     45 @lighten: 						#d5e7ec;
     46 @white: 						#ffffff;
     47 @greyDark: 						#525252;
     48 @magenta: 						#6e3671; 
     49 @teal: 							#568a89;
     50 @redLight: 						#a65858;
     51 @redBright:						#ed1c24;
     52 @tealLight:						#0AA66E;
     53 
     54 //@brand-primary:         #3276B1;
     55 //@brand-primary:         #446E9B;
     56 @brand-primary:			#3E648D;
     57 @brand-primary-light:	lighten(@brand-primary, 55%); // #EDF2F7;
     58 @brand-secondary: 		@orange;
     59 @brand-tertiary:		#95A9C1;
     60 @brand-success:         #739E73;
     61 @brand-warning:         @redBright;
     62 @brand-danger:          @red;
     63 @brand-info:            @blue;
     64 @bitcoin-color:			@orange;
     65 
     66 // Scaffolding
     67 // -------------------------
     68 
     69 @body-bg:               @white;
     70 @text-color:            @gray-dark;
     71 
     72 // Links
     73 // -------------------------
     74 
     75 @link-color:            @brand-primary;
     76 @link-hover-color:      darken(@link-color, 15%);
     77 
     78 // Typography
     79 // -------------------------
     80 
     81 @font-family-sans-serif:  "Open Sans", Helvetica, Arial, Sans-Serif;
     82 @font-family-serif:       "Optima", Georgia, "Times New Roman", Times, serif;
     83 @font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
     84 @font-family-base:        @font-family-sans-serif;
     85 
     86 @font-size-base:          14px;
     87 @font-size-large:         ceil(@font-size-base * 1.24); // ~16px
     88 @font-size-small:         ceil(@font-size-base * 0.85); // ~11px
     89 
     90 @font-size-h1:            floor(@font-size-base * 1.85);// ~24px
     91 @font-size-h2:            floor(@font-size-base * 1.7);// ~22px
     92 @font-size-h3:            ceil(@font-size-base * 1.385); // ~18px
     93 @font-size-h4:            ceil(@font-size-base * 1.32); // ~17px
     94 @font-size-h5:            ceil(@font-size-base * 1.24);	// ~16px
     95 @font-size-h6:            ceil(@font-size-base * 1.08); // ~14px
     96 
     97 @line-height-base:        1.428571429; // 20/14
     98 @line-height-computed:    floor(@font-size-base * @line-height-base); // ~20px
     99 
    100 @headings-font-family:    @font-family-base;
    101 @headings-font-weight:    300;
    102 @headings-line-height:    1.1;
    103 @headings-color:          inherit;
    104 
    105 // Iconography
    106 // -------------------------
    107 
    108 @icon-font-path:          "../fonts";
    109 
    110 
    111 // Components
    112 // -------------------------
    113 // Based on 13px font-size and 1.428 line-height (~20px to start)
    114 
    115 @padding-base-vertical:          6px;
    116 @padding-base-horizontal:        12px;
    117 
    118 @padding-large-vertical:         10px;
    119 @padding-large-horizontal:       16px;
    120 
    121 @padding-small-vertical:         5px;
    122 @padding-small-horizontal:       10px;
    123 
    124 @padding-xs-vertical:            1px;
    125 @padding-xs-horizontal:          5px;
    126 
    127 @line-height-large:              1.33;
    128 @line-height-small:              1.5;
    129 
    130 @border-radius-base:             2px;
    131 @border-radius-large:            3px;
    132 @border-radius-small:            2px;
    133 
    134 @component-active-color:         #fff;
    135 @component-active-bg:            @brand-primary;
    136 
    137 @caret-width-base:               4px;
    138 @caret-width-large:              5px;
    139 
    140 // Tables
    141 // -------------------------
    142 
    143 @table-cell-padding:                 8px;
    144 @table-condensed-cell-padding:       5px;
    145 
    146 @table-bg:                           transparent; // overall background-color
    147 @table-bg-accent:                    #f9f9f9; // for striping
    148 @table-bg-hover:                     #ecf3f8;
    149 @table-bg-active:                    @table-bg-hover;
    150 
    151 @table-border-color:                 #ddd; // table and cell border
    152 
    153 
    154 // Buttons
    155 // -------------------------
    156 
    157 @btn-font-weight:                normal;
    158 
    159 @btn-default-color:              #333;
    160 @btn-default-bg:                 #fff;
    161 @btn-default-border:             #ccc;
    162 
    163 @btn-primary-color:              #fff;
    164 @btn-primary-bg:                 @brand-primary;
    165 @btn-primary-border:             darken(@btn-primary-bg, 5%);
    166 
    167 @btn-success-color:              #fff;
    168 @btn-success-bg:                 @brand-success;
    169 @btn-success-border:             darken(@btn-success-bg, 5%);
    170 
    171 @btn-warning-color:              #fff;
    172 @btn-warning-bg:                 @brand-warning;
    173 @btn-warning-border:             darken(@btn-warning-bg, 5%);
    174 
    175 @btn-danger-color:               #fff;
    176 @btn-danger-bg:                  @brand-danger;
    177 @btn-danger-border:              darken(@btn-danger-bg, 5%);
    178 
    179 @btn-info-color:                 #fff;
    180 @btn-info-bg:                    @brand-info;
    181 @btn-info-border:                darken(@btn-info-bg, 5%);
    182 
    183 @btn-link-disabled-color:        @gray-light;
    184 
    185 
    186 // Forms
    187 // -------------------------
    188 
    189 @input-bg:                       #fff;
    190 @input-bg-disabled:              @gray-lighter;
    191 
    192 @input-color:                    @gray;
    193 @input-border:                   #ccc;
    194 @input-border-radius:            0px;
    195 @input-border-focus:             @brand-primary;
    196 
    197 @input-color-placeholder:        @gray-light;
    198 
    199 @input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
    200 @input-height-large:             (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
    201 @input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
    202 
    203 @legend-color:                   @gray-dark;
    204 @legend-border-color:            #e5e5e5;
    205 
    206 @input-group-addon-bg:           @gray-lighter;
    207 @input-group-addon-border-color: @input-border;
    208 
    209 
    210 // Dropdowns
    211 // -------------------------
    212 
    213 @dropdown-bg:                    #fff;
    214 @dropdown-border:                rgba(0,0,0,.15);
    215 @dropdown-fallback-border:       #ccc;
    216 @dropdown-divider-bg:            #e5e5e5;
    217 
    218 @dropdown-link-active-color:     #fff;
    219 @dropdown-link-active-bg:        @component-active-bg;
    220 
    221 @dropdown-link-color:            @gray-dark;
    222 @dropdown-link-hover-color:      #fff;
    223 @dropdown-link-hover-bg:         @dropdown-link-active-bg;
    224 
    225 @dropdown-link-disabled-color:   @gray-light;
    226 
    227 @dropdown-header-color:          @gray-light;
    228 
    229 @dropdown-caret-color:           #000;
    230 
    231 
    232 // COMPONENT VARIABLES
    233 // --------------------------------------------------
    234 
    235 
    236 // Z-index master list
    237 // -------------------------
    238 // Used for a bird's eye view of components dependent on the z-axis
    239 // Try to avoid customizing these :)
    240 
    241 @zindex-navbar:            1000;
    242 @zindex-dropdown:          1000;
    243 @zindex-popover:           1010;
    244 @zindex-tooltip:           1030;
    245 @zindex-navbar-fixed:      1030;
    246 @zindex-modal-background:  1040;
    247 @zindex-modal:             1050;
    248 
    249 // Media queries breakpoints
    250 // --------------------------------------------------
    251 
    252 // Extra small screen / phone
    253 // Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
    254 @screen-xs:                  480px;
    255 @screen-xs-min:              @screen-xs;
    256 @screen-phone:               @screen-xs-min;
    257 
    258 // Small screen / tablet
    259 // Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
    260 @screen-sm:                  768px;
    261 @screen-sm-min:              @screen-sm;
    262 @screen-tablet:              @screen-sm-min;
    263 
    264 // Medium screen / desktop
    265 // Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
    266 @screen-md:                  992px;
    267 @screen-md-min:              @screen-md;
    268 @screen-desktop:             @screen-md-min;
    269 
    270 // Large screen / wide desktop
    271 // Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
    272 @screen-lg:                  1200px;
    273 @screen-lg-min:              @screen-lg;
    274 @screen-lg-desktop:          @screen-lg-min;
    275 
    276 // So media queries don't overlap when required, provide a maximum
    277 @screen-xxs-max:			 (@screen-xs-min - 1);
    278 @screen-xs-max:              (@screen-sm-min - 1);
    279 @screen-sm-max:              (@screen-md-min - 1);
    280 @screen-md-max:              (@screen-lg-min - 1);
    281 
    282 
    283 // Grid system
    284 // --------------------------------------------------
    285 
    286 // Number of columns in the grid system
    287 @grid-columns:              12;
    288 // Padding, to be divided by two and applied to the left and right of all columns
    289 @grid-gutter-width:         26px;
    290 
    291 // Navbar collapse
    292 
    293 // Point at which the navbar becomes uncollapsed
    294 @grid-float-breakpoint:     @screen-sm-min;
    295 // Point at which the navbar begins collapsing
    296 @grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
    297 
    298 
    299 // Navbar
    300 // -------------------------
    301 
    302 // Basics of a navbar 
    303 @navbar-height:                    80px;
    304 @navbar-margin-bottom:             @line-height-computed /2;
    305 @navbar-default-color:             #777;
    306 @navbar-default-bg:                #f8f8f8;
    307 @navbar-default-border:            darken(@navbar-default-bg, 6.5%);
    308 @navbar-border-radius:             @border-radius-base;
    309 @navbar-padding-horizontal:        floor(@grid-gutter-width / 2);
    310 @navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
    311 
    312 // Navbar links
    313 @navbar-default-link-color:                #777;
    314 @navbar-default-link-hover-color:          #333;
    315 @navbar-default-link-hover-bg:             transparent;
    316 @navbar-default-link-active-color:         #555;
    317 @navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
    318 @navbar-default-link-disabled-color:       #ccc;
    319 @navbar-default-link-disabled-bg:          transparent;
    320 
    321 // Navbar brand label
    322 @navbar-default-brand-color:               @navbar-default-link-color;
    323 @navbar-default-brand-hover-color:         darken(@navbar-default-link-color, 10%);
    324 @navbar-default-brand-hover-bg:            transparent;
    325 
    326 // Navbar toggle
    327 @navbar-default-toggle-hover-bg:           #ddd;
    328 @navbar-default-toggle-icon-bar-bg:        #ccc;
    329 @navbar-default-toggle-border-color:       #ddd;
    330 
    331 
    332 // Inverted navbar
    333 //
    334 // Reset inverted navbar basics
    335 @navbar-inverse-color:                      @gray-light;
    336 @navbar-inverse-bg:                         #222;
    337 @navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
    338 
    339 // Inverted navbar links
    340 @navbar-inverse-link-color:                 @gray-light;
    341 @navbar-inverse-link-hover-color:           #fff;
    342 @navbar-inverse-link-hover-bg:              transparent;
    343 @navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
    344 @navbar-inverse-link-active-bg:             darken(@navbar-inverse-bg, 10%);
    345 @navbar-inverse-link-disabled-color:        #444;
    346 @navbar-inverse-link-disabled-bg:           transparent;
    347 
    348 // Inverted navbar brand label
    349 @navbar-inverse-brand-color:                @navbar-inverse-link-color;
    350 @navbar-inverse-brand-hover-color:          #fff;
    351 @navbar-inverse-brand-hover-bg:             transparent;
    352 
    353 // Inverted navbar search
    354 // Normal navbar needs no special styles or vars
    355 @navbar-inverse-search-bg:                  lighten(@navbar-inverse-bg, 25%);
    356 @navbar-inverse-search-bg-focus:            #fff;
    357 @navbar-inverse-search-border:              @navbar-inverse-bg;
    358 @navbar-inverse-search-placeholder-color:   #ccc;
    359 
    360 // Inverted navbar toggle
    361 @navbar-inverse-toggle-hover-bg:            #333;
    362 @navbar-inverse-toggle-icon-bar-bg:         #fff;
    363 @navbar-inverse-toggle-border-color:        #333;
    364 
    365 
    366 // Navs
    367 // -------------------------
    368 
    369 @nav-link-padding:                          9px 10px 10px;
    370 @nav-link-hover-bg:                         @gray-lighter;
    371 
    372 @nav-disabled-link-color:                   @gray-light;
    373 @nav-disabled-link-hover-color:             @gray-light;
    374 
    375 @nav-open-link-hover-color:                 #fff;
    376 @nav-open-caret-border-color:               #fff;
    377 
    378 // Tabs
    379 @nav-tabs-border-color:                     #ddd;
    380 
    381 @nav-tabs-link-hover-border-color:          @gray-lighter;
    382 
    383 @nav-tabs-active-link-hover-bg:             @body-bg;
    384 @nav-tabs-active-link-hover-color:          @gray;
    385 @nav-tabs-active-link-hover-border-color:   #ddd;
    386 
    387 @nav-tabs-justified-link-border-color:            #ddd;
    388 @nav-tabs-justified-active-link-border-color:     @body-bg;
    389 
    390 // Pills
    391 @nav-pills-border-radius:                   @border-radius-base;
    392 @nav-pills-active-link-hover-bg:            @component-active-bg;
    393 @nav-pills-active-link-hover-color:         @component-active-color;
    394 
    395 
    396 // Pagination
    397 // -------------------------
    398 
    399 @pagination-bg:                        #fff;
    400 @pagination-border:                    #ddd;
    401 
    402 @pagination-hover-bg:                  @gray-lighter;
    403 
    404 @pagination-active-bg:                 @brand-primary;
    405 @pagination-active-color:              #fff;
    406 
    407 @pagination-disabled-color:            @gray-light;
    408 
    409 
    410 // Pager
    411 // -------------------------
    412 
    413 @pager-border-radius:                  15px;
    414 @pager-disabled-color:                 @gray-light;
    415 
    416 
    417 // Jumbotron
    418 // -------------------------
    419 
    420 @jumbotron-padding:              30px;
    421 @jumbotron-color:                inherit;
    422 @jumbotron-bg:                   @white;
    423 @jumbotron-heading-color:        inherit;
    424 @jumbotron-font-size:            ceil(@font-size-base * 1.5);
    425 
    426 
    427 // Form states and alerts
    428 // -------------------------
    429 
    430 @state-warning-text:             #6B6D31;
    431 @state-warning-bg:               #ECDFB0;
    432 @state-warning-border:           darken(spin(@state-warning-bg, -10), 7%);
    433 
    434 @state-danger-text:              @brand-danger;
    435 @state-danger-bg:                #C46A69;
    436 @state-danger-border:            darken(spin(@state-danger-bg, -10), 18%);
    437 
    438 @state-success-text:             #296829;
    439 @state-success-bg:               #CEE0CF;
    440 @state-success-border:           darken(spin(@state-success-bg, -10), 22%);
    441 
    442 @state-info-text:                #346597;
    443 @state-info-bg:                  #D6DDE7;
    444 @state-info-border:              darken(spin(@state-info-bg, -10), 18%);
    445 
    446 
    447 // Tooltips
    448 // -------------------------
    449 @tooltip-max-width:           200px;
    450 @tooltip-color:               #fff;
    451 @tooltip-bg:                  #000;
    452 
    453 @tooltip-arrow-width:         5px;
    454 @tooltip-arrow-color:         @tooltip-bg;
    455 
    456 
    457 // Popovers
    458 // -------------------------
    459 @popover-bg:                          #fff;
    460 @popover-max-width:                   276px;
    461 @popover-border-color:                rgba(0,0,0,.2);
    462 @popover-fallback-border-color:       #ccc;
    463 
    464 @popover-title-bg:                    darken(@popover-bg, 3%);
    465 
    466 @popover-arrow-width:                 10px;
    467 @popover-arrow-color:                 #fff;
    468 
    469 @popover-arrow-outer-width:           (@popover-arrow-width + 1);
    470 @popover-arrow-outer-color:           rgba(0,0,0,.25);
    471 @popover-arrow-outer-fallback-color:  #999;
    472 
    473 
    474 // Labels
    475 // -------------------------
    476 
    477 @label-default-bg:            @gray-light;
    478 @label-primary-bg:            @brand-primary;
    479 @label-success-bg:            @brand-success;
    480 @label-info-bg:               @brand-info;
    481 @label-warning-bg:            @brand-warning;
    482 @label-danger-bg:             @brand-danger;
    483 
    484 @label-color:                 #fff;
    485 @label-link-hover-color:      #fff;
    486 
    487 
    488 // Modals
    489 // -------------------------
    490 @modal-inner-padding:         20px;
    491 
    492 @modal-title-padding:         15px;
    493 @modal-title-line-height:     @line-height-base;
    494 
    495 @modal-content-bg:                             #fff;
    496 @modal-content-border-color:                   rgba(0,0,0,.2);
    497 @modal-content-fallback-border-color:          #999;
    498 
    499 @modal-backdrop-bg:           #000;
    500 @modal-header-border-color:   #e5e5e5;
    501 @modal-footer-border-color:   @modal-header-border-color;
    502 
    503 
    504 // Alerts
    505 // -------------------------
    506 @alert-padding:               15px;
    507 @alert-border-radius:         @border-radius-base;
    508 @alert-link-font-weight:      bold;
    509 
    510 @alert-success-bg:            @state-success-bg;
    511 @alert-success-text:          @state-success-text;
    512 @alert-success-border:        @state-success-border;
    513 
    514 @alert-info-bg:               @state-info-bg;
    515 @alert-info-text:             @state-info-text;
    516 @alert-info-border:           @state-info-border;
    517 
    518 @alert-warning-bg:            @state-warning-bg;
    519 @alert-warning-text:          @state-warning-text;
    520 @alert-warning-border:        @state-warning-border;
    521 
    522 @alert-danger-bg:             @state-danger-bg;
    523 @alert-danger-text:           @state-danger-text;
    524 @alert-danger-border:         @state-danger-border;
    525 
    526 
    527 // Progress bars
    528 // -------------------------
    529 @progress-bg:                 #f5f5f5;
    530 @progress-bar-color:          #fff;
    531 
    532 @progress-bar-bg:             @brand-primary;
    533 @progress-bar-success-bg:     @brand-success;
    534 @progress-bar-warning-bg:     @brand-warning;
    535 @progress-bar-danger-bg:      @brand-danger;
    536 @progress-bar-info-bg:        @brand-info;
    537 
    538 
    539 // List group
    540 // -------------------------
    541 @list-group-bg:               #fff;
    542 @list-group-border:           #ddd;
    543 @list-group-border-radius:    @border-radius-base;
    544 
    545 @list-group-hover-bg:         #f5f5f5;
    546 @list-group-active-color:     #fff;
    547 @list-group-active-bg:        @component-active-bg;
    548 @list-group-active-border:    @list-group-active-bg;
    549 
    550 @list-group-link-color:          #555;
    551 @list-group-link-heading-color:  #333;
    552 
    553 
    554 // Panels
    555 // -------------------------
    556 @panel-bg:                    #fff;
    557 @panel-inner-border:          #ddd;
    558 @panel-border-radius:         @border-radius-base;
    559 @panel-footer-bg:             #f5f5f5;
    560 
    561 @panel-default-text:          @gray-dark;
    562 @panel-default-border:        #ddd;
    563 @panel-default-heading-bg:    #f5f5f5;
    564 
    565 @panel-primary-text:          #fff;
    566 @panel-primary-border:        @brand-primary;
    567 @panel-primary-heading-bg:    @brand-primary;
    568 
    569 @panel-success-text:          @state-success-text;
    570 @panel-success-border:        @state-success-border;
    571 @panel-success-heading-bg:    @state-success-bg;
    572 
    573 @panel-warning-text:          @state-warning-text;
    574 @panel-warning-border:        @state-warning-border;
    575 @panel-warning-heading-bg:    @state-warning-bg;
    576 
    577 @panel-danger-text:           @state-danger-text;
    578 @panel-danger-border:         @state-danger-border;
    579 @panel-danger-heading-bg:     @state-danger-bg;
    580 
    581 @panel-info-text:             @state-info-text;
    582 @panel-info-border:           @state-info-border;
    583 @panel-info-heading-bg:       @state-info-bg;
    584 
    585 
    586 // Thumbnails
    587 // -------------------------
    588 @thumbnail-padding:           4px;
    589 @thumbnail-bg:                @body-bg;
    590 @thumbnail-border:            #ddd;
    591 @thumbnail-border-radius:     @border-radius-base;
    592 
    593 @thumbnail-caption-color:     @text-color;
    594 @thumbnail-caption-padding:   9px;
    595 
    596 
    597 // Wells
    598 // -------------------------
    599 @well-bg:                     #f5f5f5;
    600 
    601 
    602 // Badges
    603 // -------------------------
    604 @badge-color:                 #fff;
    605 @badge-link-hover-color:      #fff;
    606 @badge-bg:                    @gray-light;
    607 
    608 @badge-active-color:          @link-color;
    609 @badge-active-bg:             #fff;
    610 
    611 @badge-font-weight:           bold;
    612 @badge-line-height:           1;
    613 @badge-border-radius:         10px;
    614 
    615 
    616 // Breadcrumbs
    617 // -------------------------
    618 @breadcrumb-bg:               #f5f5f5;
    619 @breadcrumb-color:            #ccc;
    620 @breadcrumb-active-color:     @gray-light;
    621 @breadcrumb-separator:        "/";
    622 
    623 // Carousel
    624 // ------------------------
    625 
    626 @carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);
    627 
    628 @carousel-control-color:                      #fff;
    629 @carousel-control-width:                      15%;
    630 @carousel-control-opacity:                    .5;
    631 @carousel-control-font-size:                  20px;
    632 
    633 @carousel-indicator-active-bg:                #fff;
    634 @carousel-indicator-border-color:             #fff;
    635 
    636 @carousel-caption-color:                      #fff;
    637 
    638 
    639 // Close
    640 // ------------------------
    641 @close-color:                 #000;
    642 @close-font-weight:           bold;
    643 @close-text-shadow:           0 1px 0 #fff;
    644 
    645 
    646 // Code
    647 // ------------------------
    648 @code-color:                  #c7254e;
    649 @code-bg:                     #f9f2f4;
    650 
    651 @pre-bg:                      #f5f5f5;
    652 @pre-color:                   @gray-dark;
    653 @pre-border-color:            #ccc;
    654 @pre-scrollable-max-height:   340px;
    655 
    656 // Type
    657 // ------------------------
    658 @text-muted:                  @gray-light;
    659 @abbr-border-color:           @gray-light;
    660 @headings-small-color:        @gray-light;
    661 @blockquote-small-color:      @gray-light;
    662 @blockquote-border-color:     @gray-lighter;
    663 @page-header-border-color:    @gray-lighter;
    664 
    665 // Miscellaneous
    666 // -------------------------
    667 
    668 // Hr border color
    669 @hr-border:                   @gray-lighter;
    670 
    671 // Horizontal forms & lists
    672 @component-offset-horizontal: 180px;
    673 
    674 
    675 // Container sizes
    676 // --------------------------------------------------
    677 
    678 // Small screen / tablet
    679 @container-tablet:             ((680px + @grid-gutter-width));
    680 @container-sm:                 @container-tablet;
    681 
    682 // Medium screen / desktop
    683 @container-desktop:            ((680px + @grid-gutter-width));
    684 @container-md:                 @container-desktop;
    685 
    686 // Large screen / wide desktop
    687 @container-large-desktop:      ((680px + @grid-gutter-width));
    688 @container-lg:                 @container-large-desktop;
    689 
    690 
    691 /*
    692  * SMARTADMIN VARIABLES
    693  */
    694 
    695 // IMAGE PATH & BACKGROUNDS
    696 // --------------------------------------------------
    697 
    698 @base-url: 						"../img";
    699 //urage: background-image: url("@{base-url}/images/bg.png");
    700 
    701 @html-background-image:			"mybg-null.png";
    702 @html-background-color:			@body-bg;
    703 
    704 @body-background-image:			"mybg.png";
    705 @body-background-color:			@body-bg;
    706 
    707 
    708 // HEADER
    709 // --------------------------------------------------
    710 @smart-navbar-height:			49px; // also be sure to change [$.navbar_height] variable in the app.js
    711 @smart-navbar-color-start:		#f3f3f3;
    712 @smart-navbar-color-end:		#e2e2e2;
    713 
    714 // RIBBON
    715 // --------------------------------------------------
    716 @ribbon-height:					40px;
    717 @ribbonBGColor:					#474544;
    718 
    719 // AJAX DROPDOWN
    720 // --------------------------------------------------
    721 
    722 @dropdownbtn-icon-color:		#C4BAB6;
    723 
    724 @ajaxdrop-arrow-top-color:		@white;
    725 @ajaxdrop-arrow-bottom-color:	#838383;
    726 @ajaxdropdown-arrow-size:		7px;
    727 @ajaxdropdown-arrow-bottom:		@ajaxdropdown-arrow-size + 1;
    728 @ajaxdropdown-height:			365px;
    729 
    730 // ASIDE WIDTH (NAVIGATION WIDTH & COLOR)
    731 // --------------------------------------------------
    732 
    733 // careful when you are resizing this as it may affect lower resoltions
    734 @asideWidth:					220px;
    735 
    736 @asideDataURL:					"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI5NyUiIHN0b3AtY29sb3I9IiMzYTM2MzMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMmEyNzI1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==";
    737 @asideColor-start:				#2A2725; /* left side */
    738 @asideColor-end:				#3A3633; /* right side */
    739 
    740 @asideLinkColor:				#A8A8A8;
    741 @asideLinkColorHover:			@white;
    742 @asideLinkColorFocus:			#C9C9C9;
    743 @asideNavActiveBGColor:			#616161; /* the color that flashes when you click on the first nav element */
    744 @asideNavFontSize:				@font-size-base+1; // 14px~
    745 @asideNavFontSizeSecondLevel:	@asideNavFontSize;
    746 @asideNavFontSizeThirdLevel:	@asideNavFontSize;
    747 
    748 
    749 // SMARTADMIN ZINDEX
    750 // -------------------------
    751 // Used for a bird's eye view of components dependent on the z-axis
    752 // Try to avoid customizing these :)
    753 
    754 @fixed-navigation-zindex:		998;
    755 @fixed-ribbon-zindex:			999;
    756 @morris-hover:					1001;
    757 @left-panel-zindex:				1002;
    758 @hidden-lefthand-menu-zindex:	@left-panel-zindex;
    759 @ajax-dropdown-zindex:			1003;
    760 @pace-zindex:					2000;
    761 @tooltip-zindex:				9999;
    762 
    763 // BOOTSTRAP WIZARD
    764 // -------------------------
    765 
    766 @wizard-step-complete:			@tealLight;
    767 @wizard-step-active:			@blueSky;
    768 
    769 
    770 // TOOLTIP FONT
    771 // -------------------------
    772 
    773 @tooltip-font-size:				@font-size-base - 2;
    774 @sparkline-font-size:			@tooltip-font-size;
    775 
    776 
    777 // SLIDERS
    778 // -------------------------
    779 
    780 @slider-bar-color:				@blueStandard;
    781 @handle-bg-color:				#858585;
    782 
    783 
    784 // SWITCH BG
    785 // -------------------------
    786 
    787 @onOffSwitchBG:					@blueStandard;
    788 
    789 
    790 // PROGRESS BARS SIZES
    791 // -------------------------
    792 
    793 @progressbar-radius:			0px;
    794 @progressbar-micro:				3px;
    795 @progressbar-xs:				7px;
    796 @progressbar-sm:				14px;
    797 @progressbar-lg:				30px;
    798 
    799 // TABLES
    800 // -------------------------
    801 
    802 @table-header-color-start:		#f2f2f2;
    803 @table-header-color-end:		#fafafa;
    804 
    805 
    806 
    807 //-------------CUSTOMS
    808 
    809 @gmap-overlay-zindex:			500;
    810 @gmap-text-overlay-zindex:		520;
    811 @alert-zindex:					550;