breunigs/hipsterpizza

//= require _both

$font-size-base: 16px;
$line-height-base: 1.632;
$font-family-sans-serif: 'Cabin', sans-serif;

.hipster {
  @import "bootstrap";
  @import "bootstrap/theme";

  font-family: $font-family-sans-serif;
  line-height: $line-height-base;
  font-size: $font-size-base;

  body {
    background-color: #fff;

    @media (min-width: $screen-sm-min) {
      background: url(image-path('large_glasses_bg.png')) no-repeat bottom right fixed #fff;
    }

    padding-top: 50px; // make room for fixed header

    > .container {
      padding-bottom: 15px;
    }
  }

  .spacer {
    width: 15px;
    overflow: hidden;
    float: left;
  }

  .nick-id-float {
    float:right;
    color: #E6E6E6;
    font-size: 600%;
    cursor: help;
  }

  @media (min-width: $screen-sm-min) {
    .navbar-brand {
      padding-left: 0;
    }
  }

  @media (max-width: $screen-xs-max) {
    .navbar-header .navbar-nav {
      margin: 0;

      li {
        display: inline-block;
      }
    }
  }

  .navbar form .navbar-btn {
    margin-top: 8px;
    padding-top: 3px;
    padding-bottom: 3px;

    text-decoration: none !important;
  }


  .text-muted a {
    color: #999;
  }

  p {
    text-align: justify;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;

    &.lead {
      margin: 13px 0;
    }
  }

  ol {
    padding-left: 0;
    list-style: none;
    li {

      counter-increment: ordered-list;
      &:before {
        content: counter(ordered-list) ". ";
        display: inline-block;
        min-width: 1.1em;
      }
    }
  }

  ul {
    padding-left: 1em;
  }


  dl.dl-horizontal {
    dt {
      text-align: left;
      width: 100px;
      float: left;
    }

    dd {
      margin-left: 120px;
    }
  }


  .delivery-arrived-button {
    @media (min-width: $screen-xs-min) {
      margin-left: 15px;
      // the height: 25px hack is used to allow the button to share the same
      // horizontal space as the dd list. Latter clears floats to achieve its
      // looks, which would also take the height of the button into account.
      height: 25px;
      float: right;
    }

    float: none;

    // Obviously, the hack is only required if the button is directly next to
    // the list.
    &.with-text {
      height: auto;
    }
  }

  pre.link {
    font-size: 150%;
  }

  .qrcode {
    float: right;
    margin-top: 22px;
    margin-left: 22px;
  }

  .alert {
    margin-top: 26px;
  }

  .dropdown .danger a {
    background: $state-danger-bg;
    color: $state-danger-text !important;

    &:hover {
      @include gradient-vertical($start-color: darken($state-danger-bg, 2%), $end-color: darken($state-danger-bg, 7%));
      background-color: darken($state-danger-bg, 7%);
    }
  }


  .dropdown .warning a {
    background: $state-warning-bg;
    color: $state-warning-text !important;

    &:hover {
      @include gradient-vertical($start-color: darken($state-warning-bg, 2%), $end-color: darken($state-warning-bg, 7%));
      background-color: darken($state-warning-bg, 7%);
    }
  }

  .progress {
    font-weight: bold;
    position: relative;
    color: #fff;
    text-shadow:
    -1px -1px 0 rgba(0,0,0, 0.5),
     1px -1px 0 rgba(0,0,0, 0.5),
    -1px  1px 0 rgba(0,0,0, 0.5),
     1px  1px 0 rgba(0,0,0, 0.5),
     0 0 3px #fff;
  }

  .progress-bar {
    overflow: hidden;
  }

  .progress-bar-transparent {
    background: none;
    box-shadow: none;
  }

  .progress-bar-center {
    position: absolute;
    text-align: center;
    width: 100%;
    line-height: 26px - 2px;
  }

  .progress-bar-marker {
    position: absolute;
    border: rgba(0,0,0,0.5) solid 1px;
    width: 0;
    height: 26px;
    display: block;
    cursor: help;
    line-height: 26px - 2*2*1px; // border

    span {
      display: inline-block;
      width: 200px;
      margin-left: -200px;
      padding: 0 6px;
      text-align: right;
    }
  }

  .button-overflow {
    .btn {
      margin-bottom: $padding-base-vertical;
      width: 100%;

      @media (min-width: $screen-sm-min) {
        width: auto;
        margin-bottom: 0;
      }
    }

    .dropdown {
      width: 100%;
      display: inline-block;

      @media (min-width: $screen-sm-min) {
        width: auto;
      }
    }

    .dropdown-menu {
      width: 100%;
      a {
        padding-top: 8px;
        padding-bottom: 8px;
      }

      @media (min-width: $screen-sm-min) {
        width: auto;
        a {
          padding-top: 3px;
          padding-bottom: 3px;
        }
      }
    }
  }

  table ul {
    margin-bottom: 0;
  }

  table.table {
    td:last-child {
      // align action button in order table vertically. Also avoids increasing
      // the size of the table slightly.
      padding-top: 5px;
    }

    // the rgba translates to #f5f5f5 on a white background, the default.
    // Transparency is only needed to make the glasses in the bottom right
    // corner shine through, so avoid it on small devices.
    @media (min-width: $screen-sm-min) {
      tr.active th {
        background-color: rgba(242, 242, 242, 0.8);
      }
    }
  }

  .anti-troll {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .wrap-ok {
    min-width: 200px;
    white-space: normal !important;
  }

  // prevent wrapping of buttons
  .btn-group {
    white-space: nowrap;

    .btn {
      float: none;
    }
  }

  time {
    min-width: 4em;
    display: inline-block;
  }
}