From b4355c1bddc40c7190f685819f74c84c5d205c1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Sat, 15 Jul 2023 08:30:17 +0200 Subject: [PATCH] Fix dark mode rendering of Cheatsheet examples --- .../docs/5.3/examples/cheatsheet/cheatsheet.css | 15 +++++++-------- .../5.3/examples/cheatsheet/cheatsheet.rtl.css | 15 +++++++-------- 2 files changed, 14 insertions(+), 16 deletions(-) diff --git a/site/content/docs/5.3/examples/cheatsheet/cheatsheet.css b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.css index e2f99b8592e7..5721a028e9cc 100644 --- a/site/content/docs/5.3/examples/cheatsheet/cheatsheet.css +++ b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.css @@ -12,7 +12,7 @@ body { height: 1em; margin-right: .25rem; content: ""; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%25230d6efd' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E"); background-size: 1em; } @@ -26,29 +26,29 @@ body { padding: .1875rem .5rem; margin-top: .125rem; margin-left: .3125rem; - color: rgba(0, 0, 0, .65); + color: var(--bs-body-color); } .bd-aside a:hover, .bd-aside a:focus { - color: rgba(0, 0, 0, .85); + color: var(--bs-body-color); background-color: rgba(121, 82, 179, .1); } .bd-aside .active { font-weight: 600; - color: rgba(0, 0, 0, .85); + color: var(--bs-body-color); } .bd-aside .btn { padding: .25rem .5rem; font-weight: 600; - color: rgba(0, 0, 0, .65); + color: var(--bs-body-color); } .bd-aside .btn:hover, .bd-aside .btn:focus { - color: rgba(0, 0, 0, .85); + color: var(--bs-body-color); background-color: rgba(121, 82, 179, .1); } @@ -59,7 +59,7 @@ body { .bd-aside .btn::before { width: 1.25em; line-height: 0; - content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); + content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); transition: transform .35s ease; /* rtl:raw: @@ -149,7 +149,6 @@ body { /* rtl:end:ignore */ z-index: -1; content: ""; - background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) calc(100% - 3rem), rgba(255, 255, 255, .01)); } .bd-cheatsheet article, diff --git a/site/content/docs/5.3/examples/cheatsheet/cheatsheet.rtl.css b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.rtl.css index e04d84871765..416e39fcaf66 100644 --- a/site/content/docs/5.3/examples/cheatsheet/cheatsheet.rtl.css +++ b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.rtl.css @@ -12,7 +12,7 @@ body { height: 1em; margin-left: .25rem; content: ""; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%25230d6efd' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E"); background-size: 1em; } @@ -26,29 +26,29 @@ body { padding: .1875rem .5rem; margin-top: .125rem; margin-right: .3125rem; - color: rgba(0, 0, 0, .65); + color: var(--bs-body-color); } .bd-aside a:hover, .bd-aside a:focus { - color: rgba(0, 0, 0, .85); + color: var(--bs-body-color); background-color: rgba(121, 82, 179, .1); } .bd-aside .active { font-weight: 600; - color: rgba(0, 0, 0, .85); + color: var(--bs-body-color); } .bd-aside .btn { padding: .25rem .5rem; font-weight: 600; - color: rgba(0, 0, 0, .65); + color: var(--bs-body-color); } .bd-aside .btn:hover, .bd-aside .btn:focus { - color: rgba(0, 0, 0, .85); + color: var(--bs-body-color); background-color: rgba(121, 82, 179, .1); } @@ -59,7 +59,7 @@ body { .bd-aside .btn::before { width: 1.25em; line-height: 0; - content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); + content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); transition: transform .35s ease; transform: rotate(180deg) translateX(-2px); transform-origin: .5em 50%; @@ -142,7 +142,6 @@ body { left: 0; z-index: -1; content: ""; - background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) calc(100% - 3rem), rgba(255, 255, 255, .01)); } .bd-cheatsheet article,