score/style.css at main · krkwd/score · 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
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
body {
    font-family: sans-serif;
    background-color: #f4f4f9;
    color: #333;
    display: flex;
    flex-direction: column; /* NEW: Stacks items vertically */
    align-items: center;   /* NEW: Horizontally centers the items */
    padding: 20px;
    /* The old 'justify-content' and 'align-items' lines can be removed */
}

.container {
    background-color: #fff;
    padding: 20px 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 800px;
}

h1, h2, h3 {
    color: #0056b3;
}

.hidden {
    display: none;
}

/* --- Setup Screen --- */
.input-group {
    margin-bottom: 20px;
}
.input-group label {
    display: block;
    margin-bottom: 5px;
}
input[type="number"] {
    width: 100px;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* --- Test & Results Screens --- */
.question-row {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.question-number {
    font-weight: bold;
    min-width: 40px;
}

.choices {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-grow: 1; /* NEW: This tells the element to fill all available space */
}
.correct-answer-choices {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-left: 1in; /* CHANGED: Added left margin */
}

.confidence-check {
    margin-left: 1in;
    display: flex;
    align-items: center;
    gap: 10px;
}

.confident-text, #confidence-score-percent { /* CHANGED: Added score to selector */
    color: orange;
    font-weight: bold;
}

.user-answers {
    min-width: 100px;
    font-weight: bold;
    color: #0056b3;
}

/* --- Score Header --- */
.score-header {
    background-color: #e7f1ff;
    padding: 10px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex; /* CHANGED: Added flex properties for layout */
    justify-content: space-between;
    align-items: center;
}

.score-display {
    text-align: right; /* Aligns scores to the right */
    flex-grow: 1; /* Allows this element to fill space */
}

/* --- Buttons --- */
button {
    display: block;
    margin: 20px auto 0 auto;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

button:hover {
    background-color: #0056b3;
}

/* NEW: Style for the reset button */
#reset-btn {
    background-color: #6c757d;
    margin: 0; /* Override the auto margin */
}

#reset-btn:hover {
    background-color: #5a6268;
}

/* Add these new rules to the bottom of your style.css file */

h4 {
    color: #856404; /* A brownish-yellow cautionary color */
    margin: 5px 0 0 0;
}

#cockiness-index-percent {
    font-weight: bold;
    color: #b58500;
}

/* NEW: Style for marking incorrect answers for review */
.marked-for-review {
    background-color: #f8d7da; /* Light pink/red background */
    border-left: 5px solid #dc3545; /* A solid red left border */
    border-radius: 4px; /* Optional: rounds the corners slightly */
}

footer {
    width: 100%;                  /* Ensures the footer spans the full width */
    text-align: center;           /* Centers the text and icons */
    margin-top: 40px;             /* Adds space above the footer */
    padding-top: 20px;            /* Adds space below the separator line */
    border-top: 1px solid #ccc;   /* A subtle line to separate it from the game */
    color: #6c757d;               /* A muted gray color for the text */
    font-size: 0.9em;             /* Makes the font slightly smaller */
}

.social-icon {
    height: 1.1em; /* Sets the icon height relative to the text size */
    width: auto;   /* Maintains the icon's aspect ratio */
    vertical-align: middle; /* Aligns the icon nicely with the text line */
}

/* Styling for the new "Confident" column header */
.column-header {
    font-weight: bold;
    color: #333;
    padding-bottom: 10px;
    margin-bottom: 5px;
    border-bottom: 2px solid #eee;
}

/* Ensures the "Confident" text aligns correctly over the checkboxes */
.column-header .confidence-check {
    padding-left: 5px;
}