MIND/frontend/static/css/reminders.css

/* SEARCH BAR */
.search-container {
	max-width: 40rem;
	margin: auto;
	
	padding-block: clamp(1rem, 4vw, 2rem);
}

#search-form {
	margin-inline: 1rem;
}

.search-bar {
	display: flex;
	
	border: 2px solid var(--color-gray);
	border-radius: 4px;
	
	box-shadow: var(--default-shadow);
}

.search-bar button {
	width: 3.5rem;
	padding: .8rem;
}

.search-bar button svg {
	width: 1rem;
	height: 1rem;
}

.search-bar input {
	border: 0;
	padding-block: 1rem;
	box-shadow: none;
}

#clear-button {
	opacity: 0;
	
	transition: opacity .1s linear;
}

.search-bar:focus-within #clear-button {
	opacity: 1;
}

/* REMINDER LIST */
#reminder-list {
	--gap: 1rem;
	--entry-width: 13rem;
	max-width: 43rem;
	margin-inline: auto;
	
	display: flex;
	justify-content: left;
	gap: var(--gap);
	flex-wrap: wrap;
	
	padding: 1rem;
}

#add-entry {
	justify-content: center;
	align-items: center;
	gap: .5rem;
}

#add-entry svg {
	height: 2rem;
	width: 2rem;
}

#add-entry:not(.error.error-icon) p {
	display: none;
}

#add-entry.error.error-icon p {
	display: block;
	font-size: .8rem !important;
}

.entry {
	width: var(--entry-width);
	height: 6rem;
	position: relative;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: .1rem;
	
	border-radius: 4px;
	padding: .75rem;
	background-color: var(--color-gray);
}

div.entry.fit {
	flex-grow: 1;
}

.entry.expand {
	width: calc(var(--entry-width) * 2 + var(--gap));
}

.entry h2 {
	overflow-y: hidden;
	height: 100%;
	
	text-align: left;
	font-size: 1.25em;
	line-height: 1.18;
	font-weight: 500;
}

.entry-overlay {
	--height: 1.7rem;
	
	opacity: 0;

	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: var(--height);
	
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: .5rem;
	
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
	padding: .5rem;
	background-color: rgb(0 0 0 / 25%);
	
	transition: opacity .2s ease-in;
}

.entry-overlay::before {
	content: '';
	position: absolute;
	height: 25px;
	width: 100%;
	background: linear-gradient(transparent, rgb(0 0 0 / 25%));
	left: 0;
	bottom: var(--height);
}

.entry-overlay > button {
	background-color: transparent;
}

.entry-overlay > button > svg {
	width: .9rem;
	height: .9rem;
}

.entry:hover > .entry-overlay {
	opacity: 1;
}

@media (max-width: 543px) {
	header > div {
		transform: translateX(0);
	}

	.entry {
		flex-grow: 1;
		width: 9rem;
	}
}