mirror of
https://github.com/catppuccin/logseq.git
synced 2026-01-09 05:20:55 +08:00
Compare commits
23 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
96a03759eb | ||
|
|
a87be21ff9 | ||
|
|
c267e80f94 | ||
|
|
2e3c5b3750 | ||
|
|
f8d951c804 | ||
|
|
f0100d1747 | ||
|
|
59f8557125 | ||
|
|
bb7e639599 | ||
|
|
5ea03d7099 | ||
|
|
95c3bcc9bb | ||
|
|
78d22d0926 | ||
|
|
40e6fa312e | ||
|
|
0ae63934c0 | ||
|
|
3d571f7012 | ||
|
|
55350efa50 | ||
|
|
e1bf93b92e | ||
|
|
ea286912dd | ||
|
|
0f1087f32d | ||
|
|
ce2791805d | ||
|
|
2de9390c56 | ||
|
|
f941496af9 | ||
|
|
5643bccec5 | ||
|
|
64487bbbfe |
40
.github/ISSUE_TEMPLATE/bug.yml
vendored
Normal file
40
.github/ISSUE_TEMPLATE/bug.yml
vendored
Normal file
@ -0,0 +1,40 @@
|
||||
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
Normal file
5
.github/ISSUE_TEMPLATE/config.yml
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
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
Normal file
18
.github/ISSUE_TEMPLATE/meta.yml
vendored
Normal file
@ -0,0 +1,18 @@
|
||||
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@v3
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
submodules: 'true'
|
||||
- name: Use Node.js
|
||||
uses: actions/setup-node@v3
|
||||
uses: actions/setup-node@v4
|
||||
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@v1
|
||||
uses: softprops/action-gh-release@v2
|
||||
id: create_release
|
||||
with:
|
||||
draft: true
|
||||
@ -39,7 +39,7 @@ jobs:
|
||||
ctp-mocha.css
|
||||
ctp-oled.css
|
||||
- name: Deploy
|
||||
uses: peaceiris/actions-gh-pages@v3
|
||||
uses: peaceiris/actions-gh-pages@v4
|
||||
with:
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
publish_dir: ./${{ env.PLUGIN_NAME }}/
|
||||
|
||||
45
README.md
45
README.md
@ -38,20 +38,30 @@
|
||||
<blockquote>Selected Accent: Green</blockquote>
|
||||
</details>
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
### Installation
|
||||
> [!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.
|
||||
>
|
||||
> 
|
||||
|
||||
There are couple of other methods you can use to set the theme up in Logseq. Later methods are more for development purpose.
|
||||
|
||||
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`.
|
||||
### 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"/>
|
||||
|
||||
|
||||
2. Editing custom theme: **`custom.css`** (recommended for mobile). Choose one of the following and restart Logseq
|
||||
### 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))
|
||||
|
||||
```css
|
||||
@import url('https://logseq.catppuccin.com/ctp-latte.css');
|
||||
@ -60,8 +70,9 @@ There are couple of other methods you can use to set the theme up in Logseq. Lat
|
||||
@import url('https://logseq.catppuccin.com/ctp-mocha.css');
|
||||
@import url('https://logseq.catppuccin.com/ctp-oled.css');
|
||||
```
|
||||
OR
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
```edn
|
||||
:custom-css-url "@import url('https://logseq.catppuccin.com/ctp-latte.css');"
|
||||
@ -70,30 +81,20 @@ There are couple of other methods you can use to set the theme up in Logseq. Lat
|
||||
:custom-css-url "@import url('https://logseq.catppuccin.com/ctp-mocha.css');"
|
||||
```
|
||||
|
||||
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.
|
||||
## Switching Accent Color
|
||||
|
||||
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
|
||||
This option is only available when the theme installed through the Plugins Marketplace
|
||||
|
||||
1. Theme settings can be accessed under `Settings` > `Plugins` > `Catppuccin`
|
||||
2. Select an accent color of choice from the dropdown under `CtpAccent` setting.
|
||||
2. Select an accent color 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 variant of dark theme under `Settings` > `Themes`.
|
||||
You can choose this dark theme variant under `Settings` > `Themes`.
|
||||
|
||||
<img src="https://raw.githubusercontent.com/catppuccin/logseq/main/assets/ctp-oledppuccin.webp"/>
|
||||
|
||||
|
||||
33
index.js
33
index.js
@ -29,13 +29,41 @@ 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',
|
||||
style: `
|
||||
:root:not([data-color]), :root[data-color='none'] {
|
||||
: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]};
|
||||
}
|
||||
`,
|
||||
@ -54,6 +82,9 @@ 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✨`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
1527
package-lock.json
generated
1527
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "logseq-catppuccin",
|
||||
"version": "0.2.3",
|
||||
"version": "0.6.4",
|
||||
"description": "🦫 Soothing pastel theme for Logseq",
|
||||
"main": "index.html",
|
||||
"scripts": {
|
||||
@ -20,9 +20,9 @@
|
||||
},
|
||||
"homepage": "https://github.com/catppuccin/logseq#readme",
|
||||
"devDependencies": {
|
||||
"@catppuccin/highlightjs": "^0.1.4",
|
||||
"@catppuccin/highlightjs": "^1.0.0",
|
||||
"@catppuccin/palette": "^1.1.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"rimraf": "^6.0.0",
|
||||
"sass": "^1.55.0"
|
||||
},
|
||||
"logseq": {
|
||||
|
||||
6
renovate.json
Normal file
6
renovate.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
|
||||
"extends": [
|
||||
"local>catppuccin/renovate-config"
|
||||
]
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
:root:not([data-color]), :root[data-color='none'] {
|
||||
// following are mapped to variables used in logseq
|
||||
@mixin variables {
|
||||
// following are custom ctp variables mapped to logseq variables
|
||||
--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: rgb(var(--color-base-00));
|
||||
--ctp-selection-text-color: 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,49 +94,6 @@
|
||||
--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
|
||||
@ -163,7 +120,7 @@
|
||||
--ctp-dropdown-border-color: var(--color-base-50);
|
||||
|
||||
// Full accent overrides
|
||||
--ctp-text-bold: var(var(--ctp-primary-text-color));
|
||||
--ctp-text-bold: 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);
|
||||
@ -171,33 +128,6 @@
|
||||
--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);
|
||||
@ -215,4 +145,8 @@
|
||||
--ctp-marker-size: 16px;
|
||||
}
|
||||
|
||||
:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
|
||||
@include variables;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,7 +1,12 @@
|
||||
html:not(html[data-color]),
|
||||
html[data-theme=light][data-color='logseq'],
|
||||
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);
|
||||
@ -40,7 +45,7 @@ html[data-color='none'] {
|
||||
background-color: rgb(var(--ctp-button-background));
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&.as-ghost:hover, &:hover {
|
||||
background-color: rgb(var(--ctp-button-background));
|
||||
}
|
||||
}
|
||||
@ -176,16 +181,11 @@ html[data-color='none'] {
|
||||
}
|
||||
|
||||
html[data-theme=dark] .cp__header a,
|
||||
html[data-theme=dark] .cp__header button,
|
||||
html[data-theme=dark] .cp__header button.button,
|
||||
html[data-theme=dark] .cp__right-sidebar-topbar button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// selection
|
||||
::selection {
|
||||
color: var(--ls-text-on-accent);
|
||||
}
|
||||
|
||||
.inline.with-bg-color {
|
||||
color: var(--ctp-primary-background-color);
|
||||
|
||||
@ -230,8 +230,12 @@ 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: rgb(var(--ctp-primary-text-color));
|
||||
color: var(--ctp-primary-text-color);
|
||||
}
|
||||
|
||||
.cp__settings-inner>aside ul>li.active {
|
||||
@ -243,7 +247,7 @@ html[data-color='none'] {
|
||||
}
|
||||
|
||||
.cp__all_pages_table td>span {
|
||||
color: rgb(var(--ctp-primary-text-color));
|
||||
color: var(--ctp-primary-text-color);
|
||||
}
|
||||
|
||||
// full pallete overrides
|
||||
@ -255,7 +259,7 @@ html[data-color='none'] {
|
||||
|
||||
b,
|
||||
strong {
|
||||
color: rgb(var(--ctp-text-bold));
|
||||
color: var(--ctp-text-bold);
|
||||
}
|
||||
|
||||
i {
|
||||
@ -298,108 +302,6 @@ 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 {
|
||||
@ -501,6 +403,9 @@ 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);
|
||||
@ -509,6 +414,12 @@ 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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -567,4 +478,71 @@ html[data-color='none'] {
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.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,8 +1,7 @@
|
||||
@use "@catppuccin/highlightjs/sass/catppuccin.variables";
|
||||
@use "@catppuccin/highlightjs/sass/catppuccin-variables";
|
||||
|
||||
html:not(html[data-color]),
|
||||
html[data-color='none'] {
|
||||
html:not(html[data-color]), html[data-color='logseq'], html[data-color='none'] {
|
||||
code.hljs {
|
||||
background-color: var(--ctp-tertiary-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,41 +1,4 @@
|
||||
// Source: https://github.com/logseq/logseq/blob/master/resources/css/common.css
|
||||
:root:not([data-color]), :root[data-color='none'] {
|
||||
--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) {
|
||||
|
||||
html:not(html[data-color]),
|
||||
html[data-color='none'] {
|
||||
background-color: rgb(var(--ctp-primary-background-color));
|
||||
}
|
||||
|
||||
html[data-theme='light'] {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
html:not(html[data-color]),
|
||||
html[data-color='none'] {
|
||||
@mixin variables {
|
||||
--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);
|
||||
@ -128,37 +91,37 @@ html[data-color='none'] {
|
||||
--ls-focus-ring-color: var(--ctp-focus-ring-color);
|
||||
--ls-header-button-background: var(--ctp-header-button-background);
|
||||
|
||||
--ls-left-sidebar-active-background: var(--ls-active-primary-color);
|
||||
|
||||
/* 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-left-sidebar-active-background: var(--ctp-color-level-4);
|
||||
|
||||
--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);
|
||||
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
html:not(html[data-color]), html[data-color='logseq'], html[data-color='none'] {
|
||||
background-color: rgb(var(--ctp-primary-background-color));
|
||||
}
|
||||
|
||||
html[data-theme='light'] {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,70 @@
|
||||
:root:not([data-color]), :root[data-color='none'] {
|
||||
:root:not([data-color]), :root[data-color='none'], :root[data-theme=dark][data-color='logseq'] {
|
||||
/*
|
||||
--background: 192 100% 11%;
|
||||
--foreground: 0 0% 95%;
|
||||
--accent: 192 80% 10%;
|
||||
--accent-foreground: 255 92% 100%;
|
||||
--primary: 200 97% 37%;
|
||||
--primary-foreground: 255 92% 100%;
|
||||
--ring: 200 97% 37%;
|
||||
--secondary: 203 50% 20%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 192 100% 13%;
|
||||
--card: 192 100% 10%;
|
||||
--card-foreground: 0 0% 95%;
|
||||
--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] {
|
||||
/*
|
||||
--primary: 200 97% 37%;
|
||||
--primary-foreground: 255 92% 100%;
|
||||
--accent: 200 97% 37%;
|
||||
--accent-foreground: 255 92% 100%;
|
||||
--ring: 200 97% 37%;
|
||||
*/
|
||||
--lx-gray-01: initial;
|
||||
--lx-gray-02: initial;
|
||||
--lx-gray-03: initial;
|
||||
--lx-gray-04: initial;
|
||||
--lx-gray-05: initial;
|
||||
--lx-gray-06: initial;
|
||||
--lx-gray-07: initial;
|
||||
--lx-gray-08: initial;
|
||||
--lx-gray-09: initial;
|
||||
--lx-gray-10: initial;
|
||||
--lx-gray-11: initial;
|
||||
--lx-gray-12: initial;
|
||||
}
|
||||
|
||||
html[data-color=logseq] {
|
||||
--lx-accent-01: initial;
|
||||
--lx-accent-02: initial;
|
||||
--lx-accent-03: initial;
|
||||
--lx-accent-04: initial;
|
||||
--lx-accent-05: initial;
|
||||
--lx-accent-06: initial;
|
||||
--lx-accent-07: initial;
|
||||
--lx-accent-08: initial;
|
||||
--lx-accent-09: initial;
|
||||
--lx-accent-10: initial;
|
||||
--lx-accent-11: initial;
|
||||
--lx-accent-12: initial;
|
||||
}
|
||||
@ -5,3 +5,4 @@
|
||||
@use "custom.scss";
|
||||
@use "codemirror.scss";
|
||||
@use "highlightjs.scss";
|
||||
@use "whiteboard.scss";
|
||||
@ -1,4 +1,4 @@
|
||||
:root:not([data-color]), :root[data-color='none'] {
|
||||
@mixin variables {
|
||||
// darkest -> lightest (dark theme)
|
||||
--color-base-00: rgb(var(--ctp-crust));
|
||||
--color-base-10: rgb(var(--ctp-mantle));
|
||||
@ -11,4 +11,9 @@
|
||||
--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;
|
||||
}
|
||||
36
scss/_utils.scss
Normal file
36
scss/_utils.scss
Normal file
@ -0,0 +1,36 @@
|
||||
@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))};
|
||||
}
|
||||
|
||||
@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))};
|
||||
}
|
||||
|
||||
@mixin ctp-hsl-vars ($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) {
|
||||
--ctp-#{$color}: #{hex-to-rgb($hex)};
|
||||
}
|
||||
}
|
||||
294
scss/_whiteboard.scss
Normal file
294
scss/_whiteboard.scss
Normal file
@ -0,0 +1,294 @@
|
||||
@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,39 +1,15 @@
|
||||
@use "main.scss";
|
||||
@use "utils.scss" as utils;
|
||||
|
||||
:root:not([data-color]), :root[data-color='none'] {
|
||||
--ctp-cm-theme: 'ctp-frappe';
|
||||
--ctp-rosewater: 242, 213, 207;
|
||||
--ctp-flamingo: 238, 190, 190;
|
||||
--ctp-pink: 244, 184, 228;
|
||||
--ctp-mauve: 202, 158, 230;
|
||||
--ctp-red: 231, 130, 132;
|
||||
--ctp-maroon: 234, 153, 156;
|
||||
--ctp-peach: 239, 159, 118;
|
||||
--ctp-yellow: 229, 200, 144;
|
||||
--ctp-green: 166, 209, 137;
|
||||
--ctp-teal: 129, 200, 190;
|
||||
--ctp-sky: 153, 209, 219;
|
||||
--ctp-sapphire: 133, 193, 220;
|
||||
--ctp-blue: 140, 170, 238;
|
||||
--ctp-lavender: 186, 187, 241;
|
||||
--ctp-text: 198, 206, 239;
|
||||
--ctp-subtext1: 181, 189, 220;
|
||||
--ctp-subtext0: 165, 172, 201;
|
||||
--ctp-overlay2: 148, 155, 183;
|
||||
--ctp-overlay1: 131, 138, 164;
|
||||
--ctp-overlay0: 115, 120, 145;
|
||||
--ctp-surface2: 98, 103, 126;
|
||||
--ctp-surface1: 81, 86, 108;
|
||||
--ctp-surface0: 65, 69, 89;
|
||||
--ctp-base: 48, 52, 70;
|
||||
--ctp-mantle: 41, 44, 60;
|
||||
--ctp-crust: 35, 38, 52;
|
||||
$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);
|
||||
}
|
||||
|
||||
// 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;
|
||||
$ctp-base: utils.get-flavor-color-rgb($flavor, base);
|
||||
|
||||
.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,39 +1,15 @@
|
||||
@use "main.scss";
|
||||
@use "utils.scss" as utils;
|
||||
|
||||
:root:not([data-color]), :root[data-color='none'] {
|
||||
--ctp-cm-theme: 'ctp-latte';
|
||||
--ctp-rosewater: 222, 149, 132;
|
||||
--ctp-flamingo: 221, 120, 120;
|
||||
--ctp-pink: 236, 131, 208;
|
||||
--ctp-mauve: 136, 57, 239;
|
||||
--ctp-red: 210, 15, 57;
|
||||
--ctp-maroon: 230, 69, 83;
|
||||
--ctp-peach: 254, 100, 11;
|
||||
--ctp-yellow: 228, 147, 32;
|
||||
--ctp-green: 64, 160, 43;
|
||||
--ctp-teal: 23, 146, 153;
|
||||
--ctp-sky: 4, 165, 229;
|
||||
--ctp-sapphire: 32, 159, 181;
|
||||
--ctp-blue: 42, 110, 245;
|
||||
--ctp-lavender: 114, 135, 253;
|
||||
--ctp-text: 76, 79, 105;
|
||||
--ctp-subtext1: 92, 95, 119;
|
||||
--ctp-subtext0: 108, 111, 133;
|
||||
--ctp-overlay2: 124, 127, 147;
|
||||
--ctp-overlay1: 140, 143, 161;
|
||||
--ctp-overlay0: 156, 160, 176;
|
||||
--ctp-surface2: 172, 176, 190;
|
||||
--ctp-surface1: 188, 192, 204;
|
||||
--ctp-surface0: 204, 208, 218;
|
||||
--ctp-base: 239, 241, 245;
|
||||
--ctp-mantle: 230, 233, 239;
|
||||
--ctp-crust: 220, 224, 232;
|
||||
$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);
|
||||
}
|
||||
|
||||
// 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;
|
||||
$ctp-base: utils.get-flavor-color-rgb($flavor, base);
|
||||
|
||||
.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,40 +1,16 @@
|
||||
@use "main.scss";
|
||||
@use "utils.scss" as utils;
|
||||
|
||||
:root:not([data-color]), :root[data-color='none'] {
|
||||
--ctp-cm-theme: 'ctp-macchiato';
|
||||
--ctp-rosewater: 244, 219, 214;
|
||||
--ctp-flamingo: 240, 198, 198;
|
||||
--ctp-pink: 245, 189, 230;
|
||||
--ctp-mauve: 198, 160, 246;
|
||||
--ctp-red: 237, 135, 150;
|
||||
--ctp-maroon: 238, 153, 160;
|
||||
--ctp-peach: 245, 169, 127;
|
||||
--ctp-yellow: 238, 212, 159;
|
||||
--ctp-green: 166, 218, 149;
|
||||
--ctp-teal: 139, 213, 202;
|
||||
--ctp-sky: 145, 215, 227;
|
||||
--ctp-sapphire: 125, 196, 228;
|
||||
--ctp-blue: 138, 173, 244;
|
||||
--ctp-lavender: 183, 189, 248;
|
||||
--ctp-text: 197, 207, 245;
|
||||
--ctp-subtext1: 179, 188, 224;
|
||||
--ctp-subtext0: 161, 170, 203;
|
||||
--ctp-overlay2: 143, 151, 183;
|
||||
--ctp-overlay1: 125, 132, 162;
|
||||
--ctp-overlay0: 108, 114, 141;
|
||||
--ctp-surface2: 90, 95, 120;
|
||||
--ctp-surface1: 72, 76, 100;
|
||||
--ctp-surface0: 54, 58, 79;
|
||||
--ctp-base: 36, 39, 58;
|
||||
--ctp-mantle: 30, 32, 48;
|
||||
--ctp-crust: 24, 25, 38;
|
||||
$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);
|
||||
}
|
||||
|
||||
// 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;
|
||||
$ctp-base: utils.get-flavor-color-rgb($flavor, base);
|
||||
|
||||
.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,41 +1,16 @@
|
||||
@use "main.scss";
|
||||
@use "utils.scss" as utils;
|
||||
|
||||
:root:not([data-color]), :root[data-color='none'] {
|
||||
--ctp-cm-theme: 'ctp-mocha';
|
||||
--ctp-rosewater: 245, 224, 220;
|
||||
--ctp-flamingo: 242, 205, 205;
|
||||
--ctp-pink: 245, 194, 231;
|
||||
--ctp-mauve: 203, 166, 247;
|
||||
--ctp-red: 243, 139, 168;
|
||||
--ctp-maroon: 235, 160, 172;
|
||||
--ctp-peach: 250, 179, 135;
|
||||
--ctp-yellow: 249, 226, 175;
|
||||
--ctp-green: 166, 227, 161;
|
||||
--ctp-teal: 148, 226, 213;
|
||||
--ctp-sky: 137, 220, 235;
|
||||
--ctp-sapphire: 116, 199, 236;
|
||||
--ctp-blue: 135, 176, 249;
|
||||
--ctp-lavender: 180, 190, 254;
|
||||
--ctp-text: 198, 208, 245;
|
||||
--ctp-subtext1: 179, 188, 223;
|
||||
--ctp-subtext0: 161, 168, 201;
|
||||
--ctp-overlay2: 142, 149, 179;
|
||||
--ctp-overlay1: 123, 129, 157;
|
||||
--ctp-overlay0: 105, 109, 134;
|
||||
--ctp-surface2: 86, 89, 112;
|
||||
--ctp-surface1: 67, 70, 90;
|
||||
--ctp-surface0: 49, 50, 68;
|
||||
--ctp-base: 30, 30, 46;
|
||||
--ctp-mantle: 24, 24, 37;
|
||||
--ctp-crust: 17, 17, 27;
|
||||
$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);
|
||||
}
|
||||
|
||||
|
||||
// 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;
|
||||
$ctp-base: utils.get-flavor-color-rgb($flavor, base);
|
||||
|
||||
.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,41 +1,19 @@
|
||||
@use "main.scss";
|
||||
@use "utils.scss" as utils;
|
||||
|
||||
:root:not([data-color]), :root[data-color='none'] {
|
||||
--ctp-cm-theme: 'ctp-oled';
|
||||
--ctp-rosewater: 245, 224, 220;
|
||||
--ctp-flamingo: 242, 205, 205;
|
||||
--ctp-pink: 245, 194, 231;
|
||||
--ctp-mauve: 203, 166, 247;
|
||||
--ctp-red: 243, 139, 168;
|
||||
--ctp-maroon: 235, 160, 172;
|
||||
--ctp-peach: 250, 179, 135;
|
||||
--ctp-yellow: 249, 226, 175;
|
||||
--ctp-green: 166, 227, 161;
|
||||
--ctp-teal: 148, 226, 213;
|
||||
--ctp-sky: 137, 220, 235;
|
||||
--ctp-sapphire: 116, 199, 236;
|
||||
--ctp-blue: 135, 176, 249;
|
||||
--ctp-lavender: 180, 190, 254;
|
||||
--ctp-text: 198, 208, 245;
|
||||
--ctp-subtext1: 179, 188, 223;
|
||||
--ctp-subtext0: 161, 168, 201;
|
||||
--ctp-overlay2: 142, 149, 179;
|
||||
--ctp-overlay1: 123, 129, 157;
|
||||
--ctp-overlay0: 105, 109, 134;
|
||||
--ctp-surface2: 86, 89, 112;
|
||||
--ctp-surface1: 67, 70, 90;
|
||||
--ctp-surface0: 49, 50, 68;
|
||||
$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-base: 02, 02, 02;
|
||||
--ctp-mantle: 01, 01, 01;
|
||||
--ctp-crust: 00, 00, 00;
|
||||
}
|
||||
|
||||
|
||||
// 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;
|
||||
$ctp-base: utils.get-flavor-color-rgb($flavor, base);
|
||||
|
||||
.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