fixed indentation

fixed indentation

.custom-scroll(@background, @thumb, @width: 8px, @height: 8px) {
	-ms-overflow-style: -ms-autohiding-scrollbar;
	&::-webkit-scrollbar {
		height: @height;
		width: @width;
		background: @background;
	}
	&::-webkit-scrollbar-thumb {
		background-color: @thumb;
		-webkit-border-radius: 50px;
	}
	&::-webkit-scrollbar-corner {
		background-color: @background;
	}
}

a {
	&:hover,
	&:active {
		color: @primary-font-color;
	}
}

code {
	background-color: @code-background;
	border-color: @code-border;
	color: @code-color;
}

blockquote {
	&:before {
		background-color: @blockquote-background;
	}
}

.login-terms {
	color: @smallprint-font-color;
	a {
		color: @smallprint-font-color;
		&:hover {
			color: @smallprint-hover-color;
		}
	}
}

.upload-preview {
	background-color: @secondary-background-color;
}

.upload-preview-title {
	background-color: @tertiary-background-color;
}

.first-unread {
	&.first-unread-opaque {
		.body {
			&::before {
				background-color: lighten(@info-font-color, 25%);
			}
			&::after {
				color: @info-font-color;
			}
		}
	}
	.body {
		&::before {
			background-color: lighten(@info-active-font-color, 25%);
		}
		&::after {
			background-color: @content-background-color;
			color: @info-active-font-color;
		}
	}
}

.alert {
	border-color: rgba(0, 0, 0, 0);
}

.alert-warning {
	color: #8A6D3B;
	background-color: #FCF8E3;
	border-color: #FAEBCC;
}

.alert-danger {
	color: #A94442;
	background-color: #F2DEDE;
	border-color: #EBCCD1;
}

