@import url("https://cdn.jsdelivr.net/gh/pengx17/logseq-dev-theme@main/bullet_threading.css");
@import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=Fira+Sans:ital,wght@0,400;0,700;1,400;1,700&family=PT+Sans+Narrow&display=swap");

/* Emoji Fix */
@font-face {
    font-family: "Only Emoji";
    src: local("Apple Color Emoji"), local("Android Emoji"), local("Segoe UI Emoji"), local("Segoe UI");
    unicode-range: U+200D, U+2049, U+20E3, U+2117, U+2120, U+2122, U+2139, U+2194-2199, U+21A9, U+21AA, U+229C, U+231A, U+231B, U+2328, U+23CF, U+23E9-23F3, U+23F8-23FE, U+24C2, U+25A1, U+25AA-25AD, U+25B6, U+25C0, U+25D0, U+25D1, U+25E7-25EA, U+25ED, U+25EE, U+25FB-25FE, U+2600-2605, U+260E, U+2611, U+2614, U+2615, U+2618, U+261D, U+2620, U+2622, U+2623, U+2626, U+262A, U+262E, U+262F, U+2638-263A, U+2640, U+2642, U+2648-2653, U+265F, U+2660, U+2663, U+2665, U+2666, U+2668, U+267B, U+267E, U+267F, U+2691-2697, U+2699, U+269B, U+269C, U+26A0, U+26A1, U+26A7, U+26AA, U+26AB, U+26B0, U+26B1, U+26BD, U+26BE, U+26C4, U+26C5, U+26C8, U+26CE, U+26CF, U+26D1, U+26D3, U+26D4, U+26E9, U+26EA, U+26F0-26F5, U+26F7-26FA, U+26FD, U+2702, U+2705, U+2708-270D, U+270F, U+2712, U+2714, U+2716, U+271D, U+2721, U+2728, U+2733, U+2734, U+2744, U+2747, U+274C, U+274E, U+2753-2755, U+2757, U+2763, U+2764, U+2795-2797, U+27A1, U+27B0, U+27BF, U+2934, U+2935, U+2B05-2B07, U+2B0C, U+2B0D, U+2B1B, U+2B1C, U+2B1F-2B24, U+2B2E, U+2B2F, U+2B50, U+2B55, U+2B58, U+2B8F, U+2BBA-2BBC, U+2BC3, U+2BC4, U+2BEA, U+2BEB, U+3030, U+303D, U+3297, U+3299, U+E000-E009, U+E010, U+E011, U+E040-E04B, U+E050-E058, U+E080-E0B4, U+E0C0-E0CA, U+E0FF-E10D, U+E140-E144, U+E146-E149, U+E150-E157, U+E181-E188, U+E1C0-E1C4, U+E1C6-E1D7, U+E200-E20E, U+E240-E269, U+E280-E283, U+E2C0-E2C4, U+E2C6-E2DA, U+E300-E303, U+E305-E30F, U+E312-E316, U+E318-E322, U+E324-E329, U+E32B, U+E340-E348, U+E380, U+E381, U+F000, U+F8FF, U+FE0F, U+1F004, U+1F0CF, U+1F10D-1F10F, U+1F12F, U+1F16D-1F171, U+1F17E, U+1F17F, U+1F18E, U+1F191-1F19A, U+1F1E6-1F1FF, U+1F201, U+1F202, U+1F21A, U+1F22F, U+1F232-1F23A, U+1F250, U+1F251, U+1F300-1F321, U+1F324-1F393, U+1F396, U+1F397, U+1F399-1F39B, U+1F39E-1F3F0, U+1F3F3-1F3F5, U+1F3F7-1F4FD, U+1F4FF-1F53D, U+1F549-1F54E, U+1F550-1F567, U+1F56F, U+1F570, U+1F573-1F57A, U+1F587, U+1F58A-1F58D, U+1F590, U+1F595, U+1F596, U+1F5A4, U+1F5A5, U+1F5A8, U+1F5B1, U+1F5B2, U+1F5BC, U+1F5C2-1F5C4, U+1F5D1-1F5D3, U+1F5DC-1F5DE, U+1F5E1, U+1F5E3, U+1F5E8, U+1F5EF, U+1F5F3, U+1F5FA-1F64F, U+1F680-1F6C5, U+1F6CB-1F6D2, U+1F6D5-1F6D7, U+1F6E0-1F6E5, U+1F6E9, U+1F6EB, U+1F6EC, U+1F6F0, U+1F6F3-1F6FC, U+1F7E0-1F7EB, U+1F90C-1F93A, U+1F93C-1F945, U+1F947-1F978, U+1F97A-1F9CB, U+1F9CD-1F9FF, U+1FA70-1FA74, U+1FA78-1FA7A, U+1FA80-1FA86, U+1FA90-1FAA8, U+1FAB0-1FAB6, U+1FAC0-1FAC2, U+1FAD0-1FAD6, U+1FBC5-1FBC9, U+E0061-E0067, U+E006C, U+E006E, U+E0070-E0079, U+E007F;
}

