verdaccio/lib/GUI/css/main.less

@import "../../../node_modules/helpers.less/helpers.less";
@import "./markdown.less";
@import "./highlight.js.less";
@import "./fontello.less";

/*** Main Styles ***/
body {
	margin: 0;
	font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, Sans-Serif;

	* {
		box-sizing: border-box;
	}
}

a {
	text-decoration: none;

	&:visited {
		text-decoration: none;
		color: #0D5AFF;
	}

	&:hover {
		text-decoration: underline;
	}
}

.npm-red {
	color: #cc3d33;
}

.center {
	text-align: center;
}

@contentWidth: 880px;
@headerPadding: 10px;
@headerHeight: 165px;
@headerLogoSetupHeight: 80px;

header {
	position: absolute;
	height: @headerHeight;
	width: 100%;
	min-width: 600px;
	top: 0;
	left: 0;
	right: 0;
	background: #FFF;
	z-index: 1;

	.header-container {
		max-width: @contentWidth + @headerPadding*2;
		margin: 0 auto;
		height: @headerLogoSetupHeight;

		&:first-child {
			position: relative;
			top: 18px;
		}

		&:last-child {
			height: auto;
		}

		.logo-container {
			float: left;
			margin: 0 auto;

			#logo {
				height: @headerLogoSetupHeight;
				display: block;
			}
		}

		.registry-info {
			float: right;

			/*** Setup ***/
			.setup {
				background: #DB4141;
				padding: 15px 20px;
				display: inline-block;
				.border-radius(4px);
				text-align: left;
				color: #FFF;
				height: @headerLogoSetupHeight;
				box-sizing: border-box;
				line-height: 1.4em;

				code {
					font-family: Consolas, monaco, monospace;
				}
			}
		}

		@media (max-width: 540px) {
			.registry-info,
			.logo-container {
				float: none;
			}
		}
	}
}

#content {
	position: absolute;
	top: @headerHeight;
	right: 0;
	bottom: 0;
	left: 0;
	max-width: @contentWidth + @headerPadding * 2;
	margin: 0 auto;

	overflow: hidden;
	overflow-y: auto;

	/*** Package Entries ***/
	.entry {
		.transition(height .3s);
		padding: 12px 15px 15px;
		overflow: hidden;
		border-bottom: 1px solid #E7E7E7;

		&:last-child {
			border-bottom: none;
		}

		&:nth-child( even ) {
			background: #F3F3F3;
		}

		.title {
			margin: 0 0 5px;
		}

		.description {
			margin: 0 0 0 9px;
			font-size: 13px;
		}

		.name:hover {
			text-decoration: none;
		}

		.name:before {
			margin: 0;
			margin-left: -10px;
			.transformTransition(.2s);
		}

		&.open .name:before {
			.rotate(90deg);
		}

		.version {
			font-size: 16px;
			color: #666;
		}

		.author {
			font-size: 16px;
			float: right;
			color: #666;
		}

		p {
			margin: 0;
		}

		.readme {
			font-size: 14px;
			margin-top: 10px;
			background: #FFF;
			padding: 10px 12px;
			.border-radius(3px);
		}
	}
}

h1 {
	text-align: center;

	a, a:visited {
		color: black;
	}
}

/*** Search Box ***/
#search-form {
	float: right;

	@media (max-width: 540px) {
		float: none;
		margin-top: 6px;
	}

	@height: 30px;

	input, button {
		margin: 0;
		vertical-align: top;
		border: 1px solid #CCC;

		&:focus {
			outline: none;
		}
	}

	input {
		width: 200px;
		height: @height;
		.border-box;
		padding: 0 5px;
		font-size: 16px;
		border-right: 0;
	}

	button {
		height: @height;
		width: @height;
		margin: 0;
		border-left: 0;
		background: #FFF;
		cursor: pointer;
		font-size: 16px;
		color: #999;
	}
}

/*** Heading ***/
h2 {
	border-bottom: 6px solid #424242;
	margin: 40px 0 0;
	padding: 0 @headerPadding 10px;
}

/*** Search Results ***/
.state-search #all-packages {
	display: none;
}

.search-ajax {
	display: block;
	margin: 50px auto;
}

.no-results {
	text-align: center;
	margin: 50px 0;
	color: #888;

	big {
		font-size: 38px;
		margin-bottom: 8px;
	}

	code {
		font-size: 1.2em;
	}
}

.clearfix{
  zoom:1;

	&:before,
	&:after {
		content:"";
		display:table;
	}

	&:after {
		clear: both;
	}
}