FreshRSS/p/themes/Ansum/_mobile.scss

@use "mixins";

@use "variables";

/*=== MOBILE */
/*===========*/

@media (max-width: 840px) {
	.form-group .group-name {
		text-align: left;
	}

	.aside {

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

		&.aside_feed {
			padding: 0;
		}

		.tree .tree-folder .tree-folder-items .item a {
			padding: 0.5rem 1rem;
		}
	}

	.aside .toggle_aside,
	#panel .close,
	#close-slider.active,
	.dropdown-menu .toggle_aside {
		background: variables.$main-first-alt;
		display: block;
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;

		.icon {
			filter: grayscale(100%) brightness(2.5);
		}
	}

	.header {
		padding: 0.5rem;
		height: 8rem;

		.item {
			&.search {
				display: block;

				form {
					display: inherit;
				}

				.stick {
					display: flex;
				}

				input {
					width: 90%;
					height: 3.5rem;

					&:focus {
						width: 100%;

					}
				}

				.btn {
					min-height: 49px;
					padding: 0.5rem 2rem;
				}
			}
		}
	}

	#global {
		height: calc(100% - 8rem);
	}

	.post {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.nav_menu {
		.btn {
			margin: 0;
			padding: 0.85rem 1.25rem;
		}

		.stick {
			margin: 0.5rem 0.5rem;

			.btn {
				margin: 0;
				padding: 0.85rem 1.25rem;

				&.read_all {
					padding: 0.85rem 1.25rem;
				}
			}
		}

		.search {
			display: none;
			max-width: 97%;

			.input {

				max-width: 97%;
				width: 90px;

				&:focus {
					width: 400px;
				}
			}
		}
	}

	#stream {
		.flux {
			.flux_header {
				padding: 0.5rem 0;
			}
		}
	}

	.dropdown-target:target {
		~ .dropdown-toggle::after {
			background-color: variables.$grey-lighter;
			border-top: 1px solid variables.$grey-light;
			border-left: 1px solid variables.$grey-light;
			right: 21px;
			bottom: -14px;
		}

		~ a.dropdown-toggle {
			&:not(.btn) {
				~ .dropdown-menu {
					margin-top: 0;
				}

				&::after {
					bottom: -17px;
				}
			}
		}
	}

	.day {
		text-align: center;
		padding: 1rem 0;

		.name {
			padding: 0;
			display: block;
			width: 100%;
			line-height: 1.5rem;
			margin-bottom: 1rem;
		}

	}

	#nav_entries {
		line-height: 4.5rem;
	}

	.notification {
		border-radius: 0;

		a.close {
			background: transparent;
			display: block;
			left: 0;
		}

		a.close:hover {
			opacity: 0.5;
		}

		a.close .icon {
			display: none;

		}
	}
}