Update bluelib

src/components/ApprendimentoSistemiArtificiali/Styles.less

@@ -0,0 +1,5 @@
+@import "../../styles/constants.less";
+
+.tick {
+  color: @cyan;
+}

src/components/Elements/Box.js

@@ -1,25 +0,0 @@
-import style from "./Box.less";
-
-export const BoxColors = Object.freeze({
-    RED: style.red,
-    ORANGE: style.orange,
-    YELLOW: style.yellow,
-    LIME: style.lime,
-    CYAN: style.cyan,
-    BLUE: style.blue,
-    MAGENTA: style.magenta,
-    DEFAULT: style.default
-})
-
-export default function (props) {
-    let color = BoxColors.DEFAULT;
-    if(props.color) {
-        color = props.color;
-    }
-
-    return (
-        <div class={style.box + " " + color}>
-            {props.children}
-        </div>
-    );
-}

src/components/Elements/Box.less

@@ -1,49 +0,0 @@
-@import "../../styles/constants.less";
-
-.box {
-  padding: 8px;
-  border-radius: 4px;
-  margin: 4px;
-  height: calc(100% - 8px);
-  min-width: 256px;
-}
-
-.default {
-  background-color: fade(@fg, 5%);
-  color: @fg;
-}
-
-.red {
-  background-color: fade(@red, 5%);
-  color: @red;
-}
-
-.orange {
-  background-color: fade(@orange, 5%);
-  color: @orange;
-}
-
-.yellow {
-  background-color: fade(@yellow, 5%);
-  color: @yellow;
-}
-
-.lime {
-  background-color: fade(@lime, 5%);
-  color: @lime;
-}
-
-.cyan {
-  background-color: fade(@cyan, 5%);
-  color: @cyan;
-}
-
-.blue {
-  background-color: fade(@blue, 5%);
-  color: @blue;
-}
-
-.magenta {
-  background-color: fade(@magenta, 5%);
-  color: @magenta;
-}

src/components/Elements/Example.js

@@ -1,10 +0,0 @@
-import style from "./Example.less";
-import {Component} from "preact";
-
-export default function(props) {
-    return (
-        <div class={style.example}>
-            {props.children}
-        </div>
-    );
-}

src/components/Elements/Example.less

@@ -1,31 +0,0 @@
-@import "../../styles/constants.less";
-
-@eplus: fade(@example, 5%);
-@eplusplus: fade(@example, 10%);
-
-.example {
-  color: @example;
-  background-color: @eplus;
-  padding: 4px;
-  border-radius: 4px;
-  margin: 4px 0;
-
-  table {
-    border-spacing: 0;
-    border: 2px solid @eplusplus;
-    background-color: @eplus;
-    border-collapse: collapse;
-
-    thead, tbody {
-      th, td {
-        padding: 4px;
-        border: 1px solid @eplusplus;
-      }
-    }
-
-    thead {
-      background-color: @eplusplus;
-      color: @accent;
-    }
-  }
-}

src/components/Elements/Image.js

@@ -1,5 +0,0 @@
-export default function(props) {
-    return (
-        <a href={props.src} title={props.alt} target={"_blank"}><img src={props.src} alt={props.alt}/></a>
-    )
-}

src/components/Elements/Link.js

@@ -1,5 +0,0 @@
-export default function (props) {
-    return (
-        <a href={props.href}>{props.children}</a>
-    );
-}

src/components/Elements/Panel.js

@@ -1,15 +0,0 @@
-import style from "./Panel.less";
-import Box from "./Box";
-
-export default function(props) {
-	return (
-		<Box color={props.color}>
-			<h3 class={style.title}>
-				{props.title}
-			</h3>
-			<div class={style.contents}>
-				{props.children}
-			</div>
-		</Box>
-	);
-}

src/components/Elements/Panel.less

@@ -1,10 +0,0 @@
-@import "../../styles/constants.less";
-
-.title {
-    font-family: @title;
-
-}
-
-.contents {
-    font-family: @text;
-}

src/components/Elements/Section.js

