1+ /*-------------------------------------------------------*\
2+ #CTAT--example
3+ \*-------------------------------------------------------*/
4+
5+ .CTAT--example { /* general example highlighting */
6+ box-shadow : 0px 0px 15px 5px dodgerblue ;
7+ }
8+ textarea .CTAT--example ,
9+ input .CTAT--example [type = "text" ] { /* font color change for text components */
10+ box-shadow : none;
11+ color : dodgerblue;
12+ }
13+ label .CTAT--example { /* labels for checkboxes and radio buttons */
14+ box-shadow : none;
15+ text-shadow : 0px 0px 5px dodgerblue;
16+ }
17+ input .CTAT--example [type = "checkbox" ],
18+ input .CTAT--example [type = "radio" ] {
19+ box-shadow : 0px 0px 5px 0px dodgerblue;
20+ }
21+ .CTATNumberLine--point .CTAT--example {
22+ fill : dodgerblue;
23+ }
24+
25+
26+
27+ .CTAT--AL_start { /* general example highlighting */
28+ box-shadow : 0px 0px 15px 5px darkcyan;
29+ }
30+ textarea .CTAT--AL_start ,
31+ input .CTAT--AL_start [type = "text" ] { /* font color change for text components */
32+ box-shadow : none;
33+ color : darkcyan;
34+ }
35+ label .CTAT--AL_start { /* labels for checkboxes and radio buttons */
36+ box-shadow : none;
37+ text-shadow : 0px 0px 5px darkcyan;
38+ }
39+ input .CTAT--AL_start [type = "checkbox" ],
40+ input .CTAT--AL_start [type = "radio" ] {
41+ box-shadow : 0px 0px 5px 0px darkcyan;
42+ }
43+ .CTATNumberLine--point .CTAT--AL_start {
44+ fill : darkcyan;
45+ }
46+
47+
48+ /* -----------SASS CODE ----------------------------
49+ // colors
50+ $colors: darkorchid, #feb236, #d64161, #ff7b25, #a2b9bc, #b2ad7f, #878f99, #6b5b95;
51+
52+ @for $i from 1 through length($colors) {
53+ $c: nth($colors, $i);
54+ .CTAT--AL_highlight#{$i} {
55+ box-shadow: 0px 0px 15px 5px $c;
56+ }
57+ label.CTAT--AL_highlight#{$i} {
58+ box-shadow: none;
59+ text-shadow: 0px 0px 5px $c;
60+ }
61+ textarea.CTAT--AL_highlight#{$i},
62+ input.CTAT--AL_highlight#{$i}[type="text"] {
63+ -webkit-appearance: none;
64+ -moz-appearance: none;
65+ color: $c;
66+ }
67+ input.CTAT--AL_highlight#{$i}[type="checkbox"],
68+ input.CTAT--AL_highlight#{$i}[type="radio"] {
69+ box-shadow: 0px 0px 5px 0px $c;
70+ }
71+
72+ //.highlight#{$i} {
73+ // background: $c;
74+ //}
75+
76+ // ... do something fancy with $c
77+ }
78+ -----------SASS CODE END-------------------------
79+ */
80+
81+
82+ .CTAT--AL_highlight1 {
83+ box-shadow : 0px 0px 15px 5px darkorchid;
84+ }
85+
86+ label .CTAT--AL_highlight1 {
87+ box-shadow : 0px 0px 15px 5px darkorchid;
88+ text-shadow : 0px 0px 5px darkorchid;
89+ }
90+
91+ textarea .CTAT--AL_highlight1 ,
92+ input .CTAT--AL_highlight1 [type = "text" ] {
93+ box-shadow : 0px 0px 15px 5px darkorchid;
94+ -webkit-appearance : none;
95+ -moz-appearance : none;
96+ color : darkorchid;
97+ }
98+
99+ input .CTAT--AL_highlight1 [type = "checkbox" ],
100+ input .CTAT--AL_highlight1 [type = "radio" ] {
101+ box-shadow : 0px 0px 5px 0px darkorchid;
102+ }
103+
104+ .CTAT--AL_highlight2 {
105+ box-shadow : 0px 0px 2px 2px # ff884d ;
106+ }
107+
108+ label .CTAT--AL_highlight2 {
109+ box-shadow : 0px 0px 2px 2px # ff884d ;
110+ text-shadow : 0px 0px 5px # ff884d ;
111+ }
112+
113+ textarea .CTAT--AL_highlight2 ,
114+ input .CTAT--AL_highlight2 [type = "text" ] {
115+ box-shadow : 0px 0px 2px 2px # ff884d ;
116+ -webkit-appearance : none;
117+ -moz-appearance : none;
118+ color : # ff884d ;
119+ }
120+
121+ input .CTAT--AL_highlight2 [type = "checkbox" ],
122+ input .CTAT--AL_highlight2 [type = "radio" ] {
123+ box-shadow : 0px 0px 2px 0px # ff884d ;
124+ }
125+
126+ .CTAT--AL_highlight3 {
127+ box-shadow : 0px 0px 2px 2px # 52d0e0 ;
128+ }
129+
130+ label .CTAT--AL_highlight3 {
131+ box-shadow : 0px 0px 2px 2px # 52d0e0 ;
132+ text-shadow : 0px 0px 5px # 52d0e0 ;
133+ }
134+
135+ textarea .CTAT--AL_highlight3 ,
136+ input .CTAT--AL_highlight3 [type = "text" ] {
137+ box-shadow : 0px 0px 2px 2px # 52d0e0 ;
138+ -webkit-appearance : none;
139+ -moz-appearance : none;
140+ color : # 52d0e0 ;
141+ }
142+
143+ input .CTAT--AL_highlight3 [type = "checkbox" ],
144+ input .CTAT--AL_highlight3 [type = "radio" ] {
145+ box-shadow : 0px 0px 2px 0px # 52d0e0 ;
146+ }
147+
148+ .CTAT--AL_highlight4 {
149+ box-shadow : 0px 0px 2px 2px # feb201 ;
150+ }
151+
152+ label .CTAT--AL_highlight4 {
153+ box-shadow : 0px 0px 2px 2px # feb201 ;
154+ text-shadow : 0px 0px 5px # feb201 ;
155+ }
156+
157+ textarea .CTAT--AL_highlight4 ,
158+ input .CTAT--AL_highlight4 [type = "text" ] {
159+ box-shadow : 0px 0px 2px 2px # feb201 ;
160+ -webkit-appearance : none;
161+ -moz-appearance : none;
162+ color : # feb201 ;
163+ }
164+
165+ input .CTAT--AL_highlight4 [type = "checkbox" ],
166+ input .CTAT--AL_highlight4 [type = "radio" ] {
167+ box-shadow : 0px 0px 2px 0px # feb201 ;
168+ }
169+
170+ .CTAT--AL_highlight5 {
171+ box-shadow : 0px 0px 2px 2px # e44161 ;
172+ }
173+
174+ label .CTAT--AL_highlight5 {
175+ box-shadow : 0px 0px 2px 2px # e44161 ;
176+ text-shadow : 0px 0px 5px # e44161 ;
177+ }
178+
179+ textarea .CTAT--AL_highlight5 ,
180+ input .CTAT--AL_highlight5 [type = "text" ] {
181+ box-shadow : 0px 0px 2px 2px # e44161 ;
182+ -webkit-appearance : none;
183+ -moz-appearance : none;
184+ color : # e44161 ;
185+ }
186+
187+ input .CTAT--AL_highlight5 [type = "checkbox" ],
188+ input .CTAT--AL_highlight5 [type = "radio" ] {
189+ box-shadow : 0px 0px 2px 0px # e44161 ;
190+ }
191+
192+ .CTAT--AL_highlight6 {
193+ box-shadow : 0px 0px 2px 2px # ed3eea ;
194+ }
195+
196+ label .CTAT--AL_highlight6 {
197+ box-shadow : 0px 0px 2px 2px # ed3eea ;
198+ text-shadow : 0px 0px 5px # ed3eea ;
199+ }
200+
201+ textarea .CTAT--AL_highlight6 ,
202+ input .CTAT--AL_highlight6 [type = "text" ] {
203+ box-shadow : 0px 0px 2px 2px # ed3eea ;
204+ -webkit-appearance : none;
205+ -moz-appearance : none;
206+ color : # ed3eea ;
207+ }
208+
209+ input .CTAT--AL_highlight6 [type = "checkbox" ],
210+ input .CTAT--AL_highlight6 [type = "radio" ] {
211+ box-shadow : 0px 0px 2px 0px # ed3eea ;
212+ }
213+
214+ .CTAT--AL_highlight7 {
215+ box-shadow : 0px 0px 2px 2px # 2f85ee ;
216+ }
217+
218+ label .CTAT--AL_highlight7 {
219+ box-shadow : 0px 0px 2px 2px # 2f85ee ;
220+ text-shadow : 0px 0px 5px # 2f85ee ;
221+ }
222+
223+ textarea .CTAT--AL_highlight7 ,
224+ input .CTAT--AL_highlight7 [type = "text" ] {
225+ box-shadow : 0px 0px 2px 2px # 2f85ee ;
226+ -webkit-appearance : none;
227+ -moz-appearance : none;
228+ color : # 2f85ee ;
229+ }
230+
231+ input .CTAT--AL_highlight7 [type = "checkbox" ],
232+ input .CTAT--AL_highlight7 [type = "radio" ] {
233+ box-shadow : 0px 0px 2px 0px # 2f85ee ;
234+ }
235+
236+ .CTAT--AL_highlight8 {
237+ box-shadow : 0px 0px 2px 2px # 562ac6 ;
238+ }
239+
240+ label .CTAT--AL_highlight8 {
241+ box-shadow : 0px 0px 2px 2px # 562ac6 ;
242+ text-shadow : 0px 0px 5px # 562ac6 ;
243+ }
244+
245+ textarea .CTAT--AL_highlight8 ,
246+ input .CTAT--AL_highlight8 [type = "text" ] {
247+ box-shadow : 0px 0px 2px 2px # 562ac6 ;
248+ -webkit-appearance : none;
249+ -moz-appearance : none;
250+ color : # 562ac6 ;
251+ }
252+
253+ input .CTAT--AL_highlight8 [type = "checkbox" ],
254+ input .CTAT--AL_highlight8 [type = "radio" ] {
255+ box-shadow : 0px 0px 2px 0px # 562ac6 ;
256+ }
257+
258+ .CTAT--AL_highlight9 {
259+ box-shadow : 0px 0px 2px 2px # cc24cc ;
260+ }
261+
262+ label .CTAT--AL_highlight9 {
263+ box-shadow : 0px 0px 2px 2px # cc24cc ;
264+ text-shadow : 0px 0px 5px # cc24cc ;
265+ }
266+
267+ textarea .CTAT--AL_highlight9 ,
268+ input .CTAT--AL_highlight9 [type = "text" ] {
269+ box-shadow : 0px 0px 2px 2px # cc24cc ;
270+ -webkit-appearance : none;
271+ -moz-appearance : none;
272+ color : # cc24cc ;
273+ }
274+
275+ input .CTAT--AL_highlight9 [type = "checkbox" ],
276+ input .CTAT--AL_highlight9 [type = "radio" ] {
277+ box-shadow : 0px 0px 2px 0px # cc24cc ;
278+ }
279+
280+
281+
282+ .hidden {
283+ visibility : hidden;
284+ pointer-events : none;
285+ }
286+
287+ .nools_button {
288+ position : relative;
289+ top : 100px ;
290+ width : 200px ;
291+ font-size : 20px ;
292+ background-color : # 999999 ;
293+ pointer-events : auto;
294+ }
295+
296+ .startstate_button {
297+ position : relative;
298+ width : 200px ;
299+ font-size : 20px ;
300+ background-color : # 4CAF50 ;
301+ pointer-events : auto;
302+ }
303+
304+ .yes_button {
305+ width : 80px ;
306+ font-size : 35px ;
307+ background-color : # 4CAF50 ;
308+ pointer-events : auto;
309+ }
310+
311+ .no_button {
312+ width : 80px ;
313+ font-size : 35px ;
314+ background-color : # f44336 ;
315+ pointer-events : auto;
316+ }
317+
318+ .next_button {
319+ width : 100px ;
320+ font-size : 40px ;
321+ background-color : # 4CAFFF ;
322+ pointer-events : auto;
323+ }
324+
325+ .prompt_text {
326+ /*display:flex;*/
327+ text-align : center;
328+ font-size : 25px ;
329+ }
0 commit comments