@keyframes text-loading { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; }}
:root { --views-min-width: 240px; --views-max-width: 50%; --views-max-width-narrow: 75%; --views-width: clamp(var(--views-min-width), calc(100% - var(--main-width-viewing) - var(--data-width-viewing)), var(--views-max-width)); --views-width-narrow: clamp(var(--views-min-width), calc(100% - var(--main-width-viewing)), var(--views-max-width-narrow)); --main-min-width: 40ch; --main-max-width: 65ch; --main-max-width-viewing: 50ch; --main-width: clamp(var(--main-min-width), calc(100% - var(--data-width)), var(--main-max-width)); --main-width-focused: clamp(var(--main-min-width), var(--main-max-width), 100%); --main-width-viewing: clamp(var(--main-min-width), calc(100% - var(--views-min-width) - var(--data-width)), var(--main-max-width-viewing)); --data-width: 320px; --data-width-viewing: 280px; } .text-loading::after { content: '...'; } * { margin: 0; padding: 0; border: 0; outline: 0 none; font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-tap-highlight-color: transparent; } a.enlarge { cursor: zoom-in; } html { height: 100dvh; background: #fff8e1; overflow: hidden; } html.dark { background: #1E1E1E; } body { position: relative; text-align: center; height: 100%; min-height: 100dvh; color: rgba(0,0,0,.9); background: #fff8e1; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 5%; -webkit-user-select: none; user-select: none; } body.dark { color: #f5f5f5; background: #1E1E1E; } #actions { position: relative; z-index: 2; line-height: 0; padding: 0 5px; left: -5px; white-space: nowrap; background: #fff8e1; border-bottom-left-radius: 10px; } @media (min-width: 1050px) { #actions { position: fixed; padding: 5px; top: 0; left: 0; } } @media (min-width: 709px) and (max-width: 1049px) { #actions { padding: 0 0 5px 0; top: 0; } } @media (min-width: 1050px) { body.viewing #actions { left: calc(var(--views-width) - 35px); } } body.dark #actions { background: #1E1E1E; } #actions .ui-action { } @media (min-width: 1050px) { #actions .ui-action { display: block; } } body.focused #actions .ui-action.unfocus { display: none; } #actions .ui-action .ui-tooltip { display: none; } @media (min-width: 1050px) { #actions .ui-action .ui-tooltip.right { display: inline-block; } } @media (min-width: 709px) and (max-width: 1049px) { #actions .ui-action .ui-tooltip.bottom { display: inline-block; } } @media (min-width: 709px) and (max-width: 1049px) { #actions .ui-action .ui-tooltip.bottom-left { display: inline-block; } } @media (max-width: 708px) and (hover: none) { #actions .ui-action .ui-tooltip.bottom { display: inline-block; } } @media (max-width: 708px) and (hover: none) { #actions .ui-action .ui-tooltip.bottom-left { display: inline-block; } } @media (hover: none) { #actions .ui-action .ui-tooltip.left { display: inline-block; } } @media (hover: none) { #actions .ui-action .ui-tooltip.right { display: none; } } #actions .ui-action .ui-icon { width: 50%; } #actions .ui-action .ui-icon.link-external { width: 45%; } #views { position: fixed; top: 0; left: 0; width: 100%; height: 100px; background: #7B1FA2; display: none; } @media (min-width: 709px) { #views { position: sticky; width: var(--views-width); height: 100dvh; } } @media (min-width: 709px) and (max-width: 1049px) { #views { width: var(--views-width-narrow); } } body.viewing #views { display: inline-block; } body.loading #views { display: none; } #main { position: relative; width: 100%; margin: 0 auto; text-align: left; white-space: normal; letter-spacing: .025em; box-sizing: border-box; } @media (min-width: 709px) { #main { width: var(--main-width); padding: 10px 20px 50px 20px; } } @media (min-width: 709px) { body.focused #main { width: var(--main-width-focused); } } @media (min-width: 709px) { body.viewing #main { width: var(--main-width-viewing); } } @media (min-width: 709px) and (max-width: 1049px) { #main { padding: 5px 20px 50px 20px; } } body.loading #main { display: none; } #main::selection { background: #90caf9; color: rgba(0,0,0,.9); } #image { width: 100%; aspect-ratio: 2/1; object-fit: cover; object-position: center; } @media (min-width: 709px) { #image { border-radius: 7px; } } #title { padding: 15px 15px 10px 15px; line-height: 1.3; font-family: 'Merriweather', serif; font-optical-sizing: auto; font-size: 28px; font-weight: 600; font-style: italic; color: #212121; -webkit-user-select: text; user-select: text; } @media (min-width: 709px) { #title { padding: 10px 0; } } body.dark #title { color: #EDEDED; } #overlay #title { padding: 15px 30px; font-size: 24px; border-bottom: 1px solid rgba(0,0,0,.2); opacity: .8; } #description { padding: 0 15px 10px 15px; line-height: 1.6; font-family: 'Merriweather Sans', sans-serif; font-optical-sizing: auto; font-variation-settings: 'wdth' 100; font-size: 16px; font-weight: 300; color: #616161; -webkit-user-select: text; user-select: text; } @media (min-width: 709px) { #description { padding: 0 0 10px 0; } } body.dark #description { color: #9E9E9E; } #meta { padding: 0 15px; margin-bottom: 17px; -webkit-user-select: text; user-select: text; } @media (min-width: 709px) { #meta { padding: 0; } } #meta .field { margin-right: 10px; font-size: 13px; text-decoration: none; letter-spacing: 0; color: #616161; } body.dark #meta .field { color: #9E9E9E; } #meta .field.hovering { color: #121212; } body.dark #meta .field.hovering { color: #ededed; } #meta .field.website { font-style: italic; } #meta .field.source { font-style: italic; } #meta .field [ui-image] { width: 18px; height: 18px; top: -1px; vertical-align: middle; margin-right: 5px; } #meta .dot { font-weight: 500; margin-right: 5px; } #meta .dot:last-child { display: none none; } #meta strong.field { font-weight: 500; letter-spacing: -.5px; } #summary { padding-bottom: 20px; display: none; } #summary.visible { display: block; } #summary .label { position: relative; line-height: 1.5; padding-bottom: 5px; } #summary .label > .ui-text { font-size: 14px; letter-spacing: 0; color: #944E9F; font-weight: 600; } body.dark #summary .label > .ui-text { color: #E085D6; } #summary .label > .ui-icon { width: 12px; height: 12px; fill: #944E9F; margin-right: 2px; } body.dark #summary .label > .ui-icon { fill: #E085D6; } #summary .label .ui-actions { position: absolute; bottom: 0; right: 0; height: 30px; } #summary.generating .label .ui-actions { display: none; } #summary .body { border-top: 1px dotted rgba(0,0,0,.3); padding-top: 5px; font-size: 14px; line-height: 1.5; letter-spacing: 0; color: #944E9F; -webkit-user-select: text; user-select: text; } body.dark #summary .body { border-top: 1px dotted rgba(255,255,255,.3); color: #E085D6; } #tools { border-top: 1px dotted rgba(0,0,0,.3); text-align: right; margin-bottom: 15px; } body.dark #tools { border-top: 1px dotted rgba(255,255,255,.3); } #tools .tool { margin-top: -7px; margin-left: 5px; background: #fff8e1; } body.dark #tools .tool { background: #1E1E1E; } #tools .tool.hovering { background: #ffffff; } body.dark #tools .tool.hovering { background: #000000; } #tools .tool.hidden { display: none; } #article { padding: 5px 10px 100% 10px; color: #424242; -webkit-user-select: text; user-select: text; } @media (min-width: 709px) { #article { padding: 5px 0 100% 0; } } body.dark #article { color: #D1D1D1; } #article * { font-family: 'Merriweather', serif; font-optical-sizing: auto; line-height: 2; font-size: 16px; font-weight: 350; } #article .section.summarized { position: relative; padding-left: 17px; } #article .section.summarized:before { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: #944E9F; border-radius: 1px; opacity: .5; } body.dark #article .section.summarized:before { background: #E085D6; } #article .section > .actions { margin-bottom: 15px; } #article .section.summarized > .actions { display: none; } #article .section .actions .ui-button .ui-text { font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; } #article .section .heading { padding: 0 5px; font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.25; margin-top: 20px; margin-bottom: 10px; margin-left: -5px; padding-right: 50px; border-radius: 7px; } #article .section.summarized .heading { padding-right: 0; } #article .section .heading.highlighted.contexting { box-shadow: 0 0 0 2px #ffd54f !important; } #article h1 { font-size: 30px; font-weight: 700; } #article h2 { font-size: 26px; font-weight: 600; } #article h3 { font-size: 22px; font-weight: 600; } #article .section .summary { position: relative; left: -20px; width: calc(100% + 20px); margin: 0 0 35px 0; padding: 10px 30px 10px 20px; box-sizing: border-box; text-align: left; } #article .section > .summary { display: none; } #article .section.summarized > .summary { display: block; } #article .section .summary::before { content: ""; position: absolute; width: 30px; height: 20px; top: calc(100% - 1px); right: 5px; border: 1px solid #944E9F; border-radius: 0 0 7px 7px; } body.dark #article .section .summary::before { border: 1px solid #E085D6; } #article .section .summary::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background: #fff8e1; border: 1px solid #944E9F; box-sizing: border-box; border-radius: 7px; box-shadow: 0 1px 2px rgba(0,0,0,.5); } #article .section .summary.contexting::after { background: #ffffff; } body.dark #article .section .summary::after { background: #1E1E1E; border: 1px solid #E085D6; } body.dark #article .section .summary.contexting::after { background: #2d2d2d; } #article .section .summary .ui-text { position: relative; z-index: 2; font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: #944E9F; -webkit-user-select: text; user-select: text; } body.dark #article .section .summary .ui-text { color: #E085D6; } #article .section .summary .ui-action { position: absolute; z-index: 2; } #article .section .summary .ui-action.generate { right: -5px; top: 0; } #article .section .summary .ui-action.expand { right: 0; top: calc(100% - 10px); } #article .section.generating .summary .ui-action.generate { display: none; } #article .section .summary .ui-action .ui-icon { width: 14px; height: 14px; fill: #944E9F; } body.dark #article .section .summary .ui-action .ui-icon { fill: #E085D6; } #article .section .summary .ui-action.expand .ui-icon { transform: translate(-50%, -50%) rotate(-90deg); } #article .section.collapsed > .summary > .ui-action.expand .ui-icon { transform: translate(-50%, -50%) rotate(90deg); } #article .section > .content { } #article .section.collapsed > .content { display: none; } #article .block { box-sizing: border-box; } #article .block.highlighted { background: #ffe082; } #article .block.contexting { background: #ffffff; } body.dark #article .block.contexting { background: #2d2d2d; } #article p { width: calc(100% - 7px); margin-top: 5px; margin-bottom: 14px; border-radius: 7px; overflow: hidden; } #article p.contexting { width: calc(100% + 3px); margin-left: -5px; padding: 0 5px; } #article p.highlighted { width: calc(100% + 3px); margin-left: -5px; padding: 0 5px; } #article p.highlighted.contexting { box-shadow: 0 0 0 2px #ffd54f; } #article p .highlight { background: #ffd54f; padding: .2em 0; } #article p .color * { } #article p .color.red * { color: #D50000 !important; } #article code.inline { font-family: menlo, 'Lucida Grande', 'Courier New'; letter-spacing: -.5px;; background: #2d2d2d; color: #ededed; font-size: 14px; border-radius: 7px; padding: 3px; } #article p .color code { } #article p .color.red code { color: #EF5350 !important; } #article strong { font-weight: bold; } #article strong * { font-weight: bold; } #article blockquote { border-left: 3px solid #424242; padding-left: 15px; margin-bottom: 15px; } body.dark #article blockquote { border-left: 3px solid #D1D1D1; } #article aside { position: relative; padding: 10px 10px 10px 35px; margin-bottom: 15px; background: rgba(0,0,0,.1); border-radius: 7px; } #article aside::before { content: attr(data-emoji); position: absolute; top: 10px; left: 10px; } #article ul { margin-top: 21px; margin-bottom: 21px; width: calc(100% - 7px); } #article ul > li { position: relative; padding-left: 25px; margin-bottom: 14px; border-radius: 7px; } #article ul > li.second { margin-left: 25px; } #article ul > li.contexting { background: #ffffff; box-shadow: 0 0 0 7px #ffffff; } body.dark #article ul > li.contexting { background: #2d2d2d; box-shadow: 0 0 0 7px #2d2d2d; } #article ul > li.highlighted { box-shadow: 0 0 0 7px #ffd54f; } #article ul > li.highlighted.contexting { box-shadow: 0 0 0 5px #ffffff, 0 0 0 7px #ffd54f !important; } #article ul > li::before { content: "·"; position: absolute; top: -13px; left: 5px; font-size: 30px; font-weight: 900; } #article ol { width: calc(100% - 7px); margin-top: 21px; margin-bottom: 21px; counter-reset: item; list-style: none; } #article ol > li { counter-increment: item; position: relative; padding-left: 25px; margin-bottom: 14px; border-radius: 7px; } #article ol > li.contexting { background: #ffffff; box-shadow: 0 0 0 7px #ffffff; } body.dark #article ol > li.contexting { background: #2d2d2d; box-shadow: 0 0 0 7px #2d2d2d; } #article ol > li::before { content: counter(item) ". "; position: absolute; top: 0; left: 5px; } #article figure { margin-bottom: 10px; border-radius: 7px; } #article figure.contexting { background: #ffffff; box-shadow: 0 0 0 7px #ffffff; } body.dark #article figure.contexting { background: #2d2d2d; box-shadow: 0 0 0 7px #2d2d2d; } #article figure img { max-width: 100%; border-radius: 7px; } #article figure.contexting img { box-shadow: 0 0 3px #121212; } #article figure video { max-width: 100%; border-radius: 7px; } #article figure audio { width: 100%; } #article figure figcaption { text-align: center; line-height: 1.25; font-size: 14px; margin-bottom: 15px; } #article figure figcaption * { line-height: 1.25; font-size: 14px; color: rgba(0,0,0,.6); } body.dark #article figure figcaption * { color: rgba(255,255,255,.6); } #article code.block { font-family: menlo, 'Lucida Grande', 'Courier New'; letter-spacing: -.5px;; font-size: 14px; background: #2d2d2d; color: #ededed; padding: 15px; margin-bottom: 5px; border-radius: 7px; overflow-x: scroll; overflow-y: hidden; } #article table { display: inline-block; border: 1px solid rgba(0,0,0,.2); border-collapse: collapse; border-spacing: 0; margin-bottom: 10px; overflow-x: scroll; overflow-y: hidden; border-radius: 7px; } body.dark #article table { border: 1px solid rgba(255,255,255,.2); } #article table.contexting { background: #ffffff; box-shadow: 0 0 0 7px #ffffff; } body.dark #article table.contexting { background: #2d2d2d; box-shadow: 0 0 0 7px #2d2d2d; } #article table tr .table-cell { border-right: 1px solid rgba(0,0,0,.2); border-bottom: 1px solid rgba(0,0,0,.2); padding: 5px; vertical-align: top; line-height: 1.5; font-size: 14px; } body.dark #article table tr .table-cell { border-right: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); } #article table tr .table-cell.header { background: rgba(0,0,0,.1); } body.dark #article table tr .table-cell.header { background: rgba(255,255,255,.1); } #article table tr .table-cell:last-child { border-right: none !important; } #article table tr:last-child .table-cell { border-bottom: none !important; } #article table tr .table-cell * { line-height: 1.5; font-size: 12px; } #article hr { border-bottom: 1px solid rgba(0,0,0,.2); margin-bottom: 15px; } body.dark #article hr { border-bottom: 1px solid rgba(255,255,255,.2); } #article iframe { width: 100%; aspect-ratio: 16/9; border-radius: 7px; margin-bottom: 15px; } #article .twitter-tweet { margin: auto; } #article .twitter-tweet iframe { width: auto; aspect-ratio: auto; } #article details summary { margin-bottom: 5px; } #article details p { padding-left: 25px; } #article details figure { margin-bottom: 0; } #article details img { max-width: calc(100% - 25px); margin-left: 25px; } #data { position: fixed; bottom: 0; right: 0; padding: 0 0; width: 100%; box-sizing: border-box; text-align: left; overflow-x: hidden; overflow-y: scroll; } @media (min-width: 709px) { #data { position: sticky; bottom: auto; right: auto; top: 0; padding: 10px 20px 20px 0; width: var(--data-width); } } @media (min-width: 709px) and (max-width: 1049px) { #data { padding: 50px 20px 20px 0; } } @media (min-width: 709px) { body.viewing #data { width: var(--data-width-viewing); } } body.focused #data { display: none; } @media (min-width: 709px) and (max-width: 1049px) { body.viewing #data { display: none; } } body.loading #data { display: none; } #data .status { border-top: 1px solid rgba(0,0,0,.2); height: 30px; line-height: 30px; padding: 0 5px; font-size: 16px; font-weight: 400; letter-spacing: -.5px; } body.dark #data .status { border-top: 1px solid rgba(255,255,255,.2); } #data .status .database { font-weight: 700; } #data .ui-properties { position: relative; padding: 5px 0 10px 0; } body.dragging #data .ui-properties { pointer-events: none; } #data .ui-property { position: relative; border-radius: 7px; } #data .ui-property.open { z-index: 1; background: #ffffff; } #data .ui-property.hovering { background: #ffffff; } body.dark #data .ui-property.hovering { background: #121212; } body.dark #data .ui-property.open { background: #121212; } #data .ui-property::before { border-radius: 7px; border: 0; } #data .ui-property.saving::before { border: 1px dashed rgba(0,0,0,.7); } #data .ui-property .ui-key { font-family: menlo, 'Lucida Grande', 'Courier New'; letter-spacing: -.5px;; } #data .ui-property .ui-value:empty::before { content: "---"; color: rgba(0,0,0,.3); } body.dark #data .ui-property .ui-value:empty::before { color: rgba(255,255,255,.3); } #data .ui-property .ui-options .ui-option { } #data .ui-property .ui-options .ui-option.hovering { background: #ffffff; } body.dark #data .ui-property .ui-options .ui-option.hovering { background: #121212; } #data .ui-property .ui-options .ui-option:last-child { border-top: .5px solid rgba(0,0,0,.2); } body.dark #data .ui-property .ui-options .ui-option:last-child { border-top: .5px solid rgba(255,255,255,.2); } #data .relation { position: relative; border-top: 1px dotted rgba(0,0,0,.3); font-weight: 500; letter-spacing: -.5px; padding-bottom: 20px; cursor: pointer; } body.dark #data .relation { border-top: 1px dotted rgba(255,255,255,.3); } #data .relation.searching { background-color: #ffffff; } body.dark #data .relation.searching { background-color: #2d2d2d; } #data .relation * { } body.dragging #data .relation * { pointer-events: none; } #data .relation .heading { position: relative; height: 30px; line-height: 30px; padding: 0 5px; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: uppercase; color: rgba(0,0,0,.5); } #data .relation.related .heading { font-weight: 600; color: var(--color); } #data .relation.droppable .heading { font-weight: 400; color: rgba(255,255,255,.7); } body.dark #data .relation .heading { color: rgba(255,255,255,.5); } body.dark #data .relation.related .heading { color: var(--color-dark); } body.dark #data .relation.droppable .heading { color: rgba(0,0,0,.7); } #data .relation .ui-actions { position: absolute; top: -1px; right: 0; } #data .relation .ui-actions .ui-action { width: 20px; height: 30px; opacity: 0; } #data .relation .ui-actions .ui-action.analyze { display: inline-block; } #data .relation.searching .ui-actions .ui-action.analyze { display: none; } #data .relation .ui-actions .ui-action.search { display: inline-block; } #data .relation.searching .ui-actions .ui-action.search { display: none; } #data .relation .ui-actions .ui-action.return { display: none; } #data .relation.searching .ui-actions .ui-action.return { display: inline-block; } #data .relation.hovering .ui-actions .ui-action { opacity: 1; } #data .relation.searching .ui-actions .ui-action { opacity: 1; } #data .relation .ui-actions .ui-action .ui-icon { width: 12px; height: 12px; } #data .relation.searching .ui-actions .ui-action .ui-icon { fill: rgba(0,0,0,.8); } body.dark #data .relation.searching .ui-actions .ui-action .ui-icon { fill: rgba(255,255,255,.9); } #data .relation .ui-search { display: none; margin-bottom: 10px; } #data .relation.searching .ui-search { display: block; } #data .relation .ui-search .ui-box { margin: 0 10px 5px 10px; } #data .relation .ui-search .ui-box .ui-input { height: 30px; line-height: 20px; padding: 5px 10px; font-size: 14px; } #data .relation .ui-search .ui-statuses { display: none; } #data .relation .ui-search .ui-actions { display: none; } #data .relation .ui-search .ui-results .ui-result { position: relative; display: block; height: auto; min-height: 30px; padding-left: 30px; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; line-height: 20px; white-space: normal; box-sizing: border-box; } #data .relation .ui-search .ui-results .ui-result.hovering { background: #ffffff; } body.dark #data .relation .ui-search .ui-results .ui-result.hovering { background: #121212; } #data .relation .ui-search .ui-results .ui-result .symbol { position: absolute; width: 30px; height: 30px; line-height: 30px; top: 0; left: 0; font-size: 16px; } #data .relation .ui-search .ui-results .ui-result[data-id="create"] .symbol { color: var(--color); } body.dark #data .relation .ui-search .ui-results .ui-result[data-id="create"] .symbol { color: var(--color-dark); } #data .relation .ui-search .ui-results .ui-result .text { font-size: 14px; } #data .relation .ui-search .ui-results .ui-result[data-id="create"] .text { color: var(--color); } body.dark #data .relation .ui-search .ui-results .ui-result[data-id="create"] .text { color: var(--color-dark); } #data .relation .ui-labels { white-space: normal; } #data .relation.searching .ui-labels { display: none; } #data .relation .ui-labels .ui-toggle { vertical-align: top; } #data .relation .ui-labels .ui-label { vertical-align: top; height: auto; min-height: 30px; line-height: 20px; padding: 5px 10px; margin: 0 5px 5px 0; text-align: left; border-radius: 10px; } #data .relation .ui-labels .ui-label.toggleable { width: calc(100% - 35px); } #data .relation .ui-labels .ui-label.iconed { padding-left: 25px; } #data .relation .ui-labels .ui-label.selected { background: var(--color); } body.dark #data .relation .ui-labels .ui-label.selected { background: var(--color-dark); } #data .relation .ui-labels .ui-label::before { border: 1px solid rgba(0,0,0,.3); border-radius: 10px; } #data .relation .ui-labels .ui-label.hovering::before { border: 1px solid rgba(0,0,0,.5); } #data .relation .ui-labels .ui-label.selected::before { border: 1px solid var(--color); } #data .relation .ui-labels .ui-label.saving::before { border: 1px dashed rgba(0,0,0,.7); } #data .relation .ui-labels .ui-label.selected.saving::before { border: 1px dashed #ffffff; } body.dark #data .relation .ui-labels .ui-label::before { border: 1px solid rgba(255,255,255,.2); } body.dark #data .relation .ui-labels .ui-label.hovering::before { border: 1px solid rgba(255,255,255,.4); } body.dark #data .relation .ui-labels .ui-label.saving::before { border: 1px dashed rgba(255,255,255,.6); } body.dark #data .relation .ui-labels .ui-label.selected.saving::before { border: 1px dashed #121212; } #data .relation .ui-labels .ui-label .ui-emoji { font-size: 14px; } #data .relation .ui-labels .ui-label .ui-text { font-size: 14px; font-weight: 600; color: rgba(0,0,0,.5); } body.dark #data .relation .ui-labels .ui-label .ui-text { color: rgba(255,255,255,.5); } #data .relation .ui-labels .ui-label.hovering .ui-text { color: rgba(0,0,0,.7); opacity: 1 !important; } body.dark #data .relation .ui-labels .ui-label.hovering .ui-text { color: rgba(255,255,255,.7); } #data .relation .ui-labels .ui-label.suggested .ui-text { color: var(--color); opacity: .7; } body.dark #data .relation .ui-labels .ui-label.suggested .ui-text { color: var(--color-dark); } #data .relation .ui-labels .ui-label.selected .ui-text { color: #ffffff; } body.dark #data .relation .ui-labels .ui-label.selected .ui-text { color: #121212; } #data .relation .suggestions { white-space: normal; } #data .relation.searching .suggestions { display: none; } #data .relation .suggestions .suggestion { position: relative; vertical-align: top; min-height: 20px; line-height: 20px; padding: 5px 0 5px 18px; margin: 0 5px; box-sizing: border-box; } #data .relation .suggestions .suggestion.toggleable { width: calc(100% - 40px); margin: 0; } #data .relation .suggestions .suggestion .ui-icon { position: absolute; top: 9px; left: 0; width: 14px; height: 14px; fill: var(--color); pointer-events: none; } body.dark #data .relation .suggestions .suggestion .ui-icon { fill: var(--color-dark); } #data .relation .suggestions .suggestion .text { color: var(--color); font-size: 14px; font-weight: 300; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; pointer-events: none; } body.dark #data .relation .suggestions .suggestion .text { color: var(--color-dark); } #data .relation .suggestions .suggestion.hovering .text { text-decoration-style: solid; } #data .relation .ui-properties { margin: 0 5px 0 30px; display: none; } #data .relation .ui-properties.visible { display: block; } #data .relation .ui-properties .ui-property .ui-tag { height: auto; min-height: 14px; line-height: 14px; padding: 4px 5px; margin: 4px 0 4px 5px; } #data .relation .ui-properties .ui-property.wide .ui-tag { margin: 4px 5px 4px 0; } #data .relation .ui-properties .ui-property[data-key="Types"] .ui-tag { background-color: #7f7f7f; } #data .relation .ui-properties .ui-property[data-key="Tags"] .ui-tag { background-color: #7f7f7f; } #data .relation .ui-properties .ui-property .ui-value { padding: 0 5px 0 15px; } #data .relation .ui-properties .ui-property.wide .ui-value.string { line-height: 20px; } #data .relation .dropzone { position: absolute; left: 0; top: 0; width: 100%; height: 100%; place-items: center; background: #121212; display: none; } body.dark #data .relation .dropzone { background: #ededed; } #data .relation.droppable .dropzone { display: grid; } #data .relation .dropzone .ui-icon { width: 14px; height: 14px; margin-right: 5px; fill: #ededed; } body.dark #data .relation .dropzone .ui-icon { fill: #121212; } #data .relation .dropzone .ui-text { height: 18px; line-height: 18px; font-size: 18px; color: #ededed; } body.dark #data .relation .dropzone .ui-text { color: #121212; } #screen { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; background: rgba(0,0,0,.7); pointer-events: none; opacity: 0; transition: .25s; } body.overlaying #screen { pointer-events: auto; opacity: 1; } #overlay { position: fixed; z-index: 2; padding-bottom: 65px; bottom: -1px; max-height: 75%; white-space: normal; text-align: left; background: #ffffff; box-shadow: 0 0 2px rgba(0,0,0,.5); border-radius: 7px 7px 0 0; opacity: 0; transform: translate(0,100px); transition: .25s; pointer-events: none; overflow-x: hidden; overflow-y: scroll; } body.dark #overlay { background: #484848; } #overlay.visible { opacity: 1; transform: translate(0); } body.overlaying #overlay { pointer-events: auto; } #overlay .ui-list .ui-list-row .bullet { } #overlay .ui-list .ui-list-row.active .bullet { opacity: .8; } #overlay .ui-list .ui-list-row.active.hovering .bullet { opacity: 1; } #overlay .ui-list .ui-list-row.active[data-heading="1"] .bullet { background: #1e88e5; } #overlay .ui-list .ui-list-row.active[data-heading="2"] .bullet { background: #2196f3; } #overlay .ui-list .ui-list-row.active[data-heading="3"] .bullet { background: #42a5f5; } #controls { position: fixed; z-index: 3; height: 66px; bottom: -1px; background: #ffffff; box-shadow: 0 0 2px rgba(0,0,0,.5); border-radius: 7px 7px 0 0; } body.dark #controls { background: #121212; } body.loading #controls { display: none; } #controls .timeline { position: absolute; top: 5px; left: 5px; width: calc(100% - 10px); height: 10px; background: rgba(0,0,0,.1); box-shadow: 0 0 0 1px rgba(255,255,255,.5); border-radius: 7px; overflow: hidden; } body.dark #controls .timeline { box-shadow: 0 0 0 1px rgba(0,0,0,.5); } #controls .timeline .segment { position: absolute; top: 0; left: 0; height: 100%; } #controls .timeline .segment .line { position: absolute; top: 0; left: -1px; width: 100%; height: 100%; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; pointer-events: none; } #controls .timeline .segment[heading="1"] > .line { background: #42a5f5; } #controls .timeline .segment[heading="2"] > .line { background: #64b5f6; } #controls .timeline .segment[heading="3"] > .line { background: #90caf9; } #controls .track { position: absolute; top: 5px; left: 5px; width: calc(100% - 10px); height: 10px; pointer-events: none; } #controls .track .preview { position: absolute; top: 0; left: 0; width: 10px; height: 10px; background: rgba(0,0,0,.3); border-radius: 100%; opacity: 0; } body.dark #controls .track .preview { background: #121212; } #controls.tracking .track .preview { opacity: 1; } #controls .track .progress { position: absolute; top: 0; left: 0; width: 10px; height: 10px; background: rgba(0,0,0,.3); border: 2px solid #ffffff; margin-left: -2px; margin-top: -2px; box-shadow: 0 0 3px rgba(0,0,0,.5); border-radius: 100%; transition: .25s; } body.dark #controls .track .progress { background: #121212; border: 2px solid #484848; } #controls .control { position: absolute; width: 50px; height: 50px; } #controls .control.toc { top: 15px; left: 0px; } #controls .label { position: absolute; min-width: 30px; height: 30px; line-height: 30px; box-sizing: border-box; left: 0; bottom: calc(100% + 5px); background: rgba(0,0,0,.9); padding: 0 10px; font-size: 14px; color: #ffffff; border-radius: 15px; pointer-events: none; opacity: 0; transition: .125s; } #controls .label.visible { opacity: 1; } #context { position: absolute; z-index: 2; top: 0; left: 0; min-height: 40px; line-height: 40px; min-width: 40px; background: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,.5); border-radius: 7px; text-align: left; display: none; } #context.small { min-height: 30px; line-height: 30px; min-width: 30px; } body.dark #context { background: #2d2d2d; } #context.visible { display: inline-block; } body.dragging #context { pointer-events: none; } #context a { color: #0056B3; text-decoration-thickness: 1px; text-underline-offset: 2px; } body.dark #context a { color: #58A6FF; } #context a.hovering { text-decoration-thickness: 1.5px; } #context .custom .line { display: grid; grid-template-columns: auto 1fr; height: 40px; border-bottom: 1px dotted rgba(0,0,0,.3); } #context.small .custom .line { height: 30px; } body.dark #context .custom .line { border-bottom: 1px dotted rgba(255,255,255,.3); } #context .custom .line:last-child { border-bottom: none !important; } #context.linkable .custom .line { border-bottom: 1px dotted rgba(0,0,0,.3) !important; } body.dark #context.linkable .custom .line { border-bottom: 1px dotted rgba(255,255,255,.3) !important; } #context .custom .line .heading { grid-column: 1; padding: 0 10px; font-size: 16px; font-weight: 400; text-transform: uppercase; color: rgba(0,0,0,.5); } #context.small .custom .line .heading { font-size: 14px; } body.dark #context .custom .line .heading { color: rgba(255,255,255,.5); } #context .custom .line .list { grid-column: 2; } #context .custom .line .list .ui-label { height: 30px; line-height: 30px; margin: 4px 5px 4px 0; padding: 0 7px; border-radius: 7px; } #context .custom .line .list .ui-label.selected { background: var(--color); } body.dark #context .custom .line .list .ui-label.selected { background: var(--color-dark); } #context .custom .line .list .ui-label::before { border: 1px solid rgba(0,0,0,.2); } body.dark #context .custom .line .list .ui-label::before { border: 1px solid rgba(255,255,255,.2); } #context .custom .line .list .ui-label.hovering::before { border: 1px solid rgba(0,0,0,.4); } body.dark #context .custom .line .list .ui-label.hovering::before { border: 1px solid rgba(255,255,255,.4); } #context .custom .line .list .ui-label.selected::before { border: 1px solid var(--color); } body.dark #context .custom .line .list .ui-label.selected::before { border: 1px solid var(--color-dark); } #context .custom .line .list .ui-label .ui-text { position: relative; top: -.5px; font-size: 16px; font-weight: 500; color: var(--color); opacity: .8; pointer-events: none; } #context.small .custom .line .list .ui-label .ui-text { font-size: 14px; } body.dark #context .custom .line .list .ui-label .ui-text { color: var(--color-dark); } #context .custom .line .list .ui-label.selected .ui-text { color: #ffffff; opacity: 1; } body.dark #context .custom .line .list .ui-label.selected .ui-text { color: #121212; } #context .custom .line .list .ui-label.hovering .ui-text { opacity: 1; } #context .custom .line .list .suggestion { position: relative; min-height: 30px; line-height: 30px; padding: 5px 0 5px 18px; margin: 0 10px 0 0; } #context .custom .line .list .suggestion .ui-icon { position: absolute; top: 9px; left: 0; width: 14px; height: 14px; fill: var(--color); pointer-events: none; } body.dark #context .custom .line .list .suggestion .ui-icon { fill: var(--color-dark); } #context .custom .line .list .suggestion .text { color: var(--color); font-size: 14px; font-weight: 300; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; pointer-events: none; } body.dark #context .custom .line .list .suggestion .text { color: var(--color-dark); } #context .custom .line .list .suggestion.hovering .text { text-decoration-style: solid; } #context .ui-actions { vertical-align: top; height: 40px; padding: 0 5px; display: none; } #context.small .ui-actions { height: 30px; } #context.dragging .ui-actions { padding: 0; } #context[scope="block"] .ui-actions { display: inline-block; } #context[scope="selection"] .ui-actions { display: inline-block; } #context.linkable .ui-actions { display: inline-block; } #context.draggable .ui-actions { display: inline-block; } #context .ui-actions .ui-action { width: 40px; height: 40px; display: none; } #context.small .ui-actions .ui-action { width: 30px; height: 30px; } #context .ui-actions .ui-action.drag { cursor: grab; } #context .ui-actions .ui-action.dragging { cursor: grabbing; } #context[scope="block"] .ui-actions .ui-action.highlight.visible { display: inline-block; } #context[scope="selection"] .ui-actions .ui-action.highlight { display: inline-block; } #context.dragging .ui-actions .ui-action.highlight { display: none; } #context[scope="block"] .ui-actions .ui-action.comment { display: inline-block; } #context.linkable .ui-actions .ui-action.graph { display: inline-block; } #context.linkable .ui-actions .ui-action.navigate { display: inline-block; } #context[scope="block"] .ui-actions .ui-action.copy-link { display: inline-block; } #context[scope="block"] .ui-actions .ui-action.link-external.visible { display: inline-block; } #context.linkable .ui-actions .ui-action.link-external { display: inline-block; } #context[scope="block"] .ui-actions .ui-action.notion { display: inline-block; } #context.draggable .ui-actions .ui-action.drag { display: inline-block; } #context .ui-actions .ui-action .ui-icon { } #context .ui-actions .ui-action.highlight.active .ui-icon { fill: #ff9800; } #context .message { vertical-align: top; height: 40px; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 10px; font-size: 14px; pointer-events: none; display: none; } #context.small .message { height: 30px; } #context.linkable .message { padding: 0 10px 0 5px; pointer-events: auto; } #context.dragging .message { padding: 0 10px 0 0; } #context .message.visible { display: inline-block; } #status { padding: 25px 0; margin: 0 auto; width: 500px; max-width: 100%; line-height: 24px; text-align: left; white-space: normal; background: #fff8e1; display: none; } body.dark #status { background: #1E1E1E; } body.loading #status { display: block; } #status .object { color: #0056B3; font-size: 18px; font-weight: 500; } body.dark #status .object { color: #58A6FF; } #status .message { font-weight: 400; font-size: 16px; }