Merge pull request #11 from coldenate/10-pdf-annotation-error

Fix: Toolbar; PDF CSS Error; ReadMe Rework Good work by @coldenate
catppuccin · Mar 13, 2023 · 01115c0 · 01115c0
2 parents 87f3f58 + a5781b1
commit 01115c0
Show file tree

Hide file tree

Showing 10 changed files with 258 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -36,17 +36,21 @@
 
 ## Usage
 
+### RemNote Theme Links
+
+-   [🌻 Latte](https://remnote.com/plugins/catppuccin-latte)
+-   [🪴 Frappé](https://remnote.com/plugins/catppuccin-frappe)
+-   [🌺 Macchiato](https://remnote.com/plugins/catppuccin-macchiato)
+-   [🌿 Mocha](https://remnote.com/plugins/catppuccin-mocha)
+
+#### Manual Installation Instructions
+
 1. Open Remnote (either the Desktop-, Mobile App or Website)
-2. Search for a new Note with the name `Custom CSS`
-3. Click on `Add Blank CSS Block`
-4. Paste the code from your desired Flavour into the block
-    1. [🌻 Latte](https://github.com/catppuccin/remnote/raw/main/latte/theme.css)
-    2. [🪴 Frappé](https://github.com/catppuccin/remnote/raw/main/frapp%C3%A9/theme.css)
-    3. [🌺 Macchiato](https://github.com/catppuccin/remnote/raw/main/macchiato/theme.css)
-    4. [🌿 Mocha](https://github.com/catppuccin/remnote/raw/main/mocha/theme.css)
-5. ⚠ Make sure to set your interface theme Setting to `Light` if you use the Latte Theme and to `Dark` for the other themes
-
-> If custom CSS is preventing the loading of remnote, visit <http://www.remnote.com/notes?disableCustomCSS> ([From CSS Docs](https://plugins.remnote.com/custom-css))
+2. Navigate to `Plugins and Themes` and check the `Show Themes` box.
+3. Search for your desired theme. (`Catppuccin {Flavor} Theme`)
+4. Click the `Install` button.
+
+⚠ Make sure to set your interface theme Setting to `Light` if you use the Latte Theme and to `Dark` for the other themes
 
 ## 💝 Thanks to
 

diff --git a/assets/manifest.template.json b/assets/manifest.template.json
@@ -8,7 +8,7 @@
 	"version": {
 		"major": 0,
 		"minor": 3,
-		"patch": 2
+		"patch": 3
 	},
 	"theme": ["dark"],
 	"description": "Catppuccin <theme name> Theme for Remnote.",

diff --git a/frappe/manifest.json b/frappe/manifest.json
@@ -8,7 +8,7 @@
 	"version": {
 		"major": 0,
 		"minor": 3,
-		"patch": 2
+		"patch": 3
 	},
 	"theme": ["dark"],
 	"description": "Catppuccin Frappé Theme for Remnote. Requires dark mode.",

diff --git a/frappe/theme.css b/frappe/theme.css
@@ -247,3 +247,59 @@ Originally cloned from https://github.com/ethomasv/RemNoteTheme
 .rn-queue {
 	background: var(--ctp-frappe-surface0);
 }
+.rn-queue {
+	background: var(--ctp-frappe-surface0);
+}
+
+.rn-clr-shadow-menu {
+	background: var(--ctp-frappe-surface0) !important;
+}
+
+.rn-clr-shadow-menu .rn-clr-content-secondary {
+	color: var(--ctp-frappe-text);
+}
+.rn-clr-shadow-menu .rn-clr-content-primary {
+	color: var(--ctp-frappe-text);
+}
+
+.dark .bg-gray-5[data-rem-tags="pdf-highlight"] {
+	background-color: var(--ctp-frappe-base);
+}
+
+.rn-popup__content.relative.rn-clr-background-primary.overflow-y-hidden.overflow-x-hidden {
+	background-color: var(--ctp-frappe-surface0);
+}
+.rn-popup__content.relative.rn-clr-background-primary.overflow-y-hidden {
+	background-color: var(--ctp-frappe-surface0) !important;
+}
+/* redefine highlight colors at level 20 */
+
+.dark .bg-red-20 {
+	background-color: var(--ctp-frappe-red) !important;
+	color: var(--ctp-frappe-red) !important;
+}
+
+.dark .bg-orange-20 {
+	background-color: var(--ctp-frappe-peach) !important;
+	color: var(--ctp-frappe-peach) !important;
+}
+
+.dark .bg-yellow-20 {
+	background-color: var(--ctp-frappe-yellow) !important;
+	color: var(--ctp-frappe-yellow) !important;
+}
+
+.dark .bg-cyan-20 {
+	background-color: var(--ctp-frappe-blue) !important;
+	color: var(--ctp-frappe-blue) !important;
+}
+
+.dark .bg-purple-20 {
+	background-color: var(--ctp-frappe-mauve) !important;
+	color: var(--ctp-frappe-mauve) !important;
+}
+
+.dark .bg-mint-20 {
+	background-color: var(--ctp-frappe-green) !important;
+	color: var(--ctp-frappe-green) !important;
+}
diff --git a/latte/manifest.json b/latte/manifest.json
@@ -8,7 +8,7 @@
 	"version": {
 		"major": 0,
 		"minor": 3,
-		"patch": 2
+		"patch": 3
 	},
 	"theme": ["light"],
 	"description": "Catppuccin Latte Theme for Remnote. Requires light mode.",

diff --git a/latte/theme.css b/latte/theme.css
@@ -247,3 +247,59 @@ Originally cloned from https://github.com/ethomasv/RemNoteTheme
 .rn-queue {
 	background: var(--ctp-latte-surface0);
 }
+.rn-queue {
+	background: var(--ctp-latte-surface0);
+}
+
+.rn-clr-shadow-menu {
+	background: var(--ctp-latte-surface0) !important;
+}
+
+.rn-clr-shadow-menu .rn-clr-content-secondary {
+	color: var(--ctp-latte-text);
+}
+.rn-clr-shadow-menu .rn-clr-content-primary {
+	color: var(--ctp-latte-text);
+}
+
+.light .bg-gray-5[data-rem-tags="pdf-highlight"] {
+	background-color: var(--ctp-latte-base);
+}
+
+.rn-popup__content.relative.rn-clr-background-primary.overflow-y-hidden.overflow-x-hidden {
+	background-color: var(--ctp-latte-surface0);
+}
+.rn-popup__content.relative.rn-clr-background-primary.overflow-y-hidden {
+	background-color: var(--ctp-latte-surface0) !important;
+}
+/* redefine highlight colors at level 20 */
+
+.light .bg-red-20 {
+	background-color: var(--ctp-latte-red) !important;
+	color: var(--ctp-latte-red) !important;
+}
+
+.light .bg-orange-20 {
+	background-color: var(--ctp-latte-peach) !important;
+	color: var(--ctp-latte-peach) !important;
+}
+
+.light .bg-yellow-20 {
+	background-color: var(--ctp-latte-yellow) !important;
+	color: var(--ctp-latte-yellow) !important;
+}
+
+.light .bg-cyan-20 {
+	background-color: var(--ctp-latte-blue) !important;
+	color: var(--ctp-latte-blue) !important;
+}
+
+.light .bg-purple-20 {
+	background-color: var(--ctp-latte-mauve) !important;
+	color: var(--ctp-latte-mauve) !important;
+}
+
+.light .bg-mint-20 {
+	background-color: var(--ctp-latte-green) !important;
+	color: var(--ctp-latte-green) !important;
+}
diff --git a/macchiato/manifest.json b/macchiato/manifest.json
@@ -8,7 +8,7 @@
 	"version": {
 		"major": 0,
 		"minor": 3,
-		"patch": 2
+		"patch": 3
 	},
 	"theme": ["dark"],
 	"description": "Catppuccin Macchiato Theme for Remnote. Requires dark mode.",

diff --git a/macchiato/theme.css b/macchiato/theme.css
@@ -177,13 +177,19 @@ Originally cloned from https://github.com/ethomasv/RemNoteTheme
 	color: var(--ctp-macchiato-text);
 }
 .dark .highlight-color--orange {
-	background-color: rgba(var(--ctp-macchiato-peach-raw), var(--tw-bg-opacity));
+	background-color: rgba(
+		var(--ctp-macchiato-peach-raw),
+		var(--tw-bg-opacity)
+	);
 	color: var(--ctp-macchiato-text);
 	--tw-bg-opacity: 0.5;
 }
 
 .dark .highlight-color--yellow {
-	background-color: rgba(var(--ctp-macchiato-yellow-raw), var(--tw-bg-opacity));
+	background-color: rgba(
+		var(--ctp-macchiato-yellow-raw),
+		var(--tw-bg-opacity)
+	);
 	color: var(--ctp-macchiato-text);
 	--tw-bg-opacity: 0.5;
 }
@@ -195,13 +201,19 @@ Originally cloned from https://github.com/ethomasv/RemNoteTheme
 }
 
 .dark .highlight-color--purple {
-	background-color: rgba(var(--ctp-macchiato-mauve-raw), var(--tw-bg-opacity));
+	background-color: rgba(
+		var(--ctp-macchiato-mauve-raw),
+		var(--tw-bg-opacity)
+	);
 	color: var(--ctp-macchiato-text);
 	--tw-bg-opacity: 0.5;
 }
 
 .dark .highlight-color--green {
-	background-color: rgba(var(--ctp-macchiato-green-raw), var(--tw-bg-opacity));
+	background-color: rgba(
+		var(--ctp-macchiato-green-raw),
+		var(--tw-bg-opacity)
+	);
 	color: var(--ctp-macchiato-text);
 	--tw-bg-opacity: 0.5;
 }
@@ -247,3 +259,60 @@ Originally cloned from https://github.com/ethomasv/RemNoteTheme
 .rn-queue {
 	background: var(--ctp-macchiato-surface0);
 }
+.rn-queue {
+	background: var(--ctp-macchiato-surface0);
+}
+
+.rn-clr-shadow-menu {
+	background: var(--ctp-macchiato-surface0) !important;
+}
+
+.rn-clr-shadow-menu .rn-clr-content-secondary {
+	color: var(--ctp-macchiato-text);
+}
+.rn-clr-shadow-menu .rn-clr-content-primary {
+	color: var(--ctp-macchiato-text);
+}
+
+.dark .bg-gray-5[data-rem-tags="pdf-highlight"] {
+	background-color: var(--ctp-macchiato-base);
+}
+
+.rn-popup__content.relative.rn-clr-background-primary.overflow-y-hidden.overflow-x-hidden {
+	background-color: var(--ctp-macchiato-surface0);
+}
+.rn-popup__content.relative.rn-clr-background-primary.overflow-y-hidden {
+	background-color: var(--ctp-macchiato-surface0) !important;
+}
+
+/* redefine highlight colors at level 20 */
+
+.dark .bg-red-20 {
+	background-color: var(--ctp-macchiato-red) !important;
+	color: var(--ctp-macchiato-red) !important;
+}
+
+.dark .bg-orange-20 {
+	background-color: var(--ctp-macchiato-peach) !important;
+	color: var(--ctp-macchiato-peach) !important;
+}
+
+.dark .bg-yellow-20 {
+	background-color: var(--ctp-macchiato-yellow) !important;
+	color: var(--ctp-macchiato-yellow) !important;
+}
+
+.dark .bg-cyan-20 {
+	background-color: var(--ctp-macchiato-blue) !important;
+	color: var(--ctp-macchiato-blue) !important;
+}
+
+.dark .bg-purple-20 {
+	background-color: var(--ctp-macchiato-mauve) !important;
+	color: var(--ctp-macchiato-mauve) !important;
+}
+
+.dark .bg-mint-20 {
+	background-color: var(--ctp-macchiato-green) !important;
+	color: var(--ctp-macchiato-green) !important;
+}
diff --git a/mocha/manifest.json b/mocha/manifest.json
@@ -8,7 +8,7 @@
 	"version": {
 		"major": 0,
 		"minor": 3,
-		"patch": 2
+		"patch": 3
 	},
 	"theme": ["dark"],
 	"description": "Catppuccin Mocha Theme for Remnote. Requires dark mode.",

diff --git a/mocha/theme.css b/mocha/theme.css
@@ -247,3 +247,57 @@ Originally cloned from https://github.com/ethomasv/RemNoteTheme
 .rn-queue {
 	background: var(--ctp-mocha-surface0);
 }
+
+.rn-clr-shadow-menu {
+	background: var(--ctp-mocha-surface0) !important;
+}
+
+.rn-clr-shadow-menu .rn-clr-content-secondary {
+	color: var(--ctp-mocha-text);
+}
+.rn-clr-shadow-menu .rn-clr-content-primary {
+	color: var(--ctp-mocha-text);
+}
+
+.dark .bg-gray-5[data-rem-tags="pdf-highlight"] {
+	background-color: var(--ctp-mocha-base);
+}
+
+.rn-popup__content.relative.rn-clr-background-primary.overflow-y-hidden.overflow-x-hidden {
+	background-color: var(--ctp-mocha-surface0);
+}
+.rn-popup__content.relative.rn-clr-background-primary.overflow-y-hidden {
+	background-color: var(--ctp-mocha-surface0) !important;
+}
+
+/* redefine highlight colors at level 20 */
+
+.dark .bg-red-20 {
+	background-color: var(--ctp-mocha-red) !important;
+	color: var(--ctp-mocha-red) !important;
+}
+
+.dark .bg-orange-20 {
+	background-color: var(--ctp-mocha-peach) !important;
+	color: var(--ctp-mocha-peach) !important;
+}
+
+.dark .bg-yellow-20 {
+	background-color: var(--ctp-mocha-yellow) !important;
+	color: var(--ctp-mocha-yellow) !important;
+}
+
+.dark .bg-cyan-20 {
+	background-color: var(--ctp-mocha-blue) !important;
+	color: var(--ctp-mocha-blue) !important;
+}
+
+.dark .bg-purple-20 {
+	background-color: var(--ctp-mocha-mauve) !important;
+	color: var(--ctp-mocha-mauve) !important;
+}
+
+.dark .bg-mint-20 {
+	background-color: var(--ctp-mocha-green) !important;
+	color: var(--ctp-mocha-green) !important;
+}