jnaqsh/nerdnews

View on GitHub
app/assets/stylesheets/bootstrap_and_overrides.css.less

Summary

Maintainability
Test Coverage
// CSS Reset
@import "twitter/bootstrap/reset.less";

// Core variables and mixins
@import "twitter/bootstrap/variables.less"; // Modify this for custom colors, font-sizes, etc
@import "twitter/bootstrap/mixins.less";

// Grid system and page structure
@import "twitter/bootstrap/scaffolding.less";
@import "twitter/bootstrap/grid.less";
@import "twitter/bootstrap/layouts.less";

// Base CSS
@import "twitter/bootstrap/type.less";
@import "twitter/bootstrap/code.less";
@import "twitter/bootstrap/forms.less";
@import "twitter/bootstrap/tables.less";

// Components: common
@import "twitter/bootstrap/sprites.less";
@import "twitter/bootstrap/dropdowns.less";
@import "twitter/bootstrap/wells.less";
@import "twitter/bootstrap/component-animations.less";
@import "twitter/bootstrap/close.less";

// Components: Buttons & Alerts
@import "twitter/bootstrap/buttons.less";
@import "twitter/bootstrap/button-groups.less";
@import "twitter/bootstrap/alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less

// Components: Nav
@import "twitter/bootstrap/navs.less";
@import "twitter/bootstrap/navbar.less";
//@import "twitter/bootstrap/breadcrumbs.less";
@import "twitter/bootstrap/pagination.less";
//@import "twitter/bootstrap/pager.less";

// Components: Popovers
@import "twitter/bootstrap/modals.less";
@import "twitter/bootstrap/tooltip.less";
//@import "twitter/bootstrap/popovers.less";

// Components: Misc
@import "twitter/bootstrap/thumbnails.less";
//@import "twitter/bootstrap/media.less";
@import "twitter/bootstrap/labels-badges.less";
//@import "twitter/bootstrap/progress-bars.less";
@import "twitter/bootstrap/accordion.less";
//@import "twitter/bootstrap/carousel.less";
//@import "twitter/bootstrap/hero-unit.less";

// Utility classes
@import "twitter/bootstrap/utilities.less"; // Has to be last to override when necessary

body {
    padding-top: 80px;
  padding-bottom: 80px;
  &.win{
    font-family: @sanzFontFamily;
  }
}

@import "twitter/bootstrap/responsive";

// Set the correct sprite paths
@iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings");
@iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white");

// Font Awesome
@fontAwesomeEotPath: asset-url("fontawesome-webfont.eot");
@fontAwesomeEotPath_iefix: asset-url("fontawesome-webfont.eot?#iefix");
@fontAwesomeWoffPath: asset-url("fontawesome-webfont.woff");
@fontAwesomeTtfPath: asset-url("fontawesome-webfont.ttf");
@fontAwesomeSvgPath: asset-url("fontawesome-webfont.svg#fontawesomeregular");
@import "fontawesome/font-awesome";

// Glyphicons
//@import "twitter/bootstrap/sprites.less";

// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
//
// Example:
// @linkColor: #ff0000;

