diff options
Diffstat (limited to 'pub/index.css')
| -rw-r--r-- | pub/index.css | 196 |
1 files changed, 196 insertions, 0 deletions
diff --git a/pub/index.css b/pub/index.css new file mode 100644 index 0000000..7928e00 --- /dev/null +++ b/pub/index.css @@ -0,0 +1,196 @@ +body { + font-family: Helvetica, sans-serif; + --tile-margin: 5%; +} +/* use minimal margins on small screens, + to maximize available space for board. */ +@media (width < 10cm) { + body { + margin: 2px; + --tile-margin: 0%; + } +} +#board { + display: grid; + grid-template-rows: repeat(15, 1fr); +} +.board-row { + display: grid; + grid-template-columns: repeat(15, 1fr); + grid-auto-flow: column; +} +.board-square { + margin: 1px; + background-color: #dde; + line-height: 1; + position: relative; +} +.board-square.double-letter { + background-color: #acf; +} +.board-square.triple-letter { + background-color: #afc; +} +.board-square.double-word { + background-color: #fac; +} +.board-square.triple-word { + background-color: #c66; +} +.tile { + background: #eca; + position: absolute; + width: calc(100% - 2 * var(--tile-margin)); + height: calc(100% - 2 * var(--tile-margin)); + top: var(--tile-margin); + left: var(--tile-margin); + border-radius: 3px; + display: flex; + justify-content: center; + align-items: center; + font-weight: bold; +} +.blank { + color: #333; + font-weight: normal; +} +.highlight { + border: min(0.5vw,0.5vh) solid rgba(60,60,60,0.6); + width: 100%; + height: 100%; + box-sizing: border-box; + position: absolute; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; +} +.highlight.nothing { + border-color: #f00; +} +#board .highlight.selected { + border-color: #00f; +} +.highlight.all-correct { + border-color: #0a0; +} +.highlight.some-mistakes { + border-color: #f80; +} +.possibilities { + word-break: break-all; +} +.point-container { + position: relative; + width: 100%; + height: 100%; +} +.point-value { + position: absolute; + bottom: calc(1% + var(--tile-margin)); + right: calc(1% + var(--tile-margin)); + text-align: center; + font-size: 30%; +} +#select-container { + display: grid; + grid-template-rows: repeat(2, 1fr); +} +.select-container-row { + display: grid; + grid-template-columns: repeat(15, 1fr); + grid-auto-flow: column; + width: 100%; +} +.select-tile-container { + position: relative; + cursor: pointer; + margin: 2px; +} +.select-tile-container .tile { + background-color: transparent; + font-weight: normal; + border: 2px solid black; +} +.select-tile-container .tile.possible, +.select-tile-container .tile.correct { + background-color: #8c7; + font-weight: bold; + text-decoration: underline; +} +.select-tile-container .tile.missed { + background-color: #8c7; +} +.select-tile-container .tile.not-possible { + background-color: #c88; +} +.select-tile-container .tile.wrong { + background-color: #c88; + font-weight: bold; + text-decoration: underline; +} +.select-tile-container .tile.placing { + background-color: #88c; + font-weight: bold; + text-decoration: underline; +} +#submit { + outline: 0; + border: 2px solid #44a; + outline: 2px solid #00a; + box-shadow: 2px 2px 4px #00a; + margin: 4px; + border-radius: 5px; + padding: 2px 5px; + background: #ddf; +} +#submit:hover { + background: #bbf; +} +#submit:active { + transform: translate(2px, 2px); + box-shadow: 0 0 0; +} +.solution-letter.wrong { + text-decoration: line-through; + font-weight: bold; + color: #800; +} +.solution-letter.wrong { + text-decoration: line-through; + font-weight: bold; + color: #800; +} +.solution-letter.correct { + color: #060; +} +.solution-letter.missed { + color: #00a; + font-weight: bold; +} +/* all browsers which support grid should support + the JavaScript we use (if they have javascript at all). */ +@supports(display: grid) { + #no-grid { + display: none; + } +} +progress#score-meter::-moz-progress-bar { background: var(--color); } +progress#score-meter::-webkit-progress-value { background: var(--color); } +progress#score-meter { color: var(--color); } +h2, h3 { + margin: 2px; +} +.links { + text-align: right; + margin: 0; + line-height: 1; +} +dialog { + max-width: 50em; + display: none; +} +dialog[open] { + max-width: 50em; + display: block; +} |