.scrollable {
	.custom-scroll(transparent, #BFBFBF);
}

.rocket-form {
	legend {
		&:after {
			background-color: #DFDFDF;
		}
	}
	&.request-password {
		color: white;
	}
}

.input-line {
	.clearfix;
	&.search {
		.icon-search {
			color: @secondary-font-color;
		}
	}
	> label {
		color: @primary-font-color;
	}
}

.rocket-h2 {
	color: #EFEFEF;
}

.rocket-h3 {
	color: #EAEAEA;
}

html {
	.custom-scroll(transparent, @custom-scrollbar-color, 3px);
}

body {
	color: @primary-font-color;
	background-color: @primary-background-color;
}

textarea,
select,
input[type='text'],
input[type='number'],
input[type='email'],
input[type='url'],
input[type='password'] {
	border-color: #E7E7E7;
	background-color: #fff;
}

input.search {
	&:before {
		background-color: #000;
	}
}

.form-horizontal .control-label {
	color: @primary-font-color;
}

.-autocomplete-container {
	p {
		color: @secondary-font-color;
	}
}

.-autocomplete-item {
	color: @secondary-font-color;
	i {
		color: @secondary-font-color;
	}
	&.selected {
		background-color: @tertiary-background-color;
		color: @primary-font-color;
	}
}

label.required:after {
	color: red;
}

.status-offline,
.icon-at.status-offline {
	color: @status-offline;
}

.status-online,
.icon-at.status-online {
	color: @status-online;
}

.status-busy,
.icon-at.status-busy {
	color: @status-busy;
}

.status-away,
.icon-at.status-away {
	color: @status-away;
}

// TODO -- Refactor favorite styles and logic;
.favorite-room {
	color: #FECF09;
}

.toggle-favorite {
	color: #AAA;
}

.btn-loading {
	color: #444 !important;
	background-color: transparent !important;
	&:hover {
		background-color: transparent !important;
	}
}

// new layout buttons
.button {
	color: rgba(255, 255, 255, 0.85);
	background-color: @action-buttons-color;
	&:before {
		background-color: rgba(0, 0, 0, 0.1);
	}
	&:hover {
		color: #FFF;
	}
	&.secondary {
		background-color: @tertiary-background-color;
		color: @primary-font-color;
		&:before {
			background-color: rgba(0, 0, 0, 0.045);
		}
	}
	&.delete,
	&.remove,
	&.red {
		background-color: #bc2031;
	}
	&.lightblue {
		background-color: #02acec;
		&:disabled {
			background-color: desaturate(#02acec, 20%);
		}
	}
	&.clean {
		background-color: @clean-buttons-color;
	}
	&.facebook {
		background-color: #325c99;
	}
	&.twitter {
		background-color: #02acec;
	}
	&.google {
		background-color: #dd4b39;
	}
	&.github {
		background-color: #4c4c4c;
	}
	&.gitlab {
		background-color: #373d47;
	}
	&.trello {
		background-color: #026aa7;
	}
	&.meteor-developer {
		background-color: #de4f4f;
	}
	&.wordpress {
		background-color: #1e8cbe;
	}
}

.burger {
	i {
		background-color: #333;
	}
	.unread-burger-alert {
		background-color: #F95555;
		color: @content-background-color;
	}
}

.arrow {
	&:before,
	&:after {
		background-color: mix(@quaternary-font-color, @primary-background-color, 65%);
	}
}

a.github-fork {
	background-color: #5c5c5c;
	color: #f0f0f0;
	&:hover {
		background-color: #4b4b4b;
		color: #FFF;
	}
	&:before {
		border-top-color: #f0f0f0;
	}
	&:after {
		border-top-color: #f0f0f0;
	}
}

.mac-bar {
	background-color: #ddd;
	i {
		background-color: #ff5f57;
		&:nth-child(2) {
			background-color: #ffbd2e;
		}
		&:nth-child(3) {
			background-color: #28ca41;
		}
	}
}

.avatar {
	.avatar-image {
		background-color: transparent;
	}
	&[initials]:before {
		color: #FFF;
	}
}

#rocket-chat {
	background-color: @content-background-color;
}

.account-box {
	.info {
		background-color: @primary-background-color;
		h4 {
			color: mix(@quaternary-font-color, @primary-background-color, 65%);
		}
		&.status-offline {
			.thumb:after {
				border-color: darken(@status-offline, 5%);
				background-color: @status-offline;
			}
		}
		&.status-online {
			.thumb:after {
				border-color: darken(@status-online, 5%);
				background-color: @status-online;
			}
		}
		&.status-away {
			.thumb:after {
				border-color: darken(@status-away, 5%);
				background-color: @status-away;
			}
		}
		&.status-busy {
			.thumb:after {
				border-color: darken(@status-busy, 5%);
				background-color: @status-busy;
			}
		}
	}
	.options {
		background-color: @primary-background-color;
		.status {
			&:after {
				border-color: #6f6f6f;
			}
			&.offline {
				&:after {
					border-color: #666666;
					background-color: #7b7b7b;
				}
			}
			&.online {
				&:after {
					border-color: #2c9210;
					background-color: #35AC19;
				}
			}
			&.away {
				&:after {
					border-color: #e69200;
					background-color: #fcb316;
				}
			}
			&.busy {
				&:after {
					border-color: #9f0030;
					background-color: #D30230;
				}
			}
		}
		span.soon {
			color: #aaa;
		}
		button,
		a {
			color: fade( @quaternary-font-color, 50%);
			&:hover {
				background-color: darken(@primary-background-color, 2%);
				color: fade( @quaternary-font-color, 75%);
			}
		}
	}
	&.active .info,
	.info:hover {
		h4 {
			color: fade(@quaternary-font-color, 85%);
		}
	}
	.hover & {
		.info h4 {
			color: fade(@quaternary-font-color, 85%);
		}
	}
}

// rooms-box
.flex-nav {
	//background-color: @primary-background-color;
	background-color: transparent;
	color: @tertiary-font-color;
	.custom-scroll(transparent, @custom-scrollbar-color);
	header {
		background-color: @primary-background-color;
	}
	footer {
		background-color: @primary-background-color;
	}
	.content {
		.custom-scroll(transparent, @custom-scrollbar-color);
		background-color: @primary-background-color;
	}
	.input-line {
		input[type='text'],
		input[type='password'],
		select {
			border-color: @tertiary-font-color;
			background-color: @primary-background-color;
			color: @input-font-color;
		}
		& label {
			color: @input-font-color;
		}
	}
	.selected-users {
		li {
			background-color: rgba(0, 0, 0, 0.1);
		}
	}
}

.side-nav {
	&:before {
		background-color: #dfdfdf;
	}
	.rooms-list {
		background-color: lighten(@primary-background-color, 2%);
		.custom-scroll(transparent, @custom-scrollbar-color);
	}
	.more {
		color: @tertiary-font-color;
		&:hover {
			background-color: rgba(0, 0, 0, 0.1);
		}
	}
	.input-error {
		color: #f09286;
	}
	.empty {
		color: @tertiary-font-color;
	}
	.header {
		color: #fff;
		background-color: @primary-background-color;
	}
	> .arrow {
		&.hover,
		&:hover {
			&:before,
			&:after {
				background-color: mix(@quaternary-font-color, @primary-background-color, 85%);
			}
		}
	}
	.footer {
		background: #fff;
		background-color: @primary-background-color;
		small {
			color: @tertiary-font-color;
		}
	}
	h3 {
		color: @tertiary-font-color;
		a {
			color: inherit;
		}
		&:hover {
			background-color: rgba(0, 0, 0, 0.1);
		}
	}
	.unread {
		background-color: @unread-notification-color;
		color: #FFF;
	}
	ul {
		li {
			.remove,
			.erase {
				color: #666;
			}
			&:hover {
				.opt {
					background-color: transparent;
				}
			}
			&.active {
				a {
					background-color: @active-channel-background-color;
					color: @active-channel-font-color;
				}
				.opt {
					background-color: transparent;
				}
			}
			&.has-alert {
				.name {
					color: @quaternary-font-color;
				}
			}
			&.away {
				a {
					color: #666;
				}
			}
		}
		a {
			color: @tertiary-font-color;
			&:hover {
				background-color: rgba(255, 255, 255, 0.05);
			}
		}
		.opt {
			background-color: transparent;
			i {
				color: fade(@quaternary-font-color, 50%);
				&:hover {
					color: fade(@quaternary-font-color, 75%);
				}
			}
		}
		i {
			color: fade(@quaternary-font-color, 35%);
		}
		input[type=text] {
			color: #000;
		}
	}
}

.page-container {
	.content {
		.custom-scroll(transparent, #EAEAEA);
	}
}

.fixed-title {
	background-color: @content-background-color;
	border-bottom-color: @tertiary-background-color;
}

.cms-page {
	background-color: @content-background-color;
}

.spotlight {
	background-color: rgba(0, 0, 0, .3);
	> .spotlight-input {
		color: #444;
		> i {
			color: #aaa;
		}
	}
}

.mobile-message-menu {
	background-color: rgba(0, 0, 0, .3);
}

.page-static {
	.content {
		.section {
			.section-content {
				border-color: #ddd;
			}
		}
	}
}

.page-list {
	.results {
		border-bottom-color: #DFDFDF;
		color: @secondary-font-color;
	}
	.list {
		a {
			color: @primary-font-color;
			border-bottom-color: @secondary-background-color;
			&:hover {
				background-color: @secondary-background-color;
			}
		}
		li {
			color: @secondary-font-color;
			&:after {
				background-color: @secondary-font-color;
			}
		}
		.info {
			a {
				color: @primary-font-color;
			}
		}
		.status {
			color: @secondary-font-color;
		}
		table {
			tbody {
				tr {
					&:nth-child(odd) {
						background-color: @secondary-background-color;
					}
					&.row-link {
						cursor: pointer;
						&:hover {
							background-color: darken(@secondary-background-color, 3%);
						}
					}
				}
				td {
					a {
						color: @link-font-color;
						&:hover {
							color: darken(@link-font-color, 10%);
							background-color: transparent;
						}
					}
				}
			}
		}
	}
}

.image-to-download {
	background-color: #fafafa;
	border-color: #ddd;
	color: #aaa;
}

.room-not-found {
	color: orange;
}

.container-bars {
	>div {
		border-color: #ffffff;
	}
	.upload-progress {
		background-color: #b2d5c9;
		color: @content-background-color;
		&.upload-error {
			background-color: #FF6161;
			border-color: #863737;
		}
		.upload-progress-progress {
			background-color: #4c9789;
		}
		> a {
			&:hover {
				color: #eee;
			}
		}
	}
	.unread-bar {
		background-color: #E6F4FD;
		color: #068FE4;
	}
}

// change to page-messages
.messages-container {
	border-right-color: @tertiary-background-color;
	.edit-room-title {
		color: @secondary-font-color;
		&:hover {
			color: @primary-font-color;
		}
	}
	.wrapper {
		.custom-scroll(transparent, rgba(180, 180, 180, .75));
	}
	.footer {
		background: #FCFCFC;
		border-top-color: @tertiary-background-color;
	}
	.message-form {
		> .message-input {
			border-color: #E7E7E7;
			> .file,
			.message-buttons {
				color: #888;
				background-color: #FCFCFC;
				&:hover {
					background-color: #F1F1F1;
					color: #666;
				}
			}
		}
		textarea {
			&.editing {
				background-color: #fff7d8;
			}
		}
		.stream-info {
			color: #888888;
			background: #FCFCFC;
		}
		.formatting-tips {
			color: #444444;
			q {
				border-left-color: #ccc;
			}
		}
		.editing-commands {
			.editing-commands-cancel {
				color: #888888;
			}
			.editing-commands-save {
				color: #888888;
			}
		}
	}
}

.message-popup {
	background: #FFF;
}

.message-popup-title {
	background-color: @secondary-background-color;
	border-bottom-color: #E7E7E7;
}

.popup-item {
	color: @secondary-font-color;
	&.selected {
		background-color: #4CAEEB;
		color: #FFF;
	}
}

.popup-user-status {
	border-color: rgba(0, 0, 0, .2);
}

.popup-user-status-system {
	border-color: transparent;
}

.popup-user-status-offline {
	background-color: @status-offline;
}

.popup-user-status-online {
	background-color: @status-online;
}

.popup-user-status-away {
	background-color: @status-away;
}

.popup-user-status-busy {
	background-color: @status-busy;
}

.messages-box {
	.load-more {
		span {
			border-color: #CCC;
			background-color: #EEE;
		}
	}
	.start {
		color: @secondary-font-color;
	}
	.new-message {
		background: #428bca;
		color: #FFF;
	}
	.editing {
		.body {
			background-color: #fff7d8;
		}
	}
}

.message {
	&.new-day {
		.day-divider {
			color: @secondary-font-color;
			background-color: @content-background-color;
			span {
				background-color: @content-background-color;
			}
			&:before {
				border-bottom-color: @tertiary-background-color;
			}
		}
	}
	.user {
		color: #444444;
		&:hover {
			color: #333;
		}
	}
	.info {
		color: @info-font-color;
	}
	&.system {
		.body {
			color: @info-font-color;
			.attachment {
				color: @primary-font-color;
			}
		}
	}
	a {
		color: @link-font-color;
		&:hover {
			color: darken(@link-font-color, 10%);
		}
	}
}

// FLEX-TAB and FLEX-TAB views
.flex-tab {
	background-color: @secondary-background-color;
	.control {
		background-color: @secondary-background-color;
		&:before {
			background-color: @tertiary-background-color;
		}
		.more {
			background-color: @tertiary-background-color;
			border-bottom-color: @tertiary-background-color;
			color: @secondary-font-color;
			&:hover {
				.arrow {
					.arrow {
						&:before,
						&:after {
							background-color: #4a4a4a;
						}
					}
				}
			}
			.arrow {
				&:before,
				&:after {
					background-color: #7a7a7a;
				}
			}
			.flex-opened & {
				background-color: @secondary-background-color;
				&:hover {
					.arrow {
						&:before,
						&:after {
							background-color: #7a7a7a;
						}
					}
				}
			}
		}
		.search-form {
			.icon-plus {
				color: @secondary-font-color;
			}
		}
		.info-tabs {
			a {
				color: inherit;
				border-left-color: rgb(234, 234, 234);
				&.active {
					background-color: #F4F4F4;
				}
				&:last-child {
					border-right-color: rgb(234, 234, 234);
				}
			}
		}
	}
	.content {
		.custom-scroll(transparent, #DADADA);
		> div {
			background-color: @secondary-background-color;
		}
	}
	.message {
		&.new-day {
			.day-divider {
				background-color: @secondary-background-color;
				span {
					background-color: @secondary-background-color;
				}
				&:before {
					border-bottom-color: @tertiary-background-color;
				}
			}
		}
	}
}

.list-view {
	-webkit-overflow-scrolling: touch;
	overflow-y: auto;
	overflow-x: hidden;
	.custom-scroll(transparent, #DADADA);
	> .status {
		p {
			color: @secondary-font-color;
		}
		.see-all {
			color: @secondary-font-color;
			background-color: transparent;
		}
	}
}

.user-view {
	-webkit-overflow-scrolling: touch;
	.custom-scroll(transparent, #DADADA);
	.info {
		h3 {
			i.status-offline {
				&:after {
					border-color: darken(@status-offline, 5%);
					background-color: @status-offline;
				}
			}
			i.status-online {
				&:after {
					border-color: darken(@status-online, 5%);
					background-color: @status-online;
				}
			}
			i.status-away {
				&:after {
					border-color: darken(@status-away, 5%);
					background-color: @status-away;
				}
			}
			i.status-busy {
				&:after {
					border-color: darken(@status-busy, 5%);
					background-color: @status-busy;
				}
			}
		}
		p {
			color: @secondary-font-color;
		}
	}
	.stats {
		li {
			background-color: #e9e9e9;
		}
	}
	.box {
		&:after {
			background-color: #CDCDCD;
		}
	}
	.tags {
		li {
			background-color: #CDCDCD;
		}
	}
	.links {
		a {
			color: #6f6f6f;
			&:hover {
				background-color: #e9e9e9;
				color: #333;
			}
		}
	}
	.channels {
		p {
			color: @secondary-font-color;
		}
		a {
			color: #6f6f6f;
		}
	}
	.edit-form {
		p {
			color: @secondary-font-color;
		}
		.form-divisor {
			border-bottom: 1px solid #ddd;
			> span {
				background-color: @secondary-background-color;
			}
		}
	}
}

.user-image-status(@color) {
	.avatar {
		&:after {
			background-color: darken(@color, 5%);
		}
	}
}

.user-image {
	background-color: @tertiary-background-color;
	&:hover,
	&.selected {
		.avatar {
			.status-offline {
				&:after {
					background-color: @status-offline;
				}
			}
			.status-online {
				&:after {
					background-color: @status-online;
				}
			}
			.status-away {
				&:after {
					background-color: @status-away;
				}
			}
			.status-busy {
				&:after {
					background-color: @status-busy;
				}
			}
			p {
				color: @primary-font-color;
			}
		}
	}
	.lines & {
		background-color: transparent;
		a {
			background-color: transparent;
		}
		p {
			color: @secondary-font-color;
		}
	}
	&.status-offline {
		.user-image-status(@status-offline);
	}
	&.status-online {
		.user-image-status(@status-online);
	}
	&.status-away {
		.user-image-status(@status-away);
	}
	&.status-busy {
		.user-image-status(@status-busy);
	}
}

.user-profile {
	.info {
		a {
			color: @primary-font-color;
			&:hover {
				color: @secondary-font-color;
			}
		}
	}
}

.rocket-modal {
	background-color: rgba(0, 0, 0, 0.5);
	&.fluid {
		.modal {
			main {
				.custom-scroll(transparent, #CFCFCF);
			}
		}
	}
	legend {
		color: @secondary-font-color;
		&:before {
			background-color: #dfdfdf;
		}
	}
	.modal {
		background-color: @content-background-color;
		header {
			background-color: #DADADA;
			.close {
				i {
					color: @secondary-font-color;
				}
				&:hover {
					i {
						color: @primary-font-color;
					}
				}
			}
		}
		main {
			background-color: @content-background-color;
		}
		footer {
			background-color: #eaeaea;
		}
	}
}

#login-card {
	background-color: #FAFAFA;
	h2 {
		color: @primary-font-color;
		&.error {
			color: #b40202;
		}
	}
	h3 {
		&.error {
			color: #b40202;
		}
	}
	.input-text {
		input,
		select {
			background-color: transparent;
			border-bottom-color: #DFDFDF;
			&.error {
				border-bottom-color: #b40202;
				&::-webkit-input-placeholder {
					color: #b40202;
				}
				&:-moz-placeholder {
					color: #b40202;
				}
				/* Firefox 18- */
				&::-moz-placeholder {
					color: #b40202;
				}
				/* Firefox 19+ */
				&:-ms-input-placeholder {
					color: #b40202;
				}
			}
		}
		input:-webkit-autofill {
			color: @primary-font-color !important;
			background-color: #FAFAFA !important;
			-webkit-box-shadow: 0 0 0px 1000px #FAFAFA inset;
		}
	}
}

.full-page {
	background-color: darken(@primary-background-color, 10%);
	.background-image(linear-gradient(darken(@primary-background-color, 10%), @primary-background-color));
	.text {
		color: #FFF;
		.button {
			background-color: #bc2031;
			color: #FFF;
		}
	}
	footer {
		color: #fff;
		div.switch-language {
			a {
				color: @secondary-font-color;
			}
		}
	}
}

.avatar-suggestion-item {
	background-color: @secondary-background-color;
	border-color: darken(@secondary-background-color, 10%);
	.avatar {
		background-size: cover;
		background-color: @tertiary-background-color;
	}
	.question-mark {
		&::before {
			color: darken(@tertiary-background-color, 10%);
		}
	}
}

.statistics-table {
	border-color: #eee;
}

@media all and(max-width: 780px) {
	#rocket-chat {
		.main-content {
			background-color: @content-background-color;
		}
	}
}

.dropzone {
	&.over .dropzone-overlay {
		background-color: rgba(0, 0, 0, 0.5);
		color: @content-background-color;
		> div {
			background-color: rgba(0, 0, 0, 0.6);
		}
	}
}

.is-cordova {
	.flex-tab {
		button.more {
			background-color: #fff;
		}
	}
}

.attention-message {
	color: white;
}

.green {
	color: green;
}

.flex-tab-bar {
	background: #FCFCFC;
	.tab-button {
		&:hover {
			background: #EAEAEA;
		}
		&.red {
			color: red;
		}
		&.active {
			background-color: @secondary-background-color;
			border-color: #ff0000;
		}
		&.attention {
			animation-duration: 1000ms;
			animation-name: blink;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		@keyframes blink {
			from {
				color: red;
			}
			to {
				opacity: inherit;
			}
		}
		@-webkit-keyframes blink {
			from {
				color: red;
			}
			to {
				color: inherit;
			}
		}
	}
}


Add stronger background to ui dialog

Add stronger background to ui dialog

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/Singly/hallway.git/'


Add missing file drawer.less

Add missing file drawer.less

.d-footer {
    background: rgba(0, 0, 0, .06);
    border-radius: 2px;
    bottom: 4px;
    height: 48px;
    left: 5px;
    line-height: 48px;
    position: absolute;
    text-align: center;
    width: 250px;
}

error: pathspec 'waartaa/client/app/stylesheets/drawer.less' did not match any file(s) known to git


add box-align

add box-align

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/Julienedies/est.git/'


tree menu sucks

tree menu sucks

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/Det-Kongelige-Bibliotek/rex.git/'


Add justify content support

Add justify content support

fatal: unable to access 'https://github.com/chemikpil/flex-grid.css.git/': The requested URL returned error: 403


Better title position

Better title position

/*!
  github.com/sparanoid/sparanoid.com
*/
/*!
*/

// global variables
@space: 70px;
@txt-width: 750px;
@link: #e34; // #2ed for invert color
@bg: #fff;
@txt: #000;

// invert color switcher for images and videos
// :root { -webkit-filter: invert(100%); }

@font-face {
  font-family: PFDTCP-M; // PFDinTextCompPro-Medium.ttf
  src: url('font.woff') format('woff');
}

.font-face {
  font-family: 'PFDTCP-M', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', sans-serif;
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: -.02em;
  font-size: 56px;
}

.helvetica {
  color: fade(@txt, 40%);
  font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', sans-serif;
  font-size: 12px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: .25em;
}

.transition(@transition) {
  -webkit-transition: @transition;
     -moz-transition: @transition;
}

// basic configurations
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
}

:root {
  color: @txt;
  background: @bg;
  font-size: 28px;
  font-family: Palatino, 'Palatino Linotype', 'Hiragino Mincho ProN', serif;
  line-height: 1.7;
  max-width: 1080px;
  margin: 0 auto;
  padding: @space * 1.5 @space;
  text-rendering: optimizelegibility;
  image-rendering: optimizequality;
}

a {
  color: @txt;
  .transition(~"color .5s ease, background .5s ease, opacity 1.5s ease");
}
  a:hover {
    color: @link;
    .transition(~"color .1s ease, background .1s ease, opacity .1s ease");
  }

ins {
  color: fade(@txt, 40%);
}

del {
  text-decoration: line-through;
}

::selection {
  background: fade(@txt, 5%);
}

// core styles begin
body:before, body:after {
  position: fixed;
  left: 0;
  width: 100%;
  content: '';
  z-index: 9999;
  pointer-events: none;
}
body:before {
  top: 0;
  height: 12px;
  background: fade(@txt, 5%);
  border-bottom: 1px solid fade(@txt, 2%);
}

a[role=logo] {
  float: left;
  display: block;
  width: 37px;
  height: 43px;
  background: url(logo.svg) no-repeat 0 0;
  background-size: auto 43px;
  text-indent: -9999em;
}

nav {
  .helvetica;
}

nav[role=navigation] {
  float: left;
  margin-left: 10px;
  ul {
    position: relative;
    li {
      position: absolute;
      list-style: none;
      &[role=current] {
        z-index: 9999;
      }
      &:not([role=current]) {
        opacity: 0;
        pointer-events: none;
      }
      a {
        padding: 3px .8em;
        font-weight: bold;
        -webkit-font-smoothing: antialiased;
      }
    }
    @base: 15px;
    @rate: 20px;
    &.nav-home {
      top: @base;
      li { top: 0px; }
    }
    &.nav-work {
      top: @base - @rate * 1;
      li { top: @rate * 1; }
    }
    &.nav-store {
      top: @base - @rate * 2;
      li { top: @rate * 2; }
    }
    &.nav-note {
      top: @base - @rate * 3;
      li { top: @rate * 3; }
    }
    &.nav-about {
      top: @base - @rate * 4;
      li { top: @rate * 4; }
    }
    &:hover {
      li {
        .transition(~"top .25s ease-out, opacity .3s ease-out .15s");
        opacity: 1;
        pointer-events: auto;
        &:nth-of-type(1) { top: 0; }
        &:nth-of-type(2) { top: 20px; }
        &:nth-of-type(3) { top: 40px; }
        &:nth-of-type(4) { top: 60px; }
        &:nth-of-type(5) { top: 80px; }
      }
    }
  }
}

nav[role=pagination] {
  a {
    position: absolute;
    top: 241px;
    display: block;
    padding: 7px 10px;
    font-size: 10px;
    letter-spacing: .2em;
    background: fade(@txt, 5%);
    z-index: 9999;
    -webkit-transition: padding .1s ease;
       -moz-transition: padding .1s ease;
    [role=tooltip] {
      position: absolute;
      top: 23px;
      white-space: nowrap;
      opacity: 0;
      padding: 7px 10px;
      color: #fff;
      background: fade(@link, 95%);
      pointer-events: none;
      -webkit-transition: opacity .1s ease, padding .1s ease;
         -moz-transition: opacity .1s ease, padding .1s ease;
    }
    &:hover {
      [role=tooltip] {
        opacity: 1;
      }
    }
    &[role=next] {
      left: 0;
      [role=tooltip] {
        left: 0;
      }
      &:hover {
        padding-left: 15px;
        [role=tooltip] {
          padding-left: 15px;
        }
      }
    }
    &[role=prev] {
      right: 0;
      [role=tooltip] {
        right: 0;
      }
      &:hover {
        padding-right: 15px;
        [role=tooltip] {
          padding-right: 15px;
        }
      }
    }
  }
}

hgroup {
  .font-face;
  padding-bottom: @space * 1.5 * 2/3;
  max-width: @txt-width;
  > * {
    font-weight: normal;
  }
  h2 {
    .helvetica;
    padding-top: .4em;
  }
}

article {
  float: left;
  width: 100%;
  padding-top: @space * 1.35;
  img, video {
    display: block;
    margin: 35px 0;
    max-width: 100%;
  }
  p {
  }
  .txt {
    clear: both;
    max-width: @txt-width;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;
    a {
      border-bottom: 1px dotted fade(@txt, 30%); // set larger value for invert color
    }
    p {
      margin: 1em 0;
      line-height: 1.6;
    }
    h3 {
      .helvetica;
      padding: @space * 1.5 0 0;
      &:first-child {
        margin-top: -@space;
      }
    }
    ul, ol {
      margin: 1em 0 1em 20px;
      list-style: square;
      li {
        line-height: 1.8;
      }
    }
    blockquote {
      position: relative;
      padding-left: @space * .75;
      font-style: italic;
      &:before {
        position: absolute;
        top: -16px;
        left: -8px;
        content: '\201c';
        font-size: 120px;
        line-height: 1;
        color: fade(@txt, 70%);
        font-family: 'Helvetica Neue', sans-serif;
        font-style: normal;
        z-index: -1;
        pointer-events: none;
      }
    }
    sup {
      line-height: 1;
    }
    abbr:after {
      content: " (" attr(title) ")";
    }
    code, pre {
      font-family: Menlo, monospace;
      color: #68a;
    }
  }
  .browser {
    float: left;
    margin: 20px 0 40px;
    padding-top: 16px;
    border-radius: 4px 4px 0 0;
    background: #e8e8e8;
    box-shadow: rgba(0, 0, 0, .15) 0 10px 50px 0, rgba(0, 0, 0, .4) 0 0 0 1px, inset rgba(255, 255, 255, .6) 0 1px 0 0;
    img {
      box-shadow: rgba(0, 0, 0, .4) 0 -1px 0 0;
      margin: 0;
    }
  }
  .note, .download {
    background-size: 40px 40px;
    padding-left: 50px;
  }
  .download {
    background: url(download.svg) no-repeat 0 0;
  }
  .note {
    background: url(note.svg) no-repeat 0 0;

  }
}

// workaround solution for post with chinese
[lang=zh] .txt {
  p, li {
    text-align: justify;
  }
}

// image list in "work"
@thumb-size: 95px;
@thumb-padding: 14px;

ul[role^=work-list] {
  padding-top: 20px - @thumb-padding;
  clear: both;
  overflow: hidden;
  margin-left: -@thumb-padding;
  margin-right: -@thumb-padding;
  li {
    position: relative;
    list-style: none;
    float: left;
    line-height: 0;
    text-align: left;
    margin: @thumb-padding;
    img {
      width: @thumb-size;
      height: @thumb-size;
      // override: article img
      margin: 0;
      background: @link;
    }
    a {
      position: absolute;
      top: -@thumb-padding;
      left: -@thumb-padding;
      padding: @thumb-padding;
      width: @thumb-size;
      height: @thumb-size;
      .font-face;
      -webkit-font-smoothing: antialiased;
      color: #fff;
      font-size: 18px;
      line-height: 1.2;
      opacity: 0;
      background: fade(@link, 90%);
    }
    &:hover a {
      opacity: 1;
    }
  }
}

// image navigation in post page
h3[role=work-list-title] {
  .helvetica;
  padding: @space * 1.5 0 0;
  float: left;
}

// post list in "note"
div[role^=note-list] {
  // make sure the last post next to footer has the correct margin value.
  margin-top: -@space;
  section {
    h2 {
      .font-face;
      margin: -3px 0 -12px;
      max-width: @txt-width;
      font-weight: normal;
      time {
        color: fade(@txt, 30%);
      }
      // an infinite symbol next to the post date
      time + a {
        // need line-height: 0 to make vertical-align work
        line-height: 0;
        vertical-align: 3px;
      }
    }
    padding-top: @space * 1.5;
  }
}

aside {
  padding: @space 0 0;
  width: 200px;
  clear: both;
  // BuySellAds block
  .bsap {
    padding: 10px 0 @space;
    .bsa_it_i {
      display: block;
    }
    .bsa_it_t {
      display: block;
      margin: 1em 0;
    }
    .bsa_it_d {
      display: block;
      margin: 1em 0;
      line-height: 1.7;
    }
    .bsa_it_p {
      display: block;
      font-size: 12px;
      a {
        color: fade(@txt, 40%);
        &:hover {
          color: #000;
        }
      }
    }
  }
}

footer {
  padding: 15px 0;
  .helvetica;
  font-size: 11px;
}

// small screen
@media (max-width: 640px) {
  article .txt {
    font-size: 80%;
  }
}

// all ios devices, the easy way
@media (max-device-width: 480px), (max-device-width: 1024px) {
  nav[role=navigation] {
    ul {
      position: static;
      li {
        float: left;
        position: static;
        &[role=current] {
          a {
            color: @link;
          }
        }
        &:not([role=current]) {
          opacity: 1;
          pointer-events: auto;
        }
        &:first-child {
          display: none;
        }
        a {
          display: block;
          padding: 15px .6em;
        }
      }
    }
  }
}

// iphone
@media (max-device-width: 480px) {
  :root {
    -webkit-text-size-adjust: none;
  }
}

// iphone portrait
@media (max-device-width: 480px) and (orientation: portrait) {
  :root {
    padding: @space * 1.5 20px;
  }

  a[role=logo] {
    float: none;
  }

  nav[role=navigation] {
    float: none;
    margin-left: 0;
    margin-top: 10px;
    ul {
      li {
        float: none;
        a {
          padding: 10px 0;
        }
      }
    }
  }

  ul[role^=work-list] {
    li {
      float: none;
      margin-bottom: @thumb-padding * 2;
      img {
        width: 100%;
        // should be 100%, but Safari for iOS has stupid bug for it.
        height: auto;
      }
      a {
        width: 100%;
        height: 100%;
        font-size: 24px;
      }
    }
  }
}

/*!
  github.com/sparanoid/sparanoid.com
*/
/*!
*/

// global variables
@space: 70px;
@txt-width: 750px;
@link: #e34; // #2ed for invert color
@bg: #fff;
@txt: #000;

// invert color switcher for images and videos
// :root { -webkit-filter: invert(100%); }

@font-face {
  font-family: PFDTCP-M; // PFDinTextCompPro-Medium.ttf
  src: url('font.woff') format('woff');
}

.font-face {
  font-family: 'PFDTCP-M', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', sans-serif;
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: -.02em;
  font-size: 56px;
}

.helvetica {
  color: fade(@txt, 40%);
  font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', sans-serif;
  font-size: 12px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: .25em;
}

.transition(@transition) {
  -webkit-transition: @transition;
     -moz-transition: @transition;
}

// basic configurations
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
}

:root {
  color: @txt;
  background: @bg;
  font-size: 28px;
  font-family: Palatino, 'Palatino Linotype', 'Hiragino Mincho ProN', serif;
  line-height: 1.7;
  max-width: 1080px;
  margin: 0 auto;
  padding: @space * 1.5 @space;
  text-rendering: optimizelegibility;
  image-rendering: optimizequality;
}

a {
  color: @txt;
  .transition(~"color .5s ease, background .5s ease, opacity 1.5s ease");
}
  a:hover {
    color: @link;
    .transition(~"color .1s ease, background .1s ease, opacity .1s ease");
  }

ins {
  color: fade(@txt, 40%);
}

del {
  text-decoration: line-through;
}

::selection {
  background: fade(@txt, 5%);
}

// core styles begin
body:before, body:after {
  position: fixed;
  left: 0;
  width: 100%;
  content: '';
  z-index: 9999;
  pointer-events: none;
}
body:before {
  top: 0;
  height: 12px;
  background: fade(@txt, 5%);
  border-bottom: 1px solid fade(@txt, 2%);
}

a[role=logo] {
  float: left;
  display: block;
  width: 37px;
  height: 43px;
  background: url(logo.svg) no-repeat 0 0;
  background-size: auto 43px;
  text-indent: -9999em;
}

nav {
  .helvetica;
}

nav[role=navigation] {
  float: left;
  margin-left: 10px;
  ul {
    position: relative;
    li {
      position: absolute;
      list-style: none;
      &[role=current] {
        z-index: 9999;
      }
      &:not([role=current]) {
        opacity: 0;
        pointer-events: none;
      }
      a {
        padding: 3px .8em;
        font-weight: bold;
        -webkit-font-smoothing: antialiased;
      }
    }
    @base: 15px;
    @rate: 20px;
    &.nav-home {
      top: @base;
      li { top: 0px; }
    }
    &.nav-work {
      top: @base - @rate * 1;
      li { top: @rate * 1; }
    }
    &.nav-store {
      top: @base - @rate * 2;
      li { top: @rate * 2; }
    }
    &.nav-note {
      top: @base - @rate * 3;
      li { top: @rate * 3; }
    }
    &.nav-about {
      top: @base - @rate * 4;
      li { top: @rate * 4; }
    }
    &:hover {
      li {
        .transition(~"top .25s ease-out, opacity .3s ease-out .15s");
        opacity: 1;
        pointer-events: auto;
        &:nth-of-type(1) { top: 0; }
        &:nth-of-type(2) { top: 20px; }
        &:nth-of-type(3) { top: 40px; }
        &:nth-of-type(4) { top: 60px; }
        &:nth-of-type(5) { top: 80px; }
      }
    }
  }
}

nav[role=pagination] {
  a {
    position: absolute;
    top: 241px;
    display: block;
    padding: 7px 10px;
    font-size: 10px;
    letter-spacing: .2em;
    background: fade(@txt, 5%);
    z-index: 9999;
    -webkit-transition: padding .1s ease;
       -moz-transition: padding .1s ease;
    [role=tooltip] {
      position: absolute;
      top: 23px;
      white-space: nowrap;
      opacity: 0;
      padding: 7px 10px;
      color: #fff;
      background: fade(@link, 95%);
      pointer-events: none;
      -webkit-transition: opacity .1s ease, padding .1s ease;
         -moz-transition: opacity .1s ease, padding .1s ease;
    }
    &:hover {
      [role=tooltip] {
        opacity: 1;
      }
    }
    &[role=next] {
      left: 0;
      [role=tooltip] {
        left: 0;
      }
      &:hover {
        padding-left: 15px;
        [role=tooltip] {
          padding-left: 15px;
        }
      }
    }
    &[role=prev] {
      right: 0;
      [role=tooltip] {
        right: 0;
      }
      &:hover {
        padding-right: 15px;
        [role=tooltip] {
          padding-right: 15px;
        }
      }
    }
  }
}

hgroup {
  .font-face;
  padding-bottom: @space * 1.5 * 2/3;
  max-width: @txt-width;
  > * {
    font-weight: normal;
  }
  h2 {
    .helvetica;
    padding-top: .4em;
  }
}

article {
  float: left;
  width: 100%;
  padding-top: @space * 1.35;
  img, video {
    display: block;
    margin: 35px 0;
    max-width: 100%;
  }
  p {
  }
  .txt {
    clear: both;
    max-width: @txt-width;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;
    a {
      border-bottom: 1px dotted fade(@txt, 30%); // set larger value for invert color
    }
    p {
      margin: 1em 0;
      line-height: 1.6;
    }
    h3 {
      .helvetica;
      padding: @space * 1.5 0 0;
      &:first-child {
        margin-top: -@space;
      }
    }
    ul, ol {
      margin: 1em 0 1em 20px;
      list-style: square;
      li {
        line-height: 1.8;
      }
    }
    blockquote {
      position: relative;
      padding-left: @space * .75;
      font-style: italic;
      &:before {
        position: absolute;
        top: -16px;
        left: -8px;
        content: '\201c';
        font-size: 120px;
        line-height: 1;
        color: fade(@txt, 70%);
        font-family: 'Helvetica Neue', sans-serif;
        font-style: normal;
        z-index: -1;
        pointer-events: none;
      }
    }
    sup {
      line-height: 1;
    }
    abbr:after {
      content: " (" attr(title) ")";
    }
    code, pre {
      font-family: Menlo, monospace;
      color: #68a;
    }
  }
  .browser {
    float: left;
    margin: 20px 0 40px;
    padding-top: 16px;
    border-radius: 4px 4px 0 0;
    background: #e8e8e8;
    box-shadow: rgba(0, 0, 0, .15) 0 10px 50px 0, rgba(0, 0, 0, .4) 0 0 0 1px, inset rgba(255, 255, 255, .6) 0 1px 0 0;
    img {
      box-shadow: rgba(0, 0, 0, .4) 0 -1px 0 0;
      margin: 0;
    }
  }
  .note, .download {
    background-size: 40px 40px;
    padding-left: 50px;
  }
  .download {
    background: url(download.svg) no-repeat 0 0;
  }
  .note {
    background: url(note.svg) no-repeat 0 0;

  }
}

// workaround solution for post with chinese
[lang=zh] .txt {
  p, li {
    text-align: justify;
  }
}

// image list in "work"
@thumb-size: 95px;
@thumb-padding: 14px;

ul[role^=work-list] {
  padding-top: 20px;
  clear: both;
  overflow: hidden;
  margin-left: -@thumb-padding;
  margin-right: -@thumb-padding;
  li {
    position: relative;
    list-style: none;
    float: left;
    line-height: 0;
    text-align: left;
    margin: @thumb-padding;
    img {
      width: @thumb-size;
      height: @thumb-size;
      // override: article img
      margin: 0;
      background: @link;
    }
    a {
      position: absolute;
      top: -@thumb-padding;
      left: -@thumb-padding;
      padding: @thumb-padding;
      width: @thumb-size;
      height: @thumb-size;
      .font-face;
      -webkit-font-smoothing: antialiased;
      color: #fff;
      font-size: 18px;
      line-height: 1.2;
      opacity: 0;
      background: fade(@link, 90%);
    }
    &:hover a {
      opacity: 1;
    }
  }
}

// image navigation in post page
h3[role=work-list-title] {
  .helvetica;
  padding: @space * 1.5 0 0;
  float: left;
}

// post list in "note"
div[role^=note-list] {
  // make sure the last post next to footer has the correct margin value.
  margin-top: -@space;
  section {
    h2 {
      .font-face;
      margin: -3px 0 -12px;
      max-width: @txt-width;
      font-weight: normal;
      time {
        color: fade(@txt, 30%);
      }
      // an infinite symbol next to the post date
      time + a {
        // need line-height: 0 to make vertical-align work
        line-height: 0;
        vertical-align: 3px;
      }
    }
    padding-top: @space * 1.5;
  }
}

aside {
  padding: @space 0 0;
  width: 200px;
  clear: both;
  // BuySellAds block
  .bsap {
    padding: 10px 0 @space;
    .bsa_it_i {
      display: block;
    }
    .bsa_it_t {
      display: block;
      margin: 1em 0;
    }
    .bsa_it_d {
      display: block;
      margin: 1em 0;
      line-height: 1.7;
    }
    .bsa_it_p {
      display: block;
      font-size: 12px;
      a {
        color: fade(@txt, 40%);
        &:hover {
          color: #000;
        }
      }
    }
  }
}

footer {
  padding: 15px 0;
  .helvetica;
  font-size: 11px;
}

// small screen
@media (max-width: 640px) {
  article .txt {
    font-size: 80%;
  }
}

// all ios devices, the easy way
@media (max-device-width: 480px), (max-device-width: 1024px) {
  nav[role=navigation] {
    ul {
      position: static;
      li {
        float: left;
        position: static;
        &[role=current] {
          a {
            color: @link;
          }
        }
        &:not([role=current]) {
          opacity: 1;
          pointer-events: auto;
        }
        &:first-child {
          display: none;
        }
        a {
          display: block;
          padding: 15px .6em;
        }
      }
    }
  }
}

// iphone
@media (max-device-width: 480px) {
  :root {
    -webkit-text-size-adjust: none;
  }
}

// iphone portrait
@media (max-device-width: 480px) and (orientation: portrait) {
  :root {
    padding: @space * 1.5 20px;
  }

  a[role=logo] {
    float: none;
  }

  nav[role=navigation] {
    float: none;
    margin-left: 0;
    margin-top: 10px;
    ul {
      li {
        float: none;
        a {
          padding: 10px 0;
        }
      }
    }
  }

  ul[role^=work-list] {
    li {
      float: none;
      margin-bottom: @thumb-padding * 2;
      img {
        width: 100%;
        // should be 100%, but Safari for iOS has stupid bug for it.
        height: auto;
      }
      a {
        width: 100%;
        height: 100%;
        font-size: 24px;
      }
    }
  }
}


Animated [ADD] First lines of the new 'animated' component

@animation-duration: 1s;
@fade-translation-distance: 3em;
@scale-animation-ratio: 25; // Percentage

.lui.animated {
	animation-duration: @animation-duration;
	animation-fill-mode: both;
}

.lui.infinitely.animated { animation-iteration-count: infinite; }

/**
 * Fading animations
 * --------------------------------------------------------------------------- */

// Simple fade in/out
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
.lui.animated.fade.in { animation-name(fadeIn); }

@keyframes fadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}
.lui.animated.fade.out { animation-name(fadeOut); }

// Upsided fade in/out
@keyframes fadeInUp {
	from { opacity: 0;  transform: translate3d(0, -@fade-translation-distance, 0); }
	to { opacity: 1; transform: none; }
}
.lui.animated[class*="fade in up"] { animation-name(fadeInUp); }

@keyframes fadeOutUp {
	from { opacity: 1;  transform: none }
	to { opacity: 0; transform: translate3d(0, -@fade-translation-distance, 0);; }
}
.lui.animated[class*="fade out up"] { animation-name(fadeInUp); }

// Downsided fade in/out
@keyframes fadeInDown {
	from { opacity: 0;  transform: translate3d(0, @fade-translation-distance, 0); }
	to { opacity: 1; transform: none; }
}
.lui.animated[class*="fade in down"] { animation-name(fadeInDown); }

@keyframes fadeOutDown {
	from { opacity: 1;  transform: none }
	to { opacity: 0; transform: translate3d(0, @fade-translation-distance, 0);; }
}
.lui.animated[class*="fade out down"] { animation-name(fadeInDown); }

// Leftsided fade in/out
@keyframes fadeInLeft {
	from { opacity: 0;  transform: translate3d(-@fade-translation-distance, 0, 0); }
	to { opacity: 1; transform: none; }
}
.lui.animated[class*="fade in left"] { animation-name(fadeInLeft); }

@keyframes fadeOutLeft {
	from { opacity: 1;  transform: none }
	to { opacity: 0; transform: translate3d(-@fade-translation-distance, 0, 0);; }
}
..lui.animated[class*="fade out left"]{ animation-name(fadeInLeft); }

// Rightsided fade in/out
@keyframes fadeInRight {
	from { opacity: 0;  transform: translate3d(@fade-translation-distance, 0, 0); }
	to { opacity: 1; transform: none; }
}
.lui.animated[class*="fade in right"] { animation-name(fadeInRight); }

@keyframes fadeOutRight {
	from { opacity: 1;  transform: none }
	to { opacity: 0; transform: translate3d(@fade-translation-distance, 0, 0);; }
}
.lui.animated[class*="fade out left"] { animation-name(fadeInRight); }

/**
 * Scaling animations
 * --------------------------------------------------------------------------- */

 // Down scale
@keyframes downScaleIn {
	from { transform: scale(@scale-animation-ratio / 100); }
	to { transform: scale(1); }
}
.lui.animated[class*="down scale in"] { animation-name: downScaleIn; }

@keyframes downScaleOut {
	from { transform: scale(1); }
	to { transform: scale(@scale-animation-ratio / 100); }
}
.lui.animated[class*="down scale in"] { animation-name: downScaleIn; }

// Up scale
@keyframes upScaleIn {
	from { transform: scale(1 + @scale-animation-ratio / 100); }
	to { transform: scale(1); }
}
.lui.animated[class*="up scale in"] { animation-name: upScaleIn; }

@keyframes upScaleOut {
	from { transform: scale(1); }
	to { transform: scale(1 + @scale-animation-ratio / 100); }
}
.lui.animated[class*="up scale in"] { animation-name: upScaleIn; }

/**
 * Sliding animations
 * --------------------------------------------------------------------------- */

 // Slide vertical
@keyframes slideInVertical {
	from { transform: scale(1, 0); }
	to { transform: scale(1, 1); }
}
.lui.animated[class*="slide in up"] { transform-origin: center top; animation-name: slideInVertical; }
.lui.animated[class*="slide in down"] { transform-origin: center bottom; animation-name: slideInVertical; }

@keyframes slideOutVertical {
	from { transform: scale(1, 1); }
	to { transform: scale(1, 0); }
}
.lui.animated[class*="slide out up"] { transform-origin: center top; animation-name: slideOutVertical; }
.lui.animated[class*="slide out down"] { transform-origin: center bottom; animation-name: slideOutVertical; }

// Slide horizontal
@keyframes slideInHorizontal {
	from { transform: scale(0, 1); }
	to { transform: scale(1, 1); }
}
.lui.animated[class*="slide in left"] { transform-origin: left center; animation-name: slideInHorizontal; }
.lui.animated[class*="slide in right"] { transform-origin: right center; animation-name: slideInHorizontal; }

@keyframes slideOutHorizontal {
	from { transform: scale(1, 1); }
	to { transform: scale(0, 1); }
}
.lui.animated[class*="slide out left"] { transform-origin: left center; animation-name: slideOutHorizontal; }
.lui.animated[class*="slide out right"] { transform-origin: right center; animation-name: slideOutHorizontal; }

error: pathspec 'src/core/definitions/_animated.less' did not match any file(s) known to git


fix #2278 (gridMenu scroll)

fix #2278 (gridMenu scroll)

added overflow-y scroll to grid-menu. This loses the outer
shadow, so might not be ideal solution. Added border to
make it look better.

.ui-grid-menu-button {
  z-index: 2;
  position: absolute;
  right: 0;
  background: @headerBackgroundColor;
  border: @gridBorderWidth solid @borderColor;
  cursor: pointer;
  min-height: 27px;
  font-weight: normal;
}

.ui-grid-menu-button .ui-grid-icon-container {
  margin-top: 3px;
}

.ui-grid-menu-button .ui-grid-menu {
  right: 0;
  .ui-grid-menu-mid {
    overflow-y: scroll;
    max-height: 300px;
    border: @gridBorderWidth solid @borderColor;
  }
}

.ui-grid-menu {
  z-index: 2; // So it shows up over grid canvas
  position: fixed;
  overflow: hidden;
  padding: 0 10px 20px 10px;
  cursor: pointer;
  box-sizing: content-box;
}

.ui-grid-menu .ui-grid-menu-inner {
  background: @headerBackgroundColor;
  border: @gridBorderWidth solid @borderColor;
  position: relative;
  white-space: nowrap;

  .rounded(@gridBorderRadius);
  .box-shadow(e("0 10px 20px rgba(0, 0, 0, 0.2), inset 0 12px 12px -14px rgba(0, 0, 0, 0.2)"));
}

.ui-grid-menu .ui-grid-menu-inner ul {
  margin: 0;
  padding: 0;
  list-style-type: none;

  li {
    padding: 8px;
    cursor: pointer;

    // Show a shadow when hovering over a menu item
    &:hover {
      // background-color: negation(@headerBackgroundColor, #fff);
      .inner-shadow(@vertical: 0, @blur: 14px, @alpha: 0.2);
    }

    &.ui-grid-menu-item-active {
      .inner-shadow(@vertical: 0, @blur: 14px, @alpha: 0.2);
      background-color: @selectedColor;
    }
  }

  // Show a bottom border on all but the last menu item
  li:not(:last-child) {
    border-bottom: @gridBorderWidth solid @borderColor;
  }
}

.ui-grid-menu-button {
  z-index: 2;
  position: absolute;
  right: 0;
  background: @headerBackgroundColor;
  border: @gridBorderWidth solid @borderColor;
  cursor: pointer;
  min-height: 27px;
  font-weight: normal;
}

.ui-grid-menu-button .ui-grid-icon-container {
  margin-top: 3px;
}

.ui-grid-menu-button .ui-grid-menu {
  right: 0;
}

.ui-grid-menu {
  z-index: 2; // So it shows up over grid canvas
  position: fixed;
  overflow: hidden;
  padding: 0 10px 20px 10px;
  cursor: pointer;
  box-sizing: content-box;
}

.ui-grid-menu .ui-grid-menu-inner {
  background: @headerBackgroundColor;
  border: @gridBorderWidth solid @borderColor;
  position: relative;
  white-space: nowrap;

  .rounded(@gridBorderRadius);
  .box-shadow(e("0 10px 20px rgba(0, 0, 0, 0.2), inset 0 12px 12px -14px rgba(0, 0, 0, 0.2)"));
}

.ui-grid-menu .ui-grid-menu-inner ul {
  margin: 0;
  padding: 0;
  list-style-type: none;

  li {
    padding: 8px;
    cursor: pointer;

    // Show a shadow when hovering over a menu item
    &:hover {
      // background-color: negation(@headerBackgroundColor, #fff);
      .inner-shadow(@vertical: 0, @blur: 14px, @alpha: 0.2);
    }

    &.ui-grid-menu-item-active {
      .inner-shadow(@vertical: 0, @blur: 14px, @alpha: 0.2);
      background-color: @selectedColor;
    }
  }

  // Show a bottom border on all but the last menu item
  li:not(:last-child) {
    border-bottom: @gridBorderWidth solid @borderColor;
  }
}


fix site style

fix site style

@media only screen and (min-width: 320px) and (max-width: 1024px) {
  .code-boxes-col-2-1, .code-boxes-col-1-1 {
    float: none;
    width: 100%;
    padding: 0!important;
  }
  #search-box {
    display: none;
  }
  .preview-image-boxes {
    margin: 0!important;
    float: none;
    width: 100%;
  }
  .preview-image-box {
    padding-left: 0;
    margin: 10px 0;
  }
}

@media only screen and (min-width: 320px) and (max-width: 767px) {
  #list,
  #search-box {
    display: none;
  }

  a#logo {
    width: 144px;
    margin-left: auto;
    margin-right: auto;
    float: none;
    display: block;
  }

  .banner-entry {
    position: relative;
    top: 30px;
    left: 0;
    text-align: center;
  }

  .nav {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background: #fff;
    line-height: 60px;
    margin-right: 0;
    width: 50%;
    height: 100%;
    box-shadow: 10px 0 12px rgba(0,0,0,0.1);
    transform: translateX(-100%);
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .nav.nav-show {
    animation: moveLeft .2s ease-in forwards;
  }

  .nav.nav-hide {
    animation: moveLeftOut .2s ease-in forwards;
  }

  ul#nav, ul#nav li {
    width: 100%;
  }

  .toc {
    display: none;
  }

  .nav-phone-icon {
    display: block;
    width: 16px;
    height: 50px;
    position: absolute;
    left: 30px;
    top: 32px;
    cursor: pointer;
  }

  .nav-phone-icon:before {
    content: "";
    display: block;
    border-radius: 2px;
    width: 16px;
    height: 2px;
    background: #777;
    box-shadow: 0 6px 0 0 #777, 0 12px 0 0 #777;
    position: absolute;
  }

  .main {
    height: calc(100% - 86px);
  }

  .aside-container {
    float: none;
    width: auto;
    padding-bottom: 30px;
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 30px;
  }

  .main-container {
    margin-left: 0;
    > .markdown > * {
      width: 100%!important;
    }
  }

  .main-wrapper {
    width: 100%;
    border-radius: 0;
  }

  .main-container {
    padding-left: 30px;
    padding-right: 30px;
  }

  footer {
    text-align: center;
  }

  footer ul li {
    float: none;
    width: auto;
  }
}

