_theme.scss

/*
 * This file is part of ARSnova Mobile.
 * Copyright (C) 2011-2012 Christian Thomas Weber
 * Copyright (C) 2012-2015 The ARSnova Team
 *
 * 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/>.
 */

$background-color: $background;
$label-font-color: $thm-grey;
$label-font-weight: normal;
$label-text-shadow: none;

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

$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;
$toolbar-title-txt-color: #fff;
$toolbar-speaker-title-color: #fff;
$toolbar-button-bg-color: $thm-green;
$toolbar-button-txt-color: #fff;
$toolbar-back-button-bg-color: #fff;
$toolbar-back-button-txt-color: $thm-grey;
$toolbar-toogleCorrect-button-active-color: $thm-green;
$toolbar-toogleCorrect-button-inactive-color: $thm-lightgrey;

@mixin toolbar-title-config {
	@include label-config;
	color: $toolbar-title-txt-color;
}

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

.iconBtn {
	background: white;
	color: $thm-grey !important;

	&.x-button-pressing {
		background-image: none;
		background-color: #c4c4c4;
	}
}

.x-button .courseIcon,
.answerListButton .x-button-label,
.forwardListButton .x-button-label,
.standardListButton .x-button-label {
	color: $thm-grey;

	&.thm-green {
		color: $thm-green !important;
	}
}

.thumbnail-image .wrapper {
	width: auto !important;
	height: auto !important;
	display: inline-block;
	position: relative;
	margin: 8px;
	transition: 0.25s;
	-webkit-transition: 0.25s;
	-o-transition: 0.25s;
	-moz-transition: 0.25s;
	-ms-transition: 0.25s;
}

.thumbnail-image .wrapper:hover {
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-o-transition: scale(1.1);
	-moz-transition: scale(1.1);
	-ms-transition: scale(1.1);
}

.thumbnail-image .wrapper-list {
	width: 100%;
	height: 100%;
	display:inline-block;
	position: relative;
	margin-bottom: 25px;
	overflow:hidden;
}

.thumbnail-image img {
	display: inline-block;
	border: 10px solid #fff;
	border-bottom-width: 30px;
}

.thumbnail-image .image-list {
	display:inline;
	position:relative;
	float:left;
	margin-right:10px;
	border-bottom-width: 10px;
	border-right-width: 10000px;
}

.thumbnail-image span {
	display: inline-block;
	width: 100%;
	position: absolute;
	text-align: center;
	bottom: 9px;
	left: 0;
	top: auto;
	padding-left: 10px;
	padding-right: 15px;
	right: auto;
	overflow: hidden;
	box-sizing: border-box;
	text-overflow: ellipsis;
}

.thumbnail-image span.answer-subject {
	display: inline-block;
	text-align: center;
	font-weight:bold;
	font-size:32px;
	position: absolute;
	top:50%;
	padding: 0;
	width: auto !important;
	height: auto !important;
	text-overflow: ellipsis;
	max-width: 350px;
	margin-top: -80px;
	margin-left: 280px;
	color: $thm-grey;
}

.thumbnail-image span.answer-text {
	display: inline-block;
	text-align: left;
	width: auto !important;
	height: auto !important;
	top: 50%;
	word-wrap: break-word;
	font-size: 20px;
	margin-top: -20px;
	max-width: 350px;
	max-height: 90px;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 280px;
	color: $thm-grey;
}

.gallery-dataview {

}

.gallery-dataview div {
	background-color: #e0e0e0 !important;
}

.x-segmentedbutton .x-button-normal {
	background-image: none !important;
}

.myCoursesList {
	.x-inner,
	.x-scroll-container {
		background-color: #E0E0E0;
	}
}

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

.gravure {
	text-shadow: none !important;
}

.x-fullscreen, .x-layout-card-item {
	background-color: $background;
}

.x-msgbox .x-panel-inner {
	background: none;
}

.x-label {
	color: $label-font-color;
}

