mirror of
https://github.com/catppuccin/logseq.git
synced 2026-01-21 02:21:42 +08:00
Compare commits
No commits in common. "main" and "v0.5.1" have entirely different histories.
40
.github/ISSUE_TEMPLATE/bug.yml
vendored
40
.github/ISSUE_TEMPLATE/bug.yml
vendored
@ -1,40 +0,0 @@
|
||||
name: Bug Report
|
||||
description: Report your bugs with the theme here!
|
||||
labels: [bug]
|
||||
body:
|
||||
- type: checkboxes
|
||||
attributes:
|
||||
label: Is there an existing issue outlining your problem?
|
||||
description: Please search to see if an issue already exists for your problem.
|
||||
options:
|
||||
- label: I have searched the existing issues and they do not solve my problem.
|
||||
required: true
|
||||
- type: textarea
|
||||
attributes:
|
||||
label: Describe your problem.
|
||||
description: Also tell us what you expect to see.
|
||||
placeholder: The highlighted text color is hard to read...
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
attributes:
|
||||
label: Attach screenshots.
|
||||
description: If applicable, attach screenshots that highlight the issue.
|
||||
- type: input
|
||||
attributes:
|
||||
label: What Logseq version do you see the issue on?
|
||||
description: "You can find your Logseq version under Settings > General > Current Version"
|
||||
placeholder: 0.10.9
|
||||
validations:
|
||||
required: true
|
||||
- type: input
|
||||
attributes:
|
||||
label: What theme version do you see the issue on?
|
||||
description: "You can find your theme version under Plugins > Installed > Themes if installed as a plugin"
|
||||
placeholder: 0.6.3
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
attributes:
|
||||
label: Any additional comments?
|
||||
description: Add any information not covered in the previous sections!
|
||||
5
.github/ISSUE_TEMPLATE/config.yml
vendored
5
.github/ISSUE_TEMPLATE/config.yml
vendored
@ -1,5 +0,0 @@
|
||||
blank_issues_enabled: false
|
||||
contact_links:
|
||||
- name: Community Discord
|
||||
url: https://discord.com/servers/catppuccin-907385605422448742
|
||||
about: Chat to other community members!
|
||||
18
.github/ISSUE_TEMPLATE/meta.yml
vendored
18
.github/ISSUE_TEMPLATE/meta.yml
vendored
@ -1,18 +0,0 @@
|
||||
name: Meta Issue
|
||||
description: Raise any issue regarding the repository here!
|
||||
labels: [meta]
|
||||
body:
|
||||
- type: checkboxes
|
||||
attributes:
|
||||
label: Is there an existing issue outlining your problem?
|
||||
description: Please search to see if an issue already exists for your problem.
|
||||
options:
|
||||
- label: I have searched the existing issues and they do not solve my problem.
|
||||
required: true
|
||||
- type: textarea
|
||||
attributes:
|
||||
label: Describe your issue.
|
||||
description: Bugs should be raised under a [Bug Report](https://github.com/catppuccin/tmux/issues/new?assignees=&labels=bug&template=bug.yml).
|
||||
placeholder: The README is missing crucial information such as...
|
||||
validations:
|
||||
required: true
|
||||
8
.github/workflows/publish.yml
vendored
8
.github/workflows/publish.yml
vendored
@ -9,11 +9,11 @@ jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- uses: actions/checkout@v3
|
||||
with:
|
||||
submodules: 'true'
|
||||
- name: Use Node.js
|
||||
uses: actions/setup-node@v4
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: '16' # You might need to adjust this value to your own version
|
||||
- name: Build
|
||||
@ -26,7 +26,7 @@ jobs:
|
||||
cp README.md package.json index.html index.js ctp-latte.css ctp-frappe.css ctp-macchiato.css ctp-mocha.css ctp-oled.css ${{ env.PLUGIN_NAME }} # move build assets
|
||||
zip -r ${{ env.PLUGIN_NAME }}-${{ github.ref_name }}.zip ${{ env.PLUGIN_NAME }} # create zip
|
||||
- name: Create Release
|
||||
uses: softprops/action-gh-release@v2
|
||||
uses: softprops/action-gh-release@v1
|
||||
id: create_release
|
||||
with:
|
||||
draft: true
|
||||
@ -39,7 +39,7 @@ jobs:
|
||||
ctp-mocha.css
|
||||
ctp-oled.css
|
||||
- name: Deploy
|
||||
uses: peaceiris/actions-gh-pages@v4
|
||||
uses: peaceiris/actions-gh-pages@v3
|
||||
with:
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
publish_dir: ./${{ env.PLUGIN_NAME }}/
|
||||
|
||||
45
README.md
45
README.md
@ -38,30 +38,20 @@
|
||||
<blockquote>Selected Accent: Green</blockquote>
|
||||
</details>
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
> [!WARNING]
|
||||
> Logseq now officially supports accents for its default theme. Catppuccin Theme **DOES NOT** support the new accent colors.
|
||||
> Select **no accent color or Logseq classical color** (one of the first two) for maximum theme compatibility.
|
||||
>
|
||||
> 
|
||||
### Installation
|
||||
|
||||
There are couple of other methods you can use to set the theme up in Logseq. Later methods are more for development purpose.
|
||||
|
||||
### Logseq Plugin Marketplace **(Recommended)**
|
||||
|
||||
1. Search for 'catppuccin' in `Plugins` > `Marketplace` > `Themes` and install the plugin.
|
||||
2. Choose the the appropriate theme variant from `Settings` > `Themes`.
|
||||
1. Logseq Plugin Marketplace **(Recommended)**
|
||||
1. Search for 'catppuccin' in `Plugins` > `Marketplace` > `Themes` and install the plugin.
|
||||
2. Choose the the appropriate theme variant from `Settings` > `Themes`.
|
||||
|
||||
<img src="https://raw.githubusercontent.com/catppuccin/logseq/main/assets/ctp-logseq-marketplace.webp"/>
|
||||
|
||||
|
||||
### Importing external CSS (Recommended for mobile)
|
||||
|
||||
A. Add one of the following lines at the start of your `custom.css` and restart Logseq
|
||||
|
||||
> [!NOTE]
|
||||
> `@import` statement works only when defined at the top of CSS files ([ref](https://developer.mozilla.org/en-US/docs/Web/CSS/@import))
|
||||
2. Editing custom theme: **`custom.css`** (recommended for mobile). Choose one of the following and restart Logseq
|
||||
|
||||
```css
|
||||
@import url('https://logseq.catppuccin.com/ctp-latte.css');
|
||||
@ -70,9 +60,8 @@ A. Add one of the following lines at the start of your `custom.css` and restart
|
||||
@import url('https://logseq.catppuccin.com/ctp-mocha.css');
|
||||
@import url('https://logseq.catppuccin.com/ctp-oled.css');
|
||||
```
|
||||
OR
|
||||
|
||||
B. Add one of the following in your custom `config.edn` ([source](https://github.com/logseq/logseq/blob/master/src/resources/templates/config.edn#97)) and restart Logseq.
|
||||
3. Editing custom configuration: **`config.edn`** ([source](https://github.com/logseq/logseq/blob/master/src/resources/templates/config.edn#97)) Set one of the following in your config and restart Logseq.
|
||||
|
||||
```edn
|
||||
:custom-css-url "@import url('https://logseq.catppuccin.com/ctp-latte.css');"
|
||||
@ -81,20 +70,30 @@ B. Add one of the following in your custom `config.edn` ([source](https://github
|
||||
:custom-css-url "@import url('https://logseq.catppuccin.com/ctp-mocha.css');"
|
||||
```
|
||||
|
||||
## Switching Accent Color
|
||||
4. Add manually from GitHub Releases
|
||||
1. Download `.zip` from latest release.
|
||||
2. Extract it to desired location.
|
||||
3. Enable `Developer Mode` under `Settings` > `Advanced`.
|
||||
4. Use the new `Load unpacked plugin` option under `Plugins`, choosing extracted folder to install the theme.
|
||||
|
||||
This option is only available when the theme installed through the Plugins Marketplace
|
||||
5. Clone Repository and add manually
|
||||
1. Clone repository (including submodules)
|
||||
2. Run `npm ci && npm run build`
|
||||
3. Enable `Developer Mode` under `Settings` > `Advanced`
|
||||
4. Use the new `Load unpacked plugin` option under `Plugins`, choosing repo folder to install the theme.
|
||||
|
||||
### Switching Accent Color
|
||||
|
||||
1. Theme settings can be accessed under `Settings` > `Plugins` > `Catppuccin`
|
||||
2. Select an accent color from the dropdown under `CtpAccent` setting.
|
||||
2. Select an accent color of choice from the dropdown under `CtpAccent` setting.
|
||||
|
||||
<img src="https://raw.githubusercontent.com/catppuccin/logseq/main/assets/ctp-logseq-switch-accent.webp"/>
|
||||
|
||||
## Bonus: Oledppuccin
|
||||
### Bonus: Oledppuccin
|
||||
|
||||
> The _niche_ dark side
|
||||
|
||||
You can choose this dark theme variant under `Settings` > `Themes`.
|
||||
You can choose this variant of dark theme under `Settings` > `Themes`.
|
||||
|
||||
<img src="https://raw.githubusercontent.com/catppuccin/logseq/main/assets/ctp-oledppuccin.webp"/>
|
||||
|
||||
|
||||
31
index.js
31
index.js
@ -29,24 +29,8 @@ const settings = [
|
||||
enumChoices: accentNames,
|
||||
default: "Full palette"
|
||||
},
|
||||
{
|
||||
key: "CtpWhiteboard",
|
||||
title: "Override Whiteboard theme to light theme?",
|
||||
description: " Override whiteboard theme to use Latte theme flavor",
|
||||
type: "boolean",
|
||||
default: false,
|
||||
},
|
||||
];
|
||||
|
||||
function setWhiteboardOverride(bool) {
|
||||
const rootContainer = parent.document.querySelector(`html`);
|
||||
if (bool) {
|
||||
rootContainer.classList.add('whiteboard-latte');
|
||||
} else {
|
||||
rootContainer.classList.remove('whiteboard-latte');
|
||||
}
|
||||
}
|
||||
|
||||
function setAccent(accentName) {
|
||||
logseq.provideStyle({
|
||||
key: 'ctp-accent',
|
||||
@ -54,18 +38,6 @@ function setAccent(accentName) {
|
||||
:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
|
||||
--ctp-accent: ${accentMap[accentName]};
|
||||
}
|
||||
html.whiteboard-latte div.whiteboard-page {
|
||||
--ctp-accent: ${accentMap[accentName]};
|
||||
}
|
||||
html.whiteboard-latte div.dashboard-card {
|
||||
--ctp-accent: ${accentMap[accentName]};
|
||||
}
|
||||
html.whiteboard-latte div.tl-tooltip-content {
|
||||
--ctp-accent: ${accentMap[accentName]};
|
||||
}
|
||||
html.whiteboard-latte div.tl-select-input-content {
|
||||
--ctp-accent: ${accentMap[accentName]};
|
||||
}
|
||||
`,
|
||||
});
|
||||
}
|
||||
@ -82,9 +54,6 @@ async function main() {
|
||||
if (setAccent(updatedSettings.CtpAccent)) {
|
||||
console.log(`Applied ${updatedSettings.CtpAccent} accent✨`);
|
||||
}
|
||||
if (setWhiteboardOverride(updatedSettings.CtpWhiteboard)) {
|
||||
console.log(`${updatedSettings.CtpWhiteboard ? 'Applied' : 'Removed'} Latte whiteboard flavor✨`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
1535
package-lock.json
generated
1535
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "logseq-catppuccin",
|
||||
"version": "0.6.4",
|
||||
"version": "0.2.3",
|
||||
"description": "🦫 Soothing pastel theme for Logseq",
|
||||
"main": "index.html",
|
||||
"scripts": {
|
||||
@ -20,9 +20,9 @@
|
||||
},
|
||||
"homepage": "https://github.com/catppuccin/logseq#readme",
|
||||
"devDependencies": {
|
||||
"@catppuccin/highlightjs": "^1.0.0",
|
||||
"@catppuccin/highlightjs": "^0.1.4",
|
||||
"@catppuccin/palette": "^1.1.0",
|
||||
"rimraf": "^6.0.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"sass": "^1.55.0"
|
||||
},
|
||||
"logseq": {
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
|
||||
"extends": [
|
||||
"local>catppuccin/renovate-config"
|
||||
]
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
@mixin variables {
|
||||
// following are custom ctp variables mapped to logseq variables
|
||||
:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
|
||||
// following are mapped to variables used in logseq
|
||||
--ctp-primary-background-color: rgb(var(--ctp-base));
|
||||
--ctp-secondary-background-color: rgb(var(--ctp-mantle));
|
||||
--ctp-tertiary-background-color: rgb(var(--ctp-crust));
|
||||
@ -45,7 +45,7 @@
|
||||
--ctp-block-highlight-color: var(--color-base-30);
|
||||
|
||||
--ctp-selection-background-color: rgba(var(--ctp-yellow, 0.9));
|
||||
--ctp-selection-text-color: var(--color-base-00);
|
||||
--ctp-selection-text-color: rgb(var(--color-base-00));
|
||||
|
||||
--ctp-page-checkbox-color: rgb(var(--ctp-accent, var(--ctp-blue)));
|
||||
--ctp-page-checkbox-border-color: var(--ctp-primary-background-color);
|
||||
@ -94,6 +94,49 @@
|
||||
--ctp-success-color: var(--ctp-green);
|
||||
--ctp-info-color: var(--ctp-yellow);
|
||||
|
||||
/* Whiteboard */
|
||||
|
||||
/* Whiteboard object colors */
|
||||
|
||||
--ctp-wb-background-color-gray: color-mix(in srgb, rgb(var(--ctp-gray)), rgb(var(--ctp-base)) 60%);
|
||||
--ctp-wb-background-color-red: color-mix(in srgb, rgb(var(--ctp-red)), rgb(var(--ctp-base)) 60%);
|
||||
--ctp-wb-background-color-yellow: color-mix(in srgb, rgb(var(--ctp-yellow)), rgb(var(--ctp-base)) 60%);
|
||||
--ctp-wb-background-color-green: color-mix(in srgb, rgb(var(--ctp-green)), rgb(var(--ctp-base)) 60%);
|
||||
--ctp-wb-background-color-blue: color-mix(in srgb, rgb(var(--ctp-blue)), rgb(var(--ctp-base)) 60%);
|
||||
--ctp-wb-background-color-purple: color-mix(in srgb, rgb(var(--ctp-mauve)), rgb(var(--ctp-base)) 60%);
|
||||
--ctp-wb-background-color-pink: color-mix(in srgb, rgb(var(--ctp-pink)), rgb(var(--ctp-base)) 60%);
|
||||
|
||||
// NOTE: drawn lines with the pencil use the text color
|
||||
// and not this stroke color
|
||||
--ctp-wb-stroke-color-gray: rgb(var(--ctp-overlay2));
|
||||
--ctp-wb-stroke-color-red: rgb(var(--ctp-red));
|
||||
--ctp-wb-stroke-color-yellow: rgb(var(--ctp-yellow));
|
||||
--ctp-wb-stroke-color-green: rgb(var(--ctp-green));
|
||||
--ctp-wb-stroke-color-blue: rgb(var(--ctp-blue));
|
||||
--ctp-wb-stroke-color-purple: rgb(var(--ctp-mauve));
|
||||
--ctp-wb-stroke-color-pink: rgb(var(--ctp-pink));
|
||||
|
||||
--ctp-wb-text-color-gray: rgb(var(--ctp-overlay2));
|
||||
--ctp-wb-text-color-red: rgb(var(--ctp-red));
|
||||
--ctp-wb-text-color-yellow: rgb(var(--ctp-yellow));
|
||||
--ctp-wb-text-color-green: rgb(var(--ctp-green));
|
||||
--ctp-wb-text-color-blue: rgb(var(--ctp-blue));
|
||||
--ctp-wb-text-color-purple: rgb(var(--ctp-mauve));
|
||||
--ctp-wb-text-color-pink: rgb(var(--ctp-pink));
|
||||
|
||||
// since text and lines share a color, it is not possible to have a fill color
|
||||
// with the regular ctp colors
|
||||
// so the options are to either shade the fill/bg color or
|
||||
// override the text color variable inside the shape labels
|
||||
|
||||
--ctp-wb-shape-label-color-gray: rgb(var(--ctp-gray));
|
||||
--ctp-wb-shape-label-color-red: rgb(var(--ctp-red));
|
||||
--ctp-wb-shape-label-color-yellow: rgb(var(--ctp-yellow));
|
||||
--ctp-wb-shape-label-color-green: rgb(var(--ctp-green));
|
||||
--ctp-wb-shape-label-color-blue: var(--ctp-blue);
|
||||
--ctp-wb-shape-label-color-purple: rgb(var(--ctp-purple));
|
||||
--ctp-wb-shape-label-color-pink: rgb(var(--ctp-pink));
|
||||
|
||||
// following used in _custom.scss
|
||||
|
||||
// Switches
|
||||
@ -120,7 +163,7 @@
|
||||
--ctp-dropdown-border-color: var(--color-base-50);
|
||||
|
||||
// Full accent overrides
|
||||
--ctp-text-bold: var(--ctp-primary-text-color);
|
||||
--ctp-text-bold: var(var(--ctp-primary-text-color));
|
||||
--ctp-text-heading: var(--ctp-accent, var(--ctp-lavender));
|
||||
--ctp-text-italics: var(--ctp-accent, var(--ctp-green));
|
||||
--ctp-text-underline: var(--ctp-primary-text-color);
|
||||
@ -128,6 +171,33 @@
|
||||
--ctp-blockquote-line: var(--ctp-accent);
|
||||
--ctp-active-setting: var(--ctp-accent, var(--ctp-blue));
|
||||
|
||||
// Whiteboard Buttons
|
||||
|
||||
// selected tool button
|
||||
--ctp-wb-button-selected-foreground: var(--ctp-accent, var(--ctp-mauve));
|
||||
--ctp-wb-button-selected-background: var(--ctp-surface0);
|
||||
|
||||
// regular tool button
|
||||
--ctp-wb-button-foreground: var(--ctp-text);
|
||||
--ctp-wb-button-menu-foreground: var(--ctp-accent, var(--ctp-teal));
|
||||
|
||||
// double click or "add block or page" from toolbar -> bottom icons
|
||||
--ctp-wb-button-type-tag-background-active: var(--ctp-accent, var(--ctp-mauve));
|
||||
--ctp-wb-button-type-tag-background-inactive: var(--ctp-surface0);
|
||||
--ctp-wb-button-type-tag-foreground: var(--ctp-text);
|
||||
|
||||
// page reference block -> hover -> below button to referenced page
|
||||
--ctp-wb-quick-links-button: var(--ctp-accent, var(--ctp-blue));
|
||||
--ctp-wb-quick-links-button-hover: var(--ctp-sky);
|
||||
|
||||
// select multiple objects -> right click -> align buttons on top
|
||||
--ctp-wb-layout-button-foreground: var(--ctp-accent, var(--ctp-teal));
|
||||
|
||||
// selected item bg in e.g. a dropdown
|
||||
--ctp-tl-select-input-select-item: var(--ctp-surface2);
|
||||
--ctp-tl-selectFill: var(--ctp-accent, var(--ctp-blue));
|
||||
--ctp-tl-selectStroke: var(--ctp-accent, var(--ctp-blue));
|
||||
|
||||
// priorites variables
|
||||
--ctp-priority-bg-color: var(--ctp-crust);
|
||||
--ctp-priority-todo: var(--ctp-teal);
|
||||
@ -145,8 +215,4 @@
|
||||
--ctp-marker-size: 16px;
|
||||
}
|
||||
|
||||
:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
|
||||
@include variables;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -4,9 +4,6 @@ html[data-theme=dark][data-color='logseq'],
|
||||
html[data-color='none'] {
|
||||
// place for selection to customise elements not supported by default variables
|
||||
|
||||
#left-sidebar {
|
||||
background-color: var(--ctp-secondary-background-color);
|
||||
}
|
||||
// Search bar placeholder
|
||||
div.input-wrap>input::placeholder {
|
||||
color: var(--ctp-search-input-placeholder);
|
||||
@ -45,7 +42,7 @@ html[data-color='none'] {
|
||||
background-color: rgb(var(--ctp-button-background));
|
||||
}
|
||||
|
||||
&.as-ghost:hover, &:hover {
|
||||
&:hover {
|
||||
background-color: rgb(var(--ctp-button-background));
|
||||
}
|
||||
}
|
||||
@ -186,6 +183,11 @@ html[data-color='none'] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// selection
|
||||
::selection {
|
||||
color: var(--ls-text-on-accent);
|
||||
}
|
||||
|
||||
.inline.with-bg-color {
|
||||
color: var(--ctp-primary-background-color);
|
||||
|
||||
@ -230,12 +232,8 @@ html[data-color='none'] {
|
||||
background-color: var(--ctp-menu-hover-color);
|
||||
}
|
||||
|
||||
.menu-link.chosen {
|
||||
background-color: var(--ls-menu-hover-color);
|
||||
}
|
||||
|
||||
.cp__settings-inner>aside ul>li>a>strong {
|
||||
color: var(--ctp-primary-text-color);
|
||||
color: rgb(var(--ctp-primary-text-color));
|
||||
}
|
||||
|
||||
.cp__settings-inner>aside ul>li.active {
|
||||
@ -247,7 +245,7 @@ html[data-color='none'] {
|
||||
}
|
||||
|
||||
.cp__all_pages_table td>span {
|
||||
color: var(--ctp-primary-text-color);
|
||||
color: rgb(var(--ctp-primary-text-color));
|
||||
}
|
||||
|
||||
// full pallete overrides
|
||||
@ -259,7 +257,7 @@ html[data-color='none'] {
|
||||
|
||||
b,
|
||||
strong {
|
||||
color: var(--ctp-text-bold);
|
||||
color: rgb(var(--ctp-text-bold));
|
||||
}
|
||||
|
||||
i {
|
||||
@ -302,6 +300,108 @@ html[data-color='none'] {
|
||||
background: var(--ctp-tertiary-background-color);
|
||||
}
|
||||
|
||||
|
||||
// Whiteboard
|
||||
|
||||
// Whiteboard tool button
|
||||
.tl-button[data-selected=true] {
|
||||
background: rgb(var(--ctp-wb-button-selected-background));
|
||||
|
||||
i {
|
||||
color: rgb(var(--ctp-wb-button-selected-foreground));
|
||||
}
|
||||
}
|
||||
|
||||
.ti,
|
||||
.tie {
|
||||
color: rgb(var(--ctp-wb-button-foreground));
|
||||
}
|
||||
|
||||
.tl-context-bar {
|
||||
|
||||
.ti,
|
||||
.tie {
|
||||
color: rgb(var(--ctp-wb-button-menu-foreground));
|
||||
}
|
||||
}
|
||||
|
||||
// double click or "add block or page" from toolbar -> icons
|
||||
// by default, bg color is hardcoded
|
||||
.tl-type-tag {
|
||||
background-color: rgb(var(--ctp-wb-button-type-tag-background-inactive));
|
||||
border-color: rgb(var(--ctp-wb-button-type-tag-background-inactive));
|
||||
// color: #ff00ff; // fg color has to be set on inner i element (.tie)
|
||||
|
||||
.tie {
|
||||
color: rgb(var(--ctp-wb-button-type-tag-foreground));
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme=dark] .tl-type-tag[data-active=true] {
|
||||
|
||||
background-color: rgba(var(--ctp-wb-button-type-tag-background-active), 0.8);
|
||||
|
||||
border-color: rgb(var(--ctp-wb-button-type-tag-background-active));
|
||||
|
||||
.tie {
|
||||
color: rgb(var(--ctp-wb-button-type-tag-foreground));
|
||||
}
|
||||
}
|
||||
|
||||
// Whiteboard context menu button icon
|
||||
.tl-menu-item i {
|
||||
color: rgb(var(--ctp-wb-button-menu-foreground));
|
||||
}
|
||||
|
||||
// Button that appears below a page reference block (on hover)
|
||||
.tl-quick-links-row:first-child {
|
||||
background-color: rgb(var(--ctp-wb-quick-links-button));
|
||||
|
||||
:hover {
|
||||
background-color: rgb(var(--ctp-wb-quick-links-button-hover));
|
||||
}
|
||||
}
|
||||
|
||||
// selected item bg in e.g. a dropdown
|
||||
.tl-select-input-select-item[data-state=checked] {
|
||||
background: rgb(var(--ctp-tl-select-input-select-item));
|
||||
}
|
||||
|
||||
// align-buttons that appear when right clicking after
|
||||
// selecting multiple objects
|
||||
i[class*="ti-layout-"] {
|
||||
color: rgb(var(--ctp-wb-layout-button-foreground));
|
||||
}
|
||||
|
||||
// these are the colors that appear when selecting a color (e.g. for fill)
|
||||
.bg-gray-500 {
|
||||
background-color: rgb(var(--ctp-gray));
|
||||
}
|
||||
|
||||
.bg-red-500 {
|
||||
background-color: rgb(var(--ctp-red));
|
||||
}
|
||||
|
||||
.bg-yellow-500 {
|
||||
background-color: rgb(var(--ctp-yellow));
|
||||
}
|
||||
|
||||
.bg-green-500 {
|
||||
background-color: rgb(var(--ctp-green));
|
||||
}
|
||||
|
||||
.bg-blue-500 {
|
||||
background-color: rgb(var(--ctp-blue));
|
||||
}
|
||||
|
||||
.bg-purple-500 {
|
||||
background-color: rgb(var(--ctp-mauve));
|
||||
}
|
||||
|
||||
.bg-pink-500 {
|
||||
background-color: rgb(var(--ctp-pink));
|
||||
}
|
||||
|
||||
// Priorities custom styles
|
||||
|
||||
.block-marker {
|
||||
@ -403,9 +503,6 @@ html[data-color='none'] {
|
||||
.sidebar-item-header .item-actions {
|
||||
button {
|
||||
background-color: transparent;
|
||||
.ui__icon {
|
||||
color: var(--ctp-primary-text-color);
|
||||
}
|
||||
}
|
||||
button:hover {
|
||||
background-color: var(--ctp-menu-hover-color);
|
||||
@ -414,9 +511,6 @@ html[data-color='none'] {
|
||||
div.favorites, div.recent {
|
||||
button.ui__button {
|
||||
background: transparent;
|
||||
&.as-ghost:hover, &:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
span.ui__icon {
|
||||
color: var(--ctp-primary-text-color);
|
||||
@ -479,70 +573,19 @@ html[data-color='none'] {
|
||||
|
||||
}
|
||||
|
||||
.tl-container {
|
||||
--ls-primary-background-color: var(--ctp-primary-background-color);
|
||||
--ls-secondary-background-color: var(--ctp-secondary-background-color);
|
||||
--ls-tertiary-background-color: var(--ctp-tertiary-background-color);
|
||||
--ls-quaternary-background-color: var(--ctp-quaternary-background-color);
|
||||
}
|
||||
|
||||
.tl-button:hover {
|
||||
background-color: var(--ctp-tertiary-background-color);
|
||||
}
|
||||
|
||||
.cp__themes-installed .it.is-active, .cp__themes-installed .it:hover {
|
||||
background-color: var(--ctp-menu-hover-color);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.search-results {
|
||||
.text-gray-12 {
|
||||
color: var(--ctp-primary-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.input-wrap > input {
|
||||
background-color: var(--ls-primary-background-color);
|
||||
border-color: var(--ls-border-color);
|
||||
color: var(--ls-primary-text-color);
|
||||
}
|
||||
|
||||
/* #35 make bold+italics text color same as italics */
|
||||
i b {
|
||||
color: rgb(var(--ctp-text-italics));
|
||||
}
|
||||
|
||||
/* #35 make plugin icons in header consistent with other icons in header */
|
||||
.ui-items-container,
|
||||
.toolbar-plugin-manager {
|
||||
.button {
|
||||
color: var(--ls-header-button-background);
|
||||
|
||||
i {
|
||||
color: var(--ls-header-button-background);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: rgb(var(--ctp-accent, var(--ctp-pink)));
|
||||
background-color: var(--ctp-header-icon-background);
|
||||
|
||||
i, span.ui__icon {
|
||||
color: rgb(var(--ctp-accent, var(--ctp-pink)));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* #32 theme search modal */
|
||||
.ui__modal[label="ls-modal-search"] {
|
||||
color: var(--ctp-primary-text-color);
|
||||
// TODO: port all the new design system variables once its stable
|
||||
.text-gray-12, .text-gray-11, input {
|
||||
color: var(--ctp-primary-text-color);
|
||||
}
|
||||
input::placeholder {
|
||||
color: var(--ctp-primary-text-color);
|
||||
opacity: .75;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.cp__settings-inner {
|
||||
min-height: 70dvh;
|
||||
max-height: 70dvh;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--ls-selection-background-color);
|
||||
color: var(--ls-selection-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
@use "@catppuccin/highlightjs/sass/catppuccin-variables";
|
||||
@use "@catppuccin/highlightjs/sass/catppuccin.variables";
|
||||
|
||||
html:not(html[data-color]), html[data-color='logseq'], html[data-color='none'] {
|
||||
code.hljs {
|
||||
background-color: var(--ctp-tertiary-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,12 @@
|
||||
@mixin variables {
|
||||
// Source: https://github.com/logseq/logseq/blob/master/resources/css/common.css
|
||||
.light-theme,
|
||||
.dark-theme,
|
||||
html:not(html[data-color]),
|
||||
html[data-theme='dark'][data-color='logseq'],
|
||||
html[data-theme='light'][data-color='logseq'],
|
||||
html[data-theme='dark'],
|
||||
html[data-theme='light'],
|
||||
html[data-color='none'] {
|
||||
--ls-primary-background-color: var(--ctp-primary-background-color);
|
||||
--ls-secondary-background-color: var(--ctp-secondary-background-color);
|
||||
--ls-tertiary-background-color: var(--ctp-tertiary-background-color);
|
||||
@ -93,26 +101,60 @@
|
||||
|
||||
--ls-left-sidebar-active-background: var(--ctp-color-level-4);
|
||||
|
||||
/* Whiteboard */
|
||||
|
||||
/* Whiteboard object colors */
|
||||
|
||||
--ls-wb-background-color-gray: var(--ctp-wb-background-color-gray);
|
||||
--ls-wb-background-color-red: var(--ctp-wb-background-color-red);
|
||||
--ls-wb-background-color-yellow: var(--ctp-wb-background-color-yellow);
|
||||
--ls-wb-background-color-green: var(--ctp-wb-background-color-green);
|
||||
--ls-wb-background-color-blue: var(--ctp-wb-background-color-blue);
|
||||
--ls-wb-background-color-purple: var(--ctp-wb-background-color-purple);
|
||||
--ls-wb-background-color-pink: var(--ctp-wb-background-color-pink);
|
||||
|
||||
--ls-wb-stroke-color-gray: var(--ctp-wb-stroke-color-gray);
|
||||
--ls-wb-stroke-color-red: var(--ctp-wb-stroke-color-red);
|
||||
--ls-wb-stroke-color-yellow: var(--ctp-wb-stroke-color-yellow);
|
||||
--ls-wb-stroke-color-green: var(--ctp-wb-stroke-color-green);
|
||||
--ls-wb-stroke-color-blue: var(--ctp-wb-stroke-color-blue);
|
||||
--ls-wb-stroke-color-purple: var(--ctp-wb-stroke-color-purple);
|
||||
--ls-wb-stroke-color-pink: var(--ctp-wb-stroke-color-pink);
|
||||
|
||||
--ls-wb-text-color-gray: var(--ctp-wb-text-color-gray);
|
||||
--ls-wb-text-color-red: var(--ctp-wb-text-color-red);
|
||||
--ls-wb-text-color-yellow: var(--ctp-wb-text-color-yellow);
|
||||
--ls-wb-text-color-green: var(--ctp-wb-text-color-green);
|
||||
--ls-wb-text-color-blue: var(--ctp-wb-text-color-blue);
|
||||
--ls-wb-text-color-purple: var(--ctp-wb-text-color-purple);
|
||||
--ls-wb-text-color-pink: var(--ctp-wb-text-color-pink);
|
||||
|
||||
--ls-color-file-sync-error: rgb(var(--ctp-red));
|
||||
--ls-color-file-sync-pending: rgb(var(--ctp-yellow));
|
||||
--ls-color-file-sync-idle: rgb(var(--ctp-green));
|
||||
}
|
||||
|
||||
// Source: https://github.com/logseq/logseq/blob/master/resources/css/common.css
|
||||
html:not(html[data-color]),
|
||||
html[data-theme='dark'][data-color='logseq'],
|
||||
html[data-theme='light'][data-color='logseq'],
|
||||
html[data-theme='dark'],
|
||||
html[data-theme='light'],
|
||||
html[data-color='none'] {
|
||||
@include variables;
|
||||
}
|
||||
|
||||
:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
|
||||
--ls-error-color: var(--ctp-error-color);
|
||||
--ls-warning-color: var(--ctp-warning-color);
|
||||
--ls-success-color: var(--ctp-success-color);
|
||||
--ls-text-on-accent: rgb(var(--ctp-text));
|
||||
|
||||
.logseq-tldraw {
|
||||
--tl-selectFill: rgba(var(--ctp-tl-selectFill), 0.05);
|
||||
--tl-selectStroke: rgb(var(--ctp-tl-selectStroke));
|
||||
}
|
||||
|
||||
.tl-text-label-inner-wrapper {
|
||||
// this is for overriding the text colors inside shapes (e.g. the label color of a rectangle)
|
||||
--ls-wb-text-color-gray: var(--ctp-wb-shape-label-color-gray);
|
||||
--ls-wb-text-color-red: var(--ctp-wb-shape-label-color-red);
|
||||
--ls-wb-text-color-yellow: var(--ctp-wb-shape-label-color-yellow);
|
||||
--ls-wb-text-color-green: var(--ctp-wb-shape-label-color-green);
|
||||
--ls-wb-text-color-blue: var(--ctp-wb-shape-label-color-blue);
|
||||
--ls-wb-text-color-purple: var(--ctp-wb-shape-label-color-purple);
|
||||
--ls-wb-text-color-pink: var(--ctp-wb-shape-label-color-pink);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
@ -12,25 +12,13 @@
|
||||
--muted: 192 100% 13%;
|
||||
--card: 192 100% 10%;
|
||||
--card-foreground: 0 0% 95%;
|
||||
--popover: 192 100% 11%;
|
||||
--input: 203 35% 25%;
|
||||
*/
|
||||
--popover: var(--ctp-mantle-hsl);
|
||||
--border: var(--ctp-surface0-hsl);
|
||||
|
||||
--lx-popover-bg: var(--ctp-secondary-background-color);
|
||||
}
|
||||
:root:not([data-color]), :root[data-color='none'] {
|
||||
.light-theme,
|
||||
.white-theme {
|
||||
--color-level-1: var(--color-base-10);
|
||||
--color-level-2: var(--color-base-20);
|
||||
--color-level-3: var(--color-base-30);
|
||||
--color-level-4: var(--color-base-40);
|
||||
--color-level-5: var(--color-base-50);
|
||||
--color-level-6: var(--color-base-60);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
html[data-color=logseq][data-theme=light] {
|
||||
/*
|
||||
|
||||
@ -5,4 +5,3 @@
|
||||
@use "custom.scss";
|
||||
@use "codemirror.scss";
|
||||
@use "highlightjs.scss";
|
||||
@use "whiteboard.scss";
|
||||
@ -1,4 +1,4 @@
|
||||
@mixin variables {
|
||||
:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
|
||||
// darkest -> lightest (dark theme)
|
||||
--color-base-00: rgb(var(--ctp-crust));
|
||||
--color-base-10: rgb(var(--ctp-mantle));
|
||||
@ -11,9 +11,4 @@
|
||||
--color-base-80: rgb(var(--ctp-overlay2));
|
||||
--color-base-90: rgb(var(--ctp-subtext0));
|
||||
--color-base-100: rgb(var(--ctp-text));
|
||||
}
|
||||
|
||||
|
||||
:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
|
||||
@include variables;
|
||||
}
|
||||
@ -1,36 +1,26 @@
|
||||
@use "@catppuccin/palette/scss/catppuccin" as catppuccin;
|
||||
@use 'sass:math';
|
||||
@use "sass:map";
|
||||
|
||||
@function strip-unit($value) {
|
||||
@return math.div($value, ($value * 0 + 1));
|
||||
}
|
||||
|
||||
@function hex-to-hsl($hexColor) {
|
||||
@return #{math.round(strip-unit(hue($hexColor)))}, #{math.round(saturation($hexColor))}, #{math.round(lightness($hexColor))};
|
||||
@return #{math.round(strip-unit(hue($hexColor)))}, #{math.round(saturation($hexColor))}, #{math.round(lightness($hexColor))}
|
||||
}
|
||||
|
||||
@function hex-to-rgb($hexColor) {
|
||||
@return #{red($hexColor)}, #{green($hexColor)}, #{blue($hexColor)};
|
||||
}
|
||||
|
||||
@function get-flavor-color($flavor, $name) {
|
||||
$map: map.get(catppuccin.$palette, $flavor);
|
||||
@return map.get($map, $name);
|
||||
}
|
||||
|
||||
@function get-flavor-color-rgb($flavor, $name) {
|
||||
@return #{hex-to-rgb(get-flavor-color($flavor, $name))};
|
||||
@return #{red($hexColor)}, #{green($hexColor)}, #{blue($hexColor)}
|
||||
}
|
||||
|
||||
@mixin ctp-hsl-vars ($flavor) {
|
||||
@each $color, $hex in map.get(catppuccin.$palette, $flavor) {
|
||||
@each $color, $hex in map-get(catppuccin.$palette, $flavor) {
|
||||
--ctp-#{$color}-hsl: #{hex-to-hsl($hex)};
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ctp-rgb-vars ($flavor) {
|
||||
@each $color, $hex in map.get(catppuccin.$palette, $flavor) {
|
||||
@each $color, $hex in map-get(catppuccin.$palette, $flavor) {
|
||||
--ctp-#{$color}: #{hex-to-rgb($hex)};
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,294 +0,0 @@
|
||||
@use "utils.scss" as utils;
|
||||
@use "ctp-vars" as ctp;
|
||||
@use "ls-vars" as ls;
|
||||
@use "theme" as theme;
|
||||
|
||||
@mixin latte-override-vars {
|
||||
@include utils.ctp-rgb-vars(latte);
|
||||
@include utils.ctp-hsl-vars(latte);
|
||||
@include ctp.variables;
|
||||
@include ls.variables;
|
||||
@include theme.variables;
|
||||
}
|
||||
|
||||
@mixin variables {
|
||||
/* Color swatches */
|
||||
--ctp-wb-color-gray: rgb(var(--ctp-overlay2));
|
||||
--ctp-wb-color-red: rgb(var(--ctp-red));
|
||||
--ctp-wb-color-yellow: rgb(var(--ctp-yellow));
|
||||
--ctp-wb-color-green: rgb(var(--ctp-green));
|
||||
--ctp-wb-color-blue: rgb(var(--ctp-blue));
|
||||
--ctp-wb-color-purple: rgb(var(--ctp-mauve));
|
||||
--ctp-wb-color-pink: rgb(var(--ctp-pink));
|
||||
|
||||
/* Whiteboard object colors */
|
||||
--ctp-wb-background-color-gray: color-mix(in srgb, var(--ctp-wb-color-gray), rgb(var(--ctp-base)) 70%);
|
||||
--ctp-wb-background-color-red: color-mix(in srgb, var(--ctp-wb-color-red), rgb(var(--ctp-base)) 60%);
|
||||
--ctp-wb-background-color-yellow: color-mix(in srgb, var(--ctp-wb-color-yellow), rgb(var(--ctp-base)) 60%);
|
||||
--ctp-wb-background-color-green: color-mix(in srgb, var(--ctp-wb-color-green), rgb(var(--ctp-base)) 60%);
|
||||
--ctp-wb-background-color-blue: color-mix(in srgb, var(--ctp-wb-color-blue), rgb(var(--ctp-base)) 60%);
|
||||
--ctp-wb-background-color-purple: color-mix(in srgb, var(--ctp-wb-color-purple), rgb(var(--ctp-base)) 60%);
|
||||
--ctp-wb-background-color-pink: color-mix(in srgb, var(--ctp-wb-color-pink), rgb(var(--ctp-base)) 60%);
|
||||
|
||||
// NOTE: drawn lines with the pencil use the text color
|
||||
// and not this stroke color
|
||||
--ctp-wb-stroke-color-gray: var(--ctp-wb-color-gray);
|
||||
--ctp-wb-stroke-color-red: var(--ctp-wb-color-red);
|
||||
--ctp-wb-stroke-color-yellow: var(--ctp-wb-color-yellow);
|
||||
--ctp-wb-stroke-color-green: var(--ctp-wb-color-green);
|
||||
--ctp-wb-stroke-color-blue: var(--ctp-wb-color-blue);
|
||||
--ctp-wb-stroke-color-purple: var(--ctp-wb-color-purple);
|
||||
--ctp-wb-stroke-color-pink: var(--ctp-wb-color-pink);
|
||||
|
||||
/* Pen path color */
|
||||
--ctp-wb-text-color-gray: var(--ctp-wb-color-gray);
|
||||
--ctp-wb-text-color-red: var(--ctp-wb-color-red);
|
||||
--ctp-wb-text-color-yellow: var(--ctp-wb-color-yellow);
|
||||
--ctp-wb-text-color-green: var(--ctp-wb-color-green);
|
||||
--ctp-wb-text-color-blue: var(--ctp-wb-color-blue);
|
||||
--ctp-wb-text-color-purple: var(--ctp-wb-color-purple);
|
||||
--ctp-wb-text-color-pink: var(--ctp-wb-color-pink);
|
||||
|
||||
/* Shape label color */
|
||||
--ctp-wb-shape-label-color-gray: var(--ctp-wb-color-gray);
|
||||
--ctp-wb-shape-label-color-red: var(--ctp-wb-color-red);
|
||||
--ctp-wb-shape-label-color-yellow: var(--ctp-wb-color-yellow);
|
||||
--ctp-wb-shape-label-color-green: var(--ctp-wb-color-green);
|
||||
--ctp-wb-shape-label-color-blue: var(--ctp-wb-color-blue);
|
||||
--ctp-wb-shape-label-color-purple: var(--ctp-wb-color-purple);
|
||||
--ctp-wb-shape-label-color-pink: var(--ctp-wb-color-pink);
|
||||
|
||||
// Whiteboard Buttons
|
||||
|
||||
// selected tool button
|
||||
--ctp-wb-button-selected-foreground: var(--ctp-accent, var(--ctp-mauve));
|
||||
--ctp-wb-button-selected-background: var(--ctp-surface0);
|
||||
|
||||
// regular tool button
|
||||
--ctp-wb-button-foreground: var(--ctp-text);
|
||||
--ctp-wb-button-menu-foreground: var(--ctp-accent, var(--ctp-teal));
|
||||
|
||||
// double click or "add block or page" from toolbar -> bottom icons
|
||||
--ctp-wb-button-type-tag-background-active: var(--ctp-accent, var(--ctp-mauve));
|
||||
--ctp-wb-button-type-tag-background-inactive: var(--ctp-surface0);
|
||||
--ctp-wb-button-type-tag-foreground: var(--ctp-text);
|
||||
|
||||
// page reference block -> hover -> below button to referenced page
|
||||
--ctp-wb-quick-links-button: var(--ctp-accent, var(--ctp-blue));
|
||||
--ctp-wb-quick-links-button-hover: var(--ctp-sky);
|
||||
|
||||
// select multiple objects -> right click -> align buttons on top
|
||||
--ctp-wb-layout-button-foreground: var(--ctp-accent, var(--ctp-teal));
|
||||
|
||||
// selected item bg in e.g. a dropdown
|
||||
--ctp-tl-select-input-select-item: var(--ctp-link-text-hover-color);
|
||||
--ctp-tl-selectFill: var(--ctp-accent, var(--ctp-blue));
|
||||
--ctp-tl-selectStroke: var(--ctp-accent, var(--ctp-blue));
|
||||
|
||||
/* logseq variables for whiteboard */
|
||||
/* Shape background color */
|
||||
--ls-wb-background-color-gray: var(--ctp-wb-background-color-gray);
|
||||
--ls-wb-background-color-red: var(--ctp-wb-background-color-red);
|
||||
--ls-wb-background-color-yellow: var(--ctp-wb-background-color-yellow);
|
||||
--ls-wb-background-color-green: var(--ctp-wb-background-color-green);
|
||||
--ls-wb-background-color-blue: var(--ctp-wb-background-color-blue);
|
||||
--ls-wb-background-color-purple: var(--ctp-wb-background-color-purple);
|
||||
--ls-wb-background-color-pink: var(--ctp-wb-background-color-pink);
|
||||
|
||||
/* Shape outline color */
|
||||
--ls-wb-stroke-color-gray: var(--ctp-wb-stroke-color-gray);
|
||||
--ls-wb-stroke-color-red: var(--ctp-wb-stroke-color-red);
|
||||
--ls-wb-stroke-color-yellow: var(--ctp-wb-stroke-color-yellow);
|
||||
--ls-wb-stroke-color-green: var(--ctp-wb-stroke-color-green);
|
||||
--ls-wb-stroke-color-blue: var(--ctp-wb-stroke-color-blue);
|
||||
--ls-wb-stroke-color-purple: var(--ctp-wb-stroke-color-purple);
|
||||
--ls-wb-stroke-color-pink: var(--ctp-wb-stroke-color-pink);
|
||||
|
||||
/* Pen path color */
|
||||
--ls-wb-text-color-gray: var(--ctp-wb-text-color-gray);
|
||||
--ls-wb-text-color-red: var(--ctp-wb-text-color-red);
|
||||
--ls-wb-text-color-yellow: var(--ctp-wb-text-color-yellow);
|
||||
--ls-wb-text-color-green: var(--ctp-wb-text-color-green);
|
||||
--ls-wb-text-color-blue: var(--ctp-wb-text-color-blue);
|
||||
--ls-wb-text-color-purple: var(--ctp-wb-text-color-purple);
|
||||
--ls-wb-text-color-pink: var(--ctp-wb-text-color-pink);
|
||||
|
||||
--ls-wb-stroke-color-default: var(--ls-secondary-border-color);
|
||||
--ls-wb-text-color-default: var(--ls-primary-text-color);
|
||||
--ls-wb-background-color-default: var(--ls-tertiary-background-color);
|
||||
--ls-whiteboard-tooltip-background: var(--ls-secondary-background-color);
|
||||
--ls-whiteboard-select-background-selected: var(--ctp-color-level-5);
|
||||
}
|
||||
|
||||
/* Below related to whiteboard latte override feature */
|
||||
html.whiteboard-latte {
|
||||
div.dashboard-card, div.whiteboard-page {
|
||||
@include latte-override-vars;
|
||||
@include variables;
|
||||
|
||||
background-color: var(--ls-primary-background-color);
|
||||
color: var(--ls-primary-text-color);
|
||||
|
||||
.tl-button:hover {
|
||||
background-color: var(--ls-menu-hover-color);
|
||||
}
|
||||
|
||||
.dashboard-card-title {
|
||||
color: rgb(var(--ctp-text));
|
||||
}
|
||||
}
|
||||
.tl-select-input-content {
|
||||
@include latte-override-vars;
|
||||
@include variables;
|
||||
}
|
||||
.tl-tooltip-content {
|
||||
@include latte-override-vars;
|
||||
@include variables;
|
||||
}
|
||||
}
|
||||
/* Above related to whiteboard latte override feature */
|
||||
|
||||
.light-theme, .white-theme, html[data-theme=light],
|
||||
.dark-theme, html[data-theme=dark],
|
||||
html:not(.whiteboard-latte),
|
||||
:root:not([data-color]),
|
||||
:root[data-color='none'],
|
||||
:root[data-color='logseq'] {
|
||||
@include variables;
|
||||
}
|
||||
|
||||
html:not(html[data-color]),
|
||||
html[data-theme=light][data-color='logseq'],
|
||||
html[data-theme=dark][data-color='logseq'],
|
||||
html[data-color='none'] {
|
||||
// selected item bg in e.g. a dropdown
|
||||
.tl-select-input-select-item[data-state=checked] {
|
||||
background: rgb(var(--ctp-wb-button-selected-background));
|
||||
color: var(--ctp-link-text-hover-color);
|
||||
}
|
||||
|
||||
div.whiteboard-page {
|
||||
|
||||
// these are the colors that appear when selecting a color (e.g. for fill)
|
||||
.bg-gray-500 {
|
||||
background-color: var(--ctp-wb-color-gray);
|
||||
}
|
||||
|
||||
.bg-red-500 {
|
||||
background-color: var(--ctp-wb-color-red);
|
||||
}
|
||||
|
||||
.bg-yellow-500 {
|
||||
background-color: var(--ctp-wb-color-yellow);
|
||||
}
|
||||
|
||||
.bg-green-500 {
|
||||
background-color: var(--ctp-wb-color-green);
|
||||
}
|
||||
|
||||
.bg-blue-500 {
|
||||
background-color: var(--ctp-wb-color-blue);
|
||||
}
|
||||
|
||||
.bg-purple-500 {
|
||||
background-color: var(--ctp-wb-color-purple);
|
||||
}
|
||||
|
||||
.bg-pink-500 {
|
||||
background-color: var(--ctp-wb-color-pink);
|
||||
}
|
||||
|
||||
// Whiteboard tool button
|
||||
.tl-button[data-selected=true] {
|
||||
background: rgb(var(--ctp-wb-button-selected-background));
|
||||
|
||||
i {
|
||||
color: rgb(var(--ctp-wb-button-selected-foreground));
|
||||
}
|
||||
}
|
||||
|
||||
.ti,
|
||||
.tie {
|
||||
color: rgb(var(--ctp-wb-button-foreground));
|
||||
}
|
||||
|
||||
.tl-context-bar {
|
||||
|
||||
.ti,
|
||||
.tie {
|
||||
color: rgb(var(--ctp-wb-button-menu-foreground));
|
||||
}
|
||||
}
|
||||
|
||||
// double click or "add block or page" from toolbar -> icons
|
||||
// by default, bg color is hardcoded
|
||||
.tl-type-tag {
|
||||
background-color: rgb(var(--ctp-wb-button-type-tag-background-inactive));
|
||||
border-color: rgb(var(--ctp-wb-button-type-tag-background-inactive));
|
||||
// color: #ff00ff; // fg color has to be set on inner i element (.tie)
|
||||
|
||||
.tie {
|
||||
color: rgb(var(--ctp-wb-button-type-tag-foreground));
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme=dark] .tl-type-tag[data-active=true] {
|
||||
background-color: rgba(var(--ctp-wb-button-type-tag-background-active), 0.8);
|
||||
border-color: rgb(var(--ctp-wb-button-type-tag-background-active));
|
||||
|
||||
.tie {
|
||||
color: rgb(var(--ctp-wb-button-type-tag-foreground));
|
||||
}
|
||||
}
|
||||
|
||||
// Whiteboard context menu button icon
|
||||
.tl-menu {
|
||||
background-color: var(--ctp-secondary-background-color);
|
||||
}
|
||||
.tl-menu-item i {
|
||||
color: rgb(var(--ctp-wb-button-menu-foreground));
|
||||
}
|
||||
|
||||
// Button that appears below a page reference block (on hover)
|
||||
.tl-quick-links-row:first-child {
|
||||
background-color: rgb(var(--ctp-wb-quick-links-button));
|
||||
|
||||
:hover {
|
||||
background-color: rgb(var(--ctp-wb-quick-links-button-hover));
|
||||
}
|
||||
}
|
||||
|
||||
// align-buttons that appear when right clicking after
|
||||
// selecting multiple objects
|
||||
i[class*="ti-layout-"] {
|
||||
color: rgb(var(--ctp-wb-layout-button-foreground));
|
||||
}
|
||||
|
||||
.tl-container {
|
||||
--ls-primary-background-color: var(--ctp-primary-background-color);
|
||||
--ls-secondary-background-color: var(--ctp-secondary-background-color);
|
||||
--ls-tertiary-background-color: var(--ctp-tertiary-background-color);
|
||||
--ls-quaternary-background-color: var(--ctp-quaternary-background-color);
|
||||
}
|
||||
|
||||
.tl-button:hover {
|
||||
background-color: var(--ctp-tertiary-background-color);
|
||||
}
|
||||
|
||||
.tl-text-label-inner-wrapper {
|
||||
// this is for overriding the text colors inside shapes (e.g. the label color of a rectangle)
|
||||
--ls-wb-text-color-gray: var(--ctp-wb-shape-label-color-gray);
|
||||
--ls-wb-text-color-red: var(--ctp-wb-shape-label-color-red);
|
||||
--ls-wb-text-color-yellow: var(--ctp-wb-shape-label-color-yellow);
|
||||
--ls-wb-text-color-green: var(--ctp-wb-shape-label-color-green);
|
||||
--ls-wb-text-color-blue: var(--ctp-wb-shape-label-color-blue);
|
||||
--ls-wb-text-color-purple: var(--ctp-wb-shape-label-color-purple);
|
||||
--ls-wb-text-color-pink: var(--ctp-wb-shape-label-color-pink);
|
||||
}
|
||||
|
||||
.logseq-tldraw {
|
||||
--tl-selectFill: rgba(var(--ctp-tl-selectFill), 0.05);
|
||||
--tl-selectStroke: rgb(var(--ctp-tl-selectStroke));
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,15 +1,16 @@
|
||||
@use "main.scss";
|
||||
@use "utils.scss" as utils;
|
||||
|
||||
$flavor: frappe;
|
||||
|
||||
:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
|
||||
--ctp-cm-theme: 'ctp-#{$flavor}';
|
||||
@include utils.ctp-rgb-vars($flavor);
|
||||
@include utils.ctp-hsl-vars($flavor);
|
||||
--ctp-cm-theme: 'ctp-frappe';
|
||||
@include utils.ctp-rgb-vars(frappe);
|
||||
@include utils.ctp-hsl-vars(frappe);
|
||||
}
|
||||
|
||||
$ctp-base: utils.get-flavor-color-rgb($flavor, base);
|
||||
// custom check box checked image
|
||||
// css var works but does not trigger reloading data asset in browser
|
||||
// hence a sass variable
|
||||
$ctp-base: 48, 52, 70;
|
||||
|
||||
.form-checkbox:checked {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='rgb(#{$ctp-base})' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E") !important;
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
@use "main.scss";
|
||||
@use "utils.scss" as utils;
|
||||
|
||||
$flavor: latte;
|
||||
|
||||
:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
|
||||
--ctp-cm-theme: 'ctp-#{$flavor}';
|
||||
@include utils.ctp-rgb-vars($flavor);
|
||||
@include utils.ctp-hsl-vars($flavor);
|
||||
--ctp-cm-theme: 'ctp-latte';
|
||||
@include utils.ctp-rgb-vars(latte);
|
||||
@include utils.ctp-hsl-vars(latte);
|
||||
}
|
||||
|
||||
$ctp-base: utils.get-flavor-color-rgb($flavor, base);
|
||||
// custom check box checked image
|
||||
// css var works but does not trigger reloading data asset in browser
|
||||
// hence a sass variable
|
||||
$ctp-base: 239, 241, 245;
|
||||
|
||||
.form-checkbox:checked {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='rgb(#{$ctp-base})' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E") !important;
|
||||
|
||||
@ -1,16 +1,17 @@
|
||||
@use "main.scss";
|
||||
@use "utils.scss" as utils;
|
||||
|
||||
$flavor: macchiato;
|
||||
|
||||
:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
|
||||
--ctp-cm-theme: 'ctp-#{$flavor}';
|
||||
@include utils.ctp-rgb-vars($flavor);
|
||||
@include utils.ctp-hsl-vars($flavor);
|
||||
--ctp-cm-theme: 'ctp-macchiato';
|
||||
@include utils.ctp-rgb-vars(macchiato);
|
||||
@include utils.ctp-hsl-vars(macchiato);
|
||||
}
|
||||
|
||||
$ctp-base: utils.get-flavor-color-rgb($flavor, base);
|
||||
// custom check box checked image
|
||||
// css var works but does not trigger reloading data asset in browser
|
||||
// hence a sass variable
|
||||
$ctp-base: 36, 39, 58;
|
||||
|
||||
.form-checkbox:checked {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='rgb(#{$ctp-base})' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E") !important;
|
||||
}
|
||||
}
|
||||
@ -1,16 +1,18 @@
|
||||
@use "main.scss";
|
||||
@use "utils.scss" as utils;
|
||||
|
||||
$flavor: mocha;
|
||||
|
||||
:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
|
||||
--ctp-cm-theme: 'ctp-#{$flavor}';
|
||||
@include utils.ctp-rgb-vars($flavor);
|
||||
@include utils.ctp-hsl-vars($flavor);
|
||||
--ctp-cm-theme: 'ctp-mocha';
|
||||
@include utils.ctp-rgb-vars(mocha);
|
||||
@include utils.ctp-hsl-vars(mocha);
|
||||
}
|
||||
|
||||
$ctp-base: utils.get-flavor-color-rgb($flavor, base);
|
||||
|
||||
// custom check box checked image
|
||||
// css var works but does not trigger reloading data asset in browser
|
||||
// hence a sass variable
|
||||
$ctp-base: 30, 30, 46;
|
||||
|
||||
.form-checkbox:checked {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='rgb(#{$ctp-base})' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E") !important;
|
||||
}
|
||||
}
|
||||
@ -1,19 +1,21 @@
|
||||
@use "main.scss";
|
||||
@use "utils.scss" as utils;
|
||||
|
||||
$flavor: mocha;
|
||||
|
||||
:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
|
||||
--ctp-cm-theme: 'ctp-#{$flavor}';
|
||||
@include utils.ctp-rgb-vars($flavor);
|
||||
@include utils.ctp-hsl-vars($flavor);
|
||||
--ctp-cm-theme: 'ctp-oled';
|
||||
@include utils.ctp-rgb-vars(mocha);
|
||||
@include utils.ctp-hsl-vars(mocha);
|
||||
--ctp-base: 02, 02, 02;
|
||||
--ctp-mantle: 01, 01, 01;
|
||||
--ctp-crust: 00, 00, 00;
|
||||
}
|
||||
|
||||
$ctp-base: utils.get-flavor-color-rgb($flavor, base);
|
||||
|
||||
// custom check box checked image
|
||||
// css var works but does not trigger reloading data asset in browser
|
||||
// hence a sass variable
|
||||
$ctp-base: 02, 02, 02;
|
||||
|
||||
.form-checkbox:checked {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='rgb(#{$ctp-base})' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E") !important;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user