@@ -1,15 +0,0 @@
-import Split from "../Layout/Split";
-import {Fragment} from "preact";
-
-export default function (props) {
-    return (
-        <Fragment>
-            <h2>
-                {props.title}
-            </h2>
-            <Split>
-                {props.children}
-            </Split>
-        </Fragment>
-    );
-}

src/components/Elements/TablePanel.js

@@ -1,9 +0,0 @@
-import style from "./TablePanel.less";
-
-export default function (props) {
-    return (
-        <table class={style.tablepanel}>
-            {props.children}
-        </table>
-    );
-}

src/components/Elements/TablePanel.less

@@ -1,6 +0,0 @@
-@import "../../styles/constants.less";
-
-.tablepanel {
-  margin: 4px;
-  width: calc(100% - 8px);
-}

src/components/Elements/Timer.js

@@ -1,97 +0,0 @@
-import {Component} from 'preact'
-import style from "./Timer.less"
-
-
-export default class Timer extends Component {
-    constructor() {
-        super();
-        this.state = {
-            "now": Date.now()
-        };
-        this.timer = null;
-    }
-
-    componentDidMount() {
-        this.timer = setInterval(() => {
-            this.setState({"now": Date.now()})
-        }, 1000)
-    }
-
-    componentWillUnmount() {
-        if(this.timer !== null) {
-            clearInterval(this.timer)
-        }
-    }
-
-    render() {
-        let dateTo = "Unknown date";
-        let className = style.timer;
-
-        let parts = {
-            milliseconds: "?",
-            seconds: "?",
-            minutes: "?",
-            hours: "?",
-            days: "?",
-        };
-
-        if(this.props.to) {
-            dateTo = new Date(this.props.to);
-            let timeLeft = dateTo - this.state.now;
-
-            if(timeLeft > 0) {
-                parts = {
-                    milliseconds: timeLeft % 1000,
-                    seconds: Math.floor(timeLeft / 1000) % 60,
-                    minutes: Math.floor(timeLeft / 60000) % 60,
-                    hours: Math.floor(timeLeft / 3600000) % 24,
-                    days: Math.floor(timeLeft / 86400000),
-                };
-            }
-
-            else {
-                parts = {
-                    milliseconds: 0,
-                    seconds: 0,
-                    minutes: 0,
-                    hours: 0,
-                    days: 0,
-                };
-
-                className += " " + style.expired;
-            }
-        }
-        else {
-            className += " " + style.unknown;
-        }
-
-        return (
-            <div class={className} title={dateTo}>
-                <div class={style.days + " " + style.count}>
-                    {parts.days}
-                </div>
-                <div className={style.days + " " + style.text}>
-                    giorni
-                </div>
-                <div class={style.hours + " " + style.count}>
-                    {parts.hours}
-                </div>
-                <div className={style.hours + " " + style.text}>
-                    ore
-                </div>
-                <div class={style.minutes + " " + style.count}>
-                    {parts.minutes}
-                </div>
-                <div className={style.minutes + " " + style.text}>
-                    minuti
-                </div>
-                <div class={style.seconds + " " + style.count}>
-                    {parts.seconds}
-                </div>
-                <div class={style.seconds + " " + style.text}>
-                    secondi
-                </div>
-            </div>
-        )
-    }
-}

src/components/Elements/Timer.less

@@ -1,59 +0,0 @@
-@import "../../styles/constants";
-
-.timer {
-    display: grid;
-    text-align: center;
-    align-items: center;
-    justify-content: center;
-    margin-top: 8px;
-    margin-bottom: 8px;
-    padding: 8px;
-    grid-template-columns: 80px 80px 80px 80px;
-    border: 2px solid @plusplus;
-    border-radius: 4px;
-}
-
-.days {
-    grid-column: 1;
-}
-
-.hours {
-    grid-column: 2;
-}
-
-.minutes {
-    grid-column: 3;
-}
-
-.seconds {
-    grid-column: 4;
-}
-
-.count {
-    grid-row: 1;
-    font-size: xx-large;
-    color: @accent;
-}
-
-.text {
-    grid-row: 2;
-    font-size: small;
-}
-
-.unknown {
-    color: @magenta;
-    border: 2px solid fade(@magenta, 20%);
-
-    .count {
-        color: @magenta;
-    }
-}
-
-.expired {
-    color: @red;
-    border: 2px solid fade(@red, 20%);
-
-    .count {
-        color: @red;
-    }
-}

