truthmachine/css/style.less

Browser-based Sentential Logic Calculator

/**
 * TruthMachine main stylesheet
 */

@errorbg: #ffe0e0;
@trueState: #efe;
@falseState: #fee;

header {
  padding: 30px 0;

  h1, h2 {
    margin: 0;
    line-height: 1em;
    font-family: Rokkitt, serif;
  }

  h1 {
    font-size: 60pt;
  }

  h2 {
    font-size: 30pt;

  }
  text-align: center;
  border-bottom: 1px dashed #aaa;
}

#main-calculator {
  text-align: left;
  margin: 50px auto;
  width: 670px;

  #main-input {
    float: left;
    width: 450px;
    height: 38pt;
    font-size: 22pt;
  }

  #main-go {
    float: right;
    width: 200px;
    font-size: 20pt;
  }

  #main-links {
    clear: both;
    text-align: left;
    font-size: 11pt;
    a {
      display: inline-block;
      margin: 3px 5px 0 0;
      color: #666;
    }
    code {
      border-bottom: 1px dashed #666;
      cursor: default;
    }
  }
}

.rounded-corners (@radius: 10px) {
  -webkit-border-radius: @radius;
  -moz-border-radius:    @radius;
  -ms-border-radius:     @radius;
  -o-border-radius:      @radius;
  border-radius:         @radius;
}

.error-pre {
  .rounded-corners;
  padding: 5px;
  margin: 5px;
  background-color: @errorbg;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  white-space: pre;
  text-align: left;
}

#results {
  text-align: center;
  margin-bottom: 50px;
  .truth-table {
    font-size: 16pt;
    text-align: center;
    margin: auto;
    border-collapse: collapse;
    min-width: 300px;
    border: 1px solid black;

    th, td {
      border: 1px solid #aaaaaa;
      padding: 5px 10px;
    }

    th {
      text-align: center;
      background-color: #eee;
    }

    .state-true {
      background-color: @trueState;
    }

    .state-false {
      background-color: @falseState;
    }

    tbody tr:hover {
      background-color: #ffffff;
    }
  }
}

.help-keys {
  span {
    display: inline-block;
    margin: 0 5px 5px 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #fff;
    box-shadow: #ccc 1px 1px 3px;
    border: 1px solid #f9f9f9;
    .rounded-corners(5px);
  }

  label {
    display: inline-block;
    width: 100px;
  }
}

footer {
  font-size: 12px;
  color: #aaa;
  text-align: center;
  padding: 15px;
  margin: 15px;
  border-top: 1px dashed #aaa;
}