color issues: fix server connection status

/** ----------------------------------------------------------------------------
 * Derivative colours (fixed variants of inherited variables)
 */

@default-action-color: darken(@secondary-background-color, 15%);
@default-action-contrast: contrast(@default-action-color, #444);
@primary-background-contrast: contrast(@primary-background-color, #444);
@primary-action-contrast: contrast(@primary-action-color, #444);
@secondary-action-contrast: contrast(@secondary-action-color, #444);
@selection-background: lighten(@selection-color, 30%);
@success-background: lighten(@success-color, 45%);
@success-border: lighten(@success-color, 30%);
@error-background: lighten(@error-color, 45%);
@error-border: lighten(@error-color, 30%);
@error-contrast: contrast(@error-color);
@pending-background: lighten(@pending-color, 45%);
@pending-border: lighten(@pending-color, 30%);
@window-border-color: @component-color;

/** ----------------------------------------------------------------------------
 * Document components
 */

html {
	.custom-scroll(@transparent-dark, @custom-scrollbar-color, 0);
}

* {
	.custom-scroll(@transparent-dark, @custom-scrollbar-color);
}

body {
	color: @primary-font-color;
	* {
		border-color: @component-color;
	}
}

code {
	background-color: @transparent-dark;
	border-color: @component-color;
	color: @secondary-font-color;
}

blockquote:before {
	background-color: @transparent-darker;
}

.main-content,
.cms-page,
.page-container {
	background-color: @content-background-color;
	header {
		background-color: @content-background-color;
		border-color: @component-color;
	}
}

.page-container table {
	overflow: hidden;
	background-color: @secondary-background-color;
	th,
	td {
		border-color: @component-color;
	}
	th {
		background-color: @content-background-color;
	}
	tr {
		background-color: @transparent-light;
		&:nth-of-type(even) {
			background-color: @transparent-lightest;
		}
	}
	tr:hover td {
		background-color: @content-background-color;
	}
}

.burger i {
	background-color: @primary-font-color;
}

/** ----------------------------------------------------------------------------
 * Admin and settings styles
 */

.page-settings {
	.content {
		background-color: @transparent-dark;
	}
	.section {
		background-color: @content-background-color;
	}
	.terminal {
		background-color: #444;
		color: white;
		.time {
			color: @secondary-font-color;
		}
	}
}

.page-list,
.page-settings {
	a {
		color: @primary-font-color;
		&:hover {
			color: @primary-action-color;
		}
	}
}

.settings-file-preview .preview.no-file {
	background-color: @transparent-light;
	color: @secondary-font-color;
}

.new-logs {
	background: @primary-action-contrast;
	color: @primary-action-color;
}

.code-error-box {
	.title {
		background-color: @error-color;
		color: white;
	}
	pre {
		color: @error-color;
		border-color: @error-border;
		background-color: @transparent-lightest;
	}
}

.code-mirror-box {
	.buttons {
		background-color: #f7f7f7; // matches plugin styles
	}
	&.code-mirror-box-fullscreen {
		background-color: @content-background-color;
	}
}

.avatar-suggestion-item {
	background-color: @tertiary-background-color;
	.avatar {
		background-size: cover;
		background-color: @tertiary-background-color;
	}
	.question-mark::before {
		color: @secondary-font-color;
	}
}

/** ----------------------------------------------------------------------------
 * Asides (external to main application views)
 */

.spotlight {
	background-color: @transparent-darker;
	> .spotlight-input {
		background-color: @secondary-background-color;
		color: @secondary-font-color;
		> i {
			color: @secondary-font-color;
		}
	}
}

.mobile-message-menu {
	background-color: @transparent-dark;
}

.full-page,
.page-loading {
	.gradient(shade(@primary-background-color), @primary-background-color);
	color: @tertiary-font-color;
	a {
		color: @tertiary-font-color;
	}
	a:hover {
		color: @primary-background-contrast;
	}
	.spinner > div {
		background-color: @primary-background-contrast;
	}
}

#login-card {
	color: @primary-font-color;
	background-color: @content-background-color;
	.input-shade(@primary-font-color, @content-background-color);
	.input-text {
		input:-webkit-autofill {
			-webkit-box-shadow: 0 0 0px 20px @content-background-color inset;
		}
	}
}

.dropzone.over .dropzone-overlay {
	background-color: @transparent-darkest;
	color: @content-background-color;
	> div {
		background-color: @transparent-darkest;
	}
}

/** ----------------------------------------------------------------------------
 * Room components
 */

.new-message {
	color: @primary-action-contrast;
	background-color: @primary-action-color;
}

.ticks-bar {
	.tick {
		background-color: @primary-action-color;
	}
	.tick-all {
		background-color: @selection-color;
	}
}

.room-not-found {
	color: @error-color;
}

.favorite-room {
	color: @pending-color;
}

.toggle-favorite {
	color: @component-color;
}

.container-bars {
	.upload-progress {
		background-color: @component-color;
		color: @primary-action-color;
		&.upload-error {
			background-color: @error-background;
			border-color: @error-border;
		}
		.upload-progress-progress {
			background-color: @success-background;
		}
	}
	.unread-bar {
		background-color: @component-color;
		color: @primary-action-color;
	}
}

.messages-container {
	.edit-room-title {
		.linkColors(@secondary-font-color, @primary-font-color);
	}
	.footer {
		background: @content-background-color;
	}
	.message-form {
		color: @secondary-font-color;
		.input-message-container {
			background-color: @content-background-color;
		}
		.message-buttons {
			.buttonColors(lighten(@primary-font-color, 25%), @secondary-background-color);
			&:hover {
				background-color: mix(@secondary-background-color, contrast(@primary-font-color), 20%);
			}
		}
		textarea {
			&.editing {
				background-color: lighten(@pending-color, 40%);
			}
		}
	}
	.new-message {
		color: @primary-action-contrast;
		background-color: @primary-action-color;
	}
	.messages-box {
		.jump-recent {
			background-color: @component-color;
		}
		&.selectable .selected {
			background-color: @selection-background;
		}
		.load-more span {
			background-color: @secondary-background-color;
		}
	}
}

.message-popup {
	background: @content-background-color;
}

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

.popup-item {
	// color: @secondary-font-color;
	&.selected {
		color: @primary-action-contrast;
		background-color: @primary-action-color;
	}
	span {
		color: @secondary-font-color;
	}
}

.messages-box {
	.start {
		color: @info-font-color;
	}
	.editing .body,
	textarea.editing {
		background-color: lighten(@pending-color, 40%);
	}
}

/** ----------------------------------------------------------------------------
 * Message content
 */

.first-unread {
	.body {
		&::before {
			background: @transparent-darker;
		}
		&::after {
			color: @primary-font-color;
		}
	}
}

.first-unread-opaque {
	.body {
		&::before {
			background: @transparent-dark;
		}
	}
}

.message {
	.body {
		color: @primary-font-color;
	}
	&.system .body {
		color: @info-font-color;
	}
	&:hover {
		background-color: @transparent-dark;
	}
	.toggle-options {
		color: @secondary-font-color;
	}
	.message-dropdown,
	.options-menu {
		color: lighten(@primary-font-color, 13%);
		background-color: @content-background-color;
		ul li:hover {
			background-color: @tertiary-background-color;
		}
		.message-dropdown-close {
			background-color: @secondary-background-color;
		}
	}
	&.new-day::before {
		background-color: @content-background-color;
	}
	&.new-day::after,
	.info,
	.user-view,
	.message-alias {
		color: @info-font-color;
		border-color: @component-color;
	}
	.user {
		color: @primary-font-color;
	}
	.is-bot,
	.role-tag {
		background-color: @info-font-color;
		color: contrast(@info-font-color);
	}
	a {
		.linkColors(@link-font-color, darken(@link-font-color, 10%));
	}
	a.mention-link {
		color: @primary-action-color;
		&.mention-link-me {
			color: @primary-action-contrast;
			background-color: @primary-action-color;
		}
		&.mention-link-all {
			color: @primary-action-contrast;
			background-color: @attention-color;
		}
	}
	.highlight-text {
		background-color: @selection-background;
	}
	.attachment {
		.attachment-block-border {
			background-color: @info-font-color;
		}
	}
}

/** ----------------------------------------------------------------------------
 * Misc typography variants
 */

a {
	color: @primary-font-color;
}

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

.message,
.flex-tab {
	a i,
	a[class^="icon-"] {
		color: @primary-font-color;
		&:hover {
			color: darken(@primary-font-color, 10%);
		}
	}
}

.load-more .load-more-loading,
.secondary-text {
	color: @secondary-font-color;
}

.alert-icon {
	color: @success-color;
}

.error {
	background-color: @error-background;
	border-color: @error-color;
	color: @error-color;
}

/** ----------------------------------------------------------------------------
 * Side nav
 */

.side-nav {
	color: @tertiary-font-color;
	background-color: @primary-background-color;
	* {
		border-color: @transparent-darker;
	}
	a,
	.info {
		.linkColors(@tertiary-font-color, @tertiary-font-color);
	}
	.arrow:before,
	.arrow:after {
		background-color: @tertiary-font-color;
	}
	.info,
	.options,
	.content,
	footer,
	header {
		background-color: @primary-background-color;
	}
	.rooms-list {
		background-color: lighten(@primary-background-color, 2.5%);
	}
	h3:hover,
	li:hover,
	.more:hover,
	.selected-users li {
		background-color: @transparent-darker;
	}
	li.active {
		background-color: @transparent-light !important;
	}
	i {
		color: @transparent-lighter;
	}
	i.status-offline {
		color: @transparent-lighter !important;
	}
	.opt i:hover {
		color: @transparent-lightest;
	}
	.has-alert .name {
		color: @primary-background-contrast;
	}
	.unread {
		background-color: @success-color;
	}
	.unread-rooms {
		background-color: @primary-action-color;
		color: @primary-action-contrast;
	}
	.button {
		.buttonColors(@tertiary-font-color, mix(@primary-action-color, @primary-background-color));
	}
	.options button {
		.buttonColors(@tertiary-font-color, @primary-background-color);
	}
}

/** ----------------------------------------------------------------------------
 * Flex tabs / admin fly-out panels
 */

.flex-tab {
	background-color: @secondary-background-color;
	.content,
	.user-view,
	.list-view {
		background-color: @secondary-background-color;
	}
	.message {
		&.new-day::before {
			background-color: @secondary-background-color;
		}
	}
}

.flex-tab-bar {
	background-color: @content-background-color;
	border-color: @component-color;
	.tab-button {
		&:hover {
			background-color: @secondary-background-color;
		}
		&.active {
			background-color: @secondary-background-color;
			border-right-color: @selection-color;
		}
		&.attention {
			.blink(@selection-color);
		}
	}
	.counter {
		background: @secondary-font-color;
		color: white;
	}
}

.webrtc-video {
	&.webrtc-video-overlay,
	.main-video,
	.state-overlay::before,
	.videos .video-item {
		background-color: @transparent-darker;
		color: white;
	}
	.main-video > div,
	.video-muted-overlay,
	.videos .video-item > div {
		background-color: @transparent-darker;
	}
	video {
		background-color: black;
	}
}

/** ----------------------------------------------------------------------------
 * User status / user meta
 */

i.status-online {
	color: @status-online;
}

.account-box .status-online .thumb:after,
.account-box .status.online:after,
.popup-user-status-online,
.status-online:after,
.user-image.status-online .avatar:after {
	background-color: @status-online;
	border-color: darken(@status-online, 10%);
}

i.status-away {
	color: @status-away;
}

.account-box .status-away .thumb:after,
.account-box .status.away:after,
.popup-user-status-away,
.status-pending:after,
.user-image.status-away .avatar:after {
	background-color: @status-away;
	border-color: darken(@status-away, 10%);
}

i.status-busy {
	color: @status-busy;
}

.account-box .status-busy .thumb:after,
.account-box .status.busy:after,
.popup-user-status-busy,
.status-busy:after,
.user-image.status-busy .avatar:after {
	background-color: @status-busy;
	border-color: darken(@status-busy, 10%);
}

i.status-offline {
	color: @status-offline;
}

.popup-user-status-offline,
.status-offline:after,
.user-image.status-offline .avatar:after {
	background-color: @status-offline;
	border-color: darken(@status-offline, 10%);
}

.account-box .status-offline .thumb:after,
.account-box .status.offline:after {
	background-color: @transparent-lighter;
}

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

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

.user-view {
	p {
		color: @secondary-font-color;
	}
	.box:after,
	.stats li,
	.tags li {
		background-color: @component-color;
	}
}

/** ----------------------------------------------------------------------------
 * Buttons!
 */

.actionLinks li {
	.buttonColors(@secondary-action-contrast, @secondary-action-color);
}

// new layout buttons
.button {
	.buttonColors(@default-action-contrast, @default-action-color);
	&.primary {
		.buttonColors(@primary-action-contrast, @primary-action-color);
	}
	&.secondary {
		.buttonColors(@secondary-action-contrast, @secondary-action-color);
	}
	&.tertiary {
		.buttonColors(@primary-action-contrast, @selection-color);
	}
	&.danger {
		.buttonColors(@error-contrast, @error-color);
	}
	&.external-login {
		color: white;
		&.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;
		}
		&.linkedin {
			background-color: #1b86bc;
		}
	}
}

/** ----------------------------------------------------------------------------
 * Feedback and overlay content
 */

.icon-ok,
.feedback-success {
	color: @success-color;
}

.feedback-warning {
	color: @pending-color;
}

.feedback-error {
	color: @error-color;
}

.livechat-form .error,
.offline .error {
	background-color: @error-background;
}

.alert-warning {
	color: darken(@pending-color, 25%);
	background-color: @pending-background;
	border-color: @pending-border;
}

.alert-link {
	.linkColors(@link-font-color, darken(@link-font-color, 10%));
}

.alert-danger {
	color: @error-color;
	background-color: @error-background;
	border-color: @error-border;
}

.side-nav .input-error,
label.required:after {
	color: @error-color;
}

.burger .unread-burger-alert {
	background-color: @error-color;
	color: @error-contrast;
}

.loading.dark > div {
	background-color: @transparent-darkest;
}

/** ----------------------------------------------------------------------------
 * Forms
 */

.input-shade(@primary-font-color, @content-background-color);
.flex-nav {
	.input-shade(@primary-background-contrast, @primary-background-color);
	label,
	legend {
		color: @tertiary-font-color;
	}
}

.flex-tab {
	input,
	select,
	textarea {
		background-color: @content-background-color;
	}
}

.input-line {
	&.setting-changed > label {
		color: @selection-color;
	}
	i,
	.settings-description {
		color: @secondary-font-color;
	}
	.settings-alert {
		background-color: @pending-background;
		border-color: @pending-border;
		color: @pending-color;
	}
}

.emoji-filter {
	input {
		background-color: @content-background-color;
	}
}

input:-webkit-autofill {
	color: @primary-font-color !important;
}

input:-webkit-autofill {
	background-color: transparent !important;
}

/** ----------------------------------------------------------------------------
 * Derivative colours (fixed variants of inherited variables)
 */

@default-action-color: darken(@secondary-background-color, 15%);
@default-action-contrast: contrast(@default-action-color, #444);
@primary-background-contrast: contrast(@primary-background-color, #444);
@primary-action-contrast: contrast(@primary-action-color, #444);
@secondary-action-contrast: contrast(@secondary-action-color, #444);
@selection-background: lighten(@selection-color, 30%);
@success-background: lighten(@success-color, 45%);
@success-border: lighten(@success-color, 30%);
@error-background: lighten(@error-color, 45%);
@error-border: lighten(@error-color, 30%);
@error-contrast: contrast(@error-color);
@pending-background: lighten(@pending-color, 45%);
@pending-border: lighten(@pending-color, 30%);
@window-border-color: @component-color;

/** ----------------------------------------------------------------------------
 * Document components
 */

html {
	.custom-scroll(@transparent-dark, @custom-scrollbar-color, 0);
}

* {
	.custom-scroll(@transparent-dark, @custom-scrollbar-color);
}

body {
	color: @primary-font-color;
	* {
		border-color: @component-color;
	}
}

code {
	background-color: @transparent-dark;
	border-color: @component-color;
	color: @secondary-font-color;
}

blockquote:before {
	background-color: @transparent-darker;
}

.main-content,
.cms-page,
.page-container {
	background-color: @content-background-color;
	header {
		background-color: @content-background-color;
		border-color: @component-color;
	}
}

.page-container table {
	overflow: hidden;
	background-color: @secondary-background-color;
	th,
	td {
		border-color: @component-color;
	}
	th {
		background-color: @content-background-color;
	}
	tr {
		background-color: @transparent-light;
		&:nth-of-type(even) {
			background-color: @transparent-lightest;
		}
	}
	tr:hover td {
		background-color: @content-background-color;
	}
}

.burger i {
	background-color: @primary-font-color;
}

/** ----------------------------------------------------------------------------
 * Admin and settings styles
 */

.page-settings {
	.content {
		background-color: @transparent-dark;
	}
	.section {
		background-color: @content-background-color;
	}
	.terminal {
		background-color: #444;
		color: white;
		.time {
			color: @secondary-font-color;
		}
	}
}

.page-list,
.page-settings {
	a {
		color: @primary-font-color;
		&:hover {
			color: @primary-action-color;
		}
	}
}

.settings-file-preview .preview.no-file {
	background-color: @transparent-light;
	color: @secondary-font-color;
}

.new-logs {
	background: @primary-action-contrast;
	color: @primary-action-color;
}

.code-error-box {
	.title {
		background-color: @error-color;
		color: white;
	}
	pre {
		color: @error-color;
		border-color: @error-border;
		background-color: @transparent-lightest;
	}
}

.code-mirror-box {
	.buttons {
		background-color: #f7f7f7; // matches plugin styles
	}
	&.code-mirror-box-fullscreen {
		background-color: @content-background-color;
	}
}

.avatar-suggestion-item {
	background-color: @tertiary-background-color;
	.avatar {
		background-size: cover;
		background-color: @tertiary-background-color;
	}
	.question-mark::before {
		color: @secondary-font-color;
	}
}

/** ----------------------------------------------------------------------------
 * Asides (external to main application views)
 */

.spotlight {
	background-color: @transparent-darker;
	> .spotlight-input {
		background-color: @secondary-background-color;
		color: @secondary-font-color;
		> i {
			color: @secondary-font-color;
		}
	}
}

.mobile-message-menu {
	background-color: @transparent-dark;
}

.full-page,
.page-loading {
	.gradient(shade(@primary-background-color), @primary-background-color);
	color: @tertiary-font-color;
	a {
		color: @tertiary-font-color;
	}
	a:hover {
		color: @primary-background-contrast;
	}
	.spinner > div {
		background-color: @primary-background-contrast;
	}
}

#login-card {
	color: @primary-font-color;
	background-color: @content-background-color;
	.input-shade(@primary-font-color, @content-background-color);
	.input-text {
		input:-webkit-autofill {
			-webkit-box-shadow: 0 0 0px 20px @content-background-color inset;
		}
	}
}

.dropzone.over .dropzone-overlay {
	background-color: @transparent-darkest;
	color: @content-background-color;
	> div {
		background-color: @transparent-darkest;
	}
}

/** ----------------------------------------------------------------------------
 * Room components
 */

.new-message {
	color: @primary-action-contrast;
	background-color: @primary-action-color;
}

.ticks-bar {
	.tick {
		background-color: @primary-action-color;
	}
	.tick-all {
		background-color: @selection-color;
	}
}

.room-not-found {
	color: @error-color;
}

.favorite-room {
	color: @pending-color;
}

.toggle-favorite {
	color: @component-color;
}

.container-bars {
	.upload-progress {
		background-color: @component-color;
		color: @primary-action-color;
		&.upload-error {
			background-color: @error-background;
			border-color: @error-border;
		}
		.upload-progress-progress {
			background-color: @success-background;
		}
	}
	.unread-bar {
		background-color: @component-color;
		color: @primary-action-color;
	}
}

.messages-container {
	.edit-room-title {
		.linkColors(@secondary-font-color, @primary-font-color);
	}
	.footer {
		background: @content-background-color;
	}
	.message-form {
		color: @secondary-font-color;
		.input-message-container {
			background-color: @content-background-color;
		}
		.message-buttons {
			.buttonColors(lighten(@primary-font-color, 25%), @secondary-background-color);
			&:hover {
				background-color: mix(@secondary-background-color, contrast(@primary-font-color), 20%);
			}
		}
		textarea {
			&.editing {
				background-color: lighten(@pending-color, 40%);
			}
		}
	}
	.new-message {
		color: @primary-action-contrast;
		background-color: @primary-action-color;
	}
	.messages-box {
		.jump-recent {
			background-color: @component-color;
		}
		&.selectable .selected {
			background-color: @selection-background;
		}
		.load-more span {
			background-color: @secondary-background-color;
		}
	}
}

.message-popup {
	background: @content-background-color;
}

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

.popup-item {
	// color: @secondary-font-color;
	&.selected {
		color: @primary-action-contrast;
		background-color: @primary-action-color;
	}
	span {
		color: @secondary-font-color;
	}
}

.messages-box {
	.start {
		color: @info-font-color;
	}
	.editing .body,
	textarea.editing {
		background-color: lighten(@pending-color, 40%);
	}
}

/** ----------------------------------------------------------------------------
 * Message content
 */

.first-unread {
	.body {
		&::before {
			background: @transparent-darker;
		}
		&::after {
			color: @primary-font-color;
		}
	}
}

.first-unread-opaque {
	.body {
		&::before {
			background: @transparent-dark;
		}
	}
}

.message {
	.body {
		color: @primary-font-color;
	}
	&.system .body {
		color: @info-font-color;
	}
	&:hover {
		background-color: @transparent-dark;
	}
	.toggle-options {
		color: @secondary-font-color;
	}
	.message-dropdown,
	.options-menu {
		color: lighten(@primary-font-color, 13%);
		background-color: @content-background-color;
		ul li:hover {
			background-color: @tertiary-background-color;
		}
		.message-dropdown-close {
			background-color: @secondary-background-color;
		}
	}
	&.new-day::before {
		background-color: @content-background-color;
	}
	&.new-day::after,
	.info,
	.user-view,
	.message-alias {
		color: @info-font-color;
		border-color: @component-color;
	}
	.user {
		color: @primary-font-color;
	}
	.is-bot,
	.role-tag {
		background-color: @info-font-color;
		color: contrast(@info-font-color);
	}
	a {
		.linkColors(@link-font-color, darken(@link-font-color, 10%));
	}
	a.mention-link {
		color: @primary-action-color;
		&.mention-link-me {
			color: @primary-action-contrast;
			background-color: @primary-action-color;
		}
		&.mention-link-all {
			color: @primary-action-contrast;
			background-color: @attention-color;
		}
	}
	.highlight-text {
		background-color: @selection-background;
	}
	.attachment {
		.attachment-block-border {
			background-color: @info-font-color;
		}
	}
}

/** ----------------------------------------------------------------------------
 * Misc typography variants
 */

a {
	color: @primary-font-color;
}

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

.message,
.flex-tab {
	a i,
	a[class^="icon-"] {
		color: @primary-font-color;
		&:hover {
			color: darken(@primary-font-color, 10%);
		}
	}
}

.load-more .load-more-loading,
.secondary-text {
	color: @secondary-font-color;
}

.alert-icon {
	color: @success-color;
}

.error {
	background-color: @error-background;
	border-color: @error-color;
	color: @error-color;
}

/** ----------------------------------------------------------------------------
 * Side nav
 */

.side-nav {
	color: @tertiary-font-color;
	background-color: @primary-background-color;
	* {
		border-color: @transparent-darker;
	}
	a,
	.info {
		.linkColors(@tertiary-font-color, @tertiary-font-color);
	}
	.arrow:before,
	.arrow:after {
		background-color: @tertiary-font-color;
	}
	.info,
	.options,
	.content,
	footer,
	header {
		background-color: @primary-background-color;
	}
	.rooms-list {
		background-color: lighten(@primary-background-color, 2.5%);
	}
	h3:hover,
	li:hover,
	.more:hover,
	.selected-users li {
		background-color: @transparent-darker;
	}
	li.active {
		background-color: @transparent-light !important;
	}
	i {
		color: @transparent-lighter;
	}
	i.status-offline {
		color: @transparent-lighter !important;
	}
	.opt i:hover {
		color: @transparent-lightest;
	}
	.has-alert .name {
		color: @primary-background-contrast;
	}
	.unread {
		background-color: @success-color;
	}
	.unread-rooms {
		background-color: @primary-action-color;
		color: @primary-action-contrast;
	}
	.button {
		.buttonColors(@tertiary-font-color, mix(@primary-action-color, @primary-background-color));
	}
	.options button {
		.buttonColors(@tertiary-font-color, @primary-background-color);
	}
}

/** ----------------------------------------------------------------------------
 * Flex tabs / admin fly-out panels
 */

.flex-tab {
	background-color: @secondary-background-color;
	.content,
	.user-view,
	.list-view {
		background-color: @secondary-background-color;
	}
	.message {
		&.new-day::before {
			background-color: @secondary-background-color;
		}
	}
}

.flex-tab-bar {
	background-color: @content-background-color;
	border-color: @component-color;
	.tab-button {
		&:hover {
			background-color: @secondary-background-color;
		}
		&.active {
			background-color: @secondary-background-color;
			border-right-color: @selection-color;
		}
		&.attention {
			.blink(@selection-color);
		}
	}
	.counter {
		background: @secondary-font-color;
		color: white;
	}
}

.webrtc-video {
	&.webrtc-video-overlay,
	.main-video,
	.state-overlay::before,
	.videos .video-item {
		background-color: @transparent-darker;
		color: white;
	}
	.main-video > div,
	.video-muted-overlay,
	.videos .video-item > div {
		background-color: @transparent-darker;
	}
	video {
		background-color: black;
	}
}

/** ----------------------------------------------------------------------------
 * User status / user meta
 */

i.status-online {
	color: @status-online;
}

.account-box .status-online .thumb:after,
.account-box .status.online:after,
.popup-user-status-online,
.status-online:after,
.user-image.status-online .avatar:after {
	background-color: @status-online;
	border-color: darken(@status-online, 10%);
}

i.status-away {
	color: @status-away;
}

.account-box .status-away .thumb:after,
.account-box .status.away:after,
.popup-user-status-away,
.status-pending:after,
.user-image.status-away .avatar:after {
	background-color: @status-away;
	border-color: darken(@status-away, 10%);
}

i.status-busy {
	color: @status-busy;
}

.account-box .status-busy .thumb:after,
.account-box .status.busy:after,
.popup-user-status-busy,
.status-busy:after,
.user-image.status-busy .avatar:after {
	background-color: @status-busy;
	border-color: darken(@status-busy, 10%);
}

i.status-offline {
	color: @status-offline;
}

.popup-user-status-offline,
.status-offline:after,
.user-image.status-offline .avatar:after {
	background-color: @status-offline;
	border-color: darken(@status-offline, 10%);
}

.account-box .status-offline .thumb:after,
.account-box .status.offline:after {
	background-color: @transparent-lighter;
}

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

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

.user-view {
	p {
		color: @secondary-font-color;
	}
	.box:after,
	.stats li,
	.tags li {
		background-color: @component-color;
	}
}

/** ----------------------------------------------------------------------------
 * Buttons!
 */

.actionLinks li {
	.buttonColors(@secondary-action-contrast, @secondary-action-color);
}

// new layout buttons
.button {
	.buttonColors(@default-action-contrast, @default-action-color);
	&.primary {
		.buttonColors(@primary-action-contrast, @primary-action-color);
	}
	&.secondary {
		.buttonColors(@secondary-action-contrast, @secondary-action-color);
	}
	&.tertiary {
		.buttonColors(@primary-action-contrast, @selection-color);
	}
	&.danger {
		.buttonColors(@error-contrast, @error-color);
	}
	&.external-login {
		color: white;
		&.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;
		}
		&.linkedin {
			background-color: #1b86bc;
		}
	}
}

/** ----------------------------------------------------------------------------
 * Feedback and overlay content
 */

.icon-ok,
.feedback-success {
	color: @success-color;
}

.feedback-warning {
	color: @pending-color;
}

.feedback-error {
	color: @error-color;
}

.livechat-form .error,
.offline .error {
	background-color: @error-background;
}

.alert-warning {
	color: @pending-color;
	background-color: @pending-background;
	border-color: @pending-border;
}

.alert-danger {
	color: @error-color;
	background-color: @error-background;
	border-color: @error-border;
}

.side-nav .input-error,
label.required:after {
	color: @error-color;
}

.burger .unread-burger-alert {
	background-color: @error-color;
	color: @error-contrast;
}

.loading.dark > div {
	background-color: @transparent-darkest;
}

/** ----------------------------------------------------------------------------
 * Forms
 */

.input-shade(@primary-font-color, @content-background-color);
.flex-nav {
	.input-shade(@primary-background-contrast, @primary-background-color);
	label,
	legend {
		color: @tertiary-font-color;
	}
}

.flex-tab {
	input,
	select,
	textarea {
		background-color: @content-background-color;
	}
}

.input-line {
	&.setting-changed > label {
		color: @selection-color;
	}
	i,
	.settings-description {
		color: @secondary-font-color;
	}
	.settings-alert {
		background-color: @pending-background;
		border-color: @pending-border;
		color: @pending-color;
	}
}

.emoji-filter {
	input {
		background-color: @content-background-color;
	}
}

input:-webkit-autofill {
	color: @primary-font-color !important;
}

input:-webkit-autofill {
	background-color: transparent !important;
}


左树 内容超出 横向滚动条

左树 内容超出 横向滚动条

fatal: unable to access 'https://github.com/yyssc/ssc30-admin.git/': The requested URL returned error: 403


Add drop down styles

Add drop down styles

with bootstrap patterns

//
// Dropdown menus
// --------------------------------------------------

// Dropdown arrow/caret
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top:   @caret-width-base solid;
  border-right: @caret-width-base solid transparent;
  border-left:  @caret-width-base solid transparent;
}

// The dropdown wrapper (div)
.dropdown {
  position: relative;
}

// Prevent the focus on the dropdown toggle when closing dropdowns
.dropdown-toggle:focus {
  outline: 0;
}

// The dropdown menu (ul)
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: @zindex-dropdown;
  display: none; // none by default, but block on "open" of the menu
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0; // override default ul
  list-style: none;
  font-size: @font-size-base;
  background-color: @dropdown-bg;
  border: 1px solid @dropdown-fallback-border; // IE8 fallback
  border: 1px solid @dropdown-border;
  border-radius: @border-radius-base;
  .box-shadow(0 6px 12px rgba(0,0,0,.175));
  background-clip: padding-box;

  // Aligns the dropdown menu to right
  &.pull-right {
    right: 0;
    left: auto;
  }

  // Dividers (basically an hr) within the dropdown
  .divider {
    .nav-divider(@dropdown-divider-bg);
  }

  // Links within the dropdown menu
  > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: @line-height-base;
    color: @dropdown-link-color;
    white-space: nowrap; // prevent links from randomly breaking onto new lines
  }
}

// Hover/Focus state
.dropdown-menu > li > a {
  &:hover,
  &:focus {
    text-decoration: none;
    color: @dropdown-link-hover-color;
    background-color: @dropdown-link-hover-bg;
  }
}

// Active state
.dropdown-menu > .active > a {
  &,
  &:hover,
  &:focus {
    color: @dropdown-link-active-color;
    text-decoration: none;
    outline: 0;
    background-color: @dropdown-link-active-bg;
  }
}

// Disabled state
//
// Gray out text and ensure the hover/focus state remains gray

.dropdown-menu > .disabled > a {
  &,
  &:hover,
  &:focus {
    color: @dropdown-link-disabled-color;
  }
}
// Nuke hover/focus effects
.dropdown-menu > .disabled > a {
  &:hover,
  &:focus {
    text-decoration: none;
    background-color: transparent;
    background-image: none; // Remove CSS gradient
    .reset-filter();
    cursor: not-allowed;
  }
}

// Open state for the dropdown
.open {
  // Show the menu
  > .dropdown-menu {
    display: block;
  }

  // Remove the outline when :focus is triggered
  > a {
    outline: 0;
  }
}

// Dropdown section headers
.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: @font-size-small;
  line-height: @line-height-base;
  color: @dropdown-header-color;
}

