django_coreprotect/static/coreprotect/css/main.less

/*
 * Defaults, will be overridden by javascript
 */
@font: #444444;
@bg: #E7E7E2;

@light: #eeeeee;
@medium: #dbdbd6;
@dark: #c2c2bd;
@accent: #ff6139;

@border: #aaaaaa;
@link: #556677;
@error: #ff6358;

/*
 * Global variables
 */
@fonts: Ubuntu, Arial, Helvetica, Sans-serif;
@fontSize: 14px;

@mainWidth: 1200px;
@leftWidth: 400px;
@rightWidth: 800px;

/*
 * Default elements
 */
body, html {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	background: @bg;
	color: @font;
	font-family: @fonts;
	font-size: @fontSize;
}
a {
	text-decoration: none;
	color: @link;
}
a:hover {
	color: @font;
}

/*
 * Inputs
 */
input[type=text], input[type=password]{
	padding: 5px;
	margin: 0;
	border: 0;
	background: @medium;
	color: @font;
	font-family: @fonts;
	border-bottom: 1px solid @border;

	&:hover, &:focus {
		background: @light;
	}
}
button, input[type=submit] {
	margin: 0 2px;
	padding: 10px 0;
	width: 90px;
	border: 1px solid @border;
	background: @medium;
	color: @link;

	&:hover {
		cursor: pointer;
		color: @font;
		background: @light;
	}
	&:active {
		background: @accent;
	}
}
select {
	background: @medium;
	border: none;
	padding: 0;
	margin: 0;
	color: @font;
}
#limit-container {
	text-align: center;
	#limit {
		text-align: left;
	}
}

/*
 * Custom inputs
 */
label.custom-check {
	color: @link;
	background: @medium;
	cursor: pointer;
	border-bottom: 1px solid @border;
	height: 32px;
	width: 100%;
	display: block;

	&:hover {
		color: @font;
		background: @light;
	}
	&:active {
		background: @accent;
	}
	input[type=checkbox] {
		display: none;

		&:checked + div span {
		    background: @font;
		}
		&:checked + div {
			height: 32px;
			background: @accent;
			color: @font;
		}
	}
	div span {
		display: inline-block;
		margin: 8px;
	    width: 16px;
	    height: 16px;
	    background: @dark;
	    vertical-align: middle;
	}
}
.text-full {
	width: 179px;
}
.text-third {
	width: 53px;
}

/*
 * Header
 */
header {
	width: @mainWidth;
	background: @dark;
	border-bottom: 1px solid @border;
	margin-bottom: 10px;
	text-align: center;
	position: relative;
	
	h1 {
		padding: 10px;
		margin: 0 auto;
	}
	select {
		position: absolute;
		right: 20px;
		top: 20px;
	}
}

/*
 * Main panels
 */
#main {
	background: @dark;
	margin: 0 auto;
	width: @mainWidth;
	min-height: 100%;
	max-height: auto;
}
#left-pane {
	float: left;
	width: @leftWidth;
}
#right-pane {
	float: left;
	width: @rightWidth;
}

/*
 * Left pane
 */
#options-top {
	background: @dark;
	width: @leftWidth;
}
.option-column {
	width: @leftWidth / 2;
	float: left;
}
.option-column menu {
	margin: 5px;
	padding: 0;

	h3 {
		text-align: center;
		font-weight: bold;
		font-size: 1.2em;
		padding: 5px 0;
		margin: 0;
	}
}
#options-bottom {
	width: @leftWidth;
	margin-top: 10px;
}
#more-options-container {
	width: @leftWidth;
	float: left;
}

/*
 * Right pane
 */
#results-container {
	padding: 5px;
	margin-left: 10px;
	margin-bottom: 70px;
}
#results-table {
	width: 100%;
	font-size: 0.9em;
}

/*
 * Footer
 */
#footer {
	left: 0;
	width: @mainWidth;
	bottom: 0;
	height: 60px;
	position: fixed;
	width: 100%;
}
#footer-container {
	border-top: 1px solid @border;
	margin: 0 auto;
	background: @dark;
	width: @mainWidth;
	height: 100px;
}
#footer-info {
	text-align: center;
	line-height: 60px;
	width: 100%;
}

/*
 * JQueryUI overrides
 */
.ui-button, .ui-state-default, .ui-state-hover {
	background: @medium;
	color: @link;
	text-align: center !important;

	&:hover {
		color: @font;
		background: @light;
	}
	&:active {
		background: @accent;
	}
}
.ui-state-active, .ui-selected, .ui-selecting {
    color: @font;
	background: @accent !important;
}
.ui-slider-handle {
	background: @accent;
}

/*
 * Datepicker Overrides
 */
.ui-datepicker {
	background: @medium;
	width: 240px !important;
}
.ui-slider {
	background: @dark;
}
.ui-slider-handle {
	background: @link;
}
.ui-datepicker-calendar td a {
	text-align: center;

	&:hover {
		color: @font !important;
		background: @light !important;
	}
}

/*
 * DataTables overrides
 */
.DataTables_sort_wrapper span {
	display: none;
}
#results-table {
	margin-top: 10px;
	border-collapse: collapse;
	cursor: pointer;

	table {
		border-spacing: 0;
  		border-collapse: collapse;
	}
	th {
		border-bottom: 1px solid @border;
		padding: 5px 0;

		&[aria-sort="ascending"], &[aria-sort="descending"] {
			color: @font;
			background: @accent !important;
		}
		&:hover {
			color: @font;
			background: @light;
		}
		&:active {
			background: @accent;
		}
	}
	td {
		margin: 0;
		padding: 3px 5px;
	}
	tbody tr:hover {
		background: @light;
	}
	.odd {
		background: @medium;
	}
	.data {
		max-width: 200px;
	}
}
#results-table_length {
	display: inline-block;
	float: left;
}
#results-table_paginate {
	display: inline-block;
	text-align: center;
	margin: 0 auto;

	a {
		padding: 5px;
		margin: 2px;
	}
	& > .ui-state-disabled {
		opacity: 0.2;
	}
	span a.ui-state-disabled {
		background: @accent;
		color: @font;
	}
}

#results-table_filter {
	display: inline-block;
	float: right;

	label input {
		margin-top: -3px;
	}
}
.top {
	text-align: center;
}

/*
 * Angular
 */
.ng-invalid {
	background: @error !important;
}
.disabled {
	cursor: default;
	background: @dark !important;
}

/*
 * Miscellaneous
 */
.clearfix {
	clear: both;
}
.hidden {
	display: none;
}
.error {
	background: @error !important;
}
.message {
	text-align: center;
	padding: 5px;
	margin: 2px 0;
}

/*
 * Tooltip
 */
.tooltip {
	padding: 15px;
	color: @font;
	border: 1px solid @border;
	background: @medium;
	position: fixed;
	line-height: 1.5em;
}

/*
 * Login
 */
.login {
	border: 1px solid @border;
	width: 300px;
	margin: 50px auto;
	padding: 10px;
	text-align: center;

	h3 {
		margin: 0;
	}
	div {
		margin-top: 10px;
	}
}