feat: monaco editor styling
This commit is contained in:
parent
c1c223fe50
commit
11bd7b77ec
1 changed files with 120 additions and 1 deletions
121
src/_monaco.scss
121
src/_monaco.scss
|
@ -14,6 +14,125 @@
|
|||
// current / cursor line
|
||||
.view-overlays .current-line,
|
||||
.margin-view-overlays .current-line-margin {
|
||||
background-color: #{if($isDark, color.mix($surface0, $base, 64%), color.mix($mantle, $base, 70%))} !important;
|
||||
background-color: #{if(
|
||||
$isDark,
|
||||
color.mix($surface0, $base, 64%),
|
||||
color.mix($mantle, $base, 70%)
|
||||
)} !important;
|
||||
}
|
||||
|
||||
// Note: all of the hotpink stuff is there so it's easily visible, since these editor scope mappings are a mess
|
||||
|
||||
// plaintext
|
||||
.mtk1 {
|
||||
color: $text !important;
|
||||
}
|
||||
.mtk2 {
|
||||
color: #ff69b4 !important;
|
||||
}
|
||||
// decorators
|
||||
.mtk3 {
|
||||
color: $peach !important;
|
||||
}
|
||||
// shell arguments
|
||||
.mtk4 {
|
||||
color: $teal !important;
|
||||
}
|
||||
// css constants & pre-defineds
|
||||
.mtk5 {
|
||||
color: $text !important;
|
||||
}
|
||||
// keywords
|
||||
.mtk6 {
|
||||
color: $mauve !important;
|
||||
}
|
||||
// numbers
|
||||
.mtk7 {
|
||||
color: $peach !important;
|
||||
}
|
||||
// comments
|
||||
.mtk8 {
|
||||
color: $overlay2 !important;
|
||||
}
|
||||
// sometimes a keyword, apparently
|
||||
.mtk9 {
|
||||
color: $mauve !important;
|
||||
}
|
||||
// braces, brackets, parentheses
|
||||
.mtk10 {
|
||||
color: $subtext0 !important;
|
||||
}
|
||||
// arrow brackets & equal signs in HTML
|
||||
.mtk11 {
|
||||
color: $teal !important;
|
||||
}
|
||||
// @ sign in javascript ¯\_(ツ)_/¯
|
||||
.mtk12 {
|
||||
color: $teal !important;
|
||||
}
|
||||
.mtk13 {
|
||||
color: #ff69b4 !important;
|
||||
}
|
||||
.mtk14 {
|
||||
color: #ff69b4 !important;
|
||||
}
|
||||
// regex, css classnames, and HTML keywords (huh)
|
||||
.mtk15 {
|
||||
color: $mauve !important;
|
||||
}
|
||||
// shebangs
|
||||
.mtk16 {
|
||||
color: $overlay2 !important;
|
||||
}
|
||||
.mtk17 {
|
||||
color: #ff69b4 !important;
|
||||
}
|
||||
.mtk18 {
|
||||
color: #ff69b4 !important;
|
||||
}
|
||||
// glob operator i guess
|
||||
.mtk19 {
|
||||
color: $teal !important;
|
||||
}
|
||||
.mtk20 {
|
||||
color: #ff69b4 !important;
|
||||
}
|
||||
// strings
|
||||
.mtk21 {
|
||||
color: $green !important;
|
||||
}
|
||||
.mtk22 {
|
||||
color: #ff69b4 !important;
|
||||
}
|
||||
// functions
|
||||
.mtk23 {
|
||||
color: $blue !important;
|
||||
}
|
||||
// shell variables
|
||||
.mtk24 {
|
||||
color: $peach !important;
|
||||
}
|
||||
// weird variables
|
||||
.mtk25 {
|
||||
color: $pink !important;
|
||||
}
|
||||
|
||||
.bracket-highlighting-0 {
|
||||
color: color.mix($text, $red, 40%) !important;
|
||||
}
|
||||
.bracket-highlighting-1 {
|
||||
color: color.mix($text, $peach, 40%) !important;
|
||||
}
|
||||
.bracket-highlighting-2 {
|
||||
color: color.mix($text, $yellow, 40%) !important;
|
||||
}
|
||||
.bracket-highlighting-3 {
|
||||
color: color.mix($text, $green, 40%) !important;
|
||||
}
|
||||
.bracket-highlighting-4 {
|
||||
color: color.mix($text, $blue, 40%) !important;
|
||||
}
|
||||
.bracket-highlighting-5 {
|
||||
color: color.mix($text, $mauve, 40%) !important;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue