tweak homepage illustration positioning

tweak homepage illustration positioning

//
// Elemental
// ==============================

@import "../../less/elemental.less";

// Site Explicit Variables
// ------------------------------

// navigation

@nav-brand-size: 32px;
@navbar-height: 50px;

// code

@inline-code-color:              @gray;
@inline-code-bg:                 fade(@inline-code-color, 7%);

// Type
// ------------------------------

p {
	margin-bottom: 1em;
	margin-top: 0;
}
h2 { margin-top: 3em; }
h2 + .lead {
	margin-top: 0;
}
h3 { margin-top: 3em; }

// Form
// ------------------------------

.FormLabel {
	font-size: @font-size-sm;
	font-weight: @font-weight-bold;
}

// Page Wrapper
// ------------------------------

.page-wrapper {
	.display-flex();
	.flex-direction(column);
	min-height: 100vh;
}
.page-body {
	.flex-grow(1);
}

// Primary Navigation
// ------------------------------

// base

.primary-nav {
	.translate3d(0,0,0); // prevent repaints on scroll
	background-color: fade(@body-bg, 95%);
	box-shadow: 0 1px 0 fade(black, 17%);
	font-size: @font-size-sm;
	line-height: @navbar-height;
	height: @navbar-height;
	position: fixed;
	text-transform: uppercase;
	text-align: center;
	width: 100%;
	z-index: @zindex-dropdown-button + 1;
}

// item

.primary-nav__item {
	.transition( all 140ms );
	.translate3d(0,0,0);
	border-bottom: 1px solid transparent;
	color: @gray-light;
	cursor: pointer;
	display: block;
	padding: 0 1.5vw;

	&:active,
	&:hover,
	&:focus {
		color: @text-color;
		text-decoration: none;

		> .primary-nav__item-inner {
			box-shadow: inset 0 -3px 0 @brand-primary;
		}
	}

	&.active {
		color: @text-color;
		font-weight: 500;
	}
}
.primary-nav__item-inner {
	.transition( all 140ms );
	display: inline-block;

	.active > & {
		box-shadow: inset 0 -3px 0 @brand-primary;
	}
}

// brand

.primary-nav__brand {
	.square(@nav-brand-size);
	display: inline-block;
	left: 0;
	margin-top: -(@nav-brand-size / 2);
	margin-left: 1.2em;
	margin-right: 1.2em;
	position: absolute;
	top: 50%;
	vertical-align: middle;
	z-index: 2;

	&.right {
		left: auto;
		right: 0;
	}

	&.special {
		.size(87px, 65px);
		left: -15px;
		margin: 0;
		overflow: hidden;
		top: -13px;
	}
}
.primary-nav__brand-src {
	.img-responsive();
}

// trigger for the mobile menu

.primary-nav-menu-trigger {
	.transition( all 240ms );
	background: none;
	border: none;
	display: inline-block;
	padding-left: 2em;
	padding-right: 2em;
	position: relative;
	outline: none;
	z-index: 4;
	-webkit-appearance: none;

	&:focus {
		color: @gray-light;
	}
}
.primary-nav-menu-trigger-icon {
	display: inline-block;
	margin-right: 10px;
	vertical-align: middle;
}
.primary-nav-menu-trigger-label {
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	vertical-align: middle;
	text-transform: uppercase;
}

// MOBILE ONLY

@media (max-width: @screen-xs-max) {
	.primary-nav-menu {
		.square(100%);
		.transition( all 240ms );
		background-color: fade(@body-bg, 95%);
		left: 0;
		overflow: auto;
		position: fixed;
		top: 0; // account for dropshadow
		z-index: 3;

		.primary-nav__item {
			.translate3d(50px, 0, 0);
			color: @gray;
			font-size: 2em;
			font-weight: 100;
			letter-spacing: 0.25em;
			opacity: 0;

			&.active {
				color: black;
			}
		}

		// animate the nav items in
		&.is-visible .primary-nav__item {
			.transition( all 240ms cubic-bezier(0.645, 0.045, 0.355, 1) );
			.translate3d(0, 0, 0);
			opacity: 1;

			&:nth-child(1) { .transition-delay(50ms); }
			&:nth-child(2) { .transition-delay(100ms); }
			&:nth-child(3) { .transition-delay(150ms); }
			&:nth-child(4) { .transition-delay(200ms); }
			&:nth-child(5) { .transition-delay(250ms); }
			&:nth-child(6) { .transition-delay(300ms); }
			&:nth-child(7) { .transition-delay(350ms); }
		}
	}
	.primary-nav-menu-inner {
		.translate(0, -50%);
		left: 0;
		margin: 0 auto;
		position: absolute;
		right: 0;
		top: 50%;
		width: 250px;
	}
	.primary-nav-menu.is-hidden {
		visibility: hidden;
		opacity: 0;
	}
	.primary-nav-menu.is-visible {
		visibility: visible;
		opacity: 1;
	}
}

// TABLET AND UP

@media (min-width: @screen-sm) {
	.primary-nav-menu {
		display: inline-block;
	}

	// item

	.primary-nav__item {
		display: inline-block;
	}
	.primary-nav-menu-trigger {
		display: none;
	}
}

// Page Body
// ------------------------------

.page-body {
	padding: (@navbar-height * 2) 0;
}

// Page Footer
// ------------------------------

.page-footer {
	background-color: fade(@body-bg, 95%);
	box-shadow: 0 -1px 0 fade(black, 17%);
	color: @gray-light;
	padding: 2em 0;
	text-align: center;

	a {
		color: @brand-primary;

		&:hover,
		&:focus {
			color: lighten(@brand-primary, 10%);
			outline: none;
		}
	}
}
.page-footer__icon {
	font-size: 1.125em;
}

// Animation
// ------------------------------

// nav menu items

@-webkit-keyframes navMenuItems {
	from { opacity: 0; -webkit-transform: translate3d(0, 1000px, 0); }
	to { opacity: 1; -webkit-transform: none; }
}
@keyframes navMenuItems {
	from { opacity: 0; transform: translate3d(0, 1000px, 0); }
	to { opacity: 1; transform: none; }
}

// Banner Home
// ------------------------------

// base
.demo-banner {
	font-size: 16px;
	padding-bottom: 60px;
	padding-top: 60px;

	.demo-container {
		position: relative;
	}

	a {
		color: @brand-primary;

		&:hover,
		&:focus {
			color: lighten(@brand-primary, 10%);
			outline: none;
		}
	}
}

// headings
.demo-banner__heading-2 {
	font-size: 32px;
	font-weight: 300;
	// margin: 0 !important;
}

// buttons
.demo-banner__buttons {
	margin-top: 60px;
}

.Button--demo-primary {
	background: white;
	border: none;
	color: @brand-primary;
	font-size: 18px;
}
a.Button--demo-link {
	color: white;
	font-size: 18px;
	font-weight: 300;

	&:hover,
	&:focus {
		color: white;
	}
}

// lists
.demo-banner-list {
	line-height: 1.3;
	list-style: none;
	margin: 2em 0 0;
	padding: 0;

	> li {
		margin: 0 0 15px 15px;
		padding: 0 0 0 15px;
		position: relative;

		&::before {
			.square(4px);
			background-color: rgba(0, 0, 0, 0.5);
			border-radius: 50%;
			content: " ";
			left: 0;
			position: absolute;
			top: 8px;
		}
	}
}

// divider
.demo-banner-divider {
	line-height: 1;
	margin-bottom: 30px;
	margin-top: 60px;
	text-align: center;

	&::before {
		background-color: rgba(0, 0, 0, 0.1);
		content: " ";
		height: 1px;
		left: (@grid-gutter-width / 2);
		left: 0;
		position: absolute;
		right: (@grid-gutter-width / 2);
	}
}
.demo-banner-divider-inner {
	background-color: mix(@brand-primary, @body-bg, 10%);
	padding: 0 1em;
	position: relative;
	top: -.5em;
	text-transform: uppercase;
}

// nav
.demo-banner-nav__col {
	text-align: center;
}
.demo-banner-nav__item {
	display: block;
	text-align: center;

	&:hover,
	&:focus {
		text-decoration: none;

		.demo-banner-nav__label-inner {
			border-bottom-color: currentColor;
		}
	}
}
.demo-banner-nav__icon {
	margin-bottom: 1em;
}
.demo-banner-nav__label {
	color: @text-color;
}
.demo-banner-nav__label-inner {
	border-bottom: 1px solid transparent;
	display: inline-block;
}

// primary
.demo-banner--primary {
	#gradient .directional( spin(@brand-primary,7%), spin(@brand-primary,-7%), 135deg );
	background-color: @brand-primary;
	color: white;
	margin-top: -(@navbar-height);
	padding-bottom: 100px;
	padding-top: 100px;

	.demo-container {
		position: relative;
	}
	.demo-banner__heading-1 {
		color: white;
		font-size: 60px;
		margin: 0;
	}
	.demo-banner__heading-2 {
		color: white;
		opacity: .75;
	}
	@media (max-width: 480px) {
		.demo-banner__heading-1 {
			font-size: 48px;
			letter-spacing: -0.01em;
			margin-bottom: 20px;
		}
		.demo-banner__heading-2 { font-size: 30px; }
		.demo-banner__button {
			display: block;
			font-size: 16px;
			line-height: 3;
			height: auto;
		}
	}
}
.demo-banner-illustration {
	.animation( fadeIn 2s );
	.square(180px);
	background: url('../images/hero-bg.svg') no-repeat left top;
	background-size: 180px, 180px;
	left: -54px;
	position: absolute;
	top: -56px;

	@media (min-width: 481px) {
		.square(240px);
		background-size: 240px, 240px;
		left: -82px;
		top: -75px;
	}
}

// secondary
.demo-banner--secondary {
	background-color: mix(@brand-primary, @body-bg, 10%);

	.demo-banner__heading-2 {
		margin-top: 0;
	}
}

// tertiary
.demo-banner--tertiary {
	margin-bottom: -(@navbar-height * 2);

	.demo-banner__heading-2 {
		margin-top: 0;
	}
}

// points
.demo-banner-points {
	margin-top: 60px;
}

// Code examples
// ------------------------------

// base

.code-example {
	margin-bottom: 2em;
	margin-top: 2em;
}

// common

.code-example__pre,
.code-example__example {
	padding: 20px;
}

// wrap the example component(s) in a white box

.code-example__example {
	.border-top-radius(@border-radius-base);
	background-color: white;
	border: 1px solid @code-border-color;

	// remove the border radius when there's corresponding code
	&:first-child {
		.border-bottom-radius( 0 );
	}
}

// example heading to provide context if necessary

.code-example__example__heading {
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	color: @gray-light;
	font-size: @font-size-sm;
	font-weight: 500;
	margin-bottom: 20px;
	padding-bottom: 20px;
	text-transform: uppercase;
}

// format and present the code

.code-example__pre {
	background: @code-bg-color;
	border: 1px solid @code-border-color;
	border-top: none;
	margin: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;

	&:last-child {
		.border-bottom-radius( @border-radius-base );
	}
}

// format interior elements

.code-example__example-element {
	border-radius: .3em;
	padding: .5em 1.5em;
}
.code-example__example-element--block {
	& + & {
		margin-top: 1em;
	}
}
.code-example__example-element--inline {
	& + & {
		margin-top: 1em;
	}

	@media (min-width: @screen-sm) {
		display: inline-block;
		vertical-align: text-bottom;

		& + & {
			margin-left: 1em;
			margin-top: 0;
		}
	}
}
.code-example__example-element--primary-bg {
	background-color: @app-primary;
}

