From 471d3455fae9b52e6e2ed73f7467e4185ae20aff Mon Sep 17 00:00:00 2001 From: =?utf8?q?Vladim=C3=ADr=20Vondru=C5=A1?= Date: Tue, 12 Sep 2017 21:55:59 +0200 Subject: [PATCH] css: simplify code styles after docutils output has been fixed. --- css/m-components.css | 34 +++++------- css/m-dark.css | 2 +- css/m-light.css | 2 +- css/pygments-dark.css | 120 +++++++++++++++++++++--------------------- css/pygments-dark.py | 1 + 5 files changed, 76 insertions(+), 83 deletions(-) diff --git a/css/m-components.css b/css/m-components.css index a17336dd..42c4538d 100644 --- a/css/m-components.css +++ b/css/m-components.css @@ -895,17 +895,14 @@ figure.m-figure.m-fullwidth img { } /* Inflatable content */ -/* TODO: get rid of div.highlight and additional div for additional classes */ #m-container-inflatable > .m-row > [class*='m-col-'] > .m-note, #m-container-inflatable > .m-row > [class*='m-col-'] > .m-frame, #m-container-inflatable > .m-row > [class*='m-col-'] > .m-block, -#m-container-inflatable > .m-row > [class*='m-col-'] > div > pre, -#m-container-inflatable > .m-row > [class*='m-col-'] > div > div > pre, +#m-container-inflatable > .m-row > [class*='m-col-'] > pre.m-code, #m-container-inflatable > .m-row > [class*='m-col-'] section > .m-note, #m-container-inflatable > .m-row > [class*='m-col-'] section > .m-frame, #m-container-inflatable > .m-row > [class*='m-col-'] section > .m-block, -#m-container-inflatable > .m-row > [class*='m-col-'] section > div > pre, -#m-container-inflatable > .m-row > [class*='m-col-'] section > div > div > pre { +#m-container-inflatable > .m-row > [class*='m-col-'] section > pre.m-code { margin: 0 -1rem 1rem -1rem; } @@ -936,13 +933,11 @@ figure.m-figure.m-fullwidth img { #m-container-inflatable section:target > .m-note, #m-container-inflatable section:target > .m-frame, #m-container-inflatable section:target > .m-block, -#m-container-inflatable section:target > div > pre, -#m-container-inflatable section:target > div > div > pre +#m-container-inflatable section:target > pre.m-code, #m-container-inflatable section:target section > .m-note, #m-container-inflatable section:target section > .m-frame, #m-container-inflatable section:target section > .m-block, -#m-container-inflatable section:target section > div > pre, -#m-container-inflatable section:target section > div > div > pre { +#m-container-inflatable section:target section > pre.m-code { margin-left: -1.0rem; border-left-style: solid; border-left-width: 0.25rem; @@ -950,10 +945,8 @@ figure.m-figure.m-fullwidth img { border-bottom-left-radius: 0; padding-left: 0.75rem; } -#m-container-inflatable section:target > div > pre, -#m-container-inflatable section:target > div > div > pre, -#m-container-inflatable section:target section > div > pre, -#m-container-inflatable section:target section > div > div > pre { +#m-container-inflatable section:target > pre.m-code, +#m-container-inflatable section:target section > pre.m-code { border-color: var(--line-color); } #m-container-inflatable section:target > .m-note.m-default, @@ -986,8 +979,7 @@ figure.m-figure.m-fullwidth img { } /* Code block (uses Pygments CSS classes) */ -div.highlight pre span.hll { - background-color: var(--line-color); +pre.m-code span.hll { border-color: var(--line-color); margin-left: -1.0rem; margin-right: -1.0rem; @@ -995,13 +987,13 @@ div.highlight pre span.hll { border-left-width: 0.25rem; padding-left: 0.75rem; } -.m-inverted-highlight div.highlight pre { - color: var(--color-inverse-highlight); +pre.m-code.m-inverted { + color: var(--code-inverted-color); } -.m-inverted-highlight div.highlight pre > span { +pre.m-code.m-inverted > span { opacity: 0.3333; } -.m-inverted-highlight div.highlight pre > span.hll { +pre.m-code.m-inverted > span.hll { color: var(--color); opacity: 1; background-color: transparent; @@ -1016,8 +1008,8 @@ div.m-scroll, table.m-table, div.m-image, img.m-image, figure.m-figure, .m-imagegrid { margin-bottom: 1rem; } -p:last-child, ul:last-child, ol:last-child, dl:last-child, blockquote:last-child, hr:last-child, -div.highligt:last-child pre, /* TODO: get rid of div.highlight */ +p:last-child, ul:last-child, ol:last-child, dl:last-child, +blockquote:last-child, hr:last-child, pre:last-child, article:last-child, article section:last-child, .m-note:last-child, .m-frame:last-child, .m-block:last-child, table.m-table:last-child, img.m-image:last-child, div.m-image:last-child, diff --git a/css/m-dark.css b/css/m-dark.css index bde07327..e74d621f 100644 --- a/css/m-dark.css +++ b/css/m-dark.css @@ -20,13 +20,13 @@ /* Basics */ --background-color: #2f363f; --color: #dcdcdc; - --color-inverse-highlight: rgba(220, 220, 220, 0.33); --line-color: #405363; --link-color: #5b9dd9; --link-active-color: #a5c9ea; --mark-color: #2f83cc; --mark-background-color: #c7cf2f; --code-color: #e6e6e6; + --code-inverted-color: rgba(230, 230, 230, 0.33); --code-background-color: #34424d; /* Header */ diff --git a/css/m-light.css b/css/m-light.css index b66de2dd..03e0a896 100644 --- a/css/m-light.css +++ b/css/m-light.css @@ -18,13 +18,13 @@ /* Basics */ --background-color: #ffffff; --color: #000000; - --color-inverse-highlight: rgba(0, 0, 0, 0.33); --line-color: #f7e3db; --link-color: #ea7944; --link-active-color: #cb4b16; --mark-color: #4c93d3; --mark-background-color: #e6e69c; --code-color: #5b5b5b; + --code-inverted-color: rgba(91, 91, 91, 0.33); --code-background-color: #fbf0ec; /* Header */ diff --git a/css/pygments-dark.css b/css/pygments-dark.css index f7541d65..a6eb4def 100644 --- a/css/pygments-dark.css +++ b/css/pygments-dark.css @@ -1,60 +1,60 @@ -.highlight .hll { background-color: #ffffcc } -.highlight .c { color: #a5c9ea } /* Comment */ -.highlight .k { color: #ffffff; font-weight: bold } /* Keyword */ -.highlight .n { color: #dcdcdc } /* Name */ -.highlight .o { color: #aaaaaa } /* Operator */ -.highlight .p { color: #aaaaaa } /* Punctuation */ -.highlight .ch { color: #a5c9ea } /* Comment.Hashbang */ -.highlight .cm { color: #a5c9ea } /* Comment.Multiline */ -.highlight .cp { color: #3bd267 } /* Comment.Preproc */ -.highlight .cpf { color: #c7cf2f } /* Comment.PreprocFile */ -.highlight .c1 { color: #a5c9ea } /* Comment.Single */ -.highlight .cs { color: #a5c9ea } /* Comment.Special */ -.highlight .kc { color: #ffffff; font-weight: bold } /* Keyword.Constant */ -.highlight .kd { color: #ffffff; font-weight: bold } /* Keyword.Declaration */ -.highlight .kn { color: #ffffff; font-weight: bold } /* Keyword.Namespace */ -.highlight .kp { color: #ffffff; font-weight: bold } /* Keyword.Pseudo */ -.highlight .kr { color: #ffffff; font-weight: bold } /* Keyword.Reserved */ -.highlight .kt { color: #ffffff; font-weight: bold } /* Keyword.Type */ -.highlight .m { color: #c7cf2f } /* Literal.Number */ -.highlight .s { color: #e07f7c } /* Literal.String */ -.highlight .na { color: #dcdcdc } /* Name.Attribute */ -.highlight .nb { color: #ffffff; font-weight: bold } /* Name.Builtin */ -.highlight .nc { color: #dcdcdc } /* Name.Class */ -.highlight .no { color: #dcdcdc } /* Name.Constant */ -.highlight .nd { color: #dcdcdc } /* Name.Decorator */ -.highlight .ni { color: #dcdcdc } /* Name.Entity */ -.highlight .ne { color: #dcdcdc } /* Name.Exception */ -.highlight .nf { color: #dcdcdc } /* Name.Function */ -.highlight .nl { color: #dcdcdc } /* Name.Label */ -.highlight .nn { color: #dcdcdc } /* Name.Namespace */ -.highlight .nx { color: #dcdcdc } /* Name.Other */ -.highlight .py { color: #dcdcdc } /* Name.Property */ -.highlight .nt { color: #dcdcdc } /* Name.Tag */ -.highlight .nv { color: #c7cf2f } /* Name.Variable */ -.highlight .ow { color: #aaaaaa } /* Operator.Word */ -.highlight .mb { color: #c7cf2f } /* Literal.Number.Bin */ -.highlight .mf { color: #c7cf2f } /* Literal.Number.Float */ -.highlight .mh { color: #c7cf2f } /* Literal.Number.Hex */ -.highlight .mi { color: #c7cf2f } /* Literal.Number.Integer */ -.highlight .mo { color: #c7cf2f } /* Literal.Number.Oct */ -.highlight .sa { color: #e07f7c } /* Literal.String.Affix */ -.highlight .sb { color: #e07f7c } /* Literal.String.Backtick */ -.highlight .sc { color: #e07cdc } /* Literal.String.Char */ -.highlight .dl { color: #e07f7c } /* Literal.String.Delimiter */ -.highlight .sd { color: #e07f7c } /* Literal.String.Doc */ -.highlight .s2 { color: #e07f7c } /* Literal.String.Double */ -.highlight .se { color: #e07f7c } /* Literal.String.Escape */ -.highlight .sh { color: #e07f7c } /* Literal.String.Heredoc */ -.highlight .si { color: #e07f7c } /* Literal.String.Interpol */ -.highlight .sx { color: #e07f7c } /* Literal.String.Other */ -.highlight .sr { color: #e07f7c } /* Literal.String.Regex */ -.highlight .s1 { color: #e07f7c } /* Literal.String.Single */ -.highlight .ss { color: #e07f7c } /* Literal.String.Symbol */ -.highlight .bp { color: #ffffff; font-weight: bold } /* Name.Builtin.Pseudo */ -.highlight .fm { color: #dcdcdc } /* Name.Function.Magic */ -.highlight .vc { color: #c7cf2f } /* Name.Variable.Class */ -.highlight .vg { color: #c7cf2f } /* Name.Variable.Global */ -.highlight .vi { color: #c7cf2f } /* Name.Variable.Instance */ -.highlight .vm { color: #c7cf2f } /* Name.Variable.Magic */ -.highlight .il { color: #c7cf2f } /* Literal.Number.Integer.Long */ +.m-code .hll { background-color: #405363 } +.m-code .c { color: #a5c9ea } /* Comment */ +.m-code .k { color: #ffffff; font-weight: bold } /* Keyword */ +.m-code .n { color: #dcdcdc } /* Name */ +.m-code .o { color: #aaaaaa } /* Operator */ +.m-code .p { color: #aaaaaa } /* Punctuation */ +.m-code .ch { color: #a5c9ea } /* Comment.Hashbang */ +.m-code .cm { color: #a5c9ea } /* Comment.Multiline */ +.m-code .cp { color: #3bd267 } /* Comment.Preproc */ +.m-code .cpf { color: #c7cf2f } /* Comment.PreprocFile */ +.m-code .c1 { color: #a5c9ea } /* Comment.Single */ +.m-code .cs { color: #a5c9ea } /* Comment.Special */ +.m-code .kc { color: #ffffff; font-weight: bold } /* Keyword.Constant */ +.m-code .kd { color: #ffffff; font-weight: bold } /* Keyword.Declaration */ +.m-code .kn { color: #ffffff; font-weight: bold } /* Keyword.Namespace */ +.m-code .kp { color: #ffffff; font-weight: bold } /* Keyword.Pseudo */ +.m-code .kr { color: #ffffff; font-weight: bold } /* Keyword.Reserved */ +.m-code .kt { color: #ffffff; font-weight: bold } /* Keyword.Type */ +.m-code .m { color: #c7cf2f } /* Literal.Number */ +.m-code .s { color: #e07f7c } /* Literal.String */ +.m-code .na { color: #dcdcdc } /* Name.Attribute */ +.m-code .nb { color: #ffffff; font-weight: bold } /* Name.Builtin */ +.m-code .nc { color: #dcdcdc } /* Name.Class */ +.m-code .no { color: #dcdcdc } /* Name.Constant */ +.m-code .nd { color: #dcdcdc } /* Name.Decorator */ +.m-code .ni { color: #dcdcdc } /* Name.Entity */ +.m-code .ne { color: #dcdcdc } /* Name.Exception */ +.m-code .nf { color: #dcdcdc } /* Name.Function */ +.m-code .nl { color: #dcdcdc } /* Name.Label */ +.m-code .nn { color: #dcdcdc } /* Name.Namespace */ +.m-code .nx { color: #dcdcdc } /* Name.Other */ +.m-code .py { color: #dcdcdc } /* Name.Property */ +.m-code .nt { color: #dcdcdc } /* Name.Tag */ +.m-code .nv { color: #c7cf2f } /* Name.Variable */ +.m-code .ow { color: #aaaaaa } /* Operator.Word */ +.m-code .mb { color: #c7cf2f } /* Literal.Number.Bin */ +.m-code .mf { color: #c7cf2f } /* Literal.Number.Float */ +.m-code .mh { color: #c7cf2f } /* Literal.Number.Hex */ +.m-code .mi { color: #c7cf2f } /* Literal.Number.Integer */ +.m-code .mo { color: #c7cf2f } /* Literal.Number.Oct */ +.m-code .sa { color: #e07f7c } /* Literal.String.Affix */ +.m-code .sb { color: #e07f7c } /* Literal.String.Backtick */ +.m-code .sc { color: #e07cdc } /* Literal.String.Char */ +.m-code .dl { color: #e07f7c } /* Literal.String.Delimiter */ +.m-code .sd { color: #e07f7c } /* Literal.String.Doc */ +.m-code .s2 { color: #e07f7c } /* Literal.String.Double */ +.m-code .se { color: #e07f7c } /* Literal.String.Escape */ +.m-code .sh { color: #e07f7c } /* Literal.String.Heredoc */ +.m-code .si { color: #e07f7c } /* Literal.String.Interpol */ +.m-code .sx { color: #e07f7c } /* Literal.String.Other */ +.m-code .sr { color: #e07f7c } /* Literal.String.Regex */ +.m-code .s1 { color: #e07f7c } /* Literal.String.Single */ +.m-code .ss { color: #e07f7c } /* Literal.String.Symbol */ +.m-code .bp { color: #ffffff; font-weight: bold } /* Name.Builtin.Pseudo */ +.m-code .fm { color: #dcdcdc } /* Name.Function.Magic */ +.m-code .vc { color: #c7cf2f } /* Name.Variable.Class */ +.m-code .vg { color: #c7cf2f } /* Name.Variable.Global */ +.m-code .vi { color: #c7cf2f } /* Name.Variable.Instance */ +.m-code .vm { color: #c7cf2f } /* Name.Variable.Magic */ +.m-code .il { color: #c7cf2f } /* Literal.Number.Integer.Long */ diff --git a/css/pygments-dark.py b/css/pygments-dark.py index fe3321e8..42384902 100644 --- a/css/pygments-dark.py +++ b/css/pygments-dark.py @@ -6,6 +6,7 @@ from pygments.token import Keyword, Name, Comment, String, Error, \ class DarkStyle(Style): background_color = None + highlight_color = '#405363' default_style = "" styles = { -- 2.30.2