Layout almost done, but, something looks wrong Topic is solved

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: leecollings, htilburgs, robgeerts

Post Reply
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

Layout almost done, but, something looks wrong

Post by EdwinK »

I think I've seen something like this posted before, but can't find the post anymore.

As you can see, the data on these tiles (and others) isn't correctly displayed. They should be next to the icon, instead of under it.
data under icon
data under icon
Screen Shot 2018-10-08 at 20.52.07.png (180.36 KiB) Viewed 849 times
data next to icon
data next to icon
Screen Shot 2018-10-08 at 20.55.09.png (195.47 KiB) Viewed 849 times
This is another, older dashboard, but this is what I would like.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
Lokonli
Posts: 2291
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Layout almost done, but, something looks wrong

Post by Lokonli »

Which dashticz version are you using? master/beta?
You have a modified custom.css? Can you post it here as well?
Any change in creative.css?
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

Re: Layout almost done, but, something looks wrong

Post by EdwinK »

I think it's the beta of Dashticz

custom.css
Spoiler: show

Code: Select all

.col-xs-12.items {
   font-size: 15px;
}

.trash .state div.trashtoday	{ font-size: 20; font-weight: 3; margin-left: 20px; font-weight: bold; font-variant: small-caps;}
.trash .state div.trashtomorrow { font-size: 20px; font-weight: 2; margin-left: 20px; font-variant: small-caps;}
.trash .state div.trashrow		{ font-size: 20px; font-weight: 1; margin-left: 20px; font-variant: small-caps;}
.img.trashcan           		{ height: 50px; width: 50px; margin-left:0px; margin-top: 20px;}
div.col-icon { width: 100px !important; max-width: 100px !important;}

/* Background blocks */
.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-3,
.transbg.col-xs-4,
.transbg.col-xs-5,
.transbg.col-xs-6,
.transbg.col-xs-7,
.transbg.col-xs-8,
.transbg.col-xs-9,
.transbg.col-xs-10,
.transbg.col-xs-11,
.transbg.col-xs-12 {
	padding-top:15px;
	padding-bottom:15px;
	border: 3px solid rgba(255,255,255,0); /* border: 7px -> 3px - Smaller space between blocks */

	background-clip: padding-box;
	border-radius: 15px;				/* Round corners */ 
}

.fa.fa-male.on {color: green}
.fa.fa-male.off {color: red}
.fa-male:before{font-size: 36px;}
Not sure if I ever changed anything in creative.css (or I forgot about it)
Spoiler: show

Code: Select all


#loaderHolder{
	position:absolute;
	width:100%;
	height:100%;
	background-color:#000;
	z-index:99999;
	text-align:center;
}

.loader {
	margin:0 auto;
	border: 10px solid #f3f3f3;
	border-top: 10px transparent;
	border-bottom: 10px transparent;
	border-radius: 50%;
	width: 320px;
	height: 320px;
	animation: pulsate 2s ease-out;
	animation-iteration-count: infinite;
}
@keyframes pulsate {
	0% {transform: scale(.1); opacity: 0.0;}
	50% {opacity: 1;}
	100% {transform: scale(.8); opacity: 0;}
}
.loaderHeader {
	color: #FFF;
	font-size: 1.5em;
	margin-top:50px;
}

.swiper-container {
	width: 100%;
	height: 100%;
}
.swiper-container.edit{
	width:auto;
	float: right;
    width: calc(100% - 220px);
}
.swiper-wrapper {
	height: 100%;
}
.swiper-slide {
	background: #000;
}
.swiper-slide {
	height: auto !important;
	min-height: 100% !important;
}
.swiper-pagination-bullet-active {
	background-color:#fff !important;
}



.currencydown {
	background: rgba(132,22,12,0.7) !important;
	background-clip: padding-box;
	border: 7px solid rgba(255,255,255,0);
}


.currencyup {
	background: rgba(0, 128, 0, 0.7) !important;
	background-clip: padding-box;
	border: 7px solid rgba(255,255,255,0);
}

.fa-tv:before  {font-size:26px;}
.col-currency {font-size: 18px;text-align:right;}
.SonarrItem {
    clear: both; 
    width:100%;  
    Position:relative;
    overflow:hidden;  
}
.SonarrBanner {
    width:100%; 
    padding:5px;
}

.SonarrData {
    float:Left; 
    width:75%;
}
.SonarrPoster {
    float:Left; 
    width:25%;  
    padding: 0px 5px 5px 10px;
}
.SonarrData span {
    display: block;
}
.SonarrBigTitle {
    transform: rotate(90deg);
    padding-top: 15px;
    font-size:24px;
    text-transform: uppercase;
}
.SonarrTitleShow {
    font-size: 12px;
    font-weight: bold;
}
.SonarrEpisode {
    color: darkgray;
}
.SonarrDownloaded {
    color: lightskyblue;
}
.SonarrAirDate{
    color: darkgray;
}

.trashcan {
	margin-left:-4px;
	height:30px;
}
.modal {
	z-index:9999;
}
.newblocksHolder {
	display:none;
	width: 220px;
    background: rgba(0,0,0,0.9);
    height: 100%;
    float: left;
}

.newblocksHolder div.title {
	color: #fff;
    padding: 5px;
    margin: 5px;
    font-size: 17px;
    font-weight: bold;
	height:35px;
}

