MySQLOperator/phpmyadmin-custom/themes/blueberry/scss/_card.scss

.card {
	margin-top: 2rem;
	margin-bottom: 0.5rem;
	border-radius: 1rem;
	background-color: $Color-Body-Light;
	border: 1px solid #aaa;
	border: none;
	// padding: 1.25rem;

	> .card-header + .card-body {
		padding-top: 0;
	}
}

.card,
.card-footer {
	@if $direction == rtl {
		text-shadow: -1px 1px 2px #000 inset;
		// -moz-box-shadow: -1px 1px 2px #fff inset;
		// -webkit-box-shadow: -1px 1px 2px #fff inset;
		// box-shadow: -1px 1px 2px #fff inset;
	} @else {
		text-shadow: 1px 1px 2px #000 inset;
		// -moz-box-shadow: 1px 1px 2px #fff inset;
		// -webkit-box-shadow: 1px 1px 2px #fff inset;
		// box-shadow: 1px 1px 2px #fff inset;
	}
}

.card-header.card-header {
	position: relative;
	top: -1rem;
	margin-inline-start: calc(5px + 1.25rem);
	width: max-content;
	max-width: 100%;
	font-weight: bold;
	padding: 5px 10px;
	border: 1px solid #aaa;
	font-size: 1em;
	color: $Color-Tailwind-Title;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	background-color: $Color-Body;
	// -moz-box-shadow: 3px 3px 15px #bbb;
	// -webkit-box-shadow: 3px 3px 15px #bbb;
	// box-shadow: 3px 3px 15px #bbb;

	.icon {
		width: 22px;
		height: 22px;
	}
}

.card-body {
	// padding: 1.25rem;
	// padding: 0;
}

.card-footer {
	color: $th-color;
	background: $th-background;
	padding: 0.5em;
}

fieldset {
	margin-top: 2rem;
	// margin-block: 1rem;
	border-radius: 1rem;
	border: #aaa solid 1px;
	padding: 1.25rem;
	background: $Color-Body-Light;
	// -moz-border-radius: 10px 10px 0 0;
	// -webkit-border-radius: 10px 10px 0 0;
	// border-radius: 10px 10px 0 0;

	// + fieldset,
	// + :not(fieldset) {
	// 	border-radius: 10px;
	// 	-moz-border-radius: 10px;
	// 	-webkit-border-radius: 10px;
	// }

	fieldset {
		margin: 0.8em;
		border: 1px solid #aaa;
		// background: #e8e8e8;
	}

	legend {
		font-weight: bold;
		color: $Color-Tailwind-Title;
		padding: 5px 10px;
		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border: 1px solid #aaa;
		background-color: $Color-Body;
		max-width: 100%;
		width: initial;
		font-size: 1em;
		margin-inline-start: 5px;
		float: none;
		// -moz-box-shadow: 3px 3px 15px #bbb;
		// -webkit-box-shadow: 3px 3px 15px #bbb;
		// box-shadow: 3px 3px 15px #bbb;
	}
}

#maincontainer .card-header,
.accordion > .card > .card-header {
	position: static;
	width: auto;
	margin: 0;
	border: none;

	&:first-child {
		@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
	}
}

#maincontainer {
	.card {
		background-color: $navi-background;
		border: $card-border-width solid #999;

		// @if $direction == rtl {
		//   -moz-box-shadow: -2px 2px 5px #ccc;
		//   -webkit-box-shadow: -2px 2px 5px #ccc;
		//   box-shadow: -2px 2px 5px #ccc;
		// } @else {
		//   -moz-box-shadow: 2px 2px 5px #ccc;
		//   -webkit-box-shadow: 2px 2px 5px #ccc;
		//   box-shadow: 2px 2px 5px #ccc;
		// }

		> .card-header + .card-body {
			padding-top: $card-spacer-x;
		}
	}

	.card-header {
		padding: 0.5em $card-spacer-x;
		background-color: $Color-Body-Light;
		color: $Color-Tailwind-Title;
		font-size: 1.3em;
		font-weight: normal;
		// text-shadow: 0 1px 0 #777;
		// -moz-box-shadow: 1px 1px 15px #999 inset;
		// -webkit-box-shadow: 1px 1px 15px #999 inset;
		// box-shadow: 1px 1px 15px #999 inset;
	}
}

.accordion {
	> .card {
		margin-top: 0;
		margin-bottom: 0;

		> .card-header {
			background-color: inherit;
			box-shadow: none;

			.btn {
				color: $Color-Misc1;

				&:active {
					box-shadow: none;
				}
			}
		}

		.card-body {
			background-color: #fff;
		}
	}
}