first commit

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.sass-cache

Gruntfile.js

@@ -0,0 +1,31 @@
+module.exports = function(grunt) {
+
+  grunt.initConfig({
+    watch: {
+      css: {
+        files: ['src/**/*.scss'],
+        tasks: ['sass'],
+        options: {
+          spawn: false,
+        },
+      }
+    },
+
+    sass: {
+      dist: {
+        options: {
+         style: 'expanded'
+       },
+        files: {
+          'dist/dist.css': 'src/main.scss'
+        }
+      }
+    },
+  });
+
+  grunt.loadNpmTasks('grunt-newer');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-contrib-sass');
+
+  grunt.registerTask('default', ['sass']);
+};

README.md

@@ -0,0 +1 @@
+# Titanium Theme

dist/dist.css

@@ -0,0 +1,317 @@
+:root {
+  --foreground-color: #3d3c40;
+  --background-color: rebeccapurple;
+  --highlight-color: #c9cccf;
+  --primary-tint-color: #d9dbde;
+  --high-contrast-bg-color: #d9dbde;
+  --border-color: var(--highlight-color);
+  --secondary-bg-color: var(--high-contrast-bg-color);
+  --tertiary-bg-color: var(--high-contrast-bg-color);
+  /* Tags */
+  --tags-text-color: var(--foreground-color);
+  --tags-bg-color: #d9dbde;
+  --tags-selected-bg-color: var(--highlight-color);
+  /* Notes */
+  --note-cell-text-color: var(--foreground-color);
+  --note-cell-selected-text-color: var(--foreground-color);
+  --notes-column-header-bg-color: #d9dbde;
+  --note-cell-selected-bg-color: var(--highlight-color);
+  --note-cell-border-color: var(--border-color);
+  --notes-column-left-border-color: var(--border-color);
+  --notes-column-right-border-color: var(--border-color);
+  --notes-column-inset-left-border-color: 0;
+  --notes-column-inset-right-border-color: 0;
+  /* Editor */
+  --editor-text-color: var(--foreground-color);
+  --editor-bg-color: var(--high-contrast-bg-color);
+  --editor-title-bar-bg-color: var(--primary-tint-color);
+  /* Footer */
+  --footer-bg-color: var(--high-contrast-bg-color);
+  --footer-link-color: var(--background-color);
+  --footer-bar-border-top-color: var(--border-color);
+  /* UI Components */
+  --ui-component-text-color: var(--foreground-color);
+  --ui-component-bg-color: var(--high-contrast-bg-color);
+  /* Column Menus */
+  --section-menu-bar-bg-color: var(--highlight-color);
+  --colomn-menu-text-color: var(--foreground-color);
+  --colomn-menu-bg-color: var(--highlight-color);
+  --colomn-menu-highlighted-bg-color: var(--background-color);
+  --menu-section-sep-color: var(--border-color);
+  --menu-item-sep-color: rgba(0, 0, 0, 0.1);
+  /* General */
+  --heading-text-color: var(--foreground-color);
+  --bar-bg-color: var(--background-color);
+  --link-color: var(--background-color);
+  --selection-color: var(--border-color);
+}
+
+/* General */
+::selection {
+  background: var(--selection-color) !important;
+  /* WebKit/Blink Browsers */
+  color: white;
+}
+
+::-moz-selection {
+  background: var(--link-color) !important;
+  /* Gecko Browsers */
+  color: white;
+}
+
+body {
+  color: var(--foreground-color) !important;
+}
+
+.app .section > .content {
+  background-color: var(--high-contrast-bg-color) !important;
+}
+
+.add-button {
+  background-color: var(--ui-component-bg-color) !important;
+  color: var(--ui-component-text-color) !important;
+}
+
+.app-bar {
+  background-color: var(--ui-component-bg-color) !important;
+}
+
+.blue {
+  /*legacy, replaced with .tinted */
+  color: var(--link-color) !important;
+}
+
+.tinted {
+  color: var(--link-color) !important;
+}
+
+.tinted-selected {
+  color: var(--link-color) !important;
+}
+
+/* Tags */
+.app .tags, .tags .content {
+  background-color: var(--tags-bg-color) !important;
+}
+
+#tags-title-bar {
+  color: var(--heading-text-color) !important;
+}
+
+.tags .tag {
+  color: var(--tags-text-color) !important;
+}
+
+.tags .tag a {
+  color: var(--link-color) !important;
+}
+
+.tags .tag > .info > .title {
+  color: var(--tags-text-color) !important;
+}
+
+.tags .tag.selected {
+  background-color: var(--tags-selected-bg-color) !important;
+}
+
+.tags .tag:hover:not(.selected) {
+  background-color: var(--tags-selected-bg-color) !important;
+}
+
+/* Notes */
+.app .notes .content {
+  background-color: var(--tertiary-bg-color) !important;
+}
+
+.notes {
+  border-left: 1px solid var(--notes-column-left-border-color) !important;
+  border-right: 1px solid var(--notes-column-right-border-color) !important;
+}
+
+#notes-title-bar {
+  color: var(--heading-text-color) !important;
+  background-color: var(--notes-column-header-bg-color) !important;
+}
+
+.notes .filter-section .filter-bar {
+  background-color: var(--ui-component-bg-color) !important;
+}
+
+.notes .note.selected {
+  background-color: var(--note-cell-selected-bg-color) !important;
+  color: var(--note-cell-selected-text-color) !important;
+}
+
+.notes .note {
+  border-bottom: 1px solid var(--note-cell-border-color) !important;
+  background-color: var(--tertiary-bg-color) !important;
+  color: var(--note-cell-text-color);
+}
+
+.notes .scrollable {
+  border-left: 1px solid var(--notes-column-inset-left-border-color) !important;
+  border-right: 1px solid var(--notes-column-inset-right-border-color) !important;
+}
+
+/* Editor */
+#editor-title-bar {
+  background-color: var(--editor-title-bar-bg-color) !important;
+}
+
+#editor-title-bar > .title > .input {
+  color: var(--heading-text-color) !important;
+}
+
+.editor-content {
+  background-color: var(--editor-bg-color) !important;
+}
+
+.editor-content .editable {
+  background-color: var(--editor-bg-color);
+  color: var(--editor-text-color);
+}
+
+#editor-title-bar .editor-tags .tags-input {
+  color: var(--heading-text-color) !important;
+}
+
+#editor-title-bar #save-status {
+  color: #8C8F91 !important;
+}
+
+/* Footer */
+#footer-bar {
+  border-top: 1px solid var(--footer-bar-border-top-color) !important;
+  background-color: var(--footer-bg-color) !important;
+}
+
+/* Editors */
+.CodeMirror {
+  background-color: var(--editor-bg-color) !important;
+  color: var(--editor-text-color) !important;
+  border: 0 !important;
+}
+
+.CodeMirror-cursor {
+  border-color: white;
+}
+
+.CodeMirror-selected {
+  background: var(--selection-color) !important;
+}
+
+.CodeMirror-gutters {
+  background-color: var(--high-contrast-bg-color) !important;
+  color: var(--editor-text-color) !important;
+  border-color: var(--border-color) !important;
+}
+
+.CodeMirror .cm-header {
+  font-family: arial;
+  color: var(--editor-text-color) !important;
+}
+
+.CodeMirror .cm-variable-2 {
+  font-family: arial;
+  color: var(--link-color) !important;
+}
+
+.CodeMirror .cm-link, .cm-string, .cm-keyword {
+  font-family: arial;
+  color: var(--editor-text-color) !important;
+}
+
+.CodeMirror .CodeMirror-linenumber {
+  color: gray !important;
+}
+
+/* Code Editor bottom toolbar */
+#select-wrapper {
+  background-color: var(--high-contrast-bg-color) !important;
+  color: var(--editor-text-color) !important;
+  border-color: var(--border-color) !important;
+}
+
+/* Advanced Markdown top toolbar */
+.editor-toolbar {
+  background-color: var(--high-contrast-bg-color) !important;
+  border-color: var(--border-color) !important;
+}
+
+.editor-toolbar::before, ::after {
+  background: 0 !important;
+}
+
+.editor-toolbar a {
+  color: var(--editor-text-color) !important;
+}
+
+/* Simple Markdown Editor */
+#simple-markdown {
+  background-color: var(--editor-bg-color) !important;
+  color: var(--editor-text-color) !important;
+}
+
+#simple-markdown #editor {
+  background-color: var(--editor-bg-color) !important;
+  color: var(--editor-text-color) !important;
+}
+
+#simple-markdown #column-resizer {
+  background-color: var(--border-color) !important;
+}
+
+/* Plus Editor */
+#plus-editor .note-editor.note-frame.fullscreen .note-editable {
+  background-color: var(--editor-bg-color) !important;
+  color: var(--editor-text-color) !important;
+}
+
+#plus-editor .panel-default > .panel-heading {
+  background-color: var(--editor-bg-color) !important;
+}
+
+#plus-editor .btn-default {
+  color: var(--ui-component-text-color) !important;
+  background-color: var(--ui-component-bg-color) !important;
+  border-color: var(--highlight-color) !important;
+}
+
+#plus-editor .panel-heading {
+  border-color: var(--border-color) !important;
+}
+
+#plus-editor .dropdown-menu > li > a {
+  color: var(--editor-text-color);
+}
+
+.component-stack-border {
+  border-color: var(--border-color) !important;
+}
+
+/*SN Components */
+:root {
+  --body-text-color: var(--editor-text-color);
+  --body-background-color: var(--high-contrast-bg-color);
+  --element-text-color: var(--ui-component-text-color);
+  --element-background-color: var(--ui-component-bg-color);
+  --tint-color: var(--highlight-color);
+}
+
+.sn-component .element-background-color {
+  background-color: var(--element-background-color);
+}
+
+.sn-component .body-background-color {
+  background-color: var(--body-background-color);
+}
+
+.sn-component .element-text-color {
+  color: var(--element-text-color);
+}
+
+.sn-component .body-text-color {
+  color: var(--body-text-color);
+}
+
+/*# sourceMappingURL=dist.css.map */

