/* 2022-03-23 - Updated Coloring thanks to Grzegorz Miasko  */


/* ============== COLORS ============= */

/* LIGHT THEME */
html { 
	--bg: #F5F5F5;
	--standard-txt: #666;

	--navbar-bg: #CDE4FA;
	--navbar-title-txt: #444;
	--navbar-txt: #888;
	--navbar-filter-bg: #FFF;
	--navbar-filter-placeholder-txt: #CCC;
	--navbar-filter-txt: #222;
	--navbar-btn-bg: #FFF;
	--navbar-btn-icon-fill: #888;
	--navbar-btn-pause-pulse-bg: #FFF;

	--null-label-bg: #F5F5F5;
	--null-label-txt: #FF6464;
	--date-bg: #FFEBFF;
	--date-txt: #666;
	--info-bg: #B9FFD7;
	--info-txt: #666;
	--origin-bg: #EBEBFF;
	--origin-txt: #666;
	--keyword-txt: #000;
	--keyword-green-txt: #00BE4B;
	--keyword-red-txt: #FF3E3E;
	--highlight-bg: #CDE4FA;
	--highlight-txt: #222;
	--highlightModel-bg: #64FFFF;
	--highlightThing-bg: #FFD2FF;
	--highlightRule-bg: #FFFFB4;

	--logLine-border-top: #CCC;

	--evid-bg: #FF3E3E;
	--evid-txt: #222;
	--evid-date-origin-txt: #222;
	--evid-date-origin-bg: #FF3E3E00;
	--evid-highlight-txt: #222;
	--evid-highlight-bg: #CDE4FA;

	--errorLine-bg: #FF3E3E;
	--errorLine-txt: #EEE;
	--errorLine-date-origin-txt: #EEE;
	--errorLine-date-origin-bg: #FF3E3E00;
	--errorLine-highlightScript-txt: #FFF;
	--errorLine-highlight-txt: #222;
	--errorLine-highlight-bg: #CDE4FA;

	--warnLine-bg: #FAC613;
	--warnLine-txt: #222;
	--warnLine-date-origin-bg: #FAC61300;
	--warnLine-keyword-green-txt: #438300;
	--warnLine-highlight-txt: #222;
	--warnLine-highlight-bg: #CDE4FA;

	--modelLine-bg: #BAE2FF;
	--modelLine-txt: #5D717F;
	--modelLine-date-origin-bg: #BAE2FF00;
	--modelLine-date-origin-txt: #5D717F;
	--modelLine-info-txt: #019D2B;
	--modelLine-keyword-green-txt: #019D2B;
	--modelLine-highlight-txt: #222;
	--modelLine-highlight-bg: #CDE4FA;

	--debugLine-bg: #FCCCFF;
	--debugLine-txt: #444;
	--debugLine-date-bg: #FFEBFF;
	--debugLine-date-origin-txt: #444;
	--debugLine-type-bg: #F5AFFF;
	--debugLine-type-txt: #444;
	--debugLine-origin-bg: #FCCCFF00;
	--debugLine-keyword-green-txt: #019D2B;
	--debugLine-highlight-bg: #CDE4FA;
	--debugLine-highlight-txt: #222;

	--traceLine-bg: #DDD;
	--traceLine-txt: #444;
	--traceLine-date-bg: #FFEBFF;
	--traceLine-date-origin-txt: #444;
	--traceLine-type-bg: #B2DAFF;
	--traceLine-type-txt: #444;
	--traceLine-origin-bg: #DDD0;
	--traceLine-highlight-bg: #CDE4FA;
	--traceLine-highlight-txt: #222;

	--lineSelected-bg: #4F4F59;
	--lineSelected-txt: #CCC;
	--lineSelected-blink-bg: #8C95AA;
	--lineSelected-date-txt: #CCC;
	--lineSelected-origin-txt: #CCC;
	--lineSelected-error-txt: #FF5454;
	--lineSelected-warn-txt: #FFC73C;
	--lineSelected-debug-txt: #F5AFFF;
	--lineSelected-trace-txt: #FFF;
	--lineSelected-info-txt: #00FF66;
	--lineSelected-keyword-txt: #FFF;
	--lineSelected-keyword-green-txt: #00BE4B;
	--lineSelected-keyword-red-txt: #FF3E3E;
	--lineSelected-highlight-bg: #CDE4FA;
	--lineSelected-highlight-txt: #222;
	--lineSelected-highlight-error-bg: #4F4F59;
	--lineSelected-highlight-error-txt: #FF3E3E;
	
	--skipped-txt: #555;
	--skipped-bg: #DDD;

	--responsive-border-top: #CCC;

	--evenLineBG: #F5F5F5;
	--oddLineBG: #FFF;
}

