iobroker.fully-tablet-control/admin/style.css

fully-tablet-control

/* You can delete those if you want. I just found them very helpful */
* {
	box-sizing: border-box;
	}

.m {
	/* Don't cut off dropdowns! */
	overflow: initial;
	}

/* Add your styles here */
/* Tabs section */
.tabs {
	height: auto !important;
	}

/*!* Table header *!*/
table.table-values th.header {
	background-color: #2196f3;
	font-size: 90%;
	text-align: center;
	line-height: 1em;
	padding: 6px 2px;
	border-radius: 5px;
	text-align-last: center;
	width: auto;
	}

div.table-values-div {
	padding: 6px 2px;
	text-align-last: center;
	}

.m .btn {
	border-radius: 20px !important;
	}

.m #dialog-select-member .modal-content .grid-main-wob-div {
	height: calc(100% - 140px);
	}

.values-input {
	text-align: center !important;
	font-size: large !important;
	}

.tabletMessage {
	font-size: 18px !important;
	text-align: right;
	left: -100px;
	position: relative;
	}

.intervalField {
	width: 125px !important;
	text-align: center !important;
	}

.m .modal-footer {
	width: calc(100% - 20px) !important;
	}

.m .row .col.s6 {
	width: 80% !important;
	}

.select {
	text-align-last: center;
	}

.add-btn {
	margin-right: auto;
	}

/*Login sector*/

.devicesLogin {
	bottom: 30px;
	}

/*#############

/*brightness sector*/

.selectScreenOn {
	text-align-last: center !important;
	width: 320px !important;
	position: relative;
	top: -25px;
	margin-bottom: 0;
	}

.sub-title-brightness {
	padding: 0.5rem;
	background: #2196f3;
	color: white;
	border-radius: 10px;
	text-align: center;
	font-size: x-large;
	position: relative;
	top: -50px;
	margin-bottom: 0;
	}

.sub-title-TimeControl {
	background: #2196f3;
	color: white;
	border-radius: 10px;
	text-align: center;
	font-size: x-large;
	position: relative;
	top: -90px;
	margin-bottom: 0;
	}

.sub-title-table {
	background: #2196f3;
	color: white;
	border-radius: 10px;
	text-align: center;
	font-size: x-large;
	position: relative;
	top: -130px;
	margin-bottom: 0;
	}

.briTables {
	top: -120px;
	margin-bottom: 0;
	}

.AstroBrightness {
	text-align-last: center !important;
	width: 300px !important;
	top: -90px;
	margin-right: 100px;
	}

.selectBrightness_time {
	text-align-last: center !important;
	width: 150px !important;
	top: -90px;
	margin-right: 50px;
	}

.selectBrightness_checkInterval {
	text-align-last: center !important;
	width: 150px !important;
	top: -50px;
	margin-right: 100px;
	}

.selectBrightness_on {
	text-align-last: center !important;
	width: 400px !important;
	position: relative;
	top: -50px;
	margin-bottom: 0;
	margin-right: 100px;
	}

.selectAstroBrightness {
	text-align-last: center !important;
	width: 150px !important;
	position: relative;
	top: -50px;
	margin-bottom: 0;
	margin-right: 100px;
	}

.selectBrightness_label {
	font-size: medium !important;
	}


/*######################*/

/*vis sector*/

.visSelect {
	text-align-last: center !important;
	width: 300px !important;
	}

.Select-text {
	top: 45px !important;
	}

/*#########################*/

/*screenSaver sector*/

.selectScreen {
	width: 300px !important;
	text-align-last: center !important;

	}

.screenSaver {
	bottom: 52px !important;;
	}

.selectScreenSaver {
	width: 300px !important;
	text-align-last: center !important;
	margin-top: 2rem !important;
	}

.screenSaverManual_label {
	top: -40px !important;
	left: .75em !important;
	right: -.75em;
	color: red !important;
	}

/*#########################*/

/*telegram sector*/

.selectTelegram {
	width: 300px !important;;
	text-align-last: center !important;;

	}

.telegram {
	bottom: 52px !important;;
	}

.centerTable {
	margin-left: 25% !important;
	width: 50% !important;
	}

.addUser {
	margin-left: 25% !important;
	width: 50% !important;
	}

/*Alert*/
.TelegramAdapter, .TelegramUser {
	font-size: 70px !important;
	color: #ff0000;
	text-align: center;
	top: 60px;
	position: absolute;
	}

.adapter_offline {
	width: 1000px;
	color: red;
	}

#adapter_offline {
	font-size: 70px !important;
	color: #ff0000;
	text-align: center;
	top: 60px;
	position: absolute;
	}