dist/dist.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "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",
+"sources": ["../src/main.scss"],
+"names": [],
+"file": "dist.css"
+}

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "sn-theme-titanium",
+  "version": "1.0.0",
+  "main": "dist/dist.css",
+  "devDependencies": {
+    "grunt": "^1.0.1",
+    "grunt-contrib-watch": "^1.0.0",
+    "grunt-newer": "^1.2.0",
+    "grunt-contrib-sass": "^1.0.0"
+  },
+  "sn": {
+    "main": "dist/dist.css"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/sn-extensions/titanium-theme.git"
+  }
+}

src/main.scss

@@ -0,0 +1,334 @@
+:root {
+
+  --foreground-color: #3d3c40;
+  --background-color: rebeccapurple;
+  --highlight-color: #c9cccf;
+
+  --primary-tint-color: #d9dbde;
+
+  --high-contrast-bg-color: #d9dbde;
+  --border-color: var(--highlight-color);
+
+  --secondary-bg-color: var(--high-contrast-bg-color);
+  --tertiary-bg-color: var(--high-contrast-bg-color);
+
+  /* Tags */
+  --tags-text-color: var(--foreground-color);;
+  --tags-bg-color: #d9dbde;
+  --tags-selected-bg-color: var(--highlight-color);
+
+  /* Notes */
+  --note-cell-text-color: var(--foreground-color);
+  --note-cell-selected-text-color: var(--foreground-color);
+  --notes-column-header-bg-color: #d9dbde;
+  --note-cell-selected-bg-color: var(--highlight-color);
+  --note-cell-border-color: var(--border-color);
+
+  --notes-column-left-border-color: var(--border-color);
+  --notes-column-right-border-color: var(--border-color);
+
+  --notes-column-inset-left-border-color: 0;
+  --notes-column-inset-right-border-color: 0;
+
+  /* Editor */
+  --editor-text-color: var(--foreground-color);
+  --editor-bg-color: var(--high-contrast-bg-color);
+  --editor-title-bar-bg-color: var(--primary-tint-color);
+
+  /* Footer */
+  --footer-bg-color: var(--high-contrast-bg-color);
+  --footer-link-color: var(--background-color);
+  --footer-bar-border-top-color: var(--border-color);
+
+  /* UI Components */
+  --ui-component-text-color: var(--foreground-color);
+  --ui-component-bg-color: var(--high-contrast-bg-color);
+
+  /* Column Menus */
+  --section-menu-bar-bg-color: var(--highlight-color);
+
+  --colomn-menu-text-color: var(--foreground-color);
+  --colomn-menu-bg-color: var(--highlight-color);
+  --colomn-menu-highlighted-bg-color: var(--background-color);
+  --menu-section-sep-color: var(--border-color);;
+  --menu-item-sep-color: rgba(0, 0, 0, 0.1);
+
+  /* General */
+  --heading-text-color: var(--foreground-color);
+  --bar-bg-color: var(--background-color);
+  --link-color: var(--background-color);
+
+  --selection-color: var(--border-color);;
+}
+
+/* General */
+
+::selection {
+  background: var(--selection-color) !important; /* WebKit/Blink Browsers */
+  color: white;
+}
+
+::-moz-selection {
+  background: var(--link-color) !important; /* Gecko Browsers */
+  color: white;
+}
+
+body {
+  color: var(--foreground-color) !important;
+}
+
+.app .section > .content {
+  background-color: var(--high-contrast-bg-color) !important;
+}
+
+.add-button {
+  background-color: var(--ui-component-bg-color) !important;
+  color: var(--ui-component-text-color) !important;
+}
+
+.app-bar {
+  background-color: var(--ui-component-bg-color) !important;
+}
+
+.blue { /*legacy, replaced with .tinted */
+  color: var(--link-color) !important;
+}
+
+.tinted {
+  color: var(--link-color) !important;
+}
+
+.tinted-selected {
+  color: var(--link-color) !important;
+}
+
+
+/* Tags */
+
+.app .tags, .tags .content {
+  background-color: var(--tags-bg-color) !important;
+}
+
+#tags-title-bar {
+  color: var(--heading-text-color) !important;
+}
+
+.tags .tag {
+  color: var(--tags-text-color) !important;
+}
+
+.tags .tag a {
+  color: var(--link-color) !important;
+}
+
+.tags .tag > .info > .title {
+  color: var(--tags-text-color) !important;
+}
+
+.tags .tag.selected {
+  background-color: var(--tags-selected-bg-color) !important;
+}
+
+.tags .tag:hover:not(.selected) {
+  background-color: var(--tags-selected-bg-color) !important;
+}
+
+
+/* Notes */
+
+.app .notes .content {
+  background-color: var(--tertiary-bg-color) !important;
+}
+
+.notes {
+  border-left: 1px solid var(--notes-column-left-border-color) !important;
+  border-right: 1px solid var(--notes-column-right-border-color) !important;
+}
+
+#notes-title-bar {
+  color: var(--heading-text-color) !important;
+  background-color: var(--notes-column-header-bg-color) !important;
+}
+
+.notes .filter-section .filter-bar {
+  background-color: var(--ui-component-bg-color) !important;
+}
+
+.notes .note.selected {
+  background-color: var(--note-cell-selected-bg-color) !important;
+  color: var(--note-cell-selected-text-color) !important;
+}
+
+.notes .note {
+  border-bottom: 1px solid var(--note-cell-border-color) !important;
+  background-color: var(--tertiary-bg-color) !important;
+  color: var(--note-cell-text-color);
+}
+
+.notes .scrollable {
+  border-left: 1px solid var(--notes-column-inset-left-border-color) !important;
+  border-right: 1px solid var(--notes-column-inset-right-border-color) !important;
+}
+
+
+/* Editor */
+
+#editor-title-bar {
+  background-color: var(--editor-title-bar-bg-color) !important;
+}
+
+#editor-title-bar > .title > .input {
+  color: var(--heading-text-color) !important;
+}
+
+.editor-content {
+  background-color: var(--editor-bg-color) !important;
+}
+
+.editor-content .editable {
+  background-color: var(--editor-bg-color);
+  color: var(--editor-text-color);
+}
+
+#editor-title-bar .editor-tags .tags-input {
+  color: var(--heading-text-color) !important;
+}
+
+#editor-title-bar #save-status {
+  color: #8C8F91 !important;
+}
+
+/* Footer */
+
+#footer-bar {
+  border-top: 1px solid var(--footer-bar-border-top-color) !important;
+  background-color: var(--footer-bg-color) !important;
+}
+
+/* Editors */
+
+.CodeMirror {
+  background-color: var(--editor-bg-color) !important;
+  color: var(--editor-text-color) !important;
+  border: 0 !important;
+}
+
+.CodeMirror-cursor {
+  border-color: white;
+}
+
+.CodeMirror-selected {
+  background: var(--selection-color) !important;
+}
+
+.CodeMirror-gutters {
+  background-color: var(--high-contrast-bg-color) !important;
+  color: var(--editor-text-color) !important;
+  border-color: var(--border-color) !important;
+}
+
+.CodeMirror .cm-header { font-family: arial; color: var(--editor-text-color) !important;}
+.CodeMirror .cm-variable-2 { font-family: arial; color: var(--link-color) !important;}
+.CodeMirror .cm-link, .cm-string, .cm-keyword { font-family: arial; color: var(--editor-text-color) !important;}
+
+.CodeMirror .CodeMirror-linenumber { color: gray !important; }
+
+/* Code Editor bottom toolbar */
+
+#select-wrapper {
+  background-color: var(--high-contrast-bg-color) !important;
+  color: var(--editor-text-color) !important;
+  border-color: var(--border-color) !important;
+}
+
+/* Advanced Markdown top toolbar */
+
+.editor-toolbar {
+  background-color: var(--high-contrast-bg-color) !important;
+  border-color: var(--border-color) !important;
+}
+
+.editor-toolbar::before, ::after {
+  background: 0 !important;
+}
+
+.editor-toolbar a {
+  color: var(--editor-text-color) !important;
+}
+
+/* Simple Markdown Editor */
+
+#simple-markdown {
+  background-color: var(--editor-bg-color) !important;
+  color: var(--editor-text-color) !important;
+}
+
+#simple-markdown #editor {
+  background-color: var(--editor-bg-color) !important;
+  color: var(--editor-text-color) !important;
+}
+
+#simple-markdown #column-resizer {
+  background-color: var(--border-color)  !important;
+}
+
+
+
+/* Plus Editor */
+
+#plus-editor .note-editor.note-frame.fullscreen .note-editable {
+  background-color: var(--editor-bg-color) !important;
+  color: var(--editor-text-color) !important;
+}
+
+#plus-editor .panel-default>.panel-heading {
+  background-color: var(--editor-bg-color) !important;
+}
+
+#plus-editor .btn-default {
+    color: var(--ui-component-text-color) !important;
+    background-color: var(--ui-component-bg-color) !important;
+    border-color: var(--highlight-color) !important;
+}
+
+#plus-editor .panel-heading {
+    border-color: var(--border-color) !important;
+}
+
+#plus-editor .dropdown-menu>li>a {
+    color: var(--editor-text-color);
+}
+
+
+
+.component-stack-border {
+  border-color: var(--border-color) !important;
+}
+
+/*SN Components */
+
+:root {
+  --body-text-color: var(--editor-text-color);
+  --body-background-color: var(--high-contrast-bg-color);
+
+  --element-text-color: var(--ui-component-text-color);
+  --element-background-color: var(--ui-component-bg-color);
+
+  --tint-color: var(--highlight-color);
+}
+
+.sn-component .element-background-color {
+ background-color: var(--element-background-color);
+}
+
+.sn-component .body-background-color {
+ background-color: var(--body-background-color);
+}
+
+.sn-component .element-text-color {
+ color: var(--element-text-color);
+}
+
+.sn-component .body-text-color {
+ color: var(--body-text-color);
+}