ttrpg-tools/src/styles.css

88 lines
1.5 KiB
CSS

@import "tailwindcss";
@plugin "@tailwindcss/typography";
/* icon */
icon, pull{
@apply inline-block;
width: 2em;
height: 2em;
vertical-align: text-bottom;
--icon-src: '';
background-image: var(--icon-src);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
pull{
margin-right: -.5em;
width: 0;
}
/* prose */
@utility prose {
@apply prose-h2:first:mt-0 prose-h3:first:mt-0 prose-h4:first:mt-0 prose-h5:first:mt-0;
code{
background: #0001;
@apply rounded;
padding: .2em .4em;
margin: 0 .2em;
&::before,
&::after {
content: none;
}
}
blockquote {
p {
&:first-of-type::before,
&:last-of-type::after {
content: none;
}
}
}
}
/*alert*/
.markdown-alert-title{
@apply hidden;
}
.markdown-alert-title + *
{
@apply mt-0;
}
.markdown-alert {
@apply px-4 pt-4 rounded mb-4 border;
}
.markdown-alert-note {
@apply bg-blue-50 border-blue-500;
}
.markdown-alert-tip {
@apply bg-green-50 border-green-500;
}
.markdown-alert-important {
@apply bg-red-50 border-red-500;
}
.markdown-alert-warning {
@apply bg-yellow-50 border-yellow-500;
}
.markdown-alert-caution {
@apply bg-orange-50 border-orange-500;
}
/* cols */
.cols{ @apply lg:flex lg:gap-4; }
.col{ @apply lg:flex-1; }
.col-2{ @apply lg:flex-2; }
.col-3{ @apply lg:flex-3; }
.col-4{ @apply lg:flex-4; }
.col-5{ @apply lg:flex-5; }