/* DARK THEME */
html[data-theme="dark"] {
	--bg: #222226;
	--standard-txt: #BBB;

	--navbar-bg: #E16611;
	--navbar-title-txt: #FFF;
	--navbar-txt: #EEE;
	--navbar-filter-bg: #FFF;
	--navbar-filter-placeholder-txt: #999;
	--navbar-filter-txt: #222226;
	--navbar-btn-bg: #FFF;
	--navbar-btn-icon-fill: #999;
	--navbar-btn-pause-pulse-bg: #CCC;

	--null-label-bg: #222226;
	--null-label-txt: #FF6464;
	--date-bg: #003166;
	--date-txt: #CCC;
	--info-bg: #006450;
	--info-txt: #CCC;
	--origin-bg: #404047;
	--origin-txt: #CCC;
	--keyword-txt: #FFF;
	--keyword-green-txt: #37ff64;
	--keyword-red-txt: #FF3E3E;
	--highlight-txt: #FFF;
	--highlight-bg: #0056B3;
	--highlightModel-bg: #008C8C;
	--highlightThing-bg: #800080;
	--highlightRule-bg: #A62828;

	--logLine-border-top: #555;

	--evid-bg: #FF3E3E;
	--evid-txt: #000;
	--evid-date-origin-txt: #000;
	--evid-date-origin-bg: #FF3E3E00;
	--evid-highlight-txt: #FFF;
	--evid-highlight-bg: #0056B3;

	--errorLine-bg: #FF3E3E;
	--errorLine-txt: #EEE;
	--errorLine-date-origin-txt: #DDD;
	--errorLine-date-origin-bg: #FF3E3E00;
	--errorLine-highlightScript-txt: #FFF;
	--errorLine-highlight-txt: #FFF;
	--errorLine-highlight-bg: #0056B3;

	--warnLine-bg: #FAC613;
	--warnLine-txt: #222;
	--warnLine-date-origin-bg: #FAC61300;
	--warnLine-keyword-green-txt: #438300;
	--warnLine-highlight-txt: #FFF;
	--warnLine-highlight-bg: #0056B3;

	--modelLine-bg: #035988;
	--modelLine-txt: #C7E0F2;
	--modelLine-date-origin-txt: #C7E0F2;
	--modelLine-date-origin-bg: #03598800;
	--modelLine-info-txt: #C7E0F2;
	--modelLine-keyword-green-txt: #78E900;
	--modelLine-highlight-txt: #FFF;
	--modelLine-highlight-bg: #0056B3;

	--debugLine-bg: #4B3D4D;
	--debugLine-txt: #DDD;
	--debugLine-date-bg: #003166;
	--debugLine-date-origin-txt: #DDD;
	--debugLine-type-bg: #800080;
	--debugLine-type-txt: #DDD;
	--debugLine-origin-bg: #4B3D4D00;
	--debugLine-keyword-green-txt: #019D2B;
	--debugLine-highlight-bg: #0056B3;
	--debugLine-highlight-txt: #FFF;

	--traceLine-bg: #003E80;
	--traceLine-txt: #DDD;
	--traceLine-date-bg: #003166;
	--traceLine-date-origin-txt: #DDD;
	--traceLine-type-bg: #0056B3;
	--traceLine-type-txt: #DDD;
	--traceLine-origin-bg: #003E8000;
	--traceLine-highlight-bg: #0056B3;
	--traceLine-highlight-txt: #FFF;

	--lineSelected-txt: #444;
	--lineSelected-bg: #FFF;
	--lineSelected-blink-bg: #2F2F2F;
	--lineSelected-date-txt: #444;
	--lineSelected-origin-txt: #444;
	--lineSelected-error-txt: #FF3E3E;
	--lineSelected-warn-txt: #DAA60D;
	--lineSelected-debug-txt: #E50BAE;
	--lineSelected-trace-txt: #003e80;
	--lineSelected-info-txt: #2abf4a;
	--lineSelected-keyword-txt: #000;
	--lineSelected-keyword-green-txt: #2abf4a;
	--lineSelected-keyword-red-txt: #FF3E3E;
	--lineSelected-highlight-txt: #FFF;
	--lineSelected-highlight-bg: #007dff;
	--lineSelected-highlight-error-txt: #FF3E3E;
	--lineSelected-highlight-error-bg: #FFF;

	--skipped-txt: #A2A2A2;
	--skipped-bg: #44453F;

	--responsive-border-top: #666;

	--evenLineBG: #32332C;
	--oddLineBG: #282922;
}