// Backdrop to catch body clicks on mobile, etc.
.dropdown-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: @zindex-dropdown - 10;
}

// Right aligned dropdowns
.pull-right > .dropdown-menu {
  right: 0;
  left: auto;
}

// Allow for dropdowns to go bottom up (aka, dropup-menu)
//
// Just add .dropup after the standard .dropdown class and you're set, bro.
// TODO: abstract this so that the navbar fixed styles are not placed here?

.dropup,
.navbar-fixed-bottom .dropdown {
  // Reverse the caret
  .caret {
    border-top: 0;
    border-bottom: @caret-width-base solid;
    content: "";
  }
  // Different positioning for bottom up menu
  .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 1px;
  }
}

// Component alignment
//
// Reiterate per navbar.less and the modified component alignment there.

@media (min-width: @grid-float-breakpoint) {
  .navbar-right {
    .dropdown-menu {
      .pull-right > .dropdown-menu();
    }
  }
}

error: pathspec 'cp-strap/src/stylesheets/components/dropdowns.less' did not match any file(s) known to git


基础数据映射 滚动条

基础数据映射 滚动条


Delete freelancer.less

Delete freelancer.less

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


:bug: Restore left/top margin on first btn that's not end-aligned

@import "ui-variables";
@import "../iconsets/ionicons/ionicons";
@import "../iconsets/font-awesome/font-awesome";
@import (inline) "../iconsets/foundation/foundation-icons.css";
@import (inline) "../iconsets/icomoon/icomoon.css";
@import (inline) "../iconsets/devicon/devicon.css";
@import (inline) "../iconsets/mdi/materialdesignicons.css";

