FressRSS/p/themes/Ansum/_sidebar.scss

@use "sass:string";

@use "mixins";

@use "variables";

/*=== Tree */
.tree {
	margin: 10px 0;

	&#sidebar {
		scrollbar-color: rgba(255,255, 0, 0.1) rgba(0, 0, 0, 0.05);
		scrollbar-color: string.unquote(variables.$sid-font-color + "33") string.unquote(variables.$sid-font-color + "22");
	}

	.tree-folder {
		border-bottom: 1px solid variables.$sid-sep;
		box-shadow: inset -1px -11px 8px #0003;

		.tree-folder-title {
			padding: 12px 16px;
			background: variables.$sid-bg;
			position: relative;
			font-size: 0.85rem;
			letter-spacing: 1px;
			font-weight: 700;
			text-transform: uppercase;

			.title {
				background: inherit;
				color: variables.$sid-font-color;

				&:hover {
					text-decoration: none;
				}
			}
		}

		&.active {
			.tree-folder-title {
				background: variables.$sid-bg;
				font-weight: bold;
			}
		}

		.tree-folder-items {
			background: variables.$sid-bg-alt;

			.item {
				padding: 0 1rem;
				line-height: 2.5rem;
				font-size: 1rem;
				font-weight: 400;

				@include mixins.transition(all, 0.15s, ease-in-out);

				&.active {
					background: variables.$sid-active;

					.dropdown li a {
						color: variables.$main-font-color;

						&:hover {
							color: variables.$sid-font-color;
						}
					}

					a {
						color: variables.$sid-active-font;
					}
				}

				&:hover {
					background: variables.$sid-bg-dark;
				}

				a {
					text-decoration: none;
					color: variables.$sid-font-color;
				}
			}
		}
	}
}

/*=== Buttons */
.stick {
	vertical-align: middle;
	font-size: 0;

	input, .btn {
		border-radius: 0;
	}

	.btn:first-child,
	input:first-child {
		border-radius: 5px 0 0 5px;
	}

	.btn:last-child, input:last-child, .btn + .dropdown > .btn {
		border-radius: 0 5px 5px 0;
	}

	.btn + .btn,
	.btn + input,
	.btn + .dropdown > .btn,
	input + .btn,
	input + input,
	input + .dropdown > .btn,
	.dropdown + .btn,
	.dropdown + input,
	.dropdown + .dropdown > .btn {
		border-left: 1px solid variables.$grey-medium-light;
	}

}

.aside {
	background: variables.$sid-bg;


	&.aside_feed {
		padding: 10px 0;
		text-align: center;
		background: variables.$sid-bg;
		border-right: 1px solid variables.$sid-sep;
	}

	&.aside_feed .tree {
		margin: 10px 0 50px;
	}

}


/* Sidebar des pages de configuration */



/*=== Navigation */
.nav-list {
	.nav-header,
	.item {
		height: 2.5em;
		line-height: 2.5em;
		font-size: 1rem;
	}

	.item {
		background: variables.$sid-bg;

		@include mixins.transition(all, 0.15s, ease-in-out);

		a {
			padding: 0 1rem;
			color: variables.$sid-font-color;
		}

		.error {
			a {
				color: variables.$alert-bg;
			}
		}

		&:hover {
			background: variables.$sid-bg-dark;
			color: variables.$sid-font-color;

			.error {
				a {
					background: variables.$main-first;
					color: variables.$sid-font-color;
				}
			}

			.empty {
				a {
					background: variables.$warning-bg;
					color: variables.$sid-font-color;
				}
			}

			a {
				color: variables.$sid-font-color;
				text-decoration: none;
			}
		}

		&.active {
			background: variables.$main-first;
			color: variables.$white;

			.error {
				a {
					background: variables.$main-first;
					color: variables.$white;
				}
			}

			.empty {
				a {
					background: variables.$warning-bg;
					color: variables.$white;
				}
			}

			a {
				color: variables.$white;
				text-decoration: none;
			}
		}

	}

	&.empty {
		a {
			color: variables.$warning-bg;
		}
	}

	.disable {
		text-align: center;
		background: variables.$grey-lighter;
		color: variables.$grey-medium-dark;
	}

	.nav-header {
		padding: 0 10px;
		font-weight: bold;
		color: variables.$grey-dark;
		text-transform: uppercase;
		letter-spacing: 1px;
		margin-top: 1rem;
	}

	.nav-form {
		padding: 3px;
		text-align: center;
	}

	.nav-head {
		margin: 0;
		text-align: right;
		// background: #34495e;
		color: variables.$white;

		a {
			color: variables.$white;
		}

		.item {
			padding: 5px 10px;
			font-size: 0.9rem;
			line-height: 1.5rem;
		}
	}
}

/*=== Aside main page (categories) */
.aside_feed .tree-folder-title > .title:not([data-unread="0"]) {
	width: calc(100% - 35px - 35px);
}

.aside.aside_feed .category .title:not([data-unread="0"])::after {
	margin: 1.5em 0 0 0;
	background-color: variables.$sid-pills;
}

.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
	margin: 0.5em 0 0 0;
	background-color: variables.$sid-pills;
}

.feed.item.empty.active {
	background: variables.$grey-dark;
}

.feed.item.error.active {
	background: variables.$grey-dark;
}

.feed.item.empty,
.feed.item.empty > a {
	color: variables.$grey-dark;
}

.feed.item.error,
.feed.item.error > a {
	color: variables.$grey-dark;
}

.feed.item.empty.active,
.feed.item.error.active,
.feed.item.empty.active > a,
.feed.item.error.active > a {
	color: variables.$white;
}

.aside_feed .tree-folder-items .dropdown-menu::after {
	left: 2px;
}

.aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon,
.aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon,
.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon {
	border-radius: 3px;
}

.aside_feed .stick #btn-add {
	border-left-color: variables.$sid-bg;
}