/*multiple-select*/
.multiple-select-dropdown li span {
	pointer-events: none;
	}

/*#########################*/

/*motion sector*/

.selectMotion {
	width: 300px !important;;
	text-align-last: center !important;;

	}

.motion {
	bottom: 52px !important;;
	}

/*#########################*/

/*charger sector*/

.selectCharger {
	width: 300px !important;
	text-align-last: center !important;;

	}

.charger {
	bottom: 52px !important;;
	}

.checkbox {
	width: 60px;
	}

/*.m [type='checkbox'] + span:not(.lever) {*/
/*	position: relative;*/
/*	width: 60px;*/
/*	height: 30px;*/
/*	margin-left: 4px;*/
/*	margin-right: -4px;*/
/*	-webkit-appearance: none;*/
/*	background: linear-gradient(0deg, #640000, #ff0000);*/
/*	outline: none;*/
/*	border-radius: 11px;*/
/*	box-shadow: 0 0 2px #ff0000, 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0, 0, 0, 1), 0 5px 20px rgba(0, 0, 0, .5), inset 0 0 15px rgba(0, 0, 0, .2);*/
/*	transition: .4s;*/
/*	}*/

/*.m [type='checkbox']:checked + span:not(.lever) {*/
/*	background: linear-gradient(0deg, #006400, #0bea0b);*/
/*	box-shadow: 0 0 2px #0bea0b, 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0, 0, 0, 1), 0 5px 20px rgba(0, 0, 0, .5), inset 0 0 15px rgba(0, 0, 0, .2);*/
/*	transition: .4s;*/
/*	}*/

/*input[type=checkbox].filled-in + span:not(.lever):before {*/
/*	content: '';*/
/*	position: absolute;*/
/*	width: 30px;*/
/*	height: 25px;*/
/*	border-radius: 11px;*/
/*	top: 0;*/
/*	left: 0;*/
/*	background: linear-gradient(0deg, #000, #6b6b6b);*/
/*	box-shadow: 0 2px 5px rgba(0, 0, 0, .2);*/
/*	transform: scale(.98, .96);*/
/*	transition: .3s;*/
/*	}*/

/*input:checked[type=checkbox].filled-in + span:not(.lever):before {*/

/*	left: 30px;*/
/*	}*/

/*input[type=checkbox].filled-in + span:not(.lever):after {*/
/*	content: '';*/
/*	position: absolute;*/
/*	width: 4px;*/
/*	height: 4px;*/
/*	top: calc(50% - 2px);*/
/*	left: 20px;*/
/*	background: linear-gradient(0deg, #960000, #ff0000);*/
/*	box-shadow: 0 0 5px #cf0e0e, 0 0 15px #cf0e0e;*/
/*	border-radius: 50%;*/
/*	transition: .3s;*/
/*	}*/

/*input:checked[type=checkbox].filled-in + span:not(.lever):after {*/
/*	background: #0bea0b;*/
/*	left: 52px;*/
/*	box-shadow: 0 0 5px #00ff00, 0 0 15px #00ff00;*/
/*	}*/

#toast-container {
	bottom: 75%;
	left: 34%;
	top: initial;
	right: initial;
	position: absolute;
	background: #484848;
	color: #fff;
	padding: 1rem;
	border-radius: 5px;
	font-size: 2em;
	z-index: 999;
	}

.Load_ring {
	display: none;
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 150px;
	height: 150px;
	background: #404040;
	border: 3px solid #3c3c3c;
	border-radius: 50%;
	text-align: center;
	line-height: 150px;
	font-family: sans-serif;
	font-size: 20px;
	color: #fff000;
	letter-spacing: 4px;
	text-transform: uppercase;
	text-shadow: 0 0 10px #fff000;
	box-shadow: 0 0 20px rgba(0, 0, 0, .5);
	-webkit-animation: glow 2s ease-in-out infinite alternate;
	-moz-animation: glow 2s ease-in-out infinite alternate;
	animation: glow 2s ease-in-out infinite alternate;
	}

.Load_ring:before {
	content: '';
	position: absolute;
	top: -5px;
	left: -5px;
	width: 106%;
	height: 106%;
	border: 3px solid transparent;
	border-top: 3px solid #fff000;
	border-right: 3px solid #fff000;
	border-radius: 50%;
	animation: animateCircle 2s linear infinite;
	}

@-webkit-keyframes glow {
	from {
		text-shadow: 0 0 10px #ddcc43, 0 0 20px #e0c714, 0 0 30px #fff000, 0 0 40px #fff000;
		}
	}

@keyframes animateCircle {
	0% {
		transform: rotate(0deg);

		}
	100% {
		transform: rotate(360deg);
		}
	}

