Repository navigation
Expand file tree
/
Copy pathstyles.css
More file actions
195 lines (177 loc) · 9.36 KB
/
Copy pathstyles.css
File metadata and controls
195 lines (177 loc) · 9.36 KB
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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
body {
font-family: 'Orbitron', sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
background-image: url('img/background_2.jpg');
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
.title {
max-width: 805px;
background: rgba(40, 40, 40, 0.648);
margin: 0 auto;
color: #ffffff;
padding: 20px;
font-family: 'Orbitron', sans-serif;
border-radius: 15px !important;
border: 3px solid #ffffffd0 !important;
}
.container {
color: #ffffff;
max-width: 805px;
margin: 0 auto;
background: rgba(55, 13, 59, 0.484);
padding: 20px;
border-radius: 15px !important;
border: 3px solid #ab20e6 !important;
}
p {
font-family: 'Orbitron', sans-serif;
font-size: 1em;
margin-bottom: 5px;
margin-top: 5px;
font-weight: bold;
}
h1 {
font-family: 'Orbitron', sans-serif;
font-size: 2em;
font-weight: 800;
margin-bottom: 0px;
margin-top: 0px;
}
h2 {
font-family: 'Orbitron', sans-serif;
font-size: 1.75em;
margin-bottom: 5px;
margin-top: 5px;
}
h3 {
font-family: 'Orbitron', sans-serif;
font-size: 1.5em;
margin-bottom: 5px;
margin-top: 5px;
}
h4 {
font-family: 'Orbitron', sans-serif;
font-size: 1.25em;
margin-bottom: 5px;
margin-top: 5px;
}
.hidden {
display: none;
}
button {
padding: 10px 10px;
border-radius: 10px;
border: 3px solid #fff;
background: rgba(21, 33, 48, 0.764);
font-family: 'Orbitron', sans-serif;
color: #fff;
font-size: 1em;
margin: 5px;
cursor: pointer;
}
button:hover {
background: rgba(36, 60, 90, 0.9);
}
#protocol-cards, #draft-actions {
display: flex;
flex-wrap: wrap;
margin: 3px;
color: #000;
}
#player1-pool,
#player2-pool {
display: flex;
flex-wrap: wrap;
margin: 3px;
}
#results #start-over-button {
width: auto;
margin: 5px;
}
strong {
font-weight: bold;
font-size: 1.25em;
}
.protocol-card {
font-family: 'Orbitron', sans-serif;
color: #d8d8d8;
border: 5px solid #e0e0e0;
border-radius: 10px;
padding: 10px;
width: 230px;
margin: 3px;
min-height: 33%;
max-height: 33%;
overflow: hidden;
padding: 10px;
font-size: 1em;
background: #00000000;
cursor: pointer;
}
/* Enable hover effect during drafting (desktop only) */
@media (hover: hover) and (pointer: fine) {
#draft-actions .protocol-card:hover {
background: #ee5ff571 !important;
color: #ffffff !important;
}
}
/* Ensure prompt text and protocol cards are displayed correctly */
#draft-actions p {
color: #fff;
width: 100%;
margin-bottom: 10px;
}
/* Background Colors for Each Protocol */
/* These include colors for all protocols included in Main 01-03 and Aux 01-03 (MN01,MN02,MN03/AX01)
For new protocols, copy / paste the following code and modify as desired.
.apathy { background-color: hsl(0, 0%, 56%) !important; --shadow-color: hsl(0, 0%, 30%); --protocol-color: hsl(0, 0%, 56%); }
*/
.ambush { background-color: hsl(280, 40%, 15%) !important; --shadow-color: hsl(280, 40%, 6%); --protocol-color: hsl(280, 40%, 35%); }
.apathy { background-color: hsl(0, 0%, 56%) !important; --shadow-color: hsl(0, 0%, 30%); --protocol-color: hsl(0, 0%, 56%); }
.assimilation { background-color: hsl(0, 0%, 42%) !important; --shadow-color: hsl(0, 0%, 22%); --protocol-color: hsl(0, 0%, 42%); }
.chaos { background-color: hsl(241, 73%, 19%) !important; --shadow-color: hsl(0, 0%, 10%); --protocol-color: hsl(241, 73%, 40%); }
.clarity { background-color: hsl(273, 68%, 30%) !important; --shadow-color: hsl(204, 100%, 10%); --protocol-color: hsl(273, 68%, 50%); }
.corruption { background-color: hsl(75, 100%, 22%) !important; --shadow-color: hsl(75, 100%, 5%); --protocol-color: hsl(75, 100%, 35%); }
.courage { background-color: hsl(34, 62%, 42%) !important; --shadow-color: hsl(0, 0%, 40%); --protocol-color: hsl(34, 62%, 55%); }
.darkness { background-color: hsl(54, 4%, 38%) !important; --shadow-color: hsl(54, 4%, 18%); --protocol-color: hsl(54, 4%, 55%); }
.death { background-color: hsl(229, 7%, 24%) !important; --shadow-color: hsl(229, 7%, 8%); --protocol-color: hsl(229, 7%, 45%); }
.diversity { background-color: hsl(56, 50%, 34%) !important; --shadow-color: hsl(0, 0%, 20%); --protocol-color: hsl(56, 50%, 50%); }
.envy { background-color: hsl(165, 55%, 26%) !important; --shadow-color: hsl(165, 55%, 10%); --protocol-color: hsl(165, 55%, 45%); }
.fear { background-color: hsl(0, 78%, 36%) !important; --shadow-color: hsl(0, 0%, 20%); --protocol-color: hsl(0, 78%, 50%); }
.fire { background-color: hsl(30, 53%, 55%) !important; --shadow-color: hsl(30, 53%, 30%); --protocol-color: hsl(30, 53%, 60%); }
.flexible { background-color: hsl(285, 45%, 34%) !important; --shadow-color: hsl(285, 45%, 15%); --protocol-color: hsl(285, 45%, 52%); }
.fulcrum { background-color: hsl(210, 15%, 34%) !important; --shadow-color: hsl(210, 15%, 16%); --protocol-color: hsl(210, 15%, 52%); }
.gluttony { background-color: hsl(24, 75%, 34%) !important; --shadow-color: hsl(24, 75%, 14%); --protocol-color: hsl(24, 75%, 52%); }
.gravity { background-color: hsl(325, 22%, 36%) !important; --shadow-color: hsl(325, 22%, 16%); --protocol-color: hsl(325, 22%, 55%); }
.greed { background-color: hsl(320, 55%, 32%) !important; --shadow-color: hsl(320, 55%, 14%); --protocol-color: hsl(320, 55%, 50%); }
.hate { background-color: hsl(1, 42%, 36%) !important; --shadow-color: hsl(1, 42%, 16%); --protocol-color: hsl(1, 42%, 55%); }
.ice { background-color: hsl(200, 80%, 40%) !important; --shadow-color: hsl(200, 100%, 20%); --protocol-color: hsl(200, 80%, 55%); }
.inert { background-color: hsl(0, 0%, 26%) !important; --shadow-color: hsl(0, 0%, 10%); --protocol-color: hsl(0, 0%, 44%); }
.life { background-color: hsl(58, 17%, 48%) !important; --shadow-color: hsl(58, 17%, 28%); --protocol-color: hsl(58, 17%, 60%); }
.light { background-color: hsl(35, 17%, 54%) !important; --shadow-color: hsl(35, 17%, 34%); --protocol-color: hsl(35, 17%, 65%); }
.love { background-color: hsl(352, 36%, 50%) !important; --shadow-color: hsl(352, 36%, 28%); --protocol-color: hsl(352, 36%, 65%); }
.luck { background-color: hsl(39, 77%, 32%) !important; --shadow-color: hsl(14, 85%, 18%); --protocol-color: hsl(39, 77%, 50%); }
.lust { background-color: hsl(45, 70%, 34%) !important; --shadow-color: hsl(45, 70%, 14%); --protocol-color: hsl(45, 70%, 52%); }
.metal { background-color: hsl(18, 6%, 36%) !important; --shadow-color: hsl(18, 6%, 16%); --protocol-color: hsl(18, 6%, 55%); }
.mirror { background-color: hsl(276, 48%, 34%) !important; --shadow-color: hsl(0, 0%, 20%); --protocol-color: hsl(276, 48%, 55%); }
.momentum { background-color: hsl(225, 55%, 32%) !important; --shadow-color: hsl(225, 55%, 14%); --protocol-color: hsl(225, 55%, 50%); }
.nova { background-color: hsl(15, 85%, 38%) !important; --shadow-color: hsl(15, 85%, 16%); --protocol-color: hsl(15, 85%, 58%); }
.overwhelm { background-color: hsl(355, 65%, 24%) !important; --shadow-color: hsl(355, 65%, 10%); --protocol-color: hsl(355, 65%, 42%); }
.peace { background-color: hsl(120, 57%, 28%) !important; --shadow-color: hsl(120, 100%, 14%); --protocol-color: hsl(120, 57%, 45%); }
.plague { background-color: hsl(95, 19%, 33%) !important; --shadow-color: hsl(95, 19%, 13%); --protocol-color: hsl(95, 19%, 50%); }
.pride { background-color: hsl(38, 70%, 36%) !important; --shadow-color: hsl(38, 70%, 16%); --protocol-color: hsl(38, 70%, 54%); }
.psychic { background-color: hsl(266, 9%, 36%) !important; --shadow-color: hsl(266, 9%, 16%); --protocol-color: hsl(266, 9%, 55%); }
.rigid { background-color: hsl(68, 55%, 28%) !important; --shadow-color: hsl(68, 55%, 12%); --protocol-color: hsl(68, 55%, 46%); }
.sloth { background-color: hsl(80, 20%, 30%) !important; --shadow-color: hsl(80, 20%, 12%); --protocol-color: hsl(80, 20%, 46%); }
.smoke { background-color: hsl(0, 0%, 22%) !important; --shadow-color: hsl(0, 0%, 6%); --protocol-color: hsl(0, 0%, 45%); }
.speed { background-color: hsl(216, 14%, 48%) !important; --shadow-color: hsl(216, 14%, 28%); --protocol-color: hsl(216, 14%, 65%); }
.spirit { background-color: hsl(189, 26%, 26%) !important; --shadow-color: hsl(189, 26%, 10%); --protocol-color: hsl(189, 26%, 45%); }
.time { background-color: hsl(0, 85%, 22%) !important; --shadow-color: hsl(0, 0%, 20%); --protocol-color: hsl(0, 85%, 40%); }
.unity { background-color: hsl(268, 61%, 36%) !important; --shadow-color: hsl(0, 0%, 20%); --protocol-color: hsl(268, 61%, 55%); }
.war { background-color: hsl(348, 81%, 20%) !important; --shadow-color: hsl(348, 83%, 10%); --protocol-color: hsl(348, 81%, 40%); }
.water { background-color: hsl(180, 8%, 50%) !important; --shadow-color: hsl(180, 8%, 30%); --protocol-color: hsl(180, 8%, 60%); }
.wrath { background-color: hsl(0, 70%, 26%) !important; --shadow-color: hsl(0, 70%, 10%); --protocol-color: hsl(0, 70%, 44%); }