bondage-college-mirr/BondageClub/CSS/dialog.css

.dialog-root {
	--menu-button-size: min(9vh, 4.5vw);
	--button-height: calc(min(25vh, 12.5vw) - 2px);
	--gap: min(2vh, 1vw);

	display: grid;
	gap: var(--gap);
	grid-template:
		". dialog-status" min-content
		"dialog-paginate dialog-grid" auto / var(--menu-button-size) auto;
}

.dialog-root[data-unload] {
	display: none;
}

.dialog-paginate {
	grid-area: dialog-paginate;
	align-self: end;
	display: grid;
	gap: var(--gap);
	grid-template-rows: repeat(2, min-content);
	padding-bottom: 3px;
}

.dialog-paginate-button {
	height: var(--menu-button-size);
	width: var(--menu-button-size);
}

.dialog-paginate-button > .button-tooltip {
	--tooltip-gap: var(--gap);
}

.dialog-icon {
	--hover-color: var(--button-color);

	display: none;
	cursor: auto;
	grid-area: dialog-grid;
	align-self: self-start;
	justify-self: center;
}

.dialog-icon > .button-label {
	text-align: center;
}

.dialog-icon:empty {
	display: none !important;
}

.dialog-status {
	font: inherit;
	color: white;
	user-select: none;

	display: -webkit-box;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	align-self: center;
	justify-self: center;
	overflow: hidden;
	grid-area: dialog-status;
}

.dialog-grid {
	display: grid;
	gap: var(--gap);
	grid-template-rows: repeat(auto-fill, var(--button-height));
	grid-template-columns: repeat(4, 1fr);
	padding: 3px;
	padding-right: max(20px, 1.25 * var(--gap));
	grid-area: dialog-grid;
	scroll-snap-type: y proximity;
	scroll-padding: 3px;
	scrollbar-gutter: stable;
	scrollbar-color: rgb(149, 149, 149) rgb(0, 0, 0, 0.7);
}

@media (hover: hover) {
	.dialog-grid {
		scrollbar-color: rgb(149, 149, 149, 0.9) rgb(0, 0, 0, 0.4);
		transition: scrollbar-color 0.3s ease;
	}

	.dialog-grid:hover {
		scrollbar-color: rgb(149, 149, 149) rgb(0, 0, 0, 0.7);
	}
}

.dialog-root[data-show-icon] {
	gap: calc(3px + var(--gap));
}

.dialog-root[data-show-icon] > .dialog-icon {
	display: block;
}

.dialog-root[data-show-icon] > .dialog-grid {
	display: none;
}

.dialog-grid-button {
	scroll-snap-align: start;
	height: var(--button-height);
	width: min(100%, calc(0.8 * var(--button-height)));
}

.dialog-grid-button:disabled[aria-checked="true"],
.dialog-grid-button[aria-disabled="true"][aria-checked="true"] {
	background-color: var(--disabled-color) !important;
}

.dialog-grid-button:disabled[aria-checked="true"] > .button-label,
.dialog-grid-button[aria-disabled="true"][aria-checked="true"] > .button-label {
	background-color: var(--disabled-color) !important;
}

.dialog-grid-button > .button-tooltip {
	--tooltip-gap: var(--gap);

	width: calc(400% + 4 * min(0.2vh, 0.1vw) + 3 * var(--gap));
	font-size: min(2.6vh, 1.3vw);
	font-size: min(2.6dvh, 1.3dvw);
	max-height: calc(2 * var(--button-height) + var(--gap));
	display: -webkit-box;
	line-clamp: 15;
	-webkit-line-clamp: 15;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dialog-grid-button[data-unload] {
	display: none;
}

@supports selector(:nth-child(1n of :not([data-unload]))) {
	.dialog-grid .dialog-grid-button:nth-child(4n - 3 of :not([data-unload])) > .button-tooltip {
		left: unset;
		transform: unset;
	}

	.dialog-grid .dialog-grid-button:nth-child(4n - 2 of :not([data-unload])) > .button-tooltip {
		left: calc(100% / 3);
		transform: translateX(calc(-100% / 3));
	}

	.dialog-grid .dialog-grid-button:nth-child(4n - 1 of :not([data-unload])) > .button-tooltip {
		left: calc(100% / 1.5);
		transform: translateX(calc(-100% / 1.5));
	}

	.dialog-grid .dialog-grid-button:nth-child(4n of :not([data-unload])) > .button-tooltip {
		left: 100%;
		transform: translateX(-100%);
	}
}

/* Fallback for browsers that do not support https://caniuse.com/css-nth-child-of */
@supports not selector(:nth-child(1n of :not([data-unload]))) {
	.dialog-grid .dialog-grid-button:nth-child(4n - 3) > .button-tooltip {
		left: unset;
		transform: unset;
	}

	.dialog-grid .dialog-grid-button:nth-child(4n - 2) > .button-tooltip {
		left: calc(100% / 3);
		transform: translateX(calc(-100% / 3));
	}

	.dialog-grid .dialog-grid-button:nth-child(4n - 1) > .button-tooltip {
		left: calc(100% / 1.5);
		transform: translateX(calc(-100% / 1.5));
	}

	.dialog-grid .dialog-grid-button:nth-child(4n) > .button-tooltip {
		left: 100%;
		transform: translateX(-100%);
	}
}

.dialog-grid-button[data-craft]:not([aria-checked="true"]) {
	--button-color: #FFFF88;
}

.dialog-grid-button[data-permission="Block"] {
	--button-color: red;
	--hover-color: pink;
}

.dialog-grid-button[data-permission="Limited"] {
	--button-color: orange;
	--hover-color: #fed8b1;
}

.dialog-grid-button[data-permission="Favorite"] {
	--button-color: green;
	--hover-color: lime;
}

#dialog-crafted-info {
	display: grid;
	overflow: hidden;
	grid-area: dialog-grid;
	gap: var(--gap) 0px;
	grid-template:
		"dialog-crafted-name dialog-crafted-gap dialog-crafted-icon ." minmax(auto, min-content)
		"dialog-crafted-crafter dialog-crafted-gap dialog-crafted-icon ." minmax(auto, min-content)
		"dialog-crafted-property dialog-crafted-gap dialog-crafted-icon ." minmax(auto, min-content)
		"dialog-crafted-private dialog-crafted-gap dialog-crafted-icon ." minmax(auto, min-content)
		"dialog-crafted-footer dialog-crafted-footer dialog-crafted-footer dialog-crafted-footer" minmax(auto, min-content) / auto var(--gap) min(100%, calc(0.8 * var(--button-height))) max(20px, 1.25 * var(--gap))
}

.dialog-crafted-info {
	font: inherit;
	overflow-wrap: break-word;
	height: min-content;
	width: 100%;
	color: white;
	user-select: none;
	text-indent: 1em hanging each-line;
}

#dialog-crafted-name {
	grid-area: dialog-crafted-name;
}

#dialog-crafted-crafter {
	grid-area: dialog-crafted-crafter;
}

#dialog-crafted-property {
	grid-area: dialog-crafted-property;
}

#dialog-crafted-private {
	grid-area: dialog-crafted-private;
}

#dialog-crafted-gap {
	grid-area: dialog-crafted-gap;
}

#dialog-crafted-icon {
	grid-area: dialog-crafted-icon;
	margin-top: 3px;
	display: block;
}

#dialog-crafted-footer {
	height: 100%;
	overflow: hidden auto;
	grid-area: dialog-crafted-footer;
}

#dialog-crafted-footer > * {
	display: block;
	max-width: calc(100% - max(20px, 1.25 * var(--gap)));
	padding-right: unset;
}

@supports(height: 100dvh) {
	.dialog-root {
		--menu-button-size: min(9dvh, 4.5dvw);
		--button-height: calc(min(25dvh, 12.5dvw) - 2px);
		--gap: min(2dvh, 1dvw);
	}

	.dialog-grid-button > .button-tooltip {
		width: calc(400% + 4 * min(0.2dvh, 0.1dvw) + 3 * var(--gap));
	}
}

@supports (background-color: color-mix(in srgb, black 50%, transparent)) {
	.dialog-grid-button:disabled[aria-checked="true"],
	.dialog-grid-button[aria-disabled="true"][aria-checked="true"] {
		background-color: color-mix(in srgb, var(--disabled-color) 50%, var(--hover-color) 50%) !important;
	}

	.dialog-grid-button:disabled[aria-checked="true"] > .button-label,
	.dialog-grid-button[aria-disabled="true"][aria-checked="true"] > .button-label {
		background-color: color-mix(
			in srgb,
			color-mix(in srgb, var(--disabled-color) 50%, var(--hover-color) 50%) 50%,
			transparent
		) !important;
	}
}