Custom Logseq theme built on the dracula theme. Nothing fancy, but I made it and like it

gistfile1.txt

@import url('https://raw.githack.com/dracula/logseq/master/custom.css');

/*
==================================================
GLOBAL VARIABLES
==================================================
*/

:root {
    --ls-border-radius-tiny: 2px;	
    --ls-external-link-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGDSURBVHgBtZaNcYMwDIUfGzgbqBuUDcwkaTdoJ4AN0gmaTNJu0GyQdILSCUjRIa6yMT+x4d29O7CNPmMLmQzryYhZ39hIDChbX1vflPn+2JqwoigA8t20fsEKogCslrZ6C6iG/UhAo/qLwBhCpCzc2T+OjNu1PquxB0TqpIK8e33k3Rdw3zJKnyqIVe2VtF1UW4b/PW0QuawaaDyYH5iBVyQCSQA2ALvJPRRQT8QgUdUEjPWs+r6QqHIGlsPdv/1UMIuuNJ3Fh4UwI8+WcAvAZQxEcJNCm2ZgOYZVpodRCPaAYblqxP0MK4wv42sA9oGJzPRLEQez8oDBfILwhHl1eAuOcL/RgZ48mF+uqhnY3dI1b781zHgBl8AKuSZEiOCe1KF2P/V1UiQBa6+Ps7OBu4w2FQi4308RmJDWCePH02K9qSCcQLuRcTncZbaIFKH7HPRe8ptmYp4A/0bUCO93lDhgg2U/RqPlag3o4toYK0JXmvoM1fW0QuIhmmEezvoVJ+sPourrpWEel2gAAAAASUVORK5CYII=");
    
    /* Background patterns */
    --ls-svg-bg-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='30' viewBox='0 0 1000 120'%3E%3Cg fill='none' stroke='%2321222c' stroke-width='3.9' stroke-opacity='0.78'%3E%3Cpath d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3C/g%3E%3C/svg%3E");
    --ls-svg-bg-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23343746' stroke-width='2.8'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%2344475a'%3E%3Ccircle cx='769' cy='229' r='8'/%3E%3Ccircle cx='539' cy='269' r='8'/%3E%3Ccircle cx='603' cy='493' r='8'/%3E%3Ccircle cx='731' cy='737' r='8'/%3E%3Ccircle cx='520' cy='660' r='8'/%3E%3Ccircle cx='309' cy='538' r='8'/%3E%3Ccircle cx='295' cy='764' r='8'/%3E%3Ccircle cx='40' cy='599' r='8'/%3E%3Ccircle cx='102' cy='382' r='8'/%3E%3Ccircle cx='127' cy='80' r='8'/%3E%3Ccircle cx='370' cy='105' r='8'/%3E%3Ccircle cx='578' cy='42' r='8'/%3E%3Ccircle cx='237' cy='261' r='8'/%3E%3Ccircle cx='390' cy='382' r='8'/%3E%3C/g%3E%3C/svg%3E");
    --ls-svg-bg-3: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NiIgaGVpZ2h0PSIxMDAiPgo8cmVjdCB3aWR0aD0iNTYiIGhlaWdodD0iMTAwIiBmaWxsPSIjMjgyYTM2Ij48L3JlY3Q+CjxwYXRoIGQ9Ik0yOCA2NkwwIDUwTDAgMTZMMjggMEw1NiAxNkw1NiA1MEwyOCA2NkwyOCAxMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIxMjIyYyIgc3Ryb2tlLXdpZHRoPSIxIj48L3BhdGg+CjxwYXRoIGQ9Ik0yOCAwTDI4IDM0TDAgNTBMMCA4NEwyOCAxMDBMNTYgODRMNTYgNTBMMjggMzQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzIxMjIyYyIgc3Ryb2tlLXdpZHRoPSIxIj48L3BhdGg+Cjwvc3ZnPg==");
    
    /* Global color palette */
    --ls-color-clouds: rgba(236,240,241,1);
    --ls-color-silver: rgba(189,195,199,1);
    --ls-color-concrete: rgba(149,165,166,1);
    --ls-color-asbestos: rgba(127,140,141,1);
    --ls-color-wet-asphalt: rgba(52,73,94,1);
    --ls-color-midnight-blue: rgba(44,62,80,1);
    --ls-color-turquoise: rgba(26,188,156,1);
    --ls-color-greensea: rgba(22,160,133,1);
    --ls-color-emerland: rgba(46,204,113,1);
    --ls-color-nephritis: rgba(39,174,96,1);
    --ls-color-peter-river: rgba(52,152,219,1);
    --ls-color-belize-hole: rgba(41,128,185,1);
    --ls-color-amethyst: rgba(155,89,182,1);
    --ls-color-wisteria: rgba(142,68,173,1);
    --ls-color-sunflower: rgba(241,196,15,1);
    --ls-color-orange: rgba(243,156,18,1);
    --ls-color-carrot: rgba(230,126,34,1);
    --ls-color-pumpkin: rgba(211,84,0,1);
    --ls-color-alizarin: rgba(231,76,60,1);
    --ls-color-pomegranate: rgba(192,57,43,1);
    
    /* Indentation color palette: cannibalox */
    --clx-level-3: #ff00005c;
    --clx-level-4: #ec87225e;
    --clx-level-5: #ffff0052;
    --clx-level-6: #65d95b7a;
    --clx-level-7: #2ca0df5e;
    --clx-level-8: #9f8af061;
    --clx-level-9: #f15bf74f;
    
    /* Indentation color palette: pink */
    --pink-level-3: #fce4ec;
    --pink-level-4: #f8bbd0;
    --pink-level-5: #f48fb1;
    --pink-level-6: #f06292;
    --pink-level-7: #ec407a;
    --pink-level-8: #e91e63;
    --pink-level-9: #d81b60;
}

