From db1f090948ca831466fb8123d2ef7f2686b17e3a Mon Sep 17 00:00:00 2001 From: Rohini-Microsoft Date: Fri, 14 Jun 2024 20:46:40 +0530 Subject: [PATCH 1/4] added css for high constast changes and resizing 200% --- .../src/components/Answer/Answer.module.css | 17 ++++++++++++--- code/frontend/src/pages/chat/Chat.module.css | 21 ++++++++++++++++++- .../src/pages/layout/Layout.module.css | 3 ++- 3 files changed, 36 insertions(+), 5 deletions(-) diff --git a/code/frontend/src/components/Answer/Answer.module.css b/code/frontend/src/components/Answer/Answer.module.css index fe626ec5e..1667baa59 100644 --- a/code/frontend/src/components/Answer/Answer.module.css +++ b/code/frontend/src/components/Answer/Answer.module.css @@ -180,11 +180,22 @@ sup { @media (max-width: 500px) { .answerFooter { - flex-direction: column; + flex-direction: column; } - + .citationContainer { width: 100%; overflow-y: auto; } - } \ No newline at end of file + } + +@media screen and (max-width: 1280px) { + .answerContainer, .answerText { + font-size: 0.6rem !important; + } + + .answerDisclaimer, .accordionTitle, .citationContainer{ + font-size: 0.5rem !important; + } + +} diff --git a/code/frontend/src/pages/chat/Chat.module.css b/code/frontend/src/pages/chat/Chat.module.css index 19ebec61d..d5a1e71a0 100644 --- a/code/frontend/src/pages/chat/Chat.module.css +++ b/code/frontend/src/pages/chat/Chat.module.css @@ -317,10 +317,29 @@ background-color: Window; color: WindowText; } + + .citationPanel , .citationPanelHeader, .citationPanelTitle, .citationPanelContent{ + border: 2px solid WindowText; + padding: 10px; + background-color: Window; + color: WindowText; + } } @media screen and (max-width: 1280px) { .clearChatBroom { - left: -17px !important; + left: -23px !important; + } + .citationPanelContent,.chatMessageUserMessage{ + font-size: 0.6rem !important; + } + textarea{ + font-size: 0.6rem !important; + } + .citationPanelHeader{ + font-size: 1rem !important; + } + .citationPanelTitle{ + font-size: 0.8rem !important; } } diff --git a/code/frontend/src/pages/layout/Layout.module.css b/code/frontend/src/pages/layout/Layout.module.css index 96bf2b109..087ba3a13 100644 --- a/code/frontend/src/pages/layout/Layout.module.css +++ b/code/frontend/src/pages/layout/Layout.module.css @@ -132,7 +132,8 @@ body { @media screen and (-ms-high-contrast: active), (forced-colors: active) { -.shareButtonContainer{ +.shareButtonContainer, .headerTitleContainer{ border: 2px solid WindowText; } + } From b3fb6cde0fa95b6fea839c8f9fc628832d6a9062 Mon Sep 17 00:00:00 2001 From: Rohini-Microsoft Date: Fri, 14 Jun 2024 20:57:06 +0530 Subject: [PATCH 2/4] added borders in answer panel in high contrast mode --- code/frontend/src/components/Answer/Answer.module.css | 10 ++++++++++ code/frontend/src/pages/chat/Chat.module.css | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/code/frontend/src/components/Answer/Answer.module.css b/code/frontend/src/components/Answer/Answer.module.css index 1667baa59..08078f0a2 100644 --- a/code/frontend/src/components/Answer/Answer.module.css +++ b/code/frontend/src/components/Answer/Answer.module.css @@ -189,6 +189,16 @@ sup { } } + /* High contrast mode specific styles */ + @media screen and (-ms-high-contrast: active), (forced-colors: active) { + .answerContainer{ + border: 2px solid WindowText; + padding: 10px; + background-color: Window; + color: WindowText; + } +} + @media screen and (max-width: 1280px) { .answerContainer, .answerText { font-size: 0.6rem !important; diff --git a/code/frontend/src/pages/chat/Chat.module.css b/code/frontend/src/pages/chat/Chat.module.css index d5a1e71a0..bb61b3be0 100644 --- a/code/frontend/src/pages/chat/Chat.module.css +++ b/code/frontend/src/pages/chat/Chat.module.css @@ -311,7 +311,7 @@ /* High contrast mode specific styles */ @media screen and (-ms-high-contrast: active), (forced-colors: active) { - .chatContainer { + .chatContainer, .chatMessageUserMessage { border: 2px solid WindowText; padding: 10px; background-color: Window; From f5be413dbf6173d1b66639587e10a541d54af1d5 Mon Sep 17 00:00:00 2001 From: Rohini-Microsoft Date: Wed, 19 Jun 2024 19:09:17 +0530 Subject: [PATCH 3/4] fontsize and gap between logo and maincontriner is fixed --- code/frontend/src/components/Answer/Answer.module.css | 3 ++- code/frontend/src/pages/chat/Chat.module.css | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/code/frontend/src/components/Answer/Answer.module.css b/code/frontend/src/components/Answer/Answer.module.css index 08078f0a2..4da527f76 100644 --- a/code/frontend/src/components/Answer/Answer.module.css +++ b/code/frontend/src/components/Answer/Answer.module.css @@ -199,7 +199,8 @@ sup { } } -@media screen and (max-width: 1280px) { +/* Styles for 1280p resolution at 200% zoom */ +@media screen and (max-width: 640px) { .answerContainer, .answerText { font-size: 0.6rem !important; } diff --git a/code/frontend/src/pages/chat/Chat.module.css b/code/frontend/src/pages/chat/Chat.module.css index bb61b3be0..5d829e4b1 100644 --- a/code/frontend/src/pages/chat/Chat.module.css +++ b/code/frontend/src/pages/chat/Chat.module.css @@ -326,7 +326,8 @@ } } -@media screen and (max-width: 1280px) { +/* Styles for 1280p resolution at 200% zoom */ +@media screen and (max-width: 640px) { .clearChatBroom { left: -23px !important; } From ca7e0f7042791e5273ddf565971f94a6ad7312e6 Mon Sep 17 00:00:00 2001 From: Rohini-Microsoft Date: Wed, 19 Jun 2024 19:10:23 +0530 Subject: [PATCH 4/4] removed padding --- code/frontend/src/pages/layout/Layout.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/code/frontend/src/pages/layout/Layout.module.css b/code/frontend/src/pages/layout/Layout.module.css index 087ba3a13..cb35b4a11 100644 --- a/code/frontend/src/pages/layout/Layout.module.css +++ b/code/frontend/src/pages/layout/Layout.module.css @@ -8,7 +8,6 @@ body { .header, .footer { width: 100%; max-width: 1200px; - padding: 1rem; box-sizing: border-box; }