.newblocksHolder .newblocks.plugins {
    height: 170px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.newblocksHolder .newblocks.domoticz {
    height: calc(100% - 260px);
    overflow-y: scroll;
    overflow-x: hidden;
}
.newblocksHolder .newblocks > div {
	border: 1px solid #AAA;
    background: rgba(255,255,255,0.2);
    margin: 5px;
    padding: 5px;
    color: #fff;
    box-sizing: border-box;
}
.skycon {
	margin: 10px auto 10px auto;
    display: block;
    width: 100%;
    max-width: 125px;
}

.skyconsmall {
    display: block;
    width: 100%;
    max-width: 125px;
}


/* BEGIN || Popup modal settings (need to sort and arrange first) */
.nav-pills>li>a {
	border-radius: 6px 6px 0px 0px;
	color: #000;
	font-size: 16px;
	background-color: #f6f6f6;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
	background-color: #555;
}

.modal-header {
	border-bottom: 0px !important;
}

.modal-body {
    position: relative;
    padding: 0px 0px 0px 0px;
}

.modal-body .glyphicon {
	color:#A80002;
	cursor:help;
}
.modal-dialog-settings {
	min-width: 50% !important;
	margin: 80px auto;
}

.nav {
	border-bottom: 1px solid #e5e5e5;
	padding-left: 10px;
	padding-right: 10px;
}

.btn {
	text-transform: none !important;
	font-size: 16px !important;
	font-weight: 400 !important;
}

.btn-secondary {
	color: #292b2c !important;
	border: 1px solid #ccc !important;
	background-color: #fff !important;
	padding: .5rem 1rem !important;
	border-color: #ccc !important;
}

.btn-primary {
	color: #fff;
	background-color: #5cb85c !important;
	padding: .5rem 1rem !important;
	border-color: #5cb85c !important;
}

.row {
	margin-bottom: 10px !important;
}

.label {
	font-weight: 400px !important;
}

.tab-pane {
	padding:10px !important;
}

.modal-header {
    padding: 15px;
    border-bottom: 1px solid #000;
}

.modal-dialog {
    min-width: 80% !important;
    margin: 80px auto;
}

.material-switch > input[type="checkbox"] {
    display: none;   
}

.material-switch > label {
	cursor: pointer;
    height: 0px;
    position: relative; 
    width: 40px;  
}

.material-switch > label::before {
    background: rgb(0, 0, 0);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: 0px;
    position:absolute;
    opacity: 0.3;
    transition: all 0.4s ease-in-out;
    width: 40px;
}

.material-switch > label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 24px;
    left: -4px;
    margin-top: 0px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 24px;
}

.material-switch > input[type="checkbox"]:checked + label::before {
    background: inherit;
    opacity: 0.5;
}

.material-switch > input[type="checkbox"]:checked + label::after {
    background: inherit;
    left: 20px;
}


/* END || Popup modal settings (need to sort and arrange first) */


.containslog .items {
	height: 154px;
    overflow: auto;
    width: calc(100% - 40px);
}

.containslog .items .level0{ color:#c70626; }
.containslog .items .level1{ color:#067676; }
.containslog .items .level2{ color:#ffffff; }

.containslog .items .level0.popup{ color:#c70626; }
.containslog .items .level1.popup{ color:#067676; }
.containslog .items .level2.popup{ color:#727272; }
				
				
.containslog.popup {
	height: 100% !important;
	overflow:auto;
}
.containslog.popup .items {
	min-height: 300px;
}

.colbar.transbg {
	padding: 6px 5px !important;
}
.colbar.transbg .logo {
    font-size: 20px;
    font-weight: bold;
    margin-top: -4px;
    margin-bottom: -4px;
}
.colbar.transbg .fab,
.colbar.transbg .fas,
.colbar.transbg .far {
    margin-top: 0px;
    font-size: 20px !important;
	margin-left: 10px;
}
.colbar.transbg .miniclock span{
    font-size:15px !important;
	font-weight:bold !important;
}
.colbar span.settings,
.colbar span.fullscreen {
	cursor:pointer;
}
a.playlist {
    margin: 5px !important;
    display: inline-block;
    border: 1px solid #ccc;
}

.containsspotify #current {
	overflow: hidden;
	background-color: #282828;
}

.containsspotify #current .current_image {
	float: left;
	margin:2px 0px 5px 2px;
	width: calc(32% - 2px);
}

.containsspotify #current .current_image img {
	max-width:64px;
}
.containsspotify #current .current_info {
	float: left;
	padding-left:10px;
	width: calc(68%);
}
.containsspotify #current .current_artist {
	font-weight: bold;
}

.containsspotify #current .current_album {
	overflow: hidden;
    max-height: 33px;
}

.containsspotify #current .current_track {
	overflow: hidden;
    max-height: 33px;
}
.containsspotify .change {
	background-color: #282828;
	display: block;
	margin-top: -4px;
	padding: 3px;
	padding-left: 4px;
	color: #fff;
}

.containsspotify .fas {
	font-size:30px !important
}

.containsspotify .shuffleoff {
	color: #aaa;
}

.containsspotify select.devices{
	width: 100%;
    max-width: 100%;
    color: #fff !important;
    background-color: #282828;
    border: 0px;
    padding-left: 0px;
}

