625 lines
13 KiB
CSS
625 lines
13 KiB
CSS
/* src/styles/theme/theme.css */
|
|
.lineage-main {
|
|
--lineage-accent: #55b1ae;
|
|
--lineage-color-selection: #418cff;
|
|
}
|
|
.theme-dark {
|
|
--background-container: #373d4c;
|
|
--background-active-node: var(--background-primary);
|
|
--background-active-parent: #5b637a;
|
|
--color-active-parent: var(--text-normal);
|
|
--lineage-accent-faint: #628c8c;
|
|
--lineage-color-selection-faint: #567aab;
|
|
}
|
|
.theme-light {
|
|
--background-container: #899cb3;
|
|
--background-active-node: var(--background-primary);
|
|
--background-active-parent: #cedbeb;
|
|
--color-active-parent: var(--text-normal);
|
|
--lineage-accent-faint: #adccca;
|
|
--lineage-color-selection-faint: #8eaedf;
|
|
}
|
|
.theme-light {
|
|
--custom-hotkey-bg: #a0c6dd;
|
|
}
|
|
.theme-dark {
|
|
--custom-hotkey-bg: #5f7f93;
|
|
}
|
|
|
|
/* src/styles/theme/group.css */
|
|
.group-has-active-child {
|
|
background-color: var(--background-active-node);
|
|
}
|
|
.group-has-active-node {
|
|
background-color: var(--background-active-parent);
|
|
}
|
|
|
|
/* src/styles/theme/node.css */
|
|
.active-node,
|
|
.active-child {
|
|
background-color: var(--background-active-node);
|
|
}
|
|
.active-parent,
|
|
.active-sibling,
|
|
.inactive-node {
|
|
background-color: var(--background-active-parent);
|
|
}
|
|
.active-parent,
|
|
.active-sibling,
|
|
.inactive-node {
|
|
--text-normal: var(--color-active-parent);
|
|
}
|
|
.active-parent {
|
|
opacity: 0.8;
|
|
}
|
|
.active-sibling {
|
|
opacity: 0.8;
|
|
}
|
|
.inactive-node {
|
|
opacity: var(--inactive-card-opacity);
|
|
}
|
|
.inactive-node:hover {
|
|
opacity: 0.8 !important;
|
|
}
|
|
.theme-dark .lineage-main {
|
|
.lineage-card:hover {
|
|
box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
|
|
}
|
|
.active-child:hover {
|
|
box-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
|
|
}
|
|
}
|
|
.theme-light .lineage-main {
|
|
.lineage-card:hover {
|
|
box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
|
|
}
|
|
}
|
|
.lineage-card {
|
|
border-left: 5px solid transparent;
|
|
}
|
|
.theme-dark {
|
|
.node-border--editing {
|
|
border-left: 5px var(--color-base-70) solid;
|
|
}
|
|
}
|
|
.theme-light {
|
|
.node-border--editing {
|
|
border-left: 5px var(--color-base-40) solid;
|
|
}
|
|
}
|
|
.theme-dark {
|
|
.lineage-view:not(:focus-within) {
|
|
.node-border--editing {
|
|
border-left: 5px var(--color-base-40) solid;
|
|
}
|
|
}
|
|
}
|
|
.theme-light {
|
|
.lineage-view:not(:focus-within) {
|
|
.node-border--editing {
|
|
border-left: 5px var(--color-base-30) solid;
|
|
}
|
|
}
|
|
}
|
|
.node-border--active {
|
|
border-left: 5px var(--lineage-accent) solid;
|
|
}
|
|
.node-border--discard {
|
|
border-left: 5px #ff3b3b solid;
|
|
}
|
|
.node-border--delete {
|
|
border-left: 5px #ff7b4d solid;
|
|
}
|
|
.node-border--selected {
|
|
border-left: 5px var(--lineage-color-selection) solid;
|
|
}
|
|
.node-border--search-match {
|
|
border-left: 5px #ffc857 solid;
|
|
}
|
|
.lineage-view:not(:focus-within) {
|
|
& .node-border--active {
|
|
border-left-color: var(--lineage-accent-faint);
|
|
}
|
|
& .node-border--discard {
|
|
border-left-color: #e8314660;
|
|
}
|
|
& .node-border--selected {
|
|
border-left-color: var(--lineage-color-selection-faint);
|
|
}
|
|
}
|
|
.lineage-card {
|
|
transition: box-shadow 200ms ease;
|
|
}
|
|
.active-parent,
|
|
.active-sibling {
|
|
--scrollbar-thumb-bg: var(--text-muted) !important;
|
|
--scrollbar-active-thumb-bg: var(--text-normal) !important;
|
|
}
|
|
|
|
/* src/styles/makdown/inline-editor.css */
|
|
.lineage-inline-editor {
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 100px;
|
|
& .view-header,
|
|
& .inline-title,
|
|
& .embedded-backlinks,
|
|
& .cm-gutters {
|
|
display: none !important;
|
|
}
|
|
& .cm-editor .cm-scroller {
|
|
padding: 6px !important;
|
|
padding-bottom: 10px !important;
|
|
padding-left: 12px !important;
|
|
}
|
|
& .cm-contentContainer div {
|
|
padding-bottom: 0 !important;
|
|
}
|
|
--file-line-width: 100%;
|
|
}
|
|
|
|
/* src/styles/makdown/makdown-preview.css */
|
|
.inactive-node,
|
|
.active-sibling,
|
|
.active-parent,
|
|
.active-child {
|
|
& mark {
|
|
filter: grayscale(1);
|
|
}
|
|
}
|
|
.active-sibling,
|
|
.active-parent,
|
|
.inactive-node {
|
|
& .cm-comment {
|
|
color: var(--text-muted) !important;
|
|
}
|
|
}
|
|
.lineage-card p {
|
|
margin: 0;
|
|
}
|
|
.lineage-card {
|
|
--p-spacing: 0px;
|
|
& .callout {
|
|
mix-blend-mode: initial;
|
|
}
|
|
& button.copy-code-button {
|
|
display: none;
|
|
}
|
|
& .cm-blockid {
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
vertical-align: text-top;
|
|
margin-top: -0.2em;
|
|
color: var(--text-muted);
|
|
opacity: 0.5;
|
|
}
|
|
& .is-unresolved {
|
|
color: var(--link-unresolved-color);
|
|
opacity: var(--link-unresolved-opacity);
|
|
filter: var(--link-unresolved-filter);
|
|
}
|
|
& ul,
|
|
ol {
|
|
margin-block-start: 0;
|
|
margin-block-end: 0;
|
|
}
|
|
}
|
|
|
|
/* src/styles/card/dnd.css */
|
|
.lineage__drop-node-above {
|
|
box-shadow: inset 2px 51px 19px -28px var(--lineage-accent) !important;
|
|
}
|
|
.lineage__drop-node-below {
|
|
box-shadow: inset 2px -51px 19px -28px var(--lineage-accent) !important;
|
|
}
|
|
.lineage__drop-node-under {
|
|
box-shadow: inset -51px 2px 19px -28px var(--lineage-accent) !important;
|
|
}
|
|
.inactive-node-hover {
|
|
opacity: 0.8 !important;
|
|
background-color: var(--background-active-parent);
|
|
}
|
|
|
|
/* src/styles/card/style-rules.css */
|
|
.card-left-border-style {
|
|
position: absolute;
|
|
width: 5px;
|
|
left: -5px;
|
|
height: 100%;
|
|
top: 0;
|
|
}
|
|
.card-background-style {
|
|
position: absolute;
|
|
left: -5px;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 0;
|
|
}
|
|
.active-node,
|
|
.node-border--delete,
|
|
.node-border--selected,
|
|
.node-border--search-match {
|
|
& .card-left-border-style,
|
|
.card-background-style {
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
/* src/styles/card/floating-card-button.css */
|
|
#columns-container {
|
|
--floating-button-width: 20px;
|
|
--floating-button-height: 20px;
|
|
--floating-button-bg: #dbdbdb;
|
|
--position-tb: -4px;
|
|
--position-lr: -4px;
|
|
}
|
|
.lineage-floating-button {
|
|
width: var(--floating-button-width);
|
|
height: var(--floating-button-height);
|
|
position: absolute;
|
|
box-shadow: none;
|
|
border: none;
|
|
transition: opacity 200ms;
|
|
padding: 4px !important;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
& svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
}
|
|
.is-disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
.theme-light {
|
|
.lineage-floating-button {
|
|
color: #000 !important;
|
|
background-color: #ffffffee !important;
|
|
}
|
|
}
|
|
.theme-dark {
|
|
.lineage-floating-button {
|
|
color: #fff !important;
|
|
background-color: #bebebe30;
|
|
}
|
|
.active-node .lineage-floating-button {
|
|
color: #fff !important;
|
|
background-color: rgba(60, 60, 60, 0.3);
|
|
}
|
|
}
|
|
.collapse-button {
|
|
background-color: var(--background-active-parent) !important;
|
|
}
|
|
.theme-light {
|
|
--opacity-inactive-node: 0.5;
|
|
--opacity-active-node: 0.5;
|
|
--opacity-active-button: 0.8;
|
|
}
|
|
.theme-dark {
|
|
--opacity-inactive-node: 0.6;
|
|
--opacity-active-node: 0.4;
|
|
--opacity-active-button: 0.8;
|
|
}
|
|
.lineage-floating-button {
|
|
opacity: 0;
|
|
}
|
|
.lineage-card:hover .lineage-floating-button {
|
|
opacity: var(--opacity-inactive-node);
|
|
}
|
|
.active-node:hover,
|
|
.active-child:hover {
|
|
& .lineage-floating-button {
|
|
opacity: var(--opacity-active-node);
|
|
}
|
|
}
|
|
.lineage-floating-button:not(.is-disabled):hover {
|
|
opacity: var(--opacity-active-button);
|
|
}
|
|
.tree-index:hover {
|
|
opacity: var(--opacity-active-button);
|
|
}
|
|
.collapse-button {
|
|
opacity: 0.3 !important;
|
|
}
|
|
.collapse-button:hover {
|
|
opacity: 0.8 !important;
|
|
}
|
|
.position-top {
|
|
top: var(--position-tb);
|
|
left: calc(50% - calc(var(--floating-button-width) / 2));
|
|
}
|
|
.position-bottom {
|
|
bottom: var(--position-tb);
|
|
left: calc(50% - calc(var(--floating-button-width) / 2));
|
|
}
|
|
.position-right {
|
|
top: calc(50% - calc(var(--floating-button-height) / 2));
|
|
right: var(--position-lr);
|
|
}
|
|
.position-bottom-right {
|
|
top: 3px;
|
|
right: 3px;
|
|
}
|
|
.position-top-right {
|
|
top: 3px;
|
|
right: 26px;
|
|
}
|
|
.position--section {
|
|
bottom: 3px;
|
|
right: 8px;
|
|
}
|
|
.collapse-button {
|
|
top: calc(50% - 10px);
|
|
left: -40px;
|
|
}
|
|
.delete-card-button:hover {
|
|
background-color: #ff7b4d !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
/* src/styles/view/buttons.css */
|
|
.lineage-view-button {
|
|
width: 34px !important;
|
|
height: 34px !important;
|
|
padding: 8px !important;
|
|
font-size: inherit;
|
|
color: var(--icon-color) !important;
|
|
background-color: var(--interactive-normal);
|
|
--icon-size: var(--icon-s);
|
|
--icon-stroke: var(--icon-s-stroke-width);
|
|
cursor: pointer;
|
|
border-radius: 0;
|
|
border: none;
|
|
box-shadow: none !important;
|
|
& svg {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
.lineage-view-button:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
.lineage-view-button:hover {
|
|
background-color: var(--interactive-hover);
|
|
}
|
|
.lineage-view-button:disabled {
|
|
cursor: not-allowed;
|
|
color: var(--color-base-40) !important;
|
|
}
|
|
.lineage-view-button[data-active=true] {
|
|
color: var(--icon-color-active) !important;
|
|
}
|
|
.lineage-view-button[data-active=true] svg {
|
|
opacity: 1;
|
|
}
|
|
.buttons-group {
|
|
border-radius: var(--radius-s);
|
|
overflow: hidden;
|
|
box-shadow: var(--input-shadow);
|
|
display: flex;
|
|
background-color: var(--interactive-normal);
|
|
}
|
|
.buttons-group--vertical {
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* src/styles/view/modal.css */
|
|
.lineage-modal {
|
|
max-width: var(--view-width);
|
|
max-height: var(--view-height);
|
|
overflow: auto;
|
|
width: fit-content;
|
|
background-color: var(--background-primary);
|
|
position: absolute;
|
|
right: 50px;
|
|
top: var(--size-4-2);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-2);
|
|
z-index: 10;
|
|
min-width: 165px;
|
|
padding: var(--size-4-2);
|
|
--scrollbar-bg: initial !important;
|
|
}
|
|
@media (max-width: 720px) {
|
|
.lineage-modal {
|
|
left: var(--size-4-2);
|
|
overflow-x: auto;
|
|
}
|
|
}
|
|
.lineage-modal--full-height {
|
|
bottom: var(--size-4-2);
|
|
}
|
|
|
|
/* src/styles/view/hotkeys.css */
|
|
.editor-state--both svg {
|
|
opacity: 0.3;
|
|
}
|
|
.editor-state--on svg {
|
|
opacity: 1;
|
|
}
|
|
.editor-state--off svg {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* src/styles/helpers.css */
|
|
.lineage__hidden-element {
|
|
display: none;
|
|
}
|
|
|
|
/* src/styles/markers/html-element-marker.css */
|
|
span[data-section] {
|
|
color: var(--text-normal);
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
line-height: var(--line-height-tight);
|
|
opacity: 0.7;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
line-height: var(--line-height-tight);
|
|
padding-top: calc(var(--font-text-size)/3);
|
|
cursor: pointer;
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.markdown-source-view span[data-section] {
|
|
transform: translateX(calc(-100% - 50px));
|
|
}
|
|
span[data-section]::before {
|
|
content: attr(data-section);
|
|
color: var(--text-muted);
|
|
background-color: var(--color-base-30);
|
|
padding: 3px 6px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* src/styles/overrides.css */
|
|
.lineage-view__content-el--minimap-on {
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
/* src/styles/layout/columns.css */
|
|
:root {
|
|
--node-gap: 2px;
|
|
}
|
|
.columns-container {
|
|
position: relative;
|
|
flex: 1;
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: start;
|
|
overflow-y: hidden;
|
|
overflow-x: auto;
|
|
}
|
|
.columns {
|
|
display: flex;
|
|
align-items: center;
|
|
transform: scale(var(--zoom-level));
|
|
height: calc(1 / var(--zoom-level) * 100vh);
|
|
width: calc(1 / var(--zoom-level) * 100vw);
|
|
}
|
|
.column {
|
|
min-width: fit-content;
|
|
height: calc(1 / var(--zoom-level) * 100vh);
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
}
|
|
.group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: fit-content;
|
|
gap: var(--node-gap);
|
|
padding: 6px;
|
|
}
|
|
.group-has-active-child {
|
|
margin-bottom: 3px;
|
|
}
|
|
.group-has-active-child:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* src/styles/view/settings.css */
|
|
.lineage-view {
|
|
& .clickable-icon.extra-setting-button.is-disabled {
|
|
opacity: 0.2;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
/* src/styles/layout/modes.css */
|
|
.limit-card-height {
|
|
& .lng-prev {
|
|
max-height: 65vh;
|
|
}
|
|
& .editor-container {
|
|
max-height: 65vh;
|
|
}
|
|
}
|
|
.outline-mode {
|
|
--node-gap: 30px;
|
|
& .group {
|
|
background-color: transparent;
|
|
margin-bottom: 0;
|
|
}
|
|
& .group-has-active-child {
|
|
margin-bottom: 0;
|
|
}
|
|
& .active-parent-bridge-right {
|
|
display: none;
|
|
}
|
|
& .active-parent-bridge-left {
|
|
display: none;
|
|
}
|
|
& .active-node-bridge {
|
|
display: none;
|
|
}
|
|
& .active-node {
|
|
outline: 6px solid var(--background-active-parent) !important;
|
|
}
|
|
& .group-has-active-node {
|
|
& .inactive-node {
|
|
background-color: var(--background-active-parent);
|
|
opacity: 0.8;
|
|
}
|
|
& .inactive-node:hover {
|
|
background-color: var(--background-active-parent);
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
& .column {
|
|
padding: 0 calc(1 / var(--zoom-level) * 50vw);
|
|
}
|
|
& .hidden-node {
|
|
display: none !important;
|
|
}
|
|
}
|
|
.gap-between-cards {
|
|
--node-gap: var(--node-gap-setting);
|
|
& .columns {
|
|
gap: var(--node-gap-setting);
|
|
}
|
|
.group-has-active-child {
|
|
margin-bottom: 0;
|
|
}
|
|
& .group {
|
|
margin-bottom: var(--node-gap-setting);
|
|
background-color: transparent;
|
|
}
|
|
& .active-parent-bridge-right {
|
|
display: none;
|
|
}
|
|
& .active-parent-bridge-left {
|
|
display: none;
|
|
}
|
|
& .active-node-bridge {
|
|
display: none;
|
|
}
|
|
& .active-node {
|
|
outline: 6px solid var(--background-active-parent) !important;
|
|
}
|
|
}
|
|
#columns-container.zoom-enabled {
|
|
* {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
#columns-container.zoom-enabled {
|
|
.lineage-floating-button {
|
|
opacity: 0.5 !important;
|
|
}
|
|
.lineage-card:not(:hover) .lineage-floating-button:not(.collapse-button) {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.hide-floating-buttons {
|
|
.lineage-card:not(.active-node) {
|
|
.lineage-floating-button:not(.collapse-button) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* src/styles/styles.css */
|