/* ========== Generic rules ========== */

html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
	transition: all 750ms;
	transition-delay: 0;
}
body {
	background-color:var(--bg);
	font-size: 14px;
	padding-top: 90px;
}



/* ============= Header ============= */

/* Navbar */
.navbar {
	background-color: var(--navbar-bg);
	border: 0;
	box-shadow: none; /* serve? */
}
.navbar .navbar-text {
	color: var(--navbar-txt);
	font-size: 14px;
}
.navbar .navbar-text::before {
	content: "openHAB Log Viewer (frontail)\A";
	font-size: 21px;
	white-space: pre;
	color: var(--navbar-title-txt);
}


/* Filter Input field */
.navbar input.form-control-sm {
	color: var(--navbar-filter-txt);
	background-color: var(--navbar-filter-bg);
	border: 0;
}
.navbar input::placeholder {
	color: var(--navbar-filter-placeholder-txt);
}
.navbar input:focus {
	color: var(--navbar-filter-txt);
	box-shadow: none;
	outline: 0;
	background-color: var(--navbar-filter-bg);
}


/* Play/pause and Theme buttons */
.navbar button.btn-sm {
	background-color: var(--navbar-btn-bg);
	border-color: var(--navbar-btn-bg);
	color: (--bg);
}
.navbar button.btn-sm div {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	padding-top: 0.15rem;
}
.navbar button.btn-sm svg {
	position: absolute;
	display: block;
	width: 1rem;
	height: 1rem;
}
.navbar button.btn-sm svg#pause,
.navbar button.btn-sm svg#moon {
	fill: var(--navbar-btn-icon-fill);
	opacity: 1;
}
.navbar button.btn-sm #play,
.navbar button.btn-sm #sun {
	fill: var(--navbar-btn-icon-fill); 
	opacity: 0;
}
.navbar button.btn-sm.play #play,
.navbar button.btn-sm.dark #sun {
	opacity: 1;
}
.navbar button.btn-sm.play #pause,
.navbar button.btn-sm.dark #moon {
	opacity: 0;
}
.navbar button.btn-sm #play,
.navbar button.btn-sm #moon,
.navbar button.btn-sm #pause,
.navbar button.btn-sm #sun {
	transition-property: opacity;
	transition-duration: 100ms;
}
 .navbar button.btn-sm.play {
	animation: blinking 1s infinite;
}
@keyframes blinking {
	0%, 100%  { opacity: 1; }
	50%       { opacity: 0.6; }
}


/* ========== Log lines ========== */

/* Generic Log Lines */
.log {
	background: inherit;
	border: 0;
	/*font-size: 0.95em;*/
	padding: 0;
	white-space: pre-wrap;
}
.log .line {
	color: var(--standard-txt);
	font-weight: normal;
}
.log .inner-line {
	/*font-size: 0.85em;*/
	line-height: 1.2em;
	display: inline-block;
	padding: 1px 15px;
	margin-left: 0 !important; /* serve important? */
	text-indent: 0 !important; /* serve important? */
	margin-bottom: 0;
}
.log .inner-line:empty::after {
	content: '.';
	visibility: hidden;
}



/* ========== Classes applied by RegEx ========== */