:root {
    --background: #2d2742;
    --light-background: rgb(41, 33, 70);
    --lighter-background: rgba(180, 216, 254, 0.5);
    --link-text-color: rgba(84, 193, 220, 1);
    --dark-background: #241B30;
    --darker-background: #191a21;
    --current-line: #442034;
    --comment: #6970A9;
    --white: rgb(255, 245, 245);
    --white-hover: rgba(176, 176, 176, 0.61);
    --red: #e6488a;
    --orange: #ffb86c;
    --yellow: rgba(249, 181, 55, 1);
    --green: #55ca72;
    --purple: rgba(126, 80, 233, 0.9);
    --purple-hover: rgba(111, 78, 188, 0.5);
    --gutter: rgba(103, 51, 138, 0.5);
    --purple-dark: #1f172c;
    --cyan: #51dfff;
    --cyan-hover: #8be9fd80;
    --blue: rgba(84, 193, 220, 1);
    --checkbox-blue: rgba(38, 67, 104, 1);
    --checkbox-border-blue: rgba(38, 67, 104, 1);
    --checkbox-check: rgba(246, 247, 238, 1);
    --highlight-blue: rgb(29, 104, 202);
    --pink: #ff8ccd;
    --pink-glow: #df0977;
    --bracket-color: #8be9fd;
    --orchid: #DA70D6;

    --ls-tag-text-opacity: 0.8;
    --ls-tag-text-hover-opacity: 0.8;
    --ls-page-text-size: 16px;
    --ls-page-title-size: 36px;
    --ls-font-family: "Only Emoji", "Fira Sans", sans-serif;
    --ls-font-weight: 300;
    --ls-font-letter-spacing: 0.002em;
    --ls-font-line-height: 1.4;

    --ls-border-radius-low: 4px;
    --ls-border-radius-medium: 8px;

    /* Accent Colors for Neon Glows */
    --gradientDegree: 130deg;
    --accent-1: #FF00FF;
    --accent-2: #00FFFF;
    --accent-3: #00FF00;
    --accent-4: #FFFF00;
    --accent-5: #FF0000;
    --accent-6: #0000FF;

    --accent-1-muted: #ff79c6;
    --accent-2-muted: #8be9fd;
    --accent-3-muted: #50fa7b;
    --accent-4-muted: #ffb86c;
    --accent-5-muted: #ff5555;
    --accent-6-muted: #bd93f9;
    --indent-px: 1px;
    --icon-external-link: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g style="stroke:orchid;stroke-width:1"><line x1="5" y1="5" x2="5" y2="14" /><line x1="14" y1="9" x2="14" y2="14" /><line x1="5" y1="14" x2="14" y2="14" /><line x1="5" y1="5" x2="9" y2="5"  /><line x1="10" y1="2" x2="17" y2="2"  /><line x1="17" y1="2" x2="17" y2="9" /><line x1="10" y1="9" x2="17" y2="2" style="stroke-width:1.5" /></g></svg>');
}

