Color mode fixes
This commit is contained in:
Lars Eggert
parent
112d3b9f2a
commit
342e6f58bd
|
|
@ -1,7 +1,7 @@
|
|||
@import "bootstrap/scss/functions";
|
||||
|
||||
// Enable automatic dark mode
|
||||
$color-mode-type: media-query;
|
||||
// Enable color modes
|
||||
$color-mode-type: data;
|
||||
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/variables-dark";
|
||||
|
|
@ -10,6 +10,6 @@ $color-mode-type: media-query;
|
|||
@import "bootstrap/scss/root";
|
||||
|
||||
// FIXME: color.scale doesn't seem to work with CSS variables, so avoid those:`
|
||||
$dp-cell-focus-background-color: $dropdown-link-hover-bg !default;
|
||||
$dp-cell-focus-background-color: $dropdown-link-hover-bg !default;
|
||||
|
||||
@import "vanillajs-datepicker/sass/datepicker-bs5";
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ $font-family-monospace: "Noto Sans Mono", SFMono-Regular, Menlo, Monaco, Consola
|
|||
|
||||
@import "bootstrap/scss/functions";
|
||||
|
||||
// Enable automatic dark mode
|
||||
$color-mode-type: media-query;
|
||||
// Enable color modes
|
||||
$color-mode-type: data;
|
||||
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/variables-dark";
|
||||
|
|
|
|||
|
|
@ -15,9 +15,8 @@ $popover-max-width: 100%;
|
|||
$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 automatic dark mode
|
||||
|
||||
$color-mode-type: media-query;
|
||||
// Enable color modes
|
||||
$color-mode-type: data;
|
||||
|
||||
// Only import what we need:
|
||||
|
||||
|
|
@ -451,7 +450,7 @@ td.position-recuse {
|
|||
}
|
||||
|
||||
td.position-norecord {
|
||||
background-color: $white; // $color-norecord;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
td.position-empty {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
// Import bootstrap helpers
|
||||
@import "bootstrap/scss/functions";
|
||||
|
||||
// Enable automatic dark mode
|
||||
$color-mode-type: media-query;
|
||||
// Enable color modes
|
||||
$color-mode-type: data;
|
||||
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/variables-dark";
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "bootstrap/scss/functions";
|
||||
|
||||
// Enable automatic dark mode
|
||||
$color-mode-type: media-query;
|
||||
// Enable color modes
|
||||
$color-mode-type: data;
|
||||
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/variables-dark";
|
||||
|
|
@ -10,6 +10,7 @@ $color-mode-type: media-query;
|
|||
@import "bootstrap/scss/root";
|
||||
|
||||
// FIXME: bs-5.3.0 workaround from https://github.com/apalfrey/select2-bootstrap-5-theme/issues/75s
|
||||
$s2bs5-clear-icon: str-replace($btn-close-bg, #{$btn-close-color}, #{shade-color(red, 50%)}) !default;
|
||||
$s2bs5-clear-icon: str-replace($btn-close-bg, #{$btn-close-color}, #{shade-color(red, 50%)}) !default;
|
||||
|
||||
@import "select2/src/scss/core";
|
||||
@import "select2-bootstrap-5-theme/src/include-all";
|
||||
|
|
|
|||
|
|
@ -38,15 +38,16 @@
|
|||
if (!themeSwitcher) {
|
||||
return;
|
||||
}
|
||||
|
||||
const themeSwitcherText = document.querySelector("#bd-theme-text");
|
||||
const activeThemeIcon = document.querySelector(".theme-icon-active use");
|
||||
// Commented-out lines are from the original bs5 js, which uses a more complicated pref dropdown.
|
||||
// Kept them here for easier future diffing.
|
||||
// const themeSwitcherText = document.querySelector("#bd-theme-text");
|
||||
// const activeThemeIcon = document.querySelector(".theme-icon-active use");
|
||||
const btnToActive = document.querySelector(
|
||||
`[data-bs-theme-value="${theme}"]`
|
||||
);
|
||||
const svgOfActiveBtn = btnToActive
|
||||
.querySelector("svg use")
|
||||
.getAttribute("href");
|
||||
// const svgOfActiveBtn = btnToActive
|
||||
// .querySelector("svg use")
|
||||
// .getAttribute("href");
|
||||
|
||||
document.querySelectorAll("[data-bs-theme-value]").forEach((element) => {
|
||||
element.classList.remove("active");
|
||||
|
|
@ -55,13 +56,13 @@
|
|||
|
||||
btnToActive.classList.add("active");
|
||||
btnToActive.setAttribute("aria-pressed", "true");
|
||||
activeThemeIcon.setAttribute("href", svgOfActiveBtn);
|
||||
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
|
||||
themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
|
||||
// activeThemeIcon.setAttribute("href", svgOfActiveBtn);
|
||||
// const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
|
||||
// themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
|
||||
|
||||
if (focus) {
|
||||
themeSwitcher.focus();
|
||||
}
|
||||
// if (focus) {
|
||||
// themeSwitcher.focus();
|
||||
// }
|
||||
};
|
||||
|
||||
window
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
data-group-menu-data-url="{% url 'ietf.group.views.group_menu_data' %}">
|
||||
{% analytical_body_top %}
|
||||
<a class="visually-hidden visually-hidden-focusable" href="#content">Skip to main content</a>
|
||||
<nav class="navbar navbar-expand-lg {% if server_mode and server_mode != "production" %} bg-warning {% else %} bg-secondary {% endif %} {% if navbar_mode %} {{ navbar_mode }} {% else %} fixed-top {% endif %}">
|
||||
<nav class="navbar navbar-expand-lg fixed-top {% if server_mode and server_mode != "production" %}bg-warning navbar-light{% else %}navbar-dark bg-secondary{% endif %}">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="/">
|
||||
<img alt="IETF Logo" class="me-2"
|
||||
|
|
@ -115,8 +115,7 @@
|
|||
</div>
|
||||
</div>
|
||||
{% block footer %}
|
||||
<footer class="col-md-12 col-sm-12 bg-light-subtle text-center position-sticky">
|
||||
<hr class="mx-3">
|
||||
<footer class="col-md-12 col-sm-12 border-top mt-5 py-5 bg-light-subtle text-center position-sticky">
|
||||
<a href="https://www.ietf.org/" class="p-3">IETF</a>
|
||||
<a href="https://www.ietf.org/iesg/" class="p-3">IESG</a>
|
||||
<a href="https://www.iab.org/" class="p-3">IAB</a>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
cookies disabled then you will not be able to change the settings
|
||||
(everything still continues to work by using default settings).
|
||||
</p>
|
||||
<h2>How many days is considered "new"?</h2>
|
||||
<h2 class="mt-4">How many days is considered "new"?</h2>
|
||||
<p>
|
||||
This setting affects how many days are considered "new enough" to get the special highlighting in the documents table. The default setting is {{ defaults.new_enough }} days.
|
||||
</p>
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
90 days
|
||||
</a>
|
||||
</p>
|
||||
<h2>How many days is considered "soon"?</h2>
|
||||
<h2 class="mt-4">How many days is considered "soon"?</h2>
|
||||
<p>
|
||||
This setting tells what is considered "soon" when showing documents that are going to be expire soon. The Default setting is {{ defaults.expires_soon }} days.
|
||||
</p>
|
||||
|
|
@ -108,7 +108,7 @@
|
|||
90 days
|
||||
</a>
|
||||
</p>
|
||||
<h2>Show full document text by default?</h2>
|
||||
<h2 class="mt-4">Show full document text by default?</h2>
|
||||
<p>
|
||||
Show the full text immediately on the document page instead of only showing beginning of it. This defaults to {{ defaults.full_draft }}.
|
||||
</p>
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
On
|
||||
</a>
|
||||
</p>
|
||||
<h2>Show the left-hand menu?</h2>
|
||||
<h2 class="mt-4">Show the left-hand menu?</h2>
|
||||
<p>
|
||||
Show the left-hand menu on all regular pages? This defaults to {{ defaults.left_menu }}.
|
||||
</p>
|
||||
|
|
@ -148,4 +148,24 @@
|
|||
On
|
||||
</a>
|
||||
</p>
|
||||
|
||||
|
||||
<h2 class="mt-4">Which color mode should be used?</h2>
|
||||
<p>
|
||||
Use a light, dark or automatic (as indicated by OS) color mode.
|
||||
</p>
|
||||
<p class="btn-group d-flex" id="bd-theme">
|
||||
|
||||
<a class="btn btn-outline-primary" data-bs-theme-value="light">
|
||||
<i class="theme-icon bi bi-brightness-high-fill"></i> Light
|
||||
</a>
|
||||
|
||||
<a class="btn btn-outline-primary" data-bs-theme-value="dark">
|
||||
<i class="theme-icon bi bi-moon-stars-fill"></i> Dark
|
||||
</a>
|
||||
|
||||
<a class="btn btn-outline-primary" data-bs-theme-value="auto">
|
||||
<i class="theme-icon bi bi-circle-half"></i> Auto
|
||||
</a>
|
||||
</p>
|
||||
{% endblock %}
|
||||
Loading…
Reference in a new issue