/*
==================================================
BACKGROUND PATTERN
==================================================
*/

#app-container {
    background-color: var(--background-color);
    background-image: var(--ls-svg-bg-3);
}

#head, #main-content {
    background-color: transparent;
}

/*
==================================================
HEADERS
==================================================
*/

h1.with-bg-color,
h2.with-bg-color,
h3.with-bg-color {
    border-radius: var(--ls-border-radius-low);
}

/*
==================================================
BULLETS
==================================================
*/

.bullet-container.bullet-closed {
    background-color: var(--pink-hover);
}

/*
==================================================
FIX INPUT TEXT COLOR
==================================================
*/

.ui__modal input[type="text"], input.form-input {
    color: var(--white) !important;
}

/*
==================================================
BLOCK EDITOR HIGHLIGHT
==================================================
*/

.editor-inner textarea {
    background-color: var(--light-background);
    border-radius: var(--ls-border-radius-low);
    padding: 3px 5px;
}

/*
==================================================
COLORFUL INDENTATION
==================================================
*/

.block-children {
    border-left: 0;
}

.block-children [level] {
    border-left-width: 1px;
    border-left-style: solid;
}

.block-children [level="3"] {
    border-left-color: var(--pink-level-3);
}

.block-children [level="4"] {
    border-left-color: var(--pink-level-4);
}

.block-children [level="5"] {
    border-left-color: var(--pink-level-5);
}

.block-children [level="6"] {
    border-left-color: var(--pink-level-6);
}

.block-children [level="7"] {
    border-left-color: var(--pink-level-7);
}

.block-children [level="8"] {
    border-left-color: var(--pink-level-8);
}

.block-children [level="9"] {
    border-left-color: var(--pink-level-9);
}

/*
==================================================
BLOCKS
==================================================
*/

.ls-block { 
    margin: -2px 0px -2px 1px !important; 
    padding: 4px 1px !important;
}

/*
==================================================
BLOCK PROPERTIES
==================================================
*/

.blocks-properties {
    background-color: var(--ls-block-properties-background-color);
    border-radius: var(--ls-border-radius-low);
    opacity: 1;
}

.blocks-properties .my-1 b {
    border-radius: var(--ls-border-radius-low);
    color: var(--text-accent);
    font-weight: 500;
}

/*
==================================================
BLOCK REFS
- Turn off block ref underlining
==================================================
*/

.block-ref {
    border-bottom: none !important;
    border-left: 2px dashed var(--orange);
    display: inline-block;
    padding-left: 0.5rem;
}

/*
==================================================
EXTERNAL LINKS
==================================================
*/

a.external-link { border-bottom: 0px; }
a.external-link:after {
    background-color: var(--cyan);
    bottom: -2px;
    content: '';
    display: inline-block;
    height: 14px;
    left: -1px;
    margin: 0 1px 0 5px;
    mask-image: var(--ls-external-link-icon);
    -webkit-mask-box-image: var(--ls-external-link-icon);
    mask-mode: alpha;
    mask-position: center;
    -webkit-mask-box-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-box-repeat: no-repeat;
    mask-size: 14px 14px;
    -webkit-mask-box-size: 14px 14px;
    object-fit: cover;
    position: relative;
    transition: .3s;
    width: 14px;
}

a.external-link:hover:after {
    background-color: var(--cyan-hover);
}

/*
==================================================
TAGS
- Styles all tags
- Adds colors to some specific tags
==================================================
*/

