|
| 1 | +/* Tailwind theme + minimal Dracula UI compatibility layer */ |
| 2 | +@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap'); |
| 3 | + |
| 4 | +:root { |
| 5 | + /* Colors inspired by current palette used in style.css and dracula-ui.css */ |
| 6 | + --black: #14141b; /* page background */ |
| 7 | + --blackSecondary: #1d1e26; /* cards */ |
| 8 | + --blackTernary: #2a2c37; /* sections */ |
| 9 | + --white: #f8f8f2; |
| 10 | + |
| 11 | + --purple: #9580ff; |
| 12 | + --purpleSecondary: #bcaaff; |
| 13 | + --purple-transparent: rgba(149, 128, 255, 0.10); |
| 14 | + |
| 15 | + --green: #50fa7b; |
| 16 | + --greenSecondary: #93ffb2; |
| 17 | + --green-transparent: rgba(80, 250, 123, 0.10); |
| 18 | + |
| 19 | + --yellow: #f1fa8c; |
| 20 | + --red: #ff5555; |
| 21 | + |
| 22 | + --disabled: #8a8f98; |
| 23 | + |
| 24 | + --gradientDegree: 135deg; |
| 25 | + --yellow-pink: linear-gradient(var(--gradientDegree), var(--yellow) 0%, #ff79c6 100%); |
| 26 | + --purple-cyan: linear-gradient(var(--gradientDegree), var(--purple) 0%, #8be9fd 100%); |
| 27 | + --cyan-green: linear-gradient(var(--gradientDegree), #8be9fd 0%, var(--green) 100%); |
| 28 | + |
| 29 | + /* radius tokens used by custom style.css */ |
| 30 | + --rounded-none: 0; |
| 31 | + --rounded-sm: 0.125rem; |
| 32 | + --rounded-md: 0.375rem; |
| 33 | + --rounded-lg: 0.5rem; |
| 34 | + --rounded-xl: 0.75rem; |
| 35 | + --rounded-2xl: 1rem; |
| 36 | + --rounded-3xl: 1.5rem; |
| 37 | + --rounded-full: 9999px; |
| 38 | +} |
| 39 | + |
| 40 | +/* Base page colors to align with existing custom CSS */ |
| 41 | +body { |
| 42 | + background: var(--black); |
| 43 | + color: var(--white); |
| 44 | + font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; |
| 45 | +} |
| 46 | + |
| 47 | +/* Minimal compatibility for classes used in template/index.html */ |
| 48 | +.drac-box { box-sizing: border-box; } |
| 49 | +.drac-text { color: var(--white); } |
| 50 | +.drac-heading { color: var(--white); } |
| 51 | +.drac-text-white { color: var(--white); } |
| 52 | +.drac-text-gray { color: #8a8fa8; } |
| 53 | +.drac-text-bold { font-weight: 700; } |
| 54 | +.drac-text-sm { font-size: 0.875rem; } |
| 55 | +.drac-text-lg { font-size: 1.125rem; } |
| 56 | +.drac-text-xs { font-size: 0.75rem; } |
| 57 | +.drac-line-height { line-height: 1.5; } |
| 58 | +.drac-line-height-lg { line-height: 1.75; } |
| 59 | +.drac-heading-xl { font-size: 2.25rem; } |
| 60 | +.drac-heading-2xl { font-size: 3rem; } |
| 61 | +.drac-heading-lg { font-size: 1.5rem; } |
| 62 | + |
| 63 | +.drac-bg-black { background: var(--black); } |
| 64 | +.drac-bg-purple-cyan { background: var(--purple-cyan); } |
| 65 | +.drac-bg-cyan-green { background: var(--cyan-green); } |
| 66 | +.drac-text-purple-cyan { background-image: var(--purple-cyan); -webkit-background-clip: text; background-clip: text; color: transparent; } |
| 67 | +.drac-text-yellow-pink { background-image: var(--yellow-pink); -webkit-background-clip: text; background-clip: text; color: transparent; } |
| 68 | +.drac-text-blue { color: #8be9fd; } |
| 69 | +.drac-text-cyan-green { color: #50fa7b; } |
| 70 | +.drac-text-red { color: var(--red); } |
| 71 | + |
| 72 | +.drac-rounded-xl { border-radius: var(--rounded-xl); } |
| 73 | + |
| 74 | +.drac-mt-sm { margin-top: 1rem; } |
| 75 | +.drac-mb-sm { margin-bottom: 1rem; } |
| 76 | +.drac-mb-md { margin-bottom: 2rem; } |
| 77 | +.drac-mb-lg { margin-bottom: 4rem; } |
| 78 | +.drac-mx-sm { margin-left: 1rem; margin-right: 1rem; } |
| 79 | +.drac-mx-xs { margin-left: 0.5rem; margin-right: 0.5rem; } |
| 80 | +.drac-p-md { padding: 2rem; } |
| 81 | +.drac-px-sm { padding-left: 1rem; padding-right: 1rem; } |
| 82 | +.drac-pb-lg { padding-bottom: 4rem; } |
| 83 | + |
| 84 | +/* Buttons */ |
| 85 | +.drac-btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; border-radius: 0.5rem; padding: 0.5rem 0.75rem; text-decoration: none; } |
| 86 | +.drac-btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; } |
| 87 | +.drac-btn-lg { padding: 0.75rem 1rem; font-size: 1.125rem; } |
| 88 | +.drac-text-white--hover:hover { color: var(--white); } |
| 89 | +.drac-text-purple--hover:hover { color: var(--purple); } |
| 90 | + |
| 91 | +/* Form controls spacing mimic */ |
| 92 | +.drac-mr-sm { margin-right: 1rem; } |
| 93 | +.drac-align-center { align-items: center; } |
| 94 | +.drac-flex { display: flex; } |
| 95 | + |
| 96 | +/* Anchors */ |
| 97 | +.drac-anchor { text-decoration: none; } |
| 98 | + |
| 99 | +/* Tags/pills */ |
| 100 | +.drac-bg-purple-cyan { background: var(--purple-cyan); } |
| 101 | +.drac-text-black { color: #111827; } |
| 102 | +.drac-px-xs { padding-left: 0.5rem; padding-right: 0.5rem; } |
| 103 | +.drac-rounded { border-radius: 0.25rem; } |
| 104 | + |
| 105 | +/* Containers/cards used in custom style.css */ |
| 106 | +.Highlights_cardBackground__2Fr7t { background: var(--purple-transparent); } |
| 107 | +.Highlights_cardDetailsContainer__8lpMI { background: #22212c; } |
| 108 | +.Highlights_card__34b3J { background: var(--blackSecondary); } |
| 109 | +.Authors_content__3xCx2 { background: var(--blackSecondary); } |
| 110 | +.Footer_footer__108BV { background: #22212c; } |
| 111 | + |
0 commit comments