.x-form-label {
	color: $label-font-color;
	background-color: white;
	border-right: 1px solid $background;

	&.checkItem {
		border-right: none;
	}

	& span {
		font-weight: normal;
	}
}

.x-form-fieldset .x-field {
	border-bottom: 1px solid $background;
}

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

	.x-innerhtml {
		color: $thm-grey !important;
	}
}

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

.disableDefault {
	.thm-grey, .x-form-label span {
		color: $thm-grey !important;
		-webkit-text-fill-color: initial !important;
	}
}

.x-msgbox {
	color: $thm-grey;
	box-shadow: 0 0 8px 0;
	background: $background;
	border-color: $thm-grey;
	max-width: 21em;

	.x-title,
	.x-msgbox-text {
		color: $thm-grey;
		text-shadow: none;
	}

	.x-msgbox-buttons .x-button-normal span {
		opacity: 1;
	}
}

.x-button {
	&.x-button-confirm {
		@include button-decoration-config(
			$button-confirm-bg-color !important,
			$button-confirm-txt-color !important
		);
	}

	&.x-button-action,
	&.x-button-filebrowse {
		@include button-decoration-config(
			$button-action-bg-color !important,
			$button-action-txt-color !important
		);

		&.x-button-pressed,
		&.x-button-pressing {
			background-color: $button-action-active-bg-color !important;
		}
	}

	&.x-button-decline {
		@include button-decoration-config(
			$button-decline-bg-color !important,
			$button-decline-txt-color !important
		);
	}

	.x-button-label {
		@include label-config;
	}

	&.isInactive .x-button-label {
		color: $thm-red !important;
	}
}

.x-segmentedbutton .x-button.x-button-action {
	border: none !important;
	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;
}

.x-toolbar-light {
	.x-title {
		@include toolbar-title-config;
	}

	&.speakerTitleText .x-title {
		color: $toolbar-speaker-title-color;
	}

	.x-button-normal {
		@include toolbar-button-config(
			$toolbar-button-bg-color,
			$toolbar-button-txt-color
		);

		&.toggleCorrectButton {
			@include toolbar-button-config(
				$toolbar-toogleCorrect-button-inactive-color,
				$toolbar-button-txt-color
			);

			&.x-button-pressed,
			&.x-button-pressing {
				@include toolbar-button-config(
					$toolbar-toogleCorrect-button-active-color,
					$toolbar-button-txt-color
				);
			}
		}
	}

	.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
			);
		}
	}

	.x-button-back,
	.x-button.x-button-back:after,
	.x-button.x-button-back:before,
	.x-button.x-button-forward:after,
	.x-button.x-button-forward:before,
	.x-field-select .x-input-text.x-button-back:after,
	.x-field-select .x-input-text.x-button-forward:after {
		@include toolbar-button-config(
			$toolbar-back-button-bg-color,
			$toolbar-back-button-txt-color
		);

		/* 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
			);
		}
	}

	.x-button, .x-button-back {
		.x-button-label {
			@include label-config;
		}
	}
}

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

	.voteIcons:before,
	.x-button-icon:before {
		color: #fff;
	}

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

	.x-tab-active {
		box-shadow: none;
		background-image: none !important;
		background-color: transparent;

		.x-button-icon {
			&:before,
			&.voteIcons.icon-bullhorn:before {
				color: $thm-green;
			}

			&.voteIcons:before {
				color: $smiley-color;
			}
		}
	}
}

.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;
	}

	.x-list-item.x-item-selected.x-list-item-tpl,
	.x-list-item.x-item-selected .x-dock-horizontal {
		border-color: white;
		background-image: none;
		background-color: $thm-orange;

		.search-item span {
			color: white;
		}
	}
}

.x-form-fieldset-title {
	font-weight: normal;
}

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

	&.x-carousel-indicator-active {
		background-color: $thm-green;
	}
}

.isInactive {
	color: $thm-red;
}