OpenEPaperLink/esp32_fw/data/main.css

*{
	margin:0;
	padding:0;
	border:0;
	list-style-type: none;
	-webkit-appearance: none;
	outline: none;
	font-weight: 400;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-smooth: auto;
	-webkit-font-smoothing: antialiased;
}

html, body {
	height: 100%;
}
body {
	font-size: 12px;
	font-family: Helvetica, Arial, Verdana, sans-serif;
	line-height: 1.5;
	background-color: #e8f1f9;
	background-color: #f1f1f1;
	/*background-image: linear-gradient(315deg, #dde1ee 0%, #e8f1f9 100%);*/
}

header {
	height: 50px;
	background-color: #666;

}
.logo {
	margin: 0 auto;
	width: 50px;
	height: 50px;
	text-indent: 100px;
	overflow:hidden;
	background: url('p2000.svg') center center no-repeat;
	background-size: 50px 50px;
}

.container {

}

.blocks {
	padding: 21px 0;
	overflow-x: auto;
	text-align:center;
}
.blocks ul {
	display:table;
	margin: 0 auto;
}
.blocks ul li {
	display:table-cell;
	vertical-align:top;
	padding: 0 4px;
	position: relative;
}
.blocks ul li:nth-child(6) div.b:before, .blocks ul li:nth-child(6) div.b:after {
	content:"";
	position:absolute;
	margin-left: -5px;
	left: 50%;
	width: 0; 
	height: 0;
}
.blocks ul li:nth-child(6) div.b:before {
	top: -5px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #c30;
}
.blocks ul li:nth-child(6) div.b:after {
	bottom: -5px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #c30;
}
.blocks ul li, .blocks ul li div {

}
.blocks ul li div {
	width: 80px;
	padding: 0 4px;

}
.blocks ul li div.b {
	position:relative;
	padding: 6px 0;
	background: #fff;
}
.blocks ul li div.rxt {
	background-color: #e5f9ea;
}
.blocks ul li div.txt {
	background-color: #f9eae5;
}
.blocks ul li div.b {

}
.window {
	margin: 0 auto;
	max-width: 94%;
	background: #fff;
}

form {
padding: 3px;
}

.actionbox .dst {
	size:12em;
}
	

.actionbox input {
border: solid 1px black;
padding: 2px;
}

input.actionbox {
	border: solid 1px black;
}

ul.messages {
	padding: 12px 0;
}
ul.messages li {
	line-height: 22px;
	position: relative;
	padding: 0 12px;
}
ul.messages li.new {
	-webkit-animation-name: new;
	-webkit-animation-duration: 1400ms;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in-out;
}

ul.messages li div.message {
	padding-left: 58px;
}
ul.messages li div.date {
	position: absolute;
	left: 12px
}
span.pending {
	padding-left: 28px;
}
span.pending:before {
	content:"";
	position:absolute;
	display:inline-block;
	top: 0;
	left: 12px;
	width: 22px;
	height: 22px;
	background: url('roll.svg') center center no-repeat;
	background-size: 22px 22px;	
}







@media(max-width: 460px) {
	.messages li div, ul.messages li div.date, ul.messages li div.message {
		display:block;
		position:relative;
		padding: 0;
		left: auto;
	}
	.messages li div.message, li.pending {
		margin-bottom: 8px;
	}
	ul.messages {
		padding-bottom: 4px;
	}
}








@-webkit-keyframes new {
    0% {
        background-color: rgba(255, 255, 204, 1);
    }
    50% {
        background-color: rgba(255, 255, 204, .5);	
    }
    100% {
        background-color: rgba(255, 255, 204, 0);
    }
}