diff --git a/dist/public/assets/css/theme-dark.css b/dist/public/assets/css/theme-dark.css index 083836b..fc847a2 100644 --- a/dist/public/assets/css/theme-dark.css +++ b/dist/public/assets/css/theme-dark.css @@ -2189,9 +2189,9 @@ --color-menu: var(--c-elevation_3); --color-card: var(--c-elevation_3); --color-markup-table-row: rgba(var(--c-text-rgb), 0.02); - --color-markup-code-block: rgba(var(--c-text-rgb), 0.05); + --color-markup-code-block: var(--c-elevation_2); --color-button: var(--c-elevation_4); - --color-code-bg: var(--c-elevation_2); + --color-code-bg: $lvl1; --color-code-sidebar-bg: var(--c-elevation_4); --color-shadow: rgba(var(--c-elevation_3-rgb), 0.1); --color-secondary-bg: var(--c-elevation_4); @@ -2206,7 +2206,7 @@ --color-nav-bg: var(--c-elevation_2); --color-nav-hover-bg: var(--c-elevation_6); --color-label-active-bg: var(--c-elevation_6); - --color-label-text: var(--c-text); + --color-label-text: var(--c-primary_base-c); --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); --color-active-line: var(--c-elevation_5); @@ -2784,6 +2784,99 @@ footer .ui.dropdown .menu { color: var(--c-theme_red_base); } +.monaco-editor { + --vscode-editor-background: var(--c-elevation_0) !important; + --vscode-editorGutter-background: var(--c-elevation_0) !important; +} +.monaco-editor .selected-text { + background-color: var(--c-elevation_4) !important; +} +.monaco-editor .margin-view-overlays .line-numbers { + color: var(--c-elevation_10) !important; +} +.monaco-editor .line-numbers.active-line-number { + color: var(--c-primary_base) !important; +} +.monaco-editor .view-overlays .current-line, +.monaco-editor .margin-view-overlays .current-line-margin { + background-color: var(--c-elevation_2) !important; +} +.monaco-editor .mtk1 { + color: var(--c-text) !important; +} +.monaco-editor .mtk2 { + color: #ff69b4 !important; +} +.monaco-editor .mtk3 { + color: var(--c-theme_peach_base) !important; +} +.monaco-editor .mtk4 { + color: var(--c-theme_teal_base) !important; +} +.monaco-editor .mtk5 { + color: var(--c-text) !important; +} +.monaco-editor .mtk6 { + color: var(--c-theme_sapphire_base) !important; +} +.monaco-editor .mtk7 { + color: var(--c-theme_peach_base) !important; +} +.monaco-editor .mtk8 { + color: var(--c-elevation_9) !important; +} +.monaco-editor .mtk9 { + color: var(--c-theme_sapphire_base) !important; +} +.monaco-editor .mtk10 { + color: var(--c-elevation_10) !important; +} +.monaco-editor .mtk11 { + color: var(--c-theme_teal_base) !important; +} +.monaco-editor .mtk12 { + color: var(--c-theme_teal_base) !important; +} +.monaco-editor .mtk13 { + color: #ff69b4 !important; +} +.monaco-editor .mtk14 { + color: #ff69b4 !important; +} +.monaco-editor .mtk15 { + color: var(--c-theme_sapphire_base) !important; +} +.monaco-editor .mtk16 { + color: var(--c-elevation_9) !important; +} +.monaco-editor .mtk17 { + color: #ff69b4 !important; +} +.monaco-editor .mtk18 { + color: #ff69b4 !important; +} +.monaco-editor .mtk19 { + color: var(--c-theme_teal_base) !important; +} +.monaco-editor .mtk20 { + color: #ff69b4 !important; +} +.monaco-editor .mtk21 { + color: var(--c-theme_green_base) !important; +} +.monaco-editor .mtk22 { + color: #ff69b4 !important; +} +.monaco-editor .mtk23 { + color: var(--c-theme_blue_base) !important; +} +.monaco-editor .mtk24 { + color: var(--c-theme_peach_base) !important; +} +.monaco-editor .mtk25 { + color: var(--c-theme_pink_base) !important; +} + .header-wrapper { display: flex; flex-direction: column; @@ -2893,7 +2986,7 @@ footer .ui.dropdown .menu { display: none; } } -@media (max-width: 768px) { +@media (max-width: 1200px) { .page-content.repository.file.list > .ui.container.lugit-repo-list-view { flex-direction: column; column-gap: 0; @@ -3001,4 +3094,8 @@ footer .ui.dropdown .menu { justify-content: center; line-height: 16px; padding: 0 var(--v-measure_\.25x) !important; +} + +.markup table { + width: fit-content; } \ No newline at end of file diff --git a/dist/public/assets/css/theme-light.css b/dist/public/assets/css/theme-light.css index f5199e6..5882557 100644 --- a/dist/public/assets/css/theme-light.css +++ b/dist/public/assets/css/theme-light.css @@ -2189,9 +2189,9 @@ --color-menu: var(--c-elevation_3); --color-card: var(--c-elevation_3); --color-markup-table-row: rgba(var(--c-text-rgb), 0.02); - --color-markup-code-block: rgba(var(--c-text-rgb), 0.05); + --color-markup-code-block: var(--c-elevation_2); --color-button: var(--c-elevation_4); - --color-code-bg: var(--c-elevation_2); + --color-code-bg: $lvl1; --color-code-sidebar-bg: var(--c-elevation_4); --color-shadow: rgba(var(--c-elevation_3-rgb), 0.1); --color-secondary-bg: var(--c-elevation_4); @@ -2206,7 +2206,7 @@ --color-nav-bg: var(--c-elevation_2); --color-nav-hover-bg: var(--c-elevation_6); --color-label-active-bg: var(--c-elevation_6); - --color-label-text: var(--c-text); + --color-label-text: var(--c-primary_base-c); --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); --color-active-line: var(--c-elevation_5); @@ -2784,6 +2784,99 @@ footer .ui.dropdown .menu { color: var(--c-theme_red_base); } +.monaco-editor { + --vscode-editor-background: var(--c-elevation_0) !important; + --vscode-editorGutter-background: var(--c-elevation_0) !important; +} +.monaco-editor .selected-text { + background-color: var(--c-elevation_4) !important; +} +.monaco-editor .margin-view-overlays .line-numbers { + color: var(--c-elevation_10) !important; +} +.monaco-editor .line-numbers.active-line-number { + color: var(--c-primary_base) !important; +} +.monaco-editor .view-overlays .current-line, +.monaco-editor .margin-view-overlays .current-line-margin { + background-color: var(--c-elevation_2) !important; +} +.monaco-editor .mtk1 { + color: var(--c-text) !important; +} +.monaco-editor .mtk2 { + color: #ff69b4 !important; +} +.monaco-editor .mtk3 { + color: var(--c-theme_peach_base) !important; +} +.monaco-editor .mtk4 { + color: var(--c-theme_teal_base) !important; +} +.monaco-editor .mtk5 { + color: var(--c-text) !important; +} +.monaco-editor .mtk6 { + color: var(--c-theme_sapphire_base) !important; +} +.monaco-editor .mtk7 { + color: var(--c-theme_peach_base) !important; +} +.monaco-editor .mtk8 { + color: var(--c-elevation_9) !important; +} +.monaco-editor .mtk9 { + color: var(--c-theme_sapphire_base) !important; +} +.monaco-editor .mtk10 { + color: var(--c-elevation_10) !important; +} +.monaco-editor .mtk11 { + color: var(--c-theme_teal_base) !important; +} +.monaco-editor .mtk12 { + color: var(--c-theme_teal_base) !important; +} +.monaco-editor .mtk13 { + color: #ff69b4 !important; +} +.monaco-editor .mtk14 { + color: #ff69b4 !important; +} +.monaco-editor .mtk15 { + color: var(--c-theme_sapphire_base) !important; +} +.monaco-editor .mtk16 { + color: var(--c-elevation_9) !important; +} +.monaco-editor .mtk17 { + color: #ff69b4 !important; +} +.monaco-editor .mtk18 { + color: #ff69b4 !important; +} +.monaco-editor .mtk19 { + color: var(--c-theme_teal_base) !important; +} +.monaco-editor .mtk20 { + color: #ff69b4 !important; +} +.monaco-editor .mtk21 { + color: var(--c-theme_green_base) !important; +} +.monaco-editor .mtk22 { + color: #ff69b4 !important; +} +.monaco-editor .mtk23 { + color: var(--c-theme_blue_base) !important; +} +.monaco-editor .mtk24 { + color: var(--c-theme_peach_base) !important; +} +.monaco-editor .mtk25 { + color: var(--c-theme_pink_base) !important; +} + .header-wrapper { display: flex; flex-direction: column; @@ -2893,7 +2986,7 @@ footer .ui.dropdown .menu { display: none; } } -@media (max-width: 768px) { +@media (max-width: 1200px) { .page-content.repository.file.list > .ui.container.lugit-repo-list-view { flex-direction: column; column-gap: 0; @@ -3001,4 +3094,8 @@ footer .ui.dropdown .menu { justify-content: center; line-height: 16px; padding: 0 var(--v-measure_\.25x) !important; +} + +.markup table { + width: fit-content; } \ No newline at end of file diff --git a/dist/templates/home.tmpl b/dist/templates/home.tmpl index ca6f14e..710921b 100644 --- a/dist/templates/home.tmpl +++ b/dist/templates/home.tmpl @@ -2,7 +2,7 @@
- +
diff --git a/dist/templates/repo/home.tmpl b/dist/templates/repo/home.tmpl index 5214a3f..aeab6b5 100644 --- a/dist/templates/repo/home.tmpl +++ b/dist/templates/repo/home.tmpl @@ -1,7 +1,7 @@ {{template "base/head" .}}
{{template "repo/header" .}} -
+
{{template "base/alert" .}} {{template "repo/code/recently_pushed_new_branches" .}} diff --git a/src/templates/home.tmpl b/src/templates/home.tmpl index ca6f14e..710921b 100644 --- a/src/templates/home.tmpl +++ b/src/templates/home.tmpl @@ -2,7 +2,7 @@
- +
diff --git a/src/templates/repo/home.tmpl b/src/templates/repo/home.tmpl index 5214a3f..aeab6b5 100644 --- a/src/templates/repo/home.tmpl +++ b/src/templates/repo/home.tmpl @@ -1,7 +1,7 @@ {{template "base/head" .}}
{{template "repo/header" .}} -
+
{{template "base/alert" .}} {{template "repo/code/recently_pushed_new_branches" .}} diff --git a/src/themes/scss/theme/index.scss b/src/themes/scss/theme/index.scss index fe9ffe0..5dcf2c3 100644 --- a/src/themes/scss/theme/index.scss +++ b/src/themes/scss/theme/index.scss @@ -1,5 +1,6 @@ @use '@lucas-labs/lui-micro/color' as color; @use './modules/chroma' as chroma; +@use './modules/monaco' as monaco; @use './modules/codemirror' as codemirror; @use './modules/custom' as custom; @use '@lucas-labs/lui-micro/var' as var; @@ -221,9 +222,9 @@ --color-menu: #{color.get('elevation/3')}; --color-card: #{color.get('elevation/3')}; --color-markup-table-row: rgba(#{color.get('text', 'rgb')}, 0.02); - --color-markup-code-block: rgba(#{color.get('text', 'rgb')}, 0.05); + --color-markup-code-block: #{color.get('elevation/2')}; --color-button: #{color.get('elevation/4')}; - --color-code-bg: #{color.get('elevation/2')}; + --color-code-bg: $lvl1; --color-code-sidebar-bg: #{color.get('elevation/4')}; --color-shadow: rgba(#{$lvl1-rgb}, 0.1); --color-secondary-bg: #{color.get('elevation/4')}; @@ -238,7 +239,7 @@ --color-nav-bg: #{$lvl2}; --color-nav-hover-bg: #{color.get('elevation/6')}; --color-label-active-bg: #{color.get('elevation/6')}; - --color-label-text: #{color.get('text')}; + --color-label-text: #{color.get('primary/base', 'contrast')}; --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); --color-active-line: #{color.get('elevation/5')}; @@ -360,6 +361,7 @@ @include chroma.make-chroma-styles; @include codemirror.make-code-mirror-styles; + @include monaco.make-monaco-styles($is-dark: true); @include custom.apply-custom-styles; } diff --git a/src/themes/scss/theme/modules/_chroma.scss b/src/themes/scss/theme/modules/_chroma.scss index a496bc1..c22cf7d 100644 --- a/src/themes/scss/theme/modules/_chroma.scss +++ b/src/themes/scss/theme/modules/_chroma.scss @@ -2,12 +2,6 @@ @use '@lucas-labs/lui-micro/var' as var; -// variables: ( -// 'base-font-size': 16px, -// 'font-family': 'Roboto, sans-serif', -// 'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace', -// ), - @mixin make-chroma-styles { .chroma .code-inner{ font: 14px var.get('code-font-family'); diff --git a/src/themes/scss/theme/modules/_monaco.scss b/src/themes/scss/theme/modules/_monaco.scss new file mode 100644 index 0000000..8354839 --- /dev/null +++ b/src/themes/scss/theme/modules/_monaco.scss @@ -0,0 +1,155 @@ +@use '@lucas-labs/lui-micro/color' as color; + +@mixin make-monaco-styles($is-dark: true) { + $surface0: #{color.get('elevation/4')}; + $subtext0: #{color.get('elevation/10')}; + $overlay2: #{color.get('elevation/9')}; + $mantle: #{color.get('elevation/0')}; + $base: #{color.get('elevation/3')}; + $accent: #{color.get('primary/base')}; + $text: #{color.get('text')}; + $mauve: #{color.get('theme/sapphire/base')}; + $peach: #{color.get('theme/peach/base')}; + $teal: #{color.get('theme/teal/base')}; + $green: #{color.get('theme/green/base')}; + $blue: #{color.get('theme/blue/base')}; + $pink: #{color.get('theme/pink/base')}; + + .monaco-editor { + --vscode-editor-background: #{$mantle} !important; + --vscode-editorGutter-background: #{$mantle} !important; + + // selected text + .selected-text { + background-color: $surface0 !important; + } + // line numbers + .margin-view-overlays .line-numbers { + color: $subtext0 !important; + } + .line-numbers.active-line-number { + color: $accent !important; + } + + // current / cursor line + .view-overlays .current-line, + .margin-view-overlays .current-line-margin { + background-color: #{color.get('elevation/2')} !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; + // } + } +} diff --git a/src/themes/scss/theme/modules/custom/_home.scss b/src/themes/scss/theme/modules/custom/_home.scss new file mode 100644 index 0000000..33a596e --- /dev/null +++ b/src/themes/scss/theme/modules/custom/_home.scss @@ -0,0 +1,14 @@ +@use '@lucas-labs/lui-micro/var' as var; +@use '@lucas-labs/lui-micro/color' as color; + +@mixin apply-styles { + .page-content.home { + div.center { + img { + // background-color: color.get('primary/base'); + // border-radius: var.get('measure/4x'); + // padding: var.get('measure/1.25x'); + } + } + } +} diff --git a/src/themes/scss/theme/modules/custom/_markup.scss b/src/themes/scss/theme/modules/custom/_markup.scss new file mode 100644 index 0000000..90637c9 --- /dev/null +++ b/src/themes/scss/theme/modules/custom/_markup.scss @@ -0,0 +1,9 @@ +@use '@lucas-labs/lui-micro/color' as color; + +@mixin apply-styles() { + .markup { + table { + width: fit-content; + } + } +} \ No newline at end of file diff --git a/src/themes/scss/theme/modules/custom/index.scss b/src/themes/scss/theme/modules/custom/index.scss index bdc9400..9a04c8d 100644 --- a/src/themes/scss/theme/modules/custom/index.scss +++ b/src/themes/scss/theme/modules/custom/index.scss @@ -1,9 +1,13 @@ @use './repo-header'; @use './repo'; @use './project'; +@use './home'; +@use './markup'; @mixin apply-custom-styles { @include repo-header.apply-styles(); @include repo.apply-styles(); @include project.apply-styles(); + @include home.apply-styles(); + @include markup.apply-styles(); } \ No newline at end of file diff --git a/src/themes/scss/theme/modules/custom/repo/_file-list.scss b/src/themes/scss/theme/modules/custom/repo/_file-list.scss index 3aba2ec..cd625a1 100644 --- a/src/themes/scss/theme/modules/custom/repo/_file-list.scss +++ b/src/themes/scss/theme/modules/custom/repo/_file-list.scss @@ -58,7 +58,7 @@ } } - @media (max-width: 768px) { + @media (max-width: 1200px) { flex-direction: column; column-gap: 0; row-gap: 24px;