From 31bab654c1c318a4d3d0283e41db3ae7b544e5e3 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Thu, 19 Dec 2024 02:04:30 +0300 Subject: [PATCH] set default colors + fileformat=unix... Signed-off-by: Alex A. Naanou --- experiments/outline-editor/editor.css | 1699 +++++++++++++------------ v2/pwiki/store/base.js | 1 + 2 files changed, 852 insertions(+), 848 deletions(-) diff --git a/experiments/outline-editor/editor.css b/experiments/outline-editor/editor.css index 9643f37..7a827ec 100755 --- a/experiments/outline-editor/editor.css +++ b/experiments/outline-editor/editor.css @@ -1,848 +1,851 @@ -/********************************************************************** -* -* -* -**********************************************************************/ - -:root { - --font-size: 5mm; - - --outline-padding: 7rem; - - --item-indent: 2rem; - --item-padding-ratio: 0.2; - - --checkbox-size: 1.5rem; - --checkbox-margin: 0.5em; - - --button-size: 2em; - -} - - -/*********************************************************************/ - -:root { - font-family: sans-serif; - font-size: var(--font-size); - - /*text-size-adjust: none;*/ - text-size-adjust: 180%; -} - -:host, -.editor { - --item-padding: calc(1em * var(--item-padding-ratio)); -} - - - -/*********************************************************************/ - -:host, -.editor { - display: block; - position: relative; - - - /* loading indicator */ - &.loading { - .outline { - pointer-events: none; - } - .outline>.block { - opacity: 0.2; - } - /* XXX STUB... */ - .outline:before { - content: "Loading..."; - display: block; - position: absolute; - top: 1em; - } - .outline:empty:before { - position: relative; - top: 0; - } - /* override empty indicator */ - .outline:after { - content: "" !important; - } - } - - - /* editor code */ - &>.code { - display: none; - } - - /* header */ - .header { - margin: 1em var(--outline-padding); - padding-bottom: 1.2em; - - border-bottom: solid 1px rgba(0,0,0,0.15); - - &:empty { - display: none; - } - .path-item { - color: gray; - cursor: pointer; - /* XXX needs more work... */ - max-width: 10rem; - text-overflow: ellipsis; - - &:hover { - text-decoration: underline; - } - &:first-child { - padding-left: 3em; - margin-left: -2em; - } - } - } - - .outline { - display: block; - position: relative; - - padding: 1em var(--outline-padding); - padding-bottom: 1.2em; - - /* virtual empty block... */ - &:empty:after { - content: "Empty"; - display: block; - font-style: italic; - color: rgba(0,0,0,0.2); - } - &:empty:hover:after { - } - - - .block .block { - margin-left: var(--item-indent); - } - .block { - position: relative; - outline: none; - border: none; - - /* focus... */ - &:focus { - /*outline: solid 0.2em silver;*/ - outline: none; - } - &:focus>.text { - background: rgba(0,0,0,0.07); - } - &.focused:not(:focus)>.text { - background: rgba(0,0,0,0.01); - } - - /* collapsed block... */ - &[collapsed] { - border-bottom: solid 1px silver; - &>.children { - display: none; - } - } - - /* select... */ - /* XXX are we selecting subtrees or blocks??? */ - &[selected]>.text { - background: silver; - } - - &>.text { - --v-margin: 0; - - display: block; - width: 100%; - /* XXX this is a tiny bit off and using .code's height here is off too... */ - min-height: calc(1em + var(--item-padding) * 2); - padding-top: var(--item-padding); - padding-bottom: var(--item-padding); - padding-left: 0; - padding-right: 0; - margin: var(--v-margin) 0; - box-sizing: border-box; - - font-family: sans-serif; - font-size: var(--font-size); - white-space: pre-wrap; - - outline: none; - border: none; - } - - &>.code { - position: absolute; - top: 0; - /* XXX this is not correct -- it expands the code to cover - the whole element incl. children... */ - height: 100%; - /*height: calc(2 * var(--item-padding) + 1em);*/ - overflow: hidden; - resize: none; - opacity: 0; - - /* show/hide node's view/code... */ - &:focus { - position: relative; - opacity: 1; - } - /* hide .view content but show before/after -- keep bulets and touch zones... */ - &:focus+.view { - position: absolute; - top: 0; - visibility: hidden; - - &:before, - &:after { - visibility: visible; - margin-top: calc(-1 * var(--v-margin)); - margin-bottom: calc(-1 * var(--v-margin)); - } - } - } - - /* click through the .view text to the .code */ - /* NOTE: .view visibility is handled in .code above... */ - &>.view { - position: relative; - pointer-events: none; - user-select: none; - - /* clickable things in view */ - & a, - & pre, - & input { - pointer-events: auto; - } - - /* click/tap zones for expand button... */ - &:before, - &:after { - --size: 3rem; - - content: ""; - position: absolute; - display: flex; - top: 0; - right: calc(-1 * var(--size)); - width: var(--size); - height: 100%; - - align-items: top; - justify-content: center; - - box-sizing: border-box; - border-left: solid 0.5em transparent; - border-right: solid 0.5em transparent; - - /* make the text align to the center of the first line... */ - font-size: 1rem; - /* XXX the 1.1 coeficient here is a hack... */ - line-height: calc( - var(--font-size) - * 1.1 - + var(--font-size) - * var(--item-padding-ratio) - * 2); - - pointer-events: auto; - - cursor: pointer; - background: transparent; - } - /* left indicator */ - &:before { - justify-content: right; - left: calc(-1 * var(--size)); - } - } - - - /* indicators... */ - /* left indicator bullet */ - /* XXX not sure about this yet... */ - &>.view:before { - content: "●"; - color: rgba(0,0,0,0.07); - } - &>.view:empty:before { - content: ""; - } - /* right indicator (collapse/expand) */ - &>.view:after { - color: silver; - } - &:has(.block)>.view:after { - content: "○"; - } - &[collapsed]>.view:after { - content: "●"; - } - - &>.children { - position: relative; - } - } - - /* block hover... */ - &:empty:hover:after, - .block:not(.focused):hover>.view { - background: linear-gradient( - 90deg, - rgba(0,0,0,0.01) 0%, - rgba(0,0,0,0.01) 80%, - rgba(0,0,0,0.03) 100%); - } - } - - /* - * NOTE: the organization after this point does not feel right/clean, - * not sure how to do this better... - */ - - /* crop... */ - &.crop .outline .block { - &[cropped] .block, - &[cropped] .block[cropped] { - margin-left: var(--item-indent); - } - - &:not([cropped]) { - padding: 0; - border: none; - background: none; - - .text { - display: none; - } - } - &, - &[cropped] { - margin-left: 0; - } - /* XXX nesting this in &[cropped] for some reaon breaks things... */ - &[cropped] .text { - display: block; - } - } - - /* toolbar... */ - .toolbar { - display: inline-block; - position: absolute; - top: 1em; - right: 1em; - - button { - --margin: 0.1em; - - display: block; - - width: calc(var(--button-size) + var(--margin) * 2); - height: var(--button-size); - margin: var(--margin); - - font-size: var(--button-size); - } - } - - &.block-offsets .outline .block { - border-left: solid 1px silver; - } -} - - - - - - - - -/********************************************************** Styles ***/ - - -/*------------------------------------------------------ Headings ---*/ - -:host .outline, -.editor .outline { - .heading { - margin-top: 1rem; - - &>.text { - font-weight: bold; - border-bottom: solid 1px rgba(0,0,0,0.1); - } - } - .heading .heading .heading .heading>.text, - .heading-4>.text, - .heading-5>.text, - .heading-6>.text { - border-bottom: none; - } - - .heading>.text, - .heading-1>.text { - --font-size: 2.5em; - } - .heading .heading>.text, - .heading-2>.text { - --font-size: 1.9em; - } - .heading .heading .heading>.text, - .heading-3>.text { - --font-size: 1.5em; - } - .heading .heading .heading .heading>.text, - .heading-4>.text { - --font-size: 1.3em; - } - .heading .heading .heading .heading .heading>.text, - .heading-5>.text { - --font-size: 1.1em; - } - .heading .heading .heading .heading .heading .heading>.text, - .heading-6>.text { - --font-size: 1em; - } -} - - -/*----------------------------------------------------------- TOC ---*/ - -:host .outline, -.editor .outline { - .toc>.view, - .TOC>.view { - padding-top: 0px; - padding-bottom: 0px; - } -} - - -/*--------------------------------------------------------- Quote ---*/ - -:host .outline .quote>.text, -.editor .outline .quote>.text { - --indent: 1rem; - --v-margin: 0.7rem; - --item-padding-ratio: 0.7; - - /* XXX for some reason if this is not set here it will not see the new --item-padding-ratio */ - --item-padding: calc(1rem * var(--item-padding-ratio)); - - padding: var(--item-padding) 1.5rem; - color: rgba(0,0,0,0.8); - - /* XXX border messes up bullet alignment... */ - /*border-left: solid 0.2em silver;*/ - box-shadow: inset 0.2em 0 0 0 silver; - background: rgba(0,0,0,0.05); -} - - -/*---------------------------------------------------------- List ---*/ - -:host .outline, -.editor .outline { - .list-item>.view:before, - .list>.children { - &>.block>.view:before { - content: "◼"; - color: gray; - } - &>.list>.children { - &>.block>.view:before { - content: "●"; - } - &>.list>.children { - &>.block>.view:before { - content: "○"; - } - &>.list>.children { - &>.block>.view:before { - content: "▪"; - } - } - } - } - /* hide bullets on empty nodes unless they are edited... */ - &>.block>.code:not(:focus)+.view:empty:before { - content: "" !important; - } - /* hide bullets on empty nodes... *//* - &>.block>.view:empty:before { - content: ""; - } - */ - } -} - - -/*------------------------------------------------ Numbered lists ---*/ - -:host .outline .numbered-list>.children, -.editor .outline .numbered-list>.children { - counter-reset: numbered-list; - - &>.block>.view:not(:empty):before { - counter-increment: numbered-list; - content: counter(numbered-list) "."; - color: gray; - } - &>.numbered-list>.children { - &>.block>.view:not(:empty):before { - counter-increment: numbered-list; - content: counter(numbered-list, lower-alpha) "."; - } - &>.numbered-list>.children { - &>.block>.view:not(:empty):before { - counter-increment: numbered-list; - content: counter(numbered-list, lower-roman) "."; - } - &>.numbered-list>.children { - &>.block>.view:not(:empty):before { - counter-increment: numbered-list; - content: counters(numbered-list, ".") "."; - } - } - } - } -} - - -/*------------------------------------------------------ hr block ---*/ - -:host .outline, -.editor .outline { - .list>.children>.block.hr>.view:before { - content: ""; - } - .numbered-list>.children>.block.hr>.view:before { - content: ""; - } -} - - -/*--------------------------------------------------------- Notes ---*/ - -:host .outline .NOTE, -.editor .outline .NOTE { - --margin: 1rem; - --padding-h: 2rem; - --padding-v: 1.2em; - - margin: var(--margin) 0; - padding: var(--padding-v) var(--padding-h); - border: solid 2px silver; - background: rgba(0,0,0,0.05); - - /* XXX this prevents it from being accesible via click/tap... */ - &>.view:empty { - display: none; - } - &:focus>.view:empty { - display: block; - } - &>.view:empty ~ .children { - margin-left: -1rem; - } - &>.view:before { - content: "" !important; - } - /* correct the right click zone... */ - /* XXX need to account for nesting... (???) */ - &.block>.view:after, - &.block .block>.view:after { - margin-right: calc(-1 * var(--padding-h)); - } -} - - -/*-------------------------------------------------------- Status ---*/ - -:host .outline .block, -.editor .outline .block { - &.DONE>.view { - text-decoration: line-through; - opacity: 0.5; - } - &.REJECT>.view { - text-decoration: line-through; - } -} - - -/*--------------------------------------------------- Highlightes ---*/ - -:host .outline, -.editor .outline { - --highlight-color: yellow; - --highlight-focus-color: rgb(253, 218, 13); - --highlight-hover-color: rgba(253, 218, 13, 0.5); - --highlight-focus-hover-color: rgba(253, 218, 13, 0.7); - - .highlight { - font-weight: bold; - background: yellow; - } - .XXX { - &>.view { - background: var(--highlight-color); - } - &:hover>.view { - background: var(--highlight-hover-color) !important; - } - &.focused { - &>.view, - &>.text { - /* XXX can we avoid !important here??? */ - background: var(--highlight-focus-color) !important; - } - &:hover>.view { - background: var(--highlight-focus-hover-color) !important; - } - } - } -} - - -/*------------------------------------------------------ Comments ---*/ - -:host.hide-comments .outline .comment, -.editor.hide-comments .outline .comment { - display: none; -} -:host .outline .comment>.view, -.editor .outline .comment>.view { - color: silver; -} - - -/*---------------------------------------------------- Checkboxes ---*/ - -:host .outline .block, -.editor .outline .block { - &.todo>.view { - width: calc( - 100% - - var(--checkbox-size) - - var(--checkbox-margin)); - margin-left: calc( - var(--checkbox-size) - + var(--checkbox-margin)); - } - &.check>.view input[type=checkbox], - &.todo>.view input[type=checkbox] { - height: var(--checkbox-size); - width: var(--checkbox-size); - - margin-top: calc(var(--checkbox-size) / -2); - margin-left: var(--checkbox-margin); - margin-right: var(--checkbox-margin); - - transform: translateY(calc(2 * var(--item-padding))); - - /* NOTE: this appears to be needed for the em sizes above to work correctly */ - font-size: 1em; - } - &.check.focused>.view input[type=checkbox].selected, - &.todo.focused>.view input[type=checkbox].selected { - outline: solid 0.2em silver; - } - &.check:focus>.view input[type=checkbox].selected, - &.todo:focus>.view input[type=checkbox].selected { - outline: solid 0.2em gray; - } - &.todo>.view input[type=checkbox]:first-child { - margin-left: calc( - -1 * var(--checkbox-size) - - var(--checkbox-margin)); - } - /* correct the left click zone... */ - &.todo>.view:before { - margin-left: calc( - -1 * var(--checkbox-size) - - var(--checkbox-margin)); - } - /* status... */ - &>.view .completion[completion]:before { - content: "(" attr(completion) ")"; - color: gray; - } -} - - -/*---------------------------------------------------------- Code ---*/ - -:host .outline .block>.view, -.editor .outline .block>.view { - /* XXX for some reason if we omit & where not needed, colors will not apply... */ - & pre, - &>code, - & :not(pre)>code { - font-family: monospace; - background: rgba(0,0,0,0.07); - border-radius: 0.2em; - outline: none; - } - & :not(pre)>code { - padding: 0.1em 0.3em; - } - & pre>code { - --padding: 0.6em; - - display: block; - min-width: calc(100% - var(--padding) * 2); - width: fit-content; - padding: var(--padding) var(--padding); - padding-bottom: calc(var(--padding) + 0.2em); - outline: none; - } - - /* scrollbar... */ - & pre { - margin: 0.8em 0em; - - overflow-x: visible; - overflow-y: auto; - - scrollbar-width: thin; - } - & pre::-webkit-scrollbar { - --size: 0.5rem; - - width: var(--size); - height: var(--size); - - /* XXX due to a bug in chrome this does change the scrollbar curosr... */ - cursor: pointer; - } - & pre::-webkit-scrollbar-track { - background: transparent; - } - & pre::-webkit-scrollbar-thumb { - background: silver; - } -} - - -/*-------------------------------------------------------- Tables ---*/ - -:host .outline .block>.view>table, -.editor .outline .block>.view>table { - width: 100%; - border-collapse: collapse; - - /* XXX for some reason if we omit & where not needed, colors will not apply... */ - & tr:nth-child(odd) { - background: rgba(0,0,0,0.03); - } - & tr:first-child { - font-weight: bold; - border-bottom: solid 0.1rem silver; - background: transparent; - } - & td { - height: calc(1em + var(--item-padding) * 2); - padding: 0 1em; - /*text-align: center;*/ - } -} - - -/* XXX EXPERIMENTAL... -* - need to handle nested blocks somehow... -*/ -.editor .outline .block.table-2 { - - &>.view { - font-size: small; - color: rgba(0,0,0,0.4); - } - - &.focused { - background: rgba(0,0,0,0.05); - } - &:focus { - background: rgba(0,0,0,0.07); - } - &>.code:focus { - position: absolute; - } - - &>.children { - display: table !important; - width: 100%; - - &>.block { - display: table-row; - - &:first-child>.view td { - font-weight: bold; - border-bottom: solid 0.1rem silver; - } - - &:nth-child(even) { - background: rgba(0,0,0,0.03); - } - &:not(:first-child) { - &>.view td { - font-weight: normal !important; - } - } - - &.focused { - background: rgba(0,0,0,0.03); - } - &:focus { - background: rgba(0,0,0,0.07); - } - &>.code:focus { - column-span: all; - } - } - } - - .block>.children, - .view, - table, - tbody, - tr { - display: contents !important; - } -} - - - -/********************************************************* Testing ***/ - -:host.show-click-zones .outline .block, -.editor.show-click-zones .outline .block { - &>.view { - &:before, - &:before, - &:after { - background: rgba(0,0,0,0.03); - border: solid 1px silver; - } - } - &:hover>.view { - &:before, - &:after { - background: rgba(0,0,0,0.1); - } - } -} - - - - -/********************************************************************** -* vim:set ts=4 sw=4 : */ +/********************************************************************** +* +* +* +**********************************************************************/ + +:root { + --font-size: 5mm; + + --outline-padding: 7rem; + + --item-indent: 2rem; + --item-padding-ratio: 0.2; + + --checkbox-size: 1.5rem; + --checkbox-margin: 0.5em; + + --button-size: 2em; + +} + + +/*********************************************************************/ + +:root { + font-family: sans-serif; + font-size: var(--font-size); + + /*text-size-adjust: none;*/ + text-size-adjust: 180%; + + background: white; + color: black; +} + +:host, +.editor { + --item-padding: calc(1em * var(--item-padding-ratio)); +} + + + +/*********************************************************************/ + +:host, +.editor { + display: block; + position: relative; + + + /* loading indicator */ + &.loading { + .outline { + pointer-events: none; + } + .outline>.block { + opacity: 0.2; + } + /* XXX STUB... */ + .outline:before { + content: "Loading..."; + display: block; + position: absolute; + top: 1em; + } + .outline:empty:before { + position: relative; + top: 0; + } + /* override empty indicator */ + .outline:after { + content: "" !important; + } + } + + + /* editor code */ + &>.code { + display: none; + } + + /* header */ + .header { + margin: 1em var(--outline-padding); + padding-bottom: 1.2em; + + border-bottom: solid 1px rgba(0,0,0,0.15); + + &:empty { + display: none; + } + .path-item { + color: gray; + cursor: pointer; + /* XXX needs more work... */ + max-width: 10rem; + text-overflow: ellipsis; + + &:hover { + text-decoration: underline; + } + &:first-child { + padding-left: 3em; + margin-left: -2em; + } + } + } + + .outline { + display: block; + position: relative; + + padding: 1em var(--outline-padding); + padding-bottom: 1.2em; + + /* virtual empty block... */ + &:empty:after { + content: "Empty"; + display: block; + font-style: italic; + color: rgba(0,0,0,0.2); + } + &:empty:hover:after { + } + + + .block .block { + margin-left: var(--item-indent); + } + .block { + position: relative; + outline: none; + border: none; + + /* focus... */ + &:focus { + /*outline: solid 0.2em silver;*/ + outline: none; + } + &:focus>.text { + background: rgba(0,0,0,0.07); + } + &.focused:not(:focus)>.text { + background: rgba(0,0,0,0.01); + } + + /* collapsed block... */ + &[collapsed] { + border-bottom: solid 1px silver; + &>.children { + display: none; + } + } + + /* select... */ + /* XXX are we selecting subtrees or blocks??? */ + &[selected]>.text { + background: silver; + } + + &>.text { + --v-margin: 0; + + display: block; + width: 100%; + /* XXX this is a tiny bit off and using .code's height here is off too... */ + min-height: calc(1em + var(--item-padding) * 2); + padding-top: var(--item-padding); + padding-bottom: var(--item-padding); + padding-left: 0; + padding-right: 0; + margin: var(--v-margin) 0; + box-sizing: border-box; + + font-family: sans-serif; + font-size: var(--font-size); + white-space: pre-wrap; + + outline: none; + border: none; + } + + &>.code { + position: absolute; + top: 0; + /* XXX this is not correct -- it expands the code to cover + the whole element incl. children... */ + height: 100%; + /*height: calc(2 * var(--item-padding) + 1em);*/ + overflow: hidden; + resize: none; + opacity: 0; + + /* show/hide node's view/code... */ + &:focus { + position: relative; + opacity: 1; + } + /* hide .view content but show before/after -- keep bulets and touch zones... */ + &:focus+.view { + position: absolute; + top: 0; + visibility: hidden; + + &:before, + &:after { + visibility: visible; + margin-top: calc(-1 * var(--v-margin)); + margin-bottom: calc(-1 * var(--v-margin)); + } + } + } + + /* click through the .view text to the .code */ + /* NOTE: .view visibility is handled in .code above... */ + &>.view { + position: relative; + pointer-events: none; + user-select: none; + + /* clickable things in view */ + & a, + & pre, + & input { + pointer-events: auto; + } + + /* click/tap zones for expand button... */ + &:before, + &:after { + --size: 3rem; + + content: ""; + position: absolute; + display: flex; + top: 0; + right: calc(-1 * var(--size)); + width: var(--size); + height: 100%; + + align-items: top; + justify-content: center; + + box-sizing: border-box; + border-left: solid 0.5em transparent; + border-right: solid 0.5em transparent; + + /* make the text align to the center of the first line... */ + font-size: 1rem; + /* XXX the 1.1 coeficient here is a hack... */ + line-height: calc( + var(--font-size) + * 1.1 + + var(--font-size) + * var(--item-padding-ratio) + * 2); + + pointer-events: auto; + + cursor: pointer; + background: transparent; + } + /* left indicator */ + &:before { + justify-content: right; + left: calc(-1 * var(--size)); + } + } + + + /* indicators... */ + /* left indicator bullet */ + /* XXX not sure about this yet... */ + &>.view:before { + content: "●"; + color: rgba(0,0,0,0.07); + } + &>.view:empty:before { + content: ""; + } + /* right indicator (collapse/expand) */ + &>.view:after { + color: silver; + } + &:has(.block)>.view:after { + content: "○"; + } + &[collapsed]>.view:after { + content: "●"; + } + + &>.children { + position: relative; + } + } + + /* block hover... */ + &:empty:hover:after, + .block:not(.focused):hover>.view { + background: linear-gradient( + 90deg, + rgba(0,0,0,0.01) 0%, + rgba(0,0,0,0.01) 80%, + rgba(0,0,0,0.03) 100%); + } + } + + /* + * NOTE: the organization after this point does not feel right/clean, + * not sure how to do this better... + */ + + /* crop... */ + &.crop .outline .block { + &[cropped] .block, + &[cropped] .block[cropped] { + margin-left: var(--item-indent); + } + + &:not([cropped]) { + padding: 0; + border: none; + background: none; + + .text { + display: none; + } + } + &, + &[cropped] { + margin-left: 0; + } + /* XXX nesting this in &[cropped] for some reaon breaks things... */ + &[cropped] .text { + display: block; + } + } + + /* toolbar... */ + .toolbar { + display: inline-block; + position: absolute; + top: 1em; + right: 1em; + + button { + --margin: 0.1em; + + display: block; + + width: calc(var(--button-size) + var(--margin) * 2); + height: var(--button-size); + margin: var(--margin); + + font-size: var(--button-size); + } + } + + &.block-offsets .outline .block { + border-left: solid 1px silver; + } +} + + + + + + + + +/********************************************************** Styles ***/ + + +/*------------------------------------------------------ Headings ---*/ + +:host .outline, +.editor .outline { + .heading { + margin-top: 1rem; + + &>.text { + font-weight: bold; + border-bottom: solid 1px rgba(0,0,0,0.1); + } + } + .heading .heading .heading .heading>.text, + .heading-4>.text, + .heading-5>.text, + .heading-6>.text { + border-bottom: none; + } + + .heading>.text, + .heading-1>.text { + --font-size: 2.5em; + } + .heading .heading>.text, + .heading-2>.text { + --font-size: 1.9em; + } + .heading .heading .heading>.text, + .heading-3>.text { + --font-size: 1.5em; + } + .heading .heading .heading .heading>.text, + .heading-4>.text { + --font-size: 1.3em; + } + .heading .heading .heading .heading .heading>.text, + .heading-5>.text { + --font-size: 1.1em; + } + .heading .heading .heading .heading .heading .heading>.text, + .heading-6>.text { + --font-size: 1em; + } +} + + +/*----------------------------------------------------------- TOC ---*/ + +:host .outline, +.editor .outline { + .toc>.view, + .TOC>.view { + padding-top: 0px; + padding-bottom: 0px; + } +} + + +/*--------------------------------------------------------- Quote ---*/ + +:host .outline .quote>.text, +.editor .outline .quote>.text { + --indent: 1rem; + --v-margin: 0.7rem; + --item-padding-ratio: 0.7; + + /* XXX for some reason if this is not set here it will not see the new --item-padding-ratio */ + --item-padding: calc(1rem * var(--item-padding-ratio)); + + padding: var(--item-padding) 1.5rem; + color: rgba(0,0,0,0.8); + + /* XXX border messes up bullet alignment... */ + /*border-left: solid 0.2em silver;*/ + box-shadow: inset 0.2em 0 0 0 silver; + background: rgba(0,0,0,0.05); +} + + +/*---------------------------------------------------------- List ---*/ + +:host .outline, +.editor .outline { + .list-item>.view:before, + .list>.children { + &>.block>.view:before { + content: "◼"; + color: gray; + } + &>.list>.children { + &>.block>.view:before { + content: "●"; + } + &>.list>.children { + &>.block>.view:before { + content: "○"; + } + &>.list>.children { + &>.block>.view:before { + content: "▪"; + } + } + } + } + /* hide bullets on empty nodes unless they are edited... */ + &>.block>.code:not(:focus)+.view:empty:before { + content: "" !important; + } + /* hide bullets on empty nodes... *//* + &>.block>.view:empty:before { + content: ""; + } + */ + } +} + + +/*------------------------------------------------ Numbered lists ---*/ + +:host .outline .numbered-list>.children, +.editor .outline .numbered-list>.children { + counter-reset: numbered-list; + + &>.block>.view:not(:empty):before { + counter-increment: numbered-list; + content: counter(numbered-list) "."; + color: gray; + } + &>.numbered-list>.children { + &>.block>.view:not(:empty):before { + counter-increment: numbered-list; + content: counter(numbered-list, lower-alpha) "."; + } + &>.numbered-list>.children { + &>.block>.view:not(:empty):before { + counter-increment: numbered-list; + content: counter(numbered-list, lower-roman) "."; + } + &>.numbered-list>.children { + &>.block>.view:not(:empty):before { + counter-increment: numbered-list; + content: counters(numbered-list, ".") "."; + } + } + } + } +} + + +/*------------------------------------------------------ hr block ---*/ + +:host .outline, +.editor .outline { + .list>.children>.block.hr>.view:before { + content: ""; + } + .numbered-list>.children>.block.hr>.view:before { + content: ""; + } +} + + +/*--------------------------------------------------------- Notes ---*/ + +:host .outline .NOTE, +.editor .outline .NOTE { + --margin: 1rem; + --padding-h: 2rem; + --padding-v: 1.2em; + + margin: var(--margin) 0; + padding: var(--padding-v) var(--padding-h); + border: solid 2px silver; + background: rgba(0,0,0,0.05); + + /* XXX this prevents it from being accesible via click/tap... */ + &>.view:empty { + display: none; + } + &:focus>.view:empty { + display: block; + } + &>.view:empty ~ .children { + margin-left: -1rem; + } + &>.view:before { + content: "" !important; + } + /* correct the right click zone... */ + /* XXX need to account for nesting... (???) */ + &.block>.view:after, + &.block .block>.view:after { + margin-right: calc(-1 * var(--padding-h)); + } +} + + +/*-------------------------------------------------------- Status ---*/ + +:host .outline .block, +.editor .outline .block { + &.DONE>.view { + text-decoration: line-through; + opacity: 0.5; + } + &.REJECT>.view { + text-decoration: line-through; + } +} + + +/*--------------------------------------------------- Highlightes ---*/ + +:host .outline, +.editor .outline { + --highlight-color: yellow; + --highlight-focus-color: rgb(253, 218, 13); + --highlight-hover-color: rgba(253, 218, 13, 0.5); + --highlight-focus-hover-color: rgba(253, 218, 13, 0.7); + + .highlight { + font-weight: bold; + background: yellow; + } + .XXX { + &>.view { + background: var(--highlight-color); + } + &:hover>.view { + background: var(--highlight-hover-color) !important; + } + &.focused { + &>.view, + &>.text { + /* XXX can we avoid !important here??? */ + background: var(--highlight-focus-color) !important; + } + &:hover>.view { + background: var(--highlight-focus-hover-color) !important; + } + } + } +} + + +/*------------------------------------------------------ Comments ---*/ + +:host.hide-comments .outline .comment, +.editor.hide-comments .outline .comment { + display: none; +} +:host .outline .comment>.view, +.editor .outline .comment>.view { + color: silver; +} + + +/*---------------------------------------------------- Checkboxes ---*/ + +:host .outline .block, +.editor .outline .block { + &.todo>.view { + width: calc( + 100% + - var(--checkbox-size) + - var(--checkbox-margin)); + margin-left: calc( + var(--checkbox-size) + + var(--checkbox-margin)); + } + &.check>.view input[type=checkbox], + &.todo>.view input[type=checkbox] { + height: var(--checkbox-size); + width: var(--checkbox-size); + + margin-top: calc(var(--checkbox-size) / -2); + margin-left: var(--checkbox-margin); + margin-right: var(--checkbox-margin); + + transform: translateY(calc(2 * var(--item-padding))); + + /* NOTE: this appears to be needed for the em sizes above to work correctly */ + font-size: 1em; + } + &.check.focused>.view input[type=checkbox].selected, + &.todo.focused>.view input[type=checkbox].selected { + outline: solid 0.2em silver; + } + &.check:focus>.view input[type=checkbox].selected, + &.todo:focus>.view input[type=checkbox].selected { + outline: solid 0.2em gray; + } + &.todo>.view input[type=checkbox]:first-child { + margin-left: calc( + -1 * var(--checkbox-size) + - var(--checkbox-margin)); + } + /* correct the left click zone... */ + &.todo>.view:before { + margin-left: calc( + -1 * var(--checkbox-size) + - var(--checkbox-margin)); + } + /* status... */ + &>.view .completion[completion]:before { + content: "(" attr(completion) ")"; + color: gray; + } +} + + +/*---------------------------------------------------------- Code ---*/ + +:host .outline .block>.view, +.editor .outline .block>.view { + /* XXX for some reason if we omit & where not needed, colors will not apply... */ + & pre, + &>code, + & :not(pre)>code { + font-family: monospace; + background: rgba(0,0,0,0.07); + border-radius: 0.2em; + outline: none; + } + & :not(pre)>code { + padding: 0.1em 0.3em; + } + & pre>code { + --padding: 0.6em; + + display: block; + min-width: calc(100% - var(--padding) * 2); + width: fit-content; + padding: var(--padding) var(--padding); + padding-bottom: calc(var(--padding) + 0.2em); + outline: none; + } + + /* scrollbar... */ + & pre { + margin: 0.8em 0em; + + overflow-x: visible; + overflow-y: auto; + + scrollbar-width: thin; + } + & pre::-webkit-scrollbar { + --size: 0.5rem; + + width: var(--size); + height: var(--size); + + /* XXX due to a bug in chrome this does change the scrollbar curosr... */ + cursor: pointer; + } + & pre::-webkit-scrollbar-track { + background: transparent; + } + & pre::-webkit-scrollbar-thumb { + background: silver; + } +} + + +/*-------------------------------------------------------- Tables ---*/ + +:host .outline .block>.view>table, +.editor .outline .block>.view>table { + width: 100%; + border-collapse: collapse; + + /* XXX for some reason if we omit & where not needed, colors will not apply... */ + & tr:nth-child(odd) { + background: rgba(0,0,0,0.03); + } + & tr:first-child { + font-weight: bold; + border-bottom: solid 0.1rem silver; + background: transparent; + } + & td { + height: calc(1em + var(--item-padding) * 2); + padding: 0 1em; + /*text-align: center;*/ + } +} + + +/* XXX EXPERIMENTAL... +* - need to handle nested blocks somehow... +*/ +.editor .outline .block.table-2 { + + &>.view { + font-size: small; + color: rgba(0,0,0,0.4); + } + + &.focused { + background: rgba(0,0,0,0.05); + } + &:focus { + background: rgba(0,0,0,0.07); + } + &>.code:focus { + position: absolute; + } + + &>.children { + display: table !important; + width: 100%; + + &>.block { + display: table-row; + + &:first-child>.view td { + font-weight: bold; + border-bottom: solid 0.1rem silver; + } + + &:nth-child(even) { + background: rgba(0,0,0,0.03); + } + &:not(:first-child) { + &>.view td { + font-weight: normal !important; + } + } + + &.focused { + background: rgba(0,0,0,0.03); + } + &:focus { + background: rgba(0,0,0,0.07); + } + &>.code:focus { + column-span: all; + } + } + } + + .block>.children, + .view, + table, + tbody, + tr { + display: contents !important; + } +} + + + +/********************************************************* Testing ***/ + +:host.show-click-zones .outline .block, +.editor.show-click-zones .outline .block { + &>.view { + &:before, + &:before, + &:after { + background: rgba(0,0,0,0.03); + border: solid 1px silver; + } + } + &:hover>.view { + &:before, + &:after { + background: rgba(0,0,0,0.1); + } + } +} + + + + +/********************************************************************** +* vim:set ts=4 sw=4 : */ diff --git a/v2/pwiki/store/base.js b/v2/pwiki/store/base.js index 5b6c5eb..285a20c 100755 --- a/v2/pwiki/store/base.js +++ b/v2/pwiki/store/base.js @@ -1406,6 +1406,7 @@ module.BaseStore = { // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - // XXX BROKEN... +// XXX a mixin?? var BaseStoreWithSearch = { __proto__: BaseStore,