themes for docs

.github/workflows/actions.yml

@@ -684,3 +684,16 @@ jobs:
           draft: true
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  verify-css-themes:
+    # see HelpSource/themes/README.md
+    # keep versions in sync w/ HelpSource/themes/Dockerfile
+    runs-on: ubuntu-latest
+    container: node:lts-alpine3.16
+    steps:
+      - name: "Setup SASS"
+        run: npm instal -g sass@1.54.4
+      - name: Checkout repository
+        uses: actions/checkout@v2
+      - name: "Verify CSS files"
+        run: HelpSource/themes/build_css.sh verify

.gitignore

@@ -35,3 +35,7 @@ __pycache__
 *.orig
 #vim swap files
 .*.sw?
+
+# css maps
+*.css.map
+HelpSource/themes/verify

HelpSource/Browse.html

@@ -7,7 +7,6 @@
     <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
     <link rel='stylesheet' href='./scdoc.css' type='text/css' />
     <link rel='stylesheet' href='./custom.css' type='text/css' />
-    <link rel='stylesheet' href='./browse.css' type='text/css' />
     <script src="lib/jquery.min.js"></script>
     <script>
         var scdoc_title = "Document Browser";

HelpSource/editor.scss

@@ -0,0 +1,119 @@
+/*
+
+THE CSS FILE IS GENERATED AUTOMATICALLY.
+ONLY MODIFY THE SCSS FILE AND GENEREATE THE
+CSS FILE OUT OF THIS, SEE themes/README.md
+
+*/
+
+textarea.editor {
+    opacity: 0;
+}
+
+.CodeMirror {
+    height: auto !important;
+    padding: 0 1em;
+    margin-top: 1em;
+    border-left: 2px solid $cm-border-color;
+    font-size: 1em;
+    line-height: normal;
+    background-color: $background-color;
+}
+
+.CodeMirror-cursors,
+.CodeMirror pre {
+    z-index: 1 !important;
+}
+
+.CodeMirror-selected,
+.CodeMirror-line::selection,
+.CodeMirror-line > span::selection,
+.CodeMirror-line > span > span::selection { 
+    background: transparentize($cm-selection-color, 0.5) !important;
+}
+
+@keyframes text-flash {
+    0% { 
+        background: transparentize($cm-selection-color, 0);
+        color: $primary-color;
+    }
+    40% { 
+        background: transparentize($cm-selection-color, 1);
+        color: $primary-color;
+    }
+    100% { 
+        background: transparentize($cm-selection-color, 0);
+        color: $primary-color;
+    }
+}
+
+.CodeMirror {
+    .text-flash {
+        animation: text-flash .35s ease-in;
+    }
+}
+
+/* syntax hightlighting */
+.cm-s-default {
+    .cm-keyword {
+        color: $cm-keyword-color;
+        font-weight: bold;
+    }
+
+    .cm-built-in {
+        color: $cm-built-in-color;
+    }
+
+    .cm-number {
+        color: $cm-number-color;
+    }
+
+    .cm-symbol {
+        color: $cm-symbol-color;
+    }
+
+    .cm-class {
+        color: $cm-class-color;
+    }
+
+    .cm-primitive {
+        color: $cm-primitive-color;
+    }
+
+    .cm-char {
+        color: $cm-char-color;        
+    }
+
+    .cm-env-var {
+        color: $cm-env-var-color;
+    }
+
+    .cm-comment {
+        color: $cm-comment-color;
+    }
+
+    .cm-string {
+        color: $cm-string-color;
+    }
+
+    .cm-text {
+        color: $cm-text-color;
+    }
+}
+
+@media print {
+    // for print we keep the default colors
+    .cm-s-default {
+        .cm-keyword { color: #0000e6; font-weight: bold; }
+        .cm-built-in { color: #3333bf; font-weight: bold; }
+        .cm-s-default .cm-symbol { color: #007300; }
+        .cm-s-default .cm-number { color: #980099; }
+        .cm-class { color: #0000d2; font-weight: bold; }
+        .cm-primitive { color: #0000d2; }
+        .cm-char { color: #007300; }
+        .cm-env-var { color: #8c4614; }
+        .cm-comment { color: #bf0000; font-style: italic; }
+        .cm-string { color: #5f5f5f; }
+        .cm-text { color: #000000; }
+    }
+}