MIND/frontend/static/css/library.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 :where(button, label) {
	width: clamp(2rem, 7.5vw, 3rem);
	flex-shrink: 0;

	display: flex;
	justify-content: center;
	align-items: center;
}

.search-bar :where(button, label) svg {
	height: 1rem;
}

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

#clear-button {
	opacity: 0;

	transition: opacity .1s linear;
}

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

#sort-input {
	width: clamp(6rem, 25vw, 12rem);
	border: 0;
	box-shadow: none;
}

.window-container:has(
	:where(#static-tab-selector, #template-tab-selector):checked
) #sort-input > option:where(
	[value="time"], [value="time_reversed"]
) {
	display: none;
}

/*  */
/* REMINDER LIST */
/*  */
.tab-container > div {
	--gap: 1rem;
	--entry-width: 13rem;
	max-width: 43rem;
	margin-inline: auto;
	
	display: none;
	justify-content: left;
	gap: var(--gap);
	flex-wrap: wrap;
	
	padding: 1rem;
	
	transition: max-width .75s ease-in-out;
}

body:has(#wide-toggle:checked) .tab-container > div {
	max-width: 85rem;
}

#home {
	overflow-y: auto;
}

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

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

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

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

.entry {
	--color: var(--color-gray);
	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);
}

button.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;
}

/*  */
/* Tab selector */
/*  */
.tab-selector {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;

	padding-inline: 1rem;
	padding-top: 1rem;
}

.tab-selector > input {
	display: none;
}

.tab-selector > label {
	min-width: 9.55rem;

	padding: .5rem 1rem;
	border-radius: 4px;
	border: 2px solid var(--color-gray);
	background-color: var(--color-dark);
	color: var(--color-light);
	
	text-align: center;

	transition: background-color .3s ease-in-out;
}

.tab-selector > input:checked + label {
	background-color: var(--color-gray);
}

.window-container:has(#reminder-tab-selector:checked) #reminder-tab,
.window-container:has(#static-tab-selector:checked) #static-reminder-tab,
.window-container:has(#template-tab-selector:checked) #template-tab {
	display: flex;
}

@media (max-width: 543px) {
	header > div {
		transform: translateX(0);
	}
	
	.tab-selector > label {
		flex: 1 0 25%;
	}
	
	#wide-button {
		display: none;
	}

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