🎨 Enhance syntax highlighting styles with !important for consistent appearance
This commit is contained in:
@@ -615,11 +615,11 @@ onMounted(async () => {
|
|||||||
padding: 0.25rem 0.5rem;
|
padding: 0.25rem 0.5rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
min-height: 20px;
|
min-height: 20px;
|
||||||
background: #ffffff;
|
background: #ffffff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-viewer.dark-mode .line {
|
.content-viewer.dark-mode .line {
|
||||||
background: #1e1e1e;
|
background: #1e1e1e !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
@@ -629,28 +629,28 @@ onMounted(async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.line:hover {
|
.line:hover {
|
||||||
background: rgba(102, 126, 234, 0.08);
|
background: rgba(102, 126, 234, 0.08) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-viewer.dark-mode .line:hover {
|
.content-viewer.dark-mode .line:hover {
|
||||||
background: rgba(102, 126, 234, 0.15);
|
background: rgba(102, 126, 234, 0.15) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line.selected {
|
.line.selected {
|
||||||
background: rgba(102, 126, 234, 0.15);
|
background: rgba(102, 126, 234, 0.15) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-viewer.dark-mode .line.selected {
|
.content-viewer.dark-mode .line.selected {
|
||||||
background: rgba(102, 126, 234, 0.25);
|
background: rgba(102, 126, 234, 0.25) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line.highlight-match {
|
.line.highlight-match {
|
||||||
background: rgba(255, 235, 59, 0.3);
|
background: rgba(255, 235, 59, 0.3) !important;
|
||||||
border-left: 3px solid #ffc107;
|
border-left: 3px solid #ffc107;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-viewer.dark-mode .line.highlight-match {
|
.content-viewer.dark-mode .line.highlight-match {
|
||||||
background: rgba(255, 235, 59, 0.15);
|
background: rgba(255, 235, 59, 0.15) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line.current-result {
|
.line.current-result {
|
||||||
@@ -670,6 +670,7 @@ onMounted(async () => {
|
|||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-viewer.dark-mode .line-number {
|
.content-viewer.dark-mode .line-number {
|
||||||
@@ -681,78 +682,79 @@ onMounted(async () => {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
background: transparent;
|
background: transparent !important;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line pre code {
|
.line pre code {
|
||||||
background: transparent;
|
background: transparent !important;
|
||||||
color: inherit;
|
color: inherit !important;
|
||||||
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Light mode syntax highlighting - high contrast colors */
|
/* Light mode syntax highlighting - high contrast colors */
|
||||||
.content-viewer:not(.dark-mode) .line pre code {
|
.content-viewer:not(.dark-mode) .line pre code {
|
||||||
background-color: transparent;
|
background-color: transparent !important;
|
||||||
color: #24292e;
|
color: #24292e !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-viewer:not(.dark-mode) .hljs {
|
.content-viewer:not(.dark-mode) .hljs {
|
||||||
background: #ffffff;
|
background: transparent !important;
|
||||||
color: #24292e;
|
color: #24292e !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-viewer:not(.dark-mode) .hljs-attr,
|
.content-viewer:not(.dark-mode) .hljs-attr,
|
||||||
.content-viewer:not(.dark-mode) .hljs-attribute {
|
.content-viewer:not(.dark-mode) .hljs-attribute {
|
||||||
color: #6f42c1;
|
color: #6f42c1 !important;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-viewer:not(.dark-mode) .hljs-string {
|
.content-viewer:not(.dark-mode) .hljs-string {
|
||||||
color: #032f62;
|
color: #032f62 !important;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-viewer:not(.dark-mode) .hljs-number {
|
.content-viewer:not(.dark-mode) .hljs-number {
|
||||||
color: #005a9c;
|
color: #005a9c !important;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-viewer:not(.dark-mode) .hljs-literal {
|
.content-viewer:not(.dark-mode) .hljs-literal {
|
||||||
color: #d73a49;
|
color: #d73a49 !important;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-viewer:not(.dark-mode) .hljs-name {
|
.content-viewer:not(.dark-mode) .hljs-name {
|
||||||
color: #24292e;
|
color: #24292e !important;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Dark mode syntax highlighting */
|
/* Dark mode syntax highlighting */
|
||||||
.content-viewer.dark-mode .line pre code {
|
.content-viewer.dark-mode .line pre code {
|
||||||
background-color: transparent;
|
background-color: transparent !important;
|
||||||
color: #e1e4e8;
|
color: #e1e4e8 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-viewer.dark-mode .hljs {
|
.content-viewer.dark-mode .hljs {
|
||||||
background: #1e1e1e;
|
background: transparent !important;
|
||||||
color: #e1e4e8;
|
color: #e1e4e8 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-viewer.dark-mode .hljs-attr,
|
.content-viewer.dark-mode .hljs-attr,
|
||||||
.content-viewer.dark-mode .hljs-attribute {
|
.content-viewer.dark-mode .hljs-attribute {
|
||||||
color: #79b8ff;
|
color: #79b8ff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-viewer.dark-mode .hljs-string {
|
.content-viewer.dark-mode .hljs-string {
|
||||||
color: #85e89d;
|
color: #85e89d !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-viewer.dark-mode .hljs-number {
|
.content-viewer.dark-mode .hljs-number {
|
||||||
color: #79b8ff;
|
color: #79b8ff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-viewer.dark-mode .hljs-literal {
|
.content-viewer.dark-mode .hljs-literal {
|
||||||
color: #f97583;
|
color: #f97583 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line-wrap .line pre {
|
.line-wrap .line pre {
|
||||||
|
|||||||
Reference in New Issue
Block a user