stylesheet.css.html

<style>
  /* @file    stylesheet.css.html (shown as stylesheet.css in GAS editor)
  ** @brief   CSS styling for HTML files used by Boffo.
  ** @created 2023-06-08
  ** @license Please see the file named LICENSE in the project directory
  ** @website https://github.com/caltechlibrary/boffo
  **
  ** The need to name this file stylesheet.css.html instead of stylesheet.css
  ** is because HTMLService in Google Apps Script doesn't recognize files that
  ** don't have a .html suffix.
  */

  body {
    font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
    color: #555555;
    margin-left: 0rem;
    margin-top: -1rem;
  }

  .explanatory-text {
    color: #777777;
    font-style: italic;
    font-size: 90%;
  }

  a {
    color: #d37441;
  }

  a:visited {
    color: #FEB17F;
  }

  .note {
    color: #999999;
    font-size: 90%;
    display: block;
    margin-top: 0.1rem;
  }

  .note a {
    color: #479FE8;
  }

  .note a:visited {
    color: #9498F5;
  }

  .label {
    color: #555555;
    margin: 0.5rem 0.5rem 0.5rem 0;
  }

  .centered {
    text-align: center;
  }

  fieldset {
    overflow: auto;
  }

  input.field {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 90%;
    line-height: 1.5;
    border: 1px solid #cccccc;
    box-shadow: -1px -1px 1px rgb(0 0 0 / 0.15);
  }

  input.wide {
    width: 28.5rem !important;
  }

  input.medium {
    width: 24rem !important;
  }

  input.narrow {
    width: 20rem !important;
  }

  input.button {
    float: right;
    text-align: center;
    margin-top: 0.5rem;
    margin-right: 0.2rem;
    font-size: 100%;
    background-color: #4964db;
    color: #ffffff;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    border: none;
  }

  input.button:focus,
  input.button:hover {
    outline: 1px solid #0000ff;
    -webkit-box-shadow: inset 0px 0px 3px #ffffff;
    -moz-box-shadow: inset 0px 0px 3px #ffffff;
    box-shadow: inset 0px 0px 3px #ffffff;
  }

  input.button.cancel {
    text-align: center;
    width: 4rem;
    padding: 0.2rem;
    margin-top: 0.5rem;
    background-color: #ffffff;
    border: 1px solid #aa0000;
    color: #aa0000;
  }

  input.button.cancel:focus,
  input.button.cancel:hover {
    background: #e5e5e5;
    outline: 1px solid #ff0000;
    -webkit-box-shadow: inset 0px 0px 3px #c1c1c1;
    -moz-box-shadow: inset 0px 0px 3px #c1c1c1;
    box-shadow: inset 0px 0px 3px #c1c1c1;
  }

  input[type="checkbox"] {
    vertical-align: bottom;
    margin-right: 5px;
  }

  input[type="text"] {
    font-family: "Roboto Mono", Menlo, Monaco, Consolas, "Courier New", monospace !important;
    margin-left: 0.15rem;
  }

  select {
    color: #555555;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;    
    font-size: 85% !important;
    width: 29rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

</style>