mirror of
https://github.com/docker/docs.git
synced 2026-03-27 06:18:55 +07:00
340 lines
7.1 KiB
CSS
340 lines
7.1 KiB
CSS
@utility icon-xs {
|
|
svg {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
@utility icon-sm {
|
|
svg {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
@utility icon-md {
|
|
svg {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
@utility icon-lg {
|
|
svg {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
|
|
@utility text-primary-blue {
|
|
color: var(--color-primary-blue);
|
|
}
|
|
|
|
@utility link {
|
|
@apply text-blue no-underline dark:text-blue-400;
|
|
font-weight: inherit;
|
|
&:hover {
|
|
@apply underline underline-offset-3;
|
|
}
|
|
}
|
|
|
|
@utility invertible {
|
|
@apply dark:hue-rotate-180 dark:invert dark:filter;
|
|
}
|
|
|
|
@utility bg-background-toc {
|
|
background-color: var(--color-navbar-bg);
|
|
.dark & {
|
|
background-color: var(--color-navbar-bg-dark);
|
|
}
|
|
}
|
|
|
|
@utility icon-svg {
|
|
svg {
|
|
font-size: 24px;
|
|
width: 1em;
|
|
height: 1em;
|
|
display: inline-block;
|
|
fill: currentColor;
|
|
}
|
|
}
|
|
@utility icon-svg-stroke {
|
|
svg {
|
|
font-size: 24px;
|
|
width: 1em;
|
|
height: 1em;
|
|
display: inline-block;
|
|
stroke: currentColor;
|
|
}
|
|
}
|
|
|
|
@utility icon-xs {
|
|
svg {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
@utility icon-sm {
|
|
svg {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
@utility icon-lg {
|
|
svg {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
|
|
@utility navbar-font {
|
|
font-size: var(--navbar-font-size);
|
|
color: var(--color-navbar-text);
|
|
.dark & {
|
|
color: var(--color-navbar-text-dark);
|
|
}
|
|
}
|
|
|
|
@utility navbar-entry-margin {
|
|
@apply px-2 py-1;
|
|
}
|
|
|
|
@utility navbar-group {
|
|
@apply mt-5;
|
|
}
|
|
|
|
@utility navbar-entry-background-current {
|
|
@apply bg-gray-100 dark:bg-gray-900;
|
|
}
|
|
@utility navbar-group-font-title {
|
|
font-size: var(--color-navbar-group-font-title-size);
|
|
@apply pb-1.5 font-semibold uppercase;
|
|
color: var(--color-navbar-text);
|
|
.dark & {
|
|
color: var(--color-navbar-text-dark);
|
|
}
|
|
}
|
|
|
|
@utility prose {
|
|
table:not(.lntable) code {
|
|
overflow-wrap: unset;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* code in `inline code` style */
|
|
:where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)),
|
|
a > code {
|
|
font-size: 0.875em;
|
|
font-weight: 400 !important;
|
|
border: 1px solid !important;
|
|
border-radius: 0.25rem;
|
|
border: none !important;
|
|
padding: 4px !important;
|
|
background: var(--tw-prose-code-bg) !important;
|
|
.dark & {
|
|
background: var(--tw-prose-code-bg-dark) !important;
|
|
}
|
|
&::before,
|
|
&::after {
|
|
content: none !important;
|
|
}
|
|
}
|
|
|
|
/* code blocks with unrecognized languages*/
|
|
pre:not(.chroma) {
|
|
@apply overflow-x-auto p-3;
|
|
background: var(--tw-prose-code-bg);
|
|
color: var(--color-gray-700);
|
|
.dark & {
|
|
background: var(--tw-prose-code-bg-dark);
|
|
color: var(--color-gray-200);
|
|
}
|
|
}
|
|
|
|
.highlight {
|
|
@apply my-0 overflow-x-auto p-2;
|
|
|
|
/* LineTableTD */
|
|
.lntd {
|
|
vertical-align: top;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-weight: 400;
|
|
padding: 0 4px;
|
|
&:first-child {
|
|
width: 0;
|
|
}
|
|
}
|
|
|
|
/* LineTableTD */
|
|
.lntd {
|
|
vertical-align: top;
|
|
padding: 0;
|
|
margin: 0;
|
|
border: 0;
|
|
}
|
|
/* LineTable */
|
|
.lntable {
|
|
display: table;
|
|
width: 100%;
|
|
border-spacing: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
border: 0;
|
|
/* LineNumberColumnHighlight */
|
|
.lntd:first-child .hl {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@utility section-card {
|
|
@apply flex h-full flex-col gap-2 rounded-sm border p-4 drop-shadow-xs hover:drop-shadow-lg;
|
|
@apply text-gray dark:text-gray-200;
|
|
@apply border-gray-100 bg-gray-50 hover:border-gray-200 dark:border-gray-600 dark:bg-gray-900 hover:dark:border-gray-500;
|
|
}
|
|
|
|
@utility section-card-text {
|
|
@apply leading-snug text-gray-800 dark:text-gray-200;
|
|
}
|
|
@utility section-card-title {
|
|
@apply text-xl font-semibold text-gray-900 dark:text-gray-100;
|
|
}
|
|
|
|
@utility sub-button {
|
|
@apply flex w-full items-center gap-2 rounded-sm px-2 py-2 text-left text-gray-600 transition-colors hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-800;
|
|
}
|
|
|
|
@utility dropdown-base {
|
|
@apply rounded-sm border border-gray-300 bg-white text-gray-600 dark:border-gray-300 dark:bg-gray-900 dark:text-gray-100;
|
|
}
|
|
|
|
@utility toc {
|
|
a {
|
|
@apply block max-w-full truncate py-1 pl-2 hover:font-medium hover:no-underline;
|
|
&[aria-current="true"],
|
|
&:hover {
|
|
@apply border-l-2 border-x-gray-200 bg-gradient-to-r from-gray-50 font-medium text-black dark:border-l-gray-300 dark:from-gray-900 dark:text-white;
|
|
}
|
|
&:not([aria-current="true"]) {
|
|
@apply text-gray-600 hover:text-black dark:text-gray-100 dark:hover:text-white;
|
|
}
|
|
}
|
|
}
|
|
@utility chip {
|
|
@apply border-divider-light dark:border-divider-dark inline-flex items-center gap-1 rounded-full border bg-gray-100 px-2 text-sm text-gray-800 select-none dark:bg-gray-700 dark:text-gray-200;
|
|
}
|
|
|
|
@utility pagination-link {
|
|
@apply flex items-center justify-center rounded-sm p-2;
|
|
}
|
|
|
|
@utility breadcrumbs {
|
|
font-size: 90%;
|
|
}
|
|
|
|
@utility topbar-button {
|
|
@apply min-h-10 max-w-40 rounded-md border-1 border-blue-300 bg-(--topnav-button-bg) px-2 text-center font-semibold text-white;
|
|
@apply inline-flex items-center justify-center gap-1.5 transition-colors hover:border-blue-300 hover:bg-blue-400;
|
|
svg {
|
|
font-size: 19px;
|
|
}
|
|
}
|
|
@utility topbar-button-clear {
|
|
@apply min-h-9 px-0 text-center font-semibold text-white/95 transition-colors hover:text-white/85;
|
|
svg {
|
|
font-size: 19px;
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
@apply ml-auto hidden flex-row justify-between gap-6 px-4 pt-6 pb-2 md:flex;
|
|
@apply border-t border-gray-200 bg-gray-100 dark:border-gray-700 dark:bg-gray-900;
|
|
@apply text-gray-600 dark:text-gray-400;
|
|
a:hover {
|
|
@apply underline underline-offset-4;
|
|
}
|
|
}
|
|
|
|
.social {
|
|
@apply flex min-w-20 flex-wrap items-center gap-1;
|
|
}
|
|
|
|
.links {
|
|
@apply flex items-center gap-3;
|
|
}
|
|
|
|
.links a {
|
|
@apply inline-flex min-w-15 truncate whitespace-normal;
|
|
}
|
|
|
|
.secondaryLinks {
|
|
@apply flex items-center;
|
|
a,
|
|
button {
|
|
@apply whitespace-normal md:truncate;
|
|
}
|
|
}
|
|
|
|
.secondaryLinks > *:not(:last-child)::after {
|
|
content: "|";
|
|
@apply mx-1 text-gray-400;
|
|
}
|
|
|
|
.ot-sdk-show-settings {
|
|
@apply !text-gray-600 hover:!text-gray-800 dark:!text-gray-400 dark:hover:!text-gray-200;
|
|
@apply !m-0 !min-w-15 !truncate !border-none !p-0 !text-sm;
|
|
}
|
|
#ot-sdk-btn.ot-sdk-show-settings:hover,
|
|
#ot-sdk-btn.optanon-show-settings:hover {
|
|
@apply !text-gray-600 underline decoration-1 underline-offset-4 hover:!bg-transparent dark:!text-gray-400;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|