@keyframes moveLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes moveLeftOut {
  0% {
    transform: translateX(0px);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@media only screen and (min-width: 320px) and (max-width: 1024px) {
  .code-boxes-col-2-1, .code-boxes-col-1-1 {
    float: none;
    width: 100%;
    padding: 0!important;
  }
  #search-box {
    display: none;
  }
  .preview-image-boxes {
    margin: 0!important;
    float: none;
    width: 100%;
  }
  .preview-image-box {
    padding-left: 0;
    margin: 10px 0;
  }
}

@media only screen and (min-width: 320px) and (max-width: 767px) {
  #list,
  #search-box {
    display: none;
  }

  a#logo {
    width: 144px;
    margin-left: auto;
    margin-right: auto;
    float: none;
    display: block;
  }

  .banner-entry {
    position: relative;
    top: 30px;
    left: 0;
    text-align: center;
  }

  .nav {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background: #fff;
    line-height: 60px;
    margin-right: 0;
    width: 50%;
    height: 100%;
    box-shadow: 10px 0 12px rgba(0,0,0,0.1);
    transform: translateX(-100%);
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .nav.nav-show {
    animation: moveLeft .2s ease-in forwards;
  }

  .nav.nav-hide {
    animation: moveLeftOut .2s ease-in forwards;
  }

  ul#nav, ul#nav li {
    width: 100%;
  }

  .toc {
    display: none;
  }

  .nav-phone-icon {
    display: block;
    width: 16px;
    height: 50px;
    position: absolute;
    left: 30px;
    top: 32px;
    cursor: pointer;
  }

  .nav-phone-icon:before {
    content: "";
    display: block;
    border-radius: 2px;
    width: 16px;
    height: 2px;
    background: #777;
    box-shadow: 0 6px 0 0 #777, 0 12px 0 0 #777;
    position: absolute;
  }

  .main {
    height: calc(100% - 86px);
  }

  .aside-container {
    float: none;
    width: auto;
    padding-bottom: 30px;
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 30px;
  }

  .main-container {
    margin-left: 0;
    .markdown > * {
      width: 100%!important;
    }
  }

  .main-wrapper {
    width: 100%;
    border-radius: 0;
  }

  .main-container {
    padding-left: 30px;
    padding-right: 30px;
  }

  footer {
    text-align: center;
  }

  footer ul li {
    float: none;
    width: auto;
  }
}