.dark-theme,
html[data-theme="dark"] {
    --ls-primary-background-color: var(--background);
    --ls-secondary-background-color: var(--light-background);
    --ls-tertiary-background-color: var(--lighter-background);
    --ls-quaternary-background-color: var(--dark-background);
    --ls-quinary-background-color: var(--darker-background);

    --ls-active-primary-color: var(--white);
    --ls-active-secondary-color: var(--white);

    --ls-primary-text-color: var(--white);
    --ls-secondary-text-color: var(--white-hover);

    --ls-search-background-color: var(--background);
    --ls-border-color: var(--comment);
    --ls-secondary-border-color: var(--ls-border-color);
    --ls-menu-hover-color: var(--light-background);
    --ls-table-tr-even-background-color: var(--light-background);

    --ls-head-text-color: var(--white);
    --ls-title-text-color: var(--white);

    --ls-link-text-color: var(--pink);
    --ls-link-text-hover-color: var(--white-hover);

    --ls-link-ref-text-color: var(--blue);
    --ls-link-ref-text-hover-color: var(--white-hover);
    --ls-block-ref-link-text-color: var(--ls-border-color);

    --ls-tag-text-color: var(--white);
    --ls-tag-text-hover-color: var(--white-hover);

    --ls-block-bullet-border-color: var(--current-line);
    --ls-block-bullet-color: var(--pink);
    --ls-block-bullet-threading-width: 2px;
    --ls-block-highlight-color: var(--current-line);
    --ls-block-properties-background-color: var(--light-background);

    --ls-page-checkbox-color: var(--checkbox-blue);
    --ls-page-checkbox-border-color: var(--checkbox-border-blue);

    --ls-page-blockquote-color: var(--white);
    --ls-page-blockquote-bg-color: var(--light-background);
    --ls-page-blockquote-border-color: var(--yellow);
    --ls-page-properties-background-color: var(--light-background);

    --ls-page-inline-code-color: var(--orange);
    --ls-page-inline-code-bg-color: var(--purple-dark);

    --ls-scrollbar-background-color: var(--current-line);
    --ls-scrollbar-foreground-color: var(--accent-6-muted);
    --ls-scrollbar-thumb-hover-color: var(--accent-5-muted);

    --ls-icon-color: var(--blue);
    --ls-search-icon-color: var(--white-hover);
    --ls-a-chosen-bg: var(--light-background);
    --ls-right-sidebar-code-bg-color: var(--light-background);
    --ls-selection-background-color: var(--comment);
    --ls-slide-background-color: var(--ls-primary-background-color);
    --ls-guideline-color: var(--ls-border-color);

}

html,
body {
    font-weight: var(--ls-font-weight);
    letter-spacing: var(--ls-font-letter-spacing);
    line-height: var(--ls-font-line-height);
    font-size: var(--ls-page-text-size);
    background-color: var(--ls-primary-background-color);
}
i {
    font-weight: italic;
}

b {
    font-weight: bold;
}

mark {
    background-color: var(--highlight-blue);
    color: var(--white);
}

.bg-orange-400 {
    background-color: var(--orange);
}

.bg-green-600 {
    background-color: var(--green);
}

.bg-red-500 {
    background-color: var(--red);
}

.dark-theme .form-checkbox {
    border: 1px solid var(--ls-page-checkbox-border-color) !important;
    border-radius: var(--ls-border-radius-low) !important;
}


.external-link {
    color: var(--orchid);
    text-decoration: none;
    border-bottom: none;
}

.external-link::after {
    content: '';
    background: no-repeat var(--icon-external-link);
    padding-right: 1em;
}

