random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-10-13 15:28:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

settings side pannel fixed

Browse Source
This commit is contained in:
Sakshi Gupta 2025-09-18 17:22:37 +05:30
parent 1f8d3ed682
commit e5db39cfa6
6 changed files with 78 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
less/documentDB.less
View File

@ -1740,7 +1740,7 @@ input::-webkit-calendar-picker-indicator {
flex: 1;
padding-left: 34px;
padding-right: 34px;
color: @BaseDark;
color: var(--colorNeutralForeground1);
overflow-y: auto;
overflow-x: auto;
margin: (2 * @MediumSpace) 0px;
@ -1749,7 +1749,7 @@ input::-webkit-calendar-picker-indicator {
.contextual-pane .panelMainContent {
padding-left: 34px;
padding-right: 34px;
color: @BaseDark;
// color: @BaseDark;
margin: (2 * @MediumSpace) 0px;
}

2
less/hostedexplorer.less
View File

@ -255,7 +255,7 @@ body {
flex: 1;
padding-left: 34px;
padding-right: 34px;
color: @BaseDark;
color: var(--colorNeutralForeground1);
overflow-y: auto;
overflow-x: hidden;
margin: (2 * @MediumSpace) 0px;

39
src/Explorer/Panes/PanelComponent.less
View File

@ -4,9 +4,8 @@
display: flex;
flex-direction: column;
min-height: 100%;
background-color: var(--colorNeutralBackground1, @BaseLight);
color: var(--colorNeutralForeground1, @BaseHigh);
color: var(--colorNeutralForeground2);
background-color: var(--colorNeutralBackground1);
.panelMainContent {
flex-grow: 1;
padding: 0 34px;
@ -27,19 +26,19 @@
margin: auto 0 auto @SmallSpace;
cursor: default;
vertical-align: middle;
color: var(--colorNeutralForeground1, @BaseHigh);
color: var(--colorNeutralForeground1);
}
.panelTextBold {
font-weight: 600;
line-height: 20px;
color: var(--colorNeutralForeground1, @BaseHigh);
color: var(--colorNeutralForeground1);
}
.panelTextField {
font-size: @mediumFontSize;
border: 1px solid var(--colorNeutralStroke1, #605e5c);
color: var(--colorNeutralForeground1, @BaseHigh);
color: var(--colorNeutralForeground1);
background-color: var(--colorNeutralBackground2, @BaseLight);
padding: 4px 10px;
width: @newCollectionPaneInputWidth;
@ -270,5 +269,31 @@
}
.panelSeparator::before {
background-color: #edebe9;
background-color: var(--colorNeutralStroke1);
}
.dark-theme-panel {
&.ms-Panel {
.ms-Panel-main {
background-color: var(--colorNeutralBackground1);
}
.ms-Panel-overlay {
background-color: var(--overlayBackground);
}
.ms-Panel-content {
background-color: var(--colorNeutralBackground1);
}
}
}
:global {
.ms-Panel-root {
background-color: transparent;
}
.ms-Panel-overlay {
background-color: var(--overlayBackground);
}
}

43
src/Explorer/Panes/PanelContainerComponent.tsx
View File

@ -62,13 +62,48 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
closeButtonAriaLabel={`Close ${this.props.headerText}`}
customWidth={this.props.panelWidth ? this.props.panelWidth : "440px"}
headerClassName="panelHeader"
className="dark-theme-panel"
onRenderNavigationContent={this.props.onRenderNavigationContent}
isFooterAtBottom={true}
styles={{
navigation: { borderBottom: "1px solid #cccccc" },
content: { padding: 0 },
header: { padding: "0 0 8px 34px" },
commands: { marginTop: 8, paddingTop: 0 },
navigation: {
borderBottom: "1px solid var(--colorNeutralStroke1)",
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)"
},
content: {
padding: 0,
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)"
},
header: {
padding: "0 0 8px 34px",
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)"
},
commands: {
marginTop: 8,
paddingTop: 0,
backgroundColor: "var(--colorNeutralBackground1)"
},
root: {
},
overlay: {
backgroundColor: "var(--overlayBackground)"
},
main: {
backgroundColor: "var(--colorNeutralBackground1)"
},
scrollableContent: {
backgroundColor: "var(--colorNeutralBackground1)"
},
footerInner: {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)"
},
closeButton: {
color: "var(--colorNeutralForeground1)"
}
}}
style={{ height: this.state.height }}
>

1
src/Main.tsx
View File

@ -64,6 +64,7 @@ import "./Shared/appInsights";
import { useConfig } from "./hooks/useConfig";
import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
import { isDarkMode } from "./hooks/useTheme";
import "./less/ThemeSystem.less";
// Initialize icons before React is loaded
initializeIcons(undefined, { disableWarnings: true });

10
src/less/ThemeSystem.less
View File

@ -1,7 +1,4 @@
@import "Common/Constants";
// Theme System
// Define CSS Custom Properties
@import "../../less/Common/Constants";
:root {
// Light theme variables
--colorNeutralBackground1: @BaseLight;
@ -14,6 +11,7 @@
--colorCompoundBrandStroke1: @SelectionColor;
--colorBrandForeground1: @LinkColor;
--colorPaletteRedForeground1: @ErrorColor;
--overlayBackground: rgba(0, 0, 0, 0.4);
}
// Dark theme variables
@ -28,6 +26,7 @@ body.isDarkMode {
--colorCompoundBrandStroke1: #4db6e8;
--colorBrandForeground1: #4db6e8;
--colorPaletteRedForeground1: #f25d5d;
--overlayBackground: rgba(0, 0, 0, 0.4);
}
// Theme Mixins
@ -61,7 +60,6 @@ body.isDarkMode {
}
}
// Global Fluent UI input overrides
:global {
.ms-TextField {
.ms-TextField-fieldGroup {
@ -72,13 +70,11 @@ body.isDarkMode {
}
}
// Common component theme mixins
.theme-panel() {
.theme-background();
.theme-border();
}
// Override Fluent UI focus states
:global {
.ms-Fabric--isFocusVisible .ms-Button:focus::after,
.ms-Fabric--isFocusVisible .ms-TextField:focus::after,