@keyframes moveLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes moveLeftOut {
  0% {
    transform: translateX(0px);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}


debug

debug

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/wantplus/pili-web.git/'


Added .less version of stylesheet

Added .less version of stylesheet

fatal: unable to access 'https://github.com/aeolingamenfel/toast-controller.git/': The requested URL returned error: 403


Fix dropdown position

Fix dropdown position

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/yalexx/meteor.git/'


Possible fix for Windows quiet scrollbars.

/*
 * Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a
 * copy of this software and associated documentation files (the "Software"),
 * to deal in the Software without restriction, including without limitation
 * the rights to use, copy, modify, merge, publish, distribute, sublicense,
 * and/or sell copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 * DEALINGS IN THE SOFTWARE.
 *
 */

/* Temporary implementation of unobtrusive scrollbars.
   FUTURE: These currently rely on nonstandard WebKit styles, and don't have all the right behavior.
   Longer-term, we'll need to implement custom scrollbars. */

.platform-mac .quiet-scrollbars,
.platform-win .quiet-scrollbars,
.platform-linux .quiet-scrollbars,
.dark.platform-mac .quiet-scrollbars,
.dark.platform-win .quiet-scrollbars,
.dark.platform-linux .quiet-scrollbars {

    ::-webkit-scrollbar {
        width: 9px;
        height: 9px;
        background-color: transparent;
    }

    ::-webkit-scrollbar-corner {
        background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
        box-shadow: none;
        border: none;
    }

    /* This looks like a dupe, but without it the thumb doesn't fade in
     * properly, probably due to flakiness in how these styles are handled
     * in the build of WebKit that's in CEF.
     */
    ::-webkit-scrollbar-corner {
        background-color: transparent;
    }

    :hover::-webkit-scrollbar-thumb,
    :focus::-webkit-scrollbar-thumb {
        border-radius: 999px;
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.6) inset;
        border: 2px solid transparent;
    }

    :hover::-webkit-scrollbar-thumb:vertical,
    :focus::-webkit-scrollbar-thumb:vertical {
        min-height: 20px;
    }

    :hover::-webkit-scrollbar-thumb:horizontal,
    :focus::-webkit-scrollbar-thumb:horizontal {
        min-width: 20px;
    }
}

