User:0x99/Sandbox/Character thumb Magireco/styles.css

.pm-character-thumb {
	display: inline-grid;
	width: 110px;
	height: 110px;
}

.pm-character-thumb-frame,
.pm-character-thumb-thumb {
	grid-area: 1 / 1;
}

.pm-character-thumb-frame {
	z-index: 1;
	pointer-events: none;
}

/* For Kioku */

.pm-character-thumb-kioku {
	width: 180px;
	height: 130px;
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.pm-character-thumb-kioku-element {
	position: absolute;
	left: 0;
	top: 0;
	width: 50px;
	height: 50px;
	overflow: hidden;
	z-index: 3;
}

.pm-character-thumb-kioku-element img {
	position: relative;
	bottom: 10px;
	right: 10px;
}

.pm-character-thumb-kioku-role {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 50px;
	height: 50px;
	overflow: hidden;
	z-index: 4;
}

.pm-character-thumb-kioku-role img {
	position: relative;
	bottom: 10px;
	right: 10px;
}

.pm-character-thumb-kioku-icon {
	position: absolute;
	z-index: 1;
}

.pm-character-thumb-kioku-frame {
	position: absolute;
	z-index: 2;
	pointer-events: none;
}

/* for Magireco Units */
.pm-character-thumb-unit {
	width: 120px;
	height: 120px;
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.pm-character-thumb-unit-bg {
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

.pm-character-thumb-unit-attribute {
	position: absolute;
	top: 3px;
	left: 3px;
	z-index: 3;
}

.pm-character-thumb-unit-icon  {
	width: 120px;
	height: 120px;
	position: absolute;
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 2;
}

.pm-character-thumb-unit-icon.default  {
	display: flex;
}

.pm-character-thumb-unit-icon .icon {
	position: absolute;
	border-radius: 50%;
	overflow: hidden;
}

.pm-character-thumb-unit-icon .frame {
	position: absolute;
	pointer-events: none;
}

.pm-character-thumb-unit-star-flex {
	position: absolute;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 4;
}

.pm-character-thumb-unit-star-flex .star {
	width: 18px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.pm-character-thumb-unit-star-flex .star .on,
.pm-character-thumb-unit-star-flex .star .off {
	position: absolute;
}

.pm-character-thumb-unit-star-flex .star .on,
.pm-character-thumb-unit-star-flex .star.not-default .off,
.pm-character-thumb-unit-star-flex .star.not-default:hover > .on,

.pm-character-thumb-unit:has(.pm-character-thumb-unit-star-flex .star.third.not-default:hover) .pm-character-thumb-unit-star-flex .star.second .on,
.pm-character-thumb-unit:has(.pm-character-thumb-unit-star-flex .star.fourth.not-default:hover) .pm-character-thumb-unit-star-flex .star.second .on,
.pm-character-thumb-unit:has(.pm-character-thumb-unit-star-flex .star.fourth.not-default:hover) .pm-character-thumb-unit-star-flex .star.third .on,
.pm-character-thumb-unit:has(.pm-character-thumb-unit-star-flex .star.fifth.not-default:hover) .pm-character-thumb-unit-star-flex .star.second .on,
.pm-character-thumb-unit:has(.pm-character-thumb-unit-star-flex .star.fifth.not-default:hover) .pm-character-thumb-unit-star-flex .star.third .on,
.pm-character-thumb-unit:has(.pm-character-thumb-unit-star-flex .star.fifth.not-default:hover) .pm-character-thumb-unit-star-flex .star.fourth .on {
	display: inline;
}

.pm-character-thumb-unit:has(.pm-character-thumb-unit-star-flex .star.second.not-default:hover) .pm-character-thumb-unit-icon.second,
.pm-character-thumb-unit:has(.pm-character-thumb-unit-star-flex .star.third.not-default:hover) .pm-character-thumb-unit-icon.third,
.pm-character-thumb-unit:has(.pm-character-thumb-unit-star-flex .star.fourth.not-default:hover) .pm-character-thumb-unit-icon.fourth,
.pm-character-thumb-unit:has(.pm-character-thumb-unit-star-flex .star.fifth.not-default:hover) .pm-character-thumb-unit-icon.fifth {
	display: flex;
}

.pm-character-thumb-unit-star-flex .star .off,
.pm-character-thumb-unit-star-flex .star.not-default .on,
.pm-character-thumb-unit-star-flex .star.not-default:hover > .off,

.pm-character-thumb-unit:has(.pm-character-thumb-unit-star-flex .star.third.not-default:hover) .pm-character-thumb-unit-star-flex .star.second .off,
.pm-character-thumb-unit:has(.pm-character-thumb-unit-star-flex .star.fourth.not-default:hover) .pm-character-thumb-unit-star-flex .star.second .off,
.pm-character-thumb-unit:has(.pm-character-thumb-unit-star-flex .star.fourth.not-default:hover) .pm-character-thumb-unit-star-flex .star.third .off,
.pm-character-thumb-unit:has(.pm-character-thumb-unit-star-flex .star.fifth.not-default:hover) .pm-character-thumb-unit-star-flex .star.second .off,
.pm-character-thumb-unit:has(.pm-character-thumb-unit-star-flex .star.fifth.not-default:hover) .pm-character-thumb-unit-star-flex .star.third .off,
.pm-character-thumb-unit:has(.pm-character-thumb-unit-star-flex .star.fifth.not-default:hover) .pm-character-thumb-unit-star-flex .star.fourth .off,

.pm-character-thumb-unit:has(.pm-character-thumb-unit-star-flex .star.not-default:hover) .pm-character-thumb-unit-icon.default {
	display: none;
}