.timestamp-label+a:hover,
.external-link:hover,
.marker-switch:hover,
.block-ref:hover,
.page-ref:hover {
    color: var(--white-hover);
}

h1,
h2,
h3,
h4 {
    color: transparent;
    -webkit-text-fill-color: initial;
    background-clip: text;
    -webkit-background-clip: text;
    font-family: "PT Sans Narrow", sans-serif;
}

h1 {
    font-size: 2.5em !important;
    background-image: linear-gradient(var(--gradientDegree),
            var(--accent-1-muted) 0,
            var(--accent-4-muted) 25%);
    text-shadow: -0.2rem -0.2rem 1rem transparent,
        0.2rem 0.2rem 2rem transparent,
        0 0 1.1rem var(--accent-4-muted);
}

h2 {
    font-size: 2em !important;
    background-image: linear-gradient(var(--gradientDegree),
            var(--accent-2-muted) 0,
            var(--accent-4-muted) 10%);
    text-shadow: -0.2rem -0.2rem 1rem transparent,
        0.4rem 0.4rem 2rem transparent,
        0 0 0.8rem var(--accent-2-muted);
}

h3 {
    font-size: 1.8em !important;
    background-image: linear-gradient(var(--gradientDegree),
            var(--accent-3-muted) 0,
            var(--accent-4-muted) 10%);
    text-shadow: -0.2rem -0.2rem 1rem transparent,
        0.4rem 0.4rem 2rem transparent,
        0 0 0.8rem var(--accent-3-muted);
}

h4 {
    font-size: 1.4em !important;
    background-image: linear-gradient(var(--gradientDegree),
            var(--accent-4-muted) 0,
            var(--accent-2) 60%);
    text-shadow: -0.2rem -0.2rem 1rem transparent,
        0.4rem 0.4rem 2rem transparent,
        0 0 0.8rem var(--accent-2);
}

.foldable-title h2 {
    color: var(--accent-6-muted) !important;
    -webkit-text-fill-color: var(--accent-6-muted) !important;
    font-weight: 400;
    background: transparent;
    font-size: 1.5em;
    text-shadow: none;
}

/* Priority tag styling */
.priority {
    color: var(--ls-tag-text-color);
    opacity: 1 !important;
    font-size: 0px;
    /* Hide text */
}

.priority:hover,
a.tooltip-priority:hover {
    color: var(--ls-tag-text-hover-color);
    opacity: 0.5;
}

a.priority[href="#/page/A"]:before {
    content: "A";
    background: var(--red);
}

a.priority[href="#/page/B"]:before {
    content: "B";
    background: var(--yellow);
}

a.priority[href="#/page/C"]:before {
    content: "C";
    background: var(--green);
}

a.priority:before {
    font-size: 0.9rem;
    font-weight: 400;
    padding: 1px 4px 0px 3px;
    margin: 0px 2px 0px 0px;
    border-radius: var(--ls-border-radius-low);
    color: var(--ls-primary-background-color);
}

a.tooltip-priority {
    color: var(--ls-tag-text-color);
}

.Tooltip__label {
    background: var(--dark-background);
}

.Tooltip__label::after {
    border-bottom-color: var(--light-background);
}

.page-reference .bracket {
    color: var(--yellow);
    opacity: 0.8;
}

a.tag {
    background: var(--purple);
    border-radius: 50px;
    padding: 1px 8px;
    color: #fff;
    font-weight: 500;
    font-size: 0.9rem;
    border: 1px solid var(--purple-hover);
}

a.tag:hover {
    background: var(--purple-hover);
    color: var(--white-hover);
    border: 1px solid var(--purple-hover);
}

html[data-theme="dark"] .CodeMirror {
    font-family: 'Fira Code', monospace;
    line-height: 1.6;
    background: var(--light-background);
    color: var(--white);
    margin-top: 0.9em;
    box-shadow: none;
    -webkit-box-shadow: none;
}