.containsspotify select.devices option{
    color: #fff !important;
}

.spotback {
	margin:5px;
}
.spottrack {
	background-color:#fff;
	width:93%;
	border:1px solid #ccc;
	height:60px;
	margin:5px;
}
.spotlist {
	background-color:#fff;
	width:93%;
	border:1px solid #ccc;
	height:77px;
	margin:5px;
}
/* Thermostat CSS: */

.update {
	background: rgba(0,0,0,0.6);
	border-radius: 0px;
	color: #fff;
	bottom:0;
	font-weight:bold;
	right:0;
	padding:10px;
	position:absolute;
	z-index:9999;
}
.editmode {
	color:white;
	background-color:red;
	bottom:0;
	font-weight:bold;
	right:0;
	padding:10px;
	position:absolute;
	z-index:9999;
}
.input-groupBtn .btn-number {
    opacity: 0.5;
    color: white;
    background-color: rgb(34, 34, 34);
	border-radius: 0px;
    padding: 6px 10px 6px 10px;
    line-height: 20px;
}
.input-groupBtn.input-chevron .btn-number {
	padding: 5px 10px 5px 10px
	
}
.input-groupBtn .btn-number.plus{
	border-bottom:0px;
	padding-bottom:7px;
}
.input-groupBtn li {
	position: -webkit-sticky;
  	position: sticky;
	z-index:9997;
	right:1px;
}
.input-groupBtn li.down {
	top:35px;
}
.input-groupBtn .stop {
	z-index:9997;
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
      
	transform: rotate(45deg);
    top: 0;
    width: 71px;
    height: 33px;
    position: absolute;
    right: 0;
    margin-right: -27px;
    margin-top: 0px;

}

.input-groupBtn.input-chevron {
	right:27px;
}
.input-groupBtn.input-chevron.hidestop {
	right:-5px;
}
.input-groupBtn .btn-number:active,.btn-number:hover {
	color: black; 
	background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0 padding-box;
}
.input-groupBtn .fa-thermostat {
	vertical-align: middle;
	font-size: 20px !important;
}
.title-input {
	font-size: 20px !important; 
	margin-top:-2px;
	display: inline-block;
}
.trafficmap {
	height: 100%;
}
.col-xs-1.block_trafficmap, 
.col-xs-2.block_trafficmap
, .col-xs-3.block_trafficmap, .col-xs-4.block_trafficmap, .col-xs-5.block_trafficmap, .col-xs-6.block_trafficmap, .col-xs-7.block_trafficmap, .col-xs-8.block_trafficmap, .col-xs-9.block_trafficmap, .col-xs-10.block_trafficmap, .col-xs-11.block_trafficmap, .col-xs-12.block_trafficmap {

	padding-left: 13px !important;
    padding-right: 13px !important;
	height:200px !important;
}

.iconheating {
	margin-top: 2px;
}
.input-groupBtn {
    position: absolute;
	z-index:9999;
    right: -5px;
    list-style: outside none none;
    padding: 0px;
    margin: 0;
    top: 0px;
}
@media only screen and (max-width: 1400px) {

	.input-groupBtn.input-chevron .btn-number {
		padding: 7px 10px 7px 10px;

	}
}
@media only screen and (max-width: 1000px) {
	.input-groupBtn .stop {
		width: 60px;
		margin-right: -23px;
		margin-top: -1px;
	}
	.input-groupBtn li {
		top:1px;
	}
	.input-groupBtn li.down {
		top:30px;
	}
	.input-groupBtn .btn-number {
   		padding: 4px 5px 3px 5px;
		line-height: 19px;
	}
	.input-groupBtn.input-chevron .btn-number {
		padding: 5px 7px 5px 7px !important;

	}
	
	.title-input {
		font-size: 14px !important;
		margin-top: 7px;
	}
	.iconheating {
		margin-top: 14px;
	}
}
/************************/
  
@media only screen and (max-width: 767px) {
  .control label {
      font-size: 35px;
  }
}
.lastupdate {
	font-size: 10px;
    color: #bbb;
		white-space:nowrap
}
.graphpopup {overflow:hidden;}
html,
body {
	height: 100%;
	width: 100%;
	background-color:#000;
	overflow:hidden;
}
body {
	font-size:11px;
}
hr {
	border-color: #FFF;
	border-width: 2px;
	max-width: 100%;
	opacity:0.5;
	margin-top:20px;
	margin-bottom:20px;
}

.standby .swiper-slide {
	background-image:none !important;
	background-color:#313131;
}
.standby .far,.standby .far.fa-small,.standby .fas,.standby .fas.fa-small,.standby .fab,.standby .fab.fa-small, {
	color:#fff !important;
}

.standby .row {
	opacity:0.7;
}

.standby .imgblock {
	opacity:0.2;
}


a {
	-webkit-transition: all 0.35s;
	-moz-transition: all 0.35s;
	transition: all 0.35s;
	color: #F05F40;
}

div.morris-hover-point{
	color:#000 !important;
}
.auto_switches,
.auto_states,
.auto_dimmers,
.auto_media,
.auto_buttons{
	clear:both;
}
a:hover,
a:focus {
	color: #eb3812;
}

