main.less

@bg-plain: white;
@bg-highlight: #f5e6c3;
@bg-highlight-more: #f0d79d;

@fg-lighter: #ccc5bb;
@fg-light: #88847d;
@fg-light-in-box: #736f68;
@fg-plain: black;
@fg-highlight: #800000;

@border-radius: 5px;
@border-normal: 2px solid @fg-highlight;
@border-light: 2px solid @fg-lighter;
@border-heavy: 5px solid @fg-highlight;

@page-margin: 8px;
@side-width: 200px;
@side-margin: 20px;
@time-width: 65px;
@star-width: 40px;
@main-width: 600px;
@full-width: (@time-width + @star-width + @main-width);

@icon-url: url('icons.png');
.icon(@x, @y, @w, @h) {
	background: @icon-url @x @y no-repeat;
	width: @w;
	height: @h;
}
.icon-comment()    { .icon(  0px, -64px, 14px, 14px); }
.icon-import()     { .icon(-15px, -64px, 11px, 10px); }
.icon-export()     { .icon(-27px, -64px, 13px, 10px); }
.icon-alert-bg()   { .icon(  0px, -79px, 14px, 14px); }
.icon-alert-fg()   { .icon(-15px, -79px, 14px, 14px); }
.icon-trash()      { .icon(-30px, -78px, 12px, 15px); }
.icon-refresh()    { .icon(  0px, -94px, 39px, 40px); }
.icon-ios-share()  { .icon(  0px, -67px, 10px, 14px); background-size: 25px; }
.icon-permalink()  { .icon(-21px,-135px, 17px, 17px); }


@import "fonts.less";


html { .font-normal; color: @fg-plain; background: @bg-plain; width: 100%; overflow-y: scroll; }
body { margin: @page-margin; }

strong, b { .font-heavy; }
h1, h2, h3, h4, h5, .new_day { .font-title; }

h1 {
	font-size: 25px; margin: 0 0 8px 0; padding: 0;
	a { text-decoration: none; }
}

hr { position: relative; z-index: 2; width: 100%; margin: 0; border: none; padding: 0; height: 2px; background: @fg-highlight; }

a { color: @fg-plain; outline: 0; }
.js-link { text-decoration: underline; cursor: pointer; }

form { position: relative; clear: left; z-index: 1; overflow: auto; }
input {
	margin: 0 4px 4px 0;
	border: @border-light;
	border-radius: @border-radius;
	padding: 3px;
	background: @bg-plain;
}
input[type="text"] { box-shadow: none !important; }


.discreet { .font-small(); color: @fg-light-in-box; }
.disabled { color: @fg-lighter !important; cursor: auto !important; }
.selected { .font-heavy; border-color: @fg-highlight !important; }
.hint {
	position: relative;
	z-index: 3;
	clear: left;
	max-width: @full-width;
	background: @bg-plain;
	color: @fg-light;
	font-size: 0.8em;
	padding-top: 5px;
}

.popup-wrap {
	position: fixed;
	z-index: 9;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
	background-color: @bg-plain;
	background: rgba(255, 255, 255, 0.85);
}
.popup-title {
	.font-title;
	font-size: 1.5em;
	margin-top: 20px;
}
.popup {
	display: none !important;
	.popup-wrap & { display: inline-block !important; }
	position: relative;
	top: 20px;
	left: 0; right: 0;
	margin: auto;
	max-width: 90%;
	max-height: 84%;
	overflow: auto;
	border: @border-normal;
	border-radius: @border-radius;
	padding: 5px;
	text-align: left;
	background: @bg-plain;
	background: rgba(255, 255, 255, 0.9);
}
.popup-title + .popup { top: 0; }
img.popup { position: absolute; top: 0; bottom: 0; }
ul.popup, .popup ul {
	width: 300px;
	list-style-type: none;
	margin-top: 0;
	li {
		width: 150px;
		display: inline-block;
		padding-bottom: 5px;
		line-height: 1.0;
		cursor: pointer;
	}
}


.filters {
	position: relative;
	z-index: 4;
	clear: both;
	padding: 20px 0;
	max-width: @full-width;
	text-align: center;
	background: @bg-plain;
	> * { padding-left: @side-margin; }
	ul { list-style-type: none; margin-top: 0; }
	li { cursor: pointer; }
}

@import "head.less";
@import "item.less";

#main p { white-space: pre-line; }
#info_view p { white-space: initial; }

.view { display: none; }

@import "star.less";
@import "prog.less";
@import "part.less";
@import "info.less";

@media print { #banner, #prog_lists, #search, .item_expander { display: none !important; } }