.dropdownWrapper {
position: relative;
display: inline-block;
}
.dropdownTrigger {
display: inline-flex;
font-family: inherit;
padding: 1.25rem 2rem;
gap: 0.5rem;
transition: all 200ms ease;
font-size: 1rem;
text-decoration: none;
align-items: center;
border: none;
border-radius: 2.5rem;
text-align: center;
justify-content: center;
cursor: pointer;
background-color: white;
color: var(--oc-gray-8);
font-weight: 500;
box-shadow: 0px 8px 16px rgba(var(--oc-violet-1-rgb), 0.5), 0px -1px 16px rgba(var(--oc-violet-1-rgb), 0.75);
}
.dropdownTrigger:hover,
.dropdownTriggerActive {
background-color: white;
color: var(--oc-grape-8);
}
[data-theme='dark'] .dropdownTrigger {
background-color: #1B1B1D;
color: var(--oc-gray-2);
box-shadow: 0px 8px 16px rgba(var(--oc-grape-8-rgb), 0.25), 0px -1px 16px rgba(var(--oc-grape-8-rgb), 0.5);
}
.dropdownMenu {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
width: 400px;
background-color: #ffffff;
border: 1px solid var(--oc-gray-1);
border-radius: 1rem;
box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.08), 0px 0.7px 1.4625px rgba(0, 0, 0, 0.015);
padding: 0.5rem;
z-index: 1000;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 0;
overflow: visible;
opacity: 0;
transform: translateY(-4px);
visibility: hidden;
pointer-events: none;
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1), visibility 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.dropdownMenuOpen {
opacity: 1;
transform: translateY(0);
visibility: visible;
pointer-events: auto;
}
[data-theme='dark'] .dropdownMenu {
background-color: #1a1a1a;
border: 1px solid rgba(var(--oc-gray-8-rgb), 0.5);
box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.08), 0px 0.7px 1.4625px rgba(0, 0, 0, 0.015);
}
.divider {
height: 1px;
background-color: var(--oc-gray-2);
margin: 0.5rem;
}
[data-theme='dark'] .divider {
background-color: rgba(var(--oc-gray-8-rgb), 0.5);
}
/* Shared base for dropdown menu items */
.dropdownItem,
.copyItem {
display: flex;
flex-direction: column;
padding: 0.625rem 0.75rem;
background: transparent;
width: 100%;
text-align: left;
font-size: 0.875rem;
font-family: inherit;
box-sizing: border-box;
overflow: visible;
}
.dropdownItem {
border-radius: 0.5rem;
text-decoration: none !important;
color: inherit;
cursor: pointer;
border: none;
}
.dropdownItem:hover {
background-color: var(--oc-gray-0);
text-decoration: none !important;
}
.dropdownItem:hover .itemHeader {
color: var(--oc-grape-8);
}
[data-theme='dark'] .dropdownItem:hover {
background-color: #1a1a1a;
}
[data-theme='dark'] .dropdownItem:hover .itemHeader {
color: var(--oc-grape-8);
}
.copyItem {
border-radius: 0.25rem;
gap: 0.25rem;
}
.itemHeader {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 500;
font-size: 1rem;
color: var(--oc-gray-8);
flex-shrink: 0;
transition: color 150ms ease;
}
.itemHeader svg {
flex-shrink: 0;
width: 16px;
height: 16px;
}
.itemHeader span {
white-space: nowrap;
}
[data-theme='dark'] .itemHeader {
color: var(--oc-gray-1);
}
.itemDescription {
margin: 0.15rem 0;
font-size: 0.75rem;
font-family: system-ui;
font-feature-settings: normal;
color: var(--oc-gray-6);
padding-left: 1.5rem;
line-height: 1.3;
font-weight: 500;
}
[data-theme='dark'] .itemDescription {
color: var(--oc-gray-5);
}
.copyContainer {
display: flex;
align-items: center;
margin-top: 0.375rem;
padding-left: 1.5rem;
box-sizing: border-box;
width: 100%;
overflow: visible;
position: relative;
cursor: pointer;
}
.copyInput {
flex: 1;
min-width: 0;
padding: 0.375rem 2rem 0.375rem 0.5rem;
background: white;
border: 1px solid var(--oc-gray-3);
border-radius: 0.25rem;
font-size: 0.75rem;
font-family: var(--ifm-font-family-monospace);
color: var(--oc-gray-8);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: color 150ms ease, border-color 150ms ease;
}
[data-theme='dark'] .copyInput {
background: #1B1B1D;
border-color: var(--oc-gray-7);
color: var(--oc-gray-2);
}
.copyIcon {
position: absolute;
right: 0.25rem;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
padding: 0.25rem;
color: var(--oc-gray-8);
transition: color 150ms ease;
}
.copyContainer:hover .copyInput {
color: var(--oc-grape-8);
border-color: var(--oc-grape-8);
}
.copyContainer:hover .copyIcon {
color: var(--oc-grape-8);
}
[data-theme='dark'] .copyIcon {
color: var(--oc-gray-2);
}
[data-theme='dark'] .copyContainer:hover .copyInput {
color: var(--oc-grape-5);
border-color: var(--oc-grape-5);
background-color: #1B1B1D;
}
[data-theme='dark'] .copyContainer:hover .copyIcon {
color: var(--oc-grape-5);
}
.tooltip {
position: absolute;
bottom: calc(100% + 8px);
left: calc(50% + 0.75rem);
transform: translateX(-50%);
background: var(--oc-gray-9);
color: #ffffff;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-family: system-ui;
white-space: nowrap;
animation: tooltipFadeIn 150ms ease;
z-index: 10;
}
[data-theme='dark'] .tooltip {
background: var(--oc-gray-1);
color: var(--oc-gray-9);
}
@keyframes tooltipFadeIn {
from {
opacity: 0;
transform: translateX(-50%) translateY(4px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
@media screen and (max-width: 600px) {
.dropdownWrapper {
width: 100%;
}
.dropdownTrigger {
width: 100%;
}
.dropdownMenu {
width: 100%;
max-width: calc(100vw - 2rem);
left: 0;
}
}