@font-face {
  font-family: "Iranian Sans";
  src: asset-path('IranianSans.eot?#') format('eot'), /* IE6–8 */
       asset-path('IranianSans.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
       asset-path('IranianSans.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

@font-face {
  font-family: "Iranian Sanz";
  src: asset-path('iransansz-webfont.eot?#') format('eot'), /* IE6–8 */
       asset-path('iransansz-webfont.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
       asset-path('iransansz-webfont.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
@linkColorHover:                rgb(51, 154, 51);
@sansFontFamily:                "Iranian Sans", Tahoma,"Helvetica Neue", Helvetica, Arial, sans-serif;
@sanzFontFamily:                "Iranian Sanz", Tahoma,"Helvetica Neue", Helvetica, Arial, sans-serif;
@navbarHeight:                  60px;
@navbarLinkColorHover:          green;
@navbarLinkColorActive:         green;
@dropdownLinkBackgroundHover:   desaturate(lighten(green, 50%), 50%);
@navbarLinkBackgroundHover:     #fff;
@navbarLinkBackgroundActive:    desaturate(lighten(green, 50%), 50%);
@formActionsBackground:         desaturate(lighten(green, 70%), 50%);
@inputBorder:                   desaturate(lighten(green, 60%), 50%);

@media (min-width: 980px) and (max-width: 1200px) {
  ul.social-icons {
    #facebook, #googleplus {
      display: none;
    }
  }
}

a:hover{
  text-decoration: none;
}

.navbar-inner {
  #gradient > .vertical(#fff, #fff);
  background-image: none;
  border: 0;
  border-bottom: 1px solid desaturate(lighten(green, 30%), 50%);
  .box-shadow(0);
}

.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
  @top-border-size: 4px;
  padding-top: ((@navbarHeight - @baseLineHeight) / 2) - @top-border-size;
  border-top: @top-border-size solid green;
  background-color: #fff;
  .box-shadow(0 0 0);
}

// Everything else
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  // Focus state
  &:focus {
    border-color: rgba(83, 198, 83,.8);
    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(83,198,83,.6)");
  }
}

// Overwrite Select2 properties
.select2-offscreen {
  left: 0;
  right: -10000px;
}

.select2-search input {
  padding: 4px 20px 4px 5px;
}

.select2-container{
  margin: 0;
}

.select2-drop {
  border-color: rgba(83,198,83,.8);
  outline: 0;
  outline: thin dotted \9; /* IE6-9 */
  .box-shadow(~"inset 0 1px -1px rgba(0,0,0,.075), 0 0 8px rgba(83,198,83,.6)");
  margin-top: -2px;

  &.select2-drop-above {
    .box-shadow(~"inset 0 -1px 1px rgba(0,0,0,.075), 0 0 8px rgba(83,198,83,.6)");
    border-top: none;
  }
}

.select2-container-multi {
  margin: 0;

  &.select2-container-active .select2-choices {
    border-color: rgba(83,198,83,.8);
    outline: 0;
    outline: thin dotted \9; /* IE6-9 */
    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(83,198,83,.6)");
  }
  .select2-choices {
    border-radius: @borderRadiusSmall;
    border: 1px solid @inputBorder;
    display: block;
    margin-bottom: 0;
    vertical-align: middle;

    li {
      float: right;
    }
    .select2-search-choice {
      padding: 3px 18px 3px 5px;
      margin: 3px 5px 3px 0px;
    }
  }
}

// General Styles

.page-header {
  margin-top: 0;
  padding: 5px;
  border-top: 3px solid rgb(245, 245, 245);
  border-bottom: 3px solid rgb(245, 245, 245);
  background: asset-path('bg-k20.png')
}

article h5 span {
  margin-left: 10px;
}

.logo {
  margin-left: 10px;
}

#loading-indicator {
  color: #fff;
  text-align: center;
  z-index: 1029;
  width: 100px;
  display: none;
  margin: auto;
  top:59px;
  padding: 5px;
  background-color: #53C653;
  border: 1px solid green;
  border-radius: @borderRadiusSmall;
  .box-shadow(~"inset 0 1px -1px rgba(0,0,0,.075), 0 0 8px rgba(83,198,83,.6)");
}
.navbar-inner {
  ul.social-icons {
    margin: 0;
    padding: 0;
    border: 0;
    *zoom: 1;
  }

  ul.social-icons:before, ul.social-icons:after {
    display: table;
    content: "";
    line-height: 0;
  }

  ul.social-icons:after {
    clear: both;
  }

  ul.social-icons li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    zoom: 1;
    *display: inline;
    white-space: nowrap;
    padding: 14px 0;
  }

  ul.social-icons img:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
    opacity: 0.6;
  }
}

blockquote p {
  line-height: 1.65;
}