game-of-death

commit

11708e3bfd6764c61e4e27552ca7764c214ed46b

parent

e2afaca6fcd32e7d7c8b645caabd96017b51ffcf

Author

radow <masteroftheriddles@googlemail.com>

Date

2019-10-26 15:10

Merge branch 'master' of https://git.hemio.de/radow/game-of-death

Diffstat

1 files changed, 84 insertions, 16 deletions

diff --git a/style.css b/style.css

@@ -1,7 +1,74 @@
   -1     1 :root {
   -1     2     --bg: #131518;
   -1     3     --fg: #ccc;
   -1     4     --border: black;
   -1     5     --gaia: black;
   -1     6     --player1: #e41a1c;
   -1     7     --player2: #377eb8;
   -1     8     --player3: #4daf4a;
   -1     9     --player4: #984ea3;
   -1    10 }
   -1    11 
   -1    12 :root {
   -1    13     box-sizing: border-box;
   -1    14 }
   -1    15 
   -1    16 * {
   -1    17     box-sizing: inherit;
   -1    18 }
   -1    19 
    1    20 body {
    2    21     max-width: 50em;
    3    22     margin: 0 auto;
    4    23     padding: 0.5em;
   -1    24     background-color: var(--bg);
   -1    25     color: var(--fg);
   -1    26 }
   -1    27 
   -1    28 input,
   -1    29 button {
   -1    30     -webkit-appearance: none;
   -1    31     padding: 0.3em 0.75;
   -1    32     line-height: 1.6;
   -1    33     height: 2.2em;
   -1    34     background-color: transparent;
   -1    35     color: var(--fg);
   -1    36     border: 1px solid var(--fg);
   -1    37     border-radius: 0.1em;
   -1    38     transition: all 200ms;
   -1    39     vertical-align: middle;
   -1    40 }
   -1    41 
   -1    42 input:focus,
   -1    43 button:hover,
   -1    44 button:focus {
   -1    45     background-color: var(--fg);
   -1    46     color: var(--bg);
   -1    47 }
   -1    48 
   -1    49 input[type="range"]::-moz-range-thumb {
   -1    50     height: 100%;
   -1    51     width: 0.5em;
   -1    52     border: 0;
   -1    53     border-radius: 0;
   -1    54     background-color: var(--fg);
   -1    55 }
   -1    56 
   -1    57 input[type=range]:focus::-moz-range-thumb {
   -1    58     background-color: var(--bg);
   -1    59 }
   -1    60 
   -1    61 input[type="range"]::-webkit-slider-thumb {
   -1    62     -webkit-appearance: none !important;
   -1    63     height: 2.2em;
   -1    64     width: 0.5em;
   -1    65     border: 0;
   -1    66     border-radius: 0;
   -1    67     background-color: var(--fg);
   -1    68 }
   -1    69 
   -1    70 input[type=range]:focus::-webkit-slider-thumb {
   -1    71     background-color: var(--bg);
    5    72 }
    6    73 
    7    74 .menu {
@@ -15,19 +82,20 @@ body {
   15    82     margin-bottom: 0.5em;
   16    83 }
   17    84 
   -1    85 .board {
   -1    86     background-color: var(--border);
   -1    87     padding: 0 1px 1px 0;
   -1    88 }
   -1    89 
   18    90 .board-row {
   19    91     display: flex;
   20    92 }
   21    93 
   22    94 .board-cell {
   23    95     flex-grow: 1;
   24    -1     border: 1px solid silver;
   25    -1 }
   26    -1 .board-cell:not(:last-child) {
   27    -1     border-right: 0;
   28    -1 }
   29    -1 .board-row:not(:last-child) .board-cell {
   30    -1     border-bottom: 0;
   -1    96     margin: 1px 0 0 1px;
   -1    97     background-color: var(--cell-color, var(--bg));
   -1    98     box-shadow: 0 0 0.5em var(--cell-color, transparent);
   31    99 }
   32   100 .board-cell::before {
   33   101     content: "";
@@ -39,13 +107,13 @@ body {
   39   107     margin-bottom: 1em;
   40   108 }
   41   109 
   42    -1 .fg-1 {color: #e41a1c}
   43    -1 .fg-2 {color: #377eb8}
   44    -1 .fg-3 {color: #4daf4a}
   45    -1 .fg-4 {color: #984ea3}
   -1   110 .fg-1 {--fg: var(--player1)}
   -1   111 .fg-2 {--fg: var(--player2)}
   -1   112 .fg-3 {--fg: var(--player3)}
   -1   113 .fg-4 {--fg: var(--player4)}
   46   114 
   47    -1 .bg--1 {background-color: black}
   48    -1 .bg-1 {background-color: #e41a1c}
   49    -1 .bg-2 {background-color: #377eb8}
   50    -1 .bg-3 {background-color: #4daf4a}
   51    -1 .bg-4 {background-color: #984ea3}
   -1   115 .bg--1 {--cell-color: var(--gaia); z-index: 1}
   -1   116 .bg-1 {--cell-color: var(--player1); z-index: 1}
   -1   117 .bg-2 {--cell-color: var(--player2); z-index: 1}
   -1   118 .bg-3 {--cell-color: var(--player3); z-index: 1}
   -1   119 .bg-4 {--cell-color: var(--player4); z-index: 1}