game-of-death

commit

8afba463232290dfa4566c56377616dca8abf9c0

parent

1aeadaa8916bbd92f718b0718a450e8282cc7706

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2019-10-26 14:24

dark mode

Diffstat

1 files changed, 77 insertions, 10 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 {
@@ -21,7 +88,7 @@ body {
   21    88 
   22    89 .board-cell {
   23    90     flex-grow: 1;
   24    -1     border: 1px solid silver;
   -1    91     border: 1px solid var(--border);
   25    92 }
   26    93 .board-cell:not(:last-child) {
   27    94     border-right: 0;
@@ -39,13 +106,13 @@ body {
   39   106     margin-bottom: 1em;
   40   107 }
   41   108 
   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   109 .fg-1 {--fg: var(--player1)}
   -1   110 .fg-2 {--fg: var(--player2)}
   -1   111 .fg-3 {--fg: var(--player3)}
   -1   112 .fg-4 {--fg: var(--player4)}
   46   113 
   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   114 .bg--1 {background-color: var(--gaia)}
   -1   115 .bg-1 {background-color: var(--player1)}
   -1   116 .bg-2 {background-color: var(--player2)}
   -1   117 .bg-3 {background-color: var(--player3)}
   -1   118 .bg-4 {background-color: var(--player4)}