Overleaf/services/web/public/stylesheets/app/editor.less

@import "./editor/file-tree.less";
@import "./editor/track-changes.less";
@import "./editor/toolbar.less";
@import "./editor/left-menu.less";
@import "./editor/pdf.less";
@import "./editor/share.less";
@import "./editor/chat.less";
@import "./editor/binary-file.less";
@import "./editor/search.less";
@import "./editor/publish-template.less";
@import "./editor/online-users.less";
@import "./editor/hotkeys.less";

.full-size {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.global-alerts {
	position: absolute;
	z-index: 20;
	top: 2px;
	width: 400px;
	left: 50%;
	margin-left: -200px;
	.alert {
		padding: (@line-height-computed / 4);
		font-size: 14px;
		margin-bottom: (@line-height-computed / 4);
	}
}

#chat-wrapper {
	.full-size;
	> .ui-layout-resizer > .ui-layout-toggler {
		display: none !important;
	}
}

#ide-body {
	.full-size;
	top: 40px;
}

#editor {
	.full-size;
}

.loading-screen {
	h3 {
		padding-top: 136px;
		background-image: url(/img/lion-128.png);
		background-repeat: no-repeat;
		background-position: top center;
	}
	.full-size;
	background-color: #fafafa;
	.container {
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 400px;
		margin-left: -200px;
		margin-top: -200px;
	}
}

.loading-panel {
	.full-size;
	padding-top: 10rem;
	font-family: @font-family-serif;
	text-align: center;
	background-color: #fafafa;
}

.error-panel {
	.full-size;
	padding: @line-height-computed;
	background-color: #fafafa;
	.alert {
		max-width: 400px;
		margin: auto;
	}
}

.project-name {
	.name {
		display: inline-block;
		max-width: 250px;
		overflow: hidden;
		text-overflow: ellipsis;
		vertical-align: top;
		padding: 6px;
		color: @gray;
		font-weight: 700;
		white-space: nowrap;
	}
	input {
		height: 30px;
		margin-top: 4px;
		text-align: center;
		padding: 6px;
		font-weight: 700;
	}
	a.rename {
		visibility: hidden;
	}
	&:hover {
		a.rename {
			visibility: visible;
		}
	}
}

// The internal components of the aceEditor directive
.ace-editor-wrapper {
	.full-size;
	.undo-conflict-warning {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		z-index: 10;
	}
	.ace-editor-body {
		width: 100%;
		height: 100%;
	}
	.spelling-highlight {
		position: absolute;
		background-image: url(/img/spellcheck-underline.png);
		background-repeat: repeat-x;
		background-position: bottom left;
	}
	.remote-cursor {
		position: absolute;
		border-left: 2px solid transparent;
		.nubbin {
			height: 5px;
			width: 5px;
			position: absolute;
			left: -2px;
		}
	}
	.annotation-label {
		padding: (@line-height-computed / 4) (@line-height-computed / 2);
		font-size: 0.8rem;
		z-index: 100;
		font-family: @font-family-sans-serif;
		color: white;
		font-weight: 700;
		white-space: nowrap;
	}
	.annotation {
		position: absolute;
		z-index: 2;
	}
	.highlights-before-label {
		position: absolute;
		top:   @line-height-computed / 2;
		right: @line-height-computed;
	}
	.highlights-after-label {
		position: absolute;
		bottom: @line-height-computed / 2;
		right:  @line-height-computed;
	}
}

.ui-layout-resizer {
	width: 6px;
	background-color: #f4f4f4;
	border-left: 1px solid @toolbar-border-color;
	border-right: 1px solid @toolbar-border-color;
	.ui-layout-toggler {
		color: #999;
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		line-height: 1;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-size: 16px !important;
		line-height: 50px;
		&:hover {
			background-color: #ddd;
			color: #333;
		}
	}
}
.ui-layout-resizer-west.ui-layout-resizer-open, .ui-layout-resizer-east.ui-layout-resizer-closed {
	.ui-layout-toggler {
		&:before {
			content: "\f104"
		}
	}
}
.ui-layout-resizer-east.ui-layout-resizer-open, .ui-layout-resizer-west.ui-layout-resizer-closed {
	.ui-layout-toggler {
		&:before {
			content: "\f105"
		}
	}
}
.ui-layout-resizer-dragging {
	background-color: #ddd;
}

.context-menu {
	position: fixed;
	z-index: 100;
}

.editor-dark {
	color: @gray-lighter;
	background-color: @editor-dark-background-color;
	
	.ui-layout-resizer {
		background-color: darken(@editor-dark-background-color, 10%);
		border: none;
	}
	
	.btn-default {
		color: white;
		background-color: @gray;
		border-color: darken(@gray-dark, 10%);
		&:hover {
			background-color: darken(@gray, 5%);
			border-color: darken(@gray-dark, 20%);
			
		}
	}
}