.highlight.commError, 
.highlight.null, 
.highlight.undef {
	color: var(--null-label-txt); 
	background-color: var(--null-label-bg); 
	font-weight: normal;
	padding: 1px 3px;
	border: 1px solid var(--null-label-txt);
	border-radius: 3px;
	display: inline-block;
}
.date {
	color: var(--date-txt);
	background-color: var(--date-bg);
	font-weight: normal;
	padding: 1px 3px;
	border-radius: 3px;
	display: inline-block;
}
.info {
	color: var(--info-txt);
	background-color: var(--info-bg);
	font-weight: normal;
	padding: 1px 3px;
	border-radius: 3px;
	display: inline-block;
}
.type {
	font-weight: normal;
	padding: 1px 3px;
	border-radius: 3px;
	display: inline-block;
}
.origin, 
.itemChangedEvent, 
.thingChangedEvent, 
.commandEvent {
	color: var(--origin-txt);
	font-style: italic;
	background-color: var(--origin-bg);
	font-weight: normal;
	padding: 1px 3px;
	border-radius: 3px;
	display: inline-block;
}
.keyword {
	font-weight: bold;
}
.keyword.green {
	color: var(--keyword-green-txt); 
}
.keyword.red {
	color: var(--keyword-red-txt); 
}
.highlight {
	color: var(--highlight-txt);
	background-color: var(--highlight-bg);
	font-weight: normal;
	padding: 1px 3px;
	border-radius: 3px;
	display: inline-block;
}
.highlightModel {
	color: var(--highlight-txt);
	background-color: var(--highlightModel-bg);
	font-weight: normal;
	padding: 1px 3px;
	border-radius: 3px;
	display: inline-block;
}
.highlightThing {
	color: var(--highlight-txt);
	background-color: var(--highlightThing-bg);
	font-weight: normal;
	padding: 1px 3px;
	border-radius: 3px;
	display: inline-block;
}
.highlightRule {
	color: var(--highlight-txt);
	background-color: var(--highlightRule-bg);
	font-weight: normal;
	padding: 1px 3px;
	border-radius: 3px;
	display: inline-block;
}
.highlightScript {
	color: var(--highlight-txt);
	font-weight: normal;
	display: inline-block;
}
.marked {
	color: var(--keyword-txt);
}
.noKeyword {
	color: var(--standard-txt);
	font-weight: normal;
}



/* ========== Special Lines ========== */

/* .logLine */
.log .line.logLine {
	text-align: right; 
	border-top: 1px solid var(--logLine-border-top); 
	color: var(--standard-txt);
}


/* .evid (.errorLine + .warnLine) */
.log .line.evid {
	padding: 5px 0; 
	margin: 6px 0 6px 0; 
	border-radius: 5px;
}
.log .line.evid .date {
	color: var(--evid-date-origin-txt);
	background-color: var(--evid-date-origin-bg); 
}
.log .line.evid .origin,
.log .line.evid .itemChangedEvent, 
.log .line.evid .thingChangedEvent, 
.log .line.evid .commandEvent {
	color: var(--evid-date-origin-txt);
	background-color: var(--evid-date-origin-bg); 
	font-style: italic;
}
.log .line.evid .highlight {
	color: var(--evid-highlight-txt);
	background-color: var(--evid-highlight-bg);
}
.log .line.evid .marked {
	color: var(--evid-txt);
	font-weight: bold;
}
.log .line.evid .noKeyword {
	color: var(--evid-txt);
	font-weight: normal;
}


/* .modelLine */
.log .line.modelLine {
	color: var(--modelLine-txt);
	background-color: var(--modelLine-bg); 
	border-radius: 5px;
	margin: 5px 0;
}
.log .line.modelLine .date {
	color: var(--modelLine-date-origin-txt);
	background-color: var(--modelLine-date-origin-bg); 
}
.log .line.modelLine .origin,
.log .line.evid .itemChangedEvent, 
.log .line.evid .thingChangedEvent, 
.log .line.evid .commandEvent {
	color: var(--modelLine-date-origin-txt);
	background-color: var(--modelLine-date-origin-bg); 
	font-style: italic;
}
.log .line.modelLine .info {
	color: var(--modelLine-info-txt);
}
.log .line.modelLine .green {
	color: var(--modelLine-keyword-green-txt);
}
.log .line.modelLine .highlight {
	color: var(--modelLine-highlight-txt);
	background-color: var(--modelLine-highlight-bg);
}
.log .line.modelLine .noKeyword,
.log .line.modelLine .marked {
	color: var(--modelLine-txt);
}


