MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

.plainlist > ul {
	list-style-type: none;
	padding-left: 0;
}

/*
 * Colors are from https://www.hsluv.org/ color space
 * 
 * Light mode bg: hsluv(0, 0, 100)
 * Dark mode bg: hsluv(0, 0, 5)
 *
 * == hue
 * red    12
 * yellow 65
 * green  120
 * blue   240
 *
 * == saturation
 * base   100
 * muddy  50
 *
 * == lightness
 * base   80
 * {n}    100 - {n}
 * 
 * == lightness (dark mode)
 * base   25
 * {n}    5 + {n}
 */
 
:root {
   --blue-muddy-05: #ecf1f8;
   --yellow: #efc200;
   --green: #6de000;
   --red: #ffb3b3;
}

@media (prefers-color-scheme: dark) {
   :root {
      --blue-muddy-05: #121d26;
      --yellow: #493a00;
      --green: #1c4400;
      --red: #7e0002;
   }
   
   body.skin-citizen {
      background-color: #111111;
   }
}

.bg-green { background-color: var(--green); }
.bg-red { background-color: var(--red); }
.bg-yellow { background-color: var(--yellow); }

/* first movedata style */
.movedata {
  display: grid;
  grid-template-columns: 18% 12% repeat(3, 12%) 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  border-width: 1px 0;
  border-style: solid;
  border-color: #888;
  padding: 0.2em 0;
  grid-gap: 0 0.2em;
  grid-template-areas:
    "input damage block   hit   ch   notes"
    "input target startup crush recv notes";
}

.movedata p {
  margin: 0;
}

.movedata {
  margin-top: 1em;
  text-align: center;
}

.movedata + .movedata {
  margin-top: -1px;
}

.movedata:hover {
  background-color: var(--blue-muddy-05);
}

.movedata-input-ctn { grid-area: input; }
.movedata-name { grid-area: name; }
.movedata-startup-ctn { grid-area: startup; }
.movedata-damage-ctn { grid-area: damage; }
.movedata-target-ctn {  grid-area: target; }
.movedata-block { grid-area: block; }
.movedata-hit { grid-area: hit; }
.movedata-ch { grid-area: ch; }
.movedata-clean { grid-area: clean; }
.movedata-crush { grid-area: crush; }
.movedata-recv { grid-area: recv; }
.movedata-range { grid-area: range; }
.movedata-notes { grid-area: notes; }

.movedata-input-ctn {
  font-size: 1.7em;
  padding-left: 0.2em;
  text-align: start;
}

.movedata-damage-ctn { align-self: end; }
.movedata-target-ctn { align-self: start; }

.movedata-startup-ctn,
.movedata-crush,
.movedata-recv {
  align-self: start;
}

.movedata-hit,
.movedata-block,
.movedata-ch {
  align-self: end;
}

.movedata-damageLead,
.movedata-targetLead,
.movedata-inputLead {
  opacity: .3;
}

.movedata-clean,
.movedata-name,
.movedata-range,
.movedata-startupLead {
  display: none;
}

.movedata:before {
  content: " ";
  display: block;
  height: 0px;
  width: 100%;
  grid-column: 3 / span 3;
  grid-row: 1;
  align-self: end;
  border-bottom: 1px dotted grey;
}

.movedata-notes {
  align-self: stretch;
  line-height: initial;
  text-align: start;
  border-left: 1px solid #888;
  padding: 0 0.2em;
}

.movedata-input-ctn  {
  display: flex;
  flex-flow: row nowrap;
}

.movedata-input-ctn,
.movedata-target-ctn,
.movedata-damage-ctn {
  word-break: break-word;
}

.movedata-input-ctn:after {
  content: "";
  align-self: center;
  flex-basis: 0px;
  flex-grow: 1;
  margin-left: 0.2em;
  border-top: 1px solid #888;
}