.newsWrapper { width:80%; height:106px; overflow:hidden; }
	#newsTicker { padding:0; margin:10px 0 0 15px; color:#333; }

	#newsTicker li {
		min-height:72px;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: left;
		font-size: 14px;
		color:#fff;
	}

.fas.fa-newspaper,
.far.fa-newspaper {
    margin-left: 1px;
}
.fas.fa-lightbulb,
.far.fa-lightbulb {
    margin-top: 1px;
    margin-left: 6px;
}
.hidden {
	display:none;
}
div.mh {
	height:85px;
}
div.mh h3 {
	padding-top:6px;
}
div.big {
	padding-top:20px !important;
	padding-left:18px !important;
}
.sunriseholder,
.sunriseholder .wi{
	font-size:14px !important;
}
.sunriseholder .wi-sunset{
	padding-left:10px;
}
.sunriseholder .wi {
	padding-right:5px;
	padding-top:5px;
}
select,
select option {
 	color:#000 !important;
	width:auto;
	max-width:90%;
}
.title{ font-size:12px;}

.wi {font-size:30px;}
.wi.wi-rain {margin-top:0px;}
.fas {font-size:30px;}
.far {font-size:30px;}
.fab {font-size:30px;}
.fas.fa-small {font-size:20px;}
.fas.fa-thermometer-half {margin-left:8px;margin-top:2px;}
.fas.fa-calendar {margin-left:4px;margin-top:1px;}
.fas.fa-thermometer-half.fa-thermometer-half-switch {margin-left:4px;}
.fas.fa-desktop {margin-top:5px;}
.fas.fa-fire {margin-top:5px;}
.fas.fa-plug {margin-top:5px;}
.fas.fa-music{margin-top:5px;}
.fas.fa-television,
.fas.fa-microchip{margin-left: 3px;
    margin-top: 2px;}
.containshorizon .fas { margin-top:8px; }
.containsnzbget .fas { margin-top:8px; }
.fas.fa-tint {
    margin-left: 5px;
    margin-top: 4px;
}
.fas.fa-trash {
    margin-left: 8px;
}
.fas.fa-bolt {
    margin-left: 8px;
}
.wi.wi-wind-direction {
    margin-left: 4px;
    margin-top: 2px;
}
.fas.fa-toggle-off {
	opacity: 0.5;
	filter: alpha(opacity=50); /* For IE8 and earlier */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
	margin:0px;
	margin-left:15px;
}
.smalltitle h3 {
	font-size:12px !important;
	margin-left:6px;
}
h1 {
	font-size:35px;
}
p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.row > div{ 
	padding-right: 0px !important;
    padding-left: 0px !important;
}

.clear {
	clear:both;
}
.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-3,
.transbg.col-xs-4,
.transbg.col-xs-5,
.transbg.col-xs-6,
.transbg.col-xs-7,
.transbg.col-xs-8,
.transbg.col-xs-9,
.transbg.col-xs-10,
.transbg.col-xs-11,
.transbg.col-xs-12 {
	padding-top:15px;
	padding-bottom:15px;
	border: 7px solid rgba(255,255,255,0);
    background: rgba(0,0,0,0.2);
    background-clip: padding-box;
}

.transbg.dark.col-xs-1,
.transbg.dark.col-xs-2,
.transbg.dark.col-xs-3,
.transbg.dark.col-xs-4,
.transbg.dark.col-xs-5,
.transbg.dark.col-xs-6,
.transbg.dark.col-xs-7,
.transbg.dark.col-xs-8,
.transbg.dark.col-xs-9,
.transbg.dark.col-xs-10,
.transbg.dark.col-xs-11,
.transbg.dark.col-xs-12 {
	border: 7px solid rgba(255,255,255,0);
    background: rgba(0,0,0,0.5);
    background-clip: padding-box;
}

.weatherfull .transbg {
	padding-top: 9px !important;
    padding-bottom: 10px !important;
}

.block_clock h1,
.block_clock h4 {
	margin-left:0px !important;
}

.block_clock {
	padding-top: 18px !important;
    padding-bottom: 18px !important;
}

.with_controls {
	padding-top: 6px !important;
}

/*
Only add this hover on NON touch devices
*/
@media (hover: hover) {
	
	.transbg.col-xs-1.hover:hover,
	.transbg.col-xs-2.hover:hover,
	.transbg.col-xs-3.hover:hover,
	.transbg.col-xs-4.hover:hover,
	.transbg.col-xs-5.hover:hover,
	.transbg.col-xs-6.hover:hover,
	.transbg.col-xs-7.hover:hover,
	.transbg.col-xs-8.hover:hover,
	.transbg.col-xs-9.hover:hover,
	.transbg.col-xs-10.hover:hover,
	.transbg.col-xs-11.hover:hover,
	.transbg.col-xs-12.hover:hover {
		background: rgba(255,255,255,0.1);
		background-clip: padding-box;
		border: 7px solid rgba(255,255,255,0);
	}
}

.transbg.hover {
	cursor:pointer;
}
.transbg.hover.hovered {
	background: rgba(255,255,255,0.1);
	background-clip: padding-box;
	border: 7px solid rgba(255,255,255,0);
	cursor:pointer;
}

.iconslider {
	cursor:pointer;
}