.tool-bar {
  @button-margin-size: 2px;
  @button-border-size: 1px;
  background-color: @base-background-color;
  border: 1px solid @base-border-color;
  color: @text-color;
  display: flex;
  justify-content: flex-start;

  button.tool-bar-btn {
    background-color: @base-background-color;
    background-image: inherit;
    border-color: @base-background-color;
    cursor: pointer;
    flex: 0 0 auto;
    margin: @button-margin-size;
    padding: 0;

    &:before {
      display: inline;
    }
    &:focus,
    &:hover {
      border-color: @button-border-color;
      outline: none;
    }
  }

  &.tool-bar-horizontal .tool-bar-btn:not(.tool-bar-item-align-end) + .tool-bar-btn {
    margin-left: 0;
  }
  &.tool-bar-vertical .tool-bar-btn:not(.tool-bar-item-align-end) + .tool-bar-btn {
    margin-top: 0;
  }

  &.tool-bar-horizontal .tool-bar-spacer {
    border: 0 none;
    border-left: @button-border-size solid @button-background-color;
    border-right: @button-border-size solid @button-border-color;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,0.7),rgba(0,0,0,1),rgba(0,0,0,0.7), rgba(0,0,0,0));
    margin: @button-margin-size + 3 0;
  }
  &.tool-bar-vertical .tool-bar-spacer {
    border: 0 none;
    border-bottom: @button-border-size solid @button-background-color;
    border-top: @button-border-size solid @button-border-color;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0),rgba(0,0,0,0.7),rgba(0,0,0,1),rgba(0,0,0,0.7), rgba(0,0,0,0));
    margin: 0 @button-margin-size + 3;
  }

  &.tool-bar-horizontal {
    .tool-bar-btn,
    .tool-bar-spacer {
      &.tool-bar-item-align-end {
        order: 2;
        &:first-child {
          margin-left: auto;
        }
      }
    }
  }

  &.tool-bar-vertical {
    .tool-bar-btn,
    .tool-bar-spacer {
      &.tool-bar-item-align-end {
        order: 2;
        &:first-child {
          margin-top: auto;
        }
      }
    }
  }

  &.tool-bar-12px {
    .tool-bar-size(12px * 2);
  }
  &.tool-bar-16px {
    .tool-bar-size(16px * 2);
  }
  &.tool-bar-24px {
    .tool-bar-size(24px * 2);
  }
  &.tool-bar-32px {
    .tool-bar-size(32px * 2);
  }

  .tool-bar-size(@size) {
    line-height: @size;

    &.tool-bar-horizontal {
      flex-direction: row;
      width: 100%;
      flex-wrap: wrap;
    }
    &.tool-bar-vertical {
      flex-direction: column;
      overflow-x: auto;
      &::-webkit-scrollbar {
        display: none;
      }

      &.gutter-top::before,
      &.gutter-bottom::after {
        content: "";
        height: 100%;
        left: 0;
        pointer-events: none;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1;
      }
      &.gutter-top::before {
        box-shadow: inset 0px 20px 25px -20px rgb(0, 0, 0);
      }
      &.gutter-bottom::after {
        box-shadow: inset 0px -20px 25px -20px rgb(0, 0, 0);
      }
    }

    .tool-bar-btn {
      height: @size + (@button-border-size * 2);
      width: @size + (@button-border-size * 2);
      &:before {
        font-size: @size / 2;
        line-height: @size;
      }
    }

    &.tool-bar-horizontal .tool-bar-spacer {
      height: @size - 4;
    }
    &.tool-bar-vertical .tool-bar-spacer {
      width: @size - 4;
    }
  }
}