// inline code (not for use with Prism)

.inline-code {
	background-color: @inline-code-bg;
	border-radius: .3em;
	color: @inline-code-color;
	font-size: 90%;
	padding: 0 4px;
	white-space: nowrap;
}
.inline-code--list-item {
	display: inline-block;
	margin-top: 4px;
}

// Usage table

.usage-table {
	min-height: 1px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;

	td, th {
		line-height: 1.4;
		vertical-align: top;
	}
}

// cell types
.usage-table__prop {
	color: #266d90;
	font-family: @font-family-monospace;
	font-size: 90%;
}
.usage-table__type,
.usage-table__default {
	color: @gray-light;
	font-family: @font-family-monospace;
	font-size: 90%;
}
.usage-table__type {
	color: #bf2a5c;
	// color: darken(@app-primary, 15%);
}

.usage-table__description {
	min-width: 200px;
}

//
// Elemental
// ==============================

@import "../../less/elemental.less";

// Site Explicit Variables
// ------------------------------

// navigation

@nav-brand-size: 32px;
@navbar-height: 50px;

// code

@inline-code-color:              @gray;
@inline-code-bg:                 fade(@inline-code-color, 7%);

// Type
// ------------------------------

p {
	margin-bottom: 1em;
	margin-top: 0;
}
h2 { margin-top: 3em; }
h2 + .lead {
	margin-top: 0;
}
h3 { margin-top: 3em; }

// Form
// ------------------------------

.FormLabel {
	font-size: @font-size-sm;
	font-weight: @font-weight-bold;
}

// Page Wrapper
// ------------------------------

.page-wrapper {
	.display-flex();
	.flex-direction(column);
	min-height: 100vh;
}
.page-body {
	.flex-grow(1);
}

// Primary Navigation
// ------------------------------

// base

.primary-nav {
	.translate3d(0,0,0); // prevent repaints on scroll
	background-color: fade(@body-bg, 95%);
	box-shadow: 0 1px 0 fade(black, 17%);
	font-size: @font-size-sm;
	line-height: @navbar-height;
	height: @navbar-height;
	position: fixed;
	text-transform: uppercase;
	text-align: center;
	width: 100%;
	z-index: @zindex-dropdown-button + 1;
}

// item

.primary-nav__item {
	.transition( all 140ms );
	.translate3d(0,0,0);
	border-bottom: 1px solid transparent;
	color: @gray-light;
	cursor: pointer;
	display: block;
	padding: 0 1.5vw;

	&:active,
	&:hover,
	&:focus {
		color: @text-color;
		text-decoration: none;

		> .primary-nav__item-inner {
			box-shadow: inset 0 -3px 0 @brand-primary;
		}
	}

	&.active {
		color: @text-color;
		font-weight: 500;
	}
}
.primary-nav__item-inner {
	.transition( all 140ms );
	display: inline-block;

	.active > & {
		box-shadow: inset 0 -3px 0 @brand-primary;
	}
}

// brand

.primary-nav__brand {
	.square(@nav-brand-size);
	display: inline-block;
	left: 0;
	margin-top: -(@nav-brand-size / 2);
	margin-left: 1.2em;
	margin-right: 1.2em;
	position: absolute;
	top: 50%;
	vertical-align: middle;
	z-index: 2;

	&.right {
		left: auto;
		right: 0;
	}

	&.special {
		.size(87px, 65px);
		left: -15px;
		margin: 0;
		overflow: hidden;
		top: -13px;
	}
}
.primary-nav__brand-src {
	.img-responsive();
}

// trigger for the mobile menu

.primary-nav-menu-trigger {
	.transition( all 240ms );
	background: none;
	border: none;
	display: inline-block;
	padding-left: 2em;
	padding-right: 2em;
	position: relative;
	outline: none;
	z-index: 4;
	-webkit-appearance: none;

	&:focus {
		color: @gray-light;
	}
}
.primary-nav-menu-trigger-icon {
	display: inline-block;
	margin-right: 10px;
	vertical-align: middle;
}
.primary-nav-menu-trigger-label {
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	vertical-align: middle;
	text-transform: uppercase;
}

// MOBILE ONLY

@media (max-width: @screen-xs-max) {
	.primary-nav-menu {
		.square(100%);
		.transition( all 240ms );
		background-color: fade(@body-bg, 95%);
		left: 0;
		overflow: auto;
		position: fixed;
		top: 0; // account for dropshadow
		z-index: 3;

		.primary-nav__item {
			.translate3d(50px, 0, 0);
			color: @gray;
			font-size: 2em;
			font-weight: 100;
			letter-spacing: 0.25em;
			opacity: 0;

			&.active {
				color: black;
			}
		}

		// animate the nav items in
		&.is-visible .primary-nav__item {
			.transition( all 240ms cubic-bezier(0.645, 0.045, 0.355, 1) );
			.translate3d(0, 0, 0);
			opacity: 1;

			&:nth-child(1) { .transition-delay(50ms); }
			&:nth-child(2) { .transition-delay(100ms); }
			&:nth-child(3) { .transition-delay(150ms); }
			&:nth-child(4) { .transition-delay(200ms); }
			&:nth-child(5) { .transition-delay(250ms); }
			&:nth-child(6) { .transition-delay(300ms); }
			&:nth-child(7) { .transition-delay(350ms); }
		}
	}
	.primary-nav-menu-inner {
		.translate(0, -50%);
		left: 0;
		margin: 0 auto;
		position: absolute;
		right: 0;
		top: 50%;
		width: 250px;
	}
	.primary-nav-menu.is-hidden {
		visibility: hidden;
		opacity: 0;
	}
	.primary-nav-menu.is-visible {
		visibility: visible;
		opacity: 1;
	}
}

// TABLET AND UP

@media (min-width: @screen-sm) {
	.primary-nav-menu {
		display: inline-block;
	}

	// item

	.primary-nav__item {
		display: inline-block;
	}
	.primary-nav-menu-trigger {
		display: none;
	}
}

// Page Body
// ------------------------------

.page-body {
	padding: (@navbar-height * 2) 0;
}

// Page Footer
// ------------------------------

.page-footer {
	background-color: fade(@body-bg, 95%);
	box-shadow: 0 -1px 0 fade(black, 17%);
	color: @gray-light;
	padding: 2em 0;
	text-align: center;

	a {
		color: @brand-primary;

		&:hover,
		&:focus {
			color: lighten(@brand-primary, 10%);
			outline: none;
		}
	}
}
.page-footer__icon {
	font-size: 1.125em;
}

// Animation
// ------------------------------

// nav menu items

@-webkit-keyframes navMenuItems {
	from { opacity: 0; -webkit-transform: translate3d(0, 1000px, 0); }
	to { opacity: 1; -webkit-transform: none; }
}
@keyframes navMenuItems {
	from { opacity: 0; transform: translate3d(0, 1000px, 0); }
	to { opacity: 1; transform: none; }
}

// Banner Home
// ------------------------------

// base
.demo-banner {
	font-size: 16px;
	padding-bottom: 60px;
	padding-top: 60px;

	.demo-container {
		position: relative;
	}

	a {
		color: @brand-primary;

		&:hover,
		&:focus {
			color: lighten(@brand-primary, 10%);
			outline: none;
		}
	}
}

// headings
.demo-banner__heading-2 {
	font-size: 32px;
	font-weight: 300;
	// margin: 0 !important;
}

// buttons
.demo-banner__buttons {
	margin-top: 60px;
}

.Button--demo-primary {
	background: white;
	border: none;
	color: @brand-primary;
	font-size: 18px;
}
a.Button--demo-link {
	color: white;
	font-size: 18px;
	font-weight: 300;

	&:hover,
	&:focus {
		color: white;
	}
}

// lists
.demo-banner-list {
	line-height: 1.3;
	list-style: none;
	margin: 2em 0 0;
	padding: 0;

	> li {
		margin: 0 0 15px 15px;
		padding: 0 0 0 15px;
		position: relative;

		&::before {
			.square(4px);
			background-color: rgba(0, 0, 0, 0.5);
			border-radius: 50%;
			content: " ";
			left: 0;
			position: absolute;
			top: 8px;
		}
	}
}

// divider
.demo-banner-divider {
	line-height: 1;
	margin-bottom: 30px;
	margin-top: 60px;
	text-align: center;

	&::before {
		background-color: rgba(0, 0, 0, 0.1);
		content: " ";
		height: 1px;
		left: (@grid-gutter-width / 2);
		left: 0;
		position: absolute;
		right: (@grid-gutter-width / 2);
	}
}
.demo-banner-divider-inner {
	background-color: mix(@brand-primary, @body-bg, 10%);
	padding: 0 1em;
	position: relative;
	top: -.5em;
	text-transform: uppercase;
}

// nav
.demo-banner-nav__col {
	text-align: center;
}
.demo-banner-nav__item {
	display: block;
	text-align: center;

	&:hover,
	&:focus {
		text-decoration: none;

		.demo-banner-nav__label-inner {
			border-bottom-color: currentColor;
		}
	}
}
.demo-banner-nav__icon {
	margin-bottom: 1em;
}
.demo-banner-nav__label {
	color: @text-color;
}
.demo-banner-nav__label-inner {
	border-bottom: 1px solid transparent;
	display: inline-block;
}

// primary
.demo-banner--primary {
	#gradient .directional( spin(@brand-primary,7%), spin(@brand-primary,-7%), 135deg );
	background-color: @brand-primary;
	color: white;
	margin-top: -(@navbar-height);
	padding-bottom: 100px;
	padding-top: 100px;

	.demo-container {
		position: relative;
	}
	.demo-banner__heading-1 {
		color: white;
		font-size: 60px;
		margin: 0;
	}
	.demo-banner__heading-2 {
		color: white;
		opacity: .75;
	}
	@media (max-width: 480px) {
		.demo-banner__heading-1 {
			font-size: 48px;
			letter-spacing: -0.01em;
			margin-bottom: 20px;
		}
		.demo-banner__heading-2 { font-size: 30px; }
		.demo-banner__button {
			display: block;
			font-size: 16px;
			line-height: 3;
			height: auto;
		}
	}
}
.demo-banner-illustration {
	.animation( fadeIn 2s );
	.square(180px);
	background: url('../images/hero-bg.svg') no-repeat left top;
	background-size: 180px, 180px;
	left: -54px;
	position: absolute;
	top: -56px;

	@media (min-width: 481px) {
		.square(240px);
		background-size: 240px, 240px;
		left: -90px;
		top: -75px;
	}
}

// secondary
.demo-banner--secondary {
	background-color: mix(@brand-primary, @body-bg, 10%);

	.demo-banner__heading-2 {
		margin-top: 0;
	}
}

// tertiary
.demo-banner--tertiary {
	margin-bottom: -(@navbar-height * 2);

	.demo-banner__heading-2 {
		margin-top: 0;
	}
}

// points
.demo-banner-points {
	margin-top: 60px;
}

// Code examples
// ------------------------------

// base

.code-example {
	margin-bottom: 2em;
	margin-top: 2em;
}

// common

.code-example__pre,
.code-example__example {
	padding: 20px;
}

// wrap the example component(s) in a white box

.code-example__example {
	.border-top-radius(@border-radius-base);
	background-color: white;
	border: 1px solid @code-border-color;

	// remove the border radius when there's corresponding code
	&:first-child {
		.border-bottom-radius( 0 );
	}
}

// example heading to provide context if necessary

.code-example__example__heading {
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	color: @gray-light;
	font-size: @font-size-sm;
	font-weight: 500;
	margin-bottom: 20px;
	padding-bottom: 20px;
	text-transform: uppercase;
}