.platform-linux {
    // Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js

    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    ::-webkit-scrollbar-track:vertical {
        margin: 0 0 8px 0;
    }

    ::-webkit-scrollbar-track:horizontal {
        margin: 0 8px 0 0;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 999px;
        box-shadow: 0 0 0 4px @linux-scrollbar-thumb inset;
        border: 2px solid transparent;
    }

    ::-webkit-scrollbar-corner {
        background: none;
    }

    ::-webkit-scrollbar-thumb:window-inactive {
        box-shadow: 0 0 0 5px @linux-scrollbar-thumb-inactive inset;
    }
}

.platform-win {
    // Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js

    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
        background-color: @win-scrollbar-track;
    }

    ::-webkit-scrollbar-thumb {
        box-shadow: 0 0 0 12px @win-scrollbar-thumb inset;
    }
    ::-webkit-scrollbar-thumb:hover,
    ::-webkit-scrollbar-thumb:focus {
        box-shadow: 0 0 0 12px @win-scrollbar-thumb-hover inset;
    }
    ::-webkit-scrollbar-thumb:active {
        box-shadow: 0 0 0 12px @win-scrollbar-thumb-active inset;
    }

    ::-webkit-scrollbar-thumb:vertical {
        min-height: 20px;
    }
    ::-webkit-scrollbar-thumb:horizontal {
        min-width: 20px;
    }

    ::-webkit-scrollbar-corner {
        background: none;
    }
}

