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

updated scroll issue in sidebar

Browse Source
This commit is contained in:
Sakshi Gupta 2025-08-28 12:09:58 +05:30
parent 17d08c0433
commit 8db11493a1
1 changed files with 242 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,6 +4,8 @@
display: flex;
flex-direction: column;
min-height: 100%;
background-color: var(--colorNeutralBackground1, @BaseLight);
color: var(--colorNeutralForeground1, @BaseHigh);
.panelMainContent {
flex-grow: 1;
@ -25,19 +27,31 @@
margin: auto 0 auto @SmallSpace;
cursor: default;
vertical-align: middle;
color: var(--colorNeutralForeground1, @BaseHigh);
}
.panelTextBold {
font-weight: 600;
line-height: 20px;
color: var(--colorNeutralForeground1, @BaseHigh);
}
.panelTextField {
font-size: @mediumFontSize;
border: 1px solid #605e5c;
color: #000;
border: 1px solid var(--colorNeutralStroke1, #605e5c);
color: var(--colorNeutralForeground1, @BaseHigh);
background-color: var(--colorNeutralBackground2, @BaseLight);
padding: 4px 10px;
width: @newCollectionPaneInputWidth;
&::placeholder {
color: var(--colorNeutralForeground3, @BaseMediumHigh);
}
&:focus {
border-color: var(--colorCompoundBrandStroke1, @SelectionColor);
outline: none;
}
}
.panelRadioBtn {
@ -47,6 +61,7 @@
.panelRadioBtnLabel {
font-size: @mediumFontSize;
padding: 0 @LargeSpace 0 @SmallSpace;
color: var(--colorNeutralForeground1, @BaseHigh);
}
.panelSectionSpinner {
@ -55,17 +70,61 @@
left: 50%;
transform: translate(-50%, -50%);
}
// Override Fluent UI component styles to use theme variables
.ms-Dropdown {
.ms-Dropdown-title {
background-color: var(--colorNeutralBackground2, @BaseLight);
border-color: var(--colorNeutralStroke1, #605e5c);
color: var(--colorNeutralForeground1, @BaseHigh);
}
.ms-Dropdown-caretDownWrapper {
color: var(--colorNeutralForeground1, @BaseHigh);
}
}
.ms-Checkbox {
.ms-Checkbox-label {
color: var(--colorNeutralForeground1, @BaseHigh);
}
}
.ms-TextField {
.ms-TextField-fieldGroup {
background-color: var(--colorNeutralBackground2, @BaseLight);
border-color: var(--colorNeutralStroke1, #605e5c);
}
.ms-TextField-field {
background-color: var(--colorNeutralBackground2, @BaseLight);
color: var(--colorNeutralForeground1, @BaseHigh);
&::placeholder {
color: var(--colorNeutralForeground3, @BaseMediumHigh);
}
}
}
.ms-Text {
color: var(--colorNeutralForeground1, @BaseHigh);
}
span, label {
color: var(--colorNeutralForeground1, @BaseHigh);
}
}
}
.panelHeader {
color: @BaseDark;
color: var(--colorNeutralForeground1, @BaseDark);
font-size: @largeFontSize;
font-weight: 400;
}
.panelInfoErrorContainer {
background-color: @BaseLow;
background-color: var(--colorNeutralBackground3, @BaseLow);
color: var(--colorNeutralForeground1, @BaseHigh);
padding: @DefaultSpace;
display: inline-flex;
margin: 20px 34px 0 34px;
@ -77,15 +136,15 @@
}
.panelWarningIcon {
color: @WarningIconColor;
color: var(--colorPaletteYellowForeground1, @WarningIconColor);
}
.panelErrorIcon {
color: @ErrorIconColor;
color: var(--colorPaletteRedForeground1, @ErrorIconColor);
}
.panelLargeInfoIcon {
color: @InfoIconColor;
color: var(--colorBrandForeground1, @InfoIconColor);
}
.panelWarningErrorDetailsLinkContainer {
@ -94,16 +153,22 @@
padding-left: @MediumSpace;
.paneErrorLink {
color: @LinkColor;
color: var(--colorBrandForeground1, @LinkColor);
cursor: pointer;
font-size: @mediumFontSize;
}
.panelWarningErrorMessage {
color: var(--colorNeutralForeground1, @BaseHigh);
}
}
}
.panelFooter {
padding: 16px 34px;
border-top: solid 1px #bbbbbb;
border-top: solid 1px var(--colorNeutralStroke1, #bbbbbb);
background-color: var(--colorNeutralBackground1, @BaseLight);
color: var(--colorNeutralForeground1, @BaseHigh);
& button {
height: 30px;
@ -178,5 +243,172 @@
margin: 20px 0px 0px 0px;
}
.panelSeparator::before {
background-color: #edebe9;
background-color: var(--colorNeutralStroke1, #edebe9);
}
// Override mandatory star color using theme variables
.mandatoryStar {
color: var(--colorPaletteRedForeground1, #d13438) !important;
}
// Override Fluent UI Panel component to use theme variables consistently
.ms-Panel {
background-color: var(--colorNeutralBackground1, @BaseLight);
color: var(--colorNeutralForeground1, @BaseHigh);
.ms-Panel-main {
background-color: var(--colorNeutralBackground1, @BaseLight);
}
.ms-Panel-contentInner {
background-color: var(--colorNeutralBackground1, @BaseLight);
}
.ms-Panel-header {
background-color: var(--colorNeutralBackground1, @BaseLight);
color: var(--colorNeutralForeground1, @BaseHigh);
}
.ms-Panel-headerText {
color: var(--colorNeutralForeground1, @BaseHigh);
}
.ms-Panel-closeButton {
color: var(--colorNeutralForeground1, @BaseHigh);
&:hover {
background-color: var(--colorNeutralBackground1Hover, @BaseLow);
}
}
}
// Dark theme overrides when body has isDarkMode class
body.isDarkMode {
.panelFormWrapper {
background-color: var(--colorNeutralBackground1, #1e1e1e);
color: var(--colorNeutralForeground1, #ffffff);
.panelMainContent {
.panelInfoIcon {
color: var(--colorNeutralForeground1, #ffffff);
}
.panelTextBold {
color: var(--colorNeutralForeground1, #ffffff);
}
.panelTextField {
border: 1px solid var(--colorNeutralStroke1, #484848);
color: var(--colorNeutralForeground1, #ffffff);
background-color: var(--colorNeutralBackground2, #2d2d2d);
&::placeholder {
color: var(--colorNeutralForeground3, #a0a0a0);
}
&:focus {
border-color: var(--colorCompoundBrandStroke1, #4db6e8);
}
}
.panelRadioBtnLabel {
color: var(--colorNeutralForeground1, #ffffff);
}
// Dark theme Fluent UI component overrides
.ms-Dropdown {
.ms-Dropdown-title {
background-color: var(--colorNeutralBackground2, #2d2d2d);
border-color: var(--colorNeutralStroke1, #484848);
color: var(--colorNeutralForeground1, #ffffff);
}
.ms-Dropdown-caretDownWrapper {
color: var(--colorNeutralForeground1, #ffffff);
}
}
.ms-Checkbox {
.ms-Checkbox-label {
color: var(--colorNeutralForeground1, #ffffff);
}
}
.ms-TextField {
.ms-TextField-fieldGroup {
background-color: var(--colorNeutralBackground2, #2d2d2d);
border-color: var(--colorNeutralStroke1, #484848);
}
.ms-TextField-field {
background-color: var(--colorNeutralBackground2, #2d2d2d);
color: var(--colorNeutralForeground1, #ffffff);
&::placeholder {
color: var(--colorNeutralForeground3, #a0a0a0);
}
}
}
.ms-Text {
color: var(--colorNeutralForeground1, #ffffff);
}
span, label {
color: var(--colorNeutralForeground1, #ffffff);
}
}
}
.panelHeader {
color: var(--colorNeutralForeground1, #ffffff);
}
.panelInfoErrorContainer {
background-color: var(--colorNeutralBackground3, #404040);
color: var(--colorNeutralForeground1, #ffffff);
.panelWarningErrorDetailsLinkContainer {
.panelWarningErrorMessage {
color: var(--colorNeutralForeground1, #ffffff);
}
}
}
.panelFooter {
background-color: var(--colorNeutralBackground1, #1e1e1e);
color: var(--colorNeutralForeground1, #ffffff);
border-top: solid 1px var(--colorNeutralStroke1, #484848);
}
// Dark theme Panel component overrides
.ms-Panel {
background-color: var(--colorNeutralBackground1, #1e1e1e);
color: var(--colorNeutralForeground1, #ffffff);
.ms-Panel-main {
background-color: var(--colorNeutralBackground1, #1e1e1e);
}
.ms-Panel-contentInner {
background-color: var(--colorNeutralBackground1, #1e1e1e);
}
.ms-Panel-header {
background-color: var(--colorNeutralBackground1, #1e1e1e);
color: var(--colorNeutralForeground1, #ffffff);
}
.ms-Panel-headerText {
color: var(--colorNeutralForeground1, #ffffff);
}
.ms-Panel-closeButton {
color: var(--colorNeutralForeground1, #ffffff);
&:hover {
background-color: var(--colorNeutralBackground1Hover, #404040);
}
}
}
}