_theme.scss 9.3 KB
Newer Older
1
2
3
/*
 * This file is part of ARSnova Mobile.
 * Copyright (C) 2011-2012 Christian Thomas Weber
Daniel Gerhardt's avatar
Daniel Gerhardt committed
4
 * Copyright (C) 2012-2015 The ARSnova Team
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 *
 * ARSnova Mobile is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * ARSnova Mobile is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with ARSnova Mobile.  If not, see <http://www.gnu.org/licenses/>.
 */

20
$background-color: $background;
21
22
23
24
25
26
$label-font-color: $thm-grey;
$label-font-weight: normal;
$label-text-shadow: none;

@mixin label-config {
	font-weight: $label-font-weight;
27
	text-shadow: $label-text-shadow !important;
28
}
29

30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
$button-confirm-bg-color: $thm-green;
$button-confirm-txt-color: #fff;
$button-action-bg-color: $thm-grey;
$button-action-active-bg-color: $thm-lightgrey;
$button-action-txt-color: #fff;
$button-decline-bg-color: $thm-red;
$button-decline-txt-color: #fff;

@mixin button-decoration-config($bgcolor, $txtcolor) {
	color: $txtcolor;
	background: $bgcolor;
	border: none !important;
	background-image: none !important;
}

$toolbar-bg-color: $thm-grey;
46
$toolbar-title-txt-color: #fff;
47
$toolbar-speaker-title-color: #fff;
48
49
50
51
$toolbar-button-bg-color: $thm-green;
$toolbar-button-txt-color: #fff;
$toolbar-back-button-bg-color: #fff;
$toolbar-back-button-txt-color: $thm-grey;
52
53
$toolbar-toogleCorrect-button-active-color: $thm-green;
$toolbar-toogleCorrect-button-inactive-color: $thm-lightgrey;
54

55
@mixin toolbar-title-config {
56
	@include label-config;
57
58
59
	color: $toolbar-title-txt-color;
}

60
61
62
63
@mixin toolbar-button-config($bgcolor, $txtcolor) {
	color: $txtcolor;
	background: $bgcolor !important;
	border: 1px solid $bgcolor !important;
64
65
}

66
.iconBtn {
67
	background: white;
68
	color: $thm-grey !important;
69

70
71
72
73
	&.x-button-pressing {
		background-image: none;
		background-color: #c4c4c4;
	}
74
75
}

76
.x-button .courseIcon,
77
78
.answerListButton .x-button-label,
.forwardListButton .x-button-label,
79
.standardListButton .x-button-label {
80
	color: $thm-grey;
81

82
83
84
	&.thm-green {
		color: $thm-green !important;
	}
85
86
}

Dennis Schönhof's avatar
Dennis Schönhof committed
87
88
89
90
91
.thumbnail-image .wrapper {
	width: auto !important;
	height: auto !important;
	display: inline-block;
	position: relative;
92
	margin: 8px;
93
94
95
96
97
	transition: 0.25s;
	-webkit-transition: 0.25s;
	-o-transition: 0.25s;
	-moz-transition: 0.25s;
	-ms-transition: 0.25s;
98
99
100
}

.thumbnail-image .wrapper:hover {
101
102
103
104
105
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-o-transition: scale(1.1);
	-moz-transition: scale(1.1);
	-ms-transition: scale(1.1);
Dennis Schönhof's avatar
Dennis Schönhof committed
106
107
}

108
109
110
111
112
113
114
115
116
.thumbnail-image .wrapper-list {
	width: 100%;
	height: 100%;
	display:inline-block;
	position: relative;
	margin-bottom: 25px;
	overflow:hidden;
}

Dennis Schönhof's avatar
Dennis Schönhof committed
117
118
119
120
121
122
.thumbnail-image img {
	display: inline-block;
	border: 10px solid #fff;
	border-bottom-width: 30px;
}

123
124
125
126
127
128
129
130
131
.thumbnail-image .image-list {
	display:inline;
	position:relative;
	float:left;
	margin-right:10px;
	border-bottom-width: 10px;
	border-right-width: 10000px;
}

Dennis Schönhof's avatar
Dennis Schönhof committed
132
133
134
135
136
137
138
139
.thumbnail-image span {
	display: inline-block;
	width: 100%;
	position: absolute;
	text-align: center;
	bottom: 9px;
	left: 0;
	top: auto;
140
141
	padding-left: 10px;
	padding-right: 15px;
Dennis Schönhof's avatar
Dennis Schönhof committed
142
143
	right: auto;
	overflow: hidden;
144
145
	box-sizing: border-box;
	text-overflow: ellipsis;
Dennis Schönhof's avatar
Dennis Schönhof committed
146
147
}

