diff --git a/src/app/cell.css b/src/app/cell.css index 2d81148..7a6838f 100644 --- a/src/app/cell.css +++ b/src/app/cell.css @@ -2,6 +2,10 @@ background-color: var(--color-maze-cell-solution); } +.solution:hover { + background-color: var(--color-maze-cell-solution-highlight); +} + .top { border-top-color: var(--color-maze-border); } @@ -18,10 +22,14 @@ border-left-color: var(--color-maze-border); } -.user { - background-color: hotpink; +.user{ + background-color: var(--color-maze-cell-user); +} + +.user:hover { + background-color: var(--color-maze-cell-user-highlight); } .solution.user { - background-color: darkred; + background-color: #c8ff00; } diff --git a/src/app/cell.module.css b/src/app/cell.module.css index 7e9afdb..af84a42 100644 --- a/src/app/cell.module.css +++ b/src/app/cell.module.css @@ -5,3 +5,7 @@ width: 2em; padding: 0; } + +.cell:hover { + background-color: var(--color-background-highlight); +} diff --git a/src/app/globals.css b/src/app/globals.css index f0dd782..5e78e1e 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -10,6 +10,9 @@ --color-maze-background: #e8e6e3; --color-maze-border: #333333; --color-maze-cell-solution: #b1d5b1; + --color-maze-cell-solution-highlight: #b9e8b9; + --color-maze-cell-user: #ffcc00; + --color-maze-cell-user-highlight: #ffdd22; } @media (prefers-color-scheme: dark) { @@ -24,6 +27,9 @@ --color-maze-background: #181a1b; --color-maze-border: #e8e6e3; --color-maze-cell-solution: #213d21; + --color-maze-cell-solution-highlight: #3d6e3d; + --color-maze-cell-user: #ffcc00; + --color-maze-cell-user-highlight: #ffdd22; } } @@ -46,171 +52,3 @@ input:hover, input:focus, select:hover, select:focus { border-color: var(--color-border-highlight); color: var(--color-foreground-highlight); } - -/*div.cell {*/ -/* display: table-cell;*/ -/* border: 1px solid transparent;*/ -/* height: 2em;*/ -/* width: 2em;*/ -/* padding: 0;*/ -/*}*/ - -/*div.cell.solution {*/ -/* background-color: lightgray;*/ -/*}*/ - -/*div.cell.top {*/ -/* border-top-color: var(--color-maze-border);*/ -/*}*/ - -/*div.cell.right {*/ -/* border-right-color: var(--color-maze-border);*/ -/*}*/ - -/*div.cell.bottom {*/ -/* border-bottom-color: var(--color-maze-border);*/ -/*}*/ - -/*div.cell.left {*/ -/* border-left-color: var(--color-maze-border);*/ -/*}*/ - -/*div.cell.user {*/ -/* background-color: hotpink;*/ -/*}*/ - -/*div.cell.user2 {*/ -/* border-radius: 0.5em;*/ -/*}*/ - -/*div.cell.solution.user {*/ -/* background-color: darkred;*/ -/*}*/ - -input:invalid { - border-color: #f00; -} - -body { - margin: 20px; - padding: 0; -} - -h1 { - margin-top: 0; - font-size: 22px; -} - -h2 { - margin-top: 0; - font-size: 20px; -} - -h3 { - margin-top: 0; - font-size: 18px; -} - -h4 { - margin-top: 0; - font-size: 16px; -} - -h5 { - margin-top: 0; - font-size: 14px; -} - -h6 { - margin-top: 0; - font-size: 12px; -} - -code { - font-size: 1.2em; -} - -ul { - padding-left: 20px; -} - -* { - box-sizing: border-box; -} - -.square { - background: #fff; - border: 1px solid #999; - float: left; - font-size: 24px; - font-weight: bold; - line-height: 34px; - height: 34px; - margin-right: -1px; - margin-top: -1px; - padding: 0; - text-align: center; - width: 34px; -} - -.board-row:after { - clear: both; - content: ''; - display: table; -} - -.status { - margin-bottom: 10px; -} - -.game { - display: flex; - flex-direction: row; -} - -.game-info { - margin-left: 20px; -} - -/*:root {*/ -/* --background: #ffffff;*/ -/* --foreground: #171717;*/ -/*}*/ - -/*@media (prefers-color-scheme: dark) {*/ -/* :root {*/ -/* --background: #0a0a0a;*/ -/* --foreground: #ededed;*/ -/* }*/ -/*}*/ - -/*html,*/ -/*body {*/ -/* max-width: 100vw;*/ -/* overflow-x: hidden;*/ -/*}*/ - -/*body {*/ -/* color: var(--foreground);*/ -/* background: var(--background);*/ -/* font-family: Arial, Helvetica, sans-serif;*/ -/* -webkit-font-smoothing: antialiased;*/ -/* -moz-osx-font-smoothing: grayscale;*/ -/*}*/ - -/** {*/ -/* box-sizing: border-box;*/ -/* padding: 0;*/ -/* margin: 0;*/ -/*}*/ - -/*a {*/ -/* color: inherit;*/ -/* text-decoration: none;*/ -/*}*/ - -/*@media (prefers-color-scheme: dark) {*/ -/* html {*/ -/* color-scheme: dark;*/ -/* }*/ -/*}*/