@import "../../../assets/css/_structure.less";

/*
 * color
 */
@color-blue:		rgb(0, 132, 176);	// fresh
@color-green:   rgb(0, 163, 86);  // hope
@color-grey:		rgb(77, 77, 76);	// reboot

@color-grey-darkest:     darken(@color-grey, 20%);
@color-grey-darker:      darken(@color-grey, 10%);
@color-grey-lighter:    lighten(@color-grey, 20%);
@color-grey-lightest:   lighten(@color-grey, 40%); // highlight
@color-grey-readable:   lighten(@color-grey, 50%);
@color-grey-readable-focused:    lighten(@color-grey, 75%);

// often configured values (and their defaults):
@brand-primary:         @color-blue;
@text-color:            @color-grey-readable;

@link-color:            @color-blue;
@link-hover-color:      @color-green;

@color-nav-icons: mix(@color-green, @color-blue, 75%);

/*
 * navbar
 *
 * reminder, do not mess so much with the navbar because boostrap nav
 * is hard and will kick your butt on mobile
 */
@navbar-height:         70px;
@navbar-default-bg:     black;
@navbar-default-border: black;

@navbar-default-link-color:       white;
@navbar-default-link-hover-color: @link-hover-color;

/*
 * buttons
 */
@btn-font-weight:                600;
a.btn, input.btn, .btn-primary {
	text-transform: uppercase;
	color: black;
}
a.btn:hover, input.btn:hover {
	color: @color-grey-readable-focused;
}

@btn-default-color:              @color-grey;
@btn-default-bg:                 @color-blue;
@btn-default-border:             @color-grey-darker;

@btn-primary-color:              @color-grey;
@btn-primary-bg:                 @color-green;
@btn-primary-border:             @color-grey-darker;

/*
 * font
 */
@import url("/configs/conferences/35c3/assets/montserrat/Montserrat.css");

.font-headline {
	color: @color-grey;
	font-family: 'Montserrat', sans-serif;
  font-weight: 900; /* black*/
	text-transform: uppercase;
}

.font-sub-line {
	color: @color-grey;
	font-family: 'Montserrat', sans-serif;
  font-weight: 400; /* black*/
	text-transform: uppercase;
}

.font-running-text {
	color: @color-grey-readable;
	font-family: 'Montserrat', sans-serif;
  font-weight: 400; /* black*/
}


/*
 * Border specials
 */
.border-resistor-2px-bottom-right {
			border-image:
				url("/configs/conferences/35c3/assets/bg-resistor.gif")  /* source */
				200 200 e('/')                    /* slice */
				200px 200px e('/')    /* width */
				1rem round space;                  /* repeat */
}

/*
 * style
 */

body {
	background-color: black;
	padding: @navbar-height 0;

	.font-running-text();
	font-size: 13pt;

	@media (max-width: 498px) { /* when the navbar breaks */
		padding: 165px 0;
	}
}

nav.navbar {
	.navbar-brand {
		font-size: 16pt;
		letter-spacing: 0.2px;
		color: white;
	}

	.navbar-right {
		text-align: right;

		.btn-ssl, a.feedback, a.releases, a.about {
			color: @color-nav-icons;
			background-color: transparent;
			border-color: @color-nav-icons;

			&:hover {
				color: black;
				background-color: @color-nav-icons;
				border-color: @color-nav-icons;
			}
		}

		.btn-ssl.btn-warning {
			color: grey;
			background: transparent;
			border-color: grey;
		}
	}

	&:after {
		display: block;
		height: 2px;
		padding-bottom: 2px;
		background-image: linear-gradient(@color-blue 10%, @color-green 90%);
	}
}

h1,
h2,
h3,
body.overview .room a.title,
body.overview .panel-primary a,
.navbar-brand,
.panel-heading,
.panel-default > .panel-heading,
.nav.nav-tabs {
	.font-headline()
}

h4 {
	.font-sub-line()
}

.banner {
	h1 {
		display: none;
	}

	img {
		display: none;
	}

	@media (min-width: 1730px) {
		img.block {
			width: 15%;
			margin: 20px;
			position: fixed;
			display: block;
		}

		&:after {
			content: '';
			display: block;
			height: 30px;
		}
	}

	@media (max-width: 1729px) {
		img.inline {
			display: inline-block;
			width: 55%;
			padding: 30px 0 15px 0;
		}

		text-align: center;
	}

	@media (max-width:@screen-sm-max) {
		img.inline {
			width: 75%;
		}
	}

	@media (max-width:@screen-xs-max) {
		img.inline {
			width: 90%;
		}
	}
}

