mirror of
https://github.com/ROCm/ROCm.git
synced 2026-01-09 14:48:06 -05:00
a32210fa7e
Add release notes Add install instructions Add PyTorch + ComfyUI instructions Add custom selector directives Add JS and CSS for selector Add custom icon directive and utils Clean up conf.py
104 lines
3.2 KiB
CSS
104 lines
3.2 KiB
CSS
html {
|
|
--rocm-docs-selector-border-radius: 2px;
|
|
--rocm-docs-selector-accent-color: var(--pst-color-primary);
|
|
--rocm-docs-selector-bg-color: var(--pst-color-on-background);
|
|
--rocm-docs-selector-fg-color: var(--pst-color-primary-text);
|
|
--rocm-docs-selector-group-heading-bg-color: var(--pst-color-surface);
|
|
--rocm-docs-selector-option-hover-color: var(--pst-color-link-hover);
|
|
--rocm-docs-selector-option-selected-color: var(--pst-color-primary);
|
|
--rocm-docs-selector-tile-padding: 0.2rem;
|
|
}
|
|
|
|
html[data-theme="light"] {
|
|
--rocm-docs-selector-border-color: var(--pst-gray-400);
|
|
--rocm-docs-selector-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
--rocm-docs-selector-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
html[data-theme="dark"] {
|
|
--rocm-docs-selector-border-color: var(--pst-color-border);
|
|
--rocm-docs-selector-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
--rocm-docs-selector-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* Selector container */
|
|
.rocm-docs-selector-container {
|
|
padding: 0 0 1rem 0;
|
|
}
|
|
|
|
/* Selector group heading when one of its options is hovered */
|
|
.rocm-docs-selector-group:has(.rocm-docs-selector-option:hover)
|
|
.rocm-docs-selector-group-heading {
|
|
border-right-color: var(--rocm-docs-selector-option-hover-color);
|
|
}
|
|
|
|
/* Selector group heading box */
|
|
.rocm-docs-selector-group-heading {
|
|
background-color: var(--rocm-docs-selector-group-heading-bg-color);
|
|
padding: var(--rocm-docs-selector-tile-padding);
|
|
font-weight: 600;
|
|
border-right: solid 3px var(--rocm-docs-selector-accent-color);
|
|
border-radius: var(--rocm-docs-selector-border-radius);
|
|
transition: border-right-color 0.25s ease;
|
|
box-shadow: var(--rocm-docs-selector-shadow);
|
|
}
|
|
|
|
/* Selector group heading text */
|
|
.rocm-docs-selector-group-heading > span {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Selector option */
|
|
.rocm-docs-selector-option {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
background-color: var(--rocm-docs-selector-bg-color);
|
|
padding: var(--rocm-docs-selector-tile-padding);
|
|
border: solid 2px var(--rocm-docs-selector-border-color);
|
|
cursor: pointer;
|
|
transition: all 0.2 ease;
|
|
border-radius: var(--rocm-docs-selector-border-radius);
|
|
box-shadow: var(--rocm-docs-selector-shadow);
|
|
}
|
|
|
|
/* Selector option when hovered */
|
|
.rocm-docs-selector-option:hover:not(.rocm-docs-disabled) {
|
|
background-color: var(--rocm-docs-selector-option-hover-color);
|
|
color: var(--rocm-docs-selector-fg-color);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--rocm-docs-selector-shadow-hover);
|
|
}
|
|
|
|
.rocm-docs-selector-option:focus:not(.rocm-docs-disabled) {
|
|
z-index: 69;
|
|
}
|
|
|
|
/* Selector option when selected */
|
|
.rocm-docs-selector-option.rocm-docs-selected {
|
|
background-color: var(--rocm-docs-selector-option-selected-color);
|
|
color: var(--rocm-docs-selector-fg-color);
|
|
}
|
|
|
|
/* Prevent hover effect on selected */
|
|
.rocm-docs-selector-option.rocm-docs-selected:hover {
|
|
transform: none;
|
|
}
|
|
|
|
/* Selector option when disabled */
|
|
.rocm-docs-selector-option.rocm-docs-disabled {
|
|
background-color: var(--rocm-docs-selector-border-color);
|
|
color: var(--rocm-docs-selector-fg-color);
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Hidden state */
|
|
.rocm-docs-hidden {
|
|
display: none;
|
|
}
|