// format and present the code

.code-example__pre {
	background: @code-bg-color;
	border: 1px solid @code-border-color;
	border-top: none;
	margin: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;

	&:last-child {
		.border-bottom-radius( @border-radius-base );
	}
}

// format interior elements

.code-example__example-element {
	border-radius: .3em;
	padding: .5em 1.5em;
}
.code-example__example-element--block {
	& + & {
		margin-top: 1em;
	}
}
.code-example__example-element--inline {
	& + & {
		margin-top: 1em;
	}

	@media (min-width: @screen-sm) {
		display: inline-block;
		vertical-align: text-bottom;

		& + & {
			margin-left: 1em;
			margin-top: 0;
		}
	}
}
.code-example__example-element--primary-bg {
	background-color: @app-primary;
}

// inline code (not for use with Prism)

.inline-code {
	background-color: @inline-code-bg;
	border-radius: .3em;
	color: @inline-code-color;
	font-size: 90%;
	padding: 0 4px;
	white-space: nowrap;
}
.inline-code--list-item {
	display: inline-block;
	margin-top: 4px;
}

// Usage table

.usage-table {
	min-height: 1px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;

	td, th {
		line-height: 1.4;
		vertical-align: top;
	}
}

// cell types
.usage-table__prop {
	color: #266d90;
	font-family: @font-family-monospace;
	font-size: 90%;
}
.usage-table__type,
.usage-table__default {
	color: @gray-light;
	font-family: @font-family-monospace;
	font-size: 90%;
}
.usage-table__type {
	color: #bf2a5c;
	// color: darken(@app-primary, 15%);
}

.usage-table__description {
	min-width: 200px;
}


Fix CSS

Fix CSS

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/maat8/mille-etangs.git/'


Improving overwrites

Improving overwrites

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/socites/beyond.git/'


Switch to an atom spinner

Switch to an atom spinner

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/torx-io/torx-dark-ui.git/'


Navigation style change

Navigation style change

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/burmat/StoryMixes.git/'


Delete mixins.less

Delete mixins.less

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/holly-luo/holly-luo.github.io.git/'


Update popover shadow style

Update popover shadow style

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/sonatra/sonatra-theme-gluon.git/'


UX-200: styling for Branches table; update to use components; update specs to reflect more complex React / DOM hierarchy

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/kzantow/blueocean-plugin.git/'


取消page-group的滚动

取消page-group的滚动

@https://github.com/sdc-alibaba/SUI-Mobile/issues/328

/* === Pages === */

// Pages animations
@pageDuration: 400ms;

.page, .page-group {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #efeff4;
    display: none;
    overflow: hidden;

    &.page-current,
    &.page-visible,
    &.page-from-center-to-left,
    &.page-from-center-to-right,
    &.page-from-right-to-center,
    &.page-from-left-to-center {
      display: block;
    }

    &.page-current {
        overflow: hidden;
    }
}

.page-group {
  display: block;
}

//Class that will trigger transition during page custom transitions (like swipe-back)
.page-transitioning {
    &, .swipeback-page-shadow {
        transition: @pageDuration;
    }
}
// From/to Right To/from Center animations
.page-from-right-to-center {
    animation: pageFromRightToCenter @pageDuration forwards;
    z-index: 2002;
}
.page-from-center-to-right {
    animation: pageFromCenterToRight @pageDuration forwards;
    z-index: 2002;
}