148
.thumbnail-image span.answer-subject {
149
	display: inline-block;
150
	text-align: center;
151
	font-weight:bold;
152
153
154
	font-size:32px;
	position: absolute;
	top:50%;
155
	padding: 0;
156
157
	width: auto !important;
	height: auto !important;
158
159
160
161
	text-overflow: ellipsis;
	max-width: 350px;
	margin-top: -80px;
	margin-left: 280px;
162
	color: $thm-grey;
163
164
}

165
.thumbnail-image span.answer-text {
166
167
	display: inline-block;
	text-align: left;
168
169
170
	width: auto !important;
	height: auto !important;
	top: 50%;
171
	word-wrap: break-word;
172
	font-size: 20px;
Björn's avatar
Björn committed
173
	margin-top: -20px;
174
	max-width: 350px;
175
	max-height: 90px;
176
177
178
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 280px;
179
	color: $thm-grey;
180
181
}

182
183
184
185
.gallery-dataview {

}

Dennis Schönhof's avatar
Dennis Schönhof committed
186
187
188
189
.gallery-dataview div {
	background-color: #e0e0e0 !important;
}

190
191
192
193
.x-segmentedbutton .x-button-normal {
	background-image: none !important;
}

194
195
196
197
198
199
200
.myCoursesList {
	.x-inner,
	.x-scroll-container {
		background-color: #E0E0E0;
	}
}

201
202
203
204
.forwardListButton, .standardListButton {
	border: 1px solid $background !important;
}

205
206
207
208
.gravure {
	text-shadow: none !important;
}

209
.x-fullscreen, .x-layout-card-item {
210
	background-color: $background;
211
212
}

Andreas Gärtner's avatar
Andreas Gärtner committed
213
214
215
216
.x-msgbox .x-panel-inner {
	background: none;
}

217
218
219
220
.x-label {
	color: $label-font-color;
}

221
.x-form-label {
Andreas Gärtner's avatar
Andreas Gärtner committed
222
	color: $label-font-color;
223
224
	background-color: white;
	border-right: 1px solid $background;
225

226
227
228
	&.checkItem {
		border-right: none;
	}
229

230
	& span {
231
		font-weight: normal;
232
	}
233
234
}

235
.x-form-fieldset .x-field {
236
237
238
239
240
	border-bottom: 1px solid $background;
}

.x-list-item, .x-form-fieldset-title, .x-label, .roundedBox, .centerText {
	text-shadow: none !important;
241

242
243
244
	.x-innerhtml {
		color: $thm-grey !important;
	}
245
}
246

247
248
249
250
251
.x-field-input .x-input-el {
	color: $thm-grey !important;
	-webkit-text-fill-color: initial !important;
}

252
253
254
.disableDefault {
	.thm-grey, .x-form-label span {
		color: $thm-grey !important;
255
		-webkit-text-fill-color: initial !important;
256
257
258
259
	}
}

.x-msgbox {
260
261
262
263
	color: $thm-grey;
	box-shadow: 0 0 8px 0;
	background: $background;
	border-color: $thm-grey;
264
	max-width: 21em;
265
266

	.x-title,
267
268
269
270
	.x-msgbox-text {
		color: $thm-grey;
		text-shadow: none;
	}
271

272
273
274
	.x-msgbox-buttons .x-button-normal span {
		opacity: 1;
	}
275
276
}

277
278
279
.x-button {
	&.x-button-confirm {
		@include button-decoration-config(
280
			$button-confirm-bg-color !important,
281
282
283
			$button-confirm-txt-color !important
		);
	}
284

285
286
287
	&.x-button-action,
	&.x-button-filebrowse {
		@include button-decoration-config(
288
			$button-action-bg-color !important,
289
290
			$button-action-txt-color !important
		);
291

292
293
294
295
296
		&.x-button-pressed,
		&.x-button-pressing {
			background-color: $button-action-active-bg-color !important;
		}
	}
297

298
299
	&.x-button-decline {
		@include button-decoration-config(
300
			$button-decline-bg-color !important,
301
302
303
			$button-decline-txt-color !important
		);
	}
304

305
306
307
	.x-button-label {
		@include label-config;
	}
308

309
310
311
	&.isInactive .x-button-label {
		color: $thm-red !important;
	}
312
313
314
}

