From dffc0cb2308461e317770e7b1332a364434cf638 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Thu, 30 Sep 2021 00:17:16 +0200 Subject: [PATCH] theme: simplify stylesheet for color variants #107 --- .../content/basics/customization/_index.en.md | 103 ----------------- layouts/404.html | 1 + layouts/partials/header.html | 1 + static/css/theme-blue.css | 103 ----------------- static/css/theme-green.css | 103 ----------------- static/css/theme-red.css | 103 ----------------- static/css/theme-relearn.css | 107 ------------------ static/css/theme.css | 4 - static/css/variant.css | 92 +++++++++++++++ 9 files changed, 94 insertions(+), 523 deletions(-) create mode 100644 static/css/variant.css diff --git a/exampleSite/content/basics/customization/_index.en.md b/exampleSite/content/basics/customization/_index.en.md index 50f57783b3..cf66503429 100644 --- a/exampleSite/content/basics/customization/_index.en.md +++ b/exampleSite/content/basics/customization/_index.en.md @@ -119,109 +119,6 @@ First, create a new CSS file in your local `static/css` folder prefixed by `them --MENU-VISITED-color: #33a1ff; /* Color of 'page visited' icons in menu */ --MENU-SECTION-HR-color: #20272b; /* Color of
separator in menu */ } - -body { - color: var(--MAIN-TEXT-color) !important; -} - -textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus { - border-color: none; - box-shadow: none; -} - -h2, h3, h4, h5, h6 { - color: var(--MAIN-TITLES-TEXT-color) !important; -} - -a { - color: var(--MAIN-LINK-color); -} - -.anchor { - color: var(--MAIN-ANCHOR-color); -} - -a:hover { - color: var(--MAIN-LINK-HOVER-color); -} - -#sidebar ul li.visited > a .read-icon { - color: var(--MENU-VISITED-color); -} - -#body a.highlight:after { - display: block; - content: ""; - height: 1px; - width: 0%; - -webkit-transition: width 0.5s ease; - -moz-transition: width 0.5s ease; - -ms-transition: width 0.5s ease; - transition: width 0.5s ease; - background-color: var(--MAIN-LINK-HOVER-color); -} - -#sidebar { - background-color: var(--MENU-SECTIONS-BG-color); -} - -#sidebar #header-wrapper { - background: var(--MENU-HEADER-BG-color); - color: var(--MENU-SEARCH-BOX-color); - border-color: var(--MENU-HEADER-BORDER-color); -} - -#sidebar .searchbox { - border-color: var(--MENU-SEARCH-BOX-color); - background: var(--MENU-SEARCH-BG-color); -} - -#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active { - background: var(--MENU-SECTIONS-ACTIVE-BG-color); -} - -#sidebar .searchbox * { - color: var(--MENU-SEARCH-BOX-ICONS-color); -} - -#sidebar a { - color: var(--MENU-SECTIONS-LINK-color); -} - -#sidebar a:hover { - color: var(--MENU-SECTIONS-LINK-HOVER-color); -} - -#sidebar ul li.active > a { - background: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color); - color: var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important; -} - -#sidebar hr { - border-color: var(--MENU-SECTION-HR-color); -} - -#body .tags a.tag-link { - background-color: var(--MENU-HEADER-BG-color); -} - -#body .tags a.tag-link:before { - border-right-color: var(--MENU-HEADER-BG-color); -} - -#homelinks { - background: var(--MENU-HEADER-BG-color); - background-color: var(--MENU-HEADER-BORDER-color); - border-bottom-color: var(--MENU-HEADER-BORDER-color); -} - -#homelinks a { - color: var(--MENU-HOME-LINK-color); -} - -#homelinks a:hover { - color: var(--MENU-HOME-LINK-HOVER-color); -} ``` Then, set the `themeVariant` value with the name of your custom theme file. That's it! diff --git a/layouts/404.html b/layouts/404.html index 23bfbdda54..fc2bf44ad7 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -22,6 +22,7 @@ {{- with .Site.Params.themeVariant }} + {{- end }} {{- range .Site.Params.custom_css }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 612219dbc7..a156aa4fe4 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -17,6 +17,7 @@ {{- with .Site.Params.themeVariant }} + {{- end }} {{- range .Site.Params.custom_css }} diff --git a/static/css/theme-blue.css b/static/css/theme-blue.css index 5a71ed7a87..95331ed42b 100644 --- a/static/css/theme-blue.css +++ b/static/css/theme-blue.css @@ -25,106 +25,3 @@ --MENU-VISITED-color: #33a1ff; /* Color of 'page visited' icons in menu */ --MENU-SECTION-HR-color: #20272b; /* Color of
separator in menu */ } - -body { - color: var(--MAIN-TEXT-color) !important; -} - -textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus { - border-color: none; - box-shadow: none; -} - -h2, h3, h4, h5, h6 { - color: var(--MAIN-TITLES-TEXT-color) !important; -} - -a { - color: var(--MAIN-LINK-color); -} - -.anchor { - color: var(--MAIN-ANCHOR-color); -} - -a:hover { - color: var(--MAIN-LINK-HOVER-color); -} - -#sidebar ul li.visited > a .read-icon { - color: var(--MENU-VISITED-color); -} - -#body a.highlight:after { - display: block; - content: ""; - height: 1px; - width: 0%; - -webkit-transition: width 0.5s ease; - -moz-transition: width 0.5s ease; - -ms-transition: width 0.5s ease; - transition: width 0.5s ease; - background-color: var(--MAIN-LINK-HOVER-color); -} - -#sidebar { - background-color: var(--MENU-SECTIONS-BG-color); -} - -#sidebar #header-wrapper { - background: var(--MENU-HEADER-BG-color); - color: var(--MENU-SEARCH-BOX-color); - border-color: var(--MENU-HEADER-BORDER-color); -} - -#sidebar .searchbox { - border-color: var(--MENU-SEARCH-BOX-color); - background: var(--MENU-SEARCH-BG-color); -} - -#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active { - background: var(--MENU-SECTIONS-ACTIVE-BG-color); -} - -#sidebar .searchbox * { - color: var(--MENU-SEARCH-BOX-ICONS-color); -} - -#sidebar a { - color: var(--MENU-SECTIONS-LINK-color); -} - -#sidebar a:hover { - color: var(--MENU-SECTIONS-LINK-HOVER-color); -} - -#sidebar ul li.active > a { - background: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color); - color: var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important; -} - -#sidebar hr { - border-color: var(--MENU-SECTION-HR-color); -} - -#body .tags a.tag-link { - background-color: var(--MENU-HEADER-BG-color); -} - -#body .tags a.tag-link:before { - border-right-color: var(--MENU-HEADER-BG-color); -} - -#homelinks { - background: var(--MENU-HEADER-BG-color); - background-color: var(--MENU-HEADER-BORDER-color); - border-bottom-color: var(--MENU-HEADER-BORDER-color); -} - -#homelinks a { - color: var(--MENU-HOME-LINK-color); -} - -#homelinks a:hover { - color: var(--MENU-HOME-LINK-HOVER-color); -} diff --git a/static/css/theme-green.css b/static/css/theme-green.css index 4a9a65787b..084932f71e 100644 --- a/static/css/theme-green.css +++ b/static/css/theme-green.css @@ -25,106 +25,3 @@ --MENU-VISITED-color: #599a3e; /* Color of 'page visited' icons in menu */ --MENU-SECTION-HR-color: #18211c; /* Color of
separator in menu */ } - -body { - color: var(--MAIN-TEXT-color) !important; -} - -textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus { - border-color: none; - box-shadow: none; -} - -h2, h3, h4, h5, h6 { - color: var(--MAIN-TITLES-TEXT-color) !important; -} - -a { - color: var(--MAIN-LINK-color); -} - -.anchor { - color: var(--MAIN-ANCHOR-color); -} - -a:hover { - color: var(--MAIN-LINK-HOVER-color); -} - -#sidebar ul li.visited > a .read-icon { - color: var(--MENU-VISITED-color); -} - -#body a.highlight:after { - display: block; - content: ""; - height: 1px; - width: 0%; - -webkit-transition: width 0.5s ease; - -moz-transition: width 0.5s ease; - -ms-transition: width 0.5s ease; - transition: width 0.5s ease; - background-color: var(--MAIN-LINK-HOVER-color); -} - -#sidebar { - background-color: var(--MENU-SECTIONS-BG-color); -} - -#sidebar #header-wrapper { - background: var(--MENU-HEADER-BG-color); - color: var(--MENU-SEARCH-BOX-color); - border-color: var(--MENU-HEADER-BORDER-color); -} - -#sidebar .searchbox { - border-color: var(--MENU-SEARCH-BOX-color); - background: var(--MENU-SEARCH-BG-color); -} - -#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active { - background: var(--MENU-SECTIONS-ACTIVE-BG-color); -} - -#sidebar .searchbox * { - color: var(--MENU-SEARCH-BOX-ICONS-color); -} - -#sidebar a { - color: var(--MENU-SECTIONS-LINK-color); -} - -#sidebar a:hover { - color: var(--MENU-SECTIONS-LINK-HOVER-color); -} - -#sidebar ul li.active > a { - background: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color); - color: var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important; -} - -#sidebar hr { - border-color: var(--MENU-SECTION-HR-color); -} - -#body .tags a.tag-link { - background-color: var(--MENU-HEADER-BG-color); -} - -#body .tags a.tag-link:before { - border-right-color: var(--MENU-HEADER-BG-color); -} - -#homelinks { - background: var(--MENU-HEADER-BG-color); - background-color: var(--MENU-HEADER-BORDER-color); - border-bottom-color: var(--MENU-HEADER-BORDER-color); -} - -#homelinks a { - color: var(--MENU-HOME-LINK-color); -} - -#homelinks a:hover { - color: var(--MENU-HOME-LINK-HOVER-color); -} diff --git a/static/css/theme-red.css b/static/css/theme-red.css index 56fcc95666..d287d52559 100644 --- a/static/css/theme-red.css +++ b/static/css/theme-red.css @@ -25,106 +25,3 @@ --MENU-VISITED-color: #ff3333; /* Color of 'page visited' icons in menu */ --MENU-SECTION-HR-color: #2b2020; /* Color of
separator in menu */ } - -body { - color: var(--MAIN-TEXT-color) !important; -} - -textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus { - border-color: none; - box-shadow: none; -} - -h2, h3, h4, h5, h6 { - color: var(--MAIN-TITLES-TEXT-color) !important; -} - -a { - color: var(--MAIN-LINK-color); -} - -.anchor { - color: var(--MAIN-ANCHOR-color); -} - -a:hover { - color: var(--MAIN-LINK-HOVER-color); -} - -#sidebar ul li.visited > a .read-icon { - color: var(--MENU-VISITED-color); -} - -#body a.highlight:after { - display: block; - content: ""; - height: 1px; - width: 0%; - -webkit-transition: width 0.5s ease; - -moz-transition: width 0.5s ease; - -ms-transition: width 0.5s ease; - transition: width 0.5s ease; - background-color: var(--MAIN-LINK-HOVER-color); -} - -#sidebar { - background-color: var(--MENU-SECTIONS-BG-color); -} - -#sidebar #header-wrapper { - background: var(--MENU-HEADER-BG-color); - color: var(--MENU-SEARCH-BOX-color); - border-color: var(--MENU-HEADER-BORDER-color); -} - -#sidebar .searchbox { - border-color: var(--MENU-SEARCH-BOX-color); - background: var(--MENU-SEARCH-BG-color); -} - -#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active { - background: var(--MENU-SECTIONS-ACTIVE-BG-color); -} - -#sidebar .searchbox * { - color: var(--MENU-SEARCH-BOX-ICONS-color); -} - -#sidebar a { - color: var(--MENU-SECTIONS-LINK-color); -} - -#sidebar a:hover { - color: var(--MENU-SECTIONS-LINK-HOVER-color); -} - -#sidebar ul li.active > a { - background: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color); - color: var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important; -} - -#sidebar hr { - border-color: var(--MENU-SECTION-HR-color); -} - -#body .tags a.tag-link { - background-color: var(--MENU-HEADER-BG-color); -} - -#body .tags a.tag-link:before { - border-right-color: var(--MENU-HEADER-BG-color); -} - -#homelinks { - background: var(--MENU-HEADER-BG-color); - background-color: var(--MENU-HEADER-BORDER-color); - border-bottom-color: var(--MENU-HEADER-BORDER-color); -} - -#homelinks a { - color: var(--MENU-HOME-LINK-color); -} - -#homelinks a:hover { - color: var(--MENU-HOME-LINK-HOVER-color); -} diff --git a/static/css/theme-relearn.css b/static/css/theme-relearn.css index c786c1cb65..be60b17f9e 100644 --- a/static/css/theme-relearn.css +++ b/static/css/theme-relearn.css @@ -25,110 +25,3 @@ --MENU-VISITED-color: #506397; /* Color of 'page visited' icons in menu */ --MENU-SECTION-HR-color: #28292e; /* Color of
separator in menu */ } - -body { - color: var(--MAIN-TEXT-color) !important; -} - -textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus { - border-color: none; - box-shadow: none; -} - -h2, h3, h4, h5, h6 { - color: var(--MAIN-TITLES-TEXT-color) !important; -} - -a { - color: var(--MAIN-LINK-color); -} - -.anchor { - color: var(--MAIN-ANCHOR-color); -} - -a:hover { - color: var(--MAIN-LINK-HOVER-color); -} - -#sidebar ul li.visited > a .read-icon { - color: var(--MENU-VISITED-color); -} - -#body a.highlight:after { - display: block; - content: ""; - height: 1px; - width: 0%; - -webkit-transition: width 0.5s ease; - -moz-transition: width 0.5s ease; - -ms-transition: width 0.5s ease; - transition: width 0.5s ease; - background-color: var(--MAIN-LINK-HOVER-color); -} - -#sidebar { - background-color: var(--MENU-SECTIONS-BG-color); -} - -#sidebar #header-wrapper { - background: var(--MENU-HEADER-BG-color); - color: var(--MENU-SEARCH-BOX-color); - border-color: var(--MENU-HEADER-BORDER-color); -} - -#sidebar .searchbox { - border-color: var(--MENU-SEARCH-BOX-color); - background: var(--MENU-SEARCH-BG-color); -} - -#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active { - background: var(--MENU-SECTIONS-ACTIVE-BG-color); -} - -#sidebar .searchbox * { - color: var(--MENU-SEARCH-BOX-ICONS-color); -} - -#sidebar a { - color: var(--MENU-SECTIONS-LINK-color); -} - -#sidebar a:hover { - color: var(--MENU-SECTIONS-LINK-HOVER-color); -} - -#sidebar ul li.active > a { - background: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color); - color: var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important; -} - -#sidebar hr { - border-color: var(--MENU-SECTION-HR-color); -} - -#body .tags a.tag-link { - background-color: var(--MENU-HEADER-BG-color); -} - -#body .tags a.tag-link:before { - border-right-color: var(--MENU-HEADER-BG-color); -} - -#homelinks { - background: var(--MENU-HEADER-BG-color); - background-color: var(--MENU-HEADER-BORDER-color); - border-bottom-color: var(--MENU-HEADER-BORDER-color); -} - -#homelinks a { - color: var(--MENU-HOME-LINK-color); -} - -#homelinks a:hover { - color: var(--MENU-HOME-LINK-HOVER-color); -} - -#sidebar .nav-title { - color: var(--MENU-SECTIONS-LINK-HOVER-color) !important; -} diff --git a/static/css/theme.css b/static/css/theme.css index 74c6bcc39d..09b8de48cc 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -90,10 +90,6 @@ textarea, input[type="email"], input[type="number"], input[type="password"], inp textarea:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="url"]:hover, input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="time"]:hover, input[type="week"]:hover, select[multiple=multiple]:hover { border-color: #c4c4c4; } -textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus { - border-color: #00bdf3; - box-shadow: inset 0 1px 3px rgba(0,0,0,.06),0 0 5px rgba(0,169,218,.7) -} #header-wrapper { background: #8451a1; color: #fff; diff --git a/static/css/variant.css b/static/css/variant.css new file mode 100644 index 0000000000..1237092079 --- /dev/null +++ b/static/css/variant.css @@ -0,0 +1,92 @@ +body { + color: var(--MAIN-TEXT-color) !important; +} + +h2, h3, h4, h5, h6 { + color: var(--MAIN-TITLES-TEXT-color) !important; +} + +a { + color: var(--MAIN-LINK-color); +} + +.anchor { + color: var(--MAIN-ANCHOR-color); +} + +a:hover { + color: var(--MAIN-LINK-HOVER-color); +} + +#sidebar ul li.visited > a .read-icon { + color: var(--MENU-VISITED-color); +} + +#body a.highlight:after { + background-color: var(--MAIN-LINK-HOVER-color); +} + +#sidebar { + background-color: var(--MENU-SECTIONS-BG-color); +} + +#sidebar #header-wrapper { + background-color: var(--MENU-HEADER-BG-color); + color: var(--MENU-SEARCH-BOX-color); + border-color: var(--MENU-HEADER-BORDER-color); +} + +#sidebar .searchbox { + border-color: var(--MENU-SEARCH-BOX-color); + background-color: var(--MENU-SEARCH-BG-color); +} + +#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active { + background-color: var(--MENU-SECTIONS-ACTIVE-BG-color); +} + +#sidebar .searchbox * { + color: var(--MENU-SEARCH-BOX-ICONS-color); +} + +#sidebar a { + color: var(--MENU-SECTIONS-LINK-color); +} + +#sidebar a:hover { + color: var(--MENU-SECTIONS-LINK-HOVER-color); +} + +#sidebar ul li.active > a { + background-color: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color); + color: var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important; +} + +#sidebar hr { + border-color: var(--MENU-SECTION-HR-color); +} + +#body .tags a.tag-link { + background-color: var(--MENU-HEADER-BG-color); +} + +#body .tags a.tag-link:before { + border-right-color: var(--MENU-HEADER-BG-color); +} + +#homelinks { + background-color: var(--MENU-HEADER-BG-color); + border-bottom-color: var(--MENU-HEADER-BORDER-color); +} + +#homelinks a { + color: var(--MENU-HOME-LINK-color); +} + +#homelinks a:hover { + color: var(--MENU-HOME-LINK-HOVER-color); +} + +#sidebar .nav-title { + color: var(--MENU-SECTIONS-LINK-HOVER-color) !important; +}