Last active
March 18, 2023 08:22
-
-
Save nizur/5a0b8fb6f24836094c75996bea626fa6 to your computer and use it in GitHub Desktop.
Custom Logseq theme built on the dracula theme. Nothing fancy, but I made it and like it
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment