From 0a4fc286cd84a936490eb66dc37f780ca855b4c3 Mon Sep 17 00:00:00 2001 From: Lars Eggert Date: Tue, 24 Oct 2023 01:38:35 +0200 Subject: [PATCH] fix: More darkmode fixes (#6477) * fix: More dark mode fixes This first commit increases contrast of the leftmenu text. * Fix own ballot position highlight in dark mode * Fix dark mode axis color in timeline diagrams * Enable highcharts dark mode * Fix template * Properly import our customized bs5 everywhere * Fix #6499 * Use bs5 color for border-left * Remove superfluous load --- ietf/static/css/custom-bs-import.scss | 55 +++++++++++++++ ietf/static/css/datepicker.scss | 11 +-- ietf/static/css/document_html.scss | 36 +--------- ietf/static/css/document_html_txt.scss | 4 +- ietf/static/css/highcharts.scss | 1 + ietf/static/css/ietf.scss | 66 ++---------------- ietf/static/css/list.scss | 9 +-- ietf/static/css/select2.scss | 11 +-- ietf/static/js/highcharts.js | 10 +-- ietf/static/js/highstock.js | 9 +++ ietf/templates/base/menu.html | 88 ++++++++++++------------ ietf/templates/base/menu_user.html | 50 +++++++------- ietf/templates/base/menu_wg.html | 2 +- ietf/templates/doc/stats/highstock.html | 3 + ietf/templates/group/active_areas.html | 3 + ietf/templates/group/group_about.html | 1 + ietf/templates/person/profile.html | 1 + ietf/templates/stats/document_stats.html | 1 + ietf/templates/stats/meeting_stats.html | 1 + ietf/templates/stats/review_stats.html | 1 + package.json | 1 + 21 files changed, 162 insertions(+), 202 deletions(-) create mode 100644 ietf/static/css/custom-bs-import.scss create mode 100644 ietf/static/css/highcharts.scss diff --git a/ietf/static/css/custom-bs-import.scss b/ietf/static/css/custom-bs-import.scss new file mode 100644 index 000000000..e124b5687 --- /dev/null +++ b/ietf/static/css/custom-bs-import.scss @@ -0,0 +1,55 @@ +@import "bootstrap/scss/functions"; + +// Enable negative margin classes. +$enable-negative-margins: true; + +// Don't add carets to dropdowns by default. +// $enable-caret: false; + +$popover-max-width: 100%; + +// Override default fonts + +$font-family-sans-serif: "Inter", +system-ui, +-apple-system, +"Segoe UI", +Roboto, +"Helvetica Neue", +"Noto Sans", +"Liberation Sans", +Arial, +sans-serif, +"Apple Color Emoji", +"Segoe UI Emoji", +"Segoe UI Symbol", +"Noto Color Emoji"; +$font-family-monospace: "Noto Sans Mono", +SFMono-Regular, +Menlo, +Monaco, +Consolas, +"Liberation Mono", +"Courier New", +monospace; + +// Enable color modes +$color-mode-type: data; + +@import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; + +$h1-font-size: $font-size-base * 2.2; +$h2-font-size: $font-size-base * 1.8; +$h3-font-size: $font-size-base * 1.6; +$h4-font-size: $font-size-base * 1.4; +$h5-font-size: $font-size-base * 1.2; +$h6-font-size: $font-size-base; + +@import "bootstrap/scss/maps"; +@import "bootstrap/scss/mixins"; +@import "bootstrap/scss/utilities"; +@import "bootstrap/scss/root"; + + + diff --git a/ietf/static/css/datepicker.scss b/ietf/static/css/datepicker.scss index 4e2655b3f..88f9e835f 100644 --- a/ietf/static/css/datepicker.scss +++ b/ietf/static/css/datepicker.scss @@ -1,13 +1,4 @@ -@import "bootstrap/scss/functions"; - -// Enable color modes -$color-mode-type: data; - -@import "bootstrap/scss/variables"; -@import "bootstrap/scss/variables-dark"; -@import "bootstrap/scss/maps"; -@import "bootstrap/scss/mixins"; -@import "bootstrap/scss/root"; +@import "custom-bs-import"; // FIXME: color.scale doesn't seem to work with CSS variables, so avoid those:` $dp-cell-focus-background-color: $dropdown-link-hover-bg !default; diff --git a/ietf/static/css/document_html.scss b/ietf/static/css/document_html.scss index d34cae4ac..0b5a70f12 100644 --- a/ietf/static/css/document_html.scss +++ b/ietf/static/css/document_html.scss @@ -1,41 +1,9 @@ @use "sass:map"; -$font-family-sans-serif: "Inter", -system-ui, --apple-system, -"Segoe UI", -Roboto, -"Helvetica Neue", -"Noto Sans", -"Liberation Sans", -Arial, -sans-serif, -"Apple Color Emoji", -"Segoe UI Emoji", -"Segoe UI Symbol", -"Noto Color Emoji"; -$font-family-monospace: "Noto Sans Mono", -SFMono-Regular, -Menlo, -Monaco, -Consolas, -"Liberation Mono", -"Courier New", -monospace; - -@import "bootstrap/scss/functions"; - -// Enable color modes -$color-mode-type: data; - -@import "bootstrap/scss/variables"; -@import "bootstrap/scss/variables-dark"; -@import "bootstrap/scss/maps"; -@import "bootstrap/scss/mixins"; -@import "bootstrap/scss/utilities"; -@import "bootstrap/scss/root"; +@import "custom-bs-import"; // Layout & components +// Only import what we need: @import "bootstrap/scss/reboot"; @import "bootstrap/scss/type"; // @import "bootstrap/scss/images"; diff --git a/ietf/static/css/document_html_txt.scss b/ietf/static/css/document_html_txt.scss index a75c491d2..6650cf334 100644 --- a/ietf/static/css/document_html_txt.scss +++ b/ietf/static/css/document_html_txt.scss @@ -69,7 +69,7 @@ figure { blockquote { @include margin-paragraph; // margin: var(--paragraph); padding-left: calc(2ch - 2px); - border-left: 2px solid darkgrey; + border-left: 2px solid var(--bs-border-color); } /* Header junk */ @@ -374,7 +374,7 @@ thead, tfoot { border-bottom-style: double; } td, th { - border: 1px solid inherit; + border: 1px solid var(--bs-border-color); // padding: var(--half-line) 1ch; padding-top: var(--half-line); padding-right: 1ch; diff --git a/ietf/static/css/highcharts.scss b/ietf/static/css/highcharts.scss new file mode 100644 index 000000000..c556f4e11 --- /dev/null +++ b/ietf/static/css/highcharts.scss @@ -0,0 +1 @@ +@import "npm:highcharts/css/highcharts.css"; diff --git a/ietf/static/css/ietf.scss b/ietf/static/css/ietf.scss index a81a8440a..4578123b7 100644 --- a/ietf/static/css/ietf.scss +++ b/ietf/static/css/ietf.scss @@ -1,61 +1,9 @@ @use "sass:map"; -@import "bootstrap/scss/functions"; - -// Enable negative margin classes. -$enable-negative-margins: true; - -// Don't add carets to dropdowns by default. -// $enable-caret: false; - -$popover-max-width: 100%; - -// Override default fonts - -$font-family-sans-serif: "Inter", -system-ui, --apple-system, -"Segoe UI", -Roboto, -"Helvetica Neue", -"Noto Sans", -"Liberation Sans", -Arial, -sans-serif, -"Apple Color Emoji", -"Segoe UI Emoji", -"Segoe UI Symbol", -"Noto Color Emoji"; -$font-family-monospace: "Noto Sans Mono", -SFMono-Regular, -Menlo, -Monaco, -Consolas, -"Liberation Mono", -"Courier New", -monospace; - -// Enable color modes -$color-mode-type: data; - -// Only import what we need: - -@import "bootstrap/scss/variables"; -@import "bootstrap/scss/variables-dark"; - -$h1-font-size: $font-size-base * 2.2; -$h2-font-size: $font-size-base * 1.8; -$h3-font-size: $font-size-base * 1.6; -$h4-font-size: $font-size-base * 1.4; -$h5-font-size: $font-size-base * 1.2; -$h6-font-size: $font-size-base; - -@import "bootstrap/scss/maps"; -@import "bootstrap/scss/mixins"; -@import "bootstrap/scss/utilities"; -@import "bootstrap/scss/root"; +@import "custom-bs-import"; // Layout & components +// Only import what we need: @import "bootstrap/scss/reboot"; @import "bootstrap/scss/type"; @import "bootstrap/scss/images"; @@ -205,8 +153,8 @@ pre { --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg}; --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y}; --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow}; - --#{$prefix}dropdown-link-color: #{$dropdown-link-color}; - --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color}; + --#{$prefix}dropdown-link-color: #{$nav-link-color}; + --#{$prefix}dropdown-link-hover-color: #{$nav-link-hover-color}; --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg}; --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color}; --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg}; @@ -351,7 +299,7 @@ th, .axis path, .axis line { fill: none; - stroke: black; + stroke: var(--bs-body-color); } .axis.y path, @@ -368,7 +316,7 @@ th, } .bar text { - fill: black; + fill: var(--bs-body-color); dominant-baseline: central; pointer-events: none; } @@ -407,7 +355,7 @@ th, } .ballot-icon table .my { - border: calc(2 * $table-border-width) solid #000; + border: calc(2 * $table-border-width) solid var(--bs-emphasis-color); } // See https://getbootstrap.com/docs/5.1/customize/color/#all-colors diff --git a/ietf/static/css/list.scss b/ietf/static/css/list.scss index 142013c3d..595bf360d 100644 --- a/ietf/static/css/list.scss +++ b/ietf/static/css/list.scss @@ -1,11 +1,4 @@ -// Import bootstrap helpers -@import "bootstrap/scss/functions"; - -// Enable color modes -$color-mode-type: data; - -@import "bootstrap/scss/variables"; -@import "bootstrap/scss/variables-dark"; +@import "custom-bs-import"; table .sort { cursor: pointer; diff --git a/ietf/static/css/select2.scss b/ietf/static/css/select2.scss index ab53c228e..c8e3da7ad 100644 --- a/ietf/static/css/select2.scss +++ b/ietf/static/css/select2.scss @@ -1,13 +1,4 @@ -@import "bootstrap/scss/functions"; - -// Enable color modes -$color-mode-type: data; - -@import "bootstrap/scss/variables"; -@import "bootstrap/scss/variables-dark"; -@import "bootstrap/scss/maps"; -@import "bootstrap/scss/mixins"; -@import "bootstrap/scss/root"; +@import "custom-bs-import"; // FIXME: bs-5.3.0 workaround from https://github.com/apalfrey/select2-bootstrap-5-theme/issues/75#issuecomment-1573265695 $s2bs5-border-color: $border-color; diff --git a/ietf/static/js/highcharts.js b/ietf/static/js/highcharts.js index 0b99f87a5..268f96e50 100644 --- a/ietf/static/js/highcharts.js +++ b/ietf/static/js/highcharts.js @@ -13,17 +13,9 @@ Highcharts_Accessibility(Highcharts); Highcharts_Sunburst(Highcharts); Highcharts.setOptions({ - // use colors from https://colorbrewer2.org/#type=qualitative&scheme=Paired&n=12 - colors: ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', - '#e31a1c', '#fdbf6f', '#ff7f00', '#cab2d6', '#6a3d9a', - '#ffff99', '#b15928' - ], chart: { height: "100%", - style: { - fontFamily: getComputedStyle(document.body) - .getPropertyValue('--bs-body-font-family') - } + styledMode: true, }, credits: { enabled: false diff --git a/ietf/static/js/highstock.js b/ietf/static/js/highstock.js index e1965acb6..15ddb5ef9 100644 --- a/ietf/static/js/highstock.js +++ b/ietf/static/js/highstock.js @@ -10,4 +10,13 @@ Highcharts_Offline_Exporting(Highcharts); Highcharts_Export_Data(Highcharts); Highcharts_Accessibility(Highcharts); +Highcharts.setOptions({ + chart: { + styledMode: true, + }, + credits: { + enabled: false + }, +}); + window.Highcharts = Highcharts; diff --git a/ietf/templates/base/menu.html b/ietf/templates/base/menu.html index b9f5f90e4..693a33bd8 100644 --- a/ietf/templates/base/menu.html +++ b/ietf/templates/base/menu.html @@ -22,7 +22,7 @@ {% if flavor == 'top' %}
  • By area/parent
    • {% endif %} {% wg_menu flavor %}
  • - Other @@ -31,19 +31,19 @@ {% if flavor == 'top' %}
    • {% endif %}
  • New work
  • - Chartering groups
  • - BOFs
  • - BOF Requests @@ -51,13 +51,13 @@ {% if flavor == 'top' %}
    • {% endif %}
  • Other groups
  • - Concluded groups
  • - Non-WG lists @@ -81,32 +81,32 @@
    • {% endif %}
  • - Search
  • - Recent I-Ds
  • - I-D submission
  • - IESG dashboard
    • {% if user and user.is_authenticated %}
  • - My tracked docs @@ -114,7 +114,7 @@ {% if user|has_role:"Area Director,Secretariat" %} {% if flavor == 'top' %}
    • {% endif %}
  • - RFC status changes @@ -122,7 +122,7 @@ {% endif %} {% if flavor == 'top' %}
    • {% endif %}
  • - IRSG ballot status @@ -131,14 +131,14 @@ {% if flavor == 'top' %}
    • {% endif %}
  • Manage
  • - Approve an I-D
    • {% for g in user|docman_groups %}
  • - {{ g.acronym }} {{ g.type.slug }} docs @@ -146,7 +146,7 @@ {% endfor %} {% for g in user|matman_groups %}
  • - {{ g.acronym }} {{ g.type.slug }} meetings @@ -163,7 +163,7 @@
    • {% for g in user|managed_review_groups %}
  • - {{ g.acronym }} reviews @@ -180,7 +180,7 @@
    • {% for nomcom in nomcoms %}
  • - {{ nomcom|capfirst }} @@ -196,25 +196,25 @@ RFC streams
  • - IAB
  • - IRTF
  • - ISE
  • - Editorial @@ -240,43 +240,43 @@
    • {% endif %}
  • - Agenda
  • - Materials
  • - Floor plan
  • - Registration
  • - Important dates
  • - Request a session
  • - Session requests @@ -291,7 +291,7 @@
    • {% endif %}
  • - Upcoming meetings @@ -306,13 +306,13 @@
    • {% endif %}
  • - Past meetings
  • - Meeting proceedings @@ -338,56 +338,56 @@
    • {% endif %}
  • - IPR disclosures
  • - Liaison statements
  • - IESG agenda
  • - NomComs
  • - Downref registry
  • - Statistics
  • - API Help
  • - Release notes @@ -412,7 +412,7 @@
    • {% endif %}
  • - diff --git a/ietf/templates/base/menu_user.html b/ietf/templates/base/menu_user.html index 9e6bbde56..e731307f2 100644 --- a/ietf/templates/base/menu_user.html +++ b/ietf/templates/base/menu_user.html @@ -23,7 +23,7 @@ {% url 'django.contrib.auth.views.logout' as logout_url %} {% if request.get_full_path == logout_url %}
  • - Sign in @@ -34,14 +34,14 @@
  • {% csrf_token %} -
  • - Account info @@ -49,35 +49,35 @@
    • {% if user and user.person %}
  • - Public profile page
    • {% endif %}
  • - Preferences
  • - API keys
  • - Change password
  • - Change username @@ -85,21 +85,21 @@
    • {% else %}
  • - Sign in
  • - Password reset
  • - Preferences @@ -109,7 +109,7 @@ {% endif %} {% if not request.user.is_authenticated %}
  • - New account @@ -117,7 +117,7 @@ {% endif %} {% if user|has_role:"Reviewer" %}
  • - My reviews @@ -127,31 +127,31 @@ {% if flavor == "top" %}
    • {% endif %}
  • AD dashboard
  • - My docs
  • - Next telechat
  • - Discusses
  • - Milestone review
  • - Last Call docs @@ -163,31 +163,31 @@ IETF secretariat
  • - Telechat dates
  • - Management items
  • - Milestones
  • - Sync discrepancies
  • - Account allowlist @@ -202,7 +202,7 @@ IANA
  • - Sync discrepancies @@ -217,7 +217,7 @@ RFC Editor
  • - Sync discrepancies diff --git a/ietf/templates/base/menu_wg.html b/ietf/templates/base/menu_wg.html index 3ab7ca399..09fef8c7b 100644 --- a/ietf/templates/base/menu_wg.html +++ b/ietf/templates/base/menu_wg.html @@ -3,7 +3,7 @@ {% origin %} {% for p in parents %}
  • - {{ p.short_name }} diff --git a/ietf/templates/doc/stats/highstock.html b/ietf/templates/doc/stats/highstock.html index d6a36f58e..6719a3b9e 100644 --- a/ietf/templates/doc/stats/highstock.html +++ b/ietf/templates/doc/stats/highstock.html @@ -3,6 +3,9 @@ {% load origin %} {% load static %} {% load ietf_filters %} +{% block pagehead %} + +{% endblock %} {% block js %}