diff options
Diffstat (limited to 'app/assets/stylesheets')
-rw-r--r-- | app/assets/stylesheets/wittle/general.css.scss | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/app/assets/stylesheets/wittle/general.css.scss b/app/assets/stylesheets/wittle/general.css.scss new file mode 100644 index 0000000..06a7a83 --- /dev/null +++ b/app/assets/stylesheets/wittle/general.css.scss | |||
@@ -0,0 +1,91 @@ | |||
1 | #wrap { | ||
2 | |||
3 | } | ||
4 | |||
5 | h1 { | ||
6 | text-align: center; | ||
7 | } | ||
8 | |||
9 | #trace-settings { | ||
10 | margin: 1em auto; | ||
11 | width: 540px; | ||
12 | |||
13 | summary { | ||
14 | text-align: center; | ||
15 | } | ||
16 | } | ||
17 | |||
18 | #sens, #volume { | ||
19 | background-image: linear-gradient(to right, #EEE, #555); | ||
20 | } | ||
21 | |||
22 | /* Slider control main bar */ | ||
23 | input[type="range"] { | ||
24 | appearance: none; | ||
25 | -moz-appearance: none; | ||
26 | -webkit-appearance: none; | ||
27 | border-radius: 3px; | ||
28 | height: 15px; | ||
29 | margin-bottom: 5px; | ||
30 | margin-top: 5px; | ||
31 | outline: none; | ||
32 | width: 100%; | ||
33 | } | ||
34 | /* Slider control icon */ | ||
35 | input[type="range"]::-webkit-slider-thumb { | ||
36 | appearance: none; | ||
37 | -moz-appearance: none; | ||
38 | -webkit-appearance: none; | ||
39 | background: image-url('wittle/slider.png'); | ||
40 | background-size: 17px 33px; | ||
41 | height: 33px; | ||
42 | width: 17px; | ||
43 | } | ||
44 | input[type="range"]::-moz-range-thumb { | ||
45 | appearance: none; | ||
46 | -moz-appearance: none; | ||
47 | -webkit-appearance: none; | ||
48 | background: image-url('wittle/slider.png'); | ||
49 | background-size: 17px 33px; | ||
50 | height: 33px; | ||
51 | width: 17px; | ||
52 | } | ||
53 | input[type="range"]::-ms-thumb { | ||
54 | appearance: none; | ||
55 | -moz-appearance: none; | ||
56 | -webkit-appearance: none; | ||
57 | background: image-url('wittle/slider.png'); | ||
58 | background-size: 17px 33px; | ||
59 | height: 33px; | ||
60 | width: 17px; | ||
61 | } | ||
62 | |||
63 | #submission-form { | ||
64 | margin: 1em auto; | ||
65 | width: 540px; | ||
66 | text-align: center; | ||
67 | |||
68 | form { | ||
69 | border: 1px solid black; | ||
70 | width: max-content; | ||
71 | padding: 0 2em; | ||
72 | margin: 0 auto; | ||
73 | } | ||
74 | } | ||
75 | |||
76 | #scores { | ||
77 | display: flex; | ||
78 | |||
79 | div { | ||
80 | flex: 0 0 48%; | ||
81 | |||
82 | h2 { | ||
83 | text-align: center; | ||
84 | } | ||
85 | |||
86 | ol { | ||
87 | width: max-content; | ||
88 | margin: 0 auto; | ||
89 | } | ||
90 | } | ||
91 | } | ||