mirror of
https://github.com/sissbruecker/linkding.git
synced 2025-08-08 19:28:29 +02:00
111 lines
2.3 KiB
CSS
111 lines
2.3 KiB
CSS
:root {
|
|
--sl-nav-gap: 0.8rem;
|
|
|
|
--sl-text-xs: var(--sl-text-sm);
|
|
}
|
|
|
|
:root,
|
|
::backdrop {
|
|
/* Colors (dark mode) */
|
|
--sl-color-white: hsl(0, 0%, 97%); /* “white” */
|
|
--sl-color-gray-1: hsl(224, 20%, 94%);
|
|
--sl-color-gray-2: hsl(224, 6%, 85%);
|
|
--sl-color-gray-3: hsl(224, 6%, 70%);
|
|
--sl-color-gray-4: hsl(224, 7%, 36%);
|
|
--sl-color-gray-5: hsl(224, 10%, 23%);
|
|
--sl-color-gray-6: hsl(224, 14%, 16%);
|
|
--sl-color-black: hsl(224, 10%, 10%);
|
|
|
|
--sl-color-accent: hsl(241, 75%, 64%);
|
|
--sl-color-text-accent: hsl(241, 90%, 82%);
|
|
}
|
|
|
|
:root[data-theme='light'],
|
|
[data-theme='light'] ::backdrop {
|
|
--sl-color-accent: hsl(241, 63%, 59%);
|
|
--sl-color-text-accent: hsl(241, 63%, 55%);
|
|
}
|
|
|
|
/* Align site search */
|
|
.header .title-wrapper + div.sl-flex {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/* Site title */
|
|
.site-title img {
|
|
height: 36px;
|
|
}
|
|
|
|
/* Social icon size */
|
|
.social-icons svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
/* Index page */
|
|
[data-has-hero] header {
|
|
background: transparent;
|
|
border-bottom: solid 1px transparent;
|
|
-webkit-backdrop-filter: blur(10px);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
[data-has-hero] .page {
|
|
--hero-gradient: hsla(241, 63%, 59%, 0.2);
|
|
background: linear-gradient(205deg, var(--hero-gradient), transparent 30%);
|
|
}
|
|
|
|
[data-has-hero][data-theme="dark"] .page {
|
|
--hero-gradient: hsla(241, 63%, 59%, 0.25);
|
|
}
|
|
|
|
[data-has-hero] .hero {
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
[data-has-hero] .hero-image img {
|
|
width: 100%;
|
|
border: solid 1px var(--sl-color-gray-5);
|
|
border-radius: .4rem;
|
|
box-shadow: var(--sl-shadow-lg);
|
|
}
|
|
|
|
[data-has-hero] .hero-image.dark img {
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-has-hero][data-theme="dark"] .hero-image.light {
|
|
display: none;
|
|
}
|
|
|
|
[data-has-hero][data-theme="light"] .hero-image.dark {
|
|
display: none;
|
|
}
|
|
|
|
[data-has-hero] h2 {
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
[data-has-hero] .card-grid {
|
|
margin-top: 2rem !important;
|
|
}
|
|
|
|
@media (min-width: 50rem) {
|
|
[data-has-hero] .page {
|
|
--hero-gradient: hsla(241, 63%, 59%, 0.2);
|
|
background: linear-gradient(205deg, var(--hero-gradient), transparent 50%);
|
|
}
|
|
|
|
[data-has-hero] .hero {
|
|
padding-bottom: 4rem;
|
|
}
|
|
|
|
[data-has-hero] h2 {
|
|
margin-top: 6rem !important;
|
|
}
|
|
|
|
[data-has-hero] .card-grid {
|
|
margin-top: 3rem !important;
|
|
gap: 3rem;
|
|
}
|
|
} |