159 lines
3.9 KiB
SCSS
159 lines
3.9 KiB
SCSS
// Define base colors and fonts for light and dark themes
|
|
:root {
|
|
--code-font: 'Courier New', monospace;
|
|
--bg-primary: var(--bg-1);
|
|
--text-color: var(--text-0); // Color of the code text
|
|
--label-color: #f0f0f0; // Text color of the label
|
|
|
|
--hightlight-color: #f0f0f0;
|
|
}
|
|
|
|
:root.dark {
|
|
--hightlight-color: #204e8a;
|
|
}
|
|
|
|
|
|
// Define language colors map
|
|
$language-colors: (
|
|
"js": (#f7df1e, "JavaScript"),
|
|
"yaml": (#f71e6a, "YAML"),
|
|
"shell": (#4eaa25, "Shell"),
|
|
// Updated to a more specific green shade
|
|
"json": (dodgerblue, "JSON"),
|
|
"python": (#3572A5, "Python"),
|
|
// Using the specific Python blue
|
|
"css": (#264de4, "CSS"),
|
|
"go": (#00ADD8, "Go"),
|
|
// Official Go color
|
|
"markdown": (#0000ff, "Markdown"),
|
|
"rust": (#ff4647, "Rust"),
|
|
// Adjusted to match Rust's branding
|
|
"java": (#f89820, "Java"),
|
|
// Oracle Java color
|
|
"csharp": (#178600, "C#"),
|
|
"ruby": (#701516, "Ruby"),
|
|
"swift": (#f05138, "Swift"),
|
|
"php": (#777bb4, "PHP"),
|
|
"typescript": (#3178c6, "TypeScript"),
|
|
"scala": (#c22d40, "Scala"),
|
|
"kotlin": (#F18E33, "Kotlin"),
|
|
"lua": (#000080, "Lua"),
|
|
"perl": (#0298c3, "Perl"),
|
|
"haskell": (#5e5086, "Haskell"),
|
|
"r": (#198ce7, "R"),
|
|
"dart": (#00d2b8, "Dart"),
|
|
"elixir": (#6e4a7e, "Elixir"),
|
|
"clojure": (#5881d8, "Clojure"),
|
|
"bash": (#4eaa25, "Bash"),
|
|
"default": (#333, "Code"),
|
|
);
|
|
|
|
@mixin base-label-style($bg-color, $text-color: var(--label-color)) {
|
|
background: $bg-color;
|
|
color: $text-color;
|
|
border-radius: 0 0 0.25rem 0.25rem;
|
|
font-size: 12px;
|
|
letter-spacing: 0.025rem;
|
|
padding: 0.1rem 0.5rem;
|
|
text-align: right;
|
|
text-transform: uppercase;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
margin-top: 0.1rem;
|
|
}
|
|
|
|
// Example usage within a specific class for clarity
|
|
.code-label {
|
|
@include base-label-style(#333); // Default background color
|
|
}
|
|
|
|
@each $lang, $color-info in $language-colors {
|
|
.label-#{$lang} {
|
|
@include base-label-style(nth($color-info, 1));
|
|
}
|
|
}
|
|
|
|
code {
|
|
background-color: var(--bg-primary);
|
|
padding: 0.1em 0.2em;
|
|
border-radius: 5px;
|
|
border: 1px solid var(--border-color);
|
|
font-family: var(--code-font);
|
|
}
|
|
|
|
pre {
|
|
background-color: var(--bg-primary) !important;
|
|
border-radius: 5px;
|
|
border: 1px solid var(--border-color);
|
|
line-height: 1.4;
|
|
overflow-x: auto;
|
|
padding: 1em;
|
|
position: relative;
|
|
|
|
mark {
|
|
background-color: var(--hightlight-color) !important; // Ensure mark uses the theme background
|
|
padding: 0;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
code {
|
|
background-color: transparent !important;
|
|
color: var(--text-color);
|
|
font-size: 100%;
|
|
padding: 0;
|
|
border: none;
|
|
font-family: var(--code-font);
|
|
|
|
table {
|
|
margin: 0;
|
|
border-collapse: collapse;
|
|
font-family: var(--code-font);
|
|
|
|
mark {
|
|
display: block;
|
|
color: unset;
|
|
padding: 0;
|
|
background-color: var(--hightlight-color) !important;
|
|
filter: brightness(1.2); // Example to slightly increase brightness
|
|
}
|
|
|
|
}
|
|
|
|
td,
|
|
th,
|
|
tr {
|
|
padding: 0;
|
|
border-bottom: none;
|
|
border: none; // Ensure no borders around rows
|
|
}
|
|
|
|
tbody td:first-child {
|
|
text-align: center;
|
|
user-select: none;
|
|
min-width: 60px;
|
|
border-right: none,
|
|
}
|
|
|
|
tbody tr:nth-child(even),
|
|
thead tr {
|
|
background-color: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
.clipboard-button,
|
|
.clipboard-button svg {
|
|
all: unset;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
bottom: 5px;
|
|
/* 5px from the bottom */
|
|
right: 5px;
|
|
/* 5px from the right */
|
|
z-index: 10;
|
|
background-color: transparent;
|
|
border: none;
|
|
fill: #ef5350;
|
|
/* Sets the color of the SVG, assuming it's an SVG icon */
|
|
} |