// Dark Scrollbars

.dark {
    /* Custom scrollbar colors */
    &.platform-mac {
        .CodeMirror-scrollbar-filler,
        .CodeMirror-gutter-filler {
            background-color: rgb(15, 15, 15);
        }

        // Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js

        ::-webkit-scrollbar {
            background-color: rgb(15, 15, 15);
        }

        ::-webkit-scrollbar-thumb {
            box-shadow: 0 0 0 12px rgb(49, 49, 49) inset;
        }
        ::-webkit-scrollbar-thumb:hover,
        ::-webkit-scrollbar-thumb:focus {
            box-shadow: 0 0 0 12px rgb(89, 89, 89) inset;
        }
        ::-webkit-scrollbar-thumb:active {
            box-shadow: 0 0 0 12px rgb(169, 169, 169) inset;
        }
    }

    &.platform-linux {
        .CodeMirror-scrollbar-filler,
        .CodeMirror-gutter-filler {
            background-color: #1d1f21;
        }

        ::-webkit-scrollbar-thumb {
            box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.24) inset;
        }

        ::-webkit-scrollbar-thumb:window-inactive {
            box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12) inset;
        }
    }
}

/*
 * Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a
 * copy of this software and associated documentation files (the "Software"),
 * to deal in the Software without restriction, including without limitation
 * the rights to use, copy, modify, merge, publish, distribute, sublicense,
 * and/or sell copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 * DEALINGS IN THE SOFTWARE.
 *
 */

/* Temporary implementation of unobtrusive scrollbars.
   FUTURE: These currently rely on nonstandard WebKit styles, and don't have all the right behavior.
   Longer-term, we'll need to implement custom scrollbars. */

.platform-mac .quiet-scrollbars,
.platform-win .quiet-scrollbars,
.platform-linux .quiet-scrollbars {

    ::-webkit-scrollbar {
        width: 9px;
        height: 9px;
        background-color: transparent;
    }

    ::-webkit-scrollbar-corner {
        background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
        box-shadow: none;
        border: none;
    }

    /* This looks like a dupe, but without it the thumb doesn't fade in
     * properly, probably due to flakiness in how these styles are handled
     * in the build of WebKit that's in CEF.
     */
    ::-webkit-scrollbar-corner {
        background-color: transparent;
    }

    :hover::-webkit-scrollbar-thumb,
    :focus::-webkit-scrollbar-thumb {
        border-radius: 999px;
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.6) inset;
        border: 2px solid transparent;
    }

    :hover::-webkit-scrollbar-thumb:vertical,
    :focus::-webkit-scrollbar-thumb:vertical {
        min-height: 20px;
    }

    :hover::-webkit-scrollbar-thumb:horizontal,
    :focus::-webkit-scrollbar-thumb:horizontal {
        min-width: 20px;
    }
}

.platform-linux {
    // Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js

    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    ::-webkit-scrollbar-track:vertical {
        margin: 0 0 8px 0;
    }

    ::-webkit-scrollbar-track:horizontal {
        margin: 0 8px 0 0;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 999px;
        box-shadow: 0 0 0 4px @linux-scrollbar-thumb inset;
        border: 2px solid transparent;
    }

    ::-webkit-scrollbar-corner {
        background: none;
    }

    ::-webkit-scrollbar-thumb:window-inactive {
        box-shadow: 0 0 0 5px @linux-scrollbar-thumb-inactive inset;
    }
}

.platform-win {
    // Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js

    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
        background-color: @win-scrollbar-track;
    }

    ::-webkit-scrollbar-thumb {
        box-shadow: 0 0 0 12px @win-scrollbar-thumb inset;
    }
    ::-webkit-scrollbar-thumb:hover,
    ::-webkit-scrollbar-thumb:focus {
        box-shadow: 0 0 0 12px @win-scrollbar-thumb-hover inset;
    }
    ::-webkit-scrollbar-thumb:active {
        box-shadow: 0 0 0 12px @win-scrollbar-thumb-active inset;
    }

    ::-webkit-scrollbar-thumb:vertical {
        min-height: 20px;
    }
    ::-webkit-scrollbar-thumb:horizontal {
        min-width: 20px;
    }

    ::-webkit-scrollbar-corner {
        background: none;
    }
}

// Dark Scrollbars

.dark {
    /* Custom scrollbar colors */
    &.platform-win {
        .CodeMirror-scrollbar-filler,
        .CodeMirror-gutter-filler {
            background-color: rgb(15, 15, 15);
        }

        // Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js

        ::-webkit-scrollbar {
            background-color: rgb(15, 15, 15);
        }

        ::-webkit-scrollbar-thumb {
            box-shadow: 0 0 0 12px rgb(49, 49, 49) inset;
        }
        ::-webkit-scrollbar-thumb:hover,
        ::-webkit-scrollbar-thumb:focus {
            box-shadow: 0 0 0 12px rgb(89, 89, 89) inset;
        }
        ::-webkit-scrollbar-thumb:active {
            box-shadow: 0 0 0 12px rgb(169, 169, 169) inset;
        }
    }

    &.platform-linux {
        .CodeMirror-scrollbar-filler,
        .CodeMirror-gutter-filler {
            background-color: #1d1f21;
        }

        ::-webkit-scrollbar-thumb {
            box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.24) inset;
        }

        ::-webkit-scrollbar-thumb:window-inactive {
            box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12) inset;
        }
    }
}


[NEW] Essentially the Chosen Less file (bootstrap-chosen.less) but minus the direct import of the default variables file. This avoids conflicts caused by the default values, and exposes the Less file to Tiki theme variable files for customization. Missed committing earlier; thanks, Jonny.

git-svn-id: a7fabbc6a7c54ea5c67cbd16bd322330fd10cc35@53916 b456876b-0849-0410-b77d-98878d47e9d5

//
// tiki-bootstrap-chosen.less
//
// An alternate stylesheet for Chosen (http://harvesthq.github.com/chosen/).
// This one is supposed to integrate better with Bootstrap.
//
// This is a oopy of vendor/alxlit/bootstrap-chosen/bootstrap-chosen.less except for having the import statement commented out.
// A separate file, tiki-variables.less, provides values for this file.
//

//@import "bootstrap-chosen-variables.less";

.chosen-select { width: 100%; }
.chosen-select-deselect { width: 100%; }

.chosen-container {
  display: inline-block;
  font-size: @font-size-base;
  position: relative;
  vertical-align: middle;

  .chosen-drop {
    background: @chosen-background;
    border: 1px solid @chosen-drop-border;
    .border-bottom-radius(@chosen-border-radius);
    .box-shadow(@chosen-drop-box-shadow);
    margin-top: -1px;
    position: absolute;
    top: 100%;
    left: -9000px;
    z-index: @chosen-drop-zindex;
  }

  &.chosen-with-drop .chosen-drop {
    left: 0;
    right: 0;
  }

  .chosen-results {
    color: @gray;
    margin: 0 4px 4px 0;
    max-height: 240px;
    padding: 0 0 0 4px;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    li {
      display: none;
      line-height: @line-height-base; // 15px;
      list-style: none;
      margin: 0;
      padding: 5px 6px;

      em {
        background: #feffde;
        font-style: normal;
      }

      &.group-result {
        display: list-item;
        cursor: default;
        color: #999;
        font-weight: bold;
      }

      &.group-option {
        padding-left: 15px;
      }

      &.active-result {
        cursor: pointer;
        display: list-item;
      }

      &.highlighted {
        background-color: @link-color;
        background-image: none;
        color: white;

        em {
          background: transparent;
        }
      }

      &.disabled-result {
        display: list-item;
        color: @gray-light;
      }
    }

    .no-results {
      background: @gray-lighter;
      display: list-item;
    }
  }

  .chosen-results-scroll {
    background: white;
    margin: 0 4px;
    position: absolute;
    text-align: center;
    width: 321px;
    z-index: 1;

    span {
      display: inline-block;
      height: @line-height-base; // 17px;
      text-indent: -5000px;
      width: 9px;
    }
  }

  .chosen-results-scroll-down {
    bottom: 0;

    span {
      background: url("@{chosen-sprite-path}") no-repeat -4px -3px;
    }
  }

  .chosen-results-scroll-up {
    span {
      background: url("@{chosen-sprite-path}") no-repeat -22px -3px;
    }
  }
}

.chosen-container-single {
  .chosen-single {
    background-color: @chosen-background;
    -webkit-background-clip: padding-box;
       -moz-background-clip: padding;
            background-clip: padding-box;
    border: @chosen-border;
    .border-top-radius(@chosen-border-radius);
    .border-bottom-radius(@chosen-border-radius);
    .box-shadow(@chosen-box-shadow);
    color: @gray;
    display: block;
    height: @chosen-height;
    overflow: hidden;
    line-height: @chosen-height;
    padding: 0 0 0 8px;
    position: relative;
    text-decoration: none;
    white-space: nowrap;

    span {
      display: block;
      margin-right: 26px;
      .text-overflow();
    }

    abbr {
      background: url("@{chosen-sprite-path}") right top no-repeat;
      display: block;
      font-size: 1px;
      height: 10px;
      position: absolute;
      right: 26px;
      top: ((@chosen-height - 10px) / 2);
      width: 12px;

      &:hover {
        background-position: right -11px;
      }
    }

    &.chosen-disabled .chosen-single abbr:hover {
      background-position: right 2px;
    }

    div {
      display: block;
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      width: 18px;

      b {
        background: url("@{chosen-sprite-path}") no-repeat 0 7px;
        display: block;
        height: 100%;
        width: 100%;
      }
    }
  }

  .chosen-default {
    color: @gray-light;
  }

  .chosen-search {
    margin: 0;
    padding: 3px 4px;
    position: relative;
    white-space: nowrap;
    z-index: @zindex-dropdown;

    input[type="text"] {
      background: url("@{chosen-sprite-path}") no-repeat 100% -20px, @chosen-background;
      border: @chosen-border;
      .border-top-radius(@chosen-border-radius);
      .border-bottom-radius(@chosen-border-radius);
      .box-shadow(@chosen-box-shadow);
      margin: 1px 0;
      padding: 4px 20px 4px 4px;
      width: 100%;
    }
  }

  .chosen-drop {
    margin-top: -1px;
    .border-bottom-radius(@chosen-border-radius);
    -webkit-background-clip: padding-box;
       -moz-background-clip: padding;
            background-clip: padding-box;
  }
}

.chosen-container-single-nosearch {
  .chosen-search {
    input {
      position: absolute;
      left: -9000px;
    }
  }
}

.chosen-container-multi {
  .chosen-choices {
    background-color: @chosen-background;
    border: @chosen-border;
    .border-top-radius(@chosen-multi-border-radius);
    .border-bottom-radius(@chosen-multi-border-radius);
    .box-shadow(@chosen-box-shadow);
    cursor: text;
    height: auto !important;
    height: 1%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;

    li {
      float: left;
      list-style: none;
    }

    .search-field {
      margin: 0;
      padding: 0;
      white-space: nowrap;

      input[type="text"] {
        background: transparent !important;
        border: 0 !important;
        .box-shadow(none);
        color: @gray;
        height: @chosen-multi-height - 8px;
        margin: 0;
        padding: 4px;
        outline: 0;
      }

      .default {
        color: #999;
      }
    }

    .search-choice {
      -webkit-background-clip: padding-box;
         -moz-background-clip: padding;
              background-clip: padding-box;
      background-color: @gray-lighter;
      border: @chosen-border;
      .border-top-radius(@chosen-border-radius);
      .border-bottom-radius(@chosen-border-radius);
      .box-shadow(@chosen-box-shadow);
      color: @gray-dark;
      cursor: default;
      line-height: 13px;
      margin: 6px 0 3px 5px;
      padding: 3px 20px 3px 5px;
      position: relative;

      .search-choice-close {
        background: url("@{chosen-sprite-path}") right top no-repeat;
        display: block;
        font-size: 1px;
        height: 10px;
        position: absolute;
        right: 4px;
        top: 5px;
        width: 12px;
        cursor: pointer;

        &:hover {
          background-position: right -11px;
        }
      }
    }

    .search-choice-focus {
      background: #d4d4d4;

      .search-choice-close {
        background-position: right -11px;
      }
    }
  }

  .chosen-results {
    margin: 0 0 0 0;
    padding: 0;
  }

  .chosen-drop {
    .result-selected {
      display: none;
    }
  }
}