// Deprecated. Can be removed after Atom 1.6 is released
.tool-bar-vertical {
  height: 100%;
}

@import "ui-variables";
@import "../iconsets/ionicons/ionicons";
@import "../iconsets/font-awesome/font-awesome";
@import (inline) "../iconsets/foundation/foundation-icons.css";
@import (inline) "../iconsets/icomoon/icomoon.css";
@import (inline) "../iconsets/devicon/devicon.css";
@import (inline) "../iconsets/mdi/materialdesignicons.css";

.tool-bar {
  @button-margin-size: 2px;
  @button-border-size: 1px;
  background-color: @base-background-color;
  border: 1px solid @base-border-color;
  color: @text-color;
  display: flex;
  justify-content: flex-start;

  button.tool-bar-btn {
    background-color: @base-background-color;
    background-image: inherit;
    border-color: @base-background-color;
    cursor: pointer;
    flex: 0 0 auto;
    margin: @button-margin-size;
    padding: 0;

    &:before {
      display: inline;
    }
    &:focus,
    &:hover {
      border-color: @button-border-color;
      outline: none;
    }
  }

  &.tool-bar-horizontal .tool-bar-btn + .tool-bar-btn {
    margin-left: 0;
  }
  &.tool-bar-vertical .tool-bar-btn + .tool-bar-btn {
    margin-top: 0;
  }

  &.tool-bar-horizontal .tool-bar-spacer {
    border: 0 none;
    border-left: @button-border-size solid @button-background-color;
    border-right: @button-border-size solid @button-border-color;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,0.7),rgba(0,0,0,1),rgba(0,0,0,0.7), rgba(0,0,0,0));
    margin: @button-margin-size + 3 0;
  }
  &.tool-bar-vertical .tool-bar-spacer {
    border: 0 none;
    border-bottom: @button-border-size solid @button-background-color;
    border-top: @button-border-size solid @button-border-color;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0),rgba(0,0,0,0.7),rgba(0,0,0,1),rgba(0,0,0,0.7), rgba(0,0,0,0));
    margin: 0 @button-margin-size + 3;
  }

  &.tool-bar-horizontal {
    .tool-bar-btn,
    .tool-bar-spacer {
      &.tool-bar-item-align-end {
        order: 2;
        &:first-child {
          margin-left: auto;
        }
      }
    }
  }

  &.tool-bar-vertical {
    .tool-bar-btn,
    .tool-bar-spacer {
      &.tool-bar-item-align-end {
        order: 2;
        &:first-child {
          margin-top: auto;
        }
      }
    }
  }

  &.tool-bar-12px {
    .tool-bar-size(12px * 2);
  }
  &.tool-bar-16px {
    .tool-bar-size(16px * 2);
  }
  &.tool-bar-24px {
    .tool-bar-size(24px * 2);
  }
  &.tool-bar-32px {
    .tool-bar-size(32px * 2);
  }

  .tool-bar-size(@size) {
    line-height: @size;

    &.tool-bar-horizontal {
      flex-direction: row;
      width: 100%;
      flex-wrap: wrap;
    }
    &.tool-bar-vertical {
      flex-direction: column;
      overflow-x: auto;
      &::-webkit-scrollbar {
        display: none;
      }

      &.gutter-top::before,
      &.gutter-bottom::after {
        content: "";
        height: 100%;
        left: 0;
        pointer-events: none;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1;
      }
      &.gutter-top::before {
        box-shadow: inset 0px 20px 25px -20px rgb(0, 0, 0);
      }
      &.gutter-bottom::after {
        box-shadow: inset 0px -20px 25px -20px rgb(0, 0, 0);
      }
    }

    .tool-bar-btn {
      height: @size + (@button-border-size * 2);
      width: @size + (@button-border-size * 2);
      &:before {
        font-size: @size / 2;
        line-height: @size;
      }
    }

    &.tool-bar-horizontal .tool-bar-spacer {
      height: @size - 4;
    }
    &.tool-bar-vertical .tool-bar-spacer {
      width: @size - 4;
    }
  }
}