.cast-button-container {
	padding: 13px !important;
}
.cast-button {
	height: 25px;
	width: 25px;
	padding: 1px;
	vertical-align: middle;
	display: inline;
	--disconnected-color: red;
	--connected-color: green;
}

	.col-xs-1,
	.col-xs-2,
	.col-xs-3,
	.col-xs-4,
	.col-xs-5,
	.col-xs-6,
	.col-xs-7,
	.col-xs-8,
	.col-xs-9,
	.col-xs-10,
	.col-xs-11,
	.col-xs-12 {
		padding-right: 5px !important;
		padding-left: 5px !important;
	}

.containsicalendar .transbg {
    padding-left: 11px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.column1.col-xs-5,
.column2.col-xs-5,
.column3.col-xs-2 {
	padding:0px !important;
}
.row {
	margin:0px !important
		
}
.fas.fa-train,.fas.fa-bus{
	margin-left:5px;
	margin-top:3px;
}

.trainrow,
.trafficrow{
    font-size: 14px !important;
}

.trainrow strong,
.trafficrow strong{
    display: inline-block;
}

.col-icon {
	width:40px !important;
}

.col-data {
	width: calc(100% - 45px);
}

.col-no-icon {
	width: calc(100% - 15px);
}

.slider {
	margin-top:7px;
	margin-right: 7px;
}
.weekday {margin-bottom: 5px;}
.ui-widget.ui-widget-content {
	background-color: #aaa;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
	width: 20px;
    height: 20px;
    margin-top: -4px;
    margin-left: -4px;
}
.buttonimg { max-height:20px; }
.ml {margin-left:10px;}
.mr {margin-right:10px;}
.navbar-default {
  background-color: white;
  border-color: rgba(34, 34, 34, 0.05);
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
.navbar-default .navbar-header .navbar-brand {
  color: #F05F40;
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
  color: #eb3812;
}
.navbar-default .navbar-header .navbar-toggle {
  font-weight: 700;
  font-size: 12px;
  color: #222222;
  text-transform: uppercase;
}
.navbar-default .nav > li > a,
.navbar-default .nav > li > a:focus {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
  color: #222222;
}
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus:hover {
  color: #F05F40;
}
.navbar-default .nav > li.active > a,
.navbar-default .nav > li.active > a:focus {
  color: #F05F40 !important;
  background-color: transparent;
}
.navbar-default .nav > li.active > a:hover,
.navbar-default .nav > li.active > a:focus:hover {
  background-color: transparent;
}
@media (min-width: 768px) {
  .navbar-default {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.3);
  }
  .navbar-default .navbar-header .navbar-brand {
    color: rgba(255, 255, 255, 0.7);
  }
  .navbar-default .navbar-header .navbar-brand:hover,
  .navbar-default .navbar-header .navbar-brand:focus {
    color: white;
  }
  .navbar-default .nav > li > a,
  .navbar-default .nav > li > a:focus {
    color: rgba(255, 255, 255, 0.7);
  }
  .navbar-default .nav > li > a:hover,
  .navbar-default .nav > li > a:focus:hover {
    color: white;
  }
  .navbar-default.affix {
    background-color: white;
    border-color: rgba(34, 34, 34, 0.05);
  }
  .navbar-default.affix .navbar-header .navbar-brand {
    color: #F05F40;
    font-size: 14px;
  }
  .navbar-default.affix .navbar-header .navbar-brand:hover,
  .navbar-default.affix .navbar-header .navbar-brand:focus {
    color: #eb3812;
  }
  .navbar-default.affix .nav > li > a,
  .navbar-default.affix .nav > li > a:focus {
    color: #222222;
  }
  .navbar-default.affix .nav > li > a:hover,
  .navbar-default.affix .nav > li > a:focus:hover {
    color: #F05F40;
  }
}

img.icon {
	max-width:30px;
}

.off.icon {
	opacity:0.4 !important;
}

.on.icon {
	opacity:1 !important;
}


	.blinds .fas.fa-arrow-up,.blinds .fas.fa-arrow-down,.blinds .fas.fa-stop-circle {
		font-size: 20px !important;
    	margin-right: 3px !important;
	}

@media (max-width: 1400px) {
	
	.col-icon {
		width:30px !important;
	}
	img.icon {
		max-width:20px !important;
	}
	.fas,.far,.fab,.wi {
		font-size:15px !important;
	}
	#weather .wi {
		font-size:24px !important;
	}
	.cast-button-container {
		padding: 11px !important;
	}
}
@media (max-width: 975px) {
	div.mh {
		height: 75px;
	}
	.big .weatherdegrees {
		padding-left: 15px;
	}
	.transbg.col-xs-1, .transbg.col-xs-2, .transbg.col-xs-3, .transbg.col-xs-4, .transbg.col-xs-5, .transbg.col-xs-6, .transbg.col-xs-7, .transbg.col-xs-8, .transbg.col-xs-9, .transbg.col-xs-10, .transbg.col-xs-11, .transbg.col-xs-12 {
		padding-top: 7px;
		padding-bottom: 7px;
	}
	.cast-button-container {
		padding: 3px !important;
	}
	h1,h4 {
		margin-left:0px !important
	}
	div.big {
		padding-top: 9px !important;
		padding-left: 13px !important;
	}
	img.icon {
		max-width:15px !important;
	}
	.fas,.far,.fab,.wi {
		font-size:15px !important;
	}
	
	.big .wi {
		font-size:30px !important;
	}
	.col-icon {
		max-width:26px !important;
	}
	.col-data {
		width: calc(100% - 30px);
	}

	.trashcan {
		height: 25px !important;
	}

}

