mirror of
https://github.com/flynx/pWiki.git
synced 2025-10-30 02:20:08 +00:00
refactored CSS...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
bb3ba95ae3
commit
25b2b4af47
@ -41,72 +41,92 @@
|
|||||||
.editor {
|
.editor {
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
|
||||||
|
|
||||||
.editor .code {
|
.code {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* header */
|
||||||
/* header */
|
.header {
|
||||||
.editor .header {
|
|
||||||
margin: 1em var(--outline-padding);
|
margin: 1em var(--outline-padding);
|
||||||
padding-bottom: 1.2em;
|
padding-bottom: 1.2em;
|
||||||
|
|
||||||
border-bottom: solid 1px rgba(0,0,0,0.15);
|
border-bottom: solid 1px rgba(0,0,0,0.15);
|
||||||
}
|
|
||||||
.editor .header:empty {
|
&:empty {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.editor .header .path-item {
|
.path-item {
|
||||||
color: gray;
|
color: gray;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
/* XXX needs more work... */
|
/* XXX needs more work... */
|
||||||
max-width: 10rem;
|
max-width: 10rem;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
|
||||||
.editor .header .path-item:hover {
|
&:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
.editor .header .path-item:first-child {
|
&:first-child {
|
||||||
padding-left: 3em;
|
padding-left: 3em;
|
||||||
margin-left: -2em;
|
margin-left: -2em;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.outline {
|
||||||
.editor .outline {
|
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
padding: 1em var(--outline-padding);
|
padding: 1em var(--outline-padding);
|
||||||
padding-bottom: 1.2em;
|
padding-bottom: 1.2em;
|
||||||
}
|
|
||||||
|
|
||||||
/* virtual empty block... */
|
/* virtual empty block... */
|
||||||
.editor .outline:empty:after {
|
&:empty:after {
|
||||||
content: "Empty";
|
content: "Empty";
|
||||||
display: block;
|
display: block;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
color: rgba(0,0,0,0.2);
|
color: rgba(0,0,0,0.2);
|
||||||
}
|
}
|
||||||
.editor .outline:empty:hover:after {
|
&:empty:hover:after {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.editor .outline .block {
|
.block .block {
|
||||||
|
margin-left: var(--item-indent);
|
||||||
|
}
|
||||||
|
.block {
|
||||||
position: relative;
|
position: relative;
|
||||||
outline: none;
|
outline: none;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
|
||||||
.editor.block-offsets .outline .block {
|
/* focus... */
|
||||||
border-left: solid 1px silver;
|
&:focus {
|
||||||
}
|
/*outline: solid 0.2em silver;*/
|
||||||
.editor .outline .block .block,
|
outline: none;
|
||||||
.editor.crop .outline .block[cropped] .block,
|
}
|
||||||
.editor.crop .outline .block[cropped] .block[cropped] {
|
&:focus>.text {
|
||||||
margin-left: var(--item-indent);
|
background: rgba(0,0,0,0.07);
|
||||||
}
|
}
|
||||||
.editor .outline .block>.text {
|
&.focused:not(:focus)>.text {
|
||||||
|
background: rgba(0,0,0,0.01);
|
||||||
|
border-bottom: solid 2px rgba(0,0,0,0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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;
|
--v-margin: 0;
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
@ -126,81 +146,47 @@
|
|||||||
|
|
||||||
outline: none;
|
outline: none;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
/* show/hide node's view/code... */
|
|
||||||
/*.editor .outline .block>.code:focus+.view,*/
|
&>.code {
|
||||||
.editor .outline .block>.code:not(:focus) {
|
|
||||||
position: absolute;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
/* hide .view content but show before/after -- keep bulets and touch zones... */
|
|
||||||
.editor .outline .block>.code:focus+.view {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
.editor .outline .block>.code:focus+.view:before,
|
|
||||||
.editor .outline .block>.code:focus+.view: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 */
|
|
||||||
.editor .outline .block>.view {
|
|
||||||
position: relative;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
/* block hover... */
|
|
||||||
.editor .outline:empty:hover:after,
|
|
||||||
.editor .outline .block: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%);
|
|
||||||
}
|
|
||||||
.editor .outline .block>.view:blank {
|
|
||||||
content: " ";
|
|
||||||
}
|
|
||||||
.editor .outline .block>.code {
|
|
||||||
height: calc(2 * var(--item-padding) + 1em);
|
height: calc(2 * var(--item-padding) + 1em);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
resize: none;
|
resize: none;
|
||||||
}
|
/* show/hide node's view/code... */
|
||||||
/* clickable things in view */
|
/*.editor .outline .block>.code:focus+.view,*/
|
||||||
.editor .outline .block>.view a,
|
&:not(:focus) {
|
||||||
.editor .outline .block>.view pre,
|
opacity: 0;
|
||||||
.editor .outline .block>.view input {
|
}
|
||||||
|
/* hide .view content but show before/after -- keep bulets and touch zones... */
|
||||||
|
&:focus+.view {
|
||||||
|
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 */
|
||||||
|
&>.view {
|
||||||
|
position: relative;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
/* clickable things in view */
|
||||||
|
& a,
|
||||||
|
& pre,
|
||||||
|
& input {
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* click/tap zones for expand button... */
|
||||||
/* focus... */
|
&:before,
|
||||||
editor .outline .block:focus {
|
&:after {
|
||||||
/*outline: solid 0.2em silver;*/
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
.editor .outline .block:focus>.text {
|
|
||||||
background: rgba(0,0,0,0.07);
|
|
||||||
}
|
|
||||||
.editor .outline .block.focused:not(:focus)>.text {
|
|
||||||
background: rgba(0,0,0,0.01);
|
|
||||||
border-bottom: solid 2px rgba(0,0,0,0.03);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* collapsed block... */
|
|
||||||
.editor .outline .block[collapsed] {
|
|
||||||
border-bottom: solid 1px silver;
|
|
||||||
}
|
|
||||||
/* hide children... */
|
|
||||||
.editor .outline .block[collapsed]>.children {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* click/tap zones for expand button... */
|
|
||||||
.editor .outline .block>.view:before,
|
|
||||||
.editor .outline .block>.view:after {
|
|
||||||
--size: 3rem;
|
--size: 3rem;
|
||||||
|
|
||||||
content: "";
|
content: "";
|
||||||
@ -232,68 +218,85 @@ editor .outline .block:focus {
|
|||||||
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
/* left indicator */
|
||||||
/* left indicator */
|
&:before {
|
||||||
.editor .outline .block>.view:before {
|
|
||||||
justify-content: right;
|
justify-content: right;
|
||||||
left: calc(-1 * var(--size));
|
left: calc(-1 * var(--size));
|
||||||
}
|
}
|
||||||
/* left indicator bullet */
|
}
|
||||||
/* XXX not sure about this yet... */
|
|
||||||
.editor .outline .block>.view:before {
|
|
||||||
|
/* indicators... */
|
||||||
|
/* left indicator bullet */
|
||||||
|
/* XXX not sure about this yet... */
|
||||||
|
&>.view:before {
|
||||||
content: "●";
|
content: "●";
|
||||||
color: rgba(0,0,0,0.07);
|
color: rgba(0,0,0,0.07);
|
||||||
}
|
}
|
||||||
.editor .outline .block>.view:empty:before {
|
&>.view:empty:before {
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
/* right indicator (collapse/expand) */
|
/* right indicator (collapse/expand) */
|
||||||
.editor .outline .block>.view:after {
|
&>.view:after {
|
||||||
color: silver;
|
color: silver;
|
||||||
}
|
}
|
||||||
.editor .outline .block:has(.block)>.view:after {
|
&:has(.block)>.view:after {
|
||||||
content: "○";
|
content: "○";
|
||||||
}
|
}
|
||||||
.editor .outline .block[collapsed]>.view:after {
|
&[collapsed]>.view:after {
|
||||||
content: "●";
|
content: "●";
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* select... */
|
/* block hover... */
|
||||||
/* XXX are we selecting subtrees or blocks??? */
|
&:empty:hover:after,
|
||||||
.editor .outline [selected]>.text {
|
.block:not(.focused):hover>.view {
|
||||||
background: silver;
|
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... */
|
||||||
/* NOTE: also see rules for: .editor .outline .block .block
|
&.crop .outline .block {
|
||||||
* ...can we avoid this?? (XXX) */
|
&[cropped] .block,
|
||||||
.editor.crop .outline .block:not([cropped]) {
|
&[cropped] .block[cropped] {
|
||||||
|
margin-left: var(--item-indent);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not([cropped]) {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
.editor.crop .outline .block:not([cropped])>.text {
|
&:not([cropped])>.text {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.editor.crop .outline .block,
|
&,
|
||||||
.editor.crop .outline .block[cropped] {
|
&[cropped] {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
.editor.crop .outline .block[cropped] .text {
|
&[cropped] .text {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* toolbar... */
|
||||||
/* toolbar... */
|
.toolbar {
|
||||||
.editor .toolbar {
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1em;
|
top: 1em;
|
||||||
right: 1em;
|
right: 1em;
|
||||||
}
|
|
||||||
.editor .toolbar button {
|
button {
|
||||||
--margin: 0.1em;
|
--margin: 0.1em;
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
@ -303,54 +306,63 @@ editor .outline .block:focus {
|
|||||||
margin: var(--margin);
|
margin: var(--margin);
|
||||||
|
|
||||||
font-size: var(--button-size);
|
font-size: var(--button-size);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.block-offsets .outline .block {
|
||||||
|
border-left: solid 1px silver;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/********************************************************** Styles ***/
|
/********************************************************** Styles ***/
|
||||||
|
|
||||||
|
|
||||||
/*------------------------------------------------------ Headings ---*/
|
/*------------------------------------------------------ Headings ---*/
|
||||||
|
|
||||||
.editor .outline .heading-1,
|
.editor .outline {
|
||||||
.editor .outline .heading-2,
|
.heading-1,
|
||||||
.editor .outline .heading-3,
|
.heading-2,
|
||||||
.editor .outline .heading-4,
|
.heading-3,
|
||||||
.editor .outline .heading-5,
|
.heading-4,
|
||||||
.editor .outline .heading-6 {
|
.heading-5,
|
||||||
|
.heading-6 {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
|
||||||
.editor .outline .heading-1>.text,
|
|
||||||
.editor .outline .heading-2>.text,
|
|
||||||
.editor .outline .heading-3>.text,
|
|
||||||
.editor .outline .heading-4>.text,
|
|
||||||
.editor .outline .heading-5>.text,
|
|
||||||
.editor .outline .heading-6>.text {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.editor .outline .heading-1>.text,
|
|
||||||
.editor .outline .heading-2>.text,
|
|
||||||
.editor .outline .heading-3>.text {
|
|
||||||
border-bottom: solid 1px rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor .outline .heading-1>.text {
|
&>.text {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.heading-1>.text,
|
||||||
|
.heading-2>.text,
|
||||||
|
.heading-3>.text {
|
||||||
|
border-bottom: solid 1px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-1>.text {
|
||||||
--font-size: 2.5em;
|
--font-size: 2.5em;
|
||||||
}
|
}
|
||||||
.editor .outline .heading-2>.text {
|
.heading-2>.text {
|
||||||
--font-size: 1.9em;
|
--font-size: 1.9em;
|
||||||
}
|
}
|
||||||
.editor .outline .heading-3>.text {
|
.heading-3>.text {
|
||||||
--font-size: 1.5em;
|
--font-size: 1.5em;
|
||||||
}
|
}
|
||||||
.editor .outline .heading-4>.text {
|
.heading-4>.text {
|
||||||
--font-size: 1.3em;
|
--font-size: 1.3em;
|
||||||
}
|
}
|
||||||
.editor .outline .heading-5>.text {
|
.heading-5>.text {
|
||||||
--font-size: 1.1em;
|
--font-size: 1.1em;
|
||||||
}
|
}
|
||||||
.editor .outline .heading-6>.text {
|
.heading-6>.text {
|
||||||
--font-size: 1em;
|
--font-size: 1em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -376,83 +388,81 @@ editor .outline .block:focus {
|
|||||||
|
|
||||||
/*---------------------------------------------------------- List ---*/
|
/*---------------------------------------------------------- List ---*/
|
||||||
|
|
||||||
.editor .outline .list-item>.view:before,
|
.editor .outline {
|
||||||
.editor .outline .list>.children>.block>.view:before {
|
.list-item>.view:before,
|
||||||
|
.list>.children {
|
||||||
|
&>.block>.view:before {
|
||||||
content: "◼";
|
content: "◼";
|
||||||
color: gray;
|
color: gray;
|
||||||
}
|
}
|
||||||
.editor .outline
|
&>.list>.children {
|
||||||
.list>.children
|
&>.block>.view:before {
|
||||||
>.list>.children>.block>.view:before {
|
|
||||||
content: "●";
|
content: "●";
|
||||||
}
|
}
|
||||||
.editor .outline
|
&>.list>.children {
|
||||||
.list>.children
|
&>.block>.view:before {
|
||||||
>.list>.children
|
|
||||||
>.list>.children>.block>.view:before {
|
|
||||||
content: "○";
|
content: "○";
|
||||||
}
|
}
|
||||||
.editor .outline
|
&>.list>.children {
|
||||||
.list>.children
|
&>.block>.view:before {
|
||||||
>.list>.children
|
|
||||||
>.list>.children
|
|
||||||
>.list>.children>.block>.view:before {
|
|
||||||
content: "▪";
|
content: "▪";
|
||||||
}
|
}
|
||||||
/* hide bullets on empty nodes unless they are edited... */
|
}
|
||||||
.editor .outline .list>.children>.block>.code:not(:focus)+.view:empty:before {
|
}
|
||||||
|
}
|
||||||
|
/* 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: "";
|
content: "";
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
}
|
||||||
}
|
}
|
||||||
/* hide bullets on empty nodes... *//*
|
|
||||||
.editor .outline .list>.children>.block>.view:empty:before {
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/*------------------------------------------------ Numbered lists ---*/
|
/*------------------------------------------------ Numbered lists ---*/
|
||||||
|
|
||||||
.editor .outline .numbered-list>.children {
|
.editor .outline .numbered-list>.children {
|
||||||
counter-reset: numbered-list;
|
counter-reset: numbered-list;
|
||||||
}
|
|
||||||
.editor .outline .numbered-list>.children>.block>.view:not(:empty):before {
|
&>.block>.view:not(:empty):before {
|
||||||
counter-increment: numbered-list;
|
counter-increment: numbered-list;
|
||||||
content: counter(numbered-list) ".";
|
content: counter(numbered-list) ".";
|
||||||
color: gray;
|
color: gray;
|
||||||
}
|
}
|
||||||
.editor .outline
|
&>.numbered-list>.children {
|
||||||
.numbered-list>.children
|
&>.block>.view:not(:empty):before {
|
||||||
>.numbered-list>.children>.block>.view:not(:empty):before {
|
|
||||||
counter-increment: numbered-list;
|
counter-increment: numbered-list;
|
||||||
content: counter(numbered-list, lower-alpha) ".";
|
content: counter(numbered-list, lower-alpha) ".";
|
||||||
color: gray;
|
}
|
||||||
}
|
&>.numbered-list>.children {
|
||||||
.editor .outline
|
&>.block>.view:not(:empty):before {
|
||||||
.numbered-list>.children
|
|
||||||
>.numbered-list>.children
|
|
||||||
>.numbered-list>.children>.block>.view:not(:empty):before {
|
|
||||||
counter-increment: numbered-list;
|
counter-increment: numbered-list;
|
||||||
content: counter(numbered-list, lower-roman) ".";
|
content: counter(numbered-list, lower-roman) ".";
|
||||||
color: gray;
|
}
|
||||||
}
|
&>.numbered-list>.children {
|
||||||
.editor .outline
|
&>.block>.view:not(:empty):before {
|
||||||
.numbered-list>.children
|
|
||||||
>.numbered-list>.children
|
|
||||||
>.numbered-list>.children
|
|
||||||
>.numbered-list>.children>.block>.view:not(:empty):before {
|
|
||||||
counter-increment: numbered-list;
|
counter-increment: numbered-list;
|
||||||
content: counters(numbered-list, ".") ".";
|
content: counters(numbered-list, ".") ".";
|
||||||
color: gray;
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*------------------------------------------------------ hr block ---*/
|
/*------------------------------------------------------ hr block ---*/
|
||||||
|
|
||||||
.editor .outline .list>.children>.block.hr>.view:before {
|
.editor .outline {
|
||||||
|
.list>.children>.block.hr>.view:before {
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
.editor .outline .numbered-list>.children>.block.hr>.view:before {
|
.numbered-list>.children>.block.hr>.view:before {
|
||||||
content: "";
|
content: "";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -467,48 +477,52 @@ editor .outline .block:focus {
|
|||||||
padding: var(--padding-v) var(--padding-h);
|
padding: var(--padding-v) var(--padding-h);
|
||||||
border: solid 2px silver;
|
border: solid 2px silver;
|
||||||
background: rgba(0,0,0,0.05);
|
background: rgba(0,0,0,0.05);
|
||||||
}
|
|
||||||
/* XXX this prevents it from being accesible via click/tap... */
|
/* XXX this prevents it from being accesible via click/tap... */
|
||||||
.editor .outline .NOTE>.view:empty {
|
&>.view:empty {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.editor .outline .NOTE:focus>.view:empty {
|
&:focus>.view:empty {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.editor .outline .NOTE>.view:empty ~ .children {
|
&>.view:empty ~ .children {
|
||||||
margin-left: -1rem;
|
margin-left: -1rem;
|
||||||
}
|
}
|
||||||
.editor .outline .NOTE>.view:before {
|
&>.view:before {
|
||||||
content: "" !important;
|
content: "" !important;
|
||||||
}
|
}
|
||||||
/* correct the right click zone... */
|
/* correct the right click zone... */
|
||||||
/* XXX need to account for nesting... (???) */
|
/* XXX need to account for nesting... (???) */
|
||||||
.editor .outline .block.NOTE>.view:after,
|
&.block>.view:after,
|
||||||
.editor .outline .block.NOTE .block>.view:after {
|
&.block .block>.view:after {
|
||||||
margin-right: calc(-1 * var(--padding-h));
|
margin-right: calc(-1 * var(--padding-h));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*-------------------------------------------------------- Status ---*/
|
/*-------------------------------------------------------- Status ---*/
|
||||||
|
|
||||||
.editor .outline .block.DONE>.view {
|
.editor .outline .block {
|
||||||
|
&.DONE>.view {
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
&.REJECT>.view {
|
||||||
.editor .outline .block.REJECT>.view {
|
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*--------------------------------------------------- Highlightes ---*/
|
/*--------------------------------------------------- Highlightes ---*/
|
||||||
|
|
||||||
.editor .outline .highlight {
|
.editor .outline {
|
||||||
|
.highlight {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background: yellow;
|
background: yellow;
|
||||||
}
|
}
|
||||||
.editor .outline .XXX>.view {
|
.XXX>.view {
|
||||||
background: yellow;
|
background: yellow;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -524,7 +538,8 @@ editor .outline .block:focus {
|
|||||||
|
|
||||||
/*---------------------------------------------------- Checkboxes ---*/
|
/*---------------------------------------------------- Checkboxes ---*/
|
||||||
|
|
||||||
.editor .outline .block.todo>.view {
|
.editor .outline .block {
|
||||||
|
&.todo>.view {
|
||||||
width: calc(
|
width: calc(
|
||||||
100%
|
100%
|
||||||
- var(--checkbox-size)
|
- var(--checkbox-size)
|
||||||
@ -532,9 +547,9 @@ editor .outline .block:focus {
|
|||||||
margin-left: calc(
|
margin-left: calc(
|
||||||
var(--checkbox-size)
|
var(--checkbox-size)
|
||||||
+ var(--checkbox-margin));
|
+ var(--checkbox-margin));
|
||||||
}
|
}
|
||||||
.editor .outline .block.check>.view input[type=checkbox],
|
&.check>.view input[type=checkbox],
|
||||||
.editor .outline .block.todo>.view input[type=checkbox] {
|
&.todo>.view input[type=checkbox] {
|
||||||
height: var(--checkbox-size);
|
height: var(--checkbox-size);
|
||||||
width: var(--checkbox-size);
|
width: var(--checkbox-size);
|
||||||
|
|
||||||
@ -546,49 +561,53 @@ editor .outline .block:focus {
|
|||||||
|
|
||||||
/* NOTE: this appears to be needed for the em sizes above to work correctly */
|
/* NOTE: this appears to be needed for the em sizes above to work correctly */
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
.editor .outline .block.check.focused>.view input[type=checkbox].selected,
|
&.check.focused>.view input[type=checkbox].selected,
|
||||||
.editor .outline .block.todo.focused>.view input[type=checkbox].selected {
|
&.todo.focused>.view input[type=checkbox].selected {
|
||||||
outline: solid 0.2em silver;
|
outline: solid 0.2em silver;
|
||||||
}
|
}
|
||||||
.editor .outline .block.check:focus>.view input[type=checkbox].selected,
|
&.check:focus>.view input[type=checkbox].selected,
|
||||||
.editor .outline .block.todo:focus>.view input[type=checkbox].selected {
|
&.todo:focus>.view input[type=checkbox].selected {
|
||||||
outline: solid 0.2em gray;
|
outline: solid 0.2em gray;
|
||||||
}
|
}
|
||||||
.editor .outline .block.todo>.view input[type=checkbox]:first-child {
|
&.todo>.view input[type=checkbox]:first-child {
|
||||||
margin-left: calc(
|
margin-left: calc(
|
||||||
-1 * var(--checkbox-size)
|
-1 * var(--checkbox-size)
|
||||||
- var(--checkbox-margin));
|
- var(--checkbox-margin));
|
||||||
}
|
}
|
||||||
/* correct the left click zone... */
|
/* correct the left click zone... */
|
||||||
.editor .outline .block.todo>.view:before {
|
&.todo>.view:before {
|
||||||
margin-left: calc(
|
margin-left: calc(
|
||||||
-1 * var(--checkbox-size)
|
-1 * var(--checkbox-size)
|
||||||
- var(--checkbox-margin));
|
- var(--checkbox-margin));
|
||||||
}
|
}
|
||||||
/* status... */
|
/* status... */
|
||||||
.editor .outline .block>.view .completion[completion]:before {
|
&>.view .completion[completion]:before {
|
||||||
content: "(" attr(completion) ")";
|
content: "(" attr(completion) ")";
|
||||||
color: gray;
|
color: gray;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*---------------------------------------------------------- Code ---*/
|
/*---------------------------------------------------------- Code ---*/
|
||||||
|
|
||||||
.editor .outline .block>.view pre,
|
.editor .outline .block>.view {
|
||||||
.editor .outline .block>.view>code,
|
/* XXX for some reason if we omit & where not needed, colors will not apply... */
|
||||||
.editor .outline .block>.view :not(pre)>code {
|
& pre,
|
||||||
|
&>code,
|
||||||
|
& :not(pre)>code {
|
||||||
padding: 0.1em 0.3em;
|
padding: 0.1em 0.3em;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
background: rgba(0,0,0,0.07);
|
background: rgba(0,0,0,0.07);
|
||||||
border-radius: 0.2em;
|
border-radius: 0.2em;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.editor .outline .block>.view pre>code {
|
& pre>code {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 0.6em 0.6em;
|
padding: 0.6em 0.6em;
|
||||||
padding-bottom: 0.8em;
|
padding-bottom: 0.8em;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -597,34 +616,44 @@ editor .outline .block:focus {
|
|||||||
.editor .outline .block>.view>table {
|
.editor .outline .block>.view>table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
}
|
|
||||||
.editor .outline .block>.view>table tr:nth-child(odd) {
|
/* 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);
|
background: rgba(0,0,0,0.03);
|
||||||
}
|
}
|
||||||
.editor .outline .block>.view>table tr:first-child {
|
& tr:first-child {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
border-bottom: solid 0.1rem silver;
|
border-bottom: solid 0.1rem silver;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
.editor .outline .block>.view>table td {
|
& td {
|
||||||
height: calc(1em + var(--item-padding) * 2);
|
height: calc(1em + var(--item-padding) * 2);
|
||||||
padding: 0 1em;
|
padding: 0 1em;
|
||||||
/*text-align: center;*/
|
/*text-align: center;*/
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/********************************************************* Testing ***/
|
/********************************************************* Testing ***/
|
||||||
|
|
||||||
.editor.show-click-zones .outline .block>.view:before,
|
.editor.show-click-zones .outline .block {
|
||||||
.editor.show-click-zones .outline .block>.view:after {
|
&>.view {
|
||||||
|
&:before,
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
background: rgba(0,0,0,0.03);
|
background: rgba(0,0,0,0.03);
|
||||||
border: solid 1px silver;
|
border: solid 1px silver;
|
||||||
}
|
}
|
||||||
.editor.show-click-zones .outline .block:hover>.view:before,
|
}
|
||||||
.editor.show-click-zones .outline .block:hover>.view:after {
|
&:hover>.view {
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
background: rgba(0,0,0,0.1);
|
background: rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*********************************************************************/
|
/**********************************************************************
|
||||||
|
* vim:set ts=4 sw=4 : */
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user