html[data-theme="dark"] .cm-s-default .CodeMirror,
html[data-theme="dark"] .CodeMirror .CodeMirror-gutters {
    background-color: var(--gutter);
    color: var(--white) !important;
    border: none;
}

html[data-theme="dark"] .extensions__code-lang {
    background: var(--purple-dark);
    border: 1px solid var(--gutter);
    color: var(--comment);
    border-radius: var(--ls-border-radius-low);
}

html[data-theme="dark"] .CodeMirror {
    border: 5px solid var(--light-background);
}

html[data-theme="dark"] .CodeMirror .CodeMirror-gutters {
    color: var(--background);
}

html[data-theme="dark"] .CodeMirror .CodeMirror-cursor {
    border-left: solid thin var(--accent-4-muted);
}

html[data-theme="dark"] .CodeMirror .CodeMirror-linenumber {
    color: var(--comment);
}

html[data-theme="dark"] .CodeMirror .CodeMirror-selected {
    background: rgba(255, 240, 240, 0.1);
}

html[data-theme="dark"] .CodeMirror .CodeMirror-line {
    box-shadow: none;
}

 

html[data-theme="dark"] .CodeMirror .CodeMirror-line::selection,
html[data-theme="dark"] .CodeMirror .CodeMirror-line>span::selection,
html[data-theme="dark"] .cm-s-default .CodeMirror-line>span>span::selection {
    background: rgba(255, 240, 240, 0.1);
}

html[data-theme="dark"] .CodeMirror .CodeMirror-line::-moz-selection,
html[data-theme="dark"] .CodeMirror .CodeMirror-line>span::-moz-selection,
html[data-theme="dark"] .cm-s-default .CodeMirror-line>span>span::-moz-selection {
    background: rgba(255, 240, 240, 0.1);
}

html[data-theme="dark"] .CodeMirror span.cm-comment {
    color: var(--comment);
}

html[data-theme="dark"] .CodeMirror span.cm-string,
html[data-theme="dark"] .CodeMirror span.cm-string-2 {
    color: var(--yellow);
}

html[data-theme="dark"] .CodeMirror span.cm-number {
    color: var(--accent-2);
}

html[data-theme="dark"] .CodeMirror span.cm-variable {
    color: var(--accent-3-muted);
}

html[data-theme="dark"] .CodeMirror span.cm-variable-2 {
    color: var(--accent-6-muted);
}

html[data-theme="dark"] .CodeMirror span.cm-def {
    color: var(--white);
}

html[data-theme="dark"] .CodeMirror span.cm-operator {
    color: var(--accent-1-muted);
    font-weight: bold;
}

html[data-theme="dark"] .CodeMirror span.cm-keyword {
    color: var(--accent-5-muted);
}

html[data-theme="dark"] .CodeMirror span.cm-atom {
    color: var(--accent-6-muted);
}

html[data-theme="dark"] .CodeMirror span.cm-meta {
    color: var(--white);
}

html[data-theme="dark"] .CodeMirror span.cm-tag {
    color: var(--pink);
}

html[data-theme="dark"] .CodeMirror span.cm-attribute {
    color: var(--green);
}

html[data-theme="dark"] .CodeMirror span.cm-qualifier {
    color: var(--green);
}

html[data-theme="dark"] .CodeMirror span.cm-property {
    color: var(--cyan);
}

html[data-theme="dark"] .CodeMirror span.cm-builtin {
    color: var(--green);
}

html[data-theme="dark"] .CodeMirror span.cm-variable-3,
html[data-theme="dark"] .CodeMirror span.cm-type {
    color: var(--orange);
}

html[data-theme="dark"] .CodeMirror .CodeMirror-activeline-background {
    background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .CodeMirror .CodeMirror-matchingbracket {
    text-decoration: underline;
    color: var(--white) !important;
}

html[data-theme="dark"] #right-sidebar pre.CodeMirror-line {
    background: transparent;
}