.modal-dialog {
    min-width: 90% !important;
}
div.screen {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  background-position: center;
  color: white;
}

.big .weatherdegrees {
	padding-right:10px;
}
.big .weatherdegrees,
.big .weatherloc {
	display:inline-block;
	margin-top:-2px;
	font-size:24px;
	font-weight:bold;
}

.weatherfull {
	color: #444;
	text-align: left;
	text-shadow: none;
}

.weatherfull > div div {
	text-align: center;
	color:#fff;
}
.weatherfull > div div.day {
	margin-top: 0px;
	font-weight: 300;
	font-size:13px;
}
.weatherfull > div div.temp span { float:none; display:inline-block; }
.weatherfull > div div.temp { font-size: 28px; font-weight:400; }
.weatherfull > div div.temp .nightT { display:block;font-size: 19px;margin-top: -8px; opacity:.7; padding-bottom: 0px}

.weatherfull > div div.icon {
	border-radius: 50%;
	width: 75px;
	height: 48px;
	margin: 0px auto;
}
.weatherfull > div div.icon i { color:#fff !important; }

.weatherfull i {
	font-size:40px !important;
	margin:5px auto 0 auto;
	opacity:.9;
}
.section-heading {
  margin-top: 0;
}

.text-primary {
  color: #F05F40;
}
.no-gutter > [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}
.btn-default {
  color: #222222;
  background-color: white;
  border-color: white;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #222222;
  background-color: #f2f2f2;
  border-color: #ededed;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-image: none;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
  background-color: white;
  border-color: white;
}
.btn-default .badge {
  color: white;
  background-color: #222222;
}
.btn-primary {
  color: white;
  background-color: #F05F40;
  border-color: #F05F40;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: white;
  background-color: #ee4b28;
  border-color: #ed431f;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  background-color: #F05F40;
  border-color: #F05F40;
}
.btn-primary .badge {
  color: #F05F40;
  background-color: white;
}
.btn {
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
	padding:0px 5px 0px 5px;
	font-size:10px;
	margin-right:5px;
}
.btn-xl {
  padding: 15px 30px;
}
.btn-group .btn {
	font-size: 12px;
	font-weight: 400;
	padding:2px 6px;
	margin-right: 2px;
}

@media (max-width: 975px) {
	.btn-group .btn {
		font-size: 12px !important;
	}
}

.btn-group .btn.active {
	font-weight:700;
}
.modal-login {
    max-height: 90%;
    max-width:90%;
    min-width: 25% !important;
    margin: 0 auto;
    margin-top: 200px;
}
.content-login {
    display: block;
    font-family: Verdana;
    font-size: 22px;
    line-height: 22px;
    padding: 10px 0 0;
    color: #000;
}
.login{
	text-align: center;
	padding: 20px;
}
.login input[type=text]{
	height: 30px;
	border: 1px solid rgba(0,0,0,0.6);
	border-radius: 2px;
	color: #000;
	font-family: 'Exo', sans-serif;
	font-size: 14px;
	font-weight: 400;
	padding: 4px;
}
.login input[type=password]{
	height: 30px;
	border: 1px solid rgba(0,0,0,0.6);
	border-radius: 2px;
	color: #000;
	font-family: 'Exo', sans-serif;
	font-size: 14px;
	font-weight: 400;
	padding: 4px;
	margin-top: 10px;
}
.login input[type=button]{
	height: 35px;
	padding: 6px;
	margin-top: 10px;
}
.login input[type=button]:hover{
	opacity: 0.8;
}
.login input[type=button]:active{
	opacity: 0.6;
}
.login input[type=text]:focus{
	outline: none;
	border: 1px solid rgba(0,0,0,0.9);
}
.login input[type=password]:focus{
	outline: none;
	border: 1px solid rgba(0,0,0,0.9);
}
.login input[type=button]:focus{
	outline: none;
}
::-webkit-input-placeholder{
   color: rgba(0,0,0,0.6);
}
::-moz-input-placeholder{
   color: rgba(0,0,0,0.6);
}
::-moz-selection {
  color: white;
  text-shadow: none;
  background: #222222;
}
::selection {
  color: white;
  text-shadow: none;
  background: #222222;
}
img::selection {
  color: white;
  background: transparent;
}
img::-moz-selection {
  color: white;
  background: transparent;
}
body {
  webkit-tap-highlight-color: #222222;
}
#latetrain {
	color: red;
}
#notlatetrain {
	color: green;
}
#departureScheduled {
	font-size:10px !important;
}

a:not([href]) {
    cursor: pointer;
}

