/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* brickdraft/style.css
 * copyright (c) 2024 drow <drow@bin.sh>
*/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* content */

  @import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

  body {
    background: #ffcc00;
    font-family: 'PT Sans', sans-serif;
    font-size: large;
  }
  span.nobr { white-space: nowrap; }

  input, select {
    border: 1px solid; border-radius: 0.5ex;
    padding: 0.5ex 0.5em;
    background: white;
    font-family: 'PT Sans', sans-serif;
    font-size: 100%;
  }
  input[type=button] { background: #ccffff; font-weight: bold; }
  input[disabled] { border-color: #808080; color: #808080; }
  input:not([disabled]) { transition: all 1s ease-in; }
  input[type=button][disabled] { background: #cccccc !important; }
  input[type=button].danger { background: #ffcc99; }
  input.error { border-color: red; color: red; }
  p.error { font-weight: bold; color: red; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* entry */

  div.entry {
    font-size: 120%;
  }
  div.entry h1 {
    margin: 0.5ex 0px;
    padding: 0px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0.1em 0.1ex 0.1ex #cc9900;
    font-size: 400%;
    font-style: italic;
  }
  div.entry p.subtitle { margin-top: -2ex; text-align: center; }
  div.entry h2 { font-size: 120%; }
  div.entry input[type=button] { padding: 0.5ex 2em; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* forms */

  div.entry div.form {
    width: min-content; min-width: 30em;
    margin: 2ex auto;
    border: 1px solid; border-radius: 0.5ex;
    padding: 2ex 2em;
    background: white;
  }
  div.entry div.form :first-child { margin-top: 0px; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* draft */

  div.draft {
    display: flex;
  }
  div.draft div.actions {
    padding: 0.5ex 0.5em;
    background: #cccccc;
  }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* panels */

  div.panel > div.actions {
    min-height: 4ex;
    margin: 0.5ex;
    border: 1px solid; border-radius: 0.5ex;
    font-size: 120%;

    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }
  div.panel > div.actions > div { margin-left: 0.5ex; }
  div.panel > div.actions > div:first-child { margin-left: 0px; }
  div.panel > div.actions > div.right { flex-grow: 1; text-align: right; }
  div.panel > div.actions select { font-size: 83%; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* parts */

  div.parts {
    display: flex;
    flex-flow: row wrap;
  }
  div.part {
    position: relative;
    flex-basis: 15em;
    flex-grow: 1;
    margin: 0.5ex;
    border: 1px solid; border-radius: 0.5ex;
    background: white;
    padding-bottom: 7ex;
  }
  div.part > div { margin: 0.5ex 1em; }
  div.part div.image { text-align: center; }
  div.part img { max-width: 5em; max-height: 5em; }

  div.part > div.actions {
    position: absolute; left: 0px; bottom: 0px;
    width: 100%;
    margin: 0px;
    border-radius: 0px 0px 0.5ex 0.5ex;
    padding: 0.6ex 0px;
    text-align: center;
  }

  div.part.picked { background: #cccccc; color: #808080; }
  div.part.picked img { opacity: 50%; }
  div.part.picked.mine { background: #ccffcc; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* participants */

  div.participants {
    position: sticky; top: 1ex;
    margin: 0.5ex; margin-top: 1ex;
    border: 1px solid; border-radius: 0.5ex;
    background: white;
  }
  div.participant {
    margin: 0.5ex;
    display: flex;
  }
  div.participant > div.info {
    flex-grow: 1;
    padding: 1ex 1em;
    border-radius: 0.5ex;
    background: #cccccc;
  }
  div.participant div.name { font-size: 120%; font-weight: bold; }

  div.participant > div.actions {
    margin-left: 0.5ex;
    border-radius: 0.5ex;
    white-space: nowrap;
  }

  div.participant.active > div.info { background: #ffffcc; }
  div.participant.active.my_turn > div.info { background: #ccffcc; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* modals */

  div.blackout {
    position: fixed; left: 0px; top: 0px;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.75);

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
  }
  div.modal {
    width: min-content; min-width: 30em;
    border: 1px solid; border-radius: 0.5ex;
    padding: 2ex 2em;
    background: white;
    font-size: 120%;
  }
  div.modal :first-child { margin-top: 0px; }
  div.modal > div.actions { margin-top: 4ex; text-align: right; }
  div.modal input[type=button] { padding: 0.5ex 2em; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* log */

  div.log {
    margin: 0.5ex;
    border: 1px solid; border-radius: 0.5ex;
    background: white;
  }
  div.log > div {
    margin: 0.5ex 0.5em;
    border-radius: 0.5ex;
  }

  div.event { display: flex; }
  div.created { background: #ccccff; }
  div.started { background: #ccffcc; }
  div.pick { border: 1px solid; }
  div.skip { background: #ffffcc; }

  div.event > div.time { width: max-content; flex: none; }
  div.event > div { flex-basis: 50%; margin: 0.5ex 0.5em; }
  div.event img { max-width: 5em; max-height: 5em; }
  div.event > div:last-child { flex-basis: 100%; }

  div.turn { display: flex; }
  div.turn.my_turn { background: #ccffcc; }
  div.turn > div { margin: 0.5ex 0.5em; font-size: 150%; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */