diff --git a/ietf/static/css/custom-bs-import.scss b/ietf/static/css/custom-bs-import.scss new file mode 100644 index 00000000000..e124b568757 --- /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 4e2655b3fde..88f9e835fdb 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 d34cae4ac1b..0b5a70f1241 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 a75c491d262..6650cf33405 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 00000000000..c556f4e1186 --- /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 a81a8440a93..4578123b7a0 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 142013c3dd5..595bf360d57 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 ab53c228ebf..c8e3da7adc6 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 0b99f87a59f..268f96e50fb 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 e1965acb625..15ddb5ef9cb 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 b9f5f90e4d8..693a33bd8f9 100644 --- a/ietf/templates/base/menu.html +++ b/ietf/templates/base/menu.html @@ -22,7 +22,7 @@ {% if flavor == 'top' %}