/* .debugLine */
.log .line.debugLine {
	color: var(--debugLine-txt); 
	background-color: var(--debugLine-bg); 
	border-radius: 5px;
	margin: 1px 0;
}
.log .line.debugLine .type {
	color: var(--debugLine-type-txt);
	background-color: var(--debugLine-type-bg);
}
.log .line.debugLine .date {
	color: var(--debugLine-date-origin-txt);
	background-color: var(--debugLine-date-bg); 
}
.log .line.debugLine .origin,
.log .line.debugLine .itemChangedEvent, 
.log .line.debugLine .thingChangedEvent, 
.log .line.debugLine .commandEvent {
	color: var(--debugLine-date-origin-txt);
	background-color: var(--debugLine-origin-bg);
	font-style: normal;
}
.log .line.debugLine .green {
	color: var(--debugLine-keyword-green-txt);
}
.log .line.debugLine .highlight {
	color: var(--debugLine-highlight-txt);
	background-color: var(--debugLine-highlight-bg);
}
.log .line.debugLine .noKeyword,
.log .line.debugLine .marked {
	color: var(--debugLine-txt);
}


/* .errorLine */
.log .line.errorLine { 
	color: var(--errorLine-txt); 
	background-color: var(--errorLine-bg);
}
.log .line.evid.errorLine .type {
	color: var(--errorLine-txt);
}
.log .line.evid.errorLine .date{
	color: var(--errorLine-date-origin-txt);
	background-color: var(--errorLine-date-origin-bg); 
}
.log .line.evid.errorLine .origin,
.log .line.evid.errorLine .itemChangedEvent, 
.log .line.evid.errorLine .thingChangedEvent, 
.log .line.evid.errorLine .commandEvent {
	color: var(--errorLine-date-origin-txt);
	background-color: var(--errorLine-date-origin-bg); 
	font-style: italic;
}
.log .line.evid.errorLine .highlightScript {
	color: var(--errorLine-highlightScript-txt);
}
.log .line.evid.errorLine .green, 
.log .line.evid.errorLine .red {
	color: var(--errorLine-highlight-txt);
}
.log .line.evid.errorLine .highlight {
	color: var(--errorLine-highlight-txt);
	background-color: var(--errorLine-highlight-bg);
}
.log .line.evid.errorLine .noKeyword,
.log .line.evid.errorLine .marked {
		color: var(--errorLine-txt);
}


/* warnLine */
.log .line.warnLine {
	color: var(--warnLine-txt);
	background-color: var(--warnLine-bg); 
}
.log .line.warnLine .date {
	color: var(--warnLine-date-origin-txt);
	background-color: var(--warnLine-date-origin-bg); 
}
.log .line.warnLine .origin,
.log .line.warnLine .itemChangedEvent, 
.log .line.warnLine .thingChangedEvent, 
.log .line.warnLine .commandEvent {
	color: var(--warnLine-date-origin-txt);
	background-color: var(--warnLine-date-origin-bg); 
	font-style: italic;
}
.log .line.evid.warnLine .type {
	color: var(--warnLine-txt);
}
.log .line.evid.warnLine .green {
	color: var(--warnLine-keyword-green-txt);
}
.log .line.evid.warnLine .highlight {
	color: var(--warnLine-highlight-txt);
	background-color: var(--warnLine-highlight-bg);
}
.log .line.evid.warnLine .noKeyword,
.log .line.evid.warnLine .marked {
	color: var(--warnLine-txt);
}


/* .traceLine */
.log .line.traceLine {
	color: var(--traceLine-txt);
	background-color: var(--traceLine-bg);
	border-radius: 5px;
	margin: 1px 0;
}
.log .line.traceLine .type {
	color: var(--traceLine-type-txt);
	background-color: var(--traceLine-type-bg);
}
.log .line.traceLine .date {
	color: var(--traceLine-date-origin-txt);
	background-color: var(--traceLine-date-bg); 
}
.log .line.traceLine .origin,
.log .line.traceLine .itemChangedEvent, 
.log .line.traceLine .thingChangedEvent, 
.log .line.traceLine .commandEvent {
	color: var(--traceLine-date-origin-txt);
	background-color: var(--traceLine-origin-bg); 
	font-style: normal;
}
.log .line.traceLine .highlight {
	color: var(--traceLine-highlight-txt);
	background-color: var(--traceLine-highlight-bg);
}
.log .line.evid.traceLine .noKeyword,
.log .line.evid.traceLine .marked {
	color: var(--traceLine-txt);
}