a.tag[data-ref] {
    align-items: center;
    background: var(--ls-color-clouds);
    border-radius: 1rem 0.4rem 0.4rem 1rem;
    color: var(--ls-primary-background-color);
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 0.8rem;
    padding: 0.2rem 0.3rem;
    text-transform: uppercase;
    transition: .3s;
    white-space: nowrap;
}

a.tag[data-ref]:hover {
    filter: grayscale(25%) !important;
}

a.tag[data-ref]:before {
    background-color: var(--ls-primary-background-color);
    border-radius: 50%;
    content: '';
    display: inline-block;
    height: 0.6rem;
    line-height: 0.8rem;
    margin-right: 0.3rem;
    width: 0.6rem;
}

a.tag[data-ref="Permanent"] {
    background-color: var(--ls-color-nephritis) !important;
}

a.tag[data-ref="Literature"] {
    background-color: var(--ls-color-amethyst) !important;
}

a.tag[data-ref="Fleeting"] {
    background-color: var(--pink) !important;
}

a.tag[data-ref="Miscellaneous"] {
    background-color: var(--ls-color-peter-river) !important;
}

a.tag[data-ref="Journal"] {
    background-color: var(--ls-color-turquoise) !important;
}

a.tag[data-ref="Task"] {
    background-color: var(--ls-color-orange) !important;
}

a.tag[data-ref="Project"] {
    background-color: var(--ls-color-carrot) !important;
}

a.tag[data-ref="Event"] {
    background-color: var(--ls-color-pumpkin) !important;
}

a.tag[data-ref="WIP"] {
    background-color: var(--ls-color-sunflower) !important;
}

/*
==================================================
CHECKBOXES
==================================================
*/

input[type="checkbox"].form-checkbox {
    align-items: center;
    background-color: var(--ls-primary-background-color);
    border-color: var(--ls-border-color);
    border-radius: var(--ls-border-radius-tiny);
    display: inline-flex;
    height: 1rem;
    justify-content: center;
    width: 1rem;
}

input[type="checkbox"].form-checkbox.checked {
    background-color: var(--ls-border-color);
    border: none !important;
}

/*
==================================================
MARKER SWITCHES
==================================================
*/

.marker-switch {
    color: var(--purple);
    margin-top: -1px;
}

.marker-switch:hover {
    color: var(--purple-hover);
}

div.now:before, div.later:before, div.todo:before, div.doing:before {
    background-color: var(--ls-tertiary-background-color);
    border-radius: var(--ls-border-radius-low);
    content: '';
    height: 1rem;
    width: 2.4rem;
}

/*
==================================================
PRIORITIES & PICKER
- Includes links and tooltip
==================================================
*/

a[priority] {
    height: 1rem;
    line-height: 1rem;
    margin: 3px;
    width: 1rem;
}

a[priority],
a.priority {
    display: inline-block;
    font-size: 0px; /* Hide text */
    position: relative;
}

a[priority="A"]:after,
a.priority[href="#/page/A"]:after {
    background-color: var(--ls-color-pomegranate);
    content: 'A';
}

a[priority="B"]:after,
a.priority[href="#/page/B"]:after {
    background-color: var(--ls-color-sunflower);
    content: 'B';
}

a[priority="C"]:after,
a.priority[href="#/page/C"]:after {
    background-color: var(--ls-color-greensea);
    content: 'C';
}

a[priority]:after,
a.priority:after {
    border-radius: 50%;
    color: var(--ls-primary-background-color);
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    width: 1rem;
}

.Tooltip__label {
    --arrow-size: 0px;
    background-color: var(--ls-primary-background-color);
    border: 1px solid var(--light-background);
    font-size: 1rem;
    left: -2px;
    padding: 0 2px;
    top: -2px;
    width: max-content;
}

.Tooltip__label ul {
    margin-left: 0;
}

/*
==================================================
HIGHLIGHT CURRENT PATH
- By cannibalox
- option: (:hover) to (:focus-within)
==================================================
*/

.ls-block .bullet {
    background-color: var(--pink);
}

.ls-block:not(:hover) .bullet{
    background-color: var(--ls-block-bullet-color);
}

/*
==================================================
RIGHT SIDEBAR
==================================================
*/

.cp__right-sidebar {
    background-color: var(--ls-secondary-background-color, #d8e1e8);
    border-radius: var(--ls-border-radius-medium) 0 0 0;
    box-sizing: border-box;
    height: 102vh; /*calc(100vh - 3rem);*/
    opacity: .5;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 48px;
    position: fixed;
    right: 0;
    top: 3rem;
    transition: width .3s, opacity .2s;
    width: 0;
    z-index: 9;
}

/*
==================================================
CODEMIRROR & INLINE CODE BLOCKS
==================================================
*/

.CodeMirror *, code, kbd, pre, samp {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px;
    font-variant: contextual slashed-zero;
    line-height: 1.2rem;
}