/* Bullet Alignment */
.items-center {
    align-items: center !important;
}


/* Changes all icons to the same color */
.ti {
    color: var(--ls-icon-color);
}

/* Changes sidebar link colors to the same color as the icons */
.left-sidebar-inner a.item>span {
    color: var(--ls-icon-color);
}

/* Journal Earlier link reveal  */
a.fade-link {
    color: var(--ls-icon-color);
    font-weight: bold;
    font-family: var(--font-family);
}

/* Flash card styling */
div[data-refs-self*='"card"'] {
    background-color: var(--light-background);
}

/* Dropdown menu */
#head>div.r.flex>div>div.dropdown-wrapper>div,
#head>div.r.flex>div>div.dropdown-wrapper>div>a {
    background-color: var(--ls-secondary-background-color);
}


/* Further Glows on some elemets */
b, strong {
    text-shadow: -0.2rem -0.2rem 1rem transparent,
    0.2rem 0.2rem 2rem transparent,
    0 0 1.2rem var(--accent-4-muted);
}


/* Custom Tag Rendering Emojis */
a.tag[data-ref="star"i]::before {
    content: '⭐️';
    display: inline-block;
    width: 2em;
    border-radius: 12px;
    height: 1.5em;
    visibility: visible;
    background-color: brown;
}

a.tag[data-ref="star"i] {
    visibility: hidden;
    width: 44px;
    white-space: nowrap;
    display: inline-block;
}

a.tag[data-ref="idea"i]::before {
    content: '💡';
    display: inline-block;
    width: 2em;
    border-radius: 12px;
    height: 1.5em;
    visibility: visible;
    background-color: slategray;
}

a.tag[data-ref="idea"i] {
    visibility: hidden;
    width: 44px;
    white-space: nowrap;
    display: inline-block;
}

/* ==== colorful indent levels ===*/
/* See Forum: https: //discuss.logseq.com/t/css-mod-colorful-indentation-lines/229 */
.block-children {
    border-left: 0 !important;
}

.block-children [level="2"] {
    border-left: var(--indent-px) ridge;
    border-left-color: var(--accent-1-muted);
    border-radius: 6px;
}

.block-children [level="3"] {
    border-left: var(--indent-px) ridge;
    border-left-color: var(--accent-2-muted);
    border-radius: 6px;
}

.block-children [level="4"] {
    border-left: var(--indent-px) ridge;
    border-left-color: var(--accent-3-muted);
    border-radius: 4px;
}

.block-children [level="5"] {
    border-left: var(--indent-px) ridge;
    border-left-color: var(--accent-4-muted);
    border-radius: 4px;
}

.block-children [level="6"] {
    border-left: var(--indent-px) ridge;
    border-left-color: var(--accent-5-muted);
    border-radius: 4px;
}

.block-children [level="7"] {
    border-left: var(--indent-px) ridge;
    border-left-color: var(--accent-6-muted);
    border-radius: 4px;
}

.block-children [level="8"] {
    border-left: var(--indent-px) ridge;
    border-left-color: var(--accent-4);
    border-radius: 4px;
}

/* ==== fix spacing - TWEAK VALUES ! ===*/
.ls-block {
    margin: 2px 0px 0px 1px !important;
    padding: 3px 0px !important;
}


/* Fixes */

/* Plugin Option Heading */
div.desc-item>h2>code,div.desc-item>h2>strong {
    background-color: transparent !important;
    font-size: 0.5em;
}


/* Marketplace Headings */
div.cp__plugins-marketplace-cnt>div>div>div.r>h3,div.cp__plugins-item-lists>div>div.r>h3 {
    font-size: 1.3em !important;
    background-image: linear-gradient(var(--gradientDegree), var(--accent-3-muted) 0, var(--accent-4-muted) 40%);
    text-shadow: none !important;
}