commit d1ae9b910c788609fd10b788d43c1cadbfbb6818 Author: edi Date: Fri Nov 17 09:14:25 2023 +0000 neu diff --git a/custom.css b/custom.css new file mode 100644 index 0000000..0b8ba40 --- /dev/null +++ b/custom.css @@ -0,0 +1,445 @@ +/* +This theme was adopted from Dracula for CodeMirror. +Original author: Michael Kaminsky (http://github.com/mkaminsky11) +Original theme by Zeno Rocha: (https://github.com/zenorocha/dracula-theme) +*/ + +/* +@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); + +@import url("https://cdn.jsdelivr.net/gh/pengx17/logseq-dev-theme@main/bullet_threading.css"); +*/ + +:root { + /* +Original colors from Bear Panic Mode theme package + + --bear-background-primary: rgba(17, 28, 42, 1); + --bear-title-color-primary: rgba(249, 181, 55, 1); + --bear-link-color-primary: rgba(84, 193, 220, 1); + --bear-accent-color-primary: rgba(249, 181, 55, 1); + --bear-insertion-color: rgba(252, 193, 70, 1); + --bear-selected-text-background-color: rgba(180, 216, 254, 0.5); + --bear-selected-text-inactive-background-color: rgba(105, 170, 207, 0.3); + --bear-style-marker-color: rgba(252, 193, 70, 0.7); + --bear-invalict-character-color: rgba(69, 70, 64, 1); + --bear-map-text-color: rgba(59, 235, 42, 1); + --bear-separator-color: rgba(252, 193, 70, 1); + --bear-hashtag-text-color: rgba(255, 255, 255, 1); + --bear-hashtag-marker-color: rgba(224, 232, 237, 1); + --bear-hasthag-background: rgba(111, 78, 188, 1); + --bear-hashtag-selected: rgba(111, 78, 188, 0.5); + --highlight-background-color: rgba(45, 78, 120, 1); + --highlight-marker: rgba(79, 116, 163, 1); + --code-background: rgba(23, 33, 52, 1); +*/ + /* Bullet threading root (delete two lines below if you don't want bullet threds */ + --ls-block-bullet-active-color: var(--yellow); + --ls-block-bullet-threading-width: 1px; + + /* CodeMirror root */ + + --background: rgba(17, 28, 42, 1); + --light-background: rgba(23, 33, 52, 1); + --lighter-background: rgba(23, 33, 52, 1); + --link-text-color: rgba(84, 193, 220, 1); + --dark-background: #020a14; + --darker-background: #191a21; + --current-line: #44475a; + --comment: #415694; + --white: rgba(246, 247, 238, 1); + --white-hover: rgba(176, 176, 176, 1); + --red: #d45288; + --orange: #ffb86c; + --yellow: rgba(249, 181, 55, 1); + --green: #55ca72; + --purple: rgba(111, 78, 188, 1); + --purple-hover: rgba(111, 78, 188, 0.5); + --cyan: #8be9fd; + --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: rgba(45, 78, 120, 1); + --pink: #ff79c6; + + --bracket-color: #8be9fd; + + --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: "Mulish", sans-serif; + --ls-font-weight: 300; + --ls-font-letter-spacing: 0.002em; + --ls-font-line-height: 1.5; + + --ls-border-radius-low: 3px; + --ls-border-radius-medium: 6px; +} + +.dark-theme, +html[data-theme="dark"] { + --ls-primary-background-color: var(--background); + --ls-secondary-background-color: var(--dark-background); + --ls-tertiary-background-color: var(--lighter-background); + --ls-quaternary-background-color: var(--light-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(--yellow); + --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(--background); + + --ls-scrollbar-background-color: var(--background); + --ls-scrollbar-foreground-color: var(--darker-background); + --ls-scrollbar-thumb-hover-color: var(--light-background); + + --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(--pink); + text-decoration: none; + border-bottom: none; +} + +.timestamp-label + a:hover, +.external-link:hover, +.marker-switch:hover, +.block-ref:hover, +.page-ref:hover { + color: var(--white-hover); +} + +h1.title, +.ls-block h1, +.ls-block h2, +.ls-block h3, +.ls-block h4, +.ls-block h5, +.ls-block h6 { + font-weight: 400; + color: var(--yellow); +} + +/* 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(--ls-quinary-background-color); +} + +.Tooltip__label::after { + border-bottom-color: var(--ls-quinary-background-color); +} + +.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; +} + +a.tag:hover { + background: var(--purple-hover); + color: var(--white-hover); +} + +html[data-theme="dark"] .CodeMirror { + font-family: "FiraCode Nerd Font", "Fire Code", monospace; + line-height: 1.2; + background: var(--background); + box-shadow: none; + -webkit-box-shadow: none; + color: var(--white); +} + +html[data-theme="dark"] .cm-s-default .CodeMirror, +html[data-theme="dark"] .CodeMirror .CodeMirror-gutters { + background-color: transparent; + color: var(--white) !important; + border: none; +} + +html[data-theme="dark"] .extensions__code-lang { + background: var(--light-background); +} + +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(--white); +} +html[data-theme="dark"] .CodeMirror .CodeMirror-linenumber { + color: var(--comment); +} +html[data-theme="dark"] .CodeMirror .CodeMirror-selected { + background: rgba(255, 255, 255, 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, 255, 255, 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, 255, 255, 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(--purle); +} +html[data-theme="dark"] .CodeMirror span.cm-variable { + color: var(--purple); +} +html[data-theme="dark"] .CodeMirror span.cm-variable-2 { + color: var(--white); +} +html[data-theme="dark"] .CodeMirror span.cm-def { + color: var(--white); +} +html[data-theme="dark"] .CodeMirror span.cm-operator { + color: var(--pink); +} +html[data-theme="dark"] .CodeMirror span.cm-keyword { + color: var(--pink); +} +html[data-theme="dark"] .CodeMirror span.cm-atom { + color: var(--purple); +} +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; +} + +/* 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); +} + +/* Block references */ + + +/* Hier kommen meine Änderungen */ + + +.ls-block :is(h1, h2, h3, h4, h5) { + font-weight: 500; + text-transform: none !important; +} +.page-ref:hover, +.references-blocks .page-reference:hover { + color: HotPink; + background-color: rgb(134, 158, 233, 0.5) !important; +} +.page-ref { + + color: HotPink; +} \ No newline at end of file