// Deprecated. Can be removed after Atom 1.6 is released
.tool-bar-vertical {
  height: 100%;
}


Moving mixins out of class because less doesn't work like that

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


Changed font-weight.

Changed font-weight.

fatal: unable to access 'https://github.com/topics-im/topics.git/': The requested URL returned error: 403


OR-369 add filter css which greys video for firefox

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/heroandtn3/openpaas-esn.git/'


OR-1671 add cursor to avatar contact edition


Added mixins

Added mixins

@off-white: #eee;
@near-black: #333;
@gray: #555;
@red: #a33;

.fill(@padding: 0) {
	position:absolute;
	top: @padding;
	left: @padding;
	right: @padding;
	bottom: @padding;
	padding: 0;
	margin: 0;
}

.flexbox(
		@direction: row,
		@justify-content: center,
		@align-content: stretch,
		@align-items: stretch) {
	display: flex;
	display: -webkit-flex;
	flex-direction: @direction;
	-webkit-flex-direction: @direction;
	justify-content: @justify-content;
	-webkit-justify-content: @justify-content;
	align-content: @align-content;
	-webkit-align-content: @align-content;
	align-items: @align-items;
	-webkit-align-items: @align-items;
}

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


Create larger.less

Create larger.less

// Icon Sizes
// -------------------------

