mirror of
https://git.nolog.cz/NoLog.cz/headline.git
synced 2025-02-07 14:12:45 +01:00
476 lines
No EOL
13 KiB
CSS
476 lines
No EOL
13 KiB
CSS
/* layer: preflights */
|
|
*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);}
|
|
|
|
/* This file is dynamically generated. Do not edit this file. */
|
|
|
|
:root {
|
|
--color-gray-1: hsl(0, 0%, 99.0%);
|
|
--color-gray-2: hsl(0, 0%, 97.5%);
|
|
--color-gray-3: hsl(0, 0%, 94.6%);
|
|
--color-gray-4: hsl(0, 0%, 92.0%);
|
|
--color-gray-5: hsl(0, 0%, 89.5%);
|
|
--color-gray-6: hsl(0, 0%, 86.8%);
|
|
--color-gray-7: hsl(0, 0%, 83.0%);
|
|
--color-gray-8: hsl(0, 0%, 73.2%);
|
|
--color-gray-9: hsl(0, 0%, 55.2%);
|
|
--color-gray-10: hsl(0, 0%, 50.3%);
|
|
--color-gray-11: hsl(0, 0%, 39.3%);
|
|
--color-gray-12: hsl(0, 0%, 12.5%);
|
|
|
|
--color-accent-1: hsl(225, 60.0%, 99.4%);
|
|
--color-accent-2: hsl(223, 100%, 98.6%);
|
|
--color-accent-3: hsl(223, 98.4%, 97.1%);
|
|
--color-accent-4: hsl(223, 92.9%, 95.0%);
|
|
--color-accent-5: hsl(224, 87.1%, 92.0%);
|
|
--color-accent-6: hsl(224, 81.9%, 87.8%);
|
|
--color-accent-7: hsl(225, 77.4%, 82.1%);
|
|
--color-accent-8: hsl(226, 75.4%, 74.5%);
|
|
--color-accent-9: hsl(226, 70.0%, 55.5%);
|
|
--color-accent-10: hsl(226, 58.6%, 51.3%);
|
|
--color-accent-11: hsl(226, 55.0%, 45.0%);
|
|
--color-accent-12: hsl(226, 50.0%, 24.0%);
|
|
|
|
--color-ins-1: hsl(136, 50.0%, 98.9%);
|
|
--color-ins-2: hsl(138, 62.5%, 96.9%);
|
|
--color-ins-3: hsl(139, 55.2%, 94.5%);
|
|
--color-ins-4: hsl(140, 48.7%, 91.0%);
|
|
--color-ins-5: hsl(141, 43.7%, 86.0%);
|
|
--color-ins-6: hsl(143, 40.3%, 79.0%);
|
|
--color-ins-7: hsl(146, 38.5%, 69.0%);
|
|
--color-ins-8: hsl(151, 40.2%, 54.1%);
|
|
--color-ins-9: hsl(151, 55.0%, 41.5%);
|
|
--color-ins-10: hsl(152, 57.5%, 37.6%);
|
|
--color-ins-11: hsl(153, 67.0%, 28.5%);
|
|
--color-ins-12: hsl(155, 40.0%, 16.5%);
|
|
|
|
--color-del-1: hsl(359, 100%, 99.4%);
|
|
--color-del-2: hsl(0, 100%, 98.4%);
|
|
--color-del-3: hsl(360, 100%, 96.8%);
|
|
--color-del-4: hsl(360, 97.9%, 94.8%);
|
|
--color-del-5: hsl(360, 90.2%, 91.9%);
|
|
--color-del-6: hsl(360, 81.7%, 87.8%);
|
|
--color-del-7: hsl(359, 74.2%, 81.7%);
|
|
--color-del-8: hsl(359, 69.5%, 74.3%);
|
|
--color-del-9: hsl(358, 75.0%, 59.0%);
|
|
--color-del-10: hsl(358, 67.4%, 54.6%);
|
|
--color-del-11: hsl(358, 65.0%, 47.0%);
|
|
--color-del-12: hsl(350, 63.0%, 24.0%);
|
|
}
|
|
|
|
.dark-theme {
|
|
--color-gray-1: hsl(0, 0%, 9.5%);
|
|
--color-gray-2: hsl(0, 0%, 10.5%);
|
|
--color-gray-3: hsl(0, 0%, 15.8%);
|
|
--color-gray-4: hsl(0, 0%, 18.9%);
|
|
--color-gray-5: hsl(0, 0%, 21.7%);
|
|
--color-gray-6: hsl(0, 0%, 24.7%);
|
|
--color-gray-7: hsl(0, 0%, 29.1%);
|
|
--color-gray-8: hsl(0, 0%, 37.5%);
|
|
--color-gray-9: hsl(0, 0%, 43.0%);
|
|
--color-gray-10: hsl(0, 0%, 50.7%);
|
|
--color-gray-11: hsl(0, 0%, 69.5%);
|
|
--color-gray-12: hsl(0, 0%, 93.5%);
|
|
|
|
--color-accent-1: hsl(229, 24.0%, 10.0%);
|
|
--color-accent-2: hsl(230, 36.4%, 12.9%);
|
|
--color-accent-3: hsl(228, 42.7%, 18.1%);
|
|
--color-accent-4: hsl(227, 45.6%, 21.4%);
|
|
--color-accent-5: hsl(227, 47.8%, 24.4%);
|
|
--color-accent-6: hsl(226, 50.3%, 28.8%);
|
|
--color-accent-7: hsl(226, 53.3%, 36.6%);
|
|
--color-accent-8: hsl(226, 60.0%, 52.0%);
|
|
--color-accent-9: hsl(226, 70.0%, 55.5%);
|
|
--color-accent-10: hsl(230, 73.9%, 63.3%);
|
|
--color-accent-11: hsl(235, 100%, 80.0%);
|
|
--color-accent-12: hsl(235, 93.0%, 93.0%);
|
|
|
|
--color-ins-1: hsl(146, 30.0%, 7.4%);
|
|
--color-ins-2: hsl(154, 31.8%, 8.6%);
|
|
--color-ins-3: hsl(154, 37.6%, 11.5%);
|
|
--color-ins-4: hsl(154, 41.0%, 13.6%);
|
|
--color-ins-5: hsl(154, 43.7%, 15.7%);
|
|
--color-ins-6: hsl(154, 46.7%, 18.7%);
|
|
--color-ins-7: hsl(153, 50.3%, 24.4%);
|
|
--color-ins-8: hsl(151, 52.2%, 36.1%);
|
|
--color-ins-9: hsl(151, 55.0%, 41.5%);
|
|
--color-ins-10: hsl(151, 55.2%, 46.7%);
|
|
--color-ins-11: hsl(151, 65.0%, 54.0%);
|
|
--color-ins-12: hsl(144, 70.0%, 82.0%);
|
|
|
|
--color-del-1: hsl(353, 23.0%, 9.8%);
|
|
--color-del-2: hsl(354, 30.2%, 12.4%);
|
|
--color-del-3: hsl(353, 40.8%, 16.4%);
|
|
--color-del-4: hsl(353, 46.3%, 19.2%);
|
|
--color-del-5: hsl(353, 51.2%, 22.1%);
|
|
--color-del-6: hsl(353, 57.3%, 26.2%);
|
|
--color-del-7: hsl(354, 65.7%, 33.2%);
|
|
--color-del-8: hsl(358, 75.0%, 47.1%);
|
|
--color-del-9: hsl(358, 75.0%, 59.0%);
|
|
--color-del-10: hsl(359, 84.8%, 67.6%);
|
|
--color-del-11: hsl(358, 100%, 76.0%);
|
|
--color-del-12: hsl(350, 100%, 91.0%);
|
|
}
|
|
|
|
html {
|
|
box-sizing: border-box;
|
|
font-family: system-ui, sans-serif;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
line-height: 1.5;
|
|
background-color: var(--color-gray-2);
|
|
color: var(--color-gray-12);
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: inherit;
|
|
border-width: 0;
|
|
border-style: solid;
|
|
border-color: var(--color-gray-6);
|
|
}
|
|
|
|
:not(dialog) {
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
line-height: 1.5;
|
|
}
|
|
|
|
img,
|
|
picture,
|
|
video,
|
|
canvas,
|
|
svg {
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
input,
|
|
button,
|
|
textarea,
|
|
select {
|
|
font: inherit;
|
|
}
|
|
|
|
p,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
overflow-wrap: break-word;
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
}
|
|
|
|
table,
|
|
th,
|
|
tr,
|
|
td {
|
|
text-align: inherit;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
a {
|
|
color: var(--color-accent-10);
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
transition: color 120ms;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--color-accent-12);
|
|
}
|
|
|
|
ins,
|
|
del {
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
ins {
|
|
background-color: var(--color-ins-4);
|
|
color: var(--color-ins-12);
|
|
border-color: var(--color-ins-6);
|
|
}
|
|
|
|
del {
|
|
background-color: var(--color-del-4);
|
|
color: var(--color-del-12);
|
|
border-color: var(--color-del-6);
|
|
}
|
|
|
|
.diff-before ins {
|
|
display: none;
|
|
}
|
|
|
|
.diff-after del {
|
|
display: none;
|
|
}
|
|
|
|
/* Forms */
|
|
|
|
.text-input {
|
|
border-radius: 0.25rem;
|
|
border: 1px solid var(--color-gray-7);
|
|
padding: 0.375rem 0.75rem;
|
|
transition: border-color 120ms, box-shadow 120ms;
|
|
background-color: var(--color-gray-1);
|
|
color: var(--color-gray-11);
|
|
}
|
|
|
|
.text-input:focus {
|
|
border-color: var(--color-accent-9);
|
|
box-shadow: 0 0 0 2px var(--color-accent-9);
|
|
outline: none;
|
|
}
|
|
|
|
.checkbox {
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--color-gray-11);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.checkbox input {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.button,
|
|
.button-outline {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
gap: 0.5em;
|
|
border-radius: 0.25rem;
|
|
transition: background-color 120ms;
|
|
}
|
|
|
|
.button {
|
|
border: 1px solid var(--color-gray-7);
|
|
background: var(--color-gray-3);
|
|
color: var(--color-gray-11);
|
|
}
|
|
|
|
.button:not(:disabled):hover {
|
|
background: var(--color-gray-5);
|
|
color: var(--color-gray-12);
|
|
}
|
|
|
|
.button-outline {
|
|
border: 1px solid var(--color-gray-6);
|
|
background: var(--color-gray-1);
|
|
color: var(--color-gray-11);
|
|
}
|
|
|
|
.button-outline:not(:disabled):hover {
|
|
background: var(--color-gray-3);
|
|
color: var(--color-gray-12);
|
|
}
|
|
|
|
.button-md {
|
|
font-size: 0.9em;
|
|
line-height: 1.5rem;
|
|
font-weight: 500;
|
|
padding: 0.375rem 0.75rem;
|
|
}
|
|
|
|
button:not(:disabled) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Pagination */
|
|
|
|
.pagination {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
display: flex;
|
|
}
|
|
|
|
.page-link {
|
|
display: block;
|
|
padding: 0.5em 1em;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.page-item {
|
|
border: 1px solid var(--color-gray-7);
|
|
background: var(--color-gray-3);
|
|
transition: background-color 120ms, color 120ms;
|
|
color: var(--color-gray-11);
|
|
font-weight: 500;
|
|
font-size: 0.85em;
|
|
line-height: 1.5rem;
|
|
}
|
|
|
|
.page-item a {
|
|
color: inherit;
|
|
}
|
|
|
|
.page-item:not(.active):hover {
|
|
background: var(--color-gray-4);
|
|
color: var(--color-gray-12);
|
|
}
|
|
|
|
.page-item:first-of-type {
|
|
border-radius: 0.25rem 0 0 0.25rem;
|
|
}
|
|
|
|
.page-item:last-of-type {
|
|
border-radius: 0 0.25rem 0.25rem 0;
|
|
}
|
|
|
|
.page-item:not(:last-of-type) {
|
|
border-right-width: 0px;
|
|
}
|
|
|
|
.page-item.active {
|
|
background-color: var(--color-accent-9);
|
|
color: white;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.prose p:not(:last-of-type) {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Misc components */
|
|
|
|
.card {
|
|
border: 1px solid var(--color-gray-6);
|
|
border-radius: 0.5rem;
|
|
background-color: var(--color-gray-1);
|
|
box-shadow: 0 2px 0 var(--color-gray-3);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dark-theme .card {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.table-styled td,
|
|
.table-styled th {
|
|
padding: 0.5rem 0.5rem;
|
|
}
|
|
|
|
.table-styled tr:not(:last-child),
|
|
.table-styled thead tr {
|
|
border-bottom-width: 1px;
|
|
}
|
|
|
|
[hx-swap-oob] {
|
|
display: none;
|
|
}
|
|
|
|
.dialog {
|
|
border-radius: 0.5rem;
|
|
border: 1px solid var(--color-gray-6);
|
|
box-shadow: var(--un-shadow-inset) 0 1px 3px 0 rgba(0,0,0,0.1),var(--un-shadow-inset) 0 1px 2px -1px rgba(0,0,0,0.1);
|
|
background-color: var(--color-gray-2);
|
|
color: var(--color-gray-12);
|
|
}
|
|
|
|
.dialog::backdrop {
|
|
background-color: hsl(0 0% 90% / 80%);
|
|
}
|
|
|
|
.dark-theme .dialog::backdrop {
|
|
background-color: hsl(0 0% 10% / 90%);
|
|
}
|
|
|
|
/* layer: shortcuts */
|
|
.container{padding-left:1rem;padding-right:1rem;margin-left:auto;margin-right:auto;max-width:1200px;}
|
|
.action-link{font-size:0.875rem;line-height:1.25rem;font-weight:500;color:var(--color-gray-11);display:inline-flex;gap:0.375rem;align-items:center;}
|
|
.text-caption{font-size:0.875rem;line-height:1.25rem;font-weight:500;color:var(--color-gray-11);}
|
|
.text-muted{color:var(--color-gray-11);}
|
|
.action-link:hover{color:var(--color-accent-9);}
|
|
/* layer: default */
|
|
.p-0{padding:0;}
|
|
.px-2{padding-left:0.5rem;padding-right:0.5rem;}
|
|
.px-4{padding-left:1rem;padding-right:1rem;}
|
|
.px-5{padding-left:1.25rem;padding-right:1.25rem;}
|
|
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem;}
|
|
.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
|
|
.py-4{padding-top:1rem;padding-bottom:1rem;}
|
|
.py-8{padding-top:2rem;padding-bottom:2rem;}
|
|
.pr-2{padding-right:0.5rem;}
|
|
.mx-2{margin-left:0.5rem;margin-right:0.5rem;}
|
|
.my-6{margin-top:1.5rem;margin-bottom:1.5rem;}
|
|
.mb-2{margin-bottom:0.5rem;}
|
|
.mb-3{margin-bottom:0.75rem;}
|
|
.mb-4{margin-bottom:1rem;}
|
|
.mb-6{margin-bottom:1.5rem;}
|
|
.mb-8{margin-bottom:2rem;}
|
|
.mb-auto{margin-bottom:auto;}
|
|
.ml-2{margin-left:0.5rem;}
|
|
.ml-auto{margin-left:auto;}
|
|
.mr-2{margin-right:0.5rem;}
|
|
.mt-12{margin-top:3rem;}
|
|
.mt-3{margin-top:0.75rem;}
|
|
.block{display:block;}
|
|
.display-none,
|
|
.hidden{display:none;}
|
|
.bg-gray-1{background-color:var(--color-gray-1);}
|
|
.hover\:bg-gray-3:hover{background-color:var(--color-gray-3);}
|
|
.fill-current{fill:currentColor;}
|
|
.border-b{border-bottom-width:1px;}
|
|
.rounded{border-radius:0.25rem;}
|
|
.text-2xl{font-size:1.5rem;line-height:2rem;}
|
|
.text-4xl{font-size:2.25rem;line-height:2.5rem;}
|
|
.text-lg{font-size:1.125rem;line-height:1.75rem;}
|
|
.text-sm{font-size:0.875rem;line-height:1.25rem;}
|
|
.text-xl{font-size:1.25rem;line-height:1.75rem;}
|
|
.text-xs{font-size:0.75rem;line-height:1rem;}
|
|
.font-bold{font-weight:700;}
|
|
.font-medium{font-weight:500;}
|
|
.text-gray-6{color:var(--color-gray-6);}
|
|
.text-gray-8{color:var(--color-gray-8);}
|
|
.hover\:text-gray-11:hover{color:var(--color-gray-11);}
|
|
.text-inherit{color:inherit;}
|
|
.flex{display:flex;}
|
|
.shrink-0{flex-shrink:0;}
|
|
.flex-col{flex-direction:column;}
|
|
.flex-wrap{flex-wrap:wrap;}
|
|
.gap-2{gap:0.5rem;}
|
|
.gap-3{gap:0.75rem;}
|
|
.gap-x-2{column-gap:0.5rem;}
|
|
.gap-x-4{column-gap:1rem;}
|
|
.gap-x-8{column-gap:2rem;}
|
|
.gap-y-2{row-gap:0.5rem;}
|
|
.sticky{position:sticky;}
|
|
.static{position:static;}
|
|
.max-w-20rem{max-width:20rem;}
|
|
.max-w-800px{max-width:800px;}
|
|
.w-3{width:0.75rem;}
|
|
.w-4{width:1rem;}
|
|
.w-5{width:1.25rem;}
|
|
.w-full{width:100%;}
|
|
.overflow-x-auto{overflow-x:auto;}
|
|
.justify-between{justify-content:space-between;}
|
|
.items-start{align-items:flex-start;}
|
|
.items-center{align-items:center;}
|
|
.top-0{top:0;}
|
|
.z-10{z-index:10;}
|
|
.transition-color{transition-property:color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
|
|
.columns-2{columns:2;}
|
|
@media (min-width: 640px){
|
|
.sm\:hidden{display:none;}
|
|
.sm\:flex{display:flex;}
|
|
}
|
|
@media (min-width: 768px){
|
|
.md\:hidden{display:none;}
|
|
.md\:display-table{display:table;}
|
|
} |