.chosen-container-active {
  .chosen-single {
    border: @chosen-focus-border;
    .box-shadow(@chosen-focus-box-shadow);
    .transition(@chosen-focus-transition);
  }

  &.chosen-with-drop .chosen-single {
    background-color: @input-bg;
    border: @chosen-focus-border;
    .border-bottom-radius(0);
    .box-shadow(@chosen-focus-box-shadow);
    .transition(@chosen-focus-transition);

    div {
      background: transparent;
      border-left: none;

      b {
        background-position: -18px 7px;
      }
    }
  }

  .chosen-choices {
    border: @chosen-focus-border;
    .border-bottom-radius(0);
    .box-shadow(@chosen-focus-box-shadow);
    .transition(@chosen-focus-transition);

    .search-field input[type="text"] {
      color: #111 !important;
    }
  }

  &.chosen-with-drop .chosen-choices {
    .border-bottom-radius(0);
  }
}

.chosen-disabled {
  cursor: default;
  opacity: 0.5 !important;

  .chosen-single {
    cursor: default;
  }

  .chosen-choices .search-choice .search-choice-close {
    cursor: default;
  }
}

.chosen-rtl {
  text-align: right;

  .chosen-single {
    padding: 0 8px 0 0;
    overflow: visible;

    span {
      margin-left: 26px;
      margin-right: 0;
      direction: rtl;
    }

    div {
      left: 7px;
      right: auto;
    }

    abbr {
      left: 26px;
      right: auto;
    }
  }

  .chosen-choices {
    .search-field input[type="text"] {
      direction: rtl;
    }

    li {
      float: right;
    }

    .search-choice {
      margin: 6px 5px 3px 0;
      padding: 3px 5px 3px 19px;

      .search-choice-close {
        background-position: right top;
        left: 4px;
        right: auto;
      }
    }
  }

  &.chosen-container-single .chosen-results {
    margin: 0 0 4px 4px;
    padding: 0 4px 0 0;
  }

  .chosen-results .group-option {
    padding-left: 0;
    padding-right: 15px;
  }

  &.chosen-container-active.chosen-with-drop .chosen-single div {
    border-right: none;
  }

  .chosen-search input[type="text"] {
    background: url("@{chosen-sprite-path}") no-repeat -28px -20px, @chosen-background;
    direction: rtl;
    padding: 4px 5px 4px 20px;
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) {
  .chosen-rtl .chosen-search input[type="text"],
  .chosen-container-single .chosen-single abbr,
  .chosen-container-single .chosen-single div b,
  .chosen-container-single .chosen-search input[type="text"],
  .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
  .chosen-container .chosen-results-scroll-down span,
  .chosen-container .chosen-results-scroll-up span {
    background-image: url("@{chosen-sprite-retina-path}") !important;
    background-size: 52px 37px !important;
    background-repeat: no-repeat !important;
  }
}

error: pathspec 'themes/base_files/less/tiki-bootstrap-chosen.less' did not match any file(s) known to git


Lighten body background and darken text-color

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/brennaveen/bootstrap.git/'


Make animation for header loader

Make animation for header loader

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/hevnly/asset-bazaar.git/'


doc: Set background to white

doc: Set background to white

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/beni55/hspec.git/'


modify template css style

modify template css 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/genophy/proj4commonjs.git/'


iframe  背景色问题

iframe  背景色问题

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/yyssc/ssc30-admin.git/'


Fixed delete button cross color

Fixed delete button cross color

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/Gambloide/many-slides.git/'


Fix purchase button gradient

Fix purchase button gradient

@import 'lib';

.button, button, input[type=submit] {
    position: relative;
    font: bold 13px/1em @head-sans;
    padding: 6px 10px 7px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    background: #5784BF;
    .gradient-two-color(#669BE1, #5784BF);
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    .border-radius(6px);
    .box-shadow(0 1px rgba(0, 0, 0, 0.1), 0 -2px rgba(0, 0, 0, 0.1) inset);
    border: 0;
}
.button {
    display: inline-block;
    &.prominent {
        padding: 8px 16px 12px;
        font-size: 16px;
        .box-shadow(0 3px rgba(0, 0, 0, 0.1), 0 -4px rgba(0, 0, 0, 0.1) inset);
    }
    &.add { // Green
        background: #489615;
        .gradient-two-color(#84C63C, #489615);
        color: #fff;
        span {
            padding-left: 16px;
            background: url(../../img/impala/button-icons.png) no-repeat 0 3px;
        }
        &.prominent {
            span {
                padding-left: 24px;
                .sprite-pos(3, 64, 3px);
            }
            &.disabled, &.concealed {
                span {
                    .sprite-pos(4, 64, 3px);
                }
            }
            &.warning, &.caution {
                span {
                    .sprite-pos(5, 64, 3px);
                }
            }
        }
        &.warning,
        &.caution {
            background: url(../../img/impala/warning-bg.png);
            color: #333;
            text-shadow: 0 -1px 0 rgba(255,255,255,.5);
            top: 0;
            span {
                .sprite-pos(2, 64, 3px);
            }
        }
        &.disabled,
        &.concealed {
            top: 0;
            span {
                .sprite-pos(1, 64, 3px);
            }
        }
    }
    &.premium {
      .gradient-two-color(#E3C17F, #D6913D);
    }
    &.paypal {
        .gradient-two-color(#F8EAC4, #EEC546);
        color: rgb(51, 70, 118);
        text-shadow: 1px 1px #EDE8BF;
        font-style: italic;
        font-family: Verdana, @sans-stack;
        small {
            font-size: 0.7em;
        }
        em {
            color: rgb(90, 120, 168);
        }
        &.disabled em {
            color: #919497;
        }
    }
    &.contribute { // Blue
        &.prominent b {
            background: url(../../img/impala/button-icons.png) no-repeat;
            padding-left: 24px;
            margin-left: -4px;
            .sprite-pos(7, 64, 4px);
        }
    }
    &.developer, &.scary { // Red
        background: #bc2b1a;
        .gradient-two-color(#f84b4e, #bc2b1a);
        color: #fff;
        span {
            margin-left: -4px;
            padding-left: 24px;
            background: url(../../img/impala/button-icons.png) no-repeat;
            .sprite-pos(6, 64, 3px);
        }
    }
    &.watch:not(.watching) { // Orange
        background: #ea0;
        .gradient-two-color(#ea0, darken(#ea0, 10%));
        color: #fff;
    }
    &.platform {
        display: none;
    }
}
.html-rtl {
    .button {
        .add span {
            padding-left: 0;
            padding-right: 16px;
        }
    }
}
.button:hover,
.button:focus,
.button:active,
.button.selected {
    text-decoration: none;
    .box-shadow(0 1px rgba(0, 0, 0, 0.1), 0 -2px rgba(0, 0, 0, 0.1) inset, 0 0 100px rgba(255, 255, 255, 0.2) inset);
}

.button:active,
.button.selected {
    top: 2px;
    .box-shadow(0 0px rgba(0, 0, 0, 0.1), 0 -2px rgba(0, 0, 0, 0.1) inset, 0 0 100px rgba(255, 255, 255, 0.2) inset);
}

.button.prominent:hover,
.button.prominent:focus,
.button.prominent:active,
.button.prominent.selected {
    .box-shadow(0 3px rgba(0, 0, 0, 0.1), 0 -4px rgba(0, 0, 0, 0.1) inset, 0 0 100px rgba(255, 255, 255, 0.2) inset);
}

.button.prominent:active,
.button.prominent.selected {
    top: 2px;
    .box-shadow(0 1px rgba(0, 0, 0, 0.1), 0 -4px rgba(0, 0, 0, 0.1) inset, 0 0 100px rgba(255, 255, 255, 0.2) inset);
}

.install-shell {
    .install {
        display: inline-block;
    }
    .warning {
        font-size: 12px;
    }
    .extra {
        margin-top: 8px;
    }
    .notavail {
        color: @error-red;
        display: block;
        font-size: 11px;
        margin: 0 0 4px;
    }
    .acr-incompat {
        color: @note-gray;
    }
}

#promos {
    .button.disabled,
    .button.concealed {
        display: none !important;
    }
}
.listing-grid {
    .hovercard {
        .install-shell {
            margin-bottom: 12px;
        }
        .install-button {
            margin: 0;
        }
        .button.disabled,
        .button.concealed {
            display: none !important;
        }
    }
}

.mac .button.mac,
.linux .button.linux,
.other .button.bsd,
.other .button.solaris,
.windows .button.windows {
    display: inherit;
}
.thunderbird .listing-grid .install-shell {
    display: none;
}

/* Invisible Upload */
.invisible-upload {
    position: relative;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
    input {
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        width: auto;
        height: 110%;
        opacity: 0;
        cursor: pointer;
        /* stack this below the navbar: */
        z-index: 0;
        outline: none;
    }
    &:hover input {
        font-size: 1000px;
    }
    &:hover, &:focused {
        a.button {
            border-color: #25f;
            .box-shadow(inset 0 0 2px #fff);
        }
        a.link {
            text-decoration: underline;
        }
    }
    a.button {
        position: relative;
        display: inline-block;
    }
    a.link {
        text-decoration: none;
        color: #05e;
    }
}
button[disabled],
.button.disabled,
.button.concealed {
    background: #c1c5ca;
    .gradient-two-color(#d1d4d7, #c1c5ca);
    color: #919497;
    .box-shadow(0 3px rgba(0, 0, 0, 0.05), 0 -4px rgba(0, 0, 0, 0.05) inset);
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
button[disabled] {
    pointer-events: none;
}

@import 'lib';

.button, button, input[type=submit] {
    position: relative;
    font: bold 13px/1em @head-sans;
    padding: 6px 10px 7px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    background: #5784BF;
    .gradient-two-color(#669BE1, #5784BF);
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    .border-radius(6px);
    .box-shadow(0 1px rgba(0, 0, 0, 0.1), 0 -2px rgba(0, 0, 0, 0.1) inset);
    border: 0;
}
.button {
    display: inline-block;
    &.prominent {
        padding: 8px 16px 12px;
        font-size: 16px;
        .box-shadow(0 3px rgba(0, 0, 0, 0.1), 0 -4px rgba(0, 0, 0, 0.1) inset);
    }
    &.add { // Green
        background: #489615;
        .gradient-two-color(#84C63C, #489615);
        color: #fff;
        span {
            padding-left: 16px;
            background: url(../../img/impala/button-icons.png) no-repeat 0 3px;
        }
        &.prominent {
            span {
                padding-left: 24px;
                .sprite-pos(3, 64, 3px);
            }
            &.disabled, &.concealed {
                span {
                    .sprite-pos(4, 64, 3px);
                }
            }
            &.warning, &.caution {
                span {
                    .sprite-pos(5, 64, 3px);
                }
            }
        }
        &.warning,
        &.caution {
            background: url(../../img/impala/warning-bg.png);
            color: #333;
            text-shadow: 0 -1px 0 rgba(255,255,255,.5);
            top: 0;
            span {
                .sprite-pos(2, 64, 3px);
            }
        }
        &.disabled,
        &.concealed {
            top: 0;
            span {
                .sprite-pos(1, 64, 3px);
            }
        }
    }
    &.premium {
      .gradient-two-color(#CB9B3F, #D6913D);
    }
    &.paypal {
        .gradient-two-color(#F8EAC4, #EEC546);
        color: rgb(51, 70, 118);
        text-shadow: 1px 1px #EDE8BF;
        font-style: italic;
        font-family: Verdana, @sans-stack;
        small {
            font-size: 0.7em;
        }
        em {
            color: rgb(90, 120, 168);
        }
        &.disabled em {
            color: #919497;
        }
    }
    &.contribute { // Blue
        &.prominent b {
            background: url(../../img/impala/button-icons.png) no-repeat;
            padding-left: 24px;
            margin-left: -4px;
            .sprite-pos(7, 64, 4px);
        }
    }
    &.developer, &.scary { // Red
        background: #bc2b1a;
        .gradient-two-color(#f84b4e, #bc2b1a);
        color: #fff;
        span {
            margin-left: -4px;
            padding-left: 24px;
            background: url(../../img/impala/button-icons.png) no-repeat;
            .sprite-pos(6, 64, 3px);
        }
    }
    &.watch:not(.watching) { // Orange
        background: #ea0;
        .gradient-two-color(#ea0, darken(#ea0, 10%));
        color: #fff;
    }
    &.platform {
        display: none;
    }
}
.html-rtl {
    .button {
        .add span {
            padding-left: 0;
            padding-right: 16px;
        }
    }
}
.button:hover,
.button:focus,
.button:active,
.button.selected {
    text-decoration: none;
    .box-shadow(0 1px rgba(0, 0, 0, 0.1), 0 -2px rgba(0, 0, 0, 0.1) inset, 0 0 100px rgba(255, 255, 255, 0.2) inset);
}

.button:active,
.button.selected {
    top: 2px;
    .box-shadow(0 0px rgba(0, 0, 0, 0.1), 0 -2px rgba(0, 0, 0, 0.1) inset, 0 0 100px rgba(255, 255, 255, 0.2) inset);
}

.button.prominent:hover,
.button.prominent:focus,
.button.prominent:active,
.button.prominent.selected {
    .box-shadow(0 3px rgba(0, 0, 0, 0.1), 0 -4px rgba(0, 0, 0, 0.1) inset, 0 0 100px rgba(255, 255, 255, 0.2) inset);
}

.button.prominent:active,
.button.prominent.selected {
    top: 2px;
    .box-shadow(0 1px rgba(0, 0, 0, 0.1), 0 -4px rgba(0, 0, 0, 0.1) inset, 0 0 100px rgba(255, 255, 255, 0.2) inset);
}

.install-shell {
    .install {
        display: inline-block;
    }
    .warning {
        font-size: 12px;
    }
    .extra {
        margin-top: 8px;
    }
    .notavail {
        color: @error-red;
        display: block;
        font-size: 11px;
        margin: 0 0 4px;
    }
    .acr-incompat {
        color: @note-gray;
    }
}

#promos {
    .button.disabled,
    .button.concealed {
        display: none !important;
    }
}
.listing-grid {
    .hovercard {
        .install-shell {
            margin-bottom: 12px;
        }
        .install-button {
            margin: 0;
        }
        .button.disabled,
        .button.concealed {
            display: none !important;
        }
    }
}

.mac .button.mac,
.linux .button.linux,
.other .button.bsd,
.other .button.solaris,
.windows .button.windows {
    display: inherit;
}
.thunderbird .listing-grid .install-shell {
    display: none;
}

/* Invisible Upload */
.invisible-upload {
    position: relative;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
    input {
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        width: auto;
        height: 110%;
        opacity: 0;
        cursor: pointer;
        /* stack this below the navbar: */
        z-index: 0;
        outline: none;
    }
    &:hover input {
        font-size: 1000px;
    }
    &:hover, &:focused {
        a.button {
            border-color: #25f;
            .box-shadow(inset 0 0 2px #fff);
        }
        a.link {
            text-decoration: underline;
        }
    }
    a.button {
        position: relative;
        display: inline-block;
    }
    a.link {
        text-decoration: none;
        color: #05e;
    }
}
button[disabled],
.button.disabled,
.button.concealed {
    background: #c1c5ca;
    .gradient-two-color(#d1d4d7, #c1c5ca);
    color: #919497;
    .box-shadow(0 3px rgba(0, 0, 0, 0.05), 0 -4px rgba(0, 0, 0, 0.05) inset);
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
button[disabled] {
    pointer-events: none;
}


style concealed buttons properly (bug 663873)

@import 'lib';

.button, button, input[type=submit] {
    position: relative;
    font-size: 13px;
    padding: 6px 10px 7px;
    font-family: @head-sans;
    font-weight: bold;
    line-height: 1em;
    text-align: center;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    .gradient-two-color(#669BE1, #5784BF);
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    .border-radius(6px);
    .box-shadow(0 1px rgba(0, 0, 0, 0.1), 0 -2px rgba(0, 0, 0, 0.1) inset);
    border: 0;
}
.button {
    display: inline-block;
    &.prominent {
        padding: 8px 16px 12px;
        font-size: 16px;
        .box-shadow(0 3px rgba(0, 0, 0, 0.1), 0 -4px rgba(0, 0, 0, 0.1) inset);
    }
    &.add { // Green
        .gradient-two-color(#84C63C, #489615);
        color: #fff;
        span {
            padding-left: 16px;
            background: url(../../img/impala/button-icons.png) no-repeat 0 3px;
        }
        &.prominent {
            span {
                padding-left: 24px;
                .sprite-pos(3, 64, 3px);
            }
            &.disabled, &.concealed {
                span {
                    .sprite-pos(4, 64, 3px);
                }
            }
            &.warning, &.caution {
                span {
                    .sprite-pos(5, 64, 3px);
                }
            }
        }
        &.warning,
        &.caution {
            background: url(../../img/impala/warning-bg.png);
            color: #333;
            text-shadow: 0 -1px 0 rgba(255,255,255,.5);
            top: 0;
            span {
                .sprite-pos(2, 64, 3px);
            }
        }
        &.disabled,
        &.concealed {
            .gradient-two-color(#d1d4d7, #c1c5ca);
            color: #919497;
            .box-shadow(0 3px rgba(0, 0, 0, 0.05), 0 -4px rgba(0, 0, 0, 0.05) inset);
            text-shadow: 0 1px 0 rgba(255,255,255,.5);
            top: 0;
            span {
                .sprite-pos(1, 64, 3px);
            }
        }
    }
    &.contribute { // Blue
        &.prominent b {
            background: url(../../img/impala/button-icons.png) no-repeat;
            padding-left: 24px;
            margin-left: -4px;
            .sprite-pos(7, 64, 3px);
        }
    }
    &.developer { // Red
        background: -moz-linear-gradient(#f84b4e, #bc2b1a);
        color: #fff;
        span {
            margin-left: -4px;
            padding-left: 24px;
            background: url(../../img/impala/button-icons.png) no-repeat;
            .sprite-pos(6, 64, 3px);
        }
    }
    &.platform {
        display: none;
    }
}
.button:hover,
.button:focus,
.button:active,
.button.selected {
    text-decoration: none;
    .box-shadow(0 1px rgba(0, 0, 0, 0.1), 0 -2px rgba(0, 0, 0, 0.1) inset, 0 0 100px rgba(255, 255, 255, 0.2) inset);
}

.button:active,
.button.selected {
    top: 2px;
    .box-shadow(0 0px rgba(0, 0, 0, 0.1), 0 -2px rgba(0, 0, 0, 0.1) inset, 0 0 100px rgba(255, 255, 255, 0.2) inset);
}

.button.prominent:hover,
.button.prominent:focus,
.button.prominent:active,
.button.prominent.selected {
    .box-shadow(0 3px rgba(0, 0, 0, 0.1), 0 -4px rgba(0, 0, 0, 0.1) inset, 0 0 100px rgba(255, 255, 255, 0.2) inset);
}

.button.prominent:active,
.button.prominent.selected {
    top: 2px;
    .box-shadow(0 1px rgba(0, 0, 0, 0.1), 0 -4px rgba(0, 0, 0, 0.1) inset, 0 0 100px rgba(255, 255, 255, 0.2) inset);
}
.extra {
    .notavail {
        color: #C00000;
        margin: 0 0 4px;
    }
}

.listing-grid {
    .item {
        .install-shell {
            margin-bottom: 12px;
        }
        .install-button {
            margin: 0;
        }
        .button.disabled,
        .button.concealed {
            display: none;
        }
    }
}

.mac .button.mac,
.linux .button.linux,
.other .button.bsd,
.other .button.solaris,
.windows .button.windows {
    display: inherit;
}

@import 'lib';

.button, button, input[type=submit] {
    position: relative;
    font-size: 13px;
    padding: 6px 10px 7px;
    font-family: @head-sans;
    font-weight: bold;
    line-height: 1em;
    text-align: center;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    .gradient-two-color(#669BE1, #5784BF);
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    .border-radius(6px);
    .box-shadow(0 1px rgba(0, 0, 0, 0.1), 0 -2px rgba(0, 0, 0, 0.1) inset);
    border: 0;
}
.button {
    display: inline-block;
    &.prominent {
        padding: 8px 16px 12px;
        font-size: 16px;
        .box-shadow(0 3px rgba(0, 0, 0, 0.1), 0 -4px rgba(0, 0, 0, 0.1) inset);
    }
    &.add { // Green
        .gradient-two-color(#84C63C, #489615);
        color: #fff;
        span {
            padding-left: 16px;
            background: url(../../img/impala/button-icons.png) no-repeat 0 3px;
        }
        &.prominent {
            span {
                padding-left: 24px;
                .sprite-pos(3, 64, 3px);
            }
            &.disabled span {
                .sprite-pos(4, 64, 3px);
            }
            &.warning, &.caution {
                span {
                    .sprite-pos(5, 64, 3px);
                }
            }
        }
        &.warning,
        &.caution {
            background: url(../../img/impala/warning-bg.png);
            color: #333;
            text-shadow: 0 -1px 0 rgba(255,255,255,.5);
            top: 0;
            span {
                .sprite-pos(2, 64, 3px);
            }
        }
        &.disabled {
            .gradient-two-color(#d1d4d7, #c1c5ca);
            color: #919497;
            .box-shadow(0 3px rgba(0, 0, 0, 0.05), 0 -4px rgba(0, 0, 0, 0.05) inset);
            text-shadow: 0 1px 0 rgba(255,255,255,.5);
            top: 0;
            span {
                .sprite-pos(1, 64, 3px);
            }
        }
    }
    &.contribute { // Blue
        &.prominent b {
            background: url(../../img/impala/button-icons.png) no-repeat;
            padding-left: 24px;
            margin-left: -4px;
            .sprite-pos(7, 64, 3px);
        }
    }
    &.developer { // Red
        background: -moz-linear-gradient(#f84b4e, #bc2b1a);
        color: #fff;
        span {
            margin-left: -4px;
            padding-left: 24px;
            background: url(../../img/impala/button-icons.png) no-repeat;
            .sprite-pos(6, 64, 3px);
        }
    }
    &.platform {
        display: none;
    }
}
.button:hover,
.button:focus,
.button:active,
.button.selected {
    text-decoration: none;
    .box-shadow(0 1px rgba(0, 0, 0, 0.1), 0 -2px rgba(0, 0, 0, 0.1) inset, 0 0 100px rgba(255, 255, 255, 0.2) inset);
}

.button:active,
.button.selected {
    top: 2px;
    .box-shadow(0 0px rgba(0, 0, 0, 0.1), 0 -2px rgba(0, 0, 0, 0.1) inset, 0 0 100px rgba(255, 255, 255, 0.2) inset);
}

.button.prominent:hover,
.button.prominent:focus,
.button.prominent:active,
.button.prominent.selected {
    .box-shadow(0 3px rgba(0, 0, 0, 0.1), 0 -4px rgba(0, 0, 0, 0.1) inset, 0 0 100px rgba(255, 255, 255, 0.2) inset);
}

.button.prominent:active,
.button.prominent.selected {
    top: 2px;
    .box-shadow(0 1px rgba(0, 0, 0, 0.1), 0 -4px rgba(0, 0, 0, 0.1) inset, 0 0 100px rgba(255, 255, 255, 0.2) inset);
}
.extra {
    .notavail {
        color: #C00000;
        margin: 0 0 4px;
    }
}

.listing-grid {
    .item {
        .install-shell {
            margin-bottom: 12px;
        }
        .install-button {
            margin: 0;
        }
        .button.disabled {
            display: none;
        }
    }
}

.mac .button.mac,
.linux .button.linux,
.other .button.bsd,
.other .button.solaris,
.windows .button.windows {
    display: inherit;
}


Update landing page separate vars file so it speaks to the new font variable properly


Create styling for article cluster container module