src/components/Elements/Todo.js

@@ -1,10 +0,0 @@
-import style from "./Todo.less";
-
-export default function (props) {
-	if(process.env.NODE_ENV === "development") {
-		return <span class={style.todo}>{props.children}</span>;
-	}
-	else {
-		return null;
-	}
-}

src/components/Elements/Todo.less

@@ -1,9 +0,0 @@
-@import "../../styles/constants.less";
-
-.todo {
-    border: 1px yellow solid;
-    border-radius: 2px;
-    padding: 1px;
-    background-color: black;
-    color: yellow;
-}

src/components/Fisica/Minus.less

@@ -0,0 +1,5 @@
+@import "../../styles/constants";
+
+.minus {
+    color: @blue;
+}

src/components/Fisica/Plus.less

@@ -0,0 +1,5 @@
+@import "../../styles/constants";
+
+.plus {
+    color: @red;
+}

src/components/Footer.less

@@ -1,4 +1,4 @@
-@import "../../styles/constants.less";
+@import "../styles/constants.less";
 
 .footer {
   margin-top: 8px;

src/components/Layout/Split.js

@@ -1,28 +0,0 @@
-import style from "./Split.less";
-
-export default function (props) {
-    let children;
-
-    if(Array.isArray(props.children)) {
-        children = props.children.map(element => {
-            return (
-                <div class={style.splitchild}>
-                    {element}
-                </div>
-            );
-        });
-    }
-
-    else {
-        children = (
-            <div class={style.splitchild}>
-                {props.children}
-            </div>
-        );
-    }
-    return (
-        <div class={style.split}>
-            <div class={style.splitparent}>{children}</div>
-        </div>
-    );
-}

src/components/Layout/Split.less

@@ -1,16 +0,0 @@
-@import "../../styles/constants.less";
-
-.split {
-
-}
-
-.splitparent {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.splitchild {
-  flex-grow: 1;
-  flex-shrink: 0;
-  flex-basis: 0;
-}

src/components/OttimizzazioneLineare/Styles.less

@@ -1,4 +1,4 @@
-@import "../../../styles/constants.less";
+@import "../../styles/constants.less";
 
 .unbounded {
   color: @blue;

src/components/PageSpecific/ApprendimentoSistemiArtificiali/Styles.less

@@ -1,5 +0,0 @@
-@import "../../../styles/constants.less";
-
-.tick {
-  color: @cyan;
-}

src/components/PageSpecific/Fisica/Minus.less

@@ -1,5 +0,0 @@
-@import "../../../styles/constants";
-
-.minus {
-    color: @blue;
-}

src/components/PageSpecific/Fisica/Plus.less

@@ -1,5 +0,0 @@
-@import "../../../styles/constants";
-
-.plus {
-    color: @red;
-}

src/components/Rendering/BLatex.js

@@ -1,7 +0,0 @@
-import Latex, {LatexDisplay} from "./Latex";
-
-export default function (props) {
-    return (
-        <Latex inline={false} display={LatexDisplay.BLOCK}>{props.children}</Latex>
-    );
-}

src/components/Rendering/Code.js

@@ -1,11 +0,0 @@
-import SyntaxHighlighter from 'react-syntax-highlighter'
-import {monokai} from "react-syntax-highlighter/dist/cjs/styles/hljs";
-import stripTabs from "../../utils/stripTabs";
-
-export default function(props) {
-    return (
-        <SyntaxHighlighter language={props.language ? props.language : "plaintext"} style={monokai}>
-            {stripTabs(String(props.children))}
-        </SyntaxHighlighter>
-    )
-}

src/components/Rendering/ILatex.js

@@ -1,7 +0,0 @@
-import Latex, {LatexDisplay} from "./Latex";
-
-export default function (props) {
-    return (
-        <Latex inline={true} display={LatexDisplay.INLINE}>{props.children}</Latex>
-    );
-}

src/components/Rendering/Latex.js

@@ -1,59 +0,0 @@
-import style from './Latex.less';
-import {useContext} from "preact/hooks";
-import LatexRenderColor from "../../contexts/LatexRenderColor";
-import LatexDefaultInline from "../../contexts/LatexDefaultInline";
-import LatexDefaultDisplay from "../../contexts/LatexDefaultDisplay";
-
-export const LatexDisplay = Object.freeze({
-    INLINE: style.inline,
-    BLOCK: style.block,
-})
-
-export default function(props) {
-    // black, blue, brown, cyan, darkgray, gray, green, lightgray, lime, magenta, olive, orange, pink, purple, red, teal, violet, white, yellow
-    let renderColor = useContext(LatexRenderColor);
-    let defaultInline = useContext(LatexDefaultInline);
-    let defaultDisplay = useContext(LatexDefaultDisplay);
-
-    let inline;
-    if(props.inline === undefined) {
-        inline = defaultInline;
-    }
-    else {
-        inline = props.inline;
-    }
-
-    let display;
-    if(props.display === undefined) {
-        if(defaultDisplay === null) {
-            display = LatexDisplay.INLINE;
-        }
-        else {
-            display = defaultDisplay;
-        }
-    }
-    else {
-        display = props.display;
-    }
-
-    if(inline) {
-        let equation = `\\inline {\\color{${renderColor}} ${props.children} }`;
-        return (
-            <img src={`https://latex.codecogs.com/svg.latex?${equation}`}
-                 alt={props.children}
-                 title={props.children}
-                 class={style.latex + " " + display}
-            />
-        );
-    }
-    else {
-        let equation = `{\\color{${renderColor}} ${props.children} }`;
-        return (
-            <img src={`https://latex.codecogs.com/svg.latex?${equation}`}
-                 alt={props.children}
-                 title={props.children}
-                 class={style.latex + " " + display}
-            />
-        );
-    }
-}

src/components/Rendering/Latex.less

@@ -1,14 +0,0 @@
-@import "../../styles/constants.less";
-
-.latex {
-
-}
-
-.inline {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.block {
-    display: block;
-}

src/components/Rendering/Markdown.js

@@ -1,14 +0,0 @@
-import showdown from "showdown";
-import stripTabs from "../../utils/stripTabs";
-import style from "./Markdown.less";
-
-export default function(props) {
-    let converter = new showdown.Converter({
-        "tables": true,
-    });
-    converter.setFlavor("github");
-
-    let html = converter.makeHtml(stripTabs(String(props.children)));
-
-    return <div class={style.markdown} dangerouslySetInnerHTML={{__html: html}}/>;
-}

src/components/Rendering/Markdown.less

@@ -1,12 +0,0 @@
-@import "../../styles/constants.less";
-
-.markdown {
-  h1, h2, h3, h4, h5, h6 {
-    text-align: left;
-  }
-
-  h1 {
-    padding-bottom: 2px;
-    border-bottom: 1px solid @plusplusplus;
-  }
-}

src/components/Rendering/PLatex.js

@@ -1,9 +0,0 @@
-import BLatex from "./BLatex";
-
-export default function (props) {
-    return (
-        <p>
-            <BLatex>{props.children}</BLatex>
-        </p>
-    );
-}

src/contexts/LatexDefaultDisplay.js

@@ -1,3 +0,0 @@
-import {createContext} from "preact";
-
-export default createContext(null);

src/contexts/LatexDefaultInline.js

@@ -1,3 +0,0 @@
-import {createContext} from "preact";
-
-export default createContext(true);

src/contexts/LatexRenderColor.js

@@ -1,3 +0,0 @@
-import {createContext} from "preact";
-
-export default createContext("White");

src/index.js

@@ -37,13 +37,12 @@ import Home from './routes/Home';
 import Fisica from './routes/Fisica';
 import VlDiGeometria from './routes/VlDiGeometria';
 import MingwInstall from './routes/MingwInstall';
-import Footer from './components/Layout/Footer';
+import Footer from './components/Footer';
 import Statistica from './routes/Statistica';
 import OttimizzazioneLineare from "./routes/OttimizzazioneLineare";
 import BasiDiDati from './routes/BasiDiDati';
 import CalcoloNumerico from './routes/CalcoloNumerico';
 import ApprendimentoSistemiArtificiali from "./routes/ApprendimentoSistemiArtificiali";
-import LatexRenderColor from "./contexts/LatexRenderColor";
 import NetLogo from "./routes/NetLogo";
 import AlgoritmiEStruttureDati from "./routes/AlgoritmiEStruttureDati";
 
@@ -51,23 +50,21 @@ import AlgoritmiEStruttureDati from "./routes/AlgoritmiEStruttureDati";
 export default function(props) {
 	return (
 		<div id="app">
-			<LatexRenderColor.Provider value={"White"}>
+			<h1><a href="/">Appuntiweb</a> <small>di <a href="https://steffo.eu/">Steffo</a></small></h1>
-				<h1><a href="/">Appuntiweb</a> <small>di <a href="https://steffo.eu/">Steffo</a></small></h1>
+			<Router history={createHashHistory()}>
-				<Router history={createHashHistory()}>
+				<Home path="/"/>
-					<Home path="/"/>
+				<Fisica path="/fisica"/>
-					<Fisica path="/fisica"/>
+				<VlDiGeometria path="/vldigeometria"/>
-					<VlDiGeometria path="/vldigeometria"/>
+				<MingwInstall path="/mingwinstall"/>
-					<MingwInstall path="/mingwinstall"/>
+				<Statistica path="/statistica"/>
-					<Statistica path="/statistica"/>
+				<OttimizzazioneLineare path="/ottimizzazionelineare"/>
-					<OttimizzazioneLineare path="/ottimizzazionelineare"/>
+				<BasiDiDati path="/basididati"/>
-					<BasiDiDati path="/basididati"/>
+				<CalcoloNumerico path="/calcolonumerico"/>
-					<CalcoloNumerico path="/calcolonumerico"/>
+				<ApprendimentoSistemiArtificiali path="/apprendimento"/>
-					<ApprendimentoSistemiArtificiali path="/apprendimento"/>
+				<NetLogo path="/apprendimento/netlogo"/>
-					<NetLogo path="/apprendimento/netlogo"/>
+				<AlgoritmiEStruttureDati path="/algoritmiestrutturedati"/>
-					<AlgoritmiEStruttureDati path="/algoritmiestrutturedati"/>
+			</Router>
-				</Router>
+			<Footer/>
-				<Footer/>
-			</LatexRenderColor.Provider>
 		</div>
 	);
 }

src/index.less

@@ -1,154 +1,2 @@
 @import "styles/constants.less";
 
-* {
-    box-sizing: border-box;
-}
-
-body {
-    background-color: @bg;
-    color: @fg;
-    font-family: @sans;
-}
-
-h1, h2, h3, h4, h5, h6 {
-    margin-top: 4px;
-    margin-bottom: 4px;
-    color: @accent;
-    font-family: @title;
-    font-weight: normal;
-    text-align: center;
-}
-
-// By default h1 are as large as h2
-h1 {
-    font-size: xx-large;
-}
-
-a {
-    color: @link;
-    text-decoration: none;
-
-    &:hover {
-        color: @linkhover;
-    }
-
-    &:active {
-        color: @linkactive;
-    }
-}
-
-img, iframe {
-    max-width: 100%;
-    max-height: 300px;
-    border-radius: 4px;
-}
-
-pre, code {
-    font-family: @mono;
-    font-size: 14px;
-}
-
-blockquote {
-    color: @fg;
-    border-left: 3px solid @plusplusplusplus;
-    background-color: @plus;
-    padding: 4px 4px 4px 8px;
-    margin: 8px 0;
-}
-
-input[type="text"], input[type="password"] {
-    color: @fg;
-    background-color: @bg;
-    border: 1px solid @plusplus;
-    border-radius: 4px;
-    padding: 4px;
-    font-size: medium;
-
-    &:disabled, &.disabled {
-        color: @disabledfg;
-        background-color: @disabledbg;
-        border-style: dotted;
-        cursor: not-allowed;
-    }
-}
-
-button {
-    color: @fg;
-    background-color: @bg;
-    border: 1px solid @plusplus;
-    border-radius: 4px;
-    padding: 4px;
-    font-size: medium;
-
-    &:hover, &.hover {
-        background-color: @plusplus;
-        border: 1px solid @fg;
-        color: @fg;
-    }
-
-    &:active, &.active {
-        background-color: fade(@accent, 20%);
-        border: 1px solid @accent;
-        color: @accent;
-    }
-
-    &:disabled, &.disabled {
-        color: @disabledfg;
-        background-color: @disabledbg;
-        border-style: dotted;
-        cursor: not-allowed;
-    }
-}
-
-hr {
-    border: 1px solid @plusplusplusplus;
-    margin-top: 24px;
-    margin-bottom: 24px;
-}
-
-table {
-    border-spacing: 0;
-    border: 2px solid @plusplus;
-    background-color: @plus;
-    border-collapse: collapse;
-
-    thead, tbody {
-        th, td {
-            padding: 4px;
-            border: 1px solid @plusplus;
-        }
-    }
-
-    thead {
-        background-color: @plusplus;
-        color: @accent;
-    }
-}
-
-li {
-    margin: 10px 0;
-}
-
-p:first-child {
-    margin-top: 0;
-}
-
-p:last-child {
-    margin-bottom: 0;
-}
-
-b {
-    color: @accent;
-}
-
-abbr[title] {
-    cursor: help;
-}
-
-aside {
-    margin: 4px 0;
-    padding: 4px;
-    font-size: smaller;
-    background-color: @plus;
-    border-radius: 4px;
-}

src/routes/ApprendimentoSistemiArtificiali.js

@@ -7,7 +7,7 @@ import ILatex from "../components/Rendering/ILatex";
 import TablePanel from "../components/Elements/TablePanel";
 import BLatex from "../components/Rendering/BLatex";
 import PLatex from "../components/Rendering/PLatex";
-import Tick from "../components/PageSpecific/ApprendimentoSistemiArtificiali/Tick";
+import Tick from "../components/ApprendimentoSistemiArtificiali/Tick";
 
 const r = String.raw;
 

src/routes/Fisica.js

@@ -2,8 +2,8 @@ import { Component } from 'preact';
 import Latex, {LatexDisplay} from '../components/Rendering/Latex';
 import Panel from '../components/Elements/Panel';
 import Section from "../components/Elements/Section";
-import Plus from '../components/PageSpecific/Fisica/Plus';
+import Plus from '../components/Fisica/Plus';
-import Minus from '../components/PageSpecific/Fisica/Minus';
+import Minus from '../components/Fisica/Minus';
 import Todo from "../components/Elements/Todo";
 import LatexDefaultInline from "../contexts/LatexDefaultInline";
 import LatexDefaultDisplay from "../contexts/LatexDefaultDisplay";

src/routes/OttimizzazioneLineare.js

@@ -4,14 +4,14 @@ import Panel from "../components/Elements/Panel";
 import Example from "../components/Elements/Example";
 import Todo from "../components/Elements/Todo";
 import Timer from "../components/Elements/Timer";
-import Empty from "../components/PageSpecific/OttimizzazioneLineare/Empty";
+import Empty from "../components/OttimizzazioneLineare/Empty";
-import Unbounded from "../components/PageSpecific/OttimizzazioneLineare/Unbounded";
+import Unbounded from "../components/OttimizzazioneLineare/Unbounded";
-import Min from "../components/PageSpecific/OttimizzazioneLineare/Min";
+import Min from "../components/OttimizzazioneLineare/Min";
-import Max from "../components/PageSpecific/OttimizzazioneLineare/Max";
+import Max from "../components/OttimizzazioneLineare/Max";
 import PLatex from "../components/Rendering/PLatex";
 import LatexDefaultInline from "../contexts/LatexDefaultInline";
 import TablePanel from "../components/Elements/TablePanel";
-import Finite from "../components/PageSpecific/OttimizzazioneLineare/Finite";
+import Finite from "../components/OttimizzazioneLineare/Finite";
 
 const r = String.raw;
 

src/routes/Statistica.js

@@ -2,8 +2,8 @@ import Latex, {LatexDisplay} from '../components/Rendering/Latex';
 import Panel from '../components/Elements/Panel';
 import Section from "../components/Elements/Section";
 import Example from "../components/Elements/Example";
-import Plus from "../components/PageSpecific/Fisica/Plus";
+import Plus from "../components/Fisica/Plus";
-import Minus from "../components/PageSpecific/Fisica/Minus";
+import Minus from "../components/Fisica/Minus";
 import LatexDefaultInline from "../contexts/LatexDefaultInline";
 import LatexDefaultDisplay from "../contexts/LatexDefaultDisplay";
 

src/styles/override-easymde.less

@@ -1,121 +0,0 @@
-@import "constants.less";
-
-.CodeMirror {
-    font-family: "Consolas", monospace !important;
-    background-color: @bg !important;
-    color: @fg !important;
-    border-top: 0 !important;
-    border-bottom: 0 !important;
-    border-left: 1px solid @bg-lighter !important;
-    border-right: 1px solid @bg-lighter !important;
-    border-radius: 0 !important;
-    caret-color: white;
-
-    .cm-link {
-        color: @cyan !important;
-    }
-
-    .cm-url {
-        color: @link !important;
-    }
-
-    .cm-tag {
-        color: @magenta !important;
-    }
-
-    .cm-strong {
-        color: @yellow !important;
-    }
-
-    .cm-em {
-        color: @orange !important;
-    }
-
-    .cm-quote {
-        color: @lime !important;
-    }
-
-    .cm-comment {
-        color: lightgray !important;
-    }
-
-    .cm-header {
-        color: @accent !important;
-    }
-
-    .CodeMirror-cursor {
-        border-left: 1px solid @fg !important;
-    }
-}
-.editor-toolbar, .editor-statusbar {
-    background-color: @bg-light !important;
-    color: @fg !important;
-    opacity: 1 !important;
-
-    a {
-        color: @fg !important;
-        border: 0 !important;
-
-        &:hover {
-            background-color: @bg-lighter !important;
-            color: lighten(@fg, 25%) !important;
-        }
-
-        &.active {
-            background-color: fade(@fg, 30%) !important;
-            color: white !important;
-
-            &:hover {
-                background-color: @bg-lighter !important;
-                color: lighten(@fg, 25%) !important;
-            }
-        }
-    }
-
-    .fas, .far, .fab {
-        color: @fg !important;
-
-        &:hover {
-            color: @fg !important;
-        }
-
-        &:active {
-            color: white !important;
-        }
-    }
-}
-
-.editor-toolbar {
-    border-top: 1px solid @bg-lighter !important;
-    border-left: 1px solid @bg-lighter !important;
-    border-right: 1px solid @bg-lighter !important;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-
-    button {
-        color: @fg;
-
-        &:hover {
-            background-color: @bg-lighter;
-            border: none;
-        }
-
-        &:active, &.active {
-            background-color: @bg-lighter;
-            border: none;
-            color: @accent;
-        }
-    }
-
-    i.separator {
-        border-color: @bg-lighter;
-    }
-}
-
-.editor-statusbar {
-    border-bottom: 1px solid @bg-lighter !important;
-    border-left: 1px solid @bg-lighter !important;
-    border-right: 1px solid @bg-lighter !important;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-}