/* makes the font 33% larger relative to the icon container */
.@{fa-css-prefix}-lg {
  font-size: (4em / 3);
  line-height: (3em / 4);
  vertical-align: -15%;
}
.@{fa-css-prefix}-2x { font-size: 2em; }
.@{fa-css-prefix}-3x { font-size: 3em; }
.@{fa-css-prefix}-4x { font-size: 4em; }
.@{fa-css-prefix}-5x { font-size: 5em; }

error: pathspec 'font-awesome/less/larger.less' did not match any file(s) known to git


Move navbar transition

Move navbar transition

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


Fix margin top of navbar-flex on Firefox


tweaks

tweaks

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/srerickson/viztest.git/'


Resolved merge

Resolved merge

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/CAYdenberg/sage.git/'


Fixed wrap height after changed navigation 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/topics-im/topics.git/'


try to set wide modal style in less

try to set wide modal style in less

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


Committing pagination less file

Committing pagination less file

.default-pagination-font-size {
  font-size: 14px;
  @media @tablet {
    font-size: 12px;
  };
};
.default-pagination-width {
  width: 30px;
  @media @tablet {
    width: 26px;
  };
};
.next-prev-pagination-width {
  width: 50px;
  @media @tablet {
    width: 40px;
  };
};
.default-pagination-height {
  height: 30px;
  line-height: 30px;
  @media @tablet {
    height: 26px;
    line-height: 26px;
  };
};
.fda-pagination-bar {
  overflow: hidden;
  margin-bottom: 10px;
  .fda-page-display {
    display: inline-block;
    float: left;
    .default-pagination-font-size;
    .default-pagination-height;
    @media @tablet {
      float: none;
    };
  };
  .fda-pagination {
    .plain;
    margin: 0 auto !important;
    padding: 0 !important;
    border: none !important;
    text-align: right;
    li {
      display: inline-block;
      margin: 0 !important;
      padding: 0 !important;
      border: none!important;
      line-height: normal !important;
      font-weight: normal !important;
      .default-pagination-font-size;
      span,
      a {
        display: inline-block;
        border: 1px solid @fda_blue !important;
        color: @fda_blue !important;
        text-align: center;
        padding: 0 !important;
        .default-pagination-width;
        .default-pagination-height;
        &.fda-pagination-next,
        &.fda-pagination-prev {
          .next-prev-pagination-width;
        };
      };
      span {
        color: @gray !important;
        border-color: @gray !important;
        background-color: @white_smoke;
        cursor:not-allowed;
      };
      &.disabled {
        span {
          background-color: @fda_blue;
          border-color: @fda_blue !important;
          color: @white !important;
          font-weight: bold;
        };
      };
    };
    @media @tablet {
      text-align: center;
    };
  };
};