.x-segmentedbutton .x-button.x-button-action {
315
	border: none !important;
316
317
318
319
320
321
322
323
	border-right: thin solid $background-color !important;
}

.x-tabbar-dark,
.x-toolbar-light {
	border: none !important;
	text-shadow: none !important;
	background: $toolbar-bg-color !important;
324
325
}

326
327
.x-toolbar-light {
	.x-title {
328
		@include toolbar-title-config;
329
	}
330

331
332
333
	&.speakerTitleText .x-title {
		color: $toolbar-speaker-title-color;
	}
334

335
	.x-button-normal {
336
		@include toolbar-button-config(
337
			$toolbar-button-bg-color,
338
339
			$toolbar-button-txt-color
		);
340

341
342
		&.toggleCorrectButton {
			@include toolbar-button-config(
343
				$toolbar-toogleCorrect-button-inactive-color,
344
345
				$toolbar-button-txt-color
			);
346

347
348
349
			&.x-button-pressed,
			&.x-button-pressing {
				@include toolbar-button-config(
350
					$toolbar-toogleCorrect-button-active-color,
351
352
353
354
					$toolbar-button-txt-color
				);
			}
		}
355
	}
356

357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
	.x-button,
	.x-button:after,
	.x-button:before {
		&.x-button-pressed,
		&.x-button-pressing,
		&.x-button-pressed:after,
		&.x-button-pressed:before,
		&.x-button-pressing:after,
		&.x-button-pressing:before {
			@include toolbar-button-config(
				$button-action-active-bg-color,
				$toolbar-button-txt-color
			);
		}
	}
372

373
	.x-button-back,
374
	.x-button.x-button-back:after,
375
	.x-button.x-button-back:before,
376
	.x-button.x-button-forward:after,
377
378
	.x-button.x-button-forward:before,
	.x-field-select .x-input-text.x-button-back:after,
379
	.x-field-select .x-input-text.x-button-forward:after {
380
		@include toolbar-button-config(
381
			$toolbar-back-button-bg-color,
382
383
			$toolbar-back-button-txt-color
		);
384

385
386
387
388
389
390
391
392
393
394
395
396
		/* todo: remove after css cleanup */
		&.x-button-pressed,
		&.x-button-pressing,
		&.x-button-pressed:after,
		&.x-button-pressed:before,
		&.x-button-pressing:after,
		&.x-button-pressing:before {
			@include toolbar-button-config(
				$button-action-active-bg-color,
				$toolbar-button-txt-color
			);
		}
397
	}
398

399
400
	.x-button, .x-button-back {
		.x-button-label {
401
			@include label-config;
402
403
404
405
406
407
408
409
		}
	}
}

.x-tabbar-dark.x-docked-bottom {
	.x-tab {
		text-shadow: none !important;
	}
410

411
412
413
414
	.voteIcons:before,
	.x-button-icon:before {
		color: #fff;
	}
415

416
417
418
	.x-tab-pressed .x-button-icon:before {
		color: $button-action-active-bg-color !important;
	}
419

420
421
422
423
	.x-tab-active {
		box-shadow: none;
		background-image: none !important;
		background-color: transparent;
424

425
426
		.x-button-icon {
			&:before,
427
			&.voteIcons.icon-bullhorn:before {
428
429
				color: $thm-green;
			}
430

431
432
433
434
435
			&.voteIcons:before {
				color: $smiley-color;
			}
		}
	}
436
437
}

438
439
440
441
442
443
444
445
446
447
.x-list,
.x-list-normal {
	.x-list-header {
		color: white !important;
		border: none !important;
		text-shadow: none !important;
		background-color: $thm-lightgrey !important;
		background-image: none !important;
		-webkit-box-shadow: none !important;
	}
448

449
450
	.x-list-item.x-item-selected.x-list-item-tpl,
	.x-list-item.x-item-selected .x-dock-horizontal {
451
		border-color: white;
452
		background-image: none;
453
		background-color: $thm-orange;
454

455
456
457
		.search-item span {
			color: white;
		}
458
	}
459
}
460

461
462
463
464
.x-form-fieldset-title {
	font-weight: normal;
}

465
466
.x-carousel-indicator span {
	background-color: $thm-grey;
467

Andreas Gärtner's avatar
Andreas Gärtner committed
468
469
470
	&.x-carousel-indicator-active {
		background-color: $thm-green;
	}
471
472
473
474
}

.isInactive {
	color: $thm-red;
475
}