@import 'variables';

#main > .notes-container,
#tmp-slide > .notes-container {padding-top: 0;}

.notes {
	@note_list_margin: 3.125px;
	.list-container {padding: (@note_list_margin * 2) @note_list_margin;}
	.list-container {
		.view-states {
			.page-empty {display: none;};
			&.initial .initial {display: block;}
			&.initial.empty .empty {display: none;}
			&.no-results .no-results {display: block;}
			&.empty .empty {display: block;}
		}
	}
	ul.note-list {position: relative; width: 100%; margin: 0; padding: 0; list-style: none;}
	ul.note-list {
		li {margin: 0 @note_list_margin (@note_list_margin * 2) @note_list_margin;}
		> li {.card(); cursor: pointer;}
		> li.note-error {background: #fdd;}
		> li {
			.body {max-height: 400px; overflow: hidden;}
			.content {width: auto;}
		}
		li.image {max-height: 400px; overflow-y: hidden;}
	}

	ul.note-list.masonry {
		> li {float: left; width: 48%;}
	}
	@media @landscape {
		ul.note-list.masonry {
			> li {width: 32%;}
		}
	}

	@desktop_li_margin: 1.25%;
	@desktop_li_adjust: 0.15%;
	@media only screen and (min-width: 800px) {
		& .list-container {padding: @desktop_li_margin 0 0 0;}
		ul.note-list.masonry {
			> li {width: (25% - @desktop_li_margin - @desktop_li_adjust); margin: 0 0 @desktop_li_margin @desktop_li_margin;}
		}
	}
	@media only screen and (min-width: 1024px) {
		ul.note-list.masonry {
			> li {width: (20% - @desktop_li_margin - @desktop_li_adjust);}
		}
	}
	@media only screen and (min-width: 1280px) {
		ul.note-list.masonry {
			> li {width: (16.66666666% - @desktop_li_margin - @desktop_li_adjust);}
		}
	}
	ul.note-list.column {
	}
	ul.note-list.list {
	}

	.paginate {margin: 18px 0 16px 0; text-align: center;}
	.paginate {
		a {display: inline-block; margin: 0 4px; padding: 4px 9px 4px 15px; font-size: 18px; border-left: 1px solid @form_border;}
		a:first-child {border-left: 0;}
	}
}

@file_height: 34px;
@content_pad: 6px;
@content_pad_desktop: 16px;
.content-pad() {
	& {padding: @content_pad;}
	@media @desktop {
		& {padding: @content_pad_desktop;}
	}
}
.note {
	p.empty {padding: 10px 0; font-size: 13px; color: @theme_gray; text-align: center;}

	.note-gutter {
		.content {width: 100%; text-align: initial;}
	}

	&.text,
	&.file,
	&.link,
	&.password,
	&.image.view {
		.note-gutter {.content-pad();}
	}
	&.image {
		&:not(.view) .content .body {.content-pad();}
		.backing {position: relative; z-index: 10; width: 100%; min-height: @header_height; background: @theme_black_bg;}
		.backing {
			span {display: block; font-size: 13px; text-align: center;}
			span {
				icon {font-size: 20px; color: @theme_gray;}
			}
			span.has-size {height: 0;}
			span.has-size {
				icon {position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -10px;}
			}
		}
		.header-backing {display: none;}
		img {display: block; margin: 0 auto; max-width: 100%; height: auto;}
		@img_header_height: 30px;
		@img_header_top_pad: 4px;
		@img_header_margin_bottom: 0;
		&:not(.view) {
			.content h1.main-title {
				& {position: relative; z-index: 11; display: block; height: @img_header_height; margin: -(@img_header_height + @img_header_top_pad) 0 @img_header_margin_bottom 0; padding: @img_header_top_pad 8px 0 8px; line-height: @img_header_height; color: #fff; .ellipsis(); .title-scrim(bottom, .45);}
				a {color: #fff;}
			}
			//.file + .note-gutter .content h1.main-title {top: -@file_height;}
		}
		&.preview:not(.view) {
			.file {display: none;}
		}
	}
	&.item.file.no-text.no-title {
		.note-gutter {padding: 0;}
		.file {box-shadow: none;}
	}

	.file {height: (@file_height - (@content_pad * 2)); padding: @content_pad; text-align: center; background: @theme_gray_white; .layer-rest();}
	.file {
		strong {display: inline-block; width: 100%; font-size: 16px; line-height: 20px; font-weight: normal; .ellipsis();}
		strong {
			icon {width: 20px;}
			svg {display: none; width: 20px; height: 20px; vertical-align: bottom;}
			&.encrypting svg {display: inline-block;}
			svg {
				path {fill: @theme_accent;}
			}
		}
		&.decrypting {
			strong {
				icon {display: none;}
				svg {display: inline-block;}
			}
		}
	}

	.content {
		h1:first-child {word-wrap: break-word;}
		h1:last-child {margin-bottom: 0; padding-bottom: 0;}
		.main-title.password {
			& icon {color: @theme_primary;}
			&.active icon {color: @theme_warn;}
		}
		.show-password {padding: 0 0 16px 0;}
		.show-password {
			form {.uncard(); padding: 0;}
			form {
				input {margin-bottom: 0; border-bottom: 0;}
			}
		}
		.body {
			*:last-child {margin-bottom: 0; padding-bottom: 0;}
		}
	}
	> .color {position: absolute; z-index: 12; display: block; top: 3px; right: 3px; width: 12px; height: 12px; background: @theme_primary; border: 1px solid rgba(0, 0, 0, .2); border-radius: 7px; .layer-hover();}
	> .color {
		&.blue {background-color: #73b8d1;}
		&.red {background-color: #e85c5c;}
		&.green {background-color: #7bde76;}
		&.purple {background-color: #9476de;}
		&.pink {background-color: #de76d3;}
		&.brown {background-color: #7f4e4e;}
		&.black {background-color: #111;}
	}

	.info-container {display: flex; align-items: center; justify-content: space-between;}
	.info-container {padding: 10px @content_pad; font-size: 12px; color: @theme_black; background: @theme_gray_light;}
	@media @desktop {
		.info-container {padding-left: @content_pad_desktop; padding-right: @content_pad_desktop;}
	}
	.info-container {
		icon {color: @theme_black;}
		.tags-container {
			ul {display: flex; align-items: flex-start; margin: 0; padding: 0; list-style: none;}
			li.icon {padding: 0; margin: 0;}
			li {margin: 0 0 0 9px; padding: 0 7px;}
		}
	}
}

// note open view
.note-view {
	.note {
		.note-gutter {padding-bottom: 64px;}
		> .color {width: 16px; height: 16px; border-radius: 9px;}
	}
	.note:not(.image) {
		.note-gutter {padding-top: 12px;}
	}
	&:not(.note-image) {
		.note {
			> .color {position: static; float: right; margin: 4px 4px 0 4px;}
		}
	}
	&.note-image {
		header {.title-scrim(top, .50, 110%); box-shadow: none;}
		header {
			h1 {
				em:before {top: 13px; left: 3px; .item-scrim(.3);}
				a icon {color: #fff;}
			}
			ul.actions {
				> li {
					.item-actions {
						> a:before {top: 15px; left: 31px; .item-scrim(.3);}
					}
				}
			}
		}
		header.scrolled {background: none;}
		header.scrolled {
			h1 em:before {box-shadow: none;}
			ul.actions > li .item-actions > a:before {box-shadow: none;}
		}
		.note {
			.backing {min-height: @header_height;}
			.header-backing {display: block; position: fixed; .fixed-fix(); z-index: 9; top: 0; right: 0; width: 100%; height: @header_height; background: @theme_black_bg;}
			@media @desktop {
				.header-backing {width: @desktop_modal_width;}
			}
			.header-backing.hide {display: none;}
			> .color {top: auto; right: 16px; margin: -10px -3px 0 0;}
			.note-gutter .content .body {padding-top: (@content_pad * 2);}
		}
		.modal-gutter {padding-top: 0;}
	}
	.modal-gutter.closing {
		.info-container {display: none;}
	}
	.modal-gutter.closing, .modal-gutter.opening {
		.note {
			.header-backing {display: none;}
		}
	}
}

// note board listing (mainly shown in note board editor)
.note-boards {margin: 0 0 16px 0; font-size: 14px; border-radius: 0; .transition(border .3s);}
.note-boards {
	icon {float: left; margin: 4px 8px 0 0; font-size: 20px; color: @theme_black; .transition(color .3s);}
	span {display: inline-block; padding: 3px; color: @theme_primary;}
	ul {list-style: none;}
	ul {
		li {display: block; float: left; margin: 0 6px 6px 0; padding: 3px 5px; background: @theme_border; border: 1px solid @theme_gray_midlight; border-radius: 2px;}
	}
}

.notes-edit {
	form {padding-bottom: 16px;}
	form {
		.existing {height: 0; box-sizing: border-box; overflow: hidden; font-size: 13px; transition: height 0.3s;}
		.existing.open {height: 20px;}
		.existing {
			em {display: inline-block; width: 14px; height: 14px; margin: 0 6px 0 0; font-weight: bold; color: #fff; text-align: center; background: @theme_accent; border-radius: 7px;}
		}
		.url-or-file {display: block; padding: 8px 0; font-size: 14px; text-align: center;}
		textarea {width: 100%; max-width: 100%; height: 100px; resize: vertical; font-family: 'Noto Mono', monospace;}
		.formatting {margin: -14px 0 16px 0; text-align: right;}
		.formatting {
			a[rel=formatting] {display: block; padding: 5px 0; font-size: 15px;}
		}

		.file {margin: 0 0 16px 0;}
		.file {
			icon {margin: 4px 8px 0 0;}
			p {margin: 0; padding: 0; font-size: 14px;}
			p.info {width: 100%; margin: 0 0 6px 0; .ellipsis();}
			p.size {float: left; padding-left: 30px;}
			p.remove {float: right;}
			p.remove {
				a icon {margin-right: 0;}
			}
		}
		.password {
			&.preview {
				a.preview icon {color: @theme_primary;}
			}
			a.preview {position: absolute; right: 6%; margin: 12px 0 0 0;}
			a.preview icon {font-size: 16px; color: @theme_black; .transition(color 0.3s);}
		}
		.boards-container {cursor: pointer;}
	}

	ul.colors {margin: 0; padding: 8px 0 0 0; list-style: none; text-align: center;}
	ul.colors {
		// 'none','blue','red','green','purple','pink','brown','black'
		li {display: inline-block; margin: 0 6px 6px 6px; padding: 0 0 0 0; .transition(transform .3s);}
		li.sel {transform: scale(1.35, 1.35);}
		li {
			span {display: block; width: 24px; height: 24px; border: 1px solid #ccc; border-radius: 4px;}
		}
		.edit-color(@color) {background: @color; border-color: @color;}
		.none span {}
		.blue span {.edit-color(#73b8d1);}
		.red span {.edit-color(#e85c5c);}
		.green span {.edit-color(#7bde76);}
		.purple span {.edit-color(#9476de);}
		.pink span {.edit-color(#de76d3);}
		.brown span {.edit-color(#7f4e4e);}
		.black span {.edit-color(#111);}
	}
}