.warning_msg {
	color: red;
	-webkit-animation: Warn_glow 3s ease-in-out infinite alternate;
	-moz-animation: Warn_glow 3s ease-in-out infinite alternate;
	animation: Warn_glow 3s ease-in-out infinite alternate;
	}

.warn_icon {
	color: red;
	scale: 135%;
	}

.online_icon {
	color: #00ff00;
	scale: 135%;
	}

.online_msg {
	color: #00ff00;
	}

.offline_msg {
	color: #ff0000;
	}

.Disabled_icon {
	color: #acacac;
	scale: 135%;
	}

.Disabled_msg {
	color: #acacac;
	}

@-webkit-keyframes Warn_glow {
	from {
		text-shadow: 0 0 10px #dd0000, 0 0 20px #b80606, 0 0 30px #ff0000, 0 0 40px #ff0000;
		}
	}

#addDevice, #check, #chAddDevice, #bri_addDevice, #addScreensaver, #addUser, #addMotion, #addView {
	/*margin-top: -50px;*/
	box-shadow: 0 20px 19px 3px rgba(0, 0, 0, 0.14), 0 9px 23px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
	}

.Delete {
	width: 100px !important;
	}

.oid-select {
	left: 20px;

	}

.screensaverEnabled, .screensaverName {
	width: 200px !important;
	}

.screensaverMode {
	width: 250px !important;
	}

.screensaverMinute {
	width: 100px !important;
	}


/* checkbox style Section*/

.m [type='checkbox'] + span:not(.lever) {
	display: inline-block !important;
	position: relative !important;
	width: 60px !important;
	height: 30px !important;
	margin-left: 4px !important;
	margin-right: -4px !important;
	-webkit-appearance: none !important;
	background: linear-gradient(0deg, #640000, #ff0000) !important;
	outline: none !important;
	border-radius: 11px !important;
	box-shadow: 0 0 2px #ff0000, 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0, 0, 0, 1), 0 5px 20px rgba(0, 0, 0, .5), inset 0 0 15px rgba(0, 0, 0, .2) !important;
	transition: .4s !important;
	}

.m [type='checkbox']:checked + span:not(.lever) {
	background: linear-gradient(0deg, #006400, #0bea0b) !important;
	box-shadow: 0 0 2px #0bea0b, 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0, 0, 0, 1), 0 5px 20px rgba(0, 0, 0, .5), inset 0 0 15px rgba(0, 0, 0, .2) !important;
	transition: .4s !important;
	}

input[type=checkbox].filled-in + span:not(.lever):before {
	content: '' !important;
	position: absolute !important;
	width: 30px !important;
	height: 30px !important;
	border-radius: 11px !important;
	top: 0 !important;
	left: 0 !important;
	background: linear-gradient(0deg, #000, #6b6b6b) !important;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .2) !important;
	transform: scale(.98, .96) !important;
	transition: .3s !important;
	margin-top: -0.5px !important;
	border: 0 !important;
	z-index: 0 !important;
	}

input:checked[type=checkbox].filled-in + span:not(.lever):before {

	left: 29px !important;
	}

input[type=checkbox].filled-in + span:not(.lever):after {
	content: '' !important;
	position: absolute !important;
	width: 4px !important;
	height: 4px !important;
	top: calc(50% - 2px) !important;
	left: 20px !important;
	background: linear-gradient(0deg, #960000, #ff0000) !important;
	box-shadow: 0 0 5px #cf0e0e, 0 0 15px #cf0e0e !important;
	border-radius: 50% !important;
	transition: .3s !important;
	border: 0 !important;
	}

input:checked[type=checkbox].filled-in + span:not(.lever):after {
	background: #0bea0b !important;
	left: 52px !important;
	box-shadow: 0 0 5px #00ff00, 0 0 15px #00ff00 !important;
	}


/*auto_motionDetection section*/
.auto_motionDetection {

	margin-left:45%!important;
	margin-right:45%!important;
	}
.span_manual {
	margin-left:-15px;
	}
.span_automatic {
	margin-left:30px !important;
	}
.fontS {
	text-align-last: center !important;
	width:180px !important;
	}
#series_shot, #single_shot, #series_shot_safe, #imageTimeout {
	width:100px;
	text-align: center;
	}
.single_shot_label, .series_shot_label, .series_shot_label_safe, .imageTimeout {
	color: black !important;
	width:400px!important;
	margin-top: -20px !important;
	}
.imageTimeout {
	color: black !important;
	width:210px!important;
	margin-top: -20px !important;
	}
.MAX {
	color: red;
	}
.headerFont {
	font-size:1.5em !important;
	}