FCC-SimonGame/styles.css at master · Skretch/FCC-SimonGame · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
* {
  box-sizing: border-box; }

body {
  padding: 0;
  margin: 0;
  background-color: grey;
  font-size: 16px; }
  @media (max-width: 600px) {
    body {
      font-size: 2vw; } }

.container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 98vh; }
  .container #winScreen {
    display: none;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    width: 100%;
    font-size: 3em;
    color: white;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5); }
  .container #looseScreen {
    display: none;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    width: 100%;
    font-size: 3em;
    color: white;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5); }
  .container .playboard {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 250px;
    margin-top: 30vh;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .container .playboard .playBtn {
      width: 100px;
      height: 100px;
      margin: 5px; }
    .container .playboard #mainBtn-0 {
      background-color: green;
      border-top-left-radius: 100%; }
      .container .playboard #mainBtn-0:active {
        background: radial-gradient(70% 70%, white, green); }
    .container .playboard #mainBtn-1 {
      background-color: red;
      border-top-right-radius: 100%; }
      .container .playboard #mainBtn-1:active {
        background: radial-gradient(70% 70%, white, red); }
    .container .playboard #mainBtn-2 {
      background-color: orange;
      border-bottom-left-radius: 100%; }
      .container .playboard #mainBtn-2:active {
        background: radial-gradient(70% 70%, white, orange); }
    .container .playboard #mainBtn-3 {
      background-color: blue;
      border-bottom-right-radius: 100%; }
      .container .playboard #mainBtn-3:active {
        background: radial-gradient(70% 70%, white, blue); }
  .container .activeBtn0 {
    background: radial-gradient(70% 70%, white, green); }
  .container .activeBtn1 {
    background: radial-gradient(70% 70%, white, red); }
  .container .activeBtn2 {
    background: radial-gradient(70% 70%, white, orange); }
  .container .activeBtn3 {
    background: radial-gradient(70% 70%, white, blue); }
  .container .menu-items {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center; }
    .container .menu-items .menuBtn {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      height: 50px;
      width: 20%;
      margin: 5px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: default;
      background-color: #787878;
      box-shadow: 3px 4px 3px black;
      font-size: 1.7em; }
      .container .menu-items .menuBtn:active {
        box-shadow: none;
        -webkit-transform: translate(3px, 3px);
        -ms-transform: translate(3px, 3px);
        transform: translate(3px, 3px); }
    .container .menu-items #display {
      padding: 5px; }
      .container .menu-items #display div {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        font-size: 0.8em;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        padding: 5px;
        color: green;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); }