error: pathspec 'code/core/static/css/_pagination.less' did not match any file(s) known to git


Move Unique Hero css to bottom for organization & priority

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/GutsChurch/dominate.git/'


review bracket and array

review bracket and array

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/braavo/syntax.git/'


Single variable with comma is not a list for LESS =(

@a: 1px, 2px;
@items: @a,;
// @items: $a, $a;

.sprites(@sprites, @i: 1) when (@i <= length(@sprites)) {
  @sprite: extract(@sprites, @i);
  .hello {
    width: extract(@sprite, 1);
  }
  .sprites(@sprites, @i + 1);
}
.sprites(@items);

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


fixed footer buttons

fixed footer buttons

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/TheGr8Nik/divTable.git/'


Code revision

Code revision

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/wUFr/LUI.git/'


fix header width issue

fix header width issue

// Basically this is the style only for first level tab-content
.right > .tab-content {
  height: 100%;
  overflow: auto;

  .header {
    position: relative;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }

  h1 {
    float: left;
    margin: 0;
    width: calc(100% - 210px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 30px;

    i {
      margin-right: 10px;
    }
  }

  .control-buttons {
    float: right;

    i {
      pointer-events: none;
    }

    button {
      margin-right: 5px;
    }

    button:last-child {
      margin-right: 0;
    }

    .btn-group {
      button {
        margin-right: 0;
      }

      button:last-child {
        margin-right: 5px;
      }
    }
  }

  .tab-pane {
    padding: 10px;
    overflow-x: hidden;
  }
}

// Basically this is the style only for first level tab-content
.right > .tab-content {
  height: 100%;
  overflow: auto;

  .header {
    position: relative;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }

  h1 {
    float: left;
    margin: 0;
    width: 60%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 30px;

    i {
      margin-right: 10px;
    }
  }

  .control-buttons {
    float: right;

    i {
      pointer-events: none;
    }

    button {
      margin-right: 5px;
    }

    button:last-child {
      margin-right: 0;
    }

    .btn-group {
      button {
        margin-right: 0;
      }

      button:last-child {
        margin-right: 5px;
      }
    }
  }

  .tab-pane {
    padding: 10px;
    overflow-x: hidden;
  }
}


Fix scrolling on preview

Fix scrolling on preview

.book .preview {
    .content {
        .markdown-content();
        overflow-y: auto;
    }
}

.book .preview {
    .content {
        .markdown-content();
    }
}


styles

styles

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/Digipalvelutehdas/APIKA.git/'


Removed rounded corners on navbar.

Removed rounded corners on navbar.

@import 'constants.less';

.navbar-default {
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-right: none;
}

.navbar-container {
  width: @site-width;
  margin: 0 auto;
}

#navbar-logo {
  height: 50px;
  display: inline-block;
  padding: 5px;
  margin-right: 10px;

  @fadetime: .1s;
  transition: opacity @fadetime ease-in-out;
  -moz-transition: opacity @fadetime ease-in-out;
  -webkit-transiition: opacity @fadetime ease-in-out;

  &:hover {
    opacity: 0.8;
  }
}

ul.room-menu {
  li {
    width: 220px;
  }
}

@import 'constants.less';

.navbar-container {
  width: @site-width;
  margin: 0 auto;
}

#navbar-logo {
  height: 50px;
  display: inline-block;
  padding: 5px;
  margin-right: 10px;

  @fadetime: .1s;
  transition: opacity @fadetime ease-in-out;
  -moz-transition: opacity @fadetime ease-in-out;
  -webkit-transiition: opacity @fadetime ease-in-out;

  &:hover {
    opacity: 0.8;
  }
}

ul.room-menu {
  li {
    width: 220px;
  }
}


Limit CPU usage of <progress> elements

Limit CPU usage of <progress> elements

@import "ui-variables";
@import "ui-mixins";

