body {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 18px;
}
.sidebar {
font-size: 15px;
}
.mobile-header {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 25;
padding: 1rem;
align-items: center;
gap: 1rem;
border-bottom: 1px solid;
}
.mobile-menu-btn {
background: none;
border: none;
padding: 0;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
}
.mobile-menu-text {
display: block;
}
.mobile-title {
font-weight: bold;
font-size: 1.125rem;
}
.mobile-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 30;
}
.mobile-overlay.active {
display: block;
}
@media (max-width: 768px) {
body {
font-size: 16px;
}
.mobile-header {
display: flex;
}
.sidebar {
position: fixed;
left: 0;
top: 0;
height: 100vh;
z-index: 40;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
}
.sidebar.mobile-open {
transform: translateX(0);
}
main {
padding-top: 3.5rem;
}
#ruleDetail {
padding: 2rem 1.5rem !important;
}
.prose-custom pre,
.code-block {
overflow-x: auto;
}
}
.rule-title {
word-break: break-word;
overflow-wrap: break-word;
}
.config-grid {
display: grid;
gap: 1rem;
}
.config-option {
padding: 1.25rem;
border-radius: 0.5rem;
border: 1px solid;
}
.config-option-header {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.config-option-name {
font-weight: 600;
font-size: 1rem;
}
.config-option-type {
font-size: 0.875rem;
padding: 0.125rem 0.5rem;
border-radius: 0.25rem;
font-weight: 500;
}
.config-option-desc {
margin-bottom: 0.75rem;
line-height: 1.5;
}
.config-option-default {
font-size: 0.875rem;
}
.config-option-default code {
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
font-size: 0.875rem;
}
.config-example {
border: 1px solid;
border-radius: 0.5rem;
overflow: hidden;
}
.config-example-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
border-bottom: 1px solid;
}
.config-example-title {
font-weight: 600;
font-size: 0.875rem;
}
.config-example-file {
font-family: ui-monospace, monospace;
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-weight: 500;
}
.config-example-code {
padding: 1rem;
margin: 0;
border-radius: 0;
border: none;
font-size: 0.875rem;
overflow-x: auto;
}
@media (prefers-color-scheme: light) {
.config-option {
background-color: #f9fafb;
border-color: #e5e7eb;
}
.config-option-name {
color: #1f2937;
}
.config-option-type {
background-color: #dcfce7;
color: #15803d;
}
.config-option-desc {
color: #374151;
}
.config-option-default {
color: #6b7280;
}
.config-option-default code {
background-color: #f3f4f6;
color: #1f2937;
}
.config-example {
background-color: #ffffff;
border-color: #e5e7eb;
}
.config-example-header {
background-color: #f9fafb;
border-color: #e5e7eb;
}
.config-example-title {
color: #374151;
}
.config-example-file {
background-color: #e0e7ff;
color: #3730a3;
}
.config-example-code {
background-color: #f9fafb;
color: #1f2937;
}
}
@media (prefers-color-scheme: dark) {
.config-option {
background-color: #111827;
border-color: #1f2937;
}
.config-option-name {
color: #f3f4f6;
}
.config-option-type {
background-color: rgba(34, 197, 94, 0.15);
color: #86efac;
}
.config-option-desc {
color: #d1d5db;
}
.config-option-default {
color: #9ca3af;
}
.config-option-default code {
background-color: #1f2937;
color: #e5e7eb;
}
.config-example {
background-color: #030712;
border-color: #1f2937;
}
.config-example-header {
background-color: #111827;
border-color: #1f2937;
}
.config-example-title {
color: #d1d5db;
}
.config-example-file {
background-color: rgba(79, 70, 229, 0.2);
color: #a5b4fc;
}
.config-example-code {
background-color: #0f172a;
color: #e5e7eb;
}
}
@media (prefers-color-scheme: light) {
body {
background-color: #ffffff;
color: #1f2937;
}
.sidebar {
background-color: #f9fafb;
border-color: #d1d5db;
}
.search-input,
.filter-select {
background-color: #ffffff;
border-color: #d1d5db;
color: #1f2937;
}
.rule-item {
border-color: #e5e7eb;
color: #111827;
}
.rule-item:hover {
background-color: #e5e7eb;
}
.rule-item.active {
background-color: #dbeafe;
border-left: 3px solid #3b82f6;
}
.rule-item-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rule-item-category {
color: #6b7280;
}
.badge {
background-color: #dbeafe;
color: #1e40af;
border-color: #93c5fd;
}
.badge-green {
background-color: #d1fae5;
color: #065f46;
border-color: #6ee7b7;
}
.badge-orange {
background-color: #fed7aa;
color: #9a3412;
border-color: #fb923c;
}
.badge-purple {
background-color: #e9d5ff;
color: #6b21a8;
border-color: #c084fc;
}
.badge-yellow {
background-color: #fef9c3;
color: #854d0e;
border-color: #fde047;
}
.badge-meson {
background-color: #ede8f7;
color: #39207c;
border-color: #a98fd4;
}
.opt-in-notice, .meson-notice {
padding: 0.75rem 1rem;
border-radius: 0 0.25rem 0.25rem 0;
font-size: 0.9rem;
}
.opt-in-notice {
border-left: 3px solid #fbbf24;
background-color: #fffbeb;
color: #78350f;
}
.opt-in-notice code {
background-color: #fef3c7;
padding: 0.1rem 0.3rem;
border-radius: 0.2rem;
font-size: 0.85rem;
}
.meson-notice {
border-left: 3px solid #39207c;
background-color: #f0ebfa;
color: #2d1a60;
}
.rule-title {
color: #4338ca;
}
.detail-text {
color: #1f2937;
}
.detail-label {
color: #4b5563;
}
.code-block {
background-color: #f3f4f6;
border-color: #d1d5db;
color: #1f2937;
}
.divider {
border-color: #d1d5db;
}
.github-icon {
color: #374151;
}
.mobile-header {
background-color: #ffffff;
border-color: #e5e7eb;
}
.mobile-menu-btn,
.mobile-title {
color: #1f2937;
}
.mobile-overlay.active {
background-color: rgba(0, 0, 0, 0.5);
}
}
@media (prefers-color-scheme: dark) {
body {
background-color: #030712;
color: #f9fafb;
}
.sidebar {
background-color: #111827;
border-color: #1f2937;
}
.search-input,
.filter-select {
background-color: #030712;
border-color: #1f2937;
color: #f9fafb;
}
.rule-item {
border-color: #1f2937;
}
.rule-item:hover {
background-color: #1f2937;
}
.rule-item.active {
background-color: #1e3a8a;
border-left: 3px solid #60a5fa;
}
.rule-item-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rule-item-category {
color: #9ca3af;
}
.badge {
background-color: rgba(79, 70, 229, 0.1);
color: #a5b4fc;
border-color: rgba(79, 70, 229, 0.2);
}
.badge-green {
background-color: rgba(34, 197, 94, 0.1);
color: #86efac;
border-color: rgba(34, 197, 94, 0.2);
}
.badge-orange {
background-color: rgba(249, 115, 22, 0.1);
color: #fdba74;
border-color: rgba(249, 115, 22, 0.2);
}
.badge-purple {
background-color: rgba(168, 85, 247, 0.1);
color: #c084fc;
border-color: rgba(168, 85, 247, 0.2);
}
.badge-yellow {
background-color: rgba(234, 179, 8, 0.1);
color: #fde047;
border-color: rgba(234, 179, 8, 0.2);
}
.badge-meson {
background-color: rgba(57, 32, 124, 0.15);
color: #c4a8f0;
border-color: rgba(57, 32, 124, 0.35);
}
.opt-in-notice, .meson-notice {
padding: 0.75rem 1rem;
border-radius: 0 0.25rem 0.25rem 0;
font-size: 0.9rem;
}
.opt-in-notice {
border-left: 3px solid #ca8a04;
background-color: rgba(234, 179, 8, 0.08);
color: #fde68a;
}
.opt-in-notice code {
background-color: rgba(234, 179, 8, 0.15);
padding: 0.1rem 0.3rem;
border-radius: 0.2rem;
font-size: 0.85rem;
}
.meson-notice {
border-left: 3px solid #7c50d4;
background-color: rgba(57, 32, 124, 0.12);
color: #c4a8f0;
}
.rule-title {
color: #818cf8;
}
.detail-text {
color: #d1d5db;
}
.detail-label {
color: #9ca3af;
}
.code-block {
background-color: #111827;
border-color: #1f2937;
}
.divider {
border-color: #1f2937;
}
.github-icon {
color: #d1d5db;
}
.mobile-header {
background-color: #111827;
border-color: #1f2937;
}
.mobile-menu-btn,
.mobile-title {
color: #f9fafb;
}
.mobile-overlay.active {
background-color: rgba(0, 0, 0, 0.7);
}
}
.prose-custom h2 {
font-size: 1.25rem;
font-weight: 600;
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
.prose-custom h3 {
font-size: 1.1rem;
font-weight: 600;
margin-top: 1.25rem;
margin-bottom: 0.5rem;
}
.prose-custom p {
margin-bottom: 1rem;
line-height: 1.6;
}
.prose-custom ul {
list-style: disc;
margin-left: 1.5rem;
margin-bottom: 1rem;
}
.prose-custom li {
margin-bottom: 0.25rem;
}
.prose-custom strong {
font-weight: 600;
}
.prose-custom code {
padding: 0.125rem 0.25rem;
border-radius: 0.25rem;
font-size: 0.875em;
}
.prose-custom pre {
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
border: 1px solid;
}
.prose-custom pre code {
padding: 0;
background: none;
border: none;
}
@media (prefers-color-scheme: light) {
.prose-custom h2,
.prose-custom h3 {
color: #1f2937;
}
.prose-custom p,
.prose-custom li {
color: #374151;
}
.prose-custom code {
background-color: #f3f4f6;
color: #1f2937;
}
.prose-custom pre {
background-color: #f9fafb;
border-color: #d1d5db;
}
.prose-custom pre code {
color: #1f2937;
}
}
@media (prefers-color-scheme: dark) {
.prose-custom h2,
.prose-custom h3 {
color: #f3f4f6;
}
.prose-custom p,
.prose-custom li {
color: #d1d5db;
}
.prose-custom code {
background-color: #1f2937;
color: #e5e7eb;
}
.prose-custom pre {
background-color: #0f172a;
border-color: #1f2937;
}
.prose-custom pre code {
color: #e5e7eb;
}
}