mirror of
https://github.com/docker/docs.git
synced 2026-03-27 14:28:47 +07:00
Merge pull request #23836 from dvdksn/header-btns
site: improve header buttons, remove support link
This commit is contained in:
David Karlsson
@@ -257,20 +257,6 @@
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
@utility topbar-button {
|
||||
@apply text-center max-w-40 text-white font-semibold min-h-10 px-2 bg-(--topnav-button-bg) rounded-md border-1 border-blue-300;
|
||||
@apply inline-flex justify-center items-center gap-1.5 hover:bg-blue-400 hover:border-blue-300 transition-colors;
|
||||
svg {
|
||||
font-size: 19px;
|
||||
}
|
||||
}
|
||||
@utility topbar-button-clear {
|
||||
@apply text-center text-white/95 font-semibold min-h-9 px-0 hover:text-white/85 transition-colors;
|
||||
svg {
|
||||
font-size: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
@apply hidden md:flex flex-row ml-auto justify-between px-4 pt-6 pb-2 gap-6;
|
||||
@apply bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700;
|
||||
@@ -311,3 +297,55 @@
|
||||
#ot-sdk-btn.ot-sdk-show-settings:hover, #ot-sdk-btn.optanon-show-settings:hover{
|
||||
@apply hover:!bg-transparent !text-gray-600 dark:!text-gray-400 underline underline-offset-4 decoration-1;
|
||||
}
|
||||
|
||||
@keyframes reflection {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
18% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@utility shimmer {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
& > * {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
110deg,
|
||||
transparent 0%,
|
||||
transparent 43%,
|
||||
rgba(123, 164, 244, 0.25) 49%,
|
||||
rgba(170, 196, 248, 0.45) 50%,
|
||||
rgba(123, 164, 244, 0.25) 51%,
|
||||
transparent 57%,
|
||||
transparent 100%
|
||||
);
|
||||
transform: translateX(-100%);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
animation: reflection 3s ease-in-out 3s forwards;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@apply bg-blue-800 border-blue-400;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,9 @@
|
||||
"classes": [
|
||||
"--mount",
|
||||
"--tmpfs",
|
||||
"-mr-8",
|
||||
"-mt-8",
|
||||
"-pr-8",
|
||||
"-top-10",
|
||||
"-top-16",
|
||||
"-v",
|
||||
@@ -35,8 +37,8 @@
|
||||
"Command-Prompt-CLI",
|
||||
"Command-line-setup",
|
||||
"Compliant",
|
||||
"Covered",
|
||||
"Custom-builder",
|
||||
"DNS-resolution",
|
||||
"DSOS-Legacy-DVP-programs",
|
||||
"DVP-program",
|
||||
"Debian",
|
||||
@@ -108,9 +110,9 @@
|
||||
"Manual-verification",
|
||||
"Manually-create-assets",
|
||||
"NetworkManager",
|
||||
"Networking-mode",
|
||||
"Node",
|
||||
"Non-compliant",
|
||||
"Not-covered",
|
||||
"Okta",
|
||||
"Okta-SAML",
|
||||
"Old-Dockerfile",
|
||||
@@ -147,9 +149,12 @@
|
||||
"Updated-Dockerfile",
|
||||
"Use-Docker-Init",
|
||||
"Use-OpenAI",
|
||||
"Using-Docker-Hardened-Image",
|
||||
"Using-Docker-Hardened-Images",
|
||||
"Using-the-CLI",
|
||||
"Using-the-Docker-Official-Image",
|
||||
"Using-the-GUI",
|
||||
"Using-the-official-Docker-image",
|
||||
"Using-the-official-image",
|
||||
"VS-Code",
|
||||
"Vue",
|
||||
@@ -167,6 +172,7 @@
|
||||
"Without-systemd",
|
||||
"[display:none]",
|
||||
"absolute",
|
||||
"active:border-2",
|
||||
"admonition",
|
||||
"admonition-content",
|
||||
"admonition-danger",
|
||||
@@ -176,6 +182,7 @@
|
||||
"admonition-tip",
|
||||
"admonition-title",
|
||||
"admonition-warning",
|
||||
"ask-ai-button",
|
||||
"aspect-video",
|
||||
"bake-action",
|
||||
"bg-amber-500",
|
||||
@@ -186,10 +193,14 @@
|
||||
"bg-blue-400",
|
||||
"bg-blue-500",
|
||||
"bg-blue-600",
|
||||
"bg-gradient-to-br",
|
||||
"bg-blue-700",
|
||||
"bg-blue-800",
|
||||
"bg-cyan-500",
|
||||
"bg-gradient-to-r",
|
||||
"bg-gray-100",
|
||||
"bg-gray-400",
|
||||
"bg-gray-50",
|
||||
"bg-gray-500",
|
||||
"bg-gray-700",
|
||||
"bg-green-400",
|
||||
"bg-green-500",
|
||||
@@ -204,9 +215,14 @@
|
||||
"border",
|
||||
"border-0",
|
||||
"border-1",
|
||||
"border-2",
|
||||
"border-b",
|
||||
"border-b-4",
|
||||
"border-blue",
|
||||
"border-blue-300",
|
||||
"border-blue-400",
|
||||
"border-blue-500",
|
||||
"border-cyan-400",
|
||||
"border-divider-light",
|
||||
"border-gray-100",
|
||||
"border-gray-200",
|
||||
@@ -218,6 +234,7 @@
|
||||
"border-none",
|
||||
"border-t",
|
||||
"border-transparent",
|
||||
"border-white",
|
||||
"bottom-0",
|
||||
"breadcrumbs",
|
||||
"build-push-action",
|
||||
@@ -245,6 +262,7 @@
|
||||
"dark:bg-blue-500",
|
||||
"dark:bg-blue-800",
|
||||
"dark:bg-gray-300",
|
||||
"dark:bg-gray-400",
|
||||
"dark:bg-gray-500",
|
||||
"dark:bg-gray-800",
|
||||
"dark:bg-gray-900",
|
||||
@@ -263,7 +281,6 @@
|
||||
"dark:border-green-400",
|
||||
"dark:border-l-magenta-dark",
|
||||
"dark:focus:ring-3-blue-dark",
|
||||
"dark:from-blue-300",
|
||||
"dark:hidden",
|
||||
"dark:hover:bg-blue-400",
|
||||
"dark:hover:bg-blue-500",
|
||||
@@ -285,9 +302,9 @@
|
||||
"dark:text-gray-400",
|
||||
"dark:text-gray-500",
|
||||
"dark:text-gray-600",
|
||||
"dark:text-gray-800",
|
||||
"dark:text-magenta-dark",
|
||||
"dark:text-white",
|
||||
"dark:to-blue-400",
|
||||
"docker/bake-action",
|
||||
"docker/build-push-action",
|
||||
"download-links",
|
||||
@@ -306,8 +323,13 @@
|
||||
"flex-shrink",
|
||||
"flex-shrink-0",
|
||||
"flex-wrap",
|
||||
"focus:border-2",
|
||||
"focus:border-blue-400",
|
||||
"focus:outline-none",
|
||||
"focus:ring",
|
||||
"focus:ring-2",
|
||||
"focus:ring-3-blue-light",
|
||||
"focus:ring-blue-400",
|
||||
"font-bold",
|
||||
"font-medium",
|
||||
"font-normal",
|
||||
@@ -316,7 +338,8 @@
|
||||
"footnote-backref",
|
||||
"footnote-ref",
|
||||
"footnotes",
|
||||
"from-blue-400",
|
||||
"from-blue-500",
|
||||
"from-cyan-400",
|
||||
"gap-0",
|
||||
"gap-1",
|
||||
"gap-12",
|
||||
@@ -340,6 +363,7 @@
|
||||
"h-5",
|
||||
"h-6",
|
||||
"h-8",
|
||||
"h-[42px]",
|
||||
"h-[calc(100vh-64px)]",
|
||||
"h-fit",
|
||||
"h-full",
|
||||
@@ -348,20 +372,31 @@
|
||||
"hidden",
|
||||
"hidden'",
|
||||
"highlight",
|
||||
"hover:bg-blue-300",
|
||||
"hover:bg-blue-400",
|
||||
"hover:bg-blue-50",
|
||||
"hover:bg-blue-500",
|
||||
"hover:bg-blue-600",
|
||||
"hover:bg-blue-800",
|
||||
"hover:bg-cyan-400",
|
||||
"hover:bg-gray-100",
|
||||
"hover:bg-gray-200",
|
||||
"hover:bg-gray-50",
|
||||
"hover:border-blue-300",
|
||||
"hover:border-blue-400",
|
||||
"hover:border-white/20",
|
||||
"hover:dark:bg-gray-800",
|
||||
"hover:dark:text-blue-400",
|
||||
"hover:dark:text-blue-700",
|
||||
"hover:opacity-80",
|
||||
"hover:opacity-90",
|
||||
"hover:scale-105",
|
||||
"hover:shadow-[0_0_30px_rgba(147,51,234,0.6)]",
|
||||
"hover:shadow-[0_0_30px_rgba(34,211,238,0.5)]",
|
||||
"hover:text-blue",
|
||||
"hover:underline",
|
||||
"icon-lg",
|
||||
"icon-md",
|
||||
"icon-sm",
|
||||
"icon-svg",
|
||||
"icon-svg-stroke",
|
||||
@@ -381,7 +416,9 @@
|
||||
"leading-snug",
|
||||
"leading-tight",
|
||||
"left-0",
|
||||
"lg:absolute",
|
||||
"lg:block",
|
||||
"lg:border-none",
|
||||
"lg:flex",
|
||||
"lg:flex-row",
|
||||
"lg:gap-4",
|
||||
@@ -390,11 +427,14 @@
|
||||
"lg:grid-cols-3",
|
||||
"lg:grid-cols-4",
|
||||
"lg:hidden",
|
||||
"lg:hover:bg-transparent",
|
||||
"lg:hover:opacity-80",
|
||||
"lg:inline",
|
||||
"lg:max-w-xl",
|
||||
"lg:no-underline",
|
||||
"lg:pb-2",
|
||||
"lg:scale-100",
|
||||
"lg:w-full",
|
||||
"link",
|
||||
"links",
|
||||
"lntable",
|
||||
@@ -477,12 +517,12 @@
|
||||
"overflow-x-auto",
|
||||
"overflow-x-hidden",
|
||||
"overflow-y-auto",
|
||||
"p-1",
|
||||
"p-2",
|
||||
"p-3",
|
||||
"p-4",
|
||||
"p-6",
|
||||
"p-8",
|
||||
"p-[2px]",
|
||||
"pb-0",
|
||||
"pb-0.5",
|
||||
"pb-1",
|
||||
@@ -493,6 +533,7 @@
|
||||
"pl-3",
|
||||
"pl-4",
|
||||
"pl-5",
|
||||
"placeholder-blue-300",
|
||||
"pr-2",
|
||||
"prose",
|
||||
"pt-2",
|
||||
@@ -504,13 +545,17 @@
|
||||
"py-0.5",
|
||||
"py-1",
|
||||
"py-2",
|
||||
"py-2.5",
|
||||
"py-20",
|
||||
"py-3",
|
||||
"py-4",
|
||||
"py-8",
|
||||
"py-[0.5625rem]",
|
||||
"relative",
|
||||
"right-0",
|
||||
"right-2",
|
||||
"right-8",
|
||||
"ring",
|
||||
"ring-3-2",
|
||||
"ring-3-[1.5px]",
|
||||
"ring-3-blue-light-400",
|
||||
@@ -518,8 +563,10 @@
|
||||
"rotate-45",
|
||||
"rounded",
|
||||
"rounded-full",
|
||||
"rounded-lg",
|
||||
"rounded-md",
|
||||
"rounded-sm",
|
||||
"rounded-xl",
|
||||
"scale-50",
|
||||
"scale-75",
|
||||
"scroll-mt-2",
|
||||
@@ -533,7 +580,14 @@
|
||||
"self-center",
|
||||
"self-start",
|
||||
"shadow",
|
||||
"shadow-[0_0_20px_rgba(147,51,234,0.4)]",
|
||||
"shadow-[0_0_20px_rgba(34,211,238,0.3)]",
|
||||
"shadow-black",
|
||||
"shadow-blue-800",
|
||||
"shadow-gray-600",
|
||||
"shadow-lg",
|
||||
"shadow-md",
|
||||
"shimmer",
|
||||
"sm:block",
|
||||
"sm:flex-row",
|
||||
"sm:hidden",
|
||||
@@ -555,6 +609,7 @@
|
||||
"text-base",
|
||||
"text-black",
|
||||
"text-blue",
|
||||
"text-blue-600",
|
||||
"text-blue-light",
|
||||
"text-divider-light",
|
||||
"text-gray",
|
||||
@@ -572,21 +627,24 @@
|
||||
"text-white",
|
||||
"text-xl",
|
||||
"text-xs",
|
||||
"to-blue-200",
|
||||
"to-blue-600",
|
||||
"to-purple-600",
|
||||
"toc",
|
||||
"top-0",
|
||||
"top-1",
|
||||
"top-16",
|
||||
"top-6",
|
||||
"topbar-button",
|
||||
"topbar-button-clear",
|
||||
"transition",
|
||||
"transition-all",
|
||||
"transition-colors",
|
||||
"transition-opacity",
|
||||
"transition-transform",
|
||||
"truncate",
|
||||
"w-0",
|
||||
"w-2",
|
||||
"w-5",
|
||||
"w-64",
|
||||
"w-65",
|
||||
"w-8",
|
||||
"w-[1200px]",
|
||||
|
||||
@@ -49,40 +49,6 @@
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<!-- Top nav buttons appear here on sm width -->
|
||||
<div class="flex flex-col gap-2 md:hidden mb-4">
|
||||
<button
|
||||
@click="open = false"
|
||||
class="topbar-button open-kapa-widget w-full flex items-center gap-2"
|
||||
>
|
||||
<span>Ask AI</span>
|
||||
<span class="icon-svg">
|
||||
{{ partialCached "utils/svg.html" "/icons/sparkle.svg" }}
|
||||
</span>
|
||||
</button>
|
||||
<div class="topbar-button w-full flex items-center gap-2" id="search-bar-container">
|
||||
{{ partialCached "search-bar.html" "-" }}
|
||||
</div>
|
||||
{{ partial "contact-support-button.html" .}}
|
||||
<button
|
||||
aria-label="Theme switch"
|
||||
id="theme-switch"
|
||||
class="topbar-button flex items-center"
|
||||
x-data="{ theme: localStorage.getItem('theme-preference') }"
|
||||
x-init="$watch('theme', value => {
|
||||
localStorage.setItem('theme-preference', value);
|
||||
document.firstElementChild.className = value;
|
||||
})"
|
||||
@click="theme = (theme === 'dark' ? 'light' : 'dark')"
|
||||
>
|
||||
<span class="icon-svg icon-sm dark:hidden"
|
||||
>{{ partialCached "icon" "icons/sun.svg" "sun" }}
|
||||
</span>
|
||||
<span class="icon-svg icon-sm hidden dark:block">
|
||||
{{ partialCached "icon" "icons/moon.svg" "moon" }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Actual Sidebar Content -->
|
||||
{{ block "left" . }}
|
||||
{{ partial "sidebar/mainnav.html" . }}
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
{{ $class := "" }}
|
||||
{{ if eq . "notext" }}
|
||||
{{ $class = "hidden lg:inline" }}
|
||||
{{ end }}
|
||||
<a class="topbar-button w-full flex items-center gap-2"
|
||||
href="https://hub.docker.com/support/contact"
|
||||
aria-label="Contact support">
|
||||
<span class="{{ $class }}">Contact support</span>
|
||||
<span class="icon-svg icon-sm">
|
||||
{{ partial "utils/svg.html" "/icons/headset.svg" }}
|
||||
</span>
|
||||
</a>
|
||||
@@ -46,28 +46,25 @@
|
||||
</nav>
|
||||
</div>
|
||||
<div id="buttons" class="flex min-w-0 items-center justify-end flex-shrink-0">
|
||||
<!-- Hide on small screens, show on md+ -->
|
||||
<div class="hidden md:flex items-center gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
@click="open = false"
|
||||
class="topbar-button open-kapa-widget"
|
||||
class="cursor-pointer flex items-center gap-2 p-2 rounded-lg bg-blue-700 border border-blue-500 text-white transition-colors focus:outline-none focus:ring focus:ring-blue-400 shimmer open-kapa-widget"
|
||||
>
|
||||
<span class="hidden lg:inline">Ask AI</span>
|
||||
<span class="icon-svg">
|
||||
{{ partialCached "utils/svg.html" "/icons/sparkle.svg" }}
|
||||
{{ partial "utils/svg.html" "/icons/sparkle.svg" }}
|
||||
</span>
|
||||
<span class="hidden px-1 lg:inline">Ask AI</span>
|
||||
</button>
|
||||
|
||||
<div class="topbar-button" id="search-bar-container">
|
||||
<div id="search-bar-container">
|
||||
{{ partialCached "search-bar.html" "-" }}
|
||||
</div>
|
||||
|
||||
{{ partial "contact-support-button.html" "notext" }}
|
||||
|
||||
<button
|
||||
aria-label="Theme switch"
|
||||
id="theme-switch"
|
||||
class="topbar-button-clear"
|
||||
class="cursor-pointer p-2 rounded-lg bg-blue-700 border border-blue-500 hover:bg-blue-800 hover:border-blue-400 transition-colors focus:outline-none focus:ring focus:ring-blue-400"
|
||||
x-data="{ theme: localStorage.getItem('theme-preference') }"
|
||||
x-init="$watch('theme', value => {
|
||||
localStorage.setItem('theme-preference', value);
|
||||
@@ -75,21 +72,14 @@
|
||||
})"
|
||||
@click="theme = (theme === 'dark' ? 'light' : 'dark')"
|
||||
>
|
||||
<span class="icon-svg icon-sm dark:hidden"
|
||||
<span class="icon-svg dark:hidden"
|
||||
>{{ partialCached "icon" "icons/sun.svg" "sun" }}
|
||||
</span>
|
||||
<span class="icon-svg icon-sm hidden dark:block">
|
||||
<span class="icon-svg hidden dark:block">
|
||||
{{ partialCached "icon" "icons/moon.svg" "moon" }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- On sm screens, hide all buttons here (they will be in sidebar) -->
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</button>
|
||||
</div>
|
||||
<!-- On sm screens, hide all buttons here (they will be in sidebar) -->
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -4,10 +4,10 @@
|
||||
@click.outside="open = false;"
|
||||
@keyup.escape.window="open = false"
|
||||
id="search-bar"
|
||||
class="relative flex w-full max-w-full items-center overflow-visible"
|
||||
class="h-full relative flex items-center overflow-visible"
|
||||
>
|
||||
<input
|
||||
class="min-w-0 border-none outline-none focus:outline-none"
|
||||
class="rounded-lg hidden w-64 lg:inline focus:outline-none bg-blue-700 border border-blue-500 px-3 py-[0.5625rem] focus:ring focus:ring-blue-400 placeholder-blue-300 h-[42px]"
|
||||
x-ref="searchBarInput"
|
||||
type="search"
|
||||
id="search-bar-input"
|
||||
@@ -30,12 +30,12 @@
|
||||
<button
|
||||
id="search-bar-icon"
|
||||
@click="window.location.href = '/search/?q=' + $refs.searchBarInput.value;"
|
||||
class="cursor-pointer transition-opacity hover:opacity-80"
|
||||
class="lg:absolute right-2 p-1 rounded-lg cursor-pointer transition-colors hover:bg-blue-600 lg:hover:bg-transparent lg:hover:opacity-80"
|
||||
aria-label="Search"
|
||||
>
|
||||
<span class="icon-svg-stroke">
|
||||
<div class="bg-blue-700 rounded-md p-2 border border-blue-500 lg:border-none icon-svg">
|
||||
{{ partial "utils/svg.html" "/icons/search.svg" }}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
id="search-bar-dropdown"
|
||||
|
||||
Reference in New Issue
Block a user