exolve-m-old.css

/**
 * NOTE: THIS IS A DEPRECATED COPY OF exolve-m.css FROZEN AT v0.83.
 * AT v0.84, THERE WERE BACKWARD-INCOMPATIBLE CHANGES IN EXOLVE, TO
 * BETTER SUPPORT EMBEDDING EXOLVE IN ARBIRARY WEB SITES.
 *
 * PLEASE USE THIS FILE (ALONG WITH exolve-m-old.js) ONLY IF YOU
 * KNOW WHAT YOU ARE DOING!
 */

/*
MIT License

Copyright (c) 2019 Viresh Ratnakar

See the full license notice in exolve-m.js.

Version: Exolve v0.83 August 3 2020

The --col-* color and --sz-* size variables in :root{} are set by JavaScript.
*/

@media (max-width: 500px) {
  body {
    margin: 4px;
  }
}

@media (max-width: 800px) {
  .wide-box {
    width: 100%;
    max-width: 480px;
  }
  #current-clue {
    width: 100%;
    max-width: 480px;
  }
  .clues-box {
    width: 100%;
    max-width: 480px;
    margin: 0;
  }
  .button {
    font-size: 11px;
    padding: 5px;
    border-radius: 8px;
  }
}

@media (min-width: 801px) {
  .wide-box {
    width: 480px;
  }
  #current-clue {
    width: 480px;
  }
  .clues-box {
    width: 480px;
    margin: 0 0 0 12px;
  }
  .button {
    font-size: 14px;
    padding: 8px;
    border-radius: 12px;
  }
}

.background {
  fill: var(--col-background);
}
.cell {
  fill: var(--col-cell);
  cursor: pointer;
}
.cell-num {
  font-size: var(--sz-number);
  font-family: sans-serif;
  fill: var(--col-light-label);
}
.cell-text {
  font-size: var(--sz-letter);
  font-family: sans-serif;
  cursor: text;
  fill: var(--col-light-text);
}
.cell-circle {
  fill: rgba(0,0,0,0.0);
  stroke: var(--col-circle);
}
.prefill {
  fill: var(--col-prefill);
}
.wordend {
  fill: var(--col-separator);
}
span.solved, .solved td:first-child {
  color: var(--col-solved);
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td {
  padding: 4px 6px 0 0;
  vertical-align: top;
}
td:first-child:not(.filler) {
  max-width: 2ch;
  white-space: nowrap;
  overflow: visible;
  font-weight: bold;
  text-align:right;
}
.clickable:hover {
  cursor: pointer;
}
.anno-text {
  font-family: monospace;
  color: var(--col-anno);
}
.flex-row {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: center;
}
.flex-col {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
}
#title {
  text-align: center;
  font-weight: bold;
}
#setter {
  text-align: center;
  color: var(--col-imp-text);
  margin: 0 0 8px 0;
}
#prelude {
  margin: 8px 0;
  padding: 0;
}
#small-print {
  font-family: monospace;
  font-size: 12px;
  margin: 0 0 4px 0;
}
#small-print > a {
  padding: 0 4px 0 0;
}
#errors {
  font-weight: bold;
  color: red;
}
#current-clue-parent {
  width: 100%;
  height: 40px;
  position:relative;
  margin: 8px 0;
}
#current-clue {
  position: absolute;
  z-index: 2;
  word-wrap: break-word;
  font-weight: bold;
  margin: 0;
  padding: 2px 0;
}
#curr-orphan,
#current-clue-label {
  display: inline;
  padding: 0;
  margin: 0;
  line-height: 0.8;
}
.nobr {
  white-space: nowrap;
}
#grid-parent-centerer {
  text-align: center;
}
#grid-parent {
  position: relative;
  display: inline-block;
}
#grid-input-wrapper {
  position: absolute;
  border: none;
  border-width: 0;
}
#grid-input-rarr {
  position: relative;
  right: -40%;
  top: -85%;
  color: var(--col-arrow);
  font-size: var(--sz-arrow);
}
#grid-input-darr {
  position: relative;
  right: 0;
  top: -40%;
  color: var(--col-arrow);
  font-size: var(--sz-arrow);
}
#grid-input {
  text-align: center;
  text-anchor: middle;
  border: none;
  width: 100%;
  height: 100%;
  padding: 2px 0 0 0;
  color: rgba(0,0,0,0.0);
  caret-color: var(--col-caret);
  background: rgba(0,0,0,0.0);
  outline: none;
}
#controls-etc {
  padding: 8px 0 6px 0;
}
.controls-row {
  margin: 6px 0 6px 0;
}
#clues {
  max-width: 984px;
}
.clues-box {
  overflow-y: auto;
}
#explanations {
  margin: 10px 0 0 0;
}
hr {
  margin: 0 0 4px 0;
  background-color: var(--col-imp-text);
}
.button {
  background-color: var(--col-button);
  border: none;
  outline: none;
  color: var(--col-button-text);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: monospace;
}
.button:hover {
  background-color: var(--col-button-hover);
  cursor: pointer;
}
.button:disabled {
  background-color: gray;
  cursor: not-allowed;
}
.small-button {
  background-color: var(--col-small-button);
  border: 1px solid gray;
  outline: none;
  padding: 0 4px 2px 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: monospace;
  font-weight: bold;
  color: var(--col-small-button-text);
}
.small-button:hover {
  background-color: var(--col-small-button-hover);
  cursor: pointer;
}
#nina-group {
  position: absolute;
  border: none;
  border-width: 0;
  outline: none;
}
.nina {
  position: absolute;
  border: none;
  border-width: 0;
  outline: none;
  cursor: pointer;
}
#status {
  font-family: monospace;
  font-size: 12px;
  margin: 6px 0 6px 0;
  color: var(--col-imp-text);
}
#saving {
  font-size: x-small;
  font-family: monospace;
  color: gray;
  margin: 0px 0 6px 0;
}
.solution {
  font-family: monospace;
  font-weight: bold;
}
.question {
  margin: 20px 0 20px 0;
}
.answer {
  border: none;
  padding: 0 0 6px 0;
  outline: none;
  font-family: monospace;
  font-size: 12px;
  color: var(--col-imp-text);
  background-image:
    repeating-linear-gradient(to bottom, white, white 13px, black 14px);
}
.incluefill {
  border: none;
  padding: 0 0 2px 0px;
  margin: 0 0 0 4px;
  outline: none;
  font-family: monospace;
  font-weight: bold;
  font-size: 12px;
  color: var(--col-imp-text);
  border-bottom: solid 2px #c9c9c9;
  background-color: inherit;
}
#scratchpad {
  border: 1px solid var(--col-imp-text);
  padding: 8px;
  outline: none;
  font-family: monospace;
  font-size: 12px;
  color: var(--col-imp-text);
}
#shuffle {
  font-family: monospace;
  font-size: 12px;
  cursor: pointer;
}
#postscript {
  width: 100%;
}
@media print {
  @page {
    margin: 0.5in;
  }
  body {
    zoom: 100%;
  }
  #controls-etc {
    display: none;
  }
  .clues-box {
    overflow-y: visible;
  }
}