mirror of
https://gitgud.io/BondageProjects/Bondage-College.git
synced 2026-05-03 06:40:28 +00:00
137 lines
3 KiB
CSS
137 lines
3 KiB
CSS
.button {
|
|
/* Default background color */
|
|
--button-color: white;
|
|
/* Background color for disabled buttons */
|
|
--disabled-color: grey;
|
|
/* Background color for hovered and/or active buttons */
|
|
--hover-color: cyan;
|
|
|
|
cursor: pointer;
|
|
position: relative;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
mask-size: contain;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Delegate the background/border styling to a separate class in order to ease their removal when a greater degree of element styling is desired */
|
|
.button-styling {
|
|
background-color: var(--button-color);
|
|
border: min(0.2vh, 0.1vw) solid black;
|
|
}
|
|
|
|
.button-tooltip {
|
|
user-select: none;
|
|
background-color: #FFFF88;
|
|
color: black;
|
|
border: min(0.2vh, 0.1vw) solid black;
|
|
box-shadow: min(0.4vh, 0.2vw) min(0.4vh, 0.2vw) min(2vh, 1vw) 0 rgb(0 0 0 / 50%);
|
|
box-sizing: border-box;
|
|
padding: min(1vh, 0.5vw) min(2vh, 1vw) min(1vh, 0.5vw) min(2vh, 1vw);
|
|
position: absolute;
|
|
text-align: center;
|
|
visibility: hidden;
|
|
width: fit-content;
|
|
text-wrap: nowrap;
|
|
z-index: 1;
|
|
}
|
|
|
|
.button-tooltip-left {
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
right: calc(100% + min(1vh, 0.5vw));
|
|
}
|
|
|
|
.button-tooltip-right {
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: calc(100% + min(1vh, 0.5vw));
|
|
}
|
|
|
|
.button-tooltip-top {
|
|
bottom: calc(100% + min(1vh, 0.5vw));
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.button-tooltip-bottom {
|
|
top: calc(100% + min(1vh, 0.5vw));
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
/* selectors */
|
|
|
|
.button-styling[aria-checked="true"] {
|
|
background-color: var(--hover-color);
|
|
background-color: color-mix(in srgb, var(--button-color) 66%, var(--hover-color) 34%);
|
|
}
|
|
|
|
.button-styling[aria-checked="true"]::before,
|
|
.button-styling:active::before,
|
|
.button-styling[data-active]::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border: min(0.3vh, 0.15vw) inset black;
|
|
}
|
|
|
|
.button-styling:active,
|
|
.button-styling[data-active] {
|
|
background-color: var(--hover-color);
|
|
}
|
|
|
|
/* Keep hover-related styling on mobile disabled as it has a tendency to stick even after the click has ended */
|
|
@media (hover: hover) {
|
|
.button-styling:hover {
|
|
background-color: var(--hover-color);
|
|
}
|
|
|
|
.button:hover > .button-tooltip {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
/* Only show a focus outline when the element is explicitly focused (i.e. via tab-selection) */
|
|
@supports selector(:focus-visible) {
|
|
.button:focus-visible {
|
|
outline: 2px solid rgb(0, 96, 223);
|
|
box-shadow: 0 0 0 3px white;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
.button:focus-visible > .button-tooltip {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
@supports not selector(:focus-visible) {
|
|
.button:focus {
|
|
outline: 2px solid rgb(0, 96, 223);
|
|
box-shadow: 0 0 0 3px white;
|
|
border-radius: 1px;
|
|
}
|
|
}
|
|
|
|
.button:disabled,
|
|
.button[aria-disabled="true"] {
|
|
cursor: auto;
|
|
}
|
|
|
|
.button-styling:disabled,
|
|
.button-styling[aria-disabled="true"] {
|
|
background-color: var(--disabled-color);
|
|
}
|
|
|
|
.button-styling:disabled::before,
|
|
.button-styling[aria-disabled="true"]::before {
|
|
border: unset;
|
|
}
|
|
|
|
.button-tooltip:empty {
|
|
display: none;
|
|
}
|