@media (max-width: 600px) {
  .movedata {
    grid-template-areas:
      "input input input input"
      "damage block hit ch"
      "target startup crush recv"
      "notes notes notes notes";
    grid-template-rows: repeat(4, auto);
    grid-template-columns: 1fr repeat(3, 25%);
    border: none;
  }
  
  .movedata:before {
    grid-row: 2;
    grid-column: 2 / -1;
  }
  
  .movedata-notes {
    text-align: end;
    border: none;
  }
}
   
.movedata-range:empty:after {
  content: "N/A";
  visibility: hidden;
}

.movedata-name {
  text-align: start;
  font-size: 0.75em;
}

/* add name and range to movedata */
.movelist-nr .movedata-range,
.movelist-nr .movedata-name {
  display: initial;
}

.movelist-nr .movedata {
  grid-template-areas:
    "name name name name name notes"
    "input damage block hit ch notes"
    "input damage block hit ch notes"
    "input target block hit ch notes"
    "input target startup crush recv notes"
    "input range startup crush recv notes"
    "input range startup crush recv notes";
  grid-template-rows: repeat(7, auto);
}

.movelist-nr .movedata-target-ctn { align-self: center; }
.movelist-nr .movedata-range { align-self: start; }

.movelist-nr .movedata:before {
  grid-row: 2 / 5;
}

/* add name and range, name above frame data */
.movelist-nuf .movedata {
  grid-template-rows: repeat(3, auto);
  grid-template-areas:
    "input damage name name name notes"
    "input target block hit ch notes"
    "input range startup crush recv notes";
}

.movelist-nuf .movedata:before {
  grid-row: 2 / 3;
}

.movelist-nuf .movedata-range,
.movelist-nuf .movedata-name {
  display: initial;
}

.movelist-nuf .movedata-target-ctn { align-self: center; }
.movelist-nuf .movedata-range { align-self: start; }

@media (max-width: 600px) {
  .movelist-nuf .movedata {
    grid-template-areas:
      "input input input input"
      "damage name name name"
      "target block hit ch"
      "range startup crush recv"
      "notes notes notes notes";
    grid-template-rows: repeat(5, auto);
    grid-template-columns: 1fr repeat(3, 25%);
  }
  
  .movelist-nuf .movedata:before {
    grid-row: 3 / 4;
  }
}

/* name above input, in damage row */

.movelist-naid .movedata {
  grid-template-rows: repeat(6, auto);
  grid-template-areas:
    "name damage block hit ch notes"
    "name damage block hit ch notes"
    "input target block hit ch notes"
    "input target startup crush recv notes"
    "input range startup crush recv notes"
    "input range startup crush recv notes";
}

.movelist-naid .movedata:before {
  grid-row: 1 / 4;
}

.movelist-naid .movedata-range,
.movelist-naid .movedata-name {
  display: initial;
}

.movelist-naid .movedata-target-ctn { align-self: center; }
.movelist-naid .movedata-range { align-self: start; }

/* name under input, in range row */

.movelist-nuir .movedata {
  grid-template-areas:
    "input damage block hit ch notes"
    "input damage block hit ch notes"
    "input target block hit ch notes"
    "input target startup crush recv notes"
    "name range startup crush recv notes"
    "name range startup crush recv notes";
}

/* nr naid nuir same mobile syle */

@media (max-width: 600px) {
  .movelist-naid .movedata,
  .movelist-nuir .movedata,
  .movelist-nr .movedata {
    grid-template-areas:
      "input input input input"
      "name name name name"
      "damage block hit ch"
      "damage block hit ch"
      "target block hit ch"
      "target startup crush recv"
      "range startup crush recv"
      "range startup crush recv"
      "notes notes notes notes";
    grid-template-rows: repeat(9, auto);
    grid-template-columns: 1fr repeat(3, 25%);
  }
  
  .movelist-nr .movedata-name,
  .movelist-nuir .movedata-name,
  .movelist-naid .movedata-name {
    margin-top: -0.5em;
  }
  
  .movelist-nr .movedata:before,
  .movelist-nuir .movedata:before,
  .movelist-naid .movedata:before {
    grid-row: 3 / 6;
  }
}