diff options
author | Star Rauchenberger <fefferburbia@gmail.com> | 2023-11-30 13:29:08 -0500 |
---|---|---|
committer | Star Rauchenberger <fefferburbia@gmail.com> | 2023-11-30 13:29:08 -0500 |
commit | 0929719a845897cc8567cf972e07a69a71f0fa6f (patch) | |
tree | 2b6f69c1d906abb6e0abf8a0f1d51725bc78087d /app/assets/stylesheets/general.css.scss | |
parent | 01c1947537e4e23ded0c16812a7cd9d49ad88356 (diff) | |
download | wittle-0929719a845897cc8567cf972e07a69a71f0fa6f.tar.gz wittle-0929719a845897cc8567cf972e07a69a71f0fa6f.tar.bz2 wittle-0929719a845897cc8567cf972e07a69a71f0fa6f.zip |
Migrate to a full rails app
Diffstat (limited to 'app/assets/stylesheets/general.css.scss')
-rw-r--r-- | app/assets/stylesheets/general.css.scss | 263 |
1 files changed, 263 insertions, 0 deletions
diff --git a/app/assets/stylesheets/general.css.scss b/app/assets/stylesheets/general.css.scss new file mode 100644 index 0000000..7ee3169 --- /dev/null +++ b/app/assets/stylesheets/general.css.scss | |||
@@ -0,0 +1,263 @@ | |||
1 | #puzzle { | ||
2 | touch-action: none; | ||
3 | } | ||
4 | |||
5 | #banner { | ||
6 | background-image: image-url("wittle_header.png"); | ||
7 | background-size: cover; | ||
8 | width: 600px; | ||
9 | height: 245px; | ||
10 | margin: 0 auto; | ||
11 | |||
12 | h1 { | ||
13 | margin: 0; | ||
14 | |||
15 | a { | ||
16 | display: block; | ||
17 | width: 600px; | ||
18 | height: 245px; | ||
19 | text-indent: -5000px; | ||
20 | text-decoration: none; | ||
21 | margin: 0; | ||
22 | } | ||
23 | } | ||
24 | } | ||
25 | |||
26 | h1 { | ||
27 | text-align: center; | ||
28 | } | ||
29 | |||
30 | .puzzle-description { | ||
31 | text-align: center; | ||
32 | display: block; | ||
33 | margin-top: -1em; | ||
34 | margin-bottom: 2em; | ||
35 | font-size: 1.25em; | ||
36 | } | ||
37 | |||
38 | #trace-settings { | ||
39 | margin: 1em auto; | ||
40 | width: 540px; | ||
41 | |||
42 | summary { | ||
43 | text-align: center; | ||
44 | } | ||
45 | } | ||
46 | |||
47 | #sens, #volume { | ||
48 | background-image: linear-gradient(to right, #EEE, #555); | ||
49 | } | ||
50 | |||
51 | /* Slider control main bar */ | ||
52 | input[type="range"] { | ||
53 | appearance: none; | ||
54 | -moz-appearance: none; | ||
55 | -webkit-appearance: none; | ||
56 | border-radius: 3px; | ||
57 | height: 15px; | ||
58 | margin-bottom: 5px; | ||
59 | margin-top: 5px; | ||
60 | outline: none; | ||
61 | width: 100%; | ||
62 | } | ||
63 | /* Slider control icon */ | ||
64 | input[type="range"]::-webkit-slider-thumb { | ||
65 | appearance: none; | ||
66 | -moz-appearance: none; | ||
67 | -webkit-appearance: none; | ||
68 | background: image-url('slider.png'); | ||
69 | background-size: 17px 33px; | ||
70 | height: 33px; | ||
71 | width: 17px; | ||
72 | } | ||
73 | input[type="range"]::-moz-range-thumb { | ||
74 | appearance: none; | ||
75 | -moz-appearance: none; | ||
76 | -webkit-appearance: none; | ||
77 | background: image-url('slider.png'); | ||
78 | background-size: 17px 33px; | ||
79 | height: 33px; | ||
80 | width: 17px; | ||
81 | } | ||
82 | input[type="range"]::-ms-thumb { | ||
83 | appearance: none; | ||
84 | -moz-appearance: none; | ||
85 | -webkit-appearance: none; | ||
86 | background: image-url('slider.png'); | ||
87 | background-size: 17px 33px; | ||
88 | height: 33px; | ||
89 | width: 17px; | ||
90 | } | ||
91 | |||
92 | #submission-form { | ||
93 | margin: 1em auto; | ||
94 | width: 540px; | ||
95 | text-align: center; | ||
96 | |||
97 | form { | ||
98 | border: 1px solid black; | ||
99 | width: max-content; | ||
100 | padding: 0 2em; | ||
101 | margin: 0 auto; | ||
102 | } | ||
103 | } | ||
104 | |||
105 | #scores { | ||
106 | display: flex; | ||
107 | |||
108 | div { | ||
109 | flex: 0 0 48%; | ||
110 | |||
111 | h2 { | ||
112 | text-align: center; | ||
113 | } | ||
114 | |||
115 | table { | ||
116 | width: max-content; | ||
117 | margin: 0 auto; | ||
118 | } | ||
119 | } | ||
120 | } | ||
121 | |||
122 | #activation-button { | ||
123 | button { | ||
124 | display: block; | ||
125 | margin: 0 auto; | ||
126 | width: 25%; | ||
127 | background-color: #04AA6D; | ||
128 | padding: 14px 28px; | ||
129 | font-size: 16px; | ||
130 | cursor: pointer; | ||
131 | text-align: center; | ||
132 | color: white; | ||
133 | } | ||
134 | } | ||
135 | |||
136 | #timer { | ||
137 | width: max-content; | ||
138 | margin: 0.5em auto 0; | ||
139 | font-size: 3em; | ||
140 | |||
141 | %label { | ||
142 | padding: 0; | ||
143 | } | ||
144 | } | ||
145 | |||
146 | .score-field { | ||
147 | padding-left: 1em; | ||
148 | text-align: right; | ||
149 | } | ||
150 | |||
151 | #archive { | ||
152 | width: 50%; | ||
153 | margin: 0 auto; | ||
154 | border-spacing: 0; | ||
155 | text-align: center; | ||
156 | |||
157 | tr { | ||
158 | &.odd { | ||
159 | background-color: #fff; | ||
160 | } | ||
161 | |||
162 | &.even { | ||
163 | background-color: #edf; | ||
164 | } | ||
165 | } | ||
166 | |||
167 | th, td { | ||
168 | padding: 0.5em; | ||
169 | } | ||
170 | |||
171 | ul { | ||
172 | list-style-type: none; | ||
173 | padding: 0; | ||
174 | } | ||
175 | } | ||
176 | |||
177 | #current-date { | ||
178 | margin-top: 1em; | ||
179 | text-align: center; | ||
180 | } | ||
181 | |||
182 | #choose-difficulty { | ||
183 | margin: 1em auto 2em; | ||
184 | width: max-content; | ||
185 | display: flex; | ||
186 | } | ||
187 | |||
188 | #normal-link { | ||
189 | width: 215px; | ||
190 | margin-right: 1em; | ||
191 | |||
192 | a { | ||
193 | background-image: image-url("wittle_normal.png"); | ||
194 | background-size: cover; | ||
195 | display: block; | ||
196 | width: 215px; | ||
197 | height: 215px; | ||
198 | text-indent: -5000px; | ||
199 | text-decoration: none; | ||
200 | margin: 0; | ||
201 | } | ||
202 | } | ||
203 | |||
204 | #hard-link { | ||
205 | width: 215px; | ||
206 | margin-right: 1em; | ||
207 | |||
208 | a { | ||
209 | background-image: image-url("wittle_hard.png"); | ||
210 | background-size: cover; | ||
211 | display: block; | ||
212 | width: 215px; | ||
213 | height: 215px; | ||
214 | text-indent: -5000px; | ||
215 | text-decoration: none; | ||
216 | margin: 0; | ||
217 | } | ||
218 | } | ||
219 | |||
220 | #expert-link { | ||
221 | width: 215px; | ||
222 | |||
223 | a { | ||
224 | background-image: image-url("wittle_expert.png"); | ||
225 | background-size: cover; | ||
226 | display: block; | ||
227 | width: 215px; | ||
228 | height: 215px; | ||
229 | text-indent: -5000px; | ||
230 | text-decoration: none; | ||
231 | margin: 0; | ||
232 | } | ||
233 | } | ||
234 | |||
235 | .summary { | ||
236 | width: 50%; | ||
237 | min-width: 600px; | ||
238 | margin: 0 auto 1em; | ||
239 | } | ||
240 | |||
241 | .puzzle-status { | ||
242 | text-align: center; | ||
243 | margin-bottom: 0; | ||
244 | } | ||
245 | |||
246 | .breadcrumb { | ||
247 | text-align: center; | ||
248 | |||
249 | a, a:visited { | ||
250 | color: #555d66; | ||
251 | text-decoration: none; | ||
252 | } | ||
253 | |||
254 | a:hover { | ||
255 | text-decoration: underline; | ||
256 | } | ||
257 | } | ||
258 | |||
259 | #new-puzzles { | ||
260 | text-align: center; | ||
261 | font-size: 1.25em; | ||
262 | margin-bottom: 1em; | ||
263 | } | ||