.loading-spinner(@size) {
  width: @size;
  height: @size;
  display: block;

  background-image: url(images/octocat-spinner-128.gif);
  background-repeat: no-repeat;
  background-size: cover;

  &.inline-block {
    display: inline-block;
  }
}

.loading-spinner-large {
  .loading-spinner(64px);
}

.loading-spinner-medium {
  .loading-spinner(50px);
}

.loading-spinner-small {
  .loading-spinner(32px);
}

.loading-spinner-tiny {
  .loading-spinner(20px);
}

// Much learning from:
// http://css-tricks.com/html5-progress-element/

@progress-height: 16px;
@progress-shine-gradient: -webkit-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .15));

progress {
  height: @progress-height;
  -webkit-appearance: none;
}

progress::-webkit-progress-bar {
  height: @progress-height;
  border-radius: @component-border-radius;

  background-color: #666;

  background-image:
	   -webkit-linear-gradient(-30deg,
	                           transparent 33%, rgba(0, 0, 0, .1) 33%,
	                           rgba(0,0, 0, .1) 66%, transparent 66%),
	   @progress-shine-gradient;

  border-radius: 2px;
  background-size: 25px @progress-height, 100% 100%, 100% 100%;
  -webkit-animation: animate-stripes 5s linear infinite;
  animation: animate-stripes 5s linear 6; // stop animation after 6 runs (30s) to limit CPU usage
}

progress::-webkit-progress-value {
  border-radius: @component-border-radius;
  background-image: @progress-shine-gradient;
  background-color: @background-color-success;
}

progress[value]::-webkit-progress-bar {
  background-image: @progress-shine-gradient;
  -webkit-animation: none;
}

@-webkit-keyframes animate-stripes {
   100% { background-position: 100px 0px; }
}

@import "ui-variables";
@import "ui-mixins";

.loading-spinner(@size) {
  width: @size;
  height: @size;
  display: block;

  background-image: url(images/octocat-spinner-128.gif);
  background-repeat: no-repeat;
  background-size: cover;

  &.inline-block {
    display: inline-block;
  }
}

.loading-spinner-large {
  .loading-spinner(64px);
}

.loading-spinner-medium {
  .loading-spinner(50px);
}

.loading-spinner-small {
  .loading-spinner(32px);
}

.loading-spinner-tiny {
  .loading-spinner(20px);
}

// Much learning from:
// http://css-tricks.com/html5-progress-element/

@progress-height: 16px;
@progress-shine-gradient: -webkit-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .15));

progress {
  height: @progress-height;
  -webkit-appearance: none;
}

progress::-webkit-progress-bar {
  height: @progress-height;
  border-radius: @component-border-radius;

  background-color: #666;

  background-image:
	   -webkit-linear-gradient(-30deg,
	                           transparent 33%, rgba(0, 0, 0, .1) 33%,
	                           rgba(0,0, 0, .1) 66%, transparent 66%),
	   @progress-shine-gradient;

  border-radius: 2px;
  background-size: 25px @progress-height, 100% 100%, 100% 100%;
  -webkit-animation: animate-stripes 5s linear infinite;
  animation: animate-stripes 5s linear infinite;
}

progress::-webkit-progress-value {
  border-radius: @component-border-radius;
  background-image: @progress-shine-gradient;
  background-color: @background-color-success;
}

progress[value]::-webkit-progress-bar {
  background-image: @progress-shine-gradient;
  animation: none;
}

@-webkit-keyframes animate-stripes {
   100% { background-position: 100px 0px; }
}


Atom styles added

Atom styles added

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed and saved.
 *
 * Add your own CSS or Less to fully customize Atom.
 * If you are unfamiliar with Less, you can read more about it here:
 * http://lesscss.org
 */

/*
 * Examples
 * (To see them, uncomment and save)
 */

// style the background color of the tree view
.tree-view {
  // background-color: whitesmoke;
}

// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
  // color: white;
  // background-color: hsl(180, 24%, 12%);
}

// To style other content in the text editor's shadow DOM, use the ::shadow expression
atom-text-editor::shadow .cursor {
  // border-color: red;
}

// Font size for markdown-preview-plus
div.update-preview {
  font-size: 16px;
}

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


Adjust padding-right to improve line lengths

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/mmistakes/made-mistakes.git/'


added splash less to custom less

added splash less to custom less

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


透明度兼容ie低版本

透明度兼容ie低版本

& {
    font-size: 14px;
    width: auto;
    height: 24px;
    background-color: #0092cc;
    color: #ffffff;
    border-radius: 2px;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2) inset;
    position: relative;
}

&>input {
    position: absolute;
    opacity: 0;
    -webkit-appearance: none;
    border: none;
    outline: none;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    bottom: 0;
    cursor: pointer;
}

&>.track {
    border-radius: inherit;
    transition: opacity .1s ease-in, background-color .1s ease-in, box-shadow .1s;
    width: 100%;
    height: 100%;
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    filter: Alpha(opacity=0);
}

&.space>.label {
    padding-left: 5px;
    letter-spacing: 5px;
}

&.hover {
    >.track {
        background-color: #ffffff;
        opacity: .1;
        filter: Alpha(opacity=10);
    }
    &.active {
        >.track {
            background-color: #000000;
            opacity: .2;
            filter: Alpha(opacity=20);
        }
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.3) inset;
    }
}

&.focus {
    box-shadow: 0 0 2px #4aa9b1;
    z-index: 1;
}

.type(@type, @color, @colortext) {
    &[type="@{type}"] {
        color: @colortext;
        background-color: @color;
        border-radius: 3px;
    }
}

.type(candidate, #61d5a6, #fff);
.type(inactive, #94a5bd, #fff);
.type(disabled, #ccc, #fff);
.type(dark, #333, #000);
.type(white, #fff, #a4a9b1);

& {
    font-size: 14px;
    width: auto;
    height: 24px;
    background-color: #0092cc;
    color: #ffffff;
    border-radius: 2px;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2) inset;
    position: relative;
}

&>input {
    position: absolute;
    opacity: 0;
    -webkit-appearance: none;
    border: none;
    outline: none;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    bottom: 0;
    cursor: pointer;
}

&>.track {
    border-radius: inherit;
    transition: opacity .1s ease-in, background-color .1s ease-in, box-shadow .1s;
    width: 100%;
    height: 100%;
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

&.space>.label {
    padding-left: 5px;
    letter-spacing: 5px;
}

&.hover {
    >.track {
        background-color: #ffffff;
        opacity: .1;
    }
    &.active {
        >.track {
            background-color: #000000;
            opacity: .2;
        }
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.3) inset;
    }
}

&.focus {
    box-shadow: 0 0 2px #4aa9b1;
    z-index: 1;
}

.type(@type, @color, @colortext) {
    &[type="@{type}"] {
        color: @colortext;
        background-color: @color;
        border-radius: 3px;
    }
}

.type(candidate, #61d5a6, #fff);
.type(inactive, #94a5bd, #fff);
.type(disabled, #ccc, #fff);
.type(dark, #333, #000);
.type(white, #fff, #a4a9b1);


Changed font-family

Changed font-family

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/lukaszstalmasinski/vuejs-template-webpack.git/'