@keyframes pageFromRightToCenter {
    from {
        transform: translate3d(100%,0,0);
        opacity: .9;
    }
    to {
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

@keyframes pageFromCenterToRight {
    from {
        transform: translate3d(0,0,0);
        opacity: 1;
    }
    to {
        transform: translate3d(100%,0,0);
        opacity: .9;
    }
}

// From/to Center To/from Left animations
.page-from-center-to-left {
    animation: pageFromCenterToLeft @pageDuration forwards;
}
.page-from-left-to-center {
    animation: pageFromLeftToCenter @pageDuration forwards;
}

@keyframes pageFromCenterToLeft {
    from {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
    to {
        opacity: 0.5;
        transform: translate3d(-20%,0,0);
    }
}

@keyframes pageFromLeftToCenter {
    from {
        opacity: .5;
        transform: translate3d(-20%,0,0);
    }
    to {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}

/* === Pages === */

// Pages animations
@pageDuration: 400ms;

.page, .page-group {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #efeff4;
    display: none;

    &.page-current,
    &.page-visible,
    &.page-from-center-to-left,
    &.page-from-center-to-right,
    &.page-from-right-to-center,
    &.page-from-left-to-center {
      display: block;
    }

    &.page-current {
        overflow: hidden;
    }
}

.page-group {
  display: block;
}

//Class that will trigger transition during page custom transitions (like swipe-back)
.page-transitioning {
    &, .swipeback-page-shadow {
        transition: @pageDuration;
    }
}
// From/to Right To/from Center animations
.page-from-right-to-center {
    animation: pageFromRightToCenter @pageDuration forwards;
    z-index: 2002;
}
.page-from-center-to-right {
    animation: pageFromCenterToRight @pageDuration forwards;
    z-index: 2002;
}

@keyframes pageFromRightToCenter {
    from {
        transform: translate3d(100%,0,0);
        opacity: .9;
    }
    to {
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

@keyframes pageFromCenterToRight {
    from {
        transform: translate3d(0,0,0);
        opacity: 1;
    }
    to {
        transform: translate3d(100%,0,0);
        opacity: .9;
    }
}

// From/to Center To/from Left animations
.page-from-center-to-left {
    animation: pageFromCenterToLeft @pageDuration forwards;
}
.page-from-left-to-center {
    animation: pageFromLeftToCenter @pageDuration forwards;
}

@keyframes pageFromCenterToLeft {
    from {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
    to {
        opacity: 0.5;
        transform: translate3d(-20%,0,0);
    }
}

@keyframes pageFromLeftToCenter {
    from {
        opacity: .5;
        transform: translate3d(-20%,0,0);
    }
    to {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}


increase gutter size

increase gutter size

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/rohm/reviveourhearts_com_redesign.git/'


Create direction.less

Create direction.less

fatal: unable to access 'https://github.com/hazanpro/flarum-ext-rtl.git/': The requested URL returned error: 403


change font back to 13px

change font back to 13px

@import "normalize-3.0.1.less";
@import "elements-0.9.less";
@import "font-awesome-4.2.0.less";

//------------------------------------------------------------------------------
// Fonts
//------------------------------------------------------------------------------

@font-face {
  font-family: 'Open Sans Light';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/OpenSans-Light.eot');
  src: local('Open Sans Light'), local('OpenSans-Light'),
    url('../fonts/OpenSans-Light.eot') format('embedded-opentype'),
    url('../fonts/OpenSans-Light.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/OpenSans.eot');
  src: local('Open Sans'), local('OpenSans'),
    url('../fonts/OpenSans.eot') format('embedded-opentype'),
    url('../fonts/OpenSans.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/OpenSans-Semibold.eot');
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'),
    url('../fonts/OpenSans-Semibold.eot') format('embedded-opentype'),
    url('../fonts/OpenSans-Semibold.woff') format('woff');
}

// TODO: need to download the Italic .eot files

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'),
    url('../fonts/OpenSansLight-Italic.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'),
    url('../fonts/OpenSans-Italic.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'),
    url('../fonts/OpenSans-SemiboldItalic.woff') format('woff');
}

@font-face {
  font-family: 'Droid Sans Mono';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/DroidSansMono.eot');
  src: local('Droid Sans Mono'), local('DroidSansMono'),
    url('../fonts/DroidSansMono.eot') format('embedded-opentype'),
    url('../fonts/DroidSansMono.woff') format('woff');
}

.font-light(@size) {
  font-family: 'Open Sans Light';
  font-size: @size;
  font-weight: 300;
}

.font-normal(@size) {
  font-family: 'Open Sans';
  font-size: @size;
  font-weight: 400;
}

.font-bold(@size) {
  font-family: 'Open Sans';
  font-size: @size;
  font-weight: 600;
}

//------------------------------------------------------------------------------
// Variables
//------------------------------------------------------------------------------

@linkBlue: #0000ee;
@tooltipBackgroundColor: #333;

@oddColor: #e2e2e2;
@evenColor: #f1f1f1;

//------------------------------------------------------------------------------
// Tag Selectors
//------------------------------------------------------------------------------

body {
  .box-sizing();
  color: #222;
  font-family: "Open Sans";
  font-size: 16px;
  font-weight: 400;
}

code {
  font-family: "Droid Sans Mono";
}

em {
  font-style: italic;
  font-family: "Open Sans";
  font-weight: 400;
}

.clr-43e49 {
  clear: both;
}

.lrg-wrapper-cc101 {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 20px;
}

.med-wrapper-87a24 {
  margin: 0 auto;
  padding: 0 10px;
}

.sml-wrapper-7eff3 {
  margin: 0 auto;
  padding: 0 4px;
}

.header-2a8a6 {
  max-width: 1200px;
  margin: 10px auto 20px auto;
}

.footer-2137e {
  border-top: 1px solid orange;
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px 0;
}

.title-7a29c {
  .font-light(28px);
  float: left;
  margin: 0;
  padding: 0;
}

.logo-6ced3 {
  display: block;
  float: left;
  margin-right: 5px;
  width: 40px;
}

.sml-5dcf3 {
  .med-wrapper-87a24 { display: none; }
  .lrg-wrapper-cc101 { display: none; }
  .header-2a8a6, .footer-2137e { padding: 0 4px; }

  .title-7a29c {
    display: block;
    float: none;
  }

  .search-70fb8 {
    clear: both;
    display: block;
    float: none;
    margin-top: 15px;
    width: 95%;
  }

  .tooltips-label-68aa0 {
    float: none;
    margin-top: 15px;
  }
}

.med-0000a {
  .sml-wrapper-7eff3 { display: none; }
  .lrg-wrapper-cc101 { display: none; }
  .header-2a8a6, .footer-2137e { padding: 0 10px; }
}

.lrg-92b4d {
  .med-wrapper-87a24 { display: none; }
  .sml-wrapper-7eff3 { display: none; }
  .header-2a8a6, .footer-2137e { padding: 0 20px; }
}

.tooltips-label-68aa0 {
  cursor: pointer;
  display: inline-block;
  float: right;
  font-size: 14px;
  margin: 10px 15px 0 0;

  .fa {
    margin-right: 4px;
  }
}

.search-70fb8 {
  float: right;
  padding: 5px 10px;
  width: 300px;
}

.title-0b151 {
  font-family: "Open Sans";
  font-weight: 300;
  font-size: 82px;
  text-align: center;
  text-transform: none;
}

.made-6bccb {
  color: #999;
  font-family: "Helvetica";
  font-weight: 400;
  font-size: 32px;
  margin: 0 20px;
  text-align: center;
  text-transform: uppercase;
}

.js-48d1f {
  font-family: "Open Sans";
  font-size: 64px;
  font-weight: 300;
  text-align: center;
}

.simple-ef853 {
  font-family: "Open Sans";
  font-size: 124px;
  font-weight: 300;
  text-align: center;
}

.group-title-68f3c {
  border-bottom: 2px solid #ddd;
  clear: both;
  .font-bold(14px);
  margin-bottom: 20px;
  padding: 0 0 5px 0;
  text-transform: uppercase;
}

.lrg-col-left-d5f6d {
  float: left;
  margin-right: 2%;
  width: 32%;
}

.lrg-col-cntr-bb1aa {
  float: left;
  width: 32%;
}

.lrg-col-right-0f4a3 {
  float: right;
  width: 32%;
}

.med-col-left-06d5d {
  float: left;
  width: 49%
}

.med-col-right-eb5c2 {
  float: right;
  width: 49%
}

.section-31efe {
  margin-bottom: 20px;
}

.section-title-8ccf5 {
  .font-light(24px);
  margin: 0;
  margin-bottom: 15px;
  padding: 0;
}

.tbl-902f0 {
  width: 100%;
}

.tooltip-link-0e91b {
  color: #888;
  cursor: pointer;
  font-size: 12px;
  margin-left: 6px;
  vertical-align: middle;
}

.label-9e0b7 {
  color: #666;
  .font-bold(11px);
  padding: 10px;
  text-transform: uppercase;
  width: 60px;
}

.body-885f4 {
  padding: 4px 0;
}

.code(@size: 13px) {
  display: inline-block;
  font-family: "Droid Sans Mono", monospace;
  font-size: @size;
}

.literal-c3029 {
  .code();
  color: #000;
  margin-right: 10px;
}

.inside-fn-c7607 {
  .code();
  color: @linkBlue;
  cursor: pointer;
}

.inside-fn-c7607:hover {
  text-decoration: underline;
}

.fn-a8476 {
  .code();
  color: @linkBlue;
  cursor: pointer;
  margin-right: 10px;
  text-decoration: none;
}

.fn-a8476:hover {
  text-decoration: underline;
}

.row-5dec8 {
  .code();
  color: #000;
  display: block;
  line-height: 24px;
}

.odd-372e6 {
  background-color: @oddColor;
}

.even-ff837 {
  background-color: @evenColor;
}

.solo-section-d5309 {
  background-color: @oddColor;
  padding: 10px;
}

.dark-odd-7aff7 {
  background-color: #555;
}

.dark-even-6cd97 {
  background-color: #444;
}

.tooltip-53dde {
  .box-sizing();
  background: @tooltipBackgroundColor;
  color: #fff;
  margin-top: -20px;

  // NOTE: this value needs to stay in sync with
  // cljsinfo-client.tooltips/max-tooltip-width
  max-width: 360px;

  padding: 5px 10px;
  position: absolute;
  .rounded(6px);
  z-index: 10;
}

.left-arr-42ea1:after {
  right: 100%;
  top: 26px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(51, 51, 51, 0);
  border-right-color: @tooltipBackgroundColor;
  border-width: 8px;
  margin-top: -8px;
}

.right-arr-d3345:after {
  left: 100%;
  top: 26px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(51, 51, 51, 0);
  border-left-color: @tooltipBackgroundColor;
  border-width: 8px;
  margin-top: -8px;
}

.info-2e4f9 {
  .font-normal(14px);
  margin: 1em 10px;
  padding: 0;
}

.pin-0ad63 {
  // NOTE: hide the pins for now until they are functional
  display: none;

  font-size: 12px;
  position: absolute;
  top: 12px;
  right: 14px;
  .transform(rotate(45deg));
}

.exmpl-tbl-42d9f {
  margin: 10px 0;
  width: 100%;
}

.cell-e6fd2 {
  padding: 8px 10px;

  pre {
    font-family: "Droid Sans Mono";
    font-size: 12px;
    margin: 0;
    padding: 0;
  }
}

.code-72fa0 {
  font-family: "Droid Sans Mono";
  font-size: 12px;
  padding: 10px;
  vertical-align: top;

  pre {
    margin: 0;
    padding: 0;
  }
}

.right-border-c1b54 {
  border-right: 1px solid rgba(136, 136, 136, 0.4);
}

.tbl-hdr-e0564 {
  .font-bold(11px);
  color: #888;
  text-align: left;
  text-transform: uppercase;
}

.tbl-hdr-e0564 {
  padding: 5px 10px;
}

.tbl-3160a {
  margin: 15px 0;
}

@import "normalize-3.0.1.less";
@import "elements-0.9.less";
@import "font-awesome-4.2.0.less";

//------------------------------------------------------------------------------
// Fonts
//------------------------------------------------------------------------------

@font-face {
  font-family: 'Open Sans Light';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/OpenSans-Light.eot');
  src: local('Open Sans Light'), local('OpenSans-Light'),
    url('../fonts/OpenSans-Light.eot') format('embedded-opentype'),
    url('../fonts/OpenSans-Light.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/OpenSans.eot');
  src: local('Open Sans'), local('OpenSans'),
    url('../fonts/OpenSans.eot') format('embedded-opentype'),
    url('../fonts/OpenSans.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/OpenSans-Semibold.eot');
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'),
    url('../fonts/OpenSans-Semibold.eot') format('embedded-opentype'),
    url('../fonts/OpenSans-Semibold.woff') format('woff');
}

// TODO: need to download the Italic .eot files

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'),
    url('../fonts/OpenSansLight-Italic.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'),
    url('../fonts/OpenSans-Italic.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'),
    url('../fonts/OpenSans-SemiboldItalic.woff') format('woff');
}

@font-face {
  font-family: 'Droid Sans Mono';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/DroidSansMono.eot');
  src: local('Droid Sans Mono'), local('DroidSansMono'),
    url('../fonts/DroidSansMono.eot') format('embedded-opentype'),
    url('../fonts/DroidSansMono.woff') format('woff');
}

.font-light(@size) {
  font-family: 'Open Sans Light';
  font-size: @size;
  font-weight: 300;
}

.font-normal(@size) {
  font-family: 'Open Sans';
  font-size: @size;
  font-weight: 400;
}

.font-bold(@size) {
  font-family: 'Open Sans';
  font-size: @size;
  font-weight: 600;
}

//------------------------------------------------------------------------------
// Variables
//------------------------------------------------------------------------------

@linkBlue: #0000ee;
@tooltipBackgroundColor: #333;

@oddColor: #e2e2e2;
@evenColor: #f1f1f1;

//------------------------------------------------------------------------------
// Tag Selectors
//------------------------------------------------------------------------------

body {
  .box-sizing();
  color: #222;
  font-family: "Open Sans";
  font-size: 16px;
  font-weight: 400;
}

code {
  font-family: "Droid Sans Mono";
}

em {
  font-style: italic;
  font-family: "Open Sans";
  font-weight: 400;
}

.clr-43e49 {
  clear: both;
}

.lrg-wrapper-cc101 {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 20px;
}

.med-wrapper-87a24 {
  margin: 0 auto;
  padding: 0 10px;
}

.sml-wrapper-7eff3 {
  margin: 0 auto;
  padding: 0 4px;
}

.header-2a8a6 {
  max-width: 1200px;
  margin: 10px auto 20px auto;
}

.footer-2137e {
  border-top: 1px solid orange;
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px 0;
}

.title-7a29c {
  .font-light(28px);
  float: left;
  margin: 0;
  padding: 0;
}

.logo-6ced3 {
  display: block;
  float: left;
  margin-right: 5px;
  width: 40px;
}

.sml-5dcf3 {
  .med-wrapper-87a24 { display: none; }
  .lrg-wrapper-cc101 { display: none; }
  .header-2a8a6, .footer-2137e { padding: 0 4px; }

  .title-7a29c {
    display: block;
    float: none;
  }

  .search-70fb8 {
    clear: both;
    display: block;
    float: none;
    margin-top: 15px;
    width: 95%;
  }

  .tooltips-label-68aa0 {
    float: none;
    margin-top: 15px;
  }
}

.med-0000a {
  .sml-wrapper-7eff3 { display: none; }
  .lrg-wrapper-cc101 { display: none; }
  .header-2a8a6, .footer-2137e { padding: 0 10px; }
}

.lrg-92b4d {
  .med-wrapper-87a24 { display: none; }
  .sml-wrapper-7eff3 { display: none; }
  .header-2a8a6, .footer-2137e { padding: 0 20px; }
}

.tooltips-label-68aa0 {
  cursor: pointer;
  display: inline-block;
  float: right;
  font-size: 14px;
  margin: 10px 15px 0 0;

  .fa {
    margin-right: 4px;
  }
}

.search-70fb8 {
  float: right;
  padding: 5px 10px;
  width: 300px;
}

.title-0b151 {
  font-family: "Open Sans";
  font-weight: 300;
  font-size: 82px;
  text-align: center;
  text-transform: none;
}

.made-6bccb {
  color: #999;
  font-family: "Helvetica";
  font-weight: 400;
  font-size: 32px;
  margin: 0 20px;
  text-align: center;
  text-transform: uppercase;
}

.js-48d1f {
  font-family: "Open Sans";
  font-size: 64px;
  font-weight: 300;
  text-align: center;
}

.simple-ef853 {
  font-family: "Open Sans";
  font-size: 124px;
  font-weight: 300;
  text-align: center;
}

.group-title-68f3c {
  border-bottom: 2px solid #ddd;
  clear: both;
  .font-bold(14px);
  margin-bottom: 20px;
  padding: 0 0 5px 0;
  text-transform: uppercase;
}

.lrg-col-left-d5f6d {
  float: left;
  margin-right: 2%;
  width: 32%;
}

.lrg-col-cntr-bb1aa {
  float: left;
  width: 32%;
}

.lrg-col-right-0f4a3 {
  float: right;
  width: 32%;
}

.med-col-left-06d5d {
  float: left;
  width: 49%
}

.med-col-right-eb5c2 {
  float: right;
  width: 49%
}

.section-31efe {
  margin-bottom: 20px;
}

.section-title-8ccf5 {
  .font-light(24px);
  margin: 0;
  margin-bottom: 15px;
  padding: 0;
}

.tbl-902f0 {
  width: 100%;
}

.tooltip-link-0e91b {
  color: #888;
  cursor: pointer;
  font-size: 12px;
  margin-left: 6px;
  vertical-align: middle;
}

.label-9e0b7 {
  color: #666;
  .font-bold(11px);
  padding: 10px;
  text-transform: uppercase;
  width: 60px;
}

.body-885f4 {
  padding: 4px 0;
}

.code(@size: 12px) {
  display: inline-block;
  font-family: "Droid Sans Mono", monospace;
  font-size: 12px;
}

.literal-c3029 {
  .code();
  color: #000;
  margin-right: 10px;
}

.inside-fn-c7607 {
  .code();
  color: @linkBlue;
  cursor: pointer;
}

.inside-fn-c7607:hover {
  text-decoration: underline;
}

.fn-a8476 {
  .code();
  color: @linkBlue;
  cursor: pointer;
  margin-right: 10px;
  text-decoration: none;
}

.fn-a8476:hover {
  text-decoration: underline;
}

.row-5dec8 {
  .code();
  color: #000;
  display: block;
  line-height: 24px;
}

.odd-372e6 {
  background-color: @oddColor;
}

.even-ff837 {
  background-color: @evenColor;
}

.solo-section-d5309 {
  background-color: @oddColor;
  padding: 10px;
}

.dark-odd-7aff7 {
  background-color: #555;
}

.dark-even-6cd97 {
  background-color: #444;
}

.tooltip-53dde {
  .box-sizing();
  background: @tooltipBackgroundColor;
  color: #fff;
  margin-top: -20px;

  // NOTE: this value needs to stay in sync with
  // cljsinfo-client.tooltips/max-tooltip-width
  max-width: 360px;

  padding: 5px 10px;
  position: absolute;
  .rounded(6px);
  z-index: 10;
}

.left-arr-42ea1:after {
  right: 100%;
  top: 26px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(51, 51, 51, 0);
  border-right-color: @tooltipBackgroundColor;
  border-width: 8px;
  margin-top: -8px;
}

.right-arr-d3345:after {
  left: 100%;
  top: 26px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(51, 51, 51, 0);
  border-left-color: @tooltipBackgroundColor;
  border-width: 8px;
  margin-top: -8px;
}

.info-2e4f9 {
  .font-normal(14px);
  margin: 1em 10px;
  padding: 0;
}

.pin-0ad63 {
  // NOTE: hide the pins for now until they are functional
  display: none;

  font-size: 12px;
  position: absolute;
  top: 12px;
  right: 14px;
  .transform(rotate(45deg));
}

.exmpl-tbl-42d9f {
  margin: 10px 0;
  width: 100%;
}

.cell-e6fd2 {
  padding: 8px 10px;

  pre {
    font-family: "Droid Sans Mono";
    font-size: 12px;
    margin: 0;
    padding: 0;
  }
}

.code-72fa0 {
  font-family: "Droid Sans Mono";
  font-size: 12px;
  padding: 10px;
  vertical-align: top;

  pre {
    margin: 0;
    padding: 0;
  }
}

.right-border-c1b54 {
  border-right: 1px solid rgba(136, 136, 136, 0.4);
}

.tbl-hdr-e0564 {
  .font-bold(11px);
  color: #888;
  text-align: left;
  text-transform: uppercase;
}

.tbl-hdr-e0564 {
  padding: 5px 10px;
}

.tbl-3160a {
  margin: 15px 0;
}


0.x > .x / 0deg > 0

0.x > .x / 0deg > 0

fatal: unable to access 'https://github.com/malena/bedrock.git/': The requested URL returned error: 403


Take that, indian graveyard!

Take that, indian graveyard!

@darkPrimaryColor:  		#689F38;
@primaryColor:      		#8BC34A;
@accentColor:       		#CDDC39;
@backgroundColor:			#fff;
@secondaryBackgroundColor:	#f7f7f7;
@dividerColor:				#ccc;
@textColor: 				#333;

/* even worse dark theme styles. not ready yet.
@darkPrimaryColor:			#1B5E20;
@primaryColor:				#33691E;
@secondaryBackgroundColor:	#424242;
@backgroundColor: 			#212121;
@dividerColor:				#000;
@textColor: 				#eee;*/

@sidebar_width: 260px;

@import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900');

// CARL propostion to hide the package and namespace name in the class page
// They are not that useful: so either hide them or pick a style that downplay their importance
// For now, I'm experimenting with hiding them
// Feel free the remove this

.namespace_note{
	display: none;
}
.package_note{
	display: none;
}

// defines a value for the colorscheme in a way that it is picked up everywhere
.colorscheme_val(@identifier, @color) {
	.main_@{identifier},
	.main_@{identifier} a,
	.site_content .main_@{identifier} a,
	.site_content .main_@{identifier} a:visited {
		color: @color;
	}
}

// from bootstrap
.clearfix() {
	&:before,
	&:after {
		content: " ";
		display: table;

	}
	&:after {
		clear: both;

	}
}

// output css for a sink
.sink() {
	background-color: #f5f5f5;
	color: #333;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

// define an icon mapping
.assign_image(@type, @icon: @type) {
	li.@{type} {
		// list-style-image: url('@{icon}.png');
		list-style-type: none;

		&:before {
			content: "";
			background-image: url('@{icon}.png');
			padding-right: 18px;
			margin-right: 5px;
			background-repeat: no-repeat;
			background-position: center center;
		}
	}
}

.colorscheme_val(keyword, #FF8F00);
.colorscheme_val(basic_type, #1976D2);
.colorscheme_val(type, #7B1FA2);

.assign_image(errorcode);
.assign_image(enumvalue);
.assign_image(abstract_class, abstractclass);
.assign_image(abstract_method, abstractmethod);
.assign_image(creation_method, constructor);
.assign_image(static_method, staticmethod);
.assign_image(package_index, packages);
.assign_image(virtual_method, virtualmethod);
.assign_image(errordomain);
.assign_image(namespace);
.assign_image(method);
.assign_image(struct);
.assign_image(interface);
.assign_image(field);
.assign_image(class);
.assign_image(enum);
.assign_image(property);
.assign_image(abstract_property, abstractproperty);
.assign_image(virtual_property, virtualproperty);
.assign_image(delegate);
.assign_image(signal);
.assign_image(package);
.assign_image(constant);

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	color: @textColor;
	background-color: @backgroundColor;
	font-family: 'Source Sans Pro';
}

// FIXME not needed in our layout, throw it away
.site_header, .navi_hr, .main_hr, h2.main_title, h1.main_title, .site_footer {
	display: none;
}

// top bar (and sidebar)
.site_navigation {
	.clearfix();

	background-color: @primaryColor;
	border-bottom: 1px solid @darkPrimaryColor;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

	.navi_main {
		@height: 32px;
		@inner_padding: 6px;

		float: left;
		height: @height;
		padding-left: @inner_padding + 6px;
		margin: 0;
		line-height: @height;
		padding-right: @height / 2 + @inner_padding;
		background-color: @primaryColor;
		position: relative;

		&, a {
			text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
			color: white;
			font-weight: bold;
			text-decoration: none;
		}

		&:after, &:before {
			content: "";
			position: absolute;
			display: block;
			border-style: solid;
		}
		&:before {
			border-color: transparent transparent transparent @darkPrimaryColor;
			border-width: @height / 2;
			top: 0;
			right: -@height / 2;
		}
		&:after {
			border-color: transparent transparent transparent @primaryColor;
			border-width: @height / 2 - 2;
			top: 2px;
			right: -@height / 2 + 4px;
		}

		// this is our sidebar
		&:last-child {
			@top: 32px;
			@padding: 32px;

			background-color: @secondaryBackgroundColor;
			border-right: 1px solid @dividerColor;
			&, a {
				color: @textColor;
				font-weight: normal;
				font-family: monospace;
				text-shadow: none;
				text-decoration: none;
			}

			z-index: -1;
			padding: (@top + 6px) @padding @padding @padding;
			overflow: auto;
			width: @sidebar_width;
			position: fixed;
			display: block;
			left: 0;
			height: 100%;

			&:before, &:after { border-width: 0; }
		}
	}
}

.site_content {
	@description_color: #7a7a7a;
	// Stay on top with scrollbar being handled properly
	position:absolute;
	top: 33px;
	left:0px;
	right:0px;
	bottom:0px;
	overflow-y:scroll;

	padding: 32px;
	margin-left: @sidebar_width;

	a:visited, a {
		color: @darkPrimaryColor;
	}

	.main_diagram {
		float: right;
		margin: 32px;
	}

	.main_code_definition {
		.sink();

		.main_keyword {
			color: inherit;
		}
	}

	.description {
	}

	// function definitions etc
	.leaf_brief_description {
		border-left: 4px solid #eee;
		margin: 8px 0;
		padding: 0px 20px;
		color: @description_color;
	}
	.brief_description {
		color: @description_color;
	}

	.leaf_code_definition {
		font-family: monospace;
	}
}

error: pathspec 'valadoc/style.less' did not match any file(s) known to git


Floating prompt always on top

Floating prompt always on top

// GENERAL
.game-board {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 50px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.main-window {
  display: flex;
  flex-direction: row;
  flex: 1;
}

.card-pile {
  padding: 0px;
  position: relative;
  margin: 0px 5px;

  &.vertical {
    height: @card-height;
    min-width: @card-width;
  }

  &.horizontal {
    height: @card-width;
    width: @card-height;
  }

  .card-placeholder {
    height: @card-height;
  }
}

.player-home-row .card-pile.horizontal {
    margin-bottom: auto;
    margin-top: auto;
}

.popup {
  z-index: @layer-card-menu;
  background-color: rgba(0, 0, 0, 0.85);

  a {
    display: inline-block;
    margin: 0 10px 8px 0;
    text-decoration: none;

    &:hover {
      color: @brand-info;
      cursor: pointer;
    }
  }

  .panel {
    margin-bottom: 0;
  }

  .panel-title {
    margin: 5px 5px;
  }
}

.select-cursor {
  cursor: url(/img/crosshairs.cur), default;
}

.prompt-area {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.player-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.player-stats {
  display: flex;

  &.panel {
    margin: 0;
    border-radius: 0;
    padding: 10px 0 10px 5px;
    position: initial;
  }

  display: flex;
  align-items: center;
}

.state {
  height: 27px;
  padding-left: 5px;
  padding-right: 5px;
  border-right: solid 2px;
  display: flex;
  align-items: center;

  span {
    padding-right: 3px;
    padding-left: 3px;
  }

  &:last-of-type {
    border-right: none;
  }

  .glyphicon {
    color: @brand-primary;
  }
}

.btn-stat {
  padding: 0;
  font-size: 12px;
  line-height: 18px;
  height: 22px;
  width: 22px;
  background-color: transparent;
}

.btn-stat:hover {
  background-color: @brand-info;
  border-color: @brand-info;
}

.btn-stat:focus {
  outline: 0px;
}

.deck-info {
  display: flex;
  flex-direction: column;
}

.player-info.our-side .deck-info {
  justify-content: flex-end;
}

.deck-type {
  display: flex;
  flex-direction: row;
  height: 100px;
}

.first-player-indicator {
  margin: 5px;
  padding: 5px;
  height: 48px;
  width: auto;
  position: relative;
  justify-content: center;
  align-items: center;

  &.hidden {
      display: none;
    }
}

.imperial-favor {

  margin: 5px;
  padding: 5px;
  height: 150px;
  width: 100px;
  position: relative;
  justify-content: center;
  align-items: center;

  &.hidden {
      display: none;
  }
}

.middle {
  display: flex;
  flex-direction: row;
  flex: 1;
}

.province-pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.provinces-group {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;

  &.our-side {
    justify-content: flex-end;
  }
}

.arrow {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border: 8px solid transparent;

  &.left {
    border-right-color: black;
  }

  &.right {
    border-left-color: black;
  }

  &.up {
    border-bottom-color: black;
  }

  &.down {
    border-top-color: black;
  }

  &.lg {
    border-width: 12px;
  }
}

.our-side {
  .province {
    .popup {
      bottom: -2px;
      top: initial;

      .arrow {
        bottom: 15px;
        top: initial;
      }
    }
  }

  .discard {
    .popup {
      bottom: 95px;
      top: initial;

      .arrow {
        bottom: -30px;
        top: initial;
      }
    }
  }
}

.additional-cards {
  .popup {
    position: absolute;
    bottom: 75px;
    right: 0;

    .inner {
      min-width: @card-height * 2 + (2 * 5px);
      min-height: @card-width * 2 + (2 * 5px);

      .card-wrapper {
        margin: 5px 5px 0 0;
      }
    }

    .arrow {
      bottom: -30px;
      right: 20px;
    }
  }
}

.province {
  padding: 0px;
  position: relative;
  margin: 5px 7px;

  &.vertical {
    height: @card-height;
    width: @card-width;
  }

  &.horizontal {
    height: @card-width;
    width: @card-height;
  }
}

.province-merge {
  margin: 5px;

  .popup {
    position: absolute;
    min-height: 92px;
    min-width: 168px;
    left: 90px;
    top: -75px;

    .inner {
      columns: 2;
      min-height: 128px;

      .card-wrapper {
        margin: 5px 0 0 0;
      }
    }

    .arrow {
      left: -25px;
      top: 55px;
      bottom: initial;
    }
  }
}

.discard {
  .popup {
    position: absolute;
    min-height: 146px;
    bottom: initial;
    top: 95px;

    .inner {
      min-height: @card-height;
      width: @card-width * 5 + (5 * 5px) + @scrollbar-width;
      max-height: @card-height * 4 + (4 * 5px);
      overflow-y: auto;

      .card-wrapper {
        margin: 5px 5px 0 0;
      }
    }

    .arrow {
      bottom: initial;
      top: -63px;
      left: 10px;
    }
  }
}

.hand {
  .card-wrapper {
    margin: 0 5px 0 0;
  }
}

.draw {
  .popup {
    position: absolute;
    left: 0;
    bottom: 95px;

    .inner {
      width: @card-width * 7 + (7 * 5px) + @scrollbar-width;
      min-height: @card-height;
      max-height: @card-height * 4 + (4 * 5px);

      overflow-y: auto;

      .card-wrapper {
        margin: 5px 5px 0 0;
      }
    }
  }

  .arrow {
    bottom: -30px;
    left: 10px;
  }
}

.middle-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.inset-pane {
  position: absolute;
  width: 210px;
  z-index: 5000;
}

.inset-pane > div {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.menu-pane-source {
  background: rgba(160, 160, 160, 1);
  border: 1px solid @header-border;
  font-size: 14px;
  font-weight: normal;
  margin: 0 5px;
  padding: 4px;
  text-align: center;
}

.menu-pane {
  text-align: center;
  z-index: @layer-prompt;
}

.menu-pane .panel {
  margin-top: 0;
  padding-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.menu-pane button {
  width: 100%;
  margin-bottom: 5px;
  white-space: normal;
}

.phase-indicator {
  margin: 5px;
  margin-bottom: 0;
  padding: 5px 0;
  border: 1px solid @header-border;
  border-radius: 4px 4px 0 0;
  border-bottom: none;
  background: @header-background;
  text-align: center;
  text-transform: uppercase;
  width: 200px !important;
  position: relative;
  font-weight: bold;
}

span.up-arrow {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;

  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-bottom: 8px solid @brand-primary;
  left: 90px;

  top: -9px;
}

span.down-arrow {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;

  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-top: 8px solid @brand-primary;
  left: 90px;

  top: -9px;
}

// CENTER
.center {
  flex-direction: column;
  display: flex;
}

.play-area, .player-board {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.player-board {
  margin: 10px;
}

.player-board.our-side > div:first-child {
  margin-top: auto;
}

.player-home-row {
  display: flex;
  margin-top: 5px;

  &.our-side {
    margin-top: 0;
    margin-bottom: 5px;
  }
}

.player-home-row-container {
  display: flex;
}

.player-deck-row {
  display: flex;
  margin-top: 5px;

  &.our-side {
    margin-top: 0;
    margin-bottom: 5px;
  }
}

.player-stronghold-row {
  display: flex;
  margin-top: 5px;

  &.our-side {
    margin-top: 0;
    margin-bottom: 5px;
  }
}

.deck-cards {
  display: flex;
}

.hand {
  height: @card-height;
  width: 480px;
  padding: 0px;
  margin: 0px 5px;
}

.hand.squish .card-wrapper {
  position: absolute;
}

.card-row, .hand {
  display: flex;
  justify-content: flex-start;
}

.card-row .card.horizontal {
  margin-bottom: @card-height - @card-width;
}

.player-board .card-wrapper {
  margin-right: 10px;
  margin-bottom: 5px;
}

//RIGHT SIDE
.right-side {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 312px;
}

.chat {
  width: 100%;
}

.game-status {
  margin-top: 10px;
}

.player-avatar {
  padding-right: 10px;
}

.board-middle {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.board-inner {
  flex: 1;
  display: flex;
}

.close-button {
  color: @foreground-color;
  margin-bottom: 0 !important;
  vertical-align: middle !important;
}

.settings-popup {
  background: @background-color;

  .modal-header {
    background: @brand-tertiary;
  }
}

.close {
  color: @foreground-color;

  :hover {
    color: @brand-info;
  }
}

.modal-title {
  text-align: center;
}

.honor-fan {
  padding: 0px 10px;
}

img.honor-fan-value {
  background-image: url(/img/honorfan.png);
}

.ring-pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ring-panel {
  width: 150px;
  height: 300px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.ring-display {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.ring {
  position: relative;
  flex: 1;
}

.ring-info {
  flex: 1;
  font-size: 12px;
}

img.ring {
  padding: 5px;
}

.placeholder {
  background-color: #efeade;
  border: 0px;
  box-shadow: none;
  padding: 0px;
  position: relative;
  margin: 5px 7px;

  &.vertical {
    height: @card-height;
    width: @card-width;
  }

  &.horizontal {
    height: @card-width;
    width: @card-height;
  }
}

div.placeholder {
  background-color: #efeade;
  border: 0px;
  box-shadow: none;
}

div.placeholder .panel-header {
  background: #efeade;
  padding: 0px;
}

.placeholder {
  background-color: #efeade;
  border: 0px;
  box-shadow: none;
  padding: 0px;
  position: relative;
  margin: 5px 7px;

  &.vertical {
    height: @card-height;
    width: @card-width;
  }

  &.horizontal {
    height: @card-width;
    width: @card-height;
  }
}

.province-deck {
  margin: 5px;
  //display: flex;
  //flex: 1;
  //flex-direction: column;
  //justify-content: flex-end;

  &.our-side {
    justify-content: flex-start;
  }

  .popup {
    position: absolute;
    width: 210px;
    min-height: 92px;
    left: -25px;
    top: 0;
    transform: translateY(-50%);
    &.hidden {
      display: none;
    }
  }
}

// GENERAL
.game-board {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 50px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.main-window {
  display: flex;
  flex-direction: row;
  flex: 1;
}

.card-pile {
  padding: 0px;
  position: relative;
  margin: 0px 5px;

  &.vertical {
    height: @card-height;
    min-width: @card-width;
  }

  &.horizontal {
    height: @card-width;
    width: @card-height;
  }

  .card-placeholder {
    height: @card-height;
  }
}

.player-home-row .card-pile.horizontal {
    margin-bottom: auto;
    margin-top: auto;
}

.popup {
  z-index: @layer-card-menu;
  background-color: rgba(0, 0, 0, 0.85);

  a {
    display: inline-block;
    margin: 0 10px 8px 0;
    text-decoration: none;

    &:hover {
      color: @brand-info;
      cursor: pointer;
    }
  }

  .panel {
    margin-bottom: 0;
  }

  .panel-title {
    margin: 5px 5px;
  }
}

.select-cursor {
  cursor: url(/img/crosshairs.cur), default;
}

.prompt-area {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.player-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.player-stats {
  display: flex;

  &.panel {
    margin: 0;
    border-radius: 0;
    padding: 10px 0 10px 5px;
    position: initial;
  }

  display: flex;
  align-items: center;
}

.state {
  height: 27px;
  padding-left: 5px;
  padding-right: 5px;
  border-right: solid 2px;
  display: flex;
  align-items: center;

  span {
    padding-right: 3px;
    padding-left: 3px;
  }

  &:last-of-type {
    border-right: none;
  }

  .glyphicon {
    color: @brand-primary;
  }
}

.btn-stat {
  padding: 0;
  font-size: 12px;
  line-height: 18px;
  height: 22px;
  width: 22px;
  background-color: transparent;
}

.btn-stat:hover {
  background-color: @brand-info;
  border-color: @brand-info;
}

.btn-stat:focus {
  outline: 0px;
}

.deck-info {
  display: flex;
  flex-direction: column;
}

.player-info.our-side .deck-info {
  justify-content: flex-end;
}

.deck-type {
  display: flex;
  flex-direction: row;
  height: 100px;
}

.first-player-indicator {
  margin: 5px;
  padding: 5px;
  height: 48px;
  width: auto;
  position: relative;
  justify-content: center;
  align-items: center;

  &.hidden {
      display: none;
    }
}

.imperial-favor {

  margin: 5px;
  padding: 5px;
  height: 150px;
  width: 100px;
  position: relative;
  justify-content: center;
  align-items: center;

  &.hidden {
      display: none;
  }
}

.middle {
  display: flex;
  flex-direction: row;
  flex: 1;
}

.province-pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.provinces-group {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;

  &.our-side {
    justify-content: flex-end;
  }
}

.arrow {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border: 8px solid transparent;

  &.left {
    border-right-color: black;
  }

  &.right {
    border-left-color: black;
  }

  &.up {
    border-bottom-color: black;
  }

  &.down {
    border-top-color: black;
  }

  &.lg {
    border-width: 12px;
  }
}

.our-side {
  .province {
    .popup {
      bottom: -2px;
      top: initial;

      .arrow {
        bottom: 15px;
        top: initial;
      }
    }
  }

  .discard {
    .popup {
      bottom: 95px;
      top: initial;

      .arrow {
        bottom: -30px;
        top: initial;
      }
    }
  }
}

.additional-cards {
  .popup {
    position: absolute;
    bottom: 75px;
    right: 0;

    .inner {
      min-width: @card-height * 2 + (2 * 5px);
      min-height: @card-width * 2 + (2 * 5px);

      .card-wrapper {
        margin: 5px 5px 0 0;
      }
    }

    .arrow {
      bottom: -30px;
      right: 20px;
    }
  }
}

.province {
  padding: 0px;
  position: relative;
  margin: 5px 7px;

  &.vertical {
    height: @card-height;
    width: @card-width;
  }

  &.horizontal {
    height: @card-width;
    width: @card-height;
  }
}

.province-merge {
  margin: 5px;

  .popup {
    position: absolute;
    min-height: 92px;
    min-width: 168px;
    left: 90px;
    top: -75px;

    .inner {
      columns: 2;
      min-height: 128px;

      .card-wrapper {
        margin: 5px 0 0 0;
      }
    }

    .arrow {
      left: -25px;
      top: 55px;
      bottom: initial;
    }
  }
}

.discard {
  .popup {
    position: absolute;
    min-height: 146px;
    bottom: initial;
    top: 95px;

    .inner {
      min-height: @card-height;
      width: @card-width * 5 + (5 * 5px) + @scrollbar-width;
      max-height: @card-height * 4 + (4 * 5px);
      overflow-y: auto;

      .card-wrapper {
        margin: 5px 5px 0 0;
      }
    }

    .arrow {
      bottom: initial;
      top: -63px;
      left: 10px;
    }
  }
}

.hand {
  .card-wrapper {
    margin: 0 5px 0 0;
  }
}

.draw {
  .popup {
    position: absolute;
    left: 0;
    bottom: 95px;

    .inner {
      width: @card-width * 7 + (7 * 5px) + @scrollbar-width;
      min-height: @card-height;
      max-height: @card-height * 4 + (4 * 5px);

      overflow-y: auto;

      .card-wrapper {
        margin: 5px 5px 0 0;
      }
    }
  }

  .arrow {
    bottom: -30px;
    left: 10px;
  }
}

.middle-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.inset-pane {
  position: absolute;
  width: 210px;
}

.inset-pane > div {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.menu-pane-source {
  background: rgba(160, 160, 160, 1);
  border: 1px solid @header-border;
  font-size: 14px;
  font-weight: normal;
  margin: 0 5px;
  padding: 4px;
  text-align: center;
}

.menu-pane {
  text-align: center;
  z-index: @layer-prompt;
}

.menu-pane .panel {
  margin-top: 0;
  padding-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.menu-pane button {
  width: 100%;
  margin-bottom: 5px;
  white-space: normal;
}

.phase-indicator {
  margin: 5px;
  margin-bottom: 0;
  padding: 5px 0;
  border: 1px solid @header-border;
  border-radius: 4px 4px 0 0;
  border-bottom: none;
  background: @header-background;
  text-align: center;
  text-transform: uppercase;
  width: 200px !important;
  position: relative;
  font-weight: bold;
}

span.up-arrow {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;

  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-bottom: 8px solid @brand-primary;
  left: 90px;

  top: -9px;
}

span.down-arrow {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;

  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-top: 8px solid @brand-primary;
  left: 90px;

  top: -9px;
}

// CENTER
.center {
  flex-direction: column;
  display: flex;
}

.play-area, .player-board {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.player-board {
  margin: 10px;
}

.player-board.our-side > div:first-child {
  margin-top: auto;
}

.player-home-row {
  display: flex;
  margin-top: 5px;

  &.our-side {
    margin-top: 0;
    margin-bottom: 5px;
  }
}

.player-home-row-container {
  display: flex;
}

.player-deck-row {
  display: flex;
  margin-top: 5px;

  &.our-side {
    margin-top: 0;
    margin-bottom: 5px;
  }
}

.player-stronghold-row {
  display: flex;
  margin-top: 5px;

  &.our-side {
    margin-top: 0;
    margin-bottom: 5px;
  }
}

.deck-cards {
  display: flex;
}

.hand {
  height: @card-height;
  width: 480px;
  padding: 0px;
  margin: 0px 5px;
}

.hand.squish .card-wrapper {
  position: absolute;
}

.card-row, .hand {
  display: flex;
  justify-content: flex-start;
}

.card-row .card.horizontal {
  margin-bottom: @card-height - @card-width;
}

.player-board .card-wrapper {
  margin-right: 10px;
  margin-bottom: 5px;
}

//RIGHT SIDE
.right-side {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 312px;
}

.chat {
  width: 100%;
}

.game-status {
  margin-top: 10px;
}

.player-avatar {
  padding-right: 10px;
}

.board-middle {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.board-inner {
  flex: 1;
  display: flex;
}

.close-button {
  color: @foreground-color;
  margin-bottom: 0 !important;
  vertical-align: middle !important;
}

.settings-popup {
  background: @background-color;

  .modal-header {
    background: @brand-tertiary;
  }
}

.close {
  color: @foreground-color;

  :hover {
    color: @brand-info;
  }
}

.modal-title {
  text-align: center;
}

.honor-fan {
  padding: 0px 10px;
}

img.honor-fan-value {
  background-image: url(/img/honorfan.png);
}

.ring-pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ring-panel {
  width: 150px;
  height: 300px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.ring-display {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.ring {
  position: relative;
  flex: 1;
}

.ring-info {
  flex: 1;
  font-size: 12px;
}

img.ring {
  padding: 5px;
}

.placeholder {
  background-color: #efeade;
  border: 0px;
  box-shadow: none;
  padding: 0px;
  position: relative;
  margin: 5px 7px;

  &.vertical {
    height: @card-height;
    width: @card-width;
  }

  &.horizontal {
    height: @card-width;
    width: @card-height;
  }
}

div.placeholder {
  background-color: #efeade;
  border: 0px;
  box-shadow: none;
}

div.placeholder .panel-header {
  background: #efeade;
  padding: 0px;
}

.placeholder {
  background-color: #efeade;
  border: 0px;
  box-shadow: none;
  padding: 0px;
  position: relative;
  margin: 5px 7px;

  &.vertical {
    height: @card-height;
    width: @card-width;
  }

  &.horizontal {
    height: @card-width;
    width: @card-height;
  }
}

.province-deck {
  margin: 5px;
  //display: flex;
  //flex: 1;
  //flex-direction: column;
  //justify-content: flex-end;

  &.our-side {
    justify-content: flex-start;
  }

  .popup {
    position: absolute;
    width: 210px;
    min-height: 92px;
    left: -25px;
    top: 0;
    transform: translateY(-50%);
    &.hidden {
      display: none;
    }
  }
}


change grid column with to 80px, gutter=0

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/sunqb/bootstrap.git/'


More accurate comment in variables.less.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/QueensSailing/QueensSailing.github.io.git/'


Create variables.less

Create variables.less

// Variables

@brand-primary: #0085A1;
@gray-dark: lighten(black, 25%);
@gray: lighten(black, 50%);
@white-faded: fade(white, 80%);
@gray-light: #eee;

error: pathspec 'less/variables.less' did not match any file(s) known to git


Better GraphQL editor pane sizing (Fixes #700)

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Atvaark/insomnia.git/'


FIX #73

FIX #73

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/real-pants/Real-Pants.git/'


tweak menu style code

tweak menu style code

@import "../../style/themes/default";
@import "../../style/mixins/index";

@menu-prefix-cls: ~"@{ant-prefix}-menu";

// default theme
.@{menu-prefix-cls} {
  outline: none;
  margin-bottom: 0;
  padding-left: 0; // Override default ul/ol
  list-style: none;
  z-index: @zindex-dropdown;
  box-shadow: @box-shadow-base;
  color: @text-color;
  background: @component-background;
  line-height: 46px;

  &-hidden {
    display: none;
  }

  &-item-group-list {
    margin: 0;
    padding: 0;
  }

  &-item-group-title {
    color: @text-color-secondary;
    font-size: @font-size-base;
    line-height: 1.5;
    padding: 8px 16px;
  }

  &-item,
  &-submenu,
  &-submenu-title {
    cursor: pointer;
    transition: all .3s;
  }

  &-item:active,
  &-submenu-title:active {
    background: @primary-1;
  }

  &-submenu &-sub {
    cursor: initial;
  }

  &-item > a {
    display: block;
    color: @text-color;
    &:hover {
      color: @primary-color;
    }
    &:before {
      position: absolute;
      background-color: transparent;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      content: '';
    }
  }

  &-item-divider {
    height: 1px;
    overflow: hidden;
    background-color: @border-color-split;
    line-height: 0;
  }

  &-item:hover,
  &-item-active,
  &:not(&-inline) &-submenu-open,
  &-submenu-active,
  &-submenu-title:hover {
    color: @primary-color;
  }

  &:not(&-inline) &-submenu-open {
    z-index: @zindex-dropdown;
  }

  &-horizontal &-item,
  &-horizontal &-submenu {
    margin-top: -1px;
  }

  &-horizontal > &-item:hover,
  &-horizontal > &-item-active,
  &-horizontal > &-submenu &-submenu-title:hover {
    background-color: transparent;
  }

  &-item-selected {
    color: @primary-color;
    // fix chrome render bug
    transform: translateZ(0);
    > a,
    > a:hover {
      color: @primary-color;
    }
  }

  &:not(&-horizontal) &-item-selected {
    background-color: @primary-1;
  }

  &-horizontal,
  &-inline,
  &-vertical {
    z-index: auto;
  }

  &-inline,
  &-vertical {
    border-right: @border-width-base @border-style-base @border-color-split;
    .@{menu-prefix-cls}-item {
      border-right: 3px @border-style-base transparent;
      margin-left: -1px;
      left: 1px;
      position: relative;
      z-index: 1;
    }
  }

  &-vertical&-sub {
    border-right: 0;
    .@{menu-prefix-cls}-item {
      border-right: 0;
      margin-left: 0;
      left: 0;
    }
    > .@{menu-prefix-cls}-item:first-child {
      border-radius: @border-radius-base @border-radius-base 0 0;
    }
    > .@{menu-prefix-cls}-item:last-child,
    > .@{menu-prefix-cls}-item-group:last-child > .@{menu-prefix-cls}-item-group-list:last-child > .@{menu-prefix-cls}-item:last-child {
      border-radius: 0 0 @border-radius-base @border-radius-base;
    }
  }

  &-inline {
    .@{menu-prefix-cls}-selected,
    .@{menu-prefix-cls}-item-selected {
      border-right-color: @primary-color;
      transform: translateZ(0);
    }
  }

  &-submenu-horizontal > & {
    top: 100%;
    left: 0;
    position: absolute;
    min-width: 100%;
    margin-top: 7px;
    z-index: @zindex-dropdown;
  }

  &-submenu-vertical {
    z-index: 1;
  }

  &-submenu-vertical > & {
    top: 0;
    left: 100%;
    position: absolute;
    min-width: 160px;
    margin-left: 4px;
    z-index: @zindex-dropdown;
  }

  &-item,
  &-submenu-title {
    margin: 0;
    padding: 0 20px;
    position: relative;
    display: block;
    white-space: nowrap;

    .@{iconfont-css-prefix} {
      min-width: 14px;
      margin-right: 8px;
    }
  }

  & > &-item-divider {
    height: 1px;
    margin: 1px 0;
    overflow: hidden;
    padding: 0;
    line-height: 0;
    background-color: @border-color-split;
  }

  &-submenu {
    position: relative;

    > .@{menu-prefix-cls} {
      background-color: @component-background;
      border-radius: @border-radius-base;
    }

    &-vertical > .@{menu-prefix-cls}-submenu-title:after {
      font-family: "anticon" !important;
      font-style: normal;
      vertical-align: baseline;
      text-align: center;
      text-transform: none;
      text-rendering: auto;
      position: absolute;
      transition: transform .3s;
      content: "\e61d";
      right: 16px;
      .ie-rotate(3);
      transform: rotate(270deg) scale(0.75);
    }

    &-inline > .@{menu-prefix-cls}-submenu-title:after {
      font-family: "anticon" !important;
      font-style: normal;
      vertical-align: baseline;
      text-align: center;
      text-transform: none;
      text-rendering: auto;
      position: absolute;
      transition: transform .3s;
      content: "\e61d";
      right: 16px;
      top: 0;
      .iconfont-size-under-12px(8px);
    }

    &-open {
      &.@{menu-prefix-cls}-submenu-inline > .@{menu-prefix-cls}-submenu-title:after {
        .ie-rotate(1);
        transform: rotate(180deg) scale(0.75);
      }
    }
  }

  &-vertical &-submenu-selected {
    color: @primary-color;
    > a {
      color: @primary-color;
    }
  }

  &-horizontal {
    border: 0;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    box-shadow: none;
    z-index: 0;

    > .@{menu-prefix-cls}-item,
    > .@{menu-prefix-cls}-submenu {
      position: relative;
      top: 1px;
      float: left;
      border-bottom: 2px solid transparent;

      &:hover,
      &-active,
      &-open,
      &-selected {
        border-bottom: 2px solid @primary-color;
        color: @primary-color;
      }

      > a {
        display: block;
        color: @text-color;
        &:hover {
          color: @primary-color;
        }
      }
    }

    &:after {
      content: "\20";
      display: block;
      height: 0;
      clear: both;
    }
  }

  &-vertical,
  &-inline {
    .@{menu-prefix-cls}-item,
    .@{menu-prefix-cls}-submenu-title {
      padding: 0 16px;
      font-size: @font-size-base;
      line-height: 42px;
      height: 42px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  &-item-group-list {
    .@{menu-prefix-cls}-item,
    .@{menu-prefix-cls}-submenu-title {
      padding: 0 16px 0 28px;
    }
  }

  &-vertical&-sub {
    padding: 0;
    transform-origin: 0 0;
    & > .@{menu-prefix-cls}-item,
    & > .@{menu-prefix-cls}-submenu {
      transform-origin: 0 0;
    }
  }

  &-root&-vertical,
  &-root&-inline {
    box-shadow: none;
  }

  &-sub&-inline {
    padding: 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    & > .@{menu-prefix-cls}-item,
    & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
      line-height: 42px;
      height: 42px;
      list-style-type: disc;
      list-style-position: inside;
    }

    & .@{menu-prefix-cls}-item-group-title {
      padding-left: 32px;
    }
  }

  // Disabled state sets text to gray and nukes hover/tab effects
  &-item-disabled,
  &-submenu-disabled {
    color: @disabled-color !important;
    cursor: not-allowed;
    background: none;
    border-color: transparent !important;
    > a {
      color: @disabled-color !important;
      pointer-events: none;
    }
  }
}

// dark theme
.@{menu-prefix-cls} {
  &-dark,
  &-dark &-sub {
    color: @text-color-secondary-dark;
    background: @menu-dark-bg;
  }

  &-dark &-inline&-sub {
    background: @menu-dark-submenu-bg;
  }

  &-dark&-horizontal {
    border-bottom-color: @menu-dark-bg;
  }

  &-dark&-horizontal > &-item,
  &-dark&-horizontal > &-submenu {
    border-color: @menu-dark-bg;
    border-bottom: 0;
    top: 0;
  }

  &-dark &-item,
  &-dark &-item-group-title,
  &-dark &-item > a {
    color: @text-color-secondary-dark;
  }

  &-dark&-inline,
  &-dark&-vertical {
    border-right: 0;
  }

  &-dark&-inline &-item,
  &-dark&-vertical &-item {
    border-right: 0;
    margin-left: 0;
    left: 0;
  }

  &-dark &-item:hover,
  &-dark &-item-active,
  &-dark &-submenu-active,
  &-dark:not(&-inline) &-submenu-open,
  &-dark &-submenu-selected,
  &-dark &-submenu:hover,
  &-dark &-submenu-title:hover {
    background-color: transparent;
    color: #fff;
    > a {
      color: #fff;
    }
  }

  &-dark &-item-selected {
    border-right: 0;
    color: #fff;
    > a,
    > a:hover {
      color: #fff;
    }
  }

  &&-dark &-item-selected {
    background-color: transparent;
  }

  &-dark&-inline &-item-selected {
    background-color: @primary-color;
  }

  // Disabled state sets text to dark gray and nukes hover/tab effects
  &-dark &-item-disabled,
  &-dark &-submenu-disabled {
    &,
    > a {
      opacity: 0.8;
      color: @disabled-color-dark !important;
    }
  }
}

@import "../../style/themes/default";
@import "../../style/mixins/index";

@menu-prefix-cls: ~"@{ant-prefix}-menu";

// default theme
.@{menu-prefix-cls} {
  outline: none;
  margin-bottom: 0;
  padding-left: 0; // Override default ul/ol
  list-style: none;
  z-index: @zindex-dropdown;
  box-shadow: @box-shadow-base;
  color: @text-color;
  background: @component-background;
  line-height: 46px;

  &-hidden {
    display: none;
  }

  &-item-group-list {
    margin: 0;
    padding: 0;
  }

  &-item-group-title {
    color: @text-color-secondary;
    font-size: @font-size-base;
    line-height: 1.5;
    padding: 8px 16px;
  }

  &-item,
  &-submenu,
  &-submenu-title {
    cursor: pointer;
    transition: all 0.3s ease;
  }

  &-item:active,
  &-submenu-title:active {
    background: @primary-1;
  }

  &-submenu &-sub {
    cursor: initial;
  }

  &-item > a {
    display: block;
    color: @text-color;
    &:hover {
      color: @primary-color;
    }
    &:before {
      position: absolute;
      background-color: transparent;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      content: '';
    }
  }

  &-item-divider {
    height: 1px;
    overflow: hidden;
    background-color: @border-color-split;
    line-height: 0;
  }

  &-item:hover,
  &-item-active,
  &:not(&-inline) &-submenu-open,
  &-submenu-active,
  &-submenu-title:hover {
    color: @primary-color;
  }

  &:not(&-inline) &-submenu-open {
    z-index: @zindex-dropdown;
  }

  &-horizontal &-item,
  &-horizontal &-submenu {
    margin-top: -1px;
  }

  &-horizontal > &-item:hover,
  &-horizontal > &-item-active,
  &-horizontal > &-submenu &-submenu-title:hover {
    background-color: transparent;
  }

  &-item-selected {
    color: @primary-color;
    // fix chrome render bug
    transform: translateZ(0);
    > a,
    > a:hover {
      color: @primary-color;
    }
  }

  &:not(&-horizontal) &-item-selected {
    background-color: @primary-1;
  }

  &-horizontal,
  &-inline,
  &-vertical {
    z-index: auto;
  }

  &-inline,
  &-vertical {
    border-right: @border-width-base @border-style-base @border-color-split;
    .@{menu-prefix-cls}-item {
      border-right: 3px @border-style-base transparent;
      margin-left: -1px;
      left: 1px;
      position: relative;
      z-index: 1;
    }
  }

  &-vertical&-sub {
    border-right: 0;
    .@{menu-prefix-cls}-item {
      border-right: 0;
      margin-left: 0;
      left: 0;
    }
    > .@{menu-prefix-cls}-item:first-child {
      border-radius: @border-radius-base @border-radius-base 0 0;
    }
    > .@{menu-prefix-cls}-item:last-child,
    > .@{menu-prefix-cls}-item-group:last-child > .@{menu-prefix-cls}-item-group-list:last-child > .@{menu-prefix-cls}-item:last-child {
      border-radius: 0 0 @border-radius-base @border-radius-base;
    }
  }

  &-inline {
    .@{menu-prefix-cls}-selected,
    .@{menu-prefix-cls}-item-selected {
      border-right-color: @primary-color;
      transform: translateZ(0);
    }
  }

  &-submenu-horizontal > & {
    top: 100%;
    left: 0;
    position: absolute;
    min-width: 100%;
    margin-top: 7px;
    z-index: @zindex-dropdown;
  }

  &-submenu-vertical {
    z-index: 1;
  }

  &-submenu-vertical > & {
    top: 0;
    left: 100%;
    position: absolute;
    min-width: 160px;
    margin-left: 4px;
    z-index: @zindex-dropdown;
  }

  &-item,
  &-submenu-title {
    margin: 0;
    padding: 0 20px;
    position: relative;
    display: block;
    white-space: nowrap;

    .@{iconfont-css-prefix} {
      min-width: 14px;
      margin-right: 8px;
    }
  }

  & > &-item-divider {
    height: 1px;
    margin: 1px 0;
    overflow: hidden;
    padding: 0;
    line-height: 0;
    background-color: #e5e5e5;
  }

  &-submenu {
    position: relative;

    > .@{menu-prefix-cls} {
      background-color: @component-background;
      border-radius: 4px;
    }

    &-vertical > .@{menu-prefix-cls}-submenu-title:after {
      font-family: "anticon" !important;
      font-style: normal;
      vertical-align: baseline;
      text-align: center;
      text-transform: none;
      text-rendering: auto;
      position: absolute;
      transition: transform .3s ease;
      content: "\e61d";
      right: 16px;
      .ie-rotate(3);
      transform: rotate(270deg) scale(0.75);
    }

    &-inline > .@{menu-prefix-cls}-submenu-title:after {
      font-family: "anticon" !important;
      font-style: normal;
      vertical-align: baseline;
      text-align: center;
      text-transform: none;
      text-rendering: auto;
      position: absolute;
      transition: transform .3s ease;
      content: "\e61d";
      right: 16px;
      top: 0;
      .iconfont-size-under-12px(8px);
    }

    &-open {
      &.@{menu-prefix-cls}-submenu-inline > .@{menu-prefix-cls}-submenu-title:after {
        .ie-rotate(1);
        transform: rotate(180deg) scale(0.75);
      }
    }
  }

  &-vertical &-submenu-selected {
    color: @primary-color;
    > a {
      color: @primary-color;
    }
  }

  &-horizontal {
    border: 0;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    box-shadow: none;
    z-index: 0;

    > .@{menu-prefix-cls}-item,
    > .@{menu-prefix-cls}-submenu {
      position: relative;
      top: 1px;
      float: left;
      border-bottom: 2px solid transparent;

      &:hover,
      &-active,
      &-open,
      &-selected {
        border-bottom: 2px solid @primary-color;
        color: @primary-color;
      }

      > a {
        display: block;
        color: @text-color;
        &:hover {
          color: @primary-color;
        }
      }
    }

    &:after {
      content: "\20";
      display: block;
      height: 0;
      clear: both;
    }
  }

  &-vertical,
  &-inline {
    .@{menu-prefix-cls}-item,
    .@{menu-prefix-cls}-submenu-title {
      padding: 0 16px;
      font-size: @font-size-base;
      line-height: 42px;
      height: 42px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  &-item-group-list {
    .@{menu-prefix-cls}-item,
    .@{menu-prefix-cls}-submenu-title {
      padding: 0 16px 0 28px;
    }
  }

  &-vertical&-sub {
    padding: 0;
    transform-origin: 0 0;
    & > .@{menu-prefix-cls}-item,
    & > .@{menu-prefix-cls}-submenu {
      transform-origin: 0 0;
    }
  }

  &-root&-vertical,
  &-root&-inline {
    box-shadow: none;
  }

  &-sub&-inline {
    padding: 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    & > .@{menu-prefix-cls}-item,
    & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
      line-height: 42px;
      height: 42px;
      list-style-type: disc;
      list-style-position: inside;
    }

    & .@{menu-prefix-cls}-item-group-title {
      padding-left: 32px;
    }
  }

  // Disabled state sets text to gray and nukes hover/tab effects
  &-item-disabled,
  &-submenu-disabled {
    color: @disabled-color !important;
    cursor: not-allowed;
    background: none;
    border-color: transparent !important;
    > a {
      color: @disabled-color !important;
      pointer-events: none;
    }
  }
}

// dark theme
.@{menu-prefix-cls} {
  &-dark,
  &-dark &-sub {
    color: @text-color-secondary-dark;
    background: @menu-dark-bg;
  }

  &-dark &-inline&-sub {
    background: @menu-dark-submenu-bg;
  }

  &-dark&-horizontal {
    border-bottom-color: @menu-dark-bg;
  }

  &-dark&-horizontal > &-item,
  &-dark&-horizontal > &-submenu {
    border-color: @menu-dark-bg;
    border-bottom: 0;
    top: 0;
  }

  &-dark &-item,
  &-dark &-item-group-title,
  &-dark &-item > a {
    color: @text-color-secondary-dark;
  }

  &-dark&-inline,
  &-dark&-vertical {
    border-right: 0;
  }

  &-dark&-inline &-item,
  &-dark&-vertical &-item {
    border-right: 0;
    margin-left: 0;
    left: 0;
  }

  &-dark &-item:hover,
  &-dark &-item-active,
  &-dark &-submenu-active,
  &-dark:not(&-inline) &-submenu-open,
  &-dark &-submenu-selected,
  &-dark &-submenu:hover,
  &-dark &-submenu-title:hover {
    background-color: transparent;
    color: #fff;
    > a {
      color: #fff;
    }
  }

  &-dark &-item-selected {
    border-right: 0;
    color: #fff;
    > a,
    > a:hover {
      color: #fff;
    }
  }

  &&-dark &-item-selected {
    background-color: transparent;
  }

  &-dark&-inline &-item-selected {
    background-color: @primary-color;
  }

  // Disabled state sets text to dark gray and nukes hover/tab effects
  &-dark &-item-disabled,
  &-dark &-submenu-disabled {
    &,
    > a {
      opacity: 0.8;
      color: @disabled-color-dark !important;
    }
  }
}


Navbar: made change to name and styles. Qui suis-je: changed text.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/FrankLanglois/profil-professionnel.git/'


Supported wide block-content on IE8.

Supported wide block-content on IE8.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/team-aries/just.git/'


tone down the drop target border a bit

tone down the drop target border a bit

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/bmesuere/uni-test.git/'