297 lines
7.7 KiB
CSS
297 lines
7.7 KiB
CSS
|
/* @settings
|
||
|
|
|
||
|
|
name: Numerals
|
||
|
|
id: numerals-style
|
||
|
|
settings:
|
||
|
|
-
|
||
|
|
id: numerals-comment
|
||
|
|
title: In-line Comment Color
|
||
|
|
description: Color of the text in in-line comments. Default is `--text-faint`.
|
||
|
|
type: variable-themed-color
|
||
|
|
format: hex
|
||
|
|
opacity: false
|
||
|
|
default-light: '#'
|
||
|
|
default-dark: '#'
|
||
|
|
-
|
||
|
|
id: numerals-heading
|
||
|
|
title: Heading / Comment Line Color
|
||
|
|
description: Color of lines with only a comment. Default is `--text-faint`.
|
||
|
|
type: variable-themed-color
|
||
|
|
format: hex
|
||
|
|
opacity: false
|
||
|
|
default-light: '#'
|
||
|
|
default-dark: '#'
|
||
|
|
-
|
||
|
|
id: numerals-background
|
||
|
|
title: Block background color
|
||
|
|
description: Background color of the block. Default is same as code-block background.
|
||
|
|
type: variable-themed-color
|
||
|
|
format: hex
|
||
|
|
opacity: false
|
||
|
|
default-light: '#'
|
||
|
|
default-dark: '#'
|
||
|
|
-
|
||
|
|
id: numerals-alternating-row-color
|
||
|
|
title: Alternating Row Color
|
||
|
|
description: Background color for the row when alternating rows (when enabled)
|
||
|
|
type: variable-themed-color
|
||
|
|
format: hex
|
||
|
|
opacity: false
|
||
|
|
default-light: '#'
|
||
|
|
default-dark: '#'
|
||
|
|
-
|
||
|
|
id: numerals-font
|
||
|
|
title: Numerals block font
|
||
|
|
description: Font used for Numerals block. Default is same as a code-block
|
||
|
|
type: variable-text
|
||
|
|
default: ''
|
||
|
|
-
|
||
|
|
id: numerals-size
|
||
|
|
title: Numerals block font size
|
||
|
|
description: Accepts an CSS font-size value. Default is same as a code-block
|
||
|
|
type: variable-text
|
||
|
|
default: ''
|
||
|
|
-
|
||
|
|
id: numerals-emitter-input-weight
|
||
|
|
title: Annotated Result Input Font Weight
|
||
|
|
description: Font weight for input which has result annotation (`=>`) (accepts CSS font-weight value). Default is `var(--normal-weight)`.
|
||
|
|
type: variable-text
|
||
|
|
default: ''
|
||
|
|
*/
|
||
|
|
|
||
|
|
/***********************************/
|
||
|
|
/******** Non-setting specific **/
|
||
|
|
|
||
|
|
body {
|
||
|
|
--numerals-comment: var(--text-faint);
|
||
|
|
--numerals-heading: var(--text-faint);
|
||
|
|
--numerals-background: var(--code-background);
|
||
|
|
--numerals-font: var(--font-monospace);
|
||
|
|
--numerals-size: var(--code-size);
|
||
|
|
--numerals-emitter-input-weight: var(--normal-weight);
|
||
|
|
--numerals-alternating-row-color: var(--background-modifier-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-syntax .numerals-input span {
|
||
|
|
padding: 0 2px;
|
||
|
|
}
|
||
|
|
.numerals-syntax .numerals-input {
|
||
|
|
overflow-wrap: break-word;
|
||
|
|
}
|
||
|
|
.numerals-block .numerals-input .math-parenthesis,
|
||
|
|
.numerals-block .numerals-input .math-paranthesis {
|
||
|
|
padding-left: 0px;
|
||
|
|
padding-right: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-block .numerals-input .math-number {
|
||
|
|
color: var(--code-value);
|
||
|
|
}
|
||
|
|
.numerals-block .numerals-input .math-string {
|
||
|
|
color: var(--code-string);
|
||
|
|
}
|
||
|
|
.numerals-block .numerals-input .math-boolean {
|
||
|
|
color: var(--code-value);
|
||
|
|
}
|
||
|
|
.numerals-block .numerals-input .math-undefined {
|
||
|
|
color: var(--code-keyword);
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.numerals-block .numerals-input .math-function {
|
||
|
|
color: var(--code-function);
|
||
|
|
}
|
||
|
|
.numerals-block .numerals-input .math-parameter {
|
||
|
|
color: var(--code-property);
|
||
|
|
}
|
||
|
|
.numerals-block .numerals-input .math-property {
|
||
|
|
color: var(--code-property);
|
||
|
|
}
|
||
|
|
.numerals-block .numerals-input .math-symbol {
|
||
|
|
color: var(--code-property);
|
||
|
|
}
|
||
|
|
.numerals-block .numerals-input .math-operator {
|
||
|
|
color: var(--code-operator);
|
||
|
|
}
|
||
|
|
.numerals-block .numerals-input .math-parenthesis,
|
||
|
|
.numerals-block .numerals-input .math-paranthesis {
|
||
|
|
color: var(--code-punctuation);
|
||
|
|
padding-left: 0px;
|
||
|
|
padding-right: 0px;
|
||
|
|
}
|
||
|
|
.numerals-block .numerals-input .math-separator {
|
||
|
|
color: var(--code-punctuation);
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-block {
|
||
|
|
background-color: var(--numerals-background);
|
||
|
|
font-family: var(--numerals-font);
|
||
|
|
font-size: var(--numerals-size);
|
||
|
|
padding: var(--size-4-4);
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-block .MathJax {
|
||
|
|
text-align: left !important;
|
||
|
|
margin-top: .5em !important;
|
||
|
|
margin-bottom: .5em !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-input.numerals-empty {
|
||
|
|
font-weight: bold;
|
||
|
|
color: var(--numerals-heading);
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-input .numerals-tex {
|
||
|
|
display:inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-input .numerals-inline-comment {
|
||
|
|
display: inline-block;
|
||
|
|
padding-left: 1em;
|
||
|
|
color: var(--numerals-comment);
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-alt-row-color .numerals-line:nth-child(even){
|
||
|
|
background-color: var(--numerals-alternating-row-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-alt-row-color .numerals-line .numerals-input{
|
||
|
|
padding-left: var(--size-2-2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-alt-row-color .numerals-line .numerals-result {
|
||
|
|
padding-right: var(--size-2-2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-error-name {
|
||
|
|
color:var(--color-red);
|
||
|
|
padding-right: var(--size-4-2);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**********************************/
|
||
|
|
/* ** Right-aligned Style ** */
|
||
|
|
|
||
|
|
/* TODO Switch to a diffent display layout so that result can be centered */
|
||
|
|
|
||
|
|
.numerals-answer-right .numerals-line {
|
||
|
|
line-height: var(--line-height-tight);
|
||
|
|
clear: both;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-answer-right .numerals-input {
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-answer-right .numerals-result {
|
||
|
|
float: right;
|
||
|
|
color: var(--text-muted);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**********************************/
|
||
|
|
/* ** Two Panes Style ** */
|
||
|
|
/* this leads to filling all the way to the bottom of the container. probably bigger than desired */
|
||
|
|
.numerals-panes .numerals-line {
|
||
|
|
line-height: var(--line-height-tight);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-panes .numerals-line {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-panes .numerals-input {
|
||
|
|
width:75%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-panes .numerals-result {
|
||
|
|
color: var(--text-muted);
|
||
|
|
background-color: var(--background-modifier-hover);
|
||
|
|
width: 25%;
|
||
|
|
text-align: left;
|
||
|
|
padding-left: var(--size-2-2);
|
||
|
|
border-left: 1px solid var(--background-modifier-border-focus);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* .numerals-panes .MathJax {
|
||
|
|
float:left;
|
||
|
|
} */
|
||
|
|
|
||
|
|
|
||
|
|
/**********************************/
|
||
|
|
/* ** Result on following line ** */
|
||
|
|
|
||
|
|
.numerals-answer-below .numerals-line {
|
||
|
|
line-height: var(--line-height-tight);
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-answer-below .numerals-line .numerals-result,
|
||
|
|
.numerals-answer-below .numerals-line .numerals-input {
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-answer-below .numerals-line .numerals-result {
|
||
|
|
color: var(--text-muted);
|
||
|
|
padding-left: var(--size-4-4);
|
||
|
|
padding-bottom: var(--size-2-1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-answer-below .numerals-line .numerals-input {
|
||
|
|
padding-top: var(--size-2-1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-answer-below .numerals-input.numerals-empty {
|
||
|
|
padding-top: var(--size-4-3);
|
||
|
|
padding-bottom: var(--size-4-1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-answer-below .numerals-result.numerals-empty {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Don't show text in .numerals-result that and aren't descendents of .numerals-emitter */
|
||
|
|
.numerals-emitters-present:not(.numerals-hide-non-emitters) .numerals-result:not(.numerals-emitter .numerals-result) {
|
||
|
|
color: var(--text-faint);
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-emitter .numerals-input {
|
||
|
|
font-weight: var(--numerals-emitter-input-weight)
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-emitters-present.numerals-hide-non-emitters .numerals-result:not(.numerals-emitter .numerals-result) {
|
||
|
|
color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/**********************************/
|
||
|
|
/* ** Inline Style ** */
|
||
|
|
/* TODO Switch to a diffent display layout so that result can be centered */
|
||
|
|
|
||
|
|
.numerals-answer-right .numerals-line {
|
||
|
|
line-height: var(--line-height-tight);
|
||
|
|
/* clear: both; */
|
||
|
|
/* overflow: auto; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-answer-inline .numerals-input {
|
||
|
|
display:inline-block;
|
||
|
|
padding-right: 20px;
|
||
|
|
/* float: left; */
|
||
|
|
}
|
||
|
|
|
||
|
|
.numerals-answer-inline .numerals-result {
|
||
|
|
/* float: right; */
|
||
|
|
color: var(--text-muted);
|
||
|
|
display:inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/***************************/
|
||
|
|
/* ** Suggestion Style ** */
|
||
|
|
|
||
|
|
/* .numerals-suggestion-icon {
|
||
|
|
--icon-size: 1em;
|
||
|
|
} */
|
||
|
|
.numerals-suggestion {
|
||
|
|
font-family: var(--numerals-font);
|
||
|
|
font-size: var(--numerals-size);
|
||
|
|
}
|