2025-09-27 16:49:32 +03:00

108 lines
2.2 KiB
CSS

.download-card {
padding: 1em;
}
.download-server .download-card:first-of-type {
grid-column: 1 / 4;
}
.download-card h3 {
color: var(--accent-color);
font-size: 1.5em;
position: relative;
}
.download-card h3 a.more-info {
margin-left: 0.5em;
right: 0;
}
.download-card h3 a.more-info .bx {
vertical-align: sub;
}
.download-card .card-content-inner {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.download-options {
justify-content: flex-end;
align-items: stretch;
flex-grow: 1;
align-items: center;
display: flex;
flex-direction: column;
}
.download-options .recommended-options {
align-self: stretch;
display: flex;
gap: 1em;
}
.download-options a.recommended {
display: block;
background: var(--accent-color);
color: var(--brand-foreground-color);
border-radius: calc(infinity * 1px);
margin: 1em 0;
flex-grow: 1;
}
.download-options .other-options {
display: flex;
gap: 0.5em 1em;
justify-content: center;
flex-wrap: wrap;
}
.download-desktop .download-card:first-of-type { --accent-color: var(--brand-1); }
.download-desktop .download-card:nth-of-type(2) { --accent-color: var(--brand-2); }
.download-desktop .download-card:last-of-type { --accent-color: var(--brand-3); }
.download-server .download-card {
--accent-color: var(--foreground-color);
--brand-foreground-color: var(--background-color);
}
.download-card .quick-start {
border: 1px solid var(--muted-color);
padding: 0.5em;
border-radius: 6px;
}
.download-card .quick-start code {
text-wrap: wrap;
color: var(--muted-color);
}
.architecture-switch {
display: flex;
gap: 1em;
justify-content: center;
align-items: center;
margin: 1em 0;
}
.architecture-switch a {
display: inline-block;
background: var(--card-background-color);
padding: 0.25em 0.5em;
text-decoration: none;
text-align: center;
min-width: 3em;
color: inherit;
}
.architecture-switch .toggle-wrapper {
border-radius: calc(infinity * 1px);
overflow: hidden;
}
.architecture-switch a.active {
background-color: var(--brand-1);
color: var(--brand-foreground-color);
}