Files
cosmos-explorer/less/forms.less
sakshigupta12feb 2c31ec2a8d Dark theme for Explorer (#2185)
* First dark theme commits for command bar

* Updated theme on sidebar

* Updated tabs, sidebar, splash screen

* settings theme changes

* Dark theme applied to Monaco editor

* Dark theme to stored procedures

* Fixed sidebar scroll

* Updated scroll issue in sidebar

* Command bar items fixed

* Fixed lint errors

* fixed lint errors

* settings side panel fixed

* Second last iteration for css

* Fixed all the issues of css

* Updated the theme icon for now on DE to change the theme from portal/DE itself

* Formatting issue resolved

* Remove CloudShellTerminalComponent changes - revert to master version

* Fixed test issue

* Fixed formatting issue

* Fix tests: update snapshots and revert xterm imports for compatibility

* Fix xterm imports in CloudShellTerminalComponent to use @xterm packages

* Fix Cloud Shell component imports for compatibility

* Update test snapshots

* Fix xterm package consistency across all CloudShell components

* Fix TypeScript compilation errors in CloudShell components and query Documents

- Standardized xterm package imports across CloudShell components to use legacy 'xterm' package
- Fixed Terminal type compatibility issues in CommonUtils.tsx
- Added type casting for enableQueryControl property in queryDocuments.ts to handle Azure Cosmos SDK interface limitations
- Applied code formatting to ensure consistency

* Update failing snapshot tests

- Updated TreeNodeComponent snapshot tests for loading states
- Updated ThroughputInputAutoPilotV3Component snapshots for number formatting changes (10,00,000 -> 1,000,000)
- All snapshot tests now pass

* Fixed test issue

* Fixed test issue

* Updated the buttons for theme

* Updated the Theme changes based on portal theme changes

* Updated review comments

* Updated the duplicate code and fixed the fabric react error

* Few places styling added and resolving few comments

* Fixed errors

* Fixed comments

* Fixed comments

* Fixed comments

* Fixed full text policy issue for mongoru accounts

* Resolved comments for class Name and few others

* Added css for homepage in ru accounts

* Final commit with all the feedback issues resolved

* Lint error resolved

* Updated the review comments and few Ui issues

* Resolved review comments and changed header bg and active state color

* Moved svg code to different file and imported

* css fixed for the hpome page boxed for ru account

* Lint errors

* Fixed boxes issue in ru accounts

* Handled the initial theme from the portal

* Updated snap

* Update snapshots for TreeNodeComponent and CreateCopyJobScreensProvider tests

* Fix duplicate DataExplorerRoot test id causing Playwright strict mode violation

* Fix locale-dependent number formatting in ThroughputInputAutoPilotV3Component

---------

Co-authored-by: Sakshi Gupta <sakshig+microsoft@microsoft.com>
Co-authored-by: Sakshi Gupta <sakshig@microsoft.com>
2025-12-16 12:21:58 +05:30

228 lines
3.9 KiB
Plaintext

@import "./Common/Constants";
.dirty {
border: 1px solid #9b4f96;
}
.dirty:focus {
outline: 1px solid #9b4f96;
}
.tabForm {
padding: 12px 20px 20px 20px;
margin-left: 3px;
}
.storedTabForm {
padding-top: @LargeSpace;
}
.scaleSettingScrollable {
overflow-y: auto;
overflow-x: hidden;
height: 100%;
}
.disableFocusDefaults[tabindex] {
&:focus {
outline: none;
}
&:active {
outline: none;
}
}
.indexingPolicyEditor {
width: 100%;
height: calc(~"100vh - 400px");
}
.scaleDivison {
padding: @MediumSpace 0px @DefaultSpace 0px;
}
.scaleSettingTitle {
font-size: 14px;
cursor: pointer;
}
.autoScaleThroughputTitle {
margin-bottom: @SmallSpace;
}
.autoScaleDescription {
margin-top: 6px;
margin-bottom: @SmallSpace;
}
.ssExpandCollapseIcon {
width: 10px;
height: 10px;
}
.ssCollapseIcon {
margin-bottom: 5px;
}
.ssTextAllignment {
padding-left: 19px;
}
.throughputStorageBlock {
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
background-color: #ccc;
padding-left: 10px;
width: 315px;
}
.storageCapacityTitle {
padding: @LargeSpace 0px;
}
.throughputStorageValue {
font-size: 12px;
}
.estimatedCost,
.largePartitionKeyEnabled {
padding: @SmallSpace 0px @LargeSpace;
}
.storagePadding {
padding-top: 6px;
padding-bottom: 14px;
}
.dirtyTextbox {
width: 176px;
margin-top: 7px;
padding-left: 5px;
}
.formTitleFirst {
padding: @DefaultSpace (2 * @MediumSpace);
}
.formTitleTextbox {
padding: 0px 0px @DefaultSpace (2 * @MediumSpace);
}
.formTree {
border: 1px solid var(--colorNeutralStroke1);
color: var(--colorNeutralForeground1);
background-color: var(--colorNeutralBackground1);
padding: 0px 12px 1px 8px;
}
.formTree:hover {
border: 1px solid var(--colorNeutralStroke1Hover);
background-color: var(--colorNeutralBackground1Hover);
}
.formTree::placeholder {
color: var(--colorNeutralForeground2);
opacity: 1;
}
.formTree:active {
border: 1px solid var(--colorNeutralStroke1Pressed);
background-color: var(--colorNeutralBackground1Pressed);
}
.scaleForm {
padding-left: 8px;
color: @BaseDark;
border: 1px solid #969696;
min-width: @ScaleFormWidth;
&:hover {
background-color: #e6f8fe;
}
}
.formTitle {
margin-top: 16px;
margin-bottom: 4px;
}
.spUdfTriggerHeader {
padding: @DefaultSpace 0px @SmallSpace (2 * @MediumSpace);
}
.storedUdfTriggerEditor {
width: 100%;
height: 100%;
}
.unselectedRadio {
background-color: white;
border-color: #eee !important;
color: black !important;
}
.disabledRadio {
background-color: #a19f9d;
border-color: #eee !important;
color: white !important;
}
.selectedRadio {
background-color: @AccentMediumHigh;
border-color: #eee !important;
color: white !important;
cursor: pointer;
}
.selectedRadio:hover {
background-color: @AccentMediumHigh;
border-color: #eee !important;
color: white !important;
cursor: pointer;
}
.selectedRadio:active {
background-color: #0072c6;
border-color: #eee !important;
color: white !important;
cursor: pointer;
border: 1px solid #0072c6;
}
.selectedRadio.dirty {
background-color: #9b4f96;
}
.tabs {
margin: 0;
}
.formReadOnly {
background-color: #ddd;
border: 1px solid #969696;
min-width: 184px;
padding-left: 8px;
}
.migration:disabled {
background-color: #ccc;
}
.trigger-field {
width: 40%;
margin-top: 10px;
background-color: var(--colorNeutralBackground1);
color: var(--colorNeutralForeground1);
}
.trigger-field input::placeholder {
color: var(--colorNeutralForeground3);
opacity: 1;
}
.trigger-form {
background-color: var(--colorNeutralBackground1);
color: var(--colorNeutralForeground1);
padding: 10px 30px;
}