/* .skippedCountLine */
.log .line.skippedCountLine .inner-line {
    padding-left: 5px;
}
.log .line.skippedCountLine .skippedCount {
	display: block;
	color: var(--skipped-txt);
	background-color: var(--skipped-bg);
	border-radius: 5px;
	padding: 4px 10px;
	margin: 10px 0;
	animation: blinkingSkipped 1s infinite;
}
@keyframes blinkingSkipped {
	0%, 100%  { opacity:1; }
	50%       { opacity:0.7; }
}



/* ========== Line selected ========== */

.log .line-selected {
	color: var(--lineSelected-txt) !important;
	background-color: var(--lineSelected-bg) !important;
	animation-timing-function: ease-in-out;
	animation: bgColor 0.1s 2;
}
@keyframes bgColor {
	0%   { background-color: var(--lineSelected-blink-bg); }
	100% { background-color: var(--lineSelected-bg); }
}
.log .skippedCountLine.line-selected {
	background-color: var(--bg) !important;
	animation: none;
}
.log .line.line-selected .date {
	color: var(--lineSelected-date-txt) !important;
	background-color: var(--lineSelected-bg) !important;
}
.log .line.line-selected .origin,
.log .line.line-selected .itemChangedEvent, 
.log .line.line-selected .thingChangedEvent, 
.log .line.line-selected .commandEvent {
	color: var(--lineSelected-origin-txt) !important;
	background-color: var(--lineSelected-bg) !important;
}
.log .line.line-selected .error {
	color: var(--lineSelected-error-txt) !important;
	background-color: var(--lineSelected-bg) !important;
}
.log .line.line-selected .warn {
	color: var(--lineSelected-warn-txt) !important;
	background-color: var(--lineSelected-bg) !important;
}
.log .line.line-selected .debug {
	color: var(--lineSelected-debug-txt) !important;
	background-color: var(--lineSelected-bg) !important;
}
.log .line.line-selected .trace {
	color: var(--lineSelected-trace-txt) !important;
	background-color: var(--lineSelected-bg) !important;
}
.log .line.line-selected .info {
	color: var(--lineSelected-info-txt) !important;
	background-color: var(--lineSelected-bg) !important;
}
.log .line.line-selected .green {
	color: var(--lineSelected-keyword-green-txt) !important;
}
.log .line.line-selected .red {
	color: var(--lineSelected-keyword-red-txt) !important; 
}
.log .line.line-selected .highlight {
	color: var(--lineSelected-highlight-txt) !important;
	background-color: var(--lineSelected-highlight-bg) !important;
}
.log .line.line-selected .highlight.commError, 
.log .line.line-selected .highlight.null, 
.log .line.line-selected .highlight.undef {
    color: var(--lineSelected-highlight-error-txt) !important;
    background-color: var(--lineSelected-highlight-error-bg) !important;
}
.log .line.line-selected .marked {
	color: var(--lineSelected-keyword-txt) !important;
	font-weight: bold;
}
.log .line.line-selected .noKeyword {
	color: var(--lineSelected-txt) !important;
}



/* ========== Media Queries ========== */

@media screen and (max-width: 768px) {
	.log .line {		
		padding: 3px 0 7px 0;
		border-top: 1px solid var(--responsive-border-top);
	}
	.log .line.line-selected {		
		border-top: 1px solid var(--lineSelected-bg);
	}
	.log .inner-line {
		padding: 3px 10px;
	}
	.log .line.logLine,
	.log .line.modelLine,
	.log .line.debugLine,
	.log .line.traceLine,
	.log .line.evid,
	.log .line.evid.line-selected {		
		border-top: 0;
	}
	.log .line.logLine {
		border-top: 0;
		padding-bottom: 35px;
		text-align: center;
	}
	.date {
		display: inline-block;
	}
	.origin {
		display: inline-block;
	}
}



/* ========== Option to use background color alternating rows ========== */

/*
.log .line:nth-child(even) {
	background-color: var(--evenLineBG);
}
.log .line:nth-child(odd),
.log .line.logLine {
	background-color: var(--oddLineBG);
}
*/