hypercross
/
ttrpg-tools
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: reformat and improve CSS structure 

- Add Tailwind source scanning for color utilities
- Implement icon masking support
- Reformat CSS for better readability and consistency
- Expand utility definitions into multi-line blocks
This commit is contained in:
hypercross 2026-06-21 14:48:36 +08:00
parent d56e8ca23d
commit 08389601ac
1 changed files with 47 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/styles.css
View File

@ -1,51 +1,63 @@
@import "tailwindcss"; @import "tailwindcss";
@plugin "@tailwindcss/typography"; @plugin "@tailwindcss/typography";
@source inline("bg-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,{100..900..100},950}");
/* icon */ /* icon */
icon, pull, pull-2{ icon,
pull,
pull-2 {
@apply inline-block; @apply inline-block;
width: 1.5em; width: 1.5em;
height: 1.28em; height: 1.28em;
vertical-align: text-bottom; vertical-align: text-bottom;
--icon-src: ''; --icon-src: "";
background-image: var(--icon-src); background-image: var(--icon-src);
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; position: relative;
}
icon.masked {
mask-image: var(--icon-src); mask-image: var(--icon-src);
mask-size: contain; mask-size: contain;
mask-position: center; mask-position: center;
mask-repeat: no-repeat; mask-repeat: no-repeat;
background-image: unset;
} }
icon.big { icon.big {
width: 2em; width: 2em;
height: 2em; height: 2em;
} }
pull { pull {
margin-right: -.5em; margin-right: -0.5em;
width: 0; width: 0;
} }
pull-2 { pull-2 {
margin-right: -1em; margin-right: -1em;
width: 0; width: 0;
} }
icon.big .icon-label, icon.big .icon-label-stroke{ icon.big .icon-label,
icon.big .icon-label-stroke {
line-height: 2; line-height: 2;
} }
.icon-label, .icon-label-stroke{ .icon-label,
.icon-label-stroke {
position: absolute; position: absolute;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
line-height: 1.28; line-height: 1.28;
left: 0; right: 0; top: 0; bottom: 0; left: 0;
right: 0;
top: 0;
bottom: 0;
} }
.icon-label { .icon-label {
color: white; color: white;
} }
.icon-label-stroke { .icon-label-stroke {
color: black; color: black;
-webkit-text-stroke: .14em black; -webkit-text-stroke: 0.14em black;
} }
/* prose */ /* prose */
@ -55,8 +67,8 @@ icon.big .icon-label, icon.big .icon-label-stroke{
code { code {
background: #0001; background: #0001;
@apply rounded; @apply rounded;
padding: .2em .4em; padding: 0.2em 0.4em;
margin: 0 .2em; margin: 0 0.2em;
&::before, &::before,
&::after { &::after {
content: none; content: none;
@ -78,8 +90,7 @@ icon.big .icon-label, icon.big .icon-label-stroke{
@apply hidden; @apply hidden;
} }
.markdown-alert-title + * .markdown-alert-title + * {
{
@apply mt-0; @apply mt-0;
} }
@ -109,9 +120,21 @@ icon.big .icon-label, icon.big .icon-label-stroke{
/* cols */ /* cols */
.cols{ @apply lg:flex lg:gap-4; } .cols {
.col{ @apply lg:flex-1; } @apply lg:flex lg:gap-4;
.col-2{ @apply lg:flex-2; } }
.col-3{ @apply lg:flex-3; } .col {
.col-4{ @apply lg:flex-4; } @apply lg:flex-1;
.col-5{ @apply lg:flex-5; } }
.col-2 {
@apply lg:flex-2;
}
.col-3 {
@apply lg:flex-3;
}
.col-4 {
@apply lg:flex-4;
}
.col-5 {
@apply lg:flex-5;
}