.well {
	h1, h2, h3, h4 {
		color: @color-grey-lighter;
	}

	background-color: @color-grey-darker;
}

/*
 * Panel gradient configuration
 *
 */
.panel {
	border: none;
	background-color: black;
	background-image: linear-gradient(120deg, @color-blue, @color-green);
	padding: 2px;

	.panel-heading {
		border: none;
		background-color: black;
		// to test gradient use:
		//background-color: transparent;
	}

	.panel-body {
		background-color: black;
		// test gradient:
		//background-color: transparent;
	}
}

/* let the gratient go over two panels horizontally, child 1 and 2, 3 and 4, and so on */
/* attention, clearfix for WIDE rooms/panels are a child too */
.room-group .room:nth-child(1) .panel {
	background-image: linear-gradient(80deg, @color-blue, @color-green 200%);
}

.room-group .room:nth-child(2) .panel {
	background-image: linear-gradient(80deg, @color-blue -60%, @color-green);
}

.room-group .room:nth-child(3) .panel {
	background-image: linear-gradient(80deg, @color-blue, @color-green 200%);
}

.room-group .room:nth-child(4) .panel {
	background-image: linear-gradient(80deg, @color-blue -60%, @color-green);
}

.room-group .room:nth-child(5) .panel {
	background-image: linear-gradient(80deg, @color-blue, @color-green 200%);
}

.room-group .room:nth-child(6) .panel {
	background-image: linear-gradient(80deg, @color-blue -60%, @color-green);
}

.room-group .room:nth-child(7) .panel {
	background-image: linear-gradient(80deg, @color-blue, @color-green 200%);
}

.room-group .room:nth-child(8) .panel {
	background-image: linear-gradient(80deg, @color-blue -60%, @color-green);
}

div.row.recordings div:nth-child(2) .panel {
	background-image: linear-gradient(80deg, @color-blue, @color-green 200%);
}

/* gradient for wide panels is "normal" */
.room-group .room.wide .panel {
	background-image: linear-gradient(80deg, @color-blue, @color-green);
}


/*
 * NO RELIVE THEN:
 *div.row.recordings div:nth-child(2) .panel {
 *	background-image: linear-gradient(80deg, @color-blue, @color-green);
 *}
 */

div.row.recordings div:nth-child(3) .panel {
	background-image: linear-gradient(80deg, @color-blue -60%, @color-green);
}

/*
 * main page
 */

.overview {
	a {
		color: @color-grey-readable;
	}

	.room {
		.panel-body {
			min-height: 190px;
		}

		&:hover {
			.panel-title {
				color: @color-grey-readable-focused;
			}

			.panel-body {
				.program-schedule .current-talk {
					&, span.t {
						color: @color-grey-readable-focused;
					}
				}
				.program-schedule .next-talk {
					&, span.t {
						color: @color-grey-darker;
					}
				}
			}
		}
	}

	.room:not(.has-preview) {
		.panel-body {
			.program-schedule {
				span.t {
					// make text in non-preview panels fullwidth or otherwise
					// they stick together like rice
					display: block;
				}
			}
		}
	}

	.recordings {
		h2 {
			span {
				display: none;
			}

			&:after {
				content: 'Recorded memories';
			}
		}

		.panel {
			&:hover {
				.panel-body a {
					color: @color-grey-lightest;
				}
			}
		}
	}
}

nav {
	.nav-tabs {
		border: none;
		background-color: black;
		background-image: linear-gradient(120deg, @color-blue, @color-green);
		padding: 2px;

		& > {
			background-color: black;
		}

		a {
			color: @color-grey;
		}
	}
}

body .schedule {
	.block {
		&.pause, &.optout {
			background-color: @color-grey-lightest;
			background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);

			h3 {
				color: @color-grey-lighter;
			}
		}

		h3 {
			font-size: 16px;
			color: @color-grey-lightest;
		}

		h4 {
			.font-sub-line();
			color: @color-blue;
			font-weight: 500;
		}

		h5 {
			color: @color-grey-lighter;
		}
	}

	.room.highlight .block {
		h3 {
			color: @color-grey-darker;
		}

		h5 {
			color: @color-grey;
		}
	}

	.now span  {
		right: -33px;
		top: -2px;
		font-weight: bold;
	}
}

.feedback-form, .embed-form {
	label {
		.font-sub-line();
		font-size: 16px;
		color: @color-grey-readable;
	}
}

footer {
	color: darken(@color-green, 5%);
}

body.feedback-read {
	.table-striped > tbody > tr:nth-of-type(2n+1) {
		background-color: #202020;
	}

	.table-hover > tbody > tr:hover {
		background-color: #303030;
	}
}