.game-sidebar .widget.oneupheart-sharing-widget,
.widget.oneupheart-sharing-widget {
overflow: visible !important;
}
.oneupheart-share-box {
display: grid;
gap: 10px;
overflow: visible;
}
.oneupheart-share-grid {
position: relative;
z-index: 30;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
overflow: visible;
}
.oneupheart-share-button,
.oneupheart-share-utility {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0;
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 7px;
color: var(--color-text, #fff);
cursor: pointer;
font: inherit;
font-weight: 900;
text-decoration: none !important;
transition:
background-color 160ms ease,
border-color 160ms ease,
box-shadow 160ms ease,
color 160ms ease,
transform 160ms ease;
}
.oneupheart-share-button {
position: relative;
z-index: auto;
width: 100%;
height: 40px;
min-height: 40px;
padding: 0;
}
.oneupheart-share-button[data-tooltip]::after {
position: absolute;
z-index: 100000;
bottom: calc(100% + 8px);
left: 50%;
width: max-content;
max-width: 180px;
min-width: 0;
padding: 5px 8px;
background: var(--color-panel, #281017);
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.16));
border-radius: calc(var(--radius, 8px) - 3px);
box-shadow: var(--shadow-panel, 0 14px 30px rgba(0, 0, 0, 0.28));
color: var(--color-text, #fff);
font-size: 0.74rem;
font-weight: 900;
line-height: 1.1;
content: attr(data-tooltip);
opacity: 0;
pointer-events: none;
transform: translate(-50%, 3px);
transition: opacity 140ms ease, transform 140ms ease;
white-space: nowrap;
}
.oneupheart-share-button:nth-child(5n+1)[data-tooltip]::after {
left: 0;
transform: translate(0, 3px);
}
.oneupheart-share-button:nth-child(5n)[data-tooltip]::after {
right: 0;
left: auto;
transform: translate(0, 3px);
}
.oneupheart-share-button[data-tooltip]:hover::after,
.oneupheart-share-button[data-tooltip]:focus-visible::after {
opacity: 1;
transform: translate(-50%, 0);
}
.oneupheart-share-button:nth-child(5n+1)[data-tooltip]:hover::after,
.oneupheart-share-button:nth-child(5n+1)[data-tooltip]:focus-visible::after,
.oneupheart-share-button:nth-child(5n)[data-tooltip]:hover::after,
.oneupheart-share-button:nth-child(5n)[data-tooltip]:focus-visible::after {
transform: translate(0, 0);
}
.oneupheart-share-button:hover,
.oneupheart-share-button:focus-visible,
.oneupheart-share-utility:hover,
.oneupheart-share-utility:focus-visible {
border-color: var(--color-border-strong, rgba(255, 184, 76, 0.42));
color: var(--color-text, #fff);
transform: translateY(-1px);
}
.oneupheart-share-button:hover,
.oneupheart-share-button:focus-visible {
z-index: 10000;
}
.oneupheart-share-button-icon {
display: inline-grid;
width: 20px;
height: 20px;
place-items: center;
color: var(--share-icon-color, var(--color-green, #14d676));
line-height: 1;
}
.oneupheart-share-button-icon svg {
display: block;
width: 20px;
height: 20px;
}
.oneupheart-share-button--facebook {
--share-icon-color: #1877f2;
}
.oneupheart-share-button--x {
--share-icon-color: #f8f3ef;
}
.oneupheart-share-button--whatsapp {
--share-icon-color: #25d366;
}
.oneupheart-share-button--reddit {
--share-icon-color: #ff4500;
}
.oneupheart-share-button--pinterest {
--share-icon-color: #e60023;
}
.oneupheart-share-button--line {
--share-icon-color: #06c755;
}
.oneupheart-share-button--kakao {
--share-icon-color: #fae100;
}
.oneupheart-share-button--kakao .oneupheart-share-button-icon,
.oneupheart-share-button--kakao .oneupheart-share-button-icon svg {
width: 26px;
height: 26px;
}
.oneupheart-share-button--telegram {
--share-icon-color: #2aabee;
}
.oneupheart-share-button--bluesky {
--share-icon-color: #1185fe;
}
.oneupheart-share-button--threads {
--share-icon-color: #f8f3ef;
}
.oneupheart-share-utilities {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.oneupheart-share-utility {
min-height: 40px;
gap: 7px;
padding: 8px 10px;
background:
linear-gradient(180deg, rgba(255, 248, 243, 0.045), transparent),
rgba(255, 255, 255, 0.055);
color: var(--color-text, #fff);
font-size: 0.82rem;
}
.oneupheart-share-utility-icon {
display: inline-flex;
flex: 0 0 auto;
color: var(--color-green, #14d676);
}
.oneupheart-share-copy.is-copied {
background: rgba(20, 214, 118, 0.16);
border-color: rgba(20, 214, 118, 0.62);
box-shadow: 0 0 0 2px rgba(20, 214, 118, 0.14);
color: var(--color-text, #fff);
}
.oneupheart-share-copy.is-error {
background: rgba(255, 61, 102, 0.14);
border-color: rgba(255, 61, 102, 0.58);
box-shadow: 0 0 0 2px rgba(255, 61, 102, 0.12);
}
@media (max-width: 420px) {
.oneupheart-share-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
}
.oneupheart-share-button {
height: 38px;
min-height: 38px;
}
.oneupheart-share-button-icon {
width: 19px;
height: 19px;
}
.oneupheart-share-button-icon svg {
width: 19px;
height: 19px;
}
.oneupheart-share-button--kakao .oneupheart-share-button-icon,
.oneupheart-share-button--kakao .oneupheart-share-button-icon svg {
width: 24px;
height: 24px;
}
}