From 68eeff6c83ec2db7fef3a611663259dff41d80e1 Mon Sep 17 00:00:00 2001 From: Hagen Wierstorf Date: Thu, 8 Dec 2022 15:22:36 +0100 Subject: [PATCH 1/4] Polish theme colors --- .../static/css/audeering.css | 240 ++++++++++-------- 1 file changed, 134 insertions(+), 106 deletions(-) diff --git a/sphinx_audeering_theme/static/css/audeering.css b/sphinx_audeering_theme/static/css/audeering.css index 9618e31..1ed719d 100644 --- a/sphinx_audeering_theme/static/css/audeering.css +++ b/sphinx_audeering_theme/static/css/audeering.css @@ -8,6 +8,7 @@ --light-grey: #F6F6F6; /* UI CANVAS GREY */ --grey: #DCDCDC; /* LIGHT GREY */ --dark-grey: #7D8181; /* UI INACTIVE GREY */ + --purple: #AF67DF; /* Colors not used */ /* --darker-grey: #555A5A; 8? /* --grey3: #B9BEBE; /* UI HIGH GREY */ @@ -165,6 +166,80 @@ a:hover { background: var(--red); } +/***** TABLES ************************************************************/ +.wy-table-odd td, +.wy-table-striped tr:nth-child(2n-1) td, +.rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td { + /* Background color of every second table row */ + background-color: var(--light-grey); +} +.wy-table-bordered-all, +.rst-content table.docutils { + border: 1px solid var(--grey); +} +.wy-table thead th, +.rst-content table.docutils thead th, +.rst-content table.field-list thead th { + border-bottom: solid 2px var(--grey); +} +.rst-content table.docutils th { + border-color: var(--grey); +} +.wy-table-bordered-all td, +.rst-content table.docutils td { + /* Color of table border */ + border-bottom: 1px solid var(--grey); + border-left: 1px solid var(--grey); +} +.wy-table-responsive thead th { + /* Fix border lines in table headers */ + border: solid 1px var(--grey); + border-bottom: solid 2px var(--grey); +} +.wy-table-responsive tbody tr th.stub { + /* Fix borders for row headers */ + border-right: solid 2px var(--grey); + border-bottom: solid 1px var(--grey); +} +.wy-table-responsive thead tr th.stub { + /* Fix borders for row headers */ + border-right: solid 2px var(--grey); +} +/* Allow for line breaks in Tables. + * See: https://stackoverflow.com/a/40650120 */ +.wy-table-responsive table td { + white-space: normal; +} +/* Fix vertical placement in tables */ +.wy-table-responsive table td ol.arabic { + margin-bottom: 12px; + margin-top: 12px; +} +/* Fix margin in table cells */ +.wy-table td p:last-child, +.rst-content table.docutils td p:last-child, +.rst-content table.field-list td p:last-child { + margin-bottom: 0 !important; +} +/* Fix table headers margin */ +.wy-table-responsive thead th p { + margin-bottom: 0 !important; +} +/* Fix table row headers margin */ +.wy-table-responsive tbody tr th p { + margin-bottom: 0 !important; +} + +/***** FIGURE AND TABLE CAPTIONS *****************************************/ +.wy-table caption, .rst-content table.docutils caption, +.rst-content table.field-list caption, .rst-content div.figure p.caption { + font-style: italic; + font-size: 100%; + font-weight: 100; + font-family: "Lato","proxima-nova","Helvetica Neue",Arial,sans-serif; + color: var(--black); +} + /****** CODE BLOCKS ******************************************************/ .rst-content .highlight { background: var(--light-grey); @@ -203,58 +278,85 @@ content .viewcode-back { border: none; background-color: transparent; } -/* Function/Class definition names */ -.rst-content dl:not(.docutils) .descname, +/* ============================================ */ +/* API Function/Class */ +/* ============================================ */ +/* */ +/* -------------------------------------------- */ +/* API Function/Class header line */ +/* -------------------------------------------- */ +/* */ +/* class module.Class(arg, *, kwarg=None) */ +/* */ +.rst-content dl:not(.docutils) dt { + color: var(--black); + border: none; + background: none; +} +/* class module.Class(arg, *, kwarg=None) */ +/* ^ */ +.rst-content dl:not(.docutils) .default_value { + color: var(--dark-grey); +} +/* class module.Class(arg, *, kwarg=None) */ +/* ^ */ .rst-content dl:not(.docutils) .descclassname { color: var(--black); + font-size: 100%; + font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",Courier,monospace; +} +/* class module.Class(arg, *, kwarg=None) */ +/* ^ */ +.rst-content dl:not(.docutils) .descname { + color: var(--purple); + font-size: 1.2em; font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",Courier,monospace; } +/* class module.Class(arg, *, kwarg=None) */ +/* ^ ^ ^ */ dl.class dt em, dl.function dt em, dl.method dt em, dl.property dt em { - font-style: normal; -} -.rst-content dl:not(.docutils) dt { - color: var(--red); - border-left: solid 3px var(--red); - border-top: none; - background: var(--light-grey); + font-style: italic; } +/* -------------------------------------------- */ +/* API Function/Class body */ +/* -------------------------------------------- */ +/* */ +/* "Parameters", "Returns", "Raises", entries */ .rst-content dl:not(.docutils) dl dt { color: var(--black); - border-left: solid 3px var(--grey); - border-top: none; - background: var(--light-grey); + border: none; + background: none; } - -/* Remove bullet points from parameter lists */ +/* Remove bullet points from "Parameters" lists */ .rst-content .section dl.field-list.simple ul li { list-style: none; margin-left: 24px; - /* Don't indent first line of text, see */ + /* Don't indent first line of text, see */ /* https://gitlab.audeering.com/project/altavista-cc/tests/-/issues/19 */ text-indent: -24px; } -/* Make heading of example section look like other sections */ -.rst-content dl.class p.rubric, -.rst-content dl.function p.rubric, -.rst-content dl.method p.rubric { - font-weight: bold; +/* Enfore black colors for links inside body */ +.rst-content dl:not(.docutils) dl dt a.reference { color: var(--black); - border-left: solid 3px var(--grey); - border-top: none; - background: var(--light-grey); - display: table; - padding: 3px 6px; - font-size: 90%; -} -/* Fix indention of example box */ -.rst-content dl.class div.highlight, -.rst-content dl.function div.highlight, -.rst-content dl.method div.highlight { - margin-left: 24px; } +/* "Methods, Properties, Attributes" table */ +/* NOTE: this is only relevant if autosummary */ +/* is used to include these tables */ +.rst-content table.autosummary { + border: none; + border-top: 1px solid var(--grey); + border-bottom: 1px solid var(--grey); +} +.rst-content table.docutils td { + border-left: none; +} +.rst-content table.autosummary:not(.field-list) tr:nth-child(2n-1) td { + background-color: var(--white); +} + /***** DOWNLOAD BOX FOR JUPYTER NOTEBOOKS ********************************/ .notebook { @@ -279,80 +381,6 @@ dl.property dt em { border-bottom: 3px solid var(--red); } -/***** TABLES ************************************************************/ -.wy-table-odd td, -.wy-table-striped tr:nth-child(2n-1) td, -.rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td { - /* Background color of every second table row */ - background-color: var(--light-grey); -} -.wy-table-bordered-all, -.rst-content table.docutils { - border: 1px solid var(--grey); -} -.wy-table thead th, -.rst-content table.docutils thead th, -.rst-content table.field-list thead th { - border-bottom: solid 2px var(--grey); -} -.rst-content table.docutils th { - border-color: var(--grey); -} -.wy-table-bordered-all td, -.rst-content table.docutils td { - /* Color of table border */ - border-bottom: 1px solid var(--grey); - border-left: 1px solid var(--grey); -} -.wy-table-responsive thead th { - /* Fix border lines in table headers */ - border: solid 1px var(--grey); - border-bottom: solid 2px var(--grey); -} -.wy-table-responsive tbody tr th.stub { - /* Fix borders for row headers */ - border-right: solid 2px var(--grey); - border-bottom: solid 1px var(--grey); -} -.wy-table-responsive thead tr th.stub { - /* Fix borders for row headers */ - border-right: solid 2px var(--grey); -} -/* Allow for line breaks in Tables. - * See: https://stackoverflow.com/a/40650120 */ -.wy-table-responsive table td { - white-space: normal; -} -/* Fix vertical placement in tables */ -.wy-table-responsive table td ol.arabic { - margin-bottom: 12px; - margin-top: 12px; -} -/* Fix margin in table cells */ -.wy-table td p:last-child, -.rst-content table.docutils td p:last-child, -.rst-content table.field-list td p:last-child { - margin-bottom: 0 !important; -} -/* Fix table headers margin */ -.wy-table-responsive thead th p { - margin-bottom: 0 !important; -} -/* Fix table row headers margin */ -.wy-table-responsive tbody tr th p { - margin-bottom: 0 !important; -} - -/***** FIGURE AND TABLE CAPTIONS *****************************************/ -.wy-table caption, .rst-content table.docutils caption, -.rst-content table.field-list caption, .rst-content div.figure p.caption { - font-style: italic; - font-size: 100%; - font-weight: 100; - font-family: "Lato","proxima-nova","Helvetica Neue",Arial,sans-serif; - color: var(--black); -} - /***** JUPYTER SPHINX ****************************************************/ /* Adjust appearance of jupyter-sphinx code cells */ /* !important prevents jupyter-sphinx from overwriting them */ From 588adfae7daf469a80b9972a139cf7023eb46065 Mon Sep 17 00:00:00 2001 From: Hagen Wierstorf Date: Thu, 8 Dec 2022 16:06:03 +0100 Subject: [PATCH 2/4] Fix border of normal tables --- sphinx_audeering_theme/static/css/audeering.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sphinx_audeering_theme/static/css/audeering.css b/sphinx_audeering_theme/static/css/audeering.css index 1ed719d..4f307f5 100644 --- a/sphinx_audeering_theme/static/css/audeering.css +++ b/sphinx_audeering_theme/static/css/audeering.css @@ -350,7 +350,7 @@ dl.property dt em { border-top: 1px solid var(--grey); border-bottom: 1px solid var(--grey); } -.rst-content table.docutils td { +.rst-content table.autosummary td { border-left: none; } .rst-content table.autosummary:not(.field-list) tr:nth-child(2n-1) td { From 326ad6a63b8e47e2fb2915d980a639f4517deb2a Mon Sep 17 00:00:00 2001 From: Hagen Wierstorf Date: Thu, 8 Dec 2022 16:34:55 +0100 Subject: [PATCH 3/4] Add new colors --- sphinx_audeering_theme/static/css/audeering.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/sphinx_audeering_theme/static/css/audeering.css b/sphinx_audeering_theme/static/css/audeering.css index 4f307f5..bb9a80c 100644 --- a/sphinx_audeering_theme/static/css/audeering.css +++ b/sphinx_audeering_theme/static/css/audeering.css @@ -9,6 +9,10 @@ --grey: #DCDCDC; /* LIGHT GREY */ --dark-grey: #7D8181; /* UI INACTIVE GREY */ --purple: #AF67DF; + --danger: #E94274; /* pink */ + --warning: #F0AA3A; /* orange */ + --success: #35E17A; /* green */ + --info: #32ADF2; /* blue */ /* Colors not used */ /* --darker-grey: #555A5A; 8? /* --grey3: #B9BEBE; /* UI HIGH GREY */ @@ -308,7 +312,7 @@ content .viewcode-back { /* class module.Class(arg, *, kwarg=None) */ /* ^ */ .rst-content dl:not(.docutils) .descname { - color: var(--purple); + color: var(--info); font-size: 1.2em; font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",Courier,monospace; } From fdddf6d4fa293b79024e1c8890274596f62d4031 Mon Sep 17 00:00:00 2001 From: Hagen Wierstorf Date: Fri, 16 Dec 2022 12:13:04 +0100 Subject: [PATCH 4/4] Improve comments --- .../static/css/audeering.css | 212 +++++++++++++----- 1 file changed, 152 insertions(+), 60 deletions(-) diff --git a/sphinx_audeering_theme/static/css/audeering.css b/sphinx_audeering_theme/static/css/audeering.css index bb9a80c..dc3449f 100644 --- a/sphinx_audeering_theme/static/css/audeering.css +++ b/sphinx_audeering_theme/static/css/audeering.css @@ -1,4 +1,6 @@ -/***** COLOR DEFINITION **************************************************/ +/* ===================================================================== */ +/* ===== COLOR DEFINITION ============================================== */ +/* ===================================================================== */ :root { --black: #3F4444; --white: #FFFFFF; @@ -21,41 +23,61 @@ } -/***** PAGE **************************************************************/ + +/* ===================================================================== */ +/* ===== PAGE ========================================================== */ +/* ===================================================================== */ + +/* Main text color + */ body { - /* Main text color */ color: var(--black); } + +/* Background color of whole page + */ .wy-body-for-nav { - /* Background color of whole page */ background: var(--white); } + +/* Background color of content part + */ .wy-nav-content { - /* background color of content part */ background: var(--white); } + +/* Ensure right part of scrren has same color as content + */ .wy-nav-content-wrap { - /* Ensure right part of scrren has same color as content */ background: none; } + +/* Decrease distance between paragraphs + */ .rst-content dl p, .rst-content dl table, .rst-content dl ul, .rst-content dl ol { - /* Decrease distance between paragraphs */ margin-bottom: 10px !important; } -/* Fix display of class properties in API */ -/* https://github.com/audeering/sphinx-audeering-theme/issues/57 */ + +/* Fix display of class properties in API + * https://github.com/audeering/sphinx-audeering-theme/issues/57 + */ .rst-content dl:not(.docutils) .property { display: revert; padding-right: 4px; } -/* Fix bottom margin of nested bullet points */ -/* https://github.com/audeering/sphinx-audeering-theme/pull/56 */ + +/* Fix bottom margin of nested bullet points + * https://github.com/audeering/sphinx-audeering-theme/pull/56 + */ .rst-content .section ol p, .rst-content .section ul p { margin-bottom: 0; } -/***** LINKS *************************************************************/ + +/* ===================================================================== */ +/* ===== LINKS ========================================================= */ +/* ===================================================================== */ a { color: var(--red); } @@ -70,7 +92,10 @@ a:hover { font: inherit !important; } -/***** SEARCH BAR ********************************************************/ + +/* ===================================================================== */ +/* ===== SEARCH BAR ==================================================== */ +/* ===================================================================== */ .wy-side-nav-search>a, .wy-side-nav-search .wy-dropdown>a { color: var(--white); } @@ -81,7 +106,10 @@ a:hover { border-color: var(--red); } -/***** SIDE BAR ***********************************************************/ + +/* ===================================================================== */ +/* ===== SIDE BAR ====================================================== */ +/* ===================================================================== */ .wy-nav-side { /* Background color of TOC menu */ background-color: var(--black); @@ -108,7 +136,10 @@ a:hover { color: var(--dark-grey); } -/***** ADMONITIONS (NOTES) ***********************************************/ + +/* ===================================================================== */ +/* ===== ADMONITIONS (NOTES) =========================================== */ +/* ===================================================================== */ .rst-content .admonition { background: var(--light-grey); } @@ -170,7 +201,10 @@ a:hover { background: var(--red); } -/***** TABLES ************************************************************/ + +/* ===================================================================== */ +/* ===== TABLES ======================================================== */ +/* ===================================================================== */ .wy-table-odd td, .wy-table-striped tr:nth-child(2n-1) td, .rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td { @@ -234,7 +268,10 @@ a:hover { margin-bottom: 0 !important; } -/***** FIGURE AND TABLE CAPTIONS *****************************************/ + +/* ===================================================================== */ +/* ===== FIGURE AND TABLE CAPTIONS ===================================== */ +/* ===================================================================== */ .wy-table caption, .rst-content table.docutils caption, .rst-content table.field-list caption, .rst-content div.figure p.caption { font-style: italic; @@ -244,7 +281,10 @@ a:hover { color: var(--black); } -/****** CODE BLOCKS ******************************************************/ + +/* ===================================================================== */ +/* ===== CODE BLOCKS =================================================== */ +/* ===================================================================== */ .rst-content .highlight { background: var(--light-grey); } @@ -282,73 +322,101 @@ content .viewcode-back { border: none; background-color: transparent; } -/* ============================================ */ -/* API Function/Class */ -/* ============================================ */ -/* */ -/* -------------------------------------------- */ -/* API Function/Class header line */ -/* -------------------------------------------- */ -/* */ -/* class module.Class(arg, *, kwarg=None) */ -/* */ + + +/* ===================================================================== */ +/* ===== API FUNCTION/CLASS ============================================ */ +/* ===================================================================== */ + +/* --------------------------------------------------------------------- */ +/* ----- API FUNCTION/CLASS SIGNATURE ---------------------------------- */ +/* --------------------------------------------------------------------- */ + +/* The following deals with the SIGNATURE + * of a class or function definition. + * In each case, + * an arrow beneath an example signature + * shows which part is affected + * by the CSS section. + * No arrow indicates the whole signature + * is affected. + */ + +/* class module.Class(arg, *, kwarg=None) + * + */ .rst-content dl:not(.docutils) dt { color: var(--black); border: none; background: none; } -/* class module.Class(arg, *, kwarg=None) */ -/* ^ */ + +/* class module.Class(arg, *, kwarg=None) + * ^ + */ .rst-content dl:not(.docutils) .default_value { color: var(--dark-grey); } -/* class module.Class(arg, *, kwarg=None) */ -/* ^ */ + +/* class module.Class(arg, *, kwarg=None) + * ^ + */ .rst-content dl:not(.docutils) .descclassname { color: var(--black); font-size: 100%; font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",Courier,monospace; } -/* class module.Class(arg, *, kwarg=None) */ -/* ^ */ + +/* class module.Class(arg, *, kwarg=None) + * ^ + */ .rst-content dl:not(.docutils) .descname { - color: var(--info); + color: var(--red); font-size: 1.2em; font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",Courier,monospace; } -/* class module.Class(arg, *, kwarg=None) */ -/* ^ ^ ^ */ + +/* class module.Class(arg, *, kwarg=None) + * ^ ^ ^ + */ dl.class dt em, dl.function dt em, dl.method dt em, dl.property dt em { font-style: italic; } -/* -------------------------------------------- */ -/* API Function/Class body */ -/* -------------------------------------------- */ -/* */ -/* "Parameters", "Returns", "Raises", entries */ + +/* --------------------------------------------------------------------- */ +/* ----- API FUNCTION/CLASS BODY --------------------------------------- */ +/* --------------------------------------------------------------------- */ + +/* The CSS settings in this section + * deal with the body + * of the class/function docstring. + */ + +/* PARAMETERS, RETURNS, RAISES entries + */ .rst-content dl:not(.docutils) dl dt { color: var(--black); border: none; background: none; } -/* Remove bullet points from "Parameters" lists */ + +/* Remove bullet points from PARAMETERS lists + */ .rst-content .section dl.field-list.simple ul li { list-style: none; margin-left: 24px; - /* Don't indent first line of text, see */ - /* https://gitlab.audeering.com/project/altavista-cc/tests/-/issues/19 */ + /* Don't indent first line of text, see + * https://gitlab.audeering.com/project/altavista-cc/tests/-/issues/19 + */ text-indent: -24px; } -/* Enfore black colors for links inside body */ -.rst-content dl:not(.docutils) dl dt a.reference { - color: var(--black); -} -/* "Methods, Properties, Attributes" table */ -/* NOTE: this is only relevant if autosummary */ -/* is used to include these tables */ + +/* Styling of METHODS, PROPERTIES, ATTRIBUTES table + * added by autosummary + */ .rst-content table.autosummary { border: none; border-top: 1px solid var(--grey); @@ -361,8 +429,17 @@ dl.property dt em { background-color: var(--white); } +/* RAISES entries + */ +.rst-content dl:not(.docutils) dd p a.reference { + color: var(--black); +} + + +/* ===================================================================== */ +/* ===== DOWNLOAD BOX FOR JUPYTER NOTEBOOKS ============================ */ +/* ===================================================================== */ -/***** DOWNLOAD BOX FOR JUPYTER NOTEBOOKS ********************************/ .notebook { background: var(--light-grey); } @@ -385,9 +462,14 @@ dl.property dt em { border-bottom: 3px solid var(--red); } -/***** JUPYTER SPHINX ****************************************************/ -/* Adjust appearance of jupyter-sphinx code cells */ -/* !important prevents jupyter-sphinx from overwriting them */ + +/* ===================================================================== */ +/* ===== JUPYTER SPHINX ================================================ */ +/* ===================================================================== */ + +/* Adjust appearance of jupyter-sphinx code cells + * !important prevents jupyter-sphinx from overwriting them + */ div.jupyter_container { -moz-box-shadow: none !important; -webkit-box-shadow: none !important; @@ -425,7 +507,9 @@ div.jupyter_container { .document .jupyter_container div[class^='highlight'] { padding: 0 !important; } -/* Some additional styling taken form the Jupyter notebook CSS */ + +/* Some additional styling taken form the Jupyter notebook CSS + */ div.text_html table { border: none !important; border-collapse: collapse !important; @@ -459,13 +543,21 @@ div.text_html tbody tr:hover { background: rgba(66, 165, 245, 0.2) !important; } -/***** COPY-BUTTON *******************************************************/ -/* Disable copy-button in nbsphinx */ + +/* ===================================================================== */ +/* ===== COPY-BUTTON =================================================== */ +/* ===================================================================== */ + +/* Disable copy-button in nbsphinx + */ .prompt a.copybtn { display: none !important; } -/***** FOOTER ************************************************************/ + +/* ===================================================================== */ +/* ===== FOOTER ======================================================== */ +/* ===================================================================== */ footer ul { overflow: hidden; margin-bottom: 10px;