/* PLUGINS */
.morris-hover{position:absolute;z-index:1000}.morris-hover.morris-default-style{border-radius:10px;padding:6px;color:#666;background:rgba(255,255,255,0.8);border:solid 2px rgba(230,230,230,0.8);font-family:sans-serif;font-size:12px;text-align:center}.morris-hover.morris-default-style .morris-hover-row-label{font-weight:bold;margin:0.25em 0}
.morris-hover.morris-default-style .morris-hover-point{white-space:nowrap;margin:0.1em 0}

/*SPECTRUM*/
.sp-container{position:absolute;top:0;left:0;display:inline-block;*display:inline;*zoom:1;z-index:9999994;overflow:hidden}.sp-container.sp-flat{position:relative}.sp-container,.sp-container *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.sp-top{position:relative;width:100%;display:inline-block}.sp-top-inner{position:absolute;top:0;left:0;bottom:0;right:0}.sp-color{position:absolute;top:0;left:0;bottom:0;right:20%}.sp-hue{position:absolute;top:0;right:0;bottom:0;left:84%;height:100%}.sp-clear-enabled .sp-hue{top:33px;height:77.5%}.sp-fill{padding-top:80%}.sp-sat,.sp-val{position:absolute;top:0;left:0;right:0;bottom:0}.sp-alpha-enabled .sp-top{margin-bottom:18px}.sp-alpha-enabled .sp-alpha{display:block}.sp-alpha-handle{position:absolute;top:-4px;bottom:-4px;width:6px;left:50%;cursor:pointer;border:1px solid #000;background:#fff;opacity:.8}.sp-alpha{display:none;position:absolute;bottom:-14px;right:0;left:0;height:8px}.sp-alpha-inner{border:solid 1px #333}.sp-clear{display:none}.sp-clear.sp-clear-display{background-position:center}.sp-clear-enabled .sp-clear{display:block;position:absolute;top:0;right:0;bottom:0;left:84%;height:28px}.sp-container,.sp-replacer,.sp-preview,.sp-dragger,.sp-slider,.sp-alpha,.sp-clear,.sp-alpha-handle,.sp-container.sp-dragging .sp-input,.sp-container button{-webkit-user-select:none;-moz-user-select:-moz-none;-o-user-select:none;user-select:none}.sp-container.sp-input-disabled .sp-input-container{display:none}.sp-container.sp-buttons-disabled .sp-button-container{display:none}.sp-container.sp-palette-buttons-disabled .sp-palette-button-container{display:none}.sp-palette-only .sp-picker-container{display:none}.sp-palette-disabled .sp-palette-container{display:none}.sp-initial-disabled .sp-initial{display:none}.sp-sat{background-image:-webkit-gradient(linear,0 0,100% 0,from(#FFF),to(rgba(204,154,129,0)));background-image:-webkit-linear-gradient(left,#FFF,rgba(204,154,129,0));background-image:-moz-linear-gradient(left,#fff,rgba(204,154,129,0));background-image:-o-linear-gradient(left,#fff,rgba(204,154,129,0));background-image:-ms-linear-gradient(left,#fff,rgba(204,154,129,0));background-image:linear-gradient(to right,#fff,rgba(204,154,129,0));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType = 1,startColorstr=#FFFFFFFF,endColorstr=#00CC9A81)";filter:progid:DXImageTransform.Microsoft.gradient(GradientType = 1,startColorstr='#FFFFFFFF',endColorstr='#00CC9A81')}.sp-val{background-image:-webkit-gradient(linear,0 100%,0 0,from(#000),to(rgba(204,154,129,0)));background-image:-webkit-linear-gradient(bottom,#000,rgba(204,154,129,0));background-image:-moz-linear-gradient(bottom,#000,rgba(204,154,129,0));background-image:-o-linear-gradient(bottom,#000,rgba(204,154,129,0));background-image:-ms-linear-gradient(bottom,#000,rgba(204,154,129,0));background-image:linear-gradient(to top,#000,rgba(204,154,129,0));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81,endColorstr=#FF000000)";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81',endColorstr='#FF000000')}.sp-hue{background:-moz-linear-gradient(top,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);background:-ms-linear-gradient(top,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);background:-o-linear-gradient(top,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);background:-webkit-gradient(linear,left top,left bottom,from(red),color-stop(0.17,#ff0),color-stop(0.33,#0f0),color-stop(0.5,#0ff),color-stop(0.67,#00f),color-stop(0.83,#f0f),to(red));background:-webkit-linear-gradient(top,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);background:linear-gradient(to bottom,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.sp-1{height:17%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000',endColorstr='#ffff00')}.sp-2{height:16%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00',endColorstr='#00ff00')}.sp-3{height:17%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00',endColorstr='#00ffff')}.sp-4{height:17%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff',endColorstr='#0000ff')}.sp-5{height:16%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff',endColorstr='#ff00ff')}.sp-6{height:17%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff',endColorstr='#ff0000')}.sp-hidden{display:none!important}.sp-cf:before,.sp-cf:after{content:"";display:table}.sp-cf:after{clear:both}.sp-cf{*zoom:1}@media (max-device-width: 480px){.sp-color{right:40%}.sp-hue{left:63%}.sp-fill{padding-top:60%}}.sp-dragger{border-radius:5px;height:5px;width:5px;border:1px solid #fff;background:#000;cursor:pointer;position:absolute;top:0;left:0}.sp-slider{position:absolute;top:0;cursor:pointer;height:3px;left:-1px;right:-1px;border:1px solid #000;background:#fff;opacity:.8}.sp-container{border-radius:0;background-color:#ECECEC;border:solid 1px #f0c49B;padding:0}.sp-container,.sp-container button,.sp-container input,.sp-color,.sp-hue,.sp-clear{font:normal 12px "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.sp-top{margin-bottom:3px}.sp-color,.sp-hue,.sp-clear{border:solid 1px #666}.sp-input-container{float:right;width:100px;margin-bottom:4px}.sp-initial-disabled .sp-input-container{width:100%}.sp-input{font-size:12px!important;border:1px inset;padding:4px 5px;margin:0;width:100%;background:transparent;border-radius:3px;color:#222}.sp-input:focus{border:1px solid orange}.sp-input.sp-validation-error{border:1px solid red;background:#fdd}.sp-picker-container,.sp-palette-container{float:left;position:relative;padding:10px;padding-bottom:300px;margin-bottom:-290px}.sp-picker-container{width:172px;border-left:solid 1px #fff}.sp-palette-container{border-right:solid 1px #ccc}.sp-palette-only .sp-palette-container{border:0}.sp-palette .sp-thumb-el{display:block;position:relative;float:left;width:24px;height:15px;margin:3px;cursor:pointer;border:solid 2px transparent}.sp-palette .sp-thumb-el:hover,.sp-palette .sp-thumb-el.sp-thumb-active{border-color:orange}.sp-thumb-el{position:relative}.sp-initial{float:left;border:solid 1px #333}.sp-initial span{width:30px;height:25px;border:none;display:block;float:left;margin:0}.sp-initial .sp-clear-display{background-position:center}.sp-palette-button-container,.sp-button-container{float:right}.sp-replacer{cursor:pointer;border:solid 1px #91765d;background:#eee;color:#333;float:left}.sp-replacer:hover,.sp-replacer.sp-active{border-color:#F0C49B;color:#111}.sp-replacer.sp-disabled{cursor:default;border-color:silver;color:silver}.sp-dd{padding:0;margin-right:3px;height:16px;line-height:16px;float:left;font-size:10px}.sp-preview{position:relative;width:25px;height:20px;border:solid 1px #222;margin-right:5px;float:left;z-index:0}.sp-palette{*width:220px;max-width:220px}.sp-palette .sp-thumb-el{width:16px;height:16px;margin:2px 1px;border:solid 1px #d0d0d0}.sp-container{padding-bottom:0}.sp-container button{background-color:#eee;background-image:-webkit-linear-gradient(top,#eee,#ccc);background-image:-moz-linear-gradient(top,#eee,#ccc);background-image:-ms-linear-gradient(top,#eee,#ccc);background-image:-o-linear-gradient(top,#eee,#ccc);background-image:linear-gradient(to bottom,#eee,#ccc);border:1px solid #ccc;border-bottom:1px solid #bbb;border-radius:3px;color:#333;font-size:14px;line-height:1;padding:5px 4px;text-align:center;text-shadow:0 1px 0 #eee;vertical-align:middle}.sp-container button:hover{background-color:#ddd;background-image:-webkit-linear-gradient(top,#ddd,#bbb);background-image:-moz-linear-gradient(top,#ddd,#bbb);background-image:-ms-linear-gradient(top,#ddd,#bbb);background-image:-o-linear-gradient(top,#ddd,#bbb);background-image:linear-gradient(to bottom,#ddd,#bbb);border:1px solid #bbb;border-bottom:1px solid #999;cursor:pointer;text-shadow:0 1px 0 #ddd}.sp-container button:active{border:1px solid #aaa;border-bottom:1px solid #888;-webkit-box-shadow:inset 0 0 5px 2px #aaaaaa,0 1px 0 0 #eee;-moz-box-shadow:inset 0 0 5px 2px #aaaaaa,0 1px 0 0 #eee;-ms-box-shadow:inset 0 0 5px 2px #aaaaaa,0 1px 0 0 #eee;-o-box-shadow:inset 0 0 5px 2px #aaaaaa,0 1px 0 0 #eee;box-shadow:inset 0 0 5px 2px #aaaaaa,0 1px 0 0 #eee}.sp-cancel{font-size:11px;color:#d93f3f!important;margin:0;padding:2px;margin-right:5px;vertical-align:middle;text-decoration:none}.sp-cancel:hover{color:#d93f3f!important;text-decoration:underline}.sp-palette span:hover,.sp-palette span.sp-thumb-active{border-color:#000}.sp-preview,.sp-alpha,.sp-thumb-el{position:relative;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.sp-preview-inner,.sp-alpha-inner,.sp-thumb-inner{display:block;position:absolute;top:0;left:0;bottom:0;right:0}.sp-palette .sp-thumb-inner{background-position:50% 50%;background-repeat:no-repeat}.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=)}.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=)}.sp-clear-display{background-repeat:no-repeat;background-position:center;background-image:url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==)}
Posting here makes the last part of creative.css looks strange, but on my texteditor it looks okay.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
Lokonli
Posts: 2291
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Layout almost done, but, something looks wrong

Post by Lokonli »

I did not test all your settings, but it's probably caused by the following line in your custom.css:

Code: Select all

div.col-icon { width: 100px !important; max-width: 100px !important;}
I suggest to remove the line, and then see whether you are happy with the result.
If not, please describe what you try to achieve. There might be a different way to get what you want.
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

Re: Layout almost done, but, something looks wrong

Post by EdwinK »

It seems that this did the trick. Thanks.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest