User:TheresaFrog421/Sandbox.css: Difference between revisions

/* Just for testing and fun */
/* Kioku Checklist */
.checklist-body {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.checklist-item {
	width: 100px;
	height: 100px;
	position: relative;
}

.checklist-item .record {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.3;
}

.checklist-item .record.extra {
	opacity: 1;
	z-index: -1;
}

.checklist-item .record .dual-box {
	height: 100%;
	width: 50px;
	position: absolute;
	overflow: hidden;
	left: 25px;
}

.checklist-item .record .left {
	position: absolute;
	right: 0;
}

.checklist-item .record .attribute {
	position: absolute;
	top: 0;
	right: 0;
}

.checklist-item .kioku {
	position: absolute;
	width: 100%;
	height: 100%;
}

.checklist-item .kioku.extra:hover {
	opacity: 0.001;
}

.checklist-item .kioku .element {
	position: absolute;
	top: -10px;
	right: -10px;
}

/* Unit Display Testing */
.pm-character-thumb-unit {
	width: 120px;
	height: 120px;
	position: relative;
	display: inline-block;
}

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

.pm-character-thumb-unit-attribute {
	position: absolute;
	top: 4px;
	left: 4px;
	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;
	width: 100%;
	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 {
	display: inline;
}

.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-star-flex .star.not-default:hover + .pm-character-thumb-unit-icon.default {
	display: none;
}