From 7ee2023bff0ba03a85d61f6cc11a891676cf224d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Fri, 5 Apr 2024 00:22:12 +0200 Subject: [PATCH] print: make it nice #822 now the user can use aswell as the theme, when marking search results in the page; to only print users with color, we had to adjust the serach highlighting --- assets/css/format-print.css | 2 +- static/css/ie.css | 10 +++++----- static/css/theme-relearn-bright.css | 2 +- static/css/theme-relearn-dark.css | 2 +- static/css/theme-relearn-light.css | 2 +- static/css/theme.css | 18 +++++++++++------- static/js/theme.js | 8 ++++---- 7 files changed, 24 insertions(+), 20 deletions(-) diff --git a/assets/css/format-print.css b/assets/css/format-print.css index 4a026387fe..4959720bab 100644 --- a/assets/css/format-print.css +++ b/assets/css/format-print.css @@ -139,7 +139,7 @@ h1 + .footline{ .term-list { display: none; } -mark { +mark.search { background: inherit; color: inherit; } diff --git a/static/css/ie.css b/static/css/ie.css index 4902425ca0..11da64000d 100644 --- a/static/css/ie.css +++ b/static/css/ie.css @@ -445,8 +445,8 @@ } div.box.accent { - background-color: rgba( 255, 136, 255, 1 ); /* var(--INTERNAL-ACCENT-color) */ - border-color: rgba( 255, 136, 255, 1 ); /* var(--INTERNAL-ACCENT-color) */ + background-color: rgb( 255, 102, 78, 1 ); /* var(--INTERNAL-ACCENT-color) */ + border-color: rgb( 255, 102, 78, 1 ); /* var(--INTERNAL-ACCENT-color) */ } div.box.accent > .box-content { @@ -679,11 +679,11 @@ } .btn.cstyle.accent { - background-color: rgba( 255, 136, 255, 1 ); /* var(--ACCENT-color) */ + background-color: rgb( 255, 102, 78, 1 ); /* var(--ACCENT-color) */ } .btn.cstyle.accent > * { - border-color: rgba( 255, 136, 255, 1 ); /* var(--ACCENT-color) */ + border-color: rgb( 255, 102, 78, 1 ); /* var(--ACCENT-color) */ } .btn.cstyle.blue { @@ -789,7 +789,7 @@ } .badge.accent > .badge-content { - background-color: rgba( 255, 136, 255, 1 ); /* var(--INTERNAL-ACCENT-color) */ + background-color: rgb( 255, 102, 78, 1 ); /* var(--INTERNAL-ACCENT-color) */ } .badge.blue > .badge-content { diff --git a/static/css/theme-relearn-bright.css b/static/css/theme-relearn-bright.css index 76eb3a421d..343702bf96 100644 --- a/static/css/theme-relearn-bright.css +++ b/static/css/theme-relearn-bright.css @@ -1,7 +1,7 @@ :root { --PRIMARY-color: rgba( 131, 201, 50, 1 ); /* brand primary color */ --SECONDARY-color: rgba( 99, 128, 208, 1 ); /* brand secondary color */ - --ACCENT-color: rgba( 255, 136, 255, 1 ); /* brand accent color, used for search highlights */ + --ACCENT-color: rgb( 255, 102, 78, 1 ); /* brand accent color, used for search highlights */ --MAIN-TEXT-color: rgba( 0, 0, 0, 1 ); /* text color of content and h1 titles */ --MAIN-LINK-HOVER-color: rgba( 32, 40, 145, 1 ); /* hovered link color of content */ diff --git a/static/css/theme-relearn-dark.css b/static/css/theme-relearn-dark.css index d607b8df15..3827132371 100644 --- a/static/css/theme-relearn-dark.css +++ b/static/css/theme-relearn-dark.css @@ -1,7 +1,7 @@ :root { --PRIMARY-color: rgba( 125, 201, 3, 1 ); /* brand primary color */ --SECONDARY-color: rgba( 108, 140, 227, 1 ); /* brand secondary color */ - --ACCENT-color: rgba( 255, 68, 255, 1 ); /* brand accent color, used for search highlights */ + --ACCENT-color: rgb( 255, 102, 78, 1 ); /* brand accent color, used for search highlights */ --MAIN-TEXT-color: rgba( 224, 224, 224, 1 ); /* text color of content and h1 titles */ --MAIN-LINK-HOVER-color: rgba( 147, 176, 255, 1 ); /* hovered link color of content */ diff --git a/static/css/theme-relearn-light.css b/static/css/theme-relearn-light.css index 9eac02cfcf..cd2083d2a2 100644 --- a/static/css/theme-relearn-light.css +++ b/static/css/theme-relearn-light.css @@ -1,7 +1,7 @@ :root { --PRIMARY-color: rgba( 125, 201, 3, 1 ); /* brand primary color */ --SECONDARY-color: rgba( 72, 106, 201, 1 ); /* brand secondary color */ - --ACCENT-color: rgba( 255, 136, 255, 1 ); /* brand accent color, used for search highlights */ + --ACCENT-color: rgb(255, 102, 78); /* brand accent color, used for search highlights */ --MAIN-TEXT-color: rgba( 0, 0, 0, 1 ); /* text color of content and h1 titles */ --MAIN-LINK-HOVER-color: rgba( 32, 40, 145, 1 ); /* hovered link color of content */ diff --git a/static/css/theme.css b/static/css/theme.css index a69e385ad5..0b2e048e18 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -525,12 +525,14 @@ body:not(.print) #R-body-inner.narrow p { mark { background: transparent; - border-radius: 0.8em 0.3em; + border-radius: 0.8em 0.3rem; -webkit-box-decoration-break: clone; box-decoration-break: clone; color: rgba( 0, 0, 0, 1 ); - margin: 0 -0.4em; - padding: 0.1em 0.4em; + -webkit-print-color-adjust: exact; + color-adjust: exact; + margin: 0 -0.4rem; + padding: 0.1em 0.4rem; } kbd { @@ -539,14 +541,16 @@ kbd { border-radius: 0.25rem; border-style: solid; border-width: 1px; - box-shadow: 0 1px 0 1px rgba( 134, 134, 134, .5 ); - font-size: 0.75em; + box-shadow: 0 .0625rem 0 .0625rem rgba( 134, 134, 134, .5 ); + -webkit-print-color-adjust: exact; + color-adjust: exact; + font-size: 0.75rem; line-height: 1; min-width: 0.75rem; - padding: 2px 5px 2px 5px; + padding: .125rem .3125rem .125rem .3125rem; position: relative; text-align: center; - top: -2px; + top: -.125rem; } h1 { diff --git a/static/js/theme.js b/static/js/theme.js index 53552ebd43..ba4fa8db3f 100644 --- a/static/js/theme.js +++ b/static/js/theme.js @@ -1323,9 +1323,9 @@ function mark() { var value = sessionStorage.getItem( window.relearn.absBaseUri + '/search-value' ); var highlightableElements = document.querySelectorAll( '.highlightable' ); - highlight( highlightableElements, value, { element: 'mark' } ); + highlight( highlightableElements, value, { element: 'mark', className: 'search' } ); - var markedElements = document.querySelectorAll( 'mark' ); + var markedElements = document.querySelectorAll( 'mark.search' ); for( var i = 0; i < markedElements.length; i++ ){ var parent = markedElements[i].parentNode; while( parent && parent.classList ){ @@ -1410,7 +1410,7 @@ function highlightNode( node, re, nodeName, className ){ function unmark() { sessionStorage.removeItem( window.relearn.absBaseUri + '/search-value' ); - var markedElements = document.querySelectorAll( 'mark' ); + var markedElements = document.querySelectorAll( 'mark.search' ); for( var i = 0; i < markedElements.length; i++ ){ var parent = markedElements[i].parentNode; while( parent && parent.classList ){ @@ -1435,7 +1435,7 @@ function unmark() { } var highlighted = document.querySelectorAll( '.highlightable' ); - unhighlight( highlighted, { element: 'mark' } ); + unhighlight( highlighted, { element: 'mark', className: 'search' } ); psm && setTimeout( function(){ psm.update(); }, 10 ); }