Merge remote-tracking branch 'origin/develop' into port/client_ts
Elian Doran
@ -0,0 +1,10 @@
|
||||
name: Task
|
||||
description: Create a new Task
|
||||
type: "Task"
|
||||
body:
|
||||
- type: textarea
|
||||
attributes:
|
||||
label: Describe Task
|
||||
description: A clear and concise description of what the task is about.
|
||||
validations:
|
||||
required: true
|
||||
@ -0,0 +1,48 @@
|
||||
inputs:
|
||||
os:
|
||||
description: "One of the supported platforms: macos, linux, windows"
|
||||
required: true
|
||||
arch:
|
||||
description: "The architecture to build for: x64, arm64"
|
||||
required: true
|
||||
extension:
|
||||
description: "Platform specific extensions to copy in the output: dmg, deb, rpm, exe"
|
||||
required: true
|
||||
runs:
|
||||
using: composite
|
||||
steps:
|
||||
- name: Set up Python for appdmg to be installed
|
||||
if: ${{ inputs.os == 'macos' }}
|
||||
shell: bash
|
||||
run: brew install python-setuptools
|
||||
- name: Install dependencies for RPM and Flatpak package building
|
||||
if: ${{ inputs.os == 'linux' }}
|
||||
shell: bash
|
||||
run: |
|
||||
sudo apt-get update && sudo apt-get install rpm flatpak-builder elfutils
|
||||
flatpak remote-add --user --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo
|
||||
FLATPAK_ARCH=$(if [[ ${{ inputs.arch }} = 'arm64' ]]; then echo 'aarch64'; else echo 'x86_64'; fi)
|
||||
FLATPAK_VERSION='24.08'
|
||||
flatpak install --user --no-deps --arch $FLATPAK_ARCH --assumeyes runtime/org.freedesktop.Platform/$FLATPAK_ARCH/$FLATPAK_VERSION runtime/org.freedesktop.Sdk/$FLATPAK_ARCH/$FLATPAK_VERSION org.electronjs.Electron2.BaseApp/$FLATPAK_ARCH/$FLATPAK_VERSION
|
||||
- name: Install dependencies
|
||||
shell: bash
|
||||
run: npm ci
|
||||
- name: Temporary Flatpak arm64 workaround till https://github.com/electron/forge/pull/3839 is merged
|
||||
if: ${{ inputs.os == 'linux' && inputs.arch == 'arm64' }}
|
||||
shell: bash
|
||||
run: sed -e "s/case 'armv7l'/case 'arm64'/g" -e "s/return 'arm'/return 'aarch64'/g" -i node_modules/@electron-forge/maker-flatpak/dist/MakerFlatpak.js
|
||||
- name: Update build info
|
||||
shell: bash
|
||||
run: npm run update-build-info
|
||||
- name: Run electron-forge
|
||||
shell: bash
|
||||
run: npm run make-electron -- --arch=${{ inputs.arch }}
|
||||
- name: Prepare artifacts
|
||||
shell: bash
|
||||
run: |
|
||||
mkdir -p upload;
|
||||
for ext in ${{ inputs.extension }};
|
||||
do
|
||||
file=$(find out/make -name "*.$ext" -print -quit);
|
||||
cp "$file" "upload/TriliumNextNotes-${{ github.ref_name }}-${{ inputs.os }}-${{ inputs.arch }}.$ext";
|
||||
done
|
||||
@ -0,0 +1,28 @@
|
||||
inputs:
|
||||
arch:
|
||||
description: "The architecture to build for: x64, arm64"
|
||||
required: true
|
||||
runs:
|
||||
using: composite
|
||||
steps:
|
||||
- name: Set up node & dependencies
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20
|
||||
cache: "npm"
|
||||
- name: Install dependencies
|
||||
shell: bash
|
||||
run: npm ci
|
||||
- name: Run Linux server build
|
||||
env:
|
||||
MATRIX_ARCH: ${{ inputs.arch }}
|
||||
shell: bash
|
||||
run: |
|
||||
npm run update-build-info
|
||||
./bin/build-server.sh
|
||||
- name: Prepare artifacts
|
||||
shell: bash
|
||||
run: |
|
||||
mkdir -p upload
|
||||
file=$(find dist -name '*.tar.xz' -print -quit)
|
||||
cp "$file" "upload/TriliumNextNotes-Server-${{ github.ref_name }}-${{ inputs.os }}-${{ inputs.arch }}.tar.xz"
|
||||
@ -1,12 +1,17 @@
|
||||
[Desktop Entry]
|
||||
<% if (productName) { %>Name=<%= productName %>
|
||||
<% } %><% if (description) { %>Comment=<%= description %>
|
||||
<% } %><% if (genericName) { %>GenericName=<%= genericName %>
|
||||
<% } %><% if (name) { %>Exec=<%= name %> %U
|
||||
Icon=<%= name %>
|
||||
<% } %>Type=Application
|
||||
StartupNotify=true
|
||||
<% if (productName) { %>StartupWMClass=<%= productName %>
|
||||
<% } if (categories && categories.length) { %>Categories=<%= categories.join(';') %>;
|
||||
<% } %><% if (mimeType && mimeType.length) { %>MimeType=<%= mimeType.join(';') %>;
|
||||
<% } %>
|
||||
<%=
|
||||
Object.entries({
|
||||
"Name": productName,
|
||||
"Comment": description,
|
||||
"GenericName": genericName,
|
||||
"Exec": name ? `${name} %U` : undefined,
|
||||
"Icon": name,
|
||||
"Type": "Application",
|
||||
"StartupNotify": "true",
|
||||
"StartupWMClass": productName,
|
||||
"Categories": categories?.length ? `${categories.join(";")};` : undefined,
|
||||
"MimeType": mimeType?.length ? `${mimeType.join(";")};` : undefined
|
||||
})
|
||||
.map(line => line[1] ? line.join("=") : undefined)
|
||||
.filter(line => !!line)
|
||||
.join("\n")%>
|
||||
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-bookmark"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 7v14l-6 -4l-6 4v-14a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4z" /></svg>
|
||||
|
After Width: | Height: | Size: 383 B |
@ -0,0 +1,39 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
if ! command -v magick &> /dev/null; then
|
||||
echo "This tool requires ImageMagick to be installed in order to create the icons."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
if ! command -v inkscape &> /dev/null; then
|
||||
echo "This tool requires Inkscape to be render sharper SVGs than ImageMagick."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
script_dir=$(realpath $(dirname $0))
|
||||
images_dir="$script_dir/../../images"
|
||||
output_dir="$images_dir/app-icons/tray"
|
||||
|
||||
function generateDpiScaledIcons {
|
||||
file=$1
|
||||
suffix=$2
|
||||
name="$(basename $file .svg)$suffix"
|
||||
inkscape -w 16 -h 16 "$file" -o "$output_dir/$name.png"
|
||||
inkscape -w 20 -h 20 "$file" -o "$output_dir/$name@1.25x.png"
|
||||
inkscape -w 24 -h 24 "$file" -o "$output_dir/$name@1.5x.png"
|
||||
inkscape -w 32 -h 32 "$file" -o "$output_dir/$name@2x.png"
|
||||
}
|
||||
|
||||
generateDpiScaledIcons "$images_dir/icon-black.svg" "Template"
|
||||
generateDpiScaledIcons "$images_dir/icon-color.svg"
|
||||
generateDpiScaledIcons "$images_dir/icon-purple.svg"
|
||||
|
||||
for file in *.svg; do
|
||||
name="$(basename $file .svg)Template"
|
||||
generateDpiScaledIcons "$file" "Template"
|
||||
magick "$output_dir/$name.png" -channel RGB -negate "$output_dir/$name-inverted.png"
|
||||
magick "$output_dir/$name@1.25x.png" -channel RGB -negate "$output_dir/$name-inverted@1.25x.png"
|
||||
magick "$output_dir/$name@1.5x.png" -channel RGB -negate "$output_dir/$name-inverted@1.5x.png"
|
||||
magick "$output_dir/$name@2x.png" -channel RGB -negate "$output_dir/$name-inverted@2x.png"
|
||||
done
|
||||
|
||||
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
|
||||
|
After Width: | Height: | Size: 356 B |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-plus"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
|
||||
|
After Width: | Height: | Size: 357 B |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-history"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 8l0 4l2 2" /><path d="M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5" /></svg>
|
||||
|
After Width: | Height: | Size: 387 B |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-calendar-star"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11 21h-5a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v3.5" /><path d="M16 3v4" /><path d="M8 3v4" /><path d="M4 11h11" /><path d="M17.8 20.817l-2.172 1.138a.392 .392 0 0 1 -.568 -.41l.415 -2.411l-1.757 -1.707a.389 .389 0 0 1 .217 -.665l2.428 -.352l1.086 -2.193a.392 .392 0 0 1 .702 0l1.086 2.193l2.428 .352a.39 .39 0 0 1 .217 .665l-1.757 1.707l.414 2.41a.39 .39 0 0 1 -.567 .411l-2.172 -1.138z" /></svg>
|
||||
|
After Width: | Height: | Size: 734 B |
|
After Width: | Height: | Size: 635 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 336 B |
|
After Width: | Height: | Size: 364 B |
|
After Width: | Height: | Size: 412 B |
|
After Width: | Height: | Size: 456 B |
|
After Width: | Height: | Size: 314 B |
|
After Width: | Height: | Size: 343 B |
|
After Width: | Height: | Size: 423 B |
|
After Width: | Height: | Size: 493 B |
|
After Width: | Height: | Size: 258 B |
|
After Width: | Height: | Size: 271 B |
|
After Width: | Height: | Size: 293 B |
|
After Width: | Height: | Size: 334 B |
|
After Width: | Height: | Size: 254 B |
|
After Width: | Height: | Size: 268 B |
|
After Width: | Height: | Size: 306 B |
|
After Width: | Height: | Size: 339 B |
|
After Width: | Height: | Size: 390 B |
|
After Width: | Height: | Size: 490 B |
|
After Width: | Height: | Size: 589 B |
|
After Width: | Height: | Size: 728 B |
|
After Width: | Height: | Size: 626 B |
|
After Width: | Height: | Size: 797 B |
|
After Width: | Height: | Size: 975 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 635 B |
|
After Width: | Height: | Size: 804 B |
|
After Width: | Height: | Size: 997 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 252 B |
|
After Width: | Height: | Size: 265 B |
|
After Width: | Height: | Size: 273 B |
|
After Width: | Height: | Size: 269 B |
|
After Width: | Height: | Size: 202 B |
|
After Width: | Height: | Size: 237 B |
|
After Width: | Height: | Size: 241 B |
|
After Width: | Height: | Size: 242 B |
|
After Width: | Height: | Size: 443 B |
|
After Width: | Height: | Size: 481 B |
|
After Width: | Height: | Size: 576 B |
|
After Width: | Height: | Size: 700 B |
|
After Width: | Height: | Size: 450 B |
|
After Width: | Height: | Size: 501 B |
|
After Width: | Height: | Size: 627 B |
|
After Width: | Height: | Size: 798 B |
|
After Width: | Height: | Size: 397 B |
|
After Width: | Height: | Size: 484 B |
|
After Width: | Height: | Size: 513 B |
|
After Width: | Height: | Size: 605 B |
|
After Width: | Height: | Size: 378 B |
|
After Width: | Height: | Size: 500 B |
|
After Width: | Height: | Size: 534 B |
|
After Width: | Height: | Size: 667 B |
|
After Width: | Height: | Size: 109 KiB |
@ -0,0 +1,125 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 256 256" style="enable-background:new 0 0 256 256;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#686768;}
|
||||
.st1{fill:#808080;}
|
||||
.st2{fill:url(#SVGID_1_);}
|
||||
.st3{fill:url(#SVGID_2_);}
|
||||
.st4{fill:url(#SVGID_3_);}
|
||||
.st5{fill:#D9D9D9;}
|
||||
.st6{fill:url(#SVGID_4_);}
|
||||
.st7{opacity:0.47;}
|
||||
.st8{fill:#5B5A5A;}
|
||||
.st9{fill:#95C980;}
|
||||
.st10{fill:#72B755;}
|
||||
.st11{fill:#4FA52B;}
|
||||
.st12{fill:#EE8C89;}
|
||||
.st13{fill:#E96562;}
|
||||
.st14{fill:#E33F3B;}
|
||||
.st15{fill:#EFB075;}
|
||||
.st16{fill:#E99547;}
|
||||
.st17{fill:#E47B19;}
|
||||
.st18{opacity:0.38;fill:url(#SVGID_5_);enable-background:new ;}
|
||||
</style>
|
||||
<g id="Layer_1_2_">
|
||||
<g id="Layer_1_1_">
|
||||
</g>
|
||||
</g>
|
||||
<g id="Layer_2_1_">
|
||||
<polygon class="st0" points="69.5,48.6 69.3,93.1 4,95.2 3.3,93.7 29.6,53.4 "/>
|
||||
<path class="st1" d="M69.5,47l-0.2,46.1c0,0-66.3,1-66,0.6l26.1-41.8L69.5,47z"/>
|
||||
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="69.458" y1="120.0202" x2="219.2576" y2="120.0202" gradientTransform="matrix(1 0 0 1 0 8)">
|
||||
<stop offset="0" style="stop-color:#E3E3E3"/>
|
||||
<stop offset="1" style="stop-color:#F4F4F4"/>
|
||||
</linearGradient>
|
||||
<polygon class="st2" points="69.5,47 218.9,55.6 219.3,202.6 69.9,209.1 "/>
|
||||
|
||||
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="29.2408" y1="120.0202" x2="69.8681" y2="120.0202" gradientTransform="matrix(1 0 0 1 0 8)">
|
||||
<stop offset="0" style="stop-color:#D9D9D9"/>
|
||||
<stop offset="1" style="stop-color:#D4D4D4"/>
|
||||
</linearGradient>
|
||||
<polygon class="st3" points="29.2,51.8 69.5,47 69.8,209.1 29.2,204.4 "/>
|
||||
|
||||
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="151.9309" y1="42.7213" x2="142.8473" y2="-43.5726" gradientTransform="matrix(0.9941 1.431752e-03 1.431754e-03 1.1143 -3.0394 44.4335)">
|
||||
<stop offset="0" style="stop-color:#B3B3B3"/>
|
||||
<stop offset="0.4752" style="stop-color:#B5B5B5"/>
|
||||
<stop offset="0.6464" style="stop-color:#BCBCBC"/>
|
||||
<stop offset="0.7685" style="stop-color:#C7C7C7"/>
|
||||
<stop offset="0.8671" style="stop-color:#D8D8D8"/>
|
||||
<stop offset="0.9506" style="stop-color:#EEEEEE"/>
|
||||
<stop offset="1" style="stop-color:#FFFFFF"/>
|
||||
</linearGradient>
|
||||
<polygon class="st4" points="219.3,98.5 97.4,93.2 69.5,47.3 218.9,55.6 "/>
|
||||
<polygon class="st1" points="102,85.3 251.2,93 252.8,91.1 72.2,48.9 69.5,47 "/>
|
||||
<polygon class="st5" points="252.8,91.1 128,84.6 102,82.9 69.8,47.3 219.1,55.6 233.6,71.4 252.3,90.6 252.3,90.6 "/>
|
||||
|
||||
<radialGradient id="SVGID_4_" cx="445.2994" cy="-436.338" r="4.0179" gradientTransform="matrix(0.5088 -4.329579e-03 0.1464 14.7395 -92.0455 6569.5317)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" style="stop-color:#FFFFFF"/>
|
||||
<stop offset="6.758273e-02" style="stop-color:#FFFFFF;stop-opacity:0.9324"/>
|
||||
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
|
||||
</radialGradient>
|
||||
<path class="st6" d="M72.2,152.5c0.2,26.2,0.9,42.4,0.1,42.4c-0.9,0-1.5-6.3-2.5-32.3c-1.1-26.1-1.4-85-0.5-85.1
|
||||
C70.1,77.2,71.9,126.4,72.2,152.5z"/>
|
||||
<g class="st7">
|
||||
<path class="st8" d="M29.1,203.9l20.4,2.1c3.3,0.4,6.9,0.6,10.2,1.1l10.2,1.2h-0.1l74.7-3.2l37.4-1.7l9.3-0.4
|
||||
c3.1-0.1,6.3-0.2,9.3-0.4l18.7-0.5l-18.7,1.2c-3.1,0.2-6.3,0.4-9.3,0.5l-9.3,0.4l-37.4,1.7l-74.5,3.2l0,0l0,0L59.7,208
|
||||
c-3.3-0.4-6.8-0.9-10.2-1.4L29.1,203.9z"/>
|
||||
<path class="st1" d="M28.6,203.9c3.3,0.2,6.8,0.4,10.3,0.6s7.1,0.5,10.6,0.9l10.2,1.1l10.2,1.2l-0.1,1.1h-0.1v-1.1l74.8-3.1
|
||||
l37.4-1.6l18.7-0.7l18.7-0.5v0.6l-18.7,1.1l-9.3,0.5l-9.3,0.4l-37.4,1.6l-74.7,3.1l0,0l0,0l-10.2-1.2l-10.2-1.4L29,203.8
|
||||
L28.6,203.9z M30.3,204.1l19.2,2.5l10.2,1.4l10.2,1.2l0,0l74.7-3.3l37.4-1.7l9.3-0.4l9.3-0.5l18.7-1.2v0.6l-18.7,0.5l-18.7,0.7
|
||||
l-37.4,1.7l-74.7,3.3v-1.1h0.1l-0.1,1.1l-10.2-1.2l-10.2-1.1c-3.3-0.4-6.5-0.6-9.7-1.1C36.6,205,33.5,204.5,30.3,204.1z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st9" d="M181.4,136.4c-8.7,6.8-23.5,8.1-33.8,5.5c2.6-2.3,3.8-3.4,6.3-5.8c2.5-2.2,3.6-3.2,6-5.4
|
||||
c8.4-7.4,12.5-10.8,20.7-17.7c-8.5,6.4-12.9,9.6-21.6,16.4c-2.5,2-3.7,2.8-6.1,4.8c-2.6,2-3.8,3.1-6.4,5
|
||||
c-0.5-9.5,1.1-22.1,10.3-28.9c0.7-0.6,1.7-1.1,2.6-1.7c1.2-0.6,2.5-1.4,3.9-1.8c11.4-4.4,24.8-7.5,37.3-5.9
|
||||
c0.7,6.5-4.9,18.9-11.8,28.2c-1,1.2-1.8,2.5-2.8,3.6C184.2,133.9,182.7,135.3,181.4,136.4z"/>
|
||||
<path class="st10" d="M185.6,132.4c-9.2,6-22.6,5.8-31.7,3.7c2.5-2.2,3.6-3.2,6-5.4c8.4-7.4,12.5-10.8,20.7-17.7
|
||||
c-8.5,6.4-12.9,9.6-21.6,16.4c-2.5,2-3.7,2.8-6.1,4.8c-0.5-7.9,0.4-18.4,6.5-25.5c1.2-0.6,2.5-1.4,3.9-1.8
|
||||
c11.4-4.6,24.8-7.5,37.3-5.9c0.7,6.5-4.9,18.9-11.8,28.2C187.5,130.1,186.5,131.3,185.6,132.4z"/>
|
||||
<path class="st11" d="M188.5,128.9c-8.9,4.2-20.5,3.8-28.5,1.8c8.4-7.4,12.5-10.8,20.7-17.7c-8.5,6.4-12.9,9.6-21.6,16.4
|
||||
c-0.5-6.8,0-15.7,4.3-22.6c11.4-4.4,24.8-7.5,37.3-5.9C201.2,107.4,195.5,119.9,188.5,128.9z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st12" d="M140.4,169.2c-3.6-8.9,0.5-19.6,4.7-26c1.1,2.5,1.6,3.7,2.7,6c1.1,2.3,1.6,3.4,2.6,5.7
|
||||
c3.7,7.9,5.5,11.8,9.3,19.2c-3.1-7.6-4.7-11.6-7.9-19.7c-0.9-2.2-1.4-3.3-2.2-5.5c-1-2.3-1.5-3.6-2.3-6
|
||||
c7.4,2.2,16.8,6.6,20.3,15c0.2,0.7,0.5,1.5,0.7,2.2c0.2,1,0.5,2.1,0.6,3.2c1.5,9.6-0.9,23-4.4,28c-5.5-0.9-14.5-7.7-20-15.1
|
||||
c-0.7-1-1.5-2-2.1-3C141.7,171.9,141,170.6,140.4,169.2z"/>
|
||||
<path class="st13" d="M142.5,173.3c-2.3-8.4,1.5-18.1,5.4-24c1.1,2.3,1.6,3.4,2.6,5.7c3.7,7.9,5.5,11.8,9.3,19.2
|
||||
c-3.1-7.6-4.7-11.6-7.9-19.7c-0.9-2.2-1.4-3.3-2.2-5.5c6.3,1.7,14.4,5.2,18.7,11.3c0.2,1,0.5,2.1,0.6,3.2
|
||||
c1.5,9.6-0.9,23-4.4,27.9c-5.5-0.9-14.5-7.7-20-15.1C143.9,175.2,143.3,174.3,142.5,173.3z"/>
|
||||
<path class="st14" d="M144.6,176.2c-1.1-7.5,2.5-16,5.9-21.3c3.7,7.9,5.5,11.8,9.3,19.2c-3.1-7.6-4.7-11.6-7.9-19.7
|
||||
c5.5,1.4,12.5,4.1,17.2,8.9c1.5,9.6-0.9,23-4.4,27.9C159,190.4,150.1,183.6,144.6,176.2z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st15" d="M125.9,116.6c10.5,4.3,16.5,15.4,18.8,23.4c-3-1-4.3-1.4-7.3-2.3c-2.8-0.9-4.2-1.4-6.9-2.2
|
||||
c-9.7-3.2-14.5-4.9-23.9-8.2c9.1,3.8,13.7,5.8,23.1,9.6c2.6,1.1,3.9,1.6,6.5,2.7c2.7,1.1,4.1,1.6,6.9,2.7
|
||||
c-7.4,4.2-18.4,8.4-28.3,4.6c-0.7-0.2-1.7-0.7-2.6-1.2c-1-0.6-2.2-1.2-3.3-2.1c-8.5-6-17.6-16.7-20.9-26.8
|
||||
c4.9-3.4,17.6-4.2,28.3-2.3c1.5,0.2,2.8,0.5,4.3,0.9C122.7,115.4,124.3,115.8,125.9,116.6z"/>
|
||||
<path class="st16" d="M120.7,114.9c9.1,4.8,14.5,15,16.7,22.6c-2.8-0.9-4.2-1.4-6.9-2.2c-9.7-3.2-14.5-4.9-23.9-8.2
|
||||
c9.1,3.8,13.7,5.8,23,9.6c2.6,1.1,3.9,1.6,6.5,2.7c-6.1,3.6-15.4,7.4-23.9,6c-1-0.6-2.2-1.2-3.3-2.1c-8.5-6-17.6-16.7-20.9-26.8
|
||||
c4.9-3.4,17.6-4.2,28.3-2.3C118,114.2,119.4,114.4,120.7,114.9z"/>
|
||||
<path class="st17" d="M116.6,113.9c7.5,5.3,12.1,14.4,14,21.3c-9.7-3.2-14.5-4.9-23.9-8.2c9.1,3.8,13.7,5.8,23.1,9.6
|
||||
c-5.4,3.2-13,6.6-20.7,6.5c-8.5-6-17.6-16.7-20.9-26.8C93.2,112.8,105.7,112,116.6,113.9z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="241.7537" y1="104.2354" x2="160.0455" y2="55.1756" gradientTransform="matrix(1 0 0 -1 0 256)">
|
||||
<stop offset="0.1721" style="stop-color:#C7C7C7"/>
|
||||
<stop offset="0.3798" style="stop-color:#D8D8D8"/>
|
||||
<stop offset="0.6814" style="stop-color:#DADADA"/>
|
||||
<stop offset="0.7898" style="stop-color:#E1E1E1"/>
|
||||
<stop offset="0.867" style="stop-color:#ECECEC"/>
|
||||
<stop offset="0.8745" style="stop-color:#EEEEEE"/>
|
||||
<stop offset="1" style="stop-color:#FFFFFF"/>
|
||||
</linearGradient>
|
||||
<path class="st18" d="M219.1,128.3c-1,0.4-3.3,15.7-3.7,19.2c-0.7,5.8-3.9,28.7-11.1,41.2c-7.3,12.8-15.7,13.7-16.4,14.6l31.1-0.9
|
||||
C219.1,179.1,219.1,151.5,219.1,128.3L219.1,128.3z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.6 KiB |
@ -0,0 +1,500 @@
|
||||
{
|
||||
"formatVersion": 2,
|
||||
"appVersion": "0.91.5",
|
||||
"files": [
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "OkOZllzB3fqN",
|
||||
"notePath": [
|
||||
"OkOZllzB3fqN"
|
||||
],
|
||||
"title": "User Guide",
|
||||
"notePosition": 20,
|
||||
"prefix": null,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
{
|
||||
"type": "label",
|
||||
"name": "iconClass",
|
||||
"value": "bx bx-help-circle",
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
}
|
||||
],
|
||||
"format": "html",
|
||||
"attachments": [],
|
||||
"dirFileName": "User Guide",
|
||||
"children": [
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "wmegHv51MJMd",
|
||||
"notePath": [
|
||||
"OkOZllzB3fqN",
|
||||
"wmegHv51MJMd"
|
||||
],
|
||||
"title": "Types of notes",
|
||||
"notePosition": 20,
|
||||
"prefix": null,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [],
|
||||
"format": "html",
|
||||
"attachments": [],
|
||||
"dirFileName": "Types of notes",
|
||||
"children": [
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "foPEtsL51pD2",
|
||||
"notePath": [
|
||||
"OkOZllzB3fqN",
|
||||
"wmegHv51MJMd",
|
||||
"foPEtsL51pD2"
|
||||
],
|
||||
"title": "Geo map",
|
||||
"notePosition": 10,
|
||||
"prefix": null,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
{
|
||||
"type": "label",
|
||||
"name": "iconClass",
|
||||
"value": "bx bx-map-alt",
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
}
|
||||
],
|
||||
"format": "html",
|
||||
"dataFileName": "Geo map.html",
|
||||
"attachments": [
|
||||
{
|
||||
"attachmentId": "viN50n5G4kB0",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "Geo map_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "eUrcqc8RRuZG",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "1_Geo map_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "1quk4yxJpeHZ",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "2_Geo map_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "mgwGrtQZjxxb",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "3_Geo map_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "JULizn130rVI",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "4_Geo map_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "kcYjOvJDFkbS",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "5_Geo map_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "ut6vm2aXVfXI",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "6_Geo map_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "0AwaQMqt3FVA",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "7_Geo map_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "gFR2Izzp18LQ",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "8_Geo map_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "PMqmCbNLlZOG",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "9_Geo map_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "pKdtiq4r0eFY",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "10_Geo map_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "FXRVvYpOxWyR",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "11_Geo map_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "42AncDs7SSAf",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "12_Geo map_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "gR2c2Thmfy3I",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "13_Geo map_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "FDP3JzIVSnuJ",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "14_Geo map_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "GhHYO2LteDmZ",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "15_Geo map_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "J0baLTpafs7C",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "16_Geo map_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "uYdb9wWf5Nuv",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "17_Geo map_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "iSpyhQ5Ya6Nk",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "18_Geo map_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "MdC0DpifJwu4",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "19_Geo map_image.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "BDEpqZHDS51s",
|
||||
"notePath": [
|
||||
"OkOZllzB3fqN",
|
||||
"BDEpqZHDS51s"
|
||||
],
|
||||
"title": "Working with notes",
|
||||
"notePosition": 30,
|
||||
"prefix": null,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [],
|
||||
"format": "html",
|
||||
"attachments": [],
|
||||
"dirFileName": "Working with notes",
|
||||
"children": [
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "13D1lOc9sqmZ",
|
||||
"notePath": [
|
||||
"OkOZllzB3fqN",
|
||||
"BDEpqZHDS51s",
|
||||
"13D1lOc9sqmZ"
|
||||
],
|
||||
"title": "Exporting as PDF",
|
||||
"notePosition": 10,
|
||||
"prefix": null,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [],
|
||||
"format": "html",
|
||||
"dataFileName": "Exporting as PDF.html",
|
||||
"attachments": [
|
||||
{
|
||||
"attachmentId": "b3v1pLE6TF1Y",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "Exporting as PDF_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "xsGM34t8ssKV",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "1_Exporting as PDF_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "cvyes4f1Vhmm",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "2_Exporting as PDF_image.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "XUG1egT28FBk",
|
||||
"notePath": [
|
||||
"OkOZllzB3fqN",
|
||||
"XUG1egT28FBk"
|
||||
],
|
||||
"title": "Power users",
|
||||
"notePosition": 50,
|
||||
"prefix": null,
|
||||
"isExpanded": true,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [],
|
||||
"format": "html",
|
||||
"attachments": [],
|
||||
"dirFileName": "Power users",
|
||||
"children": [
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "DtJJ20yEozPA",
|
||||
"notePath": [
|
||||
"OkOZllzB3fqN",
|
||||
"XUG1egT28FBk",
|
||||
"DtJJ20yEozPA"
|
||||
],
|
||||
"title": "Theme development",
|
||||
"notePosition": 10,
|
||||
"prefix": null,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
{
|
||||
"type": "label",
|
||||
"name": "iconClass",
|
||||
"value": "bx bx-palette",
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
}
|
||||
],
|
||||
"format": "html",
|
||||
"attachments": [],
|
||||
"dirFileName": "Theme development",
|
||||
"children": [
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "5HH79ztN0fZA",
|
||||
"notePath": [
|
||||
"OkOZllzB3fqN",
|
||||
"XUG1egT28FBk",
|
||||
"DtJJ20yEozPA",
|
||||
"5HH79ztN0fZA"
|
||||
],
|
||||
"title": "Creating a custom theme",
|
||||
"notePosition": 10,
|
||||
"prefix": null,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "aH8Dk5aMiq7R",
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
}
|
||||
],
|
||||
"format": "html",
|
||||
"dataFileName": "Creating a custom theme.html",
|
||||
"attachments": [
|
||||
{
|
||||
"attachmentId": "bn93hwF7C8sR",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "Creating a custom theme_im.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "17p6z24yW5eP",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "1_Creating a custom theme_im.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "gXLyv5KXjfxg",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "2_Creating a custom theme_im.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "AJHVfQtIQgJ7",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "3_Creating a custom theme_im.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "on1gD7BzCWdN",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "4_Creating a custom theme_im.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "K3cdwj8f90m0",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "5_Creating a custom theme_im.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "aH8Dk5aMiq7R",
|
||||
"notePath": [
|
||||
"OkOZllzB3fqN",
|
||||
"XUG1egT28FBk",
|
||||
"DtJJ20yEozPA",
|
||||
"aH8Dk5aMiq7R"
|
||||
],
|
||||
"title": "Theme base (legacy vs. next)",
|
||||
"notePosition": 20,
|
||||
"prefix": null,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [],
|
||||
"format": "html",
|
||||
"dataFileName": "Theme base (legacy vs. next).html",
|
||||
"attachments": [
|
||||
{
|
||||
"attachmentId": "u0zkXkD7rGXA",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "Theme base (legacy vs. nex.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "5z4bC0x0eH0P",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "1_Theme base (legacy vs. nex.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "pMq6N1oBV9oo",
|
||||
"notePath": [
|
||||
"OkOZllzB3fqN",
|
||||
"XUG1egT28FBk",
|
||||
"DtJJ20yEozPA",
|
||||
"pMq6N1oBV9oo"
|
||||
],
|
||||
"title": "Reference",
|
||||
"notePosition": 30,
|
||||
"prefix": null,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [],
|
||||
"format": "html",
|
||||
"dataFileName": "Reference.html",
|
||||
"attachments": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"noImport": true,
|
||||
"dataFileName": "navigation.html"
|
||||
},
|
||||
{
|
||||
"noImport": true,
|
||||
"dataFileName": "index.html"
|
||||
},
|
||||
{
|
||||
"noImport": true,
|
||||
"dataFileName": "style.css"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 69 KiB |
@ -0,0 +1,94 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../../../style.css">
|
||||
<base target="_parent">
|
||||
<title data-trilium-title>Creating a custom theme</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 data-trilium-h1>Creating a custom theme</h1>
|
||||
|
||||
<div class="ck-content">
|
||||
<h2>Step 1. Find a place to place the themes</h2>
|
||||
<p>Organization is an important aspect of managing a knowledge base. When
|
||||
developing a new theme or importing an existing one it's a good idea to
|
||||
keep them into one place.</p>
|
||||
<p>As such, the first step is to create a new note to gather all the themes.</p>
|
||||
<p>
|
||||
<img src="Creating a custom theme_im.png" width="181" height="84">
|
||||
</p>
|
||||
<h2>Step 2. Create the theme</h2>
|
||||
<figure class="table" style="width:100%;">
|
||||
<table class="ck-table-resized">
|
||||
<colgroup>
|
||||
<col style="width:32.47%;">
|
||||
<col style="width:67.53%;">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<figure class="image">
|
||||
<img style="aspect-ratio:651/220;" src="1_Creating a custom theme_im.png"
|
||||
width="651" height="220">
|
||||
</figure>
|
||||
</td>
|
||||
<td style="vertical-align:top;">Themes are code notes with a special attribute. Start by creating a new
|
||||
code note.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<figure class="image">
|
||||
<img style="aspect-ratio:302/349;" src="2_Creating a custom theme_im.png"
|
||||
width="302" height="349">
|
||||
</figure>
|
||||
</td>
|
||||
<td style="vertical-align:top;">Then change the note type to a CSS code.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<figure class="image">
|
||||
<img style="aspect-ratio:316/133;" src="3_Creating a custom theme_im.png"
|
||||
width="316" height="133">
|
||||
</figure>
|
||||
</td>
|
||||
<td style="vertical-align:top;">In the <i>Owned Attributes</i> section define the <code>#appTheme</code> attribute
|
||||
to point to any desired name. This is the name that will show up in the
|
||||
appearance section in settings.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<h2>Step 3. Define the theme's CSS</h2>
|
||||
<p>As a very simple example we will change the background color of the launcher
|
||||
pane to a shade of blue.</p>
|
||||
<p>To alter the different variables of the theme:</p><pre><code class="language-text-css">:root {
|
||||
--launcher-pane-background-color: #0d6efd;
|
||||
}</code></pre>
|
||||
<h2>Step 4. Activating the theme</h2>
|
||||
<p>Refresh the application (Ctrl+Shift+R is a good way to do so) and go to
|
||||
settings. You should see the newly created theme:</p>
|
||||
<p>
|
||||
<img src="4_Creating a custom theme_im.png" width="631" height="481">
|
||||
</p>
|
||||
<p>Afterwards the application will refresh itself with the new theme:</p>
|
||||
<p>
|
||||
<img src="5_Creating a custom theme_im.png" width="653" height="554">
|
||||
</p>
|
||||
<p>Do note that the theme will be based off of the legacy theme. To override
|
||||
that and base the theme on the new TriliumNext theme, see: <a class="reference-link"
|
||||
href="Theme%20base%20(legacy%20vs.%20next).html">Theme base (legacy vs. next)</a>
|
||||
</p>
|
||||
<h2>Step 5. Making changes</h2>
|
||||
<p>Simply go back to the note and change according to needs. To apply the
|
||||
changes to the current window, press Ctrl+Shift+R to refresh.</p>
|
||||
<p>It's a good idea to keep two windows, one for editing and the other one
|
||||
for previewing the changes.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
@ -0,0 +1,129 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../../../style.css">
|
||||
<base target="_parent">
|
||||
<title data-trilium-title>Reference</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 data-trilium-h1>Reference</h1>
|
||||
|
||||
<div class="ck-content">
|
||||
<h2>Detecting horizontal vs. vertical layout</h2>
|
||||
<p>The user can select between vertical layout (the classical one, where
|
||||
the launcher bar is on the left) and a horizontal layout (where the launcher
|
||||
bar is on the top and tabs are full-width).</p>
|
||||
<p>Different styles can be applied by using classes at <code>body</code> level:</p><pre><code class="language-text-x-trilium-auto">body.layout-vertical #left-pane {
|
||||
/* Do something */
|
||||
}
|
||||
|
||||
body.layout-horizontal #center-pane {
|
||||
/* Do something else */
|
||||
}</code></pre>
|
||||
<p>The two different layouts use different containers (but they are present
|
||||
in the DOM regardless of the user's choice), for example <code>#horizontal-main-container</code> and <code>#vertical-main-container</code> can
|
||||
be used to customize the background of the content section.</p>
|
||||
<h2>Detecting platform (Windows, macOS) or Electron</h2>
|
||||
<p>It is possible to add particular styles that only apply to a given platform
|
||||
by using the classes in <code>body</code>:</p>
|
||||
<figure class="table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Windows</th>
|
||||
<th>macOS</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><pre><code class="language-text-x-trilium-auto">body.platform-win32 {
|
||||
background: red;
|
||||
}</code></pre>
|
||||
</td>
|
||||
<td><pre><code class="language-text-x-trilium-auto">body.platform-darwin {
|
||||
background: red;
|
||||
}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<p>It is also possible to only apply a style if running under Electron (desktop
|
||||
application):</p><pre><code class="language-text-x-trilium-auto">body.electron {
|
||||
background: blue;
|
||||
}</code></pre>
|
||||
<h3>Native title bar</h3>
|
||||
<p>It's possible to detect if the user has selected the native title bar
|
||||
or the custom title bar by querying against <code>body</code>:</p><pre><code class="language-text-x-trilium-auto">body.electron.native-titlebar {
|
||||
/* Do something */
|
||||
}
|
||||
|
||||
body.electron:not(.native-titlebar) {
|
||||
/* Do something else */
|
||||
}</code></pre>
|
||||
<h3>Native window buttons</h3>
|
||||
<p>When running under Electron with native title bar off, a feature was introduced
|
||||
to use the platform-specific window buttons such as the semaphore on macOS.</p>
|
||||
<p>See <a href="https://github.com/TriliumNext/Notes/pull/702">Native title bar buttons by eliandoran · Pull Request #702 · TriliumNext/Notes</a> for
|
||||
the original implementation of this feature, including screenshots.</p>
|
||||
<h4>On Windows</h4>
|
||||
<p>The colors of the native window button area can be adjusted using a RGB
|
||||
hex color:</p><pre><code class="language-text-x-trilium-auto">body {
|
||||
--native-titlebar-foreground: #ffffff;
|
||||
--native-titlebar-background: #ff0000;
|
||||
}</code></pre>
|
||||
<p>It is also possible to use transparency at the cost of reduced hover colors
|
||||
using a RGBA hex color:</p><pre><code class="language-text-x-trilium-auto">body {
|
||||
--native-titlebar-background: #ff0000aa;
|
||||
}</code></pre>
|
||||
<p>Note that the value is read when the window is initialized and then it
|
||||
is refreshed only when the user changes their light/dark mode preference.</p>
|
||||
<h4>On macOS</h4>
|
||||
<p>On macOS the semaphore window buttons are enabled by default when the
|
||||
native title bar is disabled. The offset of the buttons can be adjusted
|
||||
using:</p><pre><code class="language-text-x-trilium-auto">body {
|
||||
--native-titlebar-darwin-x-offset: 12;
|
||||
--native-titlebar-darwin-y-offset: 14 !important;
|
||||
}</code></pre>
|
||||
<h3>Background/transparency effects on Windows (Mica)</h3>
|
||||
<p>Windows 11 offers a special background/transparency effect called Mica,
|
||||
which can be enabled by themes by setting the <code>--background-material</code> variable
|
||||
at <code>body</code> level:</p><pre><code class="language-text-x-trilium-auto">body.electron.platform-win32 {
|
||||
--background-material: tabbed;
|
||||
}</code></pre>
|
||||
<p>The value can be either <code>tabbed</code> (especially useful for the horizontal
|
||||
layout) or <code>mica</code> (ideal for the vertical layout).</p>
|
||||
<p>Do note that the Mica effect is applied at <code>body</code> level and the
|
||||
theme needs to make the entire hierarchy (semi-)transparent in order for
|
||||
it to be visible. Use the TrilumNext theme as an inspiration.</p>
|
||||
<h2>Note icons, tab workspace accent color</h2>
|
||||
<p>Theme capabilities are small adjustments done through CSS variables that
|
||||
can affect the layout or the visual aspect of the application.</p>
|
||||
<p>In the tab bar, to display the icons of notes instead of the icon of the
|
||||
workspace:</p><pre><code class="language-text-x-trilium-auto">:root {
|
||||
--tab-note-icons: true;
|
||||
}</code></pre>
|
||||
<p>When a workspace is hoisted for a given tab, it is possible to get the
|
||||
background color of that workspace, for example to apply a small strip
|
||||
on the tab instead of the whole background color:</p><pre><code class="language-text-x-trilium-auto">.note-tab .note-tab-wrapper {
|
||||
--tab-background-color: initial !important;
|
||||
}
|
||||
|
||||
.note-tab .note-tab-wrapper::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background-color: var(--workspace-tab-background-color);
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||