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);
	--scrollbar-gutter: max(20px, 1.25 * var(--gap));

	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-menubar {
	display: grid;
	grid-area: dialog-menubar;
	grid-template-columns: repeat(9, 1fr);
	grid-template-rows: repeat(auto-fill, 1fr);
	direction: rtl;
	gap: var(--gap);
	padding-right: var(--scrollbar-gutter);
}

.dialog-menubar-button {
	width: var(--menu-button-size);
	aspect-ratio: 1 / 1;
}

.dialog-menubar-button > .button-image {
	width: min(90px, 94%);
	height: min(90px, 94%);
	top: 50%;
	transform: translate(-50%, -50%);
}

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

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

	min-height: 1.15em; /* 1 line */
	max-height: 4.6em; /* 4 lines */
	align-self: center;
	justify-self: center;
	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: var(--scrollbar-gutter);
	grid-area: dialog-grid;
	scroll-snap-type: y proximity;
}

.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: 0.65em;
	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))) var(--scrollbar-gutter)
}

.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% - var(--scrollbar-gutter));
	padding-right: unset;
}

#dialog-dialog {
	--dialog-button-size: min(8vh, 4vw);
	grid-template:
		". dialog-status dialog-menubar" min-content
		"dialog-paginate dialog-grid dialog-grid" auto / var(--menu-button-size) auto calc(var(--menu-button-size) + 3px + var(--scrollbar-gutter));
}

#dialog-dialog-grid {
	max-height: calc(6px + 8 * var(--dialog-button-size) + 7 * var(--gap));
}

#dialog-dialog-status {
	min-height: 3.45em; /* 3 lines */
	max-height: 7.9em; /* 6 lines */
}

#dialog-dialog-grid {
	display: block;
	height: minmax(auto, min-content);
}

.dialog-dialog-button {
	width: 100%;
	min-height: var(--dialog-button-size);
	height: min-content;
	padding-top: 0.15em;
	padding-bottom: 0.15em;
	margin-block: calc(var(--gap) / 2);
}

/* For browsers that support https://caniuse.com/css-nth-child-of */
@supports selector(:nth-child(1 of :not([data-unload]))) {
	.dialog-dialog-button:nth-child(1 of :not([data-unload])) {
		margin-top: unset;
	}

	.dialog-dialog-button:nth-last-child(1 of :not([data-unload])) {
		margin-bottom: unset;
	}
}

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

.dialog-dialog-button > .button-label {
	position: unset;
	padding-inline: 0.15em 0.15em;
}

.dialog-focus-grid [role="radiogroup"] {
	position: relative;
	width: 100%;
	height: 100%;
	border: min(0.3vh, 0.15vw) solid #80808040;
}

.dialog-focus-grid [role="radio"] {
	position: absolute;
	border: min(0.3vh, 0.15vw) solid #80808040;
}

.dialog-focus-grid [role="radio"][data-blocked] {
	border-color: #88000580;
}

.dialog-focus-grid [role="radio"][data-equipped] {
	border-color: #D5A30080;
}

.dialog-focus-grid [role="radio"][aria-checked="true"] {
	border-width: min(0.5vh, 0.25vw);
	border-color: cyan;
}

@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-dialog {
		--dialog-button-size: min(8dvh, 4dvw);
	}

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

	.dialog-focus-grid [role="radiogroup"] {
		border-width: min(0.3dvh, 0.15dvw);
	}

	.dialog-focus-grid [role="radio"] {
		border-width: min(0.3dvh, 0.15dvw);
	}

	.dialog-focus-grid [role="radio"][aria-checked="true"] {
		border-width: min(0.5dvh, 0.25dvw);
	}
}

@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;
	}
}