hicknhack-software/redmine_hourglass

@mixin form-row {
  .form-row {
    width: 100%;
    float: left;
    .form-field {
      float: left;
      margin-right: 5px;
      .label {
        float: left;
        overflow: hidden;
        font-size: 9px;
      }
      .input {
        margin-top: 15px;
        input ~ a {
          margin-left: 10px;
        }
        .invalid {
          border: 2px solid #D00;
          background-color: #FFE3E3;
          color: #800;
        }
      }
    }
  }
}

@mixin inline-block {
  display: inline-block;
  vertical-align: middle;
}

.controller-hourglass_ui {
  .hasDatepicker {
    width: 13em;
  }

  .time-tracker-control {
    margin-bottom: 30px;
    form {
      display: inline-block;
      @include form-row;
    }
  }

  .hourglass-list {
    tr {
      white-space: nowrap;
      text-align: center;

      &:hover {
        td.actions a {
          visibility: visible;
        }
      }

      &.warning:hover {
        background-color: #FFEBC1;
      }

      td {
        text-align: center;
        @include form-row;
        &.comments, &.issue {
          text-align: left;
        }
        &.actions {
          text-align: right;
          a {
            padding: 2px 16px;
            background-repeat: no-repeat;
            background-position: 10px 0;
            visibility: hidden;
          }
        }
      }
      th {
        &.actions {
          width: 1px;
        }
      }
      &.group {
        td {
          text-align: left;
          .expander {
            margin-right: 5px;
          }
          .totals > span {
            margin-left: 5px;
          }
        }
      }
    }
  }

  #query_form {
    #filters-table {
      tr.filter {
        td.field {
          white-space: nowrap;
        }
      }
    }
  }

  #chart-container.has-data {
    height: 400px;
    margin-bottom: 10px;
  }

  //everything inside of action report are print specific styles
  &.action-report {
    color: #484848;
    width: 210mm;
    padding: 0;

    * {
      font-family: "Myriad Pro", Verdana, sans-serif;
    }

    .header {
      h1 {
        font-weight: bold;
        font-size: 13pt;
        width: 50%;
        @include inline-block;
      }
      .logo {
        width: 50%;
        text-align: right;
        @include inline-block;
      }
    }
    .list {
      width: 100%;
      border-collapse: collapse;
      * {
        font-size: 11pt;
      }
      thead {
        display: table-header-group;
        tr {
          background-color: #90D2E8;
          th {
            border-bottom-color: #666;
          }
        }
      }
      tbody {
        display: table-row-group;
      }
      tr {
        page-break-inside: avoid;
        &.odd {
          background-color: #f6f7f8;
        }
        &.even {
          background-color: #fff;
        }
        td, th {
          padding-right: 1em;
          border-bottom: 1px solid #aaa;
          text-align: left;
          vertical-align: top;
          &:first-child {
            padding-left: 1em;
          }
          &:last-child {
            padding-right: 1em;
          }
          &.description {
            white-space: normal;
          }
          .project {
            position: relative;
            overflow: hidden;
            font-size: 8pt;
          }
          .count {
            margin-left: 5px;
          }
        }
      }
    }

    .chart {
      .query-totals {
        @include inline-block;
        width: 15%;
        font-weight: bold;
        font-size: 11pt;
      }
      #chart-container {
        @include inline-block;
        height: 300px;
        width: 85%;
        overflow: visible;
        .jqplot-yaxis {
          font-size: 75%;
          text-align: right;
          padding-right: 10px;
        }
        .jqplot-xaxis {
          font-size: 75%;
        }
        .jqplot-xaxis-tick {
          white-space: nowrap;
        }
      }
    }
  }

  label + a.icon {
    margin-left: 5px;

  }
  .icon-link {
    background: url(/images/link.png) no-repeat 0% 70%;
  }
}