/* Reference: <https://docs.ubports.com/en/latest/humanguide/index.html> */
/* QML code: <https://gitlab.com/ubports/development/core/lomiri-ui-toolkit> */

@font-face {
  font-family: "Ubuntu";
  src:
    local("Ubuntu"),
    url("../fonts/ubuntu-font-family-0.83/ubuntu-font-family-0.83/Ubuntu-L.ttf");
}

* {
  /* Colours from <https://docs.ubports.com/en/latest/humanguide/design-concepts/system-palette.html> */
  --colour-white: #FFFFFF;
  --colour-jet: #111111;
  --colour-inkstone: #3B3B3B;
  --colour-slate: #5D5D5D;
  --colour-graphite: #666666;
  --colour-ash: #888888;
  --colour-silk: #CDCDCD;
  --colour-porcelain: #F7F7F7;
  --colour-blue: #335280;
  --colour-light-blue: #19B6EE;
  --colour-green: #0E8420;
  --colour-light-green: #3EB34F;
  --colour-red: #C7162B;
  --colour-light-red: #ED3146;
  --colour-orange: #E95420;

  /* Note that atm this is assuming light theme */
  --background-colour: var(--colour-white);
  --text-colour: var(--colour-jet);
  --line-colour: var(--colour-silk);

  font-family: "Ubuntu";
}
html, body {
  margin: 0;
  padding: 0;
}

/********************************
 * HEADER
 ********************************/
/* TODO

- When there's not enough room to show all buttons on the right, they should collapse into a hamburger menu. We don't have the hamburger menu yet.
  - See <https://docs.ubports.com/en/latest/humanguide/app-layout/main-actions.html>
  - Available space depends on screen, so they should dynamically "collapse" into the menu. If we want to keep the html clean, this probably requires JS.
  - Probably only an issue starting at four or more items. And a non-dynamic menu could be an acceptable work-around, in which case pure css may be possible.

*/
header {
  height: 2.45em;
  padding: 0 0.4em 0 0.4em;
  margin: 0;
  border-bottom: 1px solid var(--line-colour);
  font-size: 1.2em;
  display: flex;
}
header > span {
  margin: 0.6em 0 0 0;
  padding: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space:nowrap;
  flex-grow: 1;
}
header > span:first-child {
  margin-left: 0.4em;
}
header button {
  height: 1.2em;
  padding: 0;
  margin: 1.2em 0.6em 0 0.6em;
  border: none;
  overflow: hidden;
  background: var(--background-colour);
}
header button img {
  height: 1.2em;
  overflow: hidden;
  color: var(--text-colour);
}

/********************************
 * MAIN APP
 ********************************/
/* TODO
 *
 * Need to check what we want exactly here
 * Style buttons and other elements
 *
 * See <https://docs.ubports.com/en/latest/humanguide/app-layout/presenting-data.html> and following pages.
 *
 */
main button {
  /*TODO
   *
   * - Now the buttons are 100% width with no margins on the side. Is this indeed UT default behaviour?
   * - What's the (minimum?) padding left and right?
   *
   */
  width: 100%;
  padding: 0.7em;
  margin: 0.7em 0 0.7em 0;
  border: none;
  border-radius: 0.5em;
  color: var(--colour-white);
  background-color: var(--colour-light-green);
}
/*TODO
 *
 * - Check if --colour-ash is indeed typical for disabled buttons
 *
 */
main button:disabled {
  background-color: var(--colour-ash);
}

/*TODO
 *
 * - Make list dragable/scrollable
 *
 */
main ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
main ul li {
  height: 1.5em;
  padding: 1em;
  border-bottom: 1px solid var(--line-colour);
}

/*TODO
 * - have style for a disabled checkbox (see settings.html file)
 * - make animation when checking the box work (may need pseudo elements [1])
 * - Check if colours/radius/... is really correct according to <https://gitlab.com/ubports/development/core/lomiri-ui-toolkit/-/blob/main/src/imports/Components/2.0/CheckBox.qml?ref_type=heads>
 * - Check if positioning is really correct
 * - Make the vibration work <https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API>. Think how to implement this, bc people may want to override `onChecked` and other methods.
 *
 * [1] The following example uses a pseudo element `::before`. We can also change it with `::after`.
 *
 * ```css
 * input[type="checkbox"] {
 * appearance: none;
 * margin: 0 1em 0 0;
 * width: 1.2em;
 * height: 1.2em;
 * vertical-align: middle;
 * border-radius: 0.3em;
 * box-shadow: inset 0 0.1em var(--colour-silk);
 * background-color: var(--colour-porcelain);
 * position: relative;
 * }
 * input[type="checkbox"]:checked::before {
 * content: "";
 * position: absolute;
 * inset: 0;
 * border-radius: 0.3em;
 * background-color: var(--colour-green);
 * background-image: url("../icons/tick@30.png");
 * background-repeat: no-repeat;
 * background-position: center;
 * background-size: 60%;
 * }
 * ```
 */
input[type="checkbox"] {
  appearance: none;
  margin: 0 1em 0 0;
  width: 1.2em;
  height: 1.2em;
  border-radius: 0.3em;
  box-shadow: inset 0 0.1em var(--colour-silk);
  background-color: var(--colour-porcelain);
}
input[type="checkbox"]:checked {
  background-color: var(--colour-green);
  background-image: url("../icons/tick@30.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}

/********************************
 * FOOTER
 ********************************/
/* TODO

Make it work.
 - See <https://docs.ubports.